fundHoldApp/pages/mine/info/index.vue

<template>
	<view class="container-with-elep full-height-with-titile">
		<view style="border-radius: 20px; background-color: white; padding:10px;">
			<view style="font-weight: 500;">{{$t('me.info.basic')}}</view>
			<InfoItem :ph="languageData.me.personalAccount" :title="languageData.me.userType"
				icon-name="person-filled" :ro="true"></InfoItem>
			<InfoItem v-model="user.fullName" icon-name="person-filled" :title="$t('me.info.nickname')" :ro="!true">
			</InfoItem>
			<InfoItem :ph="user.registerTime" icon-name="calendar-filled" :title="$t('me.info.registerDate')"
				:ro="true"></InfoItem>
			<view style="font-weight: 500; margin-top: 20px;">{{$t('me.info.contact')}}</view>
			<uni-list>
				<InfoItem :ph="user.phone" :title="$t('me.info.phone')"
					icon-name="phone-filled" :ro="!true"></InfoItem>
				<InfoItem v-model="user.email" :ph="languageData.me.email" :title="languageData.me.email"
					icon-name="email-filled" :ro="false"></InfoItem>
				<InfoItem v-model="user.merchantName" icon-name="location-filled" :title="languageData.functions.BelongingRegion"
					:ro="false">
					<view  @click="addrClick('a')">
						<u--input :value="user.area" inputAlign="right" border="none" :disabled="da" :readonly="ro" clearable ></u--input>
					</view>
				</InfoItem>
				<InfoItem v-model="user.address" :ph="languageData.me.addrDetail" :title="languageData.functions.detailedAddress"
					icon-name="location-filled" :ro="false"></InfoItem>
				<InfoItem v-show="false" v-model="user.commonContactAddress" :ph="languageData.me.address"
					:title="languageData.me.address" icon-name="location-filled" :ro="false"></InfoItem>
			</uni-list>
			<view style="font-weight: 500; margin-top: 20px;">{{$t('me.info.auth')}}</view>
			<uni-list>
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'vip-filled'}"
					:title="$t('me.info.reviewStatus')" :rightText="getStatus(user.status)" />
				<view style="margin-top: 10px;">
					<uni-list-item v-if="user.status == '3'" showExtraIcon="true" :extraIcon="{type: 'location-filled'}"
						:title="languageData.me.failureReason" :rightText="user.failureReason" />
					<button @click="goAuth(0)" v-show="!['1','2','3'].includes(user.status)"
						class="submit-btn">{{languageData.me.authImme}}</button>
					<button @click="goAuth(1)"
						v-show="user.status === '1' || user.status === '2' || user.status === '3'"
						class="submit-btn">{{user.status == '3' ? languageData.me.reAuth:languageData.me.checkAuth}}</button>
				</view>
			</uni-list>
		</view>
		<button @click="modifySimple()" v-show="user.status === '2' || true" class="submit-btn"
			style="border-radius: 10px;">{{languageData.settings.confirmMod}}</button>

		<view v-show="false"
			style="border-radius: 20px; background-color: white; padding:10px; margin-top: 10px; padding-bottom: 60rpx;">
			<view v-show="user.status === 2"
				style="padding: 12px 15px; width: 100%; display: flex; justify-content: flex-start; align-items: center;">
				<u-icon :label="$t('me.info.cerPic')" size="16" name="fingerprint"></u-icon>
				<view style="display: flex; width: 100%; overflow-x: auto;">
					<u--image style="margin-left: 12px;" v-for="img in [...imgList,]" :showLoading="true" :src="img"
						width="80px" height="80px"></u--image>
				</view>
			</view>
		</view>
		<u-picker :show="showAddr" ref="uPicker"
		:columns="addrData.province"
		 @confirm="addrConf" @change="addrChg"
		 @cancel="addrClose"></u-picker>
	</view>
</template>

<script>
	import {
		getUserProfile,
		updateUserProfile
	} from "@/api/system/user"

	import InfoItem from '@/components/auth/InfoItem.vue'
	import { addr } from "@/config/addr";

	export default {
		components: {
			InfoItem
		},
		data() {
			return {
				texts: '0',
				imgList: ['http://sss', 'http://sss'],
				user: {},
				roleGroup: "",
				postGroup: "",
				languageData: {},
				addrData:{},
				showAddr: false,
			}
		},
		onLoad() {
			this.getUser();
			if(uni.getLocale() == 'en'){
				this.addrData = addr.en
			}else if(uni.getLocale() == 'zh-Hans'){
				this.addrData = addr.cn
			}else{
				this.addrData = addr.laos
			}
			this.languageData = this.$languageData;
		},
		onNavigationBarButtonTap() {
			this.$tab.navigateTo('/pages/mine/info/edit')
		},
		methods: {
			addrClick(type){
				if(this.step === 2) return
				this.showAddr = true
			},
			addrChg(e){
				const {columnIndex,value,values, index,picker = this.$refs.uPicker} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.addrData.district[index])
				}
			},
			addrConf(e){
				console.log(e)
				this.user.area = e.value[0]+' / '+e.value[1]
				this.showAddr = false
			},
			addrClose(e){
				this.showAddr = false
			},
			modifySimple() {
				if(this.user.area && this.user.area.length > 0 && this.user.area && this.user.area.length > 0)
				this.user.commonContactAddress = this.user.area + '/' + this.user.address
				updateUserProfile(this.user).then(res => {
					if (res.code === 200) {
						this.$store.dispatch('GetInfo').then(res => {
							setTimeout(() => {
								this.$refs.loading.close();
								setTimeout(() => {
									this.$modal.msgSuccess(this.languageData.updateSuccess)
									uni.switchTab({
										url: '/pages/home/index'
									})
								}, 500)
							}, 1000)
						})
					}
				}).catch(e => {
					uni.navigateBack()
					this.$refs.loading.close();
				})
			},
			getGender() {
				if (this.user.gender == null || this.user.gender.length == 0)
					return ''
				else
					return this.user.gender == '0' ? this.$t('com.gender.female') : this.$t('com.gender.male')
			},
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					if(this.user.commonContactAddress){
						let addr = this.user.commonContactAddress
						let idx = addr.lastIndexOf('/')
						this.user.area = addr.substring(0, idx)
						this.user.address = addr.substring(idx+1)
					}
					console.log(response.data)
				})
			},
			goAuth(flag) {
				//认证
				if (flag === 0) {
					uni.navigateTo({
						url: '/pages/mine/info/edit'
					})
				} else { //查看认证
					uni.navigateTo({
						url: '/pages/mine/info/edit?checkOnly=1'
					})
				}
			},
			getStatus(status) {
				switch (status) {
					case '1':
						return this.languageData.me.aduiting
					case '2':
						return this.languageData.me.passed
					case '3':
						return this.languageData.me.fail
					default:
						return this.languageData.me.unAuthed
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(135deg, #4B8BFF 0%, #3B7CFF 100%);
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 500;
		border-radius: 44rpx;
		margin-top: 30rpx;
		box-shadow: 0 6rpx 16rpx rgba(59, 124, 255, 0.25);
		transition: all 0.3s ease;
	}
</style>