yantai-app/yt_banshizhinan/components/info-item/info-item.vue

<template>
    <view name="info-item" class="info-item-wrapper" onTap="onTapCheckCell">
        <view class="info-item-title">{{ title }}</view>
        <view v-if="content" :class="updateTime ? 'activeInfo-item-content' : 'info-item-content'">{{ content }}</view>

        <view
            v-if="returnTime"
            :class="
                returnTime === '待确认' ? (isManage ? 'activeInfo-item-Manager-returnTime' : 'info-item-content') : isTimeOut ? 'activeInfo-item-returnTime' : 'info-item-content'
            "
            @Tap.stop.prevent="parseEventDynamicCode($event, returnTime === '待确认' ? 'onTapCheckBinbondType' : 'onTapCheckCell')"
        >
            {{ returnTime }}
        </view>

        <view
            v-if="updateTime"
            :class="trend == 8 ? 'yellow-status' : '' || trend == 9 ? 'gray-status' : '' || trend == 10 ? 'green-status' : '' || trend == 11 ? 'red-status' : ''"
        >
            {{ trend == 8 ? '未改变' : '' || trend == 9 ? '未更新' : '' || trend == 10 ? '上升' : '' || trend == 11 ? '下降' : '' }}
        </view>
        <view v-if="binbondType" class="info-item-binbondType">{{ binbondType }}</view>

        <view class="info-item-updateTime" v-if="updateTime">{{ updateTime }}</view>
        <image v-if="isphone" src="/static/data/images/phone.png" mode="aspectFit" class="info-item-call" onTap="onTapCallPhone" />
        <view v-if="ischeck" class="info-item-check" onTap="onTapCheckUser">查重</view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    mixins: [],
    props: {
        isphone: false,
        ischeck: false,
        caseID: '',
        title: '标题',
        content: '',
        updateTime: '',
        returnTime: '',
        binbondType: '',
        trend: '',
        isTimeOut: false,
        isAdDate: false,
        isManage: false,
        onTapCallPhone: () => {},
        onTapCheckUser: () => {},
        onTapCheckCell: () => {},
        onTapCheckBinbondType: () => {}
    },
    didMount() {},
    didUpdate() {},
    didUnmount() {},
    methods: {
        onTapCallPhoneFun() {
            this.props.onTapCallPhone(this.props.content);
        },
        onTapCheckUserFun() {
            this.props.onTapCheckUser(this.props.content);
        },
        onTapCheckCellFun() {
            this.props.onTapCheckCell(this.props.title);
        },
        onTapCheckBinbondTypeFun() {
            this.props.onTapCheckBinbondType({
                caseID: this.props.caseID
            });
        }
    },
    created: function () {}
};
</script>
<style>
.info-item-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 10rpx 0rpx;
    background-color: white;
}
.info-item-title {
    width: 160rpx;
    color: gray;
    margin-left: 30rpx;
    word-break: break-all;
    padding: 5rpx 0;
    text-align: left;
}
.info-item-content {
    flex: 1;
    margin-right: 30rpx;
    padding: 5rpx 0;
    margin-left: 20rpx;
    white-space: pre-wrap;
    word-break: break-all;
}
.activeInfo-item-content {
    margin-right: 30rpx;
    padding: 5rpx 0;
    margin-left: 20rpx;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: left;
}
.activeInfo-item-returnTime {
    margin-right: 30rpx;
    margin-left: 20rpx;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: left;
    color: red;
}
.activeInfo-item-Manager-returnTime {
    margin-right: 30rpx;
    margin-left: 20rpx;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: left;
    color: #3d92e6;
}
.activeInfo-item-content-returnTime {
    margin-right: 30rpx;
    padding: 5rpx 0;
    margin-left: 20rpx;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: left;
}
.info-item-updateTime {
    flex: 1;
    margin-right: 30rpx;
    padding: 5rpx 0;
    text-align: right;
    white-space: nowrap;
    word-break: break-all;
    color: gray;
}
.info-item-returnTime {
    flex: 1;
    margin-right: 30rpx;
    padding: 5rpx 0;
    text-align: right;
    white-space: nowrap;
    word-break: break-all;
    color: gray;
}
.info-item-call {
    margin-right: 20rpx;
    width: 40rpx;
    height: 40rpx;
}
.info-item-check {
    font-size: 30rpx;
    margin-right: 20rpx;
    color: #4599eb;
}

.yellow-status {
    color: orange;
}
.gray-status {
    color: gray;
}
.green-status {
    color: green;
}
.red-status {
    color: red;
}
</style>