fix::商品页面/订单页面完善、进入页面黑色弹框提示解决、
This commit is contained in:
GaoHao
parent
92e79a74f4
commit
d4001e5f37
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view class="navbarcontent">
|
||||
<!-- 导航栏 -->
|
||||
<view class="navbar" :class="{active:opacity}" :style="{'backgroundColor':backColor}">
|
||||
<view class="navbar" :class="{active:opacity}">
|
||||
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
||||
<view class="status-bar"></view>
|
||||
<view class="navbar_tow flex-between"
|
||||
|
|
@ -74,10 +74,6 @@
|
|||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
backColor:{//背景颜色
|
||||
type: String,
|
||||
default: '#f9f9f9'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 999;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.pay-title {
|
||||
|
|
|
|||
|
|
@ -104,16 +104,19 @@ async function request(options) {
|
|||
if (res.code != 0) {
|
||||
console.log(options)
|
||||
if (res.code == -4) {
|
||||
uni.showToast({
|
||||
// title: '',
|
||||
title: res.message || res.msg,
|
||||
icon: "none",
|
||||
success: () => {
|
||||
setTimeout(res => {
|
||||
store.dispatch("loginEvent"); //获取shapid
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
// uni.showToast({
|
||||
// title: '',
|
||||
// // title: res.message || res.msg,
|
||||
// icon: "none",
|
||||
// success: () => {
|
||||
// setTimeout(res => {
|
||||
// store.dispatch("loginEvent"); //获取shapid
|
||||
// }, 1000)
|
||||
// }
|
||||
// })
|
||||
setTimeout(res => {
|
||||
store.dispatch("loginEvent"); //获取shapid
|
||||
}, 1000)
|
||||
} else if (res.code == 482) {
|
||||
let nowTime = new Date() / 1000 | 0
|
||||
let offset = parseInt(res.data.message) - parseInt(nowTime);
|
||||
|
|
|
|||
|
|
@ -254,9 +254,9 @@
|
|||
break;
|
||||
case 'addcart':
|
||||
/*插入一条弹幕*/
|
||||
this.$refs.lBarrage.add(
|
||||
`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
|
||||
);
|
||||
// this.$refs.lBarrage.add(
|
||||
// `${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
|
||||
// );
|
||||
break;
|
||||
}
|
||||
this.$set(this, 'cartLists', msg)
|
||||
|
|
|
|||
|
|
@ -3,10 +3,15 @@
|
|||
<!-- 占位符导航栏 -->
|
||||
<!-- 顶部面板 -->
|
||||
<view class="top--panel">
|
||||
<navseat :opacity='opacity' :titleshow='true' :backColor="'#fff'" :heightshow='opacity' @Topdistance='Topdistance'></navseat>
|
||||
<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity' @Topdistance='Topdistance'></navseat>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view v-show="isNavShow" :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 999'}"></view>
|
||||
<!-- #endif -->
|
||||
<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
|
||||
<!-- https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png -->
|
||||
<image class="panelimgbackground"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png" mode="aspectFill">
|
||||
:src="shopInfo.storeInfo.coverImg"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
<view class="panelone">
|
||||
{{ shopInfo.storeInfo.shopName }}
|
||||
|
|
@ -23,14 +28,14 @@
|
|||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="panelfour">
|
||||
<view class="panelfour" v-if="shopProductList.hots && shopProductList.hots.length > 0">
|
||||
本店招牌菜
|
||||
</view>
|
||||
<view class="panelfive">
|
||||
<scroll-view :scroll-x="true" :scroll-into-view="leftIntoView" :scroll-with-animation="false">
|
||||
<view class="panelfive_list">
|
||||
<view class="panelfiveitem" v-for="(item,index) in shopProductList.hots" :key="index">
|
||||
<image class="panelfiveitemimage" src="@/static/avatar.png" mode="aspectFill"></image>
|
||||
<image class="panelfiveitemimage" :src="item.coverImg" mode="aspectFill"></image>
|
||||
<view class="panelfiveitemone">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
|
|
@ -40,19 +45,38 @@
|
|||
<view class="panelfiveitemthere flex-start">
|
||||
<text>招牌</text>
|
||||
</view>
|
||||
<view class="panelfiveitemfour">
|
||||
桂香馥郁，沉入新鲜甘甜的椰..
|
||||
<view class="panelfiveitemfour" v-if="item.shortTitle">
|
||||
{{item.shortTitle}}
|
||||
</view>
|
||||
<view class="panelfiveitemfive">
|
||||
月售169
|
||||
月售{{item.stockNumber}}
|
||||
</view>
|
||||
<view class="panelfiveitemsex flex-between">
|
||||
<view class="panelfiveitemsex_oen">
|
||||
<text>¥</text>
|
||||
<text>88/份</text>
|
||||
<text>「5份起点」</text>
|
||||
<text>{{item.lowPrice}}</text>
|
||||
<text>/份</text>
|
||||
<text>「{{item.suit}}份起点」</text>
|
||||
</view>
|
||||
<!-- <u-icon name="plus-circle-fill" color="#E9AB7A" size="40"></u-icon> -->
|
||||
|
||||
</view>
|
||||
<view class="panelfiveitemNum">
|
||||
<view class="sku-wrap flex-center" v-if="item.productSkuResult != null"
|
||||
@click.stop="clickspecifications(item,index,index1)">
|
||||
<text class="t">选规格</text>
|
||||
<u-badge type="green" class="badge" count="22"></u-badge>
|
||||
<text class="dot num" v-if="item.cartNumber != '0'">{{item.cartNumber<99?item.cartNumber:'99+'}}</text>
|
||||
</view>
|
||||
<view class="Controls" v-else>
|
||||
<view v-if="item.cartNumber != '0'" @click.stop="cartadd(item,'-',item.productSkuResult == null ? '单规格':'',$event)">
|
||||
<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
|
||||
</view>
|
||||
<text class="num"> {{ item.cartNumber }} </text>
|
||||
<view @click.stop="cartadd(item,'+',item.productSkuResult == null ? '单规格':'')">
|
||||
<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-icon name="plus-circle-fill" color="#E9AB7A" size="40"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -81,11 +105,12 @@
|
|||
<view class="goods" @click="clickspecifications(item1,index,index1)" v-for="(item1,index1) in item.products" :key="index1">
|
||||
<image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true" :src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"></image>
|
||||
<image class="goodsImg" src="@/static/1.gif" mode="" v-else :lazy-load="true" ></image>
|
||||
<view v-if="item.name=='热销'" class="topSort" :class="'c'+(index1+1)">TOP{{index1+1}}</view>
|
||||
<view class="goods_right">
|
||||
<view class="name">{{ item1.name }}</view>
|
||||
<view class="lookBack">本店回头客第1名</view>
|
||||
<view class="describe">桂香馥郁，沉入新鲜甘甜的椰</view>
|
||||
<view class="monthlySale">月售169</view>
|
||||
<view class="lookBack" v-if="item.name=='热销'">本店回头客第{{index1+1}}名</view>
|
||||
<view class="describe"> {{item1.shortTitle?item1.shortTitle:''}} </view>
|
||||
<view class="monthlySale">月售{{item1.stockNumber}}</view>
|
||||
<view class="money">￥<text class="money_num">{{ item1.lowPrice }}</text>/份</view>
|
||||
|
||||
<view class="sku-wrap flex-center" v-if="item1.productSkuResult != null"
|
||||
|
|
@ -95,12 +120,12 @@
|
|||
<text class="dot num" v-if="item1.cartNumber != '0'">{{item1.cartNumber<99?item1.cartNumber:'99+'}}</text>
|
||||
</view>
|
||||
<view class="Controls" v-else>
|
||||
<view v-if="item1.cartNumber != '0'" @click.stop="cartadd(item1,index,index1,'-',item1.productSkuResult == null ? '单规格':'',$event)">
|
||||
<u-icon name="minus-circle-fill" color="#E9AB7A" size="40"></u-icon>
|
||||
<view v-if="item1.cartNumber != '0'" @click.stop="cartadd(item1,'-',item1.productSkuResult == null ? '单规格':'',$event)">
|
||||
<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
|
||||
</view>
|
||||
<text class="num"> {{ item1.cartNumber }} </text>
|
||||
<view @click.stop="cartadd(item1,index,index1,'+',item1.productSkuResult == null ? '单规格':'')">
|
||||
<u-icon name="plus-circle-fill" color="#E9AB7A" size="40"></u-icon>
|
||||
<view @click.stop="cartadd(item1,'+',item1.productSkuResult == null ? '单规格':'')">
|
||||
<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
|
@ -119,6 +144,8 @@
|
|||
<view>可添加需放在页面底部的内容，比如购物车栏目</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 购物车悬浮条 -->
|
||||
<view class="cart-wrap" v-if="cartListsdatashow">
|
||||
<view class="cart-content">
|
||||
<view class="left">
|
||||
|
|
@ -156,7 +183,7 @@
|
|||
</view>
|
||||
<view class="info">
|
||||
<view class="name"> {{ item.name }} </view>
|
||||
<view class="select-sku-wrap"> {{ item.name }} </view>
|
||||
<view class="select-sku-wrap"> {{ item.skuName }} </view>
|
||||
|
||||
<view class="price-wrap" style="padding-top: 0;">
|
||||
<view class="price">
|
||||
|
|
@ -165,11 +192,11 @@
|
|||
</view>
|
||||
<view class="operation-wrap">
|
||||
<view class="btn" v-if="item.number" @click="cartListadd(item,index,'-')">
|
||||
<u-icon name="minus-circle-fill" color="#E9AB7A" size="40"></u-icon>
|
||||
<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
|
||||
</view>
|
||||
<text class="num" v-if="item.number">{{ item.number }}</text>
|
||||
<view class="btn" @click="cartListadd(item,index,'+')">
|
||||
<u-icon name="plus-circle-fill" color="#E9AB7A" size="40"></u-icon>
|
||||
<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -228,7 +255,7 @@
|
|||
<image class="shop_skucimage" :src="specifications.coverImg" mode="aspectFill"></image>
|
||||
<view class="shop_sku_name"> {{specifications.name}} </view>
|
||||
<view class="shop_sku_returned"> {{specifications.name}} </view>
|
||||
<view class="shop_sku_description"> {{specifications.name}} </view>
|
||||
<view class="shop_sku_description"> {{specifications.shortTitle?specifications.shortTitle:''}} </view>
|
||||
|
||||
<view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index"
|
||||
v-if="specifications.tagSnap">
|
||||
|
|
@ -268,7 +295,7 @@
|
|||
<view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
|
||||
<view class="shop_skuselectname">{{skuidname.toString()}}</view>
|
||||
</view>
|
||||
<view class="addShopping" @click="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">添加到购物车</view>
|
||||
<view class="addShopping" :class="amountcartNumber>0?'active':''" @click="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">添加到购物车</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
|
@ -285,7 +312,7 @@
|
|||
data() {
|
||||
return {
|
||||
userInfo: uni.cache.get('userInfo'), //个人信息
|
||||
opacity: true, //是否显示
|
||||
opacity: false, //是否显示
|
||||
scrollHeight: 1000,
|
||||
scrollTopSize: 0, //距离顶部的高度
|
||||
fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
|
||||
|
|
@ -295,6 +322,7 @@
|
|||
leftIndex: 0,
|
||||
scrollInto: '',
|
||||
isFixed: true,
|
||||
isNavShow: false,
|
||||
heightnav: '' ,//点击获取的距离
|
||||
showShopInfo: false, //店铺信息弹窗是否显示
|
||||
showShopsku: false, //多规格弹窗是否显示
|
||||
|
|
@ -309,25 +337,24 @@
|
|||
|
||||
}, // 规格信息
|
||||
socketTicket: null,
|
||||
amountcartNumber: 1,
|
||||
amountcartNumber: 0,
|
||||
salePrice: '', //钱数
|
||||
cartListsdatashow: false ,//是否显示购物车
|
||||
showCart: false,
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
console.log(e.scrollTop, this.scrollTopSize)
|
||||
try {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏显示影藏
|
||||
// this.opacity = false
|
||||
this.isNavShow = false
|
||||
} else {
|
||||
// this.opacity = true
|
||||
this.isNavShow = true
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
if (e.scrollTop >= this.scrollTopSize-10) { //控制大图层
|
||||
console.log('nishizhengqde')
|
||||
console.log(e.scrollTop,this.scrollTopSize)
|
||||
if (e.scrollTop >= this.scrollTopSize) { //控制大图层
|
||||
this.isFixed = false;
|
||||
} else {
|
||||
this.isFixed = true;
|
||||
|
|
@ -337,20 +364,16 @@
|
|||
/* 计算左侧滚动位置定位 */
|
||||
leftIntoView() {
|
||||
return `left-${this.leftIndex > 20 ? (this.leftIndex-20):0}`;
|
||||
}
|
||||
},
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
onReady() {
|
||||
setTimeout(() => {
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
this.scrollHeight = data.windowHeight
|
||||
// console.log(data.windowHeight, 1)
|
||||
this.$u.getRect('.scroll-panel').then(res => {
|
||||
// console.log(res, 11)
|
||||
this.scrollTopSize = res.top; //元素距离顶部的距离
|
||||
this.scrollHeight = this.scrollHeight - this.heightnav
|
||||
// console.log(this.scrollHeight, 111)
|
||||
})
|
||||
}
|
||||
})
|
||||
}, 100);
|
||||
|
|
@ -375,7 +398,6 @@
|
|||
this.fixedtrue = true
|
||||
},
|
||||
onShow() {
|
||||
console.log(uni.cache.get('token'))
|
||||
if (!uni.cache.get('token')) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
|
|
@ -432,7 +454,6 @@
|
|||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
})
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('shopUser', res.data.storeInfo.id)
|
||||
this.handlemessage() //监听websocket返回
|
||||
|
|
@ -451,42 +472,17 @@
|
|||
*/
|
||||
async productqueryProduct() {
|
||||
let res = await this.api.productqueryProduct({
|
||||
// code: uni.cache.get('tableCode'),
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
productGroupId: ''
|
||||
"productGroupId": ''
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.shopProductList = res.data;
|
||||
|
||||
if ( this.cartLists.data.length >= 0 ) {
|
||||
var summedArray = this.cartLists.data.reduce((acc, current) => {
|
||||
const existing = acc.find(item => item.productId === current.productId);
|
||||
if (existing) {
|
||||
existing.number += current.number;
|
||||
} else {
|
||||
acc.push({
|
||||
...current
|
||||
})
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
console.log(summedArray)
|
||||
// 购物车总数据与列表页面互通
|
||||
this.shopProductList.productInfo.forEach((item) => {
|
||||
return item.products.filter(e => {
|
||||
e.cartNumber = 0;
|
||||
return summedArray.find(i => {
|
||||
if (e.id == i.productId) {
|
||||
e.cartNumber = i.number
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
if ( this.cartLists && this.cartLists.data && this.cartLists.data.length >= 0 ) {
|
||||
this.setNumber()
|
||||
}
|
||||
console.log(this.shopProductList)
|
||||
// this.$nextTick(() => {
|
||||
// this.countTitleTopNum();
|
||||
// });
|
||||
setTimeout(() => {
|
||||
this.getElementTop();
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -498,7 +494,7 @@
|
|||
* @param {Object} a
|
||||
* @param {Object} b
|
||||
*/
|
||||
async cartadd(item, index, index1, a, b) { //列表添加 a传参加减号 b是判断单规格多规格\
|
||||
async cartadd(item, a, b) { //列表添加 a传参加减号 b是判断单规格多规格\
|
||||
if (b == '单规格') { //没有规格为空
|
||||
this.skuidname = []
|
||||
}
|
||||
|
|
@ -518,18 +514,19 @@
|
|||
if ( a == "+" ){
|
||||
this.amountcartNumber++;
|
||||
} else {
|
||||
if ( this.amountcartNumber > 1 ) {
|
||||
if ( this.amountcartNumber > 0 ) {
|
||||
this.amountcartNumber--
|
||||
}
|
||||
}
|
||||
console.log(item)
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加购物车
|
||||
*/
|
||||
addShopping ( item, index, index1, a, b ) {
|
||||
console.log(item)
|
||||
if ( this.amountcartNumber <= 0 ) {
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
"skuId": this.skuId,
|
||||
"num": item.cartNumber + this.amountcartNumber, //数量
|
||||
|
|
@ -548,20 +545,18 @@
|
|||
* @param {Object} index
|
||||
* @param {Object} a
|
||||
*/
|
||||
async cartListadd(item, index, a) {
|
||||
console.log(item)
|
||||
async cartListadd(item, index, c) {
|
||||
try {
|
||||
const data = { //定义socket数据传参
|
||||
"name": item.name,
|
||||
let params = {
|
||||
"skuId": item.skuId,
|
||||
"num": a == '-' ? -1 : 1, //skuId
|
||||
"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
|
||||
"num": c == '+' ? item.number + 1 : item.number -1, //数量
|
||||
"type": c == '+' ? 1 : 0,
|
||||
"productId": item.productId, //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
};
|
||||
this.datasocket = data
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
"tableId": uni.cache.get('tableCode'),
|
||||
}
|
||||
this.addCart(params);
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
|
@ -575,7 +570,7 @@
|
|||
let res = await this.api.cartAdd(data)
|
||||
if ( res.code == 0) {
|
||||
this.showShopsku = false;
|
||||
this.$set(this, 'amountcartNumber', 1)
|
||||
this.$set(this, 'amountcartNumber', 0)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -617,46 +612,23 @@
|
|||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 结算直接生成订单
|
||||
*/
|
||||
orderdetail() {
|
||||
if (this.cartLists.data.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先添加商品',
|
||||
icon: 'none'
|
||||
// 处理招牌菜商品数量
|
||||
this.shopProductList.hots.forEach((item) => {
|
||||
item.cartNumber = 0;
|
||||
return summedArray.find(i => {
|
||||
if (item.id == i.productId) {
|
||||
item.cartNumber = i.number
|
||||
}
|
||||
})
|
||||
})
|
||||
this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
|
||||
if ( this.cartLists.data.length > 0 ){
|
||||
this.cartLists_count = 0;
|
||||
this.cartLists.data.forEach((v,e)=>{
|
||||
this.cartLists_count += v.number;
|
||||
})
|
||||
return false
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopInfo.storeInfo)
|
||||
});
|
||||
|
||||
// let data = {
|
||||
// "skuId": '',
|
||||
// "num": '', //数量
|
||||
// "type": "createOrder", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||||
// "couponsId": '', //优惠券ID,
|
||||
// "isYhq": 0, // 是否使用优惠券（ 1： 使用， 0： 不使用）,
|
||||
// "isBuyYhq": 0, // 是否购买优惠券（ 1： 购买， 0： 不够买）
|
||||
// "productId": '', //商品id
|
||||
// "shopId": uni.cache.get('shopUser'),
|
||||
// "userId": uni.cache.get('userInfo').id,
|
||||
// }
|
||||
// this.datasocket = data
|
||||
// uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
},
|
||||
|
||||
/**
|
||||
* 商家信息显示
|
||||
*/
|
||||
showShopClick() {
|
||||
this.showShopInfo = true;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 多规格选择
|
||||
* @param {Object} item1
|
||||
|
|
@ -686,7 +658,6 @@
|
|||
this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据 选择第一个
|
||||
this.skuidname.push(val.children[0])
|
||||
})
|
||||
console.log(this.specifications)
|
||||
this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
|
||||
}
|
||||
|
||||
|
|
@ -694,20 +665,34 @@
|
|||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 规格选择监听
|
||||
* @param {Object} e
|
||||
* @param {Object} index
|
||||
* @param {Object} index1
|
||||
* @param {Object} item
|
||||
*/
|
||||
async morloe(e, index, index1, item) {
|
||||
this.specifications.tagSnap[index]['start'] = index1
|
||||
this.skuidname.splice(index, 1, e) //替换skuidname的数据
|
||||
this.hodgepodge(item, 2)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取规格信息
|
||||
* @param {Object} item
|
||||
* @param {Object} a
|
||||
* @param {Object} c
|
||||
* @param {Object} num
|
||||
*/
|
||||
async hodgepodge(item, a, c, num) { //此接口去获取商品id ！！！赋值库存 数量 价格等
|
||||
try {
|
||||
let res = await this.api.productqueryProductSku({
|
||||
shopId: uni.cache.get('shopUser'),
|
||||
productId: item.id, //商品id
|
||||
spec_tag: this.skuidname.join("+")
|
||||
spec_tag: this.skuidname.join(",")
|
||||
})
|
||||
console.log(res)
|
||||
if (res.data.stockNumber == 0) {
|
||||
uni.showToast({
|
||||
title: '暂无库存',
|
||||
|
|
@ -732,13 +717,38 @@
|
|||
this.skuId = res.data.id;
|
||||
this.showShopsku = true //打开弹框
|
||||
}
|
||||
this.$set(this, 'amountcartNumber', 1)
|
||||
// this.datasocket = data;
|
||||
// uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
this.$set(this, 'amountcartNumber', 0)
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 结算直接生成订单
|
||||
*/
|
||||
orderdetail() {
|
||||
console.log(this.cartLists)
|
||||
console.log(this.shopInfo)
|
||||
if (this.cartLists.data.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先添加商品',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopInfo.storeInfo)
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 商家信息显示
|
||||
*/
|
||||
showShopClick() {
|
||||
this.showShopInfo = true;
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取消息
|
||||
|
|
@ -769,17 +779,15 @@
|
|||
} else {
|
||||
switch (msg.type) {
|
||||
case 'sku': // sku 数量 查询这个商品的价格和数量
|
||||
// this.$set(this, 'amountcartNumber', msg.amount)
|
||||
// this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'order':
|
||||
this.skuidname = []
|
||||
this.showCart = false
|
||||
this.cartLists = msg
|
||||
// this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'addCart': //初始化add
|
||||
this.cartLists = msg
|
||||
this.setNumber()
|
||||
break;
|
||||
case 'addcart':
|
||||
this.cartLists = msg
|
||||
|
|
@ -792,14 +800,7 @@
|
|||
} catch (e) {}
|
||||
break;
|
||||
}
|
||||
this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
|
||||
console.log(this.cartLists.data)
|
||||
if ( this.cartLists.data.length > 0 ){
|
||||
this.cartLists_count = 0;
|
||||
this.cartLists.data.forEach((v,e)=>{
|
||||
this.cartLists_count += v.number;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
|
|
@ -814,72 +815,12 @@
|
|||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
// 导航栏高度 去计算列表页的高度
|
||||
Topdistance(e) {
|
||||
this.heightnav = e ////导航栏高度
|
||||
},
|
||||
/* 获取列表数据 */
|
||||
getListData() {
|
||||
// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
|
||||
new Promise((resolve, reject) => {
|
||||
/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
|
||||
|
||||
// 模拟数据
|
||||
let mockData = () => {
|
||||
let [left, main] = [
|
||||
[],
|
||||
[]
|
||||
];
|
||||
|
||||
let size = Math.floor(Math.random() * 40);
|
||||
size = size < 20 ? 20 : size;
|
||||
for (let i = 0; i < size; i++) {
|
||||
left.push(`${i+1}类商品`);
|
||||
|
||||
let list = [];
|
||||
let r = Math.floor(Math.random() * 10);
|
||||
r = r < 5 ? 5 : r;
|
||||
for (let j = 0; j < r; j++) {
|
||||
list.push(j);
|
||||
}
|
||||
main.push({
|
||||
title: `第${i+1}类商品标题`,
|
||||
list
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
left,
|
||||
main
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
let res = mockData();
|
||||
let {
|
||||
left,
|
||||
main
|
||||
} = res;
|
||||
// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
|
||||
resolve({
|
||||
left,
|
||||
main
|
||||
});
|
||||
}, 1000);
|
||||
}).then((res) => {
|
||||
console.log('-----------请求接口返回数据示例-------------');
|
||||
console.log(res);
|
||||
this.leftArray = res.left;
|
||||
this.mainArray = res.main;
|
||||
|
||||
// DOM 挂载后 再调用 getElementTop 获取高度的方法。
|
||||
setTimeout(() => {
|
||||
this.getElementTop();
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取元素顶部信息 */
|
||||
getElementTop() {
|
||||
new Promise((resolve, reject) => {
|
||||
|
|
@ -887,6 +828,11 @@
|
|||
view.boundingClientRect(data => {
|
||||
resolve(data);
|
||||
}).exec();
|
||||
this.$u.getRect('.scroll-panel').then(res => {
|
||||
console.log(res)
|
||||
this.scrollTopSize = res.top - this.heightnav; //元素距离顶部的距离
|
||||
this.scrollHeight = this.scrollHeight - this.heightnav
|
||||
})
|
||||
}).then((res) => {
|
||||
let topArr = res.map((item) => {
|
||||
return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
|
||||
|
|
@ -902,40 +848,18 @@
|
|||
},
|
||||
/* 主区域滚动监听 */
|
||||
mainScroll(e) {
|
||||
// 节流方法
|
||||
// clearTimeout(this.mainThrottle);
|
||||
// this.mainThrottle = setTimeout(() => {
|
||||
// scrollFn();
|
||||
// }, 10);
|
||||
|
||||
// let scrollFn = () => {
|
||||
// let top = e.detail.scrollTop;
|
||||
// let index = 0;
|
||||
// /* 查找当前滚动距离 */
|
||||
// for (let i = (this.topArr.length - 1); i >= 0; i--) {
|
||||
// /* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
|
||||
// if ((top + 2) >= this.topArr[i]) {
|
||||
// index = i;
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
},
|
||||
/* 左侧导航点击 */
|
||||
leftTap(e,index) {
|
||||
console.log(e)
|
||||
console.log(index)
|
||||
try {
|
||||
this.leftIndex = (index < 0 ? 0 : index);
|
||||
if (this.isFixed) {
|
||||
console.log(this.scrollTopSize)
|
||||
console.log(this.heightnav)
|
||||
uni.pageScrollTo({
|
||||
scrollTop: this.scrollTopSize + this.heightnav, //滑动需要的距离 nav+列表距离的高度
|
||||
scrollTop: this.scrollTopSize, //滑动需要的距离 nav+列表距离的高度
|
||||
duration: 100
|
||||
});
|
||||
this.isFixed = false
|
||||
// this.opacity = false
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
|
|
@ -945,7 +869,6 @@
|
|||
setTimeout(() => {
|
||||
let index = e.currentTarget.dataset.index;
|
||||
this.scrollInto = `item-${index}`;
|
||||
console.log(this.scrollInto)
|
||||
},)
|
||||
}
|
||||
}
|
||||
|
|
@ -999,7 +922,8 @@
|
|||
}
|
||||
|
||||
.panelthere {
|
||||
margin-top: 16rpx;
|
||||
margin-top: 32rpx;
|
||||
margin-bottom: 50rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
|
|
@ -1023,7 +947,6 @@
|
|||
}
|
||||
|
||||
.panelfour {
|
||||
margin-top: 50rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
|
|
@ -1038,6 +961,7 @@
|
|||
margin-top: 16rpx;
|
||||
width: 340rpx;
|
||||
margin-right: 30rpx;
|
||||
position: relative;
|
||||
.panelfiveitemimage {
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
width: 100%;
|
||||
|
|
@ -1061,7 +985,7 @@
|
|||
}
|
||||
|
||||
.panelfiveitemthere {
|
||||
margin-top: 8rpx;
|
||||
margin-top: 12rpx;
|
||||
// text:nth-child(1) {
|
||||
// margin-left: 0;
|
||||
// }
|
||||
|
|
@ -1078,7 +1002,7 @@
|
|||
}
|
||||
|
||||
.panelfiveitemfour {
|
||||
margin-top: 10rpx;
|
||||
margin-top: 12rpx;
|
||||
width: 100%;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
|
|
@ -1109,13 +1033,18 @@
|
|||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
text:nth-child(3) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-child(3) {
|
||||
text:nth-child(4) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
|
|
@ -1123,6 +1052,47 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.panelfiveitemNum{
|
||||
position: absolute;
|
||||
bottom: 82rpx;
|
||||
right: 0;
|
||||
.sku-wrap{
|
||||
width: 138rpx;
|
||||
height: 54rpx;
|
||||
background: #E3AD7F;
|
||||
border-radius: 32rpx;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 20rpx;
|
||||
align-items: center;
|
||||
.t{
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.dot {
|
||||
position: absolute;
|
||||
top: -15rpx;
|
||||
right: -10rpx;
|
||||
background-color: #FF4B33;
|
||||
color: #fff;
|
||||
border-radius: 58rpx;
|
||||
padding: 5rpx 14rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.Controls{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num{
|
||||
margin: 8rpx 8rpx 0 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1309,22 +1279,25 @@
|
|||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
background: #E8AD7B;
|
||||
background: #ccc;
|
||||
border-radius: 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
.addShopping.active{
|
||||
background: #E8AD7B;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-wrap {
|
||||
width: 100%;
|
||||
padding: $paddingSize;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
bottom: $paddingSize;
|
||||
bottom: 40rpx;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
|
||||
|
|
@ -1674,7 +1647,7 @@
|
|||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-content: center;
|
||||
|
||||
position: relative;
|
||||
&+.goods {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
|
@ -1691,6 +1664,29 @@
|
|||
border-radius: 18rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.topSort{
|
||||
width: 92rpx;
|
||||
height: 38rpx;
|
||||
text-align: center;
|
||||
line-height: 38rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
border-radius: 20rpx 0rpx 20rpx 0rpx;
|
||||
|
||||
}
|
||||
.topSort.c1{
|
||||
background: #FC5C2E;
|
||||
}
|
||||
.topSort.c2{
|
||||
background: #EF994E;
|
||||
}
|
||||
.topSort.c3{
|
||||
background: #F4B951;
|
||||
}
|
||||
|
||||
.goods_right{
|
||||
width: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue