xiaoe_mp_npm 0.5.39 → 0.5.40-alpha2

package/miniprogram_dist/CouponList/couponColumn/index.scss

@@ -0,0 +1,106 @@
+$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;
+    }
+}
+// 横屏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.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,140 @@
   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;
-}
-.no-data {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 21.87vmin;
+  margin-bottom: 4.26667vmin;
 }
-.no-data .no-data-png {
-  width: 23.47vmin;
-  height: 23.47vmin;
+@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-text {
-  color: #333333;
-  font-size: 3.73vmin;
-  font-weight: 400;
-  font-family: "PingFang SC";
-  margin-top: 4.27vmin;
-  margin-bottom: 2.13vmin;
-}
-.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/GoodsItem/index.js

@@ -6,7 +6,7 @@
  * @LastEditors: conlinchen
  * @LastEditTime: 2021-11-18 19:49:11
  */
-import { debounce } from "../common/utils/index"
+import { debounce, rpxToVmin } from "../common/utils/index"
 import { getUserPermission, getUserPermissionNew, snapCheck, snapCheckNew } from "../common/api/liveGoodsList"
 import {
   ASSOCIATION,
@@ -153,7 +153,8 @@ Component({
     preHeatTime: '',
     isSeckill: false,
     checked: false,
-    switchLoading: false
+    switchLoading: false,
+    imageRadius: rpxToVmin(16)
   },
   computed: {
     showPreferentialPrice(properties) {
@@ -508,7 +509,7 @@ Component({
     },
     toDetails() {
       // 直播商品-去详情页，其他商品-拉起客服
-      let { title, img_url } = this.data.goodsItem
+      let { title, img_url, target_url } = this.data.goodsItem
       let params = encodeURIComponent(`img_url=${img_url}&title=${title}&params_url=${this.data.params_url}`)
       console.log("urlurlurl", `/page/customerService/customerService?params=${params}`)
       if (this.data.goodsItem.resource_type === 4) {
@@ -517,6 +518,12 @@ Component({
         })
 
       } else {
+        // PC 复制链接
+        const { isPC, isDevtools } = getApp().globalData.system
+        if (isPC || isDevtools) {
+          this.copyLink(target_url)
+          return
+        }
         // 暂时屏蔽内嵌H5详情页，拉起客服
         wx && wx.navigateTo({
           url: '/page/customerService/customerService' + `?params=${params}`
@@ -644,6 +651,17 @@ Component({
     },
     stopEvent() {
       return
+    },
+    copyLink(link) {
+      wx.setClipboardData({
+        data: link,
+        success() {
+          wx.showToast({
+            title: '商品链接已复制，请用浏览器打开',
+            icon: 'none',
+          })
+        },
+      })
     }
   }
 })

package/miniprogram_dist/GoodsItem/index.scss

@@ -0,0 +1,323 @@
+@import "..\\common/css/theme.wxss";
+
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin goods-item {
+  display: flex;
+  min-height: vmin(180);
+  background: #ffffff;
+  margin: 0 vmin(32) 0 vmin(32);
+  border-radius: vmin(16);
+  padding: vmin(16);
+  flex-direction: column;
+
+  .main-card{
+    display: flex;
+    flex-direction: row;
+    .left {
+      position: relative;
+      width: vmin(240);
+      height: vmin(180);
+      .index {
+        border-radius: vmin(16) 0 vmin(16) 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: vmin(36);
+        height: vmin(28);
+        padding: vmin(1) vmin(6);
+        font-size: vmin(20);
+        background: rgba(0,0,0,0.6);
+        color: #FFFFFF;
+      }
+      .ios-index {
+        background: rgba(0,0,0,0.25);
+        backdrop-filter: blur(vmin(24));
+      }
+      .goods-type {
+        position: absolute;
+        right: vmin(8);
+        bottom: vmin(8);
+        padding: vmin(8) vmin(10);
+        background: rgba(0,0,0,0.4);
+        border-radius: vmin(8);
+        color: #fff;
+        font-size: vmin(20);
+        width: fit-content;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: vmin(20);
+        font-weight: 500;
+      }
+      .goods-explaining {
+        position: absolute;
+        width: vmin(240);
+        height: vmin(36);
+        bottom: 0vmin;
+        left: 0vmin;
+      }
+      .ios-goods-type {
+        background: rgba(0,0,0,0.25) !important;
+        backdrop-filter: blur(vmin(24));
+      }
+    }
+    .right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-left: vmin(16);
+      height: vmin(180);
+      width: calc(100% - vmin(256));
+      .line-one {
+        display: flex;
+        align-items: center;
+        height: vmin(36);
+        .activity-type {
+          background-color: #FFF3EB;
+          color: #FF781F;
+          padding: 0vmin vmin(8);
+          font-size: vmin(20);
+          height: vmin(32);
+          line-height: vmin(36);
+          flex-shrink: 0;
+          margin-right: vmin(8);
+          border-radius: vmin(4);
+          display: flex;
+          width: max-content;
+          align-items: center;
+          font-weight: 500;
+        }
+        .super-activity-type{
+          background: linear-gradient(180.25deg, rgba(51,51,51,1) 0%, rgba(81.6,81.6,81.6,1) 68%, rgba(51,51,51,1) 100%);
+          color: rgba(255,120,31,1);
+          padding: vmin(4) vmin(8);
+          font-size: vmin(20);
+          height: vmin(32);
+          width: max-content;
+          line-height: vmin(36);
+          flex-shrink: 0;
+          margin-right: vmin(8);
+          border-radius: vmin(4);
+          display: flex;
+          font-weight: 500;
+          align-items: center;
+          .super-activity-txt{
+            background: linear-gradient(to right, #FFE4AD, #FFC266);
+            -webkit-background-clip: text;
+            color: transparent;
+          }
+        }
+        .goods-title {
+          font-size: vmin(28);
+          color: #333333;
+          word-break: break-all;
+          display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          display: inline-block;
+          vertical-align: middle;
+          line-height: vmin(36);
+          font-weight: 500;
+        }
+      }
+      .sec-kill {
+        color: #FF781F;
+        font-size: vmin(20);
+        line-height: vmin(32);
+        margin: vmin(8) 0;
+      }
+      .left-stock {
+        color: #999999;
+        font-size: vmin(20);
+        height: vmin(24);
+        display: flex;
+        align-items: center;
+        .split{
+          display: inline-block;
+          border-left: vmin(1) solid #999999;
+          width: vmin(2);
+          height: vmin(24);
+          margin: 0 vmin(12);
+        }
+      }
+      .line-three {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        .price {
+          position: relative;
+          min-height: vmin(40);
+          font-weight: 500;
+          .price-flow{
+            color: #FF5429;
+            font-size: vmin(24);
+          }
+          .price-show {
+            color: #FF5429;
+            font-size: vmin(36);
+          }
+          .price-line {
+            font-size: vmin(20);
+            text-decoration: line-through;
+            color: #999999;
+            margin-left: vmin(8);
+          }
+        }
+        .buy-btn {
+          font-size: vmin(24);
+          border-radius: vmin(40);
+          width: vmin(160);
+          height: vmin(56);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          line-height: vmin(56);
+          font-weight: 500;
+          background: linear-gradient(270deg, rgba(254,101,0,1) 0%, rgba(255,65,2,1) 100%);
+        }
+        .buy-btn-teacher{
+          font-size: vmin(24);
+          border-radius: vmin(40);
+          width: vmin(160);
+          height: vmin(56);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          line-height: vmin(56);
+          font-weight: 500;
+          background: linear-gradient(270deg, rgba(254,101,0,1) 0%, rgba(255,65,2,1) 100%);
+          .load{
+            width: vmin(24);
+            height: vmin(24);
+            animation: turn 1s linear infinite;
+            margin-right: vmin(8);
+          }
+        }
+        .no-stock-btn{
+          font-size: vmin(24);
+          border-radius: vmin(40);
+          width: vmin(160);
+          height: vmin(56);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          line-height: vmin(56);
+          font-weight: 500;
+          opacity: 40%;
+          background: linear-gradient(270deg, rgba(254,101,0,1) 0%, rgba(255,65,2,1) 100%);
+        }
+        .see-btn {
+          font-size: vmin(24);
+          border-radius: vmin(40);
+          width: vmin(160);
+          height: vmin(56);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          line-height: vmin(56);
+          font-weight: 500;
+          margin-left: inherit;
+          margin-right: inherit;
+          background: linear-gradient(270deg, rgba(254,101,0,1) 0%, rgba(255,65,2,1) 100%);
+        }
+        .buy-btn-preferential{
+          font-size: vmin(24);
+          border-radius: vmin(40);
+          padding: 0 vmin(10);
+          min-width: vmin(160);
+          height: vmin(68);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          flex-flow: column;
+          line-height: vmin(32);
+          background: linear-gradient(270deg, rgba(254,101,0,1) 0%, rgba(255,65,2,1) 100%);
+          .go-buy{
+            font-size: vmin(24);
+            font-weight: 500;
+          }
+          .preferential-flow{
+            color: rgba(255,255,255,1);
+            font-size: vmin(20);
+          }
+          .preferential-show{
+            font-size: vmin(28);
+            color: rgba(255,255,255,1);
+          }
+        }
+      }
+    }
+    .teacher-switch{
+      height: vmin(32);
+      background: #fff;
+      display: flex;
+      margin-top: vmin(16);
+      .switch-txt{
+        opacity: 1;
+        color: rgba(51,51,51,1);
+        font-size: vmin(24);
+        font-weight: 400;
+        font-family: "PingFang SC";
+        margin-left: vmin(16);
+      }
+    }
+  }
+}
+
+@keyframes turn {
+  0% {
+      transform: rotate(0deg);
+  }
+
+  20% {
+      transform: rotate(72deg);
+  }
+
+  40% {
+      transform: rotate(144deg);
+  }
+
+  60% {
+      transform: rotate(216deg);
+  }
+
+  80% {
+      transform: rotate(288deg);
+  }
+
+  100% {
+      transform: rotate(360deg);
+  }
+}
+
+.goods-item {
+  @include goods-item;
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+  .goods-item {
+    @include goods-item;
+  }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+  .goods-item {
+    @include goods-item;
+  }
+}

package/miniprogram_dist/GoodsItem/index.wxml

@@ -14,7 +14,7 @@
         <view class="left">
           <!-- 该封面组件是鹅直播上的全局组件 -->
           <imagePoster
-            borderRadius="{{'2.13vmin'}}"
+            borderRadius="{{imageRadius}}"
             src="{{filterSrc}}"
           />
           <text class="index {{isIOS && 'ios-index'}}" style="{{!isStudent ? 'border-radius: 1.07vmin 0 1.07vmin 0;' : ''}}">{{goodsItem.order_weight}}</text>