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.
118 lines
3.5 KiB
118 lines
3.5 KiB
<script> |
|
export default { |
|
name: "fomItem", |
|
props: { |
|
data: { |
|
type: Object |
|
}, |
|
name: { |
|
type: String |
|
}, |
|
type: { |
|
type: String, |
|
default: 'media' |
|
}, |
|
isShow: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
optionName: { |
|
type: String, |
|
default: 'default' |
|
} |
|
}, |
|
data() { |
|
return { |
|
imageUrl: '', |
|
imageShow: false, |
|
} |
|
}, |
|
methods: { |
|
showBigImage(imgUrl) { |
|
this.imageUrl = imgUrl; |
|
this.imageShow = true; |
|
}, |
|
getString(value) { |
|
let typeStr = typeof value; |
|
if (typeStr === 'string') { |
|
return value; |
|
} else if (typeStr === 'object' || typeStr === 'array') { |
|
return value.join(','); |
|
} |
|
}, |
|
getShowStatus(){ |
|
console.log(this.name) |
|
if(!this.isShow){ |
|
if(this.type === 'media' || this.type === 'text'){ |
|
return (Object.keys(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="getShowStatus()"> |
|
<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"> |
|
<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" v-for="(item,index) in (this.type === 'media')?data:data.upload"> |
|
<view class="item-image" v-if="item.type === 'image'"> |
|
<u-image @click="showBigImage(item.url)" :src="item.url" mode="aspectFill" width="100%"></u-image> |
|
</view> |
|
<view class="item-video" v-else> |
|
<video mode="aspectFill" :src="item.url" |
|
style="width:100%;height:200rpx;border-radius: 16rpx;border:2rpx solid #262626;"></video> |
|
</view> |
|
</view> |
|
</view> |
|
</slot> |
|
</view> |
|
<view class="item-content" v-else> |
|
<view class=""> |
|
{{data}} |
|
</view> |
|
</view> |
|
</view> |
|
<u-overlay :show="imageShow" @click="imageShow = false"> |
|
<view class="" style="display:flex;align-items: center;justify-content:center;width:100%;height:100vh;"> |
|
<u-image mode="widthFix" :src="imageUrl" height="auto" width="100vw"></u-image> |
|
</view> |
|
</u-overlay> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
|
|
</style> |