mp-ui-user/src/packagePrize/components/sku-popup/sku-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">
						<!-- #ifdef MP-ALIPAY -->
						<view class="goods-left-content__titletwo">{{ detailInfo.title }}</view>
						<!-- #endif -->
						<!-- #ifndef MP-ALIPAY -->
						<view class="goods-left-content__title ells">{{ detailInfo.title }}</view>
						<!-- #endif -->
					</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;
					}
					&__titletwo {
						width: 450rpx;
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: bold;
						height: 30rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					&__coin {
						color: $uni-btn-color;
						
						.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: #E8DCFD;
					color: $uni-btn-color;
				}
			}
		}
		
		// 数量
		.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: $uni-btn-color;
					border-radius: 6rpx;
					font-size: 36rpx;
					color: #fff;
					text-align: center;
				}
			}
		}
	}
</style>