实物商品列表多sku选项

src/packagePrize/components/sku-popup/sku-popup.vue

@@ -0,0 +1,237 @@
+<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">{{ detailInfo.title }}</view>
+					</view>
+				</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 btn">
+				<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: () => []
+			},
+			skuListPopup: {
+				type: Array,
+				default: () => []
+			},
+			detailInfo: {
+				type: [Object],
+				default: {}
+			},
+			popupInfo: {
+				type: [Object],
+				default: {}
+			}
+		},
+		data() {
+			return {
+				payInfo: {},
+				skuList: []
+			};
+		},
+		
+		created() {
+			this.payInfo = this.popupInfo
+			this.skuList = this.skuListPopup
+		},
+		
+		methods: {
+			getSku(e, item, indexs) {
+				this.$set(item, 'txt', `${item.name}:${e}`)
+				this.$set(item, 'actionIndex', indexs)
+				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,
+					storageId: this.detailInfo.storageId,
+				}
+			},
+			
+			confirmPrize() {
+				let data = {
+					properties: this.payInfo.properties,
+					skuId: this.payInfo.skuId,
+					storageId: this.payInfo.storageId,
+				}
+				this.$emit('success',data)
+			},
+			
+			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 {
+					height: 154rpx;
+					flex-direction: column;
+					align-items: flex-start;
+					justify-content: space-between;
+					padding: 34rpx 0;
+					
+					.image-goods {
+						width: 154rpx;
+						height: 154rpx;
+						border-radius: 18rpx;
+						border: 1px solid #EEEEEE;
+						margin-right: 24rpx;
+					}
+					
+					&__title {
+						font-size: 30rpx;
+						line-height: 30rpx;
+						font-weight: bold;
+						height: 30rpx;
+						overflow: hidden;
+					}
+					
+					&__coin {
+						color: #FA822C;
+						
+						.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 {
+			padding-top: 36rpx;
+			border-top: 1px solid #eee;
+			text-align: center;
+	
+			&-right {
+				.confirm {
+					width: 414rpx;
+					height: 88rpx;
+					line-height: 88rpx;
+					background: #FA822C;
+					border-radius: 44rpx;
+					font-size: 36rpx;
+					color: #fff;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

src/packagePrize/prize/index.vue

@@ -125,13 +125,45 @@
 				<u-icon name="arrow-right" size="15" color="#999"></u-icon>
 			</view>
 		</view>
+		
+		<!-- 兑换成功 -->
+		<u-popup :show="tipShow" mode="center">
+			<view class="tip-show">
+				<view class="flex tip-show-title">
+					<text>确认选择后，如需变更规格，请联系客服</text>
+				</view>
+				<view class="tip-show-title" style="margin-left: 20rpx;">
+					<view>当前规格：{{tipData.properties}}</view>	
+				</view>
+				<view class="flex tip-show-btn">
+					<view class="close" @click="tipShow = false">取消</view>
+					<view class="prize" @click="tipSecction">确认选择</view>
+				</view>
+			</view>
+		</u-popup>
+		
+		<!-- 商品选择sku -->
+		<sku-popup 
+			:popup-show="skuPopupShow" 
+			:detailInfo="info" 
+			:popup-info="payInfo"
+			:sku-list-init="skuListInit" 
+			:sku-list-popup="skuList" 
+			@close="close"
+			@success="skuSuccess"
+			v-if="skuPopupShow"
+		/>
 	</view>
 </template>
 
 <script>
 	import env from '../../config/env.js'
 	import $http from '@/utils/request.js'
+	import skuPopup from '../components/sku-popup/sku-popup.vue'
 	export default {
+		components: {
+			skuPopup
+		},
 		data() {
 			return {
 				loading: false,
@@ -157,6 +189,14 @@
 				pagesNum: "",
 				
 				statusIndex: 1,
+				
+				info: {},
+				skuPopupShow: false,//选择框
+				skuList: [],
+				skuListInit: [],
+				tipShow: false,
+				tipData: {},
+				payInfo: {},
 			};
 		},
 		onShow() {
@@ -208,6 +248,7 @@
 					this.loading = false
 				})
 			},
+			
 			getListTwo(){
 				let _this = this
 				let url = '/api/v1/mp/user/prize/recovery/list'
@@ -217,7 +258,6 @@
 					uni.hideLoading();
 					this.loading = false
 					if (res.code == 0) {
-						console.log(res);
 						res.rows.forEach(item => {
 							item.status = 3
 							item.goodsNum = item.num
@@ -278,8 +318,75 @@
 				this.pageList()
 				this.checkedAll = false
 			},
+			
+			close() {
+				this.skuPopupShow = false
+			},
+			skuSuccess(data) {
+				this.tipData = data
+				this.close()
+				this.tipShow = true
+				this.getList()
+			},
+			
+			tipSecction() {
+				uni.showLoading({
+					title: '兑换中'
+				});
+				$http.post('/api/v1/mp/user/mine/prize/saveSku', this.tipData).then(res => {
+					uni.hideLoading();
+					flag = false
+					if (res.code == 0) {
+						this.pageList()
+					} else if (res.code == 1021) {
+						uni.$u.toast(res.msg);
+					}
+				}).catch(() => {
+					flag = false
+					uni.hideLoading();
+				})
+			},
 
 			changeChecked(e, item) {
+				if(item.checked == false && item.isMoreSku == 1 && item.inType.value != 2 && item.properties == ""){
+					$http.post('/api/v1/mp/user/exchange/goods/detail', {
+						goodsId: item.goodsId,
+						noToken: true
+					}).then(res => {
+						this.info = item
+						this.skuPopupShow = true
+						this.skuListInit = res.data.skuList
+						if (res.data.skuList.length) {
+							let skuProp = JSON.parse(res.data.skuProp)
+							skuProp.forEach(item => {
+								item.actionIndex = 0,
+									item.txt = `${item.name}:${item.value[0]}`
+							})
+							let actionSku = skuProp.map(item => {
+								return item.txt
+							}).join(';')
+							let sku = res.data.skuList.find(item => {
+								return item.properties == actionSku
+							})
+							this.payInfo = {
+								...sku,
+								exValue: sku.exchangePrice,
+								storageId: item.storageId,
+								price: sku.value,
+								picUrl: env.filePublic + sku.picUrl
+							}
+							this.skuList = skuProp
+						} else {
+							this.payInfo = {
+								...res.data,
+								price: this.info.value,
+								exValue: this.info.exchangePrice,
+								picUrl: this.picUrlArr[0],
+								storageId: item.storageId,
+							}
+						}
+					})
+				}
 				this.$set(item, 'checked', e)
 				let flag = this.list.every(item => item.checked == true)
 				this.checkedAll = flag
@@ -304,6 +411,50 @@
 			// 立即提货
 			toSettlement() {
 				let arr = []
+				for (var i = 0; i < this.list.length; i++) {
+					//选中 && 是多sku && 不为盲豆兑换 && sku为空
+					if(this.list[i].checked && this.list[i].isMoreSku == 1 && this.list[i].inType.value != 2 && this.list[i].properties == ""){
+							$http.post('/api/v1/mp/user/exchange/goods/detail', {
+								goodsId: this.list[i].goodsId,
+								noToken: true
+							}).then(res => {
+								this.info = this.list[i]
+								this.skuPopupShow = true
+								this.skuListInit = res.data.skuList
+								if (res.data.skuList.length) {
+									let skuProp = JSON.parse(res.data.skuProp)
+									skuProp.forEach(item => {
+										item.actionIndex = 0,
+											item.txt = `${item.name}:${item.value[0]}`
+									})
+									let actionSku = skuProp.map(item => {
+										return item.txt
+									}).join(';')
+									let sku = res.data.skuList.find(item => {
+										return item.properties == actionSku
+									})
+									this.payInfo = {
+										...sku,
+										exValue: sku.exchangePrice,
+										storageId: this.list[i].storageId,
+										price: sku.value,
+										picUrl: env.filePublic + sku.picUrl
+									}
+									this.skuList = skuProp
+								} else {
+									this.payInfo = {
+										...res.data,
+										price: this.info.value,
+										exValue: this.info.exchangePrice,
+										picUrl: this.picUrlArr[0],
+										storageId: this.list[i].storageId,
+									}
+								}
+							})
+							return
+						}
+				} 
+				
 				this.list.forEach(item => {
 					if (item.checked) {
 						arr.push(item)
@@ -686,4 +837,49 @@
 			}
 		}
 	}
+	
+	
+	.tip-show {
+		width: 80vw;
+		background-color: #FFFFFF;
+		border-radius: 10rpx;
+		padding: 60rpx 40rpx;
+	
+		&-title {
+			margin-bottom: 64rpx;
+	
+			text {
+				margin-left: 20rpx;
+			}
+		}
+	
+		&-btn {
+			justify-content: space-around;
+	
+			.close {
+				width: 160rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 8rpx;
+				color: rgba(235, 112, 9, 100);
+				font-size: 28rpx;
+				text-align: center;
+				border: 1px solid rgba(235, 112, 9, 100);
+			}
+	
+			.prize {
+				width: 160rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 8rpx;
+				color: rgba(235, 112, 9, 100);
+				font-size: 28rpx;
+				text-align: center;
+				background-color: rgba(235, 112, 9, 100);
+				color: rgba(255, 255, 255, 100);
+				font-size: 14px;
+			}
+		}
+	}
+	
 </style>