luban-mall/pagesA/cart/prepare.vue

209 lines
4.6 KiB
Vue
Raw Normal View History

2022-07-18 05:35:14 +00:00
<template>
<view class="pad-b150">
<status-nav :ifReturn="true" navBarTitle="购物车" :marginBottom="0"></status-nav>
2022-07-18 08:06:52 +00:00
<view class="cart-content" v-if="isLoading">
2022-07-18 05:35:14 +00:00
<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">
2022-07-18 06:03:57 +00:00
<view class="price">合计<span>{{business_code!==''?total:original_total}}</span></view>
2022-07-18 05:35:14 +00:00
<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'),
2022-07-18 06:03:57 +00:00
original_total:'', //总价
total:'', //会员总价
2022-07-18 08:06:52 +00:00
isLoading:true,
2022-07-18 05:35:14 +00:00
}
},
onReachBottom() {
},
onShow() {
this.getListData();
},
methods: {
getListData(){
2022-07-18 08:06:52 +00:00
uni.showLoading({
title: '加载中'
});
this.isLoading = false;
2022-07-18 05:35:14 +00:00
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;
2022-07-18 06:03:57 +00:00
this.total = res.data.total;
2022-07-18 05:35:14 +00:00
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;
2022-07-18 08:14:26 +00:00
uni.hideLoading();
2022-07-18 08:06:52 +00:00
this.isLoading = true;
}else{
this.$toolAll.tools.showToast(res.msg);
setTimeout(()=>{
uni.navigateBack({
delta:1
})
},1000)
2022-07-18 05:35:14 +00:00
}
})
},
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>