update: 页面优化

src/components/addGiftCate.vue

 <template>
   <el-dialog title="新建分类" :visible.sync="addCateModal.dialogVisible" width="450px" @close="cancelSubmit('editInfoModal')">
     <el-form :model="editInfoModal" ref="editInfoModal" :rules="modalRules">
-      <el-form-item label="分类名称" label-width="80px" prop="cateName">
+      <el-form-item label="分类名称" label-width="80px" prop="cateName" class="position-item">
         <el-input type="text" v-model="editInfoModal.cateName" style="width:330px" @input="value => proNameLimit(value)"> </el-input>
+        <span class="slot-num">{{ goodsInfo.cateNameLen }}/10</span>
       </el-form-item>
-      <span class="slot-num">{{ goodsInfo.cateNameLen }}/10</span>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="cancelSubmit('editInfoModal')">取 消</el-button>
@@ -57,6 +57,7 @@ export default {
           request.post('/api-integral-mall/create-gift-category', qs.stringify(params)).then(res => {
             if (res.data.errorCode === 0) {
               this.$message.success('新增成功');
+              this.goodsInfo.cateNameLen = 0;
               this.addCateModal.dialogVisible = false;
               this.$emit('getCategoryOptions');
             } else {
@@ -77,9 +78,13 @@ export default {
 };
 </script>
 <style scoped>
+.position-item {
+  position: relative;
+}
 .slot-num {
-  float: right;
-  margin-top: -20px;
+  position: absolute;
+  top: 0;
+  right: 8px;
   font-size: 13px;
 }
 </style>

src/views/goods/gift/addSku.vue

@@ -76,17 +76,19 @@
         </thead>
         <tbody>
           <tr v-for="(item1, index1) in skuList" :key="index1">
-            <td v-for="(item2, index2) in item1" :key="index2" style="width:120px" v-if="item1.length - index2 > 1">
-              <!-- {{ item1[7] }} -->
-              <span v-if="item1.length - index2 < 7">
-                <el-input size="small" v-model.trim="item2.valueName" @blur="skuInput(item1, item2, index1, index2)" @input="setSkuValueName"></el-input>
-              </span>
+            <template v-for="(item2, index2) in item1">
+              <td :key="index2" style="width:120px" v-if="item1.length - index2 > 1">
+                <!-- {{ item1[7] }} -->
+                <span v-if="item1.length - index2 < 7">
+                  <el-input size="small" v-model.trim="item2.valueName" @blur="skuInput(item1, item2, index1, index2)" @input="setSkuValueName"></el-input>
+                </span>
 
-              <!-- <span v-else-if="item1.length === index2 + 1" style="color:red">{{ item2.valueName ? item2.valueName : '' }}</span> -->
-              <span v-else>{{ item2.valueName ? item2.valueName : '' }}</span>
-            </td>
-            <!-- 最后一列存的skuId -->
-            <td v-else style="color:red;display:none">{{ item2.valueName }}</td>
+                <!-- <span v-else-if="item1.length === index2 + 1" style="color:red">{{ item2.valueName ? item2.valueName : '' }}</span> -->
+                <span v-else>{{ item2.valueName ? item2.valueName : '' }}</span>
+              </td>
+              <!-- 最后一列存的skuId -->
+              <td v-else :key="index2" style="color:red;display:none">{{ item2.valueName }}</td>
+            </template>
           </tr>
         </tbody>
       </table>
@@ -142,7 +144,11 @@ export default {
       searchStandard: '',
       searchStandardValue: '',
       // isStdImg: false
-      warnStatus: false
+      warnStatus: false,
+      minIntergral: {
+        integralCost: '',
+        cashCost: ''
+      }
     };
   },
   created() {
@@ -548,9 +554,37 @@ export default {
     //sku库存相加得spu库存
     addStock() {
       let temSum = 0;
-
+      let minIntergral = { integralCost: '', cashCost: '' };
       for (let i in this.skuList) {
         for (let j in this.skuList[i]) {
+          if (this.skuList[i].length - j == 6) {
+            if (minIntergral.integralCost === '') {
+              minIntergral = Object.assign({}, minIntergral, {
+                integralCost: this.skuList[i][j].valueName,
+                cashCost: this.skuList[i][Number(j) + 1].valueName
+              });
+            }
+            if (Number(this.skuList[i][j].valueName) < Number(minIntergral.integralCost)) {
+              minIntergral = Object.assign({}, minIntergral, {
+                integralCost: this.skuList[i][j].valueName,
+                cashCost: this.skuList[i][Number(j) + 1].valueName
+              });
+              this.$emit('changeMinIntegral', minIntergral);
+            }
+            if (Number(this.skuList[i][j].valueName) == Number(minIntergral.integralCost)) {
+              minIntergral = Object.assign({}, minIntergral, {
+                integralCost: this.skuList[i][j].valueName,
+                cashCost: this.skuList[i][Number(j) + 1].valueName <= Number(minIntergral.cashCost) ? this.skuList[i][Number(j) + 1].valueName : minIntergral.cashCost
+              });
+              this.$emit('changeMinIntegral', minIntergral);
+            }
+          }
+          if (this.skuList[i].length - j == 5) {
+            if (Number(this.skuList[i][Number(j) - 1].valueName) <= Number(minIntergral.integralCost) && Number(this.skuList[i][j].valueName) <= Number(minIntergral.cashCost)) {
+              minIntergral = Object.assign({}, minIntergral, { integralCost: this.skuList[i][Number(j) - 1].valueName, cashCost: this.skuList[i][j].valueName });
+              this.$emit('changeMinIntegral', minIntergral);
+            }
+          }
           if (this.skuList[i].length - j == 4) {
             if (this.skuList[i][j].valueName !== '') temSum += Number(this.skuList[i][j].valueName);
           }
@@ -583,6 +617,7 @@ export default {
       this.addStock();
     },
     skuInput(item1, item2, index1, index2) {
+      console.log(1);
       let reg = /^[0-9a-zA-Z]+?$/;
       if (item1.length - index2 === 6) {
         //积分

src/views/goods/gift/info.vue

@@ -9,10 +9,10 @@
           <el-breadcrumb-item>积分商城</el-breadcrumb-item>
           <el-breadcrumb-item>商品</el-breadcrumb-item>
           <el-breadcrumb-item :to="{ path: '/gift' }">礼品</el-breadcrumb-item>
-          <el-breadcrumb-item>{{ giftId === '-1' ? '新建' : '编辑' }}礼品</el-breadcrumb-item>
+          <el-breadcrumb-item>{{ giftId === '-1' ? '新建' : '编辑' }}{{ giftType === 1 ? '实物' : '虚拟' }}礼品</el-breadcrumb-item>
         </el-breadcrumb>
         <h3>
-          <span>{{ giftId === '-1' ? '新建' : '编辑' }}礼品</span>
+          <span>{{ giftId === '-1' ? '新建' : '编辑' }}{{ giftType === 1 ? '实物' : '虚拟' }}礼品</span>
         </h3>
       </div>
       <div class="section" v-loading="submitLoading">
@@ -35,7 +35,7 @@
                     <i class="el-icon-zoom-in" @click="enlargeDialogImageUrl(index)"></i>
                     <div class="dialog-img"></div>
                   </div>
-                  <el-upload :action="uploadAction" :headers="headersUpload" list-type="picture-card" :on-preview="handlePictureCardPreview" :before-upload="beforeUpload" :on-success="uploadSuccess" with-credentials :show-file-list="false" v-show="uploadStatus" style="display: inline-block;vertical-align: top;">
+                  <el-upload multiple :action="uploadAction" :headers="headersUpload" list-type="picture-card" :on-preview="handlePictureCardPreview" :before-upload="beforeUpload" :on-success="uploadSuccess" with-credentials :show-file-list="false" v-show="uploadStatus" style="display: inline-block;vertical-align: top;">
                     <i class="el-icon-plus"></i>
                   </el-upload>
                 </div>
@@ -64,7 +64,7 @@
           <div class="section-content">
             <h3>销售信息</h3>
             <el-form-item label="礼品规格" v-if="giftType === 1 || submitSkuJson.length">
-              <addSku :giftId="giftId" :skuJson="giftProStandardJson" :giftType="giftType" @getSpuStock="getSpuStock" @getStandradList="getStandradList" @getSkuList="getSkuList" @IsAgreeUpload="IsAgreeUpload" :isStdImg="isStdImg" :skuList="skuList"></addSku>
+              <addSku :giftId="giftId" :skuJson="giftProStandardJson" :giftType="giftType" @getSpuStock="getSpuStock" @getStandradList="getStandradList" @getSkuList="getSkuList" @IsAgreeUpload="IsAgreeUpload" :isStdImg="isStdImg" :skuList="skuList" @changeMinIntegral="changeMinIntegral"></addSku>
             </el-form-item>
             <el-form-item label="礼品编码">
               <table class="spu-table">
@@ -80,18 +80,23 @@
                 <tbody>
                   <tr>
                     <td style="width:120px">
+                      <!-- 礼品编码 -->
                       <el-input size="small" v-model.trim="giftForm.proCode" placeholder="请输入内容" @input="limitProCode" @blur="limitProCodeType"></el-input>
                     </td>
                     <td style="width:120px">
+                      <!-- 积分 -->
                       <el-input size="small" v-model.trim="giftForm.integralCost" placeholder="请输入内容" @blur="limitCostType"></el-input>
                     </td>
                     <td style="width:120px">
+                      <!-- 现金 -->
                       <el-input size="small" v-model.trim="giftForm.cashCost" placeholder="请输入内容" @blur="limitCash"></el-input>
                     </td>
                     <td style="width:120px">
+                      <!-- 库存 -->
                       <el-input size="small" v-model.trim="giftForm.virtualStock" placeholder="请输入内容" :disabled="stockDisabled" @blur="limitStock"></el-input>
                     </td>
                     <td style="width:120px">
+                      <!-- 礼品条形码 -->
                       <el-input size="small" v-model.trim="giftForm.proCodeQuery" placeholder="请输入内容" @input="limintProCodeQuery" @blur="limitproCodeQueryType"></el-input>
                     </td>
                   </tr>
@@ -448,7 +453,7 @@ export default {
       getHours: getInputVal.getHours,
       fixedWidth: document.documentElement.clientWidth - 200,
       projectName: 'integral-mall',
-      giftType: '', //礼品类型
+      giftType: '', //礼品类型 实物是1虚拟是0
       mallProId: '', //礼品id
       giftId: '', //礼品Id
       linkIndex: 0,
@@ -1528,12 +1533,6 @@ export default {
         reader.onload = function(event) {
           let image = new Image();
           image.onload = function() {
-            let width = this.width;
-            let height = this.height;
-            if (width < 700 || width > 1500 || width / height != 1) {
-              that.$message.error('请上传正确的图片尺寸');
-              reject();
-            }
             resolve();
           };
           image.src = event.target.result;
@@ -1548,6 +1547,7 @@ export default {
     },
     // 上传图片成功
     uploadSuccess(response, file, fileList) {
+      console.log(response);
       if (response.errorCode === 0) {
         this.giftForm.images.push({
           imageUrl: response.result[0].qcloudImageUrl,
@@ -1788,6 +1788,10 @@ export default {
       this.isStdImg = val;
       this.IsAgreeUploadStatus = val;
     },
+    changeMinIntegral(val) {
+      this.giftForm.integralCost=val.integralCost||'';
+      this.giftForm.cashCost=val.cashCost||'';
+    },
     //处理sku
     handleSku() {
       let skuArr = copy(this.skuList);