165 lines
3.2 KiB
Vue
165 lines
3.2 KiB
Vue
<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>
|