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">
			<tm-sheet :padding="[0, 0]" class="jiaoxi xiao">
				<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)" 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="shanchu" :round="24" class="mt-50 logincla">删除</tm-button>
				<tm-button theme="primary" :round="24" class="mt-50 logincla">立即付款</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购物车
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
		this.getList()
	},
	methods: {
		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)
				}
			}
			if(ids.length==0){
				that.$refs.toast.show({model:'success',label:'请选择商品'})
				return
			}
			myRequest({
				url: "/api/ShopCart/deleteOneGoods",
				method:'post',
				data:{id:ids}
			}).then(res => {
				if (res.data.code == 200) {
					this.getList()
					that.$refs.toast.show({model:'success',label:res.data.msg})
				}else{
					that.$refs.toast.show({model:'error',label:res.data.msg})
				}
			})
		},
		shuliangjia(num){
			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) {
					if(res.data.data.length != 0){
						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,
							};
							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>