xiaoe_mp_npm 0.5.42-test2 → 0.5.42-test21

package/miniprogram_dist/CouponList/couponColumn/index.js

@@ -35,7 +35,7 @@ Component({
         type: Object,
         value: {},
         observer(newVal) {
-          newVal.switch && this.handlerListInfo(newVal)
+          this.handlerListInfo(newVal)
         }
       }
     },
@@ -171,6 +171,10 @@ Component({
         this.triggerEvent("sendCoupon", {
           couponItem: detail.couponItem
         })
+      },
+      showReceivePopup(e) {
+        console.log("sage----ee列表的领取",e.detail.couponInfo);
+        this.triggerEvent('showReceivePopup',e.detail.couponInfo)
       }
     }
 })

package/miniprogram_dist/CouponList/couponColumn/index.scss

@@ -0,0 +1,118 @@
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin coupon-list {
+    &.vertical-screen {
+      background: #fff;
+      padding-top: vmin(8);
+      .coupon-title {
+        margin-left: vmin(32);
+        color: #333333;
+        font-size: vmin(28);
+        margin-bottom: vmin(16);
+        .coupon {
+          font-weight: 700;
+          margin-right: vmin(16);
+        }
+        .coupon-num {
+          font-weight: 400;
+        }
+      }
+      .goods-coupon-wrapper {
+          display: flex;
+          flex-direction: row;
+          overflow-y: scroll;
+          .coupon-item:first-child {
+            margin-left: vmin(32);
+          }
+          .coupon-item:last-child {
+            padding-right: vmin(16) !important;
+          }
+      
+      }
+      .goods-coupon-wrapper::-webkit-scrollbar {
+        display: none;
+      }
+    }
+    &.full-screen {
+      .goods-coupon-wrapper {
+        margin-bottom: vmin(32);
+      }
+    }
+    
+}
+
+@mixin no-data{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: vmin(164);
+    .no-data-png{
+      width: vmin(176);
+      height: vmin(176);
+    }
+    .no-data-text{
+      color: rgba(51,51,51,1);
+      font-size: vmin(28);
+      font-weight: 400;
+      font-family: "PingFang SC";
+      margin-top: vmin(32);
+      margin-bottom: vmin(16);
+    }
+    .chat-text{
+      opacity: 1;
+      color: rgba(153,153,153,1);
+      font-size: vmin(24);
+      font-weight: 400;
+      font-family: "PingFang SC";
+      padding: 0 vmin(90) 0 vmin(88);
+      text-align: center;
+    }
+}
+
+
+.no-data {
+    @include no-data;
+}
+
+.coupon-list {
+    @include coupon-list;
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+    $deviceWidth: 1536 !global;
+
+    .no-data {
+      @include no-data;
+    }
+
+    .coupon-list {
+        @include coupon-list;
+    }
+}
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .no-data {
+    @include no-data;
+  }
+
+  .coupon-list {
+      @include coupon-list;
+  }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+    $deviceWidth: 1536 !global;
+
+    .no-data {
+      @include no-data;
+    }
+
+    .coupon-list {
+        @include coupon-list;
+    }
+}

package/miniprogram_dist/CouponList/couponColumn/index.wxml

@@ -20,6 +20,7 @@
           bindreceivedSuccess="receivedSuccess" 
           bind:sendCoupon="sendCoupon"
           isFullscreenList="{{isFullscreenList}}"
+          bind:showReceivePopup="showReceivePopup"
       />
     </view>
     <view class="no-data" wx:elif="{{ isFullScreen && (!aliveConf.is_coupon_on || !isInitePage && couponsList.length === 0) }}">

package/miniprogram_dist/CouponList/couponColumn/index.wxss

@@ -1,16 +1,43 @@
+.no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 21.86667vmin;
+}
+.no-data .no-data-png {
+  width: 23.46667vmin;
+  height: 23.46667vmin;
+}
+.no-data .no-data-text {
+  color: #333333;
+  font-size: 3.73333vmin;
+  font-weight: 400;
+  font-family: "PingFang SC";
+  margin-top: 4.26667vmin;
+  margin-bottom: 2.13333vmin;
+}
+.no-data .chat-text {
+  opacity: 1;
+  color: #999999;
+  font-size: 3.2vmin;
+  font-weight: 400;
+  font-family: "PingFang SC";
+  padding: 0 12vmin 0 11.73333vmin;
+  text-align: center;
+}
 .coupon-list.vertical-screen {
   background: #fff;
-  padding-top: 1.07vmin;
+  padding-top: 1.06667vmin;
 }
 .coupon-list.vertical-screen .coupon-title {
-  margin-left: 4.27vmin;
+  margin-left: 4.26667vmin;
   color: #333333;
-  font-size: 3.73vmin;
-  margin-bottom: 2.13vmin;
+  font-size: 3.73333vmin;
+  margin-bottom: 2.13333vmin;
 }
 .coupon-list.vertical-screen .coupon-title .coupon {
   font-weight: 700;
-  margin-right: 2.13vmin;
+  margin-right: 2.13333vmin;
 }
 .coupon-list.vertical-screen .coupon-title .coupon-num {
   font-weight: 400;
@@ -21,41 +48,203 @@
   overflow-y: scroll;
 }
 .coupon-list.vertical-screen .goods-coupon-wrapper .coupon-item:first-child {
-  margin-left: 4.27vmin;
+  margin-left: 4.26667vmin;
 }
 .coupon-list.vertical-screen .goods-coupon-wrapper .coupon-item:last-child {
-  padding-right: 2.13vmin !important;
+  padding-right: 2.13333vmin !important;
 }
 .coupon-list.vertical-screen .goods-coupon-wrapper::-webkit-scrollbar {
   display: none;
 }
 .coupon-list.full-screen .goods-coupon-wrapper {
-  margin-bottom: 4.27vmin;
+  margin-bottom: 4.26667vmin;
 }
-.no-data {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 21.87vmin;
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  .no-data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10.67708vmin;
+  }
+  .no-data .no-data-png {
+    width: 11.45833vmin;
+    height: 11.45833vmin;
+  }
+  .no-data .no-data-text {
+    color: #333333;
+    font-size: 1.82292vmin;
+    font-weight: 400;
+    font-family: "PingFang SC";
+    margin-top: 2.08333vmin;
+    margin-bottom: 1.04167vmin;
+  }
+  .no-data .chat-text {
+    opacity: 1;
+    color: #999999;
+    font-size: 1.5625vmin;
+    font-weight: 400;
+    font-family: "PingFang SC";
+    padding: 0 5.85938vmin 0 5.72917vmin;
+    text-align: center;
+  }
+  .coupon-list.vertical-screen {
+    background: #fff;
+    padding-top: 0.52083vmin;
+  }
+  .coupon-list.vertical-screen .coupon-title {
+    margin-left: 2.08333vmin;
+    color: #333333;
+    font-size: 1.82292vmin;
+    margin-bottom: 1.04167vmin;
+  }
+  .coupon-list.vertical-screen .coupon-title .coupon {
+    font-weight: 700;
+    margin-right: 1.04167vmin;
+  }
+  .coupon-list.vertical-screen .coupon-title .coupon-num {
+    font-weight: 400;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper {
+    display: flex;
+    flex-direction: row;
+    overflow-y: scroll;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper .coupon-item:first-child {
+    margin-left: 2.08333vmin;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper .coupon-item:last-child {
+    padding-right: 1.04167vmin !important;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+  .coupon-list.full-screen .goods-coupon-wrapper {
+    margin-bottom: 2.08333vmin;
+  }
 }
-.no-data .no-data-png {
-  width: 23.47vmin;
-  height: 23.47vmin;
-}
-.no-data .no-data-text {
-  color: #333333;
-  font-size: 3.73vmin;
-  font-weight: 400;
-  font-family: "PingFang SC";
-  margin-top: 4.27vmin;
-  margin-bottom: 2.13vmin;
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  .no-data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 13.01587vmin;
+  }
+  .no-data .no-data-png {
+    width: 13.96825vmin;
+    height: 13.96825vmin;
+  }
+  .no-data .no-data-text {
+    color: #333333;
+    font-size: 2.22222vmin;
+    font-weight: 400;
+    font-family: "PingFang SC";
+    margin-top: 2.53968vmin;
+    margin-bottom: 1.26984vmin;
+  }
+  .no-data .chat-text {
+    opacity: 1;
+    color: #999999;
+    font-size: 1.90476vmin;
+    font-weight: 400;
+    font-family: "PingFang SC";
+    padding: 0 7.14286vmin 0 6.98413vmin;
+    text-align: center;
+  }
+  .coupon-list.vertical-screen {
+    background: #fff;
+    padding-top: 0.63492vmin;
+  }
+  .coupon-list.vertical-screen .coupon-title {
+    margin-left: 2.53968vmin;
+    color: #333333;
+    font-size: 2.22222vmin;
+    margin-bottom: 1.26984vmin;
+  }
+  .coupon-list.vertical-screen .coupon-title .coupon {
+    font-weight: 700;
+    margin-right: 1.26984vmin;
+  }
+  .coupon-list.vertical-screen .coupon-title .coupon-num {
+    font-weight: 400;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper {
+    display: flex;
+    flex-direction: row;
+    overflow-y: scroll;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper .coupon-item:first-child {
+    margin-left: 2.53968vmin;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper .coupon-item:last-child {
+    padding-right: 1.26984vmin !important;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+  .coupon-list.full-screen .goods-coupon-wrapper {
+    margin-bottom: 2.53968vmin;
+  }
 }
-.no-data .chat-text {
-  opacity: 1;
-  color: #999999;
-  font-size: 3.2vmin;
-  font-weight: 400;
-  font-family: "PingFang SC";
-  padding: 0 12vmin 0 11.73vmin;
-  text-align: center;
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  .no-data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10.67708vmin;
+  }
+  .no-data .no-data-png {
+    width: 11.45833vmin;
+    height: 11.45833vmin;
+  }
+  .no-data .no-data-text {
+    color: #333333;
+    font-size: 1.82292vmin;
+    font-weight: 400;
+    font-family: "PingFang SC";
+    margin-top: 2.08333vmin;
+    margin-bottom: 1.04167vmin;
+  }
+  .no-data .chat-text {
+    opacity: 1;
+    color: #999999;
+    font-size: 1.5625vmin;
+    font-weight: 400;
+    font-family: "PingFang SC";
+    padding: 0 5.85938vmin 0 5.72917vmin;
+    text-align: center;
+  }
+  .coupon-list.vertical-screen {
+    background: #fff;
+    padding-top: 0.52083vmin;
+  }
+  .coupon-list.vertical-screen .coupon-title {
+    margin-left: 2.08333vmin;
+    color: #333333;
+    font-size: 1.82292vmin;
+    margin-bottom: 1.04167vmin;
+  }
+  .coupon-list.vertical-screen .coupon-title .coupon {
+    font-weight: 700;
+    margin-right: 1.04167vmin;
+  }
+  .coupon-list.vertical-screen .coupon-title .coupon-num {
+    font-weight: 400;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper {
+    display: flex;
+    flex-direction: row;
+    overflow-y: scroll;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper .coupon-item:first-child {
+    margin-left: 2.08333vmin;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper .coupon-item:last-child {
+    padding-right: 1.04167vmin !important;
+  }
+  .coupon-list.vertical-screen .goods-coupon-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+  .coupon-list.full-screen .goods-coupon-wrapper {
+    margin-bottom: 2.08333vmin;
+  }
 }

package/miniprogram_dist/CouponReceivePopup/index.js

@@ -0,0 +1,75 @@
+// subpkg/npm-compoent/miniprogram_npm/xiaoe_mp_npm/CouponReceivePopup/index.ts
+import { replaceCDN } from './../common/utils/image-cdn-slim/utils'
+const computedBehavior = require('miniprogram-computed').behavior
+
+
+Component({
+  behaviors: [computedBehavior],
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    showPopup: {
+      type: Boolean,
+      value: false,
+    },
+    couponInfo: {
+      type: Object,
+      value: {}
+    },
+    isFullScreen: {
+      type: Boolean,
+      value: false
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    bgZh: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/lmimm9mb0lnc.png",
+    closeBtn: "https://commonresource-1252524126.cdn.xiaoeknow.com/image/lmimm9mb0q88.png"
+  },
+
+  lifetimes: {
+    attached : function() {
+      console.log("sage------add",this.data);
+    }
+  },
+
+  computed: {
+    backgroundImageUrl(data) {
+      console.log("sage-----data",data);
+        const url = data.bgZh;
+        console.log("sage-----url",url,replaceCDN(url, "?imageView2/2/w/400/q/100"));
+        return replaceCDN(url, "?imageView2/2/w/400/q/100");
+        // return url
+    },
+    closeBtnUrl(data) {
+        return replaceCDN(data.closeBtn, "?imageView2/2/w/400/q/100");
+    },
+    isShowPoint(data) {
+        let tempPrice = data.couponInfo.price;
+        if (tempPrice % 100 == 0) {
+            return false;
+        } else {
+            return true;
+        }
+    },
+},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    closePopup() {
+      this.triggerEvent('closePopup')
+
+    },
+    goGoods() {
+      this.closePopup()
+      // todo 拉起带货
+      this.triggerEvent('goGoods')
+    }
+  }
+})

package/miniprogram_dist/CouponReceivePopup/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-popup": "@vant/weapp/popup/index"
+  }
+}

package/miniprogram_dist/CouponReceivePopup/index.scss

@@ -0,0 +1,99 @@
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin coupon-receive {
+  .receive-box{
+    display: flex;
+    flex-direction: column;
+  }
+  .receive-box-scale{
+    transform: scale(80%);
+    transform-origin: 50% 10%;
+  }
+  .receive-popup{
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    .receive-container{
+      width: vmin(512);
+      height: vmin(760);
+      background-size: 100% 100%;
+      &__content {
+        display: flex;
+        flex-direction: column;
+        margin: vmin(280) vmin(32) vmin(32);
+        padding: vmin(32) vmin(24) vmin(24);
+      }
+      &__content-price {
+        font-weight: 500;
+        font-family: "PingFang SC";
+        text-align: left;
+        display: flex;
+        align-items: baseline;
+        .smallIcon {
+            color: #fd2b54;
+            font-size: vmin(40);
+            line-height: vmin(40);
+        }
+        .boldIcon {
+            color: #fd2b54;
+            font-size: vmin(80);
+            line-height: vmin(80);
+        }
+      }
+      &__content-describe {
+        margin-top: vmin(28);
+        color: #333333;
+        font-size: vmin(28);
+        font-weight: 400;
+        font-family: "PingFang SC";
+        text-align: left;
+        line-height: vmin(40);
+        span {
+            display: block;
+            margin-bottom: vmin(8);
+        }
+      }
+      &__btn {
+        width: vmin(400);
+        height: vmin(80);
+        border-radius: vmin(8);
+        opacity: 1;
+        background: linear-gradient(270deg, #ff5820 0%, #ff4067 100%);
+        color: #ffffff;
+        font-size: vmin(32);
+        font-weight: 500;
+        font-family: "PingFang SC";
+        text-align: left;
+        margin: vmin(40) vmin(56) vmin(56);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      &__close {
+        width: vmin(64);
+        height: vmin(64);
+        margin: vmin(32) auto 0;
+      }
+    }
+
+  }
+
+}
+
+.coupon-receive {
+  @include coupon-receive;
+}
+
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+  
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+  
+}

package/miniprogram_dist/CouponReceivePopup/index.wxml

@@ -0,0 +1,85 @@
+<!--subpkg/npm-compoent/miniprogram_npm/xiaoe_mp_npm/CouponReceivePopup/index.wxml-->
+<view class="coupon-receive">
+  <van-popup
+    show="{{ showPopup }}"
+    round
+    bind:click-overlay="closePopup"
+    bind:close="closePopup"
+    custom-class="receive-popup"
+    z-index="500"
+  >
+    <view class="receive-box {{isFullScreen?'receive-box-scale':''}}">
+      <view class="receive-container" style="background-image: url({{backgroundImageUrl}});">
+        <view class="receive-container__content">
+          <view class="receive-container__content-price">
+            <span class="smallIcon">¥</span>
+            <span class="boldIcon">{{ price.ToFilter(couponInfo.price) }}</span>
+            <span class="smallIcon" wx:if="{{isShowPoint}}">.{{ price.fixedFont(couponInfo.price) }}</span>
+          </view>
+          <view class="receive-container__content-describe">
+            <!-- 无门槛 -->
+            <span wx:if="{{couponInfo.require_price == 0}}">无门槛</span>
+            <!-- 满xx元可用 -->
+            <span wx:else>满{{ couponInfo.require_price / 100 }}元可用</span>
+            <!-- 全部商品可用 -->
+            <span wx:if="{{couponInfo.type == 1}}">全部商品可用</span>
+            <!-- 部分商品可用 -->
+            <span wx:else>部分商品可用</span>
+            <!-- 领取次日x天内有效 / 自领取起x天内有效-->
+            <span
+              wx:if="{{couponInfo.valid_day}}"
+            >{{ couponInfo.valid_after == 1 ? '领取次日' : '自领取起'}}{{couponInfo.valid_day}}天内有效</span>
+            <!-- 有效期至 -->
+            <span
+              wx:if="{{!couponInfo.valid_day && couponInfo.valid_at && couponInfo.invalid_at}}"
+            >有效期至：{{price.formatDateToMinte(couponInfo.invalid_at) }}</span>
+            <!-- <span
+            wx:if="{{!couponInfo.valid_day && couponInfo.valid_at && couponInfo.invalid_at}}"
+            >有效期至：{{couponInfo.invalid_at}}</span>-->
+          </view>
+        </view>
+        <view class="receive-container__btn" catchtap="goGoods">立即用券</view>
+      </view>
+      <image src="{{closeBtnUrl}}" alt class="receive-container__close" catchtap="closePopup" />
+    </view>
+  </van-popup>
+</view>
+
+<wxs module="price">
+  // 做数值过滤，value-要处理的数字 ToFix2-默认保留两位，默认转分转元，除以100。其他除以10(如折扣)
+  var ToFilter = function(data, ToFix2 = true) {
+  var result = (data / 100).toString();
+  if (!ToFix2) {
+  result = (data / 10).toString();
+  }
+  if (result.indexOf('.') > 0) {
+  return result.split('.')[0];
+  } else {
+  return result;
+  }
+  }
+  // 小数点后的样式补充 ToFix2-默认保留2位,其他保留1位
+  var fixedFont = function(data, ToFix2 = true) {
+  if (data) {
+  var result = (data / 100).toString();
+  if (!ToFix2) {
+  result = (data / 10).toString();
+  }
+  if (result.toString().indexOf('.') > -1) {
+  return result.split('.')[1];
+  } else {
+  return '';
+  }
+  }
+  }
+  // 时间精确到分
+var formatDateToMinte = function(date) {
+  var lastIndex = date.lastIndexOf(":");
+  return date.substring(0, lastIndex).replace(getRegExp('-','g'), '.');
+};
+  module.exports={
+  ToFilter:ToFilter,
+  fixedFont:fixedFont,
+  formatDateToMinte: formatDateToMinte 
+  }
+</wxs>