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

<template>
    <view class="card" :style="{padding: proStatus ? '32rpx 32rpx 0 32rpx' : '32rpx'}">
        <view class="card_title">
            <view class="card_user_icon">
                发起者
            </view>
            <view class="card_user">
                科医人医疗激光设备贸易公司
            </view>
        </view>
        <view class="card_time">2023-04-26   16:20:10</view>
        <view class="card_content">
            <image class="card_content_img" src="" mode=""></image>
            <view class="card_content_title">
                韩国恩盛进口氢洁气小气泡清韩进口氢
                洁气小气泡清...
            </view>
        </view>
        <view class="card_form">
            <view class="form">
                <view class="form_title">
                    期望单价：
                </view>
                <view class="form_price">
                    ￥100.00
                </view>
            </view>
        </view>
        <view class="card_form">
            <view class="form">
                <view class="form_title">
                    采购数量：
                </view>
                <view class="form_price">
                    ￥100.00
                </view>
            </view>
            <view class="form_title">
                >
            </view>
        </view>
        <view class="card_form">
            <view class="form">
                <view class="form_title">
                    参与机构数：
                </view>
                <view class="form_price">
                    ￥100.00
                </view>
            </view>
        </view>
        <view class="card_foot" v-if='proStatus'>
            <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">
            <view class="foot_title_2">
                您已参与
            </view>
        </view> -->
        <view class="card_status">
            <image v-if='proStatus' style="width: 100%;height: 100%;" src="@/static/procurement/success.png" mode="aspectFill"></image>
            <image v-else style="width: 100%;height: 100%;" src="@/static/procurement/delete.png" mode="aspectFill"></image>
        </view>
        <view class="card_bg" v-if='!proStatus'></view>
    </view>
</template>

<script>
    export default {
        props: {
            procuretInfo: {
                id: 1,
                msg: '12313'
            }
        },
        data() {
            return {
                //data 数据
                card: {},
            }
        },
        computed: {
            // 状态
            proStatus() {
                return this.procuretInfo % 2 === 0
            },
        },
        methods: {
            handlerChange() {
                
            },
            handlerDelete() {},
            // 删除
            procurementDelete() {},
            // 修改
            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 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>