xdd-uniapp-new/v4/views/shop/detail.vue

<template>
  <view class="page-v4">
    <view class="top-box flex ai-center">
      <image class="logo" :src="logo" mode="scaleToFill"></image>
      <view>
        <view class="main">{{ merchantName }}</view>
        <view class="sub">共{{ list.length }}件商品</view>
      </view>

      <image class="btn-service" :src="webUrl+'/20221008161418239500.png'" @click="goRoom"/>
    </view>

    <view class="nav-box flex jc-between ai-center">
      <text :class="{active:navIndex===index}" v-for="(item,index) in navList" :key="index"
            @click="changeNav(index)">{{ item.name }}
      </text>
    </view>

    <view class="list flex flex-wrap">
      <view class="item" v-for="item in list" :key="item">
        <view class="img-box" @click="goGoods(item.id)">
          <image class="main" :src="item.image" mode="scaleToFill"></image>
        </view>
        <view class="content" @click="goGoods(item.id)">
          <view class="base-box">
            <view class="title more-t">{{ item.storeName }}</view>
            <view class="price flex ai-center">
              <!-- <image class="label-vip" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill"></image> -->
              <text>￥{{ item.price }}</text>
            </view>
          </view>
          <view class="cart-box flex ai-center jc-between">
            <view class="flex ai-center">
              <image class="icon-fire" :src="webUrl+'/20221118092713277343.png'" mode="scaleToFill"></image>
              <text>{{ item.sales }}人已购买</text>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {
  fetchGoods
} from "@/api/shop";

export default {
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      merId: null,
      merchantName: "",
      list: [],
      orderBy: "sortBySort",
      logo: "",
      navIndex: 0,
      navList: [{
        key: "sortBySort",
        name: "综合排序"
      },
        {
          key: "sortBySales",
          name: "销量最高"
        },
        {
          key: "sortByNew",
          name: "新品上新"
        }, {
          key: "sortByPrice",
          name: "价格最高"
        }
      ]
    }
  },
  onLoad: function (option) {
    this.merId = option.id
    this.merchantName = option.name
    uni.setNavigationBarTitle({
      title: this.merchantName
    })
    this.getInfo()
  },
  methods: {
    changeNav(index) {
      if (this.navIndex === index) return;
      this.navIndex = index;
      this.orderBy = this.navList[index].key
      this.getInfo()
    },
    getInfo() {
      fetchGoods(this.merId, this.orderBy).then(({
                                                   data
                                                 }) => {
        this.list = data;
        if (this.list.length > 0) this.logo = this.list[0].merLogo;
      })
    },
    goGoods(id) {
      this.$yrouter.push("/pages/shop/GoodsCon/index?id=" + id)
    },
    goRoom(){
      uni.navigateTo({
        url: `/pkg_common/views/room?id=${this.merId}`
      })
    }
  }
}
</script>

<style lang="scss">
.top-box {
  position: relative;
  margin: 30rpx 32rpx 24rpx;

  .btn-service {
    position: absolute;
    top: 30rpx;
    right: 0;
    width: 144rpx;
    height: 44rpx;
  }

  .logo {
    width: 80rpx;
    height: 80rpx;
    margin-right: 16rpx;
    border-radius: 50%;
  }

  .main {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 48rpx;
    color: #333333;
  }

  .sub {
    margin-top: 6rpx;
    font-size: 24rpx;
    line-height: 34rpx;
    color: #9E9E9E;
  }
}

.nav-box {
  height: 60rpx;
  margin: 0 32rpx 12rpx;
  padding: 0 32rpx 0 36rpx;
  background: #fff;

  text {
    font-size: 24rpx;
    line-height: 34rpx;
    color: #9E9E9E;
  }

  .active {
    color: #FD685D;
  }
}

.list {
  margin: 0 32rpx;

  .item:nth-child(2n) {
    margin-left: 22rpx;
  }

  .item {
    width: 332rpx;
    margin-bottom: 24rpx;
    border-radius: 8rpx;
    background: #fff;

    .img-box {
      position: relative;

      .main {
        width: 332rpx;
        height: 332rpx;
        border-radius: 8rpx;
      }
    }

    .content {
      .base-box {
        height: 140rpx;
        box-sizing: border-box;
      }

      .label-vip {
        width: 40rpx;
        height: 24rpx;
        margin-right: 6rpx;
      }

      .icon-fire {
        width: 24rpx;
        height: 24rpx;
      }

      .icon-cart {
        width: 48rpx;
        height: 48rpx;
      }

      .title {
        margin: 8rpx 4rpx 0 10rpx;
        font-size: 26rpx;
        font-weight: bold;
        line-height: 36rpx;
        color: #333333;
      }

      .price {
        padding: 4rpx 10rpx 10rpx;
        font-size: 26rpx;
        font-weight: bold;
        line-height: 38rpx;
        color: #ED0F0F;
      }

      .cart-box {
        padding: 8rpx 16rpx 14rpx 18rpx;
        border-top: 1rpx solid #EFEFEF;

        text {
          margin-left: 6rpx;
          font-size: 24rpx;
          font-weight: bold;
          line-height: 34rpx;
          color: #8D8D8D;
        }
      }
    }
  }
}
</style>