caimei-applets-mcare/pages/goods/components/procurement_card.vue

<template>
    <view class="card">
        <view @click="$emit('procureDetail', procuretInfo)">
            <view class="card_title">
                <view class="card_user_icon">发起者</view>
                <view class="card_user">{{ procuretInfo.userName | subText(10) }}</view>
            </view>
            <view class="card_time">{{ procuretInfo.saveTime }}</view>
            <view class="card_content">
                <image class="card_content_img" :src="isImageUrl(procuretInfo.productImage) ? imageUrl :procuretInfo.productImage" mode="aspectFill"></image>
                <view class="card_content_title">{{ procuretInfo.productName }}</view>
            </view>
            <view class="card_form">
                <view class="form">
                    <view class="form_title">期望单价：</view>
                    <view class="form_price">￥{{ procuretInfo.price }}</view>
                </view>
            </view>
            <view class="card_form">
                <view class="form">
                    <view class="form_title">采购数量：</view>
                    <view class="form_price">{{ procuretInfo.number }}</view>
                </view>
                <view class="form_title iconfont icon-xiangyou"></view>
            </view>
            <view
                class="card_form"

            >
                <view class="form">
                    <view class="form_title">参与机构数：</view>
                    <view class="form_price">{{ procuretInfo.partNumber || 0 }}</view>
                </view>
            </view>
        </view>

        <view v-if="!procurementStatus('isDelFlag', procuretInfo.delFlag) && !procurementStatus('isAchieve', procuretInfo.isAchieve)">
            <view class="card_foot" v-if="procurementStatus('isSelfParticipationTab', proTabId)">
                <view class="foot_continue">
                    <view class="foot_change" @click="procurementChange">修改</view>
                    <view class="foot_delete" @click="procurementDelete" v-if="proTabId === 2">删除</view>
                    <view class="foot_exit" @click="procurementExit" v-if="proTabId === 1">退出</view>
                </view>
                <view class="foot_title" v-if="proTabId === 1">您已参与</view>
            </view>
            <view v-if="procurementStatus('isAllTab', proTabId) && !procurementStatus('isInvolved', procuretInfo.isInvolved)">
                <view class="card_foot_2" @click="procurementAdd" v-if="procuretInfo.isInvolved === 0">
                    <view class="foot_title">我要参与</view>
                </view>
                <view class="card_foot_2" v-else><view class="foot_title_2">您已参与</view></view>
            </view>
        </view>
        <view class="card_status">
            <image
                v-if="procurementStatus('isAchieve', procuretInfo.isAchieve)"
                style="width: 100%;height: 100%;"
                src="@/static/procurement/success.png"
                mode="aspectFill"
            ></image>
            <image
                v-if="procurementStatus('isDelFlag', procuretInfo.delFlag)"
                style="width: 100%;height: 100%;"
                src="@/static/procurement/delete.png"
                mode="aspectFill"
            ></image>
        </view>
        <view
            class="card_bg"
            v-if="procurementStatus('isDelFlag', procuretInfo.delFlag)"
            @click="$emit('procureDetail', procuretInfo)"
        ></view>
    </view>
</template>

<script>
import procurementMixins from '../mixins/procurementMixins.js'
export default {
    mixins: [procurementMixins],
    props: {
        procuretInfo: {
            type: Object,
            default: () => {}
        },
        proTabId: {
            type: Number,
            default: () => 0
        }
    },
    data() {
        return {
            //data 数据
            card: {},
        }
    },
    methods: {
        handlerChange() {},
        handlerDelete() {},
        // 删除
        procurementDelete() {
            this.$emit('proDelete', this.procuretInfo)
        },
        // 修改
        procurementChange() {
            this.$emit('popupChange', this.procuretInfo)
        },
        // 参与
        procurementAdd() {
            this.$emit('popupAdd', this.procuretInfo)
        },
        // 退出
        procurementExit() {
            this.$emit('modelData', this.procuretInfo)
        },
    }
}
</script>

<style scoped lang="scss">
.card {
    border-radius: 8rpx;
    width: 100%;
    background: #fff;
    padding: 32rpx 32rpx 8rpx 32rpx;
    box-sizing: border-box;
    position: relative;
}
.card_title {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
}
.card .card_user_icon {
    width: 96rpx;
    height: 40rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    background-color: #f3b574;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card .card_user {
    margin-left: 32rpx;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 32rpx;
}
.card .card_time {
    height: 37rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    margin-bottom: 32rpx;
}
.card .card_content {
    radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    background: #fff8ef;
    height: 160rpx;
    padding: 12rpx 16rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 32rpx;
}
.card .card_content_img {
    width: 136rpx;
    height: 136rpx;
    box-sizing: border-box;
    margin-right: 24rpx;
}
.card_content .card_content_title {
    width: 442rpx;
    height: 85rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #333333;
    line-height: 48rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; // 弹性盒模型
    -webkit-box-orient: vertical; // 上下垂直
    -webkit-line-clamp: 2; // 行数
}
.card .card_form {
    margin-bottom: 32rpx;
    height: 37rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card_form .form {
    display: flex;
    height: 100%;
}
.card_form .form_title {
    color: #999999;
    height: 100%;
    line-height: 37rpx;
    font-size: 26rpx;
}
.card_form .form_price {
    height: 100%;
    line-height: 37rpx;
    color: #333333;
    font-size: 26rpx;
}
.card .card_foot {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-direction: row-reverse;
    border-top: 1px solid #e1e1e1;
}
.card_foot .foot_title {
    color: #999999;
    height: 100%;
    line-height: 100rpx;
    font-size: 26rpx;
}
.card .foot_continue {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.foot_continue .foot_change {
    color: #f3b574;
    font-size: 26rpx;
    margin-right: 32rpx;
}
.foot_continue .foot_delete {
    font-size: 26rpx;
    color: #f85050;
}
.foot_continue .foot_exit {
    font-size: 26rpx;
    color: #f85050;
}
.card_foot_2 {
    border-top: 1px solid #e1e1e1;
    height: 100rpx;
    justify-content: center;
    align-items: center;
    display: flex;
}
.card_foot_2 .foot_title {
    color: #f3b574;
    font-size: 32rpx;
    font-weight: 500;
}
.card_foot_2 .foot_title_2 {
    color: #999999;
    font-size: 32rpx;
    font-weight: 400;
}
.card_status {
    position: absolute;
    width: 150rpx;
    height: 100rpx;
    top: 48rpx;
    right: 48rpx;
}
.card_bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
}
</style>