yihuo/pages/sell_record/publish_record.vue

<template>
    <view>
        <scroll-view class="wrapper" :style="{top: top + 'px'}" scroll-y refresher-enabled refresher-default-style="white"
            @refresherrefresh="pullRefresh" :refresher-triggered="refreshing" @scrolltolower="loadMore">
            <tabbar2 custom-class="marginX14 marginY10" :tabs="tabs" @change="clickTab" />
            <view v-if="tableData" class="paddingX14">
                <view v-for="(item, index) in tableData" :key="item.id" class="cell marginB12 paddingX15 relative"
                    @click="showDetail(item)">
                    <view class="paddingT15 paddingB10 flex-align">
                        <image :src="item.cover" class="image flex-shrink0" mode="aspectFit" />
                        <view class="flex1 self-stretch paddingY5 flex-column-between paddingL12 color-white">
                            <view class="flex-align">
                                <view class="font4 line-ellipsis flex1 bold" style="width: 0">{{item.name}}</view>
                            </view>
                            <view class="flex-align font4">
                                <view>售价：¥</view>
                                <view class="bold flex1">{{item.price}}</view>
                                <image v-if="item.level" style="width: 110rpx; height: 32rpx" :src="LEVEL_MAP[item.level].titleText" />
                            </view>
                            <view class="flex-align font4">
                                <view>发布时间：{{item.createTime}}</view>
                            </view>
                        </view>
                    </view>
                    <view v-if="item.status === 1" class="line"></view>
                    <view v-if="item.status === 1" class="font2 color-white paddingY9 flex-align-between">
                        <view><button class="btn blue" @click.stop="showBidGoods(index, item)">查看出价</button></view>
                        <view class="flex-align">
                            <button class="btn yellow" @click.stop="cancel(item, index)">下架</button>
                            <button class="btn theme marginL20" @click.stop="showChange(index, item)">改价</button>
                        </view>
                    </view>
                    <image v-if="item.status === 1" :src="resource.sell_status_ing" class="status" />
                    <image v-else-if="[10, 11].includes(item.status)" :src=" resource.sell_status_off" class="status" />
                </view>
            </view>
            <empty v-if="isEmpty" :top="200" light />
        </scroll-view>
        <change-price ref="changeRef" @success="onChangeSuccess" />
        <bid-goods-record ref="bidGoodsRef" @success="onChangeSuccess" />
    </view>
</template>
<script>
import { LEVEL_MAP } from '@/utils/config'
import tabbar2 from '@/components/tabbar2'
import empty from '@/components/empty'
import pageMixin from './../../mixin/page'
import resource from '@/utils/resource'
import changePrice from './change_price'
import bidGoodsRecord from './bid_goods_record'

const Tabs = [
    { title: '进行中', value: 1 },
    { title: '已下架', value: 10 },
    { title: '全部', value: '' }
]

export default {
    mixins: [pageMixin],
    components: { empty, tabbar2, changePrice, bidGoodsRecord },
    data() {
        return {
            resource,
            LEVEL_MAP,
            tabs: Tabs,
            tab: Tabs[0],
            refreshing: false
        }
    },
    computed: {
        top() {
            let height = this.$store.state.systemInfo.statusBarHeight + 36 + 50
            return height
        }
    },
    mounted() {
        this.refresh(true)
    },
    methods: {
        pullRefresh() {
            this.refreshing = true
            this.refresh()
        },
        async loadData(loading) {
            const res = await this.$service.sell.listMy(
                this.pageNum,
                this.pageSize,
                this.tab.value,
                loading
            )
            setTimeout(() => {
                this.refreshing = false
            }, 1000)
            return res
        },
        clickTab(item) {
            this.tab = item
            this.refresh(true)
        },
        showDetail(item) {
            if (item.status !== 1) return
            this.$router.push('sell_detail', { id: item.id })
        },
        async cancel(item, index) {
            this.$message.confirm('是否确认下架?', async () => {
                const res = await this.$service.sell.cancel(item.id)
                if (res) {
                    item.status = 10
                    if (this.tab.value == 1) {
                        this.tableData.splice(index, 1)
                        this.isEmpty = this.tableData.length === 0
                    }
                }
            })
        },
        showChange(index, item) {
            this.$refs.changeRef.show(index, item.id)
        },
        onChangeSuccess({ index, price }) {
            this.tableData[index].price = price
        },
        showBidGoods(index, item) {
            this.$refs.bidGoodsRef.show(index, item.id)
        }
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}
.cell {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 5px 0px rgba(167, 110, 244, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    .line {
        height: 1px;
        opacity: 0.2;
        background: #e9d9ff;
    }
    .image {
        box-shadow: 0px 0px 5px 0px rgba(167, 110, 244, 0.5);
        border-radius: 8px;
        width: 180rpx;
        height: 180rpx;
    }
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba($color: #222335, $alpha: 0.6);
        .btn-delete {
            width: 88px;
            height: 30px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            border: 1px solid #a66ef4;
            color: #fff;
            font-size: 14px;
        }
        .btn-cm {
            width: 88px;
            height: 30px;
            background: linear-gradient(270deg, #d070ff 0%, #8b3dff 100%);
            border-radius: 15px;
            color: #fff;
            font-size: 14px;
        }
    }
    .status {
        width: 100rpx;
        height: 40rpx;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
    }
    .btn {
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        padding: 0 20rpx;
        color: #fff;
        font-size: 28rpx;
        border-radius: 24rpx;
        &.theme {
            background: linear-gradient(270deg, #d070ff 0%, #8b3dff 100%);
        }
        &.yellow {
            background: linear-gradient(270deg, #ff7f2e 0%, #ff7474 100%);
        }
        &.blue {
            background: linear-gradient(315deg, #44e5e3 0%, #5dabf2 100%);
        }
    }
}
</style>