zh_order_food_xcx/pages-takeout/shop.vue

<template>
  <view class="shop-index iPhone-bottom flex-direction box-border-box">

    <image v-show="!navBgType" class="bg-img" src="@/static/img/order-food/shop-top.png" mode="aspectFill"
      :class="scrollTop > newNavHeight?'z-4':'z-3'"></image>
    <image v-show="navBgType" class="bg-img-type z-4" src="@/static/img/order-food/shop-top.png" mode="aspectFill"
      :style="{height:newNavHeight+'rpx',opacity:opacity}"></image>

    <newNav :leftShow="false" :textType='false' class="z-4 mb-32" @navHeight='navHeight'>
      <view slot="textContent" class="align-items-center flex-justify-end">
        <view class="ss-box b-rad-50 mr-24 align-items-center flex-justify-center">
          <image class="shop-search" src="@/static/img/order-food/shop-search.png" mode=""></image>
        </view>
        <view class="dd-box align-items-center flex-justify-center b-rad-200 mr-24">
          <image class="shp-list-img mr-8" src="@/static/img/order-food/shp-list.png" mode=""></image>
          <view class="fs-28 fc-f">
            订单
          </view>
        </view>
      </view>
    </newNav>

    <view class="bgc-f box-border-box plr-32 mb-32 shop-info">
      <view class="shop-info-box bgc-f box-border-box p-24 z-3 b-rad-20">
        <view class="fs-40 fw-600 text-overflow-ellipsis mb-16">
          {{shopsInfo.shop_name || "山海鲜熬老灶麻辣火锅辣火锅辣火11 世家匠心传承店川"}}
        </view>
        <view class="fs-24 fw-400 fc-9 text-overflow-ellipsis-one">
          公告：{{shopsInfo.notice||"第二份半价是同时下相同商品的第二份可享受半价受"}}
        </view>
      </view>
    </view>

    <view class="b-b-eee bgc-f box-border-box p-0-32-12 align-items-center flex-justify-space z-3 shop-type-box">
      <view class="align-items-center shop-type-list">
        <view class="shop-item fs-36 mb-8 mr-64" @click="seletShopType(item)"
          :class="shopType === item.id?'fc-3 fw-600':'fc-6'" v-for="(item,i) in shopTypeList" :key="i">
          {{item.name}}
        </view>
        <view class="shop-item-bs bgc-FF3333" :style="{left:shopTypeBsLeft+'rpx'}"></view>
      </view>
      <view class="align-items-center">
        <image class="zh-icon mr-8" src="@/static/img/order-food/zh-icon.png" mode="aspectFill"></image>
        <view class="fw-600 fs-32 fc-3">
          桌号：17
        </view>
      </view>
    </view>

    <!-- <view class="bgc-f sticky-nav" :style="{ height: navBgType?`calc(100vh - ${newNavHeight}rpx)`:'auto'}"> -->
      <view class="bgc-f sticky-nav">
      <Menu style="height: 100%;" v-if="shopType === 1" :shop_id="shop_id" @setCartData="setCartData" ref="goodsMenu">
      </Menu>
      <!--      <Evaluate style="height: 100%;" :shopId='shop_id' :shopScore='shopsInfo.shop_score' v-else-if="shopType === 2">
      </Evaluate> -->
      <ShopInfo style="height: 100%;" :shopId='shop_id' v-else-if="shopType === 2"></ShopInfo>
    </view>

    <view v-if="shopType === 1" class="shop-buttom-money box-border-box" @click="openBuyCrad()">
      <view class="shop-buttom-money-1 flex-justify-space align-items-center">
        <image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill"></image>
        <view class="shop-buttom-num fs-24 fc-f text-align-center">{{cartData.total_num}}</view>
        <view class="">
          <view class="">
            <span class="fw-600 fs-24 fc-f">￥</span>
            <span class="fw-600 fs-44 fc-f">{{cartData.total_price}}</span>
          </view>
          <view class="fs-24 fc-ADADAD" v-if="delivery_money<=0">免配送</view>
          <view class="fs-24 fc-f" v-else>配送费￥{{delivery_money}}</view>
        </view>
        <view v-if="cartData.is_place_order===1" class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600"
          @click.stop="toConfirmOrder()">去结算
        </view>
        <view v-else class="err-msg fs-32 fw-600 fc-f mr-30" @click.stop="mustBut">{{cartData.err_msg}}</view>
      </view>
    </view>
    <uni-popup ref="popupBuy" type="bottom" background-color="transparent" borderRadius='20px 20rpx 0 0'>
      <view class="buy-card flex-index-css">
        <view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center b-rad-20-20-0-0">
          <view class="">
            <span class="fs-32 fc-3 mr-12">已选商品</span>
            <!-- <span class="fs-32 fc-9">(打包费<span class="fs-32 fc-FB3D03">{{cartData.pack_price}}元</span>)</span> -->
          </view>
          <view class="fs-28 fw-400 fc-9 align-items-center" @click.stop="setShopIngDel">
            <view class="">
              <uni-icons type="trash" size="18" color="#999"></uni-icons>
            </view>
            <view class="fs-28 fw-400 fc-9">清空</view>
          </view>
        </view>
        <view class="scroll-view-css box-border-box p-32">
          <view class="buy-card-item display-flex" v-for="(goods,i) in cartData.goods_list" :key="i">
            <image class="goods_img" :src="goods.goods_image" mode="scaleToFill"></image>
            <view class="flex-1">
              <view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-12">
                {{goods.goods_name}}
              </view>
              <view class="w-514 text-overflow-ellipsis-one fs-24 fw-400 mb-18"
                :class="goods.status_str?'fc-FD5C02':'fc-9'">
                {{goods.status_str?goods.status_str:goods.goods_attr}}
              </view>
              <view class="flex-justify-space">
                <view class="">
                  <span class="fs-24 fc-FB3D03 fw-400">￥</span>
                  <span class="fs-40 fc-FB3D03 fw-b">{{goods.price}}</span>
                </view>
                <view class="display-flex align-items-center">
                  <image class="wh-44" @click.stop="setShoppingSave(goods,2)" src="@/static/img/takeout/j.png" mode="">
                  </image>
                  <view class="right-only-right-2 text-align-center fs-28 fw-400">
                    {{goods.goods_number}}
                  </view>
                  <image class="wh-44" src="@/static/img/takeout/add.png" @click.stop="setShoppingSave(goods,1)"
                    mode=""></image>
                </view>
              </view>
            </view>
          </view>
          <en-blank v-if="cartData.goods_list.length<=0" message="快去选购商品吧！~"></en-blank>
        </view>
        <view class="shop-buttom-money box-border-box" @click="createOrder()">
          <view class="shop-buttom-money-1 flex-justify-space align-items-center">
            <image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill"></image>
            <view class="shop-buttom-num fs-24 fc-f text-align-center">{{cartData.total_num}}</view>
            <view class="">
              <view class="">
                <span class="fw-600 fs-24 fc-f">￥</span>
                <span class="fw-600 fs-44 fc-f">{{cartData.total_price}}</span>
              </view>
              <view class="fs-24 fc-ADADAD" v-if="delivery_money<=0">免配送</view>
              <view class="fs-24 fc-f" v-else>配送费￥{{delivery_money}}</view>
            </view>
            <view v-if="cartData.is_place_order===1" class="shop-buttom-money-2 text-align-center fs-32 fc-f fw-600"
              @click.stop="toConfirmOrder()">
              去结算</view>
            <view class="fs-32 fw-600 fc-f mr-30" v-else>{{cartData.err_msg}}</view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import Menu from './shop-mod/menu.vue';
  import Evaluate from './shop-mod/evaluate.vue';
  import ShopInfo from './shop-mod/info.vue';
  import tools from "@/service/tools";
  import EnBlank from "@/components/en-utils/en-blank/en-blank";
  import {
    receiveCoupon
  } from "@/api/coupon.js"
  import {
    shopInfo,
    shopCoupon
  } from "@/api/shop.js"
  import {
    getDeliveryMoney
  } from "@/api/common";
  import {
    getShopIngList,
    setShopIngDel,
    shoppingSave
  } from "@/api/shopping";
  export default {
    components: {
      Menu,
      Evaluate,
      ShopInfo,
      EnBlank
    },
    data() {
      return {
        domHeigjt: 0,
        shopTypeList: [{
          name: "点单",
          id: 1
        }, {
          name: "商家",
          id: 2
        }],
        shopType: 1, //组件类型
        shopTypeBsLeft: 12,
        shop_id: '',
        operate_id: '',
        shopsInfo: {},
        couponData: [], // 可领优惠卷
        goodsData: [], // 可领优惠卷
        categoryData: [], // 可领优惠卷
        delivery_money: 0, // 可领优惠卷
        cartData: {
          total_price: 0,
          total_num: 0,
          total_goods_money: 0,
          pack_price: 0,
          must_category: 0,
          is_place_order: 0,
          err_msg: 0,
          goods_list: [],
        },
        isAjax: false,
        newNavHeight: '',
        navBgType: false,
        scrollTop: 0,
        opacity: 0,
        heightOne: '',
        heightTwo: '',
        topHeight: ''
      }
    },
    onShow() {},
    onLoad(e) {},
    mounted() {},
    onReachBottom(e) {
      console.log(e,'页面触底了');
      // uni.$emit('shopBottom',true)
    },
    // 监听页面滚动
    onPageScroll(e) {
      // e.scrollTop 获取滚动条距离页面顶部的距离
      this.scrollTop = e.scrollTop
      this.opacity = (Number(this.scrollTop) - 30)
      // 可以根据滚动位置执行相应逻辑
      if (e.scrollTop > 25) {
        this.navBgType = true
      } else {
        this.navBgType = false
      }
    },
    methods: {
      getHeight() {
        const query = uni.createSelectorQuery();
        query.select('.shop-info').boundingClientRect(data => {
          this.heightOne = data.height;
          console.log(this.heightOne,'0000000000');
        }).exec();
        query.select('.shop-type-box').boundingClientRect(data => {
          this.heightTwo = data.height;
          this.topHeight =  this.heightOne + this.heightTwo + this.newNavHeight
          console.log(this.topHeight,'111111');
        }).exec();
      },
      navHeight(e) {
        this.newNavHeight = e
        console.log(e,'000000000');
      },
      mustBut() {
        // 未点必选品
        const item = {
          type: this.cartData.must_category
        }
        this.$refs.goodsMenu.selectType(item)
      },
      setShopIngDel() {
        uni.showModal({
          title: '提示',
          content: '是否清除购物车商品？',
          success: (res) => {
            console.log(res)
            if (res.confirm) {
              setShopIngDel({
                'shop_id': this.shop_id,
                'type': 1,
              }).then((res) => {
                if (res.code === 1) {
                  tools.success(res.msg)
                  this.getShopIngList()
                  this.$refs.popupBuy.close()
                } else {
                  tools.error(res.msg)
                }
              })
            }
          }
        });
      },
      setShoppingSave(item, type) {
        if (type === 1) {
          // 加
          item.goods_number = item.goods_number + 1
        } else {
          // 减
          if (item.goods_number < 0) {
            return
          }
          item.goods_number = item.goods_number - 1
        }
        if (this.isAjax) {
          return
        }
        this.isAjax = true
        shoppingSave({
          'type': 1,
          'goods_id': item.goods_id,
          'shop_id': this.shop_id,
          'category_id': item.category_id,
          'goods_spec_id': item.goods_spec_id,
          'number': item.goods_number,
        }).then(res => {
          if (res.code == 1) {
            this.isAjax = false
            this.getShopIngList()
          }
        }).catch(() => {
          this.isAjax = false
        })
      },
      getShopIngList() {
        getShopIngList({
          'shop_id': 111,
        }).then(res => {
          if (res.code === 1) {
            this.cartData = res.data
            if (this.shopType === 1) {
              setTimeout(() => {
                console.log('我的数据执行了')
                // this.$refs.goodsMenu.setShopIngList(this.cartData)
              }, 1000)

            }
          }
        })
      },
      setCartData(cartData) {
        this.cartData = cartData
        this.getDeliveryMoney()
      },
      getDeliveryMoney() {
        getDeliveryMoney({
          'school_id': this.operate_id,
          'shop_id': this.shop_id,
        }).then(res => {
          if (res.code === 1) {
            this.delivery_money = res.data.delivery_money * 1
          }
        })
      },
      receiveCode(item) {
        receiveCoupon({
          grant_id: item.grant_id,
          coupon_id: item.coupon_id
        }).then((res) => {
          if (res.code == 1) {
            tools.success(res.msg)
            this.couponData = []
            this.shopCoupon()
          } else {
            tools.error(res.msg)
          }
        })
      },
      toBack() {
        tools.leftClick()
      },
      getDomH(num) {
        this.$nextTick(() => {
          let info = uni.createSelectorQuery().select('#shopInfoBox');
          info.boundingClientRect((data) => {
            if (num === 1) {
              this.domHeigjt = data.height + 72
            } else {
              this.domHeigjt = data.height + 72 + 48
            }
          }).exec()
        })
        // setTimeout(() => {

        // }, 500)
      },

      scrolltolower() {
        console.log('触底');
      },
      seletShopType(item) {
        if (this.shopType != item.id) {
          this.shopType = item.id;
          if (this.shopType == 1) {
            this.shopTypeBsLeft = 12
          } else if (this.shopType == 2) {
            this.shopTypeBsLeft = 166
          } else {
            this.shopTypeBsLeft = 160 * 2
          }
        }
      },
      openBuyCrad() {
        this.$refs.popupBuy.open()
      },
      createOrder() {
        this.$refs.popupBuy.close()
      },
      openCoupon() {
        this.$refs.popupCoupon.open()
      },
      closeCoupon() {
        this.$refs.popupCoupon.close()
      },
      toConfirmOrder() {
        uni.navigateTo({
          url: '/pages-takeout/goods-order?shop_id=' + this.shop_id
        })
      },
      shopInfo() {
        const operate_id = uni.getStorageSync('operate_id')
        shopInfo({
          operate_id: operate_id,
          shop_id: this.shop_id
        }).then((res) => {
          if (res.code == 1) {
            this.shopsInfo = res.data
          } else {
            tools.error(res.msg)
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 1500)
          }
        })
      },
      shopCoupon() {
        shopCoupon({
          operate_id: this.operate_id,
          shop_id: this.shop_id
        }).then((res) => {
          if (res.code == 1) {
            if (res.data.length > 0) {
              this.couponData = res.data
              this.getDomH(2)
            } else {
              this.getDomH(1)
              // this.domHeigjt = 156
              // console.log(this.domHeigjt, '1111111111111111111');
            }
          }
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .sticky-nav {
    height: 80vh;
    position: sticky;
    // height: calc(100vh - this.topHeight);
    // height: auto;
    top: 180rpx;
    z-index: 5;
  }

  .zh-icon {
    width: 32rpx;
    height: 32rpx;
  }

  .shp-list-img {
    width: 40rpx;
    height: 40rpx;
  }

  .dd-box {
    width: 144rpx;
    padding: 12rpx 0;
    background: rgba(0, 0, 0, 0.14);
  }

  .ss-box {
    width: 64rpx;
    height: 64rpx;
    background: rgba(0, 0, 0, 0.14);
  }

  .shop-search {
    width: 40rpx;
    height: 40rpx;
  }

  .wh-44 {
    width: 44rpx;
    height: 44rpx;
  }

  .blank-text {
    line-height: 32vh;
  }

  .box-title {
    position: relative;
  }

  .box-close {
    position: absolute;
    right: 22rpx;
  }

  .pop-coupon {
    width: 100%;
    height: 42vh;
    background-color: #F5F4F9;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    padding-top: 32rpx !important;
    display: flex;
    flex-direction: column;
  }

  .item-right {
    padding: 24rpx;
    box-sizing: border-box;
    border-radius: 20rpx 0 0 20rpx;
    position: relative;
  }

  .item-hr {
    width: 0px;
    height: auto;
    border-right: 1rpx dashed #FB7850;
  }

  .item-hr-two {
    width: 0px;
    height: auto;
    border-right: 1rpx dashed #999;
  }

  .item-left {
    width: 220rpx;
    height: auto;
    padding: 20rpx 24rpx;
    box-sizing: border-box;
    position: relative;
    border-radius: 0 20rpx 20rpx 0;
  }

  .but-box {
    width: 152rpx;
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
    border-radius: 200rpx;
  }

  .ball {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    position: absolute;
    top: -12rpx;
    left: -12rpx;
    background: #F5F5F5;
    z-index: 2;
  }

  .ball-two {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    position: absolute;
    background: #F5F5F5;
    z-index: 10;
    bottom: -12rpx;
    left: -12rpx;
  }

  .shop-index {
    width: 100%;
    min-height: 100vh;
    // height: 100vh;
    position: relative;
  }

  .right-only-right-red {
    width: 44rpx;
    height: 44rpx;
    line-height: 40rpx;
    border-radius: 12rpx;
    border: 1rpx solid #41ABF5;
    color: #41ABF5;
  }

  .right-only-right-add {
    width: 44rpx;
    height: 44rpx;
    line-height: 40rpx;
    background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
    border-radius: 12rpx;
  }

  .right-only-right-2 {
    min-width: 50rpx;
  }

  .w-514 {
    width: 514rpx;
  }

  .bg-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 300rpx;
    transition: linear .3s all;
    // height: 300rpx;
  }

  .bg-img-type {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    // opacity: 100;
    transition: linear .3s all;
  }

  .mb-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300rpx;
    z-index: -1;
  }


  .nav-img {
    width: 56rpx;
    height: 56rpx;
  }

  .shop-buttom-money {
    width: 100%;
    height: 140rpx;
    background: rgba(255, 255, 255, 0.8);
    padding: 20rpx 24rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 5;
  }

  .shop-buttom-num {
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    background: #FB3D03;
    border-radius: 50%;
    position: absolute;
    top: 36rpx;
    left: 82rpx;
  }

  .shop-buttom-money-2 {
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: #41ABF5;
    border-radius: 0rpx 200rpx 200rpx 0rpx;
  }

  .info-box-top {}

  .box-top-right {
    width: 100rpx;
    height: 100rpx;
    border-radius: 12rpx;
  }

  .box-top-left {}

  .top-left-1 {
    width: 480rpx;
    margin-bottom: 8rpx;
  }

  .img-x {
    width: 24rpx;
    height: 24rpx;
  }

  .buy-card {
    height: 828rpx;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .buy-card-top {
    width: 100%;
    height: 92rpx;
    background: #FCF5DB;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .buy-card-item {
    width: 100%;
    height: 176rpx;
    margin-bottom: 32rpx;
  }

  .goods_img {
    width: 152rpx;
    height: 152rpx;
    border-radius: 12rpx;
    margin-right: 20rpx;
  }

  .shop-buttom-money-1 {
    width: 100%;
    height: 100%;
    background: #333333;
    border-radius: 200rpx;
    box-sizing: border-box;
    padding-left: 136rpx;
    // padding-right: 32rpx;
    position: relative;

    image {
      position: absolute;
      bottom: 0;
      left: 8rpx;
      width: 128rpx;
      height: 128rpx;
    }
  }

  .head-box {
    width: 100%;
    position: relative;
  }

  .shop-info-box {
    box-shadow: 0rpx 8rpx 56rpx 0rpx rgba(154, 152, 152, 0.34);
  }

  .info-box-quan-list {
    width: 164rpx;
    height: 48rpx;
    margin: 0 8rpx 8rpx 0;
    position: relative;

    image {
      width: 164rpx;
      height: 48rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }

  .quan-list-1 {
    position: absolute;
    top: 3rpx;
    left: 8rpx;
    z-index: 2;
  }

  .quan-list-2 {
    position: absolute;
    top: 8rpx;
    right: 22rpx;
    z-index: 2;
  }

  .shop-type-list {
    // height: 88rpx;
    position: relative;
  }

  .shop-item {
    position: relative;
  }

  .pj-num {
    position: absolute;
    right: -80rpx;
    top: 0;
    text-align: left;
    width: 80rpx;
  }

  .shop-item-bs {
    position: absolute;
    bottom: 0;
    width: 40rpx;
    height: 6rpx;
    border-radius: 20rpx;
    transition: left 0.5s;
  }
</style>