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

<template>
    <view class="card" :style="{ padding: (procurementStatus('isAllTab') || procurementStatus('isDelFlag')) ? '32rpx 32rpx 0 32rpx' : '32rpx' }">
        <view class="card_title">
            <view class="card_user_icon">发起者</view>
            <view class="card_user">{{ procuretInfo.clubName }}</view>
        </view>
        <view class="card_time">{{ procuretInfo.saveTime }}</view>
        <view class="card_content">
            <image class="card_content_img" src="" 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">></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 class="card_foot" v-if="!procurementStatus('isAllTab') && procurementStatus('isInvolved')">
            <view class="foot_title">您已参与</view>
            <view class="foot_continue">
                <view class="foot_change" @click="procurementChange">修改</view>
                <view class="foot_delete" @click="procurementDelete">删除</view>
                <view class="foot_exit" @click="procurementExit">退出</view>
            </view>
        </view>
        <view class="card_foot_2" @click="procurementAdd">
            <view class="foot_title">我要参与</view>
        </view>
        <view class="card_foot_2" v-if="procurementStatus('isAllTab') && procurementStatus('isInvolved')"><view class="foot_title_2">您已参与</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')"></view>
    </view>
</template>

<script>
export default {
    props: {
        procuretInfo: {
            type: Object,
            default: () => {}
        },
        proTabId: {
            type: Number,
            default: () => 0
        }
    },
    data() {
        return {
            //data 数据
            card: {}
        }
    },
    computed: {
        
        
    },
    watch: {
    },
    mounted() {
    },
    methods: {
        handlerChange() {},
        handlerDelete() {},
        // 删除
        procurementDelete() {},
        // 修改
        procurementChange() {
            this.$emit('popupChange', this.procuretInfo)
        },
        // 参与
        procurementAdd() {
            this.$emit('popupAdd', this.procuretInfo)
        },
        // 退出
        procurementExit() {
            this.$emit('modelData', this.procuretInfo)
        },
        // 各部分状态
        procurementStatus(string) {
            const procuretInfo = this.procuretInfo
            const status = {
                'isDelFlag': () => procuretInfo.delFlag === 1, // 是否删除
                'isAchieve': () => procuretInfo.isAchieve === 0, // 是否实现
                'isAllTab': () => this.proTabId === 0, // 是否在全部的tab栏下
                'isInvolved': () => procuretInfo.isInvolved === 1, // 是否参与 0 未参与 1已参与 2 我创建的
            }
            return status[string]()
        },
    }
}
</script>

<style scoped lang="scss">
.card {
    border-radius: 8rpx;
    width: 100%;
    background: #fff;
    padding: 32rpx 32rpx 0 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;
    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>