充值加入快捷充值

src/App.vue

@@ -211,12 +211,14 @@ export default {
           com: 'editorRecharge',
           setCom: 'settingRecharge',
           value: {
+            rechargeTitle:'在线充值线下使用有优惠',
             mainColor:'#fe0419',
             showSymbol:true,
             placeholderText:'点击输入充值金额',
             buttonName:'立即充值',
             showSubButton:true,
-            subButtonName:'激活卡充值'
+            subButtonName:'激活卡充值',
+            fastRechargeList:['50','100','200','250','300']
           }
         }, {
           name: '优惠券',

src/components/View/editorRecharge.vue

@@ -1,9 +1,20 @@
 <template>
     <div class="recharge">
+        <div style="display: flex;justify-content: center;">
+            <div class="recharge-title">{{content.value.rechargeTitle}}</div>
+        </div>
         <div class="recharge-input">
             <div class="symbol" v-show="content.value.showSymbol">￥</div>
             <input class="" :placeholder="content.value.placeholderText"/>
         </div>
+        <!-- 快捷 -->
+        <div class="fast-box" v-if="content.value.fastRechargeList.length>0">
+            <div class="fast-title">快捷充值</div>
+            <div class="fast-content">
+                <div class="fast-item" v-for="item in content.value.fastRechargeList">{{item}}元</div>
+                <div class="fast-item" style="visibility: hidden;" v-for="item in content.value.fastRechargeList.length%3>0?(3-(content.value.fastRechargeList).length%3):0"></div>
+            </div>
+        </div>
         <div class="recharge-btns">
             <div class="btn" :style="'background-color: '+(content.value.mainColor?content.value.mainColor:'#fe0419')+';border: 1px solid '+(content.value.mainColor?content.value.mainColor:'#fe0419')+';'">
                 {{ content.value.buttonName ? content.value.buttonName : '立即充值' }}
@@ -40,6 +51,24 @@ export default {
 .recharge{
     padding: 30px 0;
 }
+.recharge-title{
+    position: relative;
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 30px;
+    z-index: 1;
+}
+.recharge-title::after{
+    content: '';
+    height: 3px;
+    width: 70%;
+    position: absolute;
+    bottom: 1px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #FFC72C;
+    z-index: -1;
+}
 .recharge-input{
     display: flex;
     padding: 10px 0;
@@ -65,9 +94,37 @@ export default {
 .recharge-input input::placeholder{
     color: #bababa;
 }
+
+/* 快捷充值 */
+.fast-box{
+    margin: 30px;
+}
+.fast-title{
+    font-size: 16px;
+    color: #666666;
+    margin-bottom: 10px;
+}
+.fast-content{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.fast-item{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #F6F6F6;
+    border-radius: 6px;
+    padding: 20px 10px;
+    margin-bottom: 10px;
+    width: 30%;
+    box-sizing: border-box;
+}
+/* 充值按钮 */
 .recharge-btns{
     margin: 30px;
-    margin-top: 50px;
+    margin-top: 30px;
 }
 .btn{
     width: 100%;

src/components/setting/settingRecharge.vue

@@ -6,6 +6,9 @@
         </div>
         <div>
             <el-form label-position="top" ref="form" label-width="80px">
+                <el-form-item style="margin-bottom: 0;" label="输入标题">
+                    <el-input size="mini" @input="handleDate" v-model="content.value.rechargeTitle"></el-input>
+                </el-form-item>
                 <el-form-item style="margin-bottom: 0;">
                     <div class="text-setting">
                         <span>输入框提示文本</span>
@@ -36,6 +39,24 @@
                 <el-form-item style="margin-bottom: 0;" label="主题色">
                     <el-input type="color" @input="handleDate" v-model="content.value.mainColor"/>
                 </el-form-item>
+
+                <div>
+                    <el-card style="margin:10px;">
+                        <div slot="header" class="clearfix">
+                            <span>添加快捷充值</span>
+                        </div>
+                        <div class="fast-box">
+                            <div class="fast-block" v-for="item,index in content.value.fastRechargeList">
+                                <el-input size="mini" @input="handleDate" @blur="deleteFastItem(index)" v-model="content.value.fastRechargeList[index]"></el-input>
+                            </div>
+                            <div class="fast-block" style="visibility: hidden;" v-for="item in content.value.fastRechargeList.length%3>0?(3-(content.value.fastRechargeList).length%3):0"></div>
+                        </div>
+                        <div class="btnDiv">
+                            <el-button size="mini" type="text" icon="el-icon-plus" @click="addFastItem()">添加
+                            </el-button>
+                        </div>
+                    </el-card>
+                </div>
             </el-form>
         </div>
     </div>
@@ -51,6 +72,14 @@ export default {
         }
     },
     methods: {
+        addFastItem(){
+            this.content.value.fastRechargeList.push('100')
+            this.handleDate()
+        },
+        deleteFastItem(index){
+            this.content.value.fastRechargeList = this.content.value.fastRechargeList.filter(item=>{return item})
+            this.handleDate()
+        },
         handleDate() {
             console.log('this.content',this.content)
             this.$emit('updataContent', this.content)
@@ -123,4 +152,17 @@ export default {
     justify-content: space-between;
     margin: 10px 0;
 }
+.fast-box{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.fast-block{
+    width: 30%;
+    margin-bottom: 10px;
+}
+.btnDiv {
+    text-align: center;
+    margin-top: 5px;
+}
 </style>