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

<template>
    <view class="card">
        <view @click="$emit('procureDetail', procuretInfo)">
            <view class="card_title" @click="$emit('procureDetail', procuretInfo)">
                <view class="card_user_icon">发起者</view>
                <view class="card_user">{{ procuretInfo.userName | subText(12) }}</view>
            </view>
            <view class="card_time">{{ procuretInfo.saveTime }}</view>
            <view class="card_content" @click="$emit('procureDetail', procuretInfo)">
                <image class="card_content_img" :src="procuretInfo.productImage" mode="aspectFill"></image>
                <view class="card_content_title">{{ procuretInfo.productName | subText(22) }}</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">></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') && !procurementStatus('isAchieve')">
            <view class="card_foot" v-if="procurementStatus('isSelfParticipationTab')">
                <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') && !procurementStatus('isInvolved', 2)">
                <view
                    class="card_foot_2"
                    @click="procurementAdd"
                    v-if="procurementStatus('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')"
                style="width: 100%;height: 100%;"
                src="@/static/procurement/success.png"
                mode="aspectFill"
            ></image>
            <image
                v-if="procurementStatus('isDelFlag')"
                style="width: 100%;height: 100%;"
                src="@/static/procurement/delete.png"
                mode="aspectFill"
            ></image>
        </view>
        <view class="card_bg" v-if="procurementStatus('isDelFlag')" @click="$emit('procureDetail', procuretInfo)"></view>
    </view>
</template>

<script>
export default {
    props: {
        procuretInfo: {
            type: Object,
            default: () => {}
        },
        proTabId: {
            type: Number,
            default: () => 0
        }
    },
    data() {
        return {
            //data 数据
            card: {}
        }
    },
    filters: {
        subText(str, index) {
            if (str.length <= index) {
                return str
            }
            return str.substring(0, index) + '...'
        }
    },
    computed: {},
    watch: {},
    mounted() {},
    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)
        },
        // 各部分状态
        procurementStatus(string, res) {
            const procuretInfo = this.procuretInfo
            const status = {
                isDelFlag: () => procuretInfo.delFlag == 1, // 是否删除
                isAchieve: () => procuretInfo.isAchieve == 1, // 是否实现
                isAllTab: () => this.proTabId === 0, // 是否在全部的tab栏下
                isInvolved: res => procuretInfo.isInvolved === res, // 是否参与 0 未参与 1已参与 2 我创建的
                isAdd: () => procuretInfo.isInvolved === 2, // 是否是自身创建的
                isSelfParticipationTab: () => this.proTabId > 0, // 是否在已参与tab栏 是否在自已发布的tab中
            }
            return status[string](res)
        }
    }
}
</script>

<style scoped lang="scss">
.card {
    border-radius: 8rpx;
    width: 100%;
    background: #fff;
    padding: 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;
    border-radius: 8rpx;
}
.card_content .card_content_title {
    width: 442rpx;
    height: 85rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 48rpx;
}
.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>