add modal for tid1878

src/subpackage/mall/components/bottom_modal.vue

@@ -1,7 +1,8 @@
 <template>
-    <view class="bottom-modal">
+    <view class="bottom-modal" @touchmove.stop.prevent="_=>false" v-show="show">
         <view class="bm-container">
-            <view class="bc-title">配送说明</view>
+            <view class="bc-title" v-if="title">{{ title }}</view>
+            <slot></slot>
             <view class="bc-bot-btn">
                 <view class="bbb-item">关闭</view>
             </view>
@@ -11,7 +12,23 @@
 
 <script>
 export default {
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        show: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+        }
+    },
+    methods: {
 
+    }
 }
 </script>
 

src/subpackage/mall/pages/goods_info.vue

@@ -103,18 +103,21 @@
             </view>
         </view>
         
-        <bottom-modal></bottom-modal>
+        <service-modal ref="serviceModal"></service-modal>
+        <delivery-modal ref="deliveryModal"></delivery-modal>
     </view>
 </template>
 
 <script>
 import { routeTo, showLoad, hideLoad, showModal,  tsRoute, jsonStr, jsonPar } from "@/utils/util.js";
-import bottomModal from "../components/bottom_modal.vue";
+import serviceModal from "./modules/goods_info/service_modal.vue";
+import deliveryModal from "./modules/goods_info/delivery_modal.vue";
 import { MALL_API } from "../js/api";
 import server from "../js/server";
 export default {
     components: {
-        bottomModal
+        serviceModal,
+        deliveryModal,
     },
     data(){
         return {
@@ -481,4 +484,6 @@ export default {
             }
         }
     }
+
+    
 </style>

src/subpackage/mall/pages/modules/goods_info/delivery_modal.vue

@@ -0,0 +1,55 @@
+<template>
+    <bottom-modal title="配送说明" :show="isShow">
+        <scroll-view class="gi-desc" scroll-y>
+            <view class="gd-item">撒发大沙发舒服</view>
+            <view class="gd-item">撒发大沙发舒服撒发大沙发舒服</view>
+            <view class="gd-item" v-for="i in 10" :key="i">撒发大沙发舒服撒发大沙发舒服撒发大沙发舒服</view>
+        </scroll-view>
+    </bottom-modal>
+</template>
+
+<script>
+import bottomModal from "../../../components/bottom_modal.vue";
+export default {
+    components: { bottomModal },
+    props: {
+        explianStr: {
+            type: String,
+            default: ''
+        }
+    },
+    computed: {
+        explainArr(){
+            let { explianStr } = this;
+            if(!explianStr)return [];
+            
+        }
+    },
+    data() {
+        return {
+            isShow: false     
+        }
+    },
+    methods: {
+        show(){
+            this.isShow = true
+        },
+        hide(){
+            this.isShow = false
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .gi-desc{
+        padding: 54upx 10upx 0upx;
+        height: 334rpx;
+        .gd-item{
+            @include flcw(24upx, 34upx, #9a9a9d);
+            &+.gd-item{
+                margin-top: 36upx;
+            }
+        }
+    }
+</style>

src/subpackage/mall/pages/modules/goods_info/service_modal.vue

@@ -0,0 +1,48 @@
+<template>
+    <bottom-modal title="服务说明">
+        <scroll-view class="gi-service" scroll-y>
+            <view class="gs-item" v-for="i in 10" :key="i">
+                <view class="gi-tit">
+                    <image class="gt-icon" mode="aspectFit" src="/subpackage/mall/static/images/selected.png"></image>
+                    <text class="gt-txt">7天无理由退换货</text>
+                </view>
+                <view class="gi-line">支持物流配送，全国范围包邮，部分偏远地区仅发EMS快递。港澳台地区暂不支持配送</view>
+            </view>
+        </scroll-view>
+    </bottom-modal>
+</template>
+
+<script>
+import bottomModal from "../../../components/bottom_modal.vue";
+export default {
+    components: { bottomModal }
+}
+</script>
+
+<style lang="scss">
+    .gi-service{
+        padding: 54upx 10upx 0upx;
+        height: 540rpx;
+        .gs-item{
+            .gi-tit{
+                @include tHide;
+                .gt-icon{
+                    vertical-align: middle;
+                    margin-right: 8upx;
+                    width: 24rpx;
+                    height: 24rpx;
+                }
+                .gt-txt{
+                    @include flcw(28upx, 40upx, #333);
+                }
+            }
+            .gi-line{
+                margin-top: 10upx;
+                @include flcw(24upx, 34upx, #9a9a9d);
+            }
+            &+.gs-item{
+                margin-top: 30upx;
+            }
+        }
+    }
+</style>