特殊商品退货须知

components/views/cm-cart-supplier-area/cm-cart-supplier-area.vue

@@ -10,7 +10,7 @@
         </view>
         <!-- 有效商品列表 -->
         <checkbox-group @change="checkboxChange">
-            <view class="section" v-for="(item, index) in productList" :key="item.productId">
+            <view class="section" v-for="(item, index) in productList" :key="item.skuId">
                 <tui-divider height="60" v-if="index !== 0"></tui-divider>
                 <view class="checkbox">
                     <label
@@ -74,7 +74,7 @@ export default {
             return this.shopInfo.productList.filter(item => item.stock !== 0 || this.isDeleted)
         },
         isCheckedAll() {
-            return this.checkedList.length === this.selectProductList.length
+            return this.checkedList.length > 0 && this.checkedList.length === this.selectProductList.length
         }
     },
     methods: {
@@ -111,8 +111,8 @@ export default {
             this.$emit('unitChange', e)
         },
         onLabelClick(item) {
-            if (item.stock !== 0) return
-            this.$toast.error('请重新选择商品规格')
+            if (item.stock > 0) return
+            this.$toast.error('商品规格已失效')
         }
     }
 }

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

@@ -0,0 +1,84 @@
+<template>
+    <view class="goods-return-instructions">
+        <view class="section" @click="onShowDetail">
+            <view class="label">特殊商品退货须知</view>
+            <view class="iconfont icon-chakangengduo more"></view>
+        </view>
+        <uni-popup ref="popup" type="bottom">
+            <view class="popup-content">
+                <view class="close iconfont icon-iconfontguanbi" @click="close"></view>
+                <view class="title">特殊商品退货须知</view>
+                <view class="content">
+                    为保障会员权益，特殊类商品（包括耗材/配件/私密商品等），除外观跟质量问题之外，其他原因均不支持退货！
+                </view>
+            </view>
+        </uni-popup>
+    </view>
+</template>
+
+<script> 
+export default {
+    methods: {
+        onShowDetail() {
+            this.$refs.popup.open()
+        },
+        close() {
+            this.$refs.popup.close()
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-return-instructions {
+    padding: 24rpx;
+    background-color: #fff;
+    .section {
+        @extend .cm-flex-between;
+        font-size: 28rpx;
+        color: #666666;
+
+        .iconfont {
+            font-size: 28rpx;
+            color: #666;
+        }
+    }
+}
+
+.popup-content {
+    position: relative;
+    padding: 32rpx;
+
+    background-color: #fff;
+    border-radius: 16rpx 16rpx 0 0;
+
+    &::after {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: 80rpx;
+        bottom: -80rpx;
+        left: 0;
+        background-color: #fff;
+    }
+
+    .close {
+        position: absolute;
+        right: 24rpx;
+        top: 24rpx;
+        color: #999;
+        font-size: 32rpx;
+    }
+    .title {
+        text-align: center;
+        font-size: 34rpx;
+        color: #333;
+        font-weight: bold;
+    }
+    .content {
+        line-height: 42rpx;
+        font-size: 26rpx;
+        padding: 24rpx 0;
+    }
+}
+</style>

pages/views/goods/goods-detail.vue

@@ -43,6 +43,11 @@
             <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>
 
             <!-- 锚点1 -->
             <view id="anchor-1" class="anchor"></view>
@@ -276,7 +281,7 @@ export default {
                 return
             }
             
-            console.log(detail);
+            console.log(detail)
 
             // 立即购买
             if (detail.type === 'buy') {

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

@@ -0,0 +1,143 @@
+<template>
+    <view class="goods-return-instructions">
+        <view class="section">
+            <view class="checkbox">
+                <checkbox-group @change="onCheckBoxGroupChange">
+                    <label>
+                        <checkbox value="agreement" v-show="false" />
+                        <view class="iconfont" :class="[isActive ? 'icon-yixuanze' : 'icon-weixuanze']"></view>
+                    </label>
+                </checkbox-group>
+            </view>
+            <view class="label">
+                提交订单前，请先阅读
+                <text @click="popupShow = true">《特殊商品退货须知》</text>
+            </view>
+        </view>
+        <view class="mask" v-if="popupShow"></view>
+        <uni-transition :show="popupShow" ref="ani">
+            <template>
+                <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>
+                    <view class="confirm">
+                        <tui-button type="base" width="420rpx" height="84rpx" shape="circle" @click="popupShow = false">
+                            确定
+                        </tui-button>
+                    </view>
+                </view>
+            </template>
+        </uni-transition>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            popupShow: false,
+            checkedList: []
+        }
+    },
+    computed: {
+        isActive() {
+            return this.checkedList.indexOf('agreement') > -1
+        }
+    },
+    methods: {
+        onShowDetail() {
+            this.popupShow = true
+        },
+        close() {
+            this.popupShow = false
+        },
+        onCheckBoxGroupChange(e) {
+            this.checkedList = e.detail.value
+            this.$emit('change', this.isActive)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-return-instructions {
+    background-color: #fffaf8;
+    .section {
+        display: flex;
+        align-items: center;
+        font-size: 24rpx;
+        height: 64rpx;
+        padding: 0 32rpx;
+        color: #333333;
+        border-bottom: 1px solid #eee;
+        box-sizing: border-box;
+        text {
+            color: #1890f9;
+        }
+        .checkbox {
+            margin-right: 16rpx;
+        }
+        .icon-weixuanze {
+            color: #b2b2b2;
+        }
+
+        .icon-yixuanze {
+            color: #e15616;
+        }
+    }
+}
+
+.mask {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 996;
+}
+
+.popup-content {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 580rpx;
+    box-sizing: border-box;
+    padding: 40rpx 50rpx 30rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+    z-index: 997;
+
+    .close {
+        position: absolute;
+        right: 24rpx;
+        top: 24rpx;
+        color: #999;
+        font-size: 32rpx;
+    }
+    .title {
+        text-align: center;
+        font-size: 34rpx;
+        color: #333;
+        font-weight: bold;
+    }
+    .content {
+        line-height: 42rpx;
+        font-size: 26rpx;
+        margin-top: 50rpx;
+        max-height: 200rpx;
+        color: #333333;
+    }
+    .confirm {
+        display: flex;
+        justify-content: center;
+        margin: 50rpx auto 0;
+    }
+}
+</style>

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

@@ -1,6 +1,7 @@
 <template>
     <view class="order-submit">
         <simple-safe-view>
+            <order-return-instructions></order-return-instructions>
             <view class="control">
                 <view class="count">共{{ orderInfo.allCount }}件商品</view>
                 <view class="price">

pages/views/order/order-create.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="order-create">
+    <view class="order-create" :style="{paddingBottom: showInstructions ? '164rpx' : '100rpx'}">
         <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>
         <!-- 地址选择 -->
         <view class="sticky-top">
@@ -192,6 +192,9 @@ export default {
                 discountedPrice: this.discountedPrice,
                 allCount: this.allCount
             }
+        },
+        showInstructions(){
+            return true
         }
     },
     onLoad(options) {
@@ -479,7 +482,7 @@ export default {
     font-size: 20rpx;
 }
 .order-create {
-    padding-bottom: 100rpx;
+    // padding-bottom: 100rpx;
     color: #333;
 
     .shop-list {

pages/views/order/order-detail.vue

@@ -5,6 +5,10 @@
             <!-- 收货地址 -->
             <order-choose-address :addressInfo="userInfo" :disabled="true"></order-choose-address>
         </view>
+        <!-- 特殊商品退货须知 -->
+        <view class="return-instructions">
+            为保障会员权益，特殊类商品（包括耗材/配件/私密商品等），除外观跟质量问题之外，其他原因均不支持退货！
+        </view>
         <!-- 订单商品列表-->
         <view class="shop-list">
             <view class="shop-section" v-for="shopInfo in shopOrderList" :key="shopInfo.shopId">
@@ -124,7 +128,7 @@ export default {
 
 <style lang="scss" scoped>
 .order-detail {
-    margin-bottom: 162rpx;
+    padding-bottom: 150rpx;
 }
 
 .order-top {
@@ -145,6 +149,16 @@ export default {
     background-color: #fff;
     box-sizing: border-box;
     padding: 12rpx 24rpx;
+    border-top: 1px solid #eee;
+}
+
+.return-instructions{
+    font-size: 26rpx;
+    color: #E15616;
+    line-height: 42rpx;
+    padding: 32rpx 50rpx;
+    background-color: #FFFAF8;
+    text-align: justify;
 }
 
 .shop-list {