tuanfeng-shop-user/pages_category_page2/userModule/memberAccount.vue

<!-- 我的账户 -->
<template>
	<view>
		<global-loading />
		<view v-if="ifShow" class="container">
			<view class="balance"></view>
			<view class="balanceInfo">
				<view class="infoBox">
					<view v-if="accountInfo.price != null" class="cur-balance">{{ accountInfo.price }}</view>
					<view v-else class="cur-balance">0.00</view>
					<view class="mar-top-20">余额</view>
				</view>
				<view class="infoBox">
					<view v-if="accountInfo.price != null" class="cur-balance">{{ accountInfo.userVoucher }}</view>
					<view class="mar-top-20">代金券</view>
				</view>
			</view>
			<view class="balance-operation">
				<view class="item-btn" @click="memberAccountWithdraw">
					<image class="item-btn-icon" src="../../static/images/origin/withdraw.png" mode="widthFix"></image>
					<view class="item-btn-text">提现</view>
					<image class="item-btn-right" src="../../static/images/origin/greyArrow.png" mode="widthFix"></image>
				</view>
			</view>
			<view style="margin: 20upx 15upx 0;padding: 30upx 15upx;background-color: #f0efef;border-radius: 40upx;">
				<view style="font-size: 32upx;">代金券流水</view>
				<view v-if="accountInfo.voucherLogs && accountInfo.voucherLogs.length">
					<!-- <el-table-column align="center" label="ID" prop="id" sortable />
						<el-table-column align="center" label="赠与方id" prop="holdId" />
						<el-table-column align="center" label="被赠与方id" prop="userId" />
						<el-table-column align="center" label="数量" prop="number" />
						<el-table-column align="center" label="编号/流水号" prop="orderSn" />
						<el-table-column align="center" label="发放时间" prop="createTime" />
						<el-table-column align="center" label="流水类型" prop="type">
						<template slot-scope="scope">
						<el-tag v-if="scope.row.type === 1">充值</el-tag>
						<el-tag v-else-if="scope.row.type === 2" type="info">转赠</el-tag>
						<el-tag v-else-if="scope.row.type === 3" type="success">签到</el-tag>
						<el-tag v-else-if="scope.row.type === 4" type="danger">抵扣</el-tag>
						<el-tag v-else-if="scope.row.type === 5" type="success">核销</el-tag>
						<el-tag v-else-if="scope.row.type === 6" type="warning">抽奖</el-tag>
						<el-tag v-else-if="scope.row.type === 7">退款</el-tag>
						<span v-else>--</span>
						</template>
						</el-table-column> -->
					<view v-for="item in accountInfo.voucherLogs" :key="item.id" style="padding: 10upx 10upx 10upx 30upx;font-size: 26upx;">
						<view style="display: flex;justify-content: space-between;">
							<view>编号：{{ item.orderSn || '--' }}</view>
							<view style="color: #999999;">
								流水类型：
								<text v-if="item.type === 1">充值</text>
								<text v-else-if="item.type === 2" type="info">转赠</text>
								<text v-else-if="item.type === 3" type="success">签到</text>
								<text v-else-if="item.type === 4" type="danger">抵扣</text>
								<text v-else-if="item.type === 5" type="success">核销</text>
								<text v-else-if="item.type === 6" type="warning">抽奖</text>
								<text v-else-if="item.type === 7">退款</text>
								<text v-else>--</text>
							</view>
						</view>
						<view style="display: flex;justify-content: space-between;">
							<text>赠与方ID：{{ item.holdId || '--' }}</text>
							<text style="color: #999999;">数量：{{ item.number }}</text>
						</view>
						<view>发放时间：{{ item.createTime }}</view>
					</view>
				</view>
				<view v-else>
					<tui-no-data :fixed="false" style="margin-top: 50upx;">暂无数据</tui-no-data>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getDistributorApi } from '../../api/user'
export default {
	name: 'MemberAccount',
	filters: {
		parseMoney(money) {
			return parseFloat(money / 100).toFixed(2)
		}
	},
	data() {
		return {
			accountInfo: [],
			ifShow: false
		}
	},
	onShow() {
		this.getBalance()
	},
	onBackPress(e) {
		if (e.from === 'navigateBack') {
			return false
		}
		this.back()
		return true
	},
	methods: {
		back() {
			this.$switchTab('/pages/tabbar/user/index')
		},
		getBalance() {
			const _ = this
			// uni.showLoading({
			//   mask: true,
			//   title: '加载中...'
			// })
			getDistributorApi({}).then((res) => {
				uni.hideLoading()
				this.ifShow = true
				_.accountInfo = res.data
			})
				.catch((e) => {
					console.log(e)
				})
		},
		memberAccountWithdraw() {
			if (this.accountInfo.price <= 0) {
				uni.showToast({
					title: '您暂时没有余额，不能提现',
					duration: 2000,
					icon: 'none'
				})
			} else {
				uni.navigateTo({
					url: 'withdraw'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background: #f8f8f8;

	.balance {
		display: block;
		height: 400rpx;
		background: url("../../static/images/origin/bankBg.png") no-repeat left top;
		background-size: cover;
		text-align: center;
		padding: 100rpx 20rpx 0 20rpx;
	}

	.balanceInfo {
		width: 712rpx;
		background: url("../../static/images/origin/accountBg.png") no-repeat left top;
		height: 342rpx;
		background-size: cover;
		margin: -300rpx auto 0 auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 20rpx;

		.infoBox {
			text-align: center;

		}
			.cur-balance {
				font-size: 60rpx;
				color: #71521B;
			}
	}

	.balance-operation {
		margin-top: 38rpx;
		padding: 0 24rpx;

		.item-btn {}
	}
}

.item-btn {
	width: 100%;
	height: 100upx;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	background-color: #fff;
	padding: 0 30upx;

	.item-btn-icon {
		width: 90upx;
		height: 90upx;
	}

	.item-btn-text {
		font-size: 28upx;
		margin-left: 20upx;
		font-weight: 500;
		flex: 1;
		color: rgba(102, 102, 102, 1);
	}

	.item-btn-right {
		width: 60upx;
		height: 60upx;
	}

}

.mt20 {
	margin-top: 20upx;
}

.mt1 {
	margin-top: 1upx;
}
</style>