店铺商品信息特惠

src/views/shop/shop/components/commodity.vue

@@ -25,10 +25,10 @@
               <span>{{scope.row.name}}</span>
             </div>          
             <div style="margin-left: 8px;margin-right: 8px">
-              <el-button v-show="scope.row.recommend=='0'" type="text"> 荐</el-button>
+              <el-button v-show="scope.row.recommend=='1'" type="text"> 荐</el-button>
             </div>
             <div>
-              <el-button style="color:red" v-show="scope.row.preferential=='0'" type="text">惠</el-button>
+              <el-button style="color:red" v-show="scope.row.preferential=='1'" type="text">惠</el-button>
             </div>
           </div>
         </template>
@@ -78,10 +78,10 @@
       </el-table-column>
 			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
 				<template slot-scope="scope">
-					<el-button size="mini" @click="addRecommend(scope.row)" type="text">
+					<el-button size="mini" @click="addRecommend(scope.row)" type="text" v-show="scope.row.recommend=='0'">
 						推荐
 					</el-button>
-					<el-button @click="preferential(scope.row)" size="mini" type="text">
+					<el-button @click="preferential(scope.row)" size="mini" type="text" v-show="scope.row.preferential=='0'">
 						特惠
 					</el-button>
 				</template>

src/views/shop/shop/components/preferential.vue

 <template>
 	<el-dialog title="特惠" :visible.sync="open" width="600px" append-to-body>
 		<!-- 添加或修改店铺对话框 -->
-		<el-form ref="form" :model="form" :rules="rules" label-width="120px">
+		<el-form :model="form" label-width="120px">
+      <el-row>
+        <el-col :span="8">
           <el-form-item label="商品名称">
             {{ form.goodsName }}
           </el-form-item>
+        </el-col>
+        <el-col :span="8">
           <el-form-item label="原售价">
             {{ form.price }}
           </el-form-item>
+        </el-col>
+        <el-col :span="8">
           <el-form-item label="折扣价">
             {{ form.discount }}
           </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item label="特惠价格">
+          <el-input v-model="form.recommendPrice" placeholder="请输入特惠价格" />
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="特惠标签">
+          <div style="border: 1px solid #ccc;height: 70px">
+            <el-tag
+              :key="tag"
+              v-for="tag in recommendTagList"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(tag)">
+              {{tag}}
+              </el-tag>
+              <el-input
+                class="input-new-tag"
+                v-if="inputVisible"
+                v-model="inputValue"
+                ref="saveTagInput"
+                size="small"
+                @keyup.enter.native="handleInputConfirm"
+                @blur="handleInputConfirm"
+            />              
+            <el-button v-else class="button-new-tag" size="small" @click="showInput">+添加标签</el-button>
+          </div>      
+        </el-form-item>
+      </el-row>	
     </el-form>
 		<div class="dialog-footer">
 			<el-button type="primary" @click="submitForm">确 定</el-button>
@@ -25,31 +62,82 @@ export default {
 	props: ['shopId'],
 	data() {
 		return {
-			form: {},
-			open: false,
-			rules: {
-				name: [
-					{ required: true, message: "不能为空", trigger: "change" },
-				],
-				desc: [
-					{ required: true, message: "不能为空", trigger: "change" },
-				],
-				pic: [
-					{ required: true, message: "不能为空", trigger: "change" },
-				],
-
+			form: {
+        goodsName :"",
+        shopId : null,
+        goodsId : null,
+        price : null,
+        discount : null,
+        type : null,
+        recommendPrice:null,
+        recommendTagList:[]
       },
+			open: false,
+      tagValues:"",
+      inputVisible: false,
+      inputValue: '',
+      recommendTagList:[],
+      goodsTagList:[],
+      goodsTagValue:""
 		}
 	},
 	methods: {
+    handleClose(tag) {      
+      this.recommendTagList.splice(this.recommendTagList.indexOf(tag), 1);
+      if(this.recommendTagList.length==0){
+        this.tagValues="";
+      }else{
+        this.tagValues=this.tagValues.replace(tag,"");
+      }
+    },
+    handleInputConfirm() {
+      let length=0;
+      let inputValues = this.inputValue;      
+      if (inputValues) {
+        if(this.recommendTagList.indexOf(inputValues)==-1 && this.goodsTagList.indexOf(inputValues)==-1){
+          length=this.recommendTagList.length+this.goodsTagList.length;          
+          if(length >= 3){
+            this.$message.error('标签个数最多添加三个!');
+          }else{
+            this.tagValues=this.tagValues+inputValues;                  
+            if((this.goodsTagValue.length+this.tagValues.length)>13){
+              this.$message.error('标签总字符数量最大13!');                
+              this.tagValues=this.tagValues.replace(inputValues,"");
+            }else{
+              this.recommendTagList.push(inputValues);
+            }
+          }
+        }else{
+          this.$message.error('请重新添加标签，该标签已存在!');
+        }          
+      }
+      this.inputVisible = false;
+      this.inputValue = '';
+    },
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
 		/** 提交按钮 */
 		submitForm() {
-			this.$refs["form"].validate((valid) => {
-				if (valid) {
-					addRecommend(this.form).then((res) => {
+      let obj=Object.assign({},this.form)
+      if(obj.recommendPrice!=null){
+        var regular=/(^[+]{0,1}([0-9]+)$)|(^[+]{0,1}([0-9]+)[\.]{1}[0-9]{2}$)/; //正数 ,小数可有可无，最多2位
+        if(!regular.test(obj.recommendPrice)){   
+          this.$message.error("请输入大于0的正数,最多保留2位小数!"); 
+          return; 
+        }
+      }else{
+        obj.recommendPrice=obj.discount
+      }
+      obj.recommendTagList=this.recommendTagList
+      addRecommend(obj).then((res) => {
+        if(res.code=="200"){
           this.$modal.msgSuccess("成功");
           this.open = false;
-					});
+          this.$parent.getList();
         }
       });
 		},
@@ -64,12 +152,22 @@ export default {
 			this.resetForm("form");
 		},
 		openModal(data) {
+      console.log("data",data);
+      this.goodsTagValue="";
 			this.form.goodsName = data.name
 			this.form.shopId = this.shopId
 			this.form.goodsId = data.id
 			this.form.price = data.price
 			this.form.discount = data.discount
 			this.form.type = 2
+      this.form.recommendPrice=data.recommendPrice
+      this.goodsTagList=data.goodsTagList;
+      this.recommendTagList=data.recommendTagList;
+      if(this.goodsTagList.length>0){
+        for(let i=0;i<this.goodsTagList.length;i++){
+          this.goodsTagValue=this.goodsTagValue+this.goodsTagList[i];
+        }
+      }
 			this.open = true
 		}
 
@@ -87,4 +185,9 @@ export default {
 	width: 48%;
 
 }
+.input-new-tag {
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
 </style>
\ No newline at end of file