Переглянути джерело

优惠券标签样式调整

yuwenjun1997 2 роки тому
батько
коміт
0a87e57a9c

+ 3 - 1
manifest.json

@@ -53,7 +53,9 @@
         "appid" : "wx2c3b0a7f343235b1",
         "setting" : {
             "urlCheck" : false,
-            "minified" : true
+            "minified" : true,
+            "es6" : true,
+            "postcss" : true
         },
         "usingComponents" : true,
         "optimization" : {

+ 17 - 10
pages/views/goods/components/goods-coupon-list/goods-coupon-list.vue

@@ -1,7 +1,9 @@
 <template>
     <view class="coupon-section">
         <view class="coupon-tags">
-            <view class="tag" v-for="item in couponList" v-text="item.couponTitle" :key="item.couponId"></view>
+            <view class="tag" v-for="item in couponList" :key="item.couponId">
+                <view class="coupon-label" v-text="item.couponTitle"></view>
+            </view>
         </view>
         <view class="more" @click="$emit('click')">
             <text>领券</text>
@@ -37,16 +39,21 @@ export default {
             background: #fff3f7;
             border: 1rpx solid #ff457b;
             border-radius: 4rpx;
-            color: #ff457b;
-            font-size: 22rpx;
-            max-width: 250rpx;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            vertical-align: middle;
+
+            .coupon-label {
+                font-size: 22rpx;
+                max-width: 230rpx;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                color: #ff457b;
 
-            &::before {
-                content: '券 |';
-                margin: 0 6rpx;
+                &::before {
+                    content: '券 |';
+                    margin: 0 6rpx;
+                    margin-left: 0;
+                }
             }
 
             &:first-child {

+ 17 - 10
pages/views/goods/components/goods-coupon-section/goods-coupon-section.vue

@@ -4,7 +4,9 @@
             <view class="label">优惠券:</view>
             <view class="coupon-tags">
                 <template v-for="(item, index) in couponList">
-                    <view class="tag" v-text="item.couponTitle" v-if="index < 2" :key="item.couponId"></view>
+                    <view class="tag" v-if="index < 2" :key="item.couponId">
+                        <view class="coupon-label" v-text="item.couponTitle"></view>
+                    </view>
                 </template>
                 <text class="ellipsis" v-if="couponList.length > 2">...</text>
             </view>
@@ -49,16 +51,21 @@ export default {
                 background: #fff3f7;
                 border: 1rpx solid #ff457b;
                 border-radius: 4rpx;
-                color: #ff457b;
-                font-size: 22rpx;
-                max-width: 250rpx;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
+                vertical-align: middle;
+
+                .coupon-label {
+                    font-size: 22rpx;
+                    max-width: 236rpx;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    color: #ff457b;
 
-                &::before {
-                    content: '券 |';
-                    margin: 0 6rpx;
+                    &::before {
+                        content: '券 |';
+                        margin: 0 6rpx;
+                        margin-left: 0;
+                    }
                 }
 
                 &:first-child {

+ 2 - 2
pages/views/goods/goods-detail.vue

@@ -428,9 +428,9 @@ export default {
             const obj = Object.assign({}, coupon)
             // 添加标题
             if (coupon.noThresholdFlag > 0) {
-                obj.couponTitle = `减¥${coupon.couponAmount.toFixed(2)}`
+                obj.couponTitle = `减¥${coupon.couponAmount}`
             } else {
-                obj.couponTitle = `满¥${coupon.touchPrice.toFixed(2)}减¥${coupon.couponAmount.toFixed(2)}`
+                obj.couponTitle = `满¥${coupon.touchPrice}减¥${coupon.couponAmount}`
             }
             // 添加优惠券状态
             if (obj.useStatus === 0) {