jufubao-base 1.0.67 → 1.0.68

package/src/components/JfbBaseConList/JfbBaseConList.vue

@@ -0,0 +1,608 @@
+<template>
+  <view
+    class="jfb-base-con-list"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-con-list__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-con-list__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-con-list__body" v-if="done">
+      <view
+        v-if="couponList.length > 0"
+        :style="{
+          backgroundImage: `url(${background})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+          height: `${layoutInfo.bodyMinHeightRpx}rpx`,
+        }"
+      >
+        <view class="jfb-base-con-list__body-content">
+          <view class="jfb-base-con-list__body-content-header">
+            <view class="jfb-base-con-list__body-content-header-left">
+              <view :style="{ backgroundColor: mainColor }"></view>
+              <view>赠送优惠券</view>
+            </view>
+            <view
+              :style="{ color: mainColor, backgroundColor: contentBackground }"
+              class="jfb-base-con-list__body-content-header-right"
+              @click="showRule = true"
+            >
+              <text>领券规则</text>
+              <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon>
+            </view>
+          </view>
+          <view class="jfb-base-con-list__body-content-list">
+            <view v-for="(item, index) in couponList" :key="index">
+              <view
+                class="jfb-base-con-list__body-content-list-item"
+                :style="{
+                  backgroundColor: contentBackground,
+                }"
+                v-if="item.can_take === 'N'"
+              >
+                <view class="jfb-base-con-list__body-content-list-item-left">
+                  <view
+                    :style="item.couponBackground"
+                    class="jfb-base-con-list__body-content-list-item-left-info"
+                  >
+                    <view
+                      :style="{
+                        color: mainColor,
+                        textAlign: 'center',
+                      }"
+                      >{{ item.prize_type }}</view
+                    >
+                    <view
+                      :style="{
+                        color: '#fff',
+                      }"
+                      >{{ item.prize_name }}</view
+                    >
+                  </view>
+                </view>
+                <view class="jfb-base-con-list__body-content-list-item-right">
+                  <view
+                    class="jfb-base-con-list__body-content-list-item-right-name"
+                  >
+                    <view>{{ item.prize_name }}</view>
+                    <xd-font-icon
+                      size="100"
+                      :style="{
+                        color: '#D6D6D6',
+                        position: 'absolute',
+                        right: '-30rpx',
+                        top: '-60rpx',
+                      }"
+                      icon="iconyilingqu"
+                    ></xd-font-icon>
+                  </view>
+                  <view
+                    class="jfb-base-con-list__body-content-list-item-right-num"
+                  >
+                    <!-- <view
+                    :style="{
+                      color: mainColor,
+                      display: 'flex',
+                      alignItems: 'center',
+                      fontSize: '28rpx',
+                    }"
+                  >
+                    <xd-font-icon
+                      style="margin-right: 10rpx"
+                      size="22"
+                      icon="icondanchuangguanbi_xian"
+                    ></xd-font-icon>
+                    {{ item.prize_num }}
+                  </view> -->
+                    <view></view>
+
+                    <xd-button
+                      v-if="item.can_take === 'Y'"
+                      size="small"
+                      :disabled="item.remain_card_count == 0"
+                      @click="getCoupont(item)"
+                      type="primary"
+                      :style="item.btn"
+                      :color="item.remain_card_count == 0 ? '#AAA' : '#fff'"
+                      >领取</xd-button
+                    >
+                  </view>
+                </view>
+              </view>
+              <view
+                class="jfb-base-con-list__body-content-list-item"
+                :style="{
+                  backgroundColor:
+                    item.remain_card_count == 0 ? '#f3f3f3' : contentBackground,
+                }"
+                v-else
+              >
+                <view class="jfb-base-con-list__body-content-list-item-left">
+                  <view
+                    :style="item.couponBackground"
+                    class="jfb-base-con-list__body-content-list-item-left-info"
+                  >
+                    <view
+                      :style="{
+                        color:
+                          item.remain_card_count == 0 ? '#D6D6D6' : mainColor,
+                        textAlign: 'center',
+                      }"
+                      >{{ item.prize_type }}</view
+                    >
+                    <view
+                      :style="{
+                        color: item.remain_card_count == 0 ? '#D6D6D6' : '#fff',
+                      }"
+                      >{{ item.prize_name }}</view
+                    >
+                  </view>
+                </view>
+                <view class="jfb-base-con-list__body-content-list-item-right">
+                  <view
+                    class="jfb-base-con-list__body-content-list-item-right-name"
+                  >
+                    <view>{{ item.prize_name }}</view>
+                    <xd-font-icon
+                      size="100"
+                      :style="{
+                        color:
+                          item.remain_card_count == 0 ? '#D6D6D6' : iconColor,
+                        position: 'absolute',
+                        right: '-30rpx',
+                        top: '-30rpx',
+                      }"
+                      :icon="
+                        item.remain_card_count == 0
+                          ? 'iconyifawan'
+                          : 'icondailingqu'
+                      "
+                    >
+                    </xd-font-icon>
+                  </view>
+                  <view
+                    class="jfb-base-con-list__body-content-list-item-right-num"
+                  >
+                    <!-- <view
+                    :style="{
+                      color: mainColor,
+                      display: 'flex',
+                      alignItems: 'center',
+                      fontSize: '28rpx',
+                    }"
+                  >
+                    <xd-font-icon
+                      style="margin-right: 10rpx"
+                      size="22"
+                      icon="icondanchuangguanbi_xian"
+                    ></xd-font-icon>
+                    {{ item.prize_num }}
+                  </view> -->
+                    <view></view>
+
+                    <xd-button
+                      v-if="item.can_take === 'Y'"
+                      size="small"
+                      :disabled="item.remain_card_count == 0"
+                      @click="getCoupont(item)"
+                      type="primary"
+                      :style="
+                        item.remain_card_count == 0
+                          ? { background: '#DDDDDD', margin: 0 }
+                          : item.btn
+                      "
+                      :color="item.remain_card_count == 0 ? '#AAA' : '#fff'"
+                      >领取</xd-button
+                    >
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="jfb-base-con-list__body-content-foot"
+            >可在个人中心-我的票券进行查看</view
+          >
+        </view>
+      </view>
+      <view
+        v-else
+        class="empty_data"
+        :style="{ minHeight: layoutInfo.bodyMinHeightPx + 'px' }"
+      >
+        <image :src="emptyBg"></image>
+        {{ message }}
+      </view>
+      <xd-dailog
+        :cancel="false"
+        :confirm="false"
+        title="活动规则说明"
+        :show.sync="showRule"
+      >
+        <xd-content-xss :html="notice"></xd-content-xss>
+      </xd-dailog>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseConListMixin from "./JfbBaseConListMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import XdDailog from "@/components/XdDailog/XdDailog";
+import XdContentXss from "@/components/XdContentXss/XdContentXss";
+import getServiceUrl from "@/common/getServiceUrl";
+import colorCardMixins from "@/mixins/colorCardMixins";
+import { mapState } from "vuex";
+const Color = require("color");
+
+export default {
+  name: "JfbBaseConList",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdDailog,
+    XdContentXss,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseConListMixin, colorCardMixins],
+  data() {
+    return {
+      contentBackground: "",
+      iconColor: "",
+      couponList: [],
+      notice: "",
+      showRule: false,
+      btn: "",
+      activity_id: "",
+      background: "",
+      app_coupon_url: "",
+      method: "entry",
+      maxTime: 5, //最长轮询2的N次方（秒）
+      date: 2, //时间底数
+      time: 1, //时间幂指数
+      timeer: null,
+      order_num: null,
+      done: false,
+      message: "",
+    };
+  },
+  computed: {
+    ...mapState(["pageBusinessCode"]),
+    emptyBg() {
+      return this.getNoData();
+    },
+  },
+  watch: {
+    container(value) {
+      this.init(value);
+    },
+  },
+  created() {
+    this.init(this.container);
+  },
+  destroyed() {
+    if (this.timeer) {
+      clearTimeout(this.timeer);
+    }
+  },
+  methods: {
+    init(value) {
+      this.contentBackground = Color(this.mainColor).alpha(0.2).toString();
+      this.iconColor = Color(this.mainColor).alpha(0.3).toString();
+    },
+    getList() {
+      jfbRootExec("getCouponList", {
+        vm: this,
+        data: {
+          distribution_method: this.method,
+          namespace: this.pageBusinessCode,
+          activity_id: this.activity_id,
+        },
+      })
+        .then((res) => {
+          this.background = getServiceUrl(res.background);
+          this.couponList =
+            res.list &&
+            res.list.length > 0 &&
+            res.list.map((item) => {
+              if (item.can_take === "Y") {
+                item.btn = res.app_coupon_button_bg_url
+                  ? {
+                      backgroundImage: `url(${getServiceUrl(
+                        res.app_coupon_button_bg_url
+                      )})`,
+                      backgroundSize: "100%",
+                      backgroundRepeat: "no-repeat",
+                      margin: "0",
+                    }
+                  : {
+                      backgroundColor: this.mainColor,
+                      margin: "0",
+                    };
+                item.couponBackground = {
+                  backgroundImage:
+                    item.remain_card_count > 0
+                      ? `url(${getServiceUrl(res.app_coupon_url)})`
+                      : `url(${getServiceUrl(res.app_coupon_invalid_url)})`,
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                };
+              } else {
+                item.btn = { background: "#D6D6D6", margin: "0" };
+                item.couponBackground = {
+                  backgroundImage: `url(${getServiceUrl(res.app_coupon_url)})`,
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                };
+              }
+              return item;
+            });
+          console.log("couponList", this.couponList);
+          this.message = res.message;
+          this.done = true;
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+    getCoupont(item) {
+      this.$xdShowLoading({});
+      jfbRootExec("getAllCoupon", {
+        vm: this,
+        data: {
+          distribution_method: this.method,
+          namespace: this.pageBusinessCode,
+          activity_id: this.activity_id,
+          prize_id: item.prize_id,
+        },
+      })
+        .then((res) => {
+          if (res.code == 400) {
+            this.$xdHideLoading();
+            this.$xdAlert({
+              content: res.message,
+              zIndex: 3200,
+              time: 2000,
+              isClose: false,
+            });
+            this.getList();
+            return;
+          }
+          this.order_num = res.tmp_order_number;
+          this.getResult();
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+    getResult() {
+      jfbRootExec("getCouponResult", {
+        vm: this,
+        data: {
+          tmp_order_number: this.order_num,
+        },
+      })
+        .then((res) => {
+          if (res.status_type === "success") {
+            this.$xdHideLoading();
+            this.$xdAlert({
+              content: "领取成功",
+              zIndex: 3200,
+              time: 2000,
+              isClose: false,
+            });
+            this.getList();
+            if (this.timeer) {
+              this.time = 1;
+              clearTimeout(this.timeer);
+            }
+            return;
+          }
+          if (res.status_type === "error") {
+            this.$xdHideLoading();
+            this.$xdAlert({
+              content: res.message,
+              zIndex: 3200,
+              time: 2000,
+              isClose: false,
+            });
+            if (res.code == 400) {
+              this.getList();
+            }
+            if (this.timeer) {
+              this.time = 1;
+              clearTimeout(this.timeer);
+            }
+            return;
+          }
+          this.time++;
+          this.timeer = setTimeout(() => {
+            this.getResult();
+            if (this.time > 5)
+              this.$xdLog.setARMSInfo(
+                { message: "领取中" },
+                `pay_${res.status_type}`
+              );
+          }, Math.pow(this.date, this.time > this.maxTime ? this.maxTime : this.time) * 1000);
+        })
+        .catch((err) => {
+          this.$xdHideLoading();
+          console.log(err, "err");
+        });
+    },
+    getContent() {
+      jfbRootExec("getListBaseNewsContentCoupon", {
+        vm: this,
+        data: {
+          page_id: this.pageAttr["page_id"], //页面ID
+          container_id: this.containerId, //组件ID
+          limit: 1,
+        },
+      })
+        .then((res) => {
+          console.log(res, "ajajajajaj");
+          if (res.list.length > 0) {
+            this.notice = res.list[0].content;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+    onJfbLoad(options) {
+      console.log(this.pageBusinessCode, "pageNamespace");
+      this.activity_id = options.activity_id;
+      this.method = options.distribution_method
+        ? options.distribution_method
+        : "entry";
+      this.getContent();
+      this.getList();
+    },
+
+    onJfbShow() {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+      this.time = 0;
+      if (this.order_num) this.getResult();
+    },
+
+    onJfbUnload() {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+    },
+
+    onJfbBack(options) {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+      if (this.$configProject.isPreview) return;
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseConListLess.less";
+
+.jfb-base-con-list {
+  &__body {
+    position: relative;
+    overflow-y: auto;
+    .empty_data {
+      text-align: center;
+      color: #999999;
+      font-size: 28rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      & > image {
+        width: unit(400, rpx);
+        height: unit(400, rpx);
+      }
+    }
+    &-content {
+      border-radius: unit(20, rpx);
+      background: #fff;
+      padding: unit(34, rpx);
+      position: relative;
+      top: unit(164, rpx);
+      margin-right: auto;
+      margin-left: auto;
+      width: unit(650, rpx);
+
+      &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &-left {
+          display: flex;
+          align-items: center;
+          font-size: unit(32, rpx);
+          & > view:first-child {
+            width: unit(8, rpx);
+            height: unit(36, rpx);
+            border-radius: unit(4, rpx);
+            margin-right: unit(20, rpx);
+          }
+        }
+
+        &-right {
+          display: flex;
+          font-size: unit(24, rpx);
+          padding: unit(8, rpx) unit(16, rpx);
+          border-radius: unit(24, rpx);
+        }
+      }
+
+      &-list {
+        margin-top: unit(20, rpx);
+
+        &-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: unit(20, rpx) unit(30, rpx);
+          border-radius: unit(12, rpx);
+          margin: unit(20, rpx) auto 0 auto;
+          &-left {
+            display: flex;
+            &-info {
+              padding: unit(20, rpx) unit(36, rpx);
+              & > view:first-child {
+                font-size: unit(44, rpx);
+                font-weight: 500;
+                margin-bottom: unit(36, rpx);
+              }
+              & > view:nth-child(2) {
+                font-size: unit(28, rpx);
+                color: #fff;
+              }
+            }
+          }
+          &-right {
+            margin-left: unit(24, rpx);
+            flex: 1;
+            &-name {
+              position: relative;
+              font-size: unit(40, rpx);
+              color: #000;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            }
+            &-num {
+              margin-top: unit(40, rpx);
+              display: flex;
+              justify-content: space-between;
+            }
+          }
+        }
+      }
+      &-foot {
+        color: #a6a6a6;
+        font-size: unit(24, rpx);
+        text-align: center;
+        margin-top: unit(40, rpx);
+      }
+    }
+  }
+}
+</style>

package/src/components/JfbBaseConList/JfbBaseConListLess.less

@@ -0,0 +1,80 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-con-list {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  min-height: unit(50, rpx);
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx {
+    position: relative;
+    border: 1px dashed blue;
+    box-sizing: border-box;
+    z-index: 3
+
+  }
+
+  &:hover {
+    border: 1px dashed blue;
+  }
+
+  &.noBorder {
+    border-color: rgba(0,0,0,0);
+    border-width: 0;
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-con-list {
+  &:before {
+    content: " ";
+    display: table;
+  }
+}
+/**endNotPreview**/

package/src/components/JfbBaseConList/JfbBaseConListMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-con-list'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}