luban-mall/pagesA/cart/prepare.vue

<template>
	<view class="pad-b150">
		<status-nav :ifReturn="true" navBarTitle="购物车" :marginBottom="0"></status-nav>
		<view class="cart-content" v-if="isLoading">
			<view class="slide-list">
				<view class="slide-item" v-for="(item, index) in listData" :key="index">
					<view class="slide-item-li" @click="clickItemMethod(item)">
						<view class="shop-img">
							<image :src="item.image" mode="widthFix"></image>
						</view>
						<view class="shop-txt">
							<view class="shop-txt-top">
								<view class="title clips2">{{item.title}}</view>
								<view class="specs clips2">规格：{{item.customTitle==''?item.skuName:item.customTitle}}</view>
							</view>
							<view class="shop-txt-bottom">
								<!-- 商品价格 -->
								<view class="price">￥{{business_code!==''?item.price:item.original_price}}</view>
								<!-- 商品数量 -->
								<view class="num"><text>x{{item.num}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 全选 -->
			<view class="change-all">
				<view class="all-price">
					<view class="price">合计：<span>￥{{business_code!==''?total:original_total}}</span></view>
					<view class="btn" :style="{background: '#0073bc'}" @tap="submitEv">提交订单</view>
				</view> 
			</view> 
		</view>
	</view>
</template>

<script>
	// 底部组件
	import statusNav from '@/components/status-navs/status-nav.vue';
	import cartSlide from '@/components/shopping-carts/cart-slide';
	export default {
		components:{
			statusNav,
			cartSlide
		},
		data() {
			return { 
				listData:[],
				business_code:uni.getStorageSync('business_code'),
				original_total:'', //总价
				total:'', //会员总价
				isLoading:true,
			}
		},
		onReachBottom() {
		},
		onShow() {
			this.getListData();
		},
		methods: {
			getListData(){
				uni.showLoading({
					title: '加载中'
				});
				this.isLoading = false;
				this.$requst.post('/api/order/prepare-info',{sku_list:uni.getStorageSync('buyList')}).then(res=>{
					if(res.code==0) {
						this.original_total = res.data.original_total;
						this.total = res.data.total;
						let newArr = []
						res.data.list.forEach(item=>{
							let obj = {
								id: item.id,
								num:item.num,
								coding:item.coding,
								price:item.price,
								original_price: item.original_price,
								image: item.spu_cover,
								skuName: item.sku_name,
								title: item.goods_name,
								customTitle: item.custom_title,
							}
							newArr.push(obj);
						})
						this.listData = newArr;
						uni.hideLoading();
						this.isLoading = true;
					}else{
						this.$toolAll.tools.showToast(res.msg);
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				})
			},
			submitEv(){
				uni.navigateTo({
					url:'/pagesA/cart/settlement'
				})
			}
		}
	}
</script>

<style scoped>
	.slide-list{
		margin-top: 20rpx;
	}
	.slide-item{
		margin-top: 30rpx;
	}
	.slide-list .slide-item:first-child{
		margin-top: 0;
	}
	.slide-item-li{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
	}
	.slide-item-li .shop-img{
		width: 230rpx;
		height: 150rpx;
		border-radius: 10rpx;
		margin: 0 24rpx 0 6rpx;
		overflow: hidden;
	}
	.slide-item-li .shop-img image{
		width: 230rpx;
		min-height: 150rpx;
	}
	.slide-item-li .shop-txt{
		width: calc(100% - 260rpx);
	}
	.shop-txt-top{
		min-height: 100rpx;
	}
	.shop-txt-top .title{
		font-size: 30rpx;
		line-height: 1.5;
		color: #000000;
		font-weight: bold;
	}
	.shop-txt-top .specs{
		font-size: 24rpx;
		line-height: 1.5;
		color: #8c8c9b;
		margin: 3rpx;
	}
	.shop-txt-bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 50rpx;
	}
	.shop-txt-bottom .price{
		font-size: 30rpx;
		line-height: 1.5;
		color: #f81c1c;
	}
	.shop-txt-bottom .num{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 170rpx;
		font-size: 24rpx;
	}
	.shop-txt-bottom .num>text{
		font-size: 24rpx;
		line-height: 1.5;
		color: #666666;
	}
	.change-all{
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100vw;
		height: 130rpx;
		padding: 0 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
	}
	.all-price{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.all-price .price{
		font-size: 24rpx;
		margin-right: 25rpx;
		color: #000000;
	}
	.all-price .btn{
		line-height: 84rpx;
		padding: 0 30rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>