<template> <div class="good-page"> <div class="good-search" v-if="!isShowGoods"> <div> <a-radio-group v-model:value="status"> <a-radio-button value="0" class="status" @click="onSearch" >全部</a-radio-button > <a-radio-button value="1" class="status" @click="onSearch" >正常</a-radio-button > <a-radio-button value="2" class="status" @click="onSearch" >已下架</a-radio-button > </a-radio-group> <a-input-search v-model:value="value" placeholder="请输入商品名称" style="width: 200px; margin-left: 10px" @search="onSearch" /> </div> <div class="good-cad"> <a-button type="primary" class="mr10" @click="onGoods(0)" >新建商品</a-button > <a-button type="primary" @click="onGoods(1)">新建商品包</a-button> </div> </div> <div class="goods-list" v-if="!isShowGoods"> <a-table :columns="columns" :data-source="list"> <template #bodyCell="{ column, record }"> <template v-if="column.key === 'tags'"> <a-button type="primary" @click="onEdit(record)">编辑</a-button> <a-button type="primary" style="margin-left: 20px">统计</a-button> <a-popconfirm title="确定下架这条数据" ok-text="确定" cancel-text="取消" @confirm="onDel(record)" > <a-button type="primary" style="margin-left: 20px">删除</a-button> </a-popconfirm> <a-popconfirm title="确定删除这条数据" ok-text="确定" cancel-text="取消" @confirm="onDel(record)" > <a-button type="primary" style="margin-left: 20px">删除</a-button> </a-popconfirm> </template> </template> </a-table> </div> <div v-if="isShowGoods"> <div style=" display: flex; align-items: center; justify-content: space-between; " v-if="isShowGoods" > <a-button class="small left" @click="onBack"> <template #icon> <LeftOutlined /> </template> </a-button> </div> <GoodsBags :props="{ propsData }" v-if="propsData.isCad == 0" @onBack="onBack" ></GoodsBags> <GoodsBagSubs :props="{ propsData }" v-else @onBack="onBack"> </GoodsBagSubs> </div> <a-modal v-model:visible="visible" title="编辑" :confirm-loading="confirmLoading" :width="1000" @ok="handleOk" @Cancel="handleCancel" > <a-form :model="modelRef" name="basic" :label-col="{ span: 2 }" :wrapper-col="{ span: 8 }" autocomplete="off" > <a-form-item label="商品名称" name="商品名称" :rules="[{ required: true, message: '请输入商品名称!' }]" :label-col="{ span: 2 }" > <a-input v-model:value="modelRef.subject" /> </a-form-item> <a-form-item label="商品简介" name="商品简介" :rules="[{ required: true, message: '请输入商品简介!' }]" :label-col="{ span: 2 }" > <a-input v-model:value="modelRef.shortname" /> </a-form-item> <a-form-item label=" 商品示图" name="picurl" :wrapper-col="{ offset: 0, span: 8 }" class="Up" labelAlign="left" :label-col="{ span: 2}" > <div class="clearfix"> <a-upload class="clearfix-up" action="/api/file/upload" list-type="picture-card" > <div > <plus-outlined /> <div style="margin-top: 8px">Upload</div> </div> </a-upload> <a-modal > <img alt="example" style="width: 100%" :src="modelRef.picurl" /> </a-modal> <div> <p class="warin"> 建议图片比例为4:3,大小不超过200M,图片仅支持JPG、JPEG、PNG格式 </p> </div> </div> </a-form-item> <a-form-item label="商品详情" name="body" labelAlign="left" :label-col="{ span: 2 }"> <a-textarea placeholder="请输入商品详情" :rows="4" v-model:value="modelRef.body"/> <div class="editor-text"> <p>1、商品描述需符合《中华人民共和国广告法》</p> <p> 2、详情图片宽度750,高度不超过5000,每张图片最大不超过1M,图片仅支持JPG、JPEG、PNG格式。 </p> </div> </a-form-item> <a-form-item name="price" :wrapper-col="{ offset: 0, span: 4 }" label="商品售价" :rules="[{ required: true, message: '请输入输入价格' }]" labelAlign="left" :label-col="{ span: 2 }"> <div> <a-radio-group v-model:value="modelRef.sellingmodel" @change="onSelectPlain" > <a-radio value="0">免费</a-radio> <a-radio value="1">收费</a-radio> </a-radio-group> </div> </a-form-item> <a-form-item :wrapper-col="{ offset:2, span: 7 }" > <div style="display:flex;"> <div style="margin-right:20px">划线价</div> <a-input-number style="width: 200px" :min="0" :max="10" :step="0.01" string-mode v-model:value="modelRef.markingprice" /> </div> </a-form-item> <a-form-item name="price" :wrapper-col="{ offset: 2, span: 7 }" :rules="[{ required: true, message: '请输入商品价格!' }]"> <div style="display:flex;"> <div style="margin-right:20px">售卖价</div> <a-input-number style="width: 200px" :min="0" :max="10" :step="0.01" string-mode v-model:value="modelRef.price" /> </div> </a-form-item> </a-form> </a-modal> </div> </template> <script lang="ts" setup> import { ref, reactive, defineExpose, onMounted } from "vue"; import { LeftOutlined } from "@ant-design/icons-vue"; import GoodsBags from "./components/goods/index.vue"; import GoodsBagSubs from "./components/goodsubs/index.vue"; import { onSelectGoods, onfindby, onUpdateGoods } from "@/api/index"; import { getUid } from "@/utils/userInfo"; import { Form } from 'ant-design-vue'; const useForm = Form.useForm; const columns = [ { title: "商品编号", dataIndex: "goodsid", key: "goodsid", }, { title: "商品名称", dataIndex: "subject", key: "subject", }, { title: "商品类型", dataIndex: "sellingmodel", key: "sellingmodel", }, { title: "商品售卖数", key: "markingprice", dataIndex: "markingprice", }, { title: "默认金额售卖数", key: "price", dataIndex: "price", }, { title: "已售金额", key: "price", dataIndex: "price", }, { title: "商品状态", key: "status", dataIndex: "status", }, { title: "操作", key: "tags", dataIndex: "tags", }, ]; interface props { isCad: Number; } const list = ref<Array<Object>>([]); const value = ref<string>(""); const status = ref<string>("0"); let modelRef = ref({}); const propsData = reactive<props>({ isCad: 0, }); const isShowGoods = ref<Boolean>(false); const modalText = ref<string>("Content of the modal"); const visible = ref<boolean>(false); const confirmLoading = ref<boolean>(false); const showModal = () => { visible.value = true; }; const handleOk = async() => { const uid =getUid() const prarms = { uid:uid, ...modelRef.value } const data = await onUpdateGoods(prarms); console.log(data); if(data.state === 1){ visible.value = false; modelRef.value = {} await init(); } }; const handleCancel = ()=>{ } const onSearch = async () => { const params = { status: status.value, name: value.value, uid: getUid(), }; const data = await onfindby(params); list.value = data.data; }; const onGoods = (e: Number) => { propsData.isCad = e; isShowGoods.value = true; }; const onBack = async (e: Number) => { isShowGoods.value = !isShowGoods.value; const uid = getUid(); const data = await onSelectGoods(uid); list.value = data.data; }; const onEdit =(e: any) => { visible.value = !visible.value; modelRef.value = e }; const { resetFields, validate, validateInfos } = useForm( modelRef, reactive({ subject: [ { required: true, message: "请输入商品名称", }, ], }) ); const onSelectPlain = (e: any) => { if(e.target.value === '0'){ modelRef.value.price = "0" // free 0 modelRef.value.sellingmodel= e.target.value; } }; const onSubmit = () => { validate() .then((res) => { console.log(res, toRaw(modelRef)); }) .catch((err) => { console.log("error", err); }); }; const reset = () => { resetFields(); }; const onDel = async (e: any) => { const uid = getUid(); e.status = "1"; e.uid = uid const data = await onUpdateGoods(e); await init(); }; const init = async () => { const uid = getUid(); const data = await onSelectGoods(uid); list.value = data.data; }; onMounted(async () => { await init(); }); defineExpose({ status, value, columns, isShowGoods, propsData, modalText, visible, confirmLoading, validateInfos, modelRef, onSelectPlain, reset, onSubmit, showModal, handleOk, handleCancel, onBack, onSearch, onGoods, onEdit, onDel, init, }); </script> <style lang="less" scoped> .good-page { .good-search { width: 100%; display: flex; align-items: center; justify-content: space-between; .status { margin-right: 20px; width: 80px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.65); } .status::before { display: none; } .ant-radio-button-wrapper-checked { border: 1px solid @primary-color; } .ood-cad { width: 100%; } .ml10 { margin-left: 10px; } .mr10 { margin-right: 10px; } } .goods-list { margin-top: 10px; } .small { border: none; height: 30px; width: 50px; } .left { border-left: 1px solid rgb(236, 236, 236); border-top: 1px solid rgb(236, 236, 236); border-bottom: 1px solid rgb(236, 236, 236); border-right-width: 80%; border-right: 1px solid rgb(236, 236, 236); border-bottom-left-radius: 25px; border-top-left-radius: 25px; } } </style> <style lang="less"> .ant-layout-content { overflow-y: scroll; } </style>