pay-video-applet-uniapp-24-8-22/pages_mine/mine/withdrawalRecord.vue

<template>
	<view class="withdrawalRecord">

		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="提现记录" />

		<!--提现记录页面-->
		<view class="content">
			<view class="list" :key="item.id" v-for="(item,index) in list ">
				<!--第一行-->
				<view class="item1">
					<view class="left">提现金额</view>
					<view class="right">
						<view class="money">￥{{ item.price }}</view>
						<view :class="stateClass[item.state]">
							{{ state[item.state] }}
						</view>
					</view>
				</view>
				<!--第二行-->
				<view class="item1">
					<view class="left">申请时间</view>
					<view class="right">
						<view class="">
							{{ item.createTime }}
						</view>
						<view class="btn"
						@click="requestMerchantTransfer(item)"
						v-if="item.state == 1 && item.type == 1">
							领取
						</view>
					</view>
				</view>
				<!--第三行-->
				<view class="item1"
				v-if="item.successTime">
					<view class="left">到账时间</view>
					<view class="right">{{ item.successTime }}</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins: [mixinsList],
		data() {
			return {
				mixinsListApi: 'infoGetWithdrawPage',
				state : ['审核中', '待领取', '已到账'],
				stateClass : ['shenHeClass', 'yiDaoZhangClass', 'yiDaoZhangClass'],
			};
		},
		methods: {
			requestMerchantTransfer(item) {
				if (!wx.canIUse('requestMerchantTransfer')) {
					wx.showModal({
						content: '你的微信版本过低，请更新至最新版本。',
						showCancel: false,
					});
					return
				}
				wx.requestMerchantTransfer({
					mchId: '1684030364',
					appId: wx.getAccountInfoSync().miniProgram.appId,
					package: item.packageInfo,
					success: (res) => {
						// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
						console.log('success:', res);
						this.getData()
					},
					fail: (res) => {
						console.log('fail:', res);
						this.getData()
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.withdrawalRecord {
		background-color: #f8faff;
		width: 100vw;
		font-size: 26rpx;
		.content {
			padding: 20rpx 20rpx 50rpx 20rpx;
			box-sizing: border-box;
			width: 100vw;

			.list {
				box-sizing: border-box;
				border-bottom: 2rpx solid #e0e2e6;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				gap: 20rpx;

				.item1 {
					display: flex;
					
					.left {
						width: 30%;
					}

					.right {
						display: flex;
						width: 70%;
						
						.btn{
							background: $uni-linear-gradient-color;
							padding: 10rpx 20rpx;
							border-radius: 10rpx;
							color: #fff;
							margin-left: auto;
						}

						.money {
							width: 75%;
						}

						.yiDaoZhangClass {
							width: 25%;
							background: $uni-linear-gradient-color;
							-webkit-background-clip: text;
							/*将设置的背景颜色限制在文字中*/
							-webkit-text-fill-color: transparent;
							/*给文字设置成透明*/
						}

						.shenHeClass {
							width: 25%;
						}
					}
				}
			}
		}
	}
</style>