合并初始化

2023-12-11 09:24:16 +08:00
parent 376376b875
commit c5b1f3ac93
533 changed files with 82087 additions and 0 deletions
@@ -0,0 +1,121 @@
+<template>
+  <view>
+    <detail-cell
+      v-if="modelValue.length > 0"
+      label="保障"
+      :value="state.paramsTitle"
+      @click="state.show = true"
+    >
+    </detail-cell>
+    <su-popup :show="state.show" round="10" :showClose="true" @close="state.show = false">
+      <view class="ss-modal-box">
+        <view class="modal-header">服务保障</view>
+        <scroll-view
+          class="modal-content"
+          scroll-y="true"
+          :scroll-with-animation="true"
+          :show-scrollbar="false"
+          @touchmove.stop
+        >
+          <view class="sale-item ss-flex ss-col-top" v-for="item in modelValue" :key="item.id">
+            <image
+              class="title-icon ss-m-r-14"
+              :src="sheep.$url.cdn(item.image)"
+              mode="aspectFill"
+            ></image>
+            <view class="title-box">
+              <view class="item-title ss-m-b-20">{{ item.name }}</view>
+              <view class="item-value">{{ item.description }}</view>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="modal-footer ss-flex ss-row-center ss-m-b-20">
+          <button class="ss-reset-button save-btn ui-Shadow-Main" @tap="state.show = false"
+            >确定</button
+          >
+        </view>
+      </view>
+    </su-popup>
+  </view>
+</template>
+
+<script setup>
+  import { reactive, computed } from 'vue';
+  import sheep from '@/sheep';
+  import detailCell from './detail-cell.vue';
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  const state = reactive({
+    show: false,
+    paramsTitle: computed(() => {
+      let nameArray = [];
+      props.modelValue.map((item) => {
+        nameArray.push(item.name);
+      });
+      return nameArray.join(' · ');
+    }),
+  });
+</script>
+
+<style lang="scss" scoped>
+  .ss-modal-box {
+    border-radius: 30rpx 30rpx 0 0;
+    max-height: 730rpx;
+
+    .modal-header {
+      position: relative;
+      padding: 30rpx 20rpx 40rpx;
+      font-size: 36rpx;
+      font-weight: bold;
+    }
+
+    .modal-content {
+      padding: 0 30rpx;
+      max-height: 500rpx;
+      box-sizing: border-box;
+
+      .sale-item {
+        margin-bottom: 44rpx;
+
+        .title-icon {
+          width: 36rpx;
+          height: 36rpx;
+        }
+		.title-box{
+			flex: 1;
+		}
+
+        .item-title {
+          font-size: 28rpx;
+          font-weight: 500;
+          line-height: normal;
+        }
+
+        .item-value {
+          font-size: 26rpx;
+          font-weight: 400;
+          color: $dark-9;
+          line-height: 42rpx;
+        }
+      }
+    }
+
+    .modal-footer {
+      height: 120rpx;
+      background-color: #fff;
+
+      .save-btn {
+        width: 710rpx;
+        height: 80rpx;
+        border-radius: 40rpx;
+        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+        color: $white;
+      }
+    }
+  }
+</style>