init

fuintUniapp/pages/prestore/components/Popup.vue

@@ -0,0 +1,71 @@
+<template>
+  <coupon-popup :value="value" @input="onChangeValue" :couponInfo="couponInfo" :storeRule="storeRule" border-radius="20" :maskCloseAble="true"
+    @open="openPopup" @close="closePopup"/>
+</template>
+
+<script>
+  import { setCartTotalNum } from '@/utils/app'
+  import * as CartApi from '@/api/cart'
+  import CouponPopup from '@/components/prestore-popup'
+
+  export default {
+    components: {
+      CouponPopup
+    },
+    props: {
+      // true 组件显示 false 组件隐藏
+      value: {
+        Type: Boolean,
+        default: false
+      },
+      // 卡券详情信息
+      couponInfo: {
+        type: Object,
+        default: {}
+      },
+      // 预存规则
+      storeRule: {
+        type: Array,
+        default: []
+      }
+    },
+
+    data() {
+      return {}
+    },
+
+    created() {
+      // empty
+    },
+
+    methods: {
+
+      // 监听组件显示隐藏
+      onChangeValue(val) {
+        this.$emit('input', val)
+      },
+
+      /**
+       * 获取卡券信息
+       */
+      findCouponInfo() {
+        return new Promise((resolve, reject) => {
+          resolve(couponInfo)
+        })
+      },
+
+      // sku组件 开始-----------------------------------------------------------
+      openPopup() {
+        // console.log("监听 - 打开sku组件")
+      },
+
+      closePopup() {
+        // console.log("监听 - 关闭sku组件")
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

fuintUniapp/pages/prestore/components/Service.vue

@@ -0,0 +1,158 @@
+<template>
+  <view v-if="list.length" class="service-wrapper">
+    <!-- 服务简述 -->
+    <view class="service-simple" @click="handlePopup">
+      <view class="s-list">
+        <view class="s-item" v-for="(item, index) in list" :key="index">
+          <text class="item-icon iconfont icon-fuwu"></text>
+          <text class="item-val">{{ item.name }}</text>
+        </view>
+      </view>
+      <!-- 扩展箭头 -->
+      <view class="s-arrow f-26 col-9 t-r">
+        <text class="iconfont icon-xiangyoujiantou"></text>
+      </view>
+    </view>
+    <!-- 详情内容弹窗 -->
+    <u-popup v-model="showPopup" mode="bottom" :closeable="true" :border-radius="26">
+      <view class="service-content">
+        <view class="title">服务</view>
+        <scroll-view class="content-scroll" :scroll-y="true">
+          <view class="s-list clearfix">
+            <view class="s-item" v-for="(item, index) in list" :key="index">
+              <text class="item-icon iconfont icon-fuwu"></text>
+              <view class="item-val">{{ item.name }}</view>
+              <view class="item-summary">{{ item.summary }}</view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+  import * as ServiceApi from '@/api/goods/service'
+
+  export default {
+    props: {
+      // 卡券ID
+      goodsId: {
+        type: Number,
+        default: null
+      }
+    },
+    data() {
+      return {
+        // 正在加载
+        isLoading: true,
+        // 显示详情内容弹窗
+        showPopup: false,
+        // 服务列表数据
+        list: []
+      }
+    },
+
+    created() {
+      // 获取商品服务列表
+      this.getServiceList()
+    },
+
+    methods: {
+
+      // 获取商品服务列表
+      getServiceList() {
+        const app = this
+        app.isLoading = true
+        ServiceApi.list(app.goodsId)
+          .then(result => app.list = result.data.list)
+          .finally(() => app.isLoading = false)
+      },
+
+      // 显示弹窗
+      handlePopup() {
+        this.showPopup = !this.showPopup
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .service-wrapper {
+    min-height: 24rpx;
+    margin-bottom: -24rpx;
+  }
+
+  // 服务简述
+  .service-simple {
+    padding: 24rpx 30rpx;
+    display: flex;
+    align-items: center;
+
+    .s-list {
+      flex: 1;
+      margin-left: -15rpx;
+    }
+
+    .s-item {
+      float: left;
+      font-size: 26rpx;
+      margin: 8rpx 15rpx;
+
+      .item-icon {
+        color: #FA2209;
+      }
+
+      .item-val {
+        margin-left: 12rpx;
+      }
+    }
+
+
+  }
+
+  // 服务详细内容
+  .service-content {
+    padding: 24rpx;
+
+    .title {
+      font-size: 30rpx;
+      margin-bottom: 50rpx;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    .content-scroll {
+      min-height: 400rpx;
+      max-height: 750rpx;
+    }
+
+    .s-list {
+      padding: 0 30rpx 0 80rpx;
+    }
+
+    .s-item {
+      position: relative;
+      margin-bottom: 60rpx;
+
+      .item-icon {
+        position: absolute;
+        top: 6rpx;
+        left: -50rpx;
+        color: #FA2209;
+      }
+
+      .item-val {
+        font-size: 28rpx;
+      }
+
+      .item-summary {
+        font-size: 26rpx;
+        margin-top: 20rpx;
+        color: #6d6d6d;
+      }
+    }
+
+  }
+</style>