init

package.json

@@ -30,6 +30,7 @@
     "js-md5": "^0.7.3",
     "qiankun": "^1.4.6",
     "qs": "^6.9.3",
+    "vant": "^2.12.20",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.4.0"
@@ -59,6 +60,8 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
+    "less": "^4.1.1",
+    "less-loader": "^7.3.0",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
@@ -74,10 +77,13 @@
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
+    "vux": "^2.9.4",
+    "vux-loader": "^1.2.9",
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "yaml-loader": "^0.6.0"
   },
   "engines": {
     "node": ">= 6.0.0",

src/components/Layout/main.vue

@@ -76,7 +76,7 @@
 import SideMenu from '@/components/Layout/sidemenu'
 import NavBar from '@/components/Layout/navbar'
 import Loader from '@/components/Loader/loader'
-import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
+// import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import { permission } from '@/util/mixins'
 import ChangePassword from '@/views/personal/changePassword'
 

src/main.js

@@ -139,6 +139,19 @@ Vue.use(Calendar)
 // Vue.use(Carousel)
 Vue.use(Tooltip)
 
+import { NavBar } from 'vant';
+Vue.use(NavBar);
+
+import { Form as vantForm } from 'vant';
+import { Field } from 'vant';
+import { Button as vantButton } from 'vant';
+
+Vue.use(vantForm);
+Vue.use(Field);
+Vue.use(vantButton);
+
+import 'vant/lib/index.css';
+
 Vue.config.productionTip = false
 Vue.prototype.$ajax = ajax
 Vue.prototype.$api = api

src/router/routes.js

@@ -20,7 +20,7 @@
 // import Demo from '@/views/components/demo' 
 const appRoutes = [
   {
-    path: '/', name: 'Layout', redirect: '/portal-home',
+    path: '/', name: 'Layout', redirect: '/mobi',
     component: resolve => require(['@/components/Layout'], resolve), //Layout,
     children: [
       {
@@ -293,6 +293,9 @@ const appRoutes = [
   { path: '/demo', name: 'demo', component: resolve => require(['@/views/components/demo'], resolve), //Demo,
     meta: { title: 'demo', },
   },
+  { path: '/mobi', name: 'mobi', component: resolve => require(['@/views/mobi'], resolve), //Demo,
+    meta: { title: 'mobi', },
+  },
 ]
 
 export const routes = [

src/views/label/labelRightSide.vue

@@ -390,7 +390,7 @@ export default {
               name: element.strName,
               streetId: element.streetId
             })
-          });
+          })
           
         } else {
           alert('接口发生错误！')
@@ -438,7 +438,7 @@ export default {
      * key => 业务属性二级可选值
      */
     checkIfSelectOptionAppears(options, formValue, key) {
-      console.log(options, formValue, key);
+      console.log(options, formValue, key)
       let findKey = options.find(item => (item.tblKey == key))
       let pushSels = []
       // 如果没找到

src/views/mobi.vue

+<template>
+    <div style="height: 100%; background-color: #F5F5F5">
+        <van-nav-bar
+            title="首页"
+            left-arrow
+        />
+
+        <van-form @submit="onSubmit" style="border-radius: 10px; margin: 10px">
+            <van-field
+                v-model="sectName"
+                label="小区名称"
+                placeholder="请输入"
+                :rules="[{ required: true, message: '请填写小区名称！' }]"
+            />
+            <van-field
+                v-model="sectAddr"
+                label="小区地址"
+                placeholder="请输入"
+                :rules="[{ required: true, message: '请填写小区地址！' }]"
+            />
+            <van-field
+                v-model="mpzAddr"
+                label="门牌幢地址"
+                placeholder="例：19号101室"
+                :rules="[{ required: true, message: '请填写门牌幢地址！' }]"
+            />
+
+            <!-- 报修部位 -->
+            <van-field
+                readonly
+                clickable
+                name="picker"
+                :value="repairArea"
+                label="报修部位"
+                placeholder="请选择"
+                @click="showPicker = true"
+                :rules="[{ required: true, message: '请至少选择一项！' }]"
+            />
+            <van-popup v-model="repairAreaPicker" position="bottom">
+                <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="repairAreaConfirm"
+                    @cancel="showrepairAreaPicker = false"
+                />
+            </van-popup>
+
+            <!-- 报修类型 -->
+
+            <van-field
+                readonly
+                clickable
+                name="picker"
+                :value="repairType"
+                label="报修类型"
+                placeholder="请选择"
+                @click="showPicker = true"
+                :rules="[{ required: true, message: '请至少选择一项！' }]"
+            />
+            <van-popup v-model="repairTypePicker" position="bottom">
+                <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="repairTypeConfirm"
+                    @cancel="showrepairTypePicker = false"
+                />
+            </van-popup>
+
+            <van-field
+                v-model="description"
+                rows="2"
+                autosize
+                label="描述"
+                type="textarea"
+                maxlength="150"
+                placeholder="请输入详细信息"
+                show-word-limit
+                :rules="[{ required: true, message: '请填写详细信息！' }]"
+            />
+
+            <van-field
+                readonly
+                clickable
+                name="calendar"
+                :value="dueDate"
+                label="上门日期"
+                placeholder="请选择"
+                @click="showCalendar = true"
+                :rules="[{ required: true, message: '请选择上门日期！' }]"
+            />
+            <van-calendar v-model="showCalendar" @confirm="onConfirm" />
+
+            <van-field
+                readonly
+                clickable
+                name="datetimePicker"
+                :value="dueTime"
+                label="上门时间"
+                placeholder="请选择"
+                @click="showPicker = true"
+                :rules="[{ required: true, message: '请选择上门时间！' }]"
+            />
+            <van-popup v-model="showPicker" position="bottom">
+                <van-datetime-picker
+                    type="time"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                />
+            </van-popup>
+            <div style="margin: 16px;">
+                <van-button round block type="info" native-type="submit">提交</van-button>
+            </div>
+        </van-form>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            sectName: '',
+            sectAddr: '',
+            mpzAddr: '',
+            repairArea: '',
+            repairType: '',
+            description: '',
+            dueDate: '',
+            dueTime: '',
+
+            repairAreaPicker: '',
+            repairTypePicker: '',
+
+            showrepairAreaPicker: false,
+            showrepairTypePicker: false,
+        }
+    },
+    mounted() {},
+    methods:{
+        onConfirm() {},
+        onSubmit() {
+            const parseForm = {
+                stNameFrst: sectName,
+            }
+        },
+        repairAreaConfirm() {},
+        repairTypeConfirm() {}
+    }
+}
+</script>