fix::商品页面/订单页面完善、进入页面黑色弹框提示解决、

This commit is contained in:
GaoHao
2024-08-01 16:42:22 +08:00
parent 92e79a74f4
commit d4001e5f37
5 changed files with 250 additions and 255 deletions

View File

@@ -1,7 +1,7 @@
<template> <template>
<view class="navbarcontent"> <view class="navbarcontent">
<!-- 导航栏 --> <!-- 导航栏 -->
<view class="navbar" :class="{active:opacity}" :style="{'backgroundColor':backColor}"> <view class="navbar" :class="{active:opacity}">
<!-- #ifndef APP-PLUS || MP-WEIXIN --> <!-- #ifndef APP-PLUS || MP-WEIXIN -->
<view class="status-bar"></view> <view class="status-bar"></view>
<view class="navbar_tow flex-between" <view class="navbar_tow flex-between"
@@ -74,10 +74,6 @@
type: String, type: String,
default: '#000' default: '#000'
}, },
backColor:{//背景颜色
type: String,
default: '#f9f9f9'
}
}, },
computed: { computed: {
HeighT() { //手机类型的尺寸 HeighT() { //手机类型的尺寸

View File

@@ -134,7 +134,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #FFFFFF; background-color: #FFFFFF;
z-index: 999; z-index: 9999;
} }
.pay-title { .pay-title {

View File

@@ -104,16 +104,19 @@ async function request(options) {
if (res.code != 0) { if (res.code != 0) {
console.log(options) console.log(options)
if (res.code == -4) { if (res.code == -4) {
uni.showToast({ // uni.showToast({
// title: '', // title: '',
title: res.message || res.msg, // // title: res.message || res.msg,
icon: "none", // icon: "none",
success: () => { // success: () => {
setTimeout(res => { // setTimeout(res => {
store.dispatch("loginEvent"); //获取shapid // store.dispatch("loginEvent"); //获取shapid
}, 1000) // }, 1000)
} // }
}) // })
setTimeout(res => {
store.dispatch("loginEvent"); //获取shapid
}, 1000)
} else if (res.code == 482) { } else if (res.code == 482) {
let nowTime = new Date() / 1000 | 0 let nowTime = new Date() / 1000 | 0
let offset = parseInt(res.data.message) - parseInt(nowTime); let offset = parseInt(res.data.message) - parseInt(nowTime);

View File

@@ -254,9 +254,9 @@
break; break;
case 'addcart': case 'addcart':
/*插入一条弹幕*/ /*插入一条弹幕*/
this.$refs.lBarrage.add( // this.$refs.lBarrage.add(
`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})` // `${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
); // );
break; break;
} }
this.$set(this, 'cartLists', msg) this.$set(this, 'cartLists', msg)

View File

@@ -3,10 +3,15 @@
<!-- 占位符导航栏 --> <!-- 占位符导航栏 -->
<!-- 顶部面板 --> <!-- 顶部面板 -->
<view class="top--panel"> <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图 --> <!-- 顶部面板可添加所需要放在页面顶部的内容代码比如banner图 -->
<!-- https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png -->
<image class="panelimgbackground" <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> </image>
<view class="panelone"> <view class="panelone">
{{ shopInfo.storeInfo.shopName }} {{ shopInfo.storeInfo.shopName }}
@@ -23,14 +28,14 @@
<u-icon name="arrow-down" color="#999999" size="28"></u-icon> <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
</view> </view>
</view> </view>
<view class="panelfour"> <view class="panelfour" v-if="shopProductList.hots && shopProductList.hots.length > 0">
本店招牌菜 本店招牌菜
</view> </view>
<view class="panelfive"> <view class="panelfive">
<scroll-view :scroll-x="true" :scroll-into-view="leftIntoView" :scroll-with-animation="false"> <scroll-view :scroll-x="true" :scroll-into-view="leftIntoView" :scroll-with-animation="false">
<view class="panelfive_list"> <view class="panelfive_list">
<view class="panelfiveitem" v-for="(item,index) in shopProductList.hots" :key="index"> <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"> <view class="panelfiveitemone">
{{ item.name }} {{ item.name }}
</view> </view>
@@ -40,19 +45,38 @@
<view class="panelfiveitemthere flex-start"> <view class="panelfiveitemthere flex-start">
<text>招牌</text> <text>招牌</text>
</view> </view>
<view class="panelfiveitemfour"> <view class="panelfiveitemfour" v-if="item.shortTitle">
桂香馥郁沉入新鲜甘甜的椰.. {{item.shortTitle}}
</view> </view>
<view class="panelfiveitemfive"> <view class="panelfiveitemfive">
月售169 月售{{item.stockNumber}}
</view> </view>
<view class="panelfiveitemsex flex-between"> <view class="panelfiveitemsex flex-between">
<view class="panelfiveitemsex_oen"> <view class="panelfiveitemsex_oen">
<text>¥</text> <text>¥</text>
<text>88/</text> <text>{{item.lowPrice}}</text>
<text>5份起点</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> </view>
<u-icon name="plus-circle-fill" color="#E9AB7A" size="40"></u-icon>
</view> </view>
</view> </view>
</view> </view>
@@ -81,11 +105,12 @@
<view class="goods" @click="clickspecifications(item1,index,index1)" v-for="(item1,index1) in item.products" :key="index1"> <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" 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> <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="goods_right">
<view class="name">{{ item1.name }}</view> <view class="name">{{ item1.name }}</view>
<view class="lookBack">本店回头客第1</view> <view class="lookBack" v-if="item.name=='热销'">本店回头客第{{index1+1}}</view>
<view class="describe">桂香馥郁沉入新鲜甘甜的椰</view> <view class="describe"> {{item1.shortTitle?item1.shortTitle:''}} </view>
<view class="monthlySale">月售169</view> <view class="monthlySale">月售{{item1.stockNumber}}</view>
<view class="money"><text class="money_num">{{ item1.lowPrice }}</text>/</view> <view class="money"><text class="money_num">{{ item1.lowPrice }}</text>/</view>
<view class="sku-wrap flex-center" v-if="item1.productSkuResult != null" <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> <text class="dot num" v-if="item1.cartNumber != '0'">{{item1.cartNumber<99?item1.cartNumber:'99+'}}</text>
</view> </view>
<view class="Controls" v-else> <view class="Controls" v-else>
<view v-if="item1.cartNumber != '0'" @click.stop="cartadd(item1,index,index1,'-',item1.productSkuResult == null ? '单规格':'',$event)"> <view v-if="item1.cartNumber != '0'" @click.stop="cartadd(item1,'-',item1.productSkuResult == null ? '单规格':'',$event)">
<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> </view>
<text class="num"> {{ item1.cartNumber }} </text> <text class="num"> {{ item1.cartNumber }} </text>
<view @click.stop="cartadd(item1,index,index1,'+',item1.productSkuResult == null ? '单规格':'')"> <view @click.stop="cartadd(item1,'+',item1.productSkuResult == null ? '单规格':'')">
<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> </view>
@@ -119,6 +144,8 @@
<view>可添加需放在页面底部的内容比如购物车栏目</view> <view>可添加需放在页面底部的内容比如购物车栏目</view>
</view> </view>
</view> --> </view> -->
<!-- 购物车悬浮条 -->
<view class="cart-wrap" v-if="cartListsdatashow"> <view class="cart-wrap" v-if="cartListsdatashow">
<view class="cart-content"> <view class="cart-content">
<view class="left"> <view class="left">
@@ -156,7 +183,7 @@
</view> </view>
<view class="info"> <view class="info">
<view class="name"> {{ item.name }} </view> <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-wrap" style="padding-top: 0;">
<view class="price"> <view class="price">
@@ -165,11 +192,11 @@
</view> </view>
<view class="operation-wrap"> <view class="operation-wrap">
<view class="btn" v-if="item.number" @click="cartListadd(item,index,'-')"> <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> </view>
<text class="num" v-if="item.number">{{ item.number }}</text> <text class="num" v-if="item.number">{{ item.number }}</text>
<view class="btn" @click="cartListadd(item,index,'+')"> <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> </view>
</view> </view>
@@ -228,7 +255,7 @@
<image class="shop_skucimage" :src="specifications.coverImg" mode="aspectFill"></image> <image class="shop_skucimage" :src="specifications.coverImg" mode="aspectFill"></image>
<view class="shop_sku_name"> {{specifications.name}} </view> <view class="shop_sku_name"> {{specifications.name}} </view>
<view class="shop_sku_returned"> {{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" <view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index"
v-if="specifications.tagSnap"> v-if="specifications.tagSnap">
@@ -268,7 +295,7 @@
<view class="shop_skuselect flex-start" v-if="specifications.tagSnap"> <view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
<view class="shop_skuselectname">{{skuidname.toString()}}</view> <view class="shop_skuselectname">{{skuidname.toString()}}</view>
</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>
</view> </view>
</u-popup> </u-popup>
@@ -285,7 +312,7 @@
data() { data() {
return { return {
userInfo: uni.cache.get('userInfo'), //个人信息 userInfo: uni.cache.get('userInfo'), //个人信息
opacity: true, //是否显示 opacity: false, //是否显示
scrollHeight: 1000, scrollHeight: 1000,
scrollTopSize: 0, //距离顶部的高度 scrollTopSize: 0, //距离顶部的高度
fillHeight: 0, // 填充高度,用于最后一项低于滚动区域时使用 fillHeight: 0, // 填充高度,用于最后一项低于滚动区域时使用
@@ -295,6 +322,7 @@
leftIndex: 0, leftIndex: 0,
scrollInto: '', scrollInto: '',
isFixed: true, isFixed: true,
isNavShow: false,
heightnav: '' ,//点击获取的距离 heightnav: '' ,//点击获取的距离
showShopInfo: false, //店铺信息弹窗是否显示 showShopInfo: false, //店铺信息弹窗是否显示
showShopsku: false, //多规格弹窗是否显示 showShopsku: false, //多规格弹窗是否显示
@@ -309,25 +337,24 @@
}, // 规格信息 }, // 规格信息
socketTicket: null, socketTicket: null,
amountcartNumber: 1, amountcartNumber: 0,
salePrice: '', //钱数 salePrice: '', //钱数
cartListsdatashow: false ,//是否显示购物车 cartListsdatashow: false ,//是否显示购物车
showCart: false, showCart: false,
} }
}, },
onPageScroll(e) { onPageScroll(e) {
console.log(e.scrollTop, this.scrollTopSize)
try { try {
if (e.scrollTop <= 44) { //搜索导航栏显示影藏 if (e.scrollTop <= 44) { //搜索导航栏显示影藏
// this.opacity = false this.isNavShow = false
} else { } else {
// this.opacity = true this.isNavShow = true
} }
} catch (e) { } catch (e) {
//TODO handle the exception //TODO handle the exception
} }
if (e.scrollTop >= this.scrollTopSize-10) { //控制大图层 console.log(e.scrollTop,this.scrollTopSize)
console.log('nishizhengqde') if (e.scrollTop >= this.scrollTopSize) { //控制大图层
this.isFixed = false; this.isFixed = false;
} else { } else {
this.isFixed = true; this.isFixed = true;
@@ -337,20 +364,16 @@
/* 计算左侧滚动位置定位 */ /* 计算左侧滚动位置定位 */
leftIntoView() { leftIntoView() {
return `left-${this.leftIndex > 20 ? (this.leftIndex-20):0}`; return `left-${this.leftIndex > 20 ? (this.leftIndex-20):0}`;
} },
HeighT() { //手机类型的尺寸
return this.$store.getters.is_BarHeight
},
}, },
onReady() { onReady() {
setTimeout(() => { setTimeout(() => {
uni.getSystemInfo({ uni.getSystemInfo({
success: (data) => { success: (data) => {
this.scrollHeight = data.windowHeight 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); }, 100);
@@ -375,7 +398,6 @@
this.fixedtrue = true this.fixedtrue = true
}, },
onShow() { onShow() {
console.log(uni.cache.get('token'))
if (!uni.cache.get('token')) { if (!uni.cache.get('token')) {
uni.login({ uni.login({
provider: 'weixin', provider: 'weixin',
@@ -432,7 +454,6 @@
lng: uni.cache.get('getLocationstorage').lng, lng: uni.cache.get('getLocationstorage').lng,
lat: uni.cache.get('getLocationstorage').lat, lat: uni.cache.get('getLocationstorage').lat,
}) })
console.log(res)
if (res.code == 0) { if (res.code == 0) {
uni.cache.set('shopUser', res.data.storeInfo.id) uni.cache.set('shopUser', res.data.storeInfo.id)
this.handlemessage() //监听websocket返回 this.handlemessage() //监听websocket返回
@@ -451,42 +472,17 @@
*/ */
async productqueryProduct() { async productqueryProduct() {
let res = await this.api.productqueryProduct({ let res = await this.api.productqueryProduct({
// code: uni.cache.get('tableCode'),
"shopId": uni.cache.get('shopUser'), "shopId": uni.cache.get('shopUser'),
productGroupId: '' "productGroupId": ''
}) })
if (res.code == 0) { if (res.code == 0) {
this.shopProductList = res.data; this.shopProductList = res.data;
if ( this.cartLists && this.cartLists.data && this.cartLists.data.length >= 0 ) {
if ( this.cartLists.data.length >= 0 ) { this.setNumber()
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
}
})
})
})
} }
console.log(this.shopProductList) setTimeout(() => {
// this.$nextTick(() => { this.getElementTop();
// this.countTitleTopNum(); }, 100);
// });
} }
}, },
@@ -498,7 +494,7 @@
* @param {Object} a * @param {Object} a
* @param {Object} b * @param {Object} b
*/ */
async cartadd(item, index, index1, a, b) { //列表添加 a传参加减号 b是判断单规格多规格\ async cartadd(item, a, b) { //列表添加 a传参加减号 b是判断单规格多规格\
if (b == '单规格') { //没有规格为空 if (b == '单规格') { //没有规格为空
this.skuidname = [] this.skuidname = []
} }
@@ -518,18 +514,19 @@
if ( a == "+" ){ if ( a == "+" ){
this.amountcartNumber++; this.amountcartNumber++;
} else { } else {
if ( this.amountcartNumber > 1 ) { if ( this.amountcartNumber > 0 ) {
this.amountcartNumber-- this.amountcartNumber--
} }
} }
console.log(item)
}, },
/** /**
* 添加购物车 * 添加购物车
*/ */
addShopping ( item, index, index1, a, b ) { addShopping ( item, index, index1, a, b ) {
console.log(item) if ( this.amountcartNumber <= 0 ) {
return;
}
let params = { let params = {
"skuId": this.skuId, "skuId": this.skuId,
"num": item.cartNumber + this.amountcartNumber, //数量 "num": item.cartNumber + this.amountcartNumber, //数量
@@ -548,20 +545,18 @@
* @param {Object} index * @param {Object} index
* @param {Object} a * @param {Object} a
*/ */
async cartListadd(item, index, a) { async cartListadd(item, index, c) {
console.log(item)
try { try {
const data = { //定义socket数据传参 let params = {
"name": item.name,
"skuId": item.skuId, "skuId": item.skuId,
"num": a == '-' ? -1 : 1, //skuId "num": c == '+' ? item.number + 1 : item.number -1, //数量
"type": "addcart", //“addcart:添加购物车create0rder:生成订单clearCart:清空购物车”, "type": c == '+' ? 1 : 0,
"productId": item.productId, //商品id "productId": item.productId, //商品id
"shopId": uni.cache.get('shopUser'), "shopId": uni.cache.get('shopUser'),
"userId": uni.cache.get('userInfo').id "userId": uni.cache.get('userInfo').id,
}; "tableId": uni.cache.get('tableCode'),
this.datasocket = data }
uni.$u.debounce(this.socketSendMsg(data), 500) this.addCart(params);
} catch (e) { } catch (e) {
//TODO handle the exception //TODO handle the exception
} }
@@ -575,7 +570,7 @@
let res = await this.api.cartAdd(data) let res = await this.api.cartAdd(data)
if ( res.code == 0) { if ( res.code == 0) {
this.showShopsku = false; this.showShopsku = false;
this.$set(this, 'amountcartNumber', 1) this.$set(this, 'amountcartNumber', 0)
} }
}, },
@@ -617,46 +612,23 @@
}) })
}) })
}) })
}, // 处理招牌菜商品数量
this.shopProductList.hots.forEach((item) => {
/** item.cartNumber = 0;
* 结算直接生成订单 return summedArray.find(i => {
*/ if (item.id == i.productId) {
orderdetail() { item.cartNumber = i.number
if (this.cartLists.data.length == 0) { }
uni.showToast({ })
title: '请先添加商品', })
icon: 'none' 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 * @param {Object} item1
@@ -686,7 +658,6 @@
this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据 选择第一个 this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据 选择第一个
this.skuidname.push(val.children[0]) this.skuidname.push(val.children[0])
}) })
console.log(this.specifications)
this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量 this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
} }
@@ -694,20 +665,34 @@
//TODO handle the exception //TODO handle the exception
} }
}, },
/**
* 规格选择监听
* @param {Object} e
* @param {Object} index
* @param {Object} index1
* @param {Object} item
*/
async morloe(e, index, index1, item) { async morloe(e, index, index1, item) {
this.specifications.tagSnap[index]['start'] = index1 this.specifications.tagSnap[index]['start'] = index1
this.skuidname.splice(index, 1, e) //替换skuidname的数据 this.skuidname.splice(index, 1, e) //替换skuidname的数据
this.hodgepodge(item, 2) this.hodgepodge(item, 2)
}, },
/**
* 获取规格信息
* @param {Object} item
* @param {Object} a
* @param {Object} c
* @param {Object} num
*/
async hodgepodge(item, a, c, num) { //此接口去获取商品id !!!赋值库存 数量 价格等 async hodgepodge(item, a, c, num) { //此接口去获取商品id !!!赋值库存 数量 价格等
try { try {
let res = await this.api.productqueryProductSku({ let res = await this.api.productqueryProductSku({
shopId: uni.cache.get('shopUser'), shopId: uni.cache.get('shopUser'),
productId: item.id, //商品id productId: item.id, //商品id
spec_tag: this.skuidname.join("+") spec_tag: this.skuidname.join(",")
}) })
console.log(res)
if (res.data.stockNumber == 0) { if (res.data.stockNumber == 0) {
uni.showToast({ uni.showToast({
title: '暂无库存', title: '暂无库存',
@@ -732,13 +717,38 @@
this.skuId = res.data.id; this.skuId = res.data.id;
this.showShopsku = true //打开弹框 this.showShopsku = true //打开弹框
} }
this.$set(this, 'amountcartNumber', 1) this.$set(this, 'amountcartNumber', 0)
// this.datasocket = data;
// uni.$u.debounce(this.socketSendMsg(data), 500)
} }
} catch (e) {} } 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 { } else {
switch (msg.type) { switch (msg.type) {
case 'sku': // sku 数量 查询这个商品的价格和数量 case 'sku': // sku 数量 查询这个商品的价格和数量
// this.$set(this, 'amountcartNumber', msg.amount)
// this.productqueryProduct() //list 数据
break; break;
case 'order': case 'order':
this.skuidname = [] this.skuidname = []
this.showCart = false this.showCart = false
this.cartLists = msg this.cartLists = msg
// this.productqueryProduct() //list 数据
break; break;
case 'addCart': //初始化add case 'addCart': //初始化add
this.cartLists = msg this.cartLists = msg
this.setNumber()
break; break;
case 'addcart': case 'addcart':
this.cartLists = msg this.cartLists = msg
@@ -792,14 +800,7 @@
} catch (e) {} } catch (e) {}
break; 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) { } catch (e) {
@@ -814,72 +815,12 @@
} }
}, },
// 导航栏高度 去计算列表页的高度 // 导航栏高度 去计算列表页的高度
Topdistance(e) { Topdistance(e) {
this.heightnav = 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() { getElementTop() {
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
@@ -887,6 +828,11 @@
view.boundingClientRect(data => { view.boundingClientRect(data => {
resolve(data); resolve(data);
}).exec(); }).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) => { }).then((res) => {
let topArr = res.map((item) => { let topArr = res.map((item) => {
return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */ return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
@@ -902,40 +848,18 @@
}, },
/* 主区域滚动监听 */ /* 主区域滚动监听 */
mainScroll(e) { 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) { leftTap(e,index) {
console.log(e)
console.log(index)
try { try {
this.leftIndex = (index < 0 ? 0 : index); this.leftIndex = (index < 0 ? 0 : index);
if (this.isFixed) { if (this.isFixed) {
console.log(this.scrollTopSize)
console.log(this.heightnav)
uni.pageScrollTo({ uni.pageScrollTo({
scrollTop: this.scrollTopSize + this.heightnav, //滑动需要的距离 nav+列表距离的高度 scrollTop: this.scrollTopSize, //滑动需要的距离 nav+列表距离的高度
duration: 100 duration: 100
}); });
this.isFixed = false this.isFixed = false
// this.opacity = false
} }
} catch (e) { } catch (e) {
@@ -945,7 +869,6 @@
setTimeout(() => { setTimeout(() => {
let index = e.currentTarget.dataset.index; let index = e.currentTarget.dataset.index;
this.scrollInto = `item-${index}`; this.scrollInto = `item-${index}`;
console.log(this.scrollInto)
},) },)
} }
} }
@@ -999,7 +922,8 @@
} }
.panelthere { .panelthere {
margin-top: 16rpx; margin-top: 32rpx;
margin-bottom: 50rpx;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
@@ -1023,7 +947,6 @@
} }
.panelfour { .panelfour {
margin-top: 50rpx;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
@@ -1038,6 +961,7 @@
margin-top: 16rpx; margin-top: 16rpx;
width: 340rpx; width: 340rpx;
margin-right: 30rpx; margin-right: 30rpx;
position: relative;
.panelfiveitemimage { .panelfiveitemimage {
border-radius: 20rpx 20rpx 0rpx 0rpx; border-radius: 20rpx 20rpx 0rpx 0rpx;
width: 100%; width: 100%;
@@ -1061,7 +985,7 @@
} }
.panelfiveitemthere { .panelfiveitemthere {
margin-top: 8rpx; margin-top: 12rpx;
// text:nth-child(1) { // text:nth-child(1) {
// margin-left: 0; // margin-left: 0;
// } // }
@@ -1078,7 +1002,7 @@
} }
.panelfiveitemfour { .panelfiveitemfour {
margin-top: 10rpx; margin-top: 12rpx;
width: 100%; width: 100%;
overflow: hidden; //超出的文本隐藏 overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示 text-overflow: ellipsis; //溢出用省略号显示
@@ -1109,13 +1033,18 @@
} }
text:nth-child(2) { 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-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400; font-weight: 400;
font-size: 36rpx; font-size: 36rpx;
color: #333333; color: #333333;
} }
text:nth-child(4) {
text:nth-child(3) {
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400; font-weight: 400;
font-size: 24rpx; 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; height: 96rpx;
line-height: 96rpx; line-height: 96rpx;
text-align: center; text-align: center;
background: #E8AD7B; background: #ccc;
border-radius: 48rpx; border-radius: 48rpx;
font-weight: 400; font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #FFFFFF; color: #FFFFFF;
margin-top: 36rpx; margin-top: 36rpx;
} }
.addShopping.active{
background: #E8AD7B;
}
} }
} }
.cart-wrap { .cart-wrap {
width: 100%; width: 100%;
padding: $paddingSize; padding: 0 20rpx;
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
bottom: $paddingSize; bottom: 40rpx;
left: 0; left: 0;
z-index: 99; z-index: 99;
@@ -1674,7 +1647,7 @@
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
align-content: center; align-content: center;
position: relative;
&+.goods { &+.goods {
margin-top: 16rpx; margin-top: 16rpx;
} }
@@ -1691,6 +1664,29 @@
border-radius: 18rpx; border-radius: 18rpx;
flex-shrink: 0; 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{ .goods_right{
width: 100%; width: 100%;