wardrobe/pages/gouwuche/index.vue

<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> -->

				<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,
				// 数量默认为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() {
				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
						})
					}

				}
				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()
			},
			// 清空
			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);
				if (data.buy <= 1) {
					this.$refs.toast.show({
						model: 'warn',
						label: '该商品不能减少了哟~'
					})
					return
				}
				
				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/ .jiaoxi {
		margin: 0 !important;
		padding: 8px !important;
		margin-bottom: 200px !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 .border-t-1.bk {
		border-top: 1px solid #1b1b1b !important;
	}

	/deep/ .shangpin .title {
		color: white !important;
	}

	/deep/ .shangpin .text-red {
		color: white !important;
	}

	/deep/ .shangpin .round-3 {
		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;
	}

	.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;
	}

	.logincla {
		width: 40%;
		margin: 0 auto;
		margin-top: 20px;
		margin-bottom: 30px;
	}

	/deep/ .jiageList .d-inline-block {
		font-size: 18px !important;
		color: white !important;
	}
</style>