mp-ui-user/packageGoods/components/exchange-popup/exchange-popup.vue

<template>
	<u-popup :show="popupShow" round="17" mode="bottom" @close="close" :closeable="true" @touchmove.prevent.stop>
		<view class="choiceShow-wrap">
			<!-- 商品信息 -->
			<view class="flex goods">
				<view class="goods-left">
					<view class="goods-left__image flex">
						<image class="image-goods" :src="payInfo.picUrl" mode="aspectFit"></image>
					</view>
					<view class="goods-left-content flex">
						<view class="goods-left-content__title ells-one">{{ detailInfo.title }}</view>
						<view class="goods-left-content__coin flex">
							<image class="image-coin" src="../../static/goods_coin.png" mode=""></image>
							<view>× {{ payInfo.exValue }}</view>
						</view>
					</view>
				</view>
				<view class="goods-right">库存：{{ payInfo.quantity }}</view>
			</view>
			<!-- sku -->
			<view class="sku" v-for="(item, index) in skuList" :key="index">
				<view class="sku-title">{{ item.name }}</view>
				<view class="flex sku-list">
					<view
						class="sku-list-item"
						:class="{'action': item.actionIndex == indexs}"
						v-for="(ele, indexs) in item.value" :key="indexs" @click="getSku(ele, item, indexs)">
						{{ ele }}
					</view>
				</view>
			</view>
			<!-- 数量 -->
			<view class="flex quantity">
				<view class="quantity-title">商品数量</view>
				<view class="quantity-title">
					<u-number-box v-model="orderNum" :min="1" :disabledInput="true"
						@change="valChange($event, payInfo)"></u-number-box>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="flex btn">
				<view class="flex btn-left">
					<view class="title">应付：</view>
					<view class="flex coin">
						<image src="../../static/goods_coin.png" mode=""></image>
						<view>× {{ payInfo.exchangePrice }}</view>
					</view>
				</view>
				<view class="btn-right">
					<view class="confirm" @click="confirmPrize">立即兑换</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import env from '@/config/env.js'
	import $http from '@/utils/request.js'
	export default {
		name: "exchange-popup",
		props: {
			popupShow: {
				type: [Boolean],
				default: false
			},
			skuListInit: {
				type: Array,
				default: () => []
			},
			skuList: {
				type: Array,
				default: () => []
			},
			detailInfo: {
				type: [Object],
				default: {}
			},
			popupInfo: {
				type: [Object],
				default: {}
			}
		},
		data() {
			return {
				orderNum: 1,
				payInfo: {}
			};
		},
		
		created() {
			this.payInfo = this.popupInfo
		},
		
		methods: {
			valChange(e, item) {
				let value = e.value
				this.$set(item, 'exchangePrice', value * item.exValue)
				if (this.payInfo.quantity < value) {
					uni.$u.toast('库存不足');
				}
			},
			
			getSku(e, item, indexs) {
				this.$set(item, 'txt', `${item.name}:${e}`)
				this.$set(item, 'actionIndex', indexs)
				this.orderNum = 1
				let actionSku = this.skuList.map(item => {
					return item.txt
				}).join(';')
				let sku = this.skuListInit.find(item => {
					return item.properties == actionSku
				})
				this.payInfo = {
					...sku,
					exValue: sku.exchangePrice,
					picUrl: env.filePublic + sku.picUrl
				}
			},
			
			confirmPrize() {
				let flag = false
				let data = {
					goodsId: this.payInfo.goodsId,
					skuId: this.payInfo.skuId,
					orderNum: this.orderNum,
				}
				if (flag) return
				if (this.payInfo.quantity == 0) {
					uni.$u.toast('库存不足');
					return
				}
				if (this.payInfo.quantity < this.orderNum) {
					uni.$u.toast('库存不足');
					return
				}
				uni.showLoading({
					title: '兑换中'
				});
				flag = true
				$http.post('/api/v1/mp/user/exchange/submit', data).then(res => {
					uni.hideLoading();
					flag = false
					if (res.code == 0) {
						this.$emit('success')
					} else if (res.code == 1021) {
						uni.$u.toast(res.msg);
					}
				}).catch(() => {
					flag = false
					uni.hideLoading();
				})
			},
			
			close() {
				this.$emit('close')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.choiceShow-wrap {
		min-height: 400rpx;
		padding: 34rpx;
		
		// 商品
		.goods {
			justify-content: space-between;
			margin-bottom: 66rpx;
			
			&-left {
				flex: 1;
				display: flex;
				
				&__image {
					width: 154rpx;
					height: 154rpx;
					border: 1px solid #EEEEEE;
					border-radius: 18rpx;
					margin-right: 24rpx;
					
					.image-goods {
						width: 154rpx;
						height: 154rpx;
					}
				}
				
				&-content {.image-goods {
					width: 154rpx;
					height: 154rpx;
					border-radius: 18rpx;
					border: 1px solid #EEEEEE;
					margin-right: 24rpx;
				}
					height: 154rpx;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-between;
					padding: 34rpx 0;
					
					&__title {
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: bold;
					}
					
					&__coin {
						color: #FF2929;
						
						.image-coin {
							width: 34rpx;
							height: 30rpx;
						}
					}
				}
			}
			
			&-right {
				color: #666;
			}
		}
		
		// sku
		.sku {
			&-title {
				font-size: 30rpx;
				line-height: 30rpx;
				font-weight: bold;
				margin-bottom: 34rpx;
			}
	
			&-list {
				justify-content: flex-start;
				flex-wrap: wrap;
	
				&-item {
					padding: 20rpx 66rpx;
					border-radius: 36rpx;
					margin-right: 18rpx;
					background: #F5F6F8;
					margin-bottom: 34rpx;
				}
	
				.action {
					background-color: rgba(250, 130, 44, .25);
					color: #FA822C;
				}
			}
		}
		
		// 数量
		.quantity {
			justify-content: space-between;
			margin: 34rpx 0;
			
			&-title {
				font-size: 30rpx;
				line-height: 30rpx;
				font-weight: bold;
			}
		}
	
		// 按钮
		.btn {
			justify-content: space-between;
			padding-top: 36rpx;
			border-top: 1px solid #eee;
	
			&-left {
				.coin {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					line-height: 30rpx;
					color: #FF2929;
	
					image {
						width: 34rpx;
						height: 30rpx;
					}
				}
			}
	
			&-right {
				.confirm {
					width: 414rpx;
					height: 88rpx;
					line-height: 88rpx;
					background: #FA362C;
					border-radius: 44rpx;
					font-size: 36rpx;
					color: #fff;
					text-align: center;
				}
			}
		}
	}
</style>