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

<template>
  <view class="container">
    <page-navbar bgColor="#fff" title="商家详情"></page-navbar>
    <!-- 轮播图 -->
    <view class="carousel-map">
      <u-swiper
        :list="swiperList"
        previousMargin="30"
        nextMargin="30"
        circular
        bgColor="#000"
        height="430"
      />
      <!-- <image class='top-img' src='@/static/icon_test.jpg'></image> -->
    </view>

    <!-- 商家信息 -->
    <view class="center-box">
      <view class="merchant-info">
        <view class="info-title">
          <view>{{ merchant.name }}</view>
        </view>

        <view class="info-item">
          <view class="item-left">
            <view class="left-item">
              <view class="left-name">营业时间:</view>
              <view class="left-value">{{ merchant.opening }}</view>
            </view>
            <view class="left-item">
              <view class="left-name">营业状态:</view>
              <view class="left-value">{{
                merchant.businessStatus == '1' ? '休息中' : '营业中'
              }}</view>
            </view>
          </view>
          <view class="item-right">
            <view class="info-icon">
              <view class="info-map" @click="handlerFavouriteShop">
                <view class="icon-box">
                  <u-icon :name="merchant.favorites ? 'heart-fill' : 'heart'" size="22" />
                </view>
                <view style="font-size: 20rpx; margin-top: 5rpx">收藏</view>
              </view>
              <view class="info-map" @click="handlerMakeCall">
                <view class="icon-box">
                  <u-icon name="phone" size="22"></u-icon>
                </view>
                <view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
              </view>
            </view>
          </view>
        </view>

        <view class="info-item" style="border: none">
          <view class="item-left">
            <view class="address"> {{ merchant.address }} </view>
            <view class="distance"> 距离您{{ (merchant.distance / 1000).toFixed(2) }}km </view>
          </view>
          <view class="item-right">
            <view class="info-map">
              <view class="icon-box">
                <u-icon name="map" size="22"></u-icon>
              </view>
              <view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
            </view>
          </view>
        </view>
      </view>

      <u-gap height="8" bgColor="#F9F9F9"></u-gap>

      <view class="evaluate-context">
        <view class="flex">
          <view class="flex">
            <span class="evaluate-title">优惠</span>
            <view class="text_title"> 您有{{ coupons.length }}张购物券可领取 </view>
          </view>
          <view class="flex" style="color: #ed4444" @click="openPopup">
            <span class="text_title" style="margin-right: 6rpx">去领取</span>
            <u-icon name="arrow-right" size="14" color="#ED4444" />
          </view>
        </view>
      </view>

      <u-gap height="8" bgColor="#F9F9F9"></u-gap>

      <view class="categoryList">
        <u-tabs :list="categoryList" @change="handlerChangeTab"></u-tabs>
      </view>

      <u-gap height="8" bgColor="#F9F9F9"></u-gap>

      <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> </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>
              </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>

    <!-- 底部购物车 -->
    <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 { hotMerchant } from '@/api/client/home';
import { accountTotIdGetConponList } from '@/api/client/mine.js';

// import cpuponComponents from '../components/couponComponent.vue';
import cpuponComponents from '../components/couponComponent.vue';
import settleBottomComponent from '../components/settleBottomComponent.vue';

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) {
    console.log('@@@@option', 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();
  },
  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/productDetail/index?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>
.container {
  position: relative;

  // 轮播图
  .carousel-map {
    width: 100%;
    height: 430rpx;

    // .top-img {
    //   width: 100%;
    // }
  }

  .center-box {
    width: 100%;
    position: absolute;
    border-radius: 32rpx 32rpx 0 0;
    background-color: #fff;
    padding-bottom: 200rpx;
    // 商家信息
    .merchant-info {
      padding: 32rpx 32rpx 0;

      .info-title {
        color: #0c1223;
        font-size: 34rpx;
        font-weight: bold;
        border-bottom: 2rpx solid #d8d8d8;
        padding-bottom: 32rpx;
      }

      .info-item {
        display: flex;
        justify-content: space-between;
        padding: 24rpx 0;
        border-bottom: 2rpx solid #d8d8d8;
        align-items: center;
        color: #0c1223;
        font-size: 28rpx;

        .item-left {
          .left-item {
            display: flex;
            margin-bottom: 10rpx;

            .left-name {
              margin-right: 10rpx;
            }

            .left-value {
            }
          }

          .left-item:last-child {
            margin-bottom: 0;
          }

          .address {
            color: #0c1223;
            font-weight: bold;
            margin-bottom: 10rpx;
          }

          .distance {
            color: #999999;
            font-size: 24rpx;
          }
        }

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

          .info-map {
            padding: 10rpx;
            font-size: 28rpx;
            text-align: center;

            .icon-box {
              background-color: #f5f5f5;
              border-radius: 50%;
              padding: 10rpx;
            }
          }
        }
      }
    }
  }
}

.evaluate-context {
  background-color: #fff;
  padding: 32rpx;
  .evaluate-title {
    color: #ed4444;
    font-size: 28rpx;
    font-weight: bold;
    margin-right: 16rpx;
  }
  .text_title {
    font-size: 24rpx;
  }
}

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

.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;
  padding-bottom: 10rpx;
}

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