Sfoglia il codice sorgente

购物车bug 修复

lilei 4 anni fa
parent
commit
c271eae7e6

+ 8 - 7
components/uni-number-box/uni-number-box.vue → components/uni-numbers-box/uni-numbers-box.vue

@@ -11,8 +11,12 @@
 </template>
 <script>
 	export default {
-		name: "UniNumberBox",
+		name: "UniNumbersBox",
 		props: {
+			index:{
+				type: String,
+				default: ''
+			},
 			value: {
 				type: [Number, String],
 				default: 1
@@ -36,21 +40,18 @@
 		},
 		data() {
 			return {
-				inputValue: 0
+				inputValue: this.value
 			};
 		},
 		watch: {
 			value(newVal,oldVal) {
 				console.log(newVal,oldVal,'000')
 				this.inputValue = +newVal;
-				if (+newVal !== +oldVal) {
-					this.$emit("change", newVal);
-				}
 			},
 			inputValue(newVal, oldVal) {
-				console.log(newVal,oldVal,'111')
+				console.log(newVal,oldVal,this.index,'111')
 				if (+newVal !== +oldVal) {
-					// this.$emit("change", newVal);
+					this.$emit("change", newVal, this.index);
 				}
 			}
 		},

+ 138 - 122
pages/cart/cart.vue

@@ -11,16 +11,16 @@
 			<!-- 按分类显示 -->
 			<view class="goods-class-box" v-for="(item,cindex) in cartList" :key="item.goodsTypeNo">
 				<view class="goods-class-head">
-					<view>
-						<u-checkbox 
-						shape="circle" 
-						v-model="item.checked" 
-						active-color="#01c9b2" 
-						:name='item.goodsTypeNo' 
-						size="40rpx"
-						@change="goodsClasChange">
+					<view @click="goodsClasChange(cindex)">
+						<view 
+						class="check-button" 
+						v-if="isSxGoodAll(item).length||isEdit"
+						:class="item.checked?'checked':'uncheck'">
+						</view>
+						<view v-else class="check-button disabled"></view>
+						<view class="goodClsName">
 							{{item.name}}
-						</u-checkbox>
+						</view>
 					</view>
 					<view class="des">
 						<view>商品乐豆合计满<text>{{item.goldLimit}}</text></view>
@@ -31,24 +31,21 @@
 				<view class="goods-class-list">
 					<!-- 商品列表 -->
 					<view class="goods-item" v-for="(good,index) in item.shoppingCartGoodsList" :key="good.id">
-						<view class="checkbox">
-							<u-checkbox 
-							v-model="good.checked" 
-							v-if="good.goods.inventoryQty>0||isEdit" 
-							shape="circle" 
-							active-color="#01c9b2" 
-							size="40rpx"
-							:name='good.id+"-"+cindex'
-							@change="goodsChange"
-							></u-checkbox>
+						<view class="checkbox" 
+						   @click="goodsChange(good,index,cindex)">
+							<view
+							class="check-button" 
+							v-if="isSxGood(good)||isEdit"
+							:class="good.checked?'checked':'uncheck'">
+							</view>
+							<view v-else class="check-button disabled"></view>
 						</view>
 						<view class="goods-info">
 							<view class="goods-imgs">
-								<view v-if="good.goods.inventoryQty==0||good.goods.state == 0" class="goods-staus">
-									<text v-if="good.goods.inventoryQty==0">已售罄</text>
-									<text v-if="good.goods.state == 0">已下架</text>
+								<view v-if="good.goods.inventoryQty==0||good.goods.state == 0||good.goods.delFlage == 0" class="goods-staus">
+									<text>已失效</text>
 								</view>
-								<u-image border-radius="12" width="158rpx" height="140rpx" :src="good.goods.homeImage"></u-image>
+								<u-image border-radius="12" width="158rpx" height="140rpx" :src="good.goods.homeImage+'?x-oss-process=image/resize,m_pad,h_252,w_325,color_ffffff'"></u-image>
 							</view>
 							<view class="goods-text">
 								<view class="good-name">{{good.goods.name}}</view>
@@ -57,9 +54,11 @@
 										<text>{{good.goods.sellGold}}</text>
 										<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
 									</view>
-									<view v-if="good.goods.inventoryQty>0">
-										<!-- <u-number-box @change="goodsNumsChange(good,cindex)" :index="index+'-'+cindex" :min="1" v-model="good.buyQty"></u-number-box> -->
-										<uni-number-box @change="goodsNumsChange(good,cindex)" v-model="good.buyQty" :min="1"></uni-number-box>
+									<view v-if="good.goods.inventoryQty>0&&good.goods.state==1">
+										<uni-numbers-box @change="goodsNumsChange()" :index="cindex+'-'+index" :value="good.buyQty" :min="1"></uni-numbers-box>
+									</view>
+									<view v-else>
+										<view style="width: 100rpx;text-align: center;">×{{good.buyQty}}</view>
 									</view>
 								</view>
 							</view>
@@ -76,16 +75,14 @@
 			</view>
 		</view>
 		<view class="cart-submit" v-if="cartList.length>0">
-			<view>
-				<u-checkbox 
-				shape="circle" 
-				name='checkAll' 
-				size="40rpx"
-				active-color="#01c9b2" 
-				@change="checkAllChange" 
-				v-model="checkAll">
-				{{checkAll?'取消':'全选'}}
-				</u-checkbox>
+			<view @click="checkAllChange()">
+				<view 
+				class="check-button" 
+				:class="checkAll?'checked':'uncheck'">
+				</view>
+				<view class="checkAll">
+					{{checkAll?'取消':'全选'}}
+				</view>
 			</view>
 			<view v-if="!isEdit">
 				<view class="heji">
@@ -102,9 +99,7 @@
 </template>
 
 <script>
-	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
 	export default {
-		components: {uniNumberBox},
 		data() {
 			return {
 				toOrderButton: {
@@ -115,12 +110,13 @@
 				},
 				checkAll: false,// 全选
 				isEdit: false, // 是否编辑模式
+				cartList: [], // 商品列表
 			};
 		},
 		computed: {
 			// 总数
 			count() {
-				let arr = this.$store.state.vuex_cartList
+				let arr = this.cartList
 				let count = 0
 				arr.map(item=>{
 					count = count + item.shoppingCartGoodsList.length
@@ -148,14 +144,19 @@
 				})
 				return total
 			},
-			// 商品列表
-			cartList(){
-				return this.$store.state.vuex_cartList
-			}
 		},
-		onShow() {
+		onLoad() {
 			uni.$emit('getCartList')
-			this.hasCheckAll()
+			// 刷新列表成功
+			uni.$on('getCarListSuccess',item => {
+				this.cartList = JSON.parse(JSON.stringify(this.$store.state.vuex_cartList))
+				// 默认全选
+				if(!this.isEdit){
+					this.checkAllChange()
+				}
+			})
+		},
+		onShow() {
 		},
 		methods: {
 			toBuy(){
@@ -176,17 +177,6 @@
 				})
 				return goods
 			},
-			// 全选 或 取消全选
-			checkAllChange(e) {
-				let arr = this.cartList
-				arr.map(item=>{
-					item.checked = e.value
-					item.shoppingCartGoodsList.map(goods=>{
-						goods.checked =  e.value
-					})
-				})
-				arr.splice()
-			},
 			// 判断当前分类下的商品总和是否满足规则
 			hasZgjindu(item){
 				let ret = 0
@@ -197,66 +187,70 @@
 				console.log(ret , goldLimit)
 				return !this.isEdit ? ret >= goldLimit : true
 			},
+			// 设置每个分类下的商品选中状态
+			setClsGoodStatus(item,checked){
+				console.log(checked)
+				item.shoppingCartGoodsList.map(good=>{
+					// 已下架,已删除,已销完的不选
+					if((good.goods.inventoryQty==0||good.goods.state == 0||good.goods.delFlage == 0) && !this.isEdit){
+						good.checked = false
+					}else{
+						good.checked = checked
+					}
+				})
+			},
+			// 全选 或 取消全选
+			checkAllChange() {
+				let arr = this.cartList
+				arr.map(item=>{
+					item.checked = !this.checkAll
+					this.setClsGoodStatus(item,!this.checkAll)
+				})
+				this.checkAll = !this.checkAll
+				arr.splice()
+			},
 			// 每个分类的全选
-			goodsClasChange(e){
-				console.log(e);
-				let index = this.cartList.findIndex(item => item.goodsTypeNo == e.name)
+			goodsClasChange(index){
 				let item = this.cartList[index]
-				if(this.hasZgjindu(item)){
-					item.checked = e.value
-					item.shoppingCartGoodsList.map(goods=>{
-						goods.checked = e.value
-					})
-					// 判断是否全选
-					this.hasCheckAll()
-				}else{
-					setTimeout(()=>{
-						item.checked = false
-						this.cartList.splice()
-					},100)
-					uni.showToast({
-						icon: 'none',
-						title: '此分类的商品乐豆合计需要满'+item.goldLimit+'乐豆才可以购买'
-					})
-				}
+				item.checked = !item.checked
+				this.setClsGoodStatus(item,item.checked)
+				// 判断是否全选
+				this.hasCheckAll()
 			},
 			// 商品选择
-			goodsChange(e){
-				console.log(e)
-				let a = e.name.split('-')
-				let row = this.cartList[a[1]]
-				let goodsIndex = row.shoppingCartGoodsList.findIndex(item => item.id == a[0])
-				if(this.hasZgjindu(row)){
-					row.shoppingCartGoodsList[goodsIndex].checked = e.value
-					// 判断当前分类是否全选
-					this.clasGoodsHasCheckAll(a[1])
-					// 判断是否全选
-					this.hasCheckAll()
-				}else{
-					setTimeout(()=>{
-						row.checked = false
-						row.shoppingCartGoodsList[goodsIndex].checked = false
-						this.cartList.splice()
-					},100)
-					uni.showToast({
-						icon: 'none',
-						title: '此分类的商品乐豆合计需要满'+row.goldLimit+'乐豆才可以购买'
-					})
-				}
+			goodsChange(good,index,cindex){
+				let goods = this.cartList[cindex] // 当前分类
+				good.checked = !good.checked
+				// 判断当前分类是否全选
+				this.clasGoodsHasCheckAll(goods)
+			},
+			// 判断某个商品是否失效
+			isSxGood(item){
+				return !(item.goods.inventoryQty==0||item.goods.state == 0||item.goods.delFlage == 0) || this.isEdit
+			},
+			// 判断分类下商品是否都是已失效
+			isSxGoodAll(row){
+				return row.shoppingCartGoodsList.filter(item => {
+					return this.isSxGood(item)
+				})
 			},
 			// 判断某个分类是否全选
-			clasGoodsHasCheckAll(index){
-				let row = this.cartList[index]
-				let len = row.shoppingCartGoodsList.length
+			clasGoodsHasCheckAll(row){
+				let goods = this.isSxGoodAll(row)
+				let len = goods.length
 				let clen = 0
-				row.shoppingCartGoodsList.map(item=>{
-					console.log(item.checked)
+				if(len==0){
+					return
+				}
+				goods.map(item=>{
 					if(item.checked){
 						clen = clen + 1
 					}
 				})
 				row.checked = clen == len
 				this.cartList.splice()
+				// 判断是否全选
+				this.hasCheckAll()
 			},
 			// 是否全选
 			hasCheckAll(){
@@ -274,8 +268,8 @@
 			// 编辑购物车
 			editCart(){
 				this.isEdit = !this.isEdit
-				this.checkAllChange({value:false})
-				this.checkAll = false
+				this.checkAll = true
+				this.checkAllChange()
 			},
 			// 立即下单
 			toOrder(){
@@ -306,22 +300,14 @@
 				}
 			},
 			// 更改商品数量
-			goodsNumsChange(e,cindex){
-				console.log(e,cindex)
+			goodsNumsChange(val,id){
+				console.log(val,id)
+				let cindex = id.split('-')[0]
+				let index = id.split('-')[1]
 				let item = this.cartList[cindex]
-				console.log(item)
-				let row = item.shoppingCartGoodsList.find(k=> k.id == e.id)
-				if(this.hasZgjindu(item)){
-					uni.$emit("updateGoodsBuyQty",{id:e.id,buyQty:e.buyQty})
-				}else{
-					item.checked = false
-					row.checked = false
-					this.cartList.splice()
-					uni.showToast({
-						icon: 'none',
-						title: '此分类的商品乐豆合计需要满'+item.goldLimit+'乐豆才可以购买'
-					})
-				}
+				let row = item.shoppingCartGoodsList[index]
+				row.buyQty = val
+				uni.$emit("updateGoodsBuyQty",{id:row.id,buyQty:row.buyQty})
 			}
 		},
 	}
@@ -355,6 +341,23 @@ page{
 			margin: 0 10rpx;
 		}
 	}
+	.check-button{
+		width: 40rpx;
+		height: 40rpx;
+	}
+	.checked{
+		background: url('/static/checked.png') no-repeat center center;
+		background-size: 100% 100%;
+	}
+	.uncheck{
+		background: url('/static/uncheck.png') no-repeat center center;
+		background-size: 100% 100%;
+	}
+	.disabled{
+		border:2rpx solid #EEEEEE;
+		border-radius: 100rpx;
+		background: #F8F8F8;
+	}
 	.goods-list{
 		flex-grow: 1;
 		overflow: auto;
@@ -368,6 +371,16 @@ page{
 				padding: 20upx;
 				border-bottom: 1px solid #F8F8F8;
 				justify-content: space-between;
+				> view{
+					&:first-child{
+						display: flex;
+						align-items: center;
+					}
+					.goodClsName{
+						font-size: 30rpx;
+						margin-left: 10rpx;
+					}
+				}
 				.des{
 					display: flex;
 					align-items: center;
@@ -453,9 +466,12 @@ page{
 		align-items: center;
 		justify-content: space-between;
 		>view{
+			display: flex;
+			align-items: center;
+			.checkAll{
+				margin-left: 10rpx;
+			}
 			&:last-child{
-				display: flex;
-				align-items: center;
 				font-size: 26upx;
 				text{
 					color: red;

+ 4 - 0
pages/index/index.vue

@@ -106,6 +106,9 @@
 				this.getUserInfo(item)
 			})
 		},
+		onUnload() {
+			uni.$off('getCarListSuccess')
+		},
 		onShow() {
 			// 获取订单状态数据字典
 			this.getCodeList('RUBBISH_TYPE','vuex_rubbishType')
@@ -192,6 +195,7 @@
 					console.log(res)
 					if(res.status == 200){
 						this.$u.vuex('vuex_cartList', res.data)
+						uni.$emit('getCarListSuccess')
 					}
 				})
 			},

BIN
static/checked.png


BIN
static/uncheck.png