jufubao-mall 2.0.32 → 2.0.34

package/src/components/CusPrice/CusPrice.vue

@@ -0,0 +1,391 @@
+<template>
+  <view class="price-box" :style="[priceMLComp]">
+    <view :class="{ schedule: type === 'schedule' }">
+      <view v-for="(item, index) in uiShowPrice" :key="index">
+        <!--售价价格（普通价格）-->
+        <view class="price-group">
+          <template v-if="item.t === 'S'">
+            <view class="price-group-price">
+              <xd-unit
+                :isShowIcon="isShowIcon"
+                :range="item.a || range"
+                :colorNew="salePriceColor"
+                :iconSize="iconSize"
+                :fontSize="salePriceSizeStyle"
+                :price="item.p"
+                :isOld="false"
+              ></xd-unit>
+            </view>
+            <!--节省显示-->
+            <view class="save-price price-group-save" v-if="savePrice">
+              <text v-if="savePrice.n">{{ savePrice.n }}</text>
+              <text>¥</text>
+              <text>{{ divisionPrice(savePrice.p) }}</text>
+            </view>
+            <!--节省显示-->
+          </template>
+          <!--文本显示-->
+          <view
+            class="save-price price-group-text"
+            :class="{noPrice: !isPrice, hasPrice:isPrice}"
+            v-if="['S','CUS'].includes(item.t) && textInfo && textInfo.length > 0 "
+          >
+            <view
+              class="price-group-item"
+              v-for="text in textInfo"
+              :key="text.n"
+              :class="{textTag:text.s === 't'}"
+            >
+              <view>{{ text.n }}</view>
+              <view v-if="text.a">{{ text.a}}</view>
+            </view>
+          </view>
+          <!--文本显示-->
+        </view>
+        <!--售价价格（普通价格）-->
+        <!--在线选择（排期）-->
+        <!--节省显示-->
+        <view class="save-price" style="margin: 4rpx 0;" v-if="item.t === 'E' && type==='schedule'">
+          <text v-if="item.n">{{ item.n }}</text>
+          <text>¥</text>
+          <text>{{ divisionPrice(item.p) }}</text>
+        </view>
+        <!--节省显示-->
+        <!--在线选择（排期）-->
+        <!--划线价格 活动价格与划线价格二选一-->
+        <view
+          v-if="item.t === 'U'"
+          class="line_one_delete"
+          :class="{ threeFontSize: type === 'three' }"
+          :style="[originalPriceSizeStyle]"
+        >
+
+          <text v-if="item.n">{{ item.n }}:</text>
+          <text>¥</text>
+          <text>{{ divisionPrice(item.p) }}</text>
+        </view>
+        <!--划线价格-->
+        <!--活动价格（plus，秒杀）-->
+        <view
+          v-if="item.t === 'D' && isPlus"
+          class="price-box-vip"
+          :class="{ three: type === 'three' }"
+        >
+          <view :style="[vipPriceSizeStyle]" class="price-box-vip-name">{{item.n }}</view>
+          <view :style="[vipPriceSizeStyle]" class="price-box-vip-price">{{divisionPrice(item.p)}}</view>
+        </view>
+        <view
+          :style="[activityStyle]"
+          v-if="item.t === 'D' && !isPlus && type === 'info' "
+          class="price-box-activity"
+        >{{ item.n }} <text v-if="item.n">：</text>{{ divisionPrice(item.p) }}</view>
+        <!--活动价格-->
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdUnit from "@/components/XdUnit/XdUnit.vue";
+import Color from "color";
+
+export default {
+  name: "CusPrice",
+  components: {
+    XdFontIcon,
+    XdUnit,
+  },
+  props: {
+    //1列(one)、2列(two)、3列(three)、商品详情(info)、订单(order)、在线选座排期(schedule),普通模式(normal)
+    type: {
+      type: String,
+      default: "one",
+    },
+    iconSize: {
+      type: Number | String,
+      default: "0.3",
+    },
+    //原价颜色
+    originalPriceColor: {
+      type: String,
+      default: "#999",
+    },
+    //原价字体大小
+    originalPriceFontSize: {
+      type: String,
+      default: "",
+    },
+    //售价颜色
+    salePriceColor: {
+      type: String,
+      default: "",
+    },
+    salePriceFontSize: {
+      type: String,
+      default: "",
+    },
+    //活动售价颜色
+    activitySalePriceColor: {
+      type: String,
+      default: "#fff",
+    },
+    //活动售价字体大小
+    activitySalePriceSize: {
+      type: String,
+      default: "",
+    },
+    //是否是plus站点
+    isPlus: {
+      type: Boolean,
+      default: false,
+    },
+    showPrice: {
+      type: Array,
+      default: [],
+    },
+    range: {
+      type: String,
+      default: "",
+    },
+    isShowIcon: {
+      type: Boolean | String,
+      default: "",
+    },
+    textFontSize:{
+      type: String|Number,
+      default: "24",
+    },
+    normalPriceFontSize:{
+      type: String|Number,
+      default: "22",
+    },
+  },
+  data() {
+    return {
+      isPrice: false,
+      savePrice: null,
+      textInfo: null,
+      uiShowPrice: null,
+    };
+  },
+  watch: {
+    showPrice:{
+      handler(value){
+        this.init();
+      },
+      deep: true
+    },
+  },
+  computed: {
+    vipPriceSizeStyle() {
+      let fontSize = this.type === "info" ? "24rpx" : "20rpx";
+      let minWidth = this.type === "info" ? "60rpx" : "59rpx";
+      return {
+        fontSize,
+        minWidth,
+      };
+    },
+    salePriceSizeStyle() {
+      let fontSize = "40";
+      switch (this.type) {
+        case "one":
+          fontSize = "40";
+          break;
+        case "two":
+          fontSize = "40";
+          break;
+        case "three":
+          fontSize = "24";
+          break;
+        case "normal":
+          fontSize = this.normalPriceFontSize;
+          break;
+        case "info":
+          fontSize = "48";
+          break;
+        case "order":
+          fontSize = "40";
+          break;
+        case "schedule":
+          fontSize = "32";
+          break;
+      }
+      if (this.salePriceFontSize) fontSize = this.salePriceFontSize;
+      return fontSize;
+    },
+    priceMLComp(){
+      return {
+        '--price-unit-style-ml': this.salePriceSizeStyle * .5 * this.$rpxNum + 'px',
+        "--price-unit-style-c":`rgba(${Color('#FF2C18').alpha(0.2).array().join(',')})`,
+        "--price-unit-style-ts": this.textFontSize * this.$rpxNum + 'px'
+      }
+    },
+    originalPriceSizeStyle() {
+      let fontSize =
+        this.type === "info" || this.type === "order" ? "28rpx" : "24rpx";
+      if (this.type === "three") fontSize = "20rpx";
+      if (this.originalPriceFontSize)
+        fontSize = `${this.originalPriceFontSize}rpx`;
+      return {
+        fontSize,
+        color: this.originalPriceColor,
+      };
+    },
+    activityStyle() {
+      let fontSize = "24rpx";
+      if (this.activitySalePriceSize) fontSize = `${this.activitySalePriceSize}rpx`;
+      return {
+        color: this.activitySalePriceColor,
+        fontSize,
+      };
+    },
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init(){
+      let showPrice = this.$xdUniHelper.cloneDeep(this.showPrice);
+
+      //三列（不显示文本信息和省信息）, 排期（上下排列信息）
+      if(!['three', 'schedule'].includes(this.type)) {
+        this.savePrice = showPrice.find(item => item.t === 'E');
+        this.textInfo = showPrice.filter(item => item.t === 'T');
+        this.isPrice = !!(showPrice.find(item => item.t === 'S'));
+        //过滤掉T和E模式
+        this.uiShowPrice = showPrice.filter(item=>{
+          return !(item.t === 'T' || item.t === 'E')
+        });
+
+        //不显示价格时候，需要创建一字符串对象（因为T模式已经被过滤掉了）
+        if(this.textInfo.length > 0 && !this.isPrice) {
+          this.uiShowPrice = [{t: 'CUS'}]
+        }
+
+      }
+      else this.uiShowPrice = showPrice;
+    },
+    divisionPrice(price) {
+      return this.$xdUniHelper.divisionFloatNumber(price, 100);
+    },
+  },
+};
+</script>
+
+
+
+<style scoped lang="less">
+.schedule {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.price-group{
+  display: flex;
+  align-items: center;
+  flex-flow: wrap;
+  justify-content: flex-start;
+
+  &-item {
+    margin-right: var(--price-unit-style-ml);
+    height: 40rpx;
+    line-height: 40rpx;
+    box-sizing: border-box;
+    font-size: var(--price-unit-style-ts);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    & > view {
+      color: #FF2C18;
+    }
+
+    &.textTag {
+      border: 2rpx solid var(--price-unit-style-c);
+      border-radius: 6rpx;
+      padding: 0 8rpx;
+    }
+  }
+  &-save  {
+    font-size: var(--price-unit-style-ts);
+    margin-left: var(--price-unit-style-ml);
+    color: #FF2C18;
+  }
+  &-text {
+    &.noPrice {
+      & > view:last-child {
+        margin-right: 0!important;
+      }
+    }
+    &.hasPrice {
+      margin-left: var(--price-unit-style-ml);
+      & > view:last-child {
+        margin-right: 0!important;
+      }
+    }
+  }
+}
+.price-box {
+  position: relative;
+
+
+  &-activity {
+    font-size: 24rpx;
+    font-weight: 500;
+    // position: relative;
+    // bottom: 5px;
+  }
+
+  &-vip {
+    display: flex;
+    justify-content: flex-start;
+
+    &-name {
+      background: linear-gradient(
+        90deg,
+        rgba(102, 86, 70, 1) 0%,
+        rgba(71, 61, 52, 1) 52.05%,
+        rgba(43, 38, 35, 1) 100%
+      );
+      color: #efd5c3;
+      text-align: center;
+      flex-wrap: nowrap;
+      padding: 8rpx 12rpx;
+      border-radius: 80rpx 0 0 80rpx;
+    }
+
+    &-price {
+      background: linear-gradient(270deg, #fcd6b8 0%, #fcedd7 100%);
+      color: #615850;
+      font-weight: 700;
+      flex-wrap: nowrap;
+      text-align: center;
+      padding: 8rpx 12rpx;
+      border-radius: 0 80rpx 80rpx 0;
+    }
+  }
+
+  &-vip.three {
+    & .price-box-vip-name {
+      padding: 0 4rpx 0 8rpx !important;
+      border-radius: 15rpx 0 0 15rpx;
+      line-height: 30rpx;
+    }
+    & .price-box-vip-price {
+      padding: 0 8rpx 0 4rpx !important;
+      border-radius: 0 15rpx 15rpx 0;
+      line-height: 30rpx;
+    }
+  }
+}
+
+.line_one_delete {
+  text-decoration: line-through;
+  font-weight: normal;
+}
+
+.threeFontSize {
+  font-size: 20rpx;
+}
+</style>