2043 lines
51 KiB
Vue
2043 lines
51 KiB
Vue
<template>
|
||
<page-meta :page-style="'overflow:'+(pagemetashow?'hidden':'visible')"></page-meta>
|
||
<view class="container">
|
||
<!-- 占位符 接口请求完毕才显示 -->
|
||
<view v-if="fixedtrue"
|
||
style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;">
|
||
<image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image>
|
||
<text style="margin-left:10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text>
|
||
</view>
|
||
<!-- 顶部面板 -->
|
||
<view class="top--panel">
|
||
<navseat :opacity='opacity' :titleshow='true' @navigateBacknav='navigateBacknav'
|
||
:navigateBacknavtitle='true'></navseat>
|
||
<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
|
||
<image class="panelimgbackground"
|
||
:src="shopInfo.storeInfo.coverImg||'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/topBanner.png'"
|
||
mode="aspectFill">
|
||
</image>
|
||
<view class="panelone">
|
||
{{ shopInfo.storeInfo.shopName }}
|
||
</view>
|
||
<view class="paneltow">
|
||
距离您{{ shopInfo.distance }}
|
||
</view>
|
||
<view class="panelthere flex-between">
|
||
<view class="paneltheretext">
|
||
营业时间：{{ (shopInfo.storeInfo.businessStartDay || '——') +'至'+ (shopInfo.storeInfo.businessEndDay || '——') +' '+ (shopInfo.storeInfo.businessTime || '')}}
|
||
</view>
|
||
<view class="flex-start" @click="showShopClick">
|
||
<view style="margin-right: 14rpx;">查看</view>
|
||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="panelfour" v-if="shopProductList.hots && shopProductList.hots.length > 0">
|
||
本店招牌菜
|
||
</view>
|
||
<view class="panelfive">
|
||
<scroll-view :scroll-x="true" :scroll-with-animation="false">
|
||
<view class="panelfive_list">
|
||
<view class="panelfiveitem" @click="clickspecifications(item,index,index,'热销')"
|
||
v-for="(item,index) in shopProductList.hots" :key="index">
|
||
<image class="panelfiveitemimage" :src="item.coverImg" mode="aspectFill"></image>
|
||
<view class="panelfiveitemone">
|
||
{{ item.name }}
|
||
</view>
|
||
<view class="panelfiveitemtow">
|
||
本店回头客第{{index+1}}名
|
||
</view>
|
||
<view class="panelfiveitemthere flex-start">
|
||
<text>招牌</text>
|
||
</view>
|
||
<!-- <view class="panelfiveitemfour">
|
||
{{item.shortTitle?item.shortTitle:''}}
|
||
</view> -->
|
||
<view class="panelfiveitemfive">
|
||
月售{{item.stockNumber}}
|
||
</view>
|
||
<view class="panelfiveitemsex flex-between">
|
||
<view class="panelfiveitemsex_oen">
|
||
<text>¥</text>
|
||
<text>{{item.lowPrice}}</text>
|
||
<text>/份</text>
|
||
<text v-if="item.suit > 1">「{{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>
|
||
<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>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<!-- 滚动区域 -->
|
||
<view class="scroll-panel" id="scroll-panel">
|
||
<view class="list-box">
|
||
<view class="left" :style="{top: `${HeighT}px`}">
|
||
<scroll-view :scroll-into-view="leftIntoView" :scroll-with-animation="false" :scroll-y="scrollxleft"
|
||
:style="{height:`${scrollHeight - 90}px`}">
|
||
<view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index"
|
||
:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
|
||
@click="leftTap(index)"><text>{{item.name}}</text></view>
|
||
<!-- <view class="items"></view> -->
|
||
</scroll-view>
|
||
</view>
|
||
<view class="main">
|
||
<view>
|
||
<view class="item main-item" v-for="(item,index) in shopProductList.productInfo" :key="index"
|
||
:id="'item-'+index">
|
||
<view class="title">
|
||
<view>{{item.name}}</view>
|
||
</view>
|
||
<!-- ?x-oss-process=image/resize,m_lfit,w_200,h_200,limit_90 -->
|
||
<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"
|
||
@load="imageLoaded(item1,index,index1)"
|
||
:src="`${item1.coverImg}${!item1.imgLoad?'?x-oss-process=image/resize,m_lfit,w_300,h_300':''}`"
|
||
mode="aspectFill"></image>
|
||
<!-- <image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true"
|
||
:src="`${item1.coverImg}`" mode="aspectFill"></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" 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>/份<text
|
||
class="suit" v-if="item1.suit > 1">「{{item1.suit}}份起点」</text></view>
|
||
|
||
<view class="flex-end" v-if="item1.productSkuResult != null">
|
||
<view class="sku-wrap flex-center"
|
||
@click.stop="clickspecifications(item1,index,index1)">
|
||
<text class="t">选规格</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 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,'+',item1.productSkuResult == null ? '单规格':'')">
|
||
<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 购物车悬浮条 -->
|
||
<view class="cart-wrap" v-if="cartListsdatashow">
|
||
<view class="cart-content">
|
||
<view class="left">
|
||
<view class="iconBox">
|
||
<image class="icon"
|
||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/shopIcon.png"
|
||
mode="aspectFill" @click="showCart = !showCart">
|
||
</image>
|
||
<text class="u-badge"> {{cartLists_count<99?cartLists_count:'99+'}} </text>
|
||
</view>
|
||
|
||
<text class="i">￥</text>
|
||
<text class="num">{{cartLists.amount||'0.00'}}</text>
|
||
</view>
|
||
<view class="btn" @tap="orderdetail">
|
||
<text class="t">去结算</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 购物车 -->
|
||
<u-popup :show="showCart" :round="20" :safeAreaInsetBottom="false" :zIndex="98" :overlayStyle="{ zIndex: 98 }"
|
||
@close="showCart = false">
|
||
<view class="cart-list-wrap">
|
||
<view class="cart-header flex-between">
|
||
<view class="num">已点 {{cartLists_count}} 份</view>
|
||
<view class="clear" @click="cartclear">
|
||
<u-icon name="trash" color="#999"></u-icon>
|
||
<text class="t">清空</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="scroll-view">
|
||
<view class="list-wrap">
|
||
<view class="shop-item" v-for="(item,index) in cartLists.data" :key="item.id">
|
||
<view class="cover">
|
||
<c-image :src="item.coverImg" width="120" height="120"></c-image>
|
||
</view>
|
||
<view class="info">
|
||
<view class="name"> {{ item.name }} </view>
|
||
<view class="select-sku-wrap"> {{ item.skuName }} </view>
|
||
|
||
<view class="price-wrap" style="padding-top: 0;">
|
||
<view class="price">
|
||
<text class="i">￥</text>
|
||
<text class="num">{{ item.salePrice }}</text>
|
||
</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="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="50"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
|
||
<!-- 店铺详情 -->
|
||
<u-popup :show="showShopInfo" :round="20" mode="bottom" @close="showShopInfo = false" height="500">
|
||
<view class="shop-info-wrap">
|
||
<view class="info-wrap flex-between">
|
||
<view></view>
|
||
<text class="shopName">{{ shopInfo.storeInfo.shopName }}</text>
|
||
<view class="close" @click="showShopInfo = false">
|
||
<u-icon name="close" color="#999999" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="info-wrap-title">商家信息</view>
|
||
<view class="row" style="margin-bottom: 20rpx;">
|
||
<view class="col">
|
||
<text class="l">营业时间：</text>
|
||
<text
|
||
class="t">{{ (shopInfo.storeInfo.businessStartDay || '——') +'至'+ (shopInfo.storeInfo.businessEndDay || '——') +' '+ (shopInfo.storeInfo.businessTime || '')}}</text>
|
||
</view>
|
||
<view class="col">
|
||
<text class="l">商家地址：</text>
|
||
<text class="t">{{ shopInfo.storeInfo.address }}</text>
|
||
</view>
|
||
<view class="col" @click="makePhoneCall(shopInfo.storeInfo.phone)">
|
||
<text class="l">商家电话：</text>
|
||
<text class="t">{{ shopInfo.storeInfo.phone }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-wrap-title">商家公告</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<text class="l">公告：</text>
|
||
<text class="t">{{ shopInfo.storeInfo.detail }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 规格 -->
|
||
<u-popup :show="showShopsku" :round="20" mode="bottom" @close="showShopsku = false;pagemetashow=false"
|
||
:safeAreaInsetBottom='false'>
|
||
<view class="shop_sku" :style="{ 'max-height': '80vh;' }">
|
||
<view class="positionabsolute">
|
||
<u-icon name="close-circle" @click="showShopsku = false;pagemetashow=false" color="#000"
|
||
size="50"></u-icon>
|
||
</view>
|
||
<image class="shop_skucimage" :src="specifications.coverImg" mode="aspectFill"></image>
|
||
<view class="shop_sku_name"> {{specifications.name}} </view>
|
||
<view class="shop_sku_returned" v-if="specifications.typeName&&specifications.typeName=='热销'">
|
||
本店回头客第{{specifications.indexb+1}}名 </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">
|
||
<view class="shop_sku_box_name">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="flex-start">
|
||
<view class="shop_sku_box_item" v-for="(item1,index1) in item.children" :key="index1"
|
||
@click="morloe(item1,index,index1,item)" :style="{color:!item1.isGrounding?'#999':''}"
|
||
:class=" item.start == index1 ?'shop_sku_box_item_selected':''">
|
||
{{item1.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="shop_bottom ">
|
||
<view class="flex-between">
|
||
<view class="price">
|
||
<text class="i">￥</text>
|
||
<text class="num">{{salePrice}}</text>
|
||
<text class="i">/杯</text>
|
||
</view>
|
||
<view class="operation-wrap">
|
||
|
||
<view class="btn"
|
||
@click="shopAdd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')">
|
||
<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
|
||
</view>
|
||
<text class="num">{{amountcartNumber}}</text>
|
||
<view class="btn"
|
||
@click="shopAdd(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
|
||
<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
|
||
<view class="shop_skuselectname">{{skuidname.toString()}}</view>
|
||
</view>
|
||
<view class="addShopping" :class="(amountcartNumber>0&&isSpec)?'active':''"
|
||
@click="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
|
||
{{skuBtnText}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
|
||
</template>
|
||
<script>
|
||
import navseat from '@/components/navseat.vue'
|
||
import webSocketUtils from '@/common/js/websocket.js';
|
||
export default {
|
||
components: {
|
||
navseat
|
||
},
|
||
data() {
|
||
return {
|
||
pagemetashow: false,
|
||
fixedtrue: true,
|
||
userInfo: uni.cache.get('userInfo'), //个人信息
|
||
opacity: false, //是否显示
|
||
scrollTopSize: 0, //距离顶部的高度
|
||
fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
|
||
leftArray: [],
|
||
mainArray: [],
|
||
topArr: [],
|
||
leftIndex: 0,
|
||
isFixed: false,
|
||
showShopInfo: false, //店铺信息弹窗是否显示
|
||
showShopsku: false, //多规格弹窗是否显示
|
||
skuId: null, // 多规格ID
|
||
cartLists: {}, //购物车
|
||
cartLists_count: 0,
|
||
shopInfo: {}, //店铺信息
|
||
shopProductList: {}, //商品信息
|
||
specifications: {}, // 规格信息
|
||
querySpecList: [],
|
||
socketTicket: null,
|
||
amountcartNumber: 0,
|
||
isSpec: false,
|
||
skuBtnText: "添加到购物车",
|
||
skuNumber: 0,
|
||
skuSuit: 0,
|
||
salePrice: '', //钱数
|
||
cartListsdatashow: false, //是否显示购物车
|
||
showCart: false,
|
||
lastbottom: '', //元素最低端的距离
|
||
scrollxleft: true,
|
||
orderdetailFlag: true,
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
if (e.scrollTop <= 44) { //搜索导航栏显示影藏
|
||
this.opacity = false
|
||
} else {
|
||
this.opacity = true
|
||
}
|
||
// if (e.scrollTop > this.topArr[0]) {
|
||
// this.scrollxleft = true
|
||
// } else {
|
||
// this.scrollxleft = false
|
||
// }
|
||
this.mainScroll(e)
|
||
},
|
||
computed: {
|
||
/* 计算左侧滚动位置定位 */
|
||
leftIntoView() {
|
||
return `left-${this.leftIndex? this.leftIndex:0}`;
|
||
},
|
||
HeighT() { //手机类型的尺寸 导航栏高度
|
||
console.log(this.$store.getters.is_BarHeight)
|
||
return this.$store.getters.is_BarHeight.heightBar + this.$store.getters.is_BarHeight.customBar
|
||
},
|
||
scrollHeight() {
|
||
return this.$store.getters.is_BarHeight.info.windowHeight - (this.$store.getters.is_BarHeight.heightBar +
|
||
this.$store.getters.is_BarHeight.customBar)
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
if (e.q) {
|
||
this.tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
|
||
uni.cache.set('tableCode', this.tableCode)
|
||
}
|
||
uni.cache.set('types', 'types');
|
||
|
||
},
|
||
onUnload() {
|
||
if (this.socketTicket) {
|
||
this.socketTicket.Close()
|
||
uni.$off('message')
|
||
}
|
||
},
|
||
onHide() {
|
||
this.socketTicket.Close()
|
||
uni.$off('message')
|
||
this.fixedtrue = true
|
||
},
|
||
async onShow() {
|
||
let _this = this;
|
||
this.orderdetailFlag = true;
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 0
|
||
});
|
||
if (!uni.cache.get('token')) {
|
||
await this.$onLaunched;
|
||
}
|
||
uni.$on('message', this.getMessage)
|
||
_this.getLocation()
|
||
},
|
||
methods: {
|
||
navigateBacknav() {
|
||
uni.pro.switchTab('index/index')
|
||
},
|
||
getQueryString(url, name) { //解码
|
||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||
var r = url.substr(1).match(reg)
|
||
if (r != null) {
|
||
return r[2]
|
||
}
|
||
return null;
|
||
},
|
||
/**
|
||
* socket初始化
|
||
*/
|
||
handlemessage() {
|
||
this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
|
||
this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
|
||
tableId: uni.cache.get('tableCode'),
|
||
shopId: uni.cache.get('shopUser'),
|
||
userId: uni.cache.get('userInfo').id,
|
||
"type": "connect",
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 获取定位
|
||
*/
|
||
getLocation() {
|
||
try {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: async (res) => {
|
||
let successres = await this.api.geocodelocation({
|
||
lng: res.longitude,
|
||
lat: res.latitude,
|
||
})
|
||
if (successres.code == 0) {
|
||
let datastorage = {
|
||
country: successres.data.addressComponent.country, // "中国"
|
||
province: successres.data.addressComponent.province, //province: "陕西省"
|
||
address: successres.data.addressComponent.city, //district: "西安市"
|
||
district: successres.data.addressComponent.district, //district: "未央区"
|
||
lng: res.longitude,
|
||
lat: res.latitude,
|
||
}
|
||
uni.cache.set('getLocationstorage', datastorage);
|
||
this.productqueryShop();
|
||
}
|
||
},
|
||
fail: async (err) => {
|
||
this.productqueryShop();
|
||
}
|
||
});
|
||
} catch (e) {
|
||
this.productqueryShop();
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 通过桌码获取店铺信息
|
||
*/
|
||
async productqueryShop() {
|
||
let res = await this.api.productqueryShop({
|
||
code: uni.cache.get('tableCode'),
|
||
lng: uni.cache.get('getLocationstorage').lng ? uni.cache.get('getLocationstorage').lng :
|
||
'',
|
||
lat: uni.cache.get('getLocationstorage').lat ? uni.cache.get('getLocationstorage').lat :
|
||
'',
|
||
})
|
||
if (res.code == 0) {
|
||
uni.cache.set('shopUser', res.data.storeInfo.id)
|
||
this.shopInfo = res.data;
|
||
this.productqueryProduct() //list 数据
|
||
this.handlemessage() //监听websocket返回
|
||
} else {
|
||
setTimeout(() => {
|
||
uni.pro.switchTab('index/index')
|
||
}, 1000)
|
||
}
|
||
|
||
},
|
||
|
||
/**
|
||
* 图片加载
|
||
*/
|
||
imageLoaded(item, index, index1) {
|
||
console.log(index)
|
||
console.log(index1)
|
||
console.log(this.shopProductList.productInfo[index])
|
||
this.shopProductList.productInfo[index].products[index1]['imgLoad'] = true;
|
||
// e.currentTarget.src
|
||
},
|
||
|
||
/**
|
||
* 商品数量增加/减少
|
||
* @param {Object} item
|
||
* @param {Object} index
|
||
* @param {Object} index1
|
||
* @param {Object} a
|
||
* @param {Object} b
|
||
*/
|
||
async cartadd(item, a, b) { //列表添加 a传参加减号 b是判断单规格多规格\
|
||
if (b == '单规格') { //没有规格为空
|
||
this.skuidname = []
|
||
}
|
||
let cartNumber = a == '+' ? item.cartNumber + 1 : item.cartNumber - 1;
|
||
this.hodgepodge(item, 1, a, cartNumber) //获取skuid /1添加购物车
|
||
},
|
||
|
||
/**
|
||
* 详情商品增减
|
||
* @param {Object} item
|
||
* @param {Object} index
|
||
* @param {Object} index1
|
||
* @param {Object} a
|
||
* @param {Object} b
|
||
*/
|
||
shopAdd(item, index, index1, a, b) {
|
||
if (a == "+") {
|
||
|
||
if (this.skuNumber < this.skuSuit && this.amountcartNumber < this.skuSuit) {
|
||
this.amountcartNumber = this.amountcartNumber + (this.skuSuit == 0 ? 1 : this.skuSuit);
|
||
} else {
|
||
this.amountcartNumber++;
|
||
}
|
||
} else {
|
||
|
||
if (this.amountcartNumber > 0) {
|
||
console.log(item)
|
||
if (this.skuNumber < this.skuSuit && this.amountcartNumber <= this.skuSuit) {
|
||
this.amountcartNumber = this.amountcartNumber - (this.skuSuit == 0 ? 1 : this.skuSuit);
|
||
} else {
|
||
this.amountcartNumber = this.amountcartNumber - 1;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 添加购物车
|
||
*/
|
||
addShopping(item, index, index1, a, b) {
|
||
if (this.amountcartNumber <= 0 || !this.isSpec) {
|
||
return;
|
||
}
|
||
let num = 0;
|
||
if (item.typeEnum == "normal") {
|
||
num = item.cartNumber + this.amountcartNumber;
|
||
} else {
|
||
num = this.skuNumber + this.amountcartNumber;
|
||
}
|
||
let params = {
|
||
"skuId": this.skuId,
|
||
"num": num, //数量
|
||
"type": a == '+' ? 1 : 0,
|
||
"productId": item.id, //商品id
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"userId": uni.cache.get('userInfo').id,
|
||
"tableId": uni.cache.get('tableCode'),
|
||
}
|
||
this.addCart(params)
|
||
},
|
||
|
||
/**
|
||
* 购物车加减
|
||
* @param {Object} item
|
||
* @param {Object} index
|
||
* @param {Object} a
|
||
*/
|
||
async cartListadd(item, index, c) {
|
||
try {
|
||
let params = {
|
||
"skuId": item.skuId,
|
||
"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,
|
||
"tableId": uni.cache.get('tableCode'),
|
||
}
|
||
this.addCart(params);
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
|
||
|
||
/**
|
||
* 添加到购物车
|
||
*/
|
||
async addCart(data) {
|
||
let res = await this.api.cartAdd(data)
|
||
if (res.code == 0) {
|
||
this.showShopsku = false;
|
||
this.pagemetashow = false;
|
||
this.$set(this, 'amountcartNumber', 0)
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 清空购物车
|
||
*/
|
||
async cartclear() {
|
||
let res = await this.api.cleanCart({
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"tableId": uni.cache.get('tableCode'),
|
||
})
|
||
},
|
||
|
||
|
||
/**
|
||
* 商品数量\购物车数量处理
|
||
*/
|
||
setNumber() {
|
||
// 处理购物车相同id的情况下 数量相加
|
||
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;
|
||
}, []);
|
||
// 购物车总数据与列表页面互通
|
||
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
|
||
}
|
||
})
|
||
})
|
||
})
|
||
// 处理招牌菜商品数量
|
||
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;
|
||
})
|
||
} else {
|
||
this.cartLists_count = 0;
|
||
}
|
||
},
|
||
/**
|
||
* 多规格选择
|
||
* @param {Object} item1
|
||
* @param {Object} index
|
||
* @param {Object} index1
|
||
*/
|
||
async clickspecifications(item1, index, index1, type) {
|
||
this.skuidname = []
|
||
this.specifications = item1
|
||
this.specifications.indexa = index
|
||
this.specifications.indexb = index1
|
||
this.specifications.typeName = type
|
||
try {
|
||
if (item1.productSkuResult == null) {
|
||
this.isSpec = true;
|
||
// 但但单个规格弹框的处理
|
||
this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
|
||
} else {
|
||
// 多规格数据处理
|
||
this.isSpec = false;
|
||
let obj = await this.api.productquerySpec({
|
||
productId: item1.id, //商品id
|
||
})
|
||
this.querySpecList = obj.data;
|
||
this.specifications.tagSnap = JSON.parse(item1.productSkuResult.tagSnap).map((item) => {
|
||
let res = {
|
||
id: item1.id, //商品id
|
||
name: item.name,
|
||
start: -1,
|
||
children: []
|
||
}
|
||
item.value.split(",").forEach((v, e) => {
|
||
res.children.push({
|
||
name: v,
|
||
isGrounding: false
|
||
})
|
||
})
|
||
return res
|
||
})
|
||
|
||
//初始化第一列规格可编辑
|
||
let filteredJson;
|
||
let isSkuidname = [];
|
||
for (let o = 0; o < this.specifications.tagSnap[0].children.length; o++) {
|
||
isSkuidname = JSON.parse(JSON.stringify(this.skuidname));
|
||
isSkuidname.push(this.specifications.tagSnap[0].children[o].name)
|
||
//筛选符合条件的规格列表
|
||
console.log(isSkuidname);
|
||
filteredJson = this.querySpecList.filter(obj => obj.specSnap.indexOf(isSkuidname) == 0);
|
||
console.log(filteredJson);
|
||
for (let i = 0; i < filteredJson.length; i++) {
|
||
console.log(filteredJson[i].isGrounding)
|
||
if (filteredJson[i].isGrounding) {
|
||
this.specifications.tagSnap[0].children[o].isGrounding = true
|
||
break; // 终止循环
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
this.skuBtnText = `您还没选择${this.specifications.tagSnap[0].name}哦`
|
||
|
||
// this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据 选择第一个
|
||
// console.log(val)
|
||
// this.skuidname.push(val.children[0].info)
|
||
// })
|
||
console.log(this.specifications.tagSnap)
|
||
this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
|
||
}
|
||
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 规格选择监听
|
||
* @param {Object} e
|
||
* @param {Object} index
|
||
* @param {Object} index1
|
||
* @param {Object} item
|
||
*/
|
||
async morloe(e, index, index1, item) {
|
||
if (!e.isGrounding) {
|
||
return;
|
||
}
|
||
|
||
let querySpecList = [];
|
||
this.skuBtnText = "添加到购物车";
|
||
this.isSpec = true;
|
||
if (this.specifications.tagSnap[index].start != index1) {
|
||
this.$set(this.specifications.tagSnap[index], 'start', index1)
|
||
} else {
|
||
this.$set(this.specifications.tagSnap[index], 'start', -1)
|
||
}
|
||
this.skuidname = [];
|
||
this.specifications.tagSnap.forEach((val, i, arr) => { //初始化skuidname的数据 选择第一个
|
||
if (i > index) {
|
||
val.children.forEach((v1, e1) => {
|
||
v1.isGrounding = false;
|
||
})
|
||
val.start = -1;
|
||
}
|
||
if (val.start >= 0) {
|
||
this.skuidname.push(val.children[val.start].name)
|
||
}
|
||
})
|
||
// this.skuidname.splice(index, 1, e.info); //替换skuidname的数据
|
||
|
||
for (let i = 0; i < this.specifications.tagSnap.length; i++) {
|
||
if (this.specifications.tagSnap[i].start < 0) {
|
||
this.isSpec = false;
|
||
this.skuBtnText = `您还没选择${this.specifications.tagSnap[i].name}哦`
|
||
break; // 终止循环
|
||
}
|
||
}
|
||
|
||
|
||
let filteredJson;
|
||
let isSkuidname = [];
|
||
//提前下一列规格循环，查看是否有下架规格
|
||
if (this.specifications.tagSnap[index + 1]) {
|
||
for (let o = 0; o < this.specifications.tagSnap[index + 1].children.length; o++) {
|
||
isSkuidname = JSON.parse(JSON.stringify(this.skuidname));
|
||
isSkuidname.push(this.specifications.tagSnap[index + 1].children[o].name)
|
||
//筛选符合条件的规格列表
|
||
console.log(isSkuidname);
|
||
filteredJson = this.querySpecList.filter(obj => obj.specSnap.indexOf(isSkuidname) == 0);
|
||
console.log(filteredJson);
|
||
for (let i = 0; i < filteredJson.length; i++) {
|
||
console.log(filteredJson[i].isGrounding)
|
||
if (filteredJson[i].isGrounding) {
|
||
this.specifications.tagSnap[index + 1].children[o].isGrounding = true
|
||
break; // 终止循环
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
// res.data.forEach((v,e)=>{
|
||
// // this.$set(this.specifications.tagSnap[e], 'children', v.value)
|
||
// })
|
||
console.log(this.specifications.tagSnap)
|
||
|
||
this.$forceUpdate();
|
||
this.hodgepodge(item, 2)
|
||
},
|
||
|
||
/**
|
||
* 获取规格信息
|
||
* @param {Object} item
|
||
* @param {Object} a
|
||
* @param {Object} c
|
||
* @param {Object} num
|
||
*/
|
||
async hodgepodge(item, a, c, num) { //此接口去获取商品id ！！！赋值库存 数量 价格等
|
||
try {
|
||
console.log(this.skuidname.join(","))
|
||
let res = await this.api.productqueryProductSku({
|
||
code: uni.cache.get('tableCode'),
|
||
shopId: uni.cache.get('shopUser'),
|
||
productId: item.id, //商品id
|
||
spec_tag: this.skuidname.join(","),
|
||
})
|
||
this.salePrice = res.data.salePrice // 价格
|
||
let data = null;
|
||
if (a == 1) { //1添加购物车 2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
|
||
let params = {
|
||
"skuId": res.data.id,
|
||
"num": num, //数量
|
||
"type": c == '+' ? 1 : 0,
|
||
"productId": item.id, //商品id
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"userId": uni.cache.get('userInfo').id,
|
||
"tableId": uni.cache.get('tableCode'),
|
||
}
|
||
this.addCart(params);
|
||
} else {
|
||
this.skuId = res.data.id;
|
||
this.skuNumber = res.data.number || 0;
|
||
this.skuSuit = res.data.suit;
|
||
this.showShopsku = true //打开弹框
|
||
this.pagemetashow = true
|
||
}
|
||
this.$set(this, 'amountcartNumber', 0)
|
||
} catch (e) {}
|
||
},
|
||
|
||
/**
|
||
* 结算直接生成订单
|
||
*/
|
||
orderdetail() {
|
||
if (!this.orderdetailFlag) {
|
||
return;
|
||
}
|
||
this.orderdetailFlag = false;
|
||
if (this.cartLists.data.length == 0) {
|
||
uni.showToast({
|
||
title: '请先添加商品',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/order_food/confirm_order?storeInfo=' + JSON.stringify(this.shopInfo.storeInfo)
|
||
});
|
||
|
||
},
|
||
|
||
/**
|
||
* 商家信息显示
|
||
*/
|
||
showShopClick() {
|
||
this.showShopInfo = true;
|
||
},
|
||
|
||
/**
|
||
* 获取消息
|
||
* @param {Object} msg
|
||
*/
|
||
getMessage(msg) { //wss 回显数据
|
||
if (msg == 1) { // 网络在连接
|
||
this.fixedtrue = true
|
||
return false
|
||
}
|
||
this.fixedtrue = false
|
||
if (msg.type == 'heartbeat') { //后台心跳 处理返回 不然控制台一直报错
|
||
return false
|
||
}
|
||
try {
|
||
if (msg.status != 'success') {
|
||
uni.showToast({
|
||
title: msg.msg,
|
||
icon: "none",
|
||
})
|
||
if (msg.msg == '桌码不存在') { //卓码不存在直接退出
|
||
this.socketTicket.Close()
|
||
uni.$off('message')
|
||
uni.navigateBack()
|
||
return false;
|
||
}
|
||
} else {
|
||
switch (msg.type) {
|
||
case 'sku': // sku 数量 查询这个商品的价格和数量
|
||
break;
|
||
case 'order':
|
||
this.cartLists_count = 0;
|
||
this.skuidname = [];
|
||
this.cartListsdatashow = false;
|
||
this.showCart = false;
|
||
this.cartLists = msg;
|
||
this.productqueryProduct() //list 数据
|
||
break;
|
||
case 'addCart': //初始化add
|
||
this.cartLists = msg
|
||
this.setNumber()
|
||
break;
|
||
case 'addcart':
|
||
this.cartLists = msg
|
||
try {
|
||
//购物车为空的情况
|
||
if (msg.data.length == 0) {
|
||
this.showCart = false;
|
||
}
|
||
this.setNumber()
|
||
} catch (e) {}
|
||
break;
|
||
}
|
||
|
||
|
||
}
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
|
||
// 数据处理
|
||
socketSendMsg(data) {
|
||
if (this.socketTicket) {
|
||
this.socketTicket.send(data);
|
||
}
|
||
},
|
||
/**
|
||
* 获取商品数据
|
||
*/
|
||
async productqueryProduct() {
|
||
let res = await this.api.productqueryProduct({
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"productGroupId": ''
|
||
})
|
||
if (res.code == 0) {
|
||
this.shopProductList = res.data;
|
||
if (this.cartLists && this.cartLists.data && this.cartLists.data.length >= 0) {
|
||
this.setNumber()
|
||
}
|
||
this.scrollTopSize = 0
|
||
this.topArr = []
|
||
setTimeout(() => {
|
||
this.getElementTop();
|
||
}, 500);
|
||
}
|
||
},
|
||
|
||
/* 获取元素顶部信息 */
|
||
getElementTop() {
|
||
new Promise((resolve, reject) => {
|
||
let view = uni.createSelectorQuery().selectAll('.main-item');
|
||
view.boundingClientRect(async data => {
|
||
resolve(data);
|
||
}).exec();
|
||
this.$u.getRect('.scroll-panel').then(res => {
|
||
this.scrollTopSize = res.top; //元素距离顶部的距离
|
||
})
|
||
}).then((res) => {
|
||
let topArr = res.map((item) => {
|
||
return item.top; /* 减去滚动容器距离顶部的距离 加导航栏高度*/
|
||
});
|
||
this.topArr = topArr;
|
||
// 获取最后一个元素最低端的盒子到顶点的距离
|
||
for (let i = 0; i <= (this.topArr.length - 1); i++) {
|
||
if ((this.scrollHeight - 200) >= (this.topArr[this.topArr.length - 1] - this.topArr[i])) {
|
||
// 获取距离最后一个index
|
||
this.lastbottom = i;
|
||
break;
|
||
}
|
||
}
|
||
/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
|
||
let last = res[res.length - 1].height;
|
||
if (last - 20 < this.scrollHeight) {
|
||
// this.fillHeight = this.scrollHeight - last + 20; //这是吸到顶部的距离
|
||
this.fillHeight = 200;
|
||
}
|
||
});
|
||
},
|
||
/* 主区域滚动监听 */
|
||
mainScroll(e) {
|
||
// 节流方法
|
||
clearTimeout(this.mainThrottle);
|
||
this.mainThrottle = setTimeout(() => {
|
||
scrollFn();
|
||
}, 10);
|
||
let scrollFn = () => {
|
||
let top = e.scrollTop;
|
||
let index = 0;
|
||
// 判断左边是否可以滑动
|
||
|
||
for (let i = (this.topArr.length - 1); i >= 0; i--) {
|
||
/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
|
||
if ((top + 2) >= this.topArr[i] - this.HeighT) {
|
||
index = i;
|
||
break;
|
||
}
|
||
}
|
||
console.log(index)
|
||
/* 查找当前滚动距离 */
|
||
if (index >= this.lastbottom) { //
|
||
console.log(index, this.leftIndex)
|
||
this.leftIndex = index > this.leftIndex ? index : this.leftIndex
|
||
// this.leftIndex = this.leftIndex
|
||
} else {
|
||
console.log(22918)
|
||
this.leftIndex = (index < 0 ? 0 : index);
|
||
}
|
||
}
|
||
},
|
||
/* 左侧导航点击 */
|
||
leftTap(index) {
|
||
uni.pageScrollTo({
|
||
scrollTop: this.topArr[index] - this.HeighT,
|
||
duration: 0
|
||
});
|
||
this.leftIndex = index
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$bg: #fafafa;
|
||
$tabLeft: 200upx;
|
||
$itemH: 100upx;
|
||
$cartH: 90upx;
|
||
|
||
/* 容器 */
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
align-content: flex-start;
|
||
|
||
.navbarcontent .active {
|
||
background-color: #fff;
|
||
}
|
||
|
||
&>view {
|
||
width: 100%;
|
||
}
|
||
|
||
.top--panel {
|
||
// padding: 0 20rpx;
|
||
background-color: #fff;
|
||
|
||
.panelimgbackground {
|
||
width: 100%;
|
||
height: 272rpx;
|
||
}
|
||
|
||
.panelone {
|
||
padding: 20rpx 20rpx 0 20rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.paneltow {
|
||
padding: 0 20rpx;
|
||
margin-top: 16rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.panelthere {
|
||
margin-top: 32rpx;
|
||
margin-bottom: 50rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
padding: 0 20rpx;
|
||
|
||
.paneltheretext {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.flex-start {
|
||
view {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.panelfour {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.panelfive {
|
||
width: 100%;
|
||
padding: 0 20rpx;
|
||
|
||
.panelfive_list {
|
||
display: flex;
|
||
}
|
||
|
||
.panelfiveitem {
|
||
margin-top: 16rpx;
|
||
width: 340rpx;
|
||
margin-right: 30rpx;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
|
||
.panelfiveitemimage {
|
||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||
width: 100%;
|
||
height: 204rpx;
|
||
}
|
||
|
||
.panelfiveitemone {
|
||
margin-top: 32rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.panelfiveitemtow {
|
||
margin-top: 16rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FF534B;
|
||
}
|
||
|
||
.panelfiveitemthere {
|
||
margin-top: 12rpx;
|
||
// text:nth-child(1) {
|
||
// margin-left: 0;
|
||
// }
|
||
|
||
text {
|
||
padding: 4rpx 24rpx;
|
||
background: #F6F6F6;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.panelfiveitemfour {
|
||
margin-top: 12rpx;
|
||
width: 100%;
|
||
height: 36rpx;
|
||
line-height: 36rpx;
|
||
overflow: hidden; //超出的文本隐藏
|
||
text-overflow: ellipsis; //溢出用省略号显示
|
||
white-space: nowrap; //溢出不换行
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.panelfiveitemfive {
|
||
margin-top: 8rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.panelfiveitemsex {
|
||
margin-top: 32rpx;
|
||
|
||
.panelfiveitemsex_oen {
|
||
text:nth-child(1) {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
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(4) {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.panelfiveitemNum {
|
||
// position: absolute;
|
||
// bottom: 82rpx;
|
||
// right: 0;
|
||
padding-bottom: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.sku-wrap {
|
||
width: 138rpx;
|
||
height: 54rpx;
|
||
background: #E3AD7F;
|
||
border-radius: 32rpx;
|
||
position: relative;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.scroll-panel {
|
||
// flex-grow: 1;
|
||
// height: 0;
|
||
// overflow: hidden;
|
||
|
||
}
|
||
|
||
|
||
.shop-info-wrap {
|
||
padding: 0 30rpx 50rpx;
|
||
box-sizing: border-box;
|
||
|
||
.info-wrap {
|
||
padding: 30rpx 0;
|
||
box-sizing: border-box;
|
||
|
||
.shopName {
|
||
align-self: center;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.info-wrap-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.row {
|
||
.col {
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.l,
|
||
.t {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shop_sku {
|
||
width: 100%;
|
||
position: relative;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
overflow-y: auto;
|
||
padding-bottom: 320rpx;
|
||
box-sizing: border-box;
|
||
|
||
.positionabsolute {
|
||
position: absolute;
|
||
top: 30rpx;
|
||
right: 30rpx;
|
||
}
|
||
|
||
.shop_skucimage {
|
||
width: 100%;
|
||
height: 500rpx !important;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
}
|
||
|
||
.shop_sku_name {
|
||
padding: 0 $paddingSize;
|
||
margin-top: 20rpx;
|
||
font-weight: bold;
|
||
font-size: 32upx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.shop_sku_returned {
|
||
padding: 0 $paddingSize;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FF534B;
|
||
}
|
||
|
||
.shop_sku_description {
|
||
padding: 0 $paddingSize;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-top: 16rpx;
|
||
padding-bottom: 32rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 2rpx solid #F0F0F0;
|
||
}
|
||
|
||
|
||
.shop_sku_box {
|
||
padding: 0 $paddingSize;
|
||
|
||
.shop_sku_box_name {
|
||
margin-top: 20rpx;
|
||
font-weight: 500;
|
||
font-size: 28upx;
|
||
color: #333;
|
||
}
|
||
|
||
.flex-start {
|
||
.shop_sku_box_item {
|
||
margin-top: 16rpx;
|
||
padding: 12rpx 28rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 24upx;
|
||
margin-left: 56rpx;
|
||
background: #F5F5F5;
|
||
border: 2rpx solid #F5F5F5;
|
||
}
|
||
|
||
.shop_sku_box_item:nth-child(1) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.shop_sku_box_item_noselected {
|
||
color: #666;
|
||
}
|
||
|
||
.shop_sku_box_item_selected {
|
||
background: #FEFAF7;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #E8AD7B;
|
||
color: #E8AD7B;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.shop_skuselect {
|
||
margin-top: 16rpx;
|
||
width: 100%;
|
||
// background: #f7f7f7;
|
||
color: #999;
|
||
font-size: 24upx;
|
||
|
||
.shop_skuselectname {
|
||
color: #000;
|
||
font-size: 26upx;
|
||
}
|
||
}
|
||
|
||
.shop_bottom {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 30rpx $paddingSize;
|
||
background-color: #fff;
|
||
box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0, 0, 0, 0.1);
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.i {
|
||
font-size: 28rpx;
|
||
color: #E8AD7B;
|
||
position: relative;
|
||
bottom: 4upx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.num {
|
||
font-size: 42rpx;
|
||
color: #E8AD7B;
|
||
position: relative;
|
||
top: 6upx;
|
||
padding: 0 4upx;
|
||
}
|
||
}
|
||
|
||
.operation-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.num {
|
||
font-size: 32upx;
|
||
padding: 0 16upx;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.addShopping {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
text-align: center;
|
||
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: 0 20rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
bottom: 40rpx;
|
||
left: 0;
|
||
z-index: 99;
|
||
|
||
.cart-content {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 128rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.15);
|
||
border-radius: 58rpx;
|
||
padding: 0 36rpx;
|
||
box-sizing: border-box;
|
||
|
||
.left {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.iconBox {
|
||
position: relative;
|
||
}
|
||
|
||
.icon {
|
||
width: 76rpx;
|
||
height: 88rpx;
|
||
margin-left: 22rpx;
|
||
}
|
||
|
||
.u-badge {
|
||
position: absolute;
|
||
top: -30rpx;
|
||
right: -30rpx;
|
||
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;
|
||
}
|
||
|
||
.i,
|
||
.num {
|
||
color: #333;
|
||
}
|
||
|
||
.i {
|
||
font-size: 20upx;
|
||
position: relative;
|
||
top: 4upx;
|
||
margin-left: 64rpx;
|
||
}
|
||
|
||
.num {
|
||
font-size: 42upx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 160rpx;
|
||
height: 64rpx;
|
||
background: #E7AE7B;
|
||
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||
border: 2rpx solid #E8AD7B;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.t {
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cart-list-wrap {
|
||
.cart-header {
|
||
display: flex;
|
||
height: 72rpx;
|
||
background-color: #F2F2F2;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20upx $paddingSize;
|
||
border-radius: 20upx 20upx 0 0;
|
||
|
||
.num {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.clear {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.t {
|
||
font-size: 24upx;
|
||
color: #999;
|
||
margin-left: 4upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scroll-view {
|
||
max-height: 50vh;
|
||
margin-bottom: 190rpx;
|
||
}
|
||
|
||
.list-wrap {
|
||
padding: $paddingSize 0 0 $paddingSize;
|
||
}
|
||
|
||
.shop-item {
|
||
display: flex;
|
||
padding-bottom: $paddingSize;
|
||
|
||
.langcover {
|
||
position: relative;
|
||
}
|
||
|
||
.langcover::after {
|
||
content: '加载中..';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
background-color: #e8e8e8;
|
||
color: #6b6b6b;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
line-height: 180rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.info {
|
||
flex: 1;
|
||
padding-left: 20upx;
|
||
padding-right: $paddingSize;
|
||
|
||
.name {
|
||
font-size: 28upx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.select-sku-wrap {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.price-wrap {
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.i,
|
||
.num {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.i {
|
||
position: relative;
|
||
bottom: 4upx;
|
||
}
|
||
|
||
.num {}
|
||
}
|
||
|
||
.sku-wrap {
|
||
padding: 6upx 16upx;
|
||
background-color: $color-priamry;
|
||
border-radius: 12upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
|
||
.t {
|
||
font-size: 24upx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dot {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20upx;
|
||
position: absolute;
|
||
padding: 2upx 12upx;
|
||
border-radius: 8upx;
|
||
background-color: $numColor;
|
||
color: #fff;
|
||
position: absolute;
|
||
top: -14upx;
|
||
right: -8upx;
|
||
}
|
||
|
||
}
|
||
|
||
.operation-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.num {
|
||
font-size: 32upx;
|
||
padding: 0 16upx;
|
||
}
|
||
|
||
.btn {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
.list-box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
align-content: flex-start;
|
||
font-size: 28rpx;
|
||
position: relative;
|
||
|
||
.left {
|
||
width: 200rpx;
|
||
background-color: #f6f6f6;
|
||
line-height: normal;
|
||
box-sizing: border-box;
|
||
font-size: 32rpx;
|
||
position: sticky;
|
||
top: 0;
|
||
|
||
// padding-bottom: 200rpx;
|
||
.item {
|
||
padding: 30rpx 30rpx;
|
||
// height: 92rpx;
|
||
// line-height: 92rpx;
|
||
position: relative;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
// overflow: hidden;
|
||
// text-overflow: ellipsis;
|
||
// white-space: nowrap;
|
||
|
||
&+.item {
|
||
margin-top: 1px;
|
||
|
||
&::after {
|
||
// content: '';
|
||
// display: block;
|
||
// height: 0;
|
||
// border-top: #d6d6d6 solid 1px;
|
||
// width: 620upx;
|
||
// position: absolute;
|
||
// top: -1px;
|
||
// right: 0;
|
||
// transform: scaleY(0.5);
|
||
/* 1px像素 */
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
color: #333;
|
||
background-color: #fff;
|
||
position: relative;
|
||
|
||
&::before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
border-left: #7E5C23 solid 4px;
|
||
height: 100%;
|
||
width: 0;
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: -15rpx;
|
||
bottom: 0;
|
||
margin: auto;
|
||
height: 30rpx;
|
||
width: 30rpx;
|
||
border-radius: 50%;
|
||
background-color: #7E5C23;
|
||
}
|
||
}
|
||
}
|
||
|
||
.items {
|
||
height: 90px;
|
||
position: relative;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.fill-last {
|
||
height: 0;
|
||
width: 100%;
|
||
background: none;
|
||
}
|
||
}
|
||
|
||
.main {
|
||
background-color: #fff;
|
||
padding-left: 20rpx;
|
||
width: 0;
|
||
flex-grow: 1;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
|
||
.title {
|
||
line-height: normal;
|
||
padding: 30rpx 0;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #666;
|
||
background-color: #fff;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 19;
|
||
}
|
||
|
||
.item {
|
||
padding-bottom: 16rpx;
|
||
border-bottom: #eee solid 1px;
|
||
}
|
||
|
||
.goods {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-content: center;
|
||
position: relative;
|
||
|
||
&+.goods {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
&>image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin-right: 18rpx;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.goodsImg {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
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%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
padding-top: 5rpx;
|
||
padding-right: 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.describe,
|
||
.monthlySale,
|
||
.lookBack {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.describe,
|
||
.name {
|
||
width: 270rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.lookBack {
|
||
color: #FF534B;
|
||
}
|
||
|
||
.money {
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
|
||
.money_num {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.suit {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.sku-wrap {
|
||
width: 138rpx;
|
||
height: 54rpx;
|
||
background: #E3AD7F;
|
||
border-radius: 32rpx;
|
||
// position: absolute;
|
||
// bottom: 10rpx;
|
||
// right: 20rpx;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.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;
|
||
justify-content: flex-end;
|
||
|
||
// position: absolute;
|
||
// bottom: 10rpx;
|
||
// right: 20rpx;
|
||
.num {
|
||
margin: auto 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
</style> |