moxuan_takeaway_qishou_1/pages/riderMy/riderMy.vue

<template>
	<view class="bg">
		<view class="content">
			<!-- <u-navbar :is-back="true" :title="title"></u-navbar> -->
			<!-- 顶部 -->
			<view class="header">
				<!-- #ifdef MP-WEIXIN -->
				<view class="head_image">
					<button
						v-if="userId"
						open-type="chooseAvatar"
						@chooseavatar="onChooseAvatar"
						style="background-color: rgba(255, 255, 255, 0) !important; border: none !important; margin-top: 30rpx"
					>
						<image :src="avatar ? avatar : '../../static/logo.png'" style="border-radius: 50%"></image>
					</button>
					<image v-else :src="avatar ? avatar : '../../static/logo.png'" style="border-radius: 50%"></image>
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="head_image">
					<image v-if="userId" @click="upavatar()" :src="avatar ? avatar : '../../static/logo.png'" style="border-radius: 50%"></image>
					<image v-else :src="avatar ? avatar : '../../static/logo.png'" style="border-radius: 50%"></image>
				</view>
				<!-- #endif -->

				<view class="head_name" v-if="userId">
					<view class="name" @click="upNickName()">{{ nickName }}</view>
					<view v-if="XCXIsSelect != '否'">
						<view class="approve" v-if="checkCertification == '0'">实名认证审核中</view>
						<view class="approve" v-if="checkCertification == '1'">已实名</view>
						<view class="approve" @click="bindapprove" v-if="checkCertification == '2'">实名认证未通过</view>
						<view class="approve" @click="bindapprove" v-if="checkCertification == null">未实名认证</view>
					</view>
				</view>
				<view class="head_name" v-if="!userId">
					<button class="logins" @click="goLogin">登录</button>
				</view>
			</view>
		</view>
		<!-- 收入和订单 -->
		<view style="border-radius: 24rpx; overflow: hidden; width: 93%; margin: 0 auto; background: #ffffff" v-if="XCXIsSelect != '否'">
			<view class="user_box">
				<view class="box">
					<view class="user_name">
						<u-section title="今日收入" :right="false" line-color="#FE3B27"></u-section>
					</view>
					<view class="user_price">
						{{ indent.incomeday ? indent.incomeday : 0 }}
						<text>元</text>
					</view>
					<view class="user_tit">今日收入金额</view>
				</view>
				<view class="box">
					<view class="user_name">
						<u-section title="本月收入" :right="false" line-color="#009C66"></u-section>
					</view>
					<view class="user_price">
						{{ indent.incomemonth ? indent.incomemonth : 0 }}
						<text>元</text>
					</view>
					<view class="user_tit">本月收入金额</view>
				</view>
			</view>
			<view class="user_box">
				<view class="box">
					<view class="user_name">
						<u-section title="累计收入" :right="false" line-color="#FE3B27"></u-section>
					</view>
					<view class="user_price">
						{{ indent.incomesum ? indent.incomesum : 0 }}
						<text>元</text>
					</view>
					<view class="user_tit">累计收入金额</view>
				</view>
				<view class="box" @click="myOrders()">
					<view class="user_name">
						<u-section title="订单统计" :right="false" line-color="#009C66"></u-section>
					</view>
					<view class="user_price">
						{{ indent.indentCount ? indent.indentCount : 0 }}
						<text>单</text>
					</view>
					<view class="user_tit">今日完成单量</view>
				</view>
			</view>
		</view>
		<!-- 我的列表 -->
		<view class="mylist">
			<view v-if="XCXIsSelect != '否'" class="list_box" v-for="(item, index) in mylist" :key="index" @click="bindmy(item.name)">
				<view class="list_left">
					<view class="list_img">
						<image :src="item.image" mode="scaleToFill"></image>
					</view>
					<view class="list_name">{{ item.name }}</view>
				</view>
				<view class="list_right">
					<view v-if="item.messageCount" class="bott">{{ item.messageCount }}</view>
					<image src="../../static/my/icon_go.png"></image>
				</view>
			</view>
			<view v-if="XCXIsSelect == '否'" class="list_box" v-for="(item, index) in datalist" :key="index" @click="bindmy(item.name)">
				<view class="list_left">
					<view class="list_img">
						<image :src="item.image"></image>
					</view>
					<view class="list_name">{{ item.name }}</view>
				</view>
				<view class="list_right">
					<image src="../../static/my/icon_go.png"></image>
				</view>
			</view>
		</view>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
import configurl from '../../common/config.js'
import getLessLimitSizeImage from '@/utils/imageCompress.js'
export default {
	onShareAppMessage(res) {
		//发送给朋友
		return {
			title: this.tuiguang,
			path: '/pages/index/index',
			imageUrl: this.tuiguangImg
		}
	},
	onShareTimeline(res) {
		//分享到朋友圈
		return {
			title: this.tuiguang,
			path: '/pages/index/index',
			imageUrl: this.tuiguangImg
		}
	},
	data() {
		return {
			tuiguang: '',
			tuiguangImg: '',
			show: false,
			title: '我的',
			mylist: [
				{
					id: 1,
					name: '我的订单',
					image: '../../static/rider/77.png'
				},
				{
					id: 2,
					name: '资金账户',
					image: '../../static/rider/22.png'
				},
				{
					id: 3,
					name: '我的评价',
					image: '../../static/rider/33.png'
				},
				{
					id: 4,
					name: '违规申诉',
					image: '../../static/rider/44.png'
				},
				{
					id: 5,
					name: '联系客服',
					image: '../../static/my/8.png'
				},
				{
					id: 6,
					name: '消息中心',
					image: '../../static/rider/liaotin.png',
					messageCount: ''
				},
				{
					id: 7,
					name: '意见反馈',
					image: '../../static/rider/66.png'
				},

				{
					id: 9,
					name: '系统设置',
					image: '../../static/rider/55.png'
				}
			],
			datalist: [
				{
					id: 3,
					name: '我的评价',
					image: '../../static/rider/33.png'
				},
				{
					id: 4,
					name: '违规申诉',
					image: '../../static/rider/44.png'
				},
				{
					id: 5,
					name: '消息中心',
					image: '../../static/rider/liaotin.png'
				},
				// {
				// 	id: 6,
				// 	name: '用户协议',
				// 	image: '../../static/rider/66.png'
				// },
				// {
				// 	id: 7,
				// 	name: '隐私政策',
				// 	image: '../../static/rider/77.png'
				// },
				{
					id: 9,
					name: '系统设置',
					image: '../../static/rider/55.png'
				}
			],
			information: {}, //个人信息
			daySr: '',
			orders: '',
			indent: {},
			avatar: '',
			nickName: '匿名',
			checkCertification: '',
			userId: '',
			token: '',
			XCXIsSelect: '否',
			//messageCount: ''
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth
		}
	},
	onLoad() {
		this.$Request.getT('/app/common/type/331').then((res) => {
			if (res.code === 0) {
				uni.setStorageSync('tuiguang', res.data.value)
				this.tuiguang = res.data.value
			}
		})

		this.$Request.getT('/app/common/type/332').then((res) => {
			if (res.code === 0) {
				uni.setStorageSync('tuiguangImg', res.data.value)
				this.tuiguangImg = res.data.value
			}
		})
	},
	onShow() {
		this.mylist[5].messageCount = uni.getStorageSync('messageCount')

		this.XCXIsSelect = this.$queue.getData('XCXIsSelect')
		this.token = this.$queue.getData('token')
		this.userId = this.$queue.getData('userId')
		if (this.token) {
			this.shouru()
			this.getUserInfo(this.userId)
		} else {
			// this.goLogin();
		}
	},
	methods: {
		//微信填写能力获取头像
		onChooseAvatar(e) {
			console.log(e.detail.avatarUrl)
			let that = this
			let token = uni.getStorageSync('token')
			uni.showLoading({
				title: '上传中...',
				mask: true // 是否显示透明蒙层，防止触摸穿透
			})
			uni.uploadFile({
				// url: config.APIHOST1 + '/alioss/upload', //仅为示例，非真实的接口地址
				url: configurl.APIHOST2 + '/alioss/upload', //仅为示例，非真实的接口地址
				filePath: e.detail.avatarUrl,
				header: {
					token: token
				},
				name: 'file',
				success: (uploadFileRes) => {
					let url = JSON.parse(uploadFileRes.data).data
					that.$Request.postJson('/app/user/updateUserImageUrl?avatar=' + url).then((res) => {
						uni.hideLoading()
						if (res.code === 0) {
							that.$queue.showToast('更新成功')
							that.getUserInfo()
						}
					})
				},
				fail: (res) => {
					uni.showToast({
						title: res,
						icon: 'error'
					})
				}
			})
		},
		//修改用户名
		upNickName() {
			uni.navigateTo({
				url: './updateNickName'
			})
		},
		//修改用户头像
		upavatar() {
			let that = this
			var url = null
			let userId = this.$queue.getData('userId')
			uni.showActionSheet({
				// itemList按钮的文字接受的是数组
				itemList: ['查看头像', '从相册选择图片'],
				success(e) {
					var index = e.tapIndex
					if (index === 0) {
						// 用户点击了预览当前图片
						// 可以自己实现当前头像链接的读取
						let url = that.avatar
						let arr = []
						arr.push(url)
						uni.previewImage({
							// 预览功能图片也必须是数组的
							urls: arr
						})
					} else if (index === 1) {
						uni.chooseImage({
							count: 1,
							sourceType: ['album'],
							success: (res) => {
								let token = uni.getStorageSync('token')

								for (let i = 0; i < res.tempFiles.length; i++) {
									//这里的id和页面中写的html代码的canvas的id要一致
									let canvasId = 'zipCanvas'
									//原图的路径
									let imagePath = res.tempFiles[i].path
									//大小限制
									let limitSize = 1024 * 2
									//初始绘画区域是画布自身的宽度也就是屏幕宽度
									let drawWidth = uni.getSystemInfoSync().windowWidth
									let that = this
									getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
										uni.showLoading({
											title: '上传中'
										})
										uni.uploadFile({
											url: 'https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload',
											filePath: resPath,
											header: {
												token: token
											},
											name: 'file',
											success: (uploadFileRes) => {
												url = JSON.parse(uploadFileRes.data).data
												that.$Request.postJson('/app/user/updateUserImageUrl?avatar=' + url).then((res) => {
													uni.hideLoading()
													if (res.code === 0) {
														that.$queue.showToast('更新成功')
														that.getUserInfo()
													}
												})
											},
											fail: () => {
												uni.showToast({
													title: '上传失败',
													icon: 'error'
												})
											}
										})
									})
								}
							}
						})
					}
				}
			})
		},
		// 查看今日收入
		profit() {
			if (!this.userId) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return
			}
			uni.navigateTo({
				url: '/pages/riderMy/profit'
			})
		},
		// 查看订单统计
		myOrders() {
			if (!this.userId) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return
			}
			uni.navigateTo({
				url: '/pages/riderMy/order'
			})
		},
		bindapprove() {
			uni.navigateTo({
				url: '/pages/riderMy/approve/approve'
			})
		},
		bindmy(name) {
			console.log(name)
			let that = this

			if (!that.token) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return
			}

			if (name == '资金账户') {
				uni.navigateTo({
					url: '/pages/riderMy/myAccount/myAccount'
				})
			} else if (name == '我的订单') {
				uni.navigateTo({
					url: '/pages/riderMy/order'
				})
			} else if (name == '我的评价') {
				uni.navigateTo({
					url: '/pages/riderMy/myComment/myComment'
				})
			} else if (name == '联系客服') {
				uni.navigateTo({
					url: '/pages/riderMy/kefu/chat'
				})
			} else if (name == '用户协议') {
				uni.navigateTo({
					url: '/pages/riderMy/xieyi'
				})
			} else if (name == '隐私政策') {
				uni.navigateTo({
					url: '/pages/riderMy/mimi'
				})
			} else if (name == '违规申诉') {
				uni.navigateTo({
					url: '/pages/riderMy/myComplain/myComplain'
				})
			} else if (name == '培训中心') {
				uni.navigateTo({
					url: '/pages/riderMy/trainingList'
				})
			} else if (name == '消息中心') {
				uni.navigateTo({
					url: '/pages/riderMy/kefu/liaotian'
				})
			} else if (name == '系统设置') {
				uni.navigateTo({
					url: '/pages/riderMy/set/set'
				})
			} else if (name == '意见反馈') {
				uni.navigateTo({
					url: '/pages/riderMy/set/yijian'
				})
			}
		},
		//检测是否登录
		checkLogin() {},
		// 获取个人信息
		getUserInfo(userId) {
			this.$Request.getT('/app/tbindent/findUserInfoById').then((res) => {
				if (res.code == 0) {
					this.$nextTick(function () {
						this.avatar = res.data.avatar ? res.data.avatar : '../../static/logo.png'
						this.nickName = res.data.nickName
						uni.setStorageSync('userName', res.data.userName)
						uni.setStorageSync('phone', res.data.phone)
						this.checkCertification = res.data.checkCertification
						console.log(this.checkCertification, '实名认证')
						this.userId = res.data.userId
					})
				} else {
					this.$queue.logout()
					uni.showModal({
						showCancel: false,
						title: '登录失败',
						content: res.msg
					})
				}
			})
		},
		// 今日收入、订单量
		shouru() {
			this.$Request.getT('/app/userinfo/findIncome').then((res) => {
				if (res.code == 0) {
					// this.daySr = res.data.income
					// this.orders = res.data.indentCount
					this.indent = res.data
				}
				console.log('res', res)
			})
		},
		// 跳转去登录
		goLogin() {
			// this.$queue.setData('href', '/pages/my/index');
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}
}
</script>

<style>
button::after {
	border: none;
	/* background-color: none; */
}
.u-icon__icon {
	font-size: 35rpx !important;
	font-weight: bold !important;
}
.u-title {
	color: #000000 !important;
}

.u-navbar-fixed {
	background: none !important;
}

body {
	background: #f5f5f5;
}

.bg {
}

.logins {
	border: none;
	background: #f8501f;
	color: #fff;
	width: 200rpx;
	margin: 70rpx 20rpx;
	height: 70rpx;
	line-height: 70rpx;
}

.content {
	background: linear-gradient(0deg, #f5f5f5 0%, #fed9ba 100%);
	width: 100%;
}

/* 顶部 */
.header {
	width: 100%;
	height: 200rpx;
	display: flex;
}

.head_image {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.head_image image {
	width: 90rpx;
	height: 90rpx;
}

.head_name {
	flex: 4;
	position: relative;
	margin-left: -14rpx;
}

.name {
	position: absolute;
	top: 65rpx;
}

.approve {
	position: absolute;
	top: 100rpx;
	font-size: 24rpx;
	color: #999999;
}

/* 用户信息 */
.user_box {
	display: flex;
	height: 210rpx;

	position: relative;
	top: -15rpx;
	padding: 0 20rpx;
}

.box {
	flex: 1;
	/* margin-left: 40rpx; */
	margin-top: 40rpx;
}

.user_price {
	font-size: 44rpx;
	margin-top: 10rpx;
}

.user_price text {
	font-size: 21rpx;
	margin-left: 10rpx;
}

.user_tit {
	color: #b3b3b3;
	font-size: 21rpx;
	margin-top: 10rpx;
}

.u-section__title {
	font-weight: 500 !important;
	color: #333333 !important;
	font-size: 14px !important;
	padding-left: 10px;
}

/* 我的列表 */
.mylist {
	width: 93%;
	margin: 0 auto;
	background-color: #ffffff;
	margin-top: 10rpx;
	border-radius: 23rpx;
}

.list_box {
	width: 90%;
	margin: 0 auto;
	display: flex;
	height: 95rpx;
}

.list_left {
	flex: 1;
	display: flex;
	justify-content: left;
	align-items: center;
}

.list_img {
	margin-right: 10rpx;
	margin-top: 10rpx;
}

.list_img image {
	width: 32rpx;
	height: 32rpx;
}

.list_name {
	font-size: 25rpx;
	letter-spacing: 2rpx;
}

.list_right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.list_right image {
	width: 12rpx;
	height: 20rpx;
}

.bott {
	background: red;
	color: #ffffff;
	padding: 5rpx 10rpx;
	border-radius: 60%;
	font-size: 23rpx;
	margin-right: 15rpx;
}
</style>