shop-applet/pages/nongKe/supply_chain/component/shop_card.vue

<template>
  <view class="shop_card">
    <view class="pro_item" @click="goStore(store_item.mer_id)">
      <view class="merchant_msg" :style="{backgroundImage: `url(${store_item.mer_banner})`}">
        <view class="shade"></view>
        <u--image :showLoading="true" :src="store_item.mer_avatar" width="112.28rpx" height="112.28rpx" shape="circle">
        </u--image>
        <view class="merchant_r_msg">
          <view class="flex_a_c_j_sb">
            <view class="mct_msg_title flex_a_c">
              <view class="store_site flex_a_c" v-if="store_item.street_name">{{ store_item.street_name }}</view>
              <view class="name">{{ store_item.mer_name }}</view>
            </view>
            <image class="high_img" :src="youZhiImg" mode="aspectFit"></image>
          </view>
          <view class="mct_msg_detail flex_a_c">
            <view class="product_score">{{ store_item.product_score }}分</view>
            <text>月售{{ store_item.sales }}份</text>
            <view style="margin-left: 17.54rpx;">
              关注人数{{store_item.care_count<10000 ? store_item.care_count : (store_item.care_count/10000).toFixed(2)+'万'}}
            </view>
          </view>
          <!-- 地址 -->
          <view class="location flex" v-if="false">
            <text v-if="store_item.distance">{{store_item.distance}}</text>
            <view class="coupon" v-for="(coupon,index) in store_item.store_coupon.slice(0, 3)" :key="index">
              {{coupon}}
            </view>
          </view>
        </view>
      </view>
      <scroll-view scroll-x="true" class="goods_info">
        <view v-for="(itemn,indexn) in store_item.recommend" :key="indexn" class="goods_info_item"
          @click.stop="navTogoodsDetail(itemn.product_id)">
          <image class="goods_info_img" :src="itemn.image" mode="aspectFit"></image>
          <view class="goods_info_name">{{itemn.store_name}}</view>
          <view class="goods_info_price">￥{{itemn.price}}</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'ShopCard',
    props: {
      store_item: {
        type: Object
      },
      isDetail: {
        type: Number,
        default: 1
      }
    },
    data() {
      return { youZhiImg: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/z2586.png', }
    },
    mounted() {},
    methods: {
      navTogoodsDetail(id) {
        uni.navigateTo({
          url: `/pages/goods_details/index?id=${id}`
        })
      },
      goStore(id) {
        // console.log(this.isDetail);
        if (this.isDetail == 2) {
          uni.navigateTo({
            url: `/pages/store/home/index?id=${id}`
          })
        } else {
          uni.navigateTo({
            url: `/pages/nongKe/supply_chain/merchant?id=${id}`
          })
        }

      }
    }
  }
</script>

<style scoped lang="scss">
  .shop_card {}

  .pro_item {
    /* box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.25); */
    border-radius: 28.07rpx;
    margin-bottom: 17.54rpx;
    // background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/2/storeBg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #f5f5f5;

    .merchant_msg {
      display: flex;
      align-items: center;
      color: #666666;
      font-size: 24.56rpx;
      // background-color: rgba(0, 0, 0, 0.5);
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 8px;
      padding: 12.28rpx 22.81rpx;
      position: relative;

      // 遮罩层
      .shade {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
      }

      .merchant_avatar {
        width: 87.72rpx;
        height: 87.72rpx;
        border-radius: 100px;
        margin-right: 10.53rpx;
      }

      .merchant_r_msg {
        flex: 1;
        width: 100%;
        color: #000;
        margin-left: 11rpx;
        position: relative;
        z-index: 1;

        .mct_msg_title {
          font-size: 28.07rpx;
          font-weight: bold;
          overflow: hidden;

          .store_site {
            &::after {
              content: "|";
              display: inline-block;
              margin: 8.77rpx;
            }
          }

          .name {
            width: 157.89rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .high_img {
          margin-left: 24.56rpx;
          width: 36.84rpx;
          height: 43.86rpx;
        }

        .enter_shop {
          font-size: 24.56rpx;
        }

        .location {
          color: #666666;
          font-size: 24.56rpx;

          .coupon {
            margin-left: 17.54rpx;
            font-size: 24.56rpx;
            color: #20A162;
            padding: 3rpx 10rpx;
            border-radius: 4px;
            border: 1px solid #20A162;
          }
        }

        .mct_msg_detail {
          margin-top: 21.05rpx;

          .product_score {
            font-size: 24.56rpx;
            color: #FE9A10;
            font-weight: 700;
            margin-right: 33.33rpx;
          }

          .grade {
            font-size: 21.05rpx;
            color: #20A162;
            margin: 0 28.07rpx;
            text-align: center;
            padding: 5.26rpx;
            border-radius: 4px;
            border: 1px solid #20A162;
          }

          .on_sale {
            &::before {
              content: '满减';
              color: #fff;
              padding: 3.51rpx 10.53rpx;
              margin-right: 8.77rpx;
              border-radius: 7.02rpx 0px 7.02rpx 0px;
              background: linear-gradient(180deg, #66CE69 0%, #20A162 100%);
            }
          }
        }
      }
    }

    .goods_info {
      padding: 0 22.81rpx;
      width: 100%;
      white-space: nowrap;
      margin-top: 26.32rpx;
      display: flex;
      align-items: center;
      // justify-content: space-between;

      .goods_info_item {
        display: inline-block;
        margin-right: 21.05rpx;
        position: relative;

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

        .goods_info_img {
          width: 140.35rpx;
          height: 140.35rpx;
          border-radius: 8px;
        }

        .goods_info_name {
          margin: 14.04rpx 0;
          width: 140.35rpx;
          font-size: 28.07rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .goods_info_price {
          font-size: 24.56rpx;
          color: #F84221;
        }
      }
    }
  }
</style>