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="procurement.productImage" mode="aspectFill"></image>
                    <view class="store_title">{{procurement.productName}}</view>
                </view>
                <view class="back-filter" v-if="procurementStatus('isDelFlag')"></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}}</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')"
                    ></image>
                    <image
                        style="width: 100%;height: 100%;"
                        src="@/static/procurement/delete.png"
                        mode="aspectFill"
                        v-if="procurementStatus('isDelFlag')"
                    ></image>
                </view>
                <view class="back-filter" v-if="procurementStatus('isDelFlag')"></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 3"
                        :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}}</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>
                <view class="empty" v-else>暂无参与者~</view>
                <view class="back-filter" v-if="procurementStatus('isDelFlag')"></view>
            </view>
        </view>
        <view v-if="!procurementStatus('isDelFlag') && !procurementStatus('isAchieve')">
            <view class="info_btn" v-if="!procurementStatus('isInvolved') && !procurementStatus('isAdd')">
                <proBtn color="#FFFFFF" background="#F3B574" width="640rpx" @click="popupAdd">我要参与</proBtn>
            </view>
            <view class="info_btn" v-else>
                <proBtn @click="procurementDelete" v-if="procurementStatus('isInvolved')">删除</proBtn>
                <proBtn @click="modelData" v-else>退出</proBtn>
                <proBtn color="#FFFFFF" background="#F3B574" @click="procurementChange(procurementStatus('isInvolved'))">修改</proBtn>
            </view>
        </view>
        <tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="handlerPopupClose">
            <view class="popup_content">
                <view class="pro_popup_title">参与需求</view>
                <view class="popup_form">
                    <view class="popup_form_item">商品图片：</view>
                    <view class="popup_img">
                        <image style="width: 100%;height: 100%;" :src="joinData.productImage" mode="aspectFill"></image>
                    </view>
                </view>
                <view class="popup_form">
                    <view class="popup_form_item">商品名称：</view>
                    <view class="popup_form_name">{{ joinData.productName }}</view>
                </view>
                <form>
                    <view class="uni-form-item uni-column">
                        <view class="title">
                            <text style="font-size: 26rpx;color: #F85050;">*</text>
                            期望单价：
                        </view>
                        <view style="position: relative;">
                            <view class="input_icon">￥</view>
                            <input class="uni-input" type="number" focus v-model="joinData.price" />
                        </view>
                    </view>
                    <view class="uni-form-item uni-column">
                        <view class="title">
                            <text style="font-size: 26rpx;color: #F85050;">*</text>
                            采购数量：
                        </view>
                        <view style="position: relative;">
                            <input class="uni-input" type="number" focus v-model="joinData.number" />
                        </view>
                    </view>
                    <view class="submit_btn">
                        <button class="popup_btn cancel" @click="handlerPopupClose">取消</button>
                        <button class="popup_btn submit" @click="procurementParticipate">确定</button>
                    </view>
                </form>
            </view>
        </tui-bottom-popup>
        <!-- 弹窗提示 -->
        <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'
export default {
    components: {
        proBtn
    },
    data() {
        return {
            procurementList: [], // 参与者数量
            procurement: {}, // 发起者需求
            skeletonShow: true, // loading
            joinData: {},
            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
        }
    },
    onLoad(options) {
        this.userInfo = uni.getStorageSync('userInfo')
        this.procurementDetail(options.id)
        this.proTabId = options.proTabId
    },
    methods: {
        // 状态
        procurementStatus(str) {
            const userIdList = this.procurementList.map(i => i.userId)
            const form = {
                isDelFlag: () => this.procurement.delFlag == 1, // 是否删除
                isAchieve: () => this.procurement.isAchieve == 1, // 是否实现
                isAllTab: () => this.proTabId === 0, // 是否在全部的tab栏下
                isSelfParticipationTab: () => this.proTabId > 0, // 是否在已参与tab栏 是否在自已发布的tab中
                'isInvolved': () => this.procurement.createUserId === this.userInfo.userId, // 是否我创建的
                'isAdd': () => userIdList.some(i => i === this.userInfo.userId), // 是否参与
            }
            return form[str]()
        },
        // 删除
        procurementDelete() {
            this.contentModalText = '确定删除该需求吗？'
            this.modal = true
            this.joinData = $event
        },
        handleClick($event) {
            if ($event.index === 1) {
                if(this.joinData.isInvolved === 1) {
                    // 退出参与
                    this.procurementUpdate(1)
                } else{
                    // 删除
                    this.procurementUpdate(0)
                }
            }
            this.modal = false
        },
        hideMobel() {},
        // 关闭底部
        handlerPopupClose() {
            this.popupShow = false
        },
        // 我要参与
        popupAdd() {
            this.joinData = Object.assign(this.procurement, {number: '', price: '', userId: this.userInfo.userId})
            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.sid
                })
            } else {
                this.procurementEditData()
            }
        },
        // 详情
        async procurementDetail(id) {
            try {
                const { data } = await this.ProcurementService.procurementDetail({ id: id })
                this.procurement = data.procurement
                this.procurementList = data.procurementList
                this.skeletonShow = false
            } catch (error) {
                console.log(error)
            }
        },
        // 删除 退出
        async procurementUpdate(type) {
            const form = {
                id: `${this.joinData.id}`,
                userId: this.userInfo.userId,
                procurementType: type
            }
            try{
                await this.ProcurementService.procurementUpdate(form)
                this.procurementTabChange()
                uni.showToast({
                    title: `${type === 0 ? '删除' : '退出'}成功`,
                    icon: 'success'
                })
            }catch(error){
                console.log(error)
            }
        },
        // 我要参与
        async procurementParticipate() {
            if(this.joinData.price === '') {
                return this.$util.msg('请输入期望单价', 2000)
            }
            if(this.joinData.number === '') {
                return this.$util.msg('请输入期望数量', 2000)
            }
            const form = {
                userId: this.userInfo.userId,
                productImage: this.joinData.productImage,
                productName: this.joinData.productName,
                price: this.joinData.price,
                number: this.joinData.number
            }
            try{
                const data = await this.ProcurementService.procurementParticipate(form)
                uni.showToast({
                    title:`${this.procurement.isInvolved === 0 ? '参与' : '修改'}成功`,
                    icon: 'success'
                })
            }catch(error){
                console.log(error)
            }
        },
        // 参与详情
        async procurementEditData() {
            const form = {
                id: `${this.joinData.sid}`,
                userId: this.userInfo.userId,
                procurementType: 0
            }
            try{
                const data = await this.ProcurementService.procurementEditData(form)
                this.joinData = data.data
                this.popupShow = true
            }catch(error){
                console.log(error)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.img {
    width: 136rpx;
    height: 136rpx;
    border: 1px dotted black;
    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;
}
.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;
}
.Initiator_price .unit_price,
.Initiator_price .unit_sum {
    display: flex;
    align-items: center;
}
.Initiator_price .unit_sum {
    margin-left: 120rpx;
}
.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>