jufubao-base 1.0.159-beta9 → 1.0.160-beta1

package/src/components/JfbBaseConList/JfbBaseConList.vue

@@ -24,9 +24,9 @@
           backgroundSize: '100%',
           backgroundRepeat: 'no-repeat',
           minHeight: `${layoutInfo.bodyMinHeightRpx}rpx`,
-         }"
+        }"
       >
-        <view v-if="couponList&&couponList.length > 0" >
+        <view v-if="is_blank_page==='N'">
           <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">
@@ -34,7 +34,10 @@
                 <view>赠送优惠券</view>
               </view>
               <view
-                :style="{ color: '#FA2125', backgroundColor: contentBackground }"
+                :style="{
+                  color: '#FA2125',
+                  backgroundColor: contentBackground,
+                }"
                 class="jfb-base-con-list__body-content-header-right"
                 @click="showRule = true"
               >
@@ -42,72 +45,166 @@
                 <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon>
               </view>
             </view>
-            <view v-if="can_take === 'Y' && has_times === 'Y'" class="jfb-base-con-list__body-content-list">
-              <view v-for="(item, index) in couponList" :key="index">
+
+            <view v-if="isAll">
+              <view v-if="isRandom">
+                <view class="jfb-base-con-list__body-content-list">
+                  <view style="text-align:center;padding-top:140rpx;padding-bottom:54rpx">
+                    <img
+                      style="width:360rpx;height:340rpx"
+                      :src="app_coupon_bottom_url"
+                      alt=""
+                    />
+                  </view>
+                  <xd-button
+                    size="small"
+                    type="primary"
+                    :style="btn_style"
+                    @click="can_take!=='Y'?toCoupon():getAllCoupont()"
+                    >{{ btn_txt }}</xd-button
+                  >
+                </view>
+              </view>
+              <view v-else>
                 <view
-                  class="jfb-base-con-list__body-content-list-item"
-                  :class="'status_' + item.can_take_num"
-                  :style="{
-                    backgroundColor: item.can_take_num==='Y'||item.can_take_num==='P'? contentBackground:'#F3F3F3',
-                  }"
+                  class="jfb-base-con-list__body-content-list"
                 >
-                  <view class="item_head">
-                    <image class="t_icon" mode="widthFix" :src="item.headIcon" ></image>
-                    <view>{{  item.prize_type }}</view>
+                  <view>
+                    <view v-for="(item, index) in couponList" :key="index">
+                      <view
+                        class="jfb-base-con-list__body-content-list-item"
+                        :class="'status_' + item.can_take_num"
+                        :style="{
+                          backgroundColor:
+                            item.can_take_num === 'Y' || item.can_take_num === 'P'
+                              ? contentBackground
+                              : '#F3F3F3',
+                        }"
+                      >
+                        <view class="item_head">
+                          <image
+                            class="t_icon"
+                            mode="widthFix"
+                            :src="item.headIcon"
+                          ></image>
+                          <view>{{ item.prize_type }}</view>
+                        </view>
+                        <view class="item_sub">{{ item.prize_name }}</view>
+                        <xd-font-icon
+                          size="100"
+                          :style="{
+                            color: item.iconColor,
+                            position: 'absolute',
+                            right: '0rpx',
+                            top: '0rpx',
+                          }"
+                          :icon="item.icon"
+                        ></xd-font-icon>
+                      </view>
+                    </view>
                   </view>
-                  <view class="item_sub">{{ item.prize_name }}</view>
-                  <xd-font-icon
-                    size="100"
+                  <xd-button
+                    size="small"
+                    type="primary"
+                    :style="btn_style"
+                    @click="can_take!=='Y'?toCoupon():getAllCoupont()"
+                    >{{ btn_txt }}</xd-button
+                  >
+                </view>
+              </view>
+            </view>
+
+            <view v-else>
+              <view
+                v-if="can_take === 'Y' && has_times === 'Y'"
+                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"
+                    :class="'status_' + item.can_take_num"
                     :style="{
-                      color: item.iconColor,
-                      position: 'absolute',
-                      right: '0rpx',
-                      top: '0rpx',
+                      backgroundColor:
+                        item.can_take_num === 'Y' || item.can_take_num === 'P'
+                          ? contentBackground
+                          : '#F3F3F3',
                     }"
-                    :icon="item.icon"
-                  ></xd-font-icon>
-                  <view class="btn_wrap">
-                    <xd-button
-                      size="small"
-                      :disabled="item.can_take_num !=='Y' && item.remain_card_count == 0"
-                      @click="getCoupont(item)"
-                      type="primary"
-                      style="width: 170rpx;height: 60rpx;"
-                      :style="item.btn"
-                      :color="item.infoColor"
-                    >{{ item.btn_txt }}</xd-button>
+                  >
+                    <view class="item_head">
+                      <image
+                        class="t_icon"
+                        mode="widthFix"
+                        :src="item.headIcon"
+                      ></image>
+                      <view>{{ item.prize_type }}</view>
+                    </view>
+                    <view class="item_sub">{{ item.prize_name }}</view>
+                    <xd-font-icon
+                      size="100"
+                      :style="{
+                        color: item.iconColor,
+                        position: 'absolute',
+                        right: '0rpx',
+                        top: '0rpx',
+                      }"
+                      :icon="item.icon"
+                    ></xd-font-icon>
+                    <view class="btn_wrap">
+                      <xd-button
+                        size="small"
+                        :disabled="
+                          item.can_take_num !== 'Y' &&
+                          item.remain_card_count == 0
+                        "
+                        @click="getCoupont(item)"
+                        type="primary"
+                        style="width: 170rpx; height: 60rpx"
+                        :style="item.btn"
+                        :color="item.infoColor"
+                        >{{ item.btn_txt }}</xd-button
+                      >
+                    </view>
                   </view>
                 </view>
               </view>
-            </view>
-            <view v-else class="jfb-base-con-list__body-content-list" style="padding-bottom: 60rpx;">
-              <image mode="widthFix" :src="used_up_url"></image>
+              <view
+                v-else
+                class="jfb-base-con-list__body-content-list"
+                style="padding-bottom: 60rpx"
+              >
+                <image mode="widthFix" :src="used_up_url"></image>
+              </view>
             </view>
           </view>
-          <view class="jfb-base-con-list__body-content-foot" @click="toCoupon" >
+          <view class="jfb-base-con-list__body-content-foot" @click="toCoupon">
             <view
               :style="{
-              padding:outPadding,
-              border:border,
-              borderRadius:radius + 'rpx',
-              color: btnTextColor,
-              backgroundColor: btnBgColor,
-              boxShadow:shadow
-            }">查看已领票券</view>
+                padding: outPadding,
+                border: border,
+                borderRadius: radius + 'rpx',
+                color: btnTextColor,
+                backgroundColor: btnBgColor,
+                boxShadow: shadow,
+                fontSize: btnTextSize+'rpx'
+              }"
+              >查看已领票券</view>
           </view>
         </view>
-        <view
-          v-else
-          class="empty_data"
-        >
-          <image :src="emptyBg"></image>{{ message }}</view>
+
+        <view v-else class="empty_data">
+          <image :src="emptyBg"></image>
+          {{ message }}
+        </view>
         <xd-dailog
           :cancel="false"
           :confirm="false"
           title="活动规则说明"
           :show.sync="showRule"
         >
-          <xd-content-xss style="text-align:left" :html="notice"></xd-content-xss>
+          <xd-content-xss
+            style="text-align: left"
+            :html="notice"
+          ></xd-content-xss>
         </xd-dailog>
       </view>
     </view>
@@ -165,18 +262,25 @@ export default {
       collectedPath: "",
 
       //按钮设置
-      btnBgColor:'',
-      btnTextColor:'',
-      padding:{},
+      btnBgColor: "",
+      btnTextColor: "",
+      padding: {},
       radius: 0,
       //边框
-      is_border:'N',
-      is_border_c:'',
-      is_border_w:'',
+      is_border: "N",
+      is_border_c: "",
+      is_border_w: "",
       //投影
-      is_shadow: 'Y',
+      is_shadow: "Y",
       is_shadow_bg: 0,
       is_shadow_w: 0,
+
+      isAll: false,
+      isRandom: false,
+      btn_txt: "",
+      btn_style: {},
+      btnTextSize: '',
+      is_blank_page: 'Y'
     };
   },
   computed: {
@@ -189,15 +293,17 @@ export default {
       str = `${str} ${this.checkValue(this.padding.right, 0)}rpx`;
       str = `${str} ${this.checkValue(this.padding.bottom, 0)}rpx`;
       str = `${str} ${this.checkValue(this.padding.left, 0)}rpx`;
-      return str
+      return str;
     },
     border() {
-      if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
-      else return '0';
+      if (this.is_border === "Y")
+        return `${this.is_border_w}rpx solid ${this.is_border_c}`;
+      else return "0";
     },
-    shadow(){
-      if(this.is_shadow === 'Y') return  `0 0 ${this.is_shadow_w}rpx ${this.is_shadow_bg}`;
-      else return '0 0 0 rgba(0,0,0,0)';
+    shadow() {
+      if (this.is_shadow === "Y")
+        return `0 0 ${this.is_shadow_w}rpx ${this.is_shadow_bg}`;
+      else return "0 0 0 rgba(0,0,0,0)";
     },
   },
   watch: {
@@ -216,22 +322,55 @@ export default {
   },
   methods: {
     init(value) {
-      this.contentBackground = '#FFF8F8';
-      this.iconColor = '#FF4D4A';
-      this.collectedPath = getContainerPropsValue(value, "content.collectedPath", {value: ''}).value;
+      this.contentBackground = "#FFF8F8";
+      this.iconColor = "#FF4D4A";
+      this.collectedPath = getContainerPropsValue(
+        value,
+        "content.collectedPath",
+        { value: "" }
+      ).value;
 
       this.padding = getContainerPropsValue(value, "content.padding", {});
-      this.btnBgColor = getContainerPropsValue(value, "content.btnBgColor", 'rgba(0,0,0,0)');
-      this.btnTextColor = getContainerPropsValue(value, "content.btnTextColor", '#666');
-      this.radius = getContainerPropsValue(value, "content.radius", '0');
+      this.btnBgColor = getContainerPropsValue(
+        value,
+        "content.btnBgColor",
+        "rgba(0,0,0,0)"
+      );
+      this.btnTextColor = getContainerPropsValue(
+        value,
+        "content.btnTextColor",
+        "#666"
+      );
+      this.btnTextSize = getContainerPropsValue(
+        value,
+        "content.btnTextSize",
+        "28"
+      );
+      this.radius = getContainerPropsValue(value, "content.radius", "0");
 
-      this.is_border = getContainerPropsValue(value, "content.is_border", 'N');
-      this.is_border_c = getContainerPropsValue(value, "content.is_border_c", '#e5e5e5');
-      this.is_border_w = getContainerPropsValue(value, "content.is_border_w", 1);
+      this.is_border = getContainerPropsValue(value, "content.is_border", "N");
+      this.is_border_c = getContainerPropsValue(
+        value,
+        "content.is_border_c",
+        "#e5e5e5"
+      );
+      this.is_border_w = getContainerPropsValue(
+        value,
+        "content.is_border_w",
+        1
+      );
 
-      this.is_shadow = getContainerPropsValue(value, 'content.is_shadow', 'N');
-      this.is_shadow_bg = getContainerPropsValue(value, 'content.is_shadow_bg', '#fff');
-      this.is_shadow_w = getContainerPropsValue(value, 'content.is_shadow_w', '10');
+      this.is_shadow = getContainerPropsValue(value, "content.is_shadow", "N");
+      this.is_shadow_bg = getContainerPropsValue(
+        value,
+        "content.is_shadow_bg",
+        "#fff"
+      );
+      this.is_shadow_w = getContainerPropsValue(
+        value,
+        "content.is_shadow_w",
+        "10"
+      );
     },
 
     getList() {
@@ -247,30 +386,79 @@ export default {
         .then((res) => {
           this.background = getServiceUrl(res.background);
           this.used_up_url = res.used_up_url && getServiceUrl(res.used_up_url);
+          this.app_activity_button =
+            res.app_activity_button && getServiceUrl(res.app_activity_button);
+          this.app_activity_url =
+            res.app_activity_url && getServiceUrl(res.app_activity_url);
+          this.app_coupon_bottom_url =
+            res.app_coupon_bottom_url &&
+            getServiceUrl(res.app_coupon_bottom_url);
           this.can_take = res.can_take;
           this.has_times = res.has_times;
           this.next_url = res.next_url;
+          this.isAll = res.receive_method === "batch";
+          this.isRandom = res.distribution_type === "random";
+          // 判断是否是一键领取
+          if (this.isAll) {
+            // 定义按钮文字
+            let btn_txt = "";
+            // 设置按钮样式
+            this.btn_style = res.app_coupon_button_bg_url
+              ? {
+                  // 设置背景图片
+                  backgroundImage: `url(${getServiceUrl(
+                    res.can_take !== "Y"
+                      ? res.app_coupon_button_see_url
+                      : res.app_coupon_button_bg_url
+                  )})`,
+                  // 设置背景大小
+                  backgroundSize: "100% 100%",
+                  // 设置背景重复
+                  backgroundRepeat: "no-repeat",
+                  // 设置背景颜色
+                  backgroundColor: "",
+                  height: '70rpx',
+                  width: '450rpx',
+                  marginTop: '26rpx'
+                }
+              : {
+                  // 设置背景颜色
+                  backgroundColor: "#FB5B3F",
+                  height: '70rpx',
+                  width: '450rpx',
+                  marginTop: '26rpx'
+                };
+            // 设置按钮文字
+            btn_txt = res.can_take === "Y" ? "一键领取" : "去查看";
+            // 判断是否是随机领取
+            if (this.isRandom) {
+              // 设置按钮文字
+              btn_txt = res.can_take === "Y" ? "开心领取" : "去查看";
+            }
+            // 设置按钮文字
+            this.btn_txt = btn_txt;
+          }
 
-          this.couponList =
-            res.list &&
-            res.list.length > 0 &&
-            res.list.map((item) => {
-              let mapArr = {"Y": "去查看", "P": "领取", "N": "已发完"}
+          if (res.list && res.list.length) {
+            this.couponList = res.list.map((item) => {
+              let mapArr = { Y: "去查看", P: "领取", N: "已发完" };
               item.btn_txt = mapArr[item.can_take_num];
               if (item.can_take_num === "Y" || item.can_take_num === "P") {
                 //按钮样式
                 item.btn = res.app_coupon_button_bg_url
                   ? {
                       backgroundImage: `url(${getServiceUrl(
-                        item.can_take_num === "Y" ? res.app_coupon_button_see_url : res.app_coupon_button_bg_url
+                        item.can_take_num === "Y"
+                          ? res.app_coupon_button_see_url
+                          : res.app_coupon_button_bg_url
                       )})`,
                       backgroundSize: "100% 100%",
                       backgroundRepeat: "no-repeat",
-                      backgroundColor: '',
+                      backgroundColor: "",
                       margin: "0",
                     }
                   : {
-                      backgroundColor: '#FB5B3F',
+                      backgroundColor: "#FB5B3F",
                       margin: "0",
                     };
                 //整块背景
@@ -281,57 +469,63 @@ export default {
                   backgroundRepeat: "no-repeat",
                 };
                 //icon
-                item.icon=item.can_take_num === "Y"?'iconyilingqu':'icondailingqu'
+                item.icon =
+                  item.can_take_num === "Y" ? "iconyilingqu" : "icondailingqu";
                 //icon颜色
-                item.iconColor = item.can_take_num === "Y"?'#D6D6D6':this.iconColor
+                item.iconColor =
+                  item.can_take_num === "Y" ? "#D6D6D6" : this.iconColor;
                 //券名称颜色
-                item.nameColor = '#FB5B3F'
+                item.nameColor = "#FB5B3F";
                 //其他文字颜色
-                item.infoColor = '#fff'
+                item.infoColor = "#fff";
               } else {
                 //按钮样式
                 item.btn = { background: "#D6D6D6", margin: "0" };
                 //整块背景
-                item.headIcon = getServiceUrl(res.app_coupon_invalid_url)
+                item.headIcon = getServiceUrl(res.app_coupon_invalid_url);
                 item.couponBackground = {
-                  backgroundImage: `url(${getServiceUrl(res.app_coupon_invalid_url)})`,
+                  backgroundImage: `url(${getServiceUrl(
+                    res.app_coupon_invalid_url
+                  )})`,
                   backgroundSize: "100%",
                   backgroundRepeat: "no-repeat",
                 };
                 //icon
-                item.icon='iconyifawan'
+                item.icon = "iconyifawan";
                 //icon颜色
-                item.iconColor = '#D6D6D6'
+                item.iconColor = "#D6D6D6";
                 //券名称颜色
-                item.nameColor = '#BBBBBB'
+                item.nameColor = "#BBBBBB";
                 //其他文字颜色
-                item.infoColor = '#BBBBBB'
+                item.infoColor = "#BBBBBB";
               }
               return item;
             });
+          }
           console.log("couponList", this.couponList);
           this.message = res.message;
           this.notice = res.about;
           this.done = true;
+          this.is_blank_page = res.is_blank_page;
         })
         .catch((err) => {
           console.log(err, "err");
         });
     },
 
-    toCoupon(){
+    toCoupon() {
       this.$xdUniHelper.navigateTo({
         url: this.next_url || this.collectedPath,
       });
     },
 
     getCoupont(item) {
-      if(item.can_take_num === "Y") {
+      if (item.can_take_num === "Y") {
         this.toCoupon();
         return;
       }
       this.$xdShowLoading({});
-      jfbRootExec("getAllCoupon", {
+      jfbRootExec("getOnceCoupon", {
         vm: this,
         data: {
           ...this.options,
@@ -354,9 +548,42 @@ export default {
             return;
           }
           this.order_num = res.tmp_order_number;
-          setTimeout(()=>{
+          setTimeout(() => {
             this.getResult();
-          },1000)
+          }, 1000);
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+
+    getAllCoupont() {
+      this.$xdShowLoading({});
+      jfbRootExec("getAllCoupon", {
+        vm: this,
+        data: {
+          ...this.options,
+          distribution_method: this.method,
+          namespace: this.pageBusinessCode,
+          activity_id: this.activity_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;
+          setTimeout(() => {
+            this.getResult();
+          }, 1000);
         })
         .catch((err) => {
           console.log(err, "err");
@@ -381,11 +608,14 @@ export default {
               time: 2000,
               isClose: false,
             });
-            this.getList();
-            if (this.timeer) {
-              this.time = 0;
-              clearTimeout(this.timeer);
-            }
+            setTimeout(()=>{
+              this.getList();
+              this.btn_txt = "去查看";
+              if (this.timeer) {
+                this.time = 0;
+                clearTimeout(this.timeer);
+              }
+            },2000)
             return;
           }
           if (res.status_type === "error") {
@@ -396,13 +626,15 @@ export default {
               time: 2000,
               isClose: false,
             });
-            if (res.code == 400) {
+            setTimeout(()=>{
+              if (res.code == 400) {
               this.getList();
-            }
-            if (this.timeer) {
-              this.time = 0;
-              clearTimeout(this.timeer);
-            }
+              }
+              if (this.timeer) {
+                this.time = 0;
+                clearTimeout(this.timeer);
+              }
+            },2000)
             return;
           }
 
@@ -414,6 +646,7 @@ export default {
                 `pay_${res.status_type}`
               );
             }
+            this.btn_txt = `领取中 ${res.success_num}/${res.total_num}`;
             this.time++;
           }, Math.pow(this.date, this.time > this.maxTime ? this.maxTime : this.time) * 1000);
         })
@@ -469,7 +702,7 @@ export default {
       overflow-y: auto;
       padding-top: 220rpx;
       box-sizing: border-box;
-      background-color: #FAFAFA;
+      background-color: #fafafa;
     }
 
     .empty_data {
@@ -530,40 +763,39 @@ export default {
           margin: unit(20, rpx) auto 0 auto;
           position: relative;
 
-          &.status_N{
-            .item_head{
-              color: #BBBBBB;
+          &.status_N {
+            .item_head {
+              color: #bbbbbb;
             }
-            .item_sub{
-              color: #BBBBBB;
+            .item_sub {
+              color: #bbbbbb;
             }
           }
-          .btn_wrap{
+          .btn_wrap {
             position: absolute;
             right: 30rpx;
             bottom: 40rpx;
           }
 
-          .item_head{
+          .item_head {
             display: flex;
             align-items: center;
             font-size: 40rpx;
             color: #000000;
             font-weight: 500;
 
-            .t_icon{
+            .t_icon {
               width: 44rpx;
               margin-right: 20rpx;
               max-height: 80rpx;
             }
           }
-          .item_sub{
+          .item_sub {
             margin-top: 26rpx;
-            color: #FF4D4A;
+            color: #ff4d4a;
             font-size: 36rpx;
             font-weight: 400;
           }
-
         }
       }
       &-foot {