Task：送礼相关接口

2025-02-19 18:31:38 +08:00
parent 5dc1f5ad92
commit dbc31c72fb
9 changed files with 18138 additions and 160 deletions
@@ -0,0 +1,109 @@
+<template>
+  <u-popup 
+    :show="show" 
+    mode="bottom" 
+    round="40rpx" 
+    @close="close"
+    :customStyle="{height: '600rpx'}"
+    closeable>
+    <view class="cover-picker">
+      <view class="cover-title">选择封面</view>
+      <swiper
+        :autoplay="false"
+        :circular="true"
+        :indicator-dots="false"
+        @change="onChange"
+        previous-margin="120rpx"
+        next-margin="120rpx"
+        class="cover-swiper"
+      >
+        <swiper-item v-for="(item, index) in list" :key="index" >
+          <view class="cover-item">
+            <image :src="item.image" :class="{ 'v12-mt-3': currentIndex === index }" class="cover-image" mode="widthFix|heightFix" />
+            <view class="cover-name">{{ item.name }} </view>
+          </view>
+        </swiper-item>
+      </swiper>
+      <view class="v12-justify-center">
+        <view class="cover-confirm" @click="confirm">
+          确定
+        </view>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('update:show', false)
+    },
+    onChange(e) {
+      this.currentIndex = e.detail.current
+    },
+    confirm() {
+      this.$emit('confirm', this.list[this.currentIndex])
+      this.$emit('update:show', false)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.cover-swiper{
+  height: 540rpx;
+}
+.cover-picker {
+  padding: 30rpx;
+  .cover-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 30rpx;
+  }
+  
+  .cover-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .cover-image {
+      width: 380rpx;
+      height: 460rpx;
+      border-radius: 16rpx;
+      transition: all .2s ease-in-out;
+    }
+    .cover-name {
+      margin-top: 20rpx;
+      font-size: 28rpx;
+      color: #333;
+    }
+  }
+  .cover-confirm {
+    margin-top: 40rpx;
+    width: 240rpx;
+    height: 80rpx;
+    border-radius: 16rpx;
+    font-size: 32rpx;
+    background-color: #C52733 !important;
+    color: #fff !important;
+    text-align: center;
+    line-height: 80rpx;
+  }
+}
+</style>
@@ -0,0 +1,59 @@
+<template>
+  <view>
+    <!-- 弹窗组件 -->
+    <u-popup 
+      :show="showTips" 
+      mode="center" 
+      closeable 
+      round="16rpx"
+      @close="showTips = false"
+    >
+      <view class="popup-content">
+        <!-- 标题 -->
+        <view class="title">购买须知</view>
+        <!-- 富文本内容 -->
+        <u-parse :content="richText" />
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    // 接收传递的参数
+    richText: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      showTips: false,
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.popup-content {
+  width: 600rpx;
+  padding: 40rpx;
+  box-sizing: border-box;
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 30rpx;
+  }
+  
+  .close-btn {
+    margin-top: 40rpx;
+  }
+  
+  /deep/ .u-parse {
+    max-height: 800rpx;
+    overflow-y: auto;
+  }
+}
+</style>