源文件
This commit is contained in:
173
components/panel-content/panel-content.vue
Normal file
173
components/panel-content/panel-content.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view :class="theme_view">
|
||||
<!-- 简洁的数据，一般列表展示使用 -->
|
||||
<view v-if="propIsTerse" class="content margin-top cp">
|
||||
<block v-if="data != null && data_field.length > 0">
|
||||
<block v-for="(item, index) in data_field" :key="index">
|
||||
<view v-if="(item.is_hide || 0) == 0" class="single-text margin-top-xs">
|
||||
<text class="cr-grey margin-right-xl">{{ item.name }}</text>
|
||||
<text class="cr-base">
|
||||
<block v-if="item.type == 'images'">
|
||||
<image :src="data[item.field]" mode="aspectFit" class="radius panel-item-images"></image>
|
||||
</block>
|
||||
<text v-else>{{ data[item.field] }}</text>
|
||||
</text>
|
||||
<view v-if="(item.is_copy || 0) == 1" class="dis-inline-block margin-left" data-event="copy" :data-value="data[item.field]" @tap.stop="text_event_handle">
|
||||
<iconfont name="icon-copy" size="28rpx" class="cr-grey"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view v-if="propIsItemShowMax > 0 && propIsItemShowMax < data_field.length" @tap.stop="item_more_event" class="margin-top-sm tc">
|
||||
<text class="cr-grey-c margin-right-sm">{{ $t('common.view_more') }}</text>
|
||||
<iconfont :name="'icon-arrow-' + (more_status ? 'top' : 'bottom')" size="28rpx" color="#ccc"></iconfont>
|
||||
</view>
|
||||
</block>
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- 详情面板数据 -->
|
||||
<view v-else class="padding-horizontal-main padding-top-main">
|
||||
<view class="panel-item padding-main border-radius-main bg-white spacing-mb">
|
||||
<view v-if="(propTitle || null) != null" class="br-b padding-bottom-main fw-b text-size">{{ propTitle }}</view>
|
||||
<view class="panel-content oh">
|
||||
<block v-if="data != null && data_field.length > 0">
|
||||
<block v-for="(item, index) in data_field" :key="index">
|
||||
<view v-if="(item.is_hide || 0) == 0" class="item br-b-f5 oh padding-vertical-main">
|
||||
<view class="title fl padding-right-main cr-grey">{{ item.name }}</view>
|
||||
<view class="content fl br-l padding-left-main">
|
||||
<block v-if="item.type == 'images'">
|
||||
<image :src="data[item.field]" mode="aspectFit" class="panel-item-images"></image>
|
||||
</block>
|
||||
<text v-else>{{ data[item.field] }}</text>
|
||||
<view v-if="(item.is_copy || 0) == 1" class="dis-inline-block margin-left" data-event="copy" :data-value="data[item.field]" @tap.stop="text_event_handle">
|
||||
<iconfont name="icon-copy" size="28rpx" class="cr-grey lh-il"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view v-if="propIsItemShowMax > 0 && propIsItemShowMax < data_field.length" @tap="item_more_event" class="margin-top-sm tc">
|
||||
<text class="cr-grey-c margin-right-sm">{{ $t('common.view_more') }}</text>
|
||||
<iconfont :name="'icon-arrow-' + (more_status ? 'top' : 'bottom')" size="28rpx" color="#ccc"></iconfont>
|
||||
</view>
|
||||
</block>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const app = getApp();
|
||||
import componentNoData from '@/components/no-data/no-data';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
theme_view: app.globalData.get_theme_value_view(),
|
||||
data: null,
|
||||
data_field: [],
|
||||
more_status: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
componentNoData,
|
||||
},
|
||||
props: {
|
||||
// 标题
|
||||
propTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 数据
|
||||
propData: {
|
||||
type: [Object, String],
|
||||
default: '',
|
||||
},
|
||||
// 数据字段
|
||||
propDataField: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
// 数据项最大展示数量（0则显示全部）
|
||||
propIsItemShowMax: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 指定字段
|
||||
propAppointField: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 排除字段
|
||||
propExcludeField: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 无数据提示状态
|
||||
propNoDataStatus: {
|
||||
type: [Number, String],
|
||||
default: 3,
|
||||
},
|
||||
// 无数据提示内容
|
||||
propNoDataMsg: {
|
||||
type: [String],
|
||||
default: '',
|
||||
},
|
||||
// 是否简洁的模式展示
|
||||
propIsTerse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
// 属性值改变监听
|
||||
watch: {
|
||||
// 数据改变
|
||||
propData(value, old_value) {
|
||||
this.data = value;
|
||||
},
|
||||
},
|
||||
// 页面被展示
|
||||
created: function (e) {
|
||||
this.setData({
|
||||
data: this.propData,
|
||||
});
|
||||
this.data_field_handle(this.propDataField);
|
||||
},
|
||||
methods: {
|
||||
// 数据字段处理
|
||||
data_field_handle(data) {
|
||||
var appoint = (this.propAppointField || null) == null ? [] : this.propAppointField.split(',');
|
||||
var exclude = (this.propExcludeField || null) == null ? [] : this.propExcludeField.split(',');
|
||||
var temp_data = [];
|
||||
var index = 0;
|
||||
for (var i in data) {
|
||||
if ((exclude.length == 0 && appoint.length > 0 && appoint.indexOf(data[i]['field']) != -1) || (appoint.length == 0 && (exclude.length == 0 || exclude.indexOf(data[i]['field']) == -1))) {
|
||||
data[i]['is_hide'] = (data[i]['is_hide'] || 0) == 0 ? (index >= this.propIsItemShowMax && this.propIsItemShowMax > 0 ? 1 : 0) : 0;
|
||||
temp_data.push(data[i]);
|
||||
index++;
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
data_field: temp_data,
|
||||
});
|
||||
},
|
||||
|
||||
// 文本事件
|
||||
text_event_handle(e) {
|
||||
app.globalData.text_event_handle(e);
|
||||
},
|
||||
|
||||
// 数据项更多事件
|
||||
item_more_event(e) {
|
||||
this.data_field_handle(this.data_field);
|
||||
this.setData({
|
||||
more_status: !this.more_status,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.panel-item-images {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user