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>
	</view>
</template>

<script>
	import configurl from '../../common/config.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: ''
			}
		},
		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, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: function(res) {
									uni.showLoading({
										title: '上传中...',
										mask: true, // 是否显示透明蒙层，防止触摸穿透
									});
									let token = uni.getStorageSync('token');
									uni.uploadFile({
										// url: config.APIHOST1 + '/alioss/upload', //仅为示例，非真实的接口地址
										url: 'https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload', //仅为示例，非真实的接口地址
										filePath: res.tempFilePaths[0],
										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();
													}
												});
										}
									});
								}
							});
						}
					}
				})
			},
			// 查看今日收入
			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>