chelvc-custom/src/pages/client/clientPackage/storeDetail.vue

<template>
  <view class="detail">
    <!-- 轮播图 -->
    <view class="carousel-map">
      <u-swiper
        :list="swiperList"
        previousMargin="0"
        nextMargin="100"
        circular
        :autoplay="false"
        bgColor="#ffffff"
      />
      <view class="carousel-item">
        <view class="mark">
          <view class="mark-item">{{ merchant.score }}分</view>
          <u-rate
            :count="count"
            v-model="value"
            active-color="#fff"
            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>
        <text class="info-mark">{{ merchant.sale / 10000 }}w+单</text>
      </view>
      <view class="info-tag">商家信息</view>
      <view class="info-item">
        <view class="info-text">
          <view>营业时间：{{ merchant.opening }}</view>
          <view>电话号码：{{ merchant.mobile }}</view>
          <view>{{ merchant.address }}</view>
          <view class="distance">{{ (merchant.distance / 1000).toFixed(2) }}km</view>
        </view>
        <view class="info-icon">
          <view class="info-map">
            <u-icon name="map" size="20"></u-icon>
            <view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
          </view>
          <view class="info-map" @click="handlerMakeCall">
            <u-icon name="phone" size="20"></u-icon>
            <view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
          </view>
        </view>
      </view>
    </view>

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

    <view>
      <view
        class="list"
        :key="index"
        v-for="(item, index) of goods"
        @click="handlerSkipGoodsDetail(item, index)"
      >
        <!-- <image class="img" :src="
		      error || !loaded
		        ? 'https://cdn.uviewui.com/uview/album/10.jpg'
		        : goods.logo
		    " mode="scaleToFill" @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"></image> -->
        <image class="img" src="@/static/logo.png"></image>
        <view class="listDetail">
          <view class="item-text">{{ item.name }}</view>
          <view class="item-flex">
            <view class="star">
              <u-rate :count="item.score" :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.originalPrice.toFixed(2) }}</span>
              </view>
              <view class="item-r">
                门市价 <span>￥{{ item.specialPrice.toFixed(2) }}</span>
              </view>
            </view>
            <view class="btn-box">
              <button class="btn btn1" @click.stop="handlerService(item, index)">预约</button>
              <button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button>
            </view>
          </view>
        </view>
      </view>

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

    <!-- 弹窗 -->
    <u-popup
      :show="reserve_show"
      @close="reserve_show = false"
      @open="open"
      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="handlerSelectTime"
            :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"
            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>
  </view>
</template>

<script>
import { getSellsDetail, addReservation } from '@/api/client/business.js';
import { getCurrentLocation } from '@/api/client/home';
export default {
  data() {
    return {
      merchant: {},
      goods: [],
      count: 5,
      value: 3,
      swiperList: [],
      categoryList: [
        { id: 1, name: '全部' },
        { id: 2, name: '养车' },
        { id: 2, name: '维修' },
        { id: 2, name: '改装' },
        { id: 2, name: '补胎' },
        { id: 2, name: '其他' },
      ],
      queryParams: {
        //请求参数
        id: null, //商家ID
        region: null, //地区编码
        longitude: null, //经度
        latitude: null, //纬度
      },
      template_value: '',
      time_show: false,
      reserve_show: false,
      value: '',
      addParams: {
        merchantId: '',
        mobile: '',
        appointTime: '',
      },
      template_time: '',
    };
  },
  onLoad(option) {
    this.queryParams.id = option.id;
    this.handlerInitLocation();
  },
  watch: {
    reserve_show(newValue) {
      if (!newValue) {
        this.addParams.mobile = '';
        this.addParams.appointTime = '';
        this.template_time = '';
      }
    },
  },
  methods: {
    // 获取当前经纬度
    handlerInitLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: res => {
          this.queryParams.longitude = res.longitude;
          this.queryParams.latitude = res.latitude;
          let point = {
            latitude: res.latitude,
            longitude: res.longitude,
          };
          getCurrentLocation(point).then(rc => {
            this.queryParams.region = rc.data.id;
            this.handlerInitList();
          });
        },
        fail: rs => {
          uni.showToast({
            title: rs,
            icon: 'none',
          });
        },
      });
    },
    // 初始化列表
    handlerInitList() {
      getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
        this.merchant = res.data.merchant;
        (this.goods = res.data.goods),
          (this.swiperList = res.data.merchant.banners.map(h => h.url));
      });
    },

    // 点击拨打电话
    handlerMakeCall() {
      uni.makePhoneCall({
        phoneNumber: this.merchant.mobile,
      });
    },

    // 点击跳转到商品详情
    handlerSkipGoodsDetail(item, index) {
      uni.navigateTo({
        url: `/pages/business/service/detail?id=${item.id}`,
      });
    },

    // 预约
    handlerService(item, index) {
      this.addParams.merchantId = item.id;
      this.reserve_show = true;
    },

    // 购买
    handlerSkipBuy(item, index) {
      uni.navigateTo({
        url: '/pages/client/clientPackage/uptickOrder',
      });
    },

    // 点击选择时间
    handlerSelectTime() {
      this.time_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 == 200) {
            this.handlerInitList();
            this.reserve_show = false;
            uni.showToast({
              title: '预约成功',
              icon: 'success',
            });
          } 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;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  min-height: 100vh;
  background-color: #efefef;
}

// 轮播图
.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;
  margin-bottom: 20rpx;

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

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

  .img {
    width: 140px;
    height: 100%;
    display: block;
    margin-right: 10rpx;
  }
  .listDetail {
    width: calc(100% - 160rpx);
  }
  .item-text {
    font-weight: bold;
    margin: 10rpx 0 10rpx;
    color: #333;
  }

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

    .star {
      display: flex;

      .line {
        margin-left: 16rpx;
        margin-top: 5rpx;
        font-size: 22rpx;
      }

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

  .list-item {
    margin-top: 40rpx;
    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 {
      display: flex;
      margin-left: 30rpx;

      .btn {
        font-size: 28rpx;
        height: 70rpx;
      }

      .btn1 {
        border-radius: 40rpx 0 0 40rpx;
        border: 2rpx solid #ec5729;
        color: #ec5729;
        background-color: #fff;
      }

      .btn2 {
        color: #fff;
        background-color: #ec5729;
        border-radius: 0 40rpx 40rpx 0;
      }
    }
  }
}

.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: #000;
      padding-left: 20rpx;
    }

    .time-box {
      margin: 10rpx 20rpx;
    }
  }

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

.time-text {
  color: #d4d6dc;
}

/* 分类 */

.categoryList {
  background-color: #fff;
}
</style>