上传

components/user/selectProductUnit.vue

@@ -0,0 +1,175 @@
+<template>
+	<view class="page">
+		<view class="submit-unit">
+			<view class="title">
+				颜色选择
+			</view>
+			<view class="list">
+				<view :class="{act : unitKey.startsWith(item)}" 
+				v-for="(item, index) in colorList"
+					@click="selectUnit(item, index, 0)" :key="index">
+					{{ item }}
+				</view>
+			</view>
+		</view>
+		
+		<view class="submit-unit">
+			<view class="title">
+				尺寸选择
+			</view>
+			<view class="list">
+				<view 
+				:class="{act : unitKey.endsWith(item), 
+				del : getUnitClassDel(item, index)}" 
+				v-for="(item, index) in sizeList"
+					@click="selectUnit(item, index, 1)" :key="index">
+					{{ item }}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	let defaultKey = '默认'
+	export default {
+		props : {
+			list : {
+				default : []
+			},
+		},
+		computed : {
+			unitMap(){
+				let map = {}
+				
+				this.list.forEach(n => {
+					
+					let color = n.colour || defaultKey
+					let title = n.title || defaultKey
+					
+					let key = color + ':' + title
+					
+					n.unitKeyName = color + ',' + title
+					
+					map[key] = n
+				})
+				
+				return map
+			},
+			// 颜色列表
+			sizeList(){
+				return [...new Set(this.list.map(n => n.title || defaultKey))]
+			},
+			// 尺寸列表
+			colorList(){
+				return [...new Set(this.list.map(n => n.colour || defaultKey))]
+			},
+		},
+		data() {
+			return {
+				unitKey : '',
+				colorIndex : 0,
+				sizeIndex : 0,
+			}
+		},
+		mounted() {
+			if(!this.unitKey && this.list.length > 0){
+				this.selectUnit(this.colorList[0], 0, 0)
+			}
+		},
+		methods: {
+			selectUnit(item, index, type){
+				if(type == 0){
+					let color = this.colorList[index]
+					for(let key in this.unitMap){
+						if(key.startsWith(color)){
+							this.unitKey = key
+							break
+						}
+					}
+				}else{
+					// 判断是否有货
+					if(this.getUnitClassDel(item, index, type)){
+						return
+					}
+					let color = this.colorList[this.colorIndex]
+					let size = this.sizeList[index]
+					this.unitKey = color + ':' + item
+				}
+				this.updateIndexAll()
+				this.$emit('selectUnit', this.unitMap[this.unitKey])
+			},
+			getUnitClassDel(item, index, type){
+				let key = this.colorList[this.colorIndex] + ':' + item
+				return this.unitMap[key] ? false : true
+			},
+			updateIndexAll(){
+				let key = this.unitKey
+				
+				this.colorList.forEach((n, i) => {
+					if(key.startsWith(n)){
+						this.colorIndex = i
+					}
+				})
+				this.sizeList.forEach((n, i) => {
+					if(key.endsWith(n)){
+						this.sizeIndex = i
+					}
+				})
+			},
+			setUnitById(id){
+				for(let key in this.unitMap){
+					if(this.unitMap[key].id == id){
+						this.unitKey = key
+					}
+				}
+				this.updateIndexAll()
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.page{
+	.submit-unit {
+		padding: 30rpx;
+		background-color: #fff;
+	
+		.title {
+			font-size: 28rpx;
+			font-weight: 600;
+		}
+	
+		.list {
+			display: flex;
+			flex-wrap: wrap;
+			font-size: 22rpx;
+	
+			.act {
+				color: $uni-color;
+				border: 1px solid $uni-color;
+				background-color: #F9E7DE;
+			}
+			
+			.del{
+				opacity: 0.3;
+				&::after{
+					content: '【无货】';
+				}
+			}
+	
+			view {
+				border-radius: 15rpx;
+				width: 320rpx;
+				background-color: #eee;
+				border: 1px solid #eee;
+				margin: 10rpx;
+				display: flex;
+				justify-content: center;
+				padding: 15rpx 0;
+				overflow: hidden;
+			}
+		}
+	}
+}
+</style>

pages/index/cart.vue

@@ -79,17 +79,32 @@
 
 		<!-- 规格 -->
 		<uv-popup ref="skuPopup" :round="30" closeable>
-			<view class="submit-unit">
+			<!-- <view class="submit-unit">
 				<view class="title">
 					规格选择
 				</view>
 				<view class="list">
-					<view :class="{act : unitIndex == index}" v-for="(item, index) in skuList"
+					<view :class="{act : unitIndex == index}" 
+					v-for="(item, index) in skuList"
 						@click="selectUnit(item, index)" :key="index">
 						{{ item.title }}
 						<text v-if="item.colour">,{{ item.colour }}</text>
 					</view>
 				</view>
+			</view> -->
+			
+			<!-- 多规格选择 -->
+			<view class="unit-box">
+				<selectProductUnit
+				:list="skuList"
+				ref="selectProductUnit"
+				@selectUnit="selectUnit"
+				/>
+				
+				<view class="uni-color-btn"
+				@click="selectUnitSubmit">
+					保存修改
+				</view>
 			</view>
 		</uv-popup>
 		
@@ -107,10 +122,12 @@
 <script>
 	import tabber from '@/components/base/tabbar.vue'
 	import cartSubmitSelect from '@/components/user/cartSubmitSelect.vue'
+	import selectProductUnit from '@/components/user/selectProductUnit.vue'
 	export default {
 		components: {
 			tabber,
-			cartSubmitSelect
+			cartSubmitSelect,
+			selectProductUnit,
 		},
 
 		data() {
@@ -137,7 +154,6 @@
 					}
 				}, ],
 				unit: {},
-				unitIndex: 0,
 			}
 		},
 		computed: {
@@ -206,10 +222,11 @@
 				this.checkboxValue.splice(index, 1)
 			},
 
-			// 修改商品规格弹框
+			// 打开修改商品规格弹框
 			toggleDropdown(item) {
 				this.editSkuForm.id = item.id
 				this.editSkuForm.goodsId = item.goodsId
+				this.editSkuForm.skuId = item.skuId
 				// 根据商品id获取规格
 				this.$api('goodsSku', {
 					id: item.goodsId
@@ -218,6 +235,10 @@
 						this.skuList = res.result
 						// 打开规格弹框
 						this.$refs.skuPopup.open('bottom')
+						// 设置默认选择的规格
+						this.$nextTick(() => {
+							this.$refs.selectProductUnit.setUnitById(item.skuId)
+						})
 					}
 				})
 			},
@@ -225,8 +246,11 @@
 			// 选择规格
 			selectUnit(item, index) {
 				this.unit = item
-				this.unitIndex = index
 				this.editSkuForm.skuId = item.id
+			},
+			
+			// 保存规格修改
+			selectUnitSubmit(){
 				this.$api('editSku', this.editSkuForm, res => {
 					if (res.code == 200) {
 						this.$refs.skuPopup.close()

pages_order/components/product/submitUnitSelect.vue

@@ -90,18 +90,24 @@
 				</view>
 				
 				<!-- 规格 -->
-				<view class="submit-unit">
+				<!-- <view class="submit-unit">
 					<view class="title">
 						规格选择
 					</view>
 					<view class="list">
-						<view :class="{act : unitIndex == index}" v-for="(item, index) in detail.hotelGoodsSkuList"
+						<view :class="{act : unitIndex == index}" 
+						v-for="(item, index) in detail.hotelGoodsSkuList"
 							@click="selectUnit(item, index)" :key="index">
 							{{ item.title }}
 							<text v-if="item.colour">,{{ item.colour }}</text>
 						</view>
 					</view>
-				</view>
+				</view> -->
+				
+				<selectProductUnit
+				:list="detail.hotelGoodsSkuList"
+				@selectUnit="selectUnit"
+				/>
 				
 				<!-- 优惠劵 -->
 				<!-- <view style="padding: 0 20rpx;">
@@ -195,12 +201,14 @@
 	import addressList from '@/components/address/addressList.vue'
 	import couponList from '@/components/user/couponList.vue'
 	import addLeaseForm from './addLeaseForm.vue'
+	import selectProductUnit from '@/components/user/selectProductUnit.vue'
 	import { mapState } from 'vuex'
 	export default {
 		components: {
 			addressList,
 			couponList,
 			addLeaseForm,
+			selectProductUnit,
 		},
 		props: {
 			submiitTitle: {
@@ -244,7 +252,7 @@
 				// this.$refs.couponList.getData()
 				this.confCoupon()
 				if (!this.unit.id) {
-					this.selectUnit(this.detail.hotelGoodsSkuList[0], 0)
+					// this.selectUnit(this.detail.hotelGoodsSkuList[0], 0)
 				}
 
 				// 获取地址列表
@@ -346,7 +354,7 @@
 						id: this.detail.id, //商品id
 						skuId: this.unit.id, //规格id
 						addressId: this.address.id, //地址id
-						sku: this.unit.title, //规格
+						sku: this.unit.unitKeyName, //规格
 						num: this.num,
 					}
 				]

uni.scss

@@ -74,3 +74,24 @@ $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:26px;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
 $uni-font-size-paragraph:15px;
+
+
+
+.uni-color-btn{
+	border-radius: 40rpx;
+	padding: 20rpx;
+	margin: 40rpx;
+	background: $uni-color;
+	color: #fff;
+	text-align: center;
+	font-size: 28rpx;
+}
+.uni-uncolor-btn{
+	border-radius: 40rpx;
+	padding: 20rpx;
+	margin: 40rpx;
+	border: 1px solid $uni-color;
+	color: $uni-color;
+	text-align: center;
+	font-size: 28rpx;
+}