zh_order_food_xcx/pages-takeout/shop.vue

<template>
  <view class="shop-index iPhone-bottom flex-common-css box-border-box">
    <image class="bg-img" :src="shopsInfo.shop_logo" mode="aspectFill"></image>
    <view class="mb-box"></view>
    <view class="nav-box">
      <Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
        <template>
          <view slot="custom" class="">
            <image class="nav-img" @click="toBack()" src="@/static/img/takeout/bg-back.png" mode="scaleToFill"></image>
          </view>
        </template>
      </Nav>
    </view>
    <view class="head-box bgc-f box-border-box plr-24" :style="{height:domHeigjt + 'rpx'}">
      <view id="shopInfoBox" class="shop-info-box bgc-f box-border-box p-24">
        <view class="info-box-top flex-justify-space mb-10">
          <view class="box-top-left">
            <view class="top-left-1 fs-40 fw-600 text-overflow-ellipsis-one">{{shopsInfo.shop_name || ""}}
            </view>
            <view class="align-items-center mb-8">
              <image class="img-x mr-12" src="@/static/img/index/index-x.png" mode=""></image>
              <view class="fs-26 fw-600 fc-FF7F00 mr-12">{{shopsInfo.shop_score|| ""}}分</view>
              <view class="fc-6 fs-24 mr-12">| 预计{{shopsInfo.delivery_time||""}}分钟 |</view>
              <view class="fc-6 fs-24 mr-12">{{shopsInfo.shop_sales||""}}人购买</view>
            </view>
          </view>
          <image class="box-top-right" :src="shopsInfo.shop_logo" mode="scaleToFill"></image>
        </view>
        <view class="fs-24 fw-400 fc-9 text-overflow-ellipsis-one">
          公告：{{shopsInfo.notice||""}}
        </view>
        <view class="flex-wrap-wrap p-t-20" v-if="couponData.length>0">
          <view class="info-box-quan-list" v-for="(item,i) in couponData" :key="i" @click="openCoupon">
            <view class="" v-if="i<=2">
              <image src="@/static/img/takeout/quan-bg.png" mode=""></image>
              <view class="quan-list-1 fw-b fs-32 fc-f">
                <span class="fw-b fs-20 fc-f">￥</span>{{item.money}}
              </view>
              <view class="quan-list-2 fw-400 fs-24 fc-f">领</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="head-box-1 bgc-f box-border-box plr-24">
      <view class="align-items-center shop-type-list">
        <view class="shop-item fs-36" @click="seletShopType(item)" :class="shopType === item.id?'s-item':'n-item'"
          v-for="(item,i) in shopTypeList" :key="i">
          {{item.name}}
          <!-- <view v-if="item.id == 2" class="pj-num" :class="shopType === item.id?'s-item':'n-item'">999+</view> -->
        </view>
        <view class="shop-item-bs" :style="{left:shopTypeBsLeft+'rpx'}"></view>
      </view>
    </view>
    <view class="common-view-css bgc-f" style="overflow: hidden;">
      <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 === 3"></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">{{cartData.err_msg}}</view>
      </view>
    </view>
    <uni-popup ref="popupBuy" type="bottom" background-color="#fff">
      <view class="buy-card flex-index-css">
        <view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center">
          <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 fc-9 mb-18">{{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="setShopIngNumber(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="setShopIngNumber(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>
    <uni-popup ref="popupCoupon" type="bottom">
      <view class="pop-coupon box-border-box p-24">
        <view class="text-align-center fs-36 fw-600 box-title mb-32">
          本店优惠券
          <uni-icons @click="closeCoupon" class="box-close" type="closeempty" size="20"></uni-icons>
        </view>
        <view class="scroll-view-css">
          <view v-if="couponData<= 0" class="blank-text fs-32 fc-6 text-align-center">
            暂无优惠券
          </view>
          <!-- 					<EnBlank :customSrc='true' v-if="couponData<= 0">
						<template v-slot:blankImg>
							<image class="black-img" src="@/static/img/common/no-order.png" mode=""></image>
						</template>
					</EnBlank> -->
          <view class="item-box display-flex mb-20" v-for="(item,index) in couponData" :key="index">
            <view class="item-right flex-direction flex-justify-center flex-1 bgc-f">
              <view class="fs-28 mb-12 ticket-name text-overflow-ellipsis fc-3 fw-600">
                {{item.name}}
              </view>
              <view class="fs-24 fc-6">
                有效时间：{{item.time_type_str}}
              </view>
            </view>
            <view class="item-hr"></view>
            <view class="item-left flex-direction align-items-center flex-justify-center bgc-FCE7E2">
              <view class="align-items-center">
                <view class="fs-30 fw-600 fc-FB3D03">￥</view>
                <view class="fs-48 fw-600 fc-FB3D03">{{item.money}}</view>
              </view>
              <view class="fs-24 mb-18 fc-6">
                满{{item.full_money}}可用
              </view>
              <view class="but-box fs-28 fc-f" @click="receiveCode(item)">
                立即领取
              </view>
              <view class="ball"></view>
              <view class="ball-two"></view>
            </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,
    setShopIngNumber
  } from "@/api/shopping";
  export default {
    components: {
      Menu,
      Evaluate,
      ShopInfo,
      EnBlank
    },
    data() {
      return {
        domHeigjt: 224,
        shopTypeList: [{
          name: "点菜",
          id: 1
        }, {
          name: "评价",
          id: 2
        }, {
          name: "店铺",
          id: 3
        }, ],
        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
      }
    },
    onLoad(e) {
      if (e) {
        this.shop_id = e.shop_id
        this.operate_id = uni.getStorageSync('operate_id')
        this.shopInfo()
      }
    },
    mounted() {
      // this.getDomH();
      this.shopCoupon()
    },
    methods: {
      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)
                }
              })
            }
          }
        });
      },
      setShopIngNumber(item, type) {
        if (this.isAjax) {
          return
        }
        this.isAjax = true
        setShopIngNumber({
          'type': 1,
          'goods_id': item.goods_id,
          'shop_id': this.shop_id,
          'category_id': item.category_id,
          'goods_spec_id': item.goods_spec_id,
          'operation': type === 1 ? 1 : 2,
        }).then(res => {
          if (res.code == 1) {
            this.isAjax = false
            this.getShopIngList()
          } else {
            tools.error(res.msg)
            this.isAjax = false
            this.getShopIngList()
          }
        }).catch(() => {
          this.isAjax = false
        })
      },
      getShopIngList() {
        getShopIngList({
          'shop_id': this.shop_id,
        }).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() {
        let info = uni.createSelectorQuery().select('#shopInfoBox');
        info.boundingClientRect((data) => {
          this.domHeigjt = data.height * 2 - 34
        }).exec()
      },

      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() {},
      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.domHeigjt = 224
              this.couponData = res.data
            } else {
              this.domHeigjt = 156
              // console.log(this.domHeigjt, '1111111111111111111');
            }
          }
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .wh-44 {
    width: 44rpx;
    height: 44rpx;
  }

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

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

    .box-title {
      position: relative;

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

    .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 {
    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: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 280rpx;
      z-index: -1;
    }

    .mb-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 280rpx;
      z-index: -1;
      background: rgba(51, 51, 51, 0.50);
    }

    .nav-box {
      margin-bottom: 110rpx;

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

    .shop-buttom-money {
      width: 100%;
      height: 140rpx;
      background: rgba(255, 255, 255, 0.8);
      padding: 20rpx 24rpx;

      .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;
        }

        .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;
        }
      }
    }


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

      .shop-info-box {
        position: absolute;
        top: -50rpx;
        left: 24rpx;
        width: 702rpx;
        // min-height: 156rpx;
        border-radius: 20rpx;
        box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

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

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

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

        .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;
          }
        }
      }
    }

    .head-box-1 {
      width: 100%;
      height: 88rpx;
      border-bottom: 1rpx solid #eee;

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

        .shop-item-bs {
          position: absolute;
          bottom: 0;
          width: 40rpx;
          height: 6rpx;
          border-radius: 20rpx;
          background-color: #41ABF5;
          transition: left 0.5s;
        }

        .shop-item {
          margin-right: 90rpx;
          position: relative;

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

        .s-item {
          font-weight: 600;
          color: #333;
        }

        .n-item {
          font-weight: 400;
          color: #666;
        }
      }
    }

    .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;
        }
      }
    }

  }
</style>