teambuy-front/pages_order/mine/runningWater.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="提现记录" leftClick @leftClick="$utils.navigateBack" color="#fff" />

		<!-- <view class="tools">
			<uv-datetime-picker 
				ref="datetimePicker" 
				v-model="selectedTime" 
				mode="year-month" 
				confirmColor="#84A73F"
				@confirm="onTimeChange"
			></uv-datetime-picker>
		</view> -->

		<view class="card list">
			<template v-if="list.length">
				<view class="flex list-item" 
					v-for="(item, index) in list"
					:key="index"
				>
					<!-- <image class="list-item-icon" src="../static/runningWater/icon-commission.png" mode="widthFix"></image> -->
					<view class="list-item-info">
						<view class="highlight">佣金提现</view>
						<view class="time">{{ item.createTime }}</view>
					</view>
					<view class="list-item-value">{{ `-${item.amount}` }}</view>
					<view class="withdraw-btn" 
						@click="withdraw(item)"
						v-if="item.status == 0">领取</view>
				</view>
			</template>
			<template v-else>
				<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
			</template>
		</view>

	</view>
</template>

<script>
	import mixinsList from "@/mixins/list.js"
	export default {
		mixins: [mixinsList],
		data() {
			return {
				selectedTime: new Date(),

				x: ['+', '-', '-', '+'],
				mixinsListApi: "queryCashoutLog",//getWaterPageList
				beforeDate: new Date(), //开始日期
				afterDate: new Date(), //结束日期
					
				totalMoney : 0,
				totalWithdraw : 0,
			}
		},
		computed: {
			displaySelectedTime() {
				return this.$dayjs(this.selectedTime).format("YYYY年M月")
			}
		},
		methods: {
			//打开日历
			openCalendars() {
				if (this?.$refs?.calendars) {
					this.$refs.calendars.open();
				}
			},
			
			getDataThen(list, total, result){
				this.totalMoney = result.totalMoney
				this.totalWithdraw = result.totalWithdraw
				this.list = result.page.records
				this.total = result.page.total
			},

			openTimePicker() {
				this.$refs.datetimePicker.open();
			},
			onTimeChange(e) {
				// todo
				console.log('--onTimeChange', e)
			},
			withdraw(item){
				// 拉起微信收款确认页面
				if (!wx.canIUse('requestMerchantTransfer')) {
				    wx.showModal({
				        content: '你的微信版本过低，请更新至最新版本。',
				        showCancel: false,
				    });
				    return
				}
				
				// 在真机环境中，调用API
				wx.requestMerchantTransfer({
				    mchId: this.$config.mchId,
				    appId: wx.getAccountInfoSync().miniProgram.appId,
				    package: item.packageInfo,
				    success: (res) => {
				        uni.showToast({
				            title: '提现申请已提交',
				            icon: 'success'
				        })
				        this.$store.commit('getUserInfo')
						this.$store.commit('getRiceInfo')
						
						this.$api('getMoney', {
							id : item.id,
						}).then(res => {
							this.getData()
						})
				    },
				    fail: (res) => {
				        console.log('fail:', res);
				        uni.showToast({
				            title: '提现失败，请稍后再试',
				            icon: 'none'
				        })
				    },
				    complete: (res) => {
				        console.log('requestMerchantTransfer完成:', res);
				    }
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f5f6fa;
		min-height: 100vh;
				
		/deep/ .nav-bar__view {
			background-image: linear-gradient(135deg, #84A73F, #D8FF8F);
			box-shadow: 0 2px 8px rgba(132, 167, 63, 0.2);
		}
	}
	
	.withdraw-btn {
		padding: 12rpx 32rpx;
		margin: 0;
		font-size: 26rpx;
		margin-left: 20rpx;
		background: linear-gradient(135deg, #84A73F, #D8FF8F);
		color: #fff;
		border-radius: 30rpx;
		box-shadow: 0 2px 6px rgba(132, 167, 63, 0.2);
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.95);
			opacity: 0.9;
		}
	}

	.list {
		margin: 20rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

		&-item {
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			transition: all 0.3s ease;

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
			}

			&:active {
				background-color: #f9f9f9;
			}

			&-info {
				flex: 1;
				color: #666;

				.highlight {
					color: #333;
					font-weight: 500;
					margin-bottom: 8rpx;
				}

				.time {
					font-size: 24rpx;
					color: #999;
				}
			}

			&-value {
				color: #FF2A2A;
				font-weight: 500;
				margin: 0 20rpx;
			}
		}
	}
</style>