zx_flk_app/pages/my/my_back.vue

<template>
	<view class="container-view">
		<view class="user">
			<view v-if="user_token" class="flex-row" style="flex-direction: column;">
				<!-- #ifdef MP-ALIPAY-->
				<view @tap="onChooseImg"><img class="user-img" :src="avatarUrl" /></view>
				<!-- #endif  -->
				<!-- #ifdef MP-WEIXIN -->
				<view>
					<button class="head_img" style="border: 4rpx solid #ffffff;" open-type="chooseAvatar"
						@chooseavatar="onChooseAvatar">
						<image class="head_img" :src="avatarUrl"></image>
					</button>
				</view>
				<!-- #endif -->
				<view class="user-information flex-row" style="flex-direction: column;">
					<view class="user-login">{{maskPhone}}</view>
					<view v-if="userInfo.is_auth==1&&userInfo.status!=1&&userInfo.status!=2"
						@click.native.stop="navToAuthIdentity" class="user-status">实名认证</view>
					<!-- 用户状态 userInfo.status 0: 未身份认证  1: 申请身份认证   2: 身份认证通过，账户正常   3: 身份认证不通过  4: 警告  5: 冻结 -->
					<view v-else-if="userInfo.status==2" class="ok-status">
						已实名
						<img src="https://qiniu.bms16.com/Fim_Fx9ghw2HiX9BI60GTmYKVTHB" />
					</view>
				</view>
			</view>
			<view @tap="navToLoignPage" v-if="!user_token" class="flex-row" style="flex-direction: column;">
				<view ><img class="user-img" :src="avatarUrl" /></view>
				<view class="user-information flex-row" style="flex-direction: column;">
					<view  class="user-phone">请点击登录</view>
				</view>
			</view>
			<!-- <view class="my-vip">
				<view class="vip-text">开卡立享骑行折扣</view>
				<view @tap="bindNotShow" class="activate-vip">立即开通</view>
			</view> -->
		</view>
		<view class="option">
			<view class="flex-row flex-between option-first">
				<view @tap="navToPage" data-url="/pages/wallet/wallet" class="flex-column my_function">
					<image class="my_icon" src="https://qiniu.bms16.com/Fkrp0-SQwgLdu2tPmbudScdRIg9A"></image>
					<view class="my_title_o">我的钱包</view>
				</view>
				<!-- <view @tap="bindNotShow" class="flex-column my_function">
					<image class="my_icon" src="https://qiniu.bms16.com/Fmt9-v5f8SiVadoFgNJol4z8bIGw"></image>
					<view class="my_title_o">优惠券</view>
				</view> -->
				<view @tap="navToPage" data-url="/pages/order/order" class="flex-column my_function">
					<image class="my_icon" src="https://qiniu.bms16.com/FpiqF1dfAWmUkWRbR1wcO3JNSKIL"></image>
					<view class="my_title_o">租车订单</view>
				</view>
<!-- 				<view @tap="navToPage" data-url="/pages/exchangeGuide/exchangeGuide" class="flex-column my_function">
					<image class="my_icon" src="https://qiniu.bms16.com/FpiqF1dfAWmUkWRbR1wcO3JNSKIL"></image>
					<view class="my_title_o">租车订单</view>
				</view> -->
				<view @tap="navToBattery" class="flex-column my_function">
					<image class="my_icon" src="https://qiniu.bms16.com/FjNIrru2jMEzfKEwZXRmisggxCII"></image>
					<view class="my_title_o">我的车辆</view>
				</view>
				<view @tap="navToPage" data-url="/pages/exchangeRecord/exchangeRecord" class="flex-column my_function">
					<image class="my_icon" src="https://qiniu.bms16.com/FnOA-7WRsxwMh3FiFLY5FWh3rfAY"></image>
					<view class="my_title_o">换电记录</view>
				</view>
				<!-- 判断是否绑定车牌才显示 我的车辆-->
				<!-- <view v-if="(car_list && (car_list.order_status == 2 || car_list.order_status == 3 || car_list.order_status == 4 ||car_list.order_status == 5))" 
					@tap="navToBattery" 
					class="flex-column my_function"> -->
				
			</view>
			<view class="flex-row flex-between option-first">
				<!-- #ifdef MP-ALIPAY-->
				<view @tap="bindNotShow" class="flex-column my_function">
					<image class="my_icon" src="https://qiniu.bms16.com/FgIm7yFZgw4YO5DiGlnHV2UXxjJr"></image>
					<view class="my_title_t">客服中心</view>
				</view>
				<!-- #endif  -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="contact" plain="true" style="border: none;"
					class="flex-column my_function service-btn">
					<image class="my_icon" src="https://qiniu.bms16.com/FgIm7yFZgw4YO5DiGlnHV2UXxjJr"></image>
					<view class="my_title_t">客服中心</view>
				</button>
				<!-- #endif -->
				<view @tap="navToPage" data-url="/pages/feedback/feedback" class="flex-column my_function">
					<image class="my_icon" src="https://qiniu.bms16.com/Ft6hjfFCvqNF_ReaSRAmngZLcNz7"></image>
					<view class="my_title_t">问题反馈</view>
				</view>
				<view @tap="loadNavToMy" class="flex-column my_function">
					<image class="my_icon" src="https://qiniu.bms16.com/FmjP9FC6J8kXeK0i2ox0zgLkOiow"></image>
					<view class="my_title_t">关于我们</view>
				</view>
				<view @tap="loadNavToInstall" class="flex-column my_function">
					<image class="my_icon" src="https://qiniu.bms16.com/FumqzeUKKbdeMwYew5PtfffC5lXP"></image>
					<view class="my_title_t">基础设置</view>
				</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN  -->
		<CustomTabbar curtTab="my" />
		<!-- #endif  -->
	</view>
</template>
<script>
	var config = require('../../common/config.js');
	var http = require('../../common/http.js');
	var common = require('../../common/common.js');
	var storage = require('../../common/storage.js')
	const defaultAvatarUrl = 'https://qiniu.bms16.com/FpzmRTePsa2QSxemAbc-xWdzSsn1'
	import CustomTabbar from '@/component/customTabbar/index';
	export default {
		data() {
			return {
				user_token: '',
				avatarUrl: defaultAvatarUrl,
				userInfo: {},
				trust_deposit: {},
				maskPhone: '',
				app_version: '',
				appConfig: null,
				face_token: '',
				face_key: '',
				myLocation: {
					latitude: null,
					longitude: null
				},
				car_list: {

				}
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			const appConfig = storage.getAppConfig()
			this.app_version = config.APP_VERSION
			this.appConfig = appConfig
			const locationStr = uni.getStorageSync('user_current_location')
			if (locationStr) {
				this.myLocation = locationStr;
			}
			
		},
		components: { CustomTabbar },
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			const appConfig = storage.getAppConfig()
			const user_token = storage.getUserToken()
			this.user_token = user_token
			if (this.user_token) {
				this.loadUserInfo()
			}
			// 监听用户车辆是否解绑
			this.car_list = uni.getStorageSync('user_car_list') || null

			// #ifdef MP-ALIPAY
			
			if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
				this.$scope.getTabBar().setData({
					curtTab: 1
				})
			}
			// #endif
		},
		
		// 分享给好友
		onShareAppMessage: function(res) { //发送给朋友
			return {
				title: this.appConfig.app_name,
				path: 'pages/my/my',
			}
		},
		
		methods: {
			loadUserInfo() {
				var userInfo = storage.getUserInfoData()
				const maskPhone = common.maskPhoneNumber(userInfo.userInfo.phone)
				this.setData({
					userInfo: userInfo.userInfo,
					avatarUrl: userInfo.userInfo.headimg || this.avatarUrl,
					maskPhone: maskPhone
				})
				this.trust_deposit = userInfo.trust_deposit
			},

			loadIsLogin(url_page) {
				const user_token = storage.getUserToken()
				if (!user_token) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，请先登录',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确定',
						success: function(res) {
							if (res.confirm) {
								//#ifdef MP-ALIPAY
								uni.navigateTo({
									url: '/pages/phoneLogin/phoneLogin',
								})
								//#endif
								//#ifdef MP-WEIXIN
								uni.navigateTo({
									url: '/pages/login/login',
								})
								//#endif
							}
						},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else {
					uni.navigateTo({
						url: url_page,
					})
				}
			},

			navToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},

			navToPage(e) {
				const me = this
				const url = e.currentTarget.dataset.url;
				if (!url) {
					return;
				}
				if (me.userInfo.is_auth - 0 == 1 && me.userInfo.status - 0 == 2) {
					uni.navigateTo({
						url: url
					});
				} else if (me.userInfo.is_auth - 0 == 1 && me.userInfo.status - 0 != 2) {
					uni.showModal({
						title: '身份认证提示',
						content: '尚未完成身份认证，是否进行身份认证?',
						cancelText: '取消',
						confirmText: '确定',
						success: function(res) {
							if (res.confirm) {
								me.loadFaceToken()
							}
						},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录，请先登录',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确定',
						success: function(res) {
							if (res.confirm) {
								//#ifdef MP-ALIPAY
								uni.navigateTo({
									url: '/pages/phoneLogin/phoneLogin',
								})
								//#endif
								//#ifdef MP-WEIXIN
								uni.navigateTo({
									url: '/pages/login/login',
								})
								//#endif
							}
						},
						fail: function(res) {},
						complete: function(res) {},
					})
				}
			},

			loadNavToMy() {
				uni.navigateTo({
					url: '/pages/aboutMy/aboutMy?app_version=' + this.app_version,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

			loadNavToInstall() {
				const user_token = storage.getUserToken()
				if (!user_token) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，请先登录',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确定',
						success: function(res) {
							if (res.confirm) {
								//#ifdef MP-ALIPAY
								uni.navigateTo({
									url: '/pages/phoneLogin/phoneLogin',
								})
								//#endif
								//#ifdef MP-WEIXIN
								uni.navigateTo({
									url: '/pages/login/login',
								})
								//#endif
							}
						},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else {
					uni.navigateTo({
						url: '/pages/install/install?app_version=' + this.app_version,
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				}
			},

			onChooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.avatarUrl = res.tempFilePaths[0]; // 选择图片后返回的路径
					}
				});
			},

			onChooseAvatar(e) {
				this.uploadAvatar(e.detail.avatarUrl)
			},

			uploadAvatar(avatarFile) {
				const me = this
				http.getApi(config.API_QINIU_UP_IMG_TOKEN, {}, function(response) {
					if (response.data.code === 200) {
						const token = response.data.data.token
						uni.uploadFile({
							url: config.QINIU_UPLOAD_SITE,
							filePath: avatarFile,
							name: 'file',
							formData: {
								token: token
							},
							success: function(res1) {
								var rtDataObj = JSON.parse(res1.data);
								const key = rtDataObj.key
								var imgUrl = config.QINIU_SITE + key
								me.setData({
									avatarUrl: imgUrl
								})
								http.postApi(config.API_REPORT_USER_INFO, {
									avatarUrl: imgUrl
								}, function(rs2) {
									if (rs2.data.code == 200) {}
								});
							},
							fail: function(res) {
								common.simpleToast('上传失败')
								uni.hideLoading()
							},
						})
					} else {
						common.simpleToast(response.data.msg)
						uni.hideLoading()
					}
				})
			},

			navToAuthIdentity() {
				http.postApi(config.API_USER_FACE_TOKEN, {}, (resp) => {
					if (resp.data.code === 200) {
						this.face_token = resp.data.data.token
						this.face_key = resp.data.data.key
						uni.navigateTo({
							url: '/pages/livenessView/livenessView?face_token=' + this.face_token +
								'&face_key=' + this.face_key,
							success: function(res) {},
							fail: function(res) {},
							complete: function(res) {},
						})
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},

			navToLoignPage() {
				//#ifdef MP-ALIPAY
				uni.navigateTo({
					url: '/pages/phoneLogin/phoneLogin',
				})
				//#endif
				//#ifdef MP-WEIXIN
				uni.navigateTo({
					url: '/pages/login/login',
				})
				//#endif
			},

			bindNotShow() {
				common.simpleToast('功能暂未开放')
			},

			loadCarList() {
				return new Promise((resolve, reject) => {
					http.postApi(config.API_DAYHIRE_CAR_CAR_LIST, {}, (resp) => {
						if (resp.data.code !== 200) return
						const carList = resp.data.data.data || []
						const plate_number = carList.length > 0 ? carList[0].license_plate_number : ''
						let carData = {}
						if (carList.length) {
							carData = {
								plate_number
							}
						}
						resolve(carData)
					})
				})
			},

			navToBattery() {
				const me = this
				const user_token = storage.getUserToken()
				if (!user_token) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，请先登录',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确定',
						success: function(res) {
							if (res.confirm) {
								//#ifdef MP-ALIPAY
								uni.navigateTo({
									url: '/pages/phoneLogin/phoneLogin',
								})
								//#endif
								//#ifdef MP-WEIXIN
								uni.navigateTo({
									url: '/pages/login/login',
								})
								//#endif
							}
						},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else {
					if(me.car_list&&me.car_list.order_status == 2) {
						uni.showModal({
							title: '提示',
							content: '是否前往激活车辆页面？',
							// showCancel: false,
							confirmText: '确定',
							success: function(res) {
								// 扫码租车
								uni.navigateTo({
									url: '/pages/activation/activation?plate_number=' + me
										.car_list.plate_number,
									success: function(res) {},
									fail: function(res) {},
									complete: function(res) {}
								});
							},
							fail: function(res) {},
							complete: function(res) {},
						})
					}else if(me.car_list&&me.car_list.order_status == 5) {
						uni.showModal({
							title: '提示',
							content: '请等待商家确认还车',
							showCancel: false,
							confirmText: '确定',
							success: function(res) {
								return false
							},
							fail: function(res) {},
							complete: function(res) {},
						})
					}else{
						this.loadCarList().then(carData => {
							console.log('carData', carData)
							uni.navigateTo({
								url: '/pages/battery/battery' + '?plate_number=' + carData.plate_number,
								success: function(res) {},
								fail: function(res) {},
								complete: function(res) {},
							})
						})
					}
				}
			},
			
			loadFaceToken() {
				const me = this
				http.postApi(config.API_USER_FACE_TOKEN, {}, (resp) => {
					if (resp.data.code === 200) {
						me.face_token = resp.data.data.token
						me.face_key = resp.data.data.key
						uni.navigateTo({
							url: '/pages/livenessView/livenessView?face_token=' + me.face_token +
								'&face_key=' + this.face_key,
							success: function(res) {},
							fail: function(res) {},
							complete: function(res) {},
						})
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},
		}
	};
</script>

<style>
	@import './my.css';
</style>