新增购物车系列接口、新增规格接口、新增订单信息准备接口
parent
25de1f1a97
commit
9d13330cc6
|
|
@ -82,3 +82,5 @@
|
|||
.tips-btn{
|
||||
border: 2rpx solid #f37717;color: #f37717;width: 146rpx;height: 54rpx;
|
||||
}
|
||||
|
||||
.specActive{border: 2rpx solid #e42417;color: #FFFFFF;background-color: #e42417;}
|
||||
|
|
@ -39,14 +39,12 @@ const checkError = (e) => {
|
|||
flag = false;
|
||||
switch (Number(e.data.code)) {
|
||||
case 500:
|
||||
// 接口错误
|
||||
console.log('500接口错误');
|
||||
case 4003:// 参数错误
|
||||
case 4004:// 记录不存在
|
||||
case 5000:// xxx错误
|
||||
case 5001:// xxx错误
|
||||
case 5050:// 服务器错误，请稍后重试
|
||||
case 5051:// 未知错误
|
||||
console.log('4003参数错误');
|
||||
uni.showToast({
|
||||
title:e.data.msg,
|
||||
icon:'none'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<status-container :ifReturn="false" titlet="传武佳小程序">
|
||||
<view slot="content">
|
||||
<view class="" style="margin-top: -20rpx;">
|
||||
<swiper-pu newBottom="20rpx" newHeight="460rpx"></swiper-pu>
|
||||
<swiper-pu :bannerList="bannerList" newBottom="20rpx" newHeight="460rpx"></swiper-pu>
|
||||
</view>
|
||||
<view class="posi-sticky" :style="{top:newtop+'px'}">
|
||||
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
||||
|
|
@ -79,13 +79,14 @@
|
|||
data() {
|
||||
return {
|
||||
newtop:uni.getSystemInfoSync().statusBarHeight + 40,
|
||||
bannerList:[],//轮播图
|
||||
current:0,
|
||||
dataList:[],//分类列表
|
||||
classId:'',//分类id
|
||||
bigCourse:[],
|
||||
videoList:[],//推荐视频
|
||||
ifLoading:false,
|
||||
ifCount:0
|
||||
ifCount:0,
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
|
@ -99,8 +100,28 @@
|
|||
onLoad() {
|
||||
// 调用获取分类列表
|
||||
this.getCourseCate();
|
||||
// 调用获取首页banner图
|
||||
this.getBanner();
|
||||
},
|
||||
methods: {
|
||||
// 获取首页banner图
|
||||
getBanner(){
|
||||
this.$requst.get('/api/common/slides',{position:'home-banner'}).then(res=>{
|
||||
if(res.code==0){
|
||||
if(res.data.length){
|
||||
res.data.forEach(item=>{
|
||||
let obj = {
|
||||
imgSrc:item.src,
|
||||
url:item.url,
|
||||
isVideo:false,
|
||||
poster:''
|
||||
}
|
||||
this.bannerList.push(obj);
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// tab点击事件
|
||||
clickTab(index){
|
||||
this.current = index;
|
||||
|
|
@ -157,7 +178,12 @@
|
|||
},
|
||||
// 获取推荐视频列表
|
||||
getVideoList(){
|
||||
this.$requst.post('/api/spu/video',{is_home:1}).then(res=>{
|
||||
let params = {
|
||||
page:1,
|
||||
size:50,
|
||||
is_home:1
|
||||
}
|
||||
this.$requst.post('/api/spu/video',params).then(res=>{
|
||||
if(res.code==0){
|
||||
// 设置推荐视频列表
|
||||
this.videoList = res.data.list;
|
||||
|
|
@ -168,10 +194,10 @@
|
|||
getShopList(){
|
||||
let params = {
|
||||
page:1,
|
||||
size:20,
|
||||
size:50,
|
||||
is_home:1
|
||||
}
|
||||
this.$requst.post('/api/spu/list',{params}).then(res=>{
|
||||
this.$requst.post('/api/spu/list',params).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$refs.refshop.list = res.data.list;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</view>
|
||||
<view class="pad-zy20">
|
||||
<view class="posir bacf disac fw pad-zy10 boxshow2 pad-x30" style="z-index: 1;">
|
||||
<view @tap="chooseFun(index)" class="disjbac bbot width100 pad-sx20 pad-zy30" v-for="(item,index) in dataList" :key="index">
|
||||
<view class="disjbac bbot width100 pad-sx20 pad-zy30" v-for="(item,index) in dataList" :key="index">
|
||||
<view class="fon24 col-e42417">{{item.price}}</view>
|
||||
<view class="fon20" style="color: #676767;">{{item.time}}</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="购物车" returnc="#FFFFFF">
|
||||
<view slot="content" style="margin-top: -20rpx;">
|
||||
<view v-if="loading" slot="content" style="margin-top: -20rpx;">
|
||||
<view class="bacf boxshowb posi-sticky" :style="{top:newtop+'px'}">
|
||||
<view class="pad-zy30 pad-sx24 disjbac pad-zy30 pad-sx20">
|
||||
<view class="fon26 col26" v-if="addressInfo">{{addressInfo.province_str}}{{addressInfo.city_str}}{{addressInfo.county_str}}</view>
|
||||
|
|
@ -14,11 +14,12 @@
|
|||
<!-- 选择 -->
|
||||
<view class="flexs mo-item" :class="item.ifcheck ? 'active-item' : ''" @tap="chooseEv(index)"></view>
|
||||
<!-- 商品图片 -->
|
||||
<image @tap="chooseEv(index)" class="flexs mar-zy20" :src="item.imgsrc" mode="aspectFill" style="width: 194rpx;height: 136rpx;" lazy-load></image>
|
||||
<image @tap="chooseEv(index)" class="flexs mar-zy20" :src="item.spu.spu_cover" mode="aspectFill" style="width: 194rpx;height: 136rpx;" lazy-load></image>
|
||||
<view class="disjb fc width100" style="height: 136rpx;">
|
||||
<view @tap="goDetail(item.id)">
|
||||
<view @tap="goDetail(item.spu.id)">
|
||||
<!-- 商品标题 -->
|
||||
<view class="fon24 clips2 col26">{{item.title}}{{datalist.length}}</view>
|
||||
<view class="fon24 clips2 col26">{{item.spu.spu_name}}</view>
|
||||
<view class="fon24 clips1 col9 mar-s10">{{item.sku.sku_name}}</view>
|
||||
</view>
|
||||
<view class="disjbac">
|
||||
<!-- 商品价格 -->
|
||||
|
|
@ -88,13 +89,20 @@
|
|||
originalNum:0,//当前输入框原值
|
||||
maxNum:20,//最大可输入数量
|
||||
minNum:1,//最小可输入数量
|
||||
addressInfo:''
|
||||
addressInfo:'',
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.loading = false;
|
||||
// 开启banner图自动轮播
|
||||
this.$store.commit('setAutoplay',true);
|
||||
// 获取地址信息
|
||||
this.getAddress();
|
||||
// 获取购物车列表
|
||||
this.getCartList();
|
||||
// 检测是否全选
|
||||
this.judgeSelectAllEv();
|
||||
},
|
||||
onHide() {
|
||||
// 关闭banner图自动轮播
|
||||
|
|
@ -126,6 +134,30 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
// 获取购物车列表
|
||||
getCartList(){
|
||||
let params = {
|
||||
page:1,
|
||||
size:1000
|
||||
}
|
||||
this.datalist = [];
|
||||
this.$requst.get('/api/order/shopping-cart',params).then(res=>{
|
||||
if(res.code==0){
|
||||
if(res.data.list.length){
|
||||
res.data.list.forEach(item=>{
|
||||
let obj = {
|
||||
...item,
|
||||
ifcheck:false,
|
||||
ifExit:true,
|
||||
ifShow:true
|
||||
}
|
||||
this.datalist.push(obj);
|
||||
})
|
||||
}
|
||||
this.loading = true;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取地址列表
|
||||
getAddress(){
|
||||
this.$requst.get('/api/user/address').then(res=>{
|
||||
|
|
@ -148,9 +180,27 @@
|
|||
if(this.datalist.length){
|
||||
let exit = this.datalist.findIndex(item=>item.ifcheck==true);
|
||||
if(exit!=-1){
|
||||
let newList = [];
|
||||
this.datalist.forEach(item=>{
|
||||
let obj = {
|
||||
sku_coding:item.sku.coding,
|
||||
num:item.num,
|
||||
}
|
||||
newList.push(obj);
|
||||
})
|
||||
let params = {
|
||||
sku_list:newList
|
||||
};
|
||||
this.$requst.post('/api/order/prepare-info',params).then(res=>{
|
||||
if(res.code==0){
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/confirm-order/confirm-order'
|
||||
})
|
||||
uni.setStorageSync('orderInfo',res.data);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$toolAll.tools.showToast('请选择要支付的商品')
|
||||
}
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
|
|
@ -194,13 +244,16 @@
|
|||
// 加 ，如果当前商品数量不等于最大值
|
||||
if(this.datalist[index].num != this.maxNum) {
|
||||
this.datalist[index].num++;
|
||||
this.editNum(this.datalist[index].id,this.datalist[index].num);
|
||||
}
|
||||
} else {
|
||||
// 减 ，如果当前商品数量大于最小值
|
||||
if(this.datalist[index].num > this.minNum) {
|
||||
this.datalist[index].num--;
|
||||
this.editNum(this.datalist[index].id,this.datalist[index].num);
|
||||
} else {
|
||||
this.datalist[index].ifExit = false;
|
||||
this.delCart(this.datalist[index].id);
|
||||
setTimeout(()=>{
|
||||
this.datalist.splice(index,1);
|
||||
this.judgeSelectAllEv();
|
||||
|
|
@ -209,6 +262,18 @@
|
|||
}
|
||||
console.log(this.allPrice,'总价');
|
||||
},
|
||||
// 修改购物车数量
|
||||
editNum(id,num){
|
||||
this.$requst.post('/api/order/shopping-cart-change-num',{id,num}).then(res=>{})
|
||||
},
|
||||
// 删除购物车
|
||||
delCart(id){
|
||||
this.$requst.post('/api/order/shopping-cart-del',{id}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('删除成功');
|
||||
}
|
||||
})
|
||||
},
|
||||
// 输入框获取焦点事件
|
||||
focusEv(num) {
|
||||
// 储存当前商品的原始数值
|
||||
|
|
@ -220,6 +285,7 @@
|
|||
let currentNum = e.detail.value*1;
|
||||
// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
|
||||
this.datalist[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
|
||||
this.editNum(this.datalist[index].id,this.datalist[index].num);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,20 +12,23 @@
|
|||
<view class="icon icon-next fon28" style="color: #777777;"></view>
|
||||
</view>
|
||||
<view class="bacf mar-s30 pad30 fon24 boxshowb">
|
||||
<view class="disac bbot pad-x30">
|
||||
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" mode="aspectFill" class="flexs mar-y20" style="width: 228rpx;height: 160rpx;" lazy-load></image>
|
||||
<view class="disjb fc pad-sx10 fon24" style="height: 160rpx;">
|
||||
<view class="col26 clips2">武，止戈为武；术，思通造化、随通而 行为术基础动作教学</view>
|
||||
<view class="col26 disjbac">
|
||||
<view class="">￥199.00</view>
|
||||
<view style="letter-spacing: 6rpx;">X2</view>
|
||||
<view class="disac bbot pad-x30" v-for="(item,index) in orderInfo.list" :key="index">
|
||||
<image :src="item.sku_cover" mode="aspectFill" class="flexs mar-y20" style="width: 228rpx;height: 160rpx;" lazy-load></image>
|
||||
<view class="disjb fc pad-sx10 fon24 width100" style="height: 160rpx;">
|
||||
<view class="col26 clips2">{{item.goods_name}}</view>
|
||||
<view class="col26 width100">
|
||||
<view class="mar-x10">{{item.sku_name}}</view>
|
||||
<view class=" disjbac">
|
||||
<view class="">￥{{item.price}}</view>
|
||||
<view style="letter-spacing: 6rpx;">X{{item.num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bbot pad-sx30">
|
||||
<view class="disjbac">
|
||||
<view class="">商品金额</view>
|
||||
<view class="">￥199.00</view>
|
||||
<view class="">￥{{orderInfo.original_total}}</view>
|
||||
</view>
|
||||
<view class="disjbac mar-s30">
|
||||
<view class="">优惠券抵扣</view>
|
||||
|
|
@ -43,7 +46,7 @@
|
|||
<!-- 立即购买 -->
|
||||
<view class="posixzy bacf pad-sx20 disjbac pad-zy30 boxshowt">
|
||||
<view class="fon24">合计：<span class="col-e42417 fon34 bold">￥189.00</span></view>
|
||||
<view class="fon24 colf radius32 disjcac" style="background-color: #f37617;width: 184rpx;height: 64rpx;">去支付</view>
|
||||
<view @tap="goPay" class="fon24 colf radius32 disjcac" style="background-color: #f37617;width: 184rpx;height: 64rpx;">去支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
|
|
@ -57,18 +60,42 @@
|
|||
components:{'foot-tab' :footTab},
|
||||
data() {
|
||||
return {
|
||||
addressInfo:''
|
||||
addressInfo:'',
|
||||
orderInfo:'',
|
||||
flag:true
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.addressInfo = uni.getStorageSync('addressInfo');
|
||||
console.log(this.addressInfo,77777);
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
this.getAddress();
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 收货地址查询
|
||||
getAddress(){
|
||||
this.$requst.get('/api/user/address').then(res=>{
|
||||
if(res.code==0){
|
||||
if(res.data.length){
|
||||
res.data.forEach(item=>{
|
||||
if(item.is_default){
|
||||
this.addressInfo = item;
|
||||
} else {
|
||||
this.addressInfo = res.data[0];
|
||||
}
|
||||
})
|
||||
}
|
||||
this.orderInfo = uni.getStorageSync('orderInfo');
|
||||
}
|
||||
})
|
||||
},
|
||||
// 去支付
|
||||
goPay(){
|
||||
if(this.flag){
|
||||
this.flag = false;
|
||||
this.$toolAll.tools.showToast('正在调起支付...');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,22 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bacf mar-s30 pad-zy30 pad-x30">
|
||||
<view class="bbot pad-x10 pad-s30">
|
||||
<span class="fon28 bold posir pad-x10">
|
||||
规格/参数
|
||||
<view class="posia-xzy" style="height: 6rpx;background-color: #e42417;bottom: -2rpx;"></view>
|
||||
</span>
|
||||
</view>
|
||||
<view class="" v-if="isLoading">
|
||||
<view class="disac fon24 col26 mar-s20" v-for="(item,index) in specList" :key="index">
|
||||
<view class="">{{item.title}}：</view>
|
||||
<view class="disac">
|
||||
<view @tap="chooseSpec(index,item1.id)" class="pad-sx10 pad-zy20 radius10 borbot-df mar-y10" :class="moSpecList[index]==item1.id?'specActive':''" v-for="(item1,index1) in item.children" :key="index1">{{item1.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bacf mar-s30 pad-zy30 pad-x30">
|
||||
<view class="bbot pad-x10 pad-s30">
|
||||
<span class="fon28 bold posir pad-x10">
|
||||
|
|
@ -27,7 +43,7 @@
|
|||
<view class="posixzy bacf pad-zy30 disjbac pad-sx20">
|
||||
<view class="fon30 bold col-e42417">￥{{shopInfo.price}}</view>
|
||||
<view class="disac fon24 colf">
|
||||
<view class="radius32 disjcac" style="background-color: #FFFFFF;color: #f37617;border: 2rpx solid #f37617; width: 184rpx;height: 64rpx;">加入购物车</view>
|
||||
<view @tap="addCart" class="radius32 disjcac" style="background-color: #FFFFFF;color: #f37617;border: 2rpx solid #f37617; width: 184rpx;height: 64rpx;">加入购物车</view>
|
||||
<view @tap="goConfirmOrder" class="radius32 disjcac mar-z10" style="background-color: #f37617;border: 2rpx solid #f37617;width: 184rpx;height: 64rpx;">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -52,7 +68,12 @@
|
|||
shopId:'',//产品id
|
||||
shopInfo:'',//产品详情
|
||||
bannerList:[],//产品轮播
|
||||
loading:false
|
||||
loading:false,
|
||||
specList:[],//规格列表
|
||||
moSpecList:[],//默认规格
|
||||
haveSpecList:[],//有这个规格商品
|
||||
isLoading:true,
|
||||
shopList:[]
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
|
@ -102,14 +123,78 @@
|
|||
poster:''
|
||||
})
|
||||
}
|
||||
// 商品规格
|
||||
this.$requst.get('/api/spu/spec',{id:this.shopId}).then(resspec=>{
|
||||
if(resspec.code==0){
|
||||
// 所有规格列表
|
||||
this.specList = resspec.data.spec;
|
||||
// 默认规格
|
||||
this.moSpecList = resspec.data.sku.indexes.split('-');
|
||||
// 存在规格
|
||||
this.haveSpecList = resspec.data.sku_list;
|
||||
this.shopList.push({
|
||||
sku_list:[
|
||||
{
|
||||
sku_coding:resspec.data.sku.coding,
|
||||
num:1,
|
||||
sku_id:resspec.data.sku.id
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 规格选择
|
||||
chooseSpec(index,id1){
|
||||
let tempList = JSON.parse(JSON.stringify(this.moSpecList));
|
||||
tempList.splice(index,1,id1);
|
||||
let exit = this.haveSpecList.findIndex(item=>item.indexes==tempList.join('-'));
|
||||
if(exit!=-1){
|
||||
if(this.haveSpecList[exit].stock){
|
||||
this.isLoading = false;
|
||||
this.moSpecList[index] = id1;
|
||||
this.isLoading = true;
|
||||
this.shopList[0].sku_list[0].sku_coding = this.haveSpecList[exit].coding;
|
||||
this.shopList[0].sku_list[0].sku_id = this.haveSpecList[exit].id;
|
||||
} else {
|
||||
this.$toolAll.tools.showToast('库存不足');
|
||||
}
|
||||
} else {
|
||||
this.$toolAll.tools.showToast('暂无该规格');
|
||||
}
|
||||
},
|
||||
// 前往确认订单页
|
||||
goConfirmOrder(){
|
||||
let params = {
|
||||
sku_list:[
|
||||
this.objField('sku_id')
|
||||
]
|
||||
};
|
||||
this.$requst.post('/api/order/prepare-info',params).then(res=>{
|
||||
if(res.code==0){
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/confirm-order/confirm-order'
|
||||
})
|
||||
uni.setStorageSync('orderInfo',res.data);
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加购物车
|
||||
addCart(){
|
||||
let params = this.objField('sku_coding');
|
||||
this.$requst.post('/api/order/shopping-cart-add',params).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('添加购物车成功(*^▽^*)');
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除对象中某个字段
|
||||
objField(field){
|
||||
let newObj = JSON.parse(JSON.stringify(this.shopList[0].sku_list[0]));
|
||||
delete newObj[field];
|
||||
return newObj;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue