jiuyiUniapp/jiuyi2/pages/mine/setting/binding.vue

<script setup>
	// 我的绑定
	import {
		ref,
		computed,
		getCurrentInstance,
		reactive
	} from 'vue'
	import {
		onLoad,
		onReady,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js'

	const {
		proxy
	} = getCurrentInstance()
	// 绑定的信息
	const detail = reactive({
		wechatId: '',
		alipayId: '',
	})
	// 绑定的项
	const bindItem = ref({})
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 绑定列表
	const bindList = computed(() => {
		let result = [{
				key: 'wechatId',
				img: '/static/wx.png',
				name: '微信号',
				value: detail.wechatId,
			},
			{
				key: 'alipayId',
				img: '/static/shop-alipay-payment.png',
				name: '支付宝号',
				value: detail.alipayId,
			}
		]
		return result
	})

	onLoad(() => {
		// 获取绑定的信息
		getDetail()
	})

	// 获取绑定的信息
	function getDetail() {
		api.mine.getBindAccount().then(rs => {
			if (rs.code == 200) {
				// 详情
				Object.assign(detail, rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 点击项
	function handleItem(item) {
		bindItem.value = item
		proxy.$refs.bind.open()
	}

	// 绑定支付宝号
	function handleSubmit() {
		// 验证必填项
		if (!bindItem.value.name) {
			util.alert(`${bindItem.name}不能为空`)
			return
		}
		// 提交
		const data = {}
		// 添加提交数据
		data[bindItem.value.key] = bindItem.value.value

		// 
		api.mine.bindAccount({
			data,
		}).then(rs => {
			if (rs.code == 200) {
				uni.$emit('updateBindingAccount')
				// 
				detail[bindItem.value.key] = bindItem.value.value
				// 
				proxy.$refs.bind.close()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="app">
		<view class="container">
			<view class="line rows mtb30 mlr30 ptb40 plr30 bfff br20" v-for="(item,index) in bindList" :key="index"
				@click="handleItem(item)">
				<image class="wh80" :src="item.img" mode="aspectFit" />
				<view class="f1 ml20">
					<view class="key f32">{{item.name}}</view>

					<view class="content mt10 c999 f26">
						<text v-if="item.value != ''">{{item.value}}</text>
						<text v-else>未绑定</text>
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 绑定弹窗 -->
	<uni-popup ref="bind" type="bottom">
		<view class="bindAlt popBot plr30 bfff">
			<view class="header rows mtb30">
				<view class="">
					<text v-if="detail[bindItem.key]">修改</text>
					<text v-else>绑定</text>
					<text>{{bindItem.name}}</text>
				</view>
			</view>

			<view class="inputBox mtb30 ptb10 plr20">
				<input type="text" v-model="bindItem.value" placeholder="请输入" />
			</view>

			<view class="hint mtb30 c999 f26">免责声明：请核对信息后进行绑定，因信息错误产生问题，后果责任，由用户（您本人）自行承担。</view>

			<view class="btn bar black mtb30" @click="handleSubmit">添加</view>
		</view>
	</uni-popup>
</template>

<style lang="scss" scoped>
	// 绑定弹窗
	.bindAlt {

		// 提示
		.hint {
			color: #aa3333;
		}
	}
</style>