Bläddra i källkod

商品缩略图

chenrui 4 år sedan
förälder
incheckning
8574e987e9
2 ändrade filer med 54 tillägg och 15 borttagningar
  1. 51 12
      src/views/shop/goodsEdit.vue
  2. 3 3
      src/views/shop/goodsList.vue

+ 51 - 12
src/views/shop/goodsEdit.vue

@@ -6,19 +6,27 @@
       ref="form"
       v-bind="formItemLayout"
       @submit="handleSubmit">
+      <a-form-item label="首页图" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <Upload
+          class="upload"
+          id="goodsEdit-homeImage"
+          v-decorator="[ 'formData.homeImage', { initialValue: formData.homeImage, rules: [{ required: true, message: '请上传首页图' }] } ]"
+          ref="homeImage"
+          :fileSize="0.25"
+          @change="changeHomeImage"
+          listType="picture-card" ></Upload>
+        <span class="upload-desc">请上传200*150尺寸的图片,大小不超过0.25MB,png、jpg、jpeg格式。</span>
+      </a-form-item>
       <a-form-item label="商品图片" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
         <Upload
+          class="upload"
           id="goodsEdit-images"
-          v-decorator="[
-            'formData.images',
-            { initialValue: formData.images, rules: [{ required: true, message: '请上传商品图片' }] }
-          ]"
+          v-decorator="[ 'formData.images', { initialValue: formData.images, rules: [{ required: true, message: '请上传商品图片' }] } ]"
           ref="goodsImage"
           :maxNums="6"
           :fileSize="0.25"
           @change="changeImage"
-          listType="picture-card"
-        ></Upload>
+          listType="picture-card" ></Upload>
         <span class="upload-desc">请上传200*150尺寸的图片,大小不超过0.25MB,png、jpg、jpeg格式。(最多可上传6张)</span>
       </a-form-item>
       <a-form-item label="商品名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
@@ -51,7 +59,7 @@
           class="inpNumber-unit"
           :min="0"
           :max="999999"
-          :precision="2"
+          :precision="0"
           v-decorator="[ 'formData.sellGold', { initialValue: formData.sellGold, rules: [{ required: true, message: '请输入商品价格(0~999999)' }] } ]"
           placeholder="请输入商品价格(0~999999)。10个乐豆等值于1元"
           allowClear />
@@ -64,7 +72,10 @@
           allowClear
           id="goodsEdit-state"
           placeholder="请选择商品状态"
-          v-decorator="['formData.state', { initialValue: formData.state, rules: [{ required: true, message: '请选择商品状态' }] }]"
+          v-decorator="['formData.state', { initialValue: formData.state, rules: [
+            { required: true, message: '请选择商品状态' },
+            { validator: stateValidator }
+          ] }]"
         ></v-select>
       </a-form-item>
       <a-form-item label="库存数量" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
@@ -73,8 +84,11 @@
           class="inpNumber"
           :min="0"
           :max="999999"
-          :precision="2"
-          v-decorator="['formData.inventoryQty', { initialValue: formData.inventoryQty, rules: [{ required: true, message: '请输入库存数量(0~999999)' }] }]"
+          :precision="0"
+          v-decorator="['formData.inventoryQty', { initialValue: formData.inventoryQty, rules: [
+            { required: true, message: '请输入库存数量' },
+            { validator: inventoryQtyValidator }
+          ] }]"
           placeholder="请输入库存数量(0~999999)。当库存数量为0时显示为已售罄且无法下单"
           allowClear />
       </a-form-item>
@@ -120,6 +134,7 @@ export default {
         wrapperCol: { span: 16 }
       },
       formData: {
+        homeImage: '', //  首页图
         images: '', //  商品图
         name: '', // 商品名称
         goodsTypeNo: undefined, // 商品分类
@@ -135,16 +150,32 @@ export default {
   },
   computed: {
     isEdit () {
-      console.log(this.$route)
       return this.$route.name === 'goodsListEdit'
     }
   },
   methods: {
+    //  商品状态自定义校验
+    stateValidator (rule, value, callback) {
+      if (value == 1 && String(this.form.getFieldValue('formData.inventoryQty')) && this.form.getFieldValue('formData.inventoryQty') == 0) {
+        callback(new Error('库存为0的商品不能上架'))
+      }
+    },
+    //  输入库存数量调起商品状态校验
+    inventoryQtyValidator (rule, value, callback) {
+      this.form.validateFields(['formData.state'], (errors, values) => {
+        if (!errors) {
+          callback()
+        } else {
+
+        }
+      })
+    },
     //  获取商品详情
     getGoodsDetail () {
       goodsFind({ id: this.$route.params.id }).then(res => {
         if (res.status == 200) {
           this.formData = Object.assign(this.formData, res.data)
+          this.$refs.homeImage.setFileList(res.data.homeImage)
           this.$refs.goodsImage.setFileList(res.data.images)
           this.$refs.editor.setHtml(this.formData.desc)
         }
@@ -176,6 +207,7 @@ export default {
       const _this = this
       console.log(this.formData, '----表单上传')
       this.form.validateFields((err, values) => {
+        console.log(err, values, '-上传')
         if (!err) {
           const formData = values.formData
           formData.desc = _this.formData.desc
@@ -195,10 +227,14 @@ export default {
     close () {
       this.$router.push({ path: '/shop/goods/list' })
     },
-    //  图上传
+    //  商品图上传
     changeImage (file) {
       this.formData.images = file
     },
+    //  首页图上传
+    changeHomeImage (file) {
+      this.formData.homeImage = file
+    },
     //  商品详情  文本编辑器
     editorChange (html, text) {
       this.formData.desc = html
@@ -219,6 +255,9 @@ export default {
 
 <style lang="less">
   .goodsEdit-table-page-wrapper{
+    .upload{
+      width: 100%!important;
+    }
     //  商品图片描述
     .upload-desc{
       font-size: 12px;

+ 3 - 3
src/views/shop/goodsList.vue

@@ -53,13 +53,13 @@
       bordered>
       <!-- 商品状态 -->
       <template slot="state" slot-scope="text, record">
-        <span :class="record.state==0 ? 'red' : record.state==1 ? 'green' : ''">{{ record.state==0 ? '未上架' : record.state==1 ? '已上架' : '--' }}</span>
+        <span :class="record.state==0 ? 'red' : record.state==1 ? 'green' : ''">{{ record.state==0 ? '下架' : record.state==1 ? '上架' : '--' }}</span>
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
         <a-button id="goodsList-btn-edit" class="icon-blues" type="link" @click="handleGoods('edit', record)">编辑</a-button>
         <a-button v-if="record.state" id="goodsList-btn-shelves" class="icon-orange" type="link" @click="handleShelves(record)">{{ record.state == 0 ? '上架' : record.state == 1 ? '下架' : '' }}</a-button>
-        <a-button id="goodsList-btn-delect" class="icon-red" type="link" @click="handleDel(record)">删除</a-button>
+        <a-button v-if="record.state==0" id="goodsList-btn-delect" class="icon-red" type="link" @click="handleDel(record)">删除</a-button>
       </template>
     </s-table>
   </a-card>
@@ -130,7 +130,7 @@ export default {
     },
     //  供应商下拉数据
     getPartnerQueryList () {
-      supplierQueryList({ state: 1 }).then(res => {
+      supplierQueryList({}).then(res => {
         if (res.status == 200) {
           this.partnerList = res.data
         } else {