style(client): 优化商家详情样式

src/api/client/mine.js

@@ -78,7 +78,7 @@ export function getUserAcceptCouponsList(data) {
  * 优惠券接口 - 根据商家ID查询优惠券分页
  * @returns
  */
-export function accountTotIdGetConponList(merchantId,data) {
+export function accountTotIdGetCouponList(merchantId, data) {
   return request({
     url: `/maintain/coupon/${merchantId}/paging`,
     method: 'get',
@@ -112,7 +112,7 @@ export function getProbleList(data) {
   return request({
     url: `/maintain/problem/list`,
     method: 'post',
-    data:data,
+    data: data,
     headers: {
       'content-type': 'application/json',
     },
@@ -127,14 +127,13 @@ export function getMyTeam(data) {
   return request({
     url: `/maintain/invite/team/page`,
     method: 'get',
-    data:data,
+    data: data,
     headers: {
       'content-type': 'application/x-www-form-urlencoded',
     },
   });
 }
 
-
 /**
  * 意见反馈接口 - 新增意见反馈
  * @returns
@@ -143,7 +142,7 @@ export function getFeedback(data) {
   return request({
     url: `/maintain/feedback`,
     method: 'post',
-    data:data,
+    data: data,
     headers: {
       'content-type': 'application/json',
     },
@@ -158,7 +157,7 @@ export function inviteBind(data) {
   return request({
     url: `/maintain/invite/bind`,
     method: 'post',
-    data:data,
+    data: data,
     headers: {
       'content-type': 'application/json',
     },

src/components/base-img/base-img.vue

@@ -5,7 +5,7 @@
 -->
 
 <template>
-  <view class="base-img">
+  <view class="base-img" @click="handleClick">
     <image :src="src" :mode="mode" :style="{ width, height, borderRadius }"></image>
   </view>
 </template>
@@ -35,5 +35,10 @@ export default {
       default: '',
     },
   },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    },
+  },
 };
 </script>

src/pagesHome/components/settleBottomComponent.vue → src/pagesHome/marketer/AddCart.vue

@@ -2,13 +2,13 @@
   <view class="container">
     <view class="item-box" @click="handlerOpenPop">
       <view class="item-left">
-        <image class="img" src="@/static/images/shopCarts.png"></image>
+        <image class="img" src="/static/pagesHome/shopCarts.png"></image>
         <view class="edge-box">
           <u-badge class="edge" type="warning" max="99" :value="allNumb"></u-badge>
         </view>
         <view class="left-price">
           <p class="price">
-            <span class="price-symbal">￥</span
+            <span class="price-symbol">￥</span
             ><span class="price-text1">{{ allPrice.price }}</span>
             <span class="price-text2">￥{{ allPrice.originalPrice }}</span>
           </p>
@@ -20,8 +20,6 @@
     <u-popup :show="pop_show" @close="pop_show = false" round="20" mode="bottom">
       <view class="pop" v-for="(item, index) of goodsCateList" :key="index">
         <view class="pop-box">
-          <!-- <u-swipe-action> -->
-          <!-- <u-swipe-action-item :options="options1"> -->
           <view class="pop-item">
             <view class="left">
               <view class="item-left">
@@ -41,8 +39,6 @@
               <button class="btn" @click.stop="handlerService(item)">删除</button>
             </view>
           </view>
-          <!-- </u-swipe-action-item> -->
-          <!-- </u-swipe-action> -->
         </view>
       </view>
     </u-popup>
@@ -50,14 +46,11 @@
 </template>
 
 <script>
-import { addShoppingCart, editGoodsNumb, deleteCartItem } from '@/api/client/business.js';
+import { editGoodsNumb, deleteCartItem } from '@/api/client/business.js';
 export default {
   data() {
     return {
       pop_show: false,
-      // options1: [{
-      //   text: '删除'
-      // }]
     };
   },
   props: {
@@ -193,7 +186,7 @@ export default {
           font-size: 28rpx;
           font-weight: bold;
 
-          .price-symbal {
+          .price-symbol {
             font-size: 28rpx;
           }
 
@@ -212,10 +205,10 @@ export default {
     }
 
     .item-right {
-      background-color: #ffe339;
+      background-color: #215ebe;
       width: 20%;
       border-radius: 0 40rpx 40rpx 0;
-      color: #000;
+      color: #fff;
       font-size: 30rpx;
       font-weight: bold;
       display: flex;

src/pagesHome/marketer/index copy.vue

@@ -0,0 +1,759 @@
+<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>

src/pagesHome/marketer/index.vue

@@ -1,26 +1,32 @@
 <template>
-  <view class="container">
-    <page-navbar bgColor="#fff" title="商家详情"></page-navbar>
+  <view class="marketer">
     <!-- 轮播图 -->
-    <view class="carousel-map">
+    <view class="swiper-bg">
       <u-swiper
         :list="swiperList"
-        previousMargin="30"
-        nextMargin="30"
         circular
-        bgColor="#000"
-        height="430"
+        height="458rpx"
+        indicator
+        indicatorActiveColor="#215ebe"
+        indicatorStyle="left"
+        indicatorMode="dot"
+        bgColor="#215ebe"
       />
-      <!-- <image class='top-img' src='@/static/icon_test.jpg'></image> -->
+      <view class="page-navbar">
+        <page-navbar
+          bgColor="transparent"
+          title="商家详情"
+          titleColor="#fff"
+          iconColor="#fff"
+        ></page-navbar>
+      </view>
     </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">
@@ -36,7 +42,7 @@
           </view>
           <view class="item-right">
             <view class="info-icon">
-              <view class="info-map" @click="handlerFavouriteShop">
+              <view class="info-map" @click="handlerFavoriteShop">
                 <view class="icon-box">
                   <u-icon :name="merchant.favorites ? 'heart-fill' : 'heart'" size="22" />
                 </view>
@@ -51,7 +57,6 @@
             </view>
           </view>
         </view>
-
         <view class="info-item" style="border: none">
           <view class="item-left">
             <view class="address"> {{ merchant.address }} </view>
@@ -68,135 +73,76 @@
         </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>
+        <u-gap height="8" bgColor="#F9F9F9"></u-gap>
+        <view class="merchant-coupon fl-flex-item">
+          <view class="fl-flex" style="color: #ed4444">
+            <view class="f-s-28 u-m-r-16">优惠</view>
+            <view class="f-s-24 text-999"> 您有{{ 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 class="fl-flex" @click="openPopup">
+            <view class="f-s-24 u-m-r-6">去领取</view>
+            <u-icon name="arrow-right" size="13" color="#ED4444" />
           </view>
         </view>
+        <u-gap height="8" bgColor="#F9F9F9"> </u-gap>
       </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>
+        <u-tabs :list="categoryList" @change="handlerChangeTab"></u-tabs>
+        <view class="fl-flex u-m-t-20 service-list" :key="index" v-for="(item, index) of goods">
+          <base-img
+            :src="!Boolean(item.logo) ? '/static/img.jpg' : item.logo"
+            width="192rpx"
+            height="192rpx"
+            borderRadius="16rpx"
+            @click="handlerSkipGoodsDetail(item, index)"
+          ></base-img>
+          <view class="u-m-l-16" style="flex: 1">
+            <view class="f-s-30 text-333 text-bold u-m-b-8">{{ item.name }}</view>
+            <view class="fl-flex u-m-b-20" v-if="item.score">
+              <u-rate count="5" v-model="item.score" readonly :size="18" />
+              <text class="text-999 f-s-24 u-m-l-4">({{ item.score }})</text>
             </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 class="f-s-24 u-m-b-20" style="color: #ffa033" v-else>暂无评分</view>
+            <view class="fl-flex text-bold f-s-32" style="color: #ff412e">
+              <view class="u-m-r-8">优惠价</view>
+              <view>￥{{ item.specialPrice.toFixed(2) }}</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 class="fl-flex-item u-m-t-8">
+              <view class="fl-flex f-s-26 text-999">
+                <view class="u-m-r-8">优惠价</view>
+                <view style="text-decoration: line-through">
+                  ￥{{ item.originalPrice.toFixed(2) }}
                 </view>
               </view>
-              <view class="btn-box">
-                <button class="btn" @click.stop="handlerService(item, index)">预约</button>
+              <view class="fl-flex">
+                <u--image
+                  src="/static/pagesHome/cart.png"
+                  width="48rpx"
+                  height="48rpx"
+                  @click.stop="handlerAddCart(item)"
+                ></u--image>
+                <view class="purchase">购买</view>
               </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
+      <AddCart
         :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>
+      <CouponStore @close="closeCoupon" :coupons="coupons"></CouponStore>
     </u-popup>
   </view>
 </template>
@@ -204,7 +150,6 @@
 <script>
 import {
   getSellsDetail,
-  addReservation,
   addShoppingCart,
   getCartList,
   addFavorite,
@@ -212,16 +157,15 @@ import {
   changeGoodsType,
 } from '@/api/client/business.js';
 import { hotMerchant } from '@/api/client/home';
-import { accountTotIdGetConponList } from '@/api/client/mine.js';
+import { accountTotIdGetCouponList } from '@/api/client/mine.js';
 
-// import cpuponComponents from '../components/couponComponent.vue';
-import cpuponComponents from '../components/couponComponent.vue';
-import settleBottomComponent from '../components/settleBottomComponent.vue';
+import CouponStore from './CouponStore.vue';
+import AddCart from './AddCart.vue';
 
 export default {
   components: {
-    cpuponComponents,
-    settleBottomComponent,
+    CouponStore,
+    AddCart,
   },
   data() {
     return {
@@ -237,14 +181,12 @@ export default {
       ], // 分类列表
       goodsCateList: [],
       queryParams: {
-        //请求参数
         id: null, //商家ID
         region: null, //地区编码
         longitude: null, //经度
         latitude: null, //纬度
       },
       time_show: false,
-      reserve_show: false,
       addParams: {
         merchantId: '',
         mobile: '',
@@ -257,7 +199,6 @@ export default {
     };
   },
   onLoad(option) {
-    console.log('@@@@option', option);
     this.ids = option.id;
     this.queryParams.id = option.id;
   },
@@ -269,21 +210,11 @@ export default {
     this.handlerInitList();
   },
   onShow() {
-    this.handletInitShopCarList();
-  },
-  watch: {
-    reserve_show(newValue) {
-      if (!newValue) {
-        this.addParams.mobile = '';
-        this.addParams.appointTime = '';
-        this.template_time = '';
-      }
-    },
+    this.handleInitShopCarList();
   },
-
   methods: {
     // 初始化购物车列表
-    handletInitShopCarList() {
+    handleInitShopCarList() {
       this.swiperList = [];
       getCartList(this.ids).then(res => {
         let { merchantDTO, cartItems } = res.data;
@@ -297,7 +228,7 @@ export default {
           this.goodsCateList = cartItems;
         }
       });
-      accountTotIdGetConponList(this.ids, {
+      accountTotIdGetCouponList(this.ids, {
         paging: '1,10',
       }).then(res => {
         this.coupons = res.data.records;
@@ -339,54 +270,9 @@ export default {
         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() {
+    handlerFavoriteShop() {
       if (this.merchant.favorites) {
         cancelFavorite(this.ids).then(res => {
           if (res.code === 'OK') {
@@ -434,7 +320,7 @@ export default {
       };
       addShoppingCart(params).then(res => {
         if (res.code === 'OK') {
-          this.handletInitShopCarList();
+          this.handleInitShopCarList();
         } else {
           uni.showToast({
             title: res.msg,
@@ -444,22 +330,9 @@ export default {
         }
       });
     },
-    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();
+      this.handleInitShopCarList();
     },
     // 切换tab
     handlerChangeTab(e) {
@@ -485,22 +358,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-  position: relative;
-
-  // 轮播图
-  .carousel-map {
+.marketer {
+  .bottom-box {
     width: 100%;
-    height: 430rpx;
+    position: fixed;
+    bottom: 5%;
+  }
 
-    // .top-img {
-    //   width: 100%;
-    // }
+  .swiper-bg {
+    position: relative;
+    .page-navbar {
+      position: absolute;
+    }
   }
 
   .center-box {
     width: 100%;
-    position: absolute;
     border-radius: 32rpx 32rpx 0 0;
     background-color: #fff;
     padding-bottom: 200rpx;
@@ -533,9 +406,6 @@ export default {
             .left-name {
               margin-right: 10rpx;
             }
-
-            .left-value {
-            }
           }
 
           .left-item:last-child {
@@ -576,184 +446,30 @@ export default {
     }
   }
 }
-
-.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;
-      }
-    }
-  }
+.merchant-coupon {
+  height: 100rpx;
+  line-height: 100rpx;
+  padding: 0 32rpx;
 }
 
-.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;
+.service-list {
+  padding: 0 32rpx;
+  .purchase {
+    width: 80rpx;
+    height: 48rpx;
+    line-height: 48rpx;
+    font-size: 24rpx;
     color: #fff;
-    font-size: 28rpx;
-    border-radius: 20rpx;
+    margin-left: 16rpx;
+    text-align: center;
+    background: linear-gradient(90deg, #ffa12e 0%, #ff412e 100%);
+    border-radius: 8rpx;
   }
 }
-
-.time-text {
-  color: #d4d6dc;
-}
-
-/* 分类 */
-
-.categoryList {
-  background-color: #fff;
-  padding-bottom: 10rpx;
-}
-
-.bottom-box {
-  width: 100%;
-  position: fixed;
-  bottom: 5%;
-}
 </style>

src/pagesHome/productDetail/index.vue

@@ -143,9 +143,7 @@ import {
   accountToOrderGetComment,
 } from '@/api/client/business.js';
 
-// import couponComponent from '../components/couponComponent.vue';
-import couponComponent from '../components/couponComponent.vue';
-// import evaluateComponent from '../components/evaluateComponent.vue';
+import couponComponent from '../marketer/CouponStore.vue';
 import evaluateComponent from '../components/evaluateComponent.vue';
 
 export default {
@@ -196,7 +194,7 @@ export default {
       });
 
       // 根据id获取优惠券列表
-      // accountTotIdGetConponList(this.shoopId,{ paging:'1,10' }).then(res=>{
+      // accountTotIdGetCouponList(this.shoopId,{ paging:'1,10' }).then(res=>{
       //   this.coupons = res.data.records
       // })
     },

src/pagesHome/productDetail/productDetail - 副本.vue

@@ -141,7 +141,7 @@ import {
   // getGoodsConcentList,
   accountToOrderGetComment,
 } from '@/api/client/business.js';
-import { accountTotIdGetConponList } from '@/api/client/mine.js';
+import { accountTotIdGetCouponList } from '@/api/client/mine.js';
 import couponComponent from '../components/couponComponent.vue';
 import evaluateComponent from '../components/evaluateComponent.vue';
 export default {
@@ -229,7 +229,7 @@ export default {
       });
 
       // 根据id获取优惠券列表
-      // accountTotIdGetConponList(this.shoopId,{ paging:'1,10' }).then(res=>{
+      // accountTotIdGetCouponList(this.shoopId,{ paging:'1,10' }).then(res=>{
       //   this.coupons = res.data.records
       // })
     },