123 lines
2.5 KiB
Vue
123 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<up-overlay :show="show" :z-index="9999">
|
||
|
|
<view class="contBox" @click="close()">
|
||
|
|
<view class="num">{{index + 1}}/{{specsList.length}}</view>
|
||
|
|
<swiper class="swiper" :autoplay="false" :indicator-dots="false" :circular="true" @change="changeSwiper" :current="index">
|
||
|
|
<swiper-item v-for="(item, index) in specsList" :key="index">
|
||
|
|
<view class="box">
|
||
|
|
<image class="img" mode="widthFix" :src="(item.img_800 || item.img) + '?x-oss-process=image/format,webp'" :webp="true"></image>
|
||
|
|
<view class="title"><text>{{item.value}}</text></view>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
</up-overlay>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { ref, reactive, toRefs, watch } from 'vue'
|
||
|
|
import { showToast } from '../common.js'
|
||
|
|
import { get, post } from '@/api/request.js'
|
||
|
|
import { Style } from '@/utils/list.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
list: {
|
||
|
|
type: Object,
|
||
|
|
default: []
|
||
|
|
},
|
||
|
|
current: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(props, context) {
|
||
|
|
const data = reactive({
|
||
|
|
show: false,
|
||
|
|
index: 0,
|
||
|
|
specsList: [],
|
||
|
|
Color: uni.getStorageSync('theme_color'),
|
||
|
|
bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor
|
||
|
|
})
|
||
|
|
|
||
|
|
function close() {
|
||
|
|
data.show = false
|
||
|
|
context.emit('close', data.index)
|
||
|
|
}
|
||
|
|
|
||
|
|
function changeSwiper(event) {
|
||
|
|
data.index = event.detail.current
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(props, (newProps) => {
|
||
|
|
if(newProps.show) {
|
||
|
|
data.show = true
|
||
|
|
data.index = newProps.current
|
||
|
|
data.specsList = newProps.list[0].value
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return {
|
||
|
|
...toRefs(data),
|
||
|
|
close,
|
||
|
|
changeSwiper
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.contBox{
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: #191919;
|
||
|
|
position: relative;
|
||
|
|
.num{
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
top: 80rpx;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
.swiper{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.box{
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.img{
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
bottom: 80rpx;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
text{
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 30rpx;
|
||
|
|
padding: 10rpx 28rpx;
|
||
|
|
background-color: #5E5E5E;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|