Procházet zdrojové kódy

购物车全选反选&数量加减

txl0323 před 1 rokem
rodič
revize
7297c8ec17

+ 343 - 323
pages/gouwuche/index.vue

@@ -1,347 +1,367 @@
 <template>
-	<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
-		<tm-menubars title="购物车列表" :shadow="0" :showback="true"></tm-menubars>
-		<view class="zhuti shangpin" v-if="test.length>0">
-			<tm-sheet :padding="[0, 0]" class="jiaoxi xiao">
-				<view class="" style="width:100%;">
-					<tm-checkbox @change="chooseAll" v-model="checked"></tm-checkbox>{{checked?'取消全选':'全选'}}
-				</view>
-				<view v-for="item in test">
-					<tm-checkbox @change="choose" style="float: left;padding:2px !important;margin-top:9%;"
-						v-model="item.checked" label=""></tm-checkbox>
-					<tm-cartCellListFood @change="shuliangjia(item)" v-on:jian="jian(item)" v-on:jia="jia(item)"
-						class="shuliang" :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy">
-					</tm-cartCellListFood>
-				</view>
-			</tm-sheet>
-		</view>
-		<view class="dibu">
-			<tm-listitem class="liebiao" value="免费" :round="24" :shadow="12" title="邮费" :show-right-icon="false">
-			</tm-listitem>
-			<tm-listitem class="liebiao jiageList" :value="'¥'+zongjia" :round="24" :shadow="12" title="价格"
-				:show-right-icon="false"></tm-listitem>
-			<view class="text-align-center">
-				<!-- <tm-button theme="red" @click="qingkong()" :round="24" class="mt-50 logincla">清空</tm-button> -->
+  <view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
+    <tm-menubars title="购物车列表" :shadow="0" :showback="true"></tm-menubars>
+    <view class="zhuti shangpin" v-if="test.length>0">
+      <tm-sheet :padding="[0, 0]" class="jiaoxi xiao">
+        <view class="" style="width:100%;">
+          <tm-checkbox @change="chooseAll" v-model="checked"></tm-checkbox>{{checked?'取消全选':'全选'}}
+        </view>
+        <view v-for="item in test">
+          <tm-checkbox @change="choose" style="float: left;padding:2px !important;margin-top:9%;" v-model="item.checked"
+            label=""></tm-checkbox>
+          <tm-cartCellListFood @change="shuliangjia(item)" v-on:jian="jian(item)" v-on:jia="jia(item)" class="shuliang"
+            :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy">
+          </tm-cartCellListFood>
+        </view>
+      </tm-sheet>
+    </view>
+    <view class="dibu">
+      <tm-listitem class="liebiao" value="免费" :round="24" :shadow="12" title="邮费" :show-right-icon="false">
+      </tm-listitem>
+      <tm-listitem class="liebiao jiageList" :value="'¥'+zongjia" :round="24" :shadow="12" title="价格"
+        :show-right-icon="false"></tm-listitem>
+      <view class="text-align-center">
+        <!-- <tm-button theme="red" @click="qingkong()" :round="24" class="mt-50 logincla">清空</tm-button> -->
 
-				<tm-button theme="red" @click="shanchu" :round="24" class="mt-50 logincla">删除</tm-button>
-				<tm-button theme="primary" :round="24" class="mt-50 logincla" @click="goPay">立即付款</tm-button>
-			</view>
-		</view>
-		<!-- 弹出层消息 -->
-		<tm-message ref="toast"></tm-message>
-	</view>
+        <tm-button theme="red" @click="shanchu" :round="24" class="mt-50 logincla">删除</tm-button>
+        <tm-button theme="primary" :round="24" class="mt-50 logincla" @click="goPay">立即付款</tm-button>
+      </view>
+    </view>
+    <!-- 弹出层消息 -->
+    <tm-message ref="toast"></tm-message>
+  </view>
 </template>
 <script>
-	import {
-		myRequest
-	} from '@/api/request.js'
-	export default {
-		data() {
-			return {
-				zongjia: 0,
-				test: [],
-				typeclick: 2, //1加入购物车,2购物车
-				checked: false,
-				number: 0
-			};
-		},
-		onLoad() {
+  import {
+    myRequest
+  } from '@/api/request.js'
+  export default {
+    data() {
+      return {
+        zongjia: 0,
+        test: [],
+        typeclick: 2, //1加入购物车,2购物车
+        // 全选状态
+        checked: false,
+        // 数量默认为1
+        number: 1,
+        // 是否全选
+        isAll: true
+      };
+    },
+    onLoad() {
 
-		},
-		created() {
-			if (!uni.getStorageSync("token")) {
-				uni.navigateTo({
-					url: "/pages/login/index",
-				})
-			}
-			this.sys = uni.getSystemInfoSync();
-			this.getList()
-		},
-		methods: {
-			// ’
-			chooseAll() {
-				var data = this.test;
-				for (let i = 0; i < data.length; i++) {
-					if (this.checked) {
-						data[i].checked = true;
-					} else {
-						data[i].checked = false;
-					}
-				}
-				this.jiage()
-			},
-			// 清空
-			qingkong() {
-				let that = this;
-				myRequest({
-					url: '/api/ShopCart/deleteAllGoods',
-					method: 'post',
-					data: {}
-				}).then(res => {
-					if (res.data.code == 200) {
-						console.log(res.data.data, '33');
-						that.$refs.toast.show({
-							model: 'success',
-							label: res.data.msg
-						})
-						this.getList()
-					} else {
-						that.$refs.toast.show({
-							model: 'error',
-							label: res.data.msg
-						})
-					}
-				})
-			},
-			goPay() {
-				var that = this,
-					data = this.test,
-					goods = [],
-					gw_id = [];
-				for (let i = 0; i < data.length; i++) {
-					if (data[i].checked) {
-						console.log(that.zongjia, 'ss');
-						goods.push({
-							order_remark: '',
-							order_money: data[i].buy * data[i].price,
-							pay_money: data[i].buy * data[i].price,
-							buy_num: data[i].buy,
-							goods_id: data[i].goods_id,
-						})
-						gw_id.push(data[i].id)
-						console.log(goods, gw_id, '下单数据');
-					}
-				}
-				if (goods.length == 0) {
-					that.$refs.toast.show({
-						model: 'warn',
-						label: '请选择商品'
-					})
-					return
-				} else {
-					myRequest({
-						url: "/api/Order/addOrder",
-						method: 'post',
-						data: {
-							gw_id: gw_id,
-							good: goods
-						}
-					}).then(res => {
-						if (res.data.code == 200) {
-							that.$refs.toast.show({
-								model: 'success',
-								label: res.data.msg
-							})
-							this.getList()
-						} else {
-							that.$refs.toast.show({
-								model: 'error',
-								label: res.data.msg
-							})
-						}
-					})
-				}
-			},
-			shanchu() {
-				var that = this,
-					data = this.test,
-					ids = [];
-				for (let i = 0; i < data.length; i++) {
-					if (data[i].checked) {
-						ids.push(data[i].id)
-						console.log(ids);
-					}
-				}
-				if (ids.length == data.length) {
-					console.log(ids.length, data.length);
-					this.checked = true;
-				}
-				console.log(data, '数据');
-				if (ids.length == 0) {
-					that.$refs.toast.show({
-						model: 'warn',
-						label: '请选择商品'
-					})
-					return
-				}
-				myRequest({
-					url: "/api/ShopCart/deleteOneGoods",
-					method: 'post',
-					data: {
-						id: ids
-					}
-				}).then(res => {
-					if (res.data.code == 200) {
-						that.$refs.toast.show({
-							model: 'success',
-							label: res.data.msg
-						})
-						this.getList()
-					} else {
-						that.$refs.toast.show({
-							model: 'error',
-							label: res.data.msg
-						})
-					}
-				})
-			},
-			jian(data) {
-				console.log(data, 'data');
-				if (data.buy >= 1) {
-					this.number = -1;
-				} else {
-					this.number = 1;
-				}
-			},
-			jia(data) {
-				this.number = 1;
-			},
+    },
+    created() {
+      if (!uni.getStorageSync("token")) {
+        uni.navigateTo({
+          url: "/pages/login/index",
+        })
+      }
+      this.sys = uni.getSystemInfoSync();
+      this.getList()
+    },
+    methods: {
+      // 全选
+      chooseAll() {
+        if (this.checked) {
+          this.test.forEach(item => {
+            item.checked = true
+          })
+        } else {
+          if (this.isAll) {
+            this.checked = false
+          } else {
+            this.test.forEach(item => {
+              item.checked = false
+            })
+          }
 
-			// 数量增减
-			shuliangjia(num) {
-				console.log(num);
-				var that = this;
-				myRequest({
-					url: "/api/ShopCart/addShopCart",
-					method: 'post',
-					data: {
-						goods_id: num.goods_id,
-						goods_num: that.number
-					}
-				}).then(res => {
-					if (res.data.code == 200) {} else {
-						that.$refs.toast.show({
-							model: 'error',
-							label: res.data.msg
-						})
-					}
-				})
-				this.jiage();
-			},
+        }
+        this.jiage()
+      },
+      // 单选
+      choose() {
+        let status = []
+        this.test.forEach(item => {
+          status.push(item.checked)
+        })
+        // console.log(status, '单选状态数组');
+        if (status.includes(false)) {
+          this.checked = false;
+          this.isAll = true;
+        } else {
+          this.checked = true;
+          this.isAll = false;
+        }
+        this.jiage()
+      },
 
-			choose() {
-				this.jiage()
-			},
-			// 总价
-			jiage() {
-				var data = this.test,
-					jiage = 0;
-				for (let i = 0; i < data.length; i++) {
-					if (data[i].checked) {
-						var danjia = JSON.parse(data[i].price);
-						var shuliang = data[i].buy;
-						jiage = jiage + (danjia * shuliang);
-					}
-				}
-				this.zongjia = jiage;
-			},
-			// /获取购物车列表
-			getList() {
-				var that = this;
-				myRequest({
-					url: "/api/ShopCart/shopCartList",
-					method: 'post',
-					data: {}
-				}).then(res => {
-					if (res.data.code == 200) {
-						that.test = [];
-						for (let i = 0; i < res.data.data.length; i++) {
-							var obj = {
-								img: res.data.data[i].goods_image,
-								title: res.data.data[i].goods_name,
-								// label: '黑色 - 6518/320',
-								// size:'S',
-								price: res.data.data[i].goods_price,
-								id: res.data.data[i].id,
-								buy: res.data.data[i].goods_num,
-								itemId: res.data.data[i].id,
-								checked: false,
-								goods_id: res.data.data[i].goods_id
-							};
-							that.test.push(obj)
-						}
-						that.jiage()
-					} else {
-						that.test = [];
-					}
-				})
-			},
-		},
-	}
+      // 清空
+      qingkong() {
+        let that = this;
+        myRequest({
+          url: '/api/ShopCart/deleteAllGoods',
+          method: 'post',
+          data: {}
+        }).then(res => {
+          if (res.data.code == 200) {
+            console.log(res.data.data, '33');
+            that.$refs.toast.show({
+              model: 'success',
+              label: res.data.msg
+            })
+            this.getList()
+          } else {
+            that.$refs.toast.show({
+              model: 'error',
+              label: res.data.msg
+            })
+          }
+        })
+      },
+      goPay() {
+        var that = this,
+          data = this.test,
+          goods = [],
+          gw_id = [];
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].checked) {
+            console.log(that.zongjia, 'ss');
+            goods.push({
+              order_remark: '',
+              order_money: data[i].buy * data[i].price,
+              pay_money: data[i].buy * data[i].price,
+              buy_num: data[i].buy,
+              goods_id: data[i].goods_id,
+            })
+            gw_id.push(data[i].id)
+            console.log(goods, gw_id, '下单数据');
+          }
+        }
+        if (goods.length == 0) {
+          that.$refs.toast.show({
+            model: 'warn',
+            label: '请选择商品'
+          })
+          return
+        } else {
+          myRequest({
+            url: "/api/Order/addOrder",
+            method: 'post',
+            data: {
+              gw_id: gw_id,
+              good: goods
+            }
+          }).then(res => {
+            if (res.data.code == 200) {
+              that.$refs.toast.show({
+                model: 'success',
+                label: res.data.msg
+              })
+              this.getList()
+            } else {
+              that.$refs.toast.show({
+                model: 'error',
+                label: res.data.msg
+              })
+            }
+          })
+        }
+      },
+      shanchu() {
+        var that = this,
+          data = this.test,
+          ids = [];
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].checked) {
+            ids.push(data[i].id)
+            console.log(ids);
+          }
+        }
+        if (ids.length == data.length) {
+          console.log(ids.length, data.length);
+          this.checked = true;
+        }
+        console.log(data, '数据');
+        if (ids.length == 0) {
+          that.$refs.toast.show({
+            model: 'warn',
+            label: '请选择商品'
+          })
+          return
+        }
+        myRequest({
+          url: "/api/ShopCart/deleteOneGoods",
+          method: 'post',
+          data: {
+            id: ids
+          }
+        }).then(res => {
+          if (res.data.code == 200) {
+            that.$refs.toast.show({
+              model: 'success',
+              label: res.data.msg
+            })
+            this.getList()
+          } else {
+            that.$refs.toast.show({
+              model: 'error',
+              label: res.data.msg
+            })
+          }
+        })
+      },
+      // 按钮减
+      jian() {
+        this.number = -1;
+      },
+      // 按钮加
+      jia() {
+        this.number = 1;
+      },
+
+      // 数量增减
+      shuliangjia(num) {
+        var that = this;
+        myRequest({
+          url: "/api/ShopCart/addShopCart",
+          method: 'post',
+          data: {
+            goods_id: num.goods_id,
+            goods_num: that.number
+          }
+        }).then(res => {
+          if (res.data.code == 200) {} else {
+            that.$refs.toast.show({
+              model: 'error',
+              label: res.data.msg
+            })
+          }
+        })
+        this.jiage();
+      },
+
+      // 总价
+      jiage() {
+        var data = this.test,
+          jiage = 0;
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].checked) {
+            var danjia = JSON.parse(data[i].price);
+            var shuliang = data[i].buy;
+            jiage = jiage + (danjia * shuliang);
+          }
+        }
+        this.zongjia = jiage;
+      },
+      // /获取购物车列表
+      getList() {
+        var that = this;
+        myRequest({
+          url: "/api/ShopCart/shopCartList",
+          method: 'post',
+          data: {}
+        }).then(res => {
+          if (res.data.code == 200) {
+            that.test = [];
+            for (let i = 0; i < res.data.data.length; i++) {
+              var obj = {
+                img: res.data.data[i].goods_image,
+                title: res.data.data[i].goods_name,
+                // label: '黑色 - 6518/320',
+                // size:'S',
+                price: res.data.data[i].goods_price,
+                id: res.data.data[i].id,
+                buy: res.data.data[i].goods_num,
+                itemId: res.data.data[i].id,
+                checked: false,
+                goods_id: res.data.data[i].goods_id
+              };
+              that.test.push(obj)
+            }
+            that.jiage()
+          } else {
+            that.test = [];
+          }
+        })
+      },
+    },
+  }
 </script>
 
 <style lang="scss">
-	/deep/ .tm-menubars .body {
-		background-color: #1b1b1b !important;
-	}
+  /deep/ .tm-menubars .body {
+    background-color: #1b1b1b !important;
+  }
 
-	/deep/ .jiaoxi {
-		margin: 0 !important;
-		padding: 8px !important;
-		margin-bottom: 200px !important;
-	}
+  /deep/ .jiaoxi {
+    margin: 0 !important;
+    padding: 8px !important;
+    margin-bottom: 200px !important;
+  }
 
-	/deep/ .shangpin .white.bk {
-		background-color: #1b1b1b !important;
-	}
+  /deep/ .shangpin .white.bk {
+    background-color: #1b1b1b !important;
+  }
 
-	/deep/ .shangpin .tm-cartCellListFood {
-		padding: 0px 0px 15px 0px !important;
-		margin-top: 5px !important;
-		margin-bottom: 20px !important;
-		border-bottom: 1px solid #303030;
-	}
+  /deep/ .shangpin .tm-cartCellListFood {
+    padding: 0px 0px 15px 0px !important;
+    margin-top: 5px !important;
+    margin-bottom: 20px !important;
+    border-bottom: 1px solid #303030;
+  }
 
-	/deep/ .shangpin .border-t-1.bk {
-		border-top: 1px solid #1b1b1b !important;
-	}
+  /deep/ .shangpin .border-t-1.bk {
+    border-top: 1px solid #1b1b1b !important;
+  }
 
-	/deep/ .shangpin .title {
-		color: white !important;
-	}
+  /deep/ .shangpin .title {
+    color: white !important;
+  }
 
-	/deep/ .shangpin .text-red {
-		color: white !important;
-	}
+  /deep/ .shangpin .text-red {
+    color: white !important;
+  }
 
-	/deep/ .shangpin .round-3 {
-		width: 90px !important;
-		height: 90px !important;
-	}
+  /deep/ .shangpin .round-3 {
+    width: 90px !important;
+    height: 90px !important;
+  }
 
-	/deep/ .shangpin .tm-cartCellListFood-img {
-		width: 90px !important;
-		height: 90px !important;
-	}
+  /deep/ .shangpin .tm-cartCellListFood-img {
+    width: 90px !important;
+    height: 90px !important;
+  }
 
-	/deep/ .shuliang .text-size-n {
-		color: white !important;
-	}
+  /deep/ .shuliang .text-size-n {
+    color: white !important;
+  }
 
-	.dibu {
-		background: #0D0D0D;
-		position: fixed;
-		bottom: 0px;
-		width: 100%;
-	}
+  .dibu {
+    background: #0D0D0D;
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+  }
 
-	/deep/ .liebiao .grey-darken-4.bk {
-		background: #0D0D0D !important;
-		padding: 0px;
-		margin: 0px;
-		width: 100%;
-		border-radius: 0px !important;
-	}
+  /deep/ .liebiao .grey-darken-4.bk {
+    background: #0D0D0D !important;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    border-radius: 0px !important;
+  }
 
-	.logincla {
-		width: 40%;
-		margin: 0 auto;
-		margin-top: 20px;
-		margin-bottom: 30px;
-	}
+  .logincla {
+    width: 40%;
+    margin: 0 auto;
+    margin-top: 20px;
+    margin-bottom: 30px;
+  }
 
-	/deep/ .jiageList .d-inline-block {
-		font-size: 18px !important;
-		color: white !important;
-	}
+  /deep/ .jiageList .d-inline-block {
+    font-size: 18px !important;
+    color: white !important;
+  }
 </style>

+ 5 - 5
tm-vuetify/components/tm-cartCellListFood/tm-cartCellListFood.vue

@@ -47,11 +47,11 @@
 						<image class="" src="/static/img/86.png"></image>
 					</view>
 					<view class="flex" v-if="typeclick==2">
-						<block>
-							<view  v-if="cNum>1" :style="{
+						<block v-if="cNum>0">
+							<view  :style="{
 							width:`${actionSize}rpx`,
 							height:`${actionSize}rpx`,
-						}" :class="[color,black_tmeme ? 'bk' : '',]" @click.stop="jian"
+						}" :class="[color,black_tmeme ? 'bk' : '',]" @click="jian"
 								class="tm-cartCellListFood-actions rounded  flex-center outlined">
 								<text class="iconfont icon-minus text-size-xxs"></text>
 							</view>
@@ -60,7 +60,7 @@
 						<view :style="{
 							width:`${actionSize}rpx`,
 							height:`${actionSize}rpx`,
-						}" :class="[color,`border-${color}-a-1`,black_tmeme ? 'bk' : '',]" @click.stop="jia"
+						}" :class="[color,`border-${color}-a-1`,black_tmeme ? 'bk' : '',]" @click="jia"
 							class="tm-cartCellListFood-actions rounded  flex-center ">
 							<text class="iconfont icon-plus text-size-xs"></text>
 						</view>
@@ -323,7 +323,7 @@
 				});
 			},
 			jia(data) {
-				this.$emit('jian', {
+				this.$emit('jia', {
 					data: data,
 					type: 2
 				});