对接底部导航icon接口、对接购物车系列接口、对接轮播图接口
parent
4f36f99210
commit
d722273096
1
App.vue
1
App.vue
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { themeEv } from '@/jsFile/public-api.js';
|
||||
export default {
|
||||
globalData:{
|
||||
projectname:'', // 项目名称
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
boxShadow: `-10rpx 0rpx 20rpx rgba( 0, 0, 0, ${boxShadowNum})`
|
||||
}">
|
||||
<!-- 后台动态改变的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-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>
|
||||
</view>
|
||||
<view class="clips1 fon24" :class="current==index ? 'activeclass' : 'defaultclass'">{{item.title}}</view>
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {themeEv,getCartNum} from '@/jsFile/public-api.js';
|
||||
import { mapState } from 'vuex'//引入mapState
|
||||
export default {
|
||||
name:'foot-tab',
|
||||
props:{
|
||||
|
|
@ -24,11 +26,6 @@
|
|||
type:String,
|
||||
default:'0'
|
||||
},
|
||||
// 点的数量
|
||||
num: {
|
||||
type:String,
|
||||
default:'10'
|
||||
},
|
||||
// 默认哪个图标突出
|
||||
isIcon:{
|
||||
type:String,
|
||||
|
|
@ -103,6 +100,16 @@
|
|||
query.select('.foot-box').boundingClientRect((rect) => {
|
||||
this.$store.commit('footHeightEv',rect.height);
|
||||
}).exec()
|
||||
// 查询底部导航图标
|
||||
themeEv();
|
||||
// 查询购物车数量
|
||||
getCartNum();
|
||||
},
|
||||
computed:{
|
||||
...mapState({
|
||||
onLineList: state => state.moduleA.onLineList,
|
||||
cartNum: state=> state.moduleA.cartNum
|
||||
}),
|
||||
},
|
||||
methods:{
|
||||
choosefoot(index){
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
|
||||
<script>
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
import {getCartNum} from '@/jsFile/public-api.js';
|
||||
export default {
|
||||
name:"list-one",
|
||||
components:{
|
||||
|
|
@ -46,20 +47,22 @@
|
|||
data() {
|
||||
return {
|
||||
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,
|
||||
total:0
|
||||
total:0,
|
||||
page:1,
|
||||
size:10
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -67,17 +70,24 @@
|
|||
},
|
||||
methods:{
|
||||
moreEv() {
|
||||
this.ifLoading = true;
|
||||
setTimeout(()=>{
|
||||
this.total = this.dataList.length;
|
||||
this.ifLoading = false;
|
||||
console.log(this.total);
|
||||
},2000)
|
||||
if(this.total!=this.dataList.length) {
|
||||
this.page++;
|
||||
this.getList();
|
||||
}
|
||||
|
||||
},
|
||||
// 列表查询
|
||||
getList(){
|
||||
this.$requst.post('/api/spu/home').then(res=>{
|
||||
if(res.code) {
|
||||
this.ifLoading = true;
|
||||
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) {
|
||||
res.data.list.forEach(item=>{
|
||||
let obj = {
|
||||
|
|
@ -91,6 +101,7 @@
|
|||
})
|
||||
}
|
||||
}
|
||||
this.ifLoading = false;
|
||||
})
|
||||
},
|
||||
// 加入购物车
|
||||
|
|
@ -98,7 +109,8 @@
|
|||
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('加入购物车成功(*^▽^*)')
|
||||
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
|
||||
getCartNum();
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</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>
|
||||
<view class="" v-if="total == listData.length"></view>
|
||||
<pitera textStr="—— 到底啦 ——"></pitera>
|
||||
<view class="loading-box" v-show="ifMore">
|
||||
<view class="loader-16"></view>
|
||||
</view>
|
||||
|
|
@ -61,6 +60,7 @@
|
|||
<script>
|
||||
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
import {getCartNum} from '@/jsFile/public-api.js';
|
||||
export default {
|
||||
components:{
|
||||
pitera
|
||||
|
|
@ -71,12 +71,12 @@
|
|||
type: Array,
|
||||
default () {
|
||||
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:{
|
||||
type:String,
|
||||
default:'0'
|
||||
},
|
||||
skuId:{
|
||||
type:String,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -145,23 +149,53 @@
|
|||
maxNum:20,//最大可输入数量
|
||||
minNum:1,//最小可输入数量
|
||||
ifLoading:true,
|
||||
page:1,
|
||||
size:10,
|
||||
total:0,
|
||||
ifMore:false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.listData = this.list;
|
||||
this.ifLoading = false;
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList(){
|
||||
console.log('触底');
|
||||
this.total = 0;
|
||||
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.total = this.listData.length;
|
||||
},2000)
|
||||
this.ifLoading = false;
|
||||
})
|
||||
// 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})
|
||||
// }
|
||||
|
|
@ -180,11 +214,18 @@
|
|||
if(this.allPrice==0) {
|
||||
// 去购物
|
||||
console.log('去购物');
|
||||
uni.reLaunch({
|
||||
url:`/pages/tabbar/cate/cate?index=0`
|
||||
})
|
||||
} else {
|
||||
// 去结算
|
||||
console.log('去结算');
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/settlement/settlement'
|
||||
this.$requst.post('/api/order/create').then(res=>{
|
||||
if(res.code==0) {
|
||||
// uni.navigateTo({
|
||||
// url:'/pagesB/settlement/settlement'
|
||||
// })
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
@ -212,7 +253,11 @@
|
|||
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) {
|
||||
// 进入删除
|
||||
// 修改为不存在的商品
|
||||
this.listData[index].ifExit = false;
|
||||
// 修改该商品不被选中
|
||||
this.listData[index].ifcheck = false;
|
||||
setTimeout(()=>{
|
||||
// 隐藏该商品
|
||||
this.listData[index].ifShow = false;
|
||||
},1000)
|
||||
setTimeout(()=>{
|
||||
// 重构数组列表，去除不存在的商品
|
||||
this.listData = this.listData.filter(item=>item.ifExit==true);
|
||||
},1000)
|
||||
this.$requst.post('/api/order/shopping-cart-del',{id:this.listData[index].id}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.listData[index].ifExit = false;
|
||||
// 修改该商品不被选中
|
||||
this.listData[index].ifcheck = false;
|
||||
setTimeout(()=>{
|
||||
// 隐藏该商品
|
||||
this.listData[index].ifShow = false;
|
||||
},1000)
|
||||
setTimeout(()=>{
|
||||
// 重构数组列表，去除不存在的商品
|
||||
this.listData = this.listData.filter(item=>item.ifExit==true);
|
||||
},1000)
|
||||
getCartNum();
|
||||
}
|
||||
})
|
||||
// }
|
||||
},
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,4 +1,33 @@
|
|||
import request from './requst.js';
|
||||
export function uploadImg(data) {
|
||||
return request.upload("/universal/api.upload/upload", data);
|
||||
import requst from './requst.js';
|
||||
import store from '@/store/index.js'
|
||||
// 查询轮播位置
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -37,16 +37,7 @@
|
|||
"subPackages": [{ //A包
|
||||
"root": "pagesA",
|
||||
"pages": [
|
||||
{
|
||||
"path" : "shopping-cart-slide/shopping-cart-slide",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "order-list/order-list",
|
||||
"style" :
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<view class="pad-x160">
|
||||
<status-container :ifReturn="false" titlet="购物车" :ifCustomer='false'>
|
||||
<view slot="content" style="margin: 0rpx -20rpx 0 -20rpx;">
|
||||
<cart-slide ref="cart"></cart-slide>
|
||||
<cart-slide ref="cart" :skuId='skuId'></cart-slide>
|
||||
</view>
|
||||
</status-container>
|
||||
<!-- 底部tab -->
|
||||
|
|
@ -21,14 +21,14 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
skuId:''
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.$refs.cart.getList();
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
onLoad(op) {
|
||||
if(op.skuId) this.skuId = op.skuId;
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<view class="fon30 colb clips2">{{item.title}}</view>
|
||||
<view class="">
|
||||
<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>
|
||||
立即选购
|
||||
</view>
|
||||
|
|
@ -141,6 +141,7 @@
|
|||
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.price)+'')
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</view>
|
||||
<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 class="pad-sx20">
|
||||
<!-- 分类宫格 -->
|
||||
|
|
@ -31,6 +31,7 @@
|
|||
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
|
||||
import listOne from '@/components/list/list-one';
|
||||
import customerOne from '@/components/customer/customer-one';
|
||||
import {slidePosition} from '@/jsFile/public-api.js';
|
||||
export default {
|
||||
components:{
|
||||
'foot-tab' :footTab,
|
||||
|
|
@ -59,6 +60,7 @@
|
|||
keyword:'',
|
||||
isplay:false,
|
||||
playTimer:null,
|
||||
bannerList:[]
|
||||
}
|
||||
},
|
||||
onReachBottom(e) {
|
||||
|
|
@ -68,11 +70,17 @@
|
|||
clearTimeout(this.playTimer);
|
||||
},
|
||||
onShow() {
|
||||
slidePosition().then(res=>{
|
||||
if(res.code==0) {
|
||||
console.log(res.data,74);
|
||||
}
|
||||
})
|
||||
this.playTimer = setTimeout(()=>{
|
||||
this.isplay = true;
|
||||
},2000)
|
||||
},
|
||||
onLoad() {
|
||||
this.getBanner();
|
||||
// 缓存状态栏+标题栏的高度
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query.select('.head-box').boundingClientRect((rect) => {
|
||||
|
|
@ -80,6 +88,25 @@
|
|||
}).exec()
|
||||
},
|
||||
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) {
|
||||
if(this.$toolAll.tools.judgeAuth()) {
|
||||
let exist = obj.url.slice(0,18);
|
||||
|
|
@ -94,6 +121,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
// 去搜索页面
|
||||
goSearch(){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/search/search?keyword=${this.keyword}`
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -67,11 +67,17 @@
|
|||
};
|
||||
return shareObj;
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
onLoad(op) {
|
||||
this.getDetail(op.id);
|
||||
},
|
||||
methods: {
|
||||
|
||||
getDetail(id){
|
||||
this.$requst.post('/api/spu/detail',{id}).then(res=>{
|
||||
if(res.code==1) {
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,28 @@
|
|||
<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">
|
||||
</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>
|
||||
<list-one ref="list"></list-one>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
|
|
@ -18,6 +37,7 @@
|
|||
<script>
|
||||
import listOne from '@/components/list/list-one';
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
import {getCartNum} from '@/jsFile/public-api.js';
|
||||
export default {
|
||||
components:{
|
||||
listOne,
|
||||
|
|
@ -29,7 +49,12 @@
|
|||
windowHeigh:uni.getSystemInfoSync().windowHeight,
|
||||
keyword:'',
|
||||
num:11,
|
||||
ifResult:true
|
||||
ifResult:true,
|
||||
dataList:[],
|
||||
ifLoading:false,
|
||||
total:0,
|
||||
page:1,
|
||||
size:10
|
||||
}
|
||||
},
|
||||
onReachBottom(e) {
|
||||
|
|
@ -37,10 +62,58 @@
|
|||
},
|
||||
onLoad(op) {
|
||||
if(op.keyword) this.keyword = op.keyword;
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
goSearch(){
|
||||
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}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<view class="pad-x140">
|
||||
<view class="pad-x180">
|
||||
<status-container titlet="详情">
|
||||
<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="fon42 colb mar-x10">如意饼</view>
|
||||
<view class="fon24 col6 mar-x20">如意饼 事事如意</view>
|
||||
<view class="textc bold fon30 ">￥46,854/<text class="fon24">盒</text></view>
|
||||
<view class="fon42 colb mar-x10">{{shopObj.name}}</view>
|
||||
<view class="fon24 col6 mar-x20">{{shopObj.subtitle}}</view>
|
||||
<view class="textc bold fon30 ">￥{{$toolAll.tools.changeNum(parseInt(shopObj.original_price)+'')}}/<text class="fon24">{{shopObj.unit}}</text></view>
|
||||
</view>
|
||||
<view class="fon36 colb tcenter pad-sx30 bold">商品介绍</view>
|
||||
<view class="pad-zy20">
|
||||
|
|
@ -15,14 +15,15 @@
|
|||
</view>
|
||||
</status-container>
|
||||
<view class="disjbac posixzy bacf pad-sx20 pad-zy50">
|
||||
<view class="btn buy-btn" @tap="buyEv">立即购买</view>
|
||||
<view class="btn" @tap="addCartEv">加入购物车</view>
|
||||
<view class="btn buy-btn" @tap="buyEv(shopObj.skuId)">立即购买</view>
|
||||
<view class="btn" @tap="addCartEv(shopObj.skuId)">加入购物车</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiperPu from '@/components/swipers/swiper-pu';
|
||||
import {getCartNum} from '@/jsFile/public-api.js';
|
||||
export default {
|
||||
components:{
|
||||
swiperPu
|
||||
|
|
@ -32,7 +33,13 @@
|
|||
swiperH:uni.getSystemInfoSync().windowWidth,
|
||||
richText:'',
|
||||
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() {
|
||||
|
|
@ -43,16 +50,55 @@
|
|||
this.isplay = true;
|
||||
},2000)
|
||||
},
|
||||
onLoad(op) {
|
||||
this.getDetail(op.id);
|
||||
},
|
||||
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(){
|
||||
uni.reLaunch({
|
||||
url:'/pages/tabbar/cart/cart'
|
||||
buyEv(id){
|
||||
this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
|
||||
if(res.code==0) {
|
||||
uni.reLaunch({
|
||||
url:`/pages/tabbar/cart/cart?skuId=${id}`
|
||||
})
|
||||
getCartNum();
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 加入购物车
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,10 +21,17 @@ export default {
|
|||
obj:{
|
||||
a:'吃鸡腿',
|
||||
b:'吃自助餐'
|
||||
}
|
||||
},
|
||||
titleList:[],
|
||||
imgList:[],
|
||||
onLineList:[],
|
||||
cartNum:0
|
||||
},
|
||||
// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
|
||||
mutations: {
|
||||
setNum(state,num){
|
||||
state.cartNum = num;
|
||||
},
|
||||
footHeightEv(state,str){
|
||||
state.footHeight = str;
|
||||
},
|
||||
|
|
@ -46,6 +53,9 @@ export default {
|
|||
// 新增字段方法
|
||||
newProp(state,payload) {
|
||||
state.obj = { ...state.obj, c: payload.c };
|
||||
},
|
||||
updateState(state, payload) {
|
||||
state.onLineList = payload.list;
|
||||
}
|
||||
},
|
||||
// 可以执行任意的同步和异步操作
|
||||
|
|
|
|||
Loading…
Reference in New Issue