input-length

 import InputSafe from './input-safe';
+import InputLength from './input-length';
 
 export default {
-    InputSafe
+    InputSafe,
+    InputLength
 };

+<template>
+    <div class="input-length">
+        <Input
+            type="textarea"
+            :rows="rows"
+            :placeholder="placeholder"
+            :maxlength="maxlength"
+            :class="{'input-ele': true}"
+            :value="currentValue"
+            @input="inputEvent"></Input>
+        <p class="input-txt">
+            <span>{{txtMsg}}</span>
+        </p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'input-length',
+    props: {
+        value: {
+            type: [String, Number],
+            default: ''
+        },
+        rows: {
+            type: Number,
+            default: 5
+        },
+        placeholder: {
+            type: String,
+            default: '请输入文字内容'
+        },
+        maxlength: {
+            type: Number,
+            default: 250
+        }
+    },
+    computed: {
+        txtMsg() {
+            let num = this.maxlength - this.currentValue.length;
+
+            return `还能输${num >= 0 ? num : 0}个字`;
+        }
+    },
+    data() {
+        return {
+            currentValue: this.value
+        };
+    },
+    methods: {
+        inputEvent(val) {
+            this.currentValue = val;
+            this.$emit('input', val);
+        }
+    },
+    wacth: {
+        value(val) {
+            this.currentValue = val;
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.input-length {
+    width: 100%;
+
+    .input-ele {
+        width: 100%;
+    }
+
+    .input-txt {
+        text-align: right;
+        font-size: 12px;
+        margin-top: 2px;
+
+        span {
+            color: #999;
+        }
+    }
+}
+</style>

@@ -23,10 +23,6 @@
                 <input-safe v-model="product.phrase" :maxlength="12" placeholder="最多12个字符" style="width: 400px;"/>
             </Form-item>
 
-            <Form-item label="推荐短语">
-                <input-safe v-model="product.recommendPhrase" type="textarea" :maxlength="500" placeholder="最多500个字符" style="width: 400px;"/>
-            </Form-item>
-
             <Form-item label="商家商品编码" prop="factoryCode">
                 <input-safe v-model="product.factoryCode" placeholder="请输入..." style="width: 400px;"/>
             </Form-item>

@@ -22,6 +22,16 @@
                 <image-goods-main v-model="product.goods"></image-goods-main>
                 <Row>
                     <Col>
+                    <div class="create-item-title">商品推荐短语
+                        <span class="create-group-sub-title">（默认在前台商品详情页显示）</span>
+                    </div>
+                    </Col>
+                </Row>
+                <div>
+                    <input-length v-model="product.recommendPhrase" :maxlength="500" placeholder="最多500个字符"></input-length>
+                </div>
+                <Row>
+                    <Col>
                     <div class="create-item-title">商品描述
                         <span class="create-group-sub-title">（详情页内容）</span>
                     </div>
@@ -219,7 +229,8 @@ export default {
                 productStandardRelationStr: JSON.stringify(this.handleRelation()),
                 attributeProValuesOne: JSON.stringify(this.handleOne()),
                 attributeProValuesTwo: JSON.stringify(this.handleTwo()),
-                productMaterial: this.handleMaterial()
+                productMaterial: this.handleMaterial(),
+                recommendPhrase: xss(this.product.recommendPhrase),
             };
 
             return result;

@@ -19,9 +19,6 @@
         <Form-item label="商品卖点">
             <input-safe v-model="product.phrase" :maxlength="12" placeholder="最多12个字符"/>
         </Form-item>
-        <Form-item label="推荐短语">
-            <input-safe v-model="product.recommendPhrase" type="textarea" :maxlength="500" placeholder="最多500个字符" style="width: 400px;"/>
-        </Form-item>
         <Form-item label="商家商品编码" prop="factoryCode">
             <input-safe v-model="product.factoryCode" placeholder="请输入..." />
         </Form-item>
@@ -81,6 +78,12 @@
             </span>
         </div>
         <image-goods-main v-model="product.goods"></image-goods-main>
+        <div class="create-item-title">商品推荐短语
+            <span class="create-group-sub-title">（默认在前台商品详情页显示）</span>
+        </div>
+        <div>
+            <input-length v-model="product.recommendPhrase" :maxlength="500" placeholder="最多500个字符"></input-length>
+        </div>
         <div class="create-item-title">商品描述
             <span class="create-group-sub-title">（详情页内容）</span>
         </div>
@@ -479,7 +482,7 @@ export default {
             newProduct.factoryCode = this.product.factoryCode;
             newProduct.goodsYears = this.product.goodsYears;
             newProduct.phrase = this.product.phrase;
-            newProduct.recommendPhrase = this.product.recommendPhrase;
+            newProduct.recommendPhrase = xss(this.product.recommendPhrase);
             newProduct.goodsSeason = this.product.goodsSeason;
             newProduct.ageLevel = this.product.ageLevel;
             newProduct.seasons = this.product.seasons;