|
|
@@ -0,0 +1,1273 @@
|
|
|
+<template>
|
|
|
+ <view class="orderFood">
|
|
|
+ <view class="shop-info">
|
|
|
+ <view class="shop-name">
|
|
|
+ {{shopInfo.shopName}}
|
|
|
+ </view>
|
|
|
+ <view class="address">
|
|
|
+ {{shopInfo.address}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="content">
|
|
|
+ <scroll-view :scroll-y="true" class="left" :scroll-into-view="scrollTo1" scroll-with-animation>
|
|
|
+ <!-- <view class="left"> -->
|
|
|
+ <view class="item" :class="[active == index?'active':'']" v-for="(item,index) in list" :id="'tab'+index" :key="index" @click="handleTab(index)">
|
|
|
+ <image class="icon" :src="item.imageCnUrl" mode=""></image>
|
|
|
+ <view class="name">
|
|
|
+ {{item.topName}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- </view> -->
|
|
|
+ </scroll-view>
|
|
|
+ <scroll-view :scroll-y="true" class="right" :scroll-into-view="scrollTo" scroll-with-animation @scroll="scroll">
|
|
|
+ <!-- <view class="test">
|
|
|
+
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="right"> -->
|
|
|
+ <view class="section" v-for="(item,index) in list" :key="index">
|
|
|
+ <view class="section-name" :class="'title'+index" :id="'title'+index" >
|
|
|
+ {{item.topName}}
|
|
|
+ </view>
|
|
|
+ <!-- <zs-title :title="item.topName" :value="index" :class="'title'+index" :id="'title'+index" @changeTag="chooseTag"></zs-title> -->
|
|
|
+ <view class="item" v-for="(i,d) in item.menuVoList" :key="d" >
|
|
|
+ <image class="img" :src="i.imageUrl" mode=""></image>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">
|
|
|
+ {{i.nameCn}}
|
|
|
+ </view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="price-box">
|
|
|
+ <view class="price">
|
|
|
+ <view class="unit">
|
|
|
+ ￥
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ {{i.priceHead}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="old-price">
|
|
|
+ ￥{{i.price}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="btn" @click.stop="add(i,1,item)" src="../static/add-active.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- </view> -->
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="total-box">
|
|
|
+ <view class="price-box" @click="handleCar">
|
|
|
+ <view class="car-box">
|
|
|
+ <image class="icon" src="../static/shop-car.png" mode=""></image>
|
|
|
+ <view class="num" v-if="totalNum">
|
|
|
+ {{totalNum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="unit">
|
|
|
+ ￥
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ {{total}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <button class="buy" :class="[!carList.length?'disabled':'']" :disabled="!carList.length" type="default" @click="buy">{{carList.length?'选好了':'未选择商品'}}</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 购物车 -->
|
|
|
+ <u-popup :show="show" round="32rpx" mode="bottom" @close="show = false">
|
|
|
+ <view class="popup-title-box" >
|
|
|
+ <view class="title">
|
|
|
+ 已选商品
|
|
|
+ </view>
|
|
|
+ <view class="clear" v-if="carList.length" @click="clear">
|
|
|
+ 清空
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-empty
|
|
|
+ mode="car"
|
|
|
+ icon="http://cdn.uviewui.com/uview/empty/car.png"
|
|
|
+ v-if="!carList.length"
|
|
|
+ >
|
|
|
+ </u-empty>
|
|
|
+ <view class="car-content" v-else>
|
|
|
+ <view class="item" v-for="(item,index) in carList" :key="index">
|
|
|
+ <image class="img" :src="item.imageUrl" mode=""></image>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">
|
|
|
+ {{item.nameCn}}
|
|
|
+ </view>
|
|
|
+ <view class="type" v-if="item.config">
|
|
|
+ {{item.config}}
|
|
|
+ </view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="price-box">
|
|
|
+ <view class="price">
|
|
|
+ <view class="unit">
|
|
|
+ ￥
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ {{item.sellPrice}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="old-price">
|
|
|
+ ￥{{item.orgPrice}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="count-box">
|
|
|
+ <image class="btn" src="../static/remove.png" v-if="item.quantity" @click="add(item,-1,{},index)" mode=""></image>
|
|
|
+ <view class="num">
|
|
|
+ {{item.quantity}}
|
|
|
+ </view>
|
|
|
+ <image class="btn" src="../static/add-active.png" @click="add(item,1,{},index)" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="total-box total-box1">
|
|
|
+ <view class="price-box" @click="handleCar">
|
|
|
+ <view class="car-box">
|
|
|
+ <image class="icon" src="../static/shop-car.png" mode=""></image>
|
|
|
+ <view class="num" v-if="totalNum">
|
|
|
+ {{totalNum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="unit">
|
|
|
+ ￥
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ {{total}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <button class="buy" :class="[!carList.length?'disabled':'']" :disabled="!carList.length" type="default" @click="buy">{{carList.length?'选好了':'未选择商品'}}</button>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 商品详情 -->
|
|
|
+ <u-popup :show="show2" round="32rpx" mode="bottom" @close="show2 = false">
|
|
|
+ <view class="popup-goodsDetail">
|
|
|
+ <view class="box">
|
|
|
+
|
|
|
+ <image class="img" :src="goodsInfo.product_img" mode="aspectFit"></image>
|
|
|
+ <view class="popup-content">
|
|
|
+ <view class="title">
|
|
|
+ {{goodsInfo.product_name}}
|
|
|
+ </view>
|
|
|
+ <view class="desc" v-if="goodsInfo.product_description">
|
|
|
+ {{goodsInfo.product_description}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="choose-box" v-if="ot == 'NXDC'">
|
|
|
+ <view class="choose-item" v-for="item in goodsInfo.details.spu_specs" :key="item.code">
|
|
|
+ <view class="choose-title">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="item" :class="[i.code == chooseInfo[item.code].code?'active':'']" v-for="i in item.values" :key="i.code" @click="choose(i,item.code)">
|
|
|
+ {{i.name}} {{i.price?`￥${i.price}`:''}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="choose-box" v-else-if="ot == 'MDL'">
|
|
|
+ <view class="choose-item" v-for="item in goodsInfo.details.optional" :key="item.code">
|
|
|
+ <view class="choose-title">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="item" :class="[i.id == chooseInfo[item.name+'-'+item.id].id?'active':'']" v-for="i in item.sku_infos" :key="i.id" @click="()=>choose(i,item.name+'-'+item.id)">
|
|
|
+ {{i.name}} {{i.price?`￥${i.price}`:''}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="choose-item" >
|
|
|
+ <view class="choose-title">
|
|
|
+ 套餐内容
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="item active" v-for="i in goodsInfo.details.required" :key="i.id">
|
|
|
+ {{i.product_name}}x{{i.amount}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="choose-box" v-else-if="ot == 'XBK'">
|
|
|
+ <view class="choose-item" v-for="item in goodsInfo.details.optional" :key="item.code">
|
|
|
+ <view class="choose-title">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="item" :class="[i.id == chooseInfo[item.id].id?'active':'']" v-for="i in item.sku_infos" :key="i.id" @click="()=>choose(i,item.id)">
|
|
|
+ {{i.name}} {{i.price?`￥${i.price}`:''}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="choose-box" v-else-if="ot == 'XC'">
|
|
|
+ <view class="choose-item" v-for="item in goodsInfo.details.specifications" :key="item.code">
|
|
|
+ <view class="choose-title">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="item" :class="[i.id == chooseInfo[item.id].id?'active':'']" v-for="i in item.values" :key="i.id" @click="()=>choose(i,item.id,item)">
|
|
|
+ {{i.name}} {{i.price?`￥${i.price}`:''}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="order-info">
|
|
|
+ <view class="left">
|
|
|
+ <view class="price-box">
|
|
|
+ <view class="price">
|
|
|
+ ￥{{(itemPrice.price*10000)*num/10000}}
|
|
|
+ </view>
|
|
|
+ <view class="old-price">
|
|
|
+ ￥{{ (itemPrice.oldPrice*10000)*num/10000}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="choose">
|
|
|
+ {{config}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="count-box">
|
|
|
+ <image class="btn1" src="../static/remove.png" v-if="num" @click="add1(-1)" mode=""></image>
|
|
|
+ <view class="num">
|
|
|
+ {{num}}
|
|
|
+ </view>
|
|
|
+ <image class="btn1" src="../static/add-active.png" @click="add1(1)" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <button class="btn" type="default" @click="handleAdd">加入购物车</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <u-modal :show="show1" :title="shopInfo.shopName" confirmColor="#FF4D3A" confirmText="更换门店" @confirm="confirm">
|
|
|
+ <view class="modal-box">
|
|
|
+ <view class="shopName">
|
|
|
+ 店铺暂未营业或已暂停营业
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="notice">
|
|
|
+ 请尝试更换门店~
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </u-modal>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {shopDetail,menuList,foodGoodsDetail} from '@/api/orderFood.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ shopId:"63836999-5117-4980-8632-497f007808ef",
|
|
|
+ show:false,
|
|
|
+ show1:false,
|
|
|
+ show2:false,
|
|
|
+ active:0,
|
|
|
+ list:[],
|
|
|
+ shopInfo:{
|
|
|
+ shopName:'',
|
|
|
+ address:'',
|
|
|
+ },
|
|
|
+ carList:[],
|
|
|
+ scrollTo:'title0',
|
|
|
+ scrollTo1:'',
|
|
|
+ topList:[],
|
|
|
+ offsetTop:0,//顶部距离
|
|
|
+ cateName:'',//跳转过来携带的分类名称
|
|
|
+ ot:uni.getStorageSync('ot'),
|
|
|
+ goodsInfo:{},
|
|
|
+ num:1,
|
|
|
+ chooseInfo:{},
|
|
|
+ item:{},//弹窗内商品信息
|
|
|
+ productId:'',
|
|
|
+ itemPrice:{//弹窗内商品价格
|
|
|
+ price:0,
|
|
|
+ oldPrice:0
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ totalNum(){
|
|
|
+ let total = 0
|
|
|
+ this.carList.map(item=>{
|
|
|
+ total+=item.quantity
|
|
|
+ })
|
|
|
+ return total
|
|
|
+ },
|
|
|
+ total() {
|
|
|
+ let total = 0
|
|
|
+ this.carList.map(item=>{
|
|
|
+ total+=(item.sellPrice*10000*item.quantity)
|
|
|
+ })
|
|
|
+ return total/10000
|
|
|
+ },
|
|
|
+ // 选择的规格文字 同时计算当前选择的价格
|
|
|
+ config(){
|
|
|
+ let str = ''
|
|
|
+ for (let key in this.chooseInfo) {
|
|
|
+ str +=this.chooseInfo[key].name +'/'
|
|
|
+ }
|
|
|
+ if(this.goodsInfo.details&&this.goodsInfo.details.sku_infos){
|
|
|
+ let {productId,price,oldPrice} = this.findData()
|
|
|
+ this.productId = productId
|
|
|
+ this.itemPrice = {
|
|
|
+ price,
|
|
|
+ oldPrice
|
|
|
+ }
|
|
|
+ }else if(this.goodsInfo.details&&this.goodsInfo.details.specifications){
|
|
|
+ let addPrice = 0
|
|
|
+ for (let key in this.chooseInfo) {
|
|
|
+ addPrice += this.chooseInfo[key].price
|
|
|
+ }
|
|
|
+ this.itemPrice = {
|
|
|
+ price:this.item.priceHead+addPrice,
|
|
|
+ oldPrice:this.item.price+addPrice
|
|
|
+ }
|
|
|
+
|
|
|
+ }else if(this.ot == 'MDL'){
|
|
|
+ this.itemPrice = {
|
|
|
+ price:this.item.priceHead,
|
|
|
+ oldPrice:this.item.price
|
|
|
+ }
|
|
|
+ }else if(this.ot == 'XBK'){
|
|
|
+ let addPrice = 0
|
|
|
+ for (let key in this.chooseInfo) {
|
|
|
+ addPrice += this.chooseInfo[key].price
|
|
|
+ }
|
|
|
+ this.itemPrice = {
|
|
|
+ price:this.item.priceHead+addPrice,
|
|
|
+ oldPrice:this.item.price+addPrice
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('jiage',this.itemPrice);
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 选择规格
|
|
|
+ choose(item,key,data){
|
|
|
+ console.log(item,key);
|
|
|
+ if(this.ot == 'XC'){
|
|
|
+ if(this.chooseInfo[key]&&this.chooseInfo[key].id == item.id &&!data.mandatory){
|
|
|
+ this.$delete(this.chooseInfo,key)
|
|
|
+ }else{
|
|
|
+ this.$set(this.chooseInfo,key,item)
|
|
|
+ }
|
|
|
+ }else if(this.ot == 'MDL'){
|
|
|
+ if(this.chooseInfo[key]&&this.chooseInfo[key].id == item.id){//麦当劳不能不选择
|
|
|
+ // this.$delete(this.chooseInfo,key)
|
|
|
+ }else{
|
|
|
+ this.$set(this.chooseInfo,key,item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if(this.ot == 'XBK'){
|
|
|
+ if(this.chooseInfo[key]&&this.chooseInfo[key].id == item.id){//星巴克不能不选择
|
|
|
+ // this.$delete(this.chooseInfo,key)
|
|
|
+ }else{
|
|
|
+ this.$set(this.chooseInfo,key,item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else{//奈雪的茶
|
|
|
+ this.$set(this.chooseInfo,key,item)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirm(){
|
|
|
+ this.show1 = false
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'./shopList'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 滚动的选择商品
|
|
|
+ scroll(val){
|
|
|
+ if(!this.offsetTop){
|
|
|
+ this.offsetTop = val.currentTarget.offsetTop
|
|
|
+ }
|
|
|
+ this.topList.map((item,index)=>{
|
|
|
+ if(index!=this.topList.length-1){
|
|
|
+
|
|
|
+ if(val.detail.scrollTop>= (item-this.offsetTop)&&(val.detail.scrollTop <=this.topList[index+1]-this.offsetTop)){
|
|
|
+ this.scrollTo1 = 'tab'+index
|
|
|
+ this.active = index
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(val.detail.scrollTop>= (item-this.offsetTop)){
|
|
|
+ this.scrollTo1 = 'tab'+index
|
|
|
+ this.active = index
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clear(){
|
|
|
+ this.carList = []
|
|
|
+ },
|
|
|
+ // 购物车内添加数量 商品添加数量 选择规格时不走这里 但是选择规格的购物车内数量操作走这里
|
|
|
+ add(item,num,data={},idx){//item:当前操作item num：增加或者减少 data：当前item的上层栏目，idx：购物车内当前操作商品index 方便删除
|
|
|
+ // 如果需要选择规格
|
|
|
+ if(data.childClassList) return this.handleItem(item,data)
|
|
|
+
|
|
|
+ // 肯德基
|
|
|
+ if(this.ot == 'Kfc'){
|
|
|
+ if(this.carList.some(i=>item.productId == i.productId)){
|
|
|
+ this.carList.forEach((row,index)=>{
|
|
|
+ if(item.productId == row.productId){
|
|
|
+ row.quantity+=num
|
|
|
+ if(row.quantity == 0){
|
|
|
+ this.carList.splice(index,1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ let obj ={
|
|
|
+ "imageUrl": item.imageUrl,
|
|
|
+ "nameCn": item.nameCn,
|
|
|
+ "productId": item.productId,
|
|
|
+ "quantity": 1,
|
|
|
+ "sellPrice": item.priceHead,
|
|
|
+ "orgPrice": item.price,
|
|
|
+ }
|
|
|
+ this.carList.push(obj)
|
|
|
+ }
|
|
|
+ // }else if(this.ot == 'NXDC'){//奈雪的茶 购物车内没有的商品不会从这里添加 所以只处理有的情况
|
|
|
+ }else{
|
|
|
+ if(this.carList.some((i,d)=>item.productId == i.productId)){
|
|
|
+ this.carList.forEach((row,index)=>{
|
|
|
+ if(index == idx){
|
|
|
+ row.quantity+=num
|
|
|
+ if(row.quantity == 0){
|
|
|
+ this.carList.splice(index,1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 商品详情内数量操作
|
|
|
+ add1(num){
|
|
|
+ this.num+=num
|
|
|
+ },
|
|
|
+ // 计算当前选择规格价格和code
|
|
|
+ findData(){
|
|
|
+ let productId = ''
|
|
|
+ let cur = {}
|
|
|
+ let price = 0
|
|
|
+ let oldPrice = 0
|
|
|
+ let addPrice = 0
|
|
|
+ for (let key in this.chooseInfo) {
|
|
|
+ cur[key] = this.chooseInfo[key].code
|
|
|
+ addPrice += this.chooseInfo[key].price
|
|
|
+ }
|
|
|
+ this.goodsInfo.details.sku_infos.map(item=>{
|
|
|
+ let obj = {}
|
|
|
+ item.specs.map(i=>{
|
|
|
+ obj[i.code] = i.spec_code
|
|
|
+
|
|
|
+ })
|
|
|
+ if(this.areObjectsEqual(cur,obj)){
|
|
|
+ price = item.salePrice
|
|
|
+ oldPrice = item.price
|
|
|
+ return productId = item.code
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('找到对应的',productId,price);
|
|
|
+ return {
|
|
|
+ productId,
|
|
|
+ price:price+addPrice,
|
|
|
+ oldPrice:oldPrice+addPrice
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择规格后，加入购物车
|
|
|
+ handleAdd(){
|
|
|
+ this.show2 = false
|
|
|
+ // let {productId,price,addPrice} = this.findData()
|
|
|
+ let obj = {}
|
|
|
+ if(this.ot == 'NXDC'){
|
|
|
+ obj ={
|
|
|
+ "imageUrl": this.item.imageUrl,
|
|
|
+ "nameCn": this.item.nameCn,
|
|
|
+ "productId": this.item.productId,
|
|
|
+ "quantity": this.num,
|
|
|
+ "sellPrice": this.itemPrice.price,//市场价（如果存在套餐选项加价，这里的金额需要计算加价）
|
|
|
+ "orgPrice": this.itemPrice.oldPrice,
|
|
|
+ "config": JSON.parse(JSON.stringify(this.config)) , //这里只是为了直观展示套餐选项，实际下单可以传空
|
|
|
+ "selected": [
|
|
|
+ {
|
|
|
+ "round": 0, //奈雪产品round目前没有使用，传0
|
|
|
+ "products": [
|
|
|
+ {
|
|
|
+ "linkId": "",
|
|
|
+ "productId": this.productId, //套餐选项skuID，商品详情的sku列表里面已经包含所有选项组合
|
|
|
+ "quantity": 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }else if(this.ot == 'XC'){
|
|
|
+ let products = []
|
|
|
+ for (let key in this.chooseInfo) {
|
|
|
+ products.push(
|
|
|
+ { "linkId": key, "productId": this.chooseInfo[key].id, "quantity": 1 }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ obj ={
|
|
|
+ "imageUrl": this.item.imageUrl,
|
|
|
+ "nameCn": this.item.nameCn,
|
|
|
+ "productId": this.item.productId,
|
|
|
+ "quantity": this.num,
|
|
|
+ "sellPrice": this.itemPrice.price,//市场价（如果存在套餐选项加价，这里的金额需要计算加价）
|
|
|
+ "orgPrice": this.itemPrice.oldPrice,
|
|
|
+ "config": JSON.parse(JSON.stringify(this.config)) , //这里只是为了直观展示套餐选项，实际下单可以传空
|
|
|
+ "selected": [
|
|
|
+ {
|
|
|
+ "round": 0,//喜茶产品round目前没有使用，传0
|
|
|
+ "products": products
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }else if(this.ot == 'MDL'){
|
|
|
+ let products = []
|
|
|
+ for (let key in this.chooseInfo) {
|
|
|
+ products.push(
|
|
|
+ {
|
|
|
+ "linkId": key.split('-')[1],//下单参数linkId（有时会和主商品id相同）
|
|
|
+ "productId": this.chooseInfo[key].id,//套餐选项商品id
|
|
|
+ "quantity": 1
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ obj ={
|
|
|
+ "imageUrl": this.item.imageUrl,
|
|
|
+ "nameCn": this.item.nameCn,
|
|
|
+ "productId": this.item.productId,
|
|
|
+ "quantity": this.num,
|
|
|
+ "sellPrice": this.itemPrice.price,//市场价（如果存在套餐选项加价，这里的金额需要计算加价）
|
|
|
+ "orgPrice": this.itemPrice.oldPrice,
|
|
|
+ "config": JSON.parse(JSON.stringify(this.config)) , //这里只是为了直观展示套餐选项，实际下单可以传空
|
|
|
+ "selected": [
|
|
|
+ {
|
|
|
+ "round": 0,//喜茶产品round目前没有使用，传0
|
|
|
+ "products": products
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if(this.ot == 'XBK'){
|
|
|
+ let products = []
|
|
|
+ for (let key in this.chooseInfo) {
|
|
|
+ products.push(
|
|
|
+ {
|
|
|
+ "linkId": key,
|
|
|
+ "productId": this.chooseInfo[key].id,//套餐选项商品id
|
|
|
+ "quantity": 1
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ obj ={
|
|
|
+ "imageUrl": this.item.imageUrl,
|
|
|
+ "nameCn": this.item.nameCn,
|
|
|
+ "productId": this.item.productId,
|
|
|
+ "quantity": this.num,
|
|
|
+ "sellPrice": this.itemPrice.price,//市场价（如果存在套餐选项加价，这里的金额需要计算加价）
|
|
|
+ "orgPrice": this.itemPrice.oldPrice,
|
|
|
+ "config": JSON.parse(JSON.stringify(this.config)) , //这里只是为了直观展示套餐选项，实际下单可以传空
|
|
|
+ "selected": [
|
|
|
+ {
|
|
|
+ "round": 0,//喜茶产品round目前没有使用，传0
|
|
|
+ "products": products
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.carList.push(obj)
|
|
|
+ },
|
|
|
+ // 对比两个对象是否内容相同
|
|
|
+ areObjectsEqual(obj1, obj2) {
|
|
|
+ const keys1 = Object.keys(obj1);
|
|
|
+ const keys2 = Object.keys(obj2);
|
|
|
+
|
|
|
+ if (keys1.length!== keys2.length) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (const key in obj1) {
|
|
|
+ if (obj1.hasOwnProperty(key)) {
|
|
|
+ if (obj1[key]!== obj2[key]) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ handleItem(i,item){
|
|
|
+ console.log(item);
|
|
|
+ this.num = 1
|
|
|
+ this.item = i
|
|
|
+ if(!item.childClassList) return
|
|
|
+ this.show2 = true
|
|
|
+ foodGoodsDetail({productId:i.productId,shopId:this.shopId}).then(res=>{
|
|
|
+ if(res.state = 'Success'){
|
|
|
+ this.goodsInfo = res.content.data
|
|
|
+ this.chooseInfo = {}
|
|
|
+ if(this.goodsInfo.details.spu_specs){//奈雪的茶
|
|
|
+ this.goodsInfo.details.spu_specs.map(item=>{
|
|
|
+ this.$set(this.chooseInfo,item.code,item.values[0])
|
|
|
+ })
|
|
|
+ }else if(this.goodsInfo.details.specifications){//喜茶
|
|
|
+ this.goodsInfo.details.specifications.map(item=>{
|
|
|
+ this.$set(this.chooseInfo,item.id,item.values[0])
|
|
|
+ })
|
|
|
+ }else if(this.goodsInfo.details.optional&&this.goodsInfo.details.optional.length&&this.ot=='XBK'){//星巴克
|
|
|
+ this.goodsInfo.details.optional.map(item=>{
|
|
|
+ this.$set(this.chooseInfo,item.id,item.sku_infos[0])
|
|
|
+ })
|
|
|
+ }else if(this.goodsInfo.details.optional&&this.goodsInfo.details.optional.length){//麦当劳
|
|
|
+ this.goodsInfo.details.optional.map(item=>{
|
|
|
+ // id可能相同 所以加上类目的name 方便创建订单时能取到id
|
|
|
+ this.$set(this.chooseInfo,item.name+'-'+item.id,item.sku_infos[0])
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(this.chooseInfo);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCar(){
|
|
|
+ this.show = true
|
|
|
+ },
|
|
|
+ handleTab(index){
|
|
|
+ this.active = index
|
|
|
+ this.scrollTo = 'title'+index
|
|
|
+ },
|
|
|
+ chooseTag(val){
|
|
|
+ console.log('当前',val);
|
|
|
+ },
|
|
|
+ menuList(){
|
|
|
+ uni.showLoading({
|
|
|
+ title:'加载中'
|
|
|
+ })
|
|
|
+ menuList(this.shopId).then(res=>{
|
|
|
+ uni.hideLoading()
|
|
|
+ if(res.state = 'Success'){
|
|
|
+ this.list = res.content.data
|
|
|
+ this.list.map((item,index)=>{
|
|
|
+ if(this.ot != 'Kfc'&&item.childClassList){
|
|
|
+ item.menuVoList = JSON.parse(JSON.stringify(item.childClassList[0].menuVoList))
|
|
|
+ // delete item.childClassList
|
|
|
+ }
|
|
|
+ // 滚动到对应栏目
|
|
|
+ if(this.cateName&&(item.topName == this.cateName)){
|
|
|
+ this.handleTab(index)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ let query = uni.createSelectorQuery().in(this);
|
|
|
+ query.selectAll('.section-name').boundingClientRect(data=>{
|
|
|
+ console.log(data);
|
|
|
+ this.topList =data.map(item=>{
|
|
|
+ return item.top
|
|
|
+ })
|
|
|
+ }).exec();
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ shopDetail(){
|
|
|
+ shopDetail({"id": this.shopId,
|
|
|
+ "lat": "",
|
|
|
+ "lon": ""}).then(res=>{
|
|
|
+ if(res.state = 'Success'){
|
|
|
+ this.shopInfo.shopName = res.content.data.shopName
|
|
|
+ this.shopInfo.address = res.content.data.address
|
|
|
+ //是否在营业时间内
|
|
|
+ if(res.content.data.openTime&&res.content.data.closeTime&&!this.isInBusinessHours(res.content.data.openTime,res.content.data.closeTime)){
|
|
|
+ this.show1 = true
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ buy() {
|
|
|
+ let that = this
|
|
|
+ if (uni.getStorageSync('token')) {
|
|
|
+ if(JSON.parse(uni.getStorageSync('userInfo')).setMealCode != 0&&JSON.parse(uni.getStorageSync('userInfo')).setMealCode){
|
|
|
+ let info ={
|
|
|
+ shopName:this.shopInfo.shopName,
|
|
|
+ address:this.shopInfo.address,
|
|
|
+ shopId:this.shopId,
|
|
|
+ products:this.carList,
|
|
|
+ total:this.total,
|
|
|
+ openTime:this.shopInfo.openTime,
|
|
|
+ closeTime:this.shopInfo.closeTime,
|
|
|
+ totalNum:this.totalNum
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url:`/orderFood/pay`,
|
|
|
+ success: function(res) {
|
|
|
+ // 通过eventChannel向被打开页面传送数据
|
|
|
+ res.eventChannel.emit('pay', info)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ title:'此商品需要开通会员才能购买',
|
|
|
+ cancelText:'下次再说',
|
|
|
+ confirmText:'立即开通',
|
|
|
+ success(res) {
|
|
|
+ if(res.confirm){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/my/memberCenter/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ title:'请登录',
|
|
|
+ confirmText:'去登录',
|
|
|
+ success(res){
|
|
|
+ console.log(res);
|
|
|
+ if(res.confirm){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:`/login/login/login?redirect=/orderFood/shopDetail&id=${that.shopId}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ isInBusinessHours(openTimeStr, closeTimeStr) {
|
|
|
+ let open = openTimeStr
|
|
|
+ let close = closeTimeStr
|
|
|
+ if(open.indexOf('.') != -1){
|
|
|
+ let index = open.indexOf('.')
|
|
|
+ open = open.substr(0,index)
|
|
|
+ }
|
|
|
+ if(close.indexOf('.') != -1){
|
|
|
+ let index = close.indexOf('.')
|
|
|
+ close = close.substr(0,index)
|
|
|
+ }
|
|
|
+ const now = new Date();
|
|
|
+ const openTime = new Date(open);
|
|
|
+ const closeTime = new Date(close);
|
|
|
+
|
|
|
+ // 获取当前时间的时分秒
|
|
|
+ const nowHours = now.getHours();
|
|
|
+ const nowMinutes = now.getMinutes();
|
|
|
+ const nowSeconds = now.getSeconds();
|
|
|
+
|
|
|
+ // 获取开店时间的时分秒
|
|
|
+ const openHours = openTime.getHours();
|
|
|
+ const openMinutes = openTime.getMinutes();
|
|
|
+ const openSeconds = openTime.getSeconds();
|
|
|
+
|
|
|
+ // 获取关店时间的时分秒
|
|
|
+ const closeHours = closeTime.getHours();
|
|
|
+ const closeMinutes = closeTime.getMinutes();
|
|
|
+ const closeSeconds = closeTime.getSeconds();
|
|
|
+
|
|
|
+ // 将当前时间、开店时间和关店时间转换为秒数
|
|
|
+ const nowSecondsTotal = nowHours * 3600 + nowMinutes * 60 + nowSeconds;
|
|
|
+ const openSecondsTotal = openHours * 3600 + openMinutes * 60 + openSeconds;
|
|
|
+ const closeSecondsTotal = closeHours * 3600 + closeMinutes * 60 + closeSeconds;
|
|
|
+
|
|
|
+ console.log(openSecondsTotal,closeSecondsTotal,nowSecondsTotal);
|
|
|
+ if ( openSecondsTotal <nowSecondsTotal && nowSecondsTotal<closeSecondsTotal ) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ console.log(this.isInBusinessHours("2019-08-24T09:15:22.123Z","2019-08-24T14:15:22.123"));
|
|
|
+
|
|
|
+ this.cateName = options.cateName
|
|
|
+ this.shopId = options.id || "63836999-5117-4980-8632-497f007808ef"
|
|
|
+ // this.shopId = "63836999-5117-4980-8632-497f007808ef"
|
|
|
+ this.shopDetail()
|
|
|
+ this.menuList()
|
|
|
+ },
|
|
|
+ onReady () {
|
|
|
+ // this.Observer = uni.createIntersectionObserver(this)
|
|
|
+
|
|
|
+ // this.Observer.relativeTo('.test',{bottom: 0}).observe('.title0', (res) => {
|
|
|
+ // console.log(12312);
|
|
|
+ // // this.$emit('changeTag',this.value)
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" >
|
|
|
+.orderFood{
|
|
|
+ .shop-info{
|
|
|
+ width: 100%;
|
|
|
+ height: 130rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 2rpx solid #F0F0F0;
|
|
|
+ // position: fixed;
|
|
|
+ // top: 0%;
|
|
|
+ // left: 0%;
|
|
|
+ // z-index: 9;
|
|
|
+ background: #fff;
|
|
|
+ .shop-name{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .address{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ height: calc(100vh - 130rpx);
|
|
|
+ display: flex;
|
|
|
+ overflow: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: calc(98rpx + env(safe-area-inset-bottom)) ;
|
|
|
+ .left{
|
|
|
+ flex: 0 0 176rpx;
|
|
|
+ background: #F7F7F7;
|
|
|
+ .item{
|
|
|
+ text-align: center;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ .icon{
|
|
|
+ width: 76rpx;
|
|
|
+ height: 76rpx;
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item.active{
|
|
|
+ background: #FFFFFF;
|
|
|
+ .name{
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ overflow: auto;
|
|
|
+ position: relative;
|
|
|
+ .test{
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
+ background: red;
|
|
|
+ position: fixed;
|
|
|
+ }
|
|
|
+ .section{
|
|
|
+ .section-name{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ margin-top: 28rpx;
|
|
|
+ .img{
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 26rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ .title{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .price-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .price{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ color: #FF4D3A;
|
|
|
+ .unit{
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .old-price{
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-box1{
|
|
|
+ position: inherit!important;
|
|
|
+ padding-bottom: 0!important;
|
|
|
+ }
|
|
|
+ .total-box{
|
|
|
+ position: fixed;
|
|
|
+ left: 0%;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10rpx 24rpx env(safe-area-inset-bottom);
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-top: 1rpx solid #EEEEEE;
|
|
|
+ .price-box{
|
|
|
+ display: flex;
|
|
|
+ .car-box{
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .icon{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ position: absolute;
|
|
|
+ top: -18rpx;
|
|
|
+ right: -18rpx;
|
|
|
+ min-width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 18rpx;
|
|
|
+ background: #222222;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ color: #FF4D3A;
|
|
|
+ .unit{
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buy{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: #EE4320;
|
|
|
+ border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ .buy::after{
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ .buy.disabled{
|
|
|
+ background: #F6F6F6;
|
|
|
+ color: #AAAAAA;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popup-title-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24rpx;
|
|
|
+ .title{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .clear{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .u-empty{
|
|
|
+ padding: 30rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .car-content{
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ max-height: 700rpx;
|
|
|
+ overflow: auto;
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ margin-top: 28rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .img{
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 26rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .type{
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .price-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .price{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ color: #FF4D3A;
|
|
|
+ .unit{
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .old-price{
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .count-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .num{
|
|
|
+ width: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .modal-box{
|
|
|
+ .shop-name{
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #181818;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .address{
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-goodsDetail{
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ .img{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+ .box{
|
|
|
+ max-height: 60vh;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .popup-content{
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .title{
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222222;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
+ .desc{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #222222;
|
|
|
+ margin: 24rpx 0;
|
|
|
+ }
|
|
|
+ .choose-box{
|
|
|
+ .choose-item{
|
|
|
+ .choose-title{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .item-box{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ .item{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #222222;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ border: 2rpx solid #F0F0F0;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+ .item.active{
|
|
|
+ border: 2rpx solid #EE4320;
|
|
|
+ background: #FEECE8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ border-top: 1rpx solid #EEEEEE;
|
|
|
+ .order-info{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left{
|
|
|
+ .price-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .price{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .old-price{
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .choose{
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .count-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .num{
|
|
|
+ width: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .btn1{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #EE4320;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
