From 43d509c637cb3df7e6c95f9e0469e4aaf0a220f1 Mon Sep 17 00:00:00 2001
From: wangbing <Wb295490665>
Date: Wed, 9 Sep 2020 17:37:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/control/mint-ui-extend.ftl      | 554 +++---------------
 .../resources/templates/layout/app.ftl        | 199 ++++---
 2 files changed, 199 insertions(+), 554 deletions(-)

diff --git a/src/main/resources/modules/SpringBoot/resources/templates/control/mint-ui-extend.ftl b/src/main/resources/modules/SpringBoot/resources/templates/control/mint-ui-extend.ftl
index 80d01fbc..c5c3925e 100644
--- a/src/main/resources/modules/SpringBoot/resources/templates/control/mint-ui-extend.ftl
+++ b/src/main/resources/modules/SpringBoot/resources/templates/control/mint-ui-extend.ftl
@@ -5,9 +5,9 @@
             context: '${context?default("")}',
             tip: {
                 show: function (msg) {
-                    if(msg) {
+                    if (msg) {
                         this.$indicator.open(msg);
-                    }else {
+                    } else {
                         this.$indicator.open();
                     }
                 },
@@ -34,496 +34,118 @@
         }
     });
 
-    Vue.component('wb-field-select', {
-        data: function () {
-            return {
-                selectValue: '',
-                popupVisible: false,
-                clearVisible: false,
-                slots: [{
-                    values: this.items
-                }],
-            }
-        },
-        computed: {
-            currentValue: {
-                get: function () {
-                    return this.value;
-                },
-                set: function (value) {
-                    this.$emit('input', value);
-                    value ? this.clearVisible = true : this.clearVisible = false;
-                }
-            }
-        },
+    Vue.prototype.$action = 'go';
+    Vue.prototype.$isSubmit = false;
+    Vue.mixin({
         methods: {
-            onSelect: function () {
-                this.popupVisible = true;
-                if (!this.value) {
-                    this.currentValue = this.items[0];
-                }
-            },
-            onClear: function () {
-                this.currentValue = '';
-            },
-            onValuesChange: function (picker, values) {
-                if (this.popupVisible) {
-                    this.currentValue = picker.getValues(0)[0];
+            $push: function (param) {
+                Vue.prototype.$action = 'go';
+                if (typeof param === 'string') {
+                    param = {
+                        name: param
+                    };
                 }
-            },
-
-        },
-        props: ['value', 'label', 'placeholder', 'items'],
-        template: '' +
-        '<a class="mint-cell mint-field"><!---->' +
-        ' <div class="mint-cell-wrapper">' +
-        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
-        '  <div class="mint-cell-value">' +
-        '   <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
-        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
-        '  </div>' +
-        ' </div>' +
-        ' <mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker :slots="slots" @change="onValuesChange"></mt-picker></mt-popup>' +
-        '</a>'
-    });
-
-    Vue.component('wb-field-dict', {
-        data: function () {
-            return {
-                selectValue: '',
-                popupVisible: false,
-                clearVisible: false,
-                slots: [{
-                    values: this.items
-                }],
-            }
-        },
-        computed: {
-            currentValue: {
-                get: function () {
-                    return this.value;
-                },
-                set: function (value) {
-                    this.$emit('input', value);
-                    value ? this.clearVisible = true : this.clearVisible = false;
-                }
-            }
-        },
-        created: function () {
-            this.items.forEach(function (item) {
-                item.keyValue = "[" + item.key + "]" + item.value;
-            })
-        },
-        methods: {
-            onSelect: function () {
-                this.popupVisible = true;
-                if (!this.value) {
-                    this.currentValue = "[" + this.items[0].key + "]" + this.items[0].value;
+                this.$router.push(param);
+            },
+            $pop: function () {
+                Vue.prototype.$action = 'back';
+                // if (typeof (this.$router) === 'undefined') {//客户端使用时偶会出现undefined错误
+                //     window.history.back();
+                //     this.$destroy();
+                // } else {
+                this.$router.go(-1);
+                this.$destroy();
+                // }
+            },
+            $replace: function (param) {
+                Vue.prototype.$action = 'go';
+                if (typeof param === 'string') {
+                    param = {
+                        name: param
+                    };
                 }
+                this.$router.replace(param);
+            },
+            $home: function () {
+                Vue.prototype.$action = 'back';
+                this.$router.push("nav")
+                this.$destroy()
+            },
+            $showLoading: function () {
+                this.$toast.loading({
+                    duration: 0,
+                    forbidClick: true,
+                    message: '请稍等...'
+                });
+                Vue.prototype.$isSubmit = true
             },
-            onClear: function () {
-                this.currentValue = '';
+            $closeLoading: function () {
+                this.$toast.clear();
+                Vue.prototype.$isSubmit = false
             },
-            onValuesChange: function (picker, values) {
-                if (this.popupVisible) {
-                    this.currentValue = "[" + picker.getValues(0)[0].key + "]" + picker.getValues(0)[0].value;
-                }
-            }
-        },
-        props: ['value', 'label', 'placeholder', 'items'],
-        template: '' +
-        '<a class="mint-cell mint-field"><!---->' +
-        ' <div class="mint-cell-wrapper">' +
-        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
-        '  <div class="mint-cell-value">' +
-        '   <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
-        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
-        '  </div>' +
-        ' </div>' +
-        ' <mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker :slots="slots" valueKey="keyValue" @change="onValuesChange"></mt-picker></mt-popup>' +
-        '</a>'
-    });
-
-    Vue.component('wb-field-date', {
-        data: function () {
-            var startDate = new Date();
-            startDate.setFullYear(1990, 0, 1);
-            return {
-                selectValue: '',
-                clearVisible: false,
-                startDate:startDate
-            }
-        },
-        computed: {
-            currentValue: {
-                get: function () {
-                    return this.value;
-                },
-                set: function (value) {
-                    this.$emit('input', value);
-                    value ? this.clearVisible = true : this.clearVisible = false;
+            $showMessage: function (msg, fn) {
+                this.$toast({
+                    duration: 1000,
+                    message: msg
+                });
+                if (typeof fn === 'function') {
+                    setTimeout(function () {
+                        fn();
+                    }, 1000)
                 }
-            }
-        },
-        methods: {
-            onSelect: function () {
-                this.$refs.picker.open();
             },
-            onClear: function () {
-                this.currentValue = '';
-            },
-            onConfirm: function (value) {
-                this.currentValue = value.format("yyyy-MM-dd")
-            }
         },
-        props: ['value', 'label', 'placeholder', 'items'],
-        template: '' +
-        '<a class="mint-cell mint-field"><!---->' +
-        ' <div class="mint-cell-wrapper">' +
-        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
-        '  <div class="mint-cell-value">' +
-        '   <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
-        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
-        '  </div>' +
-        ' </div>' +
-        ' <mt-datetime-picker ref="picker" type="date" :startDate="startDate" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
-        '</a>'
-    });
-
-    Vue.component('wb-field-time', {
-        data: function () {
-            return {
-                selectValue: '',
-                clearVisible: false,
-            }
+        activated: function () {
         },
-        computed: {
-            currentValue: {
-                get: function () {
-                    return this.value;
-                },
-                set: function (value) {
-                    this.$emit('input', value);
-                    value ? this.clearVisible = true : this.clearVisible = false;
+        filters: {
+            notNull: function (val) {
+                if (val === null) {
+                    return "";
                 }
-            }
-        },
-        methods: {
-            onSelect: function () {
-                this.$refs.picker.open();
-            },
-            onClear: function () {
-                this.currentValue = '';
             },
-            onConfirm: function (value) {
-                this.currentValue = value;
-            }
-        },
-        props: ['value', 'label', 'placeholder', 'items'],
-        template: '' +
-        '<a class="mint-cell mint-field"><!---->' +
-        ' <div class="mint-cell-wrapper">' +
-        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
-        '  <div class="mint-cell-value">' +
-        '   <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
-        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
-        '  </div>' +
-        ' </div>' +
-        ' <mt-datetime-picker ref="picker" type="time" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
-        '</a>'
+        }
     });
 
-    Vue.component('wb-field-datetime', {
+    Vue.component('form-area', {
         data: function () {
             return {
-                selectValue: '',
-                clearVisible: false,
+                showValue: ''
             }
         },
-        computed: {
-            currentValue: {
-                get: function () {
-                    return this.value;
-                },
-                set: function (value) {
-                    this.$emit('input', value);
-                    value ? this.clearVisible = true : this.clearVisible = false;
-                }
-            }
-        },
-        methods: {
-            onSelect: function () {
-                this.$refs.picker.open();
+        props: {
+            'label': {
+                type: String,
+                default: ''
             },
-            onClear: function () {
-                this.currentValue = '';
+            'required': {
+                type: Boolean,
+                default: false
             },
-            onConfirm: function (value) {
-                this.currentValue = value.format("yyyy-MM-dd hh:mm")
-            }
-        },
-        props: ['value', 'label', 'placeholder', 'items'],
-        template: '' +
-        '<a class="mint-cell mint-field"><!---->' +
-        ' <div class="mint-cell-wrapper">' +
-        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
-        '  <div class="mint-cell-value">' +
-        '   <input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
-        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
-        '  </div>' +
-        ' </div>' +
-        ' <mt-datetime-picker ref="picker" type="datetime" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
-        '</a>'
-    });
-
-    Vue.component('wb-field-cphm', {
-        data: function () {
-            return {
-                prefixData: [
-                    {
-                        key: '',
-                        value: '京',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'Y']
-                    },
-                    {
-                        key: '',
-                        value: '津',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R']
-                    },
-                    {key: '', value: '冀', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'O', 'R', 'T']},
-                    {key: '', value: '晋', children: ['A', 'B', 'C', 'D', 'E', 'F', 'H', 'J', 'K', 'L', 'M']},
-                    {key: '', value: '蒙', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M']},
-                    {
-                        key: '',
-                        value: '辽',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P']
-                    },
-                    {key: '', value: '吉', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
-                    {
-                        key: '',
-                        value: '黑',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R']
-                    },
-                    {
-                        key: '',
-                        value: '沪',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'AX', 'BX', 'DX']
-                    },
-                    {
-                        key: '',
-                        value: '苏',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'U']
-                    },
-                    {key: '', value: '浙', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L']},
-                    {
-                        key: '',
-                        value: '皖',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S']
-                    },
-                    {key: '', value: '闽', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
-                    {key: '', value: '赣', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'S']},
-                    {
-                        key: '',
-                        value: '鲁',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'U', 'V', 'W', 'Y']
-                    },
-                    {
-                        key: '',
-                        value: '豫',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'U']
-                    },
-                    {
-                        key: '',
-                        value: '鄂',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'AW']
-                    },
-                    {
-                        key: '',
-                        value: '湘',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'S', 'U']
-                    },
-                    {
-                        key: '',
-                        value: '粤',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
-                    },
-                    {
-                        key: '',
-                        value: '桂',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R']
-                    },
-                    {key: '', value: '琼', children: ['A', 'B', 'C', 'D', 'E', 'F']},
-                    {key: '', value: '渝', children: ['A', 'B', 'C', 'D', 'F', 'G', 'H', 'N']},
-                    {
-                        key: '',
-                        value: '川',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
-                    },
-                    {key: '', value: '贵', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J']},
-                    {
-                        key: '',
-                        value: '云',
-                        children: ['A', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S']
-                    },
-                    {key: '', value: '藏', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J']},
-                    {key: '', value: '陕', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'V']},
-                    {
-                        key: '',
-                        value: '甘',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P']
-                    },
-                    {key: '', value: '青', children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']},
-                    {key: '', value: '宁', children: ['A', 'B', 'C', 'D', 'E']},
-                    {
-                        key: '',
-                        value: '新',
-                        children: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'S']
-                    }
-                ],
-                popupVisible: false,
-                clearVisible: false,
-                slots: [{
-                    values: [],
-                    defaultIndex: 9,
-                    className: 'slot1'
-                }, {
-                    divider: true,
-                    content: '',
-                    className: 'slot2'
-                }, {
-                    values: [],
-                    defaultIndex: 11,
-                    className: 'slot3'
-                }],
-            }
-        },
-        created: function () {
-            if (!this.value) {//当model为空时初始化前缀
-                this.$emit('input', this.prefixData[this.slots[0].defaultIndex].value + this.prefixData[this.slots[0].defaultIndex].children[this.slots[2].defaultIndex]);
-            }
-            this.slots[0].values = this.getSlot1();
-            this.slots[2].values = this.getSlot3(this.prefixData[0].value);
-        },
-        computed: {
-            prefix: {
-                get: function () {
-                    return this.value.slice(0, 2);
-                },
-                set: function (value) {
-                    this.$emit('input', value + this.value.slice(2, this.value.length));
-                }
+            'readonly': {
+                type: Boolean,
+                default: false
             },
-            subfix: {
-                get: function () {
-                    return this.value.slice(2, this.value.length);
-                },
-                set: function (value) {
-                    this.$emit('input', this.value.slice(0, 2) + value);
-                    value ? this.clearVisible = true : this.clearVisible = false;
-                }
+            'value': {
+                type: String,
+                default: ''
             }
         },
         methods: {
-            onSelect: function () {
-                this.popupVisible = true;
-            },
-            getSlot1: function () {
-                var items = [];
-                this.prefixData.forEach(function (item) {
-                    items.push(item.value);
-                });
-                return items;
-            },
-            getSlot3: function (value) {
-                for (var i in this.prefixData) {
-                    if (value == this.prefixData[i].value) {
-                        return this.prefixData[i].children;
-                    }
-                }
-                return []
-            },
-            onClear: function () {
-                this.subfix = '';
-            },
-            onValuesChange: function (picker, values) {
-                if (this.popupVisible) {
-                    picker.setSlotValues(1, this.getSlot3(values[0]));
-                    this.prefix = picker.getSlotValue(0) + picker.getSlotValue(1)
-                }
+            onChange: function (value) {
+                this.$emit('input', value);
             }
         },
-        props: ['value', 'label', 'placeholder', 'items'],
         template: '' +
-        '<a class="mint-cell mint-field"><!---->' +
-        ' <div class="mint-cell-wrapper">' +
-        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
-        '  <div class="mint-cell-value">' +
-        '   <span @click="onSelect" style="padding-right: 5px;color:#47d3ff;line-height: 1.6">{{prefix}}</span>' +
-        '   <input :placeholder="placeholder" maxlength="6" v-model="subfix" class="mint-field-core">' +
-        '   <div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
-        '  </div>' +
-        ' </div>' +
-        ' <mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker ref="picker" :slots="slots" @change="onValuesChange"></mt-picker></mt-popup>' +
-        '</a>'
+        '<van-field' +
+        '  :value="value"' +
+        '  :required="required"' +
+        '  clearable' +
+        '  :readonly="readonly"' +
+        '  type="textarea"' +
+        '  row="3"' +
+        '  :label="label"' +
+        '  @input="onChange"' +
+        '  :placeholder="\'请输入\'"/>'
     });
 
-    Vue.component('wb-field-pictures', {
-        data: function () {
-            return {
-                fileList: []
-            }
-        },
-
-        methods: {
-            onClear: function (item) {
-                this.fileList.remove(item);
-            },
-            onValuesChange: function (picker, values) {
-                if (this.popupVisible) {
-                    picker.setSlotValues(1, this.getSlot3(values[0]));
-                    this.prefix = picker.getSlotValue(0) + picker.getSlotValue(1)
-                }
-            },
-            onTakePicture: function () {
-                this.fileList.push({
-                    name: '',
-                    file: ''
-                })
-                setTimeout(function () {
-                    this.$refs.input[this.fileList.length - 1].click();
-                }.bind(this), 1)
-            },
-            onChange: function (e, file) {
-                file.file = e.target.files[0]
-                file.name = e.target.files[0].name;
-                this.$emit("handle-file", file, {
-                    finish: function () {
-                        this.$emit("input", this.fileList)
-                    }.bind(this),
-                    cancel: function () {
-                        this.fileList.remove(file);
-                        this.$emit("input", this.fileList)
-                    }.bind(this)
-                });
-            },
-
-        },
-        props: ['value', 'label'],
-        template: '' +
-        '<a class="mint-cell mint-field"><!---->' +
-        ' <div class="mint-cell-wrapper">' +
-        '  <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
-        '  <div class="mint-cell-value">' +
-        '   <div style="padding-top: 11px;padding-bottom: 11px;text-align: left;width: 100%">' +
-        '    <mt-button type="primary" size="small" @click="onTakePicture">添加</mt-button>' +
-        '    <div style="line-height: 35px;" v-for="item in fileList" v-show="item.name">' +
-        '     <span class="mint-field-clear" style="padding-right: 10px;" @click="onClear(item)"><i class="mintui mintui-field-error"></i></span><!---->' +
-        '     <a>{{item.name}}</a><!---->' +
-        '     <input ref="input" @change="onChange($event,item)" type="file" style="display: none"/>' +
-        '    </div>' +
-        '   </div>' +
-        '  </div>' +
-        ' </div>' +
-        '</a>'
-    });
 </script>
\ No newline at end of file
diff --git a/src/main/resources/modules/SpringBoot/resources/templates/layout/app.ftl b/src/main/resources/modules/SpringBoot/resources/templates/layout/app.ftl
index 0eec21e9..d5f3dbcf 100644
--- a/src/main/resources/modules/SpringBoot/resources/templates/layout/app.ftl
+++ b/src/main/resources/modules/SpringBoot/resources/templates/layout/app.ftl
@@ -3,10 +3,11 @@
 <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <script src="${context}/static/dist/lib.min.js" type="text/javascript"></script>
-    <script src="${context}/static/dist/mint-ui.min.js" type="text/javascript"></script>
-    <link href="${context}/static/dist/mint-ui.min.css" rel="stylesheet"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
     <link href="${context}/static/favicon.ico" rel="icon" type="image/x-icon"/>
     <style>
         * {
@@ -14,118 +15,148 @@
             margin: 0px;
         }
 
-        html,body,#app{
+        html, body, #app {
             width: 100%;
             height: 100%;
         }
 
-        .left-in-right-out-enter-active, .left-in-right-out-leave-active {
-            transition: all 0.3s linear;
-            position: absolute;
+        .layout-bar {
+            position: fixed !important;
+            width: 100%;
+            top: 0;
         }
 
-        .left-in-right-out-enter {
-            transform: translateX(-100%);
-            opacity: 0;
+        .layout .body {
+            margin-top: 50px;
         }
 
-        .left-in-right-out-leave-to {
-            transform: translateX(100%);
-            opacity: 0;
+        .layout .body .van-grid-item {
+            min-height: 100px;
         }
 
-        .right-in-left-out-enter-active, .right-in-left-out-leave-active {
-            transition: all .3s linear;
-            position: absolute;
+        .layout .body .van-nav-bar__title {
+            color: #767676;
         }
 
-        .right-in-left-out-enter {
-            transform: translateX(100%);
+        .layout .body .van-grid-item__text {
+            font-size: 14px;
         }
 
-        .right-in-left-out-leave-to {
-            transform: translateX(-100%);
+        .layout .body .van-cell {
+            padding: 10px 10px !important;
         }
 
-        .left-in-right-out-enter-active, .left-in-right-out-leave-active {
-            transition: all 0.3s linear;
-            position: absolute;
+        .card {
+            background: #ffffff;
+            width: 100%;
+            margin: 10px 0;
+            border-radius: 3px;
+            box-shadow: 0 0 6px 0 #eaeaea;
+            border: 1px solid #eaeaea;
         }
 
-        .left-in-right-out-enter {
-            transform: translateX(-100%);
-            opacity: 0;
+        .card .title {
+            height: 40px;
+            line-height: 40px;
+            padding: 0 15px;
         }
 
-        .left-in-right-out-leave-to {
-            transform: translateX(100%);
-            opacity: 0;
+        .card .title .time {
+            float: right;
+            font-size: smaller;
+            color: #9a9a9a;
+        }
+
+        .card .info {
+            padding: 0 15px;
+            background: #ffffff;
+            border-bottom-right-radius: 3px;
+            border-bottom-left-radius: 3px;
+        }
+
+        .card .info {
+            padding: 0 15px;
+            background: #ffffff;
+            border-bottom-right-radius: 3px;
+            border-bottom-left-radius: 3px;
         }
 
-        .right-in-left-out-enter-active, .right-in-left-out-leave-active {
-            transition: all .3s linear;
+        .card .info .content {
+            padding: 10px;
+            color: rgb(63, 63, 63);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+        .card .info .content_view {
+            padding: 10px;
+            color: rgb(63, 63, 63);
+        }
+
+        .child-view {
             position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            transition: all .5s cubic-bezier(.55, 0, .1, 1);
         }
 
-        .right-in-left-out-enter {
-            transform: translateX(100%);
+        .go-enter, .back-leave-active {
+            opacity: 0;
+            -webkit-transform: translate(50px, 0);
+            transform: translate(50px, 0);
         }
 
-        .right-in-left-out-leave-to {
-            transform: translateX(-100%);
+        .go-leave-active, .back-enter {
+            opacity: 0;
+            -webkit-transform: translate(-50px, 0);
+            transform: translate(-50px, 0);
         }
     </style>
 </head>
 <body>
-<#include Layout.setControl("mint-ui-extend")/>
+<#include controlHolder("mint-ui-extend")/>
 <div id="app">
-    <transition :name="transitionName">
+    <transition :name="$action">
         <router-view></router-view>
     </transition>
 </div>
 
 <template id="home">
-    <div class="view">
-        <mt-header title="Hello world">
-            <router-link to="/" slot="left">
-                <mt-button icon="back">返回</mt-button>
-            </router-link>
-            <mt-button icon="more" slot="right"></mt-button>
-        </mt-header>
-        <div class="content" style="text-align: center;padding-top: 200px">
-            Hello world <router-link to="demo">demo</router-link>
+    <div class="layout">
+        <van-nav-bar class="layout-bar"
+                     :title="$route.meta.title"
+                     left-arrow
+                     left-text="返回"
+                     @click-left="$pop"
+                     @click-right="$home">
+        </van-nav-bar>
+        <div class="body">
+            Hello world <a @click="$push('demo')">demo</a>
         </div>
     </div>
 </template>
 <template id="demo">
-    <div class="view">
-        <mt-header title="表单输入">
-            <mt-button icon="back" slot="left" @click="back">关闭</mt-button>
-        </mt-header>
-        <div class="content" style="text-align: center;">
-            <mt-header title="Mint-ui自带控件"></mt-header>
-            <mt-field label="普通文字" placeholder="请输入用户名" v-model="field1"></mt-field>
-            <mt-field label="邮箱地址" placeholder="请输入邮箱" type="email" v-model="field2"></mt-field>
-            <mt-field label="用户密码" placeholder="请输入密码" type="password" v-model="field3"></mt-field>
-            <mt-field label="手机号码" placeholder="请输入手机号" type="tel" v-model="field4"></mt-field>
-            <mt-field label="网站链接" placeholder="请输入网址" type="url" v-model="field5"></mt-field>
-            <mt-field label="数字输入" placeholder="请输入数字" type="number" v-model="field6"></mt-field>
-            <mt-field label="生日日期" placeholder="请输入生日" type="date" v-model="field7"></mt-field>
-            <mt-field label="多行文字" placeholder="多行文字" type="textarea" rows="2" v-model="field8"></mt-field>
-
-            <mt-header title="扩展控件"></mt-header>
-            <wb-field-select label="文字选择" placeholder="请选择" :items="['男','女']" v-model="field10"></wb-field-select>
-            <wb-field-dict label="字典选择" placeholder="请选择" :items="[{key:'1',value:'男'},{key:'2',value:'女'}]"
-                           v-model="field11"></wb-field-dict>
-            <wb-field-date label="日期选择" placeholder="请选择" v-model="field12"></wb-field-date>
-            <wb-field-time label="时间选择" placeholder="请选择" v-model="field13"></wb-field-time>
-            <wb-field-datetime label="日期时间" placeholder="请选择" v-model="field14"></wb-field-datetime>
-            <wb-field-cphm label="车牌号码" placeholder="车牌号" v-model="field15"></wb-field-cphm>
-
-            <wb-field-pictures label="选择照片" v-model="field16" @handle-file="handleFile"></wb-field-pictures>
+    <div class="layout">
+        <van-nav-bar class="layout-bar"
+                     :title="$route.meta.title"
+                     left-arrow
+                     left-text="返回"
+                     @click-left="$pop"
+                     @click-right="$home">
+        </van-nav-bar>
+        <div class="body">
+            <van-form>
+                <van-field v-model="field1" label="文本" placeholder="请输入用户名"/>
+                <van-field v-model="field2" label="文本" placeholder="请输入用户名"/>
+                <van-field v-model="field3" label="文本" placeholder="请输入用户名"/>
+                <form-area v-model="field4" label="文本域"></form-area>
+            </van-form>
 
             <div style="padding: 10px">
-                <mt-button type="primary" size="large" @click="doSearch()">打印类容</mt-button>
+                <van-button type="primary" size="large" @click="doSearch()">打印类容</van-button>
             </div>
         </div>
     </div>
@@ -137,11 +168,17 @@
             {
                 path: '/',
                 name: 'home',
+                meta: {
+                    title: "首页"
+                },
                 component: Vue.extend({template: '#home'})
             },
             {
                 path: '/demo',
                 name: 'demo',
+                meta: {
+                    title: "示例"
+                },
                 component: Vue.extend({
                     template: '#demo',
                     mounted: function () {
@@ -177,13 +214,6 @@
                             console.log(this.field15);
                             console.log(this.field16);
                         },
-                        back: function () {
-                            if (window.android) {
-                                android.finish()
-                            } else {
-                                location.href = "${context}/app/index.htm"
-                            }
-                        },
                         handleFile: function (file, inputCall) {
                             //do upload
                             console.log("正在上传文件" + file.name);
@@ -200,15 +230,8 @@
     });
     var app = new Vue({
         el: '#app',
-        data: {
-            transitionName: ''
-        },
-        router: router,
-        watch: {
-            '$route': function (to, from) {
-                this.transitionName = to.meta.index < from.meta.index ? 'left-in-right-out' : 'right-in-left-out'
-            }
-        }
+        data: {},
+        router: router
     })
 </script>
 </html>