feat: 2.4.1

src/js/helpers/data-helper.js

@@ -2,11 +2,11 @@ import axios from "axios";
 import icons from "./image-helper";
 let mallInfos = new Map();
 // dev
-export const code = "project-k5chc3vt0vkodjbmhl8rua";
-export const baseUrl = "https://iot-dev.123.1000my.com";
+// export const code = "project-k5chc3vt0vkodjbmhl8rua";
+// export const baseUrl = "https://iot-dev.123.1000my.com";
 // test
-// export const code = "project-skcn0gk6yb2xutkcsmjtra";
-// export const baseUrl = "https://project-iot.test.1000my.com";
+export const code = "project-skcn0gk6yb2xutkcsmjtra";
+export const baseUrl = "https://project-iot.test.1000my.com";
 export const post = async (url = "", data = {}) => {
   const response = await fetch(baseUrl + url, {
     method: "POST",
@@ -72,7 +72,7 @@ const getMallInfo = async ({ memberID }) => {
     activities,
     pois,
     menu,
-    shopCouponMap,
+    { shopCouponMap, userLevel },
   ] = await Promise.all([
     (async () => {
       try {
@@ -161,7 +161,7 @@ const getMallInfo = async ({ memberID }) => {
     (async () => {
       try {
         const {
-          data: { shopDetailShowCoupon },
+          data: { shopDetailShowCoupon, level: userLevel },
         } = await post(`/api/ar/v1/applet/MiniproBasicData`, {
           memberID,
         });
@@ -169,7 +169,7 @@ const getMallInfo = async ({ memberID }) => {
           (acc, nxt) => ({ ...acc, [nxt]: true }),
           {}
         );
-        return shopCouponMap;
+        return { shopCouponMap, userLevel };
       } catch (error) {
         console.error(error);
         return {};
@@ -250,6 +250,7 @@ const getMallInfo = async ({ memberID }) => {
     }, []),
     poiMap,
     menu,
+    userLevel,
   });
   const mallInfo = { mall, shopInfo, images };
   mallInfos.set(mall.code, mallInfo);

src/pages/Coupons/CouponList/CouponList.js

@@ -111,6 +111,7 @@ const CouponList = ({ memberID }) => {
                       width: (window.innerWidth / 375) * 64,
                       height: (window.innerWidth / 375) * 64,
                     }}
+                    alt="券图"
                   ></img>
                 ) : (
                   <Qrcode
@@ -125,6 +126,16 @@ const CouponList = ({ memberID }) => {
                   使用期限<div className="sep"></div>
                   {coupon.beginTime}至{coupon.endTime}
                 </div>
+                <div
+                  className={
+                    "level " +
+                    (coupon.level === "白银"
+                      ? "sil"
+                      : coupon.level === "铂金"
+                      ? "pla"
+                      : "")
+                  }
+                ></div>
               </div>
             ))}
 
@@ -157,6 +168,16 @@ const CouponList = ({ memberID }) => {
                 <div className="value">{modalCoupon.couponRules}</div>
               </>
             )}
+            <div
+              className={
+                "level " +
+                (modalCoupon.level === "白银"
+                  ? "sil"
+                  : modalCoupon.level === "铂金"
+                  ? "pla"
+                  : "")
+              }
+            ></div>
           </div>
         </Modal>
       )}

src/pages/Coupons/CouponList/CouponList.scss

@@ -151,6 +151,21 @@
         top: 5.333vw;
         left: 5.333vw;
       }
+      .level {
+        position: absolute;
+        width: 72px;
+        height: 24px;
+        top: 0;
+        right: 0;
+        background: center / cover no-repeat url(./ordBg.png);
+        border-radius: 0px 8px 0px 0;
+        &.sil {
+          background: center / cover no-repeat url(./silBg.png);
+        }
+        &.pla {
+          background: center / cover no-repeat url(./plaBg.png);
+        }
+      }
     }
     .coupon + .coupon {
       margin-top: 8px;
@@ -264,5 +279,20 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
+    .level {
+      position: absolute;
+      width: 72px;
+      height: 24px;
+      top: 0;
+      right: 0;
+      background: center / cover no-repeat url(./ordBg.png);
+      border-radius: 0px 8px 0px 0;
+      &.sil {
+        background: center / cover no-repeat url(./silBg.png);
+      }
+      &.pla {
+        background: center / cover no-repeat url(./plaBg.png);
+      }
+    }
   }
 }

src/pages/Coupons/Coupons.js

@@ -6,7 +6,7 @@ import ShopTabs from "./ShopTabs/ShopTabs";
 import CouponList from "./CouponList/CouponList";
 import ShopManager from "./ShopManager/ShopManager";
 
-const Coupons = ({ show, memberID, isShop = false }) => {
+const Coupons = ({ show, memberID, isShop = false, mall }) => {
   const isNotMember = !memberID;
   const [showCoupons, setShowCoupons] = useState(true);
   return (
@@ -35,6 +35,29 @@ const Coupons = ({ show, memberID, isShop = false }) => {
         </div>
       ) : (
         <>
+          {mall && (
+            <div
+              className={
+                "member " +
+                (mall.userLevel === "铂金"
+                  ? "pla"
+                  : mall.userLevel === "白银"
+                  ? "sil"
+                  : "ord")
+              }
+            >
+              {mall.userLevel}会员
+              <div className="meta1">
+                {mall.userLevel === "铂金"
+                  ? "Platinum"
+                  : mall.userLevel === "白银"
+                  ? "Silver"
+                  : "Ordinary"}{" "}
+                Member
+              </div>
+              <div className="meta2">欢迎加入会员！</div>
+            </div>
+          )}
           {isShop && (
             <ShopTabs
               showCoupons={showCoupons}

src/pages/Coupons/Coupons.scss

@@ -41,6 +41,50 @@
       }
     }
   }
+  .member {
+    position: relative;
+    width: calc(100vw - 20px);
+    height: 88px;
+    margin-top: 10px;
+    border-radius: 16px;
+    padding-top: 23px;
+    padding-left: 24px;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 25px;
+    .meta1 {
+      position: absolute;
+      top: 50px;
+      left: 24px;
+      font-weight: 600;
+      font-size: 10px;
+      line-height: 16px;
+      opacity: 0.6;
+    }
+    .meta2 {
+      position: absolute;
+      top: 29px;
+      right: 16px;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+    }
+    &.ord {
+      background: center / cover no-repeat url(./ordBg.png);
+      box-shadow: 6px 11px 16px rgba(193, 141, 111, 0.3);
+      color: #733c2a;
+    }
+    &.sil {
+      background: center / cover no-repeat url(./silBg.png);
+      box-shadow: 6px 11px 16px rgba(143, 155, 168, 0.3);
+      color: #474e5a;
+    }
+    &.pla {
+      background: center / cover no-repeat url(./plaBg.png);
+      box-shadow: 6px 11px 16px rgba(208, 150, 62, 0.3);
+      color: #9a7003;
+    }
+  }
   .shopTabs {
     display: flex;
     width: calc(100vw - 20px);

src/pages/Index/Index.js

@@ -643,6 +643,7 @@ const Index = () => {
           show={showCoupon}
           memberID={memberID}
           isShop={isShop}
+          mall={mall}
         ></Coupons>
         <div className={"hud " + (isTyping ? "bg" : "")}>
           {!(start || end) && (