yihuo/pages/sell_detail/bid.vue

<template>
    <view class="cu-modal" :class="{'show': visible}">
        <view class="cu-dialog wrapper">
            <view class="content">
                <view class="flex-align-center">
                    <image :src="resource.sell_bid_title" webp style="width: 274rpx; height: 46rpx" />
                </view>
                <view class="input-wrapper marginY20 flex-align paddingX10">
                    <input v-model.trim="price" class="flex1 color-white" />
                    <image v-if="price" @click="price = ''" :src="resource.weal_cancel" webp style="width: 32rpx;height: 32rpx" />
                </view>
                <view class="flex-align-between">
                    <image :src="resource.modal_cancel" webp style="width: 254rpx;height:92rpx" @click="close" />
                    <image :src="resource.modal_ok" webp style="width: 254rpx;height:92rpx" @click="apply" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { throttle } from '@/utils'
import resource from '@/utils/resource'

export default {
    props: {
        tradeGoodsId: Number
    },
    data() {
        return {
            resource,
            visible: false,
            price: ''
        }
    },
    computed: {},
    methods: {
        show() {
            this.price = ''
            this.visible = true
        },
        async apply() {
            if (!this.price) return
            throttle.call(this.realApply)
        },
        async realApply() {
            const res = await this.$service.sell.bid(this.tradeGoodsId, this.price)
            if (res) {
                this.$emit('success')
                this.close()
            } else {
                this.price = ''
            }
        },
        close() {
            this.visible = false
        }
    }
}
</script>
<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    width: 100%;
    margin-top: -100px;
    background: transparent;
    .content {
        padding: 40rpx 60rpx;
        margin: 0 20px;
        background: #000000;
        border-radius: 16px;
        border: 4px solid;
        border-image: linear-gradient(180deg, rgba(89, 55, 195, 1), rgba(169, 27, 136, 1)) 2 2;
        .input-wrapper {
            height: 100rpx;
            background: rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px 8rpx 4rpx rgba(147, 67, 255, 0.3);
            border-radius: 8rpx;
            border: 2rpx solid rgba(174, 231, 255, 0.5);
        }
    }
}
</style>