CRMEB/template/uni-app/subpackage/diyComponents/pointsMall.vue

<template>
  <view v-show="!isSortType">
    <common-wrapper :config="configData">
      <view class="pointsMall" :style="[pointsMallStyle, goodsWrapperStyle]">
        <view
          class="acea-row row-middle row-between header"
          :style="[headerStyle]"
        >
          <view
            v-if="dataConfig.titleConfig.tabVal"
            class="title"
            :style="[titleStyle]"
            >{{ dataConfig.titleTxtConfig.value }}</view
          >
          <easy-loadimage
            v-else
            mode="widthFix"
            :image-src="titleImage"
            width="176rpx"
            height="32rpx"
          ></easy-loadimage>
          <view class="more" :style="[buttonStyle]" @click="goPointsMall">
            <text>{{ $t(`更多`) }}</text>
            <text
              class="iconfont icon-ic_rightarrow"
              :style="[buttonStyle]"
            ></text>
          </view>
        </view>
        <view>
          <view
            v-if="dataConfig.goodStyleConfig.tabVal == 0"
            class="goods-wrapper0"
          >
            <scroll-view class="scroll-view" scroll-x="true">
              <view
                class="item"
                v-for="item in goodsList"
                :key="item.id"
                @click="goGoodsDetails(item.id)"
              >
                <easy-loadimage
                  mode="widthFix"
                  :image-src="item.image"
                  width="224rpx"
                  height="224rpx"
                  :borderRadius="goodsImage"
                ></easy-loadimage>
                <view
                  class="price-box acea-row row-middle"
                  :style="[priceBoxStyle]"
                >
                  <view class="point">{{ item.price }}</view>
                  <view class="">{{ $t(`积分`) }}</view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view
            v-else-if="dataConfig.goodStyleConfig.tabVal == 1"
            class="goods-wrapper"
          >
            <view class="acea-row goods-list">
              <view
                class="item"
                v-for="item in goodsList"
                :key="item.id"
                @click="goGoodsDetails(item.id)"
              >
                <easy-loadimage
                  :image-src="item.image"
                  width="100%"
                  height="212rpx"
                  :borderRadius="goodsImage"
                ></easy-loadimage>
                <view
                  class="price-box acea-row row-middle"
                  :style="[priceBoxStyle]"
                >
                  <view class="acea-row row-middle">
                    <image
                      class="image"
                      :src="`${imgHost}/statics/images/newVip3.png`"
                      mode="aspectFit"
                    ></image>
                    <text class="num" :style="[numStyle]">{{
                      item.price
                    }}</text>
                  </view>
                </view>
                <view class="title line1" :style="[goodsTitleStyle]">{{
                  item.title
                }}</view>
              </view>
            </view>
          </view>
          <view
            v-else-if="dataConfig.goodStyleConfig.tabVal == 2"
            class="goods-wrapper2"
          >
            <view class="acea-row goods-list">
              <view
                class="item"
                v-for="item in goodsList"
                :key="item.id"
                @click="goGoodsDetails(item.id)"
              >
                <easy-loadimage
                  :image-src="item.image"
                  width="100%"
                  height="324rpx"
                  :borderRadius="goodsImage"
                ></easy-loadimage>
                <view class="title line2" :style="[goodsTitleStyle]">{{
                  item.title
                }}</view>
                <view
                  class="price-box acea-row row-middle"
                  :style="[priceBoxStyle]"
                >
                  <view class="">
                    <image
                      class="image"
                      :src="`${imgHost}/statics/images/newVip3.png`"
                      mode="aspectFit"
                    ></image>
                    <text class="num point" :style="[numStyle]">{{
                      item.price
                    }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </common-wrapper>
  </view>
</template>

<script>
import commonWrapper from "./commonWrapper.vue";
import { getStoreIntegralList } from "@/api/activity.js";
import { HTTP_REQUEST_URL } from "@/config/app";
export default {
  components: { commonWrapper },
  props: {
    dataConfig: {
      type: Object,
      default: () => {},
    },
    isSortType: {
      type: String | Number,
      default: 0,
    },
  },
  data() {
    return {
      imgHost: HTTP_REQUEST_URL,
      goodsList: [],
    };
  },
  computed: {
    configData() {
      return {
        ...this.dataConfig,
        paddingConfig: this.dataConfig.paddingConfig || {
          isAll: false,
          valList: [
            {
              val: this.dataConfig.topConfig
                ? this.dataConfig.topConfig.val
                : 0,
            },
            {
              val: this.dataConfig.prConfig ? this.dataConfig.prConfig.val : 0,
            },
            {
              val: this.dataConfig.bottomConfig
                ? this.dataConfig.bottomConfig.val
                : 0,
            },
            {
              val: this.dataConfig.prConfig ? this.dataConfig.prConfig.val : 0,
            },
          ],
        },
        marginConfig: this.dataConfig.marginConfig || {
          isAll: false,
          valList: [
            {
              val: this.dataConfig.mbConfig ? this.dataConfig.mbConfig.val : 0,
            },
            {
              val: 0,
            },
            {
              val: 0,
            },
            {
              val: 0,
            },
          ],
        },
      };
    },
    headerStyle() {
      let background = `linear-gradient(90deg, ${this.dataConfig.headerBgColor.color[0].item} 0%, ${this.dataConfig.headerBgColor.color[1].item} 100%)`;
      if (this.dataConfig.styleConfig.tabVal) {
        background = `url(${this.dataConfig.imgBgConfig.url})`;
      }
      return {
        "background-image": background,
      };
    },
    goodsWrapperStyle() {
      let color = this.dataConfig.moduleColor2.color;
      if (this.dataConfig.styleConfig.tabVal) {
        color = this.dataConfig.moduleColor.color;
      }
      return {
        "background-image": `linear-gradient(270deg, ${color[0].item} 0%, ${color[1].item} 100%)`,
      };
    },
    pointsMallStyle() {
      let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
      if (this.dataConfig.fillet.type) {
        borderRadius = `${this.dataConfig.fillet.valList[0].val * 2}rpx ${
          this.dataConfig.fillet.valList[1].val * 2
        }rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${
          this.dataConfig.fillet.valList[2].val * 2
        }rpx`;
      }
      return {
        "border-radius": borderRadius,
      };
    },
    buttonStyle() {
      let color = this.dataConfig.headerBntColor2.color[0].item;
      if (this.dataConfig.styleConfig.tabVal) {
        color = this.dataConfig.headerBntColor.color[0].item;
      }
      return {
        "font-size": this.dataConfig.bntNumber.val * 2 + "rpx",
        color: color,
      };
    },
    titleImage() {
      let url = this.dataConfig.imgConfig2.url;
      if (this.dataConfig.styleConfig.tabVal) {
        url = this.dataConfig.imgConfig.url;
      }
      return url;
    },
    titleStyle() {
      let titleText = this.dataConfig.titleText;
      return {
        fontStyle: !titleText.tabVal
          ? "normal"
          : titleText.tabList[titleText.tabVal].style,
        fontWeight: !titleText.tabVal ? "bold" : "normal",
        color: this.dataConfig.titleColor.color[0].item,
        fontSize: this.dataConfig.titleNumber.val * 2 + "rpx",
      };
    },
    goodsImage() {
      let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
      if (this.dataConfig.filletImg.type) {
        borderRadius = `${this.dataConfig.filletImg.valList[0].val * 2}rpx ${
          this.dataConfig.filletImg.valList[1].val * 2
        }rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${
          this.dataConfig.filletImg.valList[2].val * 2
        }rpx`;
      }
      return borderRadius;
    },
    priceBoxStyle() {
      let styleConfig = this.dataConfig.styleConfig.tabVal;
      let goodStyleConfig = this.dataConfig.goodStyleConfig.tabVal;
      let goodsUnitPriceColor2 =
        this.dataConfig.goodsUnitPriceColor2.color[0].item;
      let goodsUnitPriceColor =
        this.dataConfig.goodsUnitPriceColor.color[0].item;
      let styleObject = {};
      if (this.dataConfig.toneConfig.tabVal) {
        if (goodStyleConfig) {
          styleObject["color"] = !styleConfig
            ? goodsUnitPriceColor2
            : goodsUnitPriceColor;
        } else {
          styleObject[
            "background"
          ] = `linear-gradient(90deg, ${this.dataConfig.priceBgColor.color[0].item} 0%, ${this.dataConfig.priceBgColor.color[1].item} 100%)`;
          styleObject["color"] = this.dataConfig.goodsPriceColor.color[0].item;
        }
      } else {
        if (goodStyleConfig && !styleConfig) {
          styleObject["color"] = "#282828";
        } else {
          styleObject["color"] = "#fff";
        }
      }
      return styleObject;
    },
    goodsTitleStyle() {
      let styleConfig = this.dataConfig.styleConfig.tabVal;
      let goodStyleConfig = this.dataConfig.goodStyleConfig.tabVal;
      let color1 = this.dataConfig.goodsNameColor.color[0].item;
      let color2 = this.dataConfig.goodsNameColor2.color[0].item;
      let color = color2;
      if (!styleConfig) {
        color = !goodStyleConfig ? color2 : color1;
      }
      return {
        color: color,
      };
    },
    // 数字样式
    numStyle() {
      let styleConfig = this.dataConfig.styleConfig.tabVal;
      let goodStyleConfig = this.dataConfig.goodStyleConfig.tabVal;
      let color1 = this.dataConfig.goodsPriceColor.color[0].item;
      let color2 = this.dataConfig.goodsPriceColor2.color[0].item;
      let styleObject = {};
      let color = color1;
      if (!styleConfig) {
        color = !goodStyleConfig ? color1 : color2;
      }
      if (this.dataConfig.toneConfig.tabVal) {
        styleObject["color"] = color;
      } else {
        if (!goodStyleConfig || styleConfig) {
          styleObject["color"] = "#fff";
        } else {
          styleObject["color"] = "var(--view-theme)";
        }
      }
      return styleObject;
    },
  },
  mounted() {
    this.getStoreIntegralList();
  },
  methods: {
    getStoreIntegralList() {
      let limit = this.$config.LIMIT;
      getStoreIntegralList({
        page: 1,
        limit:
          this.dataConfig.numberConfig.val >= limit
            ? limit
            : this.dataConfig.numberConfig.val,
      }).then((res) => {
        this.goodsList = res.data;
      });
    },
    goPointsMall() {
      uni.navigateTo({
        url: `/pages/points_mall/index`,
      });
    },
    goGoodsDetails(id) {
      uni.navigateTo({
        url: `/pages/points_mall/integral_goods_details?id=${id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pointsMall {
  background: #ffffff;
  overflow: hidden;
}

.header {
  height: 96rpx;
  padding: 0 24rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .title {
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
  }

  .more {
    font-size: 24rpx;
    color: #999999;

    .iconfont {
      font-size: 24rpx;
    }
  }
}

.goods-wrapper {
  .goods-list {
    padding: 20rpx 10rpx 12rpx;

    .item {
      flex: 0 0 33.33%;
      min-width: 0;
      padding: 0 10rpx 20rpx;
      margin: 0;
    }

    .price-box {
      width: auto;
      height: auto;
      margin: 16rpx 0 0;
      background: none;
      font-family: SemiBold;
      font-size: 24rpx;
      line-height: 40rpx;
      color: #666666;
    }

    .image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
    }

    .num {
      color: var(--view-theme);
    }

    .title {
      margin-top: 4rpx;
      font-size: 26rpx;
      line-height: 36rpx;
      color: #282828;
    }
  }
}

.goods-wrapper2 {
  padding: 0 10rpx 8rpx;

  .item {
    flex: 0 0 50%;
    min-width: 0;
    padding: 0 10rpx 20rpx;
    margin: 0;
  }

  .title {
    margin-top: 16rpx;
    font-size: 28rpx;
    line-height: 28rpx;
    color: #282828;
  }

  .price-box {
    width: auto;
    height: auto;
    margin: 16rpx 0 0;
    background: none;
    font-family: SemiBold;
    font-size: 24rpx;
    line-height: 40rpx;
    color: #666666;
  }

  .image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 4rpx;
  }

  .num {
    color: var(--view-theme);
  }

  .point {
    font-weight: 600;
    font-size: 40rpx;
  }
}

.goods-wrapper0 {
  padding: 0 0 32rpx 20rpx;
}

.scroll-view {
  box-sizing: border-box;
  white-space: nowrap;
  padding: 20rpx;
  border-radius: 16rpx 0 0 16rpx;
  background: #ffffff;

  .item {
    display: inline-block;
    width: 224rpx;
    margin: 0 20rpx 0 0;

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

  .price-box {
    display: inline-flex;
    width: auto;
    height: 36rpx;
    padding: 0 12rpx;
    border-radius: 2rpx 20rpx 20rpx 20rpx;
    margin: 16rpx 0 0;
    background: linear-gradient(
      90deg,
      var(--view-theme) 0%,
      var(--view-gradient) 100%
    );
    font-family: SemiBold;
    font-size: 22rpx;
    color: #ffffff;
  }

  .point {
    font-weight: 600;
    font-size: 26rpx;
  }
}
</style>