fangliaoxiaochengxv/components/CommercePart.vue

<template>
  <view class="commerce-part">
    <view class="main-content">
      <view v-if="false" class="not-login-box">
        <u-empty text="暂无搜索内容哦~"></u-empty>
      </view>
      <view v-else class="activity-box">
        <view class="activity-list" v-for="(item, index) in data" :key="index" @click="toDetail(item)">
          <image :src="item.cover" mode="aspectFill"
                 style="width: 100%; height: 330rpx; border-radius: 20rpx 20rpx 0 0">
          </image>
          <view class="list-content text-overflow2">
            <view class="text-overflow-single mb5 mt10 ml10" style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 28rpx;color: #333333;line-height: 40rpx;">{{ item.goods_name }}
            </view>
            <view class="display-flex-between .mr10 ">
              <text class="fs13 fw600 list-content-text2 ml10" >￥{{ item.price_selling }}</text>
              <!--							<text class="text-through fs12 color-ca">￥{{item.price_market}}</text>-->
              <van-image
                  height="60rpx"
                  src="/static/cart-c.png"
                  width="60rpx"
              />
            </view>
          </view>
        </view>
        <view style="width: 100%">
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "CommercePart",
  props: {
    type: {
      type: String,
      default: "common",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      imageUrl: this.$C.imageUrl,
      cateList: [],
      cateCurrent: "",
      sortCurrent: "",
    };
  },
  watch: {
    type: {
      handler() {
        if (this.type == "list") {
          this.getCateList();
        }
      },
      immediate: true,
    },
  },
  mounted() {
    if (this.$refs.cateItem) {
      this.$refs.cateItem.top = "50px";
      this.$refs.sortItem.top = "50px";
    }
  },
  methods: {
    cateChange(item, key) {
      this[key] = item.id;
      this.$refs.cateItem.show = false;
      this.$refs.cateItem.setContentAnimate(0);
      this.$refs.sortItem.show = false;
      this.$refs.sortItem.setContentAnimate(0);
      this.$emit("filterChange", {
        cateids: this.cateCurrent,
        sort: this.sortCurrent,
      });
    },
    getCateList() {
      uni.showLoading({
        title: "加载中",
      });
      this.$api
          .getGoodsCate()
          .then((res) => {
            uni.hideLoading();
            if (res.code == 1) {
              this.cateList = res.data;
            }
          })
          .catch(() => {
            uni.hideLoading();
          });
    },
    toDetail(item) {
      uni.navigateTo({
        url: `../../subPages/goodsDetail/goodsDetail?code=${item.code}&type=${this.type}`
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title-box {
  padding: 30rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs-box {
  height: 90rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  ::v-deep {
    .u-dropdown__menu__item {
      justify-content: flex-start;
    }
  }
}

.sort-content {
  .sort-list {
    height: 82rpx;
    align-items: center;
    padding: 0 20rpx;
    border-top: 1rpx solid #e6e6e6;
    font-size: 28rpx;
    color: #595959;

    &-active {
      color: #7856ff;
      font-weight: bold;
    }
  }
}

.main-content {
  // height: calc(100vh - 420rpx);
  // overflow-y: auto;
  // padding: 0 20rpx;

  .activity-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .activity-list {
      width: calc(50% - 11rpx);
      background-color: #fff;
      border-radius: 20rpx;
      margin-bottom: 22rpx;
      padding-bottom: 30rpx;
      font-size: 24rpx;

      .list-title {
        font-size: 30rpx;
        padding: 0 16rpx 8rpx;
      }

      .list-content {
        color: #2c2c2c;
        padding: 10rpx16rpx0;
        // display: flex;
        .list-content-text2 {
          font-family: D-DIN, D-DIN;
          //font-weight: 400;
          font-size: 28rpx;
          color: #C29556;
          //line-height: 30rpx;
          text-transform: none;
        }
      }
    }
  }
}
</style>