RunForge-Frontend/src/pages/admin/goods/addGoods.vue

<template>
    <div class="container">
        <Breadcrumb />

        <a-card title="添加商品">
            <a-form :model="form" :rules="rules" layout="vertical" @submit-success="handleSubmit">
                <a-form-item field="name" label="商品名称" :style="{ width: '600px' }">
                    <a-input v-model="form.name" :max-length="25" allow-clear show-word-limit />
                </a-form-item>

                <a-form-item field="price" label="价格" :style="{ width: '300px' }">
                    <a-input-number v-model="form.price" :step="0.01" :precision="2" />
                </a-form-item>

                <a-form-item field="lepao_count" label="乐跑次数" :style="{ width: '300px' }">
                    <a-input-number v-model="form.lepao_count" :step="1" :precision="0" />
                </a-form-item>

                <a-form-item field="num" label="库存数量" :style="{ width: '300px' }">
                    <a-input-number v-model="form.num" :step="1" :precision="0" />
                </a-form-item>

                <a-form-item field="state" label="商品状态" :style="{ width: '300px' }">
                    <a-radio-group v-model="form.state">
                        <a-radio :value="1">正常</a-radio>
                        <a-radio :value="0">下架</a-radio>
                    </a-radio-group>
                </a-form-item>

                <a-form-item field="content" label="商品详情">
                    <WangEditor v-model="form.content" @change="contentChange"></WangEditor>
                </a-form-item>

                <a-form-item>
                    <a-button html-type="submit" :loading="loading">保存</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { adminGetGoods, addGoods } from '@/api/goods'
import { useRoute } from 'vue-router'
import { Notification } from '@arco-design/web-vue'
import WangEditor from '@/components/Editor/WangEditor.vue'

const loading = ref(false)
const route = useRoute()

const rules = {
    name: [
        {
            required: true,
            message: '请输入商品名称',
        },
    ],
    price: [
        {
            required: true,
            message: '请填写商品价格',
        }
    ],
    lepao_count: [
        {
            required: true,
            message: '请填写乐跑次数',
        }
    ],
    num: [
        {
            required: true,
            message: '请填写商品库存',
        }
    ],
    state: [
        {
            required: true,
            message: '请选择商品状态',
        }
    ]
}

const form = reactive({
    name: '',
    price: 0.00,
    num: 999999,
    files: [],
    lepao_count: 0,
    ic_count: 0,
    content: '',
    state: 1
})

const contentChange = (value) => {
    form.content = value
}

const handleSubmit = async () => {
    try {
        loading.value = true
        let data = {
            ...form,
            id: route.params.id ?? null
        }
        data.content = btoa(encodeURI(data.content))
        const res = await addGoods(data)
        if (!res || res.code !== 0)
            return Notification.error({
                title: '保存商品失败！',
                content: res?.msg ?? '请稍后再试'
            })
        Notification.success({
            title: '保存成功！'
        })
        // router.push(`/service/orderDetail/${res.data}`)
    } catch (error) {
        Notification.error({
            title: '保存商品失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

const getGoodsDetail = async () => {
    if (!route.params.id) return
    try {
        loading.value = true
        const res = await adminGetGoods({ id: route.params.id })
        if (!res || res.code !== 0)
            return Notification.error({
                title: '获取商品信息失败！',
                content: res?.msg ?? '请稍后再试'
            })
        const { name, price, num, content, state, lepao_count } = res.data
        form.content = decodeURI(atob(content))
        form.name = name
        form.price = Number(price)
        form.lepao_count = lepao_count
        form.num = num
        form.state = state
    } catch (error) {
        Notification.error({
            title: '获取商品信息失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    getGoodsDetail()
})

</script>

<style scoped>
.container {
    padding: 0 20px 20px 20px;
}

.table {
    margin-top: 15px;
}
</style>