caimei-applets-mcare/pages/goods/procurement_info.vue

<template>
    <view style="background-color: #fff;position: relative;">
        <tui-skeleton
            v-if="skeletonShow"
            backgroundColor="#fafafa"
            borderRadius="10rpx"
            :isLoading="true"
            :loadingType="5"
        ></tui-skeleton>
        <view class="procure_info" v-else>
            <view class="info_card">
                <view class="card_title">采购商品</view>
                <view class="card_line"></view>
                <view class="card_store">
                    <image
                        class="img"
                        :src="isImageUrl(procurement.productImage) ? imageUrl : procurement.productImage"
                        mode="aspectFill"
                    ></image>
                    <view class="store_title">{{ procurement.productName }}</view>
                </view>
                <view class="back-filter" v-if="procurementStatus('isDelFlag', procurement.delFlag)"></view>
            </view>
            <view class="info_Initiator">
                <view class="card_title">发起者需求</view>
                <view class="card_line"></view>
                <view class="Initiator_contant">
                    <view class="Initiator_name">
                        <view class="Initiator_icon">发起者</view>
                        <view class="user">{{ procurement.userName | subText(10) }}</view>
                    </view>
                    <view class="Initiator_price">
                        <view class="unit_price">
                            <view class="title">期望单价：</view>
                            <view class="price">￥{{ procurement.price }}</view>
                        </view>
                        <view class="unit_sum">
                            <view class="title">采购数量：</view>
                            <view class="price">{{ procurement.number }}</view>
                        </view>
                    </view>
                </view>
                <view class="status">
                    <image
                        style="width: 100%;height: 100%;"
                        src="@/static/procurement/success.png"
                        mode="aspectFill"
                        v-if="procurementStatus('isAchieve', procurement.isAchieve)"
                    ></image>
                    <image
                        style="width: 100%;height: 100%;"
                        src="@/static/procurement/delete.png"
                        mode="aspectFill"
                        v-if="procurementStatus('isDelFlag', procurement.delFlag)"
                    ></image>
                </view>
                <view class="back-filter" v-if="procurementStatus('isDelFlag', procurement.delFlag)"></view>
            </view>
            <view class="info_Participant">
                <view class="card_title">参与者需求（{{ procurementList.length }}）</view>
                <view class="card_line"></view>
                <view v-if="procurementList.length !== 0">
                    <view
                        class="Initiator_contant"
                        v-for="(item, index) in procurementList"
                        :key="item"
                        :style="{ margin: index !== 0 ? '24rpx 8rpx 16rpx 8rpx' : '40rpx 8rpx 16rpx 8rpx' }"
                    >
                        <view class="Initiator_name">
                            <view class="Initiator_icon">参与者</view>
                            <view class="user">{{ item.userName | subText(12) }}</view>
                        </view>
                        <view class="Initiator_price">
                            <view class="unit_price">
                                <view class="title">期望单价：</view>
                                <view class="price">￥{{ item.price }}</view>
                            </view>
                            <view class="unit_sum">
                                <view class="title">采购数量：</view>
                                <view class="price">{{ item.number }}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="empty" v-else>暂无参与者~</view>
                <view class="back-filter" v-if="procurementStatus('isDelFlag', procurement.delFlag)"></view>
            </view>
        </view>
        <view
            v-if="
                !procurementStatus('isDelFlag', procurement.delFlag) &&
                    !procurementStatus('isAchieve', procurement.isAchieve)
            "
        >
            <view
                class="info_btn"
                v-if="
                    !procurementStatus('isInvolved', procurement.isInvolved) &&
                        !procurementStatus('isAdd', procurement.isInvolved)
                "
            >
                <proBtn color="#FFFFFF" background="#F3B574" width="640rpx" @click="popupAdd">我要参与</proBtn>
            </view>
            <view class="info_btn" v-else>
                <proBtn @click="procurementDelete" v-if="procurementStatus('isInvolved', procurement.isInvolved)">
                    删除
                </proBtn>
                <proBtn @click="modelData" v-else>退出</proBtn>
                <proBtn
                    color="#FFFFFF"
                    background="#F3B574"
                    @click="procurementChange(procurementStatus('isInvolved', procurement.isInvolved))"
                >
                    修改
                </proBtn>
            </view>
        </view>
        <pro-pupop
            :dataObj="joinData"
            :isShow="popupShow"
            @handlerPopupClose="handlerPopupClose"
            @procurementParticipate="procurementParticipate($event, proInfoCallback)"
        />
        <!-- 弹窗提示 -->
        <tui-modal
            :show="modal"
            @click="handleClick"
            @cancel="hideMobel"
            :content="contentModalText"
            :button="modalButton"
            color="#333"
            :size="32"
            shape="circle"
            :maskClosable="false"
        ></tui-modal>
    </view>
</template>

<script>
import proBtn from './components/procurement-btn.vue'
import procurementMixins from './mixins/procurementMixins.js'
import proPupop from './components/procurement-popup.vue'
export default {
    mixins: [procurementMixins],
    components: {
        proBtn,
        proPupop
    },
    data() {
        return {
            procurementList: [], // 参与者数量
            procurement: {}, // 发起者需求
            skeletonShow: true, // loading
            modal: false,
            contentModalText: '',
            // 弹窗配置
            modalButton: [
                {
                    text: '取消',
                    type: 'gray',
                    plain: true //是否空心
                },
                {
                    text: '确认',
                    customStyle: {
                        color: '#fff',
                        bgColor: 'linear-gradient(90deg, #F28F31 0%, #F3B574 100%)'
                    },
                    plain: false
                }
            ],
            joinData: {}, // 我要参与
            userInfo: {},
            popupShow: false, // 底部上移栏
            proTabId: '', // tab id
            detailId: '', // 详情ｉｄ
            refleshdata: {}
        }
    },
    onLoad(options) {
        this.userInfo = uni.getStorageSync('userInfo')
        this.procurementDetail(options.id)
        this.detailId = options.id
        this.proTabId = options.proTabId
        uni.$on('refreshAddData', id => {
            if (id) {
                this.procurementDetail(id)
            }
        })
    },
    onPullDownRefresh() {
        this.skeletonShow = true
        this.procurementDetail(this.detailId)
        uni.stopPullDownRefresh()
    },
    methods: {
        // 删除
        procurementDelete() {
            this.contentModalText = '确定删除该需求吗？'
            this.modal = true
        },
        handleClick($event) {
            if ($event.index === 1) {
                if (this.procurement.isInvolved === 1) {
                    // 退出参与
                    this.procurementUpdate(1, () => this.proInfoCallback())
                } else {
                    // 删除
                    this.procurementUpdate(0, () => this.proInfoCallback())
                }
            }
            this.modal = false
        },
        hideMobel() {},
        // 关闭底部
        handlerPopupClose($event) {
            this.popupShow = $event
        },
        // 我要参与
        popupAdd() {
            this.joinData = this.procurement
            this.popupShow = true
        },
        // 组件传递商品详情 退出
        modelData(proData) {
            this.contentModalText = '确定退出参与该需求吗？'
            this.modal = true
            this.proDataInfo = proData
        },
        procurementChange(status) {
            if (status) {
                uni.navigateTo({
                    url: '/pages/goods/procurementAdd?id=' + this.procurement.id
                })
            } else {
                this.procurementEditData()
            }
        },
        proInfoCallback() {
            this.procurementDetail(this.detailId)
            uni.$emit('refreshAddData')
        },
        // 详情
        async procurementDetail(id) {
            try {
                const { data } = await this.ProcurementService.procurementDetail({
                    id: id,
                    userId: this.userInfo.userId
                })
                this.procurement = data.procurement
                this.procurementList = data.procurementList
                this.skeletonShow = false
            } catch (error) {
                console.log(error)
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.img {
    width: 136rpx;
    height: 136rpx;
    margin-right: 24rpx;
}
.procure_info {
    background-color: #f7f7f7;
    padding: 24rpx;
}
.procure_info .info_card {
    height: 340rpx;
    padding: 24rpx;
    background-color: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    box-sizing: border-box;
    position: relative;
}
.card_title {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
}
.card_line {
    border: 1rpx solid #e1e1e1;
    margin-top: 24rpx;
}
.info_card .card_store {
    margin: 40rpx 8px;
    padding: 12rpx;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.info_card .store_title {
    width: 442rpx;
    font-size: 26rpx;
    color: #333333;
    line-height: 48rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; // 弹性盒模型
    -webkit-box-orient: vertical; // 上下垂直
    -webkit-line-clamp: 2; // 行数
}
.procure_info .info_Initiator {
    background-color: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 24rpx;
    margin: 24rpx 0;
    box-sizing: border-box;
    position: relative;
}
.Initiator_contant {
    height: 220rpx;
    background-color: #f7f7f7;
    margin: 40rpx 8rpx 16rpx 8rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 40rpx 24rpx;
    box-sizing: border-box;
}
.Initiator_contant .Initiator_name {
    display: flex;
    align-items: center;
}
.Initiator_contant .Initiator_icon {
    width: 96rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    text-align: center;
    color: #fff;
    background-color: #f3b574;
    border-radius: 8rpx;
    margin-right: 24rpx;
}
.Initiator_name .user {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
}
.Initiator_contant .Initiator_price {
    margin-top: 48rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.Initiator_price .unit_price,
.Initiator_price .unit_sum {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.title {
    color: #999999;
    font-size: 26rpx;
    font-weight: 400;
}
.price {
    color: #333333;
    font-size: 26rpx;
}
.info_Participant {
    background-color: #fff;
    padding: 24rpx;
    border-radius: 16rpx;
    margin-bottom: 256rpx;
    position: relative;
}
.empty {
    height: 250rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;
    color: #b2b2b2;
}
.info_btn {
    position: fixed;
    bottom: 0%;
    left: 0;
    padding: 16rpx 56rpx 84rpx 56rpx;
    justify-content: space-between;
    display: flex;
    align-items: center;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}
.status {
    position: absolute;
    width: 150rpx;
    height: 100rpx;
    right: 48rpx;
    top: 48rpx;
}
.back-filter {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.7);
    height: 100%;
    width: 100%;
}
</style>