front/pages/score/exchange.vue

<template>
	<view class="pos-r padding-lr-sm" v-if="fetch && fetch.info">
		<use-tabbar :tabbar="false" />
		<view class="border-radius bg-main padding margin-top-sm">
			<view class="fwbd fs">{{fetch.info.name}}兑换</view>


			<!-- 金额选项 -->
			<view class="dflex money-area flex-wrap">
				<view class="item dflex-c dflex-flow-c" :class="{ active: config === index }"
					v-for="(item, index) in fetch.config" :key="index" @click="setConfig(index)">
					<view class="price">{{ item.name }}</view>
					<text class="fs-xs">{{ item.tip }}</text>
				</view>
			</view>

			<!-- 输入其他金额 -->
			<input class="w-full padding border-radius-sm bg-drak" type="number" placeholder="请输入兑换数值" v-model="number" @input="setValue"
				maxlength="140"/>
			<text class="margin-left-xs tip padding-tb">余额：{{fetch.user.yue_text}}</text>
			<text class="margin-left-xs tip padding-tb">可兑换：{{value}}</text>

			<!-- 马上充值按钮 -->
			<view class="dflex-c w-full margin-tb" @click="act">
				<view class="dflex-c dflex-flow-c border-radius-lg padding-tb-sm fwb line-height-1 cur_bgcolor"
					style="width: 70vw;">
					<text>马上兑换</text>
					<text class="fs-xxs margin-top-xs ft-dark-4">并同意积分服务协议</text>
				</view>
			</view>

			<!-- 协议提示 -->
			<view class="margin-top dflex-c" @click="Dever.location('tool/page?title=积分服务协议')">
				<text class="cur_color margin-left-xs fs-xs padding-tb">积分服务协议</text>
			</view>
		</view>

		<!-- 记录列表 -->

		<view class="record-list margin-top-sm" v-if="fetch">
			<view class="record-title fs fwbd ft-black margin-bottom-sm">兑换记录</view>
			<view v-if="fetch['list_' + current] && fetch['list_' + current].length > 0">
				<view class="record-item" v-for="(item, index) in fetch['list_' + current]" :key="index">
					<view class="record-left">
						<view class="record-name">{{ item.action_name }}</view>
						<view class="record-desc" v-if="item.desc">{{ item.desc }}</view>
						<view class="record-time">{{ item.cdate }}</view>
					</view>
					<view class="record-amount" :class="{ income: item.amount > 0, expense: item.amount < 0 }">
						{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
					</view>
				</view>
			</view>
			<view v-else class="empty-record">
				<u-empty mode="data"></u-empty>
			</view>
		</view>

		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: 0, // 默认选中第一个
				fetch: {},
				id: 0,
				current: 0,
				number: '',
				value: 0,
			};
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id;
			} else {
				this.Dever.location('source/home');
				return;
			}
		},
		onShow() {
			this.loadData();
			this.loadList(1);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadList(1);
		},
		//加载更多
		onReachBottom() {
			this.loadList(2);
		},
		methods: {
			setConfig(index) {
				this.config = index;
				this.loadValue()
			},
			loadData() {
				this.DeverApi.get(this, 'score.exchange', {
					id: this.id
				}, res => {
					this.loadValue()
				});
			},
			loadList(page) {
				this.DeverApi.page([page, 'list_' + this.current], this, 'score.exchangeLog', {
					id: this.id
				});
			},
			setValue() {
				this.loadValue()
			},
			loadValue() {
				if (!this.number) {
					var number = this.fetch.user.yue
				} else {
					var number = this.number
				}
				var config = this.fetch.config[this.config]
				this.value = (parseFloat(number) * parseFloat(config.value)).toFixed(2).toString()
				if (config.symbol_location == 1) {
					this.value = config.symbol + this.value;
				} else {
					this.value = this.value + config.symbol;
				}
			},
			act() {
				var number = this.number;
				if (number) {
					number = parseFloat(number);
				} else {
					number = 0;
				}
				if (number <= 0) {
					return this.Dever.alert('请输入要兑换的数值');
				}
				var yue = parseFloat(this.fetch.user.yue);
				if (yue <= number) {
					return this.Dever.alert('余额不足');
				}
				if (this.config < 0) {
					return this.Dever.alert('请选择要兑换的积分');
				}
				var config = this.fetch.config[this.config];
				
				this.Dever.confirm('确认申请兑换吗？', () => {
					this.DeverApi.post('score.exchangeAct', {id: this.id, config:config.id, number:number}, r => {
						this.number = '';
						this.loadData();
						this.loadList(1);
						this.Dever.success('兑换成功');
					});
				});
			},
		},
	};
</script>


<style lang="scss">
	.money-area {
		margin-top: 28rpx;
		margin-bottom: 18rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 18rpx;
		/* 加这个 */

		.item {
			width: calc((100% - 2 * 18rpx) / 3);
			/* 3个元素，间隔2个gap */
			height: 152rpx;
			background: #f5f5f5;
			border-radius: 12rpx;
			box-sizing: border-box;
			padding: 20rpx;
			text-align: center;

			.price {
				color: #333;
				margin-bottom: 8rpx;
			}

			text {
				color: #9a9a9a;
			}
		}

		.active {
			background: #ffbc49;
			color: #fff;

			.price,
			text {
				color: #fff !important;
			}
		}
	}

	.record-list {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;

		.record-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}

		.record-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #f0f0f0;

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

			.record-left {
				display: flex;
				flex-direction: column;

				.record-name {
					font-size: 28rpx;
					color: #333;
				}

				.record-desc {
					font-size: 28rpx;
					color: #999;
				}

				.record-time {
					font-size: 24rpx;
					color: #999;
					margin-top: 6rpx;
				}
			}

			.record-amount {
				font-size: 28rpx;
				font-weight: bold;

				&.income {
					color: #4caf50;
				}

				&.expense {
					color: #f44336;
				}
			}
		}
	}

	.empty-record {
		text-align: center;
		padding: 60rpx 0;

		.empty-icon {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;
			opacity: 0.6;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.cur_bgcolor {
		background: #ffbc49;
		color: #fff;
	}
	
	.cur_color {
		color: #ffbc49;
	}
	
	.tip {
		font-size: 24rpx;
		color: #00aaff;
		margin-top: 6rpx;
	}
</style>