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 allPrice.toString();
},
// 要删除的数量
buyNum() {
let buyNum = 0;
@ -123,6 +124,7 @@
})
return buyNum;
},
// 全选
allChoose() {
let ifAll = false;
@ -241,12 +243,6 @@
chooseEv(index) {
this.listData[index].ifcheck = !this.listData[index].ifcheck;
},
// 去商品详情事件
goDetail(id) {
uni.navigateTo({
url:'/pagesB/shop-detail/shop-detail'
})
},
// 数量加减事件
addCutEv(index,num) {
if(this.listData[index].slide_x==0){
@ -259,6 +255,16 @@
// 减 ，如果当前商品数量大于最小值
if(this.listData[index].num > this.minNum) {
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=>{
@ -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) {
uni.navigateTo({

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

@ -5,7 +5,7 @@
<view class="dis">
<view class="cate-left-box">
<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
<view class="pad-x160">
<view>
<view class="flexs clips1 pad-z20 fon24"
@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>
@ -13,28 +13,29 @@
</scroll-view>
</view>
<view class="pad-zy20" style="width: 100%;">
<view class="pad-sx20" :style="{width: newWidth+'px'}" v-if="secendCateList.length>0">
<swiper-tab-jl :list="secendCateList" v-model="activeIndex" @changeEv="clickTab" itemColor="#FFFFFF"></swiper-tab-jl>
</view>
<scroll-view scroll-y="true" @scrolltolower="scrollBottomEv" :style="{height: scrollHeight +'px'}">
<view class=" posir" style="padding-bottom: 220rpx;">
<view class="disac bbt-d9 pad-sx30" @tap="goDetail(item.id)" v-for="(item,index) in dataList" :key="index">
<image class="radius30 flexs borbot-cc" :src="item.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
<view class="fon30 colb clips2">{{item.title}}</view>
<view class="">
<view class="fon36 textc mar-x36">￥{{item.price}}</view>
<view @tap.stop="addCartEv(item.skuId)" class="colf disjcac fon24 radius30 cate-btn">
<i class="icon icon-shop-cart mar-y10" style="font-size: 36rpx;"></i>
立即选购
<scroll-view :style="{height: scrollHeight +'px'}" style="padding-bottom: 130rpx;"
scroll-y="true"
:scroll-into-view="doms"
scroll-with-animation
@scroll="scrolls"
@scrolltolower="scrollBottomEv">
<view class="posir" :id="'product'+index" v-for="(item,index) in dataList" :key="index">
<view class="disac bbt-d9 pad-sx30" @tap="goDetail(item.id)" v-for="(item1,index1) in item" :key="index1">
<view class="cate-title" v-if="item.length > 0">{{cateList[index].title}}</view>
<view class="cate-txt">
<image class="radius30 flexs borbot-cc" :src="item1.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
<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 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>
</scroll-view>
</view>
@ -70,12 +71,12 @@
activeIndex:0,
secendCateList:[],
dataList:[], //商品列表
page:1,
size:10,
total:0,
flag:true,
ifLoading:false,
pid:''//分类id
pid:'',//分类id
doms:'',
topList:[]
}
},
computed:{
@ -92,20 +93,17 @@
},
methods: {
// 查询商品列表
checkShopList(id){
console.log(id,'分类id2')
this.ifLoading = true;
let params = {
page:this.page,// query 否 1 页数
size:this.size,// query 否 10 每页数量
category_id:id
}
this.$requst.post('/api/spu/list',params).then(res=>{
if(res.code==0) {
console.log(res,'商品列表')
this.total = res.data.total;
if(this.page==1) this.dataList = [];
if(res.data.list.length) {
checkShopList(){
for(let i=0;i<this.cateList.length;i++){
console.log(i)
this.ifLoading = true;
let params = {
category_id:this.cateList[i].id
}
this.$requst.post('/api/spu/list',params).then(res=>{
if(res.code==0) {
this.total = res.data.total;
let newArr = [];
res.data.list.forEach(item=>{
let obj = {
id:item.id,
@ -114,12 +112,17 @@
title:item.name,
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;
}).exec()
},200)
this.pid = this.cateList[this.current].id;
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);
}
this.checkShopList();
}
})
},
scrollBottomEv(){
console.log('触底了');
if(this.total!=this.dataList.length) {
this.page++;
this.checkShopList(this.pid);
}
// setTimeout(()=>{
// this.current =this.cateList.length - 1;
// },80)
},
// 一级分类选择
chooseCate(index,id) {
this.current = index;
this.page = 1;
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);
this.current =index
this.doms = 'product'+index
},
// 滚动
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) {
uni.navigateTo({
url:'/pagesB/shop-detail/shop-detail?id='+id
})
},
// 加入购物车
addCartEv(id) {
this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
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>
<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);}
.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>

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

@ -1,5 +1,5 @@
<template>
<view class="pad-x140">
<view>
<status-container titlet="订单详情">
<view slot="content">
<view class="pad-zy20">
@ -43,9 +43,6 @@
<view class="mar-s10" style="color: #8c8c9b;">希望到货时间：{{orderDetail.expected_delivery_date}}</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>
</status-container>

6
pagesB/settlement/settlement.vue
View File

@ -93,7 +93,11 @@
},
checkEmpty(){
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('请填写收货地址');
} else if(!this.name) {
this.$toolAll.tools.showToast('请填写联系人');