liedou_uniapp/pages/subPackages/my/setup.vue

<template>
	<view>
		<u-navbar class="navbar-wrap uni-navbar" :is-back="true" title="设置" :background="background" title-color="#ffffff" back-icon-color="#ffffff" />
		<view class="container">
			<view class="setup-item">
				<view class="setup-title">我的手机号</view>
				<view class="setup-item-con">
					<text>{{setUpInfo.phone}}</text>
				</view>
			</view>
			<view class="setup-item" @click="goPage('bindAlipay')">
				<view class="setup-title">我的支付宝</view>
				<view class="setup-item-con">
					<text>{{setUpInfo.alipay_account ? setUpInfo.alipay_account : '未录入'}}</text>
					<image class="jt-img" src="https://ld.726p.com/ldyx_static/imgs/rightArrow.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="setup-item" @click="onClickCardId">
				<view class="setup-title">实名信息</view>
				<view class="setup-item-con">
					<text>{{cardId ? '修改' : '未录入'}}</text>
					<image class="jt-img" src="https://ld.726p.com/ldyx_static/imgs/rightArrow.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="setup-item" @click="onClickAuthorize">
				<view class="setup-title">淘宝授权</view>
				<view class="setup-item-con">
					<text>{{isAuthOrNo == 1 ? '已授权' : '未授权'}}</text>
					<image v-if="isAuthOrNo != 1" class="jt-img" src="https://ld.726p.com/ldyx_static/imgs/rightArrow.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="setup-item">
				<view class="setup-title">版本信息</view>
				<view class="setup-item-con">
					<text>{{version}}</text>
				</view>
			</view>
		</view>
		<view class="logout-button" :style="isIphoneX?'padding-bottom:40rpx':''" @click="logout">退出登录</view>
		<!-- 退出登录提示框 -->
		<u-modal v-model="showLogout" content="是否退出登录" :show-cancel-button="true" @confirm="confirmLogout"></u-modal>

		<!-- 淘宝授权弹框 -->
		<tbAuthorize v-if="tb_show" :tb_show="tb_show" @closeTask='tb_show = false'></tbAuthorize>

		<!-- 服务商 -->
		<serviceProvider :show="showService" @close="showService=false" hint="关于支付宝问题，请联系服务商!"></serviceProvider>
	</view>
</template>

<script>
	const app = getApp()
	import packageConfig from '../../../package.json'
	import tbAuthorize from '../../commonMoudle/tbAuthorize.vue'
	import serviceProvider from '@/components/serviceProvider.vue'
	export default {
		components:{
			serviceProvider,
			tbAuthorize
		},
		data() {
			return {
				background: app.globalData.navbarBackground,
				version: packageConfig.version,
				isIphoneX: app.globalData.isIphoneX,
				showLogout: false,
				setUpInfo: {},
				isAuthOrNo: 0,
				tb_show: false, // 淘宝授权
				showService: false, // 服务商
				// fun_version: app.globalData.fun_version,
				cardId: '',
			}
		},
		onShow() {
			this.getSetupData()
			this.getIsAuthOrNo()
			this.handleGetIdCard()
		},
		methods: {
			// 获取当前用户的实名认证信息
			async handleGetIdCard() {
				try {
					const url = this.$api.idCard_myCertification
					const params = {}
					uni.showLoading({ title: '加载中...', mask: true })
					const { data: res } = await this.$get(url, params)
					console.log('res => ', res)
					if (res && res.errno == 0 && res.rst.id_number) {
						this.cardId = res.rst.id_number
					} else {
						this.cardId = ''
					}
				} catch (error) {
					this.cardId = ''
				} finally {
					uni.hideLoading()
				}
			},
			onClickCardId() {
				const _this = this
				uni.showModal({
					title: '提示',
					content:`公民提现收入按照税法规定需要实名后进行个税申报，您提交的实名信息仅在个税申报时使用，请放心填写，若不需要提取佣金，可不做实名`,
					cancelText: '取消',
					confirmText: '去实名',
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url: `/pages/subPackages/my/idCard`
							})
						}
					}
				});
			},
			// 点击淘宝授权
			onClickAuthorize () {
				if ( this.isAuthOrNo != 1 ) {
					const _this = this
					uni.showModal({
						title: '提示',
						content:`淘宝账号授权用于获取用户通过淘口令创建的订单信息，通过订单为您结算佣金，若不需要提取佣金，可跳过授权`,
						cancelText: '取消',
						confirmText: '去授权',
						success: function (res) {
							if (res.confirm) {
								// this.tb_show = true;
								_this.handleCopyTbUrl()
							}
						}
					});
				}
			},
			handleCopyTbUrl(){
				const token = uni.getStorageSync('token')
				let redirect_uri = `https://ld.726p.com/newh5/warrant.html?token=${token}&h5=applet`
				redirect_uri = encodeURIComponent(redirect_uri)
				this.$copyEvent({text:`https://oauth.taobao.com/authorize?response_type=code&client_id=25234720&redirect_uri=${redirect_uri}&state=3001&view=wap`,cb: () => {
					uni.showToast({
						icon: 'none',
						title: '链接已复制，请打开手机浏览器粘贴地址进行授权',
            duration: 3000,
					})
				}})
			},
			// 点击退出登录按钮
			logout () {
				this.showLogout = true
			},
			// 点击模态框，确认退出登录
			confirmLogout () {
				app.handleClearUserInfo() // 清空用户信息缓存
				uni.showToast({ title: '退出登录成功', icon: 'none' })
				uni.reLaunch({
				  url: '/pages/home/home'
				});
			},
			//点击设置每项右侧剪头
			goPage (id) {
				const _this = this
				if(id === 'bindAlipay') { // 绑定支付宝
				  uni.showModal({
						title: '提示',
						content:`支付宝账号仅用于用户提取佣金时收款使用，若无提取佣金需要，可跳过授权`,
						cancelText: '取消',
						confirmText: '去授权',
						success: function (res) {
							if (res.confirm) {
								_this.showService = true;
							}
						}
					});
				}
			},
			// 获取数据回显信息
			async getSetupData () {
				try {
					const url = this.$api.users_userInfoNew;
					const params = {}
					uni.showLoading({ title: '加载中...', mask: true })
					const { data: res } = await this.$postJSON(url, params)
					if (res && res.errno == 0) {
					  this.setUpInfo = res.rst.data;
					  let alipay_account = this.setUpInfo.alipay_account;
					  this.setUpInfo.alipay_account = alipay_account && alipay_account.replace(alipay_account.substring(3,7), "****");
					} else {
						uni.showToast({ title: res.err || '操作失败', icon: 'none' })
					}
				} catch (error) {
					uni.showToast({ title: '服务器错误', icon: 'none' })
				} finally {
				  uni.hideLoading()
				}
			},
			// 是否已完成淘宝授权
			async getIsAuthOrNo () {
				try{
					const url = this.$api.relationAuth_isAuthOrNo;
					const params = {};
					uni.showLoading({ title: '加载中...', mask: true })
					const { data: res } = await this.$postJSON(url, params)
					if (res && res.errno == 0) {
						this.isAuthOrNo = res.rst.flag;
					} else {
						uni.showToast({ title: res.err || '操作失败', icon: 'none' })
					}
				}catch(e){
					uni.showToast({ title: '服务器错误', icon: 'none' })
				} finally {
				  uni.hideLoading()
				}
			}
		}
	}
</script>
<style scoped lang="scss">
page{
	background-color: #f4f4f4;
	padding-bottom: 100rpx;
}
.container{
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
	.setup-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #f4f4f4;
		padding:20rpx 40rpx;
		.setup-title{
			font-size: 32rpx;
			line-height: 40rpx;
		}
		.setup-item-con{
			font-size: 30rpx;
			line-height: 40rpx;
			color: #777777;
			display: flex;
			align-items: center;
			.jt-img{
				width: 26rpx;
				height: 26rpx;
				margin-left: 10rpx;
			}
		}
	}
}
.logout-button{
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 32rpx;
	color: #F51400;
	line-height: 100rpx;
	background: #FFFFFF;
	text-align: center;
}
</style>