smart-tourism/smart-ui-app/pages/goods/shopcar.vue

<template>
	<view>
		<!--列表数据-->
		<view class="list" v-if="list.length > 0">
			<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
				<view class="icon" :class="{ active: item.check }" @click.stop="check(item)">&#xe61b;</view>
				<image :src="ip + item.goods.pic" class="pic" mode="aspectFill"></image>
				<view class="con">
					<view class="title">{{ item.goods.title }}</view>
					<view class="price">
						<text>¥{{ item.goods.price }}</text>
						<text class="day">/天</text>
					</view>
				</view>
				<view class="clear"></view>
			</view>
		</view>
		<view class="noData" v-else>
			<text class="icon">&#xe60c;</text>
			<view class="title">购物车是空的</view>
		</view>
		<view class="footer">
			<view class="lfx">
				<view class="f">
					<view class="check" @click="check_all()">
						<text class="icon" :class="{ active: checkAll && check_list.length > 0 }">&#xe61b;</text>
						<text>全选</text>
					</view>
					<view class="del" v-if="check_list.length > 0" @click="del()">删除已选</view>
					<view class="hej">
						<text class="hj">合计：</text>
						<text class="price">¥{{ total_price }}</text>
					</view>
				</view>
				<view class="f js" @click="buy()">结算</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			list: [],
			checkAll: false, //全选
			check_list: [], //选中
			total_price: '0.00' //合计
		};
	},
	onShow() {
		this.getData();
	},
	methods: {
		//获取数据
		getData() {
			this.$http.request({
				url: this.$http.urls.cart_list,
				data: { userId: this.$getUser().id },
				success: res => {
					this.list = res.data.data;
					this.calcul();
				}
			});
		},
		//选中
		check(item) {
			item.check = !item.check;
			this.calcul();
		},
		//全选
		check_all() {
			this.checkAll = !this.checkAll;
			this.list.forEach(item => {
				item.check = this.checkAll;
			});
			this.calcul();
		},
		//计算价格和选中
		calcul() {
			this.check_list = this.list.filter(item => {
				return item.check;
			});
			this.checkAll = this.check_list.length == this.list.length ? true : false;
			this.total_price = 0;
			this.check_list.forEach(item => {
				this.total_price = this.$util.accAdd(this.total_price, item.goods.price);
			});
			this.$forceUpdate();
		},
		del() {
			let ids = this.check_list.map(item => item.id);
			uni.showModal({
				title: '提示',
				content: '是否删除选中服务?',
				success: res => {
					if (res.confirm) {
						this.$http.request({
							url: this.$http.urls.cart_del + ids,
							method: 'delete',
							success: res => {
								uni.showToast({ title: '删除成功' });
								this.getData();
							}
						});
					}
				}
			});
		},
		//详情
		detail(item) {
			uni.navigateTo({ url: 'detail?id=' + item.goodsId });
		},
		//结算
		buy() {
			if (this.check_list == 0) {
				uni.showModal({ content: '请勾选服务', showCancel: false });
				return;
			}
			console.log(JSON.stringify(this.check_list));
			uni.navigateTo({ url: 'pay?list=' + JSON.stringify(this.check_list) });
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $page;
}
.list {
	padding: 0px 10px 70px 10px;
	.item {
		background-color: white;
		padding: 15px 8px 15px 8px;
		border-bottom: 1px solid #e5e5e5;
		border-radius: 5px;
		margin-top: 10px;
		.icon {
			width: 10%;
			float: left;
			padding-left: 3px;
			font-size: 17px;
			margin-top: 30px;
			font-weight: bold;
			
			&.active {
				color: $red;
			}
		}
		.pic {
			float: left;
			width: 30%;
			border-radius: 3px;
			height:80px;
			background-color: #dcdcdc;
		}
		.con {
			padding-left: 10px;
			width: 60%;
			float: left;
			.title {
				font-size: 13px;
				text-align: left;
				color: #252525;
			}
			.price {
				color: $theme-color;
				margin-top: 5px;
			}
		}
	}
}
.footer {
	/* #ifdef MP-WEIXIN */
	bottom: 0px;
	/* #endif */
	/* #ifdef H5 */
	bottom: 40px;
	/* #endif */
}
</style>