特殊商品退货须知

pages/views/goods/components/goods-return-instructions/goods-return-instructions.vue

@@ -8,16 +8,20 @@
             <view class="popup-content">
                 <view class="close iconfont icon-iconfontguanbi" @click="close"></view>
                 <view class="title">特殊商品退货须知</view>
-                <view class="content">
-                    为保障会员权益，特殊类商品（包括耗材/配件/私密商品等），除外观跟质量问题之外，其他原因均不支持退货！
-                </view>
+                <view class="content" v-html="content"></view>
             </view>
         </uni-popup>
     </view>
 </template>
 
-<script> 
+<script>
 export default {
+    props: {
+        content: {
+            type: String,
+            default: ''
+        }
+    },
     methods: {
         onShowDetail() {
             this.$refs.popup.open()

pages/views/goods/goods-detail.vue

@@ -43,10 +43,10 @@
             <view class="section" v-if="couponList.length > 0">
                 <goods-coupon-section @click="couponVisiable = true" :couponList="couponList"></goods-coupon-section>
             </view>
-            
+
             <!-- 特殊商品退货须知 -->
-            <view class="section">
-                <goods-return-instructions></goods-return-instructions>
+            <view class="section" v-if="returnGoodsStutas">
+                <goods-return-instructions :content="helpContent"></goods-return-instructions>
             </view>
 
             <!-- 锚点1 -->
@@ -201,6 +201,12 @@ export default {
             } else {
                 return this.productInfo?.couponInfo?.split('|')[1]
             }
+        },
+        returnGoodsStutas() {
+            return this.productInfo.returnGoodsStutas && this.productInfo.returnGoodsStutas === 2
+        },
+        helpContent() {
+            return this.productInfo.helpContent
         }
     },
     onPageScroll(e) {
@@ -280,7 +286,7 @@ export default {
                 this.goodsBuyPopup = false
                 return
             }
-            
+
             console.log(detail)
 
             // 立即购买

pages/views/order/components/order-return-instructions/order-return-instructions.vue

@@ -5,7 +5,7 @@
                 <checkbox-group @change="onCheckBoxGroupChange">
                     <label>
                         <checkbox value="agreement" v-show="false" />
-                        <view class="iconfont" :class="[isActive ? 'icon-yixuanze' : 'icon-weixuanze']"></view>
+                        <view class="iconfont" :class="[isActive ? 'icon-xuanze' : 'icon-weixuanze']"></view>
                     </label>
                 </checkbox-group>
             </view>
@@ -20,11 +20,7 @@
                 <view class="popup-content">
                     <view class="close iconfont icon-iconfontguanbi" @click="popupShow = false"></view>
                     <view class="title">特殊商品退货须知</view>
-                    <scroll-view :scroll-y="true" class="content">
-                        <view>
-                            为保障会员权益，特殊类商品（包括耗材/配件/私密商品等），除外观跟质量问题之外，其他原因均不支持退货！
-                        </view>
-                    </scroll-view>
+                    <scroll-view :scroll-y="true" class="content"><view v-html="content"></view></scroll-view>
                     <view class="confirm">
                         <tui-button type="base" width="420rpx" height="84rpx" shape="circle" @click="popupShow = false">
                             确定
@@ -38,6 +34,12 @@
 
 <script>
 export default {
+    props: {
+        content: {
+            type: String,
+            default: ''
+        }
+    },
     data() {
         return {
             popupShow: false,
@@ -86,8 +88,8 @@ export default {
             color: #b2b2b2;
         }
 
-        .icon-yixuanze {
-            color: #e15616;
+        .icon-xuanze {
+            color: #f83c6c;
         }
     }
 }

pages/views/order/components/order-submit/order-submit.vue

@@ -1,7 +1,12 @@
 <template>
     <view class="order-submit">
         <simple-safe-view>
-            <order-return-instructions></order-return-instructions>
+            <template v-if="showAgreement">
+                <order-return-instructions
+                    :content="agreementContent"
+                    @change="handleAgreementChange"
+                ></order-return-instructions>
+            </template>
             <view class="control">
                 <view class="count">共{{ orderInfo.allCount }}件商品</view>
                 <view class="price">
@@ -13,11 +18,18 @@
                         共减：￥{{ orderInfo.discountedPrice | priceFormat }}
                     </view>
                 </view>
-                <tui-button type="base" width="210rpx" height="80rpx" shape="circle" @click="$emit('submit')">
+                <tui-button type="base" width="210rpx" height="80rpx" shape="circle" @click="handleSubmit">
                     提交订单
                 </tui-button>
             </view>
         </simple-safe-view>
+
+        <!-- 订单提交拦截 -->
+        <tui-modal
+            :show="showModel"
+            content="请先阅读《特殊商品退货须知》并勾选后再提交订单～"
+            @click="showModel = false"
+        ></tui-modal>
     </view>
 </template>
 
@@ -25,13 +37,36 @@
 export default {
     name: 'order-submit',
     props: {
+        showAgreement: {
+            type: Boolean,
+            default: false
+        },
+        agreementContent: {
+            type: String,
+            default: ''
+        },
         orderInfo: {
             type: Object,
             default: () => {}
         }
     },
     data() {
-        return {}
+        return {
+            agreementActive: false,
+            showModel: false
+        }
+    },
+    methods: {
+        handleAgreementChange(val) {
+            this.agreementActive = val
+        },
+        handleSubmit() {
+            if (this.showAgreement && !this.agreementActive) {
+                this.showModel = true
+                return
+            }
+            this.$emit('submit')
+        }
     }
 }
 </script>

pages/views/order/order-create.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="order-create" :style="{paddingBottom: showInstructions ? '164rpx' : '100rpx'}">
+    <view class="order-create" :style="{ paddingBottom: showInstructions ? '164rpx' : '100rpx' }">
         <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>
         <!-- 地址选择 -->
         <view class="sticky-top">
@@ -54,7 +54,12 @@
             </view>
         </simple-safe-view>
         <!-- 提交订单 -->
-        <order-submit :orderInfo="orderInfo" @submit="onSubmit"></order-submit>
+        <order-submit
+            :orderInfo="orderInfo"
+            @submit="onSubmit"
+            :showAgreement="returnGoodsStutas"
+            :agreementContent="helpContent"
+        ></order-submit>
         <!-- 优惠券列表 -->
         <cm-coupon-popup
             :visiable="couponVisiable"
@@ -154,7 +159,10 @@ export default {
             // 分享数据
             posterData: {},
 
-            shareStatus: false
+            shareStatus: false,
+
+            returnGoodsStutas: false,
+            helpContent: ''
         }
     },
     computed: {
@@ -193,7 +201,7 @@ export default {
                 allCount: this.allCount
             }
         },
-        showInstructions(){
+        showInstructions() {
             return true
         }
     },
@@ -385,6 +393,9 @@ export default {
                 if (res.data.receiveCouponList.length > 0) {
                     this.initCouponList(res.data.receiveCouponList)
                 }
+                // 特殊商品退货须知
+                this.returnGoodsStutas = res.data.returnGoodsStutas && res.data.returnGoodsStutas === 2 // 1:可以 2:不可以
+                this.helpContent = res.data.helpContent
             } catch (e) {
                 console.log(e)
             } finally {

pages/views/order/order-detail.vue

@@ -6,9 +6,7 @@
             <order-choose-address :addressInfo="userInfo" :disabled="true"></order-choose-address>
         </view>
         <!-- 特殊商品退货须知 -->
-        <view class="return-instructions">
-            为保障会员权益，特殊类商品（包括耗材/配件/私密商品等），除外观跟质量问题之外，其他原因均不支持退货！
-        </view>
+        <view class="return-instructions" v-if="returnGoodsStutas" v-html="helpContent"></view>
         <!-- 订单商品列表-->
         <view class="shop-list">
             <view class="shop-section" v-for="shopInfo in shopOrderList" :key="shopInfo.shopId">
@@ -90,7 +88,9 @@ export default {
             orderInfo: {},
             shopOrderList: [],
             userInfo: {},
-            isCollapse: false
+            isCollapse: false,
+            returnGoodsStutas: false,
+            helpContent: ''
         }
     },
     computed: {
@@ -99,10 +99,10 @@ export default {
     onLoad(options) {
         this.orderId = options.orderId
         this.fetchOrderDetail()
-        this.$on('orderAction', (type) => {
-            if(type === 'delete'){
+        this.$on('orderAction', type => {
+            if (type === 'delete') {
                 this.$router.navigateBack(1)
-            }else{
+            } else {
                 this.fetchOrderDetail()
             }
         })
@@ -115,6 +115,9 @@ export default {
                 this.orderInfo = res.data.order
                 this.shopOrderList = res.data.shopOrderList
                 this.userInfo = res.data.userInfo
+                // 特殊商品退货须知
+                this.returnGoodsStutas = res.data.returnGoodsStutas && res.data.returnGoodsStutas === 2 // 1:可以 2:不可以
+                this.helpContent = res.data.helpContent
             } catch (e) {
                 console.log(e)
             }
@@ -152,12 +155,12 @@ export default {
     border-top: 1px solid #eee;
 }
 
-.return-instructions{
+.return-instructions {
     font-size: 26rpx;
-    color: #E15616;
+    color: #e15616;
     line-height: 42rpx;
     padding: 32rpx 50rpx;
-    background-color: #FFFAF8;
+    background-color: #fffaf8;
     text-align: justify;
 }