yihuo/pages/sell_record/bid_goods_record.vue

<template>
    <view class="cu-modal bottom-modal" :class="{'show': visible}">
        <view class="mask" @click="close"></view>
        <view class="cu-dialog wrapper">
            <view class="paddingY25 flex-align-center relative">
                <image :src="resource.sell_bid_recrod_title" class="title" />
                <image :src="resource.icon_x" class="x" @click="close" />
            </view>
            <scroll-view style="height: 750rpx" scroll-y v-if="tableData && tableData.length > 0">
                <view v-for="(item, index) in tableData" :key="index" class="cell flex-align paddingX6 paddingY10">
                    <image :src="item.avatar" class="avatar" />
                    <view class="flex1 marginX10 color-2">{{item.nickname}}</view>
                    <view class="color-money">出价 ¥{{item.bidPrice}}</view>
                    <button class="btn marginL15" @click.stop="changePrice(item)">改价</button>
                </view>
            </scroll-view>
            <view v-if="!tableData || tableData.length === 0" style="height: 750rpx">
                <empty :top="0" />
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
import { LEVEL_MAP } from '@/utils/config'
import empty from '@/components/empty'

export default {
    components: { empty },
    data() {
        return {
            tableData: null,
            LEVEL_MAP,
            resource,
            visible: false
        }
    },
    methods: {
        show(index, goodsId) {
            this.$parent.$parent.$parent.lock = true
            this.index = index
            this.goodsId = goodsId
            this.visible = true
            this.refresh()
        },
        close() {
            this.$parent.$parent.$parent.lock = false
            this.visible = false
            this.tableData = null
            this.goodsId = null
            this.index = null
        },
        refresh() {
            this.loadData()
        },
        async loadData(loading = false) {
            const res = await this.$service.sell.bidListByGoods(1, 20, this.goodsId)
            this.tableData = res
        },
        async changePrice(item) {
            this.$message.confirm(`确定要改为${item.bidPrice}元吗？`, async () => {
                const res = await this.$service.sell.change(this.goodsId, item.bidPrice)
                if (res) {
                    this.$emit('success', { index: this.index, price: item.bidPrice })
                    this.close()
                } else {
                    this.price = ''
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    padding: 0 28rpx 64rpx;
    background: #171b1e;
    border-radius: 15px 15px 2px 2px;
    .title {
        width: 172rpx;
        height: 30rpx;
    }
    .x {
        position: absolute;
        right: 28rpx;
        top: 50%;
        margin-top: -16rpx;
        width: 32rpx;
        height: 32rpx;
    }
    .cell {
        .avatar {
            width: 52rpx;
            height: 52rpx;
            border-radius: 26rpx;
        }
        .btn {
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;
            padding: 0 20rpx;
            color: #fff;
            font-size: 28rpx;
            background: linear-gradient(270deg, #d070ff 0%, #8b3dff 100%);
            border-radius: 24rpx;
        }
    }
}
</style>