feat(specialArea): 商品列表角标展示代码迁移

pages/specialArea/list.vue

@@ -1,9 +1,3 @@
-<!--
- * @Descripttion:
- * @version:
- * @Author: kBank
- * @Date: 2022-11-21 15:11:22
--->
 <template>
   <view class="content">
     <backIcon :diff="diff"></backIcon>
@@ -78,7 +72,22 @@
               class="fly"
               v-show="item.preSaleStatus == 3 || item.isSale == 1"
             ></view>
-            <img :src="item.cover1" class="cover" alt="" />
+            <view class="image-container">
+              <img :src="item.cover1" class="cover" alt="" />
+              <!-- 三角形角标 -->
+              <view class="triangle-badge" v-if="item.warnMessage">
+                <view
+                  class="triangle-badge-text"
+                  :class="{
+                    'text-2': item.warnMessage.length === 2,
+                    'text-3': item.warnMessage.length === 3,
+                    'text-4': item.warnMessage.length === 4,
+                  }"
+                >
+                  {{ item.warnMessage }}
+                </view>
+              </view>
+            </view>
             <view class="goodList_ir">
               <view>
                 <span class="qzbq" v-if="item.prefixLabelTarget != undefined">{{
@@ -249,9 +258,17 @@ export default {
     //   })
     // }
     // 修改标题
+
+    // 获取一级分类并获取商品列表
+    // this.getClassIfy()
+
+    this.userInfo = uni.getStorageSync('User')
     const areaMap = {
       [REGIEST_AREA.id]: REGIEST_AREA.name,
-      [UPGRADE_AREA.id]: UPGRADE_AREA.name,
+      [UPGRADE_AREA.id]:
+        this.userInfo.memberSign == MEMBER_SIGN.ZERO_LEVEL
+          ? '会员专区'
+          : UPGRADE_AREA.name,
       [REPURCHASE_AREA.id]: REPURCHASE_AREA.name,
       [REISSUE_AREA.id]: REISSUE_AREA.name,
     }
@@ -260,11 +277,6 @@ export default {
       title: this.titLabel,
       success: () => {},
     })
-    // 获取一级分类并获取商品列表
-    // this.getClassIfy()
-
-    this.userInfo = uni.getStorageSync('User')
-
     this.pkCountry = this.userInfo.pkCountry || 1
     this.setSpecial({
       value: this.specialArea,
@@ -348,6 +360,7 @@ export default {
             title: '购物车添加成功',
             icon: 'success',
             mask: true,
+            duration: 500,
           })
           setTimeout(() => {
             this.$store.dispatch('getCarLength', this.specialArea).then(res => {
@@ -370,10 +383,10 @@ export default {
           hierarchy: 0,
         })
         .then(res => {
-          res.data.unshift({
-            classifyName: '全部',
-            pkId: '',
-          })
+          // res.data.unshift({
+          //   classifyName: '全部',
+          //   pkId: '',
+          // })
           this.oneList = res.data
           this.oneId = this.oneList[0] ? this.oneList[0].pkId : ''
           this.getClassIfyTwo(this.oneList[0].pkId)
@@ -609,12 +622,12 @@ export default {
     position: relative;
 
     .goodList_ir {
-      margin-left: 20rpx;
+      margin-left: 24rpx;
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      font-size: 24rpx;
+      font-size: 28rpx;
       font-family: Microsoft YaHei;
       font-weight: 400;
       color: #333333;
@@ -623,14 +636,14 @@ export default {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        font-size: 28rpx;
+        font-size: 32rpx;
         font-family: Source Han Sans CN;
         font-weight: 400;
         color: #f82c1a;
 
         img {
-          width: 56rpx;
-          height: 56rpx;
+          width: 60rpx;
+          height: 60rpx;
         }
       }
     }
@@ -646,8 +659,8 @@ export default {
   }
 
   .cover {
-    width: 152rpx;
-    height: 152rpx;
+    width: 200rpx;
+    height: 200rpx;
     background: #ffffff;
     border: 1px solid #eeeeee;
     border-radius: 10rpx;
@@ -655,7 +668,7 @@ export default {
 }
 
 .pv {
-  font-size: 22rpx;
+  font-size: 26rpx;
   font-family: Source Han Sans CN;
   font-weight: 400;
   color: #999999;
@@ -703,4 +716,52 @@ export default {
   border-radius: 20px;
   font-size: 14px;
 }
+
+.image-container {
+  position: relative;
+}
+
+.triangle-badge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-top: 100rpx solid #005bac;
+  border-right: 100rpx solid transparent;
+  border-radius: 10rpx 0 0 0;
+  z-index: 10;
+}
+
+.triangle-badge-text {
+  position: absolute;
+  color: #ffffff;
+  font-weight: 600;
+  line-height: 1;
+  transform: rotate(-45deg);
+  transform-origin: center;
+  white-space: nowrap;
+  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
+}
+
+/* 2个字样式 */
+.triangle-badge-text.text-2 {
+  top: -76rpx;
+  left: 10rpx;
+  font-size: 24rpx;
+}
+
+/* 3个字样式 */
+.triangle-badge-text.text-3 {
+  top: -70rpx;
+  left: -2rpx;
+  font-size: 24rpx;
+}
+
+/* 4个字样式 */
+.triangle-badge-text.text-4 {
+  top: -72rpx;
+  left: -4rpx;
+  font-size: 20rpx;
+}
 </style>