You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.5 KiB
Vue
150 lines
3.5 KiB
Vue
<template>
|
|
<view class="g_bg_f">
|
|
<view class="item g_flex_row_between" @click="handleItem" :class="{ g_pl_15: from != 'reservation-time', g_pr_15: isShowBottom }">
|
|
<view class="g_flex_none g_flex_row_start">
|
|
<view class="g_fs_16 g_c_6 g_flex_column_center">{{ label }}</view>
|
|
<view v-if="labelSubStr" class="g_pl_8 g_flex_column_center g_pr_8" @click.stop="handleClickLabel">
|
|
<view class="g_w_32 g_c_20 g_flex_c g_c_6 g_fs_12"
|
|
style="border: 1px solid #ccc;border-radius: 2px;margin-top: 4rpx;"
|
|
>{{labelSubStr}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="g_flex_1 g_flex_row_end v">
|
|
<view class="g_flex_row_end b g_flex_1">
|
|
<view class="g_flex_none g_mr_0" v-if="beforeIcon" :class="afterType == 'list' ? 'g_flex_column_end' : 'g_flex_column_center'">
|
|
<view class="iconfont g_fs_16 g_ml_4 g_c_9" :class="beforeIcon"
|
|
:style="{
|
|
color:remarkValue ? '#3578f6' : '#999'
|
|
}"
|
|
></view>
|
|
</view>
|
|
<view class="g_flex_row_end item-right-area" :class="{ g_flex_1: from == 'quick' || from == 'reservation-time' || from == '' || from == 'times', ' g_ml_10': from != 'reservation-time' }">
|
|
<view
|
|
v-if="afterType == 'show'"
|
|
class="g_ell_1 g_fs_16"
|
|
:style="{
|
|
color: valueColor,
|
|
'font-weight': fontWeight,
|
|
}"
|
|
>
|
|
{{ value ? value : "-" }}
|
|
</view>
|
|
<view v-if="afterType == 'time'" class="g_flex_1 310">
|
|
<g-panel-time :timeval="value" @confirmChooseTime="getChooseTime" />
|
|
</view>
|
|
<view v-if="afterType == 'list'">
|
|
<view>
|
|
<view v-if="value.length > 0">
|
|
<view v-for="(item, index) in value" :key="index" class="g_flex_row_end">
|
|
<view class="g_c_3 g_fs_16 g_ml_0">{{ item.userName }}</view>
|
|
<view class="g_c_3 g_fs_16 g_ml_6">{{ item.tel }}</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="value.length == 0" class="g_flex_column_center">-</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="afterType == 'multi'">
|
|
<view class="g_fs_16 g_text_r" style="white-space: pre-line">
|
|
{{ value }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="g_flex_none g_flex_column_center g_ml_2" v-if="afterIcon">
|
|
<view class="iconfont g_fs_16 g_ml_4 g_c_9" :class="afterIcon"
|
|
:style="{
|
|
color:remarkValue ? '#3578f6' : '#999'
|
|
}"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="g_h_10" v-if="isShowBottom"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
default() {
|
|
return "";
|
|
},
|
|
},
|
|
value: {
|
|
default() {
|
|
return "";
|
|
},
|
|
},
|
|
valueColor: {
|
|
type: String,
|
|
default() {
|
|
return "#333333";
|
|
},
|
|
},
|
|
beforeIcon: {
|
|
type: String,
|
|
default() {
|
|
return "";
|
|
},
|
|
},
|
|
afterIcon: {
|
|
type: String,
|
|
default() {
|
|
return "";
|
|
},
|
|
},
|
|
fontWeight: {
|
|
type: String,
|
|
default() {
|
|
return "400";
|
|
},
|
|
},
|
|
afterType: {
|
|
type: String,
|
|
default() {
|
|
return "show";
|
|
},
|
|
},
|
|
isShowBottom: {
|
|
default() {
|
|
return true;
|
|
},
|
|
},
|
|
from: {
|
|
default() {
|
|
return "";
|
|
},
|
|
},
|
|
labelSubStr: {
|
|
default() {
|
|
return "";
|
|
},
|
|
},
|
|
remarkValue: {
|
|
default() {
|
|
return "";
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
handleItem() {
|
|
this.$emit("clickItem");
|
|
},
|
|
getChooseTime(e) {
|
|
this.$emit("confirmChooseTime", e);
|
|
},
|
|
handleClickLabel() {
|
|
this.$emit("clickLabelBtn");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.g70 {
|
|
max-width: 70%;
|
|
}
|
|
</style>
|