From 663fd4776518582a348c392de1067fe51544712b Mon Sep 17 00:00:00 2001 From: yuanteng <1876787513@qq.com> Date: Tue, 17 Dec 2024 14:59:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AE=9E=E4=BD=93=E7=B1=BB?= =?UTF-8?q?=E5=95=86=E5=93=81=E6=A0=BC=E5=BC=8F=E5=8C=96=E6=88=90=E5=8A=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/myAxios.ts | 4 +- src/layout/components/DateDrawer.vue | 80 +++++ src/layout/components/calendarUtil.vue | 1 + src/utils/messageInfo.ts | 29 ++ src/views/Commodity/AddProduct.vue | 306 +++++++++++++------- src/views/Orders/OrderList.vue | 10 +- src/views/ServiceType/AddServiceProduct.vue | 4 +- src/views/ServiceType/ProductCenter.vue | 274 +++++++++++++++--- src/views/test.vue | 133 ++++++--- 9 files changed, 642 insertions(+), 199 deletions(-) create mode 100644 src/layout/components/DateDrawer.vue create mode 100644 src/utils/messageInfo.ts diff --git a/src/api/myAxios.ts b/src/api/myAxios.ts index 70aa745..62ab694 100644 --- a/src/api/myAxios.ts +++ b/src/api/myAxios.ts @@ -4,8 +4,8 @@ import router from '../router' const myAxios = axios.create({ withCredentials:true, - baseURL: 'http://localhost:9092/api'//测试服务器 - // baseURL: 'http://123.249.108.160:8888/api' + baseURL: 'http://localhost:9092/api' + // baseURL: 'http://123.249.108.160:8888/api' //测试服务器 }); // 添加请求拦截器 axios.interceptors.request.use(function (config) { diff --git a/src/layout/components/DateDrawer.vue b/src/layout/components/DateDrawer.vue new file mode 100644 index 0000000..636bdb2 --- /dev/null +++ b/src/layout/components/DateDrawer.vue @@ -0,0 +1,80 @@ + + + + + \ No newline at end of file diff --git a/src/layout/components/calendarUtil.vue b/src/layout/components/calendarUtil.vue index aecb00f..1671d83 100644 --- a/src/layout/components/calendarUtil.vue +++ b/src/layout/components/calendarUtil.vue @@ -157,6 +157,7 @@ const drawerOpen =()=>{ //抽屉打开时 if(isTrue.value) { periodObj.value = periodMap.get(periodObj.value.specificDate) timePickArr.value= timePickMap.get(periodObj.value.specificDate) + console.log('timePickArr--->',timePickArr.value); } } const resetForm =()=>{ //重置表格 diff --git a/src/utils/messageInfo.ts b/src/utils/messageInfo.ts new file mode 100644 index 0000000..62b0416 --- /dev/null +++ b/src/utils/messageInfo.ts @@ -0,0 +1,29 @@ +import { ElMessage } from 'element-plus'; + +export const SuccessInfo = (message: any)=>{ //成功的提示 + ElMessage({ + type: 'success', + message: message + }) +} + +export const ErrorInfo = (message: any)=>{ //错误的提示 + ElMessage({ + type: 'error', + message: message + }) +} + +export const WarnInfo = (message: any) =>{ //警告的提示 + ElMessage({ + type: 'warning', + message: message + }) +} + +export const CommInfo =(message: any)=>{ //普通提示 + ElMessage({ + type: 'info', + message: message + }) +} \ No newline at end of file diff --git a/src/views/Commodity/AddProduct.vue b/src/views/Commodity/AddProduct.vue index 1e50d4d..ce22def 100644 --- a/src/views/Commodity/AddProduct.vue +++ b/src/views/Commodity/AddProduct.vue @@ -1,99 +1,102 @@ \ No newline at end of file +const validateName = (rule: any, value: any, callback: any) => { //商品名称的校验规则 + if (value === '') { + callback(new Error('请输入商品名称')) + } else if (value.length < 2) { + callback(new Error('商品名称不能小于两位')) + saveBtn.value = true + } else { saveBtn.value = false } +} +const validateIntro = (rule: any, value: any, callback: any) => { //商品简介的校验规则 + if (value === '') { + callback(new Error('请输入商品简介')) + } else if (value.length < 20) { + callback(new Error('商品简介不能少于20字')) + saveBtn.value = true + } else { saveBtn.value = false } +} +const validateDetail = (rule: any, value: any, callback: any) => { + if(value === '') { + callback(new Error('请输入商品详情')) + } else if(value.length < 80) { + callback(new Error('商品详情不能少于80字')) + saveBtn.value = true + } else { saveBtn.value = false } +} +const rules = reactive>({ //表单校验规则 + name: [{ validator: validateName, trigger: 'blur' }], + intro: [{ validator: validateIntro, trigger: 'blur' }], + introDetail: [{ validator: validateDetail, trigger: 'blur' }] +}) +const addLabel = () => { //添加商品标签按钮的方法 + if (labelList.value[labelList.value.length - 1] === '') { + WarnInfo('请填写完') + return; + } + if (labelList.value.length < 4) { + labelList.value.push('') + } +} +const addLabelList = () => { //格式化商品标签 + var string = '' + if (!labelList.value.some((item: any) => item === '')) { + string = labelList.value.join(';') + } else return; + form.value.label = string +} +const loopMap = (value :any , key :any ,map :any) => { //循环商品图片Map集合函数,用于给请求的字段赋值 + productImgArr.value.push(value) +} +const formatString =()=>{ + var str = '' + str = productImgArr.value.join(';') + // console.log(str); + return str +} + + + \ No newline at end of file diff --git a/src/views/Orders/OrderList.vue b/src/views/Orders/OrderList.vue index 1e0cf28..060bf46 100644 --- a/src/views/Orders/OrderList.vue +++ b/src/views/Orders/OrderList.vue @@ -193,22 +193,20 @@ const deliverGoods = async (row : any)=>{ getOrderList() } } -//取消订单 -const deleteOrder = async (row : any) => { - // console.log(typeof index) - const res = await myAxios.post('/goods/delete', { id: row.id }) +const deleteOrder = async (row : any) => { //取消订单+微信退款 + console.log('row-->',row.id) + const res = await myAxios.post('/wechat/refund/create', { id: row.id }) //传入订单号取消订单并退款 console.log(res) if (res.data.code === 1) { ElMessage({ type: 'success', - message: '删除成功', + message: '退款成功', }) getOrderList() } } const reset = () => { name.value = ''; - }; const load = () => { } //保存订单状态 diff --git a/src/views/ServiceType/AddServiceProduct.vue b/src/views/ServiceType/AddServiceProduct.vue index 8699dfb..a98ec2a 100644 --- a/src/views/ServiceType/AddServiceProduct.vue +++ b/src/views/ServiceType/AddServiceProduct.vue @@ -17,7 +17,7 @@ -
+
-
+
diff --git a/src/views/ServiceType/ProductCenter.vue b/src/views/ServiceType/ProductCenter.vue index cee4df2..7cbe4f9 100644 --- a/src/views/ServiceType/ProductCenter.vue +++ b/src/views/ServiceType/ProductCenter.vue @@ -26,7 +26,7 @@ + :header-cell-style="{ 'text-align': 'center' }" default-expand-all> @@ -124,21 +132,6 @@ - - - - - - - - - - - - - - - @@ -168,10 +161,38 @@ - Hi, there! + @closed="closedDrawer"> +
选择当天时间段和人数
+
+ 选择时间段 + +
+ 最小人数: + + + + 最大人数: + + + + {{ btnText[index] }} + 删除 +
+
+ {{ addbtnText }} @@ -180,7 +201,7 @@ import { ElMessage , type UploadProps , genFileId ,type UploadRawFile } from 'e import { ref, onMounted, inject } from 'vue'; import myAxios from "@/api/myAxios"; const total = ref(0); //总页数 -const idList = ref([]); +const idList = ref([]); //用于批量删除 const searchParams: any = ref({ //封装分页 current: 1, //当前页码 pageSize: 5, //每页显示条数 @@ -199,9 +220,29 @@ const reload : any = inject("reload") //页面重新刷新 const fileSimple = ref() const uploadProductImg : any = ref() //图片上传的ref绑定 const uploadProductDetail : any = ref() //图片上传的ref绑定 -const drawer = ref(false) +//抽屉变量 +const drawer = ref(false) //抽屉打开 +const drawerDate : any = ref({}) //当前日期、时间段人数信息 +const timePickArr : any = ref([]) //时间段选择器 +const minArr : any = ref([]) //最小人数数组 +const maxArr : any = ref([]) //最大人数数组 +const InfoArr : any = ref([]) //时间段人数信息数组 +const btnText = ref(Array.from({length:15},()=>('修改'))) +const addbtnText = ref('添加时间段') +const timeAbleArr = ref( //禁用时间段组件 + Array.from({ length: 15 },()=>(false)) +) +const numAbleArr = ref( //禁用人数组件 + Array.from({ length: 15 },()=>(true)) +) +const className = ref('') //课程名称 +const nowBookPeo = ref(0) //当前预约人数 onMounted(() => { //页面加载时获取商品列表和分类页表 getProductList() + for(let i = 0;i <=50 ; i++) { //初始化人数选择的数组 + minArr.value[i] = 5+i + maxArr.value[i] = 6+i + } }) const getProductList = async () => { try { @@ -211,7 +252,7 @@ const getProductList = async () => { tableData.value = res.data.data.records; total.value = parseInt(res.data.data.total) //总数据量，用于分页 appointmentDateArr.value.splice(0,total.value) - console.log(tableData.value); + console.log('tableData--->',tableData.value); tableData.value.forEach((val : any) => { appointmentDateArr.value.push(val.appointmentDateVOList) }) @@ -229,6 +270,20 @@ const getProductList = async () => { } } const saveEdit = async () => { //编辑商品 + const res = await myAxios.post('/goods/service/single/update',{...editForm.value}) + if(res.data.code === 1) { + DialogVisible.value = false + ElMessage({ + type: 'success', + message: '更新成功' + }) + } else { + ElMessage({ + type: 'error', + message: '请检查字段是否正确填写' + }) + } + console.log(res.data); } const searchByState = (event : any) => { //通过商品是否上架/下架搜索 searchParams.value.isShelves = event @@ -238,7 +293,7 @@ const searchByState = (event : any) => { //通过商品是否上架/下架搜 //删除商品 const deleteProduct = async (index: number) => { console.log(typeof index) - const res = await myAxios.post('/goods/delete', { id: index }) + const res = await myAxios.post('/goods/delete/service', { id: index }) console.log(res) if (res.data.code === 1) { ElMessage({ @@ -248,7 +303,6 @@ const deleteProduct = async (index: number) => { getProductList() } } -//选中发生的方法--->将其赋值给批量删除的数组 //详情或编辑 const ReviseOrView = (index: number, row: any , flag : number) => { //flag值不同显示不同内容 disabled开启和关闭 @@ -257,16 +311,16 @@ const ReviseOrView = (index: number, row: any , flag : number) => { editForm.value = row; }; //下架商品(待优化，有问题，逻辑有问题) -const handleOff = async (index: number, row: any) => { - row.isShelves ? row.isShelves = 0 : row.isShelves = 1 //三元运算符 改变那一行的上架值 - editForm.value = row; - const res = await myAxios.post('/goods/update',{...editForm.value}) +const handleOff = async (row: any) => { + console.log(row.isShelves); + const res = await myAxios.post('/goods/service/shelves',{id: row.id}) if(res.data.code === 1) { ElMessage({ type:'success', message:'更新成功' }) - } + } + getProductList() } //处理行数大小变化 const handleSizeChange = (newSize: any) => { @@ -298,10 +352,6 @@ const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => { //覆盖商 file.uid = genFileId() uploadProductDetail.value!.handleStart(file) } -// //将 商品类别 赋值到表格里 -const loadForm = (value: any, flag: number) => { - flag ? editForm.value.type = value : editForm.value.festivalOrder = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值 -} // 图片上传请求 此请求只要选择了图片，就会默认上传 const handleChange = async (file: any, flag: number) => { fileSimple.value = file @@ -346,9 +396,147 @@ const delBatch = async ()=>{ } } const handleSelectionChange =()=>{} -const openDrawer =()=>{ +const openDrawer =(index : number,dateInfo : any)=>{ //抽屉打开方法 + // console.log('row-->',dateInfo); + className.value = tableData.value[index].name + timePickArr.value.splice(0,timePickArr.value.length) //删除之前的时间段 + drawerDate.value = dateInfo + InfoArr.value = dateInfo.timePeriodVOList + console.log(drawerDate.value); + dateInfo.timePeriodVOList.forEach((item:any,index:number)=>{ //格式化时间段框，然后将时间段数组禁用，只修改人数 + let arr = item.timeSlot.split("-") + timeAbleArr.value[index] = true + timePickArr.value.push(arr) + }) drawer.value = true } +const saveTime =(index: number)=>{ + try{ + drawerDate.value.timePeriodVOList[index].timeSlot = timePickArr.value[index][0]+'-'+timePickArr.value[index][1] + } catch { + drawerDate.value.timePeriodVOList[index].timeSlot = '' + } +} +const minNum =(index: number)=>{} +const maxNum =(index: number)=>{} +const addList = async ()=>{ + let newIndex = drawerDate.value.timePeriodVOList.length + numAbleArr.value[newIndex] = false //启用组件 + console.log('drawerDate--->',drawerDate.value); + if(addbtnText.value === '添加时间段') { + drawerDate.value.timePeriodVOList.push({ //增加当前日期时间段 + id: 0, + timeSlot: '', + maxNumber: 0, + minNumber: 0 + }) + timePickArr.value.push([]) + addbtnText.value = '保存时间段' + } + // console.log('timeSlot-->',drawerDate.value.timePeriodVOList[newIndex].timeSlot); + if(!judgeNull(drawerDate.value.timePeriodVOList)) { + ElMessage({ + type: 'warning', + message: '填写时间段和人数' + }) + return; + } + const res = await myAxios.post('/appointmentDate/add/time',{ + timeSlot: drawerDate.value.timePeriodVOList[newIndex-1].timeSlot, + minNumber: drawerDate.value.timePeriodVOList[newIndex-1].minNumber, + maxNumber: drawerDate.value.timePeriodVOList[newIndex-1].maxNumber, + appointmentDateId: drawerDate.value.id, + }) + console.log(res.data.data); + if(res.data.code === 1) { + drawerDate.value.timePeriodVOList[newIndex-1].id = res.data.data + drawerDate.value.timePeriodVOList.forEach((item: any,index: number)=>{ + timeAbleArr.value[index] = true + numAbleArr.value[index] = true + }) + ElMessage({ + type: 'success', + message: '添加时间段成功' + }) + } else { + ElMessage({ + type: 'error', + message: '添加失败' + }) + } + console.log(res.data); + addbtnText.value = '添加时间段' +} +const subList =(index: number)=>{} +const UpdateNum = async (item: any,index:number)=>{ //修改具体日期某时间段的人数 + btnText.value[index] === '修改' ? btnText.value[index] = '保存' : btnText.value[index] = '修改' + btnText.value[index] === '保存' ? numAbleArr.value[index] = false : numAbleArr.value[index] = true + if(btnText.value[index] === '修改') { + const res = await myAxios.post('/appointmentDate/update/time',{ + id: item.id, + minNumber: item.minNumber, + maxNumber: item.maxNumber + }) + if(res.data.code === 1) { + ElMessage({ + type: 'success', + message: '更新成功' + }) + } else { + ElMessage({ + type: 'error', + message: '更新失败' + }) + } + } +} +const updateDay = async (row:any)=>{ //修改今天是否可以预约 + const res = await myAxios.post('/appointmentDate/update/status',{id: row.id}) + if(res.data.code === 1) { + ElMessage({ + type:'success', + message: '修改成功' + }); + } + getProductList() +} +const judgeNull =(List : any)=>{ //时间段和人数统一判空方法 + console.log('List--->',List); + if (List.some((item:any) => item.timeSlot=== '' || item.minNumber === 0 || item.maxNumber === 0)) { + return false; + } + return true; +} +const closedDrawer =()=>{ //完全关闭抽屉触发 + let newIndex = drawerDate.value.timePeriodVOList.length + timeAbleArr.value.forEach((item: any ,index: number)=>{ + timeAbleArr.value[index] = false + numAbleArr.value[index] = true + btnText.value[index] = '修改' + }) + if(!judgeNull(drawerDate.value.timePeriodVOList)) { + console.log('关闭抽屉的删除数组被激活'); + drawerDate.value.timePeriodVOList.splice(newIndex-1,1) + } + addbtnText.value = '添加时间段' +} +const deleteDate = async (id: number)=>{ //删除当前日期方法 + console.log(id) + const res = await myAxios.post('/appointmentDate/del/id',{id:id}) + // console.log('res--->',res); + if(res.data.code === 1) { + getProductList() + ElMessage({ + type: 'success', + message: '删除成功' + }) + } else { + ElMessage({ + type: 'info', + message: '请求失败' + }) + } +} \ No newline at end of file +const validatePass2 = (rule: any, value: any, callback: any) => { + if (value === '') { + callback(new Error('Please input the password again')) + } else if (value !== ruleForm.pass) { + callback(new Error("Two inputs don't match!")) + } else { + callback() + } +} + +const ruleForm = reactive({ + pass: '', + checkPass: '', + age: '', +}) + +const rules = reactive>({ //表单校验规则,需要检验的就放进来 + pass: [{ validator: validatePass, trigger: 'blur' }], + checkPass: [{ validator: validatePass2, trigger: 'blur' }], + age: [{ validator: checkAge, trigger: 'blur' }], +}) + +const submitForm = (formEl: FormInstance | undefined) => { + if (!formEl) return + formEl.validate((valid) => { + if (valid) { + console.log('submit!') + } else { + console.log('error submit!') + } + }) +} + +const resetForm = (formEl: FormInstance | undefined) => { + if (!formEl) return + formEl.resetFields() +} + \ No newline at end of file