share_h5/pages/shop.vue

<template>
  <view class="main">
    <navbar ref="navbars" :config="config" backColor="#666"></navbar>

    <view class="shopCard">
      <view class="shop-info">
        <image :src="shop.logo" mode=""></image>
        <view class="shopNamebox">
          <view class="phone-btn" @click="goPhone(shop.customer_service_phone)">售后电话</view>
          <view class="shopName">{{ shop.shop_name }}</view>
          <view class="shopName_rate">
            <rate :value="shop.averageCopy"></rate> {{ shop.average }}分
          </view>
        </view>
      </view>
      <template v-if="false">
        <view class="shop_item mt30" style="alignItems: flex-start;">
          <image src="/static/convenienceService/location2.png" mode=""></image>
          <!-- <view>{{ shop.map_punctuation }}{{ shop.address }}></view> -->
          <!-- <view>{{shop.province_name+shop.city_name+shop.area_name+shop.community_name+shop.address}}</view> -->
          <view>{{shop.province_name+shop.city_name+shop.area_name+shop.address}}</view>
        </view>
        <view class="shop_item" style="alignItems: flex-start;">
          <text class="iconfont2">&#xe651;</text>
          <view>营业时间：{{ shop.business_hours }}{{ shop.time_quantum }}</view>
        </view>
      </template>
      <!-- <view class="shop_item mt30" style="alignItems: flex-start;">
        <text class="iconfont3 blueicon">&#xe609;</text>
        <view @click="goPhone(shop.customer_service_phone)">售后电话：{{ $mUtil.phoneChange(shop.customer_service_phone) }}</view>
      </view> -->

      <!-- <view class="searchBox">
        <image src="/static/convenienceService/search.png" mode=""></image>
        <input @click="searchClick" v-model="value" type="text" placeholder-style="color:#B3B3B3;fontSize:28rpx"
          placeholder="可搜索本店商品" />
      </view> -->
    </view>

    <view class="limitCard" v-if="currSeckill && currSeckill.length > 0">
      <view class="limitCard_top">
        <view class="limitCard_top_title">限时秒杀</view>
        <view class="limitCard_top_lab">{{currTime}}点场 剩余</view>
        <!-- <view class="limitCard_top_time">3天 17 : 26 : 35</view> -->
        <view class="limitCard_top_time">
          <uni-countdown :backgroundColor="'none'" @timeup="overDown2" :color="'#fff'" :splitorColor="'#fff'"
            :show-day="time2[0] > 0" :day="time2[0]" :hour="time2[1]" :minute="time2[2]" :second="time2[3]">
          </uni-countdown>
        </view>
      </view>
      <swiper class="swiper" indicator-color="#EDEDED" indicator-active-color="#3775F6" circular
        :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item v-for="(item,key) in currSeckill" :key="key">
          <view class="listBox">
            <view class="listBox_item" v-for="itemSon in item"
              @click="goProductDetails('/pages/product/goods/seckillGoods?id=' + itemSon.id)" :key="item.id">
              <image v-if="itemSon && itemSon.cover" :src="itemSon.cover" mode=""></image>
              <!-- <view>¥<text>64.</text>20</view> -->
              <view class="">
                <rich-text :nodes="$mUtil.priceBigSmall(itemSon.min_price)"></rich-text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="groupCard" v-if="groupList && groupList.length > 0 && false">
      <view class="group_title">
        <view class="group_title_l">拼团购</view>
        <view class="group_title_r" @click="goProductDetails('/pages/research/nearby/timeLimit?shopid='+shopId)">
          查看更多
          <text class="iconfont2">&#xe65f;</text>
        </view>
      </view>

      <view class="goodsListBox">
        <view class="goods_item" v-for="(item, index) in groupList" :key="index"
          @click="goProductDetails('/pages/product/goods/puzzleGoods?id=' + item.id)">
          <view class="goods_item_img">
            <image :src="item.cover" mode=""></image>
          </view>
          <view class="goods_item_data">
            <view class="goods_item_data_title">{{ item.title }}</view>
            <view>
              <image class="autotrophyCls" src="/static/convenienceService/autotrophy.png" mode="">
              </image>
              <image class="originalCls" src="/static/convenienceService/original.png" mode="">
              </image>
            </view>

            <view class="goods_item_data_box">
              <view class="goods_item_data_box_l ">
                <!-- <view class="goods_item_data_box_l_price">
                  <rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
                  <view>¥ {{ item.min_sale_price }}</view>
                </view> -->
                <view class="num">
                  <view class="large">
                    <rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
                  </view>
                  <view class="small">
                    <text class="pintuanc6">¥ {{ item.min_sale_price }}</text>
                  </view>
                </view>
                <view class="goods_item_data_box_l_person">
                  {{ item.group_people_num }}人团，已拼<text>{{item.result_sale_num}}</text>件
                </view>
              </view>
              <view class="goods_item_data_box_r">去拼团</view>
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="maxTab">
      <!-- <view :class="{active:maxTabIndex==0}" @click="switchAssembly(0)">精选服务</view> -->
      <view :class="{active:maxTabIndex==1}" @click="switchAssembly(1)">精选商品</view>
    </view>
    <!-- <view class="titleBox">精选服务</view> -->
    <view class="minTab">
      <view :class="{ active: activeIndex == i }" v-for="(v,i) in choice" :key="i"
        @click="commTypeChange(i, v.value, v.id)">{{v.name}}</view>
    </view>

    <view class="goodsListA" v-if="maxTabIndex==0">
      <view class="goodsListA_item" v-for="item in commGood" :key="item.id" v-if="commGood && commGood.length > 0"
        @click="goDetails(item.id)">
        <image :src="item.cover" mode=""></image>
        <view class="goodsListA_item_title">{{ item.title }}</view>
        <view class="goodsListA_item_pirce">
          <rich-text :nodes="$mUtil.priceBigSmall(item.sale_price||item.min_sale_price)"></rich-text>
          <view>¥ {{ item.market_price||item.min_market_price }}</view>
        </view>
        <view class="goodsListA_item_num">已售{{ item.result_sale_num }}件</view>
      </view>

      <!-- <view class="lookOther">
					查看更多113个服务
					<text class="iconfont2">&#xe65f;</text>
				</view> -->
    </view>

    <!-- <view class="titleBox">精选商品</view> -->
    <!-- <view class="minTab">
				<view class="active">推荐</view>
				<view>商超</view>
				<view>茶舍</view>
				<view>美容</view>
			</view> -->
    <!-- <view class="minTab">
				<view :class="{ active: activeIndex == i }" v-for="(v,i) in choice" :key="i"
					@click="commTypeChange(i, v.value, v.id)">{{v.name}}</view>
			</view> -->

    <view class="goodsListA pb50" v-if="maxTabIndex==1">
      <view class="goodsListA_item" v-for="item in commGood" :key="item.id" v-if="commGood && commGood.length > 0"
        @click="goDetails(item.id)">
        <image :src="item.cover" mode=""></image>
        <view class="goodsListA_item_title">{{ item.title }}</view>
        <view class="goodsListA_item_pirce">
          <rich-text :nodes="$mUtil.priceBigSmall(item.sale_price||item.min_sale_price)"></rich-text>
          <view>¥ {{ item.market_price||item.min_market_price }}</view>
        </view>
        <view class="goodsListA_item_num">已售{{ item.result_sale_num }}件</view>
      </view>

      <!-- <view class="lookOther">
					查看更多113个服务
					<text class="iconfont2">&#xe65f;</text>
				</view> -->
    </view>

    <nodata v-if="commGood.length == 0" :config="{top:5,content:'暂无数据~'}"></nodata>
  </view>
</template>

<script>
  import rate from "@/components/rate.vue"
  export default {
    components: {
      rate,
    },
    data() {
      return {
        config: {
          back: false,
          title: '店铺信息',
          color: '#1a1a1a',
          backgroundColor: [1, '#fff'],
          // statusBarFontColor: 'black',
        },
        value: "",
        duration: 500,
        indicatorDots: true,
        autoplay: false,
        interval: 2000,
        shop: {}, //店铺信息
        shopId: null,
        currSeckill: [],
        currTime: null, //秒杀当前场
        time2: "",
        groupList: [], //拼团列表
        maxTabIndex: 1,
        commCate: [], //商品分类
        choiceCopy: [{
            id: 1,
            name: "推荐",
            value: "recommend",
          },
          {
            id: 2,
            name: "热销",
            value: "hot",
          },
          {
            id: 3,
            name: "新品",
            value: "new",
          },
        ],
        choice: [],
        commGood: [], //商品列表
        commParams: {
          limit: 100000,
        },
        activeIndex: 0,
      }
    },
    onLoad(options) {
      if (options.shopId) {
        this.shopId = options.shopId;
        this.getCommCate(options.shopId);
        this.getIndexList(options.shopId);
        this.seckillList(options.shopId);
        this.getgroupList(options.shopId);
        // this.getCommGood(this.shopId);
        // this.commTypeChange(0,"recommend")
      }
    },
    methods: {
      searchClick() {
        // console.log("dian");
        uni.navigateTo({
          url: "/pages/research/homepage/search",
        });
      },
      goProductDetails(url) {
        uni.navigateTo({
          url: url,
        });
      },
      /**获取店铺基本信息 */
      getIndexList(shopid) {
        this.$shopHttp.get("/yxt/shop/info/" + shopid).then((res) => {
          uni.stopPullDownRefresh();
          this.loading = false;
          if (res.data && res.code == 200) {
            this.shop = res.data;
            this.shop.averageCopy = Math.round(res.data.average)
          }
        });
      },
      /**限时秒杀 */
      seckillList(shopId) {
        this.$shopHttp
          .get(
            `/marketing/seckillActivityGoods/flash-sale?shop_id=${shopId}`, {
              limit: 10,
              page: 1
            },
            false
          )
          .then((res) => {
            if (res && res.code == 200) {
              this.currTime = res.data.start_hour;
              this.currSeckill = this.oneArrToTwoArr(res.data.list || [])
              if (res.data.finish_time) {
                this.time2 = this.$mUtil
                  .countDown(Math.floor(res.data.finish_time / 1000))
                  .split(":")
                  .map((val) => Number(val));
              }
            }
          });
      },
      /**团购 */
      getgroupList(shopId) {
        this.$shopHttp
          .get(
            `/groupbuy/activitygoods/will-you-spell?shop_id=${shopId}`, {
              limit: 10,
              page: 1
            },
            false
          )
          .then((res) => {
            if (res && res.code == 200) {
              this.groupList = res.list;
            }
          });
      },
      switchAssembly(index) {
        this.maxTabIndex = index;
        this.activeIndex = 0;
        delete this.commParams.group_id;
        this.getCommCate(this.shopId);
      },
      commTypeChange(index, type, groupId) {
        let e = {
          type: type,
          groupId: groupId
        }
        this.activeIndex = index;
        if (e.type == undefined) {
          delete this.commParams.type;
          this.commParams.group_id = e.groupId;
        } else {
          delete this.commParams.group_id;
          this.commParams.type = e.type;
        }
        this.getCommGood(this.shopId);
      },
      /**商品列表 */
      getCommGood(shopId) {
        this.$shopHttp
          .get(this.maxTabIndex == 0 ? `/service/goods/list/${shopId}` : `/goods/list/${shopId}`, this
            .commParams,
            false)
          .then((res) => {
            if (res && res.code == 200) {
              this.commGood = res.list;
            }
          });
      },
      /**商品分类 */
      getCommCate(shopId) {
        this.$shopHttp
          .get(this.maxTabIndex == 0 ? `/servicegoods/group/all/${shopId}` : `/goods_group/all/${shopId}`, {},
            false)
          .then((res) => {
            if (res && res.code == 200) {
              // this.commCate = res.list;
              this.choice = [];
              if (this.maxTabIndex == 1) {
                this.choice = JSON.parse(JSON.stringify(this.choiceCopy));
              }
              this.choice.push(...res.list);
              if (this.maxTabIndex == 0) {
                this.commParams.type = this.choice[0].id;
              } else {
                this.commParams.type = 'recommend';
              }
              this.getCommGood(this.shopId);
            }
          });
      },
      goDetails(id) {
        uni.navigateTo({
          // url: this.maxTabIndex == 0 ? '/pages/product/goods/serviceGood?id=' + id :
          //   '/pages/product/goods/goods?id=' + id,
          url: `/pages/index?pageType=1&type=${this.maxTabIndex == 0 ? 4 : 1}&id=${id}`
        });
      },
      oneArrToTwoArr(data) {
        let newData = [];
        let zyf = 4; //一维数组转二维数组长度(此处是二维数组每一个长度控制)
        for (var i = 0; i < Math.ceil(data.length / zyf); i++) {
          newData[i] = [];
          newData[i].push(data[i * zyf]);
          for (var j = 1; j < zyf; j++) {
            if (data[i * zyf + j] == undefined) {
              //超出长度控住
              return newData;
            } else {
              newData[i].push(data[i * zyf + j]);
            }
          }
        }
        return newData;
      },
      // 商家电话
      goPhone(tel) {
        uni.makePhoneCall({
          phoneNumber: tel
        });
      },
    }
  }
</script>

<style lang="scss">
  .topRight {
    padding-right: 30rpx;
    display: flex;

    image {
      width: 40rpx;
      height: 40rpx;
      margin: 0 auto;
      margin-right: 20rpx;
    }
  }

  .city-text {
    margin-left: 30rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #1a1a1a;

    image {
      width: 20rpx;
      height: 12rpx;
      margin-left: 5rpx;
      vertical-align: middle;
    }
  }

  .menuCls {
    margin-left: 10rpx;
    font-size: 44rpx;
    color: #fff;
  }

  .searchBox {
    display: flex;
    padding: 10rpx 35rpx;
    border: 1rpx solid #CCCCCC;
    border-radius: 36rpx;
    margin: 30rpx 0 0;
    display: flex;
    align-items: center;
    margin-top: 10rpx;
    background: #fff;

    image {
      width: 35rpx;
      height: 35rpx;
      margin-right: 15rpx;
      flex-shrink: 0;
    }

    input {
      text-align: left;
    }
  }

  .shopCard {
    // margin: 100rpx auto 0;
    // width: 720rpx;
    // min-height: 320rpx;
    padding: 30rpx;
    // background: url('/static/convenienceService/cardBg.png')0 0 no-repeat;
    // background-size: 720rpx 320rpx;
    box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
    background: #ffffff;
    border-radius: 20rpx;
    position: relative;

    .shop-info {
      display: flex;
      align-items: center;

      >image {
        // position: absolute;
        // top: -70rpx;
        // left: 30rpx;
        width: 120rpx;
        height: 120rpx;
        border-radius: 20rpx;
        background: #fff;
        flex-shrink: 0;
      }
    }

    .shopNamebox {
      flex: 1;
      margin-left: 20rpx;
      position: relative;

      .phone-btn {
        width: 150rpx;
        margin-left: auto;
        padding: 6rpx 10rpx;
        text-align: center;
        color: #666;
        border-radius: 8rpx;
        background-color: #fff;
        border: 1rpx solid #666;
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .shopName {
        font-size: 32rpx;
        color: #333333;
        font-weight: 700;
        // margin-top: 30rpx;
      }

      .shopName_rate {
        font-size: 28rpx;
        color: #333333;
        display: flex;
        margin-top: 15rpx;
      }
    }

    .shop_item {
      font-size: 24rpx;
      color: #333333;
      display: flex;
      align-items: center;
      margin-top: 22rpx;
      padding: 0 10rpx;

      text {
        color: #108948;
        font-size: 34rpx;
      }

      view {
        margin-left: 20rpx;
      }

      image {
        width: 34rpx;
        height: 37rpx;
        flex-shrink: 0;
      }

      .blueicon {
        color: #FA6138;
      }
    }
  }

  .limitCard {
    margin: auto;
    width: 720rpx;
    height: 410rpx;
    padding: 0 30rpx;
    background: url('/static/convenienceService/cardBg.png') 0 0 no-repeat;
    background-size: 720rpx 410rpx;

    .limitCard_top {
      display: flex;
      padding: 35rpx 30rpx 20rpx 30rpx;
      align-items: center;
      border-bottom: 1rpx solid #E6E6E6;

      .limitCard_top_title {
        font-size: 36rpx;
        color: #1A1A1A;
        font-weight: 700;
        display: flex;
        align-items: center;
        position: relative;
        padding-right: 15rpx;

        &::after {
          display: block;
          content: "";
          width: 1rpx;
          height: 33rpx;
          background: #707070;
          position: absolute;
          right: 0;
          top: 10rpx;
        }
      }

      .limitCard_top_lab {
        font-size: 24rpx;
        color: #666666;
        margin: 0 30rpx 0 15rpx;
      }

      .limitCard_top_time {
        border-radius: 17rpx;
        background: #FF0000;
        font-size: 24rpx;
        color: #fff;
        font-weight: 700;
        padding: 0 15rpx;
      }
    }

    .swiper {
      height: 280rpx;

      .listBox {
        padding: 25rpx 20rpx;
        display: flex;

        .listBox_item {
          margin-right: 20rpx;

          image {
            width: 140rpx;
            height: 140rpx;
          }

          >view {
            width: 140rpx;
            font-size: 20rpx;
            color: #333333;
            text-align: center;

            text {
              font-size: 28rpx;
              font-weight: 600;
              display: inline-block;
              margin-left: 10rpx;
            }
          }

          &:last-child {
            margin-right: 0 !important;
          }
        }
      }
    }
  }

  .groupCard {
    margin: auto;
    width: 720rpx;
    // height: 1500rpx;
    padding: 0 30rpx;
    // background: url('/static/convenienceService/cardBg.png')0 0 no-repeat;
    // background-size: 720rpx 1500rpx;
    box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
    border-radius: 16rpx;

    .group_title {
      display: flex;
      justify-content: space-between;
      padding: 35rpx 30rpx 20rpx 30rpx;
      align-items: center;
      border-bottom: 1rpx solid #E6E6E6;

      .group_title_l {
        font-size: 36rpx;
        color: #1A1A1A;
        font-weight: 700;
      }

      .group_title_r {
        font-size: 24rpx;
        color: #333333;
      }

    }

    .goodsListBox {
      .goods_item {
        &:last-child {
          border-bottom: none !important;
        }

        display: flex;
        padding: 50rpx 0 40rpx;
        border-bottom: 1rpx solid #E6E6E6;

        .goods_item_img {
          margin-right: 25rpx;

          image {
            width: 226rpx;
            height: 226rpx;
          }
        }

        .goods_item_data {
          flex: 1;

          .goods_item_data_title {
            font-size: 28rpx;
            min-height: 80rpx;
            color: #181818;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .autotrophyCls {
            width: 69rpx;
            height: 30rpx;
            margin-right: 10rpx;
            margin-top: 10rpx;
          }

          .originalCls {
            width: 116rpx;
            height: 28rpx;
            margin-top: 10rpx;
          }

          .goods_item_data_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10rpx;

            .goods_item_data_box_l {
              .goods_item_data_box_l_price {
                display: flex;
                align-items: flex-end;
                font-size: 20rpx;
                color: #00BF5A;

                text {
                  font-size: 36rpx;
                  font-weight: 500;
                  display: inline-block;
                  position: relative;
                  top: 4rpx;
                }

                >view {
                  font-size: 24rpx;
                  color: #CCCCCC;
                  margin-left: 30rpx;
                  text-decoration: line-through
                }
              }

              .goods_item_data_box_l_person {
                font-size: 24rpx;
                color: #333333;

                text {
                  color: #FF0000;
                }
              }
            }

            .goods_item_data_box_r {
              width: 138rpx;
              height: 63rpx;
              background: #FA6138;
              border-radius: 32rpx;
              font-size: 28rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
            }
          }
        }
      }
    }

  }

  .maxTab {
    display: flex;
    // justify-content: space-around;
    padding: 40rpx 40rpx 20rpx;

    >view {
      font-size: 36rpx;
      color: #1A1A1A;
      font-weight: 700;
      position: relative;

      &::after {
        display: block;
        content: "";
        width: 0;
        height: 4rpx;
        border-radius: 1rpx;
        position: absolute;
        left: 70rpx;
        bottom: -36rpx;
        transform: translateX(-50%);
        transition: all 0.3s;
      }
    }

    .active {
      // color: #00321E;
      // &::after {
      // 	width: 100%;
      // 	height: 4rpx;
      // 	border-radius: 1rpx;
      // 	background: #00321E;
      // }
    }
  }

  .titleBox {
    padding: 40rpx 30rpx 30rpx;
    font-size: 36rpx;
    color: #1A1A1A;
    font-weight: 700;
  }

  .minTab {
    padding: 30rpx 30rpx 30rpx;
    display: flex;
    overflow: auto;

    >view {
      color: #666666;
      font-weight: 28rpx;
      margin-right: 50rpx;
      padding-bottom: 15rpx;
      flex-shrink: 0;
    }

    >.active {
      font-size: 30rpx;
      color: #FA6138;
      font-weight: 700;
      position: relative;

      &::after {
        display: block;
        content: "";
        width: 100%;
        height: 4rpx;
        background: #FA6138;
        border-radius: 2rpx;
        position: absolute;
        bottom: 0%;
        left: 0;
      }
    }
  }

  .goodsListA {
    padding: 0 30rpx;
    display: flex;
    flex-wrap: wrap;

    .goodsListA_item {
      width: 336rpx;
      box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
      border-radius: 18rpx;
      margin-left: 18rpx;
      margin-bottom: 30rpx;

      &:nth-child(2n-1) {
        margin-left: 0 !important;
      }

      image {
        width: 336rpx;
        height: 336rpx;
        border-radius: 18rpx 18rpx 0 0;
      }

      >view {
        padding: 0 20rpx;
      }

      .goodsListA_item_title {
        font-size: 28rpx;
        color: #181818;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .goodsListA_item_pirce {
        display: flex;
        align-items: flex-end;
        font-size: 20rpx;
        color: #FF6600;
        font-weight: 700;

        text {
          font-size: 36rpx;
          font-weight: 500;
          display: inline-block;
          position: relative;
          top: 4rpx;
        }

        >view {
          font-size: 24rpx;
          color: #CCCCCC;
          margin-left: 30rpx;
          text-decoration: line-through;
          font-weight: normal;
        }
      }

      .goodsListA_item_num {
        font-size: 22rpx;
        color: #999999;
        margin-top: 10rpx;
        padding-bottom: 20rpx;
      }
    }
  }

  .lookOther {
    font-size: 24rpx;
    color: #333333;
    width: 288rpx;
    height: 59rpx;
    border-radius: 8rpx;
    background: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
  }

  .mt30 {
    margin-top: 30rpx !important;
  }

  .pb50 {
    padding-bottom: 50rpx;
  }


  .num {
    display: flex;
    align-items: center;
    margin-top: 46rpx;
    font-weight: Bold;
    font-size: 20rpx;
    color: red;
  }

  .small {
    color: #cccccc;
    font-size: 22rpx;
    font-weight: 500;
    text-decoration: line-through;
    margin-left: 17rpx;
  }

  .work-red {
    font-size: 36rpx;
    font-weight: Bold;
    margin-left: 5rpx;
  }
</style>