133 lines
2.9 KiB
Vue
133 lines
2.9 KiB
Vue
<template>
|
|
<up-popup :show="popShow" @close="close" @open="open" mode="center" :round="12">
|
|
|
|
<view class="bg-fff box u-font-28 w-full u-relative">
|
|
<view class="u-absolute close">
|
|
<u-icon name="close" size="20" @click="close"></u-icon>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="scroll-box" >
|
|
<template v-if="data.images.length>1">
|
|
<swiper class="scroll-box" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="300">
|
|
<swiper-item v-for="(item,index) in data.images" :key="index">
|
|
<view class="swiper-item">
|
|
<!-- <image class="coverImg w-full" @click="prveImg(data.images,item)" :src="item" mode="widthFix"></image> -->
|
|
<image class="coverImg w-full" :src="item" mode="widthFix"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</template>
|
|
<template v-else>
|
|
<view class="u-flex u-row-center">
|
|
<!-- <image class="coverImg w-full" @click="prveImg([data.coverImg],data.coverImg) " :src="data.coverImg" mode="widthFix"></image> -->
|
|
<image class="coverImg w-full" :src="data.coverImg" mode="widthFix"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="u-p-20">
|
|
<view class="u-font-16 font-bold">{{data.name}}</view>
|
|
<view class="u-m-t-12 color-666">
|
|
<rich-text :nodes="data.shortTitle"></rich-text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
</up-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
reactive,
|
|
ref,
|
|
watch,
|
|
nextTick
|
|
} from 'vue';
|
|
import {prveImg} from '@/commons/utils/prveImg.js'
|
|
const refForm = ref(null)
|
|
let searchVal = ref('')
|
|
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
goods: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
images: []
|
|
}
|
|
}
|
|
}
|
|
})
|
|
let data = ref(props.goods)
|
|
const emits = defineEmits(['update:show', 'search'])
|
|
const form = reactive({
|
|
note: ''
|
|
})
|
|
let popShow = ref(props.show)
|
|
watch(() => props.show, (newval) => {
|
|
popShow.value = newval
|
|
if (newval) {
|
|
data.value = {
|
|
...props.goods,
|
|
images: typeof props.goods.images === 'string' ? JSON.parse(props.goods.images) : props.goods
|
|
.images
|
|
}
|
|
}
|
|
})
|
|
watch(() => popShow.value, (newval) => {
|
|
emits('update:show', newval)
|
|
})
|
|
|
|
function close() {
|
|
popShow.value = false
|
|
}
|
|
|
|
function open() {
|
|
|
|
}
|
|
|
|
function search() {
|
|
emits('search', searchVal.value)
|
|
close()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.coverImg {
|
|
// width: calc(100vw - 80px);
|
|
}
|
|
|
|
.box {
|
|
width: calc(100vw - 80px);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.scroll-box {
|
|
height: calc(100vh - var(--status-bar-height) - 20px);
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 14px;
|
|
background-color: #fff;
|
|
z-index: 10;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0 0 2px #eee;
|
|
}
|
|
|
|
.number {
|
|
color: #EE4646;
|
|
}
|
|
</style> |