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">
        <uni-icons class="type-icon" custom-prefix="iconfont" :type="payType[item.type].icon" size="30" :color="payType[item.type].color" ></uni-icons>
				<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="default" v-if="item.isUse != '0'" class="btn" inverted="true"/>
					<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="error" 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, //防止重复提交
        payType: [
          {
            icon: 'icon-weixin',
            title: '微信',
            color: '#909399'
          },
          {
            icon: 'icon-yinhangka',
            title: '银行卡',
            color: '#909399'
          },
          {
            icon: 'icon-zhifubao',
            title: '支付宝',
            color: '#909399'
          }
        ],
			}
		},
		
		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="scss" scoped>
.container {
  width: 670rpx;
  height: 100vh;
  margin: 0 auto;
  position: relative;
}

.head {

  ::v-deep .uni-group--card {
    margin: 20rpx 0 !important;
    background: $uni-bg-base-color;
  }

  ::v-deep .uni-tag {
    border-width: 2rpx !important;
  }

  ::v-deep .uni-group__content {
    position: relative;
  }

  .type-icon {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    opacity: .5;
  }

}

.foot {
  position: fixed;
  width: 670rpx;
  left: 40rpx;
  right: 40rpx;
  bottom: 60rpx;
}

.creatorAccountAddBtn{
  color: $uni-btn-text-color;
}

.slot-box{
  font-size: 30rpx;
  text-align: justify;
  color: $uni-secondary-color;
}
.line-box{
  border-bottom: 2rpx $uni-secondary-color solid;
  margin-top: 30rpx;
}
.btn-box{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-left: 200rpx;
  margin-top: 20rpx;
  .btn{
    padding-left: 20rpx;
  }
}

</style>