zhengbasai/pages/gift/index.vue

<template>
	<div class="gift">
		<div class="top">
			<div class="card">
				<div class="my_nums">我的积分：<span class="num">{{useInfo.jifen}}</span></div>
				<image src="@/static/images/gift/gift.png" mode="" class="icon_6"></image>
			</div>
		</div>
		<div class="list">
			<div class="card" v-for="(item,index) in list" :key="item.id">
				<div class="tips" v-if="item.day_duihuan_nums">今日已兑换 <text
						class="tip_num">{{item.day_duihuan_nums}}</text> </div>
				<image :src="item.cover" mode="" class="c_image"></image>
				<div class="right">
					<div class="name">{{item.name}}</div>
					<div class="jf_btn">
						<div class="fen"><span>{{item.jifen}}</span><span style="font-size: 12px;">积分</span></div>
						<!-- <u-number-box v-if="item.buy_num" v-model="item.buy_num" @change="valChange" bg-color="#FFF4F1"
							color="#F5222D"></u-number-box> -->
						<div class="num_input" v-if="item.buy_num">
							<div class="jian" @click="jianNumber(index)">-</div>
							<u-input type="number" v-model="item.buy_num" :clearable="false" :custom-style="inputCustom"
								@change="changeNumber"></u-input>
							<div class="jia" @click="jiaNumber(index,item)">+</div>

						</div>
						<div v-if="!item.buy_num">
							<div class="button" v-if="item.nums>0" @click="doExchange(item.id)">立即兑换
							</div>
							<div v-else class="button gray">已兑完 </div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="bottom">
			<div class="bottom-btn" @click="onSubmit">立即下单（{{totalFen}}积分）</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				last: false,
				list: [],
				useInfo: {},
				totalFen: 0,
				inputCustom: {
					'width': '38px',
					'height': '24px',
					'line-height': '24px',
					'border': 'solid 1px #F5222D',
					'min-height': '25px',
					'text-align': 'center',
					'background-color': '#FFF4F1',
					'font-size': '18px',
					'color': '#F5222D'
				}
			}
		},
		onShow() {
			localStorage.removeItem('ExchangeList')
			this.totalFen = 0
			this.useInfo = this.vuex_user
			this.page = 1
			this.last = false
			this.list = []
			this.getList()
		},
		onReachBottom() {
			if (!this.last) {
				this.page++
			}
			this.getList()
		},
		methods: {
			onSubmit() {
				if (this.totalFen == 0) {
					this.$u.toast('请选择需要兑换的商品！')
					return
				}
				if (this.totalFen > this.useInfo.jifen) {
					this.$u.toast('您的积分不足！')
					return
				}
				localStorage.setItem('ExchangeList', JSON.stringify(this.list))
				uni.reLaunch({
					url: '/pages/gift/detail'
				})
			},
			getList() {
				this.$u.get('/dwbs/shop/goods', {
					page: this.page,
				}).then(res => {
					console.log(res, 'list')
					let data = res.data.data
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.list = this.list.concat(data)
					}
				})
			},
			doExchange(id) {
				console
				this.list.map((item, index) => {
					if (item.id == id) {
						let buy_num = item.buy_num ? item.buy_num++ : 1
						console.log(buy_num)
						this.totalFen = this.totalFen + (buy_num * item.jifen)
						this.$set(this.list[index], 'buy_num', buy_num);
					}
				})
				console.log(this.list)
			},
			jianNumber(index) {
				this.list[index].buy_num--
				this.valChange(this.list)
			},
			jiaNumber(index, item) {
				if (item.buy_num == item.nums) {
					uni.showToast({
						title: '商品库存不足！',
						icon: 'none'
					})
					return
				}
				this.list[index].buy_num++
				console.log(this.list)
				this.valChange(this.list)
			},
			changeNumber() {
				this.valChange(this.list)
			},
			//商品数量加减
			valChange(arr) {
				let num = 0
				arr.map(item => {
					if (item.buy_num) {
						num = num + (item.buy_num * item.jifen)
					}
				})
				this.list = arr
				this.totalFen = num
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.gift {
		padding-bottom: 100px;
	}

	.top {
		background-color: #fff;
		padding: 16px 12px;

		.card {
			padding: 24px 15px;
			display: flex;
			align-items: center;
			background: linear-gradient(270deg, #FF571B 0%, #F5222D 100%);
			border-radius: 10px;
			position: relative;

			.my_nums {
				font-weight: 400;
				font-size: 20px;
				color: #fff;
				flex: 1;
				text-align: left;
				margin-left: 20px;

				.num {
					font-size: 22px;
				}
			}

			.icon_6 {
				position: absolute;
				right: 15px;
				bottom: 0;
				width: 55px;
				height: 56px;
			}
		}
	}

	.list {
		.card {
			margin-top: 14px;
			background-color: #fff;
			display: flex;
			padding: 8px 16px;
			border-radius: 5px;
			position: relative;

			.tips {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				align-items: center;
				border-radius: 0px 5px 0px 5px;
				opacity: 1;
				background: #FAC858;
				font-size: 12px;
				padding: 0px 10px;
				color: #F5222D;

				.tip_num {
					font-size: 20px;
					display: inline-block;
					margin-left: 4px;
				}
			}

			.c_image {
				width: 98px;
				height: 78px;
				margin-right: 9px;
				border-radius: 8px;
			}

			.right {
				flex: 1;
			}

			.name {
				font-size: 18px;
			}

			.jf_btn {
				margin-top: 23px;

				display: flex;
				align-items: center;

				.num_input {
					display: flex;
					align-items: center;


					.jian {
						height: 25px;
						line-height: 24px;
						border-left: solid 1px #F5222D;
						border-top: solid 1px #F5222D;
						border-bottom: solid 1px #F5222D;
						border-radius: 5px 0 0 5px;
						width: 26px;
						font-size: 18px;
						text-align: center;
						color: #F5222D;
						background-color: #FFF4F1;
					}

					.jia {

						border-right: solid 1px #F5222D;
						border-top: solid 1px #F5222D;
						border-bottom: solid 1px #F5222D;
						height: 25px;
						line-height: 24px;
						font-size: 18px;
						width: 26px;
						text-align: center;
						background-color: #FFF4F1;
						color: #F5222D;
						border-radius: 0px 5px 5px 0px;
					}
				}

				.fen {
					font-size: 18px;
					color: #F5222D;
					flex: 1;
				}

				.button {
					width: 87px;
					height: 28px;
					line-height: 28px;
					border-radius: 20px;
					font-size: 12px;
					background: linear-gradient(90deg, #FB7B58 0%, #F5222D 97%);
					color: #FFFFFF;
					text-align: center;
				}

				.gray {
					background: #D8D8D8;
					color: #ADADAD;
				}
			}

		}

	}

	.bottom {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 15px 0;
		background-color: #ffffff;
		display: flex;

		.bottom-btn {
			border-radius: 30px;
			height: 44px;
			margin: 0 12px;
			flex: 1;
			text-align: center;
			color: #ffffff;
			font-size: 16px;
			line-height: 44px;
			background: linear-gradient(90deg, #FB7B58 0%, #F5222D 97%);
		}
	}
</style>