shangmenanmo/user/pages/setting.vue

<template>
	<view class="mine-pages-setting">
		<view class="flex-center flex-column pd-lg fill-base">
			<view class="space-lg"></view>
			<view class="space-lg"></view>
			<!-- #ifdef H5 -->
			<view class="avatar radius">
				<view class="h5-image avatar radius" :style="{ backgroundImage : `url('${user_info.avatarUrl}')`}">
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<image mode="aspectFill" class="avatar radius" :src="user_info.avatarUrl"></image>
			<!-- #endif -->

			<view @tap.stop="toResetPhone" class="flex-y-center f-title c-caption mt-md" v-if="user_info.phone">
				{{user_info.split_phone}}
				<view class="ml-md f-caption" :style="{color:primaryColor}" v-if="configInfo.short_code_status">
					更换手机号</view>
			</view>
		</view>
		<view class="flex-between pd-lg fill-base f-paragraph">
			<view>昵称</view>
			<view class="c-caption">{{user_info.nickName}}</view>
		</view>
		<view class="flex-between pd-lg fill-base f-paragraph">
			<view>注册时间</view>
			<view class="c-caption">{{user_info.create_date || '-'}}</view>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<view @tap.stop="$util.goUrl({url:`/user/pages/alipay-account`})"
			class="flex-between pd-lg fill-base f-paragraph">
			<view>支付宝账号</view>
			<view class="flex-y-center c-caption">{{user_info.split_alipay_number || '暂无'}}
				<view class="ml-md" :style="{color:primaryColor}">{{user_info.alipay_number?'修改':'去设置'}}</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="space-md"></view>
		<view @tap.stop="goDetail(index,'infoList',item)" class="flex-between pd-lg fill-base f-paragraph"
			v-for="(item,index) in infoList" :key="index">
			<view>{{item.text}}</view>
			<i class="iconfont icon-right"></i>
		</view>
		<view class="space-max-footer"></view>


		<!-- #ifdef H5 -->
		<fix-bottom-button @confirm="toLoginOut" :text="[{ text: '退出登录', type: 'confirm' }]" bgColor="#fff">
		</fix-bottom-button>
		<!-- #endif -->

		
		<fix-bottom-button @cancel="$util.goUrl({url:`/user/pages/logout`})" @confirm="toLoginOut"
			:text="[{ text: '注销账户', type: 'cancel' },{ text: '退出登录', type: 'confirm' }]" bgColor="#fff">
		</fix-bottom-button>
		<!-- #ifdef APP-PLUS -->
		<!-- #endif -->

		<uni-popup ref="show_phone_item" :maskClick="false">
			<view @tap.stop.prevent class="common-popup-content popup-phone pd-lg flex-center flex-column fill-base">
				<view class="f-md-title c-black">请输入手机号</view>
				<view class="space-lg pb-lg"></view>
				<view class="space-lg pb-lg"></view>
				<view class="flex-center mb-lg">
					<view class="input-info sm mr-md radius-16">
						<input v-model="subForm.phone" type="number"
							class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title"
							placeholder-class="c-placeholder" :placeholder="rule[0].errorMsg" />
					</view>
					<view @tap="toSend" class="send-btn flex-center c-base radius-16"
						:style="{background:primaryColor}">
						{{authTime>0?`(${authTime}s)`:'发送'}}
					</view>
				</view>
				<view class="input-info radius-16">
					<input v-model="subForm.short_code" type="number"
						class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title" maxlength="6"
						placeholder-class="c-placeholder" :placeholder="rule[1].errorMsg" />
				</view>
				<view class="button">
					<view @tap.stop="toResetItem" class="item-child">
						取消
					</view>
					<view @tap.stop="submit" class="item-child" :style="{background: primaryColor,color:'#fff'}">
						确定
					</view>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	export default {
		data() {
			return {
				isLoad: false,
				options: {},
				infoList: [{
					text: '隐私政策',
					url: `/user/pages/protocol`
				}, {
					text: '服务协议',
					url: `/user/pages/information`
				}, {
					text: '屏蔽列表',
					url: `/user/pages/shield`
				}],
				user_info: {},
				authTime: 0,
				timer: null,
				subForm: {
					phone: '',
					short_code: ''
				},
				rule: [{
					name: "phone",
					checkType: "isMobile",
					errorMsg: "请输入手机号",
					regText: "手机号"
				}, {
					name: "short_code",
					checkType: "isNotNull",
					errorMsg: "请输入短信验证码",
					regText: "短信验证码"
				}],
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		async onLoad() {
			this.initIndex()
		},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateConfigItem', 'updateServiceItem', 'updateTechnicianItem', 'updateOrderItem',
				'updateUserItem'
			]),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				await this.getUserInfo()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.user_info = this.$util.deepCopy(this.userInfo)
			},
			initRefresh() {
				this.initIndex(true)
			},
			toResetPhone() {
				let {
					short_code_status = 0
				} = this.configInfo
				if (!short_code_status) return
				this.$refs.show_phone_item.open()
			},
			toResetItem() {
				this.$refs.show_phone_item.close()
				this.timer && clearTimeout(this.timer)
				this.authTime = 0
				this.subForm = {
					phone: '',
					short_code: ''
				}
			},
			//表单验证
			validate(param, is_send = false) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					if (name == 'short_code' && is_send) return
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async toSend() {
				let {
					authTime
				} = this
				if (authTime) return
				let {
					phone = ''
				} = this.subForm
				let msg = this.validate({
					phone
				}, true);
				if (msg) {
					this.$util.showToast({
						title: msg
					});
					return;
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.user.sendShortMsg({
						phone
					})
					this.$util.hideAll()
					this.lockTap = false
					let time = 60
					this.timer = setInterval(() => {
						if (time === 0) {
							clearInterval(this.timer)
							return
						}
						time--
						this.authTime = time
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
			async submit() {
				let param = this.$util.deepCopy(this.subForm)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					});
					return;
				}

				if (param.short_code.length != 6) {
					this.$util.showToast({
						title: `请输入6位数短信验证码`
					})
					return
				}

				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.user.bindUserPhone(param)
					this.$util.hideAll()
					this.lockTap = false
					this.toResetItem()
					await this.getUserInfo()
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
			opwaibu(){
				// #ifdef APP-PLUS
				plus.runtime.openWeb('https://www.shangmenanmmm.com/#/protocol')
				// #endif
			},
			opwaibu1(){
				// #ifdef APP-PLUS
				plus.runtime.openWeb('https://anmoadmin.shangmenanmmm.com/information.html')
				// #endif
			},
			goDetail(index, key,i) {
				if(i.text=='隐私政策'){
					this.opwaibu()
				}else if(i.text=='服务协议'){
					this.opwaibu1()
				}else{
					let {
						url
					} = this[key][index]
					this.$util.goUrl({
						url
					})
				}
				
			},
			toLoginOut() {
				let methodArr = ['updateServiceItem', 'updateTechnicianItem']
				methodArr.map(item => {
					this[item]({
						key: 'pageActive',
						val: false
					})
				})

				let arr = ['autograph', 'userInfo', 'location', 'appLogin', 'loginType',
					'isGzhLogin', 'isShowLogin', 'mineInfo', 'coachInfo', 'userPageType', 'commonOptions'
				]
				arr.map(key => {
					this.updateUserItem({
						key,
						val: key === 'isShowLogin' ? true : key === 'isGzhLogin' ? false : key ===
							'userPageType' ? 1 : ''
					})
				})

				this.$util.showToast({
					title: `退出登录`
				})
				setTimeout(() => {
					// #ifdef H5
					let {
						siteroot
					} = siteInfo
					let url = siteroot.split('/index.php')[0]
					let href = `${url}/h5/#/pages/service`
					window.location.href = href
					// #endif
					// #ifdef APP-PLUS
					this.$util.goUrl({
						url: `/pages/service`,
						openType: `reLaunch`
					})
					// #endif
				}, 1000)
			}
		}
	}
</script>


<style lang="scss">
	.mine-pages-setting {
		.iconfont {
			color: #999
		}

		.popup-phone {
			width: 630rpx;

			.input-info {
				width: 570rpx;
				height: 90rpx;
				background: #F7F7F7;

				.item-input {
					height: 90rpx;
					font-size: 32rpx;
					text-align: left;
				}
			}

			.input-info.sm {
				width: 400rpx;
			}

			.send-btn {
				width: 150rpx;
				height: 90rpx;
			}
		}
	}
</style>