157 lines
3.1 KiB
Vue
157 lines
3.1 KiB
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) {
|
|
//
|
|
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> |