bnyer-cloud-hub/pages-userInfo/creatorAccount/creatorAccount.vue

<template>
	<view class="container">
		<view class="head">
			<uni-group mode="card" v-for="(item,index) in creatorAccountList" :key="index">
				<view class="slot-box">真实姓名：{{item.name}}</view>
				<view class="slot-box">身份证号：{{item.idNo}}</view>
				<view class="slot-box" v-if="item.type == '0'">微信账号：{{item.accountNo}}</view>
				<view class="slot-box" v-if="item.type == '1'">银行卡账号：{{item.accountNo}}</view>
				<view class="slot-box" v-if="item.type == '2'">支付宝账号：{{item.accountNo}}</view>
				<view class="line-box"></view>
				<view class="btn-box">
					<uni-tag :circle="true" text="设为默认" type="primary" v-if="item.isUse == '0'" class="btn" 
					@click="$noMultipleClicks(setDefault,item.id)" inverted="true"/>
					<uni-tag :circle="true" text="删除" type="default" v-if="item.isUse == '0'" class="btn"
					@click="$noMultipleClicks(delAccount,item.id)" inverted="true"/>
				</view>
			</uni-group>
		</view>
		<view class="foot">
			<button class="creatorAccountAddBtn" size="default" :loading="loadingFlag" @click="creatorAccountAdd('/pages-userInfo/creatorAccount/createAccount')">添加收款账户</button>
		</view>
	</view>
</template>

<script>
	import {
		getCreatorAccount,deleteAccount,setDefaultAccountStatus
	} from '@/api/userInfo.js'
	export default {
		data() {
			return {
				creatorAccountList: [],
				userInfo: {},
				type: 0,
				noClick:true, //防止重复提交
			}
		},
		
		created() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				console.log('havent userInfo')
				uni.showModal({
					content: '艺术家账户过期,请重新登录！',
					showCancel: false,
					success() {
						//没有缓存则跳转登录页面
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});
			} else {
				this.userInfo = userInfo;
				console.log('have userInfo')
				this.getCreatorAccount();
			}
		},
		
		methods: {
			// 查询艺术家账户列表
			async getCreatorAccount() {
				let that = this;
				const res = await getCreatorAccount(that.userInfo.id)
				console.log('res', res)
				if (res.data.code === 200) {
					that.creatorAccountList.push(...res.data.data)
					console.log('creatorAccountList', that.creatorAccountList)
				} else {
					uni.showModal({
						content: '获取艺术家账户列表数据加载失败！',
						showCancel: false
					});
				}
			},
			
			//设置艺术家收款账户默认状态
			setDefault(id){
				let that = this;
				const param = {
					id: id,
					status: '1',
					creatorId: that.userInfo.id
				}
				setDefaultAccountStatus(param).then(res =>{
					if (res.data.code === 200) {
						uni.showToast({
							title: '操作成功!',
							duration: 2000,
							mask: true,
							success() {
								//刷新
								setTimeout(() => {
								    uni.redirectTo({
								       url: '/pages-userInfo/creatorAccount/creatorAccount'
								    });	
								}, 1000)
							}
						});
					}else{
						uni.showModal({
							content: "设置艺术家收款账户默认状态失败！",
							showCancel: false,
						});
					}
				});
			},
			
			//设为默认收款账户
			delAccount(id){
				uni.showModal({
					title: '提示',
					content: '确认删除该收款账户？',
					success(resp) {
						if(resp.confirm){
							let that = this;
							const ids = []
							ids.push(parseInt(id))
							deleteAccount(ids).then(res =>{
								if (res.data.code === 200) {
									uni.showToast({
										title: '删除成功!',
										duration: 2000,
										mask: true,
										success() {
											//刷新
											setTimeout(() => {
											    uni.redirectTo({
											       url: '/pages-userInfo/creatorAccount/creatorAccount'
											    });	
											}, 2000)
										}
									});
								}else{
									uni.showModal({
										content: "删除收款账户失败！",
										showCancel: false,
									});
								}
							});
						}
					}
				});
			},
			
			creatorAccountAdd(url){
				uni.navigateTo({
					url: url
				})
			}
			
		},
	}
</script>

<style lang="less">
	.creatorAccountAddBtn{
		width: 710rpx;
		height: 60rpx;
		background-color: royalblue;
		color: #ffffff;
		font-size: 30rpx;
		line-height: 62rpx;
		border-radius: 17rpx;
		margin-top:100rpx;
	}
	.foot{
		margin-top:630rpx;
	}
	.slot-box{
		font-size: 30rpx;
		text-align: justify;
	}
	.line-box{
		border: 1rpx #B3B3B3 solid;
		margin-top: 30rpx;
	}
	.btn-box{
		position: relative;
		flex-direction: row;
		justify-content: flex-end;
		display: flex;
		margin-left: 200rpx;
		margin-top: 20rpx;
		.btn{
			padding-left: 20rpx;
		}
	}
	
</style>