sugarpark-mini-program/pages/info/wechat.vue

<template>
	<view class="container">
		<TopBar></TopBar>
		<view class="line-bar flex-between">
			<view class="span active"></view>
			<view class="span active"></view>
			<view class="span active"></view>
			<view class="span active"></view>
			<view class="span active"></view>
		</view>
		<view class="title font44 fw600">
			设置你的微信号
		</view>
		<view class="tip font28 fw400">
			如果你不在线，他可以添加你的微信
		</view>
		<view class="label-box flex-between">
			<view class="left font28 fw400">
				微信号
			</view>
		</view>
		<view class="input-box flex-between">
			<input type="text" maxlength="10" placeholder="请填写真实正确的微信号" placeholder-style="color:#494667;font-size:28rpx;" class="input fw500 font32" :value="wechat" @input="wechatInput">
		</view>
		<view class="select-title font28 fw400">
			设置查看权限
		</view>
		<picker mode="selector" :range="auths" range-key="value" @change="authsChange">
			<view class="select flex-between">
				<view class="select-val font28 fw400" :style="{'color':`${height===''?'':'#ffffff'}`}">
					{{auth}}
				</view>
				<image :src="`${assetsUrl}info-figure-select.png`" mode="aspectFill" class="select-icon"></image>
			</view>
		</picker>
		<cover-view class="btn font32 fw600" @click="sure">
			下一步
		</cover-view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";

	export default {
		components:{TopBar,ImageCropper},
		data() {
			return {
				assetsUrl:this.$util.assetsUrl,
				auths:[],
				auth:'',
				wechat:'',
				saveOption:{
					completeUser: {},
					weiXinStatusEnum: 'WxM2F5'
				}
			};
		},
		mounted() {
			let user=JSON.parse(uni.getStorageSync('user'));
			if(user.sex==='Famale'){
				this.auths=[
					{key:'WxM2F5',value:'对VIP公开或使用颜豆、权益卡查看'},
					{key:'WaitAuth',value:'经过我授权才能查看微信'},
				]
				this.auth='对VIP公开或使用颜豆、权益卡查看';
			}
			else if(user.sex==='Male'){
				this.auths=[
					{key:'WxF2M7',value:'对完成真人认证的女士公开'},
					{key:'WaitAuth',value:'经过我授权才能查看微信'},
				]
				this.auth='对完成真人认证的女士公开';
			}
		},
		methods:{
			sure(){
				
				let user=JSON.parse(uni.getStorageSync('user'));
				if(this.$util.checkChinese(this.wechat)){uni.showToast({title:'微信号格式有误，请重新输入',icon:'none'});return;}
				
				if(this.wechat===''&&user.sex==='Famale'){uni.showToast({title:'请填写微信号',icon:'none'});return;}
				user.wxId=this.wechat;
				this.saveOption.completeUser=user;
				uni.showLoading({
					title:'保存中',
					mask:true
				})
				this.$api.login.saveWechat(this.saveOption).then(res=>{
					uni.hideLoading();
					if(res.data.succ){
						uni.setStorageSync('regStep','Index');
						uni.setStorageSync('user',JSON.stringify(user));
						uni.showToast({
							icon:'success',
							title:'保存成功'
						});
						this.$api.public.wxConfig({status:this.saveOption.weiXinStatusEnum}).then(res=>{})
						this.getMineDetail();
						uni.switchTab({
							url:'/pages/friends/friends'
						})
					}
				})
				
			},
			wechatInput(e){
				let value=(e.detail.value||'').trim();
				if(value){
					const reg = /[\u4e00-\u9fa5]/ig;
					if ((reg.test(value))) {
						value = value.replace(reg, '');
						return;
					}
				}
				this.wechat=e.detail.value;
			},
			authsChange(e){
				this.auth=this.auths[e.detail.value].value;
				this.saveOption.weiXinStatusEnum=this.auths[e.detail.value].key;
			},
			confirm(e) {
				this.tempFilePath = ''
				this.cropFilePath = e.detail.tempFilePath;
				this.btnText="下一步";
				this.$refs.popup.close();
			},
			getMineDetail(){
				let user=JSON.parse(uni.getStorageSync('user'));
				this.$api.public.mineDetail({
					getAlbum:true,
					completeUser:user
				}).then(res=>{
					this.$store.commit('setUserInfo',res.data);
					uni.setStorageSync('userInfo',JSON.stringify(res.data));//正式环境删除
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	min-height: 100vh;
	background-color: $bgcolor1;
	.line-bar{
		margin: 0 60rpx;
		margin-top: 30rpx;
		.span{
			width: 120rpx;
			height: 8rpx;
			border-radius: 4rpx 0rpx 0rpx 4rpx;
			background-color: $bgcolor4;
		}
		.active{
			background-color: $primary;
		}
	}
	.title{
		color: $fontcolor5;
		padding-left: 60rpx;
		margin-top: 108rpx;
	}
	.tip{
		color: $fontcolor3;
		padding-left: 60rpx;
		margin-top: 8rpx;
	}
	
	.label-box{
		margin: 0 60rpx;
		margin-top: 56rpx;
		.left{
			color: $fontcolor3;
		}
	}
	.input-box{
		
		margin: 0rpx 60rpx;
		margin-top: 16rpx;
		background-color: $bgcolor3;
		border-radius: 16rpx;
		height: 112rpx;
		padding: 0rpx 32rpx;
		.input{
			color: $fontcolor5;
		}
		
	}
	.select-title{
		color: $fontcolor3;
		margin: 0 60rpx;
		margin-top: 56rpx;
	}
	.select{
		background-color: $bgcolor3;
		margin: 0 60rpx;
		margin-top: 16rpx;
		height: 112rpx;
		border-radius: 16px;
		padding: 0 36rpx;
		.select-val{
			color: $fontcolor1;
		}
		.select-icon{
			width: 24rpx;
			height: 24rpx;
		}
	}
	.btn{
		position: fixed;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 44rpx;
		margin: auto;
		width: 630rpx;
		height: 104rpx;
		border-radius: 52rpx;
		background-color: $primary;
		color: $fontcolor5;
		text-align: center;
		line-height: 104rpx;
	}
}
.input-num{
	color: $fontcolor2;
}
</style>