You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
3.9 KiB
127 lines
3.9 KiB
<script> |
|
export default { |
|
name: "fomItem", |
|
props: { |
|
data: { |
|
type: [Object,String] |
|
}, |
|
name: { |
|
type: String |
|
}, |
|
type: { |
|
type: String, |
|
default: 'media' |
|
}, |
|
isShow: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
optionName: { |
|
type: String, |
|
default: 'default' |
|
} |
|
}, |
|
data() { |
|
return { |
|
imageUrl: '', |
|
imageShow: false, |
|
videoUrl: '', |
|
videoShow: false, |
|
showItem:false, |
|
} |
|
}, |
|
mounted() { |
|
this.showItem = this.getShowStatus(); |
|
}, |
|
methods: { |
|
showBigImage(imgUrl) { |
|
this.imageUrl = imgUrl; |
|
this.imageShow = true; |
|
this.$emit('showBigImage',imgUrl) |
|
}, |
|
showBigVideo(videoUrl) { |
|
this.videoUrl = videoUrl; |
|
this.videoShow = true; |
|
this.$emit('showBigVideo',videoUrl) |
|
}, |
|
getString(value) { |
|
let typeStr = typeof value; |
|
if (typeStr === 'string') { |
|
return value; |
|
} else if (typeStr === 'object' || typeStr === 'array') { |
|
return value.join(','); |
|
} |
|
}, |
|
getShowStatus(){ |
|
if(!this.isShow){ |
|
if(this.type === 'media'){ |
|
return (Object.keys(this.data).length>0); |
|
}else if(this.type === 'text'){ |
|
return this.data?.length > 0; |
|
} else{ |
|
return (this.data.value || this.data.option || this.data.remark || (typeof this.data.upload === 'object' && Object.keys(this.data.upload).length > 0)) |
|
} |
|
}else { |
|
return true; |
|
} |
|
}, |
|
}, |
|
} |
|
</script> |
|
|
|
<template> |
|
<view class="content-item service-end" v-if="showItem"> |
|
<view class="item-title"> |
|
<view class="title row" |
|
style="position:relative;justify-content: flex-start;width:100%;top:0;left:0;margin-bottom:30rpx;"> |
|
<view class="value col" style="position: relative;text-align: left;"> |
|
|
|
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
|
<view class="" style="position: relative;display:inline-block;"> |
|
<view style="color:#191919;font-size:32rpx;display:inline-block;position: relative;z-index: 2;"> |
|
{{ name }}： |
|
</view> |
|
<view class="background" |
|
style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="item-content" v-if="type !== 'text'"> |
|
<slot name="option" :data="data"> |
|
<view v-if="type !== 'media'"> |
|
{{ getString(optionName !== 'value' ? data.option:(data.value?data.value +'次':'')) }} |
|
</view> |
|
</slot> |
|
<slot name="remark"> |
|
<view v-if="type !== 'media'"> |
|
{{ data.remark }} |
|
</view> |
|
</slot> |
|
<slot name="media"> |
|
<view class="row"> |
|
<view class="col-4" style="padding:10rpx;" v-for="(item,index) in (this.type === 'media')?data:data.upload"> |
|
<view class="item-image" v-if="item.type === 'image'"> |
|
<u-image :lazy-load="true" @click="showBigImage(item.url)" :src="item.url" mode="aspectFill" width="100%"></u-image> |
|
</view> |
|
<view class="item-video" style="position: relative;" v-else> |
|
<u-image :lazy-load="true" @click="showBigVideo(item.url)" :src="item.thumb || ''" mode="aspectFill" width="100%"></u-image> |
|
<view class="" style="position: absolute;left:0;top:0;width:100%;height:100%;display: flex;align-items: center;justify-content: center;"> |
|
<uv-icon @click="showBigVideo(item.url)" name="play-circle" color="#fff" size="80rpx"></uv-icon> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</slot> |
|
</view> |
|
<view class="item-content" v-else> |
|
<view class=""> |
|
{{data}} |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
|
|
</style> |