充值组件

src/App.vue

@@ -104,6 +104,8 @@ import editorCustomerService from '@/components/View/editorCustomerService'
 import settingCustomerService from '@/components/setting/settingCustomerService'
 import editorProduct from '@/components/View/editorProduct'
 import settingProduct from '@/components/setting/settingProduct'
+import editorRecharge from '@/components/View/editorRecharge'
+import settingRecharge from '@/components/setting/settingRecharge'
 export default {
   components: {
     editorImage,
@@ -118,7 +120,9 @@ export default {
     settingCustomerService,
     editorProduct,
     settingProduct,
-    
+    editorRecharge,
+    settingRecharge,
+
     materialManage
   },
   data() {
@@ -196,6 +200,20 @@ export default {
             productList: [],
             showOriginalPrice: false
           }
+        }, {
+          name: '充值',
+          key: 'recharge',
+          icon: 'l-chongzhi.png',
+          com: 'editorRecharge',
+          setCom: 'settingRecharge',
+          value: {
+            mainColor:'#fe0419',
+            showSymbol:true,
+            placeholderText:'点击输入充值金额',
+            buttonName:'立即充值',
+            showSubButton:true,
+            subButtonName:'激活卡充值'
+          }
         }],
       view: [],
       type: '',

src/components/View/editorRecharge.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="recharge">
+        <div class="recharge-input">
+            <div class="symbol" v-show="content.value.showSymbol">￥</div>
+            <input class="" :placeholder="content.value.placeholderText"/>
+        </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 : '立即充值' }}
+            </div>
+            <div v-show="content.value.showSubButton" class="btn2" :style="'border: 1px solid '+(content.value.mainColor?content.value.mainColor:'#fe0419')+';color: '+(content.value.mainColor?content.value.mainColor:'#fe0419')+';'">
+                {{ content.value.subButtonName ? content.value.subButtonName : '激活卡充值' }}
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+export default {
+    name: 'editorRecharge',
+    props: ['data', 'className'],
+    data() {
+        return {
+            content: this.data,
+        }
+    },
+    watch: {
+        data: {
+            deep: true,
+            handler(val) {
+                this.content = JSON.parse(JSON.stringify(val));
+            },
+        },
+    },
+}
+</script>
+
+<style  scoped>
+.recharge{
+    padding: 30px 0;
+}
+.recharge-input{
+    display: flex;
+    padding: 10px 0;
+    font-size: 28px;
+    color: #333;
+    font-weight: bold;
+    border-bottom: 1px solid #DBDBDB;
+    align-items: center;
+    margin-bottom: 70px;
+    margin: 0 30px;
+}
+.recharge-input .symbol{
+    margin-right: 10px;
+}
+.recharge-input input{
+    width: 100%;
+    font-size: 28px;
+    color: #333;
+    height: 40px;
+    font-weight: normal;
+    border: none;
+}
+.recharge-input input::placeholder{
+    color: #bababa;
+}
+.recharge-btns{
+    margin: 30px;
+    margin-top: 50px;
+}
+.btn{
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom:20px ;
+    border-radius: 4px;
+    text-align: center;
+    color: #fff;
+}
+.btn2{
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom:30px ;
+    border-radius: 4px;
+    text-align: center;
+}
+</style>

src/components/setting/settingRecharge.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="panel">
+        <div class="panel-header">
+            <h3 class="header-title">{{ data.name }}设置</h3>
+            <a class="el-icon-close close-btn" @click="closeRightTemplateHandle"></a>
+        </div>
+        <div>
+            <el-form label-position="top" ref="form" label-width="80px">
+                <el-form-item style="margin-bottom: 0;">
+                    <div class="text-setting">
+                        <span>输入框提示文本</span>
+                        <span>是否显示符号
+                            <el-switch size="mini" @change="handleDate" v-model="content.value.showSymbol"
+                                :active-value="true" :inactive-value="false">
+                            </el-switch>
+                        </span>
+                    </div>
+                    <el-input size="mini" @input="handleDate"
+                        v-model="content.value.placeholderText">
+                    </el-input>
+                </el-form-item>
+                <el-form-item style="margin-bottom: 0;" label="输入按钮名称">
+                    <el-input size="mini" @input="handleDate" v-model="content.value.buttonName"></el-input>
+                </el-form-item>
+                <el-form-item style="margin-bottom: 0;">
+                    <div class="text-setting">
+                        <span>{{content.value.showSubButton?'输入子按钮名称':'是否显示子按钮'}}</span>
+                        <span>
+                            <el-switch size="mini" @change="handleDate" v-model="content.value.showSubButton"
+                                :active-value="true" :inactive-value="false">
+                            </el-switch>
+                        </span>
+                    </div>
+                    <el-input v-if="content.value.showSubButton" size="mini" @input="handleDate" v-model="content.value.subButtonName"></el-input>
+                </el-form-item>
+                <el-form-item style="margin-bottom: 0;" label="主题色">
+                    <el-input type="color" @input="handleDate" v-model="content.value.mainColor"/>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'settingRecharge',
+    props: ['data', 'className'],
+    data() {
+        return {
+            content: JSON.parse(JSON.stringify(this.data)),
+        }
+    },
+    methods: {
+        handleDate() {
+            console.log('this.content',this.content)
+            this.$emit('updataContent', this.content)
+        },
+        closeRightTemplateHandle() {
+            this.$emit('closeRightTemplateHandle', false)
+        }
+    }
+}
+</script>
+
+<style  scoped>
+.panel {
+    padding: 0 10px;
+}
+
+.panel .panel-header {
+    position: relative;
+    height: 40px;
+    line-height: 40px;
+    margin-left: 8px;
+    margin-right: 8px;
+    vertical-align: middle;
+    border-bottom: 1px solid #dcdcdc;
+    box-sizing: border-box;
+    z-index: 10;
+}
+
+.panel .panel-header .header-title {
+    padding-left: 5px;
+    font-size: 14px;
+    color: #29304e;
+    position: relative;
+}
+
+.panel .panel-header .header-title:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 18px;
+    background: #1890ff;
+    opacity: 1;
+    border-radius: 2px;
+}
+
+.panel .panel-header .close-btn {
+    position: absolute;
+    top: 12px;
+    right: 0;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    color: #999;
+    font-weight: 700;
+}
+
+.panel .panel-body {
+    position: absolute;
+    top: 40px;
+    bottom: 0;
+    width: 100%;
+    overflow-y: auto;
+}
+
+.text-setting {
+    display: flex;
+    justify-content: space-between;
+    margin: 10px 0;
+}
+</style>