商品

src/views/news/addGood.vue

@@ -5,7 +5,7 @@
       <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
         <div class="formDiv">
           <el-form-item label="发布类型" prop="type_id" class="custom-align-right">
-              <el-radio-group v-model="form.type_id" >
+              <el-radio-group v-model="form.type_id"  >
                 <el-radio :label="1">供应商品</el-radio>
                 <el-radio :label="2">求购商品</el-radio>
               </el-radio-group>
@@ -30,7 +30,12 @@
             </el-form-item>
             <div v-if="form.type_id==1">
             <el-form-item label="商品单价：" prop="price" class="custom-align-right"  >
-              <el-input v-model="form.price" autocomplete="off" placeholder="请输入商品单价"></el-input>
+              <el-input v-model="form.price" autocomplete="off" placeholder="请输入商品单价">
+
+                <template #suffix>
+      元
+    </template>
+              </el-input>
             </el-form-item>
             <el-form-item label="单位：" prop="unit" class="custom-align-right"  >
  <el-input v-model="form.unit" autocomplete="off" placeholder="请输入单位"></el-input>
@@ -67,7 +72,7 @@
           </el-form-item>
             </div>
 
-            <el-form-item label="商品图：" class="custom-align-right" >
+            <el-form-item label="商品图：" class="custom-align-right" prop="imgurl" >
               <div class="uploaderBox">
 
                 <span v-if="imgurl.length > 0" class="uploaded-images">
@@ -102,7 +107,7 @@
               </div>
 
             </el-form-item>
-            <div class="imgBox" style="margin-left: 100px;">最多可上传5张，每张图片大小不能超过500K，推荐上传图片尺寸 宽1000像素 高1000像素。(首张显示为商品头图)</div>
+            <div class="imgBox" style="margin-left: 100px ;margin-bottom: 20px; padding-top: -20px;">最多可上传5张，每张图片大小不能超过500K，推荐上传图片尺寸 宽1000像素 高1000像素。(首张显示为商品头图)</div>
             <el-form-item label="商品关键词：" prop="keyword" class="custom-align-right">
               <el-input v-model="form.keyword" autocomplete="off" placeholder="请输入商品关键词"></el-input>
             </el-form-item>
@@ -111,8 +116,8 @@
               <el-input v-model="form.description" maxlength="300" autocomplete="off" placeholder="请输入商品描述"  type="textarea" :rows="10"></el-input>
             </el-form-item>
 
-            <div class="QuillTitle">
-              <span>* </span> <span v-if="form.type_id==1">商品详情：</span><span v-else>详情说明：</span>
+            <div class="QuillTitle" >
+              <span>* </span> <span  style="color: #606266" v-if="form.type_id==1">商品详情：</span><span style="color: #606266" v-else>详情说明：</span>
               <div @click="toggleSourceMode" class="QuillModelBtn">
                 {{ showHtml ? '切换到编辑模式' : '切换到源码模式' }}
               </div>
@@ -175,6 +180,9 @@ import 'quill/dist/quill.snow.css';
 import ImageResize from 'quill-image-resize-module';
 import Quill from 'quill';  // 引入 Quill
 import Delta from 'quill-delta'; // 引入 Delta，用于手动修改文档
+//格式化时间
+import { formatLocalDate } from '@/utils/public';
+
 // 注册 Image Resize 模块
 Quill.register('modules/imageResize', ImageResize);
 //解决富文本样式居中不显示
@@ -227,14 +235,14 @@ export default {
         name:"",
         price:"",
         unit:"",
-        min:"",
-        max:"",
+        min:null,
+        max:null,
         islong:0,
         validity:"",
         keyword: "",
         description: "",
         detail: "",
-        hits: "",
+        hits: null,
         contact: '',
         phone: '',
         landline: '',
@@ -242,52 +250,53 @@ export default {
         postal: '',
         address: '',
         city_id :'',
-        imgurl:['http://192.168.1.127:9501/image/20250227/1740674706184955.jpg','http://192.168.1.127:9501/image/20250227/1740674706184955.jpg'],//缩略图
-      },
-      form: {
-        //1.1使用了外链
-        name: 'ceshi',//商品标题
-        type_id:1,//布类型：1：供应，2求购
-        city_arr_id: [1],//行政区划
-        cat_arr_id:'',//导航池名称
-        website_id: "2",
-        catid: "1",
-        cat_arr_id: [1],
-        name:"商品",
-        price:"100.00",
-        unit:"元",
-        min:"100",
-        max:"1000",
-        islong:"1",
-        validity:"2034-11-08 10:49:47",
-        // imgs: "",
-        keyword: "关键词",
-        description: "描述",
-        detail: "细节",
-        hits: "1",
-        contact: '联系人',
-        phone: '1800000000',
-        landline: '0511-12345678',
-        email: '123456@qq.com',
-        postal: '123456',
-        address: '详细地址',
-        city_id :1,
-        imgurl:['http://192.168.1.127:9501/image/20250227/1740674706184955.jpg','http://192.168.1.127:9501/image/20250227/1740674706184955.jpg'],//缩略图
+        imgurl:[],//缩略图
       },
+      // form: {
+      //   //1.1使用了外链
+      //   name: 'ceshi',//商品标题
+      //   type_id:1,//布类型：1：供应，2求购
+      //   city_arr_id: [1],//行政区划
+      //   cat_arr_id:'',//导航池名称
+      //   website_id: "2",
+      //   catid: "1",
+      //   cat_arr_id: [1],
+      //   name:"商品",
+      //   price:"100.00",
+      //   unit:"元",
+      //   min:"100",
+      //   max:"1000",
+      //   islong:"1",
+      //   validity:"2034-11-08 10:49:47",
+      //   // imgs: "",
+      //   keyword: "关键词",
+      //   description: "描述",
+      //   detail: "细节",
+      //   hits: "1",
+      //   contact: '联系人',
+      //   phone: '1800000000',
+      //   landline: '0511-12345678',
+      //   email: '123456@qq.com',
+      //   postal: '123456',
+      //   address: '详细地址',
+      //   city_id :1,
+      //   imgurl:['http://192.168.1.127:9501/image/20250227/1740674706184955.jpg','http://192.168.1.127:9501/image/20250227/1740674706184955.jpg'],//缩略图
+      // },
       //1.2 表单验证规则
       formRules: {
         type_id:[{required:true,trigger:'blur',validator:validateEmpty}],
         //商品名称不能为空
         name:[{required:true,trigger:'blur',validator:validateEmpty}],
-        //如果使用了外链，外链地址不能为空
-        // city_arr_id:[{required:true,trigger:'blur',validator:validateArray}],
-        //导航池名称不能为空
-        // cat_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
+        city_arr_id:[{required:true,trigger:'blur',validator:validateArray}],
+        // 导航池名称不能为空
+        cat_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
+        imgurl: [{ required: true, trigger: 'blur', validator: validateArray }],
+
+
         price: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         unit: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         validity: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        min: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        max: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        description: [{ required: true, trigger: 'blur', validator: validateEmpty }],
 
         keyword: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         contact: [{ required: true, trigger: 'blur', validator: validateEmpty }],
@@ -365,7 +374,8 @@ export default {
         }
       },
       //1.4图片上传
-      imgurl:['http://192.168.1.127:9501/image/20250227/1740674706184955.jpg','http://192.168.1.127:9501/image/20250227/1740674706184955.jpg'],
+      imgurl: ['http://192.168.1.127:9501/image/20250227/1740674706184955.jpg', 'http://192.168.1.127:9501/image/20250227/1740674706184955.jpg'],
+      imgurl: [],
       //获取父级导航池
       parentKey:0,//获取父级导航
       parentData: {
@@ -426,7 +436,7 @@ export default {
 
       this.$store.dispatch('pool/uploadFile',formData).then(res=> {
         this.imgurl.push(res.data.imgUrl);//显示缩略图
-        // this.form.imgurl.push(res.data.imgurl);//提供表单地址
+        this.form.imgurl.push(res.data.imgUrl);//提供表单地址
         console.log(res.data.imgUrl,'00000')
       })
       // 阻止默认的上传行为
@@ -441,12 +451,23 @@ export default {
       this.$refs.form.validate(valid => {
         if (valid) {
           if (this.form.validity) {
-            this.form.validity = this.formatDate(this.form.validity);
+            console.log(this.form.validity,'p0------------------')
+            this.form.validity = formatLocalDate(this.form.validity);
+            console.log(this.form.validity,'p1-3333333333333333333333333')
           }
           this.form.imgurl = this.imgurl;
           if(this.form.islong==1){
             this.form.validity = null;
           }
+          if(this.form.min==''){
+            this.form.min = null;
+          }
+          if(this.form.max==''){
+            this.form.max = null;
+          }
+          if (this.form.hits == '') {
+            this.form.hits = null;
+          }
           console.log(this.form,'提交的数据')
           this.$store.dispatch('news/addGood',this.form).then(res=> {
             if(res.code==200){
@@ -563,11 +584,22 @@ export default {
       this.$refs.form.validate(valid => {
         if (valid) {
           if (this.form.validity) {
-            this.form.validity = this.formatDate(this.form.validity);
+            console.log(this.form.validity,'p0------------------')
+            this.form.validity = formatLocalDate(this.form.validity);
+            console.log(this.form.validity,'0------------')
           }
           if(this.form.islong==1){
             this.form.validity = null;
           }
+          if(this.form.min==''){
+            this.form.min = null;
+          }
+          if(this.form.max==''){
+            this.form.max = null;
+          }
+          if (this.form.hits == '') {
+            this.form.hits = null;
+          }
           this.form.imgurl =  this.imgurl;
           //console.log(this.form)
           this.$store.dispatch('news/updateGood',this.form).then(res=> {
@@ -700,6 +732,49 @@ export default {
     //富文本编辑器 end ------------------------------------------------------------>
 
   },
+  watch: {
+  'form.type_id': {
+    handler(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        console.log('---------变化了------------');
+        this.form.name = '';
+        this.form.city_arr_id = [];
+        this.form.city_id = '';
+        this.form.cat_arr_id = '';
+        this.form.website_id = "1";
+        this.form.catid = "";
+        this.form.price = "";
+        this.form.unit = "";
+        this.form.min = null;
+        this.form.max = null;
+        this.form.islong = 0;
+        this.form.validity = "";
+        this.form.keyword = "";
+        this.form.description = "";
+        this.form.detail = "";
+        this.form.hits = null;
+        this.form.contact = '';
+        this.form.phone = '';
+        this.form.landline = '';
+        this.form.email = '';
+        this.form.postal = '';
+        this.form.address = '';
+        this.form.imgurl = [];
+        this.form.city_id = '';
+        // 清空特定字段的数据
+        if (newVal === 1) {
+          // 从求购商品切换到供应商品
+          this.form.price = '';
+          console.log('供应商品');
+        } else if (newVal === 2) {
+          // 从供应商品切换到求购商品
+          console.log('求购商品');
+        }
+      }
+    },
+    immediate: true // 立即执行一次
+  }
+},
   mounted(){
     //1.判断是新建还是回显
     if(this.$route.query.id!=undefined){