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

对接底部导航icon接口、对接购物车系列接口、对接轮播图接口

static-project
chen 2022-05-27 17:43:21 +08:00
parent 4f36f99210
commit d722273096
14 changed files with 345 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
App.vue
View File

@ -1,4 +1,5 @@
<script> <script>
import { themeEv } from '@/jsFile/public-api.js';
export default { export default {
globalData:{ globalData:{
projectname:'', // 项目名称 projectname:'', // 项目名称

21
components/foot-tabs/foot-tab.vue
View File

@ -5,9 +5,9 @@
boxShadow: `-10rpx 0rpx 20rpx rgba( 0, 0, 0, ${boxShadowNum})` boxShadow: `-10rpx 0rpx 20rpx rgba( 0, 0, 0, ${boxShadowNum})`
}"> }">
<!-- 后台动态改变的icon与标题 start --> <!-- 后台动态改变的icon与标题 start -->
<view @tap="choosefoot(index)" class="item-box" v-for="(item,index) in footList" :key="index"> <view @tap="choosefoot(index)" class="item-box" v-for="(item,index) in onLineList || footList" :key="index">
<view class="item-image-box disjcac" :class="current*1===index ? 'activeImg' : 'moImg'"> <view class="item-image-box disjcac" :class="current*1===index ? 'activeImg' : 'moImg'">
<view class="item-spot disjcac fon24" v-if="index==2 && num*1">{{num}}</view> <view class="item-spot disjcac fon24" v-if="index==2 && cartNum*1">{{cartNum}}</view>
<image :class="isIcon==index ? 'bulge' : ''" :style="{width:[39,41,39,32][index]+'rpx',height:[40,41,38,38][index]+'rpx'}" :src="current == index ? item.selectedIconPath : item.iconPath" mode="widthFix"></image> <image :class="isIcon==index ? 'bulge' : ''" :style="{width:[39,41,39,32][index]+'rpx',height:[40,41,38,38][index]+'rpx'}" :src="current == index ? item.selectedIconPath : item.iconPath" mode="widthFix"></image>
</view> </view>
<view class="clips1 fon24" :class="current==index ? 'activeclass' : 'defaultclass'">{{item.title}}</view> <view class="clips1 fon24" :class="current==index ? 'activeclass' : 'defaultclass'">{{item.title}}</view>
@ -16,6 +16,8 @@
</view> </view>
</template> </template>
<script> <script>
import {themeEv,getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default { export default {
name:'foot-tab', name:'foot-tab',
props:{ props:{
@ -24,11 +26,6 @@
type:String, type:String,
default:'0' default:'0'
}, },
// 点的数量
num: {
type:String,
default:'10'
},
// 默认哪个图标突出 // 默认哪个图标突出
isIcon:{ isIcon:{
type:String, type:String,
@ -103,6 +100,16 @@
query.select('.foot-box').boundingClientRect((rect) => { query.select('.foot-box').boundingClientRect((rect) => {
this.$store.commit('footHeightEv',rect.height); this.$store.commit('footHeightEv',rect.height);
}).exec() }).exec()
// 查询底部导航图标
themeEv();
// 查询购物车数量
getCartNum();
},
computed:{
...mapState({
onLineList: state => state.moduleA.onLineList,
cartNum: state=> state.moduleA.cartNum
}),
}, },
methods:{ methods:{
choosefoot(index){ choosefoot(index){

54
components/list/list-one.vue
View File

@ -26,6 +26,7 @@
<script> <script>
import pitera from '@/components/nothing/pitera'; import pitera from '@/components/nothing/pitera';
import {getCartNum} from '@/jsFile/public-api.js';
export default { export default {
name:"list-one", name:"list-one",
components:{ components:{
@ -46,20 +47,22 @@
data() { data() {
return { return {
dataList:[ dataList:[
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖入海盐太妃糖入海盐太妃糖入海盐太妃糖入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖入海盐太妃糖入海盐太妃糖入海盐太妃糖入海盐太妃糖',price:'2,000'},
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
{id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'}, // {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
], ],
ifLoading:false, ifLoading:false,
total:0 total:0,
page:1,
size:10
}; };
}, },
mounted() { mounted() {
@ -67,17 +70,24 @@
}, },
methods:{ methods:{
moreEv() { moreEv() {
this.ifLoading = true; if(this.total!=this.dataList.length) {
setTimeout(()=>{ this.page++;
this.total = this.dataList.length; this.getList();
this.ifLoading = false; }
console.log(this.total);
},2000)
}, },
// 列表查询 // 列表查询
getList(){ getList(){
this.$requst.post('/api/spu/home').then(res=>{ this.ifLoading = true;
if(res.code) { let params = {
keyword:'',
page:this.page,
size:this.size
}
this.$requst.post('/api/spu/home',params).then(res=>{
if(res.code==0) {
this.total = res.data.total;
if(this.page==1) this.dataList = [];
if(res.data.list.length) { if(res.data.list.length) {
res.data.list.forEach(item=>{ res.data.list.forEach(item=>{
let obj = { let obj = {
@ -91,6 +101,7 @@
}) })
} }
} }
this.ifLoading = false;
}) })
}, },
// 加入购物车 // 加入购物车
@ -98,7 +109,8 @@
if(this.$toolAll.tools.judgeAuth()) { if(this.$toolAll.tools.judgeAuth()) {
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) {
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)') this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
getCartNum();
} else { } else {
this.$toolAll.tools.showToast(res.msg) this.$toolAll.tools.showToast(res.msg)
} }

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

@ -49,9 +49,8 @@
<view class="fon32 cart-submit-btn" :style="{background: !buyNum ? '#cccccc' : 'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}" @tap="submitEv">{{allPrice==0 ? '去购物' : `提交订单 (${buyNum})`}}</view> <view class="fon32 cart-submit-btn" :style="{background: !buyNum ? '#cccccc' : 'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}" @tap="submitEv">{{allPrice==0 ? '去购物' : `提交订单 (${buyNum})`}}</view>
</view> </view>
</view> </view>
<view class="" v-if="listData.length!=0 && total==listData.length"><pitera textStr="—— 到底啦 ——"></pitera></view>
<nothing-page v-if="!ifLoading && !listData.length" content="你的购物车：这也空空，那也空空(*^▽^*)"></nothing-page> <nothing-page v-if="!ifLoading && !listData.length" content="你的购物车：这也空空，那也空空(*^▽^*)"></nothing-page>
<view class="" v-if="total == listData.length"></view>
<pitera textStr="—— 到底啦 ——"></pitera>
<view class="loading-box" v-show="ifMore"> <view class="loading-box" v-show="ifMore">
<view class="loader-16"></view> <view class="loader-16"></view>
</view> </view>
@ -61,6 +60,7 @@
<script> <script>
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
import pitera from '@/components/nothing/pitera'; import pitera from '@/components/nothing/pitera';
import {getCartNum} from '@/jsFile/public-api.js';
export default { export default {
components:{ components:{
pitera pitera
@ -71,12 +71,12 @@
type: Array, type: Array,
default () { default () {
return [ return [
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, // {id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, // {id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, // {id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, // {id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, // {id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, // {id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
]; ];
} }
}, },
@ -92,6 +92,10 @@
customB:{ customB:{
type:String, type:String,
default:'0' default:'0'
},
skuId:{
type:String,
default:0
} }
}, },
computed: { computed: {
@ -145,23 +149,53 @@
maxNum:20,//最大可输入数量 maxNum:20,//最大可输入数量
minNum:1,//最小可输入数量 minNum:1,//最小可输入数量
ifLoading:true, ifLoading:true,
page:1,
size:10,
total:0, total:0,
ifMore:false ifMore:false
}; };
}, },
mounted() { mounted() {
this.listData = this.list; this.listData = this.list;
this.ifLoading = false; this.getList();
}, },
methods: { methods: {
getList(){ getList(){
console.log('触底'); console.log('触底');
this.total = 0; this.total = 0;
this.ifMore = true; this.ifMore = true;
setTimeout(()=>{ let params = {
page:this.page,
size:this.size
}
this.$requst.post('/api/order/shopping-cart',params).then(res=>{
if(res.code==0){
this.total = res.data.total;
if(this.page==1) this.listData = [];
if(res.data.list.length){
res.data.list.forEach(item=>{
let obj = {
id: item.id,
spuId:item.spu.id,
skuId:item.sku_id,
image: item.spu.spu_cover,
title: item.spu.spu_name,
content: item.spu.unit,
slide_x: 0,
price:this.$toolAll.tools.changeNum(parseInt(item.spu.original_price)+''),
num:item.num,
ifcheck:this.skuId==item.sku_id ? true : false,
ifExit:true,
ifShow:true,
}
this.listData.push(obj);
console.log(this.listData);
})
}
}
this.ifMore = false; this.ifMore = false;
this.total = this.listData.length; this.ifLoading = false;
},2000) })
// for (let i = 0; i < 10; i++) { // for (let i = 0; i < 10; i++) {
// this.listData.push({id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}) // this.listData.push({id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true})
// } // }
@ -180,11 +214,18 @@
if(this.allPrice==0) { if(this.allPrice==0) {
// 去购物 // 去购物
console.log('去购物'); console.log('去购物');
uni.reLaunch({
url:`/pages/tabbar/cate/cate?index=0`
})
} else { } else {
// 去结算 // 去结算
console.log('去结算'); console.log('去结算');
uni.navigateTo({ this.$requst.post('/api/order/create').then(res=>{
url:'/pagesB/settlement/settlement' if(res.code==0) {
// uni.navigateTo({
// url:'/pagesB/settlement/settlement'
// })
}
}) })
} }
}, },
@ -212,7 +253,11 @@
this.listData[index].num--; this.listData[index].num--;
} }
} }
console.log(this.allPrice,'总价'); this.$requst.post('/api/order/shopping-cart-change-num',{id:this.listData[index].id,num:this.listData[index].num}).then(res=>{
if(res.code!=0){
this.$toolAll.tools.showToast(res.msg);
}
})
} }
}, },
// 输入框获取焦点事件 // 输入框获取焦点事件
@ -334,17 +379,22 @@
// if(key) { // if(key) {
// 进入删除 // 进入删除
// 修改为不存在的商品 // 修改为不存在的商品
this.listData[index].ifExit = false; this.$requst.post('/api/order/shopping-cart-del',{id:this.listData[index].id}).then(res=>{
// 修改该商品不被选中 if(res.code==0){
this.listData[index].ifcheck = false; this.listData[index].ifExit = false;
setTimeout(()=>{ // 修改该商品不被选中
// 隐藏该商品 this.listData[index].ifcheck = false;
this.listData[index].ifShow = false; setTimeout(()=>{
},1000) // 隐藏该商品
setTimeout(()=>{ this.listData[index].ifShow = false;
// 重构数组列表，去除不存在的商品 },1000)
this.listData = this.listData.filter(item=>item.ifExit==true); setTimeout(()=>{
},1000) // 重构数组列表，去除不存在的商品
this.listData = this.listData.filter(item=>item.ifExit==true);
},1000)
getCartNum();
}
})
// } // }
}, },
/** /**

35
jsFile/public-api.js
View File

@ -1,4 +1,33 @@
import request from './requst.js'; import requst from './requst.js';
export function uploadImg(data) { import store from '@/store/index.js'
return request.upload("/universal/api.upload/upload", data); // 查询轮播位置
export function slidePosition(data) {
return requst.get("/api/common/slide-positions");
}
//查询主题色，图标配置
export function themeEv(){
return requst.get('/api/index/mini-program-setting').then(res=>{
if(res.code==0){
let list = [];
if(res.data.footBar.length!=0){//底部导航
res.data.footBar.forEach(item=>{
let obj = {
iconPath: item.icon,
selectedIconPath: item.icon,
title:item.name
}
list.push(obj);
})
store.commit('updateState', {list})
}
}
})
}
// 查询购物车数量
export function getCartNum(){
return requst.get('/api/order/shopping-cart-count').then(res=>{
if(res.code==0){
store.commit('setNum', 9)
}
})
} }

9
pages.json
View File

@ -37,16 +37,7 @@
"subPackages": [{ //A包 "subPackages": [{ //A包
"root": "pagesA", "root": "pagesA",
"pages": [ "pages": [
{
"path" : "shopping-cart-slide/shopping-cart-slide",
"style" :
{ {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "order-list/order-list", "path" : "order-list/order-list",
"style" : "style" :
{ {

8
pages/tabbar/cart/cart.vue
View File

@ -2,7 +2,7 @@
<view class="pad-x160"> <view class="pad-x160">
<status-container :ifReturn="false" titlet="购物车" :ifCustomer='false'> <status-container :ifReturn="false" titlet="购物车" :ifCustomer='false'>
<view slot="content" style="margin: 0rpx -20rpx 0 -20rpx;"> <view slot="content" style="margin: 0rpx -20rpx 0 -20rpx;">
<cart-slide ref="cart"></cart-slide> <cart-slide ref="cart" :skuId='skuId'></cart-slide>
</view> </view>
</status-container> </status-container>
<!-- 底部tab --> <!-- 底部tab -->
@ -21,14 +21,14 @@
}, },
data() { data() {
return { return {
skuId:''
} }
}, },
onReachBottom() { onReachBottom() {
this.$refs.cart.getList(); this.$refs.cart.getList();
}, },
onLoad() { onLoad(op) {
if(op.skuId) this.skuId = op.skuId;
}, },
methods: { methods: {

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

@ -24,7 +24,7 @@
<view class="fon30 colb clips2">{{item.title}}</view> <view class="fon30 colb clips2">{{item.title}}</view>
<view class=""> <view class="">
<view class="fon36 textc mar-x36">￥{{item.price}}</view> <view class="fon36 textc mar-x36">￥{{item.price}}</view>
<view @tap.stop="addCartEv(item.id)" class="colf disjcac fon24 radius30 cate-btn"> <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> <i class="icon icon-shop-cart mar-y10" style="font-size: 36rpx;"></i>
立即选购 立即选购
</view> </view>
@ -141,6 +141,7 @@
res.data.list.forEach(item=>{ res.data.list.forEach(item=>{
let obj = { let obj = {
id:item.id, id:item.id,
skuId:item.skuId,
imgsrc:item.cover, imgsrc:item.cover,
title:item.name, title:item.name,
price:this.$toolAll.tools.changeNum(parseInt(item.price)+'') price:this.$toolAll.tools.changeNum(parseInt(item.price)+'')

30
pages/tabbar/pagehome/pagehome.vue
View File

@ -9,7 +9,7 @@
</view> </view>
<view class="pad-zy20" :style="{paddingTop: headHeight+'px'}"> <view class="pad-zy20" :style="{paddingTop: headHeight+'px'}">
<!-- 轮播图 --> <!-- 轮播图 -->
<swiper-pu newRadius="40rpx" newHeight="400rpx" newBottom="20rpx" :isplay='isplay'></swiper-pu> <swiper-pu newRadius="40rpx" :bannerList="bannerList" newHeight="400rpx" newBottom="20rpx" :isplay='isplay'></swiper-pu>
</view> </view>
<view class="pad-sx20"> <view class="pad-sx20">
<!-- 分类宫格 --> <!-- 分类宫格 -->
@ -31,6 +31,7 @@
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue'; import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
import listOne from '@/components/list/list-one'; import listOne from '@/components/list/list-one';
import customerOne from '@/components/customer/customer-one'; import customerOne from '@/components/customer/customer-one';
import {slidePosition} from '@/jsFile/public-api.js';
export default { export default {
components:{ components:{
'foot-tab' :footTab, 'foot-tab' :footTab,
@ -59,6 +60,7 @@
keyword:'', keyword:'',
isplay:false, isplay:false,
playTimer:null, playTimer:null,
bannerList:[]
} }
}, },
onReachBottom(e) { onReachBottom(e) {
@ -68,11 +70,17 @@
clearTimeout(this.playTimer); clearTimeout(this.playTimer);
}, },
onShow() { onShow() {
slidePosition().then(res=>{
if(res.code==0) {
console.log(res.data,74);
}
})
this.playTimer = setTimeout(()=>{ this.playTimer = setTimeout(()=>{
this.isplay = true; this.isplay = true;
},2000) },2000)
}, },
onLoad() { onLoad() {
this.getBanner();
// 缓存状态栏+标题栏的高度 // 缓存状态栏+标题栏的高度
const query = wx.createSelectorQuery().in(this) const query = wx.createSelectorQuery().in(this)
query.select('.head-box').boundingClientRect((rect) => { query.select('.head-box').boundingClientRect((rect) => {
@ -80,6 +88,25 @@
}).exec() }).exec()
}, },
methods: { methods: {
// 获取轮播图事件
getBanner(){
this.$requst.get('/api/common/slides',{position:'home-banner'}).then(res=>{
if(res.data.length!=0){
res.data.forEach(item=>{
let isVideo = false
if(item.type!='img') isVideo = true
let banObj = {
imgSrc:item.src,
url:item.url,
isVideo:isVideo,
poster:item.src,
}
this.bannerList.push(banObj)
})
}
})
},
// 宫格点击事件
chooseGe(obj) { chooseGe(obj) {
if(this.$toolAll.tools.judgeAuth()) { if(this.$toolAll.tools.judgeAuth()) {
let exist = obj.url.slice(0,18); let exist = obj.url.slice(0,18);
@ -94,6 +121,7 @@
} }
} }
}, },
// 去搜索页面
goSearch(){ goSearch(){
uni.navigateTo({ uni.navigateTo({
url:`/pagesB/search/search?keyword=${this.keyword}` url:`/pagesB/search/search?keyword=${this.keyword}`

75
pagesA/shopping-cart-slide/shopping-cart-slide.vue
View File

@ -1,75 +0,0 @@
<template>
<view>
<status-container titlet="购物车">
<view slot="content">
<cart-slide :list="list" :button="buttonList" :border="true" @click="clickMethod" @change="changeMethod"></cart-slide>
</view>
</status-container>
</view>
</template>
<script>
import cartSlide from '@/components/shopping-carts/cart-slide';
export default {
components:{
cartSlide
},
data() {
return {
list : [
{
id: 1,
image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
title: '张三',
rightDetail: '2019-03-18',
detail: 'XXXXXXXXXXXXXXXXXXX公司',
slide_x: 0
},
{
id: 2,
surname: '李',
title: '李二',
rightDetail: '2019-03-17',
detail: 'XXXXXXXXXXXXXXXXXXX公司',
slide_x: 0
},
{
id: 3,
title: '王五',
rightDetail: '2019-03-18',
slide_x: 0
},
{
id: 4,
surname: '李',
detail: 'XXXXXXXXXXXXXXXXXXX公司',
slide_x: 0
}
],
buttonList: [
{
title: '分享',
background: '#c4c7cd'
},
{
title: '删除',
background: '#ff3b32'
}
]
}
},
methods: {
changeMethod(data, button, index){
console.log('滑动按钮回调', data)
console.log('滑动按钮回调', button)
},
clickMethod(data){
console.log('点击行回调', data)
}
}
}
</script>
<style>
</style>

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

@ -67,11 +67,17 @@
　 }; 　 };
　　return shareObj; 　　return shareObj;
}, },
onLoad() { onLoad(op) {
this.getDetail(op.id);
}, },
methods: { methods: {
getDetail(id){
this.$requst.post('/api/spu/detail',{id}).then(res=>{
if(res.code==1) {
}
})
}
} }
} }
</script> </script>

79
pagesB/search/search.vue
View File

@ -7,9 +7,28 @@
<image src="/static/public/icon-searcht.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image> <image src="/static/public/icon-searcht.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
<input @confirm="goSearch" @focus="ifResult=false" v-model="keyword" class="width100 fon30 mar-z20" type="text" placeholder="搜索" style="height: 90rpx;color: #8c8c9b;" placeholder-style="color: #8c8c9b"> <input @confirm="goSearch" @focus="ifResult=false" v-model="keyword" class="width100 fon30 mar-z20" type="text" placeholder="搜索" style="height: 90rpx;color: #8c8c9b;" placeholder-style="color: #8c8c9b">
</view> </view>
<view class="fon30 bold" v-if="keyword && ifResult">结果：{{keyword}}<text v-if="num" class="textc">（{{num}}）</text></view> <view class="fon30 bold" v-if="keyword && ifResult">结果：{{keyword}}<text class="textc">（{{total}}）</text></view>
</view>
<view class="disjbac fw">
<view class="width48_5 fon30 mar-x30" @tap="goDetail(item.id)" v-for="(item,index) in dataList" :key="index">
<view class="" style="height: 342rpx;">
<image class="radius30 width100" :src="item.imgsrc" mode="aspectFill" style="height: 342rpx;"></image>
</view>
<view class="pad-zy20">
<view class="line-h50 mar-sx25 clips2" style="height: 90rpx;">{{item.title}}</view>
<view class="textc disjbac">
<view class="">￥{{item.price}}</view>
<i @tap.stop="addCartEv(item.skuId)" class="icon icon-shop-cart" style="font-size: 40rpx;"></i>
</view>
</view>
</view>
</view>
<view class="mar-s60" v-if="total==dataList.length">
<pitera textStr="—— 到底啦 ——"></pitera>
</view>
<view class="loading-box mar-s60" v-show="ifLoading">
<view class="loader-16"></view>
</view> </view>
<list-one ref="list"></list-one>
</view> </view>
</status-container> </status-container>
</view> </view>
@ -18,6 +37,7 @@
<script> <script>
import listOne from '@/components/list/list-one'; import listOne from '@/components/list/list-one';
import pitera from '@/components/nothing/pitera'; import pitera from '@/components/nothing/pitera';
import {getCartNum} from '@/jsFile/public-api.js';
export default { export default {
components:{ components:{
listOne, listOne,
@ -29,7 +49,12 @@
windowHeigh:uni.getSystemInfoSync().windowHeight, windowHeigh:uni.getSystemInfoSync().windowHeight,
keyword:'', keyword:'',
num:11, num:11,
ifResult:true ifResult:true,
dataList:[],
ifLoading:false,
total:0,
page:1,
size:10
} }
}, },
onReachBottom(e) { onReachBottom(e) {
@ -37,10 +62,58 @@
}, },
onLoad(op) { onLoad(op) {
if(op.keyword) this.keyword = op.keyword; if(op.keyword) this.keyword = op.keyword;
this.getList();
}, },
methods: { methods: {
goSearch(){ goSearch(){
this.ifResult = true; this.ifResult = true;
},
// 列表查询
getList(){
this.ifLoading = true;
let params = {
keyword:this.keyword,
page:this.page,
size:this.size
}
this.$requst.post('/api/spu/home',params).then(res=>{
if(res.code==0) {
this.total = res.data.total;
if(this.page==1) this.dataList = [];
if(res.data.list.length) {
res.data.list.forEach(item=>{
let obj = {
id:item.id,
skuId:item.skuId,
imgsrc:item.cover,
title:item.name,
price:this.$toolAll.tools.changeNum(parseInt(item.original_price)+'')
}
this.dataList.push(obj);
})
}
}
this.ifLoading = false;
})
},
// 加入购物车
addCartEv(id) {
if(this.$toolAll.tools.judgeAuth()) {
this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
getCartNum();
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
}
},
// 去详情
goDetail(id) {
uni.navigateTo({
url:`/pagesB/shop-detail/shop-detail?id=${id}`
})
} }
} }
} }

70
pagesB/shop-detail/shop-detail.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<view class="pad-x140"> <view class="pad-x180">
<status-container titlet="详情"> <status-container titlet="详情">
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;"> <view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
<swiper-pu newRadius="0rpx" :newHeight="swiperH+'px'" newBottom="40rpx" :isplay="isplay"></swiper-pu> <swiper-pu newRadius="0rpx" :bannerList="bannerList" :newHeight="swiperH+'px'" newBottom="40rpx" :isplay="isplay"></swiper-pu>
<view class="pad-zy20 bacf pad-sx20"> <view class="pad-zy20 bacf pad-sx20">
<view class="fon42 colb mar-x10">如意饼</view> <view class="fon42 colb mar-x10">{{shopObj.name}}</view>
<view class="fon24 col6 mar-x20">如意饼 事事如意</view> <view class="fon24 col6 mar-x20">{{shopObj.subtitle}}</view>
<view class="textc bold fon30 ">￥46,854/<text class="fon24">盒</text></view> <view class="textc bold fon30 ">￥{{$toolAll.tools.changeNum(parseInt(shopObj.original_price)+'')}}/<text class="fon24">{{shopObj.unit}}</text></view>
</view> </view>
<view class="fon36 colb tcenter pad-sx30 bold">商品介绍</view> <view class="fon36 colb tcenter pad-sx30 bold">商品介绍</view>
<view class="pad-zy20"> <view class="pad-zy20">
@ -15,14 +15,15 @@
</view> </view>
</status-container> </status-container>
<view class="disjbac posixzy bacf pad-sx20 pad-zy50"> <view class="disjbac posixzy bacf pad-sx20 pad-zy50">
<view class="btn buy-btn" @tap="buyEv">立即购买</view> <view class="btn buy-btn" @tap="buyEv(shopObj.skuId)">立即购买</view>
<view class="btn" @tap="addCartEv">加入购物车</view> <view class="btn" @tap="addCartEv(shopObj.skuId)">加入购物车</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import swiperPu from '@/components/swipers/swiper-pu'; import swiperPu from '@/components/swipers/swiper-pu';
import {getCartNum} from '@/jsFile/public-api.js';
export default { export default {
components:{ components:{
swiperPu swiperPu
@ -32,7 +33,13 @@
swiperH:uni.getSystemInfoSync().windowWidth, swiperH:uni.getSystemInfoSync().windowWidth,
richText:'', richText:'',
isplay:false, isplay:false,
playTimer:null playTimer:null,
shopObj:'',
bannerList:[
// {imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
// {imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
// {imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
]
} }
}, },
onHide() { onHide() {
@ -43,16 +50,55 @@
this.isplay = true; this.isplay = true;
},2000) },2000)
}, },
onLoad(op) {
this.getDetail(op.id);
},
methods: { methods: {
// 查询详情事件
getDetail(id){
this.$requst.post('/api/spu/detail',{id}).then(res=>{
if(res.code==0) {
this.shopObj = res.data.detail;
this.richText = this.$toolAll.tools.escape2Html(this.shopObj.content);
if(this.shopObj.images.length){
this.shopObj.images.forEach(item=>{
let obj = {
imgSrc:item,
url:'',
isVideo:false,
poster:''
}
this.bannerList.push(obj);
})
}
}
})
},
// 立即购买 // 立即购买
buyEv(){ buyEv(id){
uni.reLaunch({ this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
url:'/pages/tabbar/cart/cart' if(res.code==0) {
uni.reLaunch({
url:`/pages/tabbar/cart/cart?skuId=${id}`
})
getCartNum();
} else {
this.$toolAll.tools.showToast(res.msg)
}
}) })
}, },
// 加入购物车 // 加入购物车
addCartEv(id) { addCartEv(id) {
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)') if(this.$toolAll.tools.judgeAuth()) {
this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
getCartNum();
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
}
}, },
} }
} }

12
store/modules/moduleA.js
View File

@ -21,10 +21,17 @@ export default {
obj:{ obj:{
a:'吃鸡腿', a:'吃鸡腿',
b:'吃自助餐' b:'吃自助餐'
} },
titleList:[],
imgList:[],
onLineList:[],
cartNum:0
}, },
// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法 // Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
mutations: { mutations: {
setNum(state,num){
state.cartNum = num;
},
footHeightEv(state,str){ footHeightEv(state,str){
state.footHeight = str; state.footHeight = str;
}, },
@ -46,6 +53,9 @@ export default {
// 新增字段方法 // 新增字段方法
newProp(state,payload) { newProp(state,payload) {
state.obj = { ...state.obj, c: payload.c }; state.obj = { ...state.obj, c: payload.c };
},
updateState(state, payload) {
state.onLineList = payload.list;
} }
}, },
// 可以执行任意的同步和异步操作 // 可以执行任意的同步和异步操作