caimei-applets-mcare/pages/goods/components/procurement-popup.vue

<template>
    <view>
        <tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show.sync="popupShow" @close="$emit('handlerPopupClose', false)">
            <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="isImageUrl(joinData.productImage) ? imageUrl : 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"
                                maxlength="10"
                                :always-embed="true"
                                :adjust-position="true" 
                                cursor-spacing="30"
                                v-model="joinData.price"
                                @input="fpNumInput($event, '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"
                                maxlength="10"
                                type="number"
                                :always-embed="true"
                                :adjust-position="true" 
                                cursor-spacing="30"
                                v-model="joinData.number"
                                @input="NumberInput($event, 'joinData', 'number')"
                            />
                        </view>
                    </view>
                    <view class="submit_btn">
                        <button class="popup_btn cancel" @click="$emit('handlerPopupClose', false)">取消</button>
                        <button class="popup_btn submit" @click="$emit('procurementParticipate', joinData)">确定</button>
                    </view>
                </form>
            </view>
        </tui-bottom-popup>
    </view>
</template>

<script>
    import procurementMixins from '../mixins/procurementMixins.js'
    export default {
        mixins: [procurementMixins],
        props: {
            dataObj: {
                type: Object,
                default: () => ({})
            },
            isShow: {
                type: Boolean,
                default: () => false
            }
        },
        data() {
            return {
                popupShow: false, // 显示隐藏
                joinData: {}, // 数据
            }
        },
        watch: {
            dataObj(val) {
                if(JSON.stringify(val) != '{}') {
                    this.joinData = val
                }
            },
            isShow(val) {
                this.popupShow = val
            }
        },
        methods: {
        },
    }
</script>

<style scoped lang="scss">
    .popup_content {
        padding: 0 64rpx;
    }
    .pro_popup_title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        margin: 40rpx auto;
        text-align: center;
    }
    .popup_form {
        margin-bottom: 32rpx;
    }
    .popup_form .popup_form_item {
        color: #999999;
        font-size: 26rpx;
        margin-bottom: 16rpx;
    }
    .popup_form .popup_img {
        width: 136rpx;
        height: 136rpx;
    }
    .popup_form .popup_form_name {
        color: #333333;
        font-size: 26rpx;
        font-weight: 400;
        line-height: 44rpx;
    }
    .uni-form-item .title {
        color: #999999;
        font-size: 26rpx;
        margin-bottom: 16rpx;
    }
    .input_icon {
        position: absolute;
        left: 15rpx;
        top: 24rpx;
        color: #b2b2b2;
        font-size: 26rpx;
    }
    .uni-form-item .uni-input {
        height: 80rpx;
        border: 1px solid #b2b2b2;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        font-size: 26rpx;
        padding-left: 47rpx;
        margin-bottom: 32rpx;
    }
    .submit_btn {
        margin-top: 56rpx;
        height: 84rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 50rpx;
    }
    .submit_btn .popup_btn {
        width: 280rpx;
        height: 100%;
        border-radius: 45rpx 45rpx 45rpx 45rpx;
        text-align: center;
        line-height: 84rpx;
    }
    ::v-deep .submit_btn .cancel {
        background-color: #fff4e6;
        color: #f3b574;
        font-size: 32rpx;
    }
    ::v-deep .submit_btn .submit {
        background-color: #f3b574;
        color: #ffffff;
        font-size: 32rpx;
    }
</style>