yihuo/pages/sell_create_more/index.vue

<template>
    <page title="发布商品" ref="pageRef" light nav-color="transparent" custom-class="padding-nav">

        <view class="paddingX14 paddingY9">
            <view
                v-for="item in tableData"
                :key="item.data.key"
                class="marginY6 padding15 cell flex-align"
            >
                <image :src="item.data.spu.cover" class="image flex-shrink0" mode="aspectFit" />
                <view
                    class="flex1 self-stretch paddingY3 flex-column-between paddingL12 color-white"
                >
                    <view class="flex-align">
                        <view class="font4 line-ellipsis flex1 bold" style="width: 0">
                            {{ item.data.spu.name }}
                        </view>
                    </view>
                    <view class="flex-align-between font4">
                        <image
                            style="width: 110rpx; height: 32rpx"
                            :src="LEVEL_MAP[item.data.level].titleText"
                        />
                        <view class="color-white font3">x{{ item.total }}</view>
                    </view>
                    <view class="input-wrapper flex-align" :class="[item.data.price && 'active']">
                        <input
                            v-model.trim="item.data.price"
                            type="number"
                            placeholder="请输入商品单价"
                            placeholder-class="placeholder-class"
                            class="input flex1"
                            maxlength="15"
                        />
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom-wrapper flex-align-center">
            <image :src="resource.sell_btn_create" webp class="btn-create" @click="preSubmit" />
        </view>
    </page>
</template>

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

export default {
    data() {
        return {
            resource,
            LEVEL_MAP,
            price: '',
            goods: null,
            tableData: null
        }
    },
    onLoad() {
        this.goods = this.$cache.get(this.$cache.key.STORE_SELL)
        this.handleGoods()
    },
    methods: {
        handleGoods() {
            let goodsMap = {}
            this.goods.forEach((item) => {
                let key = item.spuId + '_' + item.level
                let obj = goodsMap[key]
                if (obj) {
                    goodsMap[key] = {
                        total: obj.total + 1,
                        data: obj.data
                    }
                } else {
                    goodsMap[key] = {
                        total: 1,
                        data: { ...item, key }
                    }
                }
            })
            this.tableData = Object.values(goodsMap)
        },
        preSubmit() {
            throttle.call(this.submit)
        },
        submit() {
            let flag = this.tableData.every((item) => !!item.data.price)
            if (!flag) {
                this.$message.warn('请把价格填写完')
                return
            }
            let map = {}
            this.tableData.forEach((item) => {
                map[item.data.key] = item.data.price
            })
            this.goods.forEach((item) => {
                let key = item.spuId + '_' + item.level
                item.price = map[key]
            })
            this.$message.confirm('确定要发布商品吗？', () => {
                this.realSubmit()
            })
        },
        async realSubmit() {
            const array = this.goods.map((item) => ({
                inventoryId: item.id,
                price: item.price
            }))
            const res = await this.$service.sell.publish(array)
            if (res) {
                this.$event.emit(this.$event.key.STORE_REFRESH)
                this.$router.replace('sell_record')
            }
        }
    }
}
</script>
<style>

</style>
<style lang="scss" scoped>
.bg {
    position: fixed;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}
.cell {
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 5px 0px rgba(167, 110, 244, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    .image {
        box-shadow: 0px 0px 5px 0px rgba(167, 110, 244, 0.5);
        border-radius: 8px;
        width: 180rpx;
        height: 180rpx;
    }
    .input-wrapper {
        height: 62rpx;
        box-shadow: 0px 0px 4px 2px rgba(147, 67, 255, 0.3);
        border-radius: 4px;
        border: 1px solid rgba(174, 231, 255, 0.5);
        &.active {
            background: linear-gradient(315deg, #6c6fff 0%, #a948ff 100%);
            border: 0;
        }
        .input {
            color: white;
            text-align: center;
            font-size: 14px;
        }
    }
}
.bottom-wrapper {
    background: #222335;
    padding-bottom: 48rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
.btn-create {
    width: 616rpx;
    height: 128rpx;
}
.padding-nav {
    padding-bottom: 176rpx;
}
.placeholder-class {
    color: #f0e6ff;
}
</style>