mall-app-t/pages/product/manageGoods.vue

<template>
    <pb-layout
        class="manage-goods"
        title="发布商品"
        leftIcon="leftIcon"
        navbar="normal"
        :bgStyle="bgStyle"
        opacityBgUi="bg-white"
        color="black"
    >
        <view class="goods-form">
            <uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
                <uni-forms-item label="商品封面图" name="picUrl" required>
                    <p-uploader
                        v-model:url="formData.picUrl"
                        fileMediatype="image"
                        limit="1"
                        mode="grid"
                        :imageStyles="{ width: '168rpx', height: '168rpx' }"
                    />
                </uni-forms-item>
                <uni-forms-item label="商品轮播图" name="sliderPicUrls" required>
                    <p-uploader
                        v-model:url="formData.sliderPicUrls"
                        fileMediatype="image"
                        limit="6"
                        mode="grid"
                        :imageStyles="{ width: '168rpx', height: '168rpx' }"
                    />
                </uni-forms-item>
                <uni-forms-item label="商品名称" name="name" required>
                    <uni-easyinput type="text" trim="all" v-model="formData.name" placeholder="请输入商品名称" />
                </uni-forms-item>
                <uni-forms-item
                    label="商品分类"
                    @tap="openPicker('category', 'multiple')"
                    name="categoryId"
                    label-position="left"
                    required
                >
                    <uni-easyinput
                        type="text"
                        v-model="formData.categoryText"
                        :styles="selfStyles"
                        placeholderStyle="color:#8a8a8a"
                        :clearable="false"
                        :inputBorder="false"
                        placeholder="请选择商品分类"
                        disabled
                    >
                        <template v-slot:right>
                            <uni-icons type="right" />
                        </template>
                    </uni-easyinput>
                </uni-forms-item>
                <uni-forms-item label="商品品牌" name="brandId" label-position="left" required>
                    <uni-easyinput
                        type="text"
                        v-model="formData.brandId"
                        :styles="selfStyles"
                        placeholderStyle="color:#8a8a8a"
                        :clearable="false"
                        :inputBorder="false"
                        placeholder="请选择商品品牌"
                        disabled
                    >
                        <template v-slot:right>
                            <uni-icons type="right" />
                        </template>
                    </uni-easyinput>
                </uni-forms-item>
                <uni-forms-item label="商品规格" name="skus" label-position="left" required>
                    <uni-easyinput
                        type="text"
                        v-model="formData.skus"
                        :styles="selfStyles"
                        placeholderStyle="color:#8a8a8a"
                        :clearable="false"
                        :inputBorder="false"
                        placeholder="请添加商品规格"
                        disabled
                    >
                        <template v-slot:right> <uni-icons type="right" /> </template
                    ></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item label="商品关键词" name="keyword" required>
                    <uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
                </uni-forms-item>
                <uni-forms-item label="商品简介" name="introduction" required>
                    <uni-easyinput
                        type="textarea"
                        trim="all"
                        autoHeight
                        v-model="formData.introduction"
                        placeholder="请输入商品简介"
                    />
                </uni-forms-item>
                <uni-forms-item
                    label="物流设置"
                    @tap="openPicker('delivery', 'single')"
                    name="deliveryTypes"
                    label-position="left"
                    required
                >
                    <uni-easyinput
                        type="text"
                        :clearable="false"
                        :styles="selfStyles"
                        placeholderStyle="color:#8a8a8a"
                        :inputBorder="false"
                        v-model="formData.deliveryText"
                        placeholder="请选择配送方式"
                        disabled
                    >
                        <template v-slot:right>
                            <uni-icons type="right" />
                        </template>
                    </uni-easyinput>
                </uni-forms-item>
            </uni-forms>
        </view>

        <p-picker
            ref="pickerRef"
            :mode="pickerMode"
            :options-cols="optionsCols"
            @confirm="onRDPickerConfirm"
        ></p-picker>
    </pb-layout>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import peach from '@/peach'
import { handleTree } from '@/peach/utils'
import GoodsApi from '@/peach/api/trade/goods'
import _ from 'lodash'

const bgStyle = {
    backgroundImage: '',
    backgroundColor: '#fff',
    description: '',
}

const DELIVERY_TYPES = [
    {
        value: 3,
        label: '到店核销',
    },
    {
        value: 4,
        label: '商家配送',
    },
]

const selfStyles = {
    backgroundColor: '#f9f9f9',
}

const pickerRef = ref()
const formData = ref({
    picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
    sliderPicUrls: [
        'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
        'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
        'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
    ],
    name: '测试商品',
    categoryId: [],
    categoryText: '',
    brandId: '',
    keyword: '香酥鸭，但家',
    deliveryTypes: [],
    deliveryText: '',
    introduction: '但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭',
})

const rules = {
    name: {
        rules: [
            {
                required: true,
                errorMessage: '请输入商品名称',
            },
        ],
    },
    picUrl: {
        rules: [
            {
                required: true,
                errorMessage: '请上传商品封面图',
            },
        ],
    },
    sliderPicUrls: {
        rules: [
            {
                required: true,
                errorMessage: '请上传商品轮播图',
            },
        ],
    },
    categoryId: {
        rules: [
            {
                required: true,
                errorMessage: '请选择商品分类',
            },
        ],
    },
    brandId: {
        rules: [
            {
                required: true,
                errorMessage: '请选择商品品牌',
            },
        ],
    },
    skus: {
        rules: [
            {
                required: true,
                errorMessage: '请选择商品规格',
            },
        ],
    },
    keyword: {
        rules: [
            {
                required: true,
                errorMessage: '请输入商品关键字',
            },
        ],
    },
    introduction: {
        rules: [
            {
                required: true,
                errorMessage: '请输入商品简介',
            },
        ],
    },
    deliveryTypes: {
        rules: [
            {
                required: true,
                errorMessage: '请选择商品物流',
            },
        ],
    },
}

const formRef = ref(null)
const pickerMode = ref('single')
const popMark = ref('')
const categoryList = ref([])
const optionsCols = ref([])

function openPicker(mark, mode) {
    pickerMode.value = mode
    popMark.value = mark
    if (mark === 'delivery') {
        optionsCols.value = DELIVERY_TYPES
        pickerRef.value.onOpen([0])
    } else if (mark === 'category') {
        optionsCols.value = categoryList.value
        pickerRef.value.onOpen([0, 0])
    }
}

function onRDPickerConfirm(e) {
    if (popMark.value === 'delivery') {
        formData.value.deliveryTypes = []
        formData.value.deliveryText = DELIVERY_TYPES[e.value[0]].label
        formData.value.deliveryTypes.push(DELIVERY_TYPES[e.value[0]].value)
    }

    if (popMark.value === 'category') {
        formData.value.categoryId = e.value
        formData.value.categoryText =
            categoryList.value[e.value[0]].name + '/' + categoryList.value[e.value[0]].children[e.value[1]].name
    }
}

function getProduct() {
    GoodsApi.getProduct(formData.value.id).then((res) => {
        formData.value = res
    })
}

function onSubmit() {
    console.log('res', formData.value)

    formRef.value
        .validate()
        .then(async (res) => {
            let tempObj = { ...res }

            if (formData.value.id) {
                tempObj.id = formData.value.id
                await GoodsApi.editProduct(tempObj)
            } else {
                await GoodsApi.addProduct(tempObj)
            }
        })
        .catch((err) => {
            console.log('err', err)
        })
}

// 获取商品详情
function getGoodsInfo() {}

// 获得商品分类
async function getCategoryList() {
    let { data } = await GoodsApi.getGoodsCategory()
    categoryList.value = handleTree(data)
}

// 获得商品品牌
async function getBrandList() {
    let { data } = await GoodsApi.getBrandList()
    console.log(data)
}

onLoad((options) => {
    getCategoryList()
    if (options.id) {
        getProduct()
    }
})
</script>

<style lang="scss" scoped>
.manage-goods {
    .goods-form {
        margin: 40rpx;

        :deep() {
            .uni-easyinput__content-input {
                font-size: 28rpx !important;
                color: #333333 !important;
                line-height: normal !important;
            }

            .uni-easyinput__placeholder-class {
                font-size: 14px;
            }

            .is-direction-left {
                .uni-forms-item__label {
                    padding-left: 10px;
                    background-color: #f9f9f9;
                    border-radius: 10px 0 0 10px;
                }

                uni-icons {
                    margin-right: 10px;
                }

                .uni-easyinput__content {
                    border-radius: 0 10px 10px 0;
                }
            }

            .is-disabled {
                color: #333333;
                text-align: right;
            }
        }
    }
}
</style>