208 lines
4.6 KiB
Vue
208 lines
4.6 KiB
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;
|
||
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>
|