chen
/
mall-applet1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

分类页改版、购物车删除功能、提交订单表单验证修改完成

static-project
chen 2022-06-13 16:13:03 +08:00
parent 3f920deb8b
commit 47d0c1f1b3
4 changed files with 115 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/shopping-carts/cart-slide.vue
View File

@ -113,6 +113,7 @@
// return this.$toolAll.tools.addXiaoShu(allPrice); // return this.$toolAll.tools.addXiaoShu(allPrice);
return allPrice.toString(); return allPrice.toString();
}, },
// 要删除的数量 // 要删除的数量
buyNum() { buyNum() {
let buyNum = 0; let buyNum = 0;
@ -123,6 +124,7 @@
}) })
return buyNum; return buyNum;
}, },
// 全选 // 全选
allChoose() { allChoose() {
let ifAll = false; let ifAll = false;
@ -241,12 +243,6 @@
chooseEv(index) { chooseEv(index) {
this.listData[index].ifcheck = !this.listData[index].ifcheck; this.listData[index].ifcheck = !this.listData[index].ifcheck;
}, },
// 去商品详情事件
goDetail(id) {
uni.navigateTo({
url:'/pagesB/shop-detail/shop-detail'
})
},
// 数量加减事件 // 数量加减事件
addCutEv(index,num) { addCutEv(index,num) {
if(this.listData[index].slide_x==0){ if(this.listData[index].slide_x==0){
@ -259,6 +255,16 @@
// 减 ，如果当前商品数量大于最小值 // 减 ，如果当前商品数量大于最小值
if(this.listData[index].num > this.minNum) { if(this.listData[index].num > this.minNum) {
this.listData[index].num--; this.listData[index].num--;
}else{
uni.showModal({
title: '提示',
content: '是否将该商品移除购物车？',
success: (res)=> {
if (res.confirm) {
this.delShopEv(this.listData[index].id);
}
}
});
} }
} }
this.$requst.post('/api/order/shopping-cart-change-num',{id:this.listData[index].id,num:this.listData[index].num}).then(res=>{ this.$requst.post('/api/order/shopping-cart-change-num',{id:this.listData[index].id,num:this.listData[index].num}).then(res=>{
@ -268,6 +274,18 @@
}) })
} }
}, },
// 删除商品
delShopEv(id){
this.$requst.post('/api/order/shopping-cart-del',{id:id}).then(res=>{
if(res.code==0){
this.$toolAll.tools.showToast('删除成功');
this.getList();
}else{
this.$toolAll.tools.showToast(res.msg)
}
})
},
// 查看商品详情 // 查看商品详情
goDetail(id) { goDetail(id) {
uni.navigateTo({ uni.navigateTo({

158
pages/tabbar/cate/cate.vue
View File

@ -5,7 +5,7 @@
<view class="dis"> <view class="dis">
<view class="cate-left-box"> <view class="cate-left-box">
<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf"> <scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
<view class="pad-x160"> <view>
<view class="flexs clips1 pad-z20 fon24" <view class="flexs clips1 pad-z20 fon24"
@tap="chooseCate(index,item.id)" :style="{backgroundColor: current==index ? '#ff3673' : '#FFFFFF',color: current==index ? '#FFFFFF' : '#000000'}" @tap="chooseCate(index,item.id)" :style="{backgroundColor: current==index ? '#ff3673' : '#FFFFFF',color: current==index ? '#FFFFFF' : '#000000'}"
v-for="(item,index) in cateList" :key="index" style="min-width: 160rpx;height: 86rpx;line-height: 86rpx;box-sizing: border-box;" >{{item.title}}</view> v-for="(item,index) in cateList" :key="index" style="min-width: 160rpx;height: 86rpx;line-height: 86rpx;box-sizing: border-box;" >{{item.title}}</view>
@ -13,28 +13,29 @@
</scroll-view> </scroll-view>
</view> </view>
<view class="pad-zy20" style="width: 100%;"> <view class="pad-zy20" style="width: 100%;">
<view class="pad-sx20" :style="{width: newWidth+'px'}" v-if="secendCateList.length>0"> <scroll-view :style="{height: scrollHeight +'px'}" style="padding-bottom: 130rpx;"
<swiper-tab-jl :list="secendCateList" v-model="activeIndex" @changeEv="clickTab" itemColor="#FFFFFF"></swiper-tab-jl> scroll-y="true"
</view> :scroll-into-view="doms"
<scroll-view scroll-y="true" @scrolltolower="scrollBottomEv" :style="{height: scrollHeight +'px'}"> scroll-with-animation
<view class=" posir" style="padding-bottom: 220rpx;"> @scroll="scrolls"
<view class="disac bbt-d9 pad-sx30" @tap="goDetail(item.id)" v-for="(item,index) in dataList" :key="index"> @scrolltolower="scrollBottomEv">
<image class="radius30 flexs borbot-cc" :src="item.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image> <view class="posir" :id="'product'+index" v-for="(item,index) in dataList" :key="index">
<view class="width100 disjb fc mar-z20" style="height: 240rpx;"> <view class="disac bbt-d9 pad-sx30" @tap="goDetail(item.id)" v-for="(item1,index1) in item" :key="index1">
<view class="fon30 colb clips2">{{item.title}}</view> <view class="cate-title" v-if="item.length > 0">{{cateList[index].title}}</view>
<view class=""> <view class="cate-txt">
<view class="fon36 textc mar-x36">￥{{item.price}}</view> <image class="radius30 flexs borbot-cc" :src="item1.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
<view @tap.stop="addCartEv(item.skuId)" class="colf disjcac fon24 radius30 cate-btn"> <view class="width100 disjb fc mar-z20" style="height: 240rpx;">
<i class="icon icon-shop-cart mar-y10" style="font-size: 36rpx;"></i> <view class="fon30 colb clips2">{{item1.title}}</view>
立即选购 <view class="">
<view class="fon36 textc mar-x36">￥{{item1.price}}</view>
<view @tap.stop="addCartEv(item1.skuId)" class="colf disjcac fon24 radius30 cate-btn">
<i class="icon icon-shop-cart mar-y10" style="font-size: 36rpx;"></i>
立即选购
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="mar-s40" v-if="total==dataList.length"><pitera textStr="——到底啦——"></pitera></view>
<view class="loading-box" v-show="ifLoading" style="position: absolute;left: 50%;transform: translateX(-50%);" :style="{bottom:footHeight+10+'px'}">
<view class="loader-16"></view>
</view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@ -70,12 +71,12 @@
activeIndex:0, activeIndex:0,
secendCateList:[], secendCateList:[],
dataList:[], //商品列表 dataList:[], //商品列表
page:1,
size:10,
total:0, total:0,
flag:true, flag:true,
ifLoading:false, ifLoading:false,
pid:''//分类id pid:'',//分类id
doms:'',
topList:[]
} }
}, },
computed:{ computed:{
@ -92,20 +93,17 @@
}, },
methods: { methods: {
// 查询商品列表 // 查询商品列表
checkShopList(id){ checkShopList(){
console.log(id,'分类id2') for(let i=0;i<this.cateList.length;i++){
this.ifLoading = true; console.log(i)
let params = { this.ifLoading = true;
page:this.page,// query 否 1 页数 let params = {
size:this.size,// query 否 10 每页数量 category_id:this.cateList[i].id
category_id:id }
} this.$requst.post('/api/spu/list',params).then(res=>{
this.$requst.post('/api/spu/list',params).then(res=>{ if(res.code==0) {
if(res.code==0) { this.total = res.data.total;
console.log(res,'商品列表') let newArr = [];
this.total = res.data.total;
if(this.page==1) this.dataList = [];
if(res.data.list.length) {
res.data.list.forEach(item=>{ res.data.list.forEach(item=>{
let obj = { let obj = {
id:item.id, id:item.id,
@ -114,12 +112,17 @@
title:item.name, title:item.name,
price:this.$toolAll.tools.changeNum(parseInt(item.price)+'') price:this.$toolAll.tools.changeNum(parseInt(item.price)+'')
} }
this.dataList.push(obj); newArr.push(obj);
}) })
this.dataList[i] = newArr;
if(i == this.cateList.length-1){
console.log(i,123)
this.getNodesInfo();
this.ifLoading = false;
}
} }
} })
this.ifLoading = false; }
})
}, },
// 查询左侧分类列表 // 查询左侧分类列表
@ -134,50 +137,61 @@
this.newWidth = this.newWidth - rect.width - 20; this.newWidth = this.newWidth - rect.width - 20;
}).exec() }).exec()
},200) },200)
this.pid = this.cateList[this.current].id; this.checkShopList();
if(this.cateList[this.current].child) {
this.secendCateList = this.cateList[this.current].child;
this.checkShopList(this.secendCateList[0].id);
}else{
this.checkShopList(this.cateList[this.current].id);
}
} }
}) })
}, },
scrollBottomEv(){ scrollBottomEv(){
console.log('触底了'); console.log('触底了');
if(this.total!=this.dataList.length) { // setTimeout(()=>{
this.page++; // this.current =this.cateList.length - 1;
this.checkShopList(this.pid); // },80)
}
}, },
// 一级分类选择 // 一级分类选择
chooseCate(index,id) { chooseCate(index,id) {
this.current = index; this.current =index
this.page = 1; this.doms = 'product'+index
this.pid = id;
console.log(this.pid,'分类id')
// if(this.activeIndex>this.cateList[index].child.length-1) {
// this.activeIndex = this.cateList[index].child.length-1;
// }
if(this.cateList[index].child) {
this.secendCateList = this.cateList[index].child;
this.activeIndex = 0;
this.pid = this.secendCateList[0].id;
} else {
this.secendCateList = [];
}
this.checkShopList(this.pid);
}, },
// 滚动
scrolls(e){
let scrollTop = e.target.scrollTop
for(let i =0;i<this.topList.length;i++){
let h1 = this.topList[i]
let h2 = this.topList[i+1]
if(scrollTop>=h1&&scrollTop<h2){
this.current = i
}
}
},
// 改变topList
getNodesInfo(){
setTimeout(()=>{
const query = uni.createSelectorQuery().in(this);
query.selectAll('.posir').boundingClientRect().exec((res)=>{
console.log(res,234)
let nodes = res[0]
let rel =[];
nodes.map(item=>{
rel.push(item.top)
})
this.topList = rel
})
},200)
},
// 跳转详情页
goDetail(id) { goDetail(id) {
uni.navigateTo({ uni.navigateTo({
url:'/pagesB/shop-detail/shop-detail?id='+id url:'/pagesB/shop-detail/shop-detail?id='+id
}) })
}, },
// 加入购物车
addCartEv(id) { addCartEv(id) {
this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{ this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
if(res.code==0) { if(res.code==0) {
@ -188,17 +202,15 @@
} }
}) })
}, },
// tab点击事件
clickTab(index){
this.activeIndex = index;
this.pid = this.secendCateList[this.activeIndex].id;
this.checkShopList(this.pid);
},
} }
} }
</script> </script>
<style> <style>
.cate-btn{background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);width: 170rpx;height: 60rpx;box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);} .cate-btn{background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);width: 170rpx;height: 60rpx;box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);}
.disac {flex-wrap: wrap;}
.cate-txt{
display: flex;
}
.cate-title{width: 100%;font-size: 24rpx;line-height: 1.5;padding-bottom: 30rpx;color: #666;}
</style> </style>

5
pagesB/order-detail/order-detail.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="pad-x140"> <view>
<status-container titlet="订单详情"> <status-container titlet="订单详情">
<view slot="content"> <view slot="content">
<view class="pad-zy20"> <view class="pad-zy20">
@ -43,9 +43,6 @@
<view class="mar-s10" style="color: #8c8c9b;">希望到货时间：{{orderDetail.expected_delivery_date}}</view> <view class="mar-s10" style="color: #8c8c9b;">希望到货时间：{{orderDetail.expected_delivery_date}}</view>
</view> </view>
</view> </view>
<view class="posixzy bacf pad-sx20 pad-zy50" style="box-shadow: 0rpx -2rpx 10rpx rgba(0, 0, 0, 0.06);">
<view class="navigate-to-where radius30 colf fon36 tcenter">确认收货</view>
</view>
</view> </view>
</view> </view>
</status-container> </status-container>

6
pagesB/settlement/settlement.vue
View File

@ -93,7 +93,11 @@
}, },
checkEmpty(){ checkEmpty(){
let result = false; let result = false;
if(!this.address) { if(!this.lasttime) {
this.$toolAll.tools.showToast('请选择婚期');
} else if(!this.totime) {
this.$toolAll.tools.showToast('请选择希望送到日期');
} else if(!this.address) {
this.$toolAll.tools.showToast('请填写收货地址'); this.$toolAll.tools.showToast('请填写收货地址');
} else if(!this.name) { } else if(!this.name) {
this.$toolAll.tools.showToast('请填写联系人'); this.$toolAll.tools.showToast('请填写联系人');