chelvc-custom/src/pagesHome/marketer/index.vue

<template>
  <view class="detail">
    <!-- 轮播图 -->
    <view class="carousel-map">
      <u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular bgColor="#ffffff" height="150" />
      <!-- <u-swiper :list="swiperList"/> -->
      <!-- <view class="carousel-item">
        <view class="mark">
          <view class="mark-item">{{ merchant.score }}分</view>
          <u-rate count="5" v-model="merchant.score" active-color="#fff" readonly inactive-color="#fff" :size="12" />
        </view>
        <view class="good-item">近期有6266个购买者给了给好评</view>
      </view> -->
    </view>

    <!-- 商家信息 -->
    <view class="merchant-info">
      <view class="info-title">
        <view>{{ merchant.name }}</view>
      </view>
      <view class="info-tag">商家信息</view>
      <view class="info-item">
        <view class="info-text">
          <view>营业时间：{{ merchant.opening }}</view>
          <view>电话号码：{{ merchant.mobile }}</view>
          <view>营业状态：{{ merchant.businessStatus == "1" ? "休息中" : "营业中"  }}</view>
          <view>{{ merchant.address }}</view>
          <view class="distance">{{ (merchant.distance / 1000).toFixed(2) }}km</view>
        </view>
        <view class="info-icon">
          <view class="info-map" @click="handlerFavouriteShop">
            <u-icon class="user-operate-icon" :name="merchant.favorites ? 'heart-fill' : 'heart' " size="24" />
            <view style="font-size: 20rpx; margin-top: 5rpx">收藏</view>
          </view>
          <view class="info-map">
            <u-icon name="map" size="24"></u-icon>
            <view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
          </view>
          <view class="info-map" @click="handlerMakeCall">
            <u-icon name="phone" size="24"></u-icon>
            <view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
          </view>
        </view>
      </view>
    </view>
    <view class="evaluate-context">
      <view class="flex evaluate">
        <view class="flex">
          <text style="margin-right: 30rpx">优惠</text>
          <view class="text_title"> 您有{{ coupons.length }}张购物券可领取 </view>
        </view>
        <view class="flex" @click="openPopup">
          <text class="text_title" style="margin-right: 20rpx">去领取</text>
          <u-icon name="arrow-right" size="16" color="#999" />
        </view>
      </view>
    </view>

    <!-- 商家分类 -->
    <view class="categoryList">
      <u-tabs :list="categoryList" @change='handlerChangeTab'></u-tabs>
    </view>

    <view>
      <view class="list" :key="index" v-for="(item, index) of goods" @click="handlerSkipGoodsDetail(item, index)">
        <image class="img" :src="!Boolean(item.logo) ? '@/static/QR57a.jpg' : item.logo"></image>
        <view class="listDetail">
          <view class="item-text">
            <view class="item-text-left"> {{ item.name }} </view>
            <view class="item-text-right">
              <image class="img" src="@/static/icon/shopCar.png" @click.stop="handlerAddCart(item)"></image>
            </view>
          </view>
          <view class="item-flex">
            <view class="star">
              <u-rate count="5" v-model="item.score" readonly :size="14" />
              <text class="line">|</text>
              <text class="points">{{ item.score }}分</text>
            </view>
            <view>
              <!-- {{ item.score }}单 -->
            </view>
          </view>
          <view class="list-item">
            <view class="list-price">
              <view class="item-l">
                优惠价 <span>￥{{ item.specialPrice.toFixed(2) }}</span>
              </view>
              <view class="item-r">
                门市价 <span>￥{{ item.originalPrice.toFixed(2) }}</span>
              </view>
            </view>
            <view class="btn-box">
              <button class="btn" @click.stop="handlerService(item, index)">预约</button>
              <!-- <button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button> -->
            </view>
          </view>
        </view>

      </view>

      <u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </view>

    <!-- 底部购物车 -->
    <view class="bottom-box">
      <settleBottomComponent :goodsCateList.sync='goodsCateList' :ids='ids' @handlerDeleteGoods='handlerDeleteGoods' />
    </view>

    <!-- 弹窗 -->
    <u-popup :show="reserve_show" @close="reserve_show = false" round="20" mode="center">
      <view class="draw-box">
        <view class="draw-title"> 预约服务 </view>
        <view class="draw-item">
          <view class="item-text">时间</view>
          <view class="time-box" @click="time_show = true" :class="template_time == '' ? 'time-text' : ''">
            {{ template_time == '' ? '请选择时间' : template_time }}
          </view>
        </view>
        <view class="draw-item">
          <view class="item-text">联系方式</view>
          <u--input placeholder="请输入联系方式" border="surround" type="number" maxlength='11' v-model="addParams.mobile"></u--input>
        </view>
        <button class="draw-btn" @click="handlerDrawConfirmBtn">确定</button>
      </view>
    </u-popup>

    <!-- 时间 -->
    <u-datetime-picker :show="time_show" :minDate="Number(new Date())" :formatter="formatter"
      v-model="addParams.appointTime" @change="handlerTimeChange" @confirm="time_show = false"
      @cancel="time_show = false" mode="datetime">
    </u-datetime-picker>

    <u-popup :show="show" mode="bottom" :safeAreaInsetBottom="true">
      <view>
        <cpuponComponents @close="closeCoupon" :coupons="coupons"></cpuponComponents>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    getSellsDetail,
    addReservation,
    addShoppingCart,
    getCartList,
    addFavorite,
    cancelFavorite,
    changeGoodsType
  } from '@/api/client/business.js';
  import { getCurrentLocation,  hotMerchant } from '@/api/client/home';
  import { accountTotIdGetConponList  } from "@/api/client/mine.js"
  // import GainCoupon from '@/pages/client/clientPackage/serviceDetail/GainCoupon.vue';
  import cpuponComponents from "./components/couponComponent.vue"
  import settleBottomComponent from "./components/settleBottomComponent.vue"
  import {
    mapGetters
  } from 'vuex';
  export default {
    components: {
      cpuponComponents,
      settleBottomComponent
    },
    data() {
      return {
        show: false,
        merchant: {},
        goods: [],
        swiperList: [],
        categoryList: [{
          name: '全部',
          id: 0
        }], // 分类列表
        goodsCateList: [],
        queryParams: {
          //请求参数
          id: null, //商家ID
          region: null, //地区编码
          longitude: null, //经度
          latitude: null, //纬度
        },
        time_show: false,
        reserve_show: false,
        addParams: {
          merchantId: '',
          mobile: '',
          appointTime: '',
          goodsName: ''
        },
        template_time: '',
        ids: null, // 商家id
        coupons: []
      };
    },
    onLoad(option) {
      this.ids = option.id
      this.queryParams.id = option.id;
    },
    mounted() {
      let {
        latitude,
        longitude,
        region
      } = this.location
      this.queryParams.latitude = latitude
      this.queryParams.longitude = longitude
      this.queryParams.region = region
      this.handlerInitList();
    },
    onShow() {
      this.handletInitShopCarList()
    },
    computed: {
      ...mapGetters(['location'])
    },
    watch: {
      reserve_show(newValue) {
        if (!newValue) {
          this.addParams.mobile = '';
          this.addParams.appointTime = '';
          this.template_time = '';
        }
      },
    },

    methods: {
      // 初始化购物车列表
      handletInitShopCarList() {
        this.swiperList = []
        getCartList(this.ids).then(res => {
          let {
            merchantDTO,
            cartItems
          } = res.data
          // 商品轮播图
          merchantDTO.banners.map(rs => {
            this.swiperList.push(rs.url)
          })
          if (cartItems.length == 0) {
            this.goodsCateList = []
          } else {
            this.goodsCateList = cartItems
          }
        })
        accountTotIdGetConponList(this.ids, {
          paging: '1,10'
        }).then(res => {
          this.coupons = res.data.records
        })
      },
      // 初始化列表
      handlerInitList() {
        this.categoryList = [{
          name: '全部',
          id: 0
        }]
        getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
          this.merchant = res.data.merchant;
          this.goods = res.data.goods;
          res.data.categories.map(rs => {
            this.categoryList.push(rs)
          })
        });
        // 获取锚点
        hotMerchant(this.queryParams.id).then();
      },
      // 点击拨打电话
      handlerMakeCall() {
        uni.makePhoneCall({
          phoneNumber: this.merchant.mobile,
          success: res => {
            console.log("@@@res", res)
          },
          fail: err => {
            console.log("@@@err", err)
          }
        });
      },
      // 点击跳转到商品详情
      handlerSkipGoodsDetail(item, index) {
        uni.navigateTo({
          url: `/pagesHome/marketer/productDetail?id=${item.id}&shopId=${this.queryParams.id}`,
        });
      },
      // 预约
      handlerService(item, index) {
        this.addParams.merchantId = this.ids;
        this.addParams.goodsId = item.id;
        this.addParams.goodsName = item.name;
        this.reserve_show = true;
      },
      // 点击预约确定按钮
      handlerDrawConfirmBtn() {
        if (this.addParams.appointTime == '') {
          uni.showToast({
            title: '请选择时间',
            icon: 'none',
          });
          return;
        } else if (this.addParams.mobile == '') {
          uni.showToast({
            title: '请填写手机号',
            icon: 'none',
          });
          return;
        } else if (!/^1[34578]\d{9}$/.test(this.addParams.mobile)) {
          uni.showToast({
            title: '请填写正确的手机号',
            icon: 'none',
          });
          return false;
        } else {
          addReservation(this.addParams.merchantId, this.addParams).then(res => {
            if (res.code === 'OK') {
              this.handlerInitList();
              this.reserve_show = false;
              uni.showToast({
                title: '预约成功',
                icon: 'success',
              });
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
              });
              return;
            }
          });
        }
      },
      // 收藏按钮
      handlerFavouriteShop() {
        if (this.merchant.favorites) {
          cancelFavorite(this.ids).then(res => {
            if (res.code === 'OK') {
              this.handlerInitList()
              uni.showToast({
                title: '取消成功',
                icon: 'none'
              })
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
              return
            }
          })
        } else {
          addFavorite(this.ids).then(res => {
            if (res.code === 'OK') {
              this.handlerInitList()
              uni.showToast({
                title: '收藏成功',
                icon: 'none'
              })
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
              return
            }
          })
        }
      },
      // 添加购物车
      handlerAddCart(e) {
        let params = {
          merchantId: this.ids,
          goodsId: e.id,
          quantity: 1,
          price: e.specialPrice,
          goodsName: e.name,
          goodsPic: e.logo,
          originalPrice: e.originalPrice,
        }
        addShoppingCart(params).then(res => {
          if (res.code === 'OK') {
            this.handletInitShopCarList()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            return
          }
        })
      },
      formatter(type, value) {
        if (type === 'minute') {
          return `00`;
        }
        return value;
      },

      // 选择时间
      handlerTimeChange(e) {
        if (e) {
          this.addParams.appointTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
          this.template_time = this.addParams.appointTime;
        }
      },
      handlerDeleteGoods(e) {
        this.handletInitShopCarList()
      },
      // 切换tab
      handlerChangeTab(e) {
        if (e.id == 0) {
          this.handlerInitList()
        } else {
          changeGoodsType(this.ids, {
            categoryId: e.id,
            size: 20
          }).then(res => {
            this.goods = res.data;
          })
        }
      },
      openPopup() {
        this.show = true;
      },
      closeCoupon(data) {
        this.show = data;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .detail {
    min-height: calc(100vh - 200rpx);
    background-color: #efefef;
    padding-bottom: 200rpx;
  }

  // 轮播图
  .carousel-map {
    background-color: #fff;
    padding: 0 20rpx;

    .carousel-item {
      height: 90rpx;
      display: flex;
      background-color: #fff7e0;
      border-radius: 0 0 10rpx 10rpx;

      .mark {
        background-color: #ff4b04;
        color: #fff;
        padding: 20rpx;
        border-radius: 0 0 0 10rpx;
        box-sizing: border-box;

        .mark-item {
          text-align: center;
        }
      }

      .good-item {
        font-size: 24rpx;
        color: #a39c85;
        line-height: 90rpx;
        margin-left: 40rpx;
      }
    }
  }

  // 商家信息
  .merchant-info {
    padding: 20rpx;
    background-color: #fff;

    .info-title {
      display: flex;
      justify-content: center;
      font-size: 36rpx;
      font-weight: bold;
      margin: 20rpx 0;

      .info-mark {
        font-size: 12px;
        font-weight: normal;
        color: #999;
        margin: 20rpx 0 20rpx 30rpx;
      }
    }

    .info-tag {
      width: 140rpx;
      padding: 10rpx;
      text-align: center;
      border: 1px solid #5992bb;
      color: #5992bb;
      margin-bottom: 10rpx;
    }

    .info-item {
      display: flex;
      justify-content: space-between;

      .info-text {
        font-size: 28rpx;
        line-height: 58rpx;
        color: #212020;
        margin-left: 20rpx;

        .distance {
          font-size: 26rpx;
          color: #555252;
          font-weight: normal;
        }
      }

      .info-icon {
        display: flex;
        align-items: center;
      }

      .info-map {
        padding: 10rpx;
        font-size: 28rpx;
        margin-top: 120rpx;
      }
    }
  }

  .evaluate-context {
    background-color: #fff;
    margin-bottom: 20rpx;

    .evaluate {
      padding: 20rpx;
      border-bottom: 1rpx solid #f4f4f4;
    }
  }

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text_title {
    font-size: 24rpx;
    color: #999;
  }

  .list {
    height: 220rpx;
    background-color: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;
    display: flex;

    .img {
      width: 140px;
      height: 100%;
      display: block;
      margin-right: 10rpx;
      border-radius: 10rpx;
    }

    .listDetail {
      width: calc(100% - 160rpx);
    }

    .item-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      margin: 10rpx 0 10rpx;
      color: #333;
      font-size: 36rpx;

      .item-text-left {}

      .item-text-right {
        .img {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }

    .item-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      margin: 0 20rpx 10rpx 0;
      color: #0d0d0d66;

      .star {
        display: flex;
        align-items: center;

        .line {
          margin: 0 12rpx;
          margin-top: 5rpx;
          font-size: 22rpx;
        }

        .points {
          color: #ff4b04;
          font-size: 22rpx;
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }

    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .list-price {
        .item-l {
          color: #e35240;
          font-weight: bold;
          font-size: 32rpx;

          span {
            font-size: 40rpx;
          }
        }

        .item-r {
          color: #a8a8a8;
          margin-top: 10rpx;

          span {
            text-decoration: line-through;
          }
        }
      }

      .btn-box {

        .btn {
          font-size: 26rpx;
          border-radius: 40rpx;
          border: 2rpx solid #ec5729;
          color: #ec5729;
          background-color: #fff;
        }
      }
    }
  }

  .draw-box {
    width: 560rpx;
    padding: 20rpx;

    .draw-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #000;
      margin-bottom: 30rpx;
    }

    .draw-item {
      margin-bottom: 20rpx;

      .item-text {
        font-size: 28rpx;
        color: #303133;
        padding-left: 20rpx;
        margin-bottom: 8rpx;
      }

      .time-box {
        border-width: 0.5px !important;
        border-color: #dadbde !important;
        border-style: solid;
        padding: 12rpx 12rpx 18rpx 18rpx;
        border-radius: 8rpx;
      }
    }

    .draw-btn {
      width: 90%;
      background-color: #5992bb !important;
      color: #fff;
      font-size: 28rpx;
      border-radius: 20rpx;
    }
  }

  .time-text {
    color: #d4d6dc;
  }

  /* 分类 */

  .categoryList {
    background-color: #fff;
  }

  .bottom-box {
    width: 100%;
    position: fixed;
    bottom: 5%;
  }
</style>