Feat(送礼):支持AI的文生图-5

2026-09-15 16:39:32 +08:00
parent 46d8fe8b70
commit bc5a59c104
3 changed files with 364 additions and 55 deletions
@@ -0,0 +1,164 @@
+<template>
+  <u-popup 
+    :show="show" 
+    mode="bottom" 
+    round="40rpx" 
+    :customStyle="{height: '600rpx'}"
+    @close="close"
+    >
+    <view class="cover-picker v12-pt-4">
+      <swiper
+        :current="currentIndex"
+        :autoplay="false"
+        :circular="true"
+        :indicator-dots="false"
+        @change="onChange"
+        previous-margin="180rpx"
+        next-margin="180rpx"
+        class="cover-swiper"
+      >
+        <swiper-item v-for="(item, i) in list" :key="i" class="cover-swiper-item"  :class="{'n-actived' : currentIndex !== i}">
+          <view class="cover-item" :class="{'ios-cover': isIOS}">
+            <view class="img-wrap">
+              <image :src="item.cover" class="cover-image" mode="widthFix" />
+            </view>
+          </view>
+        </swiper-item>
+      </swiper>
+      <view class="v12-justify-center">
+        <view class="cover-confirm" @click="confirm">
+          确定
+        </view>
+      </view>
+      <view class="tips">礼包封面在对方领取时展示</view>
+      <view class="tips tips2">（*图片由云灵AI生成，仅供参考）</view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    index: {
+      type: Number,
+      default: 0
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentIndex: this.index
+    }
+  },
+  computed: {
+    isIOS() {
+      return uni.getSystemInfoSync().osName === 'ios'
+    }
+  },
+  watch: {
+    index(val) {
+      this.currentIndex = val
+    },
+    show(val) {
+      if (val) {
+        this.currentIndex = this.index
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.currentIndex = 0
+      this.$emit('update:show', false)
+    },
+    onChange(e) {
+      this.currentIndex = e.detail.current
+      this.$forceUpdate()
+    },
+    confirm() {
+      this.$emit('confirm', this.list[this.currentIndex])
+      this.$emit('update:show', false)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.n-actived{
+  .cover-item{
+    transform: scale(0.8);
+    margin-bottom: -70rpx !important;
+  }
+
+}
+.cover-swiper-item{
+  height: fit-content !important;
+  bottom: 0;
+  overflow: visible;
+}
+.img-wrap{
+  position: relative;
+  overflow: visible;
+}
+.tips{
+  font-size: 24rpx;
+  color: #999;
+  text-align: center;
+  margin-top: 20rpx;
+}
+.tips2{
+  color: #C52733;
+}
+.cover-swiper{
+  height: 800rpx;
+}
+.cover-picker {
+  .cover-title {
+    padding: 30rpx;
+    font-size: 32rpx;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 30rpx;
+  }
+  
+  .cover-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: visible;
+    transition: all .3s ease-in-out;
+    margin-bottom: 30rpx;
+    .cover-image {
+      width: 420rpx;
+      // height: 580rpx;
+      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;
+  }
+}
+.ios-cover{
+  zoom: 1.01
+}
+</style>