视频云服务更新

mini-program/garden-wxapp/.hbuilderx/launch.json

@@ -1,11 +1,13 @@
-{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+{
+  // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
   // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
-    "version": "0.0",
-    "configurations": [{
-            "type": "uniCloud",
-            "default": {
-                "launchtype": "local"
-            }
-        }
-    ]
+  "version": "0.0",
+  "configurations": [
+    {
+      "type": "uniCloud",
+      "default": {
+        "launchtype": "local"
+      }
+    }
+  ]
 }

mini-program/garden-wxapp/App.vue

@@ -1,45 +1,45 @@
 <script>
-	export default {
-		onLaunch: function() {
-			this.updateApp()
-		},
-		methods:{
-			//更新版本
-			updateApp(){
-				const updateManager = uni.getUpdateManager();
-				updateManager.onCheckForUpdate(function (res) {
-				  // 请求完新版本信息的回调
-				  console.log("是否有新版本：",res.hasUpdate);
-				});
-				updateManager.onUpdateReady(function (res) {
-				  uni.showModal({
-				    title: '更新提示',
-				    content: '新版本已经准备好，是否重启应用？',
-				    success(res) {
-				      if (res.confirm) {
-				        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
-						uni.clearStorageSync()
-				        updateManager.applyUpdate();
-				      }
-				    }
-				  });
-				
-				});
-				updateManager.onUpdateFailed(function (res) {
-				  // 新的版本下载失败
-				});
-			},
-		}
-	}
+    export default {
+        onLaunch: function () {
+            this.updateApp()
+        },
+        methods: {
+            //更新版本
+            updateApp() {
+                const updateManager = uni.getUpdateManager();
+                updateManager.onCheckForUpdate(function (res) {
+                    // 请求完新版本信息的回调
+                    console.log("是否有新版本：", res.hasUpdate);
+                });
+                updateManager.onUpdateReady(function (res) {
+                    uni.showModal({
+                        title: '更新提示',
+                        content: '新版本已经准备好，是否重启应用？',
+                        success(res) {
+                            if (res.confirm) {
+                                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+                                uni.clearStorageSync()
+                                updateManager.applyUpdate();
+                            }
+                        }
+                    });
+
+                });
+                updateManager.onUpdateFailed(function (res) {
+                    // 新的版本下载失败
+                });
+            },
+        }
+    }
 </script>
 
 <style lang="scss">
-	@import "./static/iconfont.css";
-	@import "uview-ui/index.scss";
-	
-	@import "@/assets/colorui/main.css";
-	@import "@/assets/colorui/icon.css";
-	@import "@/assets/colorui/app.scss";
-	
-	@import "@/assets/colorui/rich_text.scss";
+    @import "./static/iconfont.css";
+    @import "uview-ui/index.scss";
+
+    @import "@/assets/colorui/main.css";
+    @import "@/assets/colorui/icon.css";
+    @import "@/assets/colorui/app.scss";
+
+    @import "@/assets/colorui/rich_text.scss";
 </style>

mini-program/garden-wxapp/assets/colorui/app.scss

@@ -1,275 +1,317 @@
 @import "uni.scss";
 
 /* 新邻园区 */
-.base-bg-color{
-	background-color: $base-color;
-	color: #FFFFFF;
+.base-bg-color {
+  background-color: $base-color;
+  color: #FFFFFF;
 }
-.base-color{
-	color:$base-color
+
+.base-color {
+  color: $base-color
 }
 
-.base-line{
-	font-weight: 800;
-	color: $base-color;
-	border: 1rpx solid $base-color;
+.base-line {
+  font-weight: 800;
+  color: $base-color;
+  border: 1 rpx solid $base-color;
 }
 
-.party-bg-color{
-	background-color: $party-color;
-	color: #FFFFFF;
+.party-bg-color {
+  background-color: $party-color;
+  color: #FFFFFF;
 }
 
-.party-color{
-	color:$party-color
+.party-color {
+  color: $party-color
 }
 
-.party-line{
-	font-weight: 800;
-	color: $party-color;
-	border: 1rpx solid $party-color;
+.party-line {
+  font-weight: 800;
+  color: $party-color;
+  border: 1 rpx solid $party-color;
 }
 
-.red-line{
-	font-weight: 800;
-	color: #da0000;
-	border: 1rpx solid #da0000;
+.red-line {
+  font-weight: 800;
+  color: #da0000;
+  border: 1 rpx solid #da0000;
 }
 
-.text-wait{
-	color: #ea7500;
+.text-wait {
+  color: #ea7500;
 }
 
-.bg-wait{
-	background-color: #ea7500;
-	color: #FFFFFF;
+.bg-wait {
+  background-color: #ea7500;
+  color: #FFFFFF;
 }
 
-.text-pass{
-	color: #12914f;
+.text-pass {
+  color: #12914f;
 }
 
-.bg-pass{
-	background-color: #12914f;
-	color: #FFFFFF;
+.bg-pass {
+  background-color: #12914f;
+  color: #FFFFFF;
 }
 
-.text-fail{
-	color: #da0000;
+.text-fail {
+  color: #da0000;
 }
 
-.bg-fail{
-	background-color: #da0000;
-	color: #FFFFFF;
+.bg-fail {
+  background-color: #da0000;
+  color: #FFFFFF;
 }
 
 /* ===========padding=========== */
-.padding-10,.padding-sm{
-	padding: 10rpx;
+.padding-10, .padding-sm {
+  padding: 10 rpx;
 }
-.padding-20,.padding-df{
-	padding: 20rpx;
+
+.padding-20, .padding-df {
+  padding: 20 rpx;
 }
-.padding-30,.padding-lg{
-	padding: 30rpx;
+
+.padding-30, .padding-lg {
+  padding: 30 rpx;
 }
-.padding-40{
-	padding: 40rpx;
+
+.padding-40 {
+  padding: 40 rpx;
 }
-.padding-50{
-	padding: 50rpx;
+
+.padding-50 {
+  padding: 50 rpx;
 }
-.padding-left-10,.padding-left-sm{
-	padding-left: 10rpx;
+
+.padding-left-10, .padding-left-sm {
+  padding-left: 10 rpx;
 }
-.padding-left-20,.padding-left-df{
-	padding-left: 20rpx;
+
+.padding-left-20, .padding-left-df {
+  padding-left: 20 rpx;
 }
-.padding-left-30,.padding-left-lg{
-	padding-left: 30rpx;
+
+.padding-left-30, .padding-left-lg {
+  padding-left: 30 rpx;
 }
-.padding-left-40{
-	padding-left: 40rpx;
+
+.padding-left-40 {
+  padding-left: 40 rpx;
 }
-.padding-left-50{
-	padding-left: 50rpx;
+
+.padding-left-50 {
+  padding-left: 50 rpx;
 }
 
-.padding-right-10,.padding-right-sm{
-	padding-right: 10rpx;
+.padding-right-10, .padding-right-sm {
+  padding-right: 10 rpx;
 }
-.padding-right-20,.padding-right-df{
-	padding-right: 20rpx;
+
+.padding-right-20, .padding-right-df {
+  padding-right: 20 rpx;
 }
-.padding-right-30,.padding-right-lg{
-	padding-right: 30rpx;
+
+.padding-right-30, .padding-right-lg {
+  padding-right: 30 rpx;
 }
-.padding-right-40{
-	padding-right: 40rpx;
+
+.padding-right-40 {
+  padding-right: 40 rpx;
 }
-.padding-right-50{
-	padding-right: 50rpx;
+
+.padding-right-50 {
+  padding-right: 50 rpx;
 }
 
-.padding-top-10,.padding-top-sm{
-	padding-top: 10rpx;
+.padding-top-10, .padding-top-sm {
+  padding-top: 10 rpx;
 }
-.padding-top-20,.padding-top-df{
-	padding-top: 20rpx;
+
+.padding-top-20, .padding-top-df {
+  padding-top: 20 rpx;
 }
-.padding-top-30,.padding-top-lg{
-	padding-top: 30rpx;
+
+.padding-top-30, .padding-top-lg {
+  padding-top: 30 rpx;
 }
-.padding-top-40{
-	padding-top: 40rpx;
+
+.padding-top-40 {
+  padding-top: 40 rpx;
 }
-.padding-top-50{
-	padding-top: 50rpx;
+
+.padding-top-50 {
+  padding-top: 50 rpx;
 }
 
-.padding-bottom-10,.padding-bottom-sm{
-	padding-bottom: 10rpx;
+.padding-bottom-10, .padding-bottom-sm {
+  padding-bottom: 10 rpx;
 }
-.padding-bottom-20,.padding-bottom-df{
-	padding-bottom: 20rpx;
+
+.padding-bottom-20, .padding-bottom-df {
+  padding-bottom: 20 rpx;
 }
-.padding-bottom-30,.padding-bottom-lg{
-	padding-bottom: 30rpx;
+
+.padding-bottom-30, .padding-bottom-lg {
+  padding-bottom: 30 rpx;
 }
-.padding-bottom-40{
-	padding-bottom: 40rpx;
+
+.padding-bottom-40 {
+  padding-bottom: 40 rpx;
 }
-.padding-bottom-50{
-	padding-bottom: 50rpx;
+
+.padding-bottom-50 {
+  padding-bottom: 50 rpx;
 }
 
 /* ===========margin=========== */
-.margin-10,.margin-sm{
-	margin: 10rpx;
+.margin-10, .margin-sm {
+  margin: 10 rpx;
 }
-.margin-20,.margin-df{
-	margin: 20rpx;
+
+.margin-20, .margin-df {
+  margin: 20 rpx;
 }
-.margin-30,.margin-lg{
-	margin: 30rpx;
+
+.margin-30, .margin-lg {
+  margin: 30 rpx;
 }
-.margin-40{
-	margin: 40rpx;
+
+.margin-40 {
+  margin: 40 rpx;
 }
-.margin-50{
-	margin: 50rpx;
+
+.margin-50 {
+  margin: 50 rpx;
 }
-.margin-left-10,.margin-left-sm{
-	margin-left: 10rpx;
+
+.margin-left-10, .margin-left-sm {
+  margin-left: 10 rpx;
 }
-.margin-left-20,.margin-left-df{
-	margin-left: 20rpx;
+
+.margin-left-20, .margin-left-df {
+  margin-left: 20 rpx;
 }
-.margin-left-30,.margin-left-lg{
-	margin-left: 30rpx;
+
+.margin-left-30, .margin-left-lg {
+  margin-left: 30 rpx;
 }
-.margin-left-40{
-	margin-left: 40rpx;
+
+.margin-left-40 {
+  margin-left: 40 rpx;
 }
-.margin-left-50{
-	margin-left: 50rpx;
+
+.margin-left-50 {
+  margin-left: 50 rpx;
 }
 
-.margin-right-10,.margin-right-sm{
-	margin-right: 10rpx;
+.margin-right-10, .margin-right-sm {
+  margin-right: 10 rpx;
 }
-.margin-right-20,.margin-right-df{
-	margin-right: 20rpx;
+
+.margin-right-20, .margin-right-df {
+  margin-right: 20 rpx;
 }
-.margin-right-30,.margin-right-lg{
-	margin-right: 30rpx;
+
+.margin-right-30, .margin-right-lg {
+  margin-right: 30 rpx;
 }
-.margin-right-40{
-	margin-right: 40rpx;
+
+.margin-right-40 {
+  margin-right: 40 rpx;
 }
-.margin-right-50{
-	margin-right: 50rpx;
+
+.margin-right-50 {
+  margin-right: 50 rpx;
 }
 
-.margin-top-10,.margin-top-sm{
-	margin-top: 10rpx;
+.margin-top-10, .margin-top-sm {
+  margin-top: 10 rpx;
 }
-.margin-top-20,.margin-top-df{
-	margin-top: 20rpx;
+
+.margin-top-20, .margin-top-df {
+  margin-top: 20 rpx;
 }
-.margin-top-30,.margin-top-lg{
-	margin-top: 30rpx;
+
+.margin-top-30, .margin-top-lg {
+  margin-top: 30 rpx;
 }
-.margin-top-40{
-	margin-top: 40rpx;
+
+.margin-top-40 {
+  margin-top: 40 rpx;
 }
-.margin-top-50{
-	margin-top: 50rpx;
+
+.margin-top-50 {
+  margin-top: 50 rpx;
 }
 
-.margin-bottom-10,.margin-bottom-sm{
-	margin-bottom: 10rpx;
+.margin-bottom-10, .margin-bottom-sm {
+  margin-bottom: 10 rpx;
 }
-.margin-bottom-20,.margin-bottom-df{
-	margin-bottom: 20rpx;
+
+.margin-bottom-20, .margin-bottom-df {
+  margin-bottom: 20 rpx;
 }
-.margin-bottom-30,.margin-bottom-lg{
-	margin-bottom: 30rpx;
+
+.margin-bottom-30, .margin-bottom-lg {
+  margin-bottom: 30 rpx;
 }
-.margin-bottom-40{
-	margin-bottom: 40rpx;
+
+.margin-bottom-40 {
+  margin-bottom: 40 rpx;
 }
-.margin-bottom-50{
-	margin-bottom: 50rpx;
+
+.margin-bottom-50 {
+  margin-bottom: 50 rpx;
 }
 
 /* ==========text-cut=========== */
 
 
-
 .text-cut-1 {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: 1;
-	-webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
 }
 
 .text-cut-2 {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 .text-cut {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
 }
 
 .bg-gradual-black {
-	background-image: linear-gradient(45deg, #26272f, #414244);
-	color: #f7ebd2;
+  background-image: linear-gradient(45deg, #26272f, #414244);
+  color: #f7ebd2;
 }
 
 .footer-fixed {
-	position: fixed;
-	z-index: 99;
-	width: 100%;
-	bottom: 0;
-	left: 0;
-}
-
-.bottom-bar{
-	/* position: fixed;
-	top: 88%; */
-	width: 100%;
-	height: 150rpx;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	padding: 30rpx;
+  position: fixed;
+  z-index: 99;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+}
+
+.bottom-bar {
+  /* position: fixed;
+  top: 88%; */
+  width: 100%;
+  height: 150 rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 30 rpx;
 }

mini-program/garden-wxapp/assets/http/api.js

@@ -1,301 +1,301 @@
 import {http} from './service.js'
 
 //文件上传
-const uploadFile={
-	submit:p => http.upload('/upload/putfile', {name:'file',filePath:p}),
+const uploadFile = {
+    submit: p => http.upload('/upload/putfile', {name: 'file', filePath: p}),
 }
 
 //短信api
 const SMSApi = {
-	sendSms:p => http.post('huawei/sms/sendSms'+p),
-	validCode:p => http.post('huawei/sms/validCode'+p),
+    sendSms: p => http.post('huawei/sms/sendSms' + p),
+    validCode: p => http.post('huawei/sms/validCode' + p),
 }
 
 //字典
-const dict=p => http.get('/blade-system/dict-biz/dictionary',{params:p})
+const dict = p => http.get('/blade-system/dict-biz/dictionary', {params: p})
 
 
 //微信基本参数
-let wxData={
-	//国信的
-	// appId:'wx988577c5a9061283',
-	// secret:'5013c82bf72e6266dfb2720757433e74',
-	//园区的
-	appId:'wxcfb2b48079ca59e4',
-	secret:'30f9cf566aa57892e55aee0406356b9e',
-	subscribe_grant_type:'client_credential', //订阅消息的grant_type
+let wxData = {
+    //国信的
+    // appId:'wx988577c5a9061283',
+    // secret:'5013c82bf72e6266dfb2720757433e74',
+    //园区的
+    appId: 'wxcfb2b48079ca59e4',
+    secret: '30f9cf566aa57892e55aee0406356b9e',
+    subscribe_grant_type: 'client_credential', //订阅消息的grant_type
 }
 
 //微信api
 const wxApi = {
-	subscribe:p => http.post('/wx/msgSend', p),
-	getAccessToken:p => http.get('/wx/getAccessToken', {params:p}),
-	getOpenId:p => http.get('/wx/getOpenId', {params:p}),
-	//获取小程序的audit状态
-	getAppletStatus:p => http.get('appconf/appconf/getById', {params:p}),
+    subscribe: p => http.post('/wx/msgSend', p),
+    getAccessToken: p => http.get('/wx/getAccessToken', {params: p}),
+    getOpenId: p => http.get('/wx/getOpenId', {params: p}),
+    //获取小程序的audit状态
+    getAppletStatus: p => http.get('appconf/appconf/getById', {params: p}),
 }
 
 //登录
-const login=p => http.post('community/enterprisestaff/app/login', p)
+const login = p => http.post('community/enterprisestaff/app/login', p)
 
 //修改密码
-const updatePassword=p => http.post('community/enterprisestaff/app/updatePassword'+p)
+const updatePassword = p => http.post('community/enterprisestaff/app/updatePassword' + p)
 
 //获取管理员的openid集合
-const getManagerOpenList=p => http.get('/community/enterprisestaff/app/getManagerList',{params:p})
+const getManagerOpenList = p => http.get('/community/enterprisestaff/app/getManagerList', {params: p})
 
 
 //获取token
-const getToken=p => http.post('blade-auth/oauth/token'+p,{},{header: {"Authorization": "Basic c2FiZXI6c2FiZXJfc2VjcmV0"}})
+const getToken = p => http.post('blade-auth/oauth/token' + p, {}, {header: {"Authorization": "Basic c2FiZXI6c2FiZXJfc2VjcmV0"}})
 
 //园区api
 const agency = {
-	getAgencyTenantList:p => http.get('agency/agency/getAgencyTenantList', {params:p}),
-	page:p => http.get('/agency/agency/getAgencyList', {params:p}),
-	submit:p => http.post('/agency/agency/submit', p),
+    getAgencyTenantList: p => http.get('agency/agency/getAgencyTenantList', {params: p}),
+    page: p => http.get('/agency/agency/getAgencyList', {params: p}),
+    submit: p => http.post('/agency/agency/submit', p),
 }
 //区域api
 const residential = {
-	page:p => http.get('/community/residential/listByAgencyId', {params:p}),
-	selectPage:p => http.get('/community/residential/select', {params:p}),
+    page: p => http.get('/community/residential/listByAgencyId', {params: p}),
+    selectPage: p => http.get('/community/residential/select', {params: p}),
 }
 
 //楼栋
 const building = {
-	page:p => http.get('/building/building/list', {params:p})
+    page: p => http.get('/building/building/list', {params: p})
 }
 
 
 //企业api
 const enterprise = {
-	page:p => http.get('/enterprise/enterprise/list', {params:p}),
-	detail:p => http.get('/enterprise/enterprise/detail', {params:p}),
-	submit:p => http.post('/enterprise/enterprise/submit', p),
+    page: p => http.get('/enterprise/enterprise/list', {params: p}),
+    detail: p => http.get('/enterprise/enterprise/detail', {params: p}),
+    submit: p => http.post('/enterprise/enterprise/submit', p),
 }
 
 //企业员工
 const enterprisestaff = {
-	page:p => http.get('/community/enterprisestaff/getEnterpriseList', {params:p}),
-	detail:p => http.get('/community/enterprisestaff/detail', {params:p}),
-	submit:p => http.post('/community/enterprisestaff/submit', p),
+    page: p => http.get('/community/enterprisestaff/getEnterpriseList', {params: p}),
+    detail: p => http.get('/community/enterprisestaff/detail', {params: p}),
+    submit: p => http.post('/community/enterprisestaff/submit', p),
 }
 
 //CMS
-const CMS={
-	page:p => http.get('/estate/article/list', {params:p}),
-	detail:p => http.get('/estate/article/detail', {params:p}),
-	addReaderCount:p => http.post('/estate/article/addReaderCount', p),
+const CMS = {
+    page: p => http.get('/estate/article/list', {params: p}),
+    detail: p => http.get('/estate/article/detail', {params: p}),
+    addReaderCount: p => http.post('/estate/article/addReaderCount', p),
 }
 
 //banner 轮播图
-const banner={
-	page:p => http.get('/estate/banners/list', {params:p}),
+const banner = {
+    page: p => http.get('/estate/banners/list', {params: p}),
 }
 
 //消防设备
-const fireDevice={
-	//企业角色的设备列表接口
-	page:p => http.get('/smartapplication/smartdevice/list', {params:p}),
-	//园区角色的设备列表接口
-	agencyPage:p => http.get('/smartapplication/smartdevice/getDeviceList', {params:p}),
-	//报警记录接口
-	alarmRecord:p => http.get('/smartapplication/smartdevice/getAlarmRecord', {params:p}),
-	//电表抄表记录
-	electricmeterrecord:p => http.get('/electricmeterrecord/electricmeterrecord/list', {params:p}),
+const fireDevice = {
+    //企业角色的设备列表接口
+    page: p => http.get('/smartapplication/smartdevice/list', {params: p}),
+    //园区角色的设备列表接口
+    agencyPage: p => http.get('/smartapplication/smartdevice/getDeviceList', {params: p}),
+    //报警记录接口
+    alarmRecord: p => http.get('/smartapplication/smartdevice/getAlarmRecord', {params: p}),
+    //电表抄表记录
+    electricmeterrecord: p => http.get('/electricmeterrecord/electricmeterrecord/list', {params: p}),
 }
 //用户反馈
 const feedback = {
-	submit:p => http.post('/estate/feedback/submit', p),
+    submit: p => http.post('/estate/feedback/submit', p),
 }
 //园区公告
 const notice = {
-	page:p => http.get('/estate/parknotice/list', {params:p}),
-	remove:p => http.post('/estate/parknotice/remove?ids='+p),
-	submit:p => http.post('/estate/parknotice/save', p),
+    page: p => http.get('/estate/parknotice/list', {params: p}),
+    remove: p => http.post('/estate/parknotice/remove?ids=' + p),
+    submit: p => http.post('/estate/parknotice/save', p),
 }
 
 //测温记录
 const temperatureRecord = {
-	page:p => http.get('/smartapplication/temperaturerecord/getTemperatureRecord', {params:p}),
+    page: p => http.get('/smartapplication/temperaturerecord/getTemperatureRecord', {params: p}),
 }
 
 //健康码
 const healthCode = {
-	getCode:p => http.post('/health/getCode', p)
+    getCode: p => http.post('/health/getCode', p)
 }
 
- const car = {
-	 //出入记录
-	 condition:p => http.get('carenterrecord/carenterrecord/queryRecord', {params:p}),
-	 //入场记录
-	 enterPage:p => http.get('/carenterrecord/carenterrecord/list', {params:p}),
-	 //出场记录
-	 outPage:p => http.get('/caroutrecord/caroutrecord/list', {params:p}),
-	 
-	 //车辆列表
-	 carList:p => http.get('/community/car/app/list', {params:p}),
-	 //添加车辆
-	 carAdd:p => http.post('/community/car/submit', p),
-	 //删除车辆
-	 carRemove:p => http.post('/community/car/remove?ids='+p),
-	 //车辆审核
-	 carAudit:p => http.post('/community/car/audit', p),
- }
-
- //开门设备
- const device={
-	 page:p => http.get('facedevice/facedevice/list', {params:p}),
-	 open:p => http.post('facedevice/facedevice/remoteOpenDoor', p)
- }
- 
- //园区统计
- const statistical={
-	 //园区信息统计
-	 agencyStatistical:p => http.get('/statistics/agency', {params:p}),
-	 //当日动态数据
- 	 todayData:p => http.get('/statistics/screen/park/todayData', {params:p}),
-	 //人员进出记录
-	 carTendency:p => http.get('statistics/screen/park/carTendency', {params:p}),
-	 //三十天内用电量
-	 electricMeterStatic:p => http.get('statistics/electricMeterStatic', {params:p}),
-	 //消防设备数据统计
-	 getGateStatic:p => http.get('smartapplication/smartdevice/getFireStatic', {params:p}),
-	 //消防场景告警事件统计
-	 getDeviceJobStaticByApp:p => http.get('jobs/devicejob/getDeviceJobStaticByApp', {params:p}),
-	  
- }
- 
- //出入记录
- const accessrecord={
- 	 page:p => http.get('/community/accessrecord/list', {params:p}),
- }
- 
- //访客授权
- const guest={
-	 submit:p => http.post('estate/guest/application', p),
-	 page:p => http.get('estate/guest/list', {params:p}),
-	 getByGuestOpenId:p => http.get('/estate/guest/getByGuestOpenId', {params:p}),
-	 check:p => http.post('estate/guest/check', p),
-	 remove:p => http.post('estate/guest/remove?ids='+p),
- }
- 
- //企业项目
- const enterpriseproject={
-	 submit:p => http.post('enterprise/enterpriseproject/submit', p),
-	 page:p => http.get('enterprise/enterpriseproject/list', {params:p}),
-	 remove:p => http.post('enterprise/enterpriseproject/remove?ids='+p),
- }
- 
- //视频监控
- const live={
- 	 page:p => http.get('yc_video_cloud_device/videoclouddevice/getByResidentialAndDeviceName', {params:p}),
- }
- 
- //智慧党建
- const party={
-	 //党支部列表
-	 page:p => http.get('party/branch/app/getListForAgency', {params:p}),
-	 //党支部详情
-	 branchDetail:p => http.get('party/branch/detail', {params:p}),
-	 //查看员工属于哪个党支部 enterpriseStaffId
-	 branch:p => http.get('party/branch/app/list/', {params:p}),
-	 isPartyMember:p => http.get('party/member/isPartyMember', {params:p}),
-	 //党员认证
-	 apply:p => http.post('party/member/apply',p),
-	 //三会一课
-	 meetinglist:p => http.get('party/meetinglist/list', {params:p}),
-	 //三会一课详情
-	 meetingDetail:p => http.get('party/meetinglist/detail', {params:p}),
-	 //评论
-	 comment:p => http.post('party/comment/save',p),
-	 //评论列表
-	 commentList:p => http.get('party/comment/list', {params:p}),
-	 //党内资讯
-	 partyInfoList:p => http.get('party/newslist/list', {params:p}),
-	 //资讯详情
-	 partyInfoDetail:p => http.get('party/newslist/detail', {params:p}),
-	 //党内活动
-	 activityList:p => http.get('party/activity/list', {params:p}),
-	 //党资讯详情
-	 activityDetail:p => http.get('party/activity/detail', {params:p}),
-	 //活动报名
-	 activityenroll:p => http.post('party/activityenroll/save',p),
-	 //查看是否已报名
-	 checkIsEnroll:p => http.get('party/activityenroll/list',{params:p}),
-	 //取消报名
-	 cancelEnroll:p => http.post('party/activityenroll/cancel',p),
- }
- 
-
- const punch={
-	 getRule:p => http.get('attence/ruleperson/getRule',{params:p}),
-	 save:p => http.post('attence/record/save',p),
-	 getLocation:p => http.get('attence/location/getLocation',{params:p}),
-	 getNecessaryData:p => http.post('attence/rule/getNecessaryData',p),
-	 getMarkDays:p => http.get('attence/record/getMarkDays',{params:p}),
-	 getRecordsByDate:p => http.get('attence/record/getRecordsByDate',{params:p}),
-	 getRuleByDate:p => http.get('attence/rule/getRuleByDate',{params:p}),
- }
- 
-export const api={
-	//上传文件
-	uploadFile,
-	//短信
-	SMSApi,
-	//字典
-	dict,
-	//微信基本参数
-	wxData,
-	//微信api
-	wxApi,
-	//登录
-	login,
-	//修改密码
-	updatePassword,
-	//获取管理员的openid集合
-	getManagerOpenList,
-	//获取token
-	getToken,
-	//园区
-	agency,
-	//区域
-	residential,
-	//楼栋
-	building,
-	//企业
-	enterprise,
-	//企业员工
-	enterprisestaff,
-	//CMS
-	CMS,
-	//banner 轮播图
-	banner,
-	//消防设备
-	fireDevice,
-	//用户反馈
-	feedback,
-	//园区公告
-	notice,
-	//测温记录
-	temperatureRecord,
-	//健康码
-	healthCode,
-	//车辆出入
-	car,
-	//开门设备
-	device,
-	//统计
-	statistical,
-	//出入记录
-	accessrecord,
-	//访客授权
-	guest,
-	//企业项目
-	enterpriseproject,
-	//视频监控
-	live,
-	//智慧党建
-	party,
-	//打卡
-	punch
+const car = {
+    //出入记录
+    condition: p => http.get('carenterrecord/carenterrecord/queryRecord', {params: p}),
+    //入场记录
+    enterPage: p => http.get('/carenterrecord/carenterrecord/list', {params: p}),
+    //出场记录
+    outPage: p => http.get('/caroutrecord/caroutrecord/list', {params: p}),
+
+    //车辆列表
+    carList: p => http.get('/community/car/app/list', {params: p}),
+    //添加车辆
+    carAdd: p => http.post('/community/car/submit', p),
+    //删除车辆
+    carRemove: p => http.post('/community/car/remove?ids=' + p),
+    //车辆审核
+    carAudit: p => http.post('/community/car/audit', p),
+}
+
+//开门设备
+const device = {
+    page: p => http.get('facedevice/facedevice/list', {params: p}),
+    open: p => http.post('facedevice/facedevice/remoteOpenDoor', p)
+}
+
+//园区统计
+const statistical = {
+    //园区信息统计
+    agencyStatistical: p => http.get('/statistics/agency', {params: p}),
+    //当日动态数据
+    todayData: p => http.get('/statistics/screen/park/todayData', {params: p}),
+    //人员进出记录
+    carTendency: p => http.get('statistics/screen/park/carTendency', {params: p}),
+    //三十天内用电量
+    electricMeterStatic: p => http.get('statistics/electricMeterStatic', {params: p}),
+    //消防设备数据统计
+    getGateStatic: p => http.get('smartapplication/smartdevice/getFireStatic', {params: p}),
+    //消防场景告警事件统计
+    getDeviceJobStaticByApp: p => http.get('jobs/devicejob/getDeviceJobStaticByApp', {params: p}),
+
+}
+
+//出入记录
+const accessrecord = {
+    page: p => http.get('/community/accessrecord/list', {params: p}),
+}
+
+//访客授权
+const guest = {
+    submit: p => http.post('estate/guest/application', p),
+    page: p => http.get('estate/guest/list', {params: p}),
+    getByGuestOpenId: p => http.get('/estate/guest/getByGuestOpenId', {params: p}),
+    check: p => http.post('estate/guest/check', p),
+    remove: p => http.post('estate/guest/remove?ids=' + p),
+}
+
+//企业项目
+const enterpriseproject = {
+    submit: p => http.post('enterprise/enterpriseproject/submit', p),
+    page: p => http.get('enterprise/enterpriseproject/list', {params: p}),
+    remove: p => http.post('enterprise/enterpriseproject/remove?ids=' + p),
+}
+
+//视频监控
+const live = {
+    page: p => http.get('yc_video_cloud_device/videoclouddevice/getByResidentialAndDeviceName', {params: p}),
+}
+
+//智慧党建
+const party = {
+    //党支部列表
+    page: p => http.get('party/branch/app/getListForAgency', {params: p}),
+    //党支部详情
+    branchDetail: p => http.get('party/branch/detail', {params: p}),
+    //查看员工属于哪个党支部 enterpriseStaffId
+    branch: p => http.get('party/branch/app/list/', {params: p}),
+    isPartyMember: p => http.get('party/member/isPartyMember', {params: p}),
+    //党员认证
+    apply: p => http.post('party/member/apply', p),
+    //三会一课
+    meetinglist: p => http.get('party/meetinglist/list', {params: p}),
+    //三会一课详情
+    meetingDetail: p => http.get('party/meetinglist/detail', {params: p}),
+    //评论
+    comment: p => http.post('party/comment/save', p),
+    //评论列表
+    commentList: p => http.get('party/comment/list', {params: p}),
+    //党内资讯
+    partyInfoList: p => http.get('party/newslist/list', {params: p}),
+    //资讯详情
+    partyInfoDetail: p => http.get('party/newslist/detail', {params: p}),
+    //党内活动
+    activityList: p => http.get('party/activity/list', {params: p}),
+    //党资讯详情
+    activityDetail: p => http.get('party/activity/detail', {params: p}),
+    //活动报名
+    activityenroll: p => http.post('party/activityenroll/save', p),
+    //查看是否已报名
+    checkIsEnroll: p => http.get('party/activityenroll/list', {params: p}),
+    //取消报名
+    cancelEnroll: p => http.post('party/activityenroll/cancel', p),
+}
+
+
+const punch = {
+    getRule: p => http.get('attence/ruleperson/getRule', {params: p}),
+    save: p => http.post('attence/record/save', p),
+    getLocation: p => http.get('attence/location/getLocation', {params: p}),
+    getNecessaryData: p => http.post('attence/rule/getNecessaryData', p),
+    getMarkDays: p => http.get('attence/record/getMarkDays', {params: p}),
+    getRecordsByDate: p => http.get('attence/record/getRecordsByDate', {params: p}),
+    getRuleByDate: p => http.get('attence/rule/getRuleByDate', {params: p}),
+}
+
+export const api = {
+    //上传文件
+    uploadFile,
+    //短信
+    SMSApi,
+    //字典
+    dict,
+    //微信基本参数
+    wxData,
+    //微信api
+    wxApi,
+    //登录
+    login,
+    //修改密码
+    updatePassword,
+    //获取管理员的openid集合
+    getManagerOpenList,
+    //获取token
+    getToken,
+    //园区
+    agency,
+    //区域
+    residential,
+    //楼栋
+    building,
+    //企业
+    enterprise,
+    //企业员工
+    enterprisestaff,
+    //CMS
+    CMS,
+    //banner 轮播图
+    banner,
+    //消防设备
+    fireDevice,
+    //用户反馈
+    feedback,
+    //园区公告
+    notice,
+    //测温记录
+    temperatureRecord,
+    //健康码
+    healthCode,
+    //车辆出入
+    car,
+    //开门设备
+    device,
+    //统计
+    statistical,
+    //出入记录
+    accessrecord,
+    //访客授权
+    guest,
+    //企业项目
+    enterpriseproject,
+    //视频监控
+    live,
+    //智慧党建
+    party,
+    //打卡
+    punch
 }

mini-program/garden-wxapp/assets/http/service.js

@@ -6,106 +6,106 @@ import util from '../../utils/util.js'
 // let	baseURL = 'http://192.168.1.69:9527/'
 // let	baseURL = 'http://localhost:9527/'
 
-let	baseURL = 'https://park.nxzhsq.cn/api/'
+let baseURL = 'https://park.nxzhsq.cn/api/'
 
 // let	baseURL = 'https://park.58fo.com/api/'
 
-const getTokenUrl=()=>{
-	let tokenObj=uni.getStorageSync("tokenObj")
-	return baseURL+`blade-auth/oauth/token?tenantId=${tokenObj.tenantId}&password=${tokenObj.password}&username=${tokenObj.username}`
+const getTokenUrl = () => {
+    let tokenObj = uni.getStorageSync("tokenObj")
+    return baseURL + `blade-auth/oauth/token?tenantId=${tokenObj.tenantId}&password=${tokenObj.password}&username=${tokenObj.username}`
 }
 //获取token
 const getTokenStorage = () => {
-  let token = ''
-  try {
-    token = uni.getStorageSync('token')
-  } catch (e) {
-  }
-  return token
+    let token = ''
+    try {
+        token = uni.getStorageSync('token')
+    } catch (e) {
+    }
+    return token
 }
 
 //不需要加上Blade-Auth的url
-const WHiTE_LIST=['agency/agency/getAgencyTenantList'] 
+const WHiTE_LIST = ['agency/agency/getAgencyTenantList']
 
 const http = new Request()
 http.setConfig((config) => { /* 设置全局配置 */
-  config.baseURL = baseURL  /* 根域名不同 */
-  config.header = {
-    ...config.header,
-  }
-  return config
+    config.baseURL = baseURL  /* 根域名不同 */
+    config.header = {
+        ...config.header,
+    }
+    return config
 })
 
 http.interceptors.request.use((config) => { /* 请求之前拦截器。可以使用async await 做异步操作 */
-  if (!WHiTE_LIST.includes(config.url)) {
-  	config.header = {
-  	  ...config.header,
-  	  "Blade-Auth": getTokenStorage()
-  	}
-  }
-  return config
+    if (!WHiTE_LIST.includes(config.url)) {
+        config.header = {
+            ...config.header,
+            "Blade-Auth": getTokenStorage()
+        }
+    }
+    return config
 }, (config) => {
-  return Promise.reject(config)
+    return Promise.reject(config)
 })
 // 是否正在刷新的标记
 let isRefreshing = false
 // 重试队列，每一项将是一个待执行的函数形式
 let requests = []
 http.interceptors.response.use(async (response) => { /* 请求之后拦截器。可以使用async await 做异步操作  */
-	//toekn过期处理 
-      if (response.data.code == 401) {
-          let {config} = response
-          if (!isRefreshing) {
-              isRefreshing = true
-              let token = uni.getStorageSync('token')
-			  let url=getTokenUrl()
-			  if (url.indexOf('tenantId=undefined')>0) {
-					uni.showModal({
-						content:"会话过期，请重新登录",
-							title:"提示",
-							showCancel:false,
-							success(resp) {
-								uni.clearStorageSync()
-								uni.reLaunch({
-									url:"/pages/login/login"
-								})
-							}
-					})
-					return
-			  }
-              let [,res] = await uni.request({
-                  url,
-                  method: 'POST',
-                  header:{
-                  	Authorization:"Basic c2FiZXI6c2FiZXJfc2VjcmV0"
-                  },
-              })
-              //否则保存新的token
-              token=res.data.token_type+" "+res.data.access_token
-              uni.setStorageSync('token', token)
-              requests.forEach(cb => cb())
-              // 重试完了清空这个队列
-              requests = []
-              isRefreshing = false
-              return http.request(config)
-          } else {
-              return new Promise((resolve) => {
-                  // 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
-                  requests.push(() => {
-                      resolve(http.request(config))
-                  })
-              })
-          }
-      }
-	  //200 返回数据成功 0 上传文件成功 400 没有相关数据 || response.data.buildingCount 数据统计的~晕~~~~
-      if (response.data.code == 200 || response.data.buildingCount!=undefined || response.data.code ==400 || response.data.code ==0 || response.data.access_token!=undefined) {
-		  return response.data
-      }else{
-		  return Promise.reject(response)
-	  }
-  }, (err) => { // 请求错误做点什么
-      return Promise.reject(err)
-  })
+    //toekn过期处理 
+    if (response.data.code == 401) {
+        let {config} = response
+        if (!isRefreshing) {
+            isRefreshing = true
+            let token = uni.getStorageSync('token')
+            let url = getTokenUrl()
+            if (url.indexOf('tenantId=undefined') > 0) {
+                uni.showModal({
+                    content: "会话过期，请重新登录",
+                    title: "提示",
+                    showCancel: false,
+                    success(resp) {
+                        uni.clearStorageSync()
+                        uni.reLaunch({
+                            url: "/pages/login/login"
+                        })
+                    }
+                })
+                return
+            }
+            let [, res] = await uni.request({
+                url,
+                method: 'POST',
+                header: {
+                    Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0"
+                },
+            })
+            //否则保存新的token
+            token = res.data.token_type + " " + res.data.access_token
+            uni.setStorageSync('token', token)
+            requests.forEach(cb => cb())
+            // 重试完了清空这个队列
+            requests = []
+            isRefreshing = false
+            return http.request(config)
+        } else {
+            return new Promise((resolve) => {
+                // 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
+                requests.push(() => {
+                    resolve(http.request(config))
+                })
+            })
+        }
+    }
+    //200 返回数据成功 0 上传文件成功 400 没有相关数据 || response.data.buildingCount 数据统计的~晕~~~~
+    if (response.data.code == 200 || response.data.buildingCount != undefined || response.data.code == 400 || response.data.code == 0 || response.data.access_token != undefined) {
+        return response.data
+    } else {
+        return Promise.reject(response)
+    }
+}, (err) => { // 请求错误做点什么
+    return Promise.reject(err)
+})
 export {
-  http
+    http
 }

mini-program/garden-wxapp/assets/js/party-tarbar.js

@@ -1,31 +1,31 @@
-export  const tabbar = {
-		inactiveColor:"#8a8a8a",
-		activeColor:"#DE2910",
-		bgColor:"#ffffff",
-		midButton:true,
-		iconSize:44,
-		MinButtonSize:70,
-		borderTop:true,
-		list:[{
-				iconPath: "/party/static/tarbar/home0.png",
-				selectedIconPath: "/party/static/tarbar/home.png",
-				text: '组织',
-				isDot: true,
-				pagePath: "/party/pages/home/home"
-			},
-			{
-				iconPath: "/party/static/tarbar/activity0.png",
-				selectedIconPath: "/party/static/tarbar/activity.png",
-				text: '活动',
-				midButton: true,
-				pagePath: "party/pages/activity/activity"
-			},
-			{
-				iconPath: "/party/static/tarbar/mine0.png",
-				selectedIconPath: "/party/static/tarbar/mine.png",
-				text: '我的',
-				pagePath: "/party/pages/mine/mine"
-			},
-		]
+export const tabbar = {
+    inactiveColor: "#8a8a8a",
+    activeColor: "#DE2910",
+    bgColor: "#ffffff",
+    midButton: true,
+    iconSize: 44,
+    MinButtonSize: 70,
+    borderTop: true,
+    list: [{
+        iconPath: "/party/static/tarbar/home0.png",
+        selectedIconPath: "/party/static/tarbar/home.png",
+        text: '组织',
+        isDot: true,
+        pagePath: "/party/pages/home/home"
+    },
+        {
+            iconPath: "/party/static/tarbar/activity0.png",
+            selectedIconPath: "/party/static/tarbar/activity.png",
+            text: '活动',
+            midButton: true,
+            pagePath: "party/pages/activity/activity"
+        },
+        {
+            iconPath: "/party/static/tarbar/mine0.png",
+            selectedIconPath: "/party/static/tarbar/mine.png",
+            text: '我的',
+            pagePath: "/party/pages/mine/mine"
+        },
+    ]
 }
 

mini-program/garden-wxapp/assets/js/tabbar.js

@@ -1,30 +1,30 @@
-export  const tabbar = {
-		inactiveColor:"#8a8a8a",
-		activeColor:"#5064eb",
-		bgColor:"#ffffff",
-		midButton:true,
-		iconSize:44,
-		MinButtonSize:70,
-		borderTop:true,
-		list:[{
-				iconPath: "/static/tarbar/index0.png",
-				selectedIconPath: "/static/tarbar/index.png",
-				text: '园区',
-				pagePath: "/pages/index/index"
-			},
-			{
-				iconPath: "/static/tarbar/menjin0.png",
-				selectedIconPath: "/static/tarbar/menjin.png",
-				text: '门禁',
-				midButton: true,
-				pagePath: "/pages/device/device"
-			},
-			{
-				iconPath: "/static/tarbar/my0.png",
-				selectedIconPath: "/static/tarbar/my.png",
-				text: '我的',
-				pagePath: "/pages/mine/mine"
-			},
-		]
+export const tabbar = {
+    inactiveColor: "#8a8a8a",
+    activeColor: "#5064eb",
+    bgColor: "#ffffff",
+    midButton: true,
+    iconSize: 44,
+    MinButtonSize: 70,
+    borderTop: true,
+    list: [{
+        iconPath: "/static/tarbar/index0.png",
+        selectedIconPath: "/static/tarbar/index.png",
+        text: '园区',
+        pagePath: "/pages/index/index"
+    },
+        {
+            iconPath: "/static/tarbar/menjin0.png",
+            selectedIconPath: "/static/tarbar/menjin.png",
+            text: '门禁',
+            midButton: true,
+            pagePath: "/pages/device/device"
+        },
+        {
+            iconPath: "/static/tarbar/my0.png",
+            selectedIconPath: "/static/tarbar/my.png",
+            text: '我的',
+            pagePath: "/pages/mine/mine"
+        },
+    ]
 }
 

mini-program/garden-wxapp/assets/js/u-charts/package.json

@@ -1,13 +1,13 @@
 {
-    "id": "u-charts",
-    "name": "uCharts高性能跨全端图表",
-    "version": "1.9.6.20210214",
-    "description": "支持H5、PC、APP、小程序（微信/支付宝/百度/头条/QQ/360）Vue、Taro",
-    "keywords": [
-        "echarts",
-        "canvas2d",
-        "F2",
-        "图表",
-        "跨全端"
-    ]
+  "id": "u-charts",
+  "name": "uCharts高性能跨全端图表",
+  "version": "1.9.6.20210214",
+  "description": "支持H5、PC、APP、小程序（微信/支付宝/百度/头条/QQ/360）Vue、Taro",
+  "keywords": [
+    "echarts",
+    "canvas2d",
+    "F2",
+    "图表",
+    "跨全端"
+  ]
 }

mini-program/garden-wxapp/assets/js/u-charts/u-charts/config.js

@@ -14,458 +14,464 @@
  * 
  */
 module.exports = {
-	"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","area","radar","gauge","candle","mix","point","bubble"],
-	"categories":["line","column","area","radar","gauge","candle","mix","point","bubble"],
-	//以上数据请勿改动，下面是自定义默认配置，请添加项目所需的个性配置
-	"pie":{
-		type: 'pie',
-		padding:[15,15,0,15],
-		legend:{
-			show:true,
-			padding:5,
-			lineHeight:11,
-			margin:0,
-		},
-		dataLabel: true,
-		extra: {
-			pie: {
-		    border:true,
-		    borderColor:'#FFFFFF',
-		    borderWidth:3
-			}
-		}
-	},
-	"ring":{
-		type: 'ring',
-		padding:[5,5,5,5],
-		legend:{
-			show:true,
-			position:'right',
-			float:'center',
-			itemGap:10,
-			padding:5,
-			lineHeight:26,
-			margin:5,
-			borderWidth :1
-		},
-		disablePieStroke: true,
-		dataLabel: true,
-		subtitle: {
-			name: '70%',
-			color: '#7cb5ec',
-			fontSize: 25,
-		},
-		title: {
-			name: '收益率',
-			color: '#666666',
-			fontSize: 15,
-		},
-		extra: {
-			pie: {
-			  offsetAngle: 0,
-			  ringWidth: 40,
-			  labelWidth:15
-			}
-		}
-	},
-	"rose":{
-		type: 'rose',
-		padding:[15,15,0,15],
-		legend:{
-			show:true,
-			position:'left',
-			float:'center',
-			itemGap:10,
-			padding:5,
-			lineHeight:26,
-			margin:5,
-			borderWidth :1
-		},
-		dataLabel: true,
-		extra: {
-			rose: {
-				type:'area',
-				minRadius:50,
-				activeOpacity:0.5,
-				offsetAngle:0,
-				labelWidth:15
-			}
-		}
-	},
-	"word":{
-		type: 'word',
-		extra: {
-			word: {
-				type: 'normal'
-			}
-		}
-	},
-	"funnel":{
-		type: 'funnel',
-		padding:[15,15,0,15],
-		legend:{
-			show:true,
-			padding:5,
-			lineHeight:11,
-			margin:0,
-		},
-		dataLabel: true,
-		extra: {
-			funnel: {
-		    border:true,
-		    borderWidth:2,
-		    borderColor:'#FFFFFF'
-			}
-		}
-	},
-	"map":{
-		type: 'map',
-		padding:[0,0,0,0],
-		legend:{
-			show:false
-		},
-		dataLabel:true,
-		extra: {
-			map: {
-		    border:true,
-		    borderWidth:1,
-		    borderColor:'#666666',
-		    fillOpacity:0.6
-			}
-		}
-	},
-	"arcbar":{
-		type: 'arcbar',
-		legend:{show:false},
-		dataLabel: true,
-		title: {
-			name: "百分比",
-			color: '#00FF00',
-			fontSize: 25
-		},
-		subtitle: {
-			name: "默认标题",
-			color: '#666666',
-			fontSize: 15
-		},
-		extra: {
-			arcbar:{
-				type:'default',
-				width: 12,
-			}
-		}
-	},
-	"line":{
-		type: 'line',
-		padding:[15,30,0,15],
-		legend:{
-			show:true,
-			padding:5,
-			lineHeight:11,
-			margin:0,
-		},
-		dataLabel: true,
-		dataPointShape:true,
-		xAxis: {
-			disableGrid: true,
-		},
-		yAxis: {
-			gridType: 'dash',
-			gridColor: '#CCCCCC',
-			dashLength: 8,
-			splitNumber: 4,
-			format: val => {
-				return val.toFixed(0);
-			}
-		},
-		extra: {
-			line:{
-				type: 'straight'
-			}
-		}
-	},
-	"column":{
-		type: 'column',
-		padding:[15,5,0,15],
-		legend:{
-			show:true,
-			padding:5,
-			lineHeight:11,
-			margin:0,
-		},
-		animation: true,
-		dataLabel: true,
-		xAxis: {
-			disableGrid:true,
-		},
-		yAxis: {
-		  data:[{
-		    position:'right',
-				axisLine:false,
-		    format:(val)=>{return val.toFixed(0)},
-		  }]
-		},
-		extra: {
-			column: {
-				type:'group',
-				width:30
-			}
-		}
-	},
-	"area":{
-		type: 'area',
-		padding:[15,15,0,15],
-		legend:{
-			show:true,
-		},
-		dataLabel:true,
-		dataPointShape:true,
-		xAxis: {
-			disableGrid:true,
-		},
-		yAxis: {
-			gridType:'dash',
-			gridColor:'#CCCCCC',
-			dashLength:8,
-			splitNumber:5,
-		},
-		extra: {
-			area:{
-				type: 'straight',
-				opacity:0.2,
-				addLine:true,
-				width:2,
-				gradient:false
-			}
-		}
-	},
-	"radar":{
-		type: 'radar',
-		padding:[15,15,0,15],
-		legend:{
-			show:true,
-			padding:5,
-			lineHeight:11,
-			margin:0,
-		},
-		animation: true,
-		dataLabel: true,
-		extra: {
-			radar: {
-				max: 200,
-				gridType:'radar'//radar或者circle可选，网格样式，默认radar
-			}
-		}
-	},
-	"gauge":{
-		type: 'gauge',
-		legend:{show:false},
-		animation: true,
-		dataLabel: true,
-		title: {
-			name: "字符串类型",
-			color: '#00FF00',
-			fontSize: 25,
-			offsetY:50,
-		},
-		subtitle: {
-			name: "字符串类型",
-			color: '#666666',
-			fontSize: 15,
-			offsetY:-50,
-		},
-		extra: {
-			gauge:{
-				type:'default',
-				width: 30,
-				startAngle:0.75,
-				endAngle:0.25,
-				startNumber:0,
-				endNumber:100,
-				splitLine:{
-					fixRadius:0,
-					splitNumber:10,
-					width: 30,
-					color:'#FFFFFF',
-					childNumber:5,
-					childWidth:30*0.4,
-				},
-				pointer:{
-					width: 30*0.8,
-					color:'auto'
-				}
-			}
-		}
-	},
-	"candle":{
-		type: 'candle',
-		padding:[15,15,0,15],
-		legend:{
-			show:true,
-			padding:5,
-			lineHeight:11,
-			margin:8,
-		},
-		enableMarkLine: true,
-		enableScroll: true,
-		dataLabel: false,
-		dataPointShape: true,
-		xAxis: {
-			disableGrid:true,
-			labelCount:4,
-			itemCount:5,
-			scrollShow:true,
-			scrollAlign:'right',
-		},
-		yAxis: {
-			gridType:'dash',
-			splitNumber:5,
-			format:(val)=>{return val.toFixed(0)}
-		},
-		extra: {
-			candle:{
-				color:{
-					upLine:'#f04864',
-					upFill:'#f04864',
-					downLine:'#2fc25b',
-					downFill:'#2fc25b'
-				},
-				average:{
-					show:true,
-					name:['MA5','MA10','MA30'],
-					day:[5,10,20],
-					color:['#1890ff', '#2fc25b', '#facc14']
-				}
-			},
-			tooltip:{
-				bgColor:'#000000',
-				bgOpacity:0.7,
-				gridType:'dash',
-				dashLength:5,
-				gridColor:'#1890ff',
-				fontColor:'#FFFFFF',
-				horizentalLine:true,
-				xAxisLabel:true,
-				yAxisLabel:true,
-				labelBgColor:'#DFE8FF',
-				labelBgOpacity:0.95,
-				labelAlign:'left',
-				labelFontColor:'#666666'
-			},
-		  markLine: {
-		    type: 'dash',
-		    dashLength: 5,
-		    data: [{
-		      value:2150,
-		      lineColor: '#f04864',
-		      showLabel:true
-		    },{
-		      value:2350,
-		      lineColor: '#f04864',
-		      showLabel:true
-		    }]
-		  }
-		}
-	},
-	"mix":{
-		type: 'mix',
-		padding:[15,15,0,15],
-		legend:{
-			show:true,
-		  position:'bottom',
-		  float:'center',
-			padding:5,
-			lineHeight:11,
-			margin:6,
-		},
-		dataLabel: true,
-		dataPointShape: true,
-		xAxis: {
-			disableGrid:true,
-		},
-		yAxis: {
-		  data:[{
-		    calibration:true,
-		    position:'left',
-		    title:'折线',
-		    titleFontSize:12,
-		    format:(val)=>{return val.toFixed(0)+'度'}
-		  },{
-		    calibration:true,
-		    position:'right',
-		    min:0,
-		    max:200,
-		    title:'柱状图',
-		    titleFontSize:12,
-		    format:(val)=>{return val.toFixed(0)+'元'}
-		  },{
-		    calibration:true,
-		    position:'right',
-		    min:0,
-		    max:200,
-		    title:'点',
-		    titleFontSize:12
-		  }],
-		  showTitle:true,
-			gridType:'dash',
-			dashLength:4,
-			splitNumber:5
-		},
-		extra: {
-		  column:{
-		    width:20
-		  }
-		}
-	},
-	"point":{
-		type: 'point',
-		padding:[15,30,0,15],
-		legend:{
-			show:true
-		},
-		dataLabel: false,
-		dataPointShape:true,
-		xAxis: {
-			disableGrid: true,
-			labelCount: 4
-		},
-		yAxis: {
-			gridType: 'dash',
-			gridColor: '#CCCCCC',
-			dashLength: 8,
-			splitNumber: 4,
-			format: val => {
-				return val.toFixed(1);
-			}
-		},
-		extra: {
-			point:{
-			}
-		}
-	},
-	"bubble":{
-		type: 'bubble',
-		padding:[15,30,0,15],
-		legend:{
-			show:true
-		},
-		dataLabel: true,
-		xAxis: {
-			disableGrid: true,
-			labelCount: 4
-		},
-		yAxis: {
-			gridType: 'dash',
-			gridColor: '#CCCCCC',
-			dashLength: 8,
-			splitNumber: 4,
-			format: val => {
-				return val.toFixed(1);
-			}
-		},
-		extra: {
-			bubble:{
-			}
-		}
-	}
+    "type": ["pie", "ring", "rose", "word", "funnel", "map", "arcbar", "line", "column", "area", "radar", "gauge", "candle", "mix", "point", "bubble"],
+    "categories": ["line", "column", "area", "radar", "gauge", "candle", "mix", "point", "bubble"],
+    //以上数据请勿改动，下面是自定义默认配置，请添加项目所需的个性配置
+    "pie": {
+        type: 'pie',
+        padding: [15, 15, 0, 15],
+        legend: {
+            show: true,
+            padding: 5,
+            lineHeight: 11,
+            margin: 0,
+        },
+        dataLabel: true,
+        extra: {
+            pie: {
+                border: true,
+                borderColor: '#FFFFFF',
+                borderWidth: 3
+            }
+        }
+    },
+    "ring": {
+        type: 'ring',
+        padding: [5, 5, 5, 5],
+        legend: {
+            show: true,
+            position: 'right',
+            float: 'center',
+            itemGap: 10,
+            padding: 5,
+            lineHeight: 26,
+            margin: 5,
+            borderWidth: 1
+        },
+        disablePieStroke: true,
+        dataLabel: true,
+        subtitle: {
+            name: '70%',
+            color: '#7cb5ec',
+            fontSize: 25,
+        },
+        title: {
+            name: '收益率',
+            color: '#666666',
+            fontSize: 15,
+        },
+        extra: {
+            pie: {
+                offsetAngle: 0,
+                ringWidth: 40,
+                labelWidth: 15
+            }
+        }
+    },
+    "rose": {
+        type: 'rose',
+        padding: [15, 15, 0, 15],
+        legend: {
+            show: true,
+            position: 'left',
+            float: 'center',
+            itemGap: 10,
+            padding: 5,
+            lineHeight: 26,
+            margin: 5,
+            borderWidth: 1
+        },
+        dataLabel: true,
+        extra: {
+            rose: {
+                type: 'area',
+                minRadius: 50,
+                activeOpacity: 0.5,
+                offsetAngle: 0,
+                labelWidth: 15
+            }
+        }
+    },
+    "word": {
+        type: 'word',
+        extra: {
+            word: {
+                type: 'normal'
+            }
+        }
+    },
+    "funnel": {
+        type: 'funnel',
+        padding: [15, 15, 0, 15],
+        legend: {
+            show: true,
+            padding: 5,
+            lineHeight: 11,
+            margin: 0,
+        },
+        dataLabel: true,
+        extra: {
+            funnel: {
+                border: true,
+                borderWidth: 2,
+                borderColor: '#FFFFFF'
+            }
+        }
+    },
+    "map": {
+        type: 'map',
+        padding: [0, 0, 0, 0],
+        legend: {
+            show: false
+        },
+        dataLabel: true,
+        extra: {
+            map: {
+                border: true,
+                borderWidth: 1,
+                borderColor: '#666666',
+                fillOpacity: 0.6
+            }
+        }
+    },
+    "arcbar": {
+        type: 'arcbar',
+        legend: {show: false},
+        dataLabel: true,
+        title: {
+            name: "百分比",
+            color: '#00FF00',
+            fontSize: 25
+        },
+        subtitle: {
+            name: "默认标题",
+            color: '#666666',
+            fontSize: 15
+        },
+        extra: {
+            arcbar: {
+                type: 'default',
+                width: 12,
+            }
+        }
+    },
+    "line": {
+        type: 'line',
+        padding: [15, 30, 0, 15],
+        legend: {
+            show: true,
+            padding: 5,
+            lineHeight: 11,
+            margin: 0,
+        },
+        dataLabel: true,
+        dataPointShape: true,
+        xAxis: {
+            disableGrid: true,
+        },
+        yAxis: {
+            gridType: 'dash',
+            gridColor: '#CCCCCC',
+            dashLength: 8,
+            splitNumber: 4,
+            format: val => {
+                return val.toFixed(0);
+            }
+        },
+        extra: {
+            line: {
+                type: 'straight'
+            }
+        }
+    },
+    "column": {
+        type: 'column',
+        padding: [15, 5, 0, 15],
+        legend: {
+            show: true,
+            padding: 5,
+            lineHeight: 11,
+            margin: 0,
+        },
+        animation: true,
+        dataLabel: true,
+        xAxis: {
+            disableGrid: true,
+        },
+        yAxis: {
+            data: [{
+                position: 'right',
+                axisLine: false,
+                format: (val) => {
+                    return val.toFixed(0)
+                },
+            }]
+        },
+        extra: {
+            column: {
+                type: 'group',
+                width: 30
+            }
+        }
+    },
+    "area": {
+        type: 'area',
+        padding: [15, 15, 0, 15],
+        legend: {
+            show: true,
+        },
+        dataLabel: true,
+        dataPointShape: true,
+        xAxis: {
+            disableGrid: true,
+        },
+        yAxis: {
+            gridType: 'dash',
+            gridColor: '#CCCCCC',
+            dashLength: 8,
+            splitNumber: 5,
+        },
+        extra: {
+            area: {
+                type: 'straight',
+                opacity: 0.2,
+                addLine: true,
+                width: 2,
+                gradient: false
+            }
+        }
+    },
+    "radar": {
+        type: 'radar',
+        padding: [15, 15, 0, 15],
+        legend: {
+            show: true,
+            padding: 5,
+            lineHeight: 11,
+            margin: 0,
+        },
+        animation: true,
+        dataLabel: true,
+        extra: {
+            radar: {
+                max: 200,
+                gridType: 'radar'//radar或者circle可选，网格样式，默认radar
+            }
+        }
+    },
+    "gauge": {
+        type: 'gauge',
+        legend: {show: false},
+        animation: true,
+        dataLabel: true,
+        title: {
+            name: "字符串类型",
+            color: '#00FF00',
+            fontSize: 25,
+            offsetY: 50,
+        },
+        subtitle: {
+            name: "字符串类型",
+            color: '#666666',
+            fontSize: 15,
+            offsetY: -50,
+        },
+        extra: {
+            gauge: {
+                type: 'default',
+                width: 30,
+                startAngle: 0.75,
+                endAngle: 0.25,
+                startNumber: 0,
+                endNumber: 100,
+                splitLine: {
+                    fixRadius: 0,
+                    splitNumber: 10,
+                    width: 30,
+                    color: '#FFFFFF',
+                    childNumber: 5,
+                    childWidth: 30 * 0.4,
+                },
+                pointer: {
+                    width: 30 * 0.8,
+                    color: 'auto'
+                }
+            }
+        }
+    },
+    "candle": {
+        type: 'candle',
+        padding: [15, 15, 0, 15],
+        legend: {
+            show: true,
+            padding: 5,
+            lineHeight: 11,
+            margin: 8,
+        },
+        enableMarkLine: true,
+        enableScroll: true,
+        dataLabel: false,
+        dataPointShape: true,
+        xAxis: {
+            disableGrid: true,
+            labelCount: 4,
+            itemCount: 5,
+            scrollShow: true,
+            scrollAlign: 'right',
+        },
+        yAxis: {
+            gridType: 'dash',
+            splitNumber: 5,
+            format: (val) => {
+                return val.toFixed(0)
+            }
+        },
+        extra: {
+            candle: {
+                color: {
+                    upLine: '#f04864',
+                    upFill: '#f04864',
+                    downLine: '#2fc25b',
+                    downFill: '#2fc25b'
+                },
+                average: {
+                    show: true,
+                    name: ['MA5', 'MA10', 'MA30'],
+                    day: [5, 10, 20],
+                    color: ['#1890ff', '#2fc25b', '#facc14']
+                }
+            },
+            tooltip: {
+                bgColor: '#000000',
+                bgOpacity: 0.7,
+                gridType: 'dash',
+                dashLength: 5,
+                gridColor: '#1890ff',
+                fontColor: '#FFFFFF',
+                horizentalLine: true,
+                xAxisLabel: true,
+                yAxisLabel: true,
+                labelBgColor: '#DFE8FF',
+                labelBgOpacity: 0.95,
+                labelAlign: 'left',
+                labelFontColor: '#666666'
+            },
+            markLine: {
+                type: 'dash',
+                dashLength: 5,
+                data: [{
+                    value: 2150,
+                    lineColor: '#f04864',
+                    showLabel: true
+                }, {
+                    value: 2350,
+                    lineColor: '#f04864',
+                    showLabel: true
+                }]
+            }
+        }
+    },
+    "mix": {
+        type: 'mix',
+        padding: [15, 15, 0, 15],
+        legend: {
+            show: true,
+            position: 'bottom',
+            float: 'center',
+            padding: 5,
+            lineHeight: 11,
+            margin: 6,
+        },
+        dataLabel: true,
+        dataPointShape: true,
+        xAxis: {
+            disableGrid: true,
+        },
+        yAxis: {
+            data: [{
+                calibration: true,
+                position: 'left',
+                title: '折线',
+                titleFontSize: 12,
+                format: (val) => {
+                    return val.toFixed(0) + '度'
+                }
+            }, {
+                calibration: true,
+                position: 'right',
+                min: 0,
+                max: 200,
+                title: '柱状图',
+                titleFontSize: 12,
+                format: (val) => {
+                    return val.toFixed(0) + '元'
+                }
+            }, {
+                calibration: true,
+                position: 'right',
+                min: 0,
+                max: 200,
+                title: '点',
+                titleFontSize: 12
+            }],
+            showTitle: true,
+            gridType: 'dash',
+            dashLength: 4,
+            splitNumber: 5
+        },
+        extra: {
+            column: {
+                width: 20
+            }
+        }
+    },
+    "point": {
+        type: 'point',
+        padding: [15, 30, 0, 15],
+        legend: {
+            show: true
+        },
+        dataLabel: false,
+        dataPointShape: true,
+        xAxis: {
+            disableGrid: true,
+            labelCount: 4
+        },
+        yAxis: {
+            gridType: 'dash',
+            gridColor: '#CCCCCC',
+            dashLength: 8,
+            splitNumber: 4,
+            format: val => {
+                return val.toFixed(1);
+            }
+        },
+        extra: {
+            point: {}
+        }
+    },
+    "bubble": {
+        type: 'bubble',
+        padding: [15, 30, 0, 15],
+        legend: {
+            show: true
+        },
+        dataLabel: true,
+        xAxis: {
+            disableGrid: true,
+            labelCount: 4
+        },
+        yAxis: {
+            gridType: 'dash',
+            gridColor: '#CCCCCC',
+            dashLength: 8,
+            splitNumber: 4,
+            format: val => {
+                return val.toFixed(1);
+            }
+        },
+        extra: {
+            bubble: {}
+        }
+    }
 }

mini-program/garden-wxapp/assets/js/u-charts/u-charts/demodata.json

@@ -1,267 +1,1114 @@
 {
-	"Column": {
-		"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
-		"series": [{
-			"name": "目标值",
-			"data": [35, 36, 31, 33, 13, 34]
-		}, {
-			"name": "完成量",
-			"data": [18, 27, 21, 24, 6, 28]
-		}]
-	},
-	"ColumnA": {
-		"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
-		"series": [{
-			"name": "成交量1",
-			"data": [15, {
-				"value": 20,
-				"color": "#f04864"
-			}, 45, 37, 43, 34]
-		}, {
-			"name": "成交量2",
-			"data": [30, {
-				"value": 40,
-				"color": "#facc14"
-			}, 25, 14, 34, 18]
-		}]
-	},
-	"Mix": {
-		"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
-		"series": [{
-			"name": "曲面",
-			"data": [70, 50, 85, 130, 64, 88],
-			"type": "area",
-			"style": "curve"
-		}, {
-			"name": "柱1",
-			"data": [40, 30, 55, 110, 24, 58],
-			"type": "column"
-		}, {
-			"name": "柱2",
-			"data": [50, 20, 75, 60, 34, 38],
-			"type": "column"
-		}, {
-			"name": "曲线",
-			"data": [70, 50, 85, 130, 64, 88],
-			"type": "line",
-			"style": "curve",
-			"color": "#1890ff",
-			"disableLegend": true
-		}, {
-			"name": "折线",
-			"data": [120, 140, 105, 170, 95, 160],
-			"type": "line",
-			"color": "#2fc25b"
-		}, {
-			"name": "点",
-			"data": [100, 80, 125, 150, 112, 132],
-			"type": "point",
-			"color": "#f04864"
-		}]
-	},
-	"Line": {
-		"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
-		"series": [{
-			"name": "成交量A",
-			"data": [35, 8, 25, 37, 4, 20]
-		}, {
-			"name": "成交量B",
-			"data": [70, 40, 65, 100, 44, 68]
-		}, {
-			"name": "成交量C",
-			"data": [100, 80, 95, 150, 112, 132]
-		}]
-	},
-	"Pie": {
-		"series": [{
-			"name": "一班",
-			"data": 50
-		}, {
-			"name": "二班",
-			"data": 30
-		}, {
-			"name": "三班",
-			"data": 20
-		}, {
-			"name": "四班",
-			"data": 18
-		}, {
-			"name": "五班",
-			"data": 8
-		}]
-	},
-	"Radar": {
-		"categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
-		"series": [{
-			"name": "成交量1",
-			"data": [90, 110, 165, 195, 187, 172]
-		}, {
-			"name": "成交量2",
-			"data": [190, 210, 105, 35, 27, 102]
-		}]
-	},
-	"Arcbar": {
-		"series": [{
-			"name": "正确率",
-			"data": 0.29,
-			"color": "#2fc25b"
-		}]
-	},
-	"Gauge": {
-		"categories": [{
-			"value": 0.2,
-			"color": "#1890ff"
-		}, {
-			"value": 0.8,
-			"color": "#2fc25b"
-		}, {
-			"value": 1,
-			"color": "#f04864"
-		}],
-		"series": [{
-			"name": "完成率",
-			"data": 0.66
-		}]
-	},
-	"Candle": {
-		"categories": [
-			"2020/1/24", "2020/1/25", "2020/1/28", "2020/1/29", "2020/1/30",
-			"2020/1/31", "2020/2/1", "2020/2/4", "2020/2/5", "2020/2/6",
-			"2020/2/7", "2020/2/8", "2020/2/18", "2020/2/19", "2020/2/20",
-			"2020/2/21", "2020/2/22", "2020/2/25", "2020/2/26", "2020/2/27",
-			"2020/2/28", "2020/3/1", "2020/3/4", "2020/3/5", "2020/3/6",
-			"2020/3/7", "2020/3/8", "2020/3/11", "2020/3/12", "2020/3/13",
-			"2020/3/14", "2020/3/15", "2020/3/18", "2020/3/19", "2020/3/20",
-			"2020/3/21", "2020/3/22", "2020/3/25", "2020/3/26", "2020/3/27",
-			"2020/3/28", "2020/3/29", "2020/4/1", "2020/4/2", "2020/4/3",
-			"2020/4/8", "2020/4/9", "2020/4/10", "2020/4/11", "2020/4/12",
-			"2020/4/15", "2020/4/16", "2020/4/17", "2020/4/18", "2020/4/19",
-			"2020/4/22", "2020/4/23", "2020/4/24", "2020/4/25", "2020/4/26",
-			"2020/5/2", "2020/5/3", "2020/5/6", "2020/5/7", "2020/5/8",
-			"2020/5/9", "2020/5/10", "2020/5/13", "2020/5/14", "2020/5/15",
-			"2020/5/16", "2020/5/17", "2020/5/20", "2020/5/21", "2020/5/22",
-			"2020/5/23", "2020/5/24", "2020/5/27", "2020/5/28", "2020/5/29",
-			"2020/5/30", "2020/5/31", "2020/6/3", "2020/6/4", "2020/6/5",
-			"2020/6/6", "2020/6/7", "2020/6/13"
-		],
-		"series": [{
-			"name": "上证指数",
-			"data": [
-				[2320.26, 2302.6, 2287.3, 2362.94],
-				[2300, 2291.3, 2288.26, 2308.38],
-				[2295.35, 2346.5, 2295.35, 2346.92],
-				[2347.22, 2358.98, 2337.35, 2363.8],
-				[2360.75, 2382.48, 2347.89, 2383.76],
-				[2383.43, 2385.42, 2371.23, 2391.82],
-				[2377.41, 2419.02, 2369.57, 2421.15],
-				[2425.92, 2428.15, 2417.58, 2440.38],
-				[2411, 2433.13, 2403.3, 2437.42],
-				[2432.68, 2434.48, 2427.7, 2441.73],
-				[2430.69, 2418.53, 2394.22, 2433.89],
-				[2416.62, 2432.4, 2414.4, 2443.03],
-				[2441.91, 2421.56, 2415.43, 2444.8],
-				[2420.26, 2382.91, 2373.53, 2427.07],
-				[2383.49, 2397.18, 2370.61, 2397.94],
-				[2378.82, 2325.95, 2309.17, 2378.82],
-				[2322.94, 2314.16, 2308.76, 2330.88],
-				[2320.62, 2325.82, 2315.01, 2338.78],
-				[2313.74, 2293.34, 2289.89, 2340.71],
-				[2297.77, 2313.22, 2292.03, 2324.63],
-				[2322.32, 2365.59, 2308.92, 2366.16],
-				[2364.54, 2359.51, 2330.86, 2369.65],
-				[2332.08, 2273.4, 2259.25, 2333.54],
-				[2274.81, 2326.31, 2270.1, 2328.14],
-				[2333.61, 2347.18, 2321.6, 2351.44],
-				[2340.44, 2324.29, 2304.27, 2352.02],
-				[2326.42, 2318.61, 2314.59, 2333.67],
-				[2314.68, 2310.59, 2296.58, 2320.96],
-				[2309.16, 2286.6, 2264.83, 2333.29],
-				[2282.17, 2263.97, 2253.25, 2286.33],
-				[2255.77, 2270.28, 2253.31, 2276.22],
-				[2269.31, 2278.4, 2250, 2312.08],
-				[2267.29, 2240.02, 2239.21, 2276.05],
-				[2244.26, 2257.43, 2232.02, 2261.31],
-				[2257.74, 2317.37, 2257.42, 2317.86],
-				[2318.21, 2324.24, 2311.6, 2330.81],
-				[2321.4, 2328.28, 2314.97, 2332],
-				[2334.74, 2326.72, 2319.91, 2344.89],
-				[2318.58, 2297.67, 2281.12, 2319.99],
-				[2299.38, 2301.26, 2289, 2323.48],
-				[2273.55, 2236.3, 2232.91, 2273.55],
-				[2238.49, 2236.62, 2228.81, 2246.87],
-				[2229.46, 2234.4, 2227.31, 2243.95],
-				[2234.9, 2227.74, 2220.44, 2253.42],
-				[2232.69, 2225.29, 2217.25, 2241.34],
-				[2196.24, 2211.59, 2180.67, 2212.59],
-				[2215.47, 2225.77, 2215.47, 2234.73],
-				[2224.93, 2226.13, 2212.56, 2233.04],
-				[2236.98, 2219.55, 2217.26, 2242.48],
-				[2218.09, 2206.78, 2204.44, 2226.26],
-				[2199.91, 2181.94, 2177.39, 2204.99],
-				[2169.63, 2194.85, 2165.78, 2196.43],
-				[2195.03, 2193.8, 2178.47, 2197.51],
-				[2181.82, 2197.6, 2175.44, 2206.03],
-				[2201.12, 2244.64, 2200.58, 2250.11],
-				[2236.4, 2242.17, 2232.26, 2245.12],
-				[2242.62, 2184.54, 2182.81, 2242.62],
-				[2187.35, 2218.32, 2184.11, 2226.12],
-				[2213.19, 2199.31, 2191.85, 2224.63],
-				[2203.89, 2177.91, 2173.86, 2210.58],
-				[2170.78, 2174.12, 2161.14, 2179.65],
-				[2179.05, 2205.5, 2179.05, 2222.81],
-				[2212.5, 2231.17, 2212.5, 2236.07],
-				[2227.86, 2235.57, 2219.44, 2240.26],
-				[2242.39, 2246.3, 2235.42, 2255.21],
-				[2246.96, 2232.97, 2221.38, 2247.86],
-				[2228.82, 2246.83, 2225.81, 2247.67],
-				[2247.68, 2241.92, 2231.36, 2250.85],
-				[2238.9, 2217.01, 2205.87, 2239.93],
-				[2217.09, 2224.8, 2213.58, 2225.19],
-				[2221.34, 2251.81, 2210.77, 2252.87],
-				[2249.81, 2282.87, 2248.41, 2288.09],
-				[2286.33, 2299.99, 2281.9, 2309.39],
-				[2297.11, 2305.11, 2290.12, 2305.3],
-				[2303.75, 2302.4, 2292.43, 2314.18],
-				[2293.81, 2275.67, 2274.1, 2304.95],
-				[2281.45, 2288.53, 2270.25, 2292.59],
-				[2286.66, 2293.08, 2283.94, 2301.7],
-				[2293.4, 2321.32, 2281.47, 2322.1],
-				[2323.54, 2324.02, 2321.17, 2334.33],
-				[2316.25, 2317.75, 2310.49, 2325.72],
-				[2320.74, 2300.59, 2299.37, 2325.53],
-				[2300.21, 2299.25, 2294.11, 2313.43],
-				[2297.1, 2272.42, 2264.76, 2297.1],
-				[2270.71, 2270.93, 2260.87, 2276.86],
-				[2264.43, 2242.11, 2240.07, 2266.69],
-				[2242.26, 2210.9, 2205.07, 2250.63],
-				[2190.1, 2148.35, 2126.22, 2190.1]
-			]
-		}]
-	},
-	"CandleColumn": {
-		"categories": [
-			"2020/1/24", "2020/1/25", "2020/1/28", "2020/1/29", "2020/1/30",
-			"2020/1/31", "2020/2/1", "2020/2/4", "2020/2/5", "2020/2/6",
-			"2020/2/7", "2020/2/8", "2020/2/18", "2020/2/19", "2020/2/20",
-			"2020/2/21", "2020/2/22", "2020/2/25", "2020/2/26", "2020/2/27",
-			"2020/2/28", "2020/3/1", "2020/3/4", "2020/3/5", "2020/3/6",
-			"2020/3/7", "2020/3/8", "2020/3/11", "2020/3/12", "2020/3/13",
-			"2020/3/14", "2020/3/15", "2020/3/18", "2020/3/19", "2020/3/20",
-			"2020/3/21", "2020/3/22", "2020/3/25", "2020/3/26", "2020/3/27",
-			"2020/3/28", "2020/3/29", "2020/4/1", "2020/4/2", "2020/4/3",
-			"2020/4/8", "2020/4/9", "2020/4/10", "2020/4/11", "2020/4/12",
-			"2020/4/15", "2020/4/16", "2020/4/17", "2020/4/18", "2020/4/19",
-			"2020/4/22", "2020/4/23", "2020/4/24", "2020/4/25", "2020/4/26",
-			"2020/5/2", "2020/5/3", "2020/5/6", "2020/5/7", "2020/5/8",
-			"2020/5/9", "2020/5/10", "2020/5/13", "2020/5/14", "2020/5/15",
-			"2020/5/16", "2020/5/17", "2020/5/20", "2020/5/21", "2020/5/22",
-			"2020/5/23", "2020/5/24", "2020/5/27", "2020/5/28", "2020/5/29",
-			"2020/5/30", "2020/5/31", "2020/6/3", "2020/6/4", "2020/6/5",
-			"2020/6/6", "2020/6/7", "2020/6/13"
-		],
-		"series": [{
-			"name": "成交量1",
-			"data": [15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45]
-		}]
-	}
+  "Column": {
+    "categories": [
+      "2016",
+      "2017",
+      "2018",
+      "2019",
+      "2020",
+      "2021"
+    ],
+    "series": [
+      {
+        "name": "目标值",
+        "data": [
+          35,
+          36,
+          31,
+          33,
+          13,
+          34
+        ]
+      },
+      {
+        "name": "完成量",
+        "data": [
+          18,
+          27,
+          21,
+          24,
+          6,
+          28
+        ]
+      }
+    ]
+  },
+  "ColumnA": {
+    "categories": [
+      "2016",
+      "2017",
+      "2018",
+      "2019",
+      "2020",
+      "2021"
+    ],
+    "series": [
+      {
+        "name": "成交量1",
+        "data": [
+          15,
+          {
+            "value": 20,
+            "color": "#f04864"
+          },
+          45,
+          37,
+          43,
+          34
+        ]
+      },
+      {
+        "name": "成交量2",
+        "data": [
+          30,
+          {
+            "value": 40,
+            "color": "#facc14"
+          },
+          25,
+          14,
+          34,
+          18
+        ]
+      }
+    ]
+  },
+  "Mix": {
+    "categories": [
+      "2016",
+      "2017",
+      "2018",
+      "2019",
+      "2020",
+      "2021"
+    ],
+    "series": [
+      {
+        "name": "曲面",
+        "data": [
+          70,
+          50,
+          85,
+          130,
+          64,
+          88
+        ],
+        "type": "area",
+        "style": "curve"
+      },
+      {
+        "name": "柱1",
+        "data": [
+          40,
+          30,
+          55,
+          110,
+          24,
+          58
+        ],
+        "type": "column"
+      },
+      {
+        "name": "柱2",
+        "data": [
+          50,
+          20,
+          75,
+          60,
+          34,
+          38
+        ],
+        "type": "column"
+      },
+      {
+        "name": "曲线",
+        "data": [
+          70,
+          50,
+          85,
+          130,
+          64,
+          88
+        ],
+        "type": "line",
+        "style": "curve",
+        "color": "#1890ff",
+        "disableLegend": true
+      },
+      {
+        "name": "折线",
+        "data": [
+          120,
+          140,
+          105,
+          170,
+          95,
+          160
+        ],
+        "type": "line",
+        "color": "#2fc25b"
+      },
+      {
+        "name": "点",
+        "data": [
+          100,
+          80,
+          125,
+          150,
+          112,
+          132
+        ],
+        "type": "point",
+        "color": "#f04864"
+      }
+    ]
+  },
+  "Line": {
+    "categories": [
+      "2016",
+      "2017",
+      "2018",
+      "2019",
+      "2020",
+      "2021"
+    ],
+    "series": [
+      {
+        "name": "成交量A",
+        "data": [
+          35,
+          8,
+          25,
+          37,
+          4,
+          20
+        ]
+      },
+      {
+        "name": "成交量B",
+        "data": [
+          70,
+          40,
+          65,
+          100,
+          44,
+          68
+        ]
+      },
+      {
+        "name": "成交量C",
+        "data": [
+          100,
+          80,
+          95,
+          150,
+          112,
+          132
+        ]
+      }
+    ]
+  },
+  "Pie": {
+    "series": [
+      {
+        "name": "一班",
+        "data": 50
+      },
+      {
+        "name": "二班",
+        "data": 30
+      },
+      {
+        "name": "三班",
+        "data": 20
+      },
+      {
+        "name": "四班",
+        "data": 18
+      },
+      {
+        "name": "五班",
+        "data": 8
+      }
+    ]
+  },
+  "Radar": {
+    "categories": [
+      "维度1",
+      "维度2",
+      "维度3",
+      "维度4",
+      "维度5",
+      "维度6"
+    ],
+    "series": [
+      {
+        "name": "成交量1",
+        "data": [
+          90,
+          110,
+          165,
+          195,
+          187,
+          172
+        ]
+      },
+      {
+        "name": "成交量2",
+        "data": [
+          190,
+          210,
+          105,
+          35,
+          27,
+          102
+        ]
+      }
+    ]
+  },
+  "Arcbar": {
+    "series": [
+      {
+        "name": "正确率",
+        "data": 0.29,
+        "color": "#2fc25b"
+      }
+    ]
+  },
+  "Gauge": {
+    "categories": [
+      {
+        "value": 0.2,
+        "color": "#1890ff"
+      },
+      {
+        "value": 0.8,
+        "color": "#2fc25b"
+      },
+      {
+        "value": 1,
+        "color": "#f04864"
+      }
+    ],
+    "series": [
+      {
+        "name": "完成率",
+        "data": 0.66
+      }
+    ]
+  },
+  "Candle": {
+    "categories": [
+      "2020/1/24",
+      "2020/1/25",
+      "2020/1/28",
+      "2020/1/29",
+      "2020/1/30",
+      "2020/1/31",
+      "2020/2/1",
+      "2020/2/4",
+      "2020/2/5",
+      "2020/2/6",
+      "2020/2/7",
+      "2020/2/8",
+      "2020/2/18",
+      "2020/2/19",
+      "2020/2/20",
+      "2020/2/21",
+      "2020/2/22",
+      "2020/2/25",
+      "2020/2/26",
+      "2020/2/27",
+      "2020/2/28",
+      "2020/3/1",
+      "2020/3/4",
+      "2020/3/5",
+      "2020/3/6",
+      "2020/3/7",
+      "2020/3/8",
+      "2020/3/11",
+      "2020/3/12",
+      "2020/3/13",
+      "2020/3/14",
+      "2020/3/15",
+      "2020/3/18",
+      "2020/3/19",
+      "2020/3/20",
+      "2020/3/21",
+      "2020/3/22",
+      "2020/3/25",
+      "2020/3/26",
+      "2020/3/27",
+      "2020/3/28",
+      "2020/3/29",
+      "2020/4/1",
+      "2020/4/2",
+      "2020/4/3",
+      "2020/4/8",
+      "2020/4/9",
+      "2020/4/10",
+      "2020/4/11",
+      "2020/4/12",
+      "2020/4/15",
+      "2020/4/16",
+      "2020/4/17",
+      "2020/4/18",
+      "2020/4/19",
+      "2020/4/22",
+      "2020/4/23",
+      "2020/4/24",
+      "2020/4/25",
+      "2020/4/26",
+      "2020/5/2",
+      "2020/5/3",
+      "2020/5/6",
+      "2020/5/7",
+      "2020/5/8",
+      "2020/5/9",
+      "2020/5/10",
+      "2020/5/13",
+      "2020/5/14",
+      "2020/5/15",
+      "2020/5/16",
+      "2020/5/17",
+      "2020/5/20",
+      "2020/5/21",
+      "2020/5/22",
+      "2020/5/23",
+      "2020/5/24",
+      "2020/5/27",
+      "2020/5/28",
+      "2020/5/29",
+      "2020/5/30",
+      "2020/5/31",
+      "2020/6/3",
+      "2020/6/4",
+      "2020/6/5",
+      "2020/6/6",
+      "2020/6/7",
+      "2020/6/13"
+    ],
+    "series": [
+      {
+        "name": "上证指数",
+        "data": [
+          [
+            2320.26,
+            2302.6,
+            2287.3,
+            2362.94
+          ],
+          [
+            2300,
+            2291.3,
+            2288.26,
+            2308.38
+          ],
+          [
+            2295.35,
+            2346.5,
+            2295.35,
+            2346.92
+          ],
+          [
+            2347.22,
+            2358.98,
+            2337.35,
+            2363.8
+          ],
+          [
+            2360.75,
+            2382.48,
+            2347.89,
+            2383.76
+          ],
+          [
+            2383.43,
+            2385.42,
+            2371.23,
+            2391.82
+          ],
+          [
+            2377.41,
+            2419.02,
+            2369.57,
+            2421.15
+          ],
+          [
+            2425.92,
+            2428.15,
+            2417.58,
+            2440.38
+          ],
+          [
+            2411,
+            2433.13,
+            2403.3,
+            2437.42
+          ],
+          [
+            2432.68,
+            2434.48,
+            2427.7,
+            2441.73
+          ],
+          [
+            2430.69,
+            2418.53,
+            2394.22,
+            2433.89
+          ],
+          [
+            2416.62,
+            2432.4,
+            2414.4,
+            2443.03
+          ],
+          [
+            2441.91,
+            2421.56,
+            2415.43,
+            2444.8
+          ],
+          [
+            2420.26,
+            2382.91,
+            2373.53,
+            2427.07
+          ],
+          [
+            2383.49,
+            2397.18,
+            2370.61,
+            2397.94
+          ],
+          [
+            2378.82,
+            2325.95,
+            2309.17,
+            2378.82
+          ],
+          [
+            2322.94,
+            2314.16,
+            2308.76,
+            2330.88
+          ],
+          [
+            2320.62,
+            2325.82,
+            2315.01,
+            2338.78
+          ],
+          [
+            2313.74,
+            2293.34,
+            2289.89,
+            2340.71
+          ],
+          [
+            2297.77,
+            2313.22,
+            2292.03,
+            2324.63
+          ],
+          [
+            2322.32,
+            2365.59,
+            2308.92,
+            2366.16
+          ],
+          [
+            2364.54,
+            2359.51,
+            2330.86,
+            2369.65
+          ],
+          [
+            2332.08,
+            2273.4,
+            2259.25,
+            2333.54
+          ],
+          [
+            2274.81,
+            2326.31,
+            2270.1,
+            2328.14
+          ],
+          [
+            2333.61,
+            2347.18,
+            2321.6,
+            2351.44
+          ],
+          [
+            2340.44,
+            2324.29,
+            2304.27,
+            2352.02
+          ],
+          [
+            2326.42,
+            2318.61,
+            2314.59,
+            2333.67
+          ],
+          [
+            2314.68,
+            2310.59,
+            2296.58,
+            2320.96
+          ],
+          [
+            2309.16,
+            2286.6,
+            2264.83,
+            2333.29
+          ],
+          [
+            2282.17,
+            2263.97,
+            2253.25,
+            2286.33
+          ],
+          [
+            2255.77,
+            2270.28,
+            2253.31,
+            2276.22
+          ],
+          [
+            2269.31,
+            2278.4,
+            2250,
+            2312.08
+          ],
+          [
+            2267.29,
+            2240.02,
+            2239.21,
+            2276.05
+          ],
+          [
+            2244.26,
+            2257.43,
+            2232.02,
+            2261.31
+          ],
+          [
+            2257.74,
+            2317.37,
+            2257.42,
+            2317.86
+          ],
+          [
+            2318.21,
+            2324.24,
+            2311.6,
+            2330.81
+          ],
+          [
+            2321.4,
+            2328.28,
+            2314.97,
+            2332
+          ],
+          [
+            2334.74,
+            2326.72,
+            2319.91,
+            2344.89
+          ],
+          [
+            2318.58,
+            2297.67,
+            2281.12,
+            2319.99
+          ],
+          [
+            2299.38,
+            2301.26,
+            2289,
+            2323.48
+          ],
+          [
+            2273.55,
+            2236.3,
+            2232.91,
+            2273.55
+          ],
+          [
+            2238.49,
+            2236.62,
+            2228.81,
+            2246.87
+          ],
+          [
+            2229.46,
+            2234.4,
+            2227.31,
+            2243.95
+          ],
+          [
+            2234.9,
+            2227.74,
+            2220.44,
+            2253.42
+          ],
+          [
+            2232.69,
+            2225.29,
+            2217.25,
+            2241.34
+          ],
+          [
+            2196.24,
+            2211.59,
+            2180.67,
+            2212.59
+          ],
+          [
+            2215.47,
+            2225.77,
+            2215.47,
+            2234.73
+          ],
+          [
+            2224.93,
+            2226.13,
+            2212.56,
+            2233.04
+          ],
+          [
+            2236.98,
+            2219.55,
+            2217.26,
+            2242.48
+          ],
+          [
+            2218.09,
+            2206.78,
+            2204.44,
+            2226.26
+          ],
+          [
+            2199.91,
+            2181.94,
+            2177.39,
+            2204.99
+          ],
+          [
+            2169.63,
+            2194.85,
+            2165.78,
+            2196.43
+          ],
+          [
+            2195.03,
+            2193.8,
+            2178.47,
+            2197.51
+          ],
+          [
+            2181.82,
+            2197.6,
+            2175.44,
+            2206.03
+          ],
+          [
+            2201.12,
+            2244.64,
+            2200.58,
+            2250.11
+          ],
+          [
+            2236.4,
+            2242.17,
+            2232.26,
+            2245.12
+          ],
+          [
+            2242.62,
+            2184.54,
+            2182.81,
+            2242.62
+          ],
+          [
+            2187.35,
+            2218.32,
+            2184.11,
+            2226.12
+          ],
+          [
+            2213.19,
+            2199.31,
+            2191.85,
+            2224.63
+          ],
+          [
+            2203.89,
+            2177.91,
+            2173.86,
+            2210.58
+          ],
+          [
+            2170.78,
+            2174.12,
+            2161.14,
+            2179.65
+          ],
+          [
+            2179.05,
+            2205.5,
+            2179.05,
+            2222.81
+          ],
+          [
+            2212.5,
+            2231.17,
+            2212.5,
+            2236.07
+          ],
+          [
+            2227.86,
+            2235.57,
+            2219.44,
+            2240.26
+          ],
+          [
+            2242.39,
+            2246.3,
+            2235.42,
+            2255.21
+          ],
+          [
+            2246.96,
+            2232.97,
+            2221.38,
+            2247.86
+          ],
+          [
+            2228.82,
+            2246.83,
+            2225.81,
+            2247.67
+          ],
+          [
+            2247.68,
+            2241.92,
+            2231.36,
+            2250.85
+          ],
+          [
+            2238.9,
+            2217.01,
+            2205.87,
+            2239.93
+          ],
+          [
+            2217.09,
+            2224.8,
+            2213.58,
+            2225.19
+          ],
+          [
+            2221.34,
+            2251.81,
+            2210.77,
+            2252.87
+          ],
+          [
+            2249.81,
+            2282.87,
+            2248.41,
+            2288.09
+          ],
+          [
+            2286.33,
+            2299.99,
+            2281.9,
+            2309.39
+          ],
+          [
+            2297.11,
+            2305.11,
+            2290.12,
+            2305.3
+          ],
+          [
+            2303.75,
+            2302.4,
+            2292.43,
+            2314.18
+          ],
+          [
+            2293.81,
+            2275.67,
+            2274.1,
+            2304.95
+          ],
+          [
+            2281.45,
+            2288.53,
+            2270.25,
+            2292.59
+          ],
+          [
+            2286.66,
+            2293.08,
+            2283.94,
+            2301.7
+          ],
+          [
+            2293.4,
+            2321.32,
+            2281.47,
+            2322.1
+          ],
+          [
+            2323.54,
+            2324.02,
+            2321.17,
+            2334.33
+          ],
+          [
+            2316.25,
+            2317.75,
+            2310.49,
+            2325.72
+          ],
+          [
+            2320.74,
+            2300.59,
+            2299.37,
+            2325.53
+          ],
+          [
+            2300.21,
+            2299.25,
+            2294.11,
+            2313.43
+          ],
+          [
+            2297.1,
+            2272.42,
+            2264.76,
+            2297.1
+          ],
+          [
+            2270.71,
+            2270.93,
+            2260.87,
+            2276.86
+          ],
+          [
+            2264.43,
+            2242.11,
+            2240.07,
+            2266.69
+          ],
+          [
+            2242.26,
+            2210.9,
+            2205.07,
+            2250.63
+          ],
+          [
+            2190.1,
+            2148.35,
+            2126.22,
+            2190.1
+          ]
+        ]
+      }
+    ]
+  },
+  "CandleColumn": {
+    "categories": [
+      "2020/1/24",
+      "2020/1/25",
+      "2020/1/28",
+      "2020/1/29",
+      "2020/1/30",
+      "2020/1/31",
+      "2020/2/1",
+      "2020/2/4",
+      "2020/2/5",
+      "2020/2/6",
+      "2020/2/7",
+      "2020/2/8",
+      "2020/2/18",
+      "2020/2/19",
+      "2020/2/20",
+      "2020/2/21",
+      "2020/2/22",
+      "2020/2/25",
+      "2020/2/26",
+      "2020/2/27",
+      "2020/2/28",
+      "2020/3/1",
+      "2020/3/4",
+      "2020/3/5",
+      "2020/3/6",
+      "2020/3/7",
+      "2020/3/8",
+      "2020/3/11",
+      "2020/3/12",
+      "2020/3/13",
+      "2020/3/14",
+      "2020/3/15",
+      "2020/3/18",
+      "2020/3/19",
+      "2020/3/20",
+      "2020/3/21",
+      "2020/3/22",
+      "2020/3/25",
+      "2020/3/26",
+      "2020/3/27",
+      "2020/3/28",
+      "2020/3/29",
+      "2020/4/1",
+      "2020/4/2",
+      "2020/4/3",
+      "2020/4/8",
+      "2020/4/9",
+      "2020/4/10",
+      "2020/4/11",
+      "2020/4/12",
+      "2020/4/15",
+      "2020/4/16",
+      "2020/4/17",
+      "2020/4/18",
+      "2020/4/19",
+      "2020/4/22",
+      "2020/4/23",
+      "2020/4/24",
+      "2020/4/25",
+      "2020/4/26",
+      "2020/5/2",
+      "2020/5/3",
+      "2020/5/6",
+      "2020/5/7",
+      "2020/5/8",
+      "2020/5/9",
+      "2020/5/10",
+      "2020/5/13",
+      "2020/5/14",
+      "2020/5/15",
+      "2020/5/16",
+      "2020/5/17",
+      "2020/5/20",
+      "2020/5/21",
+      "2020/5/22",
+      "2020/5/23",
+      "2020/5/24",
+      "2020/5/27",
+      "2020/5/28",
+      "2020/5/29",
+      "2020/5/30",
+      "2020/5/31",
+      "2020/6/3",
+      "2020/6/4",
+      "2020/6/5",
+      "2020/6/6",
+      "2020/6/7",
+      "2020/6/13"
+    ],
+    "series": [
+      {
+        "name": "成交量1",
+        "data": [
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45,
+          37,
+          43,
+          15,
+          20,
+          45
+        ]
+      }
+    ]
+  }
 }

mini-program/garden-wxapp/assets/js/u-charts/u-charts/u-charts.vue

@@ -1,443 +1,462 @@
 <template>
-	<view class="chartsview" :style="{ background: background }">
-		<view v-show="mixinDatacomLoading"><view class="uni-icons-spinner-cycle">Loading...</view></view>
-		<view v-show="mixinDatacomErrorMessage">
-			<view class="uni-icons-info-filled">{{ mixinDatacomErrorMessage }}</view>
-		</view>
-		<canvas
-			:id="canvasId"
-			:canvas-id="canvasId"
-			:style="{ width: cWidth + 'px', height: cHeight + 'px' }"
-			:type="canvas2d?'2d':''"
-			@tap="tap"
-			@cilck="tap"
-			@touch="tap"
-			@touchstart="touchStart"
-			@touchmove="touchMove"
-			@touchend="touchEnd"
-			@mousemove="mouseMove"
-			@mousedown="mousedown"
-			@mouseup="mouseup"
-			@error="error"
-			v-show="showchart"
-		/>
-	</view>
+    <view class="chartsview" :style="{ background: background }">
+        <view v-show="mixinDatacomLoading">
+            <view class="uni-icons-spinner-cycle">Loading...</view>
+        </view>
+        <view v-show="mixinDatacomErrorMessage">
+            <view class="uni-icons-info-filled">{{ mixinDatacomErrorMessage }}</view>
+        </view>
+        <canvas
+                :id="canvasId"
+                :canvas-id="canvasId"
+                :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
+                :type="canvas2d?'2d':''"
+                @tap="tap"
+                @cilck="tap"
+                @touch="tap"
+                @touchstart="touchStart"
+                @touchmove="touchMove"
+                @touchend="touchEnd"
+                @mousemove="mouseMove"
+                @mousedown="mousedown"
+                @mouseup="mouseup"
+                @error="error"
+                v-show="showchart"
+        />
+    </view>
 </template>
 
 <script>
-import qiunCharts from '../../js_sdk/u-charts/u-charts.js';
-import config from '../../js_sdk/u-charts/config.js';
-var canvases = {};
-var options = {};
-var chartdom = null;
-export default {
-	mixins: [uniCloud.mixinDatacom],
-	props: {
-		type: {
-			type: String,
-			default: null
-		},
-		canvasId: {
-			type: String,
-			default: "uchartsid"
-		},
-		canvas2d: {
-			type: Boolean,
-			default: false
-		},
-		pixelRatio: {
-			type: Number,
-			default: 1
-		},
-		background: {
-			type: String,
-			default: 'none'
-		},
-		animation:{
-			type: Boolean,
-			default: true
-		},
-		chartData: {
-			type: Object,
-			default() {
-				return {
-					categories: [],
-					series: []
-				};
-			}
-		},
-		opts: {
-			type: Object,
-			default: () => ({})
-		},
-		inScrollView:{
-			type: Boolean,
-			default: false
-		},
-		show:{
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {
-			cWidth: 375,
-			cHeight: 250,
-			showchart: false,
-			defaultOpts: {}
-		};
-	},
-	mounted() {
-		if(this.canvasId=='uchartsid'){
-			console.warn("注意：请在uCharts组件传入canvasId，以免单页多图产生图表错乱！")
-		}
-		if (this.type && config.type.includes(this.type)) {
-			this.defaultOpts = Object.assign({},config[this.type])
-			this.load()
-		} else {
-			this.mixinDatacomLoading = false
-			this.showchart = false
-			this.mixinDatacomErrorMessage = '参数错误：props参数中type类型不正确'
-		}
-		uni.onWindowResize(res => {
-			this.init()
-		})
-	},
-	watch: {
-		chartData(val, oldval) {
-			if (!this.type || !config.type.includes(this.type)) {
-				this.mixinDatacomLoading = false
-				this.showchart = false
-				this.mixinDatacomErrorMessage = '参数错误：props参数中type不正确'
-				return
-			}
-			if (typeof val === 'object') {
-				if (this.collection != '') {
-					if (config.categories.includes(this.type) && val.categories.length == 0 ) {
-						this.mixinDatacomLoading = false
-						this.showchart = false
-						this.mixinDatacomErrorMessage = '数据错误：chartData中缺少categories'
-					} else {
-						this.mixinDatacomLoading = false
-						this.mixinDatacomErrorMessage = null
-						this.$nextTick(function() {
-							this.init()
-						})
-					}
-				} else {
-					this.mixinDatacomLoading = false
-					this.mixinDatacomErrorMessage = null
-					this.$nextTick(function() {
-						this.init()
-					});
-				}
-			} else {
-				this.mixinDatacomLoading = false
-				this.showchart = false
-				this.mixinDatacomErrorMessage = '参数错误：chartData数据类型错误'
-			}
-		},
-		show(val, oldval) {
-			if (val) {
-				if (this.collection != '') {
-					if (config.categories.includes(this.type) && this.chartData.categories.length == 0 ) {
-						this.mixinDatacomLoading = false
-						this.showchart = false
-						this.mixinDatacomErrorMessage = '数据错误：chartData中缺少categories'
-					} else {
-						this.mixinDatacomLoading = false
-						this.mixinDatacomErrorMessage = null
-						this.$nextTick(function() {
-							this.init()
-						})
-					}
-				} else {
-					this.mixinDatacomLoading = false
-					this.mixinDatacomErrorMessage = null
-					this.$nextTick(function() {
-						this.init()
-					});
-				}
-			}
-		}
-	},
-	methods: {
-		load() {
-			if (this.mixinDatacomLoading == true) {
-				return
-			}
-			this.mixinDatacomLoading = true
-			if (this.collection != '') {
-				this.mixinDatacomGet()
-					.then(res => {
-						this.mixinDatacomLoading = false
-						const { data, count } = res.result
-						this.mixinDatacomResData = data
-						if (config.categories.includes(this.type) && this.chartData.categories.length == 0) {
-							this.mixinDatacomLoading = false
-							this.showchart = false
-							this.mixinDatacomErrorMessage = '数据错误：chartData中缺少categories'
-						} else {
-							this.init()
-						}
-					})
-					.catch(err => {
-						if (this.collection == '') {
-							if (this.chartData.series.length > 0) {
-								this.mixinDatacomLoading = false
-								this.init()
-							}
-						} else {
-							this.mixinDatacomLoading = false
-							this.showchart = false
-							this.mixinDatacomErrorMessage = '请求错误：' + err
-						}
-					});
-			}else{
-				if (this.chartData.series.length > 0) {
-					this.mixinDatacomLoading = false
-					this.init()
-				}
-			}
-		},
-		onMixinDatacomPropsChange(needReset, changed) {
-			if (needReset) {
-				if(options[this.canvasId] !== undefined){
-					options[this.canvasId].context.clearRect(0, 0, options[this.canvasId].width, options[this.canvasId].height)
-					options[this.canvasId].context.draw()
-				}
-				this.showchart = false;
-				this.load()
-			}
-		},
-		cloudDataInit() {
-			let temp = {}
-			let series=[]
-			let resdata = this.mixinDatacomResData
-			let categories = options[this.canvasId].categories
-			resdata.map(function (item, index) {
-				if(item.type!=undefined && !temp[item.type]){
-					series.push({name:item.type,data:[]})
-					temp[item.type] = true;
-				}
-			})
-			if(series.length==0){
-				let seriesname="默认分组"
-				if(this.chartData.series.length>0){
-					seriesname=this.chartData.series[0].name
-				}
-				series=[{name:seriesname,data:[]}]
-				for (let j = 0; j < categories.length; j++) {
-					let seriesdata = 0;
-					for (let i = 0; i < resdata.length; i++) {
-						if(resdata[i].label == categories[j]){
-							seriesdata = resdata[i].value
-						}
-					}
-					series[0].data.push(seriesdata)
-				}
-			}else{
-				for (let k = 0; k < series.length; k++) {
-					if(categories.length>0){
-						for (let j = 0; j < categories.length; j++) {
-							let seriesdata = 0;
-							for (let i = 0; i < resdata.length; i++) {
-								if(series[k].name == resdata[i].type && resdata[i].label == categories[j]){
-									seriesdata = resdata[i].value
-								}
-							}
-							series[k].data.push(seriesdata)
-						}
-					}else{
-						for (let i = 0; i < resdata.length; i++) {
-							if(series[k].name == resdata[i].type){
-								series[k].data.push(resdata[i].type)
-							}
-						}
-					}
-				}
-			}
-			return series;
-		},
-		init() {
-			chartdom = uni.createSelectorQuery().in(this).select('.chartsview');
-			chartdom.boundingClientRect(data => {
-				if(data.width>0 && data.height>0){
-					this.cWidth = data.width
-					this.cHeight = data.height
-					options[this.canvasId] = Object.assign(this.defaultOpts, this.opts)
-					options[this.canvasId].canvasId = this.canvasId
-					options[this.canvasId].categories = this.chartData.categories
-					if (this.collection == '') {
-						options[this.canvasId].series = this.chartData.series
-					}else{
-						options[this.canvasId].series = this.cloudDataInit()
-					}
-					options[this.canvasId].background = this.background == 'none' ? '#FFFFFF' : this.background
-					options[this.canvasId].pixelRatio = this.pixelRatio
-					options[this.canvasId].animation = this.animation
-					options[this.canvasId].width = data.width * this.pixelRatio
-					options[this.canvasId].height = data.height * this.pixelRatio
-					if(this.canvas2d){
-						options[this.canvasId].canvas2d = this.canvas2d
-						const query = uni.createSelectorQuery().in(this)
-						query.select('#'+this.canvasId)
-							.fields({ node: true, size: true })
-							.exec((res) => {
-								const canvas = res[0].node
-								const ctx = canvas.getContext('2d')
-								options[this.canvasId].context = ctx
-								canvas.width = data.width * this.pixelRatio
-								canvas.height = data.height * this.pixelRatio
-								canvas._width = data.width * this.pixelRatio
-								canvas._height = data.height * this.pixelRatio
-								if(!this.mixinDatacomLoading){
-									this.showchart = true
-								}
-								this.newChart()
-							})
-					}else{
-						options[this.canvasId].context = uni.createCanvasContext(this.canvasId,this)
-						if(!this.mixinDatacomLoading){
-							this.showchart = true
-						}
-						this.newChart()
-					}
-				}else{
-					this.mixinDatacomLoading = false
-					this.showchart = false
-					this.mixinDatacomErrorMessage = '布局错误：请尝试props绑定show状态'
-				}
-			}).exec();
-		},
-		newChart() {
-			canvases[this.canvasId] = new qiunCharts(options[this.canvasId])
-			canvases[this.canvasId].addEventListener('renderComplete', () => {
-				this.$emit("complete",{complete:true,charts:canvases[this.canvasId]})
-			});
-			canvases[this.canvasId].addEventListener('scrollLeft', () => {
-				this.$emit("scrollLeft",{scrollLeft:true,charts:canvases[this.canvasId]})
-			});
-			canvases[this.canvasId].addEventListener('scrollRight', () => {
-				this.$emit("scrollRight",{scrollRight:true,charts:canvases[this.canvasId]})
-			});
-		},
-		tap(e) {
-			let currentIndex=null
-			let legendIndex=null
-			if(this.inScrollView){
-				e.type = 'click'
-			}
-			if (e.type == 'click') {
-				chartdom = uni.createSelectorQuery().in(this).select('.chartsview')
-				chartdom.boundingClientRect(data => {
-					e.changedTouches.unshift({ x: e.detail.x - data.left, y: e.detail.y - data.top })
-					e.mp.changedTouches.unshift({ x: e.detail.x - data.left, y: e.detail.y - data.top })
-					canvases[this.canvasId].touchLegend(e)
-					canvases[this.canvasId].showToolTip(e, {
-						format: function(item, category) {
-							if(category){
-								return category + ' ' + item.name + ':' + item.data
-							}else{
-								return item.name + ':' + item.data
-							}
-						}
-					})
-					currentIndex=canvases[this.canvasId].getCurrentDataIndex(e)
-					legendIndex=canvases[this.canvasId].getLegendDataIndex(e) 
-					this.$emit("getIndex",{event:e,currentIndex:currentIndex,legendIndex:legendIndex,charts:canvases[this.canvasId]})
-				}).exec();
-			} else {
-				e.changedTouches.unshift({ x: e.detail.x - e.currentTarget.offsetLeft, y: e.detail.y - e.currentTarget.offsetTop })
-				e.mp.changedTouches.unshift({ x: e.detail.x - e.currentTarget.offsetLeft, y: e.detail.y - e.currentTarget.offsetTop })
-				canvases[this.canvasId].touchLegend(e)
-				canvases[this.canvasId].showToolTip(e, {
-					format: function(item, category) {
-						if(category){
-							return category + ' ' + item.name + ':' + item.data
-						}else{
-							return item.name + ':' + item.data
-						}
-					}
-				});
-				currentIndex=canvases[this.canvasId].getCurrentDataIndex(e)
-				legendIndex=canvases[this.canvasId].getLegendDataIndex(e) 
-				this.$emit("getIndex",{event:e,currentIndex:currentIndex,legendIndex:legendIndex,charts:canvases[this.canvasId]})
-			}
-		},
-		touchStart(e) {
-			canvases[this.canvasId].scrollStart(e)
-			this.$emit("touchStart",{event:e,charts:canvases[this.canvasId]})
-		},
-		touchMove(e) {
-			canvases[this.canvasId].scroll(e)
-			this.$emit("touchMove",{event:e,charts:canvases[this.canvasId]})
-		},
-		touchEnd(e) {
-			canvases[this.canvasId].scrollEnd(e)
-			this.$emit("touchEnd",{event:e,charts:canvases[this.canvasId]})
-		},
-		mousedown(e){
-			if(options[this.canvasId].enableScroll){
-				chartdom = uni.createSelectorQuery().in(this).select('.chartsview')
-				chartdom.boundingClientRect(data => {
-					e.changedTouches.unshift({ x: e.pageX - data.left, y: e.clientY-data.top })
-					e.mp.changedTouches.unshift({ x: e.pageX - data.left, y: e.clientY-data.top })
-					canvases[this.canvasId].scrollStart(e)
-					options[this.canvasId].mousedown=true;
-					this.$emit("touchStart",{event:e,charts:canvases[this.canvasId]})
-				}).exec();
-			}
-		},
-		mouseMove(e) {
-			if (options[this.canvasId].series.length > 0) {
-				chartdom = uni.createSelectorQuery().in(this).select('.chartsview')
-				chartdom.boundingClientRect(data => {
-					e.changedTouches.unshift({ x: e.pageX - data.left, y: e.clientY-data.top })
-					e.mp.changedTouches.unshift({ x: e.pageX - data.left, y: e.clientY-data.top })
-					if(options[this.canvasId].enableScroll && options[this.canvasId].mousedown){
-						canvases[this.canvasId].scroll(e)
-						this.$emit("touchMove",{event:e,charts:canvases[this.canvasId]})
-					}else{
-						canvases[this.canvasId].showToolTip(e, {
-							format: function(item, category) {
-								if(category){
-									return category + ' ' + item.name + ':' + item.data
-								}else{
-									return item.name + ':' + item.data
-								}
-							}
-						});
-					}
-				}).exec()
-			}
-		},
-		mouseup(e){
-			if(options[this.canvasId].enableScroll){
-				chartdom = uni.createSelectorQuery().in(this).select('.chartsview')
-				chartdom.boundingClientRect(data => {
-					e.changedTouches.unshift({ x: e.pageX - data.left, y: e.clientY-data.top })
-					e.mp.changedTouches.unshift({ x: e.pageX - data.left, y: e.clientY-data.top })
-					canvases[this.canvasId].scrollEnd(e)
-					options[this.canvasId].mousedown=false;
-					this.$emit("touchEnd",{event:e,charts:canvases[this.canvasId]})
-				}).exec();
-			}
-		},
-		error(e) {
-			console.log(e)
-		}
-	}
-};
+    import qiunCharts from '../../js_sdk/u-charts/u-charts.js';
+    import config from '../../js_sdk/u-charts/config.js';
+
+    var canvases = {};
+    var options = {};
+    var chartdom = null;
+    export default {
+        mixins: [uniCloud.mixinDatacom],
+        props: {
+            type: {
+                type: String,
+                default: null
+            },
+            canvasId: {
+                type: String,
+                default: "uchartsid"
+            },
+            canvas2d: {
+                type: Boolean,
+                default: false
+            },
+            pixelRatio: {
+                type: Number,
+                default: 1
+            },
+            background: {
+                type: String,
+                default: 'none'
+            },
+            animation: {
+                type: Boolean,
+                default: true
+            },
+            chartData: {
+                type: Object,
+                default() {
+                    return {
+                        categories: [],
+                        series: []
+                    };
+                }
+            },
+            opts: {
+                type: Object,
+                default: () => ({})
+            },
+            inScrollView: {
+                type: Boolean,
+                default: false
+            },
+            show: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data() {
+            return {
+                cWidth: 375,
+                cHeight: 250,
+                showchart: false,
+                defaultOpts: {}
+            };
+        },
+        mounted() {
+            if (this.canvasId == 'uchartsid') {
+                console.warn("注意：请在uCharts组件传入canvasId，以免单页多图产生图表错乱！")
+            }
+            if (this.type && config.type.includes(this.type)) {
+                this.defaultOpts = Object.assign({}, config[this.type])
+                this.load()
+            } else {
+                this.mixinDatacomLoading = false
+                this.showchart = false
+                this.mixinDatacomErrorMessage = '参数错误：props参数中type类型不正确'
+            }
+            uni.onWindowResize(res => {
+                this.init()
+            })
+        },
+        watch: {
+            chartData(val, oldval) {
+                if (!this.type || !config.type.includes(this.type)) {
+                    this.mixinDatacomLoading = false
+                    this.showchart = false
+                    this.mixinDatacomErrorMessage = '参数错误：props参数中type不正确'
+                    return
+                }
+                if (typeof val === 'object') {
+                    if (this.collection != '') {
+                        if (config.categories.includes(this.type) && val.categories.length == 0) {
+                            this.mixinDatacomLoading = false
+                            this.showchart = false
+                            this.mixinDatacomErrorMessage = '数据错误：chartData中缺少categories'
+                        } else {
+                            this.mixinDatacomLoading = false
+                            this.mixinDatacomErrorMessage = null
+                            this.$nextTick(function () {
+                                this.init()
+                            })
+                        }
+                    } else {
+                        this.mixinDatacomLoading = false
+                        this.mixinDatacomErrorMessage = null
+                        this.$nextTick(function () {
+                            this.init()
+                        });
+                    }
+                } else {
+                    this.mixinDatacomLoading = false
+                    this.showchart = false
+                    this.mixinDatacomErrorMessage = '参数错误：chartData数据类型错误'
+                }
+            },
+            show(val, oldval) {
+                if (val) {
+                    if (this.collection != '') {
+                        if (config.categories.includes(this.type) && this.chartData.categories.length == 0) {
+                            this.mixinDatacomLoading = false
+                            this.showchart = false
+                            this.mixinDatacomErrorMessage = '数据错误：chartData中缺少categories'
+                        } else {
+                            this.mixinDatacomLoading = false
+                            this.mixinDatacomErrorMessage = null
+                            this.$nextTick(function () {
+                                this.init()
+                            })
+                        }
+                    } else {
+                        this.mixinDatacomLoading = false
+                        this.mixinDatacomErrorMessage = null
+                        this.$nextTick(function () {
+                            this.init()
+                        });
+                    }
+                }
+            }
+        },
+        methods: {
+            load() {
+                if (this.mixinDatacomLoading == true) {
+                    return
+                }
+                this.mixinDatacomLoading = true
+                if (this.collection != '') {
+                    this.mixinDatacomGet()
+                        .then(res => {
+                            this.mixinDatacomLoading = false
+                            const {data, count} = res.result
+                            this.mixinDatacomResData = data
+                            if (config.categories.includes(this.type) && this.chartData.categories.length == 0) {
+                                this.mixinDatacomLoading = false
+                                this.showchart = false
+                                this.mixinDatacomErrorMessage = '数据错误：chartData中缺少categories'
+                            } else {
+                                this.init()
+                            }
+                        })
+                        .catch(err => {
+                            if (this.collection == '') {
+                                if (this.chartData.series.length > 0) {
+                                    this.mixinDatacomLoading = false
+                                    this.init()
+                                }
+                            } else {
+                                this.mixinDatacomLoading = false
+                                this.showchart = false
+                                this.mixinDatacomErrorMessage = '请求错误：' + err
+                            }
+                        });
+                } else {
+                    if (this.chartData.series.length > 0) {
+                        this.mixinDatacomLoading = false
+                        this.init()
+                    }
+                }
+            },
+            onMixinDatacomPropsChange(needReset, changed) {
+                if (needReset) {
+                    if (options[this.canvasId] !== undefined) {
+                        options[this.canvasId].context.clearRect(0, 0, options[this.canvasId].width, options[this.canvasId].height)
+                        options[this.canvasId].context.draw()
+                    }
+                    this.showchart = false;
+                    this.load()
+                }
+            },
+            cloudDataInit() {
+                let temp = {}
+                let series = []
+                let resdata = this.mixinDatacomResData
+                let categories = options[this.canvasId].categories
+                resdata.map(function (item, index) {
+                    if (item.type != undefined && !temp[item.type]) {
+                        series.push({name: item.type, data: []})
+                        temp[item.type] = true;
+                    }
+                })
+                if (series.length == 0) {
+                    let seriesname = "默认分组"
+                    if (this.chartData.series.length > 0) {
+                        seriesname = this.chartData.series[0].name
+                    }
+                    series = [{name: seriesname, data: []}]
+                    for (let j = 0; j < categories.length; j++) {
+                        let seriesdata = 0;
+                        for (let i = 0; i < resdata.length; i++) {
+                            if (resdata[i].label == categories[j]) {
+                                seriesdata = resdata[i].value
+                            }
+                        }
+                        series[0].data.push(seriesdata)
+                    }
+                } else {
+                    for (let k = 0; k < series.length; k++) {
+                        if (categories.length > 0) {
+                            for (let j = 0; j < categories.length; j++) {
+                                let seriesdata = 0;
+                                for (let i = 0; i < resdata.length; i++) {
+                                    if (series[k].name == resdata[i].type && resdata[i].label == categories[j]) {
+                                        seriesdata = resdata[i].value
+                                    }
+                                }
+                                series[k].data.push(seriesdata)
+                            }
+                        } else {
+                            for (let i = 0; i < resdata.length; i++) {
+                                if (series[k].name == resdata[i].type) {
+                                    series[k].data.push(resdata[i].type)
+                                }
+                            }
+                        }
+                    }
+                }
+                return series;
+            },
+            init() {
+                chartdom = uni.createSelectorQuery().in(this).select('.chartsview');
+                chartdom.boundingClientRect(data => {
+                    if (data.width > 0 && data.height > 0) {
+                        this.cWidth = data.width
+                        this.cHeight = data.height
+                        options[this.canvasId] = Object.assign(this.defaultOpts, this.opts)
+                        options[this.canvasId].canvasId = this.canvasId
+                        options[this.canvasId].categories = this.chartData.categories
+                        if (this.collection == '') {
+                            options[this.canvasId].series = this.chartData.series
+                        } else {
+                            options[this.canvasId].series = this.cloudDataInit()
+                        }
+                        options[this.canvasId].background = this.background == 'none' ? '#FFFFFF' : this.background
+                        options[this.canvasId].pixelRatio = this.pixelRatio
+                        options[this.canvasId].animation = this.animation
+                        options[this.canvasId].width = data.width * this.pixelRatio
+                        options[this.canvasId].height = data.height * this.pixelRatio
+                        if (this.canvas2d) {
+                            options[this.canvasId].canvas2d = this.canvas2d
+                            const query = uni.createSelectorQuery().in(this)
+                            query.select('#' + this.canvasId)
+                                .fields({node: true, size: true})
+                                .exec((res) => {
+                                    const canvas = res[0].node
+                                    const ctx = canvas.getContext('2d')
+                                    options[this.canvasId].context = ctx
+                                    canvas.width = data.width * this.pixelRatio
+                                    canvas.height = data.height * this.pixelRatio
+                                    canvas._width = data.width * this.pixelRatio
+                                    canvas._height = data.height * this.pixelRatio
+                                    if (!this.mixinDatacomLoading) {
+                                        this.showchart = true
+                                    }
+                                    this.newChart()
+                                })
+                        } else {
+                            options[this.canvasId].context = uni.createCanvasContext(this.canvasId, this)
+                            if (!this.mixinDatacomLoading) {
+                                this.showchart = true
+                            }
+                            this.newChart()
+                        }
+                    } else {
+                        this.mixinDatacomLoading = false
+                        this.showchart = false
+                        this.mixinDatacomErrorMessage = '布局错误：请尝试props绑定show状态'
+                    }
+                }).exec();
+            },
+            newChart() {
+                canvases[this.canvasId] = new qiunCharts(options[this.canvasId])
+                canvases[this.canvasId].addEventListener('renderComplete', () => {
+                    this.$emit("complete", {complete: true, charts: canvases[this.canvasId]})
+                });
+                canvases[this.canvasId].addEventListener('scrollLeft', () => {
+                    this.$emit("scrollLeft", {scrollLeft: true, charts: canvases[this.canvasId]})
+                });
+                canvases[this.canvasId].addEventListener('scrollRight', () => {
+                    this.$emit("scrollRight", {scrollRight: true, charts: canvases[this.canvasId]})
+                });
+            },
+            tap(e) {
+                let currentIndex = null
+                let legendIndex = null
+                if (this.inScrollView) {
+                    e.type = 'click'
+                }
+                if (e.type == 'click') {
+                    chartdom = uni.createSelectorQuery().in(this).select('.chartsview')
+                    chartdom.boundingClientRect(data => {
+                        e.changedTouches.unshift({x: e.detail.x - data.left, y: e.detail.y - data.top})
+                        e.mp.changedTouches.unshift({x: e.detail.x - data.left, y: e.detail.y - data.top})
+                        canvases[this.canvasId].touchLegend(e)
+                        canvases[this.canvasId].showToolTip(e, {
+                            format: function (item, category) {
+                                if (category) {
+                                    return category + ' ' + item.name + ':' + item.data
+                                } else {
+                                    return item.name + ':' + item.data
+                                }
+                            }
+                        })
+                        currentIndex = canvases[this.canvasId].getCurrentDataIndex(e)
+                        legendIndex = canvases[this.canvasId].getLegendDataIndex(e)
+                        this.$emit("getIndex", {
+                            event: e,
+                            currentIndex: currentIndex,
+                            legendIndex: legendIndex,
+                            charts: canvases[this.canvasId]
+                        })
+                    }).exec();
+                } else {
+                    e.changedTouches.unshift({
+                        x: e.detail.x - e.currentTarget.offsetLeft,
+                        y: e.detail.y - e.currentTarget.offsetTop
+                    })
+                    e.mp.changedTouches.unshift({
+                        x: e.detail.x - e.currentTarget.offsetLeft,
+                        y: e.detail.y - e.currentTarget.offsetTop
+                    })
+                    canvases[this.canvasId].touchLegend(e)
+                    canvases[this.canvasId].showToolTip(e, {
+                        format: function (item, category) {
+                            if (category) {
+                                return category + ' ' + item.name + ':' + item.data
+                            } else {
+                                return item.name + ':' + item.data
+                            }
+                        }
+                    });
+                    currentIndex = canvases[this.canvasId].getCurrentDataIndex(e)
+                    legendIndex = canvases[this.canvasId].getLegendDataIndex(e)
+                    this.$emit("getIndex", {
+                        event: e,
+                        currentIndex: currentIndex,
+                        legendIndex: legendIndex,
+                        charts: canvases[this.canvasId]
+                    })
+                }
+            },
+            touchStart(e) {
+                canvases[this.canvasId].scrollStart(e)
+                this.$emit("touchStart", {event: e, charts: canvases[this.canvasId]})
+            },
+            touchMove(e) {
+                canvases[this.canvasId].scroll(e)
+                this.$emit("touchMove", {event: e, charts: canvases[this.canvasId]})
+            },
+            touchEnd(e) {
+                canvases[this.canvasId].scrollEnd(e)
+                this.$emit("touchEnd", {event: e, charts: canvases[this.canvasId]})
+            },
+            mousedown(e) {
+                if (options[this.canvasId].enableScroll) {
+                    chartdom = uni.createSelectorQuery().in(this).select('.chartsview')
+                    chartdom.boundingClientRect(data => {
+                        e.changedTouches.unshift({x: e.pageX - data.left, y: e.clientY - data.top})
+                        e.mp.changedTouches.unshift({x: e.pageX - data.left, y: e.clientY - data.top})
+                        canvases[this.canvasId].scrollStart(e)
+                        options[this.canvasId].mousedown = true;
+                        this.$emit("touchStart", {event: e, charts: canvases[this.canvasId]})
+                    }).exec();
+                }
+            },
+            mouseMove(e) {
+                if (options[this.canvasId].series.length > 0) {
+                    chartdom = uni.createSelectorQuery().in(this).select('.chartsview')
+                    chartdom.boundingClientRect(data => {
+                        e.changedTouches.unshift({x: e.pageX - data.left, y: e.clientY - data.top})
+                        e.mp.changedTouches.unshift({x: e.pageX - data.left, y: e.clientY - data.top})
+                        if (options[this.canvasId].enableScroll && options[this.canvasId].mousedown) {
+                            canvases[this.canvasId].scroll(e)
+                            this.$emit("touchMove", {event: e, charts: canvases[this.canvasId]})
+                        } else {
+                            canvases[this.canvasId].showToolTip(e, {
+                                format: function (item, category) {
+                                    if (category) {
+                                        return category + ' ' + item.name + ':' + item.data
+                                    } else {
+                                        return item.name + ':' + item.data
+                                    }
+                                }
+                            });
+                        }
+                    }).exec()
+                }
+            },
+            mouseup(e) {
+                if (options[this.canvasId].enableScroll) {
+                    chartdom = uni.createSelectorQuery().in(this).select('.chartsview')
+                    chartdom.boundingClientRect(data => {
+                        e.changedTouches.unshift({x: e.pageX - data.left, y: e.clientY - data.top})
+                        e.mp.changedTouches.unshift({x: e.pageX - data.left, y: e.clientY - data.top})
+                        canvases[this.canvasId].scrollEnd(e)
+                        options[this.canvasId].mousedown = false;
+                        this.$emit("touchEnd", {event: e, charts: canvases[this.canvasId]})
+                    }).exec();
+                }
+            },
+            error(e) {
+                console.log(e)
+            }
+        }
+    };
 </script>
 
 <style scoped>
-.chartsview {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex: 1;
-	justify-content: center;
-	align-items: center;
-}
+    .chartsview {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+    }
 </style>

mini-program/garden-wxapp/components/calendar/calendar.vue

@@ -3,474 +3,485 @@
         <view class="week">
             <view class="week-day" v-for="(item, index) in weekDay" :key="index">{{ item }}</view>
         </view>
-		<swiper style="flex: 1;" :vertical="true" :style="{height:height}"  :circular="true"   @change="swiperChange"  :current="swiperCurrent"  @animationfinish="animationfinish">
-			<swiper-item style="height: 100%;" v-for="(items,i) in 3" :key="i">
-				<view :class="{ hide: !monthOpen }" class="content" >
-				    <view :style="{ top: positionTop + 'rpx' }" class="days">
-				        <view class="item" v-for="(item, index) in dates" :key="index">
-				            <view
-				                class="day"
-				                @click="selectOne(item, $event)"
-				                :class="{
+        <swiper style="flex: 1;" :vertical="true" :style="{height:height}" :circular="true" @change="swiperChange"
+                :current="swiperCurrent" @animationfinish="animationfinish">
+            <swiper-item style="height: 100%;" v-for="(items,i) in 3" :key="i">
+                <view :class="{ hide: !monthOpen }" class="content">
+                    <view :style="{ top: positionTop + 'rpx' }" class="days">
+                        <view class="item" v-for="(item, index) in dates" :key="index">
+                            <view
+                                    class="day"
+                                    @click="selectOne(item, $event)"
+                                    :class="{
 				                    choose: choose == `${item.year}-${item.month}-${item.date}`&&item.isCurM,
 				                    nolm: !item.isCurM,
 				                    today: isToday(item.year, item.month, item.date),
 				                    isWorkDay: isWorkDay(item.year, item.month, item.date)
 				                }"
-				            >
-				                {{ Number(item.date) }}
-				            </view>
-							
-							
-				            <view class="markDay"   v-if="isMarkDay(item.year, item.month, item.date)&&item.isCurM"></view>
-							
-				        </view>
-				    </view>
-				</view>
-			</swiper-item>
-		</swiper>
+                            >
+                                {{ Number(item.date) }}
+                            </view>
+
+
+                            <view class="markDay"
+                                  v-if="isMarkDay(item.year, item.month, item.date)&&item.isCurM"></view>
+
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+        </swiper>
         <!-- <image src="https://i.loli.net/2020/07/16/2MmZsucVTlRjSwK.png" mode="scaleToFill" v-if="collapsible" @click="toggle" class="weektoggle" :class="{ down: monthOpen }"></image> -->
-	</view>
+    </view>
 </template>
 
 <script>
-export default {
-    name: 'ren-calendar',
-    props: {
-        // 星期几为第一天(0为星期日)
-        weekstart: {
-            type: Number,
-            default: 0
-        },
-        // 标记的日期
-        markDays: {
-            type: Array,
-            default: ()=>{
-                return [];
+    export default {
+        name: 'ren-calendar',
+        props: {
+            // 星期几为第一天(0为星期日)
+            weekstart: {
+                type: Number,
+                default: 0
+            },
+            // 标记的日期
+            markDays: {
+                type: Array,
+                default: () => {
+                    return [];
+                }
+            },
+            //是否展示月份切换按钮
+            headerBar: {
+                type: Boolean,
+                default: true
+            },
+            // 是否展开
+            open: {
+                type: Boolean,
+                default: true
+            },
+            //是否可收缩
+            collapsible: {
+                type: Boolean,
+                default: true
+            },
+            //未来日期是否不可点击
+            disabledAfter: {
+                type: Boolean,
+                default: false
             }
         },
-        //是否展示月份切换按钮
-        headerBar:{
-            type: Boolean,
-            default: true
-        },
-        // 是否展开
-        open: {
-            type: Boolean,
-            default: true
-        },
-        //是否可收缩
-        collapsible:{
-            type: Boolean,
-            default: true
-        },
-        //未来日期是否不可点击
-        disabledAfter: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data() {
-        return {
-            weektext: ['日', '一', '二', '三', '四', '五', '六'],
-            y: new Date().getFullYear(), // 年
-            m: new Date().getMonth() + 1, // 月
-            dates: [], // 当前月的日期数据
-            positionTop: 0,
-            monthOpen: true,
-            choose: '',
-			
-			monthList:[],
-			swiperCurrent:0
-        };
-    },
-    created() {
-		// this.monthList=[this.getMonth(-1),this.getMonth(0),this.getMonth(1)]
-		this.dates=this.monthDay(this.y,this.m)
-        !this.open && this.toggle();
-    },
-    mounted() {
-        this.choose = this.getToday().date;
-    },
-    computed: {
-        // 顶部星期栏
-        weekDay() {
-            return this.weektext.slice(this.weekstart).concat(this.weektext.slice(0, this.weekstart));
-        },
-        height() {
-            return (this.dates.length / 7) * 95+ 'rpx';
-        }
-    },
-    methods: {
-		animationfinish({ detail: { current } }) {
-			this.swiperCurrent = current;
-		},
-		swiperChange(e){
-			 let startCurrent=this.swiperCurrent
-			 let endCurrent=e.detail.current
-			 this.swiperCurrent=endCurrent
-			 
-			 //左滑
-			 if (startCurrent==0&&endCurrent==2) {
-				this.changeMonth('pre')
-				return
-			 }
-			 if (startCurrent==2&&endCurrent==1) {
-			 	this.changeMonth('pre')
-			 	return
-			 }
-			 if (startCurrent==1&&endCurrent==0) {
-			 	this.changeMonth('pre')
-			 	return
-			 }
-			 
-			 //右滑
-			 if (startCurrent==0&&endCurrent==1) {
-				this.changeMonth('next')
-				return
-			 }
-			 if (startCurrent==1&&endCurrent==2) {
-			 	this.changeMonth('next')
-			 	return
-			 }
-			 if (startCurrent==2&&endCurrent==0) {
-			 	this.changeMonth('next')
-			 	return
-			 }
-			 
-		},
-        formatNum(num) {
-            let res = Number(num);
-            return res < 10 ? '0' + res : res;
-        },
-        getToday() {
-            let date = new Date();
-            let y = date.getFullYear();
-            let m = date.getMonth();
-            let d = date.getDate();
-            let week = new Date().getDay();
-            let weekText = ['日', '一', '二', '三', '四', '五', '六'];
-            let formatWeek = '星期' + weekText[week];
-            let today = {
-                date: y + '-' + this.formatNum(m + 1) + '-' + this.formatNum(d),
-                week: formatWeek
+        data() {
+            return {
+                weektext: ['日', '一', '二', '三', '四', '五', '六'],
+                y: new Date().getFullYear(), // 年
+                m: new Date().getMonth() + 1, // 月
+                dates: [], // 当前月的日期数据
+                positionTop: 0,
+                monthOpen: true,
+                choose: '',
+
+                monthList: [],
+                swiperCurrent: 0
             };
-            return today;
         },
-        // 获取当前月份数据
-        monthDay(y, month) {
-            let dates = [];
-            let m = Number(month);
-            let firstDayOfMonth = new Date(y, m - 1, 1).getDay(); // 当月第一天星期几
-            let lastDateOfMonth = new Date(y, m, 0).getDate(); // 当月最后一天
-            let lastDayOfLastMonth = new Date(y, m - 2, 0).getDate(); // 上一月的最后一天
-            let weekstart = this.weekstart == 7 ? 0 : this.weekstart;
-            let startDay = (() => {
-                // 周初有几天是上个月的
-                if (firstDayOfMonth == weekstart) {
-                    return 0;
-                } else if (firstDayOfMonth > weekstart) {
-                    return firstDayOfMonth - weekstart;
-                } else {
-                    return 7 - weekstart + firstDayOfMonth;
-                }
-            })();
-            let endDay = 7 - ((startDay + lastDateOfMonth) % 7); // 结束还有几天是下个月的
-            for (let i = 1; i <= startDay; i++) {
-                dates.push({
-                    date: this.formatNum(lastDayOfLastMonth - startDay + i),
-                    day: weekstart + i - 1 || 7,
-                    month: m - 1 >= 0 ? this.formatNum(m - 1) : 12,
-                    year: m - 1 >= 0 ? y : y - 1
-                });
-            }
-            for (let j = 1; j <= lastDateOfMonth; j++) {
-                dates.push({
-                    date: this.formatNum(j),
-                    day: (j % 7) + firstDayOfMonth - 1 || 7,
-                    month: this.formatNum(m),
-                    year: y,
-                    isCurM: true //是否当前月份
-                });
-            }
-            for (let k = 1; k <= endDay; k++) {
-                dates.push({
-                    date: this.formatNum(k),
-                    day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
-                    month: m + 1 <= 11 ? this.formatNum(m + 1) : 0,
-                    year: m + 1 <= 11 ? y : y + 1
-                });
-            }
-            // console.log(dates);
-            return dates;
+        created() {
+            // this.monthList=[this.getMonth(-1),this.getMonth(0),this.getMonth(1)]
+            this.dates = this.monthDay(this.y, this.m)
+            !this.open && this.toggle();
         },
-        isWorkDay(y, m, d) {
-            //是否工作日
-            let ymd = `${y}/${m}/${d}`;
-            let formatDY = new Date(ymd.replace(/-/g, '/'));
-            let week = formatDY.getDay();
-            if (week == 0 || week == 6) {
-                return false;
-            } else {
-                return true;
-            }
+        mounted() {
+            this.choose = this.getToday().date;
         },
-        isFutureDay(y, m, d) {
-            //是否未来日期
-            let ymd = `${y}/${m}/${d}`;
-            let formatDY = new Date(ymd.replace(/-/g, '/'));
-            let showTime = formatDY.getTime();
-            let curTime = new Date().getTime();
-            if (showTime > curTime) {
-                return true;
-            } else {
-                return false;
+        computed: {
+            // 顶部星期栏
+            weekDay() {
+                return this.weektext.slice(this.weekstart).concat(this.weektext.slice(0, this.weekstart));
+            },
+            height() {
+                return (this.dates.length / 7) * 95 + 'rpx';
             }
         },
-        // 标记日期
-        isMarkDay(y, m, d) {
-            let flag = false;
-            for (let i = 0; i < this.markDays.length; i++) {
-                let dy = `${y}-${m}-${d}`;
-                if (this.markDays[i] == dy) {
-                    flag = true;
-                    break;
+        methods: {
+            animationfinish({detail: {current}}) {
+                this.swiperCurrent = current;
+            },
+            swiperChange(e) {
+                let startCurrent = this.swiperCurrent
+                let endCurrent = e.detail.current
+                this.swiperCurrent = endCurrent
+
+                //左滑
+                if (startCurrent == 0 && endCurrent == 2) {
+                    this.changeMonth('pre')
+                    return
                 }
-            }
-            return flag;
-        },
-        isToday(y, m, d) {
-            let checkD = y + '-' + m + '-' + d;
-            let today = this.getToday().date;
-            if (checkD == today) {
-                return true;
-            } else {
-                return false;
-            }
-        },
-        // 展开收起
-        toggle() {
-            this.monthOpen = !this.monthOpen;
-            if (this.monthOpen) {
-                this.positionTop = 0;
-            } else {
-                let index = -1;
-                this.dates.forEach((i, x) => {
-                    this.isToday(i.year, i.month, i.date) && (index = x);
-                });
-                this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 80;
-            }
-        },
-        // 点击回调
-        selectOne(i, event) {
-            let date = `${i.year}-${i.month}-${i.date}`;
-            let selectD = new Date(date).getTime();
-            let curTime = new Date().getTime();
-            let week = new Date(date).getDay();
-            let weekText = ['日', '一', '二', '三', '四', '五', '六'];
-            let formatWeek = '星期' + weekText[week];
-            let response = {
-                date: date,
-                week: formatWeek
-            };
-            if (!i.isCurM) {
-                // console.log('不在当前月范围内');
-                return false;
-            }
-            if (selectD > curTime) {
-                if (this.disabledAfter==true) {
-                    this.$emit('onDayClick', false);;
+                if (startCurrent == 2 && endCurrent == 1) {
+                    this.changeMonth('pre')
+                    return
+                }
+                if (startCurrent == 1 && endCurrent == 0) {
+                    this.changeMonth('pre')
+                    return
+                }
+
+                //右滑
+                if (startCurrent == 0 && endCurrent == 1) {
+                    this.changeMonth('next')
+                    return
+                }
+                if (startCurrent == 1 && endCurrent == 2) {
+                    this.changeMonth('next')
+                    return
+                }
+                if (startCurrent == 2 && endCurrent == 0) {
+                    this.changeMonth('next')
+                    return
+                }
+
+            },
+            formatNum(num) {
+                let res = Number(num);
+                return res < 10 ? '0' + res : res;
+            },
+            getToday() {
+                let date = new Date();
+                let y = date.getFullYear();
+                let m = date.getMonth();
+                let d = date.getDate();
+                let week = new Date().getDay();
+                let weekText = ['日', '一', '二', '三', '四', '五', '六'];
+                let formatWeek = '星期' + weekText[week];
+                let today = {
+                    date: y + '-' + this.formatNum(m + 1) + '-' + this.formatNum(d),
+                    week: formatWeek
+                };
+                return today;
+            },
+            // 获取当前月份数据
+            monthDay(y, month) {
+                let dates = [];
+                let m = Number(month);
+                let firstDayOfMonth = new Date(y, m - 1, 1).getDay(); // 当月第一天星期几
+                let lastDateOfMonth = new Date(y, m, 0).getDate(); // 当月最后一天
+                let lastDayOfLastMonth = new Date(y, m - 2, 0).getDate(); // 上一月的最后一天
+                let weekstart = this.weekstart == 7 ? 0 : this.weekstart;
+                let startDay = (() => {
+                    // 周初有几天是上个月的
+                    if (firstDayOfMonth == weekstart) {
+                        return 0;
+                    } else if (firstDayOfMonth > weekstart) {
+                        return firstDayOfMonth - weekstart;
+                    } else {
+                        return 7 - weekstart + firstDayOfMonth;
+                    }
+                })();
+                let endDay = 7 - ((startDay + lastDateOfMonth) % 7); // 结束还有几天是下个月的
+                for (let i = 1; i <= startDay; i++) {
+                    dates.push({
+                        date: this.formatNum(lastDayOfLastMonth - startDay + i),
+                        day: weekstart + i - 1 || 7,
+                        month: m - 1 >= 0 ? this.formatNum(m - 1) : 12,
+                        year: m - 1 >= 0 ? y : y - 1
+                    });
+                }
+                for (let j = 1; j <= lastDateOfMonth; j++) {
+                    dates.push({
+                        date: this.formatNum(j),
+                        day: (j % 7) + firstDayOfMonth - 1 || 7,
+                        month: this.formatNum(m),
+                        year: y,
+                        isCurM: true //是否当前月份
+                    });
+                }
+                for (let k = 1; k <= endDay; k++) {
+                    dates.push({
+                        date: this.formatNum(k),
+                        day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
+                        month: m + 1 <= 11 ? this.formatNum(m + 1) : 0,
+                        year: m + 1 <= 11 ? y : y + 1
+                    });
+                }
+                // console.log(dates);
+                return dates;
+            },
+            isWorkDay(y, m, d) {
+                //是否工作日
+                let ymd = `${y}/${m}/${d}`;
+                let formatDY = new Date(ymd.replace(/-/g, '/'));
+                let week = formatDY.getDay();
+                if (week == 0 || week == 6) {
                     return false;
+                } else {
+                    return true;
+                }
+            },
+            isFutureDay(y, m, d) {
+                //是否未来日期
+                let ymd = `${y}/${m}/${d}`;
+                let formatDY = new Date(ymd.replace(/-/g, '/'));
+                let showTime = formatDY.getTime();
+                let curTime = new Date().getTime();
+                if (showTime > curTime) {
+                    return true;
+                } else {
+                    return false;
+                }
+            },
+            // 标记日期
+            isMarkDay(y, m, d) {
+                let flag = false;
+                for (let i = 0; i < this.markDays.length; i++) {
+                    let dy = `${y}-${m}-${d}`;
+                    if (this.markDays[i] == dy) {
+                        flag = true;
+                        break;
+                    }
+                }
+                return flag;
+            },
+            isToday(y, m, d) {
+                let checkD = y + '-' + m + '-' + d;
+                let today = this.getToday().date;
+                if (checkD == today) {
+                    return true;
+                } else {
+                    return false;
+                }
+            },
+            // 展开收起
+            toggle() {
+                this.monthOpen = !this.monthOpen;
+                if (this.monthOpen) {
+                    this.positionTop = 0;
+                } else {
+                    let index = -1;
+                    this.dates.forEach((i, x) => {
+                        this.isToday(i.year, i.month, i.date) && (index = x);
+                    });
+                    this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 80;
+                }
+            },
+            // 点击回调
+            selectOne(i, event) {
+                let date = `${i.year}-${i.month}-${i.date}`;
+                let selectD = new Date(date).getTime();
+                let curTime = new Date().getTime();
+                let week = new Date(date).getDay();
+                let weekText = ['日', '一', '二', '三', '四', '五', '六'];
+                let formatWeek = '星期' + weekText[week];
+                let response = {
+                    date: date,
+                    week: formatWeek
+                };
+                if (!i.isCurM) {
+                    // console.log('不在当前月范围内');
+                    return false;
+                }
+                if (selectD > curTime) {
+                    if (this.disabledAfter == true) {
+                        this.$emit('onDayClick', false);
+                        ;
+                        return false;
+                    } else {
+                        this.choose = date;
+                        this.$emit('onDayClick', response);
+                    }
                 } else {
                     this.choose = date;
                     this.$emit('onDayClick', response);
                 }
-            } else {
-                this.choose = date;
-                this.$emit('onDayClick', response);
-            }
-        },
-        //改变年月
-        changYearMonth(y, m) {
-            this.dates = this.monthDay(y, m);
-            this.y = y;
-            this.m = m;
-        },
-        changeMonth(type){
-            if(type=='pre'){
-               if (this.m + 1 == 2) {
-                   this.m = 12;
-                   this.y = this.y - 1;
-               } else {
-                   this.m = this.m - 1;
-               } 
-            }else{
-                if (this.m + 1 == 13) {
-                    this.m = 1;
-                    this.y = this.y + 1;
+            },
+            //改变年月
+            changYearMonth(y, m) {
+                this.dates = this.monthDay(y, m);
+                this.y = y;
+                this.m = m;
+            },
+            changeMonth(type) {
+                if (type == 'pre') {
+                    if (this.m + 1 == 2) {
+                        this.m = 12;
+                        this.y = this.y - 1;
+                    } else {
+                        this.m = this.m - 1;
+                    }
                 } else {
-                    this.m = this.m + 1;
+                    if (this.m + 1 == 13) {
+                        this.m = 1;
+                        this.y = this.y + 1;
+                    } else {
+                        this.m = this.m + 1;
+                    }
                 }
+
+                let m = this.m
+                if (this.m < 10) {
+                    m = '0' + this.m
+                }
+
+                let vuex_now_date = this.y + "年" + m + "月"
+                this.$u.vuex("vuex_now_date", vuex_now_date)
+
+                this.dates = this.monthDay(this.y, this.m);
             }
-			
-			let m=this.m
-			if (this.m<10) {
-				m='0'+this.m
-			}
-			
-			let vuex_now_date=this.y+"年"+m+"月"
-			this.$u.vuex("vuex_now_date",vuex_now_date)
-			
-            this.dates = this.monthDay(this.y, this.m);
         }
-    }
-};
+    };
 </script>
 
 <style lang="scss" scoped>
-.calendar-wrapper {
-    color: #c5c5c5;
-    font-size: 26rpx;
-    text-align: center;
-    background-color: #5064eb;
-    padding-bottom: 10rpx;
-    
-    .header{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 88rpx;
-        color: #42464A;
-        font-size: 32rpx;
-        font-weight: bold;
-        border-bottom: 2rpx solid #f2f2f2;
-        .pre,.next{
-              color: #5064eb;
-              font-size: 28rpx;
-              font-weight: normal;
-              padding: 8rpx 15rpx;
-              border-radius: 10rpx;
-              border: 2rpx solid #dcdfe6;
-        }
-        .pre{
-            margin-right: 30rpx;
-        }
-        .next{
-            margin-left: 30rpx;
-        }
-    }
+    .calendar-wrapper {
+        color: #c5c5c5;
+        font-size: 26 rpx;
+        text-align: center;
+        background-color: #5064eb;
+        padding-bottom: 10 rpx;
 
-    .week {
-        display: flex;
-        align-items: center;
-        height: 80rpx;
-        line-height: 80rpx;
-        border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
+        .header {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 88 rpx;
+            color: #42464A;
+            font-size: 32 rpx;
+            font-weight: bold;
+            border-bottom: 2 rpx solid #f2f2f2;
 
-        view {
-            flex: 1;
-        }
-    }
+            .pre, .next {
+                color: #5064eb;
+                font-size: 28 rpx;
+                font-weight: normal;
+                padding: 8 rpx 15 rpx;
+                border-radius: 10 rpx;
+                border: 2 rpx solid #dcdfe6;
+            }
+
+            .pre {
+                margin-right: 30 rpx;
+            }
 
-    .content {
-        position: relative;
-        overflow: hidden;
-        transition: height 0.4s ease;
+            .next {
+                margin-left: 30 rpx;
+            }
+        }
 
-        .days {
-            transition: top 0.3s;
+        .week {
             display: flex;
             align-items: center;
-            flex-wrap: wrap;
+            height: 80 rpx;
+            line-height: 80 rpx;
+            border-bottom: 1 rpx solid rgba(255, 255, 255, 0.2);
+
+            view {
+                flex: 1;
+            }
+        }
+
+        .content {
             position: relative;
+            overflow: hidden;
+            transition: height 0.4s ease;
 
-            .item {
-				font-size: 30rpx;
+            .days {
+                transition: top 0.3s;
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
                 position: relative;
-                display: block;
-                height: 95rpx;
-                line-height: 95rpx;
-                width: calc(100% / 7);
-
-                .day {
-                    font-style: normal;
-                    display: inline-block;
-                    vertical-align: middle;
-                    width: 70rpx;
-                    height: 70rpx;
-                    line-height: 70rpx;
-                    overflow: hidden;
-                    border-radius: 60rpx;
-
-                    &.choose {
-                        background-color: #FFFFFF;
-                        color: #5064eb;
+
+                .item {
+                    font-size: 30 rpx;
+                    position: relative;
+                    display: block;
+                    height: 95 rpx;
+                    line-height: 95 rpx;
+                    width: calc(100% / 7);
+
+                    .day {
+                        font-style: normal;
+                        display: inline-block;
+                        vertical-align: middle;
+                        width: 70 rpx;
+                        height: 70 rpx;
+                        line-height: 70 rpx;
+                        overflow: hidden;
+                        border-radius: 60 rpx;
+
+                        &.choose {
+                            background-color: #FFFFFF;
+                            color: #5064eb;
+                        }
+
+                        &.nolm {
+                            color: #5064eb;
+                            opacity: 0.3;
+                        }
                     }
 
-                    &.nolm {
-                        color: #5064eb;
-                        opacity: 0.3;
+                    .isWorkDay {
+                        color: #fff;
                     }
-                }
-                .isWorkDay {
-                    color: #fff;
-                }
 
-                .notSigned {
-                    font-style: normal;
-                    width: 8rpx;
-                    height: 8rpx;
-                    background: #fa7268;
-                    border-radius: 10rpx;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 0;
-                    pointer-events: none;
-                }
-                .today {
-                    color: #fff;
-                    background-color: #a8c0ff;
-                }
-                .workDay {
-                    font-style: normal;
-                    width: 8rpx;
-                    height: 8rpx;
-                    background: #4d7df9;
-                    border-radius: 10rpx;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 0;
-                    pointer-events: none;
-                }
-                .markDay{
-					font-weight: 800;
-                    font-style: normal;
-                    width: 10rpx;
-                    height: 10rpx;
-                    border-radius: 10rpx;
-					background: #5ebd8a;
-                    position: absolute;
-                    left: calc(50% - 6rpx);
-                    bottom: 15rpx;
-                    pointer-events: none;
+                    .notSigned {
+                        font-style: normal;
+                        width: 8 rpx;
+                        height: 8 rpx;
+                        background: #fa7268;
+                        border-radius: 10 rpx;
+                        position: absolute;
+                        left: 50%;
+                        bottom: 0;
+                        pointer-events: none;
+                    }
+
+                    .today {
+                        color: #fff;
+                        background-color: #a8c0ff;
+                    }
+
+                    .workDay {
+                        font-style: normal;
+                        width: 8 rpx;
+                        height: 8 rpx;
+                        background: #4d7df9;
+                        border-radius: 10 rpx;
+                        position: absolute;
+                        left: 50%;
+                        bottom: 0;
+                        pointer-events: none;
+                    }
+
+                    .markDay {
+                        font-weight: 800;
+                        font-style: normal;
+                        width: 10 rpx;
+                        height: 10 rpx;
+                        border-radius: 10 rpx;
+                        background: #5ebd8a;
+                        position: absolute;
+                        left: calc(50% - 6rpx);
+                        bottom: 15 rpx;
+                        pointer-events: none;
+                    }
                 }
             }
         }
-    }
 
-    .hide {
-        height: 80rpx !important;
-    }
+        .hide {
+            height: 80 rpx !important;
+        }
 
-    .weektoggle {
-        width: 85rpx;
-        height: 32rpx;
-        position: relative;
-        bottom: -42rpx;
-        &.down {
-            transform: rotate(180deg);
-            bottom: 0;
+        .weektoggle {
+            width: 85 rpx;
+            height: 32 rpx;
+            position: relative;
+            bottom: -42rpx;
+
+            &.down {
+                transform: rotate(180deg);
+                bottom: 0;
+            }
         }
     }
-}
 </style>

mini-program/garden-wxapp/components/car-card/car-card.vue

@@ -1,125 +1,133 @@
 <template>
-	<view >
-		<view class="recommend-info" >
-		  <view class="goods-list">
-		    <view @click="showDetail(item)"  class="list" v-for="(item,index) in list" :key="index">
-		      <view class="pictrue" >
-		        <image :src="item.outImgPath?item.outImgPath:'/static/index/noimg3.png'" mode="scaleToFill"></image>
-				<view class="car">{{item.carNo}}</view>
-		      </view>
-			  <view class="content">
-				  <view class="">
-						<text class="cuIcon-time margin-right-10"></text>
-						<text>进：{{formatDate(item.enterTime)}}</text>
-				  </view>
-				  <view style="padding-top: 8rpx;">
-						<text class="cuIcon-time margin-right-10"></text>
-						<text>出：{{formatDate(item.outTime)}}</text>
-				  </view>
-				  
-				  <view class="flex justify-center" style="margin: 20rpx 0;">
-				  	<view  class="cu-btn line-blue round df" style="width: 70%;">
-				  		查看详情
-				  	</view>
-				  </view>
-			  </view>
-		    </view>
-		  </view>
-		</view>
-	</view>
+    <view>
+        <view class="recommend-info">
+            <view class="goods-list">
+                <view @click="showDetail(item)" class="list" v-for="(item,index) in list" :key="index">
+                    <view class="pictrue">
+                        <image :src="item.outImgPath?item.outImgPath:'/static/index/noimg3.png'"
+                               mode="scaleToFill"></image>
+                        <view class="car">{{item.carNo}}</view>
+                    </view>
+                    <view class="content">
+                        <view class="">
+                            <text class="cuIcon-time margin-right-10"></text>
+                            <text>进：{{formatDate(item.enterTime)}}</text>
+                        </view>
+                        <view style="padding-top: 8rpx;">
+                            <text class="cuIcon-time margin-right-10"></text>
+                            <text>出：{{formatDate(item.outTime)}}</text>
+                        </view>
+
+                        <view class="flex justify-center" style="margin: 20rpx 0;">
+                            <view class="cu-btn line-blue round df" style="width: 70%;">
+                                查看详情
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		props:{
-			list: {
-				type: Array,
-				default: () => {
-					return []
-				}
-			}
-		},
-		data() {
-			return {
-				
-			}
-		},
-		computed:{
-			formatDate(){
-				return val=>{
-					if (this.$isEmpty(val)) {
-						return '未知'
-					}
-					return this.$u.timeFormat(new Date(val).getTime(), 'mm-dd hh:MM:ss') 
-				}
-			},
-		},
-		methods: {
-			showDetail(item){
-				uni.navigateTo({
-					url:"/pages/index/car/detail?id="+item.id
-				})
-			}
-		}
-	}
+    export default {
+        props: {
+            list: {
+                type: Array,
+                default: () => {
+                    return []
+                }
+            }
+        },
+        data() {
+            return {}
+        },
+        computed: {
+            formatDate() {
+                return val => {
+                    if (this.$isEmpty(val)) {
+                        return '未知'
+                    }
+                    return this.$u.timeFormat(new Date(val).getTime(), 'mm-dd hh:MM:ss')
+                }
+            },
+        },
+        methods: {
+            showDetail(item) {
+                uni.navigateTo({
+                    url: "/pages/index/car/detail?id=" + item.id
+                })
+            }
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	/* 为你推荐 */
-	.recommend-info{
-	  width: 100%;
-	  .recommend-title{
-	    display: flex;
-	    align-items: center;
-	    justify-content: center;
-	    width: 100%;
-	    height: 100rpx;
-	    .title{
-	      display: flex;
-	      align-items: center;
-	      image{
-	        width: 416rpx;
-	        height: 40rpx;
-	      }
-	    }
-	  }
-	  .goods-list{
-	    display: flex;
-	    flex-wrap: wrap;
-	    justify-content: space-between;
-	    padding: 0 30rpx;
-	    .list{
-	      width: 49%;
-	      height: 540rpx;
-	      margin-bottom: 20rpx;
-	      background-color: #FFFFFF;
-	      border-radius: 10rpx;
-	      overflow: hidden;
-	      .pictrue{
-	        width: 100%;
-			position: relative;
-	        image{
-				border-top-right-radius: 12rpx;
-				border-top-left-radius: 12rpx;
-	            height: 330rpx;
-	        }
-			.car{
-				position: absolute;
-				bottom: 20rpx;
-				left: 10rpx;
-				color: #FFFFFF;
-			}
-	      }
-		  
-		  .content{
-			  padding: 20rpx;
-			  text{
-				  padding: 10rpx 0;
-			  }
-		  }
-	      
-	    }
-	  }
-	}
+    /* 为你推荐 */
+    .recommend-info {
+        width: 100%;
+
+        .recommend-title {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100 rpx;
+
+            .title {
+                display: flex;
+                align-items: center;
+
+                image {
+                    width: 416 rpx;
+                    height: 40 rpx;
+                }
+            }
+        }
+
+        .goods-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            padding: 0 30 rpx;
+
+            .list {
+                width: 49%;
+                height: 540 rpx;
+                margin-bottom: 20 rpx;
+                background-color: #FFFFFF;
+                border-radius: 10 rpx;
+                overflow: hidden;
+
+                .pictrue {
+                    width: 100%;
+                    position: relative;
+
+                    image {
+                        border-top-right-radius: 12 rpx;
+                        border-top-left-radius: 12 rpx;
+                        height: 330 rpx;
+                    }
+
+                    .car {
+                        position: absolute;
+                        bottom: 20 rpx;
+                        left: 10 rpx;
+                        color: #FFFFFF;
+                    }
+                }
+
+                .content {
+                    padding: 20 rpx;
+
+                    text {
+                        padding: 10 rpx 0;
+                    }
+                }
+
+            }
+        }
+    }
 
 </style>

mini-program/garden-wxapp/components/cl-tabs/cl-tabs.vue

@@ -1,354 +1,362 @@
 <template>
-	<view class="tabs">
-		<scroll-view class="tab-bar" :scroll="false" scroll-x scroll-with-animation
-			:show-scrollbar="false" :scroll-into-view="scrollInto">
-			<view class="tab-box" id="tab-box" :style="{justifyContent: center?'center':'flex-start'}">
-				<view v-for="(item,index) in tabBars" class="tab" @tap="tapTab(index)" :id="`tab_${index}`" ref="tab" :key="index" >
-					<view :animation="animationData[index]" class="title" :id="`text_${index}`" :style="{color:index==tabIndex?selectColor:textColor,width:tabWidth}">{{item.tab||item}}</view>
-				</view>
-				<block v-if="type!='default'">
-					<view :class="[type]" :animation="animationSlider" ref="slider" id="slider" :style="sliderBgColor+sliderPosition"></view>
-				</block>
-			</view>
-		</scroll-view>
-		
-	</view>
-	
+    <view class="tabs">
+        <scroll-view class="tab-bar" :scroll="false" scroll-x scroll-with-animation
+                     :show-scrollbar="false" :scroll-into-view="scrollInto">
+            <view class="tab-box" id="tab-box" :style="{justifyContent: center?'center':'flex-start'}">
+                <view v-for="(item,index) in tabBars" class="tab" @tap="tapTab(index)" :id="`tab_${index}`" ref="tab"
+                      :key="index">
+                    <view :animation="animationData[index]" class="title" :id="`text_${index}`"
+                          :style="{color:index==tabIndex?selectColor:textColor,width:tabWidth}">{{item.tab||item}}
+                    </view>
+                </view>
+                <block v-if="type!='default'">
+                    <view :class="[type]" :animation="animationSlider" ref="slider" id="slider"
+                          :style="sliderBgColor+sliderPosition"></view>
+                </block>
+            </view>
+        </scroll-view>
+
+    </view>
+
 </template>
 
 <script>
-	const sysWidth = uni.getSystemInfoSync().screenWidth
-	export default{
-		props:{
-			tabBars:{
-				type:Array,
-				default:()=>[]
-			},
-			tabIndex: {
-				type: Number,
-				default: -1
-			},
-			scale: { //放大倍数
-				type: Number,
-				default: 1
-			},
-			type: { //类型fill文字被包含 float文字上浮 hang悬空
-				type: String,
-				default: 'default'
-			},
-			aniType:{ //动画类型  extend
-				type: String,
-				default: 'default'
-			},
-			sliderColor: { //滑块颜色
-				type: String,
-				default: '#ff461f'
-			},
-			textColor: { //字体颜色
-				type: String,
-				default: 'black'
-			},
-			selectColor:{ //选中字体颜色
-				type: String,
-				default: 'black'
-			},
-			sliderMargin:{ //延长滑块
-				type: Number,
-				default: 0
-			},
-			tabWidth:{ //tab宽度
-				type: String,
-				default: ''
-			},
-			center:{ //居中
-				type: Boolean,
-				default: false
-			},
-		},
-		data(){
-			return{
-				animationData:{},
-				largeAni:null,
-				sliderAni:null,
-				sliderAniEnd:null,
-				animationSlider:{},
-				sliderLeft:0,
-				sliderRight:0,
-				sliderWidth:0,//滑块宽度
-				sliderMove:0,//滑块移动距离
-				scrollInto:'',
-				pos:0,
-				direction:1
-			}
-		},
-		created() {
-			
-			//放大动画
-			this.largeAni = uni.createAnimation({duration:0});
-			//滑块动画
-			this.sliderAni = uni.createAnimation({duration:0});
-			this.sliderAniEnd = uni.createAnimation({duration:100});
-		},
-		mounted() {
-			
-		},
-		methods:{
-			promise(time=0){
-				let promise = new Promise((resolve,reject)=>{
-					setTimeout(()=>{
-						resolve()
-					},time)
-				})
-				return promise
-			},
-			getDataByEl(el){
-				let promise = new Promise((resolve,reject)=>{
-					let tab = uni.createSelectorQuery().in(this)
-					tab.select(el).boundingClientRect()
-					tab.exec(async (tabData) => {
-						resolve(tabData[0])
-					})
-				})
-				return promise
-			},
-			//点击
-			async tapTab(index){
-				this.$emit('tabChange',index)
-			},
-			//触摸
-			move(dx){
-				//计算滑动index
-				let ratio = dx/sysWidth
-				
-				//计算率
-				let yRatio = dx%sysWidth/sysWidth
-				
-				//两边禁止
-				if(this.tabIndex+ratio>=this.tabBars.length-1||this.tabIndex+ratio<=0) return
-				
-				
-				if(this.aniType=='extend'){
-					this.extendAni(ratio,yRatio)
-				}else if(this.aniType=='default'){
-					this.defaultAni(ratio,yRatio)
-				}else if(this.aniType=='movExtend'){
-					this.movExtendAni(ratio,yRatio)
-					
-				}
-				
-				this.textAni(ratio,yRatio)
-				
-				
-				
-			},
-			defaultAni(ratio,yRatio){
-				let yR = Math.abs(yRatio*2)>1?1:yRatio*2
-				let translateX = this.sliderMove * ratio
-				
-				this.sliderAni.left(this.sliderLeft + translateX).step()
-				this.animationSlider = this.sliderAni.export()
-				
-			},
-			movExtendAni(ratio,yRatio){
-				let yR = Math.abs(yRatio*2)>1?1:yRatio*2
-				let maxTranslateX = this.sliderMove/2*ratio/Math.abs(ratio)
-				let translateX = Math.abs(this.sliderMove * ratio)>Math.abs(maxTranslateX)?maxTranslateX:this.sliderMove * ratio
-				let width = this.sliderWidth+this.sliderMove*Math.floor(Math.abs(ratio))+this.sliderMove*Math.abs(yR) - Math.abs(translateX)
-				
-				this.sliderAni.width(width).step()
-				this.animationSlider = this.sliderAni.export()
-				
-				if(width+Math.abs(translateX)>this.sliderWidth+this.sliderMove) return
-				
-				this.sliderAni.translateX(translateX).step()
-				this.animationSlider = this.sliderAni.export()
-				if(ratio<0){
-					this.direction = -1
-					this.pos = sysWidth - this.sliderRight
-				}else if(ratio>0){
-					this.direction = 1
-					this.pos = this.sliderLeft
-				}
-			},
-			extendAni(ratio,yRatio){
-				let yR = Math.abs(yRatio*2)>1?1:yRatio*2
-				let width = this.sliderWidth+this.sliderMove*Math.floor(Math.abs(ratio))+this.sliderMove*Math.abs(yR)
-				if(ratio<0){
-					this.direction = -1
-					this.pos = sysWidth - this.sliderRight
-				}else if(ratio>0){
-					this.direction = 1
-					this.pos = this.sliderLeft
-				}
-
-				this.sliderAni.width(width).step()
-				this.animationSlider = this.sliderAni.export()
-			},
-			textAni(ratio,yRatio){
-				//取到结果值
-				let currentIndex = ratio>0?Math.ceil(this.tabIndex+ratio):Math.floor(this.tabIndex+ratio)
-				
-				let scale = this.scale+(1-this.scale)*(Math.abs(yRatio)) < 1 ? 1:this.scale+(1-this.scale)*(Math.abs(yRatio))
-				
-				if(yRatio!=0){
-					//复原
-					this.largeAni.scale( scale ).step()
-					this.animationData[currentIndex-(ratio>0?1:-1)] = this.largeAni.export()
-					
-					
-					scale = 1-(1-this.scale)*(Math.abs(yRatio))>this.scale ? this.scale:1-(1-this.scale)*(Math.abs(yRatio))
-					//放大
-					this.largeAni.scale( scale ).step()
-					this.animationData[currentIndex] = this.largeAni.export()
-				}
-			},
-			async reset(newVal,oldVal){
-				if(this.aniType=='movExtend'&&oldVal!=-1){
-					if(newVal>oldVal){
-						this.direction = -1
-						this.pos = sysWidth - this.sliderRight -(newVal-oldVal)*this.sliderMove
-					}else if(newVal<oldVal){
-						this.direction = 1
-						this.pos = this.sliderLeft + (newVal-oldVal)*this.sliderMove
-					}
-					await this.promise()
-					this.sliderAni.width(this.sliderMove/2+this.sliderWidth).translateX(0).step()
-					
-					this.animationSlider = this.sliderAni.export()
-				}
-				
-				
-				let res = await this.getDataByEl('#tab-box')
-				let tab = await this.getDataByEl(`#tab_${this.tabIndex}`)
-				let tabData = await this.getDataByEl(`#text_${this.tabIndex}`)
-				
-				
-				this.sliderLeft = tabData.left - res.left - this.sliderMargin/2
-				this.sliderRight = tabData.right - res.left + this.sliderMargin/2
-				this.sliderWidth = tabData.width + this.sliderMargin
-				//滑块移动距离
-				this.sliderMove = tab.width
-	
-				
-				if(this.aniType=='default'){
-					await this.promise()
-					this.sliderAni.left(this.sliderLeft).step()
-					this.animationSlider = this.sliderAni.export()
-				}else if(this.aniType=='extend'||this.aniType=='movExtend'){
-					if(oldVal==-1){
-						this.pos = this.sliderLeft
-						return
-					}
-					if(newVal>oldVal){
-						this.direction = -1
-						this.pos = sysWidth - this.sliderRight 
-					}else if(newVal<oldVal){
-						this.direction = 1
-						this.pos = this.sliderLeft
-					}
-			
-					this.sliderAniEnd.width(this.sliderWidth).step()
-					this.animationSlider = this.sliderAniEnd.export()
-				}
-				
-					
-					
-			
-			}
-		},
-		watch:{
-			tabBars:{
-				immediate:true,
-				handler(newVal,oldVal){
-					for (var i = 0; i < newVal.length; i++) {
-						let a = {}
-						a[i] = {}
-						this.animationData = {...this.animationData,...a}
-					}
-				}
-			},
-			tabIndex:{
-				handler:async function(newVal,oldVal){
-					
-					for (let key in this.animationData) {
-						if(key!=this.tabIndex){
-							this.largeAni.scale( 1 ).step()
-							this.animationData[key] = this.largeAni.export()
-						}else{
-							this.largeAni.scale( this.scale ).step()
-							this.animationData[this.tabIndex] = this.largeAni.export()
-						}
-					}
-					await this.promise()
-					
-					this.reset(newVal,oldVal)
-					await this.promise(250)
-					let scrollTab = newVal-2>0?newVal-2:0
-					this.scrollInto = `tab_${scrollTab}`
-				}
-			},
-		},
-		computed:{
-			sliderBgColor(){
-				return `background-color:${this.sliderColor};width:${this.sliderWidth}px;`
-			},
-			sliderPosition(){
-				let pos = this.direction > 0?`left:${this.pos}px;`:`right:${this.pos}px;`
-				if(this.aniType=='default') pos=''
-				return pos
-			}
-		}
-	}
+    const sysWidth = uni.getSystemInfoSync().screenWidth
+    export default {
+        props: {
+            tabBars: {
+                type: Array,
+                default: () => []
+            },
+            tabIndex: {
+                type: Number,
+                default: -1
+            },
+            scale: { //放大倍数
+                type: Number,
+                default: 1
+            },
+            type: { //类型fill文字被包含 float文字上浮 hang悬空
+                type: String,
+                default: 'default'
+            },
+            aniType: { //动画类型  extend
+                type: String,
+                default: 'default'
+            },
+            sliderColor: { //滑块颜色
+                type: String,
+                default: '#ff461f'
+            },
+            textColor: { //字体颜色
+                type: String,
+                default: 'black'
+            },
+            selectColor: { //选中字体颜色
+                type: String,
+                default: 'black'
+            },
+            sliderMargin: { //延长滑块
+                type: Number,
+                default: 0
+            },
+            tabWidth: { //tab宽度
+                type: String,
+                default: ''
+            },
+            center: { //居中
+                type: Boolean,
+                default: false
+            },
+        },
+        data() {
+            return {
+                animationData: {},
+                largeAni: null,
+                sliderAni: null,
+                sliderAniEnd: null,
+                animationSlider: {},
+                sliderLeft: 0,
+                sliderRight: 0,
+                sliderWidth: 0,//滑块宽度
+                sliderMove: 0,//滑块移动距离
+                scrollInto: '',
+                pos: 0,
+                direction: 1
+            }
+        },
+        created() {
+
+            //放大动画
+            this.largeAni = uni.createAnimation({duration: 0});
+            //滑块动画
+            this.sliderAni = uni.createAnimation({duration: 0});
+            this.sliderAniEnd = uni.createAnimation({duration: 100});
+        },
+        mounted() {
+
+        },
+        methods: {
+            promise(time = 0) {
+                let promise = new Promise((resolve, reject) => {
+                    setTimeout(() => {
+                        resolve()
+                    }, time)
+                })
+                return promise
+            },
+            getDataByEl(el) {
+                let promise = new Promise((resolve, reject) => {
+                    let tab = uni.createSelectorQuery().in(this)
+                    tab.select(el).boundingClientRect()
+                    tab.exec(async (tabData) => {
+                        resolve(tabData[0])
+                    })
+                })
+                return promise
+            },
+            //点击
+            async tapTab(index) {
+                this.$emit('tabChange', index)
+            },
+            //触摸
+            move(dx) {
+                //计算滑动index
+                let ratio = dx / sysWidth
+
+                //计算率
+                let yRatio = dx % sysWidth / sysWidth
+
+                //两边禁止
+                if (this.tabIndex + ratio >= this.tabBars.length - 1 || this.tabIndex + ratio <= 0) return
+
+
+                if (this.aniType == 'extend') {
+                    this.extendAni(ratio, yRatio)
+                } else if (this.aniType == 'default') {
+                    this.defaultAni(ratio, yRatio)
+                } else if (this.aniType == 'movExtend') {
+                    this.movExtendAni(ratio, yRatio)
+
+                }
+
+                this.textAni(ratio, yRatio)
+
+
+            },
+            defaultAni(ratio, yRatio) {
+                let yR = Math.abs(yRatio * 2) > 1 ? 1 : yRatio * 2
+                let translateX = this.sliderMove * ratio
+
+                this.sliderAni.left(this.sliderLeft + translateX).step()
+                this.animationSlider = this.sliderAni.export()
+
+            },
+            movExtendAni(ratio, yRatio) {
+                let yR = Math.abs(yRatio * 2) > 1 ? 1 : yRatio * 2
+                let maxTranslateX = this.sliderMove / 2 * ratio / Math.abs(ratio)
+                let translateX = Math.abs(this.sliderMove * ratio) > Math.abs(maxTranslateX) ? maxTranslateX : this.sliderMove * ratio
+                let width = this.sliderWidth + this.sliderMove * Math.floor(Math.abs(ratio)) + this.sliderMove * Math.abs(yR) - Math.abs(translateX)
+
+                this.sliderAni.width(width).step()
+                this.animationSlider = this.sliderAni.export()
+
+                if (width + Math.abs(translateX) > this.sliderWidth + this.sliderMove) return
+
+                this.sliderAni.translateX(translateX).step()
+                this.animationSlider = this.sliderAni.export()
+                if (ratio < 0) {
+                    this.direction = -1
+                    this.pos = sysWidth - this.sliderRight
+                } else if (ratio > 0) {
+                    this.direction = 1
+                    this.pos = this.sliderLeft
+                }
+            },
+            extendAni(ratio, yRatio) {
+                let yR = Math.abs(yRatio * 2) > 1 ? 1 : yRatio * 2
+                let width = this.sliderWidth + this.sliderMove * Math.floor(Math.abs(ratio)) + this.sliderMove * Math.abs(yR)
+                if (ratio < 0) {
+                    this.direction = -1
+                    this.pos = sysWidth - this.sliderRight
+                } else if (ratio > 0) {
+                    this.direction = 1
+                    this.pos = this.sliderLeft
+                }
+
+                this.sliderAni.width(width).step()
+                this.animationSlider = this.sliderAni.export()
+            },
+            textAni(ratio, yRatio) {
+                //取到结果值
+                let currentIndex = ratio > 0 ? Math.ceil(this.tabIndex + ratio) : Math.floor(this.tabIndex + ratio)
+
+                let scale = this.scale + (1 - this.scale) * (Math.abs(yRatio)) < 1 ? 1 : this.scale + (1 - this.scale) * (Math.abs(yRatio))
+
+                if (yRatio != 0) {
+                    //复原
+                    this.largeAni.scale(scale).step()
+                    this.animationData[currentIndex - (ratio > 0 ? 1 : -1)] = this.largeAni.export()
+
+
+                    scale = 1 - (1 - this.scale) * (Math.abs(yRatio)) > this.scale ? this.scale : 1 - (1 - this.scale) * (Math.abs(yRatio))
+                    //放大
+                    this.largeAni.scale(scale).step()
+                    this.animationData[currentIndex] = this.largeAni.export()
+                }
+            },
+            async reset(newVal, oldVal) {
+                if (this.aniType == 'movExtend' && oldVal != -1) {
+                    if (newVal > oldVal) {
+                        this.direction = -1
+                        this.pos = sysWidth - this.sliderRight - (newVal - oldVal) * this.sliderMove
+                    } else if (newVal < oldVal) {
+                        this.direction = 1
+                        this.pos = this.sliderLeft + (newVal - oldVal) * this.sliderMove
+                    }
+                    await this.promise()
+                    this.sliderAni.width(this.sliderMove / 2 + this.sliderWidth).translateX(0).step()
+
+                    this.animationSlider = this.sliderAni.export()
+                }
+
+
+                let res = await this.getDataByEl('#tab-box')
+                let tab = await this.getDataByEl(`#tab_${this.tabIndex}`)
+                let tabData = await this.getDataByEl(`#text_${this.tabIndex}`)
+
+
+                this.sliderLeft = tabData.left - res.left - this.sliderMargin / 2
+                this.sliderRight = tabData.right - res.left + this.sliderMargin / 2
+                this.sliderWidth = tabData.width + this.sliderMargin
+                //滑块移动距离
+                this.sliderMove = tab.width
+
+
+                if (this.aniType == 'default') {
+                    await this.promise()
+                    this.sliderAni.left(this.sliderLeft).step()
+                    this.animationSlider = this.sliderAni.export()
+                } else if (this.aniType == 'extend' || this.aniType == 'movExtend') {
+                    if (oldVal == -1) {
+                        this.pos = this.sliderLeft
+                        return
+                    }
+                    if (newVal > oldVal) {
+                        this.direction = -1
+                        this.pos = sysWidth - this.sliderRight
+                    } else if (newVal < oldVal) {
+                        this.direction = 1
+                        this.pos = this.sliderLeft
+                    }
+
+                    this.sliderAniEnd.width(this.sliderWidth).step()
+                    this.animationSlider = this.sliderAniEnd.export()
+                }
+
+
+            }
+        },
+        watch: {
+            tabBars: {
+                immediate: true,
+                handler(newVal, oldVal) {
+                    for (var i = 0; i < newVal.length; i++) {
+                        let a = {}
+                        a[i] = {}
+                        this.animationData = {...this.animationData, ...a}
+                    }
+                }
+            },
+            tabIndex: {
+                handler: async function (newVal, oldVal) {
+
+                    for (let key in this.animationData) {
+                        if (key != this.tabIndex) {
+                            this.largeAni.scale(1).step()
+                            this.animationData[key] = this.largeAni.export()
+                        } else {
+                            this.largeAni.scale(this.scale).step()
+                            this.animationData[this.tabIndex] = this.largeAni.export()
+                        }
+                    }
+                    await this.promise()
+
+                    this.reset(newVal, oldVal)
+                    await this.promise(250)
+                    let scrollTab = newVal - 2 > 0 ? newVal - 2 : 0
+                    this.scrollInto = `tab_${scrollTab}`
+                }
+            },
+        },
+        computed: {
+            sliderBgColor() {
+                return `background-color:${this.sliderColor};width:${this.sliderWidth}px;`
+            },
+            sliderPosition() {
+                let pos = this.direction > 0 ? `left:${this.pos}px;` : `right:${this.pos}px;`
+                if (this.aniType == 'default') pos = ''
+                return pos
+            }
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-.tabs{
-	background-color: $base-color;
-	width: 750rpx;
-	display: flex;
-	flex-direction: row;
-	padding: 0 0;
-	align-items: center;
-}
-.tab{
-	display: flex;
-	white-space: nowrap;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	height: 90rpx;
-	padding: 10rpx 30rpx;
-	font-size: 30rpx;
-	z-index: 99;
-}
-.title{
-	text-align: center;
-}
-.tab-bar{
-	width: 750rpx;
-	height: 110rpx;
-}
-.tab-box{
-	flex-direction: row;
-	display: flex;
-	position: relative;
-	align-items: center;
-}
-.float{
-	position: absolute;
-	bottom: 6px;
-	height: 20rpx;
-	border-radius: 10rpx;
-}
-.fill{
-	position: absolute;
-	height: 56rpx;
-	border-radius: 50rpx;
-}
-.hang{
-	bottom: 3px;
-	position: absolute;
-	border-radius: 10rpx;
-	height: 5px;
-}
+    .tabs {
+        background-color: $base-color;
+        width: 750 rpx;
+        display: flex;
+        flex-direction: row;
+        padding: 0 0;
+        align-items: center;
+    }
+
+    .tab {
+        display: flex;
+        white-space: nowrap;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 90 rpx;
+        padding: 10 rpx 30 rpx;
+        font-size: 30 rpx;
+        z-index: 99;
+    }
+
+    .title {
+        text-align: center;
+    }
+
+    .tab-bar {
+        width: 750 rpx;
+        height: 110 rpx;
+    }
+
+    .tab-box {
+        flex-direction: row;
+        display: flex;
+        position: relative;
+        align-items: center;
+    }
+
+    .float {
+        position: absolute;
+        bottom: 6px;
+        height: 20 rpx;
+        border-radius: 10 rpx;
+    }
+
+    .fill {
+        position: absolute;
+        height: 56 rpx;
+        border-radius: 50 rpx;
+    }
+
+    .hang {
+        bottom: 3px;
+        position: absolute;
+        border-radius: 10 rpx;
+        height: 5px;
+    }
 </style>

mini-program/garden-wxapp/components/dt_custom_bar.vue

@@ -1,123 +1,143 @@
 <template>
-  <view>
-    <view :style="{ background: background }" class="custom-header-container">
-      <view :style="{height:getStausBarHeight + 'px'}" class="custom-header-status-bar"></view>
-      <view :class="{'ios-center': isIos }" class="custom-header-top-container">
-        <view :style="{color: color}" :class="{isIos: isIos}" class="custom-back-btn iconfont" v-if="showBack" @tap="backTap">
-			<image v-if="color!='#ffffff'" src="https://szsq.nxzhsq.cn/community/miniofile/image/ic_back_black.png" mode="widthFix" style="width: 20px;"></image>
-			<image v-if="color=='#ffffff'" src="https://szsq.nxzhsq.cn/community/miniofile/image/ic_back_white.png" mode="widthFix" style="width: 20px;"></image>
-		</view>
-        <view :style="{color: color}" :class="[{'ios-center': isIos },{'android-left-30':!isIos&&!showBack},{'android-left-80':!isIos&&showBack}]" class="custom-header-title" >{{ title }}</view></view>
+    <view>
+        <view :style="{ background: background }" class="custom-header-container">
+            <view :style="{height:getStausBarHeight + 'px'}" class="custom-header-status-bar"></view>
+            <view :class="{'ios-center': isIos }" class="custom-header-top-container">
+                <view :style="{color: color}" :class="{isIos: isIos}" class="custom-back-btn iconfont" v-if="showBack"
+                      @tap="backTap">
+                    <image v-if="color!='#ffffff'"
+                           src="https://szsq.nxzhsq.cn/community/miniofile/image/ic_back_black.png" mode="widthFix"
+                           style="width: 20px;"></image>
+                    <image v-if="color=='#ffffff'"
+                           src="https://szsq.nxzhsq.cn/community/miniofile/image/ic_back_white.png" mode="widthFix"
+                           style="width: 20px;"></image>
+                </view>
+                <view :style="{color: color}"
+                      :class="[{'ios-center': isIos },{'android-left-30':!isIos&&!showBack},{'android-left-80':!isIos&&showBack}]"
+                      class="custom-header-title">{{ title }}
+                </view>
+            </view>
+        </view>
+        <view :style="{ height: getStausBarHeight + (isIos ? 45 : 48) + 'px' }" class="custom-header-height"></view>
     </view>
-    <view :style="{ height: getStausBarHeight + (isIos ? 45 : 48) + 'px' }" class="custom-header-height"></view>
-  </view>
 </template>
 <script>
-export default {
-    props: {
-      title:{
-        type:String,
-		default:''
-	  },
-      background: {
-        type: String,
-		default:'transparent'
-      },
-      color: {
-        type: String,
-		default:'#ffffff'
-      },
-      showBack: {
-        type: Boolean,
-		default:false
-      },
-    },
-    computed: {
-      getStausBarHeight() {
-        try {
-          const res = uni.getSystemInfoSync();
-          return res.statusBarHeight;
-        } catch(e) {}
-      },
-      isIos() {
-        return uni.getSystemInfoSync().system.indexOf('iOS') > -1
-      }
-    },
-    methods: {
-      backTap() {
-		uni.navigateBack({
-			delta:1
-		})
-      }
+    export default {
+        props: {
+            title: {
+                type: String,
+                default: ''
+            },
+            background: {
+                type: String,
+                default: 'transparent'
+            },
+            color: {
+                type: String,
+                default: '#ffffff'
+            },
+            showBack: {
+                type: Boolean,
+                default: false
+            },
+        },
+        computed: {
+            getStausBarHeight() {
+                try {
+                    const res = uni.getSystemInfoSync();
+                    return res.statusBarHeight;
+                } catch (e) {
+                }
+            },
+            isIos() {
+                return uni.getSystemInfoSync().system.indexOf('iOS') > -1
+            }
+        },
+        methods: {
+            backTap() {
+                uni.navigateBack({
+                    delta: 1
+                })
+            }
+        }
     }
-  }
 </script>
 <style scoped lang="scss">
-	.custom-header-top-container {
-		display:flex;
-		flex-flow:row nowrap;
-		justify-content:flex-start;
-		width:100%;
-		align-items:center;
-		&.ios-center {
-		 justify-content:center;
-	  }
-	}
-	.custom-header-container {
-		z-index:9;
-		width:750upx;
-		display:flex;
-		flex-direction:column;
-		align-items:center;
-		position:fixed;
-		top:0;
-	}
-	.custom-back-btn {
-		height:48px;
-		line-height:48px;
-		width:40px;
-		margin:0;
-		padding:0;
-		border-radius:0 !important;
-		display:flex;
-		align-items:center;
-		justify-content:center;
-		position:absolute;
-		left:0upx;
-		font-size:18px;
-		border-radius:5px;
-		font-weight:500;
-		color:#FFFFFF;
-		&:active {
-		 background:#0D72DF;
-	   }
-	  &.isIos {
-		line-height:45px;
-		height:45px;
-	 }
-	}
-	.custom-header-status-bar {
-		width:100%;
-		top:0;
-		position:sticky;
-		z-index:100;
-	}
-	.custom-header-title {
-		height:48px;
-		line-height:48px;
-		font-size:16px;
-		color:#FFFFFF;
-		&.ios-center {
-			margin-left: 0;
-			line-height:45px;
-			height:45px;
-		}
-		&.android-left-30{
-			margin-left: 30upx;
-		}
-		&.android-left-80{
-			margin-left: 80upx;
-		}
-			
-	}
+    .custom-header-top-container {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+        width: 100%;
+        align-items: center;
+
+        &.ios-center {
+            justify-content: center;
+        }
+    }
+
+    .custom-header-container {
+        z-index: 9;
+        width: 750 upx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: fixed;
+        top: 0;
+    }
+
+    .custom-back-btn {
+        height: 48px;
+        line-height: 48px;
+        width: 40px;
+        margin: 0;
+        padding: 0;
+        border-radius: 0 !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        left: 0 upx;
+        font-size: 18px;
+        border-radius: 5px;
+        font-weight: 500;
+        color: #FFFFFF;
+
+        &:active {
+            background: #0D72DF;
+        }
+
+        &.isIos {
+            line-height: 45px;
+            height: 45px;
+        }
+    }
+
+    .custom-header-status-bar {
+        width: 100%;
+        top: 0;
+        position: sticky;
+        z-index: 100;
+    }
+
+    .custom-header-title {
+        height: 48px;
+        line-height: 48px;
+        font-size: 16px;
+        color: #FFFFFF;
+
+        &.ios-center {
+            margin-left: 0;
+            line-height: 45px;
+            height: 45px;
+        }
+
+        &.android-left-30 {
+            margin-left: 30 upx;
+        }
+
+        &.android-left-80 {
+            margin-left: 80 upx;
+        }
+
+    }
 </style>

mini-program/garden-wxapp/components/hot-consult/hot-consult.vue

@@ -1,101 +1,109 @@
 <template>
-	<view>
-		<view class="container">
-			<view class="flex justify-between" >
-				<block>
-					<view class="flex flex-direction justify-center align-center text-bold" style="width: 120rpx;padding-left: 20rpx;">
-						<view :style="{color:title1.color}" style="font-family:Arial, Helvetica, sans-serif;font-size: 32rpx;">
-							{{title1.text}}
-						</view>
-						<view :style="{color:title2.color}" style="font-family:Arial, Helvetica, sans-serif;font-size: 32rpx;">
-							{{title2.text}}
-						</view>
-					</view>
-					<!-- <view class="cu-avatar text-font"  style="background-image:url(https://szsq.nxzhsq.cn/community/miniofile/app/notice.png);"></view> -->
-					<view class="margin-top-xs" style="width: 680rpx">
-						<swiper :circular="true" class="swiper" autoplay="true" vertical="true" interval="5000" next-margin="46rpx">
-							<swiper-item v-for="(item, index) in swiperTexts" :key="index" @click="detailTap(item)">
-								<view class="swiper-item" > 
-									<text :style="{color:title1.color}" class="text-bold cuIcon-title padding-right-sm"></text>
-									<text>{{item.title}} : {{item.notice | formatHtml}}</text>
-								</view>
-							</swiper-item>
-						</swiper>
-					</view>
-				</block>
-				<view class="flex align-center justify-center" style="width: 100rpx;" @click="onTap">
-					<text class="cuIcon-right"></text>
-				</view>
-			</view>
-		</view>
-	</view>
+    <view>
+        <view class="container">
+            <view class="flex justify-between">
+                <block>
+                    <view class="flex flex-direction justify-center align-center text-bold"
+                          style="width: 120rpx;padding-left: 20rpx;">
+                        <view :style="{color:title1.color}"
+                              style="font-family:Arial, Helvetica, sans-serif;font-size: 32rpx;">
+                            {{title1.text}}
+                        </view>
+                        <view :style="{color:title2.color}"
+                              style="font-family:Arial, Helvetica, sans-serif;font-size: 32rpx;">
+                            {{title2.text}}
+                        </view>
+                    </view>
+                    <!-- <view class="cu-avatar text-font"  style="background-image:url(https://szsq.nxzhsq.cn/community/miniofile/app/notice.png);"></view> -->
+                    <view class="margin-top-xs" style="width: 680rpx">
+                        <swiper :circular="true" class="swiper" autoplay="true" vertical="true" interval="5000"
+                                next-margin="46rpx">
+                            <swiper-item v-for="(item, index) in swiperTexts" :key="index" @click="detailTap(item)">
+                                <view class="swiper-item">
+                                    <text :style="{color:title1.color}"
+                                          class="text-bold cuIcon-title padding-right-sm"></text>
+                                    <text>{{item.title}} : {{item.notice | formatHtml}}</text>
+                                </view>
+                            </swiper-item>
+                        </swiper>
+                    </view>
+                </block>
+                <view class="flex align-center justify-center" style="width: 100rpx;" @click="onTap">
+                    <text class="cuIcon-right"></text>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		props: {
-			swiperTexts: {
-				type: Array,
-				default: () => {
-					return []
-				}
-			},
-			title1:{
-				type:Object,
-				default: () => {
-					return {
-						text:'园区',
-						color:'#5064eb'
-					}
-				}
-			},
-			title2:{
-				type:Object,
-				default: () => {
-					return {
-						text:'公告',
-						color:''
-					}
-				}
-			},
-			
-		},
-		filters: {
-			formatHtml (str) {
-				return str.replace(/<[^>]+>/g, "");
-			}
-		},
-		methods: {
-			onTap() {
-				this.$emit('onTap');
-			},
-			detailTap(item) {
-				this.$emit('detailTap',item);
-			}
-		}
-	}
+    export default {
+        props: {
+            swiperTexts: {
+                type: Array,
+                default: () => {
+                    return []
+                }
+            },
+            title1: {
+                type: Object,
+                default: () => {
+                    return {
+                        text: '园区',
+                        color: '#5064eb'
+                    }
+                }
+            },
+            title2: {
+                type: Object,
+                default: () => {
+                    return {
+                        text: '公告',
+                        color: ''
+                    }
+                }
+            },
+
+        },
+        filters: {
+            formatHtml(str) {
+                return str.replace(/<[^>]+>/g, "");
+            }
+        },
+        methods: {
+            onTap() {
+                this.$emit('onTap');
+            },
+            detailTap(item) {
+                this.$emit('detailTap', item);
+            }
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-.container {
-	background-color: #ffffff;
-	height: 110rpx;
-}
-.swiper {
-	height: 90rpx;
-}
-.swiper-item {
-	font-size: 24rpx;
-	color: #323232;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	height: 40rpx; 
-	margin: 6rpx 0rpx;
-}
-.text-font {
-	width: 100rpx;
-	height: 100rpx;
-	margin: 10rpx 10rpx 10rpx 20rpx;
-}
+    .container {
+        background-color: #ffffff;
+        height: 110 rpx;
+    }
+
+    .swiper {
+        height: 90 rpx;
+    }
+
+    .swiper-item {
+        font-size: 24 rpx;
+        color: #323232;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        height: 40 rpx;
+        margin: 6 rpx 0 rpx;
+    }
+
+    .text-font {
+        width: 100 rpx;
+        height: 100 rpx;
+        margin: 10 rpx 10 rpx 10 rpx 20 rpx;
+    }
 </style>

mini-program/garden-wxapp/components/infomation/infomation.vue

@@ -1,175 +1,175 @@
 <template>
-	<view class="uni-list" >
-	    <view @click="goDetail(item)"  class="uni-list-cell"  hover-class="uni-list-cell-hover" v-for="(item,index) in newList" :key="index">
-	        <view class="uni-media-list" >
-				<!-- 左图右文 -->
-				<image   mode="aspectFill" class="uni-media-list-logo-left" :src="item.image"></image>
-	            <view class="uni-media-list-body" style="height: 180rpx;">
-	                <view class="uni-media-list-text-top text-cut-2">{{item.title}}</view>
-					<view class=" text-cut-2" style="color: #757575;font-size: 24rpx;">
-						<text>{{item.article | formatHtml}}</text>
-						<!-- <rich-text :nodes="item.article"></rich-text> -->
-					</view>
-	                <view class="uni-media-list-text-bottom">
-						<text class="cuIcon-time padding-right-10"></text>
-	                    <text>{{item.createTime}}</text>
-	                </view>
-	            </view>
-	        </view>
-	    </view>
-	</view>
+    <view class="uni-list">
+        <view @click="goDetail(item)" class="uni-list-cell" hover-class="uni-list-cell-hover"
+              v-for="(item,index) in newList" :key="index">
+            <view class="uni-media-list">
+                <!-- 左图右文 -->
+                <image mode="aspectFill" class="uni-media-list-logo-left" :src="item.image"></image>
+                <view class="uni-media-list-body" style="height: 180rpx;">
+                    <view class="uni-media-list-text-top text-cut-2">{{item.title}}</view>
+                    <view class=" text-cut-2" style="color: #757575;font-size: 24rpx;">
+                        <text>{{item.article | formatHtml}}</text>
+                        <!-- <rich-text :nodes="item.article"></rich-text> -->
+                    </view>
+                    <view class="uni-media-list-text-bottom">
+                        <text class="cuIcon-time padding-right-10"></text>
+                        <text>{{item.createTime}}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		props:{
-			newList:{
-				type:Array,
-				default:()=>{
-					return []
-				}
-			}
-		},
-		filters: {
-			formatHtml (str) {
-				return str.replace(/<[^>]+>/g, "");
-			}
-		},
-		data() {
-			return {
-				
-			};
-		},
-		onLoad() {
-			
-		},
-		methods:{
-			goDetail(item){
-				getApp().globalData.newsDetail=item
-				uni.navigateTo({
-					url:"/pages/news/detail?id="+item.id
-				})
-			},
-		}
-	};
+    export default {
+        props: {
+            newList: {
+                type: Array,
+                default: () => {
+                    return []
+                }
+            }
+        },
+        filters: {
+            formatHtml(str) {
+                return str.replace(/<[^>]+>/g, "");
+            }
+        },
+        data() {
+            return {};
+        },
+        onLoad() {
+
+        },
+        methods: {
+            goDetail(item) {
+                getApp().globalData.newsDetail = item
+                uni.navigateTo({
+                    url: "/pages/news/detail?id=" + item.id
+                })
+            },
+        }
+    };
 </script>
 <style lang="scss">
-	.uni-list {
-	    background-color: #FFFFFF;
-	    position: relative;
-	    width: 100%;
-	    display: flex;
-	    flex-direction: column;
-	}
-	
-	.uni-list:after {
-	    position: absolute;
-	    z-index: 10;
-	    right: 0;
-	    bottom: 0;
-	    left: 0;
-	    height: 1px;
-	    content: '';
-	    -webkit-transform: scaleY(.5);
-	    transform: scaleY(.5);
-	    // background-color: #c8c7cc;
-	}
-	
-	.uni-list::before {
-	    position: absolute;
-	    z-index: 10;
-	    right: 0;
-	    top: 0;
-	    left: 0;
-	    height: 1px;
-	    content: '';
-	    -webkit-transform: scaleY(.5);
-	    transform: scaleY(.5);
-	}
-	
-	.uni-list-cell {
-	    position: relative;
-	    display: flex;
-	    flex-direction: row;
-	    justify-content: space-between;
-	    align-items: center;
-	}
-	
-	.uni-list-cell-hover {
-	    background-color: #eee;
-	}
-	
-	.uni-list-cell::after {
-	    position: absolute;
-	    z-index: 3;
-	    right: 0;
-	    bottom: 0;
-	    left: 30upx;
-	    height: 1px;
-	    content: '';
-	    -webkit-transform: scaleY(.5);
-	    transform: scaleY(.5);
-	    background-color: #c8c7cc;
-	}
-	
-	.uni-list .uni-list-cell:last-child::after {
-	    height: 0upx;
-	}
-	
-	/* 图文列表 */
-	.uni-media-list {
-	    padding: 22upx 20upx;
-	    box-sizing: border-box;
-	    display: flex;
-	    width: 100%;
-	    flex-direction: row;
-	}
-	
-	.uni-navigate-right.uni-media-list {
-	    padding-right: 74upx;
-	}
-	.uni-media-list-text-bottom {
-	    line-height: 30upx;
-	    font-size: 26upx;
-	    color: #999;
-	}
-	
-	.uni-media-list-logo-left {
-		border-radius: 10rpx;
-	    width: 230upx;
-	    height: 180upx;
-		margin-right: 20upx
-	}
-	
-	.uni-media-list-logo-right {
-	    width: 180upx;
-	    height: 140upx;
-		margin-left: 20upx
-	}
-	
-	.uni-media-list-body {
-	    display: flex;
-	    flex: 1;
-	    flex-direction: column;
-	    justify-content: space-between;
-	    align-items: flex-start;
-	    overflow: hidden;
-	    height: auto;
-	}
-	
-	.uni-media-list-text-top {
-	    width: 100%;
-	    line-height: 50upx;
-	    height: 50upx;
-	    font-size: 32upx;
-	    overflow: hidden;
-		color: #000000;
-	}
-	
-	.uni-media-list-text-bottom {
-	    display: flex;
-	    flex-direction: row;
-	    justify-content: space-between;
-	}
+    .uni-list {
+        background-color: #FFFFFF;
+        position: relative;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .uni-list:after {
+        position: absolute;
+        z-index: 10;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 1px;
+        content: '';
+        -webkit-transform: scaleY(.5);
+        transform: scaleY(.5);
+        // background-color: #c8c7cc;
+    }
+
+    .uni-list::before {
+        position: absolute;
+        z-index: 10;
+        right: 0;
+        top: 0;
+        left: 0;
+        height: 1px;
+        content: '';
+        -webkit-transform: scaleY(.5);
+        transform: scaleY(.5);
+    }
+
+    .uni-list-cell {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .uni-list-cell-hover {
+        background-color: #eee;
+    }
+
+    .uni-list-cell::after {
+        position: absolute;
+        z-index: 3;
+        right: 0;
+        bottom: 0;
+        left: 30 upx;
+        height: 1px;
+        content: '';
+        -webkit-transform: scaleY(.5);
+        transform: scaleY(.5);
+        background-color: #c8c7cc;
+    }
+
+    .uni-list .uni-list-cell:last-child::after {
+        height: 0 upx;
+    }
+
+    /* 图文列表 */
+    .uni-media-list {
+        padding: 22 upx 20 upx;
+        box-sizing: border-box;
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+    }
+
+    .uni-navigate-right.uni-media-list {
+        padding-right: 74 upx;
+    }
+
+    .uni-media-list-text-bottom {
+        line-height: 30 upx;
+        font-size: 26 upx;
+        color: #999;
+    }
+
+    .uni-media-list-logo-left {
+        border-radius: 10 rpx;
+        width: 230 upx;
+        height: 180 upx;
+        margin-right: 20 upx
+    }
+
+    .uni-media-list-logo-right {
+        width: 180 upx;
+        height: 140 upx;
+        margin-left: 20 upx
+    }
+
+    .uni-media-list-body {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-start;
+        overflow: hidden;
+        height: auto;
+    }
+
+    .uni-media-list-text-top {
+        width: 100%;
+        line-height: 50 upx;
+        height: 50 upx;
+        font-size: 32 upx;
+        overflow: hidden;
+        color: #000000;
+    }
+
+    .uni-media-list-text-bottom {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
 </style>
 

mini-program/garden-wxapp/components/keyboard-package/keyboard-package.vue

@@ -1,299 +1,318 @@
 <template>
-	<uni-popup :custom="true" type="bottom" ref="keyboardPackage">
-		<view class="keyboardbox">
-			<view class="numkeyboard" v-if="type==='number'">
-				<view class="num-area">
-					<view class="row" v-for="(item,index) in numKeybordList" :key="index">
-						<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']" v-for="(ite,idx) in item"
-						 hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx" @tap="input(ite)">{{ite}}</view>
-					</view>
-				</view>
-				<view class="btn-area">
-					<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
-						删除
-					</view>
-					<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">
-						完成
-					</view>
-				</view>
-			</view>
-
-			<view class="numkeyboard" v-if="type==='idCard'">
-				<view class="num-area">
-					<view class="row" v-for="(item,index) in idCardList" :key="index">
-						<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']" v-for="(ite,idx) in item"
-						 hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx" @tap="input(ite)">{{ite}}</view>
-					</view>
-				</view>
-				<view class="btn-area">
-					<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
-						删除
-					</view>
-					<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">
-						完成
-					</view>
-				</view>
-			</view>
-
-			<view class="platenumber" v-if="type==='plateNumber'">
-				<view class="header">
-					<view @tap="active=active===1?2:1" hover-class="active" :hover-start-time="0" :hover-stay-time="5">{{active===1?'地区':'车牌号'}}</view>
-					<view hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">完成</view>
-				</view>
-				<view class="main">
-					<view class="normal" v-show="active===1">
-						<view class="row" v-for="(item,index) in EngKeyBoardList" :key="index">
-							<view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
-								{{ite}}
-							</view>
-							<view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
-								<image src="/static/delete.png" mode=""></image>
-							</view>
-						</view>
-					</view>
-					<view class="area" v-show="active===2">
-						<view class="row" v-for="(item,index) in areaList" :key="index">
-							<view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
-								{{ite}}
-							</view>
-							<view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
-								<image src="/static/delete.png" mode=""></image>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="safe-area" v-if="safeAreaInsetBottom"></view>
-	</uni-popup>
+    <uni-popup :custom="true" type="bottom" ref="keyboardPackage">
+        <view class="keyboardbox">
+            <view class="numkeyboard" v-if="type==='number'">
+                <view class="num-area">
+                    <view class="row" v-for="(item,index) in numKeybordList" :key="index">
+                        <view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']"
+                              v-for="(ite,idx) in item"
+                              hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx"
+                              @tap="input(ite)">{{ite}}
+                        </view>
+                    </view>
+                </view>
+                <view class="btn-area">
+                    <view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
+                          @tap="deleteVal">
+                        删除
+                    </view>
+                    <view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
+                          @tap="confirm">
+                        完成
+                    </view>
+                </view>
+            </view>
+
+            <view class="numkeyboard" v-if="type==='idCard'">
+                <view class="num-area">
+                    <view class="row" v-for="(item,index) in idCardList" :key="index">
+                        <view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']"
+                              v-for="(ite,idx) in item"
+                              hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx"
+                              @tap="input(ite)">{{ite}}
+                        </view>
+                    </view>
+                </view>
+                <view class="btn-area">
+                    <view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
+                          @tap="deleteVal">
+                        删除
+                    </view>
+                    <view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
+                          @tap="confirm">
+                        完成
+                    </view>
+                </view>
+            </view>
+
+            <view class="platenumber" v-if="type==='plateNumber'">
+                <view class="header">
+                    <view @tap="active=active===1?2:1" hover-class="active" :hover-start-time="0" :hover-stay-time="5">
+                        {{active===1?'地区':'车牌号'}}
+                    </view>
+                    <view hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">完成</view>
+                </view>
+                <view class="main">
+                    <view class="normal" v-show="active===1">
+                        <view class="row" v-for="(item,index) in EngKeyBoardList" :key="index">
+                            <view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active"
+                                  :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
+                                {{ite}}
+                            </view>
+                            <view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active"
+                                  :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
+                                <image src="/static/delete.png" mode=""></image>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="area" v-show="active===2">
+                        <view class="row" v-for="(item,index) in areaList" :key="index">
+                            <view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active"
+                                  :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
+                                {{ite}}
+                            </view>
+                            <view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active"
+                                  :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
+                                <image src="/static/delete.png" mode=""></image>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="safe-area" v-if="safeAreaInsetBottom"></view>
+    </uni-popup>
 </template>
 
 <script>
-	import uniPopup from "@/components/uni-popup/uni-popup.vue"
-	export default {
-		components: {
-			uniPopup
-		},
-		props: {
-			type: {
-				type: String,
-				default: 'number'
-			},
-			safeAreaInsetBottom: { //是否设置安全区
-				type: Boolean,
-				default: false
-			},
-			disableDot: { //数字键盘是否禁止点击.仅type为number生效
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				numKeybordList: [
-					[1, 2, 3],
-					[4, 5, 6],
-					[7, 8, 9],
-					[0, '.']
-				],
-				idCardList: [
-					[1, 2, 3],
-					[4, 5, 6],
-					[7, 8, 9],
-					[0, 'X']
-				],
-				areaList: [
-					['京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑', '湘'],
-					['皖', '鲁', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '陕'],
-					['蒙', '吉', '闽', '贵', '渝', '川', '青', '琼', '宁'],
-					['藏', '新', '使', '港', '澳', '学']
-				],
-				EngKeyBoardList: [
-					[1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
-					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
-					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
-					['Z', 'X', 'C', 'V', 'B', 'N', 'M']
-				],
-				active: 2
-			};
-		},
-		methods: {
-			open() {
-				this.$refs.keyboardPackage.open();
-			},
-			confirm() {
-				this.close();
-				this.$emit('onConfirm');
-			},
-			deleteVal() {
-				this.$emit('onDelete');
-			},
-			input(val) {
-				if (val === '.' && this.disableDot) return;
-				this.$emit('onInput', val);
-				if(this.active === 2){
-					this.active = 1;
-				}
-			},
-			close() {
-				this.$refs.keyboardPackage.close();
-			}
-		}
-	}
+    import uniPopup from "@/components/uni-popup/uni-popup.vue"
+
+    export default {
+        components: {
+            uniPopup
+        },
+        props: {
+            type: {
+                type: String,
+                default: 'number'
+            },
+            safeAreaInsetBottom: { //是否设置安全区
+                type: Boolean,
+                default: false
+            },
+            disableDot: { //数字键盘是否禁止点击.仅type为number生效
+                type: Boolean,
+                default: false
+            }
+        },
+        data() {
+            return {
+                numKeybordList: [
+                    [1, 2, 3],
+                    [4, 5, 6],
+                    [7, 8, 9],
+                    [0, '.']
+                ],
+                idCardList: [
+                    [1, 2, 3],
+                    [4, 5, 6],
+                    [7, 8, 9],
+                    [0, 'X']
+                ],
+                areaList: [
+                    ['京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑', '湘'],
+                    ['皖', '鲁', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '陕'],
+                    ['蒙', '吉', '闽', '贵', '渝', '川', '青', '琼', '宁'],
+                    ['藏', '新', '使', '港', '澳', '学']
+                ],
+                EngKeyBoardList: [
+                    [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
+                    ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+                    ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+                    ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
+                ],
+                active: 2
+            };
+        },
+        methods: {
+            open() {
+                this.$refs.keyboardPackage.open();
+            },
+            confirm() {
+                this.close();
+                this.$emit('onConfirm');
+            },
+            deleteVal() {
+                this.$emit('onDelete');
+            },
+            input(val) {
+                if (val === '.' && this.disableDot) return;
+                this.$emit('onInput', val);
+                if (this.active === 2) {
+                    this.active = 1;
+                }
+            },
+            close() {
+                this.$refs.keyboardPackage.close();
+            }
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	.keyboardbox {
-		background-color: #FFFFFF;
-
-		.numkeyboard {
-			height: 432rpx;
-			display: flex;
-			background-color: #ebedf0;
-
-			.btn-area {
-				width: 180rpx;
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-
-				.item {
-					width: 100%;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					flex-grow: 1;
-				}
-
-				.del {
-					background-color: #ebedf0;
-					color: #333;
-
-					&.active {
-						background-color: #f1f3f5;
-					}
-				}
-
-				.confirem {
-					background-color: $base-color;
-					color: #FFFFFF;
-
-					&.active {
-						background-color: #0570db;
-					}
-				}
-			}
-
-			.num-area {
-				flex-grow: 1;
-				display: flex;
-				flex-wrap: wrap;
-
-				.row {
-					width: 100%;
-					height: 25%;
-					display: flex;
-					margin-top: 1px;
-
-					.item {
-						flex-grow: 1;
-						height: 100%;
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						background-color: #FFFFFF;
-						border-right: 1px solid #ebedf0;
-						width: 33.33%;
-						
-						&.active {
-							background-color: #ebedf0;
-						}
-
-						&.z {
-							flex-grow: 2;
-							width: 66.66%;
-						}
-
-						&.disabled {
-							background: #FFFFFF;
-							color: #B9B9B9;
-						}
-					}
-				}
-
-			}
-		}
-	}
-
-	.safe-area {
-		padding-bottom: 0rpx;
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-	}
-
-	.platenumber {
-		background-color: #f5f5f5;
-
-		.header {
-			height: 76rpx;
-			background-color: #FFFFFF;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			font-size: 28rpx;
-			border-top: 1px solid #f5f5f5;
-
-			&>view {
-				padding: 0 45rpx;
-				color: $base-color;
-				height: 100%;
-				display: flex;
-				align-items: center;
-				&.active {
-					background-color: #ebedf0;
-				}
-			}
-		}
-
-		.main {
-			height: 435rpx;
-
-			.row {
-				margin: 13rpx 0;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-
-				.item {
-					width: 56rpx;
-					height: 94rpx;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					background-color: #FFFFFF;
-					border-radius: 6rpx;
-					margin: 0 7rpx;
-					font-size: 24rpx;
-					&.active {
-						background-color: #ebedf0;
-					}
-
-					&.img {
-						background-color: #c2cacc;
-						width: 94rpx;
-
-						&.active {
-							background-color: #ddd;
-						}
-
-						&>image {
-							width: 49rpx;
-							height: 48rpx;
-						}
-					}
-				}
-			}
-
-		}
-	}
+    .keyboardbox {
+        background-color: #FFFFFF;
+
+        .numkeyboard {
+            height: 432 rpx;
+            display: flex;
+            background-color: #ebedf0;
+
+            .btn-area {
+                width: 180 rpx;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+
+                .item {
+                    width: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    flex-grow: 1;
+                }
+
+                .del {
+                    background-color: #ebedf0;
+                    color: #333;
+
+                    &.active {
+                        background-color: #f1f3f5;
+                    }
+                }
+
+                .confirem {
+                    background-color: $base-color;
+                    color: #FFFFFF;
+
+                    &.active {
+                        background-color: #0570db;
+                    }
+                }
+            }
+
+            .num-area {
+                flex-grow: 1;
+                display: flex;
+                flex-wrap: wrap;
+
+                .row {
+                    width: 100%;
+                    height: 25%;
+                    display: flex;
+                    margin-top: 1px;
+
+                    .item {
+                        flex-grow: 1;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        background-color: #FFFFFF;
+                        border-right: 1px solid #ebedf0;
+                        width: 33.33%;
+
+                        &.active {
+                            background-color: #ebedf0;
+                        }
+
+                        &.z {
+                            flex-grow: 2;
+                            width: 66.66%;
+                        }
+
+                        &.disabled {
+                            background: #FFFFFF;
+                            color: #B9B9B9;
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+
+    .safe-area {
+        padding-bottom: 0 rpx;
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    .platenumber {
+        background-color: #f5f5f5;
+
+        .header {
+            height: 76 rpx;
+            background-color: #FFFFFF;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 28 rpx;
+            border-top: 1px solid #f5f5f5;
+
+            & > view {
+                padding: 0 45 rpx;
+                color: $base-color;
+                height: 100%;
+                display: flex;
+                align-items: center;
+
+                &.active {
+                    background-color: #ebedf0;
+                }
+            }
+        }
+
+        .main {
+            height: 435 rpx;
+
+            .row {
+                margin: 13 rpx 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .item {
+                    width: 56 rpx;
+                    height: 94 rpx;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    background-color: #FFFFFF;
+                    border-radius: 6 rpx;
+                    margin: 0 7 rpx;
+                    font-size: 24 rpx;
+
+                    &.active {
+                        background-color: #ebedf0;
+                    }
+
+                    &.img {
+                        background-color: #c2cacc;
+                        width: 94 rpx;
+
+                        &.active {
+                            background-color: #ddd;
+                        }
+
+                        & > image {
+                            width: 49 rpx;
+                            height: 48 rpx;
+                        }
+                    }
+                }
+            }
+
+        }
+    }
 </style>

mini-program/garden-wxapp/components/loading/loaders/rotate-plane.vue

@@ -1,46 +1,54 @@
 <template>
-  <view>
-    <view :style="{
+    <view>
+        <view :style="{
       backgroundColor: color,
       width: size+20+'px',
       height: size+20+'px' }" class="spinner-inside"></view>
-  </view>
+    </view>
 </template>
 
 <script>
-export default {
-  name: 'rotatePlane',
-  props: {
-    color: String,
-    size: Number
-  }
-}
+    export default {
+        name: 'rotatePlane',
+        props: {
+            color: String,
+            size: Number
+        }
+    }
 </script>
 
 <style scoped>
-.spinner-inside {
-  margin: 25px auto;
- 
-  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
-  animation: rotateplane 1.2s infinite ease-in-out;
-}
- 
-@-webkit-keyframes rotateplane {
-  0% { -webkit-transform: perspective(120px) }
-  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
-  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
-}
- 
-@keyframes rotateplane {
-  0% {
-    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
-  } 50% {
-    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
-  } 100% {
-    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-  }
-}
+    .spinner-inside {
+        margin: 25px auto;
+
+        -webkit-animation: rotateplane 1.2s infinite ease-in-out;
+        animation: rotateplane 1.2s infinite ease-in-out;
+    }
+
+    @-webkit-keyframes rotateplane {
+        0% {
+            -webkit-transform: perspective(120px)
+        }
+        50% {
+            -webkit-transform: perspective(120px) rotateY(180deg)
+        }
+        100% {
+            -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
+        }
+    }
+
+    @keyframes rotateplane {
+        0% {
+            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+        }
+        50% {
+            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+        }
+        100% {
+            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+        }
+    }
 </style>

mini-program/garden-wxapp/components/loading/loading.vue

@@ -1,127 +1,128 @@
 <template>
-  <transition name="fade">
-   <view
-			class="mask"
-      v-show="isActive"
-      :class="{ 'full-screen': isFullScreen }"
-      :style="{ backgroundColor }"
-    >
-      <view class="spinner" :style="{ transform:`translate(-50%, -${translateY}%)`}">
-        <slot>
-					<!--  ==========在这里改成选择的那一个========== -->
-					<rotatePlane :color="color" :size="size"/>
-					<!--  ==========在这里改成选择的那一个========== -->
-        </slot>
+    <transition name="fade">
         <view
-          v-if="text.length"
-          :style="{ color:textColor }">
-          {{ text }}
+                class="mask"
+                v-show="isActive"
+                :class="{ 'full-screen': isFullScreen }"
+                :style="{ backgroundColor }"
+        >
+            <view class="spinner" :style="{ transform:`translate(-50%, -${translateY}%)`}">
+                <slot>
+                    <!--  ==========在这里改成选择的那一个========== -->
+                    <rotatePlane :color="color" :size="size"/>
+                    <!--  ==========在这里改成选择的那一个========== -->
+                </slot>
+                <view
+                        v-if="text.length"
+                        :style="{ color:textColor }">
+                    {{ text }}
+                </view>
+            </view>
         </view>
-      </view>
-    </view>
-  </transition>
+    </transition>
 </template>
 
 <script>
-// ==========在这里选一个你要的其他去掉也行==========
-// import loop from './loaders/loop.vue'
-// import bounce from './loaders/bounce.vue'
-// import doubleBounce from './loaders/double-bounce.vue'
-// import doubleCube from './loaders/double-cube.vue'
-// import doubleDot from './loaders/double-dot.vue'
-import rotatePlane from './loaders/rotate-plane.vue'
-// import scaleOut from './loaders/scale-out.vue'
-// import shrinkRect from './loaders/shrink-rect.vue'
-// ==========在这里选一个你要的其他去掉也行==========
+    // ==========在这里选一个你要的其他去掉也行==========
+    // import loop from './loaders/loop.vue'
+    // import bounce from './loaders/bounce.vue'
+    // import doubleBounce from './loaders/double-bounce.vue'
+    // import doubleCube from './loaders/double-cube.vue'
+    // import doubleDot from './loaders/double-dot.vue'
+    import rotatePlane from './loaders/rotate-plane.vue'
+    // import scaleOut from './loaders/scale-out.vue'
+    // import shrinkRect from './loaders/shrink-rect.vue'
+    // ==========在这里选一个你要的其他去掉也行==========
 
-export default {
-  name: 'ourLoading',
-  components: { 
-		// ==========在这里选择一个==========
-			// loop,
-			// bounce,
-			// doubleBounce,
-			// doubleCube,
-			// doubleDot,
-			rotatePlane,
-			// scaleOut,
-			// shrinkRect
-		// ==========在这里选择一个==========
-	},
-  props: {
-    active: Boolean,
-		translateY: {
-			type: Number,
-			default: 150
-		},
-    text: {
-      type: String,
-      default: ''
-    },
-    color: {
-      type: String,
-      default: '#333'
-    },
-		textColor: {
-			type: String,
-			default: '#333'
-		},
-    isFullScreen: {
-      type: Boolean,
-      default: false
-    },
-    backgroundColor: {
-      type: String,
-      default: 'rgba(255, 255, 255, .6)'
-    },
-    size: {
-      type: Number,
-      default: 40
+    export default {
+        name: 'ourLoading',
+        components: {
+            // ==========在这里选择一个==========
+            // loop,
+            // bounce,
+            // doubleBounce,
+            // doubleCube,
+            // doubleDot,
+            rotatePlane,
+            // scaleOut,
+            // shrinkRect
+            // ==========在这里选择一个==========
+        },
+        props: {
+            active: Boolean,
+            translateY: {
+                type: Number,
+                default: 150
+            },
+            text: {
+                type: String,
+                default: ''
+            },
+            color: {
+                type: String,
+                default: '#333'
+            },
+            textColor: {
+                type: String,
+                default: '#333'
+            },
+            isFullScreen: {
+                type: Boolean,
+                default: false
+            },
+            backgroundColor: {
+                type: String,
+                default: 'rgba(255, 255, 255, .6)'
+            },
+            size: {
+                type: Number,
+                default: 40
+            }
+        },
+        data() {
+            return {
+                isActive: this.active || false
+            }
+        },
+        watch: {
+            active(value) {
+                this.isActive = value
+            }
+        }
     }
-  },
-  data () {
-    return {
-      isActive: this.active || false
-    }
-  },
-  watch: {
-    active (value) {
-      this.isActive = value
-    }
-  }
-}
 </script>
 
 <style scoped>
-.mask {
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	z-index: 3000;
-	transition: opacity .3s linear;
-}
+    .mask {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 3000;
+        transition: opacity .3s linear;
+    }
+
+    .full-screen {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
 
-.full-screen {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
+    .spinner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        text-align: center;
+    }
 
-.spinner {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	text-align: center;
-}
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .3s;
+    }
 
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .3s;
-}
-.fade-enter, .fade-leave-to {
-  opacity: 0;
-}
+    .fade-enter, .fade-leave-to {
+        opacity: 0;
+    }
 </style>

mini-program/garden-wxapp/components/mescroll-body/components/mescroll-down.css

@@ -1,55 +1,55 @@
 /* 下拉刷新区域 */
 .mescroll-downwarp {
-	position: absolute;
-	top: -100%;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	text-align: center;
+    position: absolute;
+    top: -100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
 }
 
 /* 下拉刷新--内容区,定位于区域底部 */
 .mescroll-downwarp .downwarp-content {
-	position: absolute;
-	left: 0;
-	bottom: 0;
-	width: 100%;
-	min-height: 60rpx;
-	padding: 20rpx 0;
-	text-align: center;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    min-height: 60 rpx;
+    padding: 20 rpx 0;
+    text-align: center;
 }
 
 /* 下拉刷新--提示文本 */
 .mescroll-downwarp .downwarp-tip {
-	display: inline-block;
-	font-size: 28rpx;
-	vertical-align: middle;
-	margin-left: 16rpx;
-	/* color: gray; 已在style设置color,此处删去*/
+    display: inline-block;
+    font-size: 28 rpx;
+    vertical-align: middle;
+    margin-left: 16 rpx;
+    /* color: gray; 已在style设置color,此处删去*/
 }
 
 /* 下拉刷新--旋转进度条 */
 .mescroll-downwarp .downwarp-progress {
-	display: inline-block;
-	width: 32rpx;
-	height: 32rpx;
-	border-radius: 50%;
-	border: 2rpx solid gray;
-	border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
-	vertical-align: middle;
+    display: inline-block;
+    width: 32 rpx;
+    height: 32 rpx;
+    border-radius: 50%;
+    border: 2 rpx solid gray;
+    border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
+    vertical-align: middle;
 }
 
 /* 旋转动画 */
 .mescroll-downwarp .mescroll-rotate {
-	animation: mescrollDownRotate 0.6s linear infinite;
+    animation: mescrollDownRotate 0.6s linear infinite;
 }
 
 @keyframes mescrollDownRotate {
-	0% {
-		transform: rotate(0deg);
-	}
+    0% {
+        transform: rotate(0deg);
+    }
 
-	100% {
-		transform: rotate(360deg);
-	}
+    100% {
+        transform: rotate(360deg);
+    }
 }

mini-program/garden-wxapp/components/mescroll-body/components/mescroll-down.vue

@@ -1,47 +1,54 @@
 <!-- 下拉刷新区域 -->
 <template>
-	<view v-if="mOption.use" class="mescroll-downwarp" :style="{'background-color':mOption.bgColor,'color':mOption.textColor}">
-		<view class="downwarp-content">
-			<view class="downwarp-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mOption.textColor, 'transform':downRotate}"></view>
-			<view class="downwarp-tip">{{downText}}</view>
-		</view>
-	</view>
+    <view v-if="mOption.use" class="mescroll-downwarp"
+          :style="{'background-color':mOption.bgColor,'color':mOption.textColor}">
+        <view class="downwarp-content">
+            <view class="downwarp-progress" :class="{'mescroll-rotate': isDownLoading}"
+                  :style="{'border-color':mOption.textColor, 'transform':downRotate}"></view>
+            <view class="downwarp-tip">{{downText}}</view>
+        </view>
+    </view>
 </template>
 
 <script>
-export default {
-	props: {
-		option: Object , // down的配置项
-		type: Number, // 下拉状态（inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
-		rate: Number // 下拉比率 (inOffset: rate<1; outOffset: rate>=1)
-	},
-	computed: {
-		// 支付宝小程序需写成计算属性,prop定义default仍报错
-		mOption(){
-			return this.option || {}
-		},
-		// 是否在加载中
-		isDownLoading(){
-			return this.type === 3
-		},
-		// 旋转的角度
-		downRotate(){
-			return 'rotate(' + 360 * this.rate + 'deg)'
-		},
-		// 文本提示
-		downText(){
-			switch (this.type){
-				case 1: return this.mOption.textInOffset;
-				case 2: return this.mOption.textOutOffset;
-				case 3: return this.mOption.textLoading;
-				case 4: return this.mOption.textLoading;
-				default: return this.mOption.textInOffset;
-			}
-		}
-	}
-};
+    export default {
+        props: {
+            option: Object, // down的配置项
+            type: Number, // 下拉状态（inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
+            rate: Number // 下拉比率 (inOffset: rate<1; outOffset: rate>=1)
+        },
+        computed: {
+            // 支付宝小程序需写成计算属性,prop定义default仍报错
+            mOption() {
+                return this.option || {}
+            },
+            // 是否在加载中
+            isDownLoading() {
+                return this.type === 3
+            },
+            // 旋转的角度
+            downRotate() {
+                return 'rotate(' + 360 * this.rate + 'deg)'
+            },
+            // 文本提示
+            downText() {
+                switch (this.type) {
+                    case 1:
+                        return this.mOption.textInOffset;
+                    case 2:
+                        return this.mOption.textOutOffset;
+                    case 3:
+                        return this.mOption.textLoading;
+                    case 4:
+                        return this.mOption.textLoading;
+                    default:
+                        return this.mOption.textInOffset;
+                }
+            }
+        }
+    };
 </script>
 
 <style>
-@import "./mescroll-down.css";
+    @import "./mescroll-down.css";
 </style>

mini-program/garden-wxapp/components/mescroll-body/components/mescroll-empty.vue

@@ -6,93 +6,97 @@ import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.v
 
 -->
 <template>
-	<view class="mescroll-empty" :class="{ 'empty-fixed': option.fixed }" :style="{ 'z-index': option.zIndex, top: option.top }">
-		<view> <image v-if="icon"  :class="isSmall?'empty-icon-sm':'empty-icon'" :src="icon" /> </view>
-		<view v-if="tip" class="empty-tip">{{ tip }}</view>
-		<view v-if="option.btnText" class="empty-btn" @click="emptyClick">{{ option.btnText }}</view>
-	</view>
+    <view class="mescroll-empty" :class="{ 'empty-fixed': option.fixed }"
+          :style="{ 'z-index': option.zIndex, top: option.top }">
+        <view>
+            <image v-if="icon" :class="isSmall?'empty-icon-sm':'empty-icon'" :src="icon"/>
+        </view>
+        <view v-if="tip" class="empty-tip">{{ tip }}</view>
+        <view v-if="option.btnText" class="empty-btn" @click="emptyClick">{{ option.btnText }}</view>
+    </view>
 </template>
 
 <script>
-// 引入全局配置
-import GlobalOption from './../mescroll-uni-option.js';
-export default {
-	props: {
-		// empty的配置项: 默认为GlobalOption.up.empty
-		option: {
-			type: Object,
-			default() {
-				return {};
-			}
-		}
-	},
-	// 使用computed获取配置,用于支持option的动态配置
-	computed: {
-		// 图标
-		icon() {
-			return this.option.icon == null ? GlobalOption.up.empty.icon : this.option.icon; // 此处不使用短路求值, 用于支持传空串不显示图标
-		},
-		// 文本提示
-		tip() {
-			return this.option.tip == null ? GlobalOption.up.empty.tip : this.option.tip; // 此处不使用短路求值, 用于支持传空串不显示文本提示
-		},
-		isSmall() {
-			return this.option.isSmall == null ? GlobalOption.up.empty.isSmall : this.option.isSmall;
-		}
-	},
-	methods: {
-		// 点击按钮
-		emptyClick() {
-			this.$emit('emptyclick');
-		}
-	}
-};
+    // 引入全局配置
+    import GlobalOption from './../mescroll-uni-option.js';
+
+    export default {
+        props: {
+            // empty的配置项: 默认为GlobalOption.up.empty
+            option: {
+                type: Object,
+                default() {
+                    return {};
+                }
+            }
+        },
+        // 使用computed获取配置,用于支持option的动态配置
+        computed: {
+            // 图标
+            icon() {
+                return this.option.icon == null ? GlobalOption.up.empty.icon : this.option.icon; // 此处不使用短路求值, 用于支持传空串不显示图标
+            },
+            // 文本提示
+            tip() {
+                return this.option.tip == null ? GlobalOption.up.empty.tip : this.option.tip; // 此处不使用短路求值, 用于支持传空串不显示文本提示
+            },
+            isSmall() {
+                return this.option.isSmall == null ? GlobalOption.up.empty.isSmall : this.option.isSmall;
+            }
+        },
+        methods: {
+            // 点击按钮
+            emptyClick() {
+                this.$emit('emptyclick');
+            }
+        }
+    };
 </script>
 
-<style>	
-/* 无任何数据的空布局 */
-.mescroll-empty {
-	box-sizing: border-box;
-	width: 100%;
-	padding: 300rpx 50rpx 0;
-	text-align: center;
-}
+<style>
+    /* 无任何数据的空布局 */
+    .mescroll-empty {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 300 rpx 50 rpx 0;
+        text-align: center;
+    }
 
-.mescroll-empty.empty-fixed {
-	z-index: 99;
-	position: absolute; /*transform会使fixed失效,最终会降级为absolute */
-	top: 100rpx;
-	left: 0;
-}
+    .mescroll-empty.empty-fixed {
+        z-index: 99;
+        position: absolute; /*transform会使fixed失效,最终会降级为absolute */
+        top: 100 rpx;
+        left: 0;
+    }
 
-.mescroll-empty .empty-icon {
-	width: 280rpx;
-	height: 280rpx;
-}
+    .mescroll-empty .empty-icon {
+        width: 280 rpx;
+        height: 280 rpx;
+    }
 
-.mescroll-empty .empty-icon-sm {
-	width: 220rpx;
-	height: 220rpx;
-}
+    .mescroll-empty .empty-icon-sm {
+        width: 220 rpx;
+        height: 220 rpx;
+    }
 
-.mescroll-empty .empty-tip {
-	margin-top: 20rpx;
-	font-size: 24rpx;
-	color: gray;
-}
+    .mescroll-empty .empty-tip {
+        margin-top: 20 rpx;
+        font-size: 24 rpx;
+        color: gray;
+    }
 
-.mescroll-empty .empty-btn {
-	display: inline-block;
-	margin-top: 40rpx;
-	min-width: 200rpx;
-	padding: 18rpx;
-	font-size: 28rpx;
-	border: 1rpx solid #e04b28;
-	border-radius: 60rpx;
-	color: #e04b28;
-}
+    .mescroll-empty .empty-btn {
+        display: inline-block;
+        margin-top: 40 rpx;
+        min-width: 200 rpx;
+        padding: 18 rpx;
+        font-size: 28 rpx;
+        border: 1 rpx solid #e04b28;
+        border-radius: 60 rpx;
+        color: #e04b28;
+    }
 
-.mescroll-empty .empty-btn:active {
-	opacity: 0.75;
-}
+    .mescroll-empty .empty-btn:active {
+        opacity: 0.75;
+    }
 </style>

mini-program/garden-wxapp/components/mescroll-body/components/mescroll-top.vue

@@ -1,83 +1,83 @@
 <!-- 回到顶部的按钮 -->
 <template>
-	<image
-		v-if="mOption.src"
-		class="mescroll-totop"
-		:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-totop-safearea': mOption.safearea}]"
-		:style="{'z-index':mOption.zIndex, 'left': left, 'right': right, 'bottom':addUnit(mOption.bottom), 'width':addUnit(mOption.width), 'border-radius':addUnit(mOption.radius)}"
-		:src="mOption.src"
-		mode="widthFix"
-		@click="toTopClick"
-	/>
+    <image
+            v-if="mOption.src"
+            class="mescroll-totop"
+            :class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-totop-safearea': mOption.safearea}]"
+            :style="{'z-index':mOption.zIndex, 'left': left, 'right': right, 'bottom':addUnit(mOption.bottom), 'width':addUnit(mOption.width), 'border-radius':addUnit(mOption.radius)}"
+            :src="mOption.src"
+            mode="widthFix"
+            @click="toTopClick"
+    />
 </template>
 
 <script>
-export default {
-	props: {
-		// up.toTop的配置项
-		option: Object,
-		// 是否显示
-		value: false
-	},
-	computed: {
-		// 支付宝小程序需写成计算属性,prop定义default仍报错
-		mOption(){
-			return this.option || {}
-		},
-		// 优先显示左边
-		left(){
-			return this.mOption.left ? this.addUnit(this.mOption.left) : 'auto';
-		},
-		// 右边距离 (优先显示左边)
-		right() {
-			return this.mOption.left ? 'auto' : this.addUnit(this.mOption.right);
-		}
-	},
-	methods: {
-		addUnit(num){
-			if(!num) return 0;
-			if(typeof num === 'number') return num + 'rpx';
-			return num
-		},
-		toTopClick() {
-			this.$emit('input', false); // 使v-model生效
-			this.$emit('click'); // 派发点击事件
-		}
-	}
-};
+    export default {
+        props: {
+            // up.toTop的配置项
+            option: Object,
+            // 是否显示
+            value: false
+        },
+        computed: {
+            // 支付宝小程序需写成计算属性,prop定义default仍报错
+            mOption() {
+                return this.option || {}
+            },
+            // 优先显示左边
+            left() {
+                return this.mOption.left ? this.addUnit(this.mOption.left) : 'auto';
+            },
+            // 右边距离 (优先显示左边)
+            right() {
+                return this.mOption.left ? 'auto' : this.addUnit(this.mOption.right);
+            }
+        },
+        methods: {
+            addUnit(num) {
+                if (!num) return 0;
+                if (typeof num === 'number') return num + 'rpx';
+                return num
+            },
+            toTopClick() {
+                this.$emit('input', false); // 使v-model生效
+                this.$emit('click'); // 派发点击事件
+            }
+        }
+    };
 </script>
 
 <style>
-/* 回到顶部的按钮 */
-.mescroll-totop {
-	z-index: 9990;
-	position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
-	right: 20rpx;
-	bottom: 120rpx;
-	width: 72rpx;
-	height: auto;
-	border-radius: 50%;
-	opacity: 0;
-	transition: opacity 0.5s; /* 过渡 */
-	margin-bottom: var(--window-bottom); /* css变量 */
-}
+    /* 回到顶部的按钮 */
+    .mescroll-totop {
+        z-index: 9990;
+        position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
+        right: 20 rpx;
+        bottom: 120 rpx;
+        width: 72 rpx;
+        height: auto;
+        border-radius: 50%;
+        opacity: 0;
+        transition: opacity 0.5s; /* 过渡 */
+        margin-bottom: var(--window-bottom); /* css变量 */
+    }
 
-/* 适配 iPhoneX */
-@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
-	.mescroll-totop-safearea {
-		margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
-		margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
-	}
-}
+    /* 适配 iPhoneX */
+    @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
+        .mescroll-totop-safearea {
+            margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
+            margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
+        }
+    }
 
-/* 显示 -- 淡入 */
-.mescroll-totop-in {
-	opacity: 1;
-}
+    /* 显示 -- 淡入 */
+    .mescroll-totop-in {
+        opacity: 1;
+    }
 
-/* 隐藏 -- 淡出且不接收事件*/
-.mescroll-totop-out {
-	opacity: 0;
-	pointer-events: none;
-}
+    /* 隐藏 -- 淡出且不接收事件*/
+    .mescroll-totop-out {
+        opacity: 0;
+        pointer-events: none;
+    }
 </style>

mini-program/garden-wxapp/components/mescroll-body/components/mescroll-up.css

@@ -1,47 +1,47 @@
 /* 上拉加载区域 */
 .mescroll-upwarp {
-	box-sizing: border-box;
-	min-height: 110rpx;
-	padding: 30rpx 0;
-	text-align: center;
-	clear: both;
+    box-sizing: border-box;
+    min-height: 110 rpx;
+    padding: 30 rpx 0;
+    text-align: center;
+    clear: both;
 }
 
 /*提示文本 */
 .mescroll-upwarp .upwarp-tip,
 .mescroll-upwarp .upwarp-nodata {
-	display: inline-block;
-	font-size: 28rpx;
-	vertical-align: middle;
-	/* color: gray; 已在style设置color,此处删去*/
+    display: inline-block;
+    font-size: 28 rpx;
+    vertical-align: middle;
+    /* color: gray; 已在style设置color,此处删去*/
 }
 
 .mescroll-upwarp .upwarp-tip {
-	margin-left: 16rpx;
+    margin-left: 16 rpx;
 }
 
 /*旋转进度条 */
 .mescroll-upwarp .upwarp-progress {
-	display: inline-block;
-	width: 32rpx;
-	height: 32rpx;
-	border-radius: 50%;
-	border: 2rpx solid gray;
-	border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
-	vertical-align: middle;
+    display: inline-block;
+    width: 32 rpx;
+    height: 32 rpx;
+    border-radius: 50%;
+    border: 2 rpx solid gray;
+    border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
+    vertical-align: middle;
 }
 
 /* 旋转动画 */
 .mescroll-upwarp .mescroll-rotate {
-	animation: mescrollUpRotate 0.6s linear infinite;
+    animation: mescrollUpRotate 0.6s linear infinite;
 }
 
 @keyframes mescrollUpRotate {
-	0% {
-		transform: rotate(0deg);
-	}
+    0% {
+        transform: rotate(0deg);
+    }
 
-	100% {
-		transform: rotate(360deg);
-	}
+    100% {
+        transform: rotate(360deg);
+    }
 }

mini-program/garden-wxapp/components/mescroll-body/components/mescroll-up.vue

@@ -1,39 +1,39 @@
 <!-- 上拉加载区域 -->
 <template>
-	<view class="mescroll-upwarp" :style="{'background-color':mOption.bgColor,'color':mOption.textColor}">
-		<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
-		<view v-show="isUpLoading">
-			<view class="upwarp-progress mescroll-rotate" :style="{'border-color':mOption.textColor}"></view>
-			<view class="upwarp-tip">{{ mOption.textLoading }}</view>
-		</view>
-		<!-- 无数据 -->
-		<view v-if="isUpNoMore" class="upwarp-nodata">{{ mOption.textNoMore }}</view>
-	</view>
+    <view class="mescroll-upwarp" :style="{'background-color':mOption.bgColor,'color':mOption.textColor}">
+        <!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
+        <view v-show="isUpLoading">
+            <view class="upwarp-progress mescroll-rotate" :style="{'border-color':mOption.textColor}"></view>
+            <view class="upwarp-tip">{{ mOption.textLoading }}</view>
+        </view>
+        <!-- 无数据 -->
+        <view v-if="isUpNoMore" class="upwarp-nodata">{{ mOption.textNoMore }}</view>
+    </view>
 </template>
 
 <script>
-export default {
-	props: {
-		option: Object, // up的配置项
-		type: Number // 上拉加载的状态：0（loading前），1（loading中），2（没有更多了）
-	},
-	computed: {
-		// 支付宝小程序需写成计算属性,prop定义default仍报错
-		mOption() {
-			return this.option || {};
-		},
-		// 加载中
-		isUpLoading() {
-			return this.type === 1;
-		},
-		// 没有更多了
-		isUpNoMore() {
-			return this.type === 2;
-		}
-	}
-};
+    export default {
+        props: {
+            option: Object, // up的配置项
+            type: Number // 上拉加载的状态：0（loading前），1（loading中），2（没有更多了）
+        },
+        computed: {
+            // 支付宝小程序需写成计算属性,prop定义default仍报错
+            mOption() {
+                return this.option || {};
+            },
+            // 加载中
+            isUpLoading() {
+                return this.type === 1;
+            },
+            // 没有更多了
+            isUpNoMore() {
+                return this.type === 2;
+            }
+        }
+    };
 </script>
 
 <style>
-@import './mescroll-up.css';
+    @import './mescroll-up.css';
 </style>

mini-program/garden-wxapp/components/mescroll-body/mescroll-body.css

@@ -1,19 +1,19 @@
 .mescroll-body {
-	position: relative; /* 下拉刷新区域相对自身定位 */
-	height: auto; /* 不可固定高度,否则overflow:hidden导致无法滑动; 同时使设置的最小高生效,实现列表不满屏仍可下拉*/
-	overflow: hidden; /* 当有元素写在mescroll-body标签前面时,可遮住下拉刷新区域 */
-	box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
+    position: relative; /* 下拉刷新区域相对自身定位 */
+    height: auto; /* 不可固定高度,否则overflow:hidden导致无法滑动; 同时使设置的最小高生效,实现列表不满屏仍可下拉*/
+    overflow: hidden; /* 当有元素写在mescroll-body标签前面时,可遮住下拉刷新区域 */
+    box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
 }
 
 /* 使sticky生效: 父元素不能overflow:hidden或者overflow:auto属性 */
-.mescroll-body.mescorll-sticky{
-	overflow: unset !important
+.mescroll-body.mescorll-sticky {
+    overflow: unset !important
 }
 
 /* 适配 iPhoneX */
 @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
-	.mescroll-safearea {
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-	}
+    .mescroll-safearea {
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
 }

mini-program/garden-wxapp/components/mescroll-body/mescroll-body.vue

@@ -1,63 +1,70 @@
 <template>
-	<view 
-	class="mescroll-body mescroll-render-touch" 
-	:class="{'mescorll-sticky': sticky}"
-	:style="{'minHeight':minHeight, 'padding-top': padTop, 'padding-bottom': padBottom}" 
-	@touchstart="wxsBiz.touchstartEvent" 
-	@touchmove="wxsBiz.touchmoveEvent" 
-	@touchend="wxsBiz.touchendEvent" 
-	@touchcancel="wxsBiz.touchendEvent"
-	:change:prop="wxsBiz.propObserver"
-	:prop="wxsProp"
-	>
-		<!-- 状态栏 -->
-		<view v-if="topbar&&statusBarHeight" class="mescroll-topbar" :style="{height: statusBarHeight+'px', background: topbar}"></view>
-		
-		<view class="mescroll-body-content mescroll-wxs-content" :style="{ transform: translateY, transition: transition }" :change:prop="wxsBiz.callObserver" :prop="callProp">
-			<!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
-			<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
-			<view v-if="mescroll.optDown.use" class="mescroll-downwarp" :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}">
-				<view class="downwarp-content">
-					<view class="downwarp-progress mescroll-wxs-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mescroll.optDown.textColor, 'transform': downRotate}"></view>
-					<view class="downwarp-tip">{{downText}}</view>
-				</view>
-			</view>
-	
-			<!-- 列表内容 -->
-			<slot></slot>
+    <view
+            class="mescroll-body mescroll-render-touch"
+            :class="{'mescorll-sticky': sticky}"
+            :style="{'minHeight':minHeight, 'padding-top': padTop, 'padding-bottom': padBottom}"
+            @touchstart="wxsBiz.touchstartEvent"
+            @touchmove="wxsBiz.touchmoveEvent"
+            @touchend="wxsBiz.touchendEvent"
+            @touchcancel="wxsBiz.touchendEvent"
+            :change:prop="wxsBiz.propObserver"
+            :prop="wxsProp"
+    >
+        <!-- 状态栏 -->
+        <view v-if="topbar&&statusBarHeight" class="mescroll-topbar"
+              :style="{height: statusBarHeight+'px', background: topbar}"></view>
 
-			<!-- 空布局 -->
-			<mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty>
+        <view class="mescroll-body-content mescroll-wxs-content"
+              :style="{ transform: translateY, transition: transition }" :change:prop="wxsBiz.callObserver"
+              :prop="callProp">
+            <!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
+            <!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
+            <view v-if="mescroll.optDown.use" class="mescroll-downwarp"
+                  :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}">
+                <view class="downwarp-content">
+                    <view class="downwarp-progress mescroll-wxs-progress" :class="{'mescroll-rotate': isDownLoading}"
+                          :style="{'border-color':mescroll.optDown.textColor, 'transform': downRotate}"></view>
+                    <view class="downwarp-tip">{{downText}}</view>
+                </view>
+            </view>
 
-			<!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
-			<!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
-			<view v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" class="mescroll-upwarp" :style="{'background':mescroll.optUp.bgColor,'color':mescroll.optUp.textColor}">
-				<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
-				<view v-show="upLoadType===1">
-					<view class="upwarp-progress mescroll-rotate" :style="{'border-color':mescroll.optUp.textColor}"></view>
-					<view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
-				</view>
-				<!-- 无数据 -->
-				<view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
-			</view>
-		</view>
-		
-		<!-- 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效) -->
-		<!-- #ifdef H5 -->
-		<view v-if="bottombar && windowBottom>0" class="mescroll-bottombar" :style="{height: windowBottom+'px'}"></view>
-		<!-- #endif -->
-		
-		<!-- 适配iPhoneX -->
-		<view v-if="safearea" class="mescroll-safearea"></view>
-		
-		<!-- 回到顶部按钮 (fixed元素需写在transform外面,防止降级为absolute)-->
-		<mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
-		
-		<!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->
-		<!-- renderjs的数据载体,不可写在mescroll-downwarp内部,避免use为false时,载体丢失,无法更新数据 -->
-		<view :change:prop="renderBiz.propObserver" :prop="wxsProp"></view>
-		<!-- #endif -->
-	</view>
+            <!-- 列表内容 -->
+            <slot></slot>
+
+            <!-- 空布局 -->
+            <mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty>
+
+            <!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
+            <!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
+            <view v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" class="mescroll-upwarp"
+                  :style="{'background':mescroll.optUp.bgColor,'color':mescroll.optUp.textColor}">
+                <!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
+                <view v-show="upLoadType===1">
+                    <view class="upwarp-progress mescroll-rotate"
+                          :style="{'border-color':mescroll.optUp.textColor}"></view>
+                    <view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
+                </view>
+                <!-- 无数据 -->
+                <view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
+            </view>
+        </view>
+
+        <!-- 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效) -->
+        <!-- #ifdef H5 -->
+        <view v-if="bottombar && windowBottom>0" class="mescroll-bottombar" :style="{height: windowBottom+'px'}"></view>
+        <!-- #endif -->
+
+        <!-- 适配iPhoneX -->
+        <view v-if="safearea" class="mescroll-safearea"></view>
+
+        <!-- 回到顶部按钮 (fixed元素需写在transform外面,防止降级为absolute)-->
+        <mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
+
+        <!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->
+        <!-- renderjs的数据载体,不可写在mescroll-downwarp内部,避免use为false时,载体丢失,无法更新数据 -->
+        <view :change:prop="renderBiz.propObserver" :prop="wxsProp"></view>
+        <!-- #endif -->
+    </view>
 </template>
 
 <!-- 微信小程序, QQ小程序, app, h5使用wxs -->
@@ -72,277 +79,287 @@
 	export default {
 		mixins: [renderBiz]
 	}
+
 </script>
 <!-- #endif -->
 
 <script>
-	// 引入mescroll-uni.js,处理核心逻辑
-	import MeScroll from './mescroll-uni.js';
-	// 引入全局配置
-	import GlobalOption from './mescroll-uni-option.js';
-	// 引入空布局组件
-	import MescrollEmpty from './components/mescroll-empty.vue';
-	// 引入回到顶部组件
-	import MescrollTop from './components/mescroll-top.vue';
-	// 引入兼容wxs(含renderjs)写法的mixins
-	import WxsMixin from './wxs/mixins.js';
-	
-	export default {
-		mixins: [WxsMixin],
-		components: {
-			MescrollEmpty,
-			MescrollTop
-		},
-		data() {
-			return {
-				mescroll: {optDown:{},optUp:{}}, // mescroll实例
-				downHight: 0, //下拉刷新: 容器高度
-				downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
-				downLoadType: 0, // 下拉刷新状态: 0(loading前), 1(inOffset), 2(outOffset), 3(showLoading), 4(endDownScroll)
-				upLoadType: 0, // 上拉加载状态：0（loading前），1（loading中），2（没有更多了,显示END文本提示），3（没有更多了,不显示END文本提示）
-				isShowEmpty: false, // 是否显示空布局
-				isShowToTop: false, // 是否显示回到顶部按钮
-				windowHeight: 0, // 可使用窗口的高度
-				windowBottom: 0, // 可使用窗口的底部位置
-				statusBarHeight: 0 // 状态栏高度
-			};
-		},
-		props: {
-			down: Object, // 下拉刷新的参数配置
-			up: Object, // 上拉加载的参数配置
-			top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
-			topbar: [Boolean, String], // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可留出状态栏的占位, 支持传入字符串背景,如色值,背景图,渐变)
-			bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
-			safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
-			height: [String, Number], // 指定mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
-			bottombar:{ // 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效)
-				type: Boolean,
-				default: true
-			},
-			sticky: Boolean // 是否支持sticky,默认false; 当值配置true时,需避免在mescroll-body标签前面加非定位的元素,否则下拉区域无法会隐藏
-		},
-		computed: {
-			// mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
-			minHeight(){
-				return this.toPx(this.height || '100%') + 'px'
-			},
-			// 下拉布局往下偏移的距离 (px)
-			numTop() {
-				return this.toPx(this.top)
-			},
-			padTop() {
-				return this.numTop + 'px';
-			},
-			// 上拉布局往上偏移 (px)
-			numBottom() {
-				return this.toPx(this.bottom);
-			},
-			padBottom() {
-				return this.numBottom + 'px';
-			},
-			// 是否为重置下拉的状态
-			isDownReset() {
-				return this.downLoadType === 3 || this.downLoadType === 4;
-			},
-			// 过渡
-			transition() {
-				return this.isDownReset ? 'transform 300ms' : '';
-			},
-			translateY() {
-				return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
-			},
-			// 是否在加载中
-			isDownLoading(){
-				return this.downLoadType === 3
-			},
-			// 旋转的角度
-			downRotate(){
-				return 'rotate(' + 360 * this.downRate + 'deg)'
-			},
-			// 文本提示
-			downText(){
-				if(!this.mescroll) return ""; // 避免头条小程序初始化时报错
-				switch (this.downLoadType){
-					case 1: return this.mescroll.optDown.textInOffset;
-					case 2: return this.mescroll.optDown.textOutOffset;
-					case 3: return this.mescroll.optDown.textLoading;
-					case 4: return this.mescroll.isDownEndSuccess ? this.mescroll.optDown.textSuccess : this.mescroll.isDownEndSuccess==false ? this.mescroll.optDown.textErr : this.mescroll.optDown.textInOffset;
-					default: return this.mescroll.optDown.textInOffset;
-				}
-			}
-		},
-		methods: {
-			//number,rpx,upx,px,% --> px的数值
-			toPx(num) {
-				if (typeof num === 'string') {
-					if (num.indexOf('px') !== -1) {
-						if (num.indexOf('rpx') !== -1) {
-							// "10rpx"
-							num = num.replace('rpx', '');
-						} else if (num.indexOf('upx') !== -1) {
-							// "10upx"
-							num = num.replace('upx', '');
-						} else {
-							// "10px"
-							return Number(num.replace('px', ''));
-						}
-					} else if (num.indexOf('%') !== -1) {
-						// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
-						let rate = Number(num.replace('%', '')) / 100;
-						return this.windowHeight * rate;
-					}
-				}
-				return num ? uni.upx2px(Number(num)) : 0;
-			},
-			// 点击空布局的按钮回调
-			emptyClick() {
-				this.$emit('emptyclick', this.mescroll);
-			},
-			// 点击回到顶部的按钮回调
-			toTopClick() {
-				this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
-				this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
-			}
-		},
-		// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
-		created() {
-			let vm = this;
+    // 引入mescroll-uni.js,处理核心逻辑
+    import MeScroll from './mescroll-uni.js';
+    // 引入全局配置
+    import GlobalOption from './mescroll-uni-option.js';
+    // 引入空布局组件
+    import MescrollEmpty from './components/mescroll-empty.vue';
+    // 引入回到顶部组件
+    import MescrollTop from './components/mescroll-top.vue';
+    // 引入兼容wxs(含renderjs)写法的mixins
+    import WxsMixin from './wxs/mixins.js';
+
+    export default {
+        mixins: [WxsMixin],
+        components: {
+            MescrollEmpty,
+            MescrollTop
+        },
+        data() {
+            return {
+                mescroll: {optDown: {}, optUp: {}}, // mescroll实例
+                downHight: 0, //下拉刷新: 容器高度
+                downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
+                downLoadType: 0, // 下拉刷新状态: 0(loading前), 1(inOffset), 2(outOffset), 3(showLoading), 4(endDownScroll)
+                upLoadType: 0, // 上拉加载状态：0（loading前），1（loading中），2（没有更多了,显示END文本提示），3（没有更多了,不显示END文本提示）
+                isShowEmpty: false, // 是否显示空布局
+                isShowToTop: false, // 是否显示回到顶部按钮
+                windowHeight: 0, // 可使用窗口的高度
+                windowBottom: 0, // 可使用窗口的底部位置
+                statusBarHeight: 0 // 状态栏高度
+            };
+        },
+        props: {
+            down: Object, // 下拉刷新的参数配置
+            up: Object, // 上拉加载的参数配置
+            top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
+            topbar: [Boolean, String], // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可留出状态栏的占位, 支持传入字符串背景,如色值,背景图,渐变)
+            bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
+            safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
+            height: [String, Number], // 指定mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
+            bottombar: { // 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效)
+                type: Boolean,
+                default: true
+            },
+            sticky: Boolean // 是否支持sticky,默认false; 当值配置true时,需避免在mescroll-body标签前面加非定位的元素,否则下拉区域无法会隐藏
+        },
+        computed: {
+            // mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
+            minHeight() {
+                return this.toPx(this.height || '100%') + 'px'
+            },
+            // 下拉布局往下偏移的距离 (px)
+            numTop() {
+                return this.toPx(this.top)
+            },
+            padTop() {
+                return this.numTop + 'px';
+            },
+            // 上拉布局往上偏移 (px)
+            numBottom() {
+                return this.toPx(this.bottom);
+            },
+            padBottom() {
+                return this.numBottom + 'px';
+            },
+            // 是否为重置下拉的状态
+            isDownReset() {
+                return this.downLoadType === 3 || this.downLoadType === 4;
+            },
+            // 过渡
+            transition() {
+                return this.isDownReset ? 'transform 300ms' : '';
+            },
+            translateY() {
+                return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
+            },
+            // 是否在加载中
+            isDownLoading() {
+                return this.downLoadType === 3
+            },
+            // 旋转的角度
+            downRotate() {
+                return 'rotate(' + 360 * this.downRate + 'deg)'
+            },
+            // 文本提示
+            downText() {
+                if (!this.mescroll) return ""; // 避免头条小程序初始化时报错
+                switch (this.downLoadType) {
+                    case 1:
+                        return this.mescroll.optDown.textInOffset;
+                    case 2:
+                        return this.mescroll.optDown.textOutOffset;
+                    case 3:
+                        return this.mescroll.optDown.textLoading;
+                    case 4:
+                        return this.mescroll.isDownEndSuccess ? this.mescroll.optDown.textSuccess : this.mescroll.isDownEndSuccess == false ? this.mescroll.optDown.textErr : this.mescroll.optDown.textInOffset;
+                    default:
+                        return this.mescroll.optDown.textInOffset;
+                }
+            }
+        },
+        methods: {
+            //number,rpx,upx,px,% --> px的数值
+            toPx(num) {
+                if (typeof num === 'string') {
+                    if (num.indexOf('px') !== -1) {
+                        if (num.indexOf('rpx') !== -1) {
+                            // "10rpx"
+                            num = num.replace('rpx', '');
+                        } else if (num.indexOf('upx') !== -1) {
+                            // "10upx"
+                            num = num.replace('upx', '');
+                        } else {
+                            // "10px"
+                            return Number(num.replace('px', ''));
+                        }
+                    } else if (num.indexOf('%') !== -1) {
+                        // 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
+                        let rate = Number(num.replace('%', '')) / 100;
+                        return this.windowHeight * rate;
+                    }
+                }
+                return num ? uni.upx2px(Number(num)) : 0;
+            },
+            // 点击空布局的按钮回调
+            emptyClick() {
+                this.$emit('emptyclick', this.mescroll);
+            },
+            // 点击回到顶部的按钮回调
+            toTopClick() {
+                this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
+                this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
+            }
+        },
+        // 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
+        created() {
+            let vm = this;
 
-			let diyOption = {
-				// 下拉刷新的配置
-				down: {
-					inOffset() {
-						vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
-					},
-					outOffset() {
-						vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
-					},
-					onMoving(mescroll, rate, downHight) {
-						// 下拉过程中的回调,滑动过程一直在执行;
-						vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-						vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
-					},
-					showLoading(mescroll, downHight) {
-						vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
-						vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-					},
-					beforeEndDownScroll(mescroll){
-						vm.downLoadType = 4; 
-						return mescroll.optDown.beforeEndDelay // 延时结束的时长
-					},
-					endDownScroll() {
-						vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
-						vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-						if(vm.downResetTimer) {clearTimeout(vm.downResetTimer); vm.downResetTimer = null} // 移除重置倒计时
-						vm.downResetTimer = setTimeout(()=>{ // 过渡动画执行完毕后,需重置为0的状态,避免下次inOffset不及时显示textInOffset
-							if(vm.downLoadType === 4) vm.downLoadType = 0
-						},300)
-					},
-					// 派发下拉刷新的回调
-					callback: function(mescroll) {
-						vm.$emit('down', mescroll);
-					}
-				},
-				// 上拉加载的配置
-				up: {
-					// 显示加载中的回调
-					showLoading() {
-						vm.upLoadType = 1;
-					},
-					// 显示无更多数据的回调
-					showNoMore() {
-						vm.upLoadType = 2;
-					},
-					// 隐藏上拉加载的回调
-					hideUpScroll(mescroll) {
-						vm.upLoadType = mescroll.optUp.hasNext ? 0 : 3;
-					},
-					// 空布局
-					empty: {
-						onShow(isShow) {
-							// 显示隐藏的回调
-							vm.isShowEmpty = isShow;
-						}
-					},
-					// 回到顶部
-					toTop: {
-						onShow(isShow) {
-							// 显示隐藏的回调
-							vm.isShowToTop = isShow;
-						}
-					},
-					// 派发上拉加载的回调
-					callback: function(mescroll) {
-						vm.$emit('up', mescroll);
-					}
-				}
-			};
+            let diyOption = {
+                // 下拉刷新的配置
+                down: {
+                    inOffset() {
+                        vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
+                    },
+                    outOffset() {
+                        vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
+                    },
+                    onMoving(mescroll, rate, downHight) {
+                        // 下拉过程中的回调,滑动过程一直在执行;
+                        vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+                        vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
+                    },
+                    showLoading(mescroll, downHight) {
+                        vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
+                        vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+                    },
+                    beforeEndDownScroll(mescroll) {
+                        vm.downLoadType = 4;
+                        return mescroll.optDown.beforeEndDelay // 延时结束的时长
+                    },
+                    endDownScroll() {
+                        vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
+                        vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+                        if (vm.downResetTimer) {
+                            clearTimeout(vm.downResetTimer);
+                            vm.downResetTimer = null
+                        } // 移除重置倒计时
+                        vm.downResetTimer = setTimeout(() => { // 过渡动画执行完毕后,需重置为0的状态,避免下次inOffset不及时显示textInOffset
+                            if (vm.downLoadType === 4) vm.downLoadType = 0
+                        }, 300)
+                    },
+                    // 派发下拉刷新的回调
+                    callback: function (mescroll) {
+                        vm.$emit('down', mescroll);
+                    }
+                },
+                // 上拉加载的配置
+                up: {
+                    // 显示加载中的回调
+                    showLoading() {
+                        vm.upLoadType = 1;
+                    },
+                    // 显示无更多数据的回调
+                    showNoMore() {
+                        vm.upLoadType = 2;
+                    },
+                    // 隐藏上拉加载的回调
+                    hideUpScroll(mescroll) {
+                        vm.upLoadType = mescroll.optUp.hasNext ? 0 : 3;
+                    },
+                    // 空布局
+                    empty: {
+                        onShow(isShow) {
+                            // 显示隐藏的回调
+                            vm.isShowEmpty = isShow;
+                        }
+                    },
+                    // 回到顶部
+                    toTop: {
+                        onShow(isShow) {
+                            // 显示隐藏的回调
+                            vm.isShowToTop = isShow;
+                        }
+                    },
+                    // 派发上拉加载的回调
+                    callback: function (mescroll) {
+                        vm.$emit('up', mescroll);
+                    }
+                }
+            };
 
-			MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
-			let myOption = JSON.parse(JSON.stringify({down: vm.down,up: vm.up})); // 深拷贝,避免对props的影响
-			MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
+            MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
+            let myOption = JSON.parse(JSON.stringify({down: vm.down, up: vm.up})); // 深拷贝,避免对props的影响
+            MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
 
-			// 初始化MeScroll对象
-			vm.mescroll = new MeScroll(myOption, true); // 传入true,标记body为滚动区域
-			// init回调mescroll对象
-			vm.$emit('init', vm.mescroll);
+            // 初始化MeScroll对象
+            vm.mescroll = new MeScroll(myOption, true); // 传入true,标记body为滚动区域
+            // init回调mescroll对象
+            vm.$emit('init', vm.mescroll);
 
-			// 设置高度
-			const sys = uni.getSystemInfoSync();
-			if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
-			if (sys.windowBottom) vm.windowBottom = sys.windowBottom;
-			if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
-			// 使down的bottomOffset生效
-			vm.mescroll.setBodyHeight(sys.windowHeight);
+            // 设置高度
+            const sys = uni.getSystemInfoSync();
+            if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
+            if (sys.windowBottom) vm.windowBottom = sys.windowBottom;
+            if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
+            // 使down的bottomOffset生效
+            vm.mescroll.setBodyHeight(sys.windowHeight);
 
-			// 因为使用的是page的scroll,这里需自定义scrollTo
-			vm.mescroll.resetScrollTo((y, t) => {
-				if(typeof y === 'string'){
-					// 滚动到指定view (y为css选择器)
-					setTimeout(()=>{ // 延时确保view已渲染; 不使用$nextTick
-						let selector;
-						if(y.indexOf('#')==-1 && y.indexOf('.')==-1){
-							selector = '#'+y // 不带#和. 则默认为id选择器
-						}else{
-							selector = y
-							// #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-DINGTALK
-							if(y.indexOf('>>>')!=-1){ // 不支持跨自定义组件的后代选择器 (转为普通的选择器即可跨组件查询)
-								selector = y.split('>>>')[1].trim()
-							}
-							// #endif
-						}
-						uni.createSelectorQuery().select(selector).boundingClientRect(function(rect){
-							if (rect) {
-								let top = rect.top
-								top += vm.mescroll.getScrollTop()
-								uni.pageScrollTo({
-									scrollTop: top,
-									duration: t
-								})
-							} else{
-								console.error(selector + ' does not exist');
-							}
-						}).exec()
-					},30)
-				} else{
-					// 滚动到指定位置 (y必须为数字)
-					uni.pageScrollTo({
-						scrollTop: y,
-						duration: t
-					})
-				}
-			});
+            // 因为使用的是page的scroll,这里需自定义scrollTo
+            vm.mescroll.resetScrollTo((y, t) => {
+                if (typeof y === 'string') {
+                    // 滚动到指定view (y为css选择器)
+                    setTimeout(() => { // 延时确保view已渲染; 不使用$nextTick
+                        let selector;
+                        if (y.indexOf('#') == -1 && y.indexOf('.') == -1) {
+                            selector = '#' + y // 不带#和. 则默认为id选择器
+                        } else {
+                            selector = y
+                            // #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-DINGTALK
+                            if (y.indexOf('>>>') != -1) { // 不支持跨自定义组件的后代选择器 (转为普通的选择器即可跨组件查询)
+                                selector = y.split('>>>')[1].trim()
+                            }
+                            // #endif
+                        }
+                        uni.createSelectorQuery().select(selector).boundingClientRect(function (rect) {
+                            if (rect) {
+                                let top = rect.top
+                                top += vm.mescroll.getScrollTop()
+                                uni.pageScrollTo({
+                                    scrollTop: top,
+                                    duration: t
+                                })
+                            } else {
+                                console.error(selector + ' does not exist');
+                            }
+                        }).exec()
+                    }, 30)
+                } else {
+                    // 滚动到指定位置 (y必须为数字)
+                    uni.pageScrollTo({
+                        scrollTop: y,
+                        duration: t
+                    })
+                }
+            });
 
-			// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
-			if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {} else {
-				vm.mescroll.optUp.toTop.safearea = vm.safearea;
-			}
-		}
-	};
+            // 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
+            if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {
+            } else {
+                vm.mescroll.optUp.toTop.safearea = vm.safearea;
+            }
+        }
+    };
 </script>
 
 <style>
-	@import "./mescroll-body.css";
-	@import "./components/mescroll-down.css";
-	@import './components/mescroll-up.css';
+    @import "./mescroll-body.css";
+    @import "./components/mescroll-down.css";
+    @import './components/mescroll-up.css';
 </style>

mini-program/garden-wxapp/components/mescroll-body/mescroll-mixins.js

@@ -4,66 +4,66 @@
 // import MescrollBody from "./mescroll-body.vue";
 
 const MescrollMixin = {
-	// components: { // 非H5端无法通过mixin注册组件, 只能在main.js中注册全局组件或具体界面中注册
-	// 	MescrollUni,
-	// 	MescrollBody
-	// },
-	data() {
-		return {
-			list:[],
-			mescroll: null, //mescroll实例对象
-			downOption:{
-				auto:false
-			}
-		}
-	},
-	// 注册系统自带的下拉刷新 (配置down.native为true时生效, 还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
-	onPullDownRefresh(){
-		this.mescroll && this.mescroll.onPullDownRefresh();
-	},
-	// 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
-	onPageScroll(e) {
-		this.mescroll && this.mescroll.onPageScroll(e);
-	},
-	// 注册滚动到底部的事件,用于上拉加载 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
-	onReachBottom() {
-		this.mescroll && this.mescroll.onReachBottom();
-	},
-	methods: {
-		// mescroll组件初始化的回调,可获取到mescroll对象
-		mescrollInit(mescroll) {
-			this.mescroll = mescroll;
-			this.mescrollInitByRef(); // 兼容字节跳动小程序
-		},
-		// 以ref的方式初始化mescroll对象 (兼容字节跳动小程序)
-		mescrollInitByRef() {
-			if(!this.mescroll || !this.mescroll.resetUpScroll){
-				let mescrollRef = this.$refs.mescrollRef;
-				if(mescrollRef) this.mescroll = mescrollRef.mescroll
-			}
-		},
-		reload(){
-			this.mescroll.resetUpScroll();
-		},
-		// 下拉刷新的回调 (mixin默认resetUpScroll)
-		downCallback(){
-			setTimeout(()=>{
-				this.mescroll.resetUpScroll();
-				this.$u.toast('刷新成功')
-			},1200)
-		},
-		// 上拉加载的回调
-		upCallback() {
-			// mixin默认延时500自动结束加载
-			setTimeout(()=>{
-				this.mescroll.endErr();
-			}, 500)
-		}
-	},
-	mounted() {
-		this.mescrollInitByRef(); // 兼容字节跳动小程序, 避免未设置@init或@init此时未能取到ref的情况
-	}
-	
+    // components: { // 非H5端无法通过mixin注册组件, 只能在main.js中注册全局组件或具体界面中注册
+    // 	MescrollUni,
+    // 	MescrollBody
+    // },
+    data() {
+        return {
+            list: [],
+            mescroll: null, //mescroll实例对象
+            downOption: {
+                auto: false
+            }
+        }
+    },
+    // 注册系统自带的下拉刷新 (配置down.native为true时生效, 还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
+    onPullDownRefresh() {
+        this.mescroll && this.mescroll.onPullDownRefresh();
+    },
+    // 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
+    onPageScroll(e) {
+        this.mescroll && this.mescroll.onPageScroll(e);
+    },
+    // 注册滚动到底部的事件,用于上拉加载 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
+    onReachBottom() {
+        this.mescroll && this.mescroll.onReachBottom();
+    },
+    methods: {
+        // mescroll组件初始化的回调,可获取到mescroll对象
+        mescrollInit(mescroll) {
+            this.mescroll = mescroll;
+            this.mescrollInitByRef(); // 兼容字节跳动小程序
+        },
+        // 以ref的方式初始化mescroll对象 (兼容字节跳动小程序)
+        mescrollInitByRef() {
+            if (!this.mescroll || !this.mescroll.resetUpScroll) {
+                let mescrollRef = this.$refs.mescrollRef;
+                if (mescrollRef) this.mescroll = mescrollRef.mescroll
+            }
+        },
+        reload() {
+            this.mescroll.resetUpScroll();
+        },
+        // 下拉刷新的回调 (mixin默认resetUpScroll)
+        downCallback() {
+            setTimeout(() => {
+                this.mescroll.resetUpScroll();
+                this.$u.toast('刷新成功')
+            }, 1200)
+        },
+        // 上拉加载的回调
+        upCallback() {
+            // mixin默认延时500自动结束加载
+            setTimeout(() => {
+                this.mescroll.endErr();
+            }, 500)
+        }
+    },
+    mounted() {
+        this.mescrollInitByRef(); // 兼容字节跳动小程序, 避免未设置@init或@init此时未能取到ref的情况
+    }
+
 }
 
 export default MescrollMixin;

mini-program/garden-wxapp/components/mescroll-body/mescroll-uni-option.js

@@ -1,37 +1,37 @@
 // 全局配置
 // mescroll-body 和 mescroll-uni 通用
 const GlobalOption = {
-	down: {
-		// 其他down的配置参数也可以写,这里只展示了常用的配置:
-		textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
-		textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
-		textLoading: '加载中 ...', // 加载中的提示文本
-		textSuccess: '加载成功', // 加载成功的文本
-		textErr: '加载失败', // 加载失败的文本
-		beforeEndDelay: 100, // 延时结束的时长 (显示加载成功/失败的时长)
-		offset: 80, // 在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调
-		native: false // 是否使用系统自带的下拉刷新; 默认false; 仅在mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
-	},
-	up: {
-		// 其他up的配置参数也可以写,这里只展示了常用的配置:
-		textLoading: '加载中 ...', // 加载中的提示文本
-		textNoMore: '到底啦', // 没有更多数据的提示文本
-		offset: 150, // 距底部多远时,触发upCallback,仅mescroll-uni生效 ( mescroll-body配置的是pages.json的 onReachBottomDistance )
-		toTop: {
-			// 回到顶部按钮,需配置src才显示
-			src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径 (建议放入static目录, 如 /static/img/mescroll-totop.png )
-			offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000px
-			right: 20, // 到右边的距离, 默认20 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
-			bottom: 120, // 到底部的距离, 默认120 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
-			width: 72 // 回到顶部图标的宽度, 默认72 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
-		},
-		empty: {
-			isSmall:false,
-			use: true, // 是否显示空布局
-			icon: "https://park.nxzhsq.cn/park/miniofile/xlyq/empty/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
-			tip: '暂无数据' // 提示
-		}
-	}
+    down: {
+        // 其他down的配置参数也可以写,这里只展示了常用的配置:
+        textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
+        textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
+        textLoading: '加载中 ...', // 加载中的提示文本
+        textSuccess: '加载成功', // 加载成功的文本
+        textErr: '加载失败', // 加载失败的文本
+        beforeEndDelay: 100, // 延时结束的时长 (显示加载成功/失败的时长)
+        offset: 80, // 在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调
+        native: false // 是否使用系统自带的下拉刷新; 默认false; 仅在mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
+    },
+    up: {
+        // 其他up的配置参数也可以写,这里只展示了常用的配置:
+        textLoading: '加载中 ...', // 加载中的提示文本
+        textNoMore: '到底啦', // 没有更多数据的提示文本
+        offset: 150, // 距底部多远时,触发upCallback,仅mescroll-uni生效 ( mescroll-body配置的是pages.json的 onReachBottomDistance )
+        toTop: {
+            // 回到顶部按钮,需配置src才显示
+            src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径 (建议放入static目录, 如 /static/img/mescroll-totop.png )
+            offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000px
+            right: 20, // 到右边的距离, 默认20 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
+            bottom: 120, // 到底部的距离, 默认120 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
+            width: 72 // 回到顶部图标的宽度, 默认72 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
+        },
+        empty: {
+            isSmall: false,
+            use: true, // 是否显示空布局
+            icon: "https://park.nxzhsq.cn/park/miniofile/xlyq/empty/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
+            tip: '暂无数据' // 提示
+        }
+    }
 }
 
 export default GlobalOption

mini-program/garden-wxapp/components/mescroll-body/mescroll-uni.css

@@ -1,36 +1,36 @@
-.mescroll-uni-warp{
-	height: 100%;
+.mescroll-uni-warp {
+    height: 100%;
 }
 
-.mescroll-uni-content{
-	height: 100%;
+.mescroll-uni-content {
+    height: 100%;
 }
 
 .mescroll-uni {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	min-height: 200rpx;
-	overflow-y: auto;
-	box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 200 rpx;
+    overflow-y: auto;
+    box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
 }
 
 /* 定位的方式固定高度 */
-.mescroll-uni-fixed{
-	z-index: 1;
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	width: auto; /* 使right生效 */
-	height: auto; /* 使bottom生效 */
+.mescroll-uni-fixed {
+    z-index: 1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto; /* 使right生效 */
+    height: auto; /* 使bottom生效 */
 }
 
 /* 适配 iPhoneX */
 @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
-	.mescroll-safearea {
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-	}
+    .mescroll-safearea {
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
 }

mini-program/garden-wxapp/components/mescroll-body/mescroll-uni.vue

@@ -1,63 +1,75 @@
 <template>
-	<view class="mescroll-uni-warp">
-		<scroll-view :id="viewId" class="mescroll-uni" :class="{'mescroll-uni-fixed':isFixed}" :style="{'height':scrollHeight,'padding-top':padTop,'padding-bottom':padBottom,'top':fixedTop,'bottom':fixedBottom}" :scroll-top="scrollTop" :scroll-with-animation="scrollAnim" @scroll="scroll" :scroll-y='scrollable' :enable-back-to-top="true" :throttle="false">
-			<view class="mescroll-uni-content mescroll-render-touch"
-			@touchstart="wxsBiz.touchstartEvent" 
-			@touchmove="wxsBiz.touchmoveEvent" 
-			@touchend="wxsBiz.touchendEvent" 
-			@touchcancel="wxsBiz.touchendEvent"
-			:change:prop="wxsBiz.propObserver"
-			:prop="wxsProp">
-				<!-- 状态栏 -->
-				<view v-if="topbar&&statusBarHeight" class="mescroll-topbar" :style="{height: statusBarHeight+'px', background: topbar}"></view>
-		
-				<view class="mescroll-wxs-content" :style="{'transform': translateY, 'transition': transition}" :change:prop="wxsBiz.callObserver" :prop="callProp">
-					<!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
-					<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
-					<view v-if="mescroll.optDown.use" class="mescroll-downwarp" :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}">
-						<view class="downwarp-content">
-							<view class="downwarp-progress mescroll-wxs-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mescroll.optDown.textColor, 'transform': downRotate}"></view>
-							<view class="downwarp-tip">{{downText}}</view>
-						</view>
-					</view>
+    <view class="mescroll-uni-warp">
+        <scroll-view :id="viewId" class="mescroll-uni" :class="{'mescroll-uni-fixed':isFixed}"
+                     :style="{'height':scrollHeight,'padding-top':padTop,'padding-bottom':padBottom,'top':fixedTop,'bottom':fixedBottom}"
+                     :scroll-top="scrollTop" :scroll-with-animation="scrollAnim" @scroll="scroll" :scroll-y='scrollable'
+                     :enable-back-to-top="true" :throttle="false">
+            <view class="mescroll-uni-content mescroll-render-touch"
+                  @touchstart="wxsBiz.touchstartEvent"
+                  @touchmove="wxsBiz.touchmoveEvent"
+                  @touchend="wxsBiz.touchendEvent"
+                  @touchcancel="wxsBiz.touchendEvent"
+                  :change:prop="wxsBiz.propObserver"
+                  :prop="wxsProp">
+                <!-- 状态栏 -->
+                <view v-if="topbar&&statusBarHeight" class="mescroll-topbar"
+                      :style="{height: statusBarHeight+'px', background: topbar}"></view>
 
-					<!-- 列表内容 -->
-					<slot></slot>
+                <view class="mescroll-wxs-content" :style="{'transform': translateY, 'transition': transition}"
+                      :change:prop="wxsBiz.callObserver" :prop="callProp">
+                    <!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
+                    <!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
+                    <view v-if="mescroll.optDown.use" class="mescroll-downwarp"
+                          :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}">
+                        <view class="downwarp-content">
+                            <view class="downwarp-progress mescroll-wxs-progress"
+                                  :class="{'mescroll-rotate': isDownLoading}"
+                                  :style="{'border-color':mescroll.optDown.textColor, 'transform': downRotate}"></view>
+                            <view class="downwarp-tip">{{downText}}</view>
+                        </view>
+                    </view>
 
-					<!-- 空布局 -->
-					<mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty>
+                    <!-- 列表内容 -->
+                    <slot></slot>
 
-					<!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
-					<!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
-					<view v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" class="mescroll-upwarp" :style="{'background':mescroll.optUp.bgColor,'color':mescroll.optUp.textColor}">
-						<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
-						<view v-show="upLoadType===1">
-							<view class="upwarp-progress mescroll-rotate" :style="{'border-color':mescroll.optUp.textColor}"></view>
-							<view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
-						</view>
-						<!-- 无数据 -->
-						<view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
-					</view>
-				</view>
-			
-				<!-- 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效) -->
-				<!-- #ifdef H5 -->
-				<view v-if="bottombar && windowBottom>0" class="mescroll-bottombar" :style="{height: windowBottom+'px'}"></view>
-				<!-- #endif -->
-				
-				<!-- 适配iPhoneX -->
-				<view v-if="safearea" class="mescroll-safearea"></view>
-			</view>
-		</scroll-view>
+                    <!-- 空布局 -->
+                    <mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty"
+                                    @emptyclick="emptyClick"></mescroll-empty>
 
-		<!-- 回到顶部按钮 (fixed元素,需写在scroll-view外面,防止滚动的时候抖动)-->
-		<mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
-		
-		<!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->
-		<!-- renderjs的数据载体,不可写在mescroll-downwarp内部,避免use为false时,载体丢失,无法更新数据 -->
-		<view :change:prop="renderBiz.propObserver" :prop="wxsProp"></view>
-		<!-- #endif -->
-	</view>
+                    <!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
+                    <!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
+                    <view v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" class="mescroll-upwarp"
+                          :style="{'background':mescroll.optUp.bgColor,'color':mescroll.optUp.textColor}">
+                        <!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
+                        <view v-show="upLoadType===1">
+                            <view class="upwarp-progress mescroll-rotate"
+                                  :style="{'border-color':mescroll.optUp.textColor}"></view>
+                            <view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
+                        </view>
+                        <!-- 无数据 -->
+                        <view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
+                    </view>
+                </view>
+
+                <!-- 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效) -->
+                <!-- #ifdef H5 -->
+                <view v-if="bottombar && windowBottom>0" class="mescroll-bottombar"
+                      :style="{height: windowBottom+'px'}"></view>
+                <!-- #endif -->
+
+                <!-- 适配iPhoneX -->
+                <view v-if="safearea" class="mescroll-safearea"></view>
+            </view>
+        </scroll-view>
+
+        <!-- 回到顶部按钮 (fixed元素,需写在scroll-view外面,防止滚动的时候抖动)-->
+        <mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
+
+        <!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->
+        <!-- renderjs的数据载体,不可写在mescroll-downwarp内部,避免use为false时,载体丢失,无法更新数据 -->
+        <view :change:prop="renderBiz.propObserver" :prop="wxsProp"></view>
+        <!-- #endif -->
+    </view>
 </template>
 
 <!-- 微信小程序, QQ小程序, app, h5使用wxs -->
@@ -72,353 +84,360 @@
 	export default {
 		mixins:[renderBiz]
 	}
+
 </script>
 <!-- #endif -->
 
 <script>
-	// 引入mescroll-uni.js,处理核心逻辑
-	import MeScroll from './mescroll-uni.js';
-	// 引入全局配置
-	import GlobalOption from './mescroll-uni-option.js';
-	// 引入空布局组件
-	import MescrollEmpty from './components/mescroll-empty.vue';
-	// 引入回到顶部组件
-	import MescrollTop from './components/mescroll-top.vue';
-	// 引入兼容wxs(含renderjs)写法的mixins
-	import WxsMixin from './wxs/mixins.js';
-	
-	export default {
-		mixins: [WxsMixin],
-		components: {
-			MescrollEmpty,
-			MescrollTop
-		},
-		data() {
-			return {
-				mescroll: {optDown:{},optUp:{}}, // mescroll实例
-				viewId: 'id_' + Math.random().toString(36).substr(2,16), // 随机生成mescroll的id(不能数字开头,否则找不到元素)
-				downHight: 0, //下拉刷新: 容器高度
-				downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
-				downLoadType: 0, // 下拉刷新状态: 0(loading前), 1(inOffset), 2(outOffset), 3(showLoading), 4(endDownScroll)
-				upLoadType: 0, // 上拉加载状态: 0(loading前), 1loading中, 2没有更多了,显示END文本提示, 3(没有更多了,不显示END文本提示)
-				isShowEmpty: false, // 是否显示空布局
-				isShowToTop: false, // 是否显示回到顶部按钮
-				scrollTop: 0, // 滚动条的位置
-				scrollAnim: false, // 是否开启滚动动画
-				windowTop: 0, // 可使用窗口的顶部位置
-				windowBottom: 0, // 可使用窗口的底部位置
-				windowHeight: 0, // 可使用窗口的高度
-				statusBarHeight: 0 // 状态栏高度
-			}
-		},
-		props: {
-			down: Object, // 下拉刷新的参数配置
-			up: Object, // 上拉加载的参数配置
-			top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
-			topbar: [Boolean, String], // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可留出状态栏的占位, 支持传入字符串背景,如色值,背景图,渐变)
-			bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
-			safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
-			fixed: { // 是否通过fixed固定mescroll的高度, 默认true
-				type: Boolean,
-				default: true
-			},
-			height: [String, Number], // 指定mescroll的高度, 此项有值,则不使用fixed. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
-			bottombar:{ // 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效)
-				type: Boolean,
-				default: true
-			}
-		},
-		computed: {
-			// 是否使用fixed定位 (当height有值,则不使用)
-			isFixed(){
-				return !this.height && this.fixed
-			},
-			// mescroll的高度
-			scrollHeight(){
-				if (this.isFixed) {
-					return "auto"
-				} else if(this.height){
-					return this.toPx(this.height) + 'px'
-				}else{
-					return "100%"
-				}
-			},
-			// 下拉布局往下偏移的距离 (px)
-			numTop() {
-				return this.toPx(this.top)
-			},
-			fixedTop() {
-				return this.isFixed ? (this.numTop + this.windowTop) + 'px' : 0
-			},
-			padTop() {
-				return !this.isFixed ? this.numTop + 'px' : 0
-			},
-			// 上拉布局往上偏移 (px)
-			numBottom() {
-				return this.toPx(this.bottom)
-			},
-			fixedBottom() {
-				return this.isFixed ? (this.numBottom + this.windowBottom) + 'px' : 0
-			},
-			padBottom() {
-				return !this.isFixed ? this.numBottom + 'px' : 0
-			},
-			// 是否为重置下拉的状态
-			isDownReset(){
-				return this.downLoadType===3 || this.downLoadType===4
-			},
-			// 过渡
-			transition() {
-				return this.isDownReset ? 'transform 300ms' : '';
-			},
-			translateY() {
-				return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
-			},
-			// 列表是否可滑动
-			scrollable(){
-				return this.downLoadType===0 || this.isDownReset
-			},
-			// 是否在加载中
-			isDownLoading(){
-				return this.downLoadType === 3
-			},
-			// 旋转的角度
-			downRotate(){
-				return 'rotate(' + 360 * this.downRate + 'deg)'
-			},
-			// 文本提示
-			downText(){
-				if(!this.mescroll) return ""; // 避免头条小程序初始化时报错
-				switch (this.downLoadType){
-					case 1: return this.mescroll.optDown.textInOffset;
-					case 2: return this.mescroll.optDown.textOutOffset;
-					case 3: return this.mescroll.optDown.textLoading;
-					case 4: return this.mescroll.isDownEndSuccess ? this.mescroll.optDown.textSuccess : this.mescroll.isDownEndSuccess==false ? this.mescroll.optDown.textErr : this.mescroll.optDown.textInOffset;
-					default: return this.mescroll.optDown.textInOffset;
-				}
-			}
-		},
-		methods: {
-			//number,rpx,upx,px,% --> px的数值
-			toPx(num){
-				if(typeof num === "string"){
-					if (num.indexOf('px') !== -1) {
-						if(num.indexOf('rpx') !== -1) { // "10rpx"
-							num = num.replace('rpx', '');
-						} else if(num.indexOf('upx') !== -1) { // "10upx"
-							num = num.replace('upx', '');
-						} else { // "10px"
-							return Number(num.replace('px', ''))
-						}
-					}else if (num.indexOf('%') !== -1){
-						// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
-						let rate = Number(num.replace("%","")) / 100
-						return this.windowHeight * rate
-					}
-				}
-				return num ? uni.upx2px(Number(num)) : 0
-			},
-			//注册列表滚动事件,用于下拉刷新和上拉加载
-			scroll(e) {
-				this.mescroll.scroll(e.detail, () => {
-					this.$emit('scroll', this.mescroll) // 此时可直接通过 this.mescroll.scrollTop获取滚动条位置; this.mescroll.isScrollUp获取是否向上滑动
-				})
-			},
-			// 点击空布局的按钮回调
-			emptyClick() {
-				this.$emit('emptyclick', this.mescroll)
-			},
-			// 点击回到顶部的按钮回调
-			toTopClick() {
-				this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
-				this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
-			},
-			// 更新滚动区域的高度 (使内容不满屏和到底,都可继续翻页)
-			setClientHeight() {
-				if (this.mescroll.getClientHeight(true) === 0 && !this.isExec) {
-					this.isExec = true; // 避免多次获取
-					this.$nextTick(() => { // 确保dom已渲染
-						this.getClientInfo(data=>{
-							this.isExec = false;
-							if (data) {
-								this.mescroll.setClientHeight(data.height);
-							} else if (this.clientNum != 3) { // 极少部分情况,可能dom还未渲染完毕,递归获取,最多重试3次
-								this.clientNum = this.clientNum == null ? 1 : this.clientNum + 1;
-								setTimeout(() => {
-									this.setClientHeight()
-								}, this.clientNum * 100)
-							}
-						})
-					})
-				}
-			},
-			// 获取滚动区域的信息
-			getClientInfo(success){
-				let query = uni.createSelectorQuery();
-				// #ifndef MP-ALIPAY || MP-DINGTALK
-				query = query.in(this) // 支付宝小程序不支持in(this),而字节跳动小程序必须写in(this), 否则都取不到值
-				// #endif
-				let view = query.select('#' + this.viewId);
-				view.boundingClientRect(data => {
-					success(data)
-				}).exec();
-			}
-		},
-		// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
-		created() {
-			let vm = this;
+    // 引入mescroll-uni.js,处理核心逻辑
+    import MeScroll from './mescroll-uni.js';
+    // 引入全局配置
+    import GlobalOption from './mescroll-uni-option.js';
+    // 引入空布局组件
+    import MescrollEmpty from './components/mescroll-empty.vue';
+    // 引入回到顶部组件
+    import MescrollTop from './components/mescroll-top.vue';
+    // 引入兼容wxs(含renderjs)写法的mixins
+    import WxsMixin from './wxs/mixins.js';
 
-			let diyOption = {
-				// 下拉刷新的配置
-				down: {
-					inOffset() {
-						vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
-					},
-					outOffset() {
-						vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
-					},
-					onMoving(mescroll, rate, downHight) {
-						// 下拉过程中的回调,滑动过程一直在执行;
-						vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-						vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
-					},
-					showLoading(mescroll, downHight) {
-						vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
-						vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-					},
-					beforeEndDownScroll(mescroll){
-						vm.downLoadType = 4; 
-						return mescroll.optDown.beforeEndDelay // 延时结束的时长
-					},
-					endDownScroll() {
-						vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
-						vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-						vm.downResetTimer && clearTimeout(vm.downResetTimer)
-						vm.downResetTimer = setTimeout(()=>{ // 过渡动画执行完毕后,需重置为0的状态,以便置空this.transition,避免iOS小程序列表渲染不完整
-							if(vm.downLoadType===4) vm.downLoadType = 0
-						},300)
-					},
-					// 派发下拉刷新的回调
-					callback: function(mescroll) {
-						vm.$emit('down', mescroll)
-					}
-				},
-				// 上拉加载的配置
-				up: {
-					// 显示加载中的回调
-					showLoading() {
-						vm.upLoadType = 1;
-					},
-					// 显示无更多数据的回调
-					showNoMore() {
-						vm.upLoadType = 2;
-					},
-					// 隐藏上拉加载的回调
-					hideUpScroll(mescroll) {
-						vm.upLoadType = mescroll.optUp.hasNext ? 0 : 3;
-					},
-					// 空布局
-					empty: {
-						onShow(isShow) { // 显示隐藏的回调
-							vm.isShowEmpty = isShow;
-						}
-					},
-					// 回到顶部
-					toTop: {
-						onShow(isShow) { // 显示隐藏的回调
-							vm.isShowToTop = isShow;
-						}
-					},
-					// 派发上拉加载的回调
-					callback: function(mescroll) {
-						vm.$emit('up', mescroll);
-						// 更新容器的高度 (多mescroll的情况)
-						vm.setClientHeight()
-					}
-				}
-			}
+    export default {
+        mixins: [WxsMixin],
+        components: {
+            MescrollEmpty,
+            MescrollTop
+        },
+        data() {
+            return {
+                mescroll: {optDown: {}, optUp: {}}, // mescroll实例
+                viewId: 'id_' + Math.random().toString(36).substr(2, 16), // 随机生成mescroll的id(不能数字开头,否则找不到元素)
+                downHight: 0, //下拉刷新: 容器高度
+                downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
+                downLoadType: 0, // 下拉刷新状态: 0(loading前), 1(inOffset), 2(outOffset), 3(showLoading), 4(endDownScroll)
+                upLoadType: 0, // 上拉加载状态: 0(loading前), 1loading中, 2没有更多了,显示END文本提示, 3(没有更多了,不显示END文本提示)
+                isShowEmpty: false, // 是否显示空布局
+                isShowToTop: false, // 是否显示回到顶部按钮
+                scrollTop: 0, // 滚动条的位置
+                scrollAnim: false, // 是否开启滚动动画
+                windowTop: 0, // 可使用窗口的顶部位置
+                windowBottom: 0, // 可使用窗口的底部位置
+                windowHeight: 0, // 可使用窗口的高度
+                statusBarHeight: 0 // 状态栏高度
+            }
+        },
+        props: {
+            down: Object, // 下拉刷新的参数配置
+            up: Object, // 上拉加载的参数配置
+            top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
+            topbar: [Boolean, String], // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可留出状态栏的占位, 支持传入字符串背景,如色值,背景图,渐变)
+            bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
+            safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
+            fixed: { // 是否通过fixed固定mescroll的高度, 默认true
+                type: Boolean,
+                default: true
+            },
+            height: [String, Number], // 指定mescroll的高度, 此项有值,则不使用fixed. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
+            bottombar: { // 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效)
+                type: Boolean,
+                default: true
+            }
+        },
+        computed: {
+            // 是否使用fixed定位 (当height有值,则不使用)
+            isFixed() {
+                return !this.height && this.fixed
+            },
+            // mescroll的高度
+            scrollHeight() {
+                if (this.isFixed) {
+                    return "auto"
+                } else if (this.height) {
+                    return this.toPx(this.height) + 'px'
+                } else {
+                    return "100%"
+                }
+            },
+            // 下拉布局往下偏移的距离 (px)
+            numTop() {
+                return this.toPx(this.top)
+            },
+            fixedTop() {
+                return this.isFixed ? (this.numTop + this.windowTop) + 'px' : 0
+            },
+            padTop() {
+                return !this.isFixed ? this.numTop + 'px' : 0
+            },
+            // 上拉布局往上偏移 (px)
+            numBottom() {
+                return this.toPx(this.bottom)
+            },
+            fixedBottom() {
+                return this.isFixed ? (this.numBottom + this.windowBottom) + 'px' : 0
+            },
+            padBottom() {
+                return !this.isFixed ? this.numBottom + 'px' : 0
+            },
+            // 是否为重置下拉的状态
+            isDownReset() {
+                return this.downLoadType === 3 || this.downLoadType === 4
+            },
+            // 过渡
+            transition() {
+                return this.isDownReset ? 'transform 300ms' : '';
+            },
+            translateY() {
+                return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
+            },
+            // 列表是否可滑动
+            scrollable() {
+                return this.downLoadType === 0 || this.isDownReset
+            },
+            // 是否在加载中
+            isDownLoading() {
+                return this.downLoadType === 3
+            },
+            // 旋转的角度
+            downRotate() {
+                return 'rotate(' + 360 * this.downRate + 'deg)'
+            },
+            // 文本提示
+            downText() {
+                if (!this.mescroll) return ""; // 避免头条小程序初始化时报错
+                switch (this.downLoadType) {
+                    case 1:
+                        return this.mescroll.optDown.textInOffset;
+                    case 2:
+                        return this.mescroll.optDown.textOutOffset;
+                    case 3:
+                        return this.mescroll.optDown.textLoading;
+                    case 4:
+                        return this.mescroll.isDownEndSuccess ? this.mescroll.optDown.textSuccess : this.mescroll.isDownEndSuccess == false ? this.mescroll.optDown.textErr : this.mescroll.optDown.textInOffset;
+                    default:
+                        return this.mescroll.optDown.textInOffset;
+                }
+            }
+        },
+        methods: {
+            //number,rpx,upx,px,% --> px的数值
+            toPx(num) {
+                if (typeof num === "string") {
+                    if (num.indexOf('px') !== -1) {
+                        if (num.indexOf('rpx') !== -1) { // "10rpx"
+                            num = num.replace('rpx', '');
+                        } else if (num.indexOf('upx') !== -1) { // "10upx"
+                            num = num.replace('upx', '');
+                        } else { // "10px"
+                            return Number(num.replace('px', ''))
+                        }
+                    } else if (num.indexOf('%') !== -1) {
+                        // 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
+                        let rate = Number(num.replace("%", "")) / 100
+                        return this.windowHeight * rate
+                    }
+                }
+                return num ? uni.upx2px(Number(num)) : 0
+            },
+            //注册列表滚动事件,用于下拉刷新和上拉加载
+            scroll(e) {
+                this.mescroll.scroll(e.detail, () => {
+                    this.$emit('scroll', this.mescroll) // 此时可直接通过 this.mescroll.scrollTop获取滚动条位置; this.mescroll.isScrollUp获取是否向上滑动
+                })
+            },
+            // 点击空布局的按钮回调
+            emptyClick() {
+                this.$emit('emptyclick', this.mescroll)
+            },
+            // 点击回到顶部的按钮回调
+            toTopClick() {
+                this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
+                this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
+            },
+            // 更新滚动区域的高度 (使内容不满屏和到底,都可继续翻页)
+            setClientHeight() {
+                if (this.mescroll.getClientHeight(true) === 0 && !this.isExec) {
+                    this.isExec = true; // 避免多次获取
+                    this.$nextTick(() => { // 确保dom已渲染
+                        this.getClientInfo(data => {
+                            this.isExec = false;
+                            if (data) {
+                                this.mescroll.setClientHeight(data.height);
+                            } else if (this.clientNum != 3) { // 极少部分情况,可能dom还未渲染完毕,递归获取,最多重试3次
+                                this.clientNum = this.clientNum == null ? 1 : this.clientNum + 1;
+                                setTimeout(() => {
+                                    this.setClientHeight()
+                                }, this.clientNum * 100)
+                            }
+                        })
+                    })
+                }
+            },
+            // 获取滚动区域的信息
+            getClientInfo(success) {
+                let query = uni.createSelectorQuery();
+                // #ifndef MP-ALIPAY || MP-DINGTALK
+                query = query.in(this) // 支付宝小程序不支持in(this),而字节跳动小程序必须写in(this), 否则都取不到值
+                // #endif
+                let view = query.select('#' + this.viewId);
+                view.boundingClientRect(data => {
+                    success(data)
+                }).exec();
+            }
+        },
+        // 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
+        created() {
+            let vm = this;
 
-			MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
-			let myOption = JSON.parse(JSON.stringify({'down': vm.down,'up': vm.up})) // 深拷贝,避免对props的影响
-			MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
+            let diyOption = {
+                // 下拉刷新的配置
+                down: {
+                    inOffset() {
+                        vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
+                    },
+                    outOffset() {
+                        vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
+                    },
+                    onMoving(mescroll, rate, downHight) {
+                        // 下拉过程中的回调,滑动过程一直在执行;
+                        vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+                        vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
+                    },
+                    showLoading(mescroll, downHight) {
+                        vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
+                        vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+                    },
+                    beforeEndDownScroll(mescroll) {
+                        vm.downLoadType = 4;
+                        return mescroll.optDown.beforeEndDelay // 延时结束的时长
+                    },
+                    endDownScroll() {
+                        vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
+                        vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+                        vm.downResetTimer && clearTimeout(vm.downResetTimer)
+                        vm.downResetTimer = setTimeout(() => { // 过渡动画执行完毕后,需重置为0的状态,以便置空this.transition,避免iOS小程序列表渲染不完整
+                            if (vm.downLoadType === 4) vm.downLoadType = 0
+                        }, 300)
+                    },
+                    // 派发下拉刷新的回调
+                    callback: function (mescroll) {
+                        vm.$emit('down', mescroll)
+                    }
+                },
+                // 上拉加载的配置
+                up: {
+                    // 显示加载中的回调
+                    showLoading() {
+                        vm.upLoadType = 1;
+                    },
+                    // 显示无更多数据的回调
+                    showNoMore() {
+                        vm.upLoadType = 2;
+                    },
+                    // 隐藏上拉加载的回调
+                    hideUpScroll(mescroll) {
+                        vm.upLoadType = mescroll.optUp.hasNext ? 0 : 3;
+                    },
+                    // 空布局
+                    empty: {
+                        onShow(isShow) { // 显示隐藏的回调
+                            vm.isShowEmpty = isShow;
+                        }
+                    },
+                    // 回到顶部
+                    toTop: {
+                        onShow(isShow) { // 显示隐藏的回调
+                            vm.isShowToTop = isShow;
+                        }
+                    },
+                    // 派发上拉加载的回调
+                    callback: function (mescroll) {
+                        vm.$emit('up', mescroll);
+                        // 更新容器的高度 (多mescroll的情况)
+                        vm.setClientHeight()
+                    }
+                }
+            }
 
-			// 初始化MeScroll对象
-			vm.mescroll = new MeScroll(myOption);
-			vm.mescroll.viewId = vm.viewId; // 附带id
-			// init回调mescroll对象
-			vm.$emit('init', vm.mescroll);
-			
-			// 设置高度
-			const sys = uni.getSystemInfoSync();
-			if(sys.windowTop) vm.windowTop = sys.windowTop;
-			if(sys.windowBottom) vm.windowBottom = sys.windowBottom;
-			if(sys.windowHeight) vm.windowHeight = sys.windowHeight;
-			if(sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
-			// 使down的bottomOffset生效
-			vm.mescroll.setBodyHeight(sys.windowHeight);
+            MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
+            let myOption = JSON.parse(JSON.stringify({'down': vm.down, 'up': vm.up})) // 深拷贝,避免对props的影响
+            MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
 
-			// 因为使用的是scrollview,这里需自定义scrollTo
-			vm.mescroll.resetScrollTo((y, t) => {
-				vm.scrollAnim = (t !== 0); // t为0,则不使用动画过渡
-				if(typeof y === 'string'){
-					// 小程序不支持slot里面的scroll-into-view, 统一使用计算的方式实现
-					vm.getClientInfo(function(rect){
-						let mescrollTop = rect.top // mescroll到顶部的距离
-						let selector;
-						if(y.indexOf('#')==-1 && y.indexOf('.')==-1){
-							selector = '#'+y // 不带#和. 则默认为id选择器
-						}else{
-							selector = y
-							// #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-DINGTALK
-							if(y.indexOf('>>>')!=-1){ // 不支持跨自定义组件的后代选择器 (转为普通的选择器即可跨组件查询)
-								selector = y.split('>>>')[1].trim()
-							}
-							// #endif
-						}
-						uni.createSelectorQuery().select(selector).boundingClientRect(function(rect){
-							if (rect) {
-								let curY = vm.mescroll.getScrollTop()
-								let top = rect.top - mescrollTop
-								top += curY
-								if(!vm.isFixed) top -= vm.numTop
-								vm.scrollTop = curY;
-								vm.$nextTick(function() {
-									vm.scrollTop = top
-								})
-							} else{
-								console.error(selector + ' does not exist');
-							}
-						}).exec()
-					})
-					return;
-				}
-				let curY = vm.mescroll.getScrollTop()
-				if (t === 0 || t === 300) { // 当t使用默认配置的300时,则使用系统自带的动画过渡
-					vm.scrollTop = curY;
-					vm.$nextTick(function() {
-						vm.scrollTop = y
-					})
-				} else {
-					vm.mescroll.getStep(curY, y, step => { // 此写法可支持配置t
-						vm.scrollTop = step
-					}, t)
-				}
-			})
-			
-			// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
-			if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {} else {
-				vm.mescroll.optUp.toTop.safearea = vm.safearea;
-			}
-		},
-		mounted() {
-			// 设置容器的高度
-			this.setClientHeight()
-		}
-	}
+            // 初始化MeScroll对象
+            vm.mescroll = new MeScroll(myOption);
+            vm.mescroll.viewId = vm.viewId; // 附带id
+            // init回调mescroll对象
+            vm.$emit('init', vm.mescroll);
+
+            // 设置高度
+            const sys = uni.getSystemInfoSync();
+            if (sys.windowTop) vm.windowTop = sys.windowTop;
+            if (sys.windowBottom) vm.windowBottom = sys.windowBottom;
+            if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
+            if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
+            // 使down的bottomOffset生效
+            vm.mescroll.setBodyHeight(sys.windowHeight);
+
+            // 因为使用的是scrollview,这里需自定义scrollTo
+            vm.mescroll.resetScrollTo((y, t) => {
+                vm.scrollAnim = (t !== 0); // t为0,则不使用动画过渡
+                if (typeof y === 'string') {
+                    // 小程序不支持slot里面的scroll-into-view, 统一使用计算的方式实现
+                    vm.getClientInfo(function (rect) {
+                        let mescrollTop = rect.top // mescroll到顶部的距离
+                        let selector;
+                        if (y.indexOf('#') == -1 && y.indexOf('.') == -1) {
+                            selector = '#' + y // 不带#和. 则默认为id选择器
+                        } else {
+                            selector = y
+                            // #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-DINGTALK
+                            if (y.indexOf('>>>') != -1) { // 不支持跨自定义组件的后代选择器 (转为普通的选择器即可跨组件查询)
+                                selector = y.split('>>>')[1].trim()
+                            }
+                            // #endif
+                        }
+                        uni.createSelectorQuery().select(selector).boundingClientRect(function (rect) {
+                            if (rect) {
+                                let curY = vm.mescroll.getScrollTop()
+                                let top = rect.top - mescrollTop
+                                top += curY
+                                if (!vm.isFixed) top -= vm.numTop
+                                vm.scrollTop = curY;
+                                vm.$nextTick(function () {
+                                    vm.scrollTop = top
+                                })
+                            } else {
+                                console.error(selector + ' does not exist');
+                            }
+                        }).exec()
+                    })
+                    return;
+                }
+                let curY = vm.mescroll.getScrollTop()
+                if (t === 0 || t === 300) { // 当t使用默认配置的300时,则使用系统自带的动画过渡
+                    vm.scrollTop = curY;
+                    vm.$nextTick(function () {
+                        vm.scrollTop = y
+                    })
+                } else {
+                    vm.mescroll.getStep(curY, y, step => { // 此写法可支持配置t
+                        vm.scrollTop = step
+                    }, t)
+                }
+            })
+
+            // 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
+            if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {
+            } else {
+                vm.mescroll.optUp.toTop.safearea = vm.safearea;
+            }
+        },
+        mounted() {
+            // 设置容器的高度
+            this.setClientHeight()
+        }
+    }
 </script>
 
 <style>
-	@import "./mescroll-uni.css";
-	@import "./components/mescroll-down.css";
-	@import './components/mescroll-up.css';
+    @import "./mescroll-uni.css";
+    @import "./components/mescroll-down.css";
+    @import './components/mescroll-up.css';
 </style>

mini-program/garden-wxapp/components/mescroll-body/mixins/mescroll-comp.js

@@ -2,47 +2,47 @@
  * mescroll-body写在子组件时,需通过mescroll的mixins补充子组件缺少的生命周期
  */
 const MescrollCompMixin = {
-	// 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件 (一级)
-	onPageScroll(e) {
-		this.handlePageScroll(e)
-	},
-	onReachBottom() {
-		this.handleReachBottom()
-	},
-	// 当down的native: true时, 还需传递此方法进到子组件
-	onPullDownRefresh(){
-		this.handlePullDownRefresh()
-	},
-	// mescroll-body写在子子子...组件的情况 (多级)
-	data() {
-		return {
-			mescroll: {
-				onPageScroll: e=>{
-					this.handlePageScroll(e)
-				},
-				onReachBottom: ()=>{
-					this.handleReachBottom()
-				},
-				onPullDownRefresh: ()=>{
-					this.handlePullDownRefresh()
-				}
-			}
-		}
-	},
-	methods:{
-		handlePageScroll(e){
-			let item = this.$refs["mescrollItem"];
-			if(item && item.mescroll) item.mescroll.onPageScroll(e);
-		},
-		handleReachBottom(){
-			let item = this.$refs["mescrollItem"];
-			if(item && item.mescroll) item.mescroll.onReachBottom();
-		},
-		handlePullDownRefresh(){
-			let item = this.$refs["mescrollItem"];
-			if(item && item.mescroll) item.mescroll.onPullDownRefresh();
-		}
-	}
+    // 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件 (一级)
+    onPageScroll(e) {
+        this.handlePageScroll(e)
+    },
+    onReachBottom() {
+        this.handleReachBottom()
+    },
+    // 当down的native: true时, 还需传递此方法进到子组件
+    onPullDownRefresh() {
+        this.handlePullDownRefresh()
+    },
+    // mescroll-body写在子子子...组件的情况 (多级)
+    data() {
+        return {
+            mescroll: {
+                onPageScroll: e => {
+                    this.handlePageScroll(e)
+                },
+                onReachBottom: () => {
+                    this.handleReachBottom()
+                },
+                onPullDownRefresh: () => {
+                    this.handlePullDownRefresh()
+                }
+            }
+        }
+    },
+    methods: {
+        handlePageScroll(e) {
+            let item = this.$refs["mescrollItem"];
+            if (item && item.mescroll) item.mescroll.onPageScroll(e);
+        },
+        handleReachBottom() {
+            let item = this.$refs["mescrollItem"];
+            if (item && item.mescroll) item.mescroll.onReachBottom();
+        },
+        handlePullDownRefresh() {
+            let item = this.$refs["mescrollItem"];
+            if (item && item.mescroll) item.mescroll.onPullDownRefresh();
+        }
+    }
 }
 
 export default MescrollCompMixin;

mini-program/garden-wxapp/components/mescroll-body/mixins/mescroll-more-item.js

@@ -2,58 +2,58 @@
  * mescroll-more-item的mixins, 仅在多个 mescroll-body 写在子组件时使用 (参考 mescroll-more 案例)
  */
 const MescrollMoreItemMixin = {
-	// 支付宝小程序不支持props的mixin,需写在具体的页面中
-	// #ifndef MP-ALIPAY || MP-DINGTALK
-	props:{
-		i: Number, // 每个tab页的专属下标
-		index: { // 当前tab的下标
-			type: Number,
-			default(){
-				return 0
-			}
-		}
-	},
-	// #endif
-	data() {
-		return {
-			downOption:{
-				auto:false // 不自动加载
-			},
-			upOption:{
-				auto:false // 不自动加载
-			},
-			isInit: false // 当前tab是否已初始化
-		}
-	},
-	watch:{
-		// 监听下标的变化
-		index(val){
-			if (this.i === val && !this.isInit) {
-				this.isInit = true; // 标记为true
-				this.mescroll && this.mescroll.triggerDownScroll();
-			}
-		}
-	},
-	methods: {
-		// 以ref的方式初始化mescroll对象 (兼容字节跳动小程序)
-		mescrollInitByRef() {
-			if(!this.mescroll || !this.mescroll.resetUpScroll){
-				// 字节跳动小程序编辑器不支持一个页面存在相同的ref, 多mescroll的ref需动态生成, 格式为'mescrollRef下标'
-				let mescrollRef = this.$refs.mescrollRef || this.$refs['mescrollRef'+this.i];
-				if(mescrollRef) this.mescroll = mescrollRef.mescroll
-			}
-		},
-		// mescroll组件初始化的回调,可获取到mescroll对象 (覆盖mescroll-mixins.js的mescrollInit, 为了标记isInit)
-		mescrollInit(mescroll) {
-			this.mescroll = mescroll;
-			this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序
-			// 自动加载当前tab的数据
-			if(this.i === this.index){
-				this.isInit = true; // 标记为true
-				this.mescroll.triggerDownScroll();
-			}
-		},
-	}
+    // 支付宝小程序不支持props的mixin,需写在具体的页面中
+    // #ifndef MP-ALIPAY || MP-DINGTALK
+    props: {
+        i: Number, // 每个tab页的专属下标
+        index: { // 当前tab的下标
+            type: Number,
+            default() {
+                return 0
+            }
+        }
+    },
+    // #endif
+    data() {
+        return {
+            downOption: {
+                auto: false // 不自动加载
+            },
+            upOption: {
+                auto: false // 不自动加载
+            },
+            isInit: false // 当前tab是否已初始化
+        }
+    },
+    watch: {
+        // 监听下标的变化
+        index(val) {
+            if (this.i === val && !this.isInit) {
+                this.isInit = true; // 标记为true
+                this.mescroll && this.mescroll.triggerDownScroll();
+            }
+        }
+    },
+    methods: {
+        // 以ref的方式初始化mescroll对象 (兼容字节跳动小程序)
+        mescrollInitByRef() {
+            if (!this.mescroll || !this.mescroll.resetUpScroll) {
+                // 字节跳动小程序编辑器不支持一个页面存在相同的ref, 多mescroll的ref需动态生成, 格式为'mescrollRef下标'
+                let mescrollRef = this.$refs.mescrollRef || this.$refs['mescrollRef' + this.i];
+                if (mescrollRef) this.mescroll = mescrollRef.mescroll
+            }
+        },
+        // mescroll组件初始化的回调,可获取到mescroll对象 (覆盖mescroll-mixins.js的mescrollInit, 为了标记isInit)
+        mescrollInit(mescroll) {
+            this.mescroll = mescroll;
+            this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序
+            // 自动加载当前tab的数据
+            if (this.i === this.index) {
+                this.isInit = true; // 标记为true
+                this.mescroll.triggerDownScroll();
+            }
+        },
+    }
 }
 
 export default MescrollMoreItemMixin;

mini-program/garden-wxapp/components/mescroll-body/mixins/mescroll-more.js

@@ -2,73 +2,73 @@
  * mescroll-body写在子组件时, 需通过mescroll的mixins补充子组件缺少的生命周期
  */
 const MescrollMoreMixin = {
-	data() {
-		return {
-			tabIndex: 0, // 当前tab下标
-			mescroll: {
-				onPageScroll: e=>{
-					this.handlePageScroll(e)
-				},
-				onReachBottom: ()=>{
-					this.handleReachBottom()
-				},
-				onPullDownRefresh: ()=>{
-					this.handlePullDownRefresh()
-				}
-			}
-		}
-	},
-	// 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件
-	onPageScroll(e) {
-		this.handlePageScroll(e)
-	},
-	onReachBottom() {
-		this.handleReachBottom()
-	},
-	// 当down的native: true时, 还需传递此方法进到子组件
-	onPullDownRefresh(){
-		this.handlePullDownRefresh()
-	},
-	methods:{
-		handlePageScroll(e){
-			let mescroll = this.getMescroll(this.tabIndex);
-			mescroll && mescroll.onPageScroll(e);
-		},
-		handleReachBottom(){
-			let mescroll = this.getMescroll(this.tabIndex);
-			mescroll && mescroll.onReachBottom();
-		},
-		handlePullDownRefresh(){
-			let mescroll = this.getMescroll(this.tabIndex);
-			mescroll && mescroll.onPullDownRefresh();
-		},
-		// 根据下标获取对应子组件的mescroll
-		getMescroll(i){
-			if(!this.mescrollItems) this.mescrollItems = [];
-			if(!this.mescrollItems[i]) {
-				// v-for中的refs
-				let vForItem = this.$refs["mescrollItem"];
-				if(vForItem){
-					this.mescrollItems[i] = vForItem[i]
-				}else{
-					// 普通的refs,不可重复
-					this.mescrollItems[i] = this.$refs["mescrollItem"+i];
-				}
-			}
-			let item = this.mescrollItems[i]
-			return item ? item.mescroll : null
-		},
-		// 切换tab,恢复滚动条位置
-		tabChange(i){
-			let mescroll = this.getMescroll(i);
-			if(mescroll){
-				// 延时(比$nextTick靠谱一些),确保元素已渲染
-				setTimeout(()=>{
-					mescroll.scrollTo(mescroll.getScrollTop(),0)
-				},30)
-			}
-		}
-	}
+    data() {
+        return {
+            tabIndex: 0, // 当前tab下标
+            mescroll: {
+                onPageScroll: e => {
+                    this.handlePageScroll(e)
+                },
+                onReachBottom: () => {
+                    this.handleReachBottom()
+                },
+                onPullDownRefresh: () => {
+                    this.handlePullDownRefresh()
+                }
+            }
+        }
+    },
+    // 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件
+    onPageScroll(e) {
+        this.handlePageScroll(e)
+    },
+    onReachBottom() {
+        this.handleReachBottom()
+    },
+    // 当down的native: true时, 还需传递此方法进到子组件
+    onPullDownRefresh() {
+        this.handlePullDownRefresh()
+    },
+    methods: {
+        handlePageScroll(e) {
+            let mescroll = this.getMescroll(this.tabIndex);
+            mescroll && mescroll.onPageScroll(e);
+        },
+        handleReachBottom() {
+            let mescroll = this.getMescroll(this.tabIndex);
+            mescroll && mescroll.onReachBottom();
+        },
+        handlePullDownRefresh() {
+            let mescroll = this.getMescroll(this.tabIndex);
+            mescroll && mescroll.onPullDownRefresh();
+        },
+        // 根据下标获取对应子组件的mescroll
+        getMescroll(i) {
+            if (!this.mescrollItems) this.mescrollItems = [];
+            if (!this.mescrollItems[i]) {
+                // v-for中的refs
+                let vForItem = this.$refs["mescrollItem"];
+                if (vForItem) {
+                    this.mescrollItems[i] = vForItem[i]
+                } else {
+                    // 普通的refs,不可重复
+                    this.mescrollItems[i] = this.$refs["mescrollItem" + i];
+                }
+            }
+            let item = this.mescrollItems[i]
+            return item ? item.mescroll : null
+        },
+        // 切换tab,恢复滚动条位置
+        tabChange(i) {
+            let mescroll = this.getMescroll(i);
+            if (mescroll) {
+                // 延时(比$nextTick靠谱一些),确保元素已渲染
+                setTimeout(() => {
+                    mescroll.scrollTo(mescroll.getScrollTop(), 0)
+                }, 30)
+            }
+        }
+    }
 }
 
 export default MescrollMoreMixin;

mini-program/garden-wxapp/components/mescroll-body/wxs/mixins.js

@@ -1,109 +1,112 @@
 // 定义在wxs (含renderjs) 逻辑层的数据和方法, 与视图层相互通信
 const WxsMixin = {
-	data() {
-		return {
-			// 传入wxs视图层的数据 (响应式)
-			wxsProp: {
-				optDown:{}, // 下拉刷新的配置
-				scrollTop:0, // 滚动条的距离
-				bodyHeight:0, // body的高度
-				isDownScrolling:false, // 是否正在下拉刷新中
-				isUpScrolling:false, // 是否正在上拉加载中
-				isScrollBody:true, // 是否为mescroll-body滚动
-				isUpBoth:true, // 上拉加载时,是否同时可以下拉刷新
-				t: 0 // 数据更新的标记 (只有数据更新了,才会触发wxs的Observer)
-			},
-			
-			// 标记调用wxs视图层的方法
-			callProp: {
-				callType: '', // 方法名
-				t: 0 // 数据更新的标记 (只有数据更新了,才会触发wxs的Observer)
-			},
-			
-			// 不用wxs的平台使用此处的wxsBiz对象,抹平wxs的写法 (微信小程序和APP使用的wxsBiz对象是./wxs/wxs.wxs)
-			// #ifndef MP-WEIXIN || MP-QQ || APP-PLUS || H5
-			wxsBiz: {
-				//注册列表touchstart事件,用于下拉刷新
-				touchstartEvent: e=> {
-					this.mescroll.touchstartEvent(e);
-				},
-				//注册列表touchmove事件,用于下拉刷新
-				touchmoveEvent: e=> {
-					this.mescroll.touchmoveEvent(e);
-				},
-				//注册列表touchend事件,用于下拉刷新
-				touchendEvent: e=> {
-					this.mescroll.touchendEvent(e);
-				},
-				propObserver(){}, // 抹平wxs的写法
-				callObserver(){} // 抹平wxs的写法
-			},
-			// #endif
-			
-			// 不用renderjs的平台使用此处的renderBiz对象,抹平renderjs的写法 (app 和 h5 使用的renderBiz对象是./wxs/renderjs.js)
-			// #ifndef APP-PLUS || H5
-			renderBiz: {
-				propObserver(){} // 抹平renderjs的写法
-			}
-			// #endif
-		}
-	},
-	methods: {
-		// wxs视图层调用逻辑层的回调
-		wxsCall(msg){
-			if(msg.type === 'setWxsProp'){
-				// 更新wxsProp数据 (值改变才触发更新)
-				this.wxsProp = {
-					optDown: this.mescroll.optDown,
-					scrollTop: this.mescroll.getScrollTop(),
-					bodyHeight: this.mescroll.getBodyHeight(),
-					isDownScrolling: this.mescroll.isDownScrolling,
-					isUpScrolling: this.mescroll.isUpScrolling,
-					isUpBoth: this.mescroll.optUp.isBoth,
-					isScrollBody:this.mescroll.isScrollBody,
-					t: Date.now()
-				}
-			}else if(msg.type === 'setLoadType'){
-				// 设置inOffset,outOffset的状态
-				this.downLoadType = msg.downLoadType
-				// 状态挂载到mescroll对象, 以便在其他组件中使用, 比如<me-video>中
-				this.$set(this.mescroll, 'downLoadType', this.downLoadType)
-				// 重置是否加载成功的状态
-				this.$set(this.mescroll, 'isDownEndSuccess', null)
-			}else if(msg.type === 'triggerDownScroll'){
-				// 主动触发下拉刷新
-				this.mescroll.triggerDownScroll();
-			}else if(msg.type === 'endDownScroll'){
-				// 结束下拉刷新
-				this.mescroll.endDownScroll();
-			}else if(msg.type === 'triggerUpScroll'){
-				// 主动触发上拉加载
-				this.mescroll.triggerUpScroll(true);
-			}
-		}
-	},
-	mounted() {
-		// #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5
-		// 配置主动触发wxs显示加载进度的回调
-		this.mescroll.optDown.afterLoading = ()=>{
-			this.callProp = {callType: "showLoading", t: Date.now()} // 触发wxs的方法 (值改变才触发更新)
-		}
-		// 配置主动触发wxs隐藏加载进度的回调
-		this.mescroll.optDown.afterEndDownScroll = ()=>{
-			this.callProp = {callType: "endDownScroll", t: Date.now()} // 触发wxs的方法 (值改变才触发更新)
-			let delay = 300 + (this.mescroll.optDown.beforeEndDelay || 0)
-			setTimeout(()=>{
-				if(this.downLoadType === 4 || this.downLoadType === 0){
-					this.callProp = {callType: "clearTransform", t: Date.now()} // 触发wxs的方法 (值改变才触发更新)
-				}
-				// 状态挂载到mescroll对象, 以便在其他组件中使用, 比如<me-video>中
-				this.$set(this.mescroll, 'downLoadType', this.downLoadType)
-			}, delay)
-		}
-		// 初始化wxs的数据
-		this.wxsCall({type: 'setWxsProp'})
-		// #endif
-	}
+    data() {
+        return {
+            // 传入wxs视图层的数据 (响应式)
+            wxsProp: {
+                optDown: {}, // 下拉刷新的配置
+                scrollTop: 0, // 滚动条的距离
+                bodyHeight: 0, // body的高度
+                isDownScrolling: false, // 是否正在下拉刷新中
+                isUpScrolling: false, // 是否正在上拉加载中
+                isScrollBody: true, // 是否为mescroll-body滚动
+                isUpBoth: true, // 上拉加载时,是否同时可以下拉刷新
+                t: 0 // 数据更新的标记 (只有数据更新了,才会触发wxs的Observer)
+            },
+
+            // 标记调用wxs视图层的方法
+            callProp: {
+                callType: '', // 方法名
+                t: 0 // 数据更新的标记 (只有数据更新了,才会触发wxs的Observer)
+            },
+
+            // 不用wxs的平台使用此处的wxsBiz对象,抹平wxs的写法 (微信小程序和APP使用的wxsBiz对象是./wxs/wxs.wxs)
+            // #ifndef MP-WEIXIN || MP-QQ || APP-PLUS || H5
+            wxsBiz: {
+                //注册列表touchstart事件,用于下拉刷新
+                touchstartEvent: e => {
+                    this.mescroll.touchstartEvent(e);
+                },
+                //注册列表touchmove事件,用于下拉刷新
+                touchmoveEvent: e => {
+                    this.mescroll.touchmoveEvent(e);
+                },
+                //注册列表touchend事件,用于下拉刷新
+                touchendEvent: e => {
+                    this.mescroll.touchendEvent(e);
+                },
+                propObserver() {
+                }, // 抹平wxs的写法
+                callObserver() {
+                } // 抹平wxs的写法
+            },
+            // #endif
+
+            // 不用renderjs的平台使用此处的renderBiz对象,抹平renderjs的写法 (app 和 h5 使用的renderBiz对象是./wxs/renderjs.js)
+            // #ifndef APP-PLUS || H5
+            renderBiz: {
+                propObserver() {
+                } // 抹平renderjs的写法
+            }
+            // #endif
+        }
+    },
+    methods: {
+        // wxs视图层调用逻辑层的回调
+        wxsCall(msg) {
+            if (msg.type === 'setWxsProp') {
+                // 更新wxsProp数据 (值改变才触发更新)
+                this.wxsProp = {
+                    optDown: this.mescroll.optDown,
+                    scrollTop: this.mescroll.getScrollTop(),
+                    bodyHeight: this.mescroll.getBodyHeight(),
+                    isDownScrolling: this.mescroll.isDownScrolling,
+                    isUpScrolling: this.mescroll.isUpScrolling,
+                    isUpBoth: this.mescroll.optUp.isBoth,
+                    isScrollBody: this.mescroll.isScrollBody,
+                    t: Date.now()
+                }
+            } else if (msg.type === 'setLoadType') {
+                // 设置inOffset,outOffset的状态
+                this.downLoadType = msg.downLoadType
+                // 状态挂载到mescroll对象, 以便在其他组件中使用, 比如<me-video>中
+                this.$set(this.mescroll, 'downLoadType', this.downLoadType)
+                // 重置是否加载成功的状态
+                this.$set(this.mescroll, 'isDownEndSuccess', null)
+            } else if (msg.type === 'triggerDownScroll') {
+                // 主动触发下拉刷新
+                this.mescroll.triggerDownScroll();
+            } else if (msg.type === 'endDownScroll') {
+                // 结束下拉刷新
+                this.mescroll.endDownScroll();
+            } else if (msg.type === 'triggerUpScroll') {
+                // 主动触发上拉加载
+                this.mescroll.triggerUpScroll(true);
+            }
+        }
+    },
+    mounted() {
+        // #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5
+        // 配置主动触发wxs显示加载进度的回调
+        this.mescroll.optDown.afterLoading = () => {
+            this.callProp = {callType: "showLoading", t: Date.now()} // 触发wxs的方法 (值改变才触发更新)
+        }
+        // 配置主动触发wxs隐藏加载进度的回调
+        this.mescroll.optDown.afterEndDownScroll = () => {
+            this.callProp = {callType: "endDownScroll", t: Date.now()} // 触发wxs的方法 (值改变才触发更新)
+            let delay = 300 + (this.mescroll.optDown.beforeEndDelay || 0)
+            setTimeout(() => {
+                if (this.downLoadType === 4 || this.downLoadType === 0) {
+                    this.callProp = {callType: "clearTransform", t: Date.now()} // 触发wxs的方法 (值改变才触发更新)
+                }
+                // 状态挂载到mescroll对象, 以便在其他组件中使用, 比如<me-video>中
+                this.$set(this.mescroll, 'downLoadType', this.downLoadType)
+            }, delay)
+        }
+        // 初始化wxs的数据
+        this.wxsCall({type: 'setWxsProp'})
+        // #endif
+    }
 }
 
 export default WxsMixin;

mini-program/garden-wxapp/components/mescroll-body/wxs/renderjs.js

@@ -6,87 +6,87 @@
 var me = {}
 
 // 初始化window对象的touch事件 (仅初始化一次)
-if(window && !window.$mescrollRenderInit){
-	window.$mescrollRenderInit = true
-	
-	
-	window.addEventListener('touchstart', function(e){
-		if (me.disabled()) return;
-		me.startPoint = me.getPoint(e); // 记录起点
-	}, {passive: true})
-	
-	
-	window.addEventListener('touchmove', function(e){
-		if (me.disabled()) return;
-		if (me.getScrollTop() > 0) return; // 需在顶部下拉,才禁止bounce
-		
-		var curPoint = me.getPoint(e); // 当前点
-		var moveY = curPoint.y - me.startPoint.y; // 和起点比,移动的距离,大于0向下拉,小于0向上拉
-		// 向下拉
-		if (moveY > 0) {
-			// 可下拉的条件
-			if (!me.isDownScrolling && !me.optDown.isLock && (!me.isUpScrolling || (me.isUpScrolling && me.isUpBoth))) {
-				
-				// 只有touch在mescroll的view上面,才禁止bounce
-				var el = e.target;
-				var isMescrollTouch = false;
-				while (el && el.tagName && el.tagName !== 'UNI-PAGE-BODY' && el.tagName != "BODY") {
-					var cls = el.classList;
-					if (cls && cls.contains('mescroll-render-touch')) {
-						isMescrollTouch = true
-						break;
-					}
-					el = el.parentNode; // 继续检查其父元素
-				}
-				// 禁止bounce (不会对swiper和iOS侧滑返回造成影响)
-				if (isMescrollTouch && e.cancelable && !e.defaultPrevented) e.preventDefault();
-			}
-		}
-	}, {passive: false})
+if (window && !window.$mescrollRenderInit) {
+    window.$mescrollRenderInit = true
+
+
+    window.addEventListener('touchstart', function (e) {
+        if (me.disabled()) return;
+        me.startPoint = me.getPoint(e); // 记录起点
+    }, {passive: true})
+
+
+    window.addEventListener('touchmove', function (e) {
+        if (me.disabled()) return;
+        if (me.getScrollTop() > 0) return; // 需在顶部下拉,才禁止bounce
+
+        var curPoint = me.getPoint(e); // 当前点
+        var moveY = curPoint.y - me.startPoint.y; // 和起点比,移动的距离,大于0向下拉,小于0向上拉
+        // 向下拉
+        if (moveY > 0) {
+            // 可下拉的条件
+            if (!me.isDownScrolling && !me.optDown.isLock && (!me.isUpScrolling || (me.isUpScrolling && me.isUpBoth))) {
+
+                // 只有touch在mescroll的view上面,才禁止bounce
+                var el = e.target;
+                var isMescrollTouch = false;
+                while (el && el.tagName && el.tagName !== 'UNI-PAGE-BODY' && el.tagName != "BODY") {
+                    var cls = el.classList;
+                    if (cls && cls.contains('mescroll-render-touch')) {
+                        isMescrollTouch = true
+                        break;
+                    }
+                    el = el.parentNode; // 继续检查其父元素
+                }
+                // 禁止bounce (不会对swiper和iOS侧滑返回造成影响)
+                if (isMescrollTouch && e.cancelable && !e.defaultPrevented) e.preventDefault();
+            }
+        }
+    }, {passive: false})
 }
 
 /* 获取滚动条的位置 */
-me.getScrollTop = function() {
-	return me.scrollTop || 0
+me.getScrollTop = function () {
+    return me.scrollTop || 0
 }
 
 /* 是否禁用下拉刷新 */
-me.disabled = function(){
-	return !me.optDown || !me.optDown.use || me.optDown.native
+me.disabled = function () {
+    return !me.optDown || !me.optDown.use || me.optDown.native
 }
 
 /* 根据点击滑动事件获取第一个手指的坐标 */
-me.getPoint = function(e) {
-	if (!e) {
-		return {x: 0,y: 0}
-	}
-	if (e.touches && e.touches[0]) {
-		return {x: e.touches[0].pageX,y: e.touches[0].pageY}
-	} else if (e.changedTouches && e.changedTouches[0]) {
-		return {x: e.changedTouches[0].pageX,y: e.changedTouches[0].pageY}
-	} else {
-		return {x: e.clientX,y: e.clientY}
-	}
+me.getPoint = function (e) {
+    if (!e) {
+        return {x: 0, y: 0}
+    }
+    if (e.touches && e.touches[0]) {
+        return {x: e.touches[0].pageX, y: e.touches[0].pageY}
+    } else if (e.changedTouches && e.changedTouches[0]) {
+        return {x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY}
+    } else {
+        return {x: e.clientX, y: e.clientY}
+    }
 }
 
 /**
  * 监听逻辑层数据的变化 (实时更新数据)
  */
 function propObserver(wxsProp) {
-	me.optDown = wxsProp.optDown
-	me.scrollTop = wxsProp.scrollTop
-	me.isDownScrolling = wxsProp.isDownScrolling
-	me.isUpScrolling = wxsProp.isUpScrolling
-	me.isUpBoth = wxsProp.isUpBoth
+    me.optDown = wxsProp.optDown
+    me.scrollTop = wxsProp.scrollTop
+    me.isDownScrolling = wxsProp.isDownScrolling
+    me.isUpScrolling = wxsProp.isUpScrolling
+    me.isUpBoth = wxsProp.isUpBoth
 }
 
 /* 导出模块 */
 const renderBiz = {
-	data() {
-		return {
-			propObserver: propObserver,
-		}
-	}
+    data() {
+        return {
+            propObserver: propObserver,
+        }
+    }
 }
 
 export default renderBiz;

mini-program/garden-wxapp/components/pagination/iconfont.css

@@ -1,20 +1,21 @@
-@font-face {font-family: "iconfont";
-  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALUAAsAAAAABtwAAAKFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqBQIE1ATYCJAMMCwgABCAFhG0HRBsBBhEVjCOyrw7sYPj4I0QqzNq3zfnzDrGGnxGGLSGIJLifI6jWsJ7dDaIDIM/lo6IIVFyEAVaJdC8Ma5KsX18DIvAAvNrML65E6KwwVPnjwadURdk9jquzLCnj43Q3FiERMuvuW6CtkLIwkLa2RJ8WB1673A9cYIWJ1mV/lpeyxOTL57kc310BZdH8QIGltvZ+PiZgggWyN0aRFViUecPYBS/wPoFG/WbFduUD1CvsZYG41DlCfSGsKCxXL9Q27C3iTY369JLe4zX6fPyzHJHUZPZDOxcuwfrP5M0rFXuZ6+WcYIfImEUhdhvTO7JgjKwxXYxyrGnBz/RX/EwCqzgqMxF/nVvdDCahKj2RxFN7NAk8IIEMapPsCjYQvTsQUof9hYqOoxqqWHWbqJ9LAh/W3Mq8UOvnzz9Gr1/8fZwsnhvGHNLy5fPH0Q1H/TAu1g7uN/MIVHJPFhG/fhEIau4W/277/5oK+Govv4JgpdC81J/RE/w9ycCuYshsSy6a2BNb3mx4ojMBhdynmu3v9GO6tmdwNaFeT4akTh+yeqNEoc+iRpNV1KonXkOjGfXhJl3YXpQGTPsACO0+kbR6h6zdQhT6ihq9/lGrPfZotBtdZzYZD33YYmwEe2jfQXfBk2uTQ1x7hWq2DedlEesOedIxKNK8nKvRIy+xYXpRpQgBcXBQgcfQ2gCRw4idpINIPGcZNb0o7YLbHGxhqCFQD7TeAa0TeBQMFofK+68gZWY1uKOuzn8HsYkeHhRS+QCiVvtBdY/yzOSFUhKCAMICB1RgFrKsAMTmWSPUEalhQjI6y5x+NFSdbq91P1DEmrDX5EiRo2g8a/yovQUS5ourYW68Kpg2GwAAAA==') format('woff2')
+@font-face {
+    font-family: "iconfont";
+    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALUAAsAAAAABtwAAAKFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqBQIE1ATYCJAMMCwgABCAFhG0HRBsBBhEVjCOyrw7sYPj4I0QqzNq3zfnzDrGGnxGGLSGIJLifI6jWsJ7dDaIDIM/lo6IIVFyEAVaJdC8Ma5KsX18DIvAAvNrML65E6KwwVPnjwadURdk9jquzLCnj43Q3FiERMuvuW6CtkLIwkLa2RJ8WB1673A9cYIWJ1mV/lpeyxOTL57kc310BZdH8QIGltvZ+PiZgggWyN0aRFViUecPYBS/wPoFG/WbFduUD1CvsZYG41DlCfSGsKCxXL9Q27C3iTY369JLe4zX6fPyzHJHUZPZDOxcuwfrP5M0rFXuZ6+WcYIfImEUhdhvTO7JgjKwxXYxyrGnBz/RX/EwCqzgqMxF/nVvdDCahKj2RxFN7NAk8IIEMapPsCjYQvTsQUof9hYqOoxqqWHWbqJ9LAh/W3Mq8UOvnzz9Gr1/8fZwsnhvGHNLy5fPH0Q1H/TAu1g7uN/MIVHJPFhG/fhEIau4W/277/5oK+Govv4JgpdC81J/RE/w9ycCuYshsSy6a2BNb3mx4ojMBhdynmu3v9GO6tmdwNaFeT4akTh+yeqNEoc+iRpNV1KonXkOjGfXhJl3YXpQGTPsACO0+kbR6h6zdQhT6ihq9/lGrPfZotBtdZzYZD33YYmwEe2jfQXfBk2uTQ1x7hWq2DedlEesOedIxKNK8nKvRIy+xYXpRpQgBcXBQgcfQ2gCRw4idpINIPGcZNb0o7YLbHGxhqCFQD7TeAa0TeBQMFofK+68gZWY1uKOuzn8HsYkeHhRS+QCiVvtBdY/yzOSFUhKCAMICB1RgFrKsAMTmWSPUEalhQjI6y5x+NFSdbq91P1DEmrDX5EiRo2g8a/yovQUS5ourYW68Kpg2GwAAAA==') format('woff2')
 }
 
 .iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .icon-danjiantou:before {
-  content: "\e62d";
+    content: "\e62d";
 }
 
 .icon-shuangjiantou:before {
-  content: "\e62e";
+    content: "\e62e";
 }
 

mini-program/garden-wxapp/components/pagination/pagination.vue

@@ -1,455 +1,456 @@
 <template>
-	<view class="wyb-pagination-box" :style="{
+    <view class="wyb-pagination-box" :style="{
 		paddingLeft: padding + 'rpx',
 		paddingRight: padding + 'rpx',
 		'--hover': autoHover}">
-		<view class="wyb-pagination-left" :style="{opacity: currentPage === 1 ? 0.5 : 1}">
-			<view
-			 v-if="showFirst"
-			 :class="'wyb-pagination-first-page-' + (showIcon ? 'i' : 't')"
-			 :style="btnStyleStr" 
-			 :hover-class="currentPage === 1 ? '' : 'wyb-pagination-hover'"
-			 @tap="onPageBtnTap('first-page')">
-				<view v-if="showIcon" class="iconfont icon-shuangjiantou left-arrow" />
-				<text v-else>{{firstText}}</text>
-			</view>
-			<view 
-			 :class="'wyb-pagination-prev-page-' + (showIcon ? 'i' : 't')"
-			 :style="btnStyleStr"
-			 :hover-class="currentPage === 1 ? '' : 'wyb-pagination-hover'"
-			 @tap="onPageBtnTap('prev-page')">
-				<view v-if="showIcon" class="iconfont icon-danjiantou left-arrow" />
-				<text v-else>{{prevText}}</text>
-			</view>
-		</view>
-		<view class="wyb-pagination-info" @tap.stop="onInfoTap">
-			<view class="wyb-pagination-num" v-if="!infoClick">
-				<text :style="{color: currentColor}">{{currentPage}}</text>
-				<text class="wyb-pagination-span" :style="{color: pageInfoColor}">/</text>
-				<text :style="{color: pageInfoColor}">{{totalPage}}</text>
-				<text 
-				 v-if="showTotalItem"
-				 class="wyb-pagination-info-total"
-				 :style="{color: RGBChange(pageInfoColor, 0.5, 'light')}">
-					({{totalItems}})
-				</text>
-			</view>
-			<!-- #ifndef MP-WEIXIN || APP-VUE || APP-NVUE || APP-PLUS || APP-PLUS-NVUE -->
-			<view class="wyb-pagination-input" v-else>
-				<input 
-				 type="number" 
-				 v-model="inputPage" 
-				 :onpaste="false"
-				 :focus="infoFocus" 
-				 :value="currentPage"
-				 :style="{color: currentColor}"
-				 :cursor-spacing="cursorSpacing"
-				 @confirm="onInfoConfirm" 
-				 @blur="onInfoBlur" />
-			</view>
-			<!-- #endif -->
-			<!-- #ifdef MP-WEIXIN || APP-VUE || APP-NVUE || APP-PLUS || APP-PLUS-NVUE -->
-			<view class="wyb-pagination-input" v-else>
-				<input 
-				 type="number" 
-				 v-model="inputPage" 
-				 :focus="infoFocus" 
-				 :name="currentPage"
-				 :style="{color: currentColor}"
-				 :cursor-spacing="cursorSpacing"
-				 @confirm="onInfoConfirm" 
-				 @blur="onInfoBlur" />
-			</view>
-			<!-- #endif -->
-		</view>
-		<view class="wyb-pagination-right" :style="{opacity: currentPage === totalPage ? 0.5 : 1}">
-			<view
-			 :class="'wyb-pagination-next-page-' + (showIcon ? 'i' : 't')"
-			 :style="btnStyleStr"
-			 :hover-class="currentPage === totalPage ? '' : 'wyb-pagination-hover'"
-			 @tap="onPageBtnTap('next-page')">
-				<view v-if="showIcon" class="iconfont icon-danjiantou right-arrow" />
-				<text v-else>{{nextText}}</text>
-			</view>
-			<view
-			 v-if="showLast"
-			 :class="'wyb-pagination-last-page-' + (showIcon ? 'i' : 't')"
-			 :style="btnStyleStr"
-			 :hover-class="currentPage === totalPage ? '' : 'wyb-pagination-hover'"
-			 @tap="onPageBtnTap('last-page')">
-				<view v-if="showIcon" class="iconfont icon-shuangjiantou right-arrow" />
-				<text v-else>{{lastText}}</text>
-			</view>
-		</view>
-	</view>
+        <view class="wyb-pagination-left" :style="{opacity: currentPage === 1 ? 0.5 : 1}">
+            <view
+                    v-if="showFirst"
+                    :class="'wyb-pagination-first-page-' + (showIcon ? 'i' : 't')"
+                    :style="btnStyleStr"
+                    :hover-class="currentPage === 1 ? '' : 'wyb-pagination-hover'"
+                    @tap="onPageBtnTap('first-page')">
+                <view v-if="showIcon" class="iconfont icon-shuangjiantou left-arrow"/>
+                <text v-else>{{firstText}}</text>
+            </view>
+            <view
+                    :class="'wyb-pagination-prev-page-' + (showIcon ? 'i' : 't')"
+                    :style="btnStyleStr"
+                    :hover-class="currentPage === 1 ? '' : 'wyb-pagination-hover'"
+                    @tap="onPageBtnTap('prev-page')">
+                <view v-if="showIcon" class="iconfont icon-danjiantou left-arrow"/>
+                <text v-else>{{prevText}}</text>
+            </view>
+        </view>
+        <view class="wyb-pagination-info" @tap.stop="onInfoTap">
+            <view class="wyb-pagination-num" v-if="!infoClick">
+                <text :style="{color: currentColor}">{{currentPage}}</text>
+                <text class="wyb-pagination-span" :style="{color: pageInfoColor}">/</text>
+                <text :style="{color: pageInfoColor}">{{totalPage}}</text>
+                <text
+                        v-if="showTotalItem"
+                        class="wyb-pagination-info-total"
+                        :style="{color: RGBChange(pageInfoColor, 0.5, 'light')}">
+                    ({{totalItems}})
+                </text>
+            </view>
+            <!-- #ifndef MP-WEIXIN || APP-VUE || APP-NVUE || APP-PLUS || APP-PLUS-NVUE -->
+            <view class="wyb-pagination-input" v-else>
+                <input
+                        type="number"
+                        v-model="inputPage"
+                        :onpaste="false"
+                        :focus="infoFocus"
+                        :value="currentPage"
+                        :style="{color: currentColor}"
+                        :cursor-spacing="cursorSpacing"
+                        @confirm="onInfoConfirm"
+                        @blur="onInfoBlur"/>
+            </view>
+            <!-- #endif -->
+            <!-- #ifdef MP-WEIXIN || APP-VUE || APP-NVUE || APP-PLUS || APP-PLUS-NVUE -->
+            <view class="wyb-pagination-input" v-else>
+                <input
+                        type="number"
+                        v-model="inputPage"
+                        :focus="infoFocus"
+                        :name="currentPage"
+                        :style="{color: currentColor}"
+                        :cursor-spacing="cursorSpacing"
+                        @confirm="onInfoConfirm"
+                        @blur="onInfoBlur"/>
+            </view>
+            <!-- #endif -->
+        </view>
+        <view class="wyb-pagination-right" :style="{opacity: currentPage === totalPage ? 0.5 : 1}">
+            <view
+                    :class="'wyb-pagination-next-page-' + (showIcon ? 'i' : 't')"
+                    :style="btnStyleStr"
+                    :hover-class="currentPage === totalPage ? '' : 'wyb-pagination-hover'"
+                    @tap="onPageBtnTap('next-page')">
+                <view v-if="showIcon" class="iconfont icon-danjiantou right-arrow"/>
+                <text v-else>{{nextText}}</text>
+            </view>
+            <view
+                    v-if="showLast"
+                    :class="'wyb-pagination-last-page-' + (showIcon ? 'i' : 't')"
+                    :style="btnStyleStr"
+                    :hover-class="currentPage === totalPage ? '' : 'wyb-pagination-hover'"
+                    @tap="onPageBtnTap('last-page')">
+                <view v-if="showIcon" class="iconfont icon-shuangjiantou right-arrow"/>
+                <text v-else>{{lastText}}</text>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				currentPage: this.current || 1,
-				inputPage: '',
-				infoClick: false,
-				infoFocus: false
-			}
-		},
-		computed: {
-			totalPage() {
-				return Math.ceil(parseFloat(this.totalItems) / parseFloat(this.pageItems))
-			},
-			autoHover() {
-				if (this.btnStyle.backgroundColor) {
-					return this.RGBChange(this.btnStyle.backgroundColor, 0.1, 'dark')
-				} else {
-					return this.RGBChange('#f8f8f8', 0.05, 'dark')
-				}
-			},
-			btnStyleStr() {
-				let styleStr = ''
-				for (let key in this.btnStyle) {
-					styleStr += `${this.sortFieldMatch(key)}: ${this.btnStyle[key]}; `
-				}
-				return styleStr
-			}
-		},
-		watch: {
-			current(val) {
-				const oPage = this.currentPage
-				if (!Object.is(oPage, val)) {
-					this.currentPage = val
-					this.$emit('change', {
-						type: 'prop-page', 
-						current: this.currentPage,
-					})
-				}
-			}
-		},
-		props: {
-			totalItems: {
-				type: [String, Number],
-				default: 20
-			},
-			pageItems: {
-				type: [String, Number],
-				default: 5
-			},
-			current: {
-				type: Number,
-				default: 1
-			},
-			prevText: {
-				type: String,
-				default: '上一页'
-			},
-			nextText: {
-				type: String,
-				default: '下一页'
-			},
-			firstText: {
-				type: String,
-				default: '首页'
-			},
-			lastText: {
-				type: String,
-				default: '尾页'
-			},
-			pageInfoColor: {
-				type: String,
-				default: '#494949'
-			},
-			currentColor: {
-				type: String,
-				default: '#007aff'
-			},
-			padding: {
-				type: [String, Number],
-				default: 15
-			},
-			btnStyle: {
-				type: Object,
-				default () {
-					return {}
-				}
-			},
-			showIcon: {
-				type: Boolean,
-				default: false
-			},
-			showTotalItem: {
-				type: Boolean,
-				default: false
-			},
-			showFirst: {
-				type: Boolean,
-				default: true
-			},
-			showLast: {
-				type: Boolean,
-				default: true
-			},
-			couldInput: {
-				type: Boolean,
-				default: true
-			},
-			cursorSpacing: {
-				type: Number,
-				default: 0
-			}
-		},
-		methods: {
-			onPageBtnTap(type) {
-				switch (type) {
-					case 'first-page':
-						if (!Object.is(this.currentPage, 1)) {
-							this.currentPage = 1
-							this.$emit('change', {type, current: this.currentPage})
-						}
-						break
-					case 'prev-page':
-						if (!Object.is(this.currentPage, 1)) {
-							this.currentPage--
-							this.$emit('change', {type, current: this.currentPage})
-						}
-						break
-					case 'next-page':
-						if (!Object.is(this.currentPage, this.totalPage)) {
-							this.currentPage++
-							this.$emit('change', {type, current: this.currentPage})
-						}
-						break
-					case 'last-page':
-						if (!Object.is(this.currentPage, this.totalPage)) {
-							this.currentPage = this.totalPage
-							this.$emit('change', {type, current: this.currentPage})
-						}
-						break
-				}
-			},
-			onInfoTap() {
-				if (this.couldInput) {
-					this.infoClick = true
-					this.inputPage = this.currentPage
-					setTimeout(() => {
-						this.infoFocus = true
-					}, 10)
-				}
-			},
-			onInfoConfirm(e) {
-				let input = e.detail.value
-				const oPage = this.currentPage
-				if (parseFloat(input) > this.totalPage) {
-					this.currentPage = this.totalPage
-				} else if (parseFloat(input) < 1) {
-					this.currentPage = 1
-				} else if (input === '') {
-					this.currentPage = oPage
-				} else {
-					this.currentPage = parseFloat(input)
-				}
-				if (!Object.is(oPage, this.currentPage)) {
-					this.$emit('change', {
-						type: 'input-page', 
-						current: this.currentPage,
-					})
-				}
-				this.infoClick = false
-				this.$nextTick(() => {
-					this.infoFocus = false
-				})
-			},
-			onInfoBlur(e) {
-				let input = e.detail.value
-				const oPage = this.currentPage
-				if (parseFloat(input) > this.totalPage) {
-					this.currentPage = this.totalPage
-				} else if (parseFloat(input) < 1) {
-					this.currentPage = 1
-				} else if (input === '') {
-					this.currentPage = oPage
-				} else {
-					this.currentPage = parseFloat(input)
-				}
-				if (!Object.is(oPage, this.currentPage)) {
-					this.$emit('change', {
-						type: 'input-page', 
-						current: this.currentPage,
-					})
-				}
-				this.infoClick = false
-				this.$nextTick(() => {
-					this.infoFocus = false
-				})
-			},
-			RGBChange(color, level, type) {
-				// 判断颜色类型
-				let r = 0,
-					g = 0,
-					b = 0,
-					hasAlpha = false,
-					alpha = 1
-				if (color.indexOf('#') !== -1) {
-					// hex转rgb
-					if (color.length === 4) {
-						let arr = color.split('')
-						color = '#' + arr[1] + arr[1] + arr[2] + arr[2] + arr[3] + arr[3]
-					}
-					let color16List = [color.substring(1, 3), color.substring(3, 5), color.substring(5, 7)]
-					r = parseInt(color16List[0], 16)
-					g = parseInt(color16List[1], 16)
-					b = parseInt(color16List[2], 16)
+    export default {
+        data() {
+            return {
+                currentPage: this.current || 1,
+                inputPage: '',
+                infoClick: false,
+                infoFocus: false
+            }
+        },
+        computed: {
+            totalPage() {
+                return Math.ceil(parseFloat(this.totalItems) / parseFloat(this.pageItems))
+            },
+            autoHover() {
+                if (this.btnStyle.backgroundColor) {
+                    return this.RGBChange(this.btnStyle.backgroundColor, 0.1, 'dark')
+                } else {
+                    return this.RGBChange('#f8f8f8', 0.05, 'dark')
+                }
+            },
+            btnStyleStr() {
+                let styleStr = ''
+                for (let key in this.btnStyle) {
+                    styleStr += `${this.sortFieldMatch(key)}: ${this.btnStyle[key]}; `
+                }
+                return styleStr
+            }
+        },
+        watch: {
+            current(val) {
+                const oPage = this.currentPage
+                if (!Object.is(oPage, val)) {
+                    this.currentPage = val
+                    this.$emit('change', {
+                        type: 'prop-page',
+                        current: this.currentPage,
+                    })
+                }
+            }
+        },
+        props: {
+            totalItems: {
+                type: [String, Number],
+                default: 20
+            },
+            pageItems: {
+                type: [String, Number],
+                default: 5
+            },
+            current: {
+                type: Number,
+                default: 1
+            },
+            prevText: {
+                type: String,
+                default: '上一页'
+            },
+            nextText: {
+                type: String,
+                default: '下一页'
+            },
+            firstText: {
+                type: String,
+                default: '首页'
+            },
+            lastText: {
+                type: String,
+                default: '尾页'
+            },
+            pageInfoColor: {
+                type: String,
+                default: '#494949'
+            },
+            currentColor: {
+                type: String,
+                default: '#007aff'
+            },
+            padding: {
+                type: [String, Number],
+                default: 15
+            },
+            btnStyle: {
+                type: Object,
+                default() {
+                    return {}
+                }
+            },
+            showIcon: {
+                type: Boolean,
+                default: false
+            },
+            showTotalItem: {
+                type: Boolean,
+                default: false
+            },
+            showFirst: {
+                type: Boolean,
+                default: true
+            },
+            showLast: {
+                type: Boolean,
+                default: true
+            },
+            couldInput: {
+                type: Boolean,
+                default: true
+            },
+            cursorSpacing: {
+                type: Number,
+                default: 0
+            }
+        },
+        methods: {
+            onPageBtnTap(type) {
+                switch (type) {
+                    case 'first-page':
+                        if (!Object.is(this.currentPage, 1)) {
+                            this.currentPage = 1
+                            this.$emit('change', {type, current: this.currentPage})
+                        }
+                        break
+                    case 'prev-page':
+                        if (!Object.is(this.currentPage, 1)) {
+                            this.currentPage--
+                            this.$emit('change', {type, current: this.currentPage})
+                        }
+                        break
+                    case 'next-page':
+                        if (!Object.is(this.currentPage, this.totalPage)) {
+                            this.currentPage++
+                            this.$emit('change', {type, current: this.currentPage})
+                        }
+                        break
+                    case 'last-page':
+                        if (!Object.is(this.currentPage, this.totalPage)) {
+                            this.currentPage = this.totalPage
+                            this.$emit('change', {type, current: this.currentPage})
+                        }
+                        break
+                }
+            },
+            onInfoTap() {
+                if (this.couldInput) {
+                    this.infoClick = true
+                    this.inputPage = this.currentPage
+                    setTimeout(() => {
+                        this.infoFocus = true
+                    }, 10)
+                }
+            },
+            onInfoConfirm(e) {
+                let input = e.detail.value
+                const oPage = this.currentPage
+                if (parseFloat(input) > this.totalPage) {
+                    this.currentPage = this.totalPage
+                } else if (parseFloat(input) < 1) {
+                    this.currentPage = 1
+                } else if (input === '') {
+                    this.currentPage = oPage
+                } else {
+                    this.currentPage = parseFloat(input)
+                }
+                if (!Object.is(oPage, this.currentPage)) {
+                    this.$emit('change', {
+                        type: 'input-page',
+                        current: this.currentPage,
+                    })
+                }
+                this.infoClick = false
+                this.$nextTick(() => {
+                    this.infoFocus = false
+                })
+            },
+            onInfoBlur(e) {
+                let input = e.detail.value
+                const oPage = this.currentPage
+                if (parseFloat(input) > this.totalPage) {
+                    this.currentPage = this.totalPage
+                } else if (parseFloat(input) < 1) {
+                    this.currentPage = 1
+                } else if (input === '') {
+                    this.currentPage = oPage
+                } else {
+                    this.currentPage = parseFloat(input)
+                }
+                if (!Object.is(oPage, this.currentPage)) {
+                    this.$emit('change', {
+                        type: 'input-page',
+                        current: this.currentPage,
+                    })
+                }
+                this.infoClick = false
+                this.$nextTick(() => {
+                    this.infoFocus = false
+                })
+            },
+            RGBChange(color, level, type) {
+                // 判断颜色类型
+                let r = 0,
+                    g = 0,
+                    b = 0,
+                    hasAlpha = false,
+                    alpha = 1
+                if (color.indexOf('#') !== -1) {
+                    // hex转rgb
+                    if (color.length === 4) {
+                        let arr = color.split('')
+                        color = '#' + arr[1] + arr[1] + arr[2] + arr[2] + arr[3] + arr[3]
+                    }
+                    let color16List = [color.substring(1, 3), color.substring(3, 5), color.substring(5, 7)]
+                    r = parseInt(color16List[0], 16)
+                    g = parseInt(color16List[1], 16)
+                    b = parseInt(color16List[2], 16)
 
-				} else {
-					hasAlpha = color.indexOf('a') !== -1
-					let root = color.slice()
-					let idx = root.indexOf('(') + 1
-					root = root.substring(idx)
-					let firstDotIdx = root.indexOf(',')
-					r = parseFloat(root.substring(0, firstDotIdx))
-					root = root.substring(firstDotIdx + 1)
-					let secondDotIdx = root.indexOf(',')
-					g = parseFloat(root.substring(0, secondDotIdx))
-					root = root.substring(secondDotIdx + 1)
-					if (hasAlpha) {
-						let thirdDotIdx = root.indexOf(',')
-						b = parseFloat(root.substring(0, thirdDotIdx))
-						alpha = parseFloat(root.substring(thirdDotIdx + 1))
-					} else {
-						b = parseFloat(root)
-					}
-				}
+                } else {
+                    hasAlpha = color.indexOf('a') !== -1
+                    let root = color.slice()
+                    let idx = root.indexOf('(') + 1
+                    root = root.substring(idx)
+                    let firstDotIdx = root.indexOf(',')
+                    r = parseFloat(root.substring(0, firstDotIdx))
+                    root = root.substring(firstDotIdx + 1)
+                    let secondDotIdx = root.indexOf(',')
+                    g = parseFloat(root.substring(0, secondDotIdx))
+                    root = root.substring(secondDotIdx + 1)
+                    if (hasAlpha) {
+                        let thirdDotIdx = root.indexOf(',')
+                        b = parseFloat(root.substring(0, thirdDotIdx))
+                        alpha = parseFloat(root.substring(thirdDotIdx + 1))
+                    } else {
+                        b = parseFloat(root)
+                    }
+                }
 
-				let rgbc = [r, g, b]
-				// 减淡或加深
-				for (var i = 0; i < 3; i++)
-					type === 'light' ? rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]) : rgbc[i] = Math.floor(rgbc[i] * (1 -
-						level))
+                let rgbc = [r, g, b]
+                // 减淡或加深
+                for (var i = 0; i < 3; i++)
+                    type === 'light' ? rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]) : rgbc[i] = Math.floor(rgbc[i] * (1 -
+                        level))
 
-				if (hasAlpha) {
-					return `rgba(${rgbc[0]}, ${rgbc[1]}, ${rgbc[2]}, ${alpha})`
-				} else {
-					return `rgb(${rgbc[0]}, ${rgbc[1]}, ${rgbc[2]})`
-				}
-			},
-			sortFieldMatch(field) {
-				const stringArray = field.split('')
-				let newField = field
-				stringArray.forEach(t => {
-					if (/[A-Z]/.test(t)) {
-						newField = field.replace(t, `-${t.toLowerCase()}`)
-					}
-				})
-				return newField
-			}
-		}
-	}
+                if (hasAlpha) {
+                    return `rgba(${rgbc[0]}, ${rgbc[1]}, ${rgbc[2]}, ${alpha})`
+                } else {
+                    return `rgb(${rgbc[0]}, ${rgbc[1]}, ${rgbc[2]})`
+                }
+            },
+            sortFieldMatch(field) {
+                const stringArray = field.split('')
+                let newField = field
+                stringArray.forEach(t => {
+                    if (/[A-Z]/.test(t)) {
+                        newField = field.replace(t, `-${t.toLowerCase()}`)
+                    }
+                })
+                return newField
+            }
+        }
+    }
 </script>
 
 <style>
-	@import 'iconfont.css';
-	.wyb-pagination-box {
-		width: 100%;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		box-sizing: border-box;
-		justify-content: space-between;
-		flex-wrap: nowrap;
-	}
-	
-	.wyb-pagination-left {
-		flex: 1;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		flex-wrap: nowrap;
-		justify-content: flex-start;
-	}
-	
-	.wyb-pagination-right {
-		flex: 1;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		flex-wrap: nowrap;
-		justify-content: flex-end;
-	}
+    @import 'iconfont.css';
 
-	.wyb-pagination-first-page-t,
-	.wyb-pagination-prev-page-t,
-	.wyb-pagination-next-page-t,
-	.wyb-pagination-last-page-t {
-		font-size: 27rpx;
-		padding: 14rpx 25rpx;
-		box-sizing: border-box;
-		background-color: #f8f8f8;
-		border: 1px solid #e5e5e5;
-		white-space: nowrap;
-	}
-	
-	.wyb-pagination-first-page-i,
-	.wyb-pagination-prev-page-i,
-	.wyb-pagination-next-page-i,
-	.wyb-pagination-last-page-i {
-		font-size: 27rpx;
-		padding: 14rpx 33rpx;
-		box-sizing: border-box;
-		background-color: #f8f8f8;
-		border: 1px solid #e5e5e5;
-		white-space: nowrap;
-	}
+    .wyb-pagination-box {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        box-sizing: border-box;
+        justify-content: space-between;
+        flex-wrap: nowrap;
+    }
 
-	.wyb-pagination-first-page-t,
-	.wyb-pagination-first-page-i {
-		margin-right: 15rpx;
-	}
+    .wyb-pagination-left {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+    }
 
-	.wyb-pagination-last-page-t,
-	.wyb-pagination-last-page-i {
-		margin-left: 15rpx;
-	}
+    .wyb-pagination-right {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: nowrap;
+        justify-content: flex-end;
+    }
 
-	.wyb-pagination-info {
-		font-size: 33rpx;
-		white-space: nowrap;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		flex: 1;
-	}
-	
-	.wyb-pagination-input input {
-		text-align: center;
-	}
+    .wyb-pagination-first-page-t,
+    .wyb-pagination-prev-page-t,
+    .wyb-pagination-next-page-t,
+    .wyb-pagination-last-page-t {
+        font-size: 27 rpx;
+        padding: 14 rpx 25 rpx;
+        box-sizing: border-box;
+        background-color: #f8f8f8;
+        border: 1px solid #e5e5e5;
+        white-space: nowrap;
+    }
 
-	.wyb-pagination-span {
-		margin: 0 2rpx;
-	}
-	
-	.wyb-pagination-info-total {
-		margin-left: 10rpx;
-	}
-	
-	.wyb-pagination-first-page-t:active,
-	.wyb-pagination-prev-page-t:active,
-	.wyb-pagination-next-page-t:active,
-	.wyb-pagination-last-page-t:active,
-	.wyb-pagination-first-page-i:active,
-	.wyb-pagination-prev-page-i:active,
-	.wyb-pagination-next-page-i:active,
-	.wyb-pagination-last-page-i:active {
-		background-color: var(--hover) !important;
-	}
-	
-	.left-arrow {
-		transform: scale(0.9);
-		margin-right: 5rpx;
-	}
-	
-	.right-arrow {
-		margin-left: 5rpx;
-		transform: scale(0.9) rotate(180deg);
-		-webkit-transform: scale(0.8) rotate(180deg);
-	}
+    .wyb-pagination-first-page-i,
+    .wyb-pagination-prev-page-i,
+    .wyb-pagination-next-page-i,
+    .wyb-pagination-last-page-i {
+        font-size: 27 rpx;
+        padding: 14 rpx 33 rpx;
+        box-sizing: border-box;
+        background-color: #f8f8f8;
+        border: 1px solid #e5e5e5;
+        white-space: nowrap;
+    }
+
+    .wyb-pagination-first-page-t,
+    .wyb-pagination-first-page-i {
+        margin-right: 15 rpx;
+    }
+
+    .wyb-pagination-last-page-t,
+    .wyb-pagination-last-page-i {
+        margin-left: 15 rpx;
+    }
+
+    .wyb-pagination-info {
+        font-size: 33 rpx;
+        white-space: nowrap;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+    }
+
+    .wyb-pagination-input input {
+        text-align: center;
+    }
+
+    .wyb-pagination-span {
+        margin: 0 2 rpx;
+    }
+
+    .wyb-pagination-info-total {
+        margin-left: 10 rpx;
+    }
+
+    .wyb-pagination-first-page-t:active,
+    .wyb-pagination-prev-page-t:active,
+    .wyb-pagination-next-page-t:active,
+    .wyb-pagination-last-page-t:active,
+    .wyb-pagination-first-page-i:active,
+    .wyb-pagination-prev-page-i:active,
+    .wyb-pagination-next-page-i:active,
+    .wyb-pagination-last-page-i:active {
+        background-color: var(--hover) !important;
+    }
+
+    .left-arrow {
+        transform: scale(0.9);
+        margin-right: 5 rpx;
+    }
+
+    .right-arrow {
+        margin-left: 5 rpx;
+        transform: scale(0.9) rotate(180deg);
+        -webkit-transform: scale(0.8) rotate(180deg);
+    }
 </style>

mini-program/garden-wxapp/components/tooltips/tooltips.vue

@@ -6,7 +6,8 @@
             <view class="just-con">
                 <text class="item"
                       :style="{borderColor:splitColor}"
-                      v-for="(item,index) in btns" :key="index" @click="btnClick(item)">{{ item }}</text>
+                      v-for="(item,index) in btns" :key="index" @click="btnClick(item)">{{ item }}
+                </text>
             </view>
             <view :class="justClass" :style="justStyleObject"></view>
         </view>
@@ -19,29 +20,29 @@
         name: 'BianmarenTooltip',
         props: {
             //是否显示
-            tooltipShow:{
+            tooltipShow: {
                 type: Boolean,
-                default:false
+                default: false
             },
             //颜色
-            textColor:{
+            textColor: {
                 type: String,
                 default: "#ffffff"
             },
             //背景颜色
-            backgroundColor:{
+            backgroundColor: {
                 type: String,
                 default: "#000000"
             },
             //分隔符颜色
-            splitColor:{
+            splitColor: {
                 type: String,
                 default: "#ffffff"
             },
             //按钮组
             btns: {
                 type: Array,
-                default: ['HelloWorld',"你好啊"]
+                default: ['HelloWorld', "你好啊"]
             },
             //点击元素Id
             eleId: {
@@ -49,27 +50,27 @@
                 default: ""
             },
             //方向 bottom,top,left,right
-            gravity:{
-                type:String,
-                default:"bottom"
+            gravity: {
+                type: String,
+                default: "bottom"
             },
-            distance:{
-                type:Number,
-                default:10
+            distance: {
+                type: Number,
+                default: 10
             }
         },
         data() {
             return {
-                left:-9999,
-                top:0,
-                justStyleObject:{}
+                left: -9999,
+                top: 0,
+                justStyleObject: {}
             };
         },
-        watch:{
-            eleId(){
+        watch: {
+            eleId() {
                 this.setPosition();
             },
-            tooltipShow(){
+            tooltipShow() {
 
                 this.setPosition();
             }
@@ -77,25 +78,25 @@
         mounted() {
             this.setPosition();
         },
-        computed:{
-            justClass(){
-                return "just-"+this.gravity;
+        computed: {
+            justClass() {
+                return "just-" + this.gravity;
             }
         },
-        methods:{
-            setPosition(){
+        methods: {
+            setPosition() {
 
                 var _this = this;
 
-                if(!_this.tooltipShow){
+                if (!_this.tooltipShow) {
                     _this.left = -9999;
                     return;
                 }
                 const query = uni.createSelectorQuery().in(_this.$parent);
-                query.select('#'+_this.eleId).boundingClientRect(data => {
+                query.select('#' + _this.eleId).boundingClientRect(data => {
 
-                    var pos = { x: data.left, y: data.top };
-                    var wh = { w: data.width, h: data.height };
+                    var pos = {x: data.left, y: data.top};
+                    var wh = {w: data.width, h: data.height};
                     var outerWidth = 0;
                     var outerHeight = 0;
 
@@ -107,75 +108,75 @@
                         const systemInfo = uni.getSystemInfoSync();
                         var windowWidth = systemInfo.windowWidth;
 
-                        var rightTmp = ( pos.x + wh.w / 2 ) + outerWidth / 2 ;
-                        var leftTmp = ( pos.x + wh.w / 2 ) - outerWidth / 2 ;
+                        var rightTmp = (pos.x + wh.w / 2) + outerWidth / 2;
+                        var leftTmp = (pos.x + wh.w / 2) - outerWidth / 2;
 
-                        if("top" === _this.gravity){
-                            if(rightTmp > windowWidth ){
+                        if ("top" === _this.gravity) {
+                            if (rightTmp > windowWidth) {
                                 _this.left = pos.x + wh.w - outerWidth;
-                                _this.top =  pos.y - outerHeight - _this.distance;
+                                _this.top = pos.y - outerHeight - _this.distance;
                                 _this.justStyleObject = {
-                                    'left':(outerWidth - wh.w/2) + "px",
-                                    'borderColor':_this.backgroundColor+" transparent transparent transparent"
+                                    'left': (outerWidth - wh.w / 2) + "px",
+                                    'borderColor': _this.backgroundColor + " transparent transparent transparent"
                                 };
-                            }else if( leftTmp < 0 ){
+                            } else if (leftTmp < 0) {
                                 _this.left = pos.x;
                                 _this.top = pos.y - outerHeight - _this.distance;
                                 _this.justStyleObject = {
-                                    'left':wh.w/2 + "px",
-                                    'borderColor':_this.backgroundColor+" transparent transparent transparent"
+                                    'left': wh.w / 2 + "px",
+                                    'borderColor': _this.backgroundColor + " transparent transparent transparent"
                                 };
-                            }else{
-                                _this.left = pos.x - (outerWidth - wh.w)/2;
+                            } else {
+                                _this.left = pos.x - (outerWidth - wh.w) / 2;
                                 _this.top = pos.y - outerHeight - _this.distance
                                 _this.justStyleObject = {
-                                    'left':"50%",
-                                    'borderColor':_this.backgroundColor+" transparent transparent transparent"
+                                    'left': "50%",
+                                    'borderColor': _this.backgroundColor + " transparent transparent transparent"
                                 };
                             }
                         }
 
-                        if('bottom' === _this.gravity){
-                            if(rightTmp > windowWidth ){
+                        if ('bottom' === _this.gravity) {
+                            if (rightTmp > windowWidth) {
                                 _this.left = pos.x + wh.w - outerWidth;
-                                _this.top =  pos.y + wh.h + _this.distance;
+                                _this.top = pos.y + wh.h + _this.distance;
                                 _this.justStyleObject = {
-                                    'left':(outerWidth - wh.w/2)+'px',
-                                    'borderColor':"transparent transparent "+_this.backgroundColor+" transparent"
+                                    'left': (outerWidth - wh.w / 2) + 'px',
+                                    'borderColor': "transparent transparent " + _this.backgroundColor + " transparent"
                                 };
-                            }else if( leftTmp < 0 ){
+                            } else if (leftTmp < 0) {
                                 _this.left = pos.x;
-                                _this.top =  pos.y + wh.h + _this.distance;
+                                _this.top = pos.y + wh.h + _this.distance;
                                 _this.justStyleObject = {
-                                    left:wh.w/2 + 'px',
-                                    'borderColor':"transparent transparent "+_this.backgroundColor+" transparent"
+                                    left: wh.w / 2 + 'px',
+                                    'borderColor': "transparent transparent " + _this.backgroundColor + " transparent"
                                 }
-                            }else{
-                                _this.left = pos.x - (outerWidth - wh.w)/2;
-                                _this.top =  pos.y + wh.h + _this.distance;
+                            } else {
+                                _this.left = pos.x - (outerWidth - wh.w) / 2;
+                                _this.top = pos.y + wh.h + _this.distance;
                                 _this.justStyleObject = {
-                                    left:'50%',
-                                    'borderColor':"transparent transparent "+_this.backgroundColor+" transparent"
+                                    left: '50%',
+                                    'borderColor': "transparent transparent " + _this.backgroundColor + " transparent"
                                 }
 
                             }
                         }
 
-                        if('left' === _this.gravity){
+                        if ('left' === _this.gravity) {
                             _this.left = pos.x - outerWidth - _this.distance;
-                            _this.top = pos.y - (outerHeight - wh.h)/2;
+                            _this.top = pos.y - (outerHeight - wh.h) / 2;
                             _this.justStyleObject = {
-                                top:'50%',
-                                'borderColor':"transparent transparent transparent " +  _this.backgroundColor
+                                top: '50%',
+                                'borderColor': "transparent transparent transparent " + _this.backgroundColor
                             }
                         }
 
-                        if('right' === _this.gravity){
+                        if ('right' === _this.gravity) {
                             _this.left = pos.x + wh.w + _this.distance;
-                            _this.top = pos.y - (outerHeight - wh.h)/2;
+                            _this.top = pos.y - (outerHeight - wh.h) / 2;
                             _this.justStyleObject = {
-                                top:'50%',
-                                'borderColor':"transparent "+_this.backgroundColor+" transparent  transparent"
+                                top: '50%',
+                                'borderColor': "transparent " + _this.backgroundColor + " transparent  transparent"
                             }
                         }
 
@@ -185,8 +186,8 @@
 
             },
             //按钮点击
-            btnClick(btnName){
-                this.$emit('btnClick',btnName)
+            btnClick(btnName) {
+                this.$emit('btnClick', btnName)
             }
         }
     }
@@ -195,141 +196,373 @@
 <style>
 
     /* just-Tips */
-    .just-tooltip{position:absolute;left:0;top:0;border-radius:5px;background:#000;/*display:inline-block;*/z-index:9999;}
-    .just-tooltip .just-con{padding:8px 10px;}
+    .just-tooltip {
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 5px;
+        background: #000; /*display:inline-block;*/
+        z-index: 9999;
+    }
+
+    .just-tooltip .just-con {
+        padding: 8px 10px;
+    }
 
     .just-tooltip .just-top,
     .just-tooltip .just-bottom,
     .just-tooltip .just-left,
-    .just-tooltip .just-right{content:"";position:absolute;width:0;height:0;overflow:hidden;border-style:solid;}
+    .just-tooltip .just-right {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        border-style: solid;
+    }
 
-    .just-tooltip .just-top{left:50%;top:100%;border-width: 7px 5px 0 5px;margin-left:-5px;
+    .just-tooltip .just-top {
+        left: 50%;
+        top: 100%;
+        border-width: 7px 5px 0 5px;
+        margin-left: -5px;
         border-color: #1B1E24 transparent transparent transparent;
         _border-color: #1B1E24 #000000 #000000 #000000;
         _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
     }
-    .just-tooltip .just-bottom{ left:50%; top:-7px;border-width: 0 5px 7px 5px;margin-left:-5px;
+
+    .just-tooltip .just-bottom {
+        left: 50%;
+        top: -7px;
+        border-width: 0 5px 7px 5px;
+        margin-left: -5px;
         border-color: transparent transparent #1B1E24 transparent;
-        _border-color:#000000 #000000 #1B1E24 #000000;
-        _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
-    .just-tooltip .just-left{ right:-7px; top:50%;border-width: 5px 0 5px 7px;margin-top:-5px;;
+        _border-color: #000000 #000000 #1B1E24 #000000;
+        _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+    }
+
+    .just-tooltip .just-left {
+        right: -7px;
+        top: 50%;
+        border-width: 5px 0 5px 7px;
+        margin-top: -5px;;
         border-color: transparent transparent transparent #1B1E24;
-        _border-color:#000000 #000000 #000000 #1B1E24;
+        _border-color: #000000 #000000 #000000 #1B1E24;
         _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
     }
-    .just-tooltip .just-right{ left:-7px; top:50%;border-width: 5px 7px 5px 0;margin-top:-5px;
+
+    .just-tooltip .just-right {
+        left: -7px;
+        top: 50%;
+        border-width: 5px 7px 5px 0;
+        margin-top: -5px;
         border-color: transparent #1B1E24 transparent transparent;
-        _border-color:#000000 #000000 #000000 #1B1E24;
+        _border-color: #000000 #000000 #000000 #1B1E24;
         _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
     }
 
-    .just-tooltip .just-confirm{text-align:center;padding:10px 0;margin:0 10px 10px 10px;}
-    .just-tooltip .just-yes, .just-tooltip .just-no{background:#fff;color:#000;border:0;padding:5px 10px;}
-    .just-tooltip .just-no{margin-left:10px;}
+    .just-tooltip .just-confirm {
+        text-align: center;
+        padding: 10px 0;
+        margin: 0 10px 10px 10px;
+    }
+
+    .just-tooltip .just-yes, .just-tooltip .just-no {
+        background: #fff;
+        color: #000;
+        border: 0;
+        padding: 5px 10px;
+    }
+
+    .just-tooltip .just-no {
+        margin-left: 10px;
+    }
 
     /* Animations */
-    .animated{
-        -webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;
-        -webkit-animation-duration:.5s;-moz-animation-duration:.5s;-ms-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;
+    .animated {
+        -webkit-animation-fill-mode: both;
+        -moz-animation-fill-mode: both;
+        -ms-animation-fill-mode: both;
+        -o-animation-fill-mode: both;
+        animation-fill-mode: both;
+        -webkit-animation-duration: .5s;
+        -moz-animation-duration: .5s;
+        -ms-animation-duration: .5s;
+        -o-animation-duration: .5s;
+        animation-duration: .5s;
     }
+
     @-webkit-keyframes flipInUp {
-        0% { -webkit-transform: perspective(400px) rotateX(-90deg); opacity: 0;}
-        40% { -webkit-transform: perspective(400px) rotateX(5deg);}
-        70% { -webkit-transform: perspective(400px) rotateX(-5deg);}
-        100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1;}
+        0% {
+            -webkit-transform: perspective(400px) rotateX(-90deg);
+            opacity: 0;
+        }
+        40% {
+            -webkit-transform: perspective(400px) rotateX(5deg);
+        }
+        70% {
+            -webkit-transform: perspective(400px) rotateX(-5deg);
+        }
+        100% {
+            -webkit-transform: perspective(400px) rotateX(0deg);
+            opacity: 1;
+        }
     }
+
     @-moz-keyframes flipInUp {
-        0% {-moz-transform: perspective(400px) rotateX(-90deg);opacity: 0;}
-        40% {-moz-transform: perspective(400px) rotateX(5deg);}
-        70% {-moz-transform: perspective(400px) rotateX(-5deg);}
-        100% {-moz-transform: perspective(400px) rotateX(0deg);opacity: 1;}
+        0% {
+            -moz-transform: perspective(400px) rotateX(-90deg);
+            opacity: 0;
+        }
+        40% {
+            -moz-transform: perspective(400px) rotateX(5deg);
+        }
+        70% {
+            -moz-transform: perspective(400px) rotateX(-5deg);
+        }
+        100% {
+            -moz-transform: perspective(400px) rotateX(0deg);
+            opacity: 1;
+        }
     }
+
     @-o-keyframes flipInUp {
-        0% {-o-transform: perspective(400px) rotateX(-90deg);opacity: 0;}
-        40% {-o-transform: perspective(400px) rotateX(5deg);}
-        70% {-o-transform: perspective(400px) rotateX(-5deg);}
-        100% {-o-transform: perspective(400px) rotateX(0deg);opacity: 1;}
+        0% {
+            -o-transform: perspective(400px) rotateX(-90deg);
+            opacity: 0;
+        }
+        40% {
+            -o-transform: perspective(400px) rotateX(5deg);
+        }
+        70% {
+            -o-transform: perspective(400px) rotateX(-5deg);
+        }
+        100% {
+            -o-transform: perspective(400px) rotateX(0deg);
+            opacity: 1;
+        }
     }
+
     @keyframes flipInUp {
-        0% {transform: perspective(400px) rotateX(-90deg);opacity: 0;}
-        40% {transform: perspective(400px) rotateX(5deg);}
-        70% {transform: perspective(400px) rotateX(-5deg);}
-        100% {transform: perspective(400px) rotateX(0deg);opacity: 1;}
+        0% {
+            transform: perspective(400px) rotateX(-90deg);
+            opacity: 0;
+        }
+        40% {
+            transform: perspective(400px) rotateX(5deg);
+        }
+        70% {
+            transform: perspective(400px) rotateX(-5deg);
+        }
+        100% {
+            transform: perspective(400px) rotateX(0deg);
+            opacity: 1;
+        }
     }
+
     @-webkit-keyframes flipInRight {
-        0% { -webkit-transform: perspective(400px) rotateY(-90deg); opacity: 0;}
-        40% { -webkit-transform: perspective(400px) rotateY(5deg);}
-        70% { -webkit-transform: perspective(400px) rotateY(-5deg);}
-        100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1;}
+        0% {
+            -webkit-transform: perspective(400px) rotateY(-90deg);
+            opacity: 0;
+        }
+        40% {
+            -webkit-transform: perspective(400px) rotateY(5deg);
+        }
+        70% {
+            -webkit-transform: perspective(400px) rotateY(-5deg);
+        }
+        100% {
+            -webkit-transform: perspective(400px) rotateY(0deg);
+            opacity: 1;
+        }
     }
+
     @-moz-keyframes flipInRight {
-        0% {-moz-transform: perspective(400px) rotateY(-90deg);opacity: 0;}
-        40% {-moz-transform: perspective(400px) rotateY(5deg);}
-        70% {-moz-transform: perspective(400px) rotateY(-5deg);}
-        100% {-moz-transform: perspective(400px) rotateY(0deg);opacity: 1;}
+        0% {
+            -moz-transform: perspective(400px) rotateY(-90deg);
+            opacity: 0;
+        }
+        40% {
+            -moz-transform: perspective(400px) rotateY(5deg);
+        }
+        70% {
+            -moz-transform: perspective(400px) rotateY(-5deg);
+        }
+        100% {
+            -moz-transform: perspective(400px) rotateY(0deg);
+            opacity: 1;
+        }
     }
+
     @-o-keyframes flipInRight {
-        0% {-o-transform: perspective(400px) rotateY(-90deg);opacity: 0;}
-        40% {-o-transform: perspective(400px) rotateY(5deg);}
-        70% {-o-transform: perspective(400px) rotateY(-5deg);}
-        100% {-o-transform: perspective(400px) rotateY(0deg);opacity: 1;}
+        0% {
+            -o-transform: perspective(400px) rotateY(-90deg);
+            opacity: 0;
+        }
+        40% {
+            -o-transform: perspective(400px) rotateY(5deg);
+        }
+        70% {
+            -o-transform: perspective(400px) rotateY(-5deg);
+        }
+        100% {
+            -o-transform: perspective(400px) rotateY(0deg);
+            opacity: 1;
+        }
     }
+
     @keyframes flipInRight {
-        0% {transform: perspective(400px) rotateY(-90deg);opacity: 0;}
-        40% {transform: perspective(400px) rotateY(5deg);}
-        70% {transform: perspective(400px) rotateY(-5deg);}
-        100% {transform: perspective(400px) rotateY(0deg);opacity: 1;}
+        0% {
+            transform: perspective(400px) rotateY(-90deg);
+            opacity: 0;
+        }
+        40% {
+            transform: perspective(400px) rotateY(5deg);
+        }
+        70% {
+            transform: perspective(400px) rotateY(-5deg);
+        }
+        100% {
+            transform: perspective(400px) rotateY(0deg);
+            opacity: 1;
+        }
+    }
+
+    .flipInTop, .flipInBottom .flipInLeft .flipInRight {
+        -webkit-backface-visibility: visible !important;
+        -moz-backface-visibility: visible !important;
+        -o-backface-visibility: visible !important;
+        backface-visibility: visible !important
+    }
+
+    .flipInTop, .flipInBottom {
+        -webkit-animation-name: flipInUp;
+        -moz-animation-name: flipInUp;
+        -o-animation-name: flipInUp;
+        animation-name: flipInUp;
+    }
+
+    .flipInLeft, .flipInRight {
+        -webkit-animation-name: flipInRight;
+        -moz-animation-name: flipInRight;
+        -o-animation-name: flipInRight;
+        animation-name: flipInRight;
     }
-    .flipInTop, .flipInBottom .flipInLeft .flipInRight { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important}
-    .flipInTop, .flipInBottom { -webkit-animation-name: flipInUp; -moz-animation-name: flipInUp; -o-animation-name: flipInUp; animation-name: flipInUp; }
-    .flipInLeft, .flipInRight { -webkit-animation-name: flipInRight; -moz-animation-name: flipInRight; -o-animation-name: flipInRight; animation-name: flipInRight; }
 
-    @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;}}
-    @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;}}
-    @-o-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
-    @keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
+    @-webkit-keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
 
-    .fadeIn{-webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn;}
+    @-moz-keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
 
-    .moveTop{
+    @-o-keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .fadeIn {
+        -webkit-animation-name: fadeIn;
+        -moz-animation-name: fadeIn;
+        -o-animation-name: fadeIn;
+        animation-name: fadeIn;
+    }
+
+    .moveTop {
         -webkit-animation: moveTop .6s ease both;
         animation: moveTop .6s ease both;
     }
-    .moveBottom{
+
+    .moveBottom {
         -webkit-animation: moveBottom .6s ease both;
         animation: moveBottom .6s ease both;
     }
-    .moveLeft{
+
+    .moveLeft {
         -webkit-animation: moveLeft .6s ease both;
         animation: moveLeft .6s ease both;
     }
-    .moveRight{
+
+    .moveRight {
         -webkit-animation: moveRight .6s ease both;
         animation: moveRight .6s ease both;
     }
+
     @-webkit-keyframes moveTop {
-        from {opacity: 0;-webkit-transform: translateY(-20px);}
-        to {opacity: 1;-webkit-transform: translateY(0); }
+        from {
+            opacity: 0;
+            -webkit-transform: translateY(-20px);
+        }
+        to {
+            opacity: 1;
+            -webkit-transform: translateY(0);
+        }
     }
+
     @-webkit-keyframes moveBottom {
-        from {opacity: 0;-webkit-transform: translateY(20px);}
-        to {opacity: 1;-webkit-transform: translateY(0); }
+        from {
+            opacity: 0;
+            -webkit-transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            -webkit-transform: translateY(0);
+        }
     }
+
     @-webkit-keyframes moveLeft {
-        from {opacity: 0;-webkit-transform: translateX(-20px);}
-        to {opacity: 1;-webkit-transform: translateX(0); }
+        from {
+            opacity: 0;
+            -webkit-transform: translateX(-20px);
+        }
+        to {
+            opacity: 1;
+            -webkit-transform: translateX(0);
+        }
     }
+
     @-webkit-keyframes moveRight {
-        from {opacity: 0;-webkit-transform: translateX(20px);}
-        to {opacity: 1;-webkit-transform: translateX(0); }
+        from {
+            opacity: 0;
+            -webkit-transform: translateX(20px);
+        }
+        to {
+            opacity: 1;
+            -webkit-transform: translateX(0);
+        }
     }
 
-    .item{
+    .item {
         display: inline-block;
         border-right: #fff solid 1px;
-        padding: 0 20rpx;
+        padding: 0 20 rpx;
     }
-    .item:last-child{
+
+    .item:last-child {
         border: none;
     }
 </style>

mini-program/garden-wxapp/components/uni-popup/message.js

@@ -1,22 +1,22 @@
 export default {
-	created() {
-		if (this.type === 'message') {
-			// 不显示遮罩
-			this.maskShow = false 
-			// 获取子组件对象
-			this.childrenMsg = null
-		}
-	},
-	methods: {
-		customOpen() {
-			if (this.childrenMsg) {
-				this.childrenMsg.open()
-			}
-		},
-		customClose() {
-			if (this.childrenMsg) {
-				this.childrenMsg.close()
-			}
-		}
-	}
+    created() {
+        if (this.type === 'message') {
+            // 不显示遮罩
+            this.maskShow = false
+            // 获取子组件对象
+            this.childrenMsg = null
+        }
+    },
+    methods: {
+        customOpen() {
+            if (this.childrenMsg) {
+                this.childrenMsg.open()
+            }
+        },
+        customClose() {
+            if (this.childrenMsg) {
+                this.childrenMsg.close()
+            }
+        }
+    }
 }

mini-program/garden-wxapp/components/uni-popup/popup.js

@@ -1,25 +1,25 @@
 import message from './message.js';
 // 定义 type 类型:弹出类型：top/bottom/center
 const config = {
-	// 顶部弹出
-	top:'top',
-	// 底部弹出
-	bottom:'bottom',
-	// 居中弹出
-	center:'center',
-	// 消息提示
-	message:'top',
-	// 对话框
-	dialog:'center',
-	// 分享
-	share:'bottom',
+    // 顶部弹出
+    top: 'top',
+    // 底部弹出
+    bottom: 'bottom',
+    // 居中弹出
+    center: 'center',
+    // 消息提示
+    message: 'top',
+    // 对话框
+    dialog: 'center',
+    // 分享
+    share: 'bottom',
 }
 
 export default {
-	data(){
-		return {
-			config:config
-		}
-	},
-	mixins: [message],
+    data() {
+        return {
+            config: config
+        }
+    },
+    mixins: [message],
 }

mini-program/garden-wxapp/components/uni-popup/uni-popup-dialog.vue

@@ -1,243 +1,243 @@
 <template>
-	<view class="uni-popup-dialog">
-		<view class="uni-dialog-title">
-			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
-		</view>
-		<view class="uni-dialog-content">
-			<text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
-			<input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" >
-		</view>
-		<view class="uni-dialog-button-group">
-			<view class="uni-dialog-button" @click="close">
-				<text class="uni-dialog-button-text">取消</text>
-			</view>
-			<view class="uni-dialog-button uni-border-left" @click="onOk">
-				<text class="uni-dialog-button-text uni-button-color">确定</text>
-			</view>
-		</view>
-
-	</view>
+    <view class="uni-popup-dialog">
+        <view class="uni-dialog-title">
+            <text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
+        </view>
+        <view class="uni-dialog-content">
+            <text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
+            <input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus">
+        </view>
+        <view class="uni-dialog-button-group">
+            <view class="uni-dialog-button" @click="close">
+                <text class="uni-dialog-button-text">取消</text>
+            </view>
+            <view class="uni-dialog-button uni-border-left" @click="onOk">
+                <text class="uni-dialog-button-text uni-button-color">确定</text>
+            </view>
+        </view>
+
+    </view>
 </template>
 
 <script>
-	/**
-	 * PopUp 弹出层-对话框样式
-	 * @description 弹出层-对话框样式
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
-	 * @property {String} value input 模式下的默认值
-	 * @property {String} placeholder input 模式下输入提示
-	 * @property {String} type = [success|warning|info|error] 主题样式
-	 *  @value success 成功
-	 * 	@value warning 提示
-	 * 	@value info 消息
-	 * 	@value error 错误
-	 * @property {String} mode = [base|input] 模式、
-	 * 	@value base 基础对话框
-	 * 	@value input 可输入对话框
-	 * @property {String} content 对话框内容
-	 * @property {Boolean} beforeClose 是否拦截取消事件
-	 * @event {Function} confirm 点击确认按钮触发
-	 * @event {Function} close 点击取消按钮触发
-	 */
-
-	export default {
-		name: "uniPopupDialog",
-		props: {
-			value: {
-				type: [String, Number],
-				default: ''
-			},
-			placeholder: {
-				type: [String, Number],
-				default: '请输入内容'
-			},
-			/**
-			 * 对话框主题 success/warning/info/error	  默认 success
-			 */
-			type: {
-				type: String,
-				default: 'error'
-			},
-			/**
-			 * 对话框模式 base/input
-			 */
-			mode: {
-				type: String,
-				default: 'base'
-			},
-			/**
-			 * 对话框标题
-			 */
-			title: {
-				type: String,
-				default: '提示'
-			},
-			/**
-			 * 对话框内容
-			 */
-			content: {
-				type: String,
-				default: ''
-			},
-			/**
-			 * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
-			 */
-			beforeClose: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				dialogType: 'error',
-				focus: false,
-				val: ""
-			}
-		},
-		inject: ['popup'],
-		watch: {
-			type(val) {
-				this.dialogType = val
-			},
-			mode(val) {
-				if (val === 'input') {
-					this.dialogType = 'info'
-				}
-			},
-			value(val) {
-				this.val = val
-			}
-		},
-		created() {
-			// 对话框遮罩不可点击
-			this.popup.mkclick = false
-			if (this.mode === 'input') {
-				this.dialogType = 'info'
-				this.val = this.value
-			} else {
-				this.dialogType = this.type
-			}
-		},
-		mounted() {
-			this.focus = true
-		},
-		methods: {
-			/**
-			 * 点击确认按钮
-			 */
-			onOk() {
-				this.$emit('confirm', () => {
-					this.popup.close()
-					if (this.mode === 'input') this.val = this.value
-				}, this.mode === 'input' ? this.val : '')
-			},
-			/**
-			 * 点击取消按钮
-			 */
-			close() {
-				if (this.beforeClose) {
-					this.$emit('close', () => {
-						this.popup.close()
-					})
-					return
-				}
-				this.popup.close()
-			}
-		}
-	}
+    /**
+     * PopUp 弹出层-对话框样式
+     * @description 弹出层-对话框样式
+     * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+     * @property {String} value input 模式下的默认值
+     * @property {String} placeholder input 模式下输入提示
+     * @property {String} type = [success|warning|info|error] 主题样式
+     *  @value success 成功
+     *    @value warning 提示
+     *    @value info 消息
+     *    @value error 错误
+     * @property {String} mode = [base|input] 模式、
+     *    @value base 基础对话框
+     *    @value input 可输入对话框
+     * @property {String} content 对话框内容
+     * @property {Boolean} beforeClose 是否拦截取消事件
+     * @event {Function} confirm 点击确认按钮触发
+     * @event {Function} close 点击取消按钮触发
+     */
+
+    export default {
+        name: "uniPopupDialog",
+        props: {
+            value: {
+                type: [String, Number],
+                default: ''
+            },
+            placeholder: {
+                type: [String, Number],
+                default: '请输入内容'
+            },
+            /**
+             * 对话框主题 success/warning/info/error      默认 success
+             */
+            type: {
+                type: String,
+                default: 'error'
+            },
+            /**
+             * 对话框模式 base/input
+             */
+            mode: {
+                type: String,
+                default: 'base'
+            },
+            /**
+             * 对话框标题
+             */
+            title: {
+                type: String,
+                default: '提示'
+            },
+            /**
+             * 对话框内容
+             */
+            content: {
+                type: String,
+                default: ''
+            },
+            /**
+             * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
+             */
+            beforeClose: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data() {
+            return {
+                dialogType: 'error',
+                focus: false,
+                val: ""
+            }
+        },
+        inject: ['popup'],
+        watch: {
+            type(val) {
+                this.dialogType = val
+            },
+            mode(val) {
+                if (val === 'input') {
+                    this.dialogType = 'info'
+                }
+            },
+            value(val) {
+                this.val = val
+            }
+        },
+        created() {
+            // 对话框遮罩不可点击
+            this.popup.mkclick = false
+            if (this.mode === 'input') {
+                this.dialogType = 'info'
+                this.val = this.value
+            } else {
+                this.dialogType = this.type
+            }
+        },
+        mounted() {
+            this.focus = true
+        },
+        methods: {
+            /**
+             * 点击确认按钮
+             */
+            onOk() {
+                this.$emit('confirm', () => {
+                    this.popup.close()
+                    if (this.mode === 'input') this.val = this.value
+                }, this.mode === 'input' ? this.val : '')
+            },
+            /**
+             * 点击取消按钮
+             */
+            close() {
+                if (this.beforeClose) {
+                    this.$emit('close', () => {
+                        this.popup.close()
+                    })
+                    return
+                }
+                this.popup.close()
+            }
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	.uni-popup-dialog {
-		width: 300px;
-		border-radius: 15px;
-		background-color: #fff;
-	}
-
-	.uni-dialog-title {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		padding-top: 15px;
-		padding-bottom: 5px;
-	}
-
-	.uni-dialog-title-text {
-		font-size: 16px;
-		font-weight: 500;
-	}
-
-	.uni-dialog-content {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		padding: 5px 15px 15px 15px;
-	}
-
-	.uni-dialog-content-text {
-		font-size: 14px;
-		color: #6e6e6e;
-	}
-
-	.uni-dialog-button-group {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		border-top-color: #f5f5f5;
-		border-top-style: solid;
-		border-top-width: 1px;
-	}
-
-	.uni-dialog-button {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-
-		flex: 1;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		height: 45px;
-	}
-
-	.uni-border-left {
-		border-left-color: #f0f0f0;
-		border-left-style: solid;
-		border-left-width: 1px;
-	}
-
-	.uni-dialog-button-text {
-		font-size: 14px;
-	}
-
-	.uni-button-color {
-		color: $uni-color-primary;
-	}
-
-	.uni-dialog-input {
-		flex: 1;
-		font-size: 14px;
-	}
-
-	.uni-popup__success {
-		color: $uni-color-success;
-	}
-
-	.uni-popup__warn {
-		color: $uni-color-warning;
-	}
-
-	.uni-popup__error {
-		color: $uni-color-error;
-	}
-
-	.uni-popup__info {
-		color: #909399;
-	}
+    .uni-popup-dialog {
+        width: 300px;
+        border-radius: 15px;
+        background-color: #fff;
+    }
+
+    .uni-dialog-title {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: row;
+        justify-content: center;
+        padding-top: 15px;
+        padding-bottom: 5px;
+    }
+
+    .uni-dialog-title-text {
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    .uni-dialog-content {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px 15px 15px 15px;
+    }
+
+    .uni-dialog-content-text {
+        font-size: 14px;
+        color: #6e6e6e;
+    }
+
+    .uni-dialog-button-group {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: row;
+        border-top-color: #f5f5f5;
+        border-top-style: solid;
+        border-top-width: 1px;
+    }
+
+    .uni-dialog-button {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+
+        flex: 1;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 45px;
+    }
+
+    .uni-border-left {
+        border-left-color: #f0f0f0;
+        border-left-style: solid;
+        border-left-width: 1px;
+    }
+
+    .uni-dialog-button-text {
+        font-size: 14px;
+    }
+
+    .uni-button-color {
+        color: $uni-color-primary;
+    }
+
+    .uni-dialog-input {
+        flex: 1;
+        font-size: 14px;
+    }
+
+    .uni-popup__success {
+        color: $uni-color-success;
+    }
+
+    .uni-popup__warn {
+        color: $uni-color-warning;
+    }
+
+    .uni-popup__error {
+        color: $uni-color-error;
+    }
+
+    .uni-popup__info {
+        color: #909399;
+    }
 </style>

mini-program/garden-wxapp/components/uni-popup/uni-popup-message.vue

@@ -1,116 +1,117 @@
 <template>
-	<view class="uni-popup-message" :class="'uni-popup__'+[type]">
-		<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
-	</view>
+    <view class="uni-popup-message" :class="'uni-popup__'+[type]">
+        <text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
+    </view>
 </template>
 
 <script>
-	
-	/**
-	 * PopUp 弹出层-消息提示
-	 * @description 弹出层-消息提示
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
-	 * @property {String} type = [success|warning|info|error] 主题样式
-	 *  @value success 成功
-	 * 	@value warning 提示
-	 * 	@value info 消息
-	 * 	@value error 错误
-	 * @property {String} message 消息提示文字
-	 * @property {String} duration 显示时间，设置为 0 则不会自动关闭
-	 */
-	
-	export default {
-		name: 'UniPopupMessage',
-		props: {
-			/**
-			 * 主题 success/warning/info/error	  默认 success
-			 */
-			type: {
-				type: String,
-				default: 'success'
-			},
-			/**
-			 * 消息文字
-			 */
-			message: {
-				type: String,
-				default: ''
-			},
-			/**
-			 * 显示时间，设置为 0 则不会自动关闭
-			 */
-			duration: {
-				type: Number,
-				default: 3000
-			}
-		},
-		inject: ['popup'],
-		data() {
-			return {}
-		},
-		created() {
-			this.popup.childrenMsg = this
-		},
-		methods: {
-			open() {
-				if (this.duration === 0) return
-				clearTimeout(this.popuptimer)
-				this.popuptimer = setTimeout(() => {
-					this.popup.close()
-				}, this.duration)
-			},
-			close() {
-				clearTimeout(this.popuptimer)
-			}
-		}
-	}
+
+    /**
+     * PopUp 弹出层-消息提示
+     * @description 弹出层-消息提示
+     * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+     * @property {String} type = [success|warning|info|error] 主题样式
+     *  @value success 成功
+     *    @value warning 提示
+     *    @value info 消息
+     *    @value error 错误
+     * @property {String} message 消息提示文字
+     * @property {String} duration 显示时间，设置为 0 则不会自动关闭
+     */
+
+    export default {
+        name: 'UniPopupMessage',
+        props: {
+            /**
+             * 主题 success/warning/info/error      默认 success
+             */
+            type: {
+                type: String,
+                default: 'success'
+            },
+            /**
+             * 消息文字
+             */
+            message: {
+                type: String,
+                default: ''
+            },
+            /**
+             * 显示时间，设置为 0 则不会自动关闭
+             */
+            duration: {
+                type: Number,
+                default: 3000
+            }
+        },
+        inject: ['popup'],
+        data() {
+            return {}
+        },
+        created() {
+            this.popup.childrenMsg = this
+        },
+        methods: {
+            open() {
+                if (this.duration === 0) return
+                clearTimeout(this.popuptimer)
+                this.popuptimer = setTimeout(() => {
+                    this.popup.close()
+                }, this.duration)
+            },
+            close() {
+                clearTimeout(this.popuptimer)
+            }
+        }
+    }
 </script>
 <style lang="scss" scoped>
-	.uni-popup-message {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		background-color: #e1f3d8;
-		padding: 10px 15px;
-		border-color: #eee;
-		border-style: solid;
-		border-width: 1px;
-	}
-	.uni-popup-message-text {
-		font-size: 14px;
-		padding: 0;
-	}
+    .uni-popup-message {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: row;
+        background-color: #e1f3d8;
+        padding: 10px 15px;
+        border-color: #eee;
+        border-style: solid;
+        border-width: 1px;
+    }
+
+    .uni-popup-message-text {
+        font-size: 14px;
+        padding: 0;
+    }
 
-	.uni-popup__success {
-		background-color: #e1f3d8;
-	}
+    .uni-popup__success {
+        background-color: #e1f3d8;
+    }
 
-	.uni-popup__success-text {
-		color: #67C23A;
-	}
+    .uni-popup__success-text {
+        color: #67C23A;
+    }
 
-	.uni-popup__warn {
-		background-color: #faecd8;
-	}
+    .uni-popup__warn {
+        background-color: #faecd8;
+    }
 
-	.uni-popup__warn-text {
-		color: #E6A23C;
-	}
+    .uni-popup__warn-text {
+        color: #E6A23C;
+    }
 
-	.uni-popup__error {
-		background-color: #fde2e2;
-	}
+    .uni-popup__error {
+        background-color: #fde2e2;
+    }
 
-	.uni-popup__error-text {
-		color: #F56C6C;
-	}
+    .uni-popup__error-text {
+        color: #F56C6C;
+    }
 
-	.uni-popup__info {
-		background-color: #F2F6FC;
-	}
+    .uni-popup__info {
+        background-color: #F2F6FC;
+    }
 
-	.uni-popup__info-text {
-		color: #909399;
-	}
+    .uni-popup__info-text {
+        color: #909399;
+    }
 </style>

mini-program/garden-wxapp/components/uni-popup/uni-popup-share.vue

@@ -1,165 +1,172 @@
 <template>
-	<view class="uni-popup-share">
-		<view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
-		<view class="uni-share-content">
-			<view class="uni-share-content-box">
-				<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
-					<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
-					<text class="uni-share-text">{{item.text}}</text>
-				</view>
+    <view class="uni-popup-share">
+        <view class="uni-share-title">
+            <text class="uni-share-title-text">{{title}}</text>
+        </view>
+        <view class="uni-share-content">
+            <view class="uni-share-content-box">
+                <view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index"
+                      @click.stop="select(item,index)">
+                    <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
+                    <text class="uni-share-text">{{item.text}}</text>
+                </view>
 
-			</view>
-		</view>
-		<view class="uni-share-button-box">
-			<button class="uni-share-button" @click="close">取消</button>
-		</view>
-	</view>
+            </view>
+        </view>
+        <view class="uni-share-button-box">
+            <button class="uni-share-button" @click="close">取消</button>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		name: 'UniPopupShare',
-		props: {
-			title: {
-				type: String,
-				default: '分享到'
-			}
-		},
-		inject: ['popup'],
-		data() {
-			return {
-				bottomData: [{
-						text: '微信',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
-						name: 'wx'
-					},
-					{
-						text: '支付宝',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
-						name: 'wx'
-					},
-					{
-						text: 'QQ',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
-						name: 'qq'
-					},
-					{
-						text: '新浪',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
-						name: 'sina'
-					},
-					{
-						text: '百度',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
-						name: 'copy'
-					},
-					{
-						text: '其他',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
-						name: 'more'
-					}
-				]
-			}
-		},
-		created() {},
-		methods: {
-			/**
-			 * 选择内容
-			 */
-			select(item, index) {
-				this.$emit('select', {
-					item,
-					index
-				}, () => {
-					this.popup.close()
-				})
-			},
-			/**
-			 * 关闭窗口
-			 */
-			close() {
-				this.popup.close()
-			}
-		}
-	}
+    export default {
+        name: 'UniPopupShare',
+        props: {
+            title: {
+                type: String,
+                default: '分享到'
+            }
+        },
+        inject: ['popup'],
+        data() {
+            return {
+                bottomData: [{
+                    text: '微信',
+                    icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
+                    name: 'wx'
+                },
+                    {
+                        text: '支付宝',
+                        icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
+                        name: 'wx'
+                    },
+                    {
+                        text: 'QQ',
+                        icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
+                        name: 'qq'
+                    },
+                    {
+                        text: '新浪',
+                        icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
+                        name: 'sina'
+                    },
+                    {
+                        text: '百度',
+                        icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
+                        name: 'copy'
+                    },
+                    {
+                        text: '其他',
+                        icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
+                        name: 'more'
+                    }
+                ]
+            }
+        },
+        created() {
+        },
+        methods: {
+            /**
+             * 选择内容
+             */
+            select(item, index) {
+                this.$emit('select', {
+                    item,
+                    index
+                }, () => {
+                    this.popup.close()
+                })
+            },
+            /**
+             * 关闭窗口
+             */
+            close() {
+                this.popup.close()
+            }
+        }
+    }
 </script>
 <style lang="scss" scoped>
-	.uni-popup-share {
-		background-color: #fff;
-	}
-	.uni-share-title {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		height: 40px;
-	}
-	.uni-share-title-text {
-		font-size: 14px;
-		color: #666;
-	}
-	.uni-share-content {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		padding-top: 10px;
-	}
-	
-	.uni-share-content-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		flex-wrap: wrap;
-		width: 360px;
-	}
-	
-	.uni-share-content-item {
-		width: 90px;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: center;
-		padding: 10px 0;
-		align-items: center;
-	}
-	
-	.uni-share-content-item:active {
-		background-color: #f5f5f5;
-	}
-	
-	.uni-share-image {
-		width: 30px;
-		height: 30px;
-	}
-	
-	.uni-share-text {
-		margin-top: 10px;
-		font-size: 14px;
-		color: #3B4144;
-	}
-	
-	.uni-share-button-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		padding: 10px 15px;
-	}
-	
-	.uni-share-button {
-		flex: 1;
-		border-radius: 50px;
-		color: #666;
-		font-size: 16px;
-	}
-	
-	.uni-share-button::after {
-		border-radius: 50px;
-	}
+    .uni-popup-share {
+        background-color: #fff;
+    }
+
+    .uni-share-title {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        height: 40px;
+    }
+
+    .uni-share-title-text {
+        font-size: 14px;
+        color: #666;
+    }
+
+    .uni-share-content {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: row;
+        justify-content: center;
+        padding-top: 10px;
+    }
+
+    .uni-share-content-box {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: row;
+        flex-wrap: wrap;
+        width: 360px;
+    }
+
+    .uni-share-content-item {
+        width: 90px;
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: column;
+        justify-content: center;
+        padding: 10px 0;
+        align-items: center;
+    }
+
+    .uni-share-content-item:active {
+        background-color: #f5f5f5;
+    }
+
+    .uni-share-image {
+        width: 30px;
+        height: 30px;
+    }
+
+    .uni-share-text {
+        margin-top: 10px;
+        font-size: 14px;
+        color: #3B4144;
+    }
+
+    .uni-share-button-box {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: row;
+        padding: 10px 15px;
+    }
+
+    .uni-share-button {
+        flex: 1;
+        border-radius: 50px;
+        color: #666;
+        font-size: 16px;
+    }
+
+    .uni-share-button::after {
+        border-radius: 50px;
+    }
 </style>

mini-program/garden-wxapp/components/uni-popup/uni-popup.vue

@@ -1,294 +1,296 @@
 <template>
-	<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
-		<uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
-		 @click="onTap" />
-		<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
-			<view class="uni-popup__wrapper-box" @click.stop="clear">
-				<slot />
-			</view>
-		</uni-transition>
-	</view>
+    <view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
+        <uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration"
+                        :show="showTrans"
+                        @click="onTap"/>
+        <uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
+            <view class="uni-popup__wrapper-box" @click.stop="clear">
+                <slot/>
+            </view>
+        </uni-transition>
+    </view>
 </template>
 
 <script>
-	import uniTransition from '../uni-transition/uni-transition.vue'
-	import popup from './popup.js'
-	/**
-	 * PopUp 弹出层
-	 * @description 弹出层组件，为了解决遮罩弹层的问题
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
-	 * @property {String} type = [top|center|bottom] 弹出方式
-	 * 	@value top 顶部弹出
-	 * 	@value center 中间弹出
-	 * 	@value bottom 底部弹出
-	 * 	@value message 消息提示
-	 * 	@value dialog 对话框
-	 * 	@value share 底部分享示例
-	 * @property {Boolean} animation = [ture|false] 是否开启动画
-	 * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
-	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
-	 */
+    import uniTransition from '../uni-transition/uni-transition.vue'
+    import popup from './popup.js'
 
-	export default {
-		name: 'UniPopup',
-		components: {
-			uniTransition
-		},
-		props: {
-			// 开启动画
-			animation: {
-				type: Boolean,
-				default: true
-			},
-			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
-			// message: 消息提示 ; dialog : 对话框
-			type: {
-				type: String,
-				default: 'center'
-			},
-			// maskClick
-			maskClick: {
-				type: Boolean,
-				default: true
-			}
-		},
-		provide() {
-			return {
-				popup: this
-			}
-		},
-		mixins: [popup],
-		watch: {
-			/**
-			 * 监听type类型
-			 */
-			type: {
-				handler: function(newVal) {
-					this[this.config[newVal]]()
-				},
-				immediate: true
-			},
-			/**
-			 * 监听遮罩是否可点击
-			 * @param {Object} val
-			 */
-			maskClick(val) {
-				this.mkclick = val
-			}
-		},
-		data() {
-			return {
-				duration: 300,
-				ani: [],
-				showPopup: false,
-				showTrans: false,
-				maskClass: {
-					'position': 'fixed',
-					'bottom': 0,
-					'top': 0,
-					'left': 0,
-					'right': 0,
-					'backgroundColor': 'rgba(0, 0, 0, 0.4)'
-				},
-				transClass: {
-					'position': 'fixed',
-					'left': 0,
-					'right': 0,
-				},
-				maskShow: true,
-				mkclick: true,
-				popupstyle: 'top'
-			}
-		},
-		created() {
-			this.mkclick = this.maskClick
-			if (this.animation) {
-				this.duration = 300
-			} else {
-				this.duration = 0
-			}
-		},
-		methods: {
-			clear(e) {
-				// TODO nvue 取消冒泡
-				e.stopPropagation()
-			},
-			open() {
-				this.showPopup = true
-				this.$nextTick(() => {
-					new Promise(resolve => {
-						clearTimeout(this.timer)
-						this.timer = setTimeout(() => {
-							this.showTrans = true
-							// fixed by mehaotian 兼容 app 端
-							this.$nextTick(() => {
-								resolve();
-							})
-						}, 50);
-					}).then(res => {
-						// 自定义打开事件
-						clearTimeout(this.msgtimer)
-						this.msgtimer = setTimeout(() => {
-							this.customOpen && this.customOpen()
-						}, 100)
-						this.$emit('change', {
-							show: true,
-							type: this.type
-						})
-					})
-				})
-			},
-			close(type) {
-				this.showTrans = false
-				this.$nextTick(() => {
-					this.$emit('change', {
-						show: false,
-						type: this.type
-					})
-					clearTimeout(this.timer)
-					// 自定义关闭事件
-					this.customOpen && this.customClose()
-					this.timer = setTimeout(() => {
-						this.showPopup = false
-					}, 300)
-				})
-			},
-			onTap() {
-				if (!this.mkclick) return
-				this.close()
-			},
-			/**
-			 * 顶部弹出样式处理
-			 */
-			top() {
-				this.popupstyle = 'top'
-				this.ani = ['slide-top']
-				this.transClass = {
-					'position': 'fixed',
-					'left': 0,
-					'right': 0,
-				}
-			},
-			/**
-			 * 底部弹出样式处理
-			 */
-			bottom() {
-				this.popupstyle = 'bottom'
-				this.ani = ['slide-bottom']
-				this.transClass = {
-					'position': 'fixed',
-					'left': 0,
-					'right': 0,
-					'bottom': 0
-				}
-			},
-			/**
-			 * 中间弹出样式处理
-			 */
-			center() {
-				this.popupstyle = 'center'
-				this.ani = ['zoom-out', 'fade']
-				this.transClass = {
-					'position': 'fixed',
-					/* #ifndef APP-NVUE */
-					'display': 'flex',
-					'flexDirection': 'column',
-					/* #endif */
-					'bottom': 0,
-					'left': 0,
-					'right': 0,
-					'top': 0,
-					'justifyContent': 'center',
-					'alignItems': 'center'
-				}
-			}
-		}
-	}
+    /**
+     * PopUp 弹出层
+     * @description 弹出层组件，为了解决遮罩弹层的问题
+     * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+     * @property {String} type = [top|center|bottom] 弹出方式
+     *    @value top 顶部弹出
+     *    @value center 中间弹出
+     *    @value bottom 底部弹出
+     *    @value message 消息提示
+     *    @value dialog 对话框
+     *    @value share 底部分享示例
+     * @property {Boolean} animation = [ture|false] 是否开启动画
+     * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
+     * @event {Function} change 打开关闭弹窗触发，e={show: false}
+     */
+
+    export default {
+        name: 'UniPopup',
+        components: {
+            uniTransition
+        },
+        props: {
+            // 开启动画
+            animation: {
+                type: Boolean,
+                default: true
+            },
+            // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+            // message: 消息提示 ; dialog : 对话框
+            type: {
+                type: String,
+                default: 'center'
+            },
+            // maskClick
+            maskClick: {
+                type: Boolean,
+                default: true
+            }
+        },
+        provide() {
+            return {
+                popup: this
+            }
+        },
+        mixins: [popup],
+        watch: {
+            /**
+             * 监听type类型
+             */
+            type: {
+                handler: function (newVal) {
+                    this[this.config[newVal]]()
+                },
+                immediate: true
+            },
+            /**
+             * 监听遮罩是否可点击
+             * @param {Object} val
+             */
+            maskClick(val) {
+                this.mkclick = val
+            }
+        },
+        data() {
+            return {
+                duration: 300,
+                ani: [],
+                showPopup: false,
+                showTrans: false,
+                maskClass: {
+                    'position': 'fixed',
+                    'bottom': 0,
+                    'top': 0,
+                    'left': 0,
+                    'right': 0,
+                    'backgroundColor': 'rgba(0, 0, 0, 0.4)'
+                },
+                transClass: {
+                    'position': 'fixed',
+                    'left': 0,
+                    'right': 0,
+                },
+                maskShow: true,
+                mkclick: true,
+                popupstyle: 'top'
+            }
+        },
+        created() {
+            this.mkclick = this.maskClick
+            if (this.animation) {
+                this.duration = 300
+            } else {
+                this.duration = 0
+            }
+        },
+        methods: {
+            clear(e) {
+                // TODO nvue 取消冒泡
+                e.stopPropagation()
+            },
+            open() {
+                this.showPopup = true
+                this.$nextTick(() => {
+                    new Promise(resolve => {
+                        clearTimeout(this.timer)
+                        this.timer = setTimeout(() => {
+                            this.showTrans = true
+                            // fixed by mehaotian 兼容 app 端
+                            this.$nextTick(() => {
+                                resolve();
+                            })
+                        }, 50);
+                    }).then(res => {
+                        // 自定义打开事件
+                        clearTimeout(this.msgtimer)
+                        this.msgtimer = setTimeout(() => {
+                            this.customOpen && this.customOpen()
+                        }, 100)
+                        this.$emit('change', {
+                            show: true,
+                            type: this.type
+                        })
+                    })
+                })
+            },
+            close(type) {
+                this.showTrans = false
+                this.$nextTick(() => {
+                    this.$emit('change', {
+                        show: false,
+                        type: this.type
+                    })
+                    clearTimeout(this.timer)
+                    // 自定义关闭事件
+                    this.customOpen && this.customClose()
+                    this.timer = setTimeout(() => {
+                        this.showPopup = false
+                    }, 300)
+                })
+            },
+            onTap() {
+                if (!this.mkclick) return
+                this.close()
+            },
+            /**
+             * 顶部弹出样式处理
+             */
+            top() {
+                this.popupstyle = 'top'
+                this.ani = ['slide-top']
+                this.transClass = {
+                    'position': 'fixed',
+                    'left': 0,
+                    'right': 0,
+                }
+            },
+            /**
+             * 底部弹出样式处理
+             */
+            bottom() {
+                this.popupstyle = 'bottom'
+                this.ani = ['slide-bottom']
+                this.transClass = {
+                    'position': 'fixed',
+                    'left': 0,
+                    'right': 0,
+                    'bottom': 0
+                }
+            },
+            /**
+             * 中间弹出样式处理
+             */
+            center() {
+                this.popupstyle = 'center'
+                this.ani = ['zoom-out', 'fade']
+                this.transClass = {
+                    'position': 'fixed',
+                    /* #ifndef APP-NVUE */
+                    'display': 'flex',
+                    'flexDirection': 'column',
+                    /* #endif */
+                    'bottom': 0,
+                    'left': 0,
+                    'right': 0,
+                    'top': 0,
+                    'justifyContent': 'center',
+                    'alignItems': 'center'
+                }
+            }
+        }
+    }
 </script>
 <style lang="scss" scoped>
-	.uni-popup {
-		position: fixed;
-		/* #ifndef APP-NVUE */
-		z-index: 99;
-		/* #endif */
-	}
+    .uni-popup {
+        position: fixed;
+        /* #ifndef APP-NVUE */
+        z-index: 99;
+        /* #endif */
+    }
 
-	.uni-popup__mask {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		background-color: $uni-bg-color-mask;
-		opacity: 0;
-	}
+    .uni-popup__mask {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: $uni-bg-color-mask;
+        opacity: 0;
+    }
 
-	.mask-ani {
-		transition-property: opacity;
-		transition-duration: 0.2s;
-	}
+    .mask-ani {
+        transition-property: opacity;
+        transition-duration: 0.2s;
+    }
 
-	.uni-top-mask {
-		opacity: 1;
-	}
+    .uni-top-mask {
+        opacity: 1;
+    }
 
-	.uni-bottom-mask {
-		opacity: 1;
-	}
+    .uni-bottom-mask {
+        opacity: 1;
+    }
 
-	.uni-center-mask {
-		opacity: 1;
-	}
+    .uni-center-mask {
+        opacity: 1;
+    }
 
-	.uni-popup__wrapper {
-		/* #ifndef APP-NVUE */
-		display: block;
-		/* #endif */
-		position: absolute;
-	}
+    .uni-popup__wrapper {
+        /* #ifndef APP-NVUE */
+        display: block;
+        /* #endif */
+        position: absolute;
+    }
 
-	.top {
-		/* #ifdef H5 */
-		top: var(--window-top);
-		/* #endif */
-		/* #ifndef H5 */
-		top: 0;
-		/* #endif */
-	}
+    .top {
+        /* #ifdef H5 */
+        top: var(--window-top);
+        /* #endif */
+        /* #ifndef H5 */
+        top: 0;
+        /* #endif */
+    }
 
-	.bottom {
-		bottom: 0;
-	}
+    .bottom {
+        bottom: 0;
+    }
 
-	.uni-popup__wrapper-box {
-		/* #ifndef APP-NVUE */
-		display: block;
-		/* #endif */
-		position: relative;
-		/* iphonex 等安全区设置，底部安全区适配 */
-		/* #ifndef APP-NVUE */
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-		/* #endif */
-	}
+    .uni-popup__wrapper-box {
+        /* #ifndef APP-NVUE */
+        display: block;
+        /* #endif */
+        position: relative;
+        /* iphonex 等安全区设置，底部安全区适配 */
+        /* #ifndef APP-NVUE */
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+        /* #endif */
+    }
 
-	.content-ani {
-		// transition: transform 0.3s;
-		transition-property: transform, opacity;
-		transition-duration: 0.2s;
-	}
+    .content-ani {
+        // transition: transform 0.3s;
+        transition-property: transform, opacity;
+        transition-duration: 0.2s;
+    }
 
 
-	.uni-top-content {
-		transform: translateY(0);
-	}
+    .uni-top-content {
+        transform: translateY(0);
+    }
 
-	.uni-bottom-content {
-		transform: translateY(0);
-	}
+    .uni-bottom-content {
+        transform: translateY(0);
+    }
 
-	.uni-center-content {
-		transform: scale(1);
-		opacity: 1;
-	}
+    .uni-center-content {
+        transform: scale(1);
+        opacity: 1;
+    }
 </style>

mini-program/garden-wxapp/components/uni-transition/uni-transition.vue

@@ -1,19 +1,20 @@
 <template>
-	<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
-	 @click="change">
-		 <slot></slot>
-	</view>
+    <view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]"
+          :style="'transform:' +transform+';'+stylesObject"
+          @click="change">
+        <slot></slot>
+    </view>
 </template>
 
 <script>
-	// #ifdef APP-NVUE
-	const animation = uni.requireNativePlugin('animation');
-	// #endif
-	/**
-	 * Transition 过渡动画
-	 * @description 简单过渡动画组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
-	 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+    // #ifdef APP-NVUE
+    const animation = uni.requireNativePlugin('animation');
+    // #endif
+    /**
+     * Transition 过渡动画
+     * @description 简单过渡动画组件
+     * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+     * @property {Boolean} show = [false|true] 控制组件显示或隐藏
      * @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
      *  @value fade 渐隐渐出过渡
      *  @value slide-top 由上至下过渡
@@ -22,258 +23,259 @@
      *  @value slide-left 由左至右过渡
      *  @value zoom-in 由小到大过渡
      *  @value zoom-out 由大到小过渡
-	 * @property {Number} duration 过渡动画持续时间
-	 * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
-	 */
-	export default {
-		name: 'uniTransition',
-		props: {
-			show: {
-				type: Boolean,
-				default: false
-			},
-			modeClass: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			duration: {
-				type: Number,
-				default: 300
-			},
-			styles: {
-				type: Object,
-				default () {
-					return {}
-				}
-			}
-		},
-		data() {
-			return {
-				isShow: false,
-				transform: '',
-				ani: { in: '',
-					active: ''
-				}
-			};
-		},
-		watch: {
-			show: {
-				handler(newVal) {
-					if (newVal) {
-						this.open()
-					} else {
-						this.close()
-					}
-				},
-				immediate: true
-			}
-		},
-		computed: {
-			stylesObject() {
-				let styles = {
-					...this.styles,
-					'transition-duration': this.duration / 1000 + 's'
-				}
-				let transfrom = ''
-				for (let i in styles) {
-					let line = this.toLine(i)
-					transfrom += line + ':' + styles[i] + ';'
-				}
-				return transfrom
-			}
-		},
-		created() {
-			// this.timer = null
-			// this.nextTick = (time = 50) => new Promise(resolve => {
-			// 	clearTimeout(this.timer)
-			// 	this.timer = setTimeout(resolve, time)
-			// 	return this.timer
-			// });
-		},
-		methods: {
-			change() {
-				this.$emit('click', {
-					detail: this.isShow
-				})
-			},
-			open() {
-				clearTimeout(this.timer)
-				this.isShow = true
-				this.transform = ''
-				this.ani.in = ''
-				for (let i in this.getTranfrom(false)) {
-					if (i === 'opacity') {
-						this.ani.in = 'fade-in'
-					} else {
-						this.transform += `${this.getTranfrom(false)[i]} `
-					}
-				}
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this._animation(true)
-					}, 50)
-				})
+     * @property {Number} duration 过渡动画持续时间
+     * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+     */
+    export default {
+        name: 'uniTransition',
+        props: {
+            show: {
+                type: Boolean,
+                default: false
+            },
+            modeClass: {
+                type: Array,
+                default() {
+                    return []
+                }
+            },
+            duration: {
+                type: Number,
+                default: 300
+            },
+            styles: {
+                type: Object,
+                default() {
+                    return {}
+                }
+            }
+        },
+        data() {
+            return {
+                isShow: false,
+                transform: '',
+                ani: {
+                    in: '',
+                    active: ''
+                }
+            };
+        },
+        watch: {
+            show: {
+                handler(newVal) {
+                    if (newVal) {
+                        this.open()
+                    } else {
+                        this.close()
+                    }
+                },
+                immediate: true
+            }
+        },
+        computed: {
+            stylesObject() {
+                let styles = {
+                    ...this.styles,
+                    'transition-duration': this.duration / 1000 + 's'
+                }
+                let transfrom = ''
+                for (let i in styles) {
+                    let line = this.toLine(i)
+                    transfrom += line + ':' + styles[i] + ';'
+                }
+                return transfrom
+            }
+        },
+        created() {
+            // this.timer = null
+            // this.nextTick = (time = 50) => new Promise(resolve => {
+            // 	clearTimeout(this.timer)
+            // 	this.timer = setTimeout(resolve, time)
+            // 	return this.timer
+            // });
+        },
+        methods: {
+            change() {
+                this.$emit('click', {
+                    detail: this.isShow
+                })
+            },
+            open() {
+                clearTimeout(this.timer)
+                this.isShow = true
+                this.transform = ''
+                this.ani.in = ''
+                for (let i in this.getTranfrom(false)) {
+                    if (i === 'opacity') {
+                        this.ani.in = 'fade-in'
+                    } else {
+                        this.transform += `${this.getTranfrom(false)[i]} `
+                    }
+                }
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this._animation(true)
+                    }, 50)
+                })
 
-			},
-			close(type) {
-				clearTimeout(this.timer)
-				this._animation(false)
-			},
-			_animation(type) {
-				let styles = this.getTranfrom(type)
-				// #ifdef APP-NVUE
-				if(!this.$refs['ani']) return
-				animation.transition(this.$refs['ani'].ref, {
-					styles,
-					duration: this.duration, //ms
-					timingFunction: 'ease',
-					needLayout: false,
-					delay: 0 //ms
-				}, () => {
-					if (!type) {
-						this.isShow = false
-					}
-					this.$emit('change', {
-						detail: this.isShow
-					})
-				})
-				// #endif
-				// #ifndef APP-NVUE
-				this.transform = ''
-				for (let i in styles) {
-					if (i === 'opacity') {
-						this.ani.in = `fade-${type?'out':'in'}`
-					} else {
-						this.transform += `${styles[i]} `
-					}
-				}
-				this.timer = setTimeout(() => {
-					if (!type) {
-						this.isShow = false
-					}
-					this.$emit('change', {
-						detail: this.isShow
-					})
+            },
+            close(type) {
+                clearTimeout(this.timer)
+                this._animation(false)
+            },
+            _animation(type) {
+                let styles = this.getTranfrom(type)
+                // #ifdef APP-NVUE
+                if (!this.$refs['ani']) return
+                animation.transition(this.$refs['ani'].ref, {
+                    styles,
+                    duration: this.duration, //ms
+                    timingFunction: 'ease',
+                    needLayout: false,
+                    delay: 0 //ms
+                }, () => {
+                    if (!type) {
+                        this.isShow = false
+                    }
+                    this.$emit('change', {
+                        detail: this.isShow
+                    })
+                })
+                // #endif
+                // #ifndef APP-NVUE
+                this.transform = ''
+                for (let i in styles) {
+                    if (i === 'opacity') {
+                        this.ani.in = `fade-${type ? 'out' : 'in'}`
+                    } else {
+                        this.transform += `${styles[i]} `
+                    }
+                }
+                this.timer = setTimeout(() => {
+                    if (!type) {
+                        this.isShow = false
+                    }
+                    this.$emit('change', {
+                        detail: this.isShow
+                    })
 
-				}, this.duration)
-				// #endif
+                }, this.duration)
+                // #endif
 
-			},
-			getTranfrom(type) {
-				let styles = {
-					transform: ''
-				}
-				this.modeClass.forEach((mode) => {
-					switch (mode) {
-						case 'fade':
-							styles.opacity = type ? 1 : 0
-							break;
-						case 'slide-top':
-							styles.transform += `translateY(${type?'0':'-100%'}) `
-							break;
-						case 'slide-right':
-							styles.transform += `translateX(${type?'0':'100%'}) `
-							break;
-						case 'slide-bottom':
-							styles.transform += `translateY(${type?'0':'100%'}) `
-							break;
-						case 'slide-left':
-							styles.transform += `translateX(${type?'0':'-100%'}) `
-							break;
-						case 'zoom-in':
-							styles.transform += `scale(${type?1:0.8}) `
-							break;
-						case 'zoom-out':
-							styles.transform += `scale(${type?1:1.2}) `
-							break;
-					}
-				})
-				return styles
-			},
-			_modeClassArr(type) {
-				let mode = this.modeClass
-				if (typeof(mode) !== "string") {
-					let modestr = ''
-					mode.forEach((item) => {
-						modestr += (item + '-' + type + ',')
-					})
-					return modestr.substr(0, modestr.length - 1)
-				} else {
-					return mode + '-' + type
-				}
-			},
-			// getEl(el) {
-			// 	console.log(el || el.ref || null);
-			// 	return el || el.ref || null
-			// },
-			toLine(name) {
-				return name.replace(/([A-Z])/g, "-$1").toLowerCase();
-			}
-		}
-	}
+            },
+            getTranfrom(type) {
+                let styles = {
+                    transform: ''
+                }
+                this.modeClass.forEach((mode) => {
+                    switch (mode) {
+                        case 'fade':
+                            styles.opacity = type ? 1 : 0
+                            break;
+                        case 'slide-top':
+                            styles.transform += `translateY(${type ? '0' : '-100%'}) `
+                            break;
+                        case 'slide-right':
+                            styles.transform += `translateX(${type ? '0' : '100%'}) `
+                            break;
+                        case 'slide-bottom':
+                            styles.transform += `translateY(${type ? '0' : '100%'}) `
+                            break;
+                        case 'slide-left':
+                            styles.transform += `translateX(${type ? '0' : '-100%'}) `
+                            break;
+                        case 'zoom-in':
+                            styles.transform += `scale(${type ? 1 : 0.8}) `
+                            break;
+                        case 'zoom-out':
+                            styles.transform += `scale(${type ? 1 : 1.2}) `
+                            break;
+                    }
+                })
+                return styles
+            },
+            _modeClassArr(type) {
+                let mode = this.modeClass
+                if (typeof (mode) !== "string") {
+                    let modestr = ''
+                    mode.forEach((item) => {
+                        modestr += (item + '-' + type + ',')
+                    })
+                    return modestr.substr(0, modestr.length - 1)
+                } else {
+                    return mode + '-' + type
+                }
+            },
+            // getEl(el) {
+            // 	console.log(el || el.ref || null);
+            // 	return el || el.ref || null
+            // },
+            toLine(name) {
+                return name.replace(/([A-Z])/g, "-$1").toLowerCase();
+            }
+        }
+    }
 </script>
 
 <style>
-	.uni-transition {
-		transition-timing-function: ease;
-		transition-duration: 0.3s;
-		transition-property: transform, opacity;
-	}
+    .uni-transition {
+        transition-timing-function: ease;
+        transition-duration: 0.3s;
+        transition-property: transform, opacity;
+    }
 
-	.fade-in {
-		opacity: 0;
-	}
+    .fade-in {
+        opacity: 0;
+    }
 
-	.fade-active {
-		opacity: 1;
-	}
+    .fade-active {
+        opacity: 1;
+    }
 
-	.slide-top-in {
-		/* transition-property: transform, opacity; */
-		transform: translateY(-100%);
-	}
+    .slide-top-in {
+        /* transition-property: transform, opacity; */
+        transform: translateY(-100%);
+    }
 
-	.slide-top-active {
-		transform: translateY(0);
-		/* opacity: 1; */
-	}
+    .slide-top-active {
+        transform: translateY(0);
+        /* opacity: 1; */
+    }
 
-	.slide-right-in {
-		transform: translateX(100%);
-	}
+    .slide-right-in {
+        transform: translateX(100%);
+    }
 
-	.slide-right-active {
-		transform: translateX(0);
-	}
+    .slide-right-active {
+        transform: translateX(0);
+    }
 
-	.slide-bottom-in {
-		transform: translateY(100%);
-	}
+    .slide-bottom-in {
+        transform: translateY(100%);
+    }
 
-	.slide-bottom-active {
-		transform: translateY(0);
-	}
+    .slide-bottom-active {
+        transform: translateY(0);
+    }
 
-	.slide-left-in {
-		transform: translateX(-100%);
-	}
+    .slide-left-in {
+        transform: translateX(-100%);
+    }
 
-	.slide-left-active {
-		transform: translateX(0);
-		opacity: 1;
-	}
+    .slide-left-active {
+        transform: translateX(0);
+        opacity: 1;
+    }
 
-	.zoom-in-in {
-		transform: scale(0.8);
-	}
+    .zoom-in-in {
+        transform: scale(0.8);
+    }
 
-	.zoom-out-active {
-		transform: scale(1);
-	}
+    .zoom-out-active {
+        transform: scale(1);
+    }
 
-	.zoom-out-in {
-		transform: scale(1.2);
-	}
+    .zoom-out-in {
+        transform: scale(1.2);
+    }
 </style>

mini-program/garden-wxapp/components/wm-list-add/css/wm-icon.css

@@ -1,24 +1,23 @@
-@font-face {font-family: "wm-icon";
-  src: url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.eot?t=1612429272174'); /* IE9 */
-  src: url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.eot?t=1612429272174#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABqAAAAJ5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBFIEXATYCJAMMCwgABCAFhGEHOBvTBcguMRUZ6fQkkDYTIZjWnPn8Dxy4PVEEX3tx++4urVUdl4yvVSU0j9AogtEIhVDd4tBdV/Uv52qPwIi9B0dEipJ203I66R65fydfo7KnHvNh2jyho6UToOY3C7DhPcbGWcr6Dhf//73TN/63b02cFyjHtZcu6iQcUGB7AkVWJAl5w9gFL/A5gUajhmR2do6uoKyw1wXimecIKBdSisKq9UJtw9EiHtSoTy/SJ7yMvh+/bEaZpCazt+7ebduw9tXlp8pwGSBpAjxdg4xloBDXjaVTOcF4OY2mfHdzrSKkpbJVRaQyDLXOHx5JELXszmYwj8qJrwVPlZmnoeapn8qgFgVzwCqb6ybOomFm89PPcjm8+YblrIxvUT3bmJujJTellupnjePGkVcafD3rO3K8g1TtholXtwD77u+5BajOnufWAcgL6UUgeBC9Hyz9LtcK+LLeK0pV5w0v10sw9S9TDxwphtZ256KpPJUVyYZOH0jArkZU7Finr+m2ntuqhDo9GU7sMM7sFC7sItRosgG16mxBoyWbp5t0ieVEacCiZwCh1Wuc2Dc4s29xYT9DjV7/UKvVf2h0HKUrm8zGXXXTkGCyUXbRs3Ss3CJX29Ew7LwgpxkKwzWh5IZM6mVwfGSsUt2lmMz0LWnLmWBWqIyOcAe8yBSGGhOjfbJ4xGVOFkZHVdObRiwdQdU2gwiM2JDUhTwWLaaCXlb1XGQYfu4CcTSFBNM8pKB8gxgpbzo0bsRYN941xUOGHuG2VItjAmMKUgzNQ2gHYjaErKShpHmRj1jYCHdCIbFg1BmnhppGtrVEf3YCGtn35kiRo6i/p9ixm3o8J2wbAAAAAA==') format('woff2'),
-  url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.woff?t=1612429272174') format('woff'),
-  url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.ttf?t=1612429272174') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.svg?t=1612429272174#wm-icon') format('svg'); /* iOS 4.1- */
+@font-face {
+    font-family: "wm-icon";
+    src: url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.eot?t=1612429272174'); /* IE9 */
+    src: url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.eot?t=1612429272174#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABqAAAAJ5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBFIEXATYCJAMMCwgABCAFhGEHOBvTBcguMRUZ6fQkkDYTIZjWnPn8Dxy4PVEEX3tx++4urVUdl4yvVSU0j9AogtEIhVDd4tBdV/Uv52qPwIi9B0dEipJ203I66R65fydfo7KnHvNh2jyho6UToOY3C7DhPcbGWcr6Dhf//73TN/63b02cFyjHtZcu6iQcUGB7AkVWJAl5w9gFL/A5gUajhmR2do6uoKyw1wXimecIKBdSisKq9UJtw9EiHtSoTy/SJ7yMvh+/bEaZpCazt+7ebduw9tXlp8pwGSBpAjxdg4xloBDXjaVTOcF4OY2mfHdzrSKkpbJVRaQyDLXOHx5JELXszmYwj8qJrwVPlZmnoeapn8qgFgVzwCqb6ybOomFm89PPcjm8+YblrIxvUT3bmJujJTellupnjePGkVcafD3rO3K8g1TtholXtwD77u+5BajOnufWAcgL6UUgeBC9Hyz9LtcK+LLeK0pV5w0v10sw9S9TDxwphtZ256KpPJUVyYZOH0jArkZU7Finr+m2ntuqhDo9GU7sMM7sFC7sItRosgG16mxBoyWbp5t0ieVEacCiZwCh1Wuc2Dc4s29xYT9DjV7/UKvVf2h0HKUrm8zGXXXTkGCyUXbRs3Ss3CJX29Ew7LwgpxkKwzWh5IZM6mVwfGSsUt2lmMz0LWnLmWBWqIyOcAe8yBSGGhOjfbJ4xGVOFkZHVdObRiwdQdU2gwiM2JDUhTwWLaaCXlb1XGQYfu4CcTSFBNM8pKB8gxgpbzo0bsRYN941xUOGHuG2VItjAmMKUgzNQ2gHYjaErKShpHmRj1jYCHdCIbFg1BmnhppGtrVEf3YCGtn35kiRo6i/p9ixm3o8J2wbAAAAAA==') format('woff2'),
+    url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.woff?t=1612429272174') format('woff'),
+    url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.ttf?t=1612429272174') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_2366056_hdrm0876p4j.svg?t=1612429272174#wm-icon') format('svg'); /* iOS 4.1- */
 }
 
 .wm-icon {
-  font-family: "wm-icon" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-family: "wm-icon" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .wm-icon-gengduo1:before {
-  content: "\e635";
+    content: "\e635";
 }
 
 .wm-icon-add:before {
-  content: "\e605";
+    content: "\e605";
 }

mini-program/garden-wxapp/components/wm-list-add/wm-list-add.vue

@@ -1,171 +1,173 @@
 <template>
-	<view>
-		<view :animation="animationDataContent" class="animationContent" :style="{'background-color': bgColor }" @click="rotateAndScaleThenTranslate">
-			<label class="wm-icon wm-icon-gengduo1 moreIcon" v-if="moreFlag" :style="{'color': fontColor }"></label>
-			<view :animation="animationData" @tap="clickAdd" class="bottom-float" :style="{'background-color': bgColor }">
-				<label class="wm-icon wm-icon-add addIcon" :style="{'color': fontColor }"></label>
-			</view>
-		</view>
-	</view>
+    <view>
+        <view :animation="animationDataContent" class="animationContent" :style="{'background-color': bgColor }"
+              @click="rotateAndScaleThenTranslate">
+            <label class="wm-icon wm-icon-gengduo1 moreIcon" v-if="moreFlag" :style="{'color': fontColor }"></label>
+            <view :animation="animationData" @tap="clickAdd" class="bottom-float"
+                  :style="{'background-color': bgColor }">
+                <label class="wm-icon wm-icon-add addIcon" :style="{'color': fontColor }"></label>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	/**
-	 * wm-list-add 带状态的提交按钮
-	 * @description 一个动效的侧面添加按钮，适用于list场景，避免遮挡用户视线。
-	 * @property {String} bgColor 背景颜色（默认：#5094f2）
-	 * @property {String} fontColor 文字颜色（默认：#ffffff）
-	 * @property {Boolean} isOpen 默认是否关闭动画（默认：否）
-	 * @example
-	 * <wm-list-add ref="add"/>
-	 */
-	export default {
-		name: 'wm-list-add',
-		props: {
-			// 背景颜色
-			bgColor: {
-				type: String,
-				default: '#5064eb'
-			},
-			// 文字颜色
-			fontColor: {
-				type: String,
-				default: '#ffffff'
-			},
-			// 是否关闭动画
-			isOpen: {
-				type: Boolean,
-				default: false
-			},
-			//列表滑动关闭动画
-			isClose:{
-				type: Boolean,
-				default: false
-			}
-		},
-		created() {
-			this.init()
-		},
-		data() {
-			return {
-				animationData: {},
-				animationDataContent: {},
-				moreFlag: false,
-			}
-		},
-		methods: {
-			init() {
-				if (!this.isOpen) {
-					this.closeAnimation()
-				}
-			},
-			clickAdd() {
-				this.$emit('clickAdd');
-			},
-			// 关闭右侧添加
-			closeAnimation() {
-				if (this.moreFlag) return
+    /**
+     * wm-list-add 带状态的提交按钮
+     * @description 一个动效的侧面添加按钮，适用于list场景，避免遮挡用户视线。
+     * @property {String} bgColor 背景颜色（默认：#5094f2）
+     * @property {String} fontColor 文字颜色（默认：#ffffff）
+     * @property {Boolean} isOpen 默认是否关闭动画（默认：否）
+     * @example
+     * <wm-list-add ref="add"/>
+     */
+    export default {
+        name: 'wm-list-add',
+        props: {
+            // 背景颜色
+            bgColor: {
+                type: String,
+                default: '#5064eb'
+            },
+            // 文字颜色
+            fontColor: {
+                type: String,
+                default: '#ffffff'
+            },
+            // 是否关闭动画
+            isOpen: {
+                type: Boolean,
+                default: false
+            },
+            //列表滑动关闭动画
+            isClose: {
+                type: Boolean,
+                default: false
+            }
+        },
+        created() {
+            this.init()
+        },
+        data() {
+            return {
+                animationData: {},
+                animationDataContent: {},
+                moreFlag: false,
+            }
+        },
+        methods: {
+            init() {
+                if (!this.isOpen) {
+                    this.closeAnimation()
+                }
+            },
+            clickAdd() {
+                this.$emit('clickAdd');
+            },
+            // 关闭右侧添加
+            closeAnimation() {
+                if (this.moreFlag) return
 
-				const animation1 = uni.createAnimation({
-					duration: 500,
-					timingFunction: 'ease',
-				})
-				const animation = uni.createAnimation({
-					duration: 1000,
-					timingFunction: 'ease',
-				})
+                const animation1 = uni.createAnimation({
+                    duration: 500,
+                    timingFunction: 'ease',
+                })
+                const animation = uni.createAnimation({
+                    duration: 1000,
+                    timingFunction: 'ease',
+                })
 
-				this.animationDataContent = animation1
-				this.animation = animation
+                this.animationDataContent = animation1
+                this.animation = animation
 
-				animation1.scale(1, 1).rotate(0).step()
-				animation.scale(1, 1).rotate(90).step()
+                animation1.scale(1, 1).rotate(0).step()
+                animation.scale(1, 1).rotate(90).step()
 
-				this.animationData = animation.export()
-				this.animationDataContent = animation1.export()
-				console.log(this.animationData)
-				setTimeout(function() {
-					animation1.translate(42).step()
-					animation.translate(0, -42).step()
-					this.animationData = animation.export()
-					this.animationDataContent = animation1.export()
-					this.moreFlag = true
-				}.bind(this), 1000)
-			},
-			// 打开右侧添加
-			rotateAndScaleThenTranslate() {
-				var animation1 = uni.createAnimation({
-					duration: 500,
-					timingFunction: 'ease',
-				})
-				this.animation1 = animation1
-				// 先旋转，然后平移
-				this.animation1.rotate(0).scale(1, 1).step()
-				this.animation1.translate(0).step()
-				this.animationDataContent = this.animation1.export()
+                this.animationData = animation.export()
+                this.animationDataContent = animation1.export()
+                console.log(this.animationData)
+                setTimeout(function () {
+                    animation1.translate(42).step()
+                    animation.translate(0, -42).step()
+                    this.animationData = animation.export()
+                    this.animationDataContent = animation1.export()
+                    this.moreFlag = true
+                }.bind(this), 1000)
+            },
+            // 打开右侧添加
+            rotateAndScaleThenTranslate() {
+                var animation1 = uni.createAnimation({
+                    duration: 500,
+                    timingFunction: 'ease',
+                })
+                this.animation1 = animation1
+                // 先旋转，然后平移
+                this.animation1.rotate(0).scale(1, 1).step()
+                this.animation1.translate(0).step()
+                this.animationDataContent = this.animation1.export()
 
 
-				var animation = uni.createAnimation({
-					duration: 1000,
-					timingFunction: 'ease',
-				})
-				this.animation = animation
-				// 先旋转，然后平移
-				this.animation.rotate(-90).scale(1, 1).step()
-				this.animation.translate(0, 0).step()
-				this.animationData = this.animation.export()
+                var animation = uni.createAnimation({
+                    duration: 1000,
+                    timingFunction: 'ease',
+                })
+                this.animation = animation
+                // 先旋转，然后平移
+                this.animation.rotate(-90).scale(1, 1).step()
+                this.animation.translate(0, 0).step()
+                this.animationData = this.animation.export()
 
-				this.moreFlag = false
+                this.moreFlag = false
 
-				// 5秒自动收回
-				setTimeout(() => {
-					this.closeAnimation()
-				}, 5000)
-			},
-		}
-	}
+                // 5秒自动收回
+                setTimeout(() => {
+                    this.closeAnimation()
+                }, 5000)
+            },
+        }
+    }
 </script>
 
 <style>
-	@import url("./css/wm-icon.css");
+    @import url("./css/wm-icon.css");
 
-	.animationContent {
-		position: fixed;
-		width: 130rpx;
-		/* background-color: #5094f2; */
-		height: 100rpx;
-		bottom: 25%;
-		right: 0;
-		z-index: 10;
-		border-radius: 50rpx 0 0 50rpx;
-	}
+    .animationContent {
+        position: fixed;
+        width: 130 rpx;
+        /* background-color: #5094f2; */
+        height: 100 rpx;
+        bottom: 25%;
+        right: 0;
+        z-index: 10;
+        border-radius: 50 rpx 0 0 50 rpx;
+    }
 
-	.bottom-float {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100rpx;
-		height: 100rpx;
-		border-radius: 50rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		/* background-color: #5094f2; */
-		box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
-		transition: transform 0.4s;
-		transform: translateX(0) rotate(0deg);
-		color: #FFFFFF;
-	}
+    .bottom-float {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100 rpx;
+        height: 100 rpx;
+        border-radius: 50 rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* background-color: #5094f2; */
+        box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
+        transition: transform 0.4s;
+        transform: translateX(0) rotate(0deg);
+        color: #FFFFFF;
+    }
 
-	.moreIcon {
-		position: absolute;
-		line-height: 100rpx;
-		left: 8rpx;
-		top: 0;
-		font-size: 40rpx;
-	}
+    .moreIcon {
+        position: absolute;
+        line-height: 100 rpx;
+        left: 8 rpx;
+        top: 0;
+        font-size: 40 rpx;
+    }
 
-	.addIcon {
-		font-size: 66rpx;
-	}
+    .addIcon {
+        font-size: 66 rpx;
+    }
 </style>

mini-program/garden-wxapp/main.js

@@ -4,10 +4,12 @@ import store from '@/store';
 
 //引入uview组件库
 import uView from 'uview-ui';
+
 Vue.use(uView);
 
 //mescroll刷新组件
 import MescrollBody from "@/components/mescroll-body/mescroll-body.vue"
+
 Vue.component('mescroll-body', MescrollBody)
 
 //vuex
@@ -19,174 +21,182 @@ Vue.mixin(vuexStore);
 // Vue.use(router)
 
 //封装api
-import { api } from 'assets/http/api.js' 
+import {api} from 'assets/http/api.js'
+
 Vue.prototype.$api = api
 
 //封装缓存
 import simpleCache from "@/utils/cache.js"
+
 Vue.prototype.$cache = simpleCache
 
 //封装日期时间工具类
 import dateTime from 'utils/dateTime.js'
+
 Vue.prototype.$dateTime = dateTime
 
 //封装提示工具
 import dialog from 'utils/dialog.js'
+
 Vue.prototype.$dialog = dialog
 
 //全局变量
 import Global from './utils/global'
+
 Vue.prototype.$global = Global
 
 // 全局注入
 import Mixin from './utils/mixin'
+
 Vue.mixin(Mixin)
 
 // 微信函数封装
 import Mpi from './utils/mpi'
+
 Vue.prototype.$mpi = Mpi
 
 //引入工具类
 import util from 'utils/util.js'
+
 Vue.prototype.$util = util
 
 //校验文件
 import verify from 'utils/verify.js'
+
 Vue.prototype.$verify = verify
 
 //登陆类型
-Vue.prototype.$loginType={
-	STAFF:'staff',
-	ENTERPRISE:'enterprise',
-	AGENCY:'agency'
+Vue.prototype.$loginType = {
+    STAFF: 'staff',
+    ENTERPRISE: 'enterprise',
+    AGENCY: 'agency'
 }
-Vue.prototype.ColorList=['red','orange','yellow','olive','green','cyan','blue','purple','mauve', 'pink','brown']
+Vue.prototype.ColorList = ['red', 'orange', 'yellow', 'olive', 'green', 'cyan', 'blue', 'purple', 'mauve', 'pink', 'brown']
 
 //设备类型【通过前缀查找】
-Vue.prototype.$device_prefix={
-	SMOKE:'ctwing/smoke3',//烟感
-	GAS:'ctwing/gasmonitoring',//气感，燃气监控
+Vue.prototype.$device_prefix = {
+    SMOKE: 'ctwing/smoke3',//烟感
+    GAS: 'ctwing/gasmonitoring',//气感，燃气监控
 }
 //设备类型【通过设备类型查找】
-Vue.prototype.$device_type={ 
-	FIRE_HYDRANT:'960417', //消防栓
-	ELECTRIC_METER:'100030'//电表
+Vue.prototype.$device_type = {
+    FIRE_HYDRANT: '960417', //消防栓
+    ELECTRIC_METER: '100030'//电表
 }
 
 //员工消息模板
-Vue.prototype.$staffTmplIds=[
-	//审核结果通知。可用于员工认证审核和访客申请审核
-	'QeE-CxbJGd05fo0lGkVa33OLqYulzy0WLnUZg3DeRM8'
+Vue.prototype.$staffTmplIds = [
+    //审核结果通知。可用于员工认证审核和访客申请审核
+    'QeE-CxbJGd05fo0lGkVa33OLqYulzy0WLnUZg3DeRM8'
 ]
 
 //管理员消息模板
-Vue.prototype.$adminTmplIds=[
-	//设备告警通知
-	'xfsqjKLVz_P8dBIpdP91uGx709hE7b3k99gqm3wUwMU',
-	//访客申请开门通知
-	'3nd5TxKeVg9iZ5uQRi0R16D8RhCPQifUcfVUOo1ER1Y',
-	//员工认证通知
-	'enS3r9XGVNq0go-7l3dU17MONZwEVISqMvDLPmKcxFc'
+Vue.prototype.$adminTmplIds = [
+    //设备告警通知
+    'xfsqjKLVz_P8dBIpdP91uGx709hE7b3k99gqm3wUwMU',
+    //访客申请开门通知
+    '3nd5TxKeVg9iZ5uQRi0R16D8RhCPQifUcfVUOo1ER1Y',
+    //员工认证通知
+    'enS3r9XGVNq0go-7l3dU17MONZwEVISqMvDLPmKcxFc'
 ]
 
 
-
 //小程序版本
-Vue.prototype.$miniprogramState='formal'
+Vue.prototype.$miniprogramState = 'formal'
 // Vue.prototype.$miniprogramState='trial'
 
 //封装提示框
-Vue.prototype.$showModel = (content,isShowCancel=true,title='提示',)=>{
-    return new Promise((resolve,reject)=>{
+Vue.prototype.$showModel = (content, isShowCancel = true, title = '提示',) => {
+    return new Promise((resolve, reject) => {
         uni.showModal({
             title: title,
             content: content,
-			showCancel:isShowCancel,
-            success: (res)=>{
-				if (res.confirm) {
-					resolve(res)
-				} 
+            showCancel: isShowCancel,
+            success: (res) => {
+                if (res.confirm) {
+                    resolve(res)
+                }
             }
         });
     })
 }
 //封装提示框
-Vue.prototype.$showToast=function(title,type,position){
-	this.$refs.uToast.show({
-		title: title,
-		position:position||'top',
-		type: type ||'success'
-	})
+Vue.prototype.$showToast = function (title, type, position) {
+    this.$refs.uToast.show({
+        title: title,
+        position: position || 'top',
+        type: type || 'success'
+    })
 }
 
-Vue.prototype.$navigateBack=(delta=1)=>{
-	uni.navigateBack({
-		delta
-	})
+Vue.prototype.$navigateBack = (delta = 1) => {
+    uni.navigateBack({
+        delta
+    })
 }
 
 //是否认证登陆
-Vue.prototype.$isAuth=()=>{
-	return simpleCache.get('loginType')
+Vue.prototype.$isAuth = () => {
+    return simpleCache.get('loginType')
 }
 
 //创建时间
-Vue.prototype.$createDateTime=()=>{
-		var mydate = new Date();
-		var str = "" + mydate.getFullYear() + "-";
-	//判断小于是是直接小于10月就可以了
-		if(mydate.getMonth()<10){
-			str +="0"+ (mydate.getMonth() + 1) + "-";
-		}else{
-			str += (mydate.getMonth() + 1) + "-";
-		}
-	//判断小于是是直接小于10日就可以了
-		if(mydate.getDate()<10){
-			str += "0"+mydate.getDate() + " ";
-		}else{
-			str += mydate.getDate() + " ";
-		}
-		if(mydate.getHours()<10){
-			str += "0"+mydate.getHours() + ":";
-		}else{
-			str += mydate.getHours() + ":";
-		}
-		if(mydate.getMinutes()<10){
-			str += "0"+mydate.getMinutes() + ":";
-		}else{
-			str += mydate.getMinutes() + ":";
-		}
-		if(mydate.getSeconds()<10){
-			str += "0"+mydate.getSeconds();
-		}else{
-			str += mydate.getSeconds();
-		}
-		return str;	
+Vue.prototype.$createDateTime = () => {
+    var mydate = new Date();
+    var str = "" + mydate.getFullYear() + "-";
+    //判断小于是是直接小于10月就可以了
+    if (mydate.getMonth() < 10) {
+        str += "0" + (mydate.getMonth() + 1) + "-";
+    } else {
+        str += (mydate.getMonth() + 1) + "-";
+    }
+    //判断小于是是直接小于10日就可以了
+    if (mydate.getDate() < 10) {
+        str += "0" + mydate.getDate() + " ";
+    } else {
+        str += mydate.getDate() + " ";
+    }
+    if (mydate.getHours() < 10) {
+        str += "0" + mydate.getHours() + ":";
+    } else {
+        str += mydate.getHours() + ":";
+    }
+    if (mydate.getMinutes() < 10) {
+        str += "0" + mydate.getMinutes() + ":";
+    } else {
+        str += mydate.getMinutes() + ":";
+    }
+    if (mydate.getSeconds() < 10) {
+        str += "0" + mydate.getSeconds();
+    } else {
+        str += mydate.getSeconds();
+    }
+    return str;
 }
 
 //封装判空函数
-Vue.prototype.$isEmpty=function(value){ 
-	switch (typeof value) {
-		case 'undefined':
-			return true;
-		case 'string':
-			if(value=='undefined') return true
-			if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
-			break;
-		case 'boolean':
-			if (!value) return true;
-			break;
-		case 'number':
-			if (0 === value || isNaN(value)) return true;
-			break;
-		case 'object':
-			if (null === value || value.length === 0) return true;
-			for (var i in value) {
-				return false;
-			}
-			return true;
-	}
-	return false;
+Vue.prototype.$isEmpty = function (value) {
+    switch (typeof value) {
+        case 'undefined':
+            return true;
+        case 'string':
+            if (value == 'undefined') return true
+            if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
+            break;
+        case 'boolean':
+            if (!value) return true;
+            break;
+        case 'number':
+            if (0 === value || isNaN(value)) return true;
+            break;
+        case 'object':
+            if (null === value || value.length === 0) return true;
+            for (var i in value) {
+                return false;
+            }
+            return true;
+    }
+    return false;
 }
 
 Vue.config.productionTip = false
@@ -194,14 +204,14 @@ Vue.config.productionTip = false
 App.mpType = 'app'
 
 const app = new Vue({
-	store,
+    store,
     ...App
 })
 //v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
 // #ifdef H5
-	RouterMount(app,router,'#app')
+RouterMount(app, router, '#app')
 // #endif
 
 // #ifndef H5
-	app.$mount(); //为了兼容小程序及app端必须这样写才有效果
+app.$mount(); //为了兼容小程序及app端必须这样写才有效果
 // #endif

mini-program/garden-wxapp/manifest.json

@@ -1,89 +1,89 @@
 {
-    "name" : "garden-wxapp",
-    "appid" : "__UNI__EB99808",
-    "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
-    "transformPx" : false,
-    /* 5+App特有相关 */
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : true,
-            "autoclose" : true,
-            "delay" : 0
-        },
-        /* 模块配置 */
-        "modules" : {},
-        /* 应用发布信息 */
-        "distribute" : {
-            /* android打包配置 */
-            "android" : {
-                "permissions" : [
-                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
-                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
-                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
-                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
-                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
-                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-                ]
-            },
-            /* ios打包配置 */
-            "ios" : {},
-            /* SDK配置 */
-            "sdkConfigs" : {}
-        }
+  "name": "garden-wxapp",
+  "appid": "__UNI__EB99808",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  /* 5+App特有相关 */
+  "app-plus": {
+    "usingComponents": true,
+    "nvueCompiler": "uni-app",
+    "compilerVersion": 3,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
     },
-    /* 快应用特有相关 */
-    "quickapp" : {},
-    /* 小程序特有相关 */
-    "mp-weixin" : {
-        "appid" : "wxcfb2b48079ca59e4",
-        "setting" : {
-            "urlCheck" : false
-        },
-		"plugins": {
-		    "subway": {
-				"version": "1.0.10",
-				"provider": "wx6aaf93c4435fa1c1"
-		    }
-		},
-        "usingComponents" : true,
-        "permission" : {
-            "scope.userLocation" : {
-                "desc" : "你的位置信息将用于小程序定位"
-            }
-        }
-    },
-    "mp-alipay" : {
-        "usingComponents" : true
-    },
-    "mp-baidu" : {
-        "usingComponents" : true
+    /* 模块配置 */
+    "modules": {},
+    /* 应用发布信息 */
+    "distribute": {
+      /* android打包配置 */
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+        ]
+      },
+      /* ios打包配置 */
+      "ios": {},
+      /* SDK配置 */
+      "sdkConfigs": {}
+    }
+  },
+  /* 快应用特有相关 */
+  "quickapp": {},
+  /* 小程序特有相关 */
+  "mp-weixin": {
+    "appid": "wxcfb2b48079ca59e4",
+    "setting": {
+      "urlCheck": false
     },
-    "mp-toutiao" : {
-        "usingComponents" : true
+    "plugins": {
+      "subway": {
+        "version": "1.0.10",
+        "provider": "wx6aaf93c4435fa1c1"
+      }
     },
-    "uniStatistics" : {
-        "enable" : false
+    "usingComponents": true,
+    "permission": {
+      "scope.userLocation": {
+        "desc": "你的位置信息将用于小程序定位"
+      }
     }
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "uniStatistics": {
+    "enable": false
+  }
 }

mini-program/garden-wxapp/pages.json

@@ -1,759 +1,629 @@
 {
-	"easycom": {
-		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
-	},
-	"pages": [ 
-		{
-		    "path" : "pages/login/login",
-			"name":"login",
-		    "style" :                                                                                    
-		    {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-		        "navigationBarTitleText": "登陆",
-		        "enablePullDownRefresh": false
-		    }
-		    
-		},
-		{
-			"path": "pages/index/index",
-			"name":"index",
-			"style": {
-				"navigationStyle":"custom"
-			}
-		}
-		,
-		{
-            "path" : "pages/news/news",
-			"name":"news",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "园区动态",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mine/mine",
-			"name":"mine",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-				"navigationBarTitleText": "我的",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        
-        ,{
-            "path" : "pages/company/company",
-			"name":"company",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-                "navigationBarTitleText": "我的企业",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/auth/auth",
-			"name":"auth",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/test/test",
-			"name" : "test",
-            "style" :                                                                                    
-            {
-				// "navigationBarTextStyle":"white",
-				// "navigationBarBackgroundColor":"#5064eb",
-				"navigationStyle":"custom",
-				"navigationBarTitleText": "考勤打卡",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/test/test1",
-            "style" :                                                                                    
-            {
-				"navigationBarTitleText": "企业管理",
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mine/setting/setting",
-			"name":"setting",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mine/mine-info/mine-info",
-			"name":"mine-info",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "个人信息",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/news/detail",
-			"name":"newsDetail",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "文章详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my-camera/my-camera",
-			"name":"my-camera",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#000000",
-                "navigationBarTitleText": " ",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/my-temperature/my-temperature",
-			"name":"my-temperature",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "我的测温",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/my-temperature/deatil",
-			"name":"myTemperatureDetail",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "测温详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/access-record/access-record",
-			"name":"access-record",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-				"navigationBarTitleText": "通行记录",
-				"enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mine/feedback/feedback",
-			"name":"feedback",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "问题反馈",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mine/protocol/protocol",
-			"name":"protocol",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "暂未开发",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/device/device",
-			"name":"device",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-                "navigationBarTitleText": "门禁",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/news/list",
-			"name":"newsList",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "园区动态",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mine/editPhone/editPhone",
-			"name":"editPhone",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "更换手机",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/staffAudit/list",
-			"name":"staffAuditList",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-				"navigationBarTitleText": "员工审核",
-				"enablePullDownRefresh": false
-            }
-            
-        }
-       
-        ,{
-            "path" : "pages/index/staffAudit/detail",
-			"name":"staffAuditDetail",
-            "style" :                                                                                    
-            {
-                "navigationBarTextStyle":"white",
-                "navigationBarBackgroundColor":"#5064eb",
-                "navigationBarTitleText": "审核详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/staff-temperature/detail",
-			"name" :"staffTemperatureDetail",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "测温详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/notice/notice",
-			"name" :"notice",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "通知公告",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/notice/detail",
-			"name" :"noticeDetail",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "通知详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        
-        ,{
-            "path" : "pages/mine/changePass/changePass",
-			"name":"changePass",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "修改密码",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/myinfo/myinfo",
-			"name" :"myinfo",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-                "navigationBarTitleText": "我的资料",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/fire/list/list",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "烟感",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-      
-        ,{
-            "path" : "pages/index/fire/detail",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "设备详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/fire/alarm-record",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "报警记录",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/agency/agency",
-            "style" :                                                                                    
-            {
-				
-                "navigationBarTitleText": "园区信息",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/notice/list",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "公告管理",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/notice/add",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "发布公告",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/staff-temperature/list",
-            "style" :                                                                                    
-            {
-               "navigationBarTextStyle":"white",
-               "navigationBarBackgroundColor":"#5064eb",
-               "navigationBarTitleText": "测温记录",
-               "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mine/healthcode/healthcode",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "健康码",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/car/detail",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "记录详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/car/list",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "车辆记录",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/guest/guest",
-            "style" :                                                                                    
-            {
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/guest/records/records",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-                "navigationBarTitleText": "申请记录",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/guest/open-door/open-door",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-                "navigationBarTitleText": "门禁",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/car/my-car/my-car",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "我的车辆",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/car/my-car/add",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "添加车辆",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/car/car-manager/car-manager",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "车辆管理",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/agency/agency",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-				"navigationBarTitleText": "园区信息",
-				"enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/management/product/product",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "企业项目管理",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/management/product/add",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "添加",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/live/live",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "视频监控",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/subway/subway",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "地体图",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/enterprise/enterprise",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-                "navigationBarTitleText": "园区企业",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/test/test2",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/test/demo",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/enterprise/detail",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-                "navigationBarTitleText": "企业详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/enterprise/add",
-            "style" :                                                                                    
-            {
-				"navigationBarTextStyle":"white",
-				"navigationBarBackgroundColor":"#5064eb",
-                "navigationBarTitleText": "添加企业",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
-	"subPackages": [{
-		"root": "party",
-		"pages":[
-			{
-			    "path" : "pages/home/home",
-			    "style" : {
-					"navigationStyle":"custom"
-			    }
-			},
-			{
-			    "path" : "pages/activity/activity",
-			    "style" : {
-			    	"navigationStyle":"custom"
-			    }
-			},
-			{
-			    "path" : "pages/mine/mine",
-			    "style" : {
-					"navigationStyle":"custom"
-			    }
-			}
-		    ,{
-				"path" : "pages/party-branch/party-branch",
-				"style" :                                                                                    
-					{
-						"navigationBarTitleText": "党支部",
-						"enablePullDownRefresh": false
-					}
-			
-			}
-		    ,{
-				"path" : "pages/member/member",
-				"style" :                                                                                    
-					{
-						"navigationBarTitleText": "党员管理",
-						"enablePullDownRefresh": false
-					}
-			
-			}
-			,{
-				"path" : "pages/empty/empty",
-				"style" :                                                                                    
-					{
-						"navigationBarTitleText": "党员认证",
-						"enablePullDownRefresh": false
-					}
-			
-			}
-		    ,{
-				"path" : "pages/certification/certification",
-				"style" :                                                                                    
-					{
-						"navigationBarTextStyle":"white",
-						"navigationBarBackgroundColor":"#5064eb",
-						"navigationBarTitleText": "党员认证",
-						"enablePullDownRefresh": false
-					}
-                }
-                ,{
-                    "path" : "pages/party-meeting/party-meeting",
-                    "style" :                                                                                    
-						{
-							"navigationBarTextStyle":"white",
-							"navigationBarBackgroundColor":"#DE2910",
-							"navigationBarTitleText": "三会一课",
-							"enablePullDownRefresh": false
-						}
-                }
-                ,{
-                    "path" : "pages/party-meeting/detail",
-                    "style" :                                                                                    
-					{
-						"navigationBarTextStyle":"white",
-						"navigationBarBackgroundColor":"#DE2910",
-						"navigationBarTitleText": "详情",
-						"enablePullDownRefresh": false
-					}
-                }
-                ,{
-                    "path" : "pages/party-meeting/commentDetail",
-                    "style" :                                                                                    
-                {
-                    "navigationBarTitleText": "评论详情",
-                    "enablePullDownRefresh": false
-                }
-                
-                }
-                ,{
-                    "path" : "pages/infomation/infomation",
-                    "style" :                                                                                    
-						{
-							"navigationBarTextStyle":"white",
-							"navigationBarBackgroundColor":"#DE2910",
-							"navigationBarTitleText": "党内资讯",
-							"enablePullDownRefresh": false
-						}
-                
-                }
-                ,{
-                    "path" : "pages/infomation/detail",
-                    "style" :                                                                                    
-                {
-					"navigationBarTextStyle":"white",
-					"navigationBarBackgroundColor":"#DE2910",
-                    "navigationBarTitleText": "资讯详情",
-                    "enablePullDownRefresh": false
-                }
-                
-                }
-				,{
-                    "path" : "pages/infomation/commentDetail",
-                    "style" :                                                                                    
-                {
-                    "navigationBarTitleText": "评论详情",
-                    "enablePullDownRefresh": false
-                }
-                
-                }
-                ,{
-                    "path" : "pages/activity/detail",
-                    "style" :                                                                                    
-                {
-					"navigationBarTextStyle":"white",
-					"navigationBarBackgroundColor":"#DE2910",
-                    "navigationBarTitleText": "活动详情",
-                    "enablePullDownRefresh": false
-                }
-                
-                }
-                ,{
-                    "path" : "pages/activity/my-applied/my-applied",
-                    "style" :                                                                                    
-                {
-					"navigationBarTextStyle":"white",
-					"navigationBarBackgroundColor":"#DE2910",
-                    "navigationBarTitleText": "我报名的项目",
-                    "enablePullDownRefresh": false
-                }
-                
-                }
-            ]
-	},{
-		"root": "punch",
-		"pages":[
-			{
-			    "path" : "pages/index/index",
-			    "style" : {
-					"navigationStyle":"custom",
-					"navigationBarTitleText": "打卡",
-					"enablePullDownRefresh": false
-			    }
-			},
-			{
-			    "path" : "pages/punch-list/punch-list",
-			    "style" : {
-					"navigationStyle":"custom",
-					"enablePullDownRefresh": false
-				}
-			}
-		    ,{
-                    "path" : "pages/rule/rule",
-                    "style" :                                                                                    
-                {
-					"navigationBarTextStyle":"white",
-					"navigationBarBackgroundColor":"#5064eb",
-                    "navigationBarTitleText": "打卡规则",
-                    "enablePullDownRefresh": false
-                }
-                
-                }
-                ,{
-                    "path" : "pages/statistical/statistical",
-                    "style" :                                                                                    
-                {
-					"navigationBarTextStyle":"white",
-					"navigationBarBackgroundColor":"#5064eb",
-                    "navigationBarTitleText": "统计",
-                    "enablePullDownRefresh": false
-                }
-                
-                }
-            ]
-	  }
-	],
-	"preloadRule":{
-		  "pages/index/index": {
-			"network": "all",
-			"packages": ["party","punch"]
-		  }
-	},
-	"tabBar": {
-		  "list": [
-			{
-			  "pagePath": "pages/index/index"
-			},
-			{
-			  "pagePath":"pages/device/device"
-			},
-			{
-			  "pagePath": "pages/mine/mine"
-			}
-		  ]
-	 },
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "新邻园区",
-		"navigationBarBackgroundColor": "#FFFFFF",
-		"backgroundColor": "#F8F8F8",
-		"backgroundColorTop":"#FFFFFF"
-	}
+  "easycom": {
+    "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+  },
+  "pages": [
+    {
+      "path": "pages/login/login",
+      "name": "login",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "登陆",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/index",
+      "name": "index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/news/news",
+      "name": "news",
+      "style": {
+        "navigationBarTitleText": "园区动态",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/mine/mine",
+      "name": "mine",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "我的",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/company/company",
+      "name": "company",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "我的企业",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/auth/auth",
+      "name": "auth",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/test/test",
+      "name": "test",
+      "style": {
+        // "navigationBarTextStyle":"white",
+        // "navigationBarBackgroundColor":"#5064eb",
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "考勤打卡",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/test/test1",
+      "style": {
+        "navigationBarTitleText": "企业管理",
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/mine/setting/setting",
+      "name": "setting",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/mine/mine-info/mine-info",
+      "name": "mine-info",
+      "style": {
+        "navigationBarTitleText": "个人信息",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/news/detail",
+      "name": "newsDetail",
+      "style": {
+        "navigationBarTitleText": "文章详情",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/my-camera/my-camera",
+      "name": "my-camera",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#000000",
+        "navigationBarTitleText": " ",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/my-temperature/my-temperature",
+      "name": "my-temperature",
+      "style": {
+        "navigationBarTitleText": "我的测温",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/my-temperature/deatil",
+      "name": "myTemperatureDetail",
+      "style": {
+        "navigationBarTitleText": "测温详情",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/access-record/access-record",
+      "name": "access-record",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "通行记录",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/mine/feedback/feedback",
+      "name": "feedback",
+      "style": {
+        "navigationBarTitleText": "问题反馈",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/mine/protocol/protocol",
+      "name": "protocol",
+      "style": {
+        "navigationBarTitleText": "暂未开发",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/device/device",
+      "name": "device",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "门禁",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/news/list",
+      "name": "newsList",
+      "style": {
+        "navigationBarTitleText": "园区动态",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/mine/editPhone/editPhone",
+      "name": "editPhone",
+      "style": {
+        "navigationBarTitleText": "更换手机",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/staffAudit/list",
+      "name": "staffAuditList",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "员工审核",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/staffAudit/detail",
+      "name": "staffAuditDetail",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "审核详情",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/staff-temperature/detail",
+      "name": "staffTemperatureDetail",
+      "style": {
+        "navigationBarTitleText": "测温详情",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/notice/notice",
+      "name": "notice",
+      "style": {
+        "navigationBarTitleText": "通知公告",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/notice/detail",
+      "name": "noticeDetail",
+      "style": {
+        "navigationBarTitleText": "通知详情",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/mine/changePass/changePass",
+      "name": "changePass",
+      "style": {
+        "navigationBarTitleText": "修改密码",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/myinfo/myinfo",
+      "name": "myinfo",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "我的资料",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/fire/list/list",
+      "style": {
+        "navigationBarTitleText": "烟感",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/fire/detail",
+      "style": {
+        "navigationBarTitleText": "设备详情",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/fire/alarm-record",
+      "style": {
+        "navigationBarTitleText": "报警记录",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/agency/agency",
+      "style": {
+        "navigationBarTitleText": "园区信息",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/notice/list",
+      "style": {
+        "navigationBarTitleText": "公告管理",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/notice/add",
+      "style": {
+        "navigationBarTitleText": "发布公告",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/staff-temperature/list",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "测温记录",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/mine/healthcode/healthcode",
+      "style": {
+        "navigationBarTitleText": "健康码",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/car/detail",
+      "style": {
+        "navigationBarTitleText": "记录详情",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/car/list",
+      "style": {
+        "navigationBarTitleText": "车辆记录",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/guest/guest",
+      "style": {
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/guest/records/records",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "申请记录",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/guest/open-door/open-door",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "门禁",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/car/my-car/my-car",
+      "style": {
+        "navigationBarTitleText": "我的车辆",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/car/my-car/add",
+      "style": {
+        "navigationBarTitleText": "添加车辆",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/car/car-manager/car-manager",
+      "style": {
+        "navigationBarTitleText": "车辆管理",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/agency/agency",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "园区信息",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/management/product/product",
+      "style": {
+        "navigationBarTitleText": "企业项目管理",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/management/product/add",
+      "style": {
+        "navigationBarTitleText": "添加",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/live/live",
+      "style": {
+        "navigationBarTitleText": "视频监控",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/subway/subway",
+      "style": {
+        "navigationBarTitleText": "地体图",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/enterprise/enterprise",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "园区企业",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/test/test2",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/test/demo",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/enterprise/detail",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "企业详情",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/enterprise/add",
+      "style": {
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#5064eb",
+        "navigationBarTitleText": "添加企业",
+        "enablePullDownRefresh": false
+      }
+    }
+  ],
+  "subPackages": [
+    {
+      "root": "party",
+      "pages": [
+        {
+          "path": "pages/home/home",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "pages/activity/activity",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "pages/mine/mine",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "pages/party-branch/party-branch",
+          "style": {
+            "navigationBarTitleText": "党支部",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/member/member",
+          "style": {
+            "navigationBarTitleText": "党员管理",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/empty/empty",
+          "style": {
+            "navigationBarTitleText": "党员认证",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/certification/certification",
+          "style": {
+            "navigationBarTextStyle": "white",
+            "navigationBarBackgroundColor": "#5064eb",
+            "navigationBarTitleText": "党员认证",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/party-meeting/party-meeting",
+          "style": {
+            "navigationBarTextStyle": "white",
+            "navigationBarBackgroundColor": "#DE2910",
+            "navigationBarTitleText": "三会一课",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/party-meeting/detail",
+          "style": {
+            "navigationBarTextStyle": "white",
+            "navigationBarBackgroundColor": "#DE2910",
+            "navigationBarTitleText": "详情",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/party-meeting/commentDetail",
+          "style": {
+            "navigationBarTitleText": "评论详情",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/infomation/infomation",
+          "style": {
+            "navigationBarTextStyle": "white",
+            "navigationBarBackgroundColor": "#DE2910",
+            "navigationBarTitleText": "党内资讯",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/infomation/detail",
+          "style": {
+            "navigationBarTextStyle": "white",
+            "navigationBarBackgroundColor": "#DE2910",
+            "navigationBarTitleText": "资讯详情",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/infomation/commentDetail",
+          "style": {
+            "navigationBarTitleText": "评论详情",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/activity/detail",
+          "style": {
+            "navigationBarTextStyle": "white",
+            "navigationBarBackgroundColor": "#DE2910",
+            "navigationBarTitleText": "活动详情",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/activity/my-applied/my-applied",
+          "style": {
+            "navigationBarTextStyle": "white",
+            "navigationBarBackgroundColor": "#DE2910",
+            "navigationBarTitleText": "我报名的项目",
+            "enablePullDownRefresh": false
+          }
+        }
+      ]
+    },
+    {
+      "root": "punch",
+      "pages": [
+        {
+          "path": "pages/index/index",
+          "style": {
+            "navigationStyle": "custom",
+            "navigationBarTitleText": "打卡",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/punch-list/punch-list",
+          "style": {
+            "navigationStyle": "custom",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/rule/rule",
+          "style": {
+            "navigationBarTextStyle": "white",
+            "navigationBarBackgroundColor": "#5064eb",
+            "navigationBarTitleText": "打卡规则",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "pages/statistical/statistical",
+          "style": {
+            "navigationBarTextStyle": "white",
+            "navigationBarBackgroundColor": "#5064eb",
+            "navigationBarTitleText": "统计",
+            "enablePullDownRefresh": false
+          }
+        }
+      ]
+    }
+  ],
+  "preloadRule": {
+    "pages/index/index": {
+      "network": "all",
+      "packages": [
+        "party",
+        "punch"
+      ]
+    }
+  },
+  "tabBar": {
+    "list": [
+      {
+        "pagePath": "pages/index/index"
+      },
+      {
+        "pagePath": "pages/device/device"
+      },
+      {
+        "pagePath": "pages/mine/mine"
+      }
+    ]
+  },
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "新邻园区",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "backgroundColor": "#F8F8F8",
+    "backgroundColorTop": "#FFFFFF"
+  }
 }

mini-program/garden-wxapp/pages/agency/agency.vue

@@ -1,82 +1,84 @@
 <template>
-	<view class="content">
-		<view class="nav-top" style="position: fixed;top: 0;width: 100%;z-index: 99999;margin-top: -40rpx;">
-			<scroll-view  scroll-x class="base-bg-color nav padding-top-30" scroll-with-animation >
-				<view  class="cu-item  text-white" :class="index==current?'checked':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect(index)" >
-					{{item}}
-				</view>
-			</scroll-view>
-		</view>
-		<view class="" :style="{marginTop:navHeight}">
-			<agency-info  v-show="current==0"></agency-info>
-			<data-service v-show="current==1"></data-service>
-			<fire-service style="z-index: 99;" v-show="current==2"></fire-service>
-		</view>
-	</view>
+    <view class="content">
+        <view class="nav-top" style="position: fixed;top: 0;width: 100%;z-index: 99999;margin-top: -40rpx;">
+            <scroll-view scroll-x class="base-bg-color nav padding-top-30" scroll-with-animation>
+                <view class="cu-item  text-white" :class="index==current?'checked':''" v-for="(item,index) in tabList"
+                      :key="index" @tap="tabSelect(index)">
+                    {{item}}
+                </view>
+            </scroll-view>
+        </view>
+        <view class="" :style="{marginTop:navHeight}">
+            <agency-info v-show="current==0"></agency-info>
+            <data-service v-show="current==1"></data-service>
+            <fire-service style="z-index: 99;" v-show="current==2"></fire-service>
+        </view>
+    </view>
 </template>
 
 <script>
-import agencyInfo from "./comps/agency-info.vue"
-import dataService from "./comps/data-service.vue"
-import fireService from "./comps/fire-service.vue"
-export default {
-	components:{
-		agencyInfo,
-		dataService,
-		fireService
-	},
-	data() {
-		return {
-			navHeight:'',
-			current:0,
-			tabList:['园区概况','数据统计','消防统计'],
-		};
-	},
-	onLoad(options) {
-		if (options.current) {
-			this.current=options.current
-		}
-	},
-	onReady() {
-		this.$u.getRect('.nav-top').then(res => {
-			this.navHeight=res.height-uni.upx2px(40)+'px'
-		})
-	},
-	methods: {
-		tabSelect(index){
-			this.current=index
-		}
-	}
-};
+    import agencyInfo from "./comps/agency-info.vue"
+    import dataService from "./comps/data-service.vue"
+    import fireService from "./comps/fire-service.vue"
+
+    export default {
+        components: {
+            agencyInfo,
+            dataService,
+            fireService
+        },
+        data() {
+            return {
+                navHeight: '',
+                current: 0,
+                tabList: ['园区概况', '数据统计', '消防统计'],
+            };
+        },
+        onLoad(options) {
+            if (options.current) {
+                this.current = options.current
+            }
+        },
+        onReady() {
+            this.$u.getRect('.nav-top').then(res => {
+                this.navHeight = res.height - uni.upx2px(40) + 'px'
+            })
+        },
+        methods: {
+            tabSelect(index) {
+                this.current = index
+            }
+        }
+    };
 </script>
 
-<style lang="scss" >
-	page{
-		background-color: #FFFFFF;
-	}
-	
-	.line-groove {
-		height: 8rpx;
-		// border-top: 10rpx groove $base-color;
-		background: repeating-radial-gradient(#e9685e, #ffaa00, #0055ff 10%);
-	}
-	
-	.cu-item1{
-		height: 80rpx;
-		line-height: 80rpx;
-		display: inline-block;
-		margin: 0 10rpx;
-		padding: 0 20rpx;
-	}
-	
-	.checked{
-		font-weight: 800;
-		font-size: 42rpx;
-	}
-	
-	.top{
-		height: 100rpx;
-		background-color: $base-color;
-	}
+<style lang="scss">
+    page {
+        background-color: #FFFFFF;
+    }
+
+    .line-groove {
+        height: 8 rpx;
+        // border-top: 10rpx groove $base-color;
+        background: repeating-radial-gradient(#e9685e, #ffaa00, #0055ff 10%);
+    }
+
+    .cu-item1 {
+        height: 80 rpx;
+        line-height: 80 rpx;
+        display: inline-block;
+        margin: 0 10 rpx;
+        padding: 0 20 rpx;
+    }
+
+    .checked {
+        font-weight: 800;
+        font-size: 42 rpx;
+    }
+
+    .top {
+        height: 100 rpx;
+        background-color: $base-color;
+    }
 
 </style>

mini-program/garden-wxapp/pages/agency/comps/agency-info.vue

@@ -1,589 +1,596 @@
 <template>
-	<view>
-		<view class="container" style="z-index: 999999;">
-			<view class="meteor"></view>
-			<view class="meteor"></view>
-			<view class="meteor"></view>
-			<view class="meteor"></view>
-			<view class="meteor"></view>
-		</view>
-		
-		<swiper   class="screen-swiper square-dot "  :indicator-dots="true" :circular="true"
-		 :autoplay="true" interval="5000" duration="500">
-			<swiper-item v-for="(item,index) in bannerList" :key="index">
-				<image   :src="item.banners" mode="aspectFill" ></image>
-			</swiper-item>
-		</swiper>
-		
-		<view class="card">
-			<view class="flex flex-direction justify-center padding-left-20">
-				<text class="text-bold agency-name  text-lg" style="padding-bottom: 12rpx;">{{detailData.agencyName}}</text>
-			</view>
-		</view>
-		<view class="bg-white text-black">
-			<view class="flex" style="padding:20rpx 30rpx 0;">
-				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../../static/icon/tag1.png" mode=""></image>
-				<text class="text-lg  padding-left-10" >其他信息</text>
-			</view>
-			<view class="cu-list menu text-df padding-top-20">
-				<view class="cu-item">
-					<view class="content">
-						<text class="cuIcon-profilefill base-color" style="font-size: 32rpx;"></text>
-						<text class="">法定代表人</text>
-					</view>
-					<view class="action">
-						<text>{{detailData.personName}}</text>
-					</view>
-				</view>
-				
-				<view class="cu-item">
-					<view class="content">
-						<text class="cuIcon-mobilefill text-bold base-color" style="font-size: 32rpx;"></text>
-						<text class="">联系方式</text>
-					</view>
-					<view class="action">
-						<text>{{detailData.personPhone}}</text>
-					</view>
-				</view>
-			</view>
-			<view class="" style="padding: 20rpx 40rpx;">
-				<view class="">
-					<text class="cuIcon-locationfill base-color " style="margin-right: 20rpx;"></text>
-					公司地址：
-				</view>
-				<view class="text-cut-2 " style="padding: 20rpx 10rpx">
-					<text>{{detailData.address}}</text>
-				</view>
-			</view>
-		</view>
-	
-	</view>
+    <view>
+        <view class="container" style="z-index: 999999;">
+            <view class="meteor"></view>
+            <view class="meteor"></view>
+            <view class="meteor"></view>
+            <view class="meteor"></view>
+            <view class="meteor"></view>
+        </view>
+
+        <swiper class="screen-swiper square-dot " :indicator-dots="true" :circular="true"
+                :autoplay="true" interval="5000" duration="500">
+            <swiper-item v-for="(item,index) in bannerList" :key="index">
+                <image :src="item.banners" mode="aspectFill"></image>
+            </swiper-item>
+        </swiper>
+
+        <view class="card">
+            <view class="flex flex-direction justify-center padding-left-20">
+                <text class="text-bold agency-name  text-lg" style="padding-bottom: 12rpx;">{{detailData.agencyName}}
+                </text>
+            </view>
+        </view>
+        <view class="bg-white text-black">
+            <view class="flex" style="padding:20rpx 30rpx 0;">
+                <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                       src="../../../static/icon/tag1.png" mode=""></image>
+                <text class="text-lg  padding-left-10">其他信息</text>
+            </view>
+            <view class="cu-list menu text-df padding-top-20">
+                <view class="cu-item">
+                    <view class="content">
+                        <text class="cuIcon-profilefill base-color" style="font-size: 32rpx;"></text>
+                        <text class="">法定代表人</text>
+                    </view>
+                    <view class="action">
+                        <text>{{detailData.personName}}</text>
+                    </view>
+                </view>
+
+                <view class="cu-item">
+                    <view class="content">
+                        <text class="cuIcon-mobilefill text-bold base-color" style="font-size: 32rpx;"></text>
+                        <text class="">联系方式</text>
+                    </view>
+                    <view class="action">
+                        <text>{{detailData.personPhone}}</text>
+                    </view>
+                </view>
+            </view>
+            <view class="" style="padding: 20rpx 40rpx;">
+                <view class="">
+                    <text class="cuIcon-locationfill base-color " style="margin-right: 20rpx;"></text>
+                    公司地址：
+                </view>
+                <view class="text-cut-2 " style="padding: 20rpx 10rpx">
+                    <text>{{detailData.address}}</text>
+                </view>
+            </view>
+        </view>
+
+    </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				detailData:{},
-				bannerList:[]
-			}
-		},
-		created() {
-			this.fetchBanner()
-			this.fetchDeatilData()
-		},
-		methods: {
-			fetchBanner(){
-				let params={
-					tenantId:this.$cache.get('agencyTenantId')
-				}
-				this.$api.banner.page(params).then(res=>{
-					if (!this.$isEmpty(res.data.records)) {
-						this.bannerList=res.data.records
-					}
-				})
-			},
-			fetchDeatilData(){
-				let params={
-					id:this.$cache.get('agencyId')
-				}
-				this.$api.agency.page(params).then(res=>{
-					this.detailData=res.data[0]
-				})
-			},
-		}
-	}
+    export default {
+        data() {
+            return {
+                detailData: {},
+                bannerList: []
+            }
+        },
+        created() {
+            this.fetchBanner()
+            this.fetchDeatilData()
+        },
+        methods: {
+            fetchBanner() {
+                let params = {
+                    tenantId: this.$cache.get('agencyTenantId')
+                }
+                this.$api.banner.page(params).then(res => {
+                    if (!this.$isEmpty(res.data.records)) {
+                        this.bannerList = res.data.records
+                    }
+                })
+            },
+            fetchDeatilData() {
+                let params = {
+                    id: this.$cache.get('agencyId')
+                }
+                this.$api.agency.page(params).then(res => {
+                    this.detailData = res.data[0]
+                })
+            },
+        }
+    }
 </script>
 
 <style lang="scss">
-	page{
-		background-color: #FFFFFF;
-	}
-
-	@keyframes typing {
-		from {
-			width: 0;
-		}
-	}
-	
-	.agency-name {
-		line-height: 100rpx;
-		width: 750rpx;
-		font-size: 35rpx;
-		font-weight: bold;
-		overflow: hidden;
-		white-space: nowrap;
-		animation: typing 8s;
-	}
-	
-	.card{
-		padding: 20rpx;
-		background-color: #FFFFFF;
-		margin: 10rpx;
-		border-radius: 10rpx;
-		display: flex;
-		box-shadow: 0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
-		image{
-			border: 1rpx solid #f1f1f1;
-			width:100rpx;
-			height: 100rpx;
-			border-radius: 50%;
-		}
-	}
-	
-	.desc{
-		background-color: #FFFFFF;
-		padding:40rpx 30rpx;
-		.sub-title{
-			padding-top: 40rpx;
-			font-size: 28rpx;
-			line-height: 50rpx;
-		}
-	}
-	
-	.history{
-		background-color: #FFFFFF;
-		margin-top: 20rpx;
-		padding: 40rpx 20rpx 20rpx 50rpx;
-	}
-	
-	.top{
-		padding-bottom: 30rpx;
-		display: flex;
-		justify-content: space-between;
-	}
-	
-	.address{
-		margin-top: 20rpx;
-		background-color: #FFFFFF;
-		padding: 30rpx;
-		
-		
-		.item{
-			padding-top: 40rpx;
-			.sub-address{
-				padding-left: 70rpx;font-size: 26rpx;color: #bababa;
-			}
-		}
-	}
-	
-	
-	.u-node {
-			width: 44rpx;
-			height: 44rpx;
-			border-radius: 100rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			background: #d0d0d0;
-		}
-		
-		.u-order-title {
-			color: #333333;
-			font-weight: bold;
-			font-size: 32rpx;
-		}
-		
-		.u-order-desc {
-			padding-top: 20rpx;
-			color: #8d8d8d;
-			font-size: 26rpx;
-			line-height: 48rpx;
-			margin-bottom: 6rpx;
-		}
-		
-		.u-order-time {
-			color: rgb(200, 200, 200);
-			font-size: 26rpx;
-		}
-		
-	// 流星
-	.container {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		-webkit-transform: rotate(45deg);
-		transform: rotateZ(45deg);
-		-webkit-animation: sky 200000ms linear infinite;
-		animation: sky 200000ms linear infinite;
-	}
-	
-	.meteor {
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		height: 2px;
-		background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
-		border-radius: 999px;
-		-webkit-filter: drop-shadow(0 0 6px #699bff);
-		filter: drop-shadow(0 0 6px #699bff);
-		-webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
-		animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
-	}
-	
-	.meteor::before,
-	.meteor::after {
-		content: '';
-		position: absolute;
-		top: calc(50% - 1px);
-		right: 0;
-		height: 2px;
-		background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
-		-webkit-transform: translateX(50%) rotateZ(45deg);
-		transform: translateX(50%) rotateZ(45deg);
-		border-radius: 100%;
-		-webkit-animation: shining 3000ms ease-in-out infinite;
-		animation: shining 3000ms ease-in-out infinite;
-	}
-	
-	.meteor::after {
-		-webkit-transform: translateX(50%) rotateZ(-45deg);
-		transform: translateX(50%) rotateZ(-45deg);
-	}
-	
-	/* 1 */
-	.meteor:nth-child(1) {
-		top: calc(50% - 185px);
-		left: calc(50% - 150px);
-		-webkit-animation-delay: 8888ms;
-		animation-delay: 8888ms;
-	}
-	
-	.meteor:nth-child(1)::before,
-	.meteor:nth-child(1)::after,
-	.meteor:nth-child(1)::after {
-		-webkit-animation-delay: 8888ms;
-		animation-delay: 8888ms;
-	}
-	
-	/* 2 */
-	.meteor:nth-child(2) {
-		top: calc(50% - 50px);
-		left: calc(50% - 180px);
-		-webkit-animation-delay: 9288ms;
-		animation-delay: 9288ms;
-	}
-	
-	.meteor:nth-child(2)::before,
-	.meteor:nth-child(2)::after,
-	.meteor:nth-child(2)::after {
-		-webkit-animation-delay: 9288ms;
-		animation-delay: 9288ms;
-	}
-	
-	.meteor:nth-child(3) {
-		top: calc(50% - 145px);
-		left: calc(50% - 135px);
-		-webkit-animation-delay: 8600ms;
-		animation-delay: 8600ms;
-	}
-	
-	.meteor:nth-child(3)::before,
-	.meteor:nth-child(3)::after,
-	.meteor:nth-child(3)::after {
-		-webkit-animation-delay: 8600ms;
-		animation-delay: 8600ms;
-	}
-	
-	.meteor:nth-child(4) {
-		top: calc(50% - 78px);
-		left: calc(50% - 155px);
-		-webkit-animation-delay: 3288ms;
-		animation-delay: 3288ms;
-	}
-	
-	.meteor:nth-child(4)::before,
-	.meteor:nth-child(4)::after,
-	.meteor:nth-child(4)::after {
-		-webkit-animation-delay: 3288ms;
-		animation-delay: 3288ms;
-	}
-	
-	.meteor:nth-child(5) {
-		top: calc(50% - 183px);
-		left: calc(50% - 8px);
-		-webkit-animation-delay: 5588ms;
-		animation-delay: 5588ms;
-	}
-	
-	.meteor:nth-child(5)::before,
-	.meteor:nth-child(5)::after,
-	.meteor:nth-child(5)::after {
-		-webkit-animation-delay: 5588ms;
-		animation-delay: 5588ms;
-	}
-	
-	.meteor:nth-child(6) {
-		top: calc(50% - 30px);
-		left: calc(50% - 195px);
-		-webkit-animation-delay: 9388ms;
-		animation-delay: 9388ms;
-	}
-	
-	.meteor:nth-child(6)::before,
-	.meteor:nth-child(6)::after,
-	.meteor:nth-child(6)::after {
-		-webkit-animation-delay: 9388ms;
-		animation-delay: 9388ms;
-	}
-	
-	.meteor:nth-child(7) {
-		top: calc(50% - 95px);
-		left: calc(50% - 70px);
-		-webkit-animation-delay: 2588ms;
-		animation-delay: 2588ms;
-	}
-	
-	.meteor:nth-child(7)::before,
-	.meteor:nth-child(7)::after,
-	.meteor:nth-child(7)::after {
-		-webkit-animation-delay: 2588ms;
-		animation-delay: 2588ms;
-	}
-	
-	.meteor:nth-child(8) {
-		top: calc(50% - 60px);
-		left: calc(50% - 70px);
-		-webkit-animation-delay: 5288ms;
-		animation-delay: 5288ms;
-	}
-	
-	.meteor:nth-child(8)::before,
-	.meteor:nth-child(8)::after,
-	.meteor:nth-child(8)::after {
-		-webkit-animation-delay: 5288ms;
-		animation-delay: 5288ms;
-	}
-	
-	.meteor:nth-child(9) {
-		top: calc(50% - 75px);
-		left: calc(50% - 250px);
-		-webkit-animation-delay: 888ms;
-		animation-delay: 888ms;
-	}
-	
-	.meteor:nth-child(9)::before,
-	.meteor:nth-child(9)::after,
-	.meteor:nth-child(9)::after {
-		-webkit-animation-delay: 888ms;
-		animation-delay: 888ms;
-	}
-	
-	.meteor:nth-child(9) {
-		top: calc(50% - 76px);
-		left: calc(50% - 240px);
-		-webkit-animation-delay: 2388ms;
-		animation-delay: 2388ms;
-	}
-	
-	.meteor:nth-child(9)::before,
-	.meteor:nth-child(9)::after,
-	.meteor:nth-child(9)::after {
-		-webkit-animation-delay: 2388ms;
-		animation-delay: 2388ms;
-	}
-	
-	.meteor:nth-child(10) {
-		top: calc(50% - 85px);
-		left: calc(50% - 6px);
-		-webkit-animation-delay: 3588ms;
-		animation-delay: 3588ms;
-	}
-	
-	.meteor:nth-child(10)::before,
-	.meteor:nth-child(10)::after,
-	.meteor:nth-child(10)::after {
-		-webkit-animation-delay: 3588ms;
-		animation-delay: 3588ms;
-	}
-	
-	.meteor:nth-child(11) {
-		top: calc(50% - 135px);
-		left: calc(50% - 260px);
-		-webkit-animation-delay: 2888ms;
-		animation-delay: 2888ms;
-	}
-	
-	.meteor:nth-child(11)::before,
-	.meteor:nth-child(11)::after,
-	.meteor:nth-child(11)::after {
-		-webkit-animation-delay: 2888ms;
-		animation-delay: 2888ms;
-	}
-	
-	.meteor:nth-child(12) {
-		top: calc(50% - 15px);
-		left: calc(50% - 8px);
-		-webkit-animation-delay: 388ms;
-		animation-delay: 388ms;
-	}
-	
-	.meteor:nth-child(12)::before,
-	.meteor:nth-child(12)::after,
-	.meteor:nth-child(12)::after {
-		-webkit-animation-delay: 388ms;
-		animation-delay: 388ms;
-	}
-	
-	.meteor:nth-child(13) {
-		top: calc(50% - 155px);
-		left: calc(50% - 50px);
-		-webkit-animation-delay: 7288ms;
-		animation-delay: 7288ms;
-	}
-	
-	.meteor:nth-child(13)::before,
-	.meteor:nth-child(13)::after,
-	.meteor:nth-child(13)::after {
-		-webkit-animation-delay: 7288ms;
-		animation-delay: 7288ms;
-	}
-	
-	.meteor:nth-child(14) {
-		top: calc(50% - 28px);
-		left: calc(50% - 80px);
-		-webkit-animation-delay: 8888ms;
-		animation-delay: 8888ms;
-	}
-	
-	.meteor:nth-child(14)::before,
-	.meteor:nth-child(14)::after,
-	.meteor:nth-child(14)::after {
-		-webkit-animation-delay: 8888ms;
-		animation-delay: 8888ms;
-	}
-	
-	.meteor:nth-child(15) {
-		top: calc(50% - 35px);
-		left: calc(50% - 200px);
-		-webkit-animation-delay: 7588ms;
-		animation-delay: 7588ms;
-	}
-	
-	.meteor:nth-child(15)::before,
-	.meteor:nth-child(15)::after,
-	.meteor:nth-child(15)::after {
-		-webkit-animation-delay: 7588ms;
-		animation-delay: 7588ms;
-	}
-	
-	.meteor:nth-child(16) {
-		top: calc(50% - 40px);
-		left: calc(50% - 250px);
-		-webkit-animation-delay: 1888ms;
-		animation-delay: 1888ms;
-	}
-	
-	.meteor:nth-child(16)::before,
-	.meteor:nth-child(16)::after,
-	.meteor:nth-child(16)::after {
-		-webkit-animation-delay: 1888ms;
-		animation-delay: 1888ms;
-	}
-	
-	
-	@-webkit-keyframes tail {
-		0% {
-			width: 0;
-		}
-	
-		30% {
-			width: 100px;
-		}
-	
-		100% {
-			width: 0;
-		}
-	}
-	
-	@keyframes tail {
-		0% {
-			width: 0;
-		}
-	
-		30% {
-			width: 100px;
-		}
-	
-		100% {
-			width: 0;
-		}
-	}
-	
-	@-webkit-keyframes shining {
-		0% {
-			width: 0;
-		}
-	
-		50% {
-			width: 30px;
-		}
-	
-		1000% {
-			width: 0;
-		}
-	}
-	
-	@keyframes shining {
-		0% {
-			width: 0;
-		}
-	
-		50% {
-			width: 30px;
-		}
-	
-		1000% {
-			width: 0;
-		}
-	}
-	
-	@-webkit-keyframes shooting {
-		0% {
-			-webkit-transform: translateX(0);
-			transform: translateX(0);
-		}
-	
-		100% {
-			-webkit-transform: translateX(300px);
-			transform: translateX(300px);
-		}
-	}
-	
-	@keyframes shooting {
-		0% {
-			-webkit-transform: translateX(0);
-			transform: translateX(0);
-		}
-	
-		100% {
-			-webkit-transform: translateX(300px);
-			transform: translateX(300px);
-		}
-	}
-	
-	@-webkit-keyframes sky {
-		0% {
-			-webkit-transform: rotate(45deg);
-			transform: rotate(45deg);
-		}
-	
-		100% {
-			-webkit-transform: rotate(405deg);
-			transform: rotate(405deg);
-		}
-	}
-	
-	@keyframes sky {
-		0% {
-			-webkit-transform: rotate(45deg);
-			transform: rotate(45deg);
-		}
-	
-		100% {
-			-webkit-transform: rotate(405deg);
-			transform: rotate(405deg);
-		}
-	}
-		
+    page {
+        background-color: #FFFFFF;
+    }
+
+    @keyframes typing {
+        from {
+            width: 0;
+        }
+    }
+
+    .agency-name {
+        line-height: 100 rpx;
+        width: 750 rpx;
+        font-size: 35 rpx;
+        font-weight: bold;
+        overflow: hidden;
+        white-space: nowrap;
+        animation: typing 8s;
+    }
+
+    .card {
+        padding: 20 rpx;
+        background-color: #FFFFFF;
+        margin: 10 rpx;
+        border-radius: 10 rpx;
+        display: flex;
+        box-shadow: 0 10 rpx rgba(248, 248, 248, .9), -10rpx 0 rpx rgba(248, 248, 248, .9), 10 rpx 0 rpx rgba(248, 248, 248, .9);
+
+        image {
+            border: 1 rpx solid #f1f1f1;
+            width: 100 rpx;
+            height: 100 rpx;
+            border-radius: 50%;
+        }
+    }
+
+    .desc {
+        background-color: #FFFFFF;
+        padding: 40 rpx 30 rpx;
+
+        .sub-title {
+            padding-top: 40 rpx;
+            font-size: 28 rpx;
+            line-height: 50 rpx;
+        }
+    }
+
+    .history {
+        background-color: #FFFFFF;
+        margin-top: 20 rpx;
+        padding: 40 rpx 20 rpx 20 rpx 50 rpx;
+    }
+
+    .top {
+        padding-bottom: 30 rpx;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .address {
+        margin-top: 20 rpx;
+        background-color: #FFFFFF;
+        padding: 30 rpx;
+
+
+        .item {
+            padding-top: 40 rpx;
+
+            .sub-address {
+                padding-left: 70 rpx;
+                font-size: 26 rpx;
+                color: #bababa;
+            }
+        }
+    }
+
+
+    .u-node {
+        width: 44 rpx;
+        height: 44 rpx;
+        border-radius: 100 rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #d0d0d0;
+    }
+
+    .u-order-title {
+        color: #333333;
+        font-weight: bold;
+        font-size: 32 rpx;
+    }
+
+    .u-order-desc {
+        padding-top: 20 rpx;
+        color: #8d8d8d;
+        font-size: 26 rpx;
+        line-height: 48 rpx;
+        margin-bottom: 6 rpx;
+    }
+
+    .u-order-time {
+        color: rgb(200, 200, 200);
+        font-size: 26 rpx;
+    }
+
+    // 流星
+    .container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        -webkit-transform: rotate(45deg);
+        transform: rotateZ(45deg);
+        -webkit-animation: sky 200000ms linear infinite;
+        animation: sky 200000ms linear infinite;
+    }
+
+    .meteor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        height: 2px;
+        background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
+        border-radius: 999px;
+        -webkit-filter: drop-shadow(0 0 6px #699bff);
+        filter: drop-shadow(0 0 6px #699bff);
+        -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
+        animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
+    }
+
+    .meteor::before,
+    .meteor::after {
+        content: '';
+        position: absolute;
+        top: calc(50% - 1px);
+        right: 0;
+        height: 2px;
+        background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
+        -webkit-transform: translateX(50%) rotateZ(45deg);
+        transform: translateX(50%) rotateZ(45deg);
+        border-radius: 100%;
+        -webkit-animation: shining 3000ms ease-in-out infinite;
+        animation: shining 3000ms ease-in-out infinite;
+    }
+
+    .meteor::after {
+        -webkit-transform: translateX(50%) rotateZ(-45deg);
+        transform: translateX(50%) rotateZ(-45deg);
+    }
+
+    /* 1 */
+    .meteor:nth-child(1) {
+        top: calc(50% - 185px);
+        left: calc(50% - 150px);
+        -webkit-animation-delay: 8888ms;
+        animation-delay: 8888ms;
+    }
+
+    .meteor:nth-child(1)::before,
+    .meteor:nth-child(1)::after,
+    .meteor:nth-child(1)::after {
+        -webkit-animation-delay: 8888ms;
+        animation-delay: 8888ms;
+    }
+
+    /* 2 */
+    .meteor:nth-child(2) {
+        top: calc(50% - 50px);
+        left: calc(50% - 180px);
+        -webkit-animation-delay: 9288ms;
+        animation-delay: 9288ms;
+    }
+
+    .meteor:nth-child(2)::before,
+    .meteor:nth-child(2)::after,
+    .meteor:nth-child(2)::after {
+        -webkit-animation-delay: 9288ms;
+        animation-delay: 9288ms;
+    }
+
+    .meteor:nth-child(3) {
+        top: calc(50% - 145px);
+        left: calc(50% - 135px);
+        -webkit-animation-delay: 8600ms;
+        animation-delay: 8600ms;
+    }
+
+    .meteor:nth-child(3)::before,
+    .meteor:nth-child(3)::after,
+    .meteor:nth-child(3)::after {
+        -webkit-animation-delay: 8600ms;
+        animation-delay: 8600ms;
+    }
+
+    .meteor:nth-child(4) {
+        top: calc(50% - 78px);
+        left: calc(50% - 155px);
+        -webkit-animation-delay: 3288ms;
+        animation-delay: 3288ms;
+    }
+
+    .meteor:nth-child(4)::before,
+    .meteor:nth-child(4)::after,
+    .meteor:nth-child(4)::after {
+        -webkit-animation-delay: 3288ms;
+        animation-delay: 3288ms;
+    }
+
+    .meteor:nth-child(5) {
+        top: calc(50% - 183px);
+        left: calc(50% - 8px);
+        -webkit-animation-delay: 5588ms;
+        animation-delay: 5588ms;
+    }
+
+    .meteor:nth-child(5)::before,
+    .meteor:nth-child(5)::after,
+    .meteor:nth-child(5)::after {
+        -webkit-animation-delay: 5588ms;
+        animation-delay: 5588ms;
+    }
+
+    .meteor:nth-child(6) {
+        top: calc(50% - 30px);
+        left: calc(50% - 195px);
+        -webkit-animation-delay: 9388ms;
+        animation-delay: 9388ms;
+    }
+
+    .meteor:nth-child(6)::before,
+    .meteor:nth-child(6)::after,
+    .meteor:nth-child(6)::after {
+        -webkit-animation-delay: 9388ms;
+        animation-delay: 9388ms;
+    }
+
+    .meteor:nth-child(7) {
+        top: calc(50% - 95px);
+        left: calc(50% - 70px);
+        -webkit-animation-delay: 2588ms;
+        animation-delay: 2588ms;
+    }
+
+    .meteor:nth-child(7)::before,
+    .meteor:nth-child(7)::after,
+    .meteor:nth-child(7)::after {
+        -webkit-animation-delay: 2588ms;
+        animation-delay: 2588ms;
+    }
+
+    .meteor:nth-child(8) {
+        top: calc(50% - 60px);
+        left: calc(50% - 70px);
+        -webkit-animation-delay: 5288ms;
+        animation-delay: 5288ms;
+    }
+
+    .meteor:nth-child(8)::before,
+    .meteor:nth-child(8)::after,
+    .meteor:nth-child(8)::after {
+        -webkit-animation-delay: 5288ms;
+        animation-delay: 5288ms;
+    }
+
+    .meteor:nth-child(9) {
+        top: calc(50% - 75px);
+        left: calc(50% - 250px);
+        -webkit-animation-delay: 888ms;
+        animation-delay: 888ms;
+    }
+
+    .meteor:nth-child(9)::before,
+    .meteor:nth-child(9)::after,
+    .meteor:nth-child(9)::after {
+        -webkit-animation-delay: 888ms;
+        animation-delay: 888ms;
+    }
+
+    .meteor:nth-child(9) {
+        top: calc(50% - 76px);
+        left: calc(50% - 240px);
+        -webkit-animation-delay: 2388ms;
+        animation-delay: 2388ms;
+    }
+
+    .meteor:nth-child(9)::before,
+    .meteor:nth-child(9)::after,
+    .meteor:nth-child(9)::after {
+        -webkit-animation-delay: 2388ms;
+        animation-delay: 2388ms;
+    }
+
+    .meteor:nth-child(10) {
+        top: calc(50% - 85px);
+        left: calc(50% - 6px);
+        -webkit-animation-delay: 3588ms;
+        animation-delay: 3588ms;
+    }
+
+    .meteor:nth-child(10)::before,
+    .meteor:nth-child(10)::after,
+    .meteor:nth-child(10)::after {
+        -webkit-animation-delay: 3588ms;
+        animation-delay: 3588ms;
+    }
+
+    .meteor:nth-child(11) {
+        top: calc(50% - 135px);
+        left: calc(50% - 260px);
+        -webkit-animation-delay: 2888ms;
+        animation-delay: 2888ms;
+    }
+
+    .meteor:nth-child(11)::before,
+    .meteor:nth-child(11)::after,
+    .meteor:nth-child(11)::after {
+        -webkit-animation-delay: 2888ms;
+        animation-delay: 2888ms;
+    }
+
+    .meteor:nth-child(12) {
+        top: calc(50% - 15px);
+        left: calc(50% - 8px);
+        -webkit-animation-delay: 388ms;
+        animation-delay: 388ms;
+    }
+
+    .meteor:nth-child(12)::before,
+    .meteor:nth-child(12)::after,
+    .meteor:nth-child(12)::after {
+        -webkit-animation-delay: 388ms;
+        animation-delay: 388ms;
+    }
+
+    .meteor:nth-child(13) {
+        top: calc(50% - 155px);
+        left: calc(50% - 50px);
+        -webkit-animation-delay: 7288ms;
+        animation-delay: 7288ms;
+    }
+
+    .meteor:nth-child(13)::before,
+    .meteor:nth-child(13)::after,
+    .meteor:nth-child(13)::after {
+        -webkit-animation-delay: 7288ms;
+        animation-delay: 7288ms;
+    }
+
+    .meteor:nth-child(14) {
+        top: calc(50% - 28px);
+        left: calc(50% - 80px);
+        -webkit-animation-delay: 8888ms;
+        animation-delay: 8888ms;
+    }
+
+    .meteor:nth-child(14)::before,
+    .meteor:nth-child(14)::after,
+    .meteor:nth-child(14)::after {
+        -webkit-animation-delay: 8888ms;
+        animation-delay: 8888ms;
+    }
+
+    .meteor:nth-child(15) {
+        top: calc(50% - 35px);
+        left: calc(50% - 200px);
+        -webkit-animation-delay: 7588ms;
+        animation-delay: 7588ms;
+    }
+
+    .meteor:nth-child(15)::before,
+    .meteor:nth-child(15)::after,
+    .meteor:nth-child(15)::after {
+        -webkit-animation-delay: 7588ms;
+        animation-delay: 7588ms;
+    }
+
+    .meteor:nth-child(16) {
+        top: calc(50% - 40px);
+        left: calc(50% - 250px);
+        -webkit-animation-delay: 1888ms;
+        animation-delay: 1888ms;
+    }
+
+    .meteor:nth-child(16)::before,
+    .meteor:nth-child(16)::after,
+    .meteor:nth-child(16)::after {
+        -webkit-animation-delay: 1888ms;
+        animation-delay: 1888ms;
+    }
+
+
+    @-webkit-keyframes tail {
+        0% {
+            width: 0;
+        }
+
+        30% {
+            width: 100px;
+        }
+
+        100% {
+            width: 0;
+        }
+    }
+
+    @keyframes tail {
+        0% {
+            width: 0;
+        }
+
+        30% {
+            width: 100px;
+        }
+
+        100% {
+            width: 0;
+        }
+    }
+
+    @-webkit-keyframes shining {
+        0% {
+            width: 0;
+        }
+
+        50% {
+            width: 30px;
+        }
+
+        1000% {
+            width: 0;
+        }
+    }
+
+    @keyframes shining {
+        0% {
+            width: 0;
+        }
+
+        50% {
+            width: 30px;
+        }
+
+        1000% {
+            width: 0;
+        }
+    }
+
+    @-webkit-keyframes shooting {
+        0% {
+            -webkit-transform: translateX(0);
+            transform: translateX(0);
+        }
+
+        100% {
+            -webkit-transform: translateX(300px);
+            transform: translateX(300px);
+        }
+    }
+
+    @keyframes shooting {
+        0% {
+            -webkit-transform: translateX(0);
+            transform: translateX(0);
+        }
+
+        100% {
+            -webkit-transform: translateX(300px);
+            transform: translateX(300px);
+        }
+    }
+
+    @-webkit-keyframes sky {
+        0% {
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+
+        100% {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+        }
+    }
+
+    @keyframes sky {
+        0% {
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+
+        100% {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+        }
+    }
+
 </style>

mini-program/garden-wxapp/pages/agency/comps/canvas/Line.vue

@@ -1,103 +1,106 @@
 <template>
-	<view class="">
-		<view class="qiun-charts">
-			<canvas :canvas-id="canvasId" :id="canvasId" class="charts" @touchstart="touchLineA"></canvas>
-		</view>
-	</view>
+    <view class="">
+        <view class="qiun-charts">
+            <canvas :canvas-id="canvasId" :id="canvasId" class="charts" @touchstart="touchLineA"></canvas>
+        </view>
+    </view>
 </template>
 
 <script>
-	import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
-	var _self;
-	var canvaLineA=null;
-	export default {
-		data() {
-			return {
-				cWidth:'',
-				cHeight:'',
-				pixelRatio:1,
-			}
-		},
-		props: {
-			lineJson:{
-				type:Object,
-				default:null
-			},
-			canvasId:{
-				type:String,
-				default:"canvasLineA"
-			},
-		},
-		created() {
-			_self = this;
-			this.cWidth=uni.upx2px(750);
-			this.cHeight=uni.upx2px(500);
-			_self.showLineA(this.canvasId,this.lineJson);
-		},
-		methods: {
-			showLineA(canvasId,chartData){
-				canvaLineA=new uCharts({
-					$this:_self,
-					canvasId: canvasId,
-					type: 'line',
-					fontSize:11,
-					legend:{show:true},
-					dataLabel:false,
-					dataPointShape:true,
-					background:'#FFFFFF',
-					pixelRatio:_self.pixelRatio,
-					categories: chartData.categories,
-					series: chartData.series,
-					animation: true,
-					xAxis: {
-						type:'grid',
-						gridColor:'#CCCCCC',
-						gridType:'dash',
-						disableGrid:true,
-						dashLength:8,
-						rotateLabel:true
-					},
-					yAxis: {
-						disableGrid:true,
-						gridType:'dash',
-						gridColor:'#CCCCCC',
-						dashLength:8,
-						splitNumber:5,
-						min:10,
-						max:180,
-						format:(val)=>{return val.toFixed(0)}
-					},
-					width: _self.cWidth*_self.pixelRatio,
-					height: _self.cHeight*_self.pixelRatio,
-					extra: {
-						line:{
-							type: 'straight'
-						}
-					}
-				});
-				
-			},
-			touchLineA(e) {
-				canvaLineA.showToolTip(e, {
-					format: function (item, category) {
-						return category + ' ' + item.name + ':' + item.data 
-					}
-				});
-			}
-		}
-	}
+    import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
+
+    var _self;
+    var canvaLineA = null;
+    export default {
+        data() {
+            return {
+                cWidth: '',
+                cHeight: '',
+                pixelRatio: 1,
+            }
+        },
+        props: {
+            lineJson: {
+                type: Object,
+                default: null
+            },
+            canvasId: {
+                type: String,
+                default: "canvasLineA"
+            },
+        },
+        created() {
+            _self = this;
+            this.cWidth = uni.upx2px(750);
+            this.cHeight = uni.upx2px(500);
+            _self.showLineA(this.canvasId, this.lineJson);
+        },
+        methods: {
+            showLineA(canvasId, chartData) {
+                canvaLineA = new uCharts({
+                    $this: _self,
+                    canvasId: canvasId,
+                    type: 'line',
+                    fontSize: 11,
+                    legend: {show: true},
+                    dataLabel: false,
+                    dataPointShape: true,
+                    background: '#FFFFFF',
+                    pixelRatio: _self.pixelRatio,
+                    categories: chartData.categories,
+                    series: chartData.series,
+                    animation: true,
+                    xAxis: {
+                        type: 'grid',
+                        gridColor: '#CCCCCC',
+                        gridType: 'dash',
+                        disableGrid: true,
+                        dashLength: 8,
+                        rotateLabel: true
+                    },
+                    yAxis: {
+                        disableGrid: true,
+                        gridType: 'dash',
+                        gridColor: '#CCCCCC',
+                        dashLength: 8,
+                        splitNumber: 5,
+                        min: 10,
+                        max: 180,
+                        format: (val) => {
+                            return val.toFixed(0)
+                        }
+                    },
+                    width: _self.cWidth * _self.pixelRatio,
+                    height: _self.cHeight * _self.pixelRatio,
+                    extra: {
+                        line: {
+                            type: 'straight'
+                        }
+                    }
+                });
+
+            },
+            touchLineA(e) {
+                canvaLineA.showToolTip(e, {
+                    format: function (item, category) {
+                        return category + ' ' + item.name + ':' + item.data
+                    }
+                });
+            }
+        }
+    }
 </script>
 
 <style>
-	.qiun-charts {
-		width: 750upx;
-		height: 500upx;
-		background-color: #FFFFFF;
-	}
-	
-	.charts {
-		width: 750upx;
-		height: 500upx;
-		background-color: #FFFFFF;
-	}
+    .qiun-charts {
+        width: 750 upx;
+        height: 500 upx;
+        background-color: #FFFFFF;
+    }
+
+    .charts {
+        width: 750 upx;
+        height: 500 upx;
+        background-color: #FFFFFF;
+    }
 </style>

mini-program/garden-wxapp/pages/agency/comps/canvas/curve.vue

@@ -1,106 +1,110 @@
 <template>
-	<view class="qiun-columns">
-		<view class="qiun-charts" >
-			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
-		</view>
-	</view>
+    <view class="qiun-columns">
+        <view class="qiun-charts">
+            <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
+        </view>
+    </view>
 </template>
 
 <script>
-	import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
-	var _self;
-	var canvaLineA=null;
-	export default {
-		data() {
-			return {
-				cWidth:'',
-				cHeight:'',
-				pixelRatio:1,
-				textarea:''
-			}
-		},
-		created() {
-			_self = this;
-			this.cWidth=uni.upx2px(750);
-			this.cHeight=uni.upx2px(500);
-			this.getServerData();
-		},
-		methods: {
-			getServerData(){
-				 let LineA= {
-				  "categories": ["2021-06-02", "2021-06-02", "2021-06-02", "2021-06-02", "2021-06-02"],
-				  "series": [{
-					"name": "告警率",
-					"data": [93, 80, 103, 98, 110],
-					 color: '#5064eb'
-				  }]
-				}
-				_self.showLineA("canvasLineA",LineA);
-			},
-			showLineA(canvasId,chartData){
-				canvaLineA=new uCharts({
-					$this:_self,
-					canvasId: canvasId,
-					type: 'line',
-					fontSize:11,
-					padding:[15,20,0,15],
-					legend:{
-						show:true,
-						padding:5,
-						lineHeight:11,
-						margin:0,
-					},
-					dataLabel:true,
-					dataPointShape:true,
-					background:'#FFFFFF',
-					pixelRatio:_self.pixelRatio,
-					categories: chartData.categories,
-					series: chartData.series,
-					animation: true,
-					xAxis: {
-						type:'grid',
-						gridColor:'#CCCCCC',
-						gridType:'dash',
-						dashLength:8,
-						boundaryGap:'justify'
-					},
-					yAxis: {
-						gridType:'dash',
-						gridColor:'#CCCCCC',
-						dashLength:8,
-						splitNumber:5,
-						format:(val)=>{return val.toFixed(0)+'元'}
-					},
-					width: _self.cWidth*_self.pixelRatio,
-					height: _self.cHeight*_self.pixelRatio,
-					extra: {
-						line:{
-							type: 'curve'
-						}
-					}
-				});
-			},
-			touchLineA(e) {
-				canvaLineA.touchLegend(e);
-				canvaLineA.showToolTip(e, {
-					format: function (item, category) {
-						return category + ' ' + item.name + ':' + item.data 
-					}
-				});
-			},
-		}
-	}
+    import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
+
+    var _self;
+    var canvaLineA = null;
+    export default {
+        data() {
+            return {
+                cWidth: '',
+                cHeight: '',
+                pixelRatio: 1,
+                textarea: ''
+            }
+        },
+        created() {
+            _self = this;
+            this.cWidth = uni.upx2px(750);
+            this.cHeight = uni.upx2px(500);
+            this.getServerData();
+        },
+        methods: {
+            getServerData() {
+                let LineA = {
+                    "categories": ["2021-06-02", "2021-06-02", "2021-06-02", "2021-06-02", "2021-06-02"],
+                    "series": [{
+                        "name": "告警率",
+                        "data": [93, 80, 103, 98, 110],
+                        color: '#5064eb'
+                    }]
+                }
+                _self.showLineA("canvasLineA", LineA);
+            },
+            showLineA(canvasId, chartData) {
+                canvaLineA = new uCharts({
+                    $this: _self,
+                    canvasId: canvasId,
+                    type: 'line',
+                    fontSize: 11,
+                    padding: [15, 20, 0, 15],
+                    legend: {
+                        show: true,
+                        padding: 5,
+                        lineHeight: 11,
+                        margin: 0,
+                    },
+                    dataLabel: true,
+                    dataPointShape: true,
+                    background: '#FFFFFF',
+                    pixelRatio: _self.pixelRatio,
+                    categories: chartData.categories,
+                    series: chartData.series,
+                    animation: true,
+                    xAxis: {
+                        type: 'grid',
+                        gridColor: '#CCCCCC',
+                        gridType: 'dash',
+                        dashLength: 8,
+                        boundaryGap: 'justify'
+                    },
+                    yAxis: {
+                        gridType: 'dash',
+                        gridColor: '#CCCCCC',
+                        dashLength: 8,
+                        splitNumber: 5,
+                        format: (val) => {
+                            return val.toFixed(0) + '元'
+                        }
+                    },
+                    width: _self.cWidth * _self.pixelRatio,
+                    height: _self.cHeight * _self.pixelRatio,
+                    extra: {
+                        line: {
+                            type: 'curve'
+                        }
+                    }
+                });
+            },
+            touchLineA(e) {
+                canvaLineA.touchLegend(e);
+                canvaLineA.showToolTip(e, {
+                    format: function (item, category) {
+                        return category + ' ' + item.name + ':' + item.data
+                    }
+                });
+            },
+        }
+    }
 </script>
 
 <style>
-	.qiun-charts {
-		width: 750upx;
-		height: 500upx;
-		background-color: #FFFFFF;
-	}
-	.charts {
-		width: 750upx;
-		height: 500upx;
-		background-color: #FFFFFF;
-	}
+    .qiun-charts {
+        width: 750 upx;
+        height: 500 upx;
+        background-color: #FFFFFF;
+    }
+
+    .charts {
+        width: 750 upx;
+        height: 500 upx;
+        background-color: #FFFFFF;
+    }
 </style>

mini-program/garden-wxapp/pages/agency/comps/canvas/gauge.vue

@@ -1,105 +1,106 @@
 <template>
-	<view class="padding-top-50" style="z-index: 99;">
-		<view class="qiun-charts">
-			<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
-		</view>
-	</view>
+    <view class="padding-top-50" style="z-index: 99;">
+        <view class="qiun-charts">
+            <canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
+        </view>
+    </view>
 </template>
 
 <script>
-	import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
-	var _self;
-	var canvaGauge=null;
-   
-	export default {
-		data() {
-			return {
-				cWidth:'',
-				cHeight:'',
-				pixelRatio:1,
-				gaugeWidth:15
-			}
-		},
-		props: {
-			gaugeData:{
-				type:Object,
-				default:null
-			},
-		},
-		created() {
-			_self = this;
-			this.cWidth=uni.upx2px(450);
-			this.cHeight=uni.upx2px(400);
-			_self.showGauge("canvasGauge",this.gaugeData);
-		},
-		methods: {
-			showGauge(canvasId,chartData){
-				canvaGauge = new uCharts({
-					$this:_self,
-					canvasId: canvasId,
-					type: 'gauge',
-					fontSize:11,
-					legend:false,
-					title: {
-						name: Math.round(chartData.series[0].data*100)+'%',
-						color: chartData.categories[1].color,
-						fontSize: 25*_self.pixelRatio,
-						offsetY:50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
-					},
-					subtitle: {
-						name: chartData.series[0].name,
-						color: '#666666',
-						fontSize: 15*_self.pixelRatio,
-						offsetY:-50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
-					},
-					extra: {
-						gauge:{
-							type:'progress',
-							width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
-							startAngle:0.75,
-							endAngle:0.25,
-							startNumber:0,
-							endNumber:100,
-							splitLine:{
-								fixRadius:0,
-								splitNumber:10,
-								width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
-								color:'#FFFFFF',
-								childNumber:5,
-								childWidth:_self.gaugeWidth*0.4*_self.pixelRatio,//仪表盘背景的宽度
-							},
-							pointer:{
-								width: _self.gaugeWidth*0.8*_self.pixelRatio,//指针宽度
-								color:'auto'
-							}
-						}
-					},
-					background:'#FFFFFF',
-					pixelRatio:_self.pixelRatio,
-					categories: chartData.categories,
-					series: chartData.series,
-					animation: true,
-					width: _self.cWidth*_self.pixelRatio,
-					height: _self.cHeight*_self.pixelRatio,
-					dataLabel: true,
-				});
-			}
-		}
-	}
+    import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
+
+    var _self;
+    var canvaGauge = null;
+
+    export default {
+        data() {
+            return {
+                cWidth: '',
+                cHeight: '',
+                pixelRatio: 1,
+                gaugeWidth: 15
+            }
+        },
+        props: {
+            gaugeData: {
+                type: Object,
+                default: null
+            },
+        },
+        created() {
+            _self = this;
+            this.cWidth = uni.upx2px(450);
+            this.cHeight = uni.upx2px(400);
+            _self.showGauge("canvasGauge", this.gaugeData);
+        },
+        methods: {
+            showGauge(canvasId, chartData) {
+                canvaGauge = new uCharts({
+                    $this: _self,
+                    canvasId: canvasId,
+                    type: 'gauge',
+                    fontSize: 11,
+                    legend: false,
+                    title: {
+                        name: Math.round(chartData.series[0].data * 100) + '%',
+                        color: chartData.categories[1].color,
+                        fontSize: 25 * _self.pixelRatio,
+                        offsetY: 50 * _self.pixelRatio,//新增参数，自定义调整Y轴文案距离
+                    },
+                    subtitle: {
+                        name: chartData.series[0].name,
+                        color: '#666666',
+                        fontSize: 15 * _self.pixelRatio,
+                        offsetY: -50 * _self.pixelRatio,//新增参数，自定义调整Y轴文案距离
+                    },
+                    extra: {
+                        gauge: {
+                            type: 'progress',
+                            width: _self.gaugeWidth * _self.pixelRatio,//仪表盘背景的宽度
+                            startAngle: 0.75,
+                            endAngle: 0.25,
+                            startNumber: 0,
+                            endNumber: 100,
+                            splitLine: {
+                                fixRadius: 0,
+                                splitNumber: 10,
+                                width: _self.gaugeWidth * _self.pixelRatio,//仪表盘背景的宽度
+                                color: '#FFFFFF',
+                                childNumber: 5,
+                                childWidth: _self.gaugeWidth * 0.4 * _self.pixelRatio,//仪表盘背景的宽度
+                            },
+                            pointer: {
+                                width: _self.gaugeWidth * 0.8 * _self.pixelRatio,//指针宽度
+                                color: 'auto'
+                            }
+                        }
+                    },
+                    background: '#FFFFFF',
+                    pixelRatio: _self.pixelRatio,
+                    categories: chartData.categories,
+                    series: chartData.series,
+                    animation: true,
+                    width: _self.cWidth * _self.pixelRatio,
+                    height: _self.cHeight * _self.pixelRatio,
+                    dataLabel: true,
+                });
+            }
+        }
+    }
 </script>
 
 <style>
-	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
-	.qiun-charts {
-		margin: 0 auto;
-		width: 450upx;
-		height: 400upx;
-		background-color: #FFFFFF;
-	}
-	
-	.charts {
-		width: 450upx;
-		height: 400upx;
-		background-color: #FFFFFF;
-	}
+    /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
+    .qiun-charts {
+        margin: 0 auto;
+        width: 450 upx;
+        height: 400 upx;
+        background-color: #FFFFFF;
+    }
+
+    .charts {
+        width: 450 upx;
+        height: 400 upx;
+        background-color: #FFFFFF;
+    }
 </style>

mini-program/garden-wxapp/pages/agency/comps/canvas/in-out-records.vue

@@ -1,106 +1,105 @@
 <template>
-	<view class="">
-		<view class="charts" >
-			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
-		</view>
-	</view>
+    <view class="">
+        <view class="charts">
+            <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
+        </view>
+    </view>
 </template>
 
 <script>
-	import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
-	var _self;
-	var canvaColumn=null;
+    import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
 
-	export default {
-		data() {
-			return {
-				cWidth:'',
-				cHeight:'',
-				pixelRatio:1,
-				serverData:'',
-			}
-		},
-		created() {
-			_self = this;
-			this.cWidth=uni.upx2px(750);
-			this.cHeight=uni.upx2px(500);
-			
-			this.getServerData();
-		},
-		methods: {
-			async getServerData(){
-				let agencyId=this.$cache.get('agencyId')
-				let tenantId=this.$cache.get('agencyTenantId')
-				let params={
-					agencyId,
-					tenantId
-				}
-				let res=await this.$api.statistical.carTendency(params)
-				let inOutRecordsData={
-					categories:res.data.dateList.reverse(),
-					data:res.data.peopleNUm.reverse()
-				}
-				
-				let chartData={
-				  "categories": inOutRecordsData.categories,
-				  "series": [{
-					"name": "人员数",
-					"data": inOutRecordsData.data,
-					color: '#5064eb'
-				  }]
-				}
-				_self.showColumn("canvasColumn",chartData);
-			},
-			showColumn(canvasId,chartData){
-				canvaColumn=new uCharts({
-					$this:_self,
-					canvasId: canvasId,
-					type: 'column',
-					legend:{show:true},
-					fontSize:11,
-					background:'#FFFFFF',
-					pixelRatio:_self.pixelRatio,
-					animation: true,
-					categories: chartData.categories,
-					series: chartData.series,
-					xAxis: {
-						disableGrid:true,
-					},
-					yAxis: {
-					
-					},
-					dataLabel: true,
-					width: _self.cWidth*_self.pixelRatio,
-					height: _self.cHeight*_self.pixelRatio,
-					extra: {
-						column: {
-							type:'group',
-							width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
-						}
-					  }
-				});
-				
-			},
-			touchColumn(e){
-				canvaColumn.showToolTip(e, {
-					format: function (item, category) {
-						if(typeof item.data === 'object'){
-							return category + ' ' + item.name + ':' + item.data.value 
-						}else{
-							return category + ' ' + item.name + ':' + item.data 
-						}
-					}
-				});
-			},
-		}
-	}
+    var _self;
+    var canvaColumn = null;
+
+    export default {
+        data() {
+            return {
+                cWidth: '',
+                cHeight: '',
+                pixelRatio: 1,
+                serverData: '',
+            }
+        },
+        created() {
+            _self = this;
+            this.cWidth = uni.upx2px(750);
+            this.cHeight = uni.upx2px(500);
+
+            this.getServerData();
+        },
+        methods: {
+            async getServerData() {
+                let agencyId = this.$cache.get('agencyId')
+                let tenantId = this.$cache.get('agencyTenantId')
+                let params = {
+                    agencyId,
+                    tenantId
+                }
+                let res = await this.$api.statistical.carTendency(params)
+                let inOutRecordsData = {
+                    categories: res.data.dateList.reverse(),
+                    data: res.data.peopleNUm.reverse()
+                }
+
+                let chartData = {
+                    "categories": inOutRecordsData.categories,
+                    "series": [{
+                        "name": "人员数",
+                        "data": inOutRecordsData.data,
+                        color: '#5064eb'
+                    }]
+                }
+                _self.showColumn("canvasColumn", chartData);
+            },
+            showColumn(canvasId, chartData) {
+                canvaColumn = new uCharts({
+                    $this: _self,
+                    canvasId: canvasId,
+                    type: 'column',
+                    legend: {show: true},
+                    fontSize: 11,
+                    background: '#FFFFFF',
+                    pixelRatio: _self.pixelRatio,
+                    animation: true,
+                    categories: chartData.categories,
+                    series: chartData.series,
+                    xAxis: {
+                        disableGrid: true,
+                    },
+                    yAxis: {},
+                    dataLabel: true,
+                    width: _self.cWidth * _self.pixelRatio,
+                    height: _self.cHeight * _self.pixelRatio,
+                    extra: {
+                        column: {
+                            type: 'group',
+                            width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
+                        }
+                    }
+                });
+
+            },
+            touchColumn(e) {
+                canvaColumn.showToolTip(e, {
+                    format: function (item, category) {
+                        if (typeof item.data === 'object') {
+                            return category + ' ' + item.name + ':' + item.data.value
+                        } else {
+                            return category + ' ' + item.name + ':' + item.data
+                        }
+                    }
+                });
+            },
+        }
+    }
 </script>
 
 <style>
-.charts{
-	padding: 30rpx 0;
-	width: 100%;
-	height: 550rpx;
-	background-color: #FFFFFF;
-}
+    .charts {
+        padding: 30 rpx 0;
+        width: 100%;
+        height: 550 rpx;
+        background-color: #FFFFFF;
+    }
 </style>

mini-program/garden-wxapp/pages/agency/comps/canvas/pie.vue

@@ -1,147 +1,150 @@
 <template>
-	<view class="">
-		<view class="qiun-charts" >
-			<view class="progress">
-				<canvas canvas-id="canvasPie1" id="canvasPie1" class="charts"   @touchstart="touchPie1"></canvas>
-			</view>
-			<view class="progress">
-				<canvas canvas-id="canvasPie2" id="canvasPie2"  class="charts"   @touchstart="touchPie2"></canvas>
-			</view>
-		</view>
-	</view>
+    <view class="">
+        <view class="qiun-charts">
+            <view class="progress">
+                <canvas canvas-id="canvasPie1" id="canvasPie1" class="charts" @touchstart="touchPie1"></canvas>
+            </view>
+            <view class="progress">
+                <canvas canvas-id="canvasPie2" id="canvasPie2" class="charts" @touchstart="touchPie2"></canvas>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
-	var _self;
-	var canvaPie1=null;
-	var canvaPie2=null;
-   
-	export default {
-		data() {
-			return {
-				cWidth:'',
-				cHeight:'',
-				pixelRatio:1,
-				serverData:'',
-			}
-		},
-		props: {
-			pieData:{
-				type:Object,
-				default:null
-			}
-		},
-		created() {
-			_self = this;
-			this.cWidth=uni.upx2px(400);
-			this.cHeight=uni.upx2px(400);
-			this.init()
-		},
-		methods: {
-			init(){
-				let chartData1= {
-				  "series": [{
-					"name": "内部人员",
-					"data":  this.pieData.insideTotal,
-					color: '#5064eb'
-				  }, {
-					"name": "外部人员",
-					"data": this.pieData.outsideTotal,
-					color: '#d10000'
-				  }]
-				}
-				let chartData2= {
-				  "series": [{
-					"name": "车辆进出",
-					"data": this.pieData.carTotal,
-					color: '#5064eb'
-				  }, {
-					"name": "人员进出",
-					"data": this.pieData.peopleNum,
-					color: '#d10000'
-				  }]
-				}
-				_self.showPie1("canvasPie1",chartData1);
-				_self.showPie2("canvasPie2",chartData2);
-			},
-			showPie1(canvasId,chartData){
-				canvaPie1=new uCharts({
-					$this:_self,
-					canvasId: canvasId,
-					type: 'pie',
-					fontSize:11,
-					legend:{show:true},
-					background:'#FFFFFF',
-					pixelRatio:_self.pixelRatio,
-					series: chartData.series,
-					animation: true,
-					width: _self.cWidth*_self.pixelRatio,
-					height: _self.cHeight*_self.pixelRatio,
-					dataLabel: true,
-					extra: {
-						pie: {
-						  lableWidth:15
-						}
-					},
-				});
-			},
-			showPie2(canvasId,chartData){
-				canvaPie2=new uCharts({
-					$this:_self,
-					canvasId: canvasId,
-					type: 'pie',
-					fontSize:11,
-					legend:{show:true},
-					background:'#FFFFFF',
-					pixelRatio:_self.pixelRatio,
-					series: chartData.series,
-					animation: true,
-					width: _self.cWidth*_self.pixelRatio,
-					height: _self.cHeight*_self.pixelRatio,
-					dataLabel: true,
-					extra: {
-						pie: {
-						  lableWidth:15
-						}
-					},
-				});
-			},
-			touchPie1(e){
-				canvaPie1.showToolTip(e, {
-					format: function (item) {
-						return item.name + ':' + item.data 
-					}
-				});
-			},
-			touchPie2(e){
-				canvaPie2.showToolTip(e, {
-					format: function (item) {
-						return item.name + ':' + item.data 
-					}
-				});
-			},
-		}
-	}
+    import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';
+
+    var _self;
+    var canvaPie1 = null;
+    var canvaPie2 = null;
+
+    export default {
+        data() {
+            return {
+                cWidth: '',
+                cHeight: '',
+                pixelRatio: 1,
+                serverData: '',
+            }
+        },
+        props: {
+            pieData: {
+                type: Object,
+                default: null
+            }
+        },
+        created() {
+            _self = this;
+            this.cWidth = uni.upx2px(400);
+            this.cHeight = uni.upx2px(400);
+            this.init()
+        },
+        methods: {
+            init() {
+                let chartData1 = {
+                    "series": [{
+                        "name": "内部人员",
+                        "data": this.pieData.insideTotal,
+                        color: '#5064eb'
+                    }, {
+                        "name": "外部人员",
+                        "data": this.pieData.outsideTotal,
+                        color: '#d10000'
+                    }]
+                }
+                let chartData2 = {
+                    "series": [{
+                        "name": "车辆进出",
+                        "data": this.pieData.carTotal,
+                        color: '#5064eb'
+                    }, {
+                        "name": "人员进出",
+                        "data": this.pieData.peopleNum,
+                        color: '#d10000'
+                    }]
+                }
+                _self.showPie1("canvasPie1", chartData1);
+                _self.showPie2("canvasPie2", chartData2);
+            },
+            showPie1(canvasId, chartData) {
+                canvaPie1 = new uCharts({
+                    $this: _self,
+                    canvasId: canvasId,
+                    type: 'pie',
+                    fontSize: 11,
+                    legend: {show: true},
+                    background: '#FFFFFF',
+                    pixelRatio: _self.pixelRatio,
+                    series: chartData.series,
+                    animation: true,
+                    width: _self.cWidth * _self.pixelRatio,
+                    height: _self.cHeight * _self.pixelRatio,
+                    dataLabel: true,
+                    extra: {
+                        pie: {
+                            lableWidth: 15
+                        }
+                    },
+                });
+            },
+            showPie2(canvasId, chartData) {
+                canvaPie2 = new uCharts({
+                    $this: _self,
+                    canvasId: canvasId,
+                    type: 'pie',
+                    fontSize: 11,
+                    legend: {show: true},
+                    background: '#FFFFFF',
+                    pixelRatio: _self.pixelRatio,
+                    series: chartData.series,
+                    animation: true,
+                    width: _self.cWidth * _self.pixelRatio,
+                    height: _self.cHeight * _self.pixelRatio,
+                    dataLabel: true,
+                    extra: {
+                        pie: {
+                            lableWidth: 15
+                        }
+                    },
+                });
+            },
+            touchPie1(e) {
+                canvaPie1.showToolTip(e, {
+                    format: function (item) {
+                        return item.name + ':' + item.data
+                    }
+                });
+            },
+            touchPie2(e) {
+                canvaPie2.showToolTip(e, {
+                    format: function (item) {
+                        return item.name + ':' + item.data
+                    }
+                });
+            },
+        }
+    }
 </script>
 
 <style lang="scss">
-	.qiun-charts {
-		width: 100%!important;
-		background-color: #FFFFFF;
-		position: relative;
-		display: flex;
-		justify-content: space-around;
-		padding-bottom: 30rpx;
-	}
-	.progress{
-		width: 50%;
-		height: 100%;
-	}
-	.charts {
-		width: 400upx;
-		height: 400upx;
-		background-color: #FFFFFF;
-		margin: 0rpx auto;
-	}
+    .qiun-charts {
+        width: 100% !important;
+        background-color: #FFFFFF;
+        position: relative;
+        display: flex;
+        justify-content: space-around;
+        padding-bottom: 30 rpx;
+    }
+
+    .progress {
+        width: 50%;
+        height: 100%;
+    }
+
+    .charts {
+        width: 400 upx;
+        height: 400 upx;
+        background-color: #FFFFFF;
+        margin: 0 rpx auto;
+    }
 </style>

mini-program/garden-wxapp/pages/agency/comps/data-service.vue

@@ -1,317 +1,318 @@
 <template>
-	<view class="">
-		<!-- 园区数据统计 -->
-		<view class="">
-			<view class="title">
-				<image  src="../../../static/icon/tag1.png" mode=""></image>
-				<text >园区数据统计</text>
-			</view>
-			<view class="data-statistics" v-if="loading">
-				<view class="item"  v-for="(item,index) in agencyStatistical" :key="index">
-					<view class="data">
-						<text>{{item.num}}</text>
-						<text>{{item.title}}</text>
-					</view>
-				</view>
-			</view>
-			<view v-else class="flex justify-center align-center padding-50">
-				<u-loading mode="flower" size="150"></u-loading>
-			</view>
-		</view>
-		
-		<!-- 分割线 -->
-		<view class="" style="background-color: #F1F1F1;height: 20rpx;"></view>
-		
-		
-		<!-- 园区当日动态  begin-->
-		<!-- <view class="title">
-			<image  src="../../../static/icon/tag1.png" mode=""></image>
-			<text >园区当日动态</text>
-		</view>
-		<view class="desc">
-			<view class="flex">
-				<view class="bg-green progress"></view>
-				<text class="padding-left-10">内部（人）</text>
-			</view>
-		</view>
-		<view class="desc">
-			<view class="flex">
-				<view class="bg-red progress"></view>
-				<text class="padding-left-10">外部（人）</text>
-			</view>
-		</view>
-		
-		<view class="today-statistics margin-top-20">
-			<view  style="width: 30%;margin-top: 5rpx;">
-				<text >驶入车辆：</text>
-			</view>
-			<view  class="cu-progress radius striped active margin-top-10">
-				<view class="bg-green" :style="[{ width:loading?todayData.enterCarOfInsidePercen+'%':''}]">{{todayData.enterCarOfInside}}</view>
-				<view v-if="todayData.enterCarOfOutside!=0"  class="bg-red" :style="[{ width:loading?todayData.enterCarOfOutsidePercen+'%':''}]">{{todayData.enterCarOfOutside}}</view>
-			</view>
-		</view>
-		<view class="today-statistics">
-			<view  style="width: 30%;margin-top: 5rpx;">
-				<text >驶出车辆：</text>
-			</view>
-			<view  class="cu-progress radius striped active margin-top-10">
-				<view class="bg-green" :style="[{ width:loading?todayData.departCarOfInsidePercen+'%':''}]">{{todayData.departCarOfInside}}</view>
-				<view v-if="todayData.departCarOfOutside!=0"  class="bg-red" :style="[{ width:loading?todayData.departCarOfOutsidePercen+'%':''}]">{{todayData.departCarOfOutside}}</view>
-			</view>
-		</view>
-		<view class="today-statistics">
-			<view  style="width: 30%;margin-top: 5rpx;">
-				<text >人员统计：</text>
-			</view>
-			<view  class="cu-progress radius striped active margin-top-10">
-				<view class="bg-green" :style="[{ width:loading?'100%':''}]">{{todayData.peopleNum}}</view>
-			</view>
-		</view>
-		<pie :pieData="pieData" v-if="!$isEmpty(pieData)"></pie> -->
-		<!-- 园区当日动态  begin-->
-		
-		<!-- 分割线 -->
-		<!-- <view class="" style="background-color: #F1F1F1;height: 20rpx;"></view> -->
-		<view class="title">
-			<image  src="../../../static/icon/tag1.png" mode=""></image>
-			<text >近10天用电量</text>
-		</view>
-		<line :lineJson="lineJson" v-if="!$isEmpty(lineJson)" ></line>
-		
-		<!-- 分割线 -->
-		<view class="" style="background-color: #F1F1F1;height: 20rpx;"></view>
-		
-		<view class="title">
-			<image  src="../../../static/icon/tag1.png" mode=""></image>
-			<text >人员进出记录</text>
-		</view>
-		<in-out-records></in-out-records>
-		
-		
-		
-	</view>
+    <view class="">
+        <!-- 园区数据统计 -->
+        <view class="">
+            <view class="title">
+                <image src="../../../static/icon/tag1.png" mode=""></image>
+                <text>园区数据统计</text>
+            </view>
+            <view class="data-statistics" v-if="loading">
+                <view class="item" v-for="(item,index) in agencyStatistical" :key="index">
+                    <view class="data">
+                        <text>{{item.num}}</text>
+                        <text>{{item.title}}</text>
+                    </view>
+                </view>
+            </view>
+            <view v-else class="flex justify-center align-center padding-50">
+                <u-loading mode="flower" size="150"></u-loading>
+            </view>
+        </view>
+
+        <!-- 分割线 -->
+        <view class="" style="background-color: #F1F1F1;height: 20rpx;"></view>
+
+
+        <!-- 园区当日动态  begin-->
+        <!-- <view class="title">
+            <image  src="../../../static/icon/tag1.png" mode=""></image>
+            <text >园区当日动态</text>
+        </view>
+        <view class="desc">
+            <view class="flex">
+                <view class="bg-green progress"></view>
+                <text class="padding-left-10">内部（人）</text>
+            </view>
+        </view>
+        <view class="desc">
+            <view class="flex">
+                <view class="bg-red progress"></view>
+                <text class="padding-left-10">外部（人）</text>
+            </view>
+        </view>
+
+        <view class="today-statistics margin-top-20">
+            <view  style="width: 30%;margin-top: 5rpx;">
+                <text >驶入车辆：</text>
+            </view>
+            <view  class="cu-progress radius striped active margin-top-10">
+                <view class="bg-green" :style="[{ width:loading?todayData.enterCarOfInsidePercen+'%':''}]">{{todayData.enterCarOfInside}}</view>
+                <view v-if="todayData.enterCarOfOutside!=0"  class="bg-red" :style="[{ width:loading?todayData.enterCarOfOutsidePercen+'%':''}]">{{todayData.enterCarOfOutside}}</view>
+            </view>
+        </view>
+        <view class="today-statistics">
+            <view  style="width: 30%;margin-top: 5rpx;">
+                <text >驶出车辆：</text>
+            </view>
+            <view  class="cu-progress radius striped active margin-top-10">
+                <view class="bg-green" :style="[{ width:loading?todayData.departCarOfInsidePercen+'%':''}]">{{todayData.departCarOfInside}}</view>
+                <view v-if="todayData.departCarOfOutside!=0"  class="bg-red" :style="[{ width:loading?todayData.departCarOfOutsidePercen+'%':''}]">{{todayData.departCarOfOutside}}</view>
+            </view>
+        </view>
+        <view class="today-statistics">
+            <view  style="width: 30%;margin-top: 5rpx;">
+                <text >人员统计：</text>
+            </view>
+            <view  class="cu-progress radius striped active margin-top-10">
+                <view class="bg-green" :style="[{ width:loading?'100%':''}]">{{todayData.peopleNum}}</view>
+            </view>
+        </view>
+        <pie :pieData="pieData" v-if="!$isEmpty(pieData)"></pie> -->
+        <!-- 园区当日动态  begin-->
+
+        <!-- 分割线 -->
+        <!-- <view class="" style="background-color: #F1F1F1;height: 20rpx;"></view> -->
+        <view class="title">
+            <image src="../../../static/icon/tag1.png" mode=""></image>
+            <text>近10天用电量</text>
+        </view>
+        <line :lineJson="lineJson" v-if="!$isEmpty(lineJson)"></line>
+
+        <!-- 分割线 -->
+        <view class="" style="background-color: #F1F1F1;height: 20rpx;"></view>
+
+        <view class="title">
+            <image src="../../../static/icon/tag1.png" mode=""></image>
+            <text>人员进出记录</text>
+        </view>
+        <in-out-records></in-out-records>
+
+
+    </view>
 </template>
 <script>
-import pie from "./canvas/pie.vue"
-import inOutRecords from "./canvas/in-out-records.vue"
-import line from "./canvas/Line.vue"
-var that;
-export default {
-	components:{
-		pie,inOutRecords,line
-	},
-	data() {
-		return {
-			//园区
-			agencyId:'',
-			tenantId:'',
-			
-			loading:false,
-			
-			//园区数据统计
-			agencyStatistical:[],
-			//园区当日动态
-			todayData:{},
-			
-			lineJson:{},
-			pieData:{}
-		};
-	},
-	created() {
-		that = this;
-		this.agencyId=this.$cache.get('agencyId')
-		this.tenantId=this.$cache.get('agencyTenantId')
-		//园区数据统计
-		this.fetchAgencyData()
-		this.fetchTodayData()
-		this.fetchElectricMeter()
-		
-		
-		setTimeout(function() {
-			that.loading = true
-		}, 500)
-	},
-	methods: {
-		async fetchElectricMeter(){
-			let aelectricMeterStaticgencyId=this.$cache.get('agencyId')
-			let res=await this.$api.statistical.electricMeterStatic({agencyId:'1338406098847293442'})
-			this.lineJson= {
-			   "categories": res.data.dates.slice(0,10),
-				series: [{
-					name: '电表用量(Kwh)',
-					data: res.data.values.slice(0,10),
-					color: '#5064eb'
-				}]
-			}
-		},
-		// 园区数据统计
-		fetchAgencyData(){
-			this.$api.statistical.agencyStatistical({id:this.agencyId}).then(res=>{
-				this.agencyStatistical=[
-					{
-						 title:'园区分区',
-						 num:res.residentials.length
-					},
-					{
-						 title:'楼宇总数',
-						 num:res.buildingCount
-					},
-					{
-						 title:'企业总数',
-						 num:res.enterpriseCount
-					},
-					{
-						 title:'员工总数',
-						 num:res.staffCount
-					},
-					{
-						 title:'正常设备',
-						 num:res.safetyDeviceCount
-					},
-					{
-						 title:'告警总数',
-						 num:res.warningDeviceCount
-					},
-				]
-			})
-		},
-		//今日动态
-		fetchTodayData(){
-			let params={
-				agencyId:this.agencyId,
-				tenantId:this.tenantId
-			}
-			this.$api.statistical.todayData(params).then(res=>{
-				this.todayData=res.data
-				
-				//驶入车辆总数
-				let enterTotal=this.todayData.enterCarOfInside+this.todayData.enterCarOfOutside
-				//内部驶入车辆百分比
-				this.todayData.enterCarOfInsidePercen=this.$util.keepTwoDecimalFull(this.todayData.enterCarOfInside/enterTotal)*100
-				//外部驶入车辆百分比
-				this.todayData.enterCarOfOutsidePercen=100-this.todayData.enterCarOfInsidePercen
-				
-				//驶出车辆总数
-				let departTotal=this.todayData.departCarOfOutside+this.todayData.departCarOfInside
-				//内部驶出车辆百分比
-				this.todayData.departCarOfInsidePercen=this.$util.keepTwoDecimalFull(this.todayData.departCarOfInside/departTotal)*100
-				//外部驶出车辆百分比
-				this.todayData.departCarOfOutsidePercen=100-this.todayData.departCarOfInsidePercen
-
-				//内部与外部人车辆进出的比例
-				
-				let insideTotal=this.todayData.departCarOfInside+this.todayData.enterCarOfInside
-				let outsideTotal=this.todayData.departCarOfOutside+this.todayData.enterCarOfOutside
-				
-				let carTotal=this.todayData.departCarOfInside+this.todayData.departCarOfOutside+
-							 this.todayData.enterCarOfInside+this.todayData.enterCarOfOutside
-							 
-				this.pieData={
-					insideTotal,
-					outsideTotal,
-					carTotal,
-					peopleNum:this.todayData.peopleNum
-				}
-				console.log(this.pieData);
-			})
-		},
-	}
-};
+    import pie from "./canvas/pie.vue"
+    import inOutRecords from "./canvas/in-out-records.vue"
+    import line from "./canvas/Line.vue"
+
+    var that;
+    export default {
+        components: {
+            pie, inOutRecords, line
+        },
+        data() {
+            return {
+                //园区
+                agencyId: '',
+                tenantId: '',
+
+                loading: false,
+
+                //园区数据统计
+                agencyStatistical: [],
+                //园区当日动态
+                todayData: {},
+
+                lineJson: {},
+                pieData: {}
+            };
+        },
+        created() {
+            that = this;
+            this.agencyId = this.$cache.get('agencyId')
+            this.tenantId = this.$cache.get('agencyTenantId')
+            //园区数据统计
+            this.fetchAgencyData()
+            this.fetchTodayData()
+            this.fetchElectricMeter()
+
+
+            setTimeout(function () {
+                that.loading = true
+            }, 500)
+        },
+        methods: {
+            async fetchElectricMeter() {
+                let aelectricMeterStaticgencyId = this.$cache.get('agencyId')
+                let res = await this.$api.statistical.electricMeterStatic({agencyId: '1338406098847293442'})
+                this.lineJson = {
+                    "categories": res.data.dates.slice(0, 10),
+                    series: [{
+                        name: '电表用量(Kwh)',
+                        data: res.data.values.slice(0, 10),
+                        color: '#5064eb'
+                    }]
+                }
+            },
+            // 园区数据统计
+            fetchAgencyData() {
+                this.$api.statistical.agencyStatistical({id: this.agencyId}).then(res => {
+                    this.agencyStatistical = [
+                        {
+                            title: '园区分区',
+                            num: res.residentials.length
+                        },
+                        {
+                            title: '楼宇总数',
+                            num: res.buildingCount
+                        },
+                        {
+                            title: '企业总数',
+                            num: res.enterpriseCount
+                        },
+                        {
+                            title: '员工总数',
+                            num: res.staffCount
+                        },
+                        {
+                            title: '正常设备',
+                            num: res.safetyDeviceCount
+                        },
+                        {
+                            title: '告警总数',
+                            num: res.warningDeviceCount
+                        },
+                    ]
+                })
+            },
+            //今日动态
+            fetchTodayData() {
+                let params = {
+                    agencyId: this.agencyId,
+                    tenantId: this.tenantId
+                }
+                this.$api.statistical.todayData(params).then(res => {
+                    this.todayData = res.data
+
+                    //驶入车辆总数
+                    let enterTotal = this.todayData.enterCarOfInside + this.todayData.enterCarOfOutside
+                    //内部驶入车辆百分比
+                    this.todayData.enterCarOfInsidePercen = this.$util.keepTwoDecimalFull(this.todayData.enterCarOfInside / enterTotal) * 100
+                    //外部驶入车辆百分比
+                    this.todayData.enterCarOfOutsidePercen = 100 - this.todayData.enterCarOfInsidePercen
+
+                    //驶出车辆总数
+                    let departTotal = this.todayData.departCarOfOutside + this.todayData.departCarOfInside
+                    //内部驶出车辆百分比
+                    this.todayData.departCarOfInsidePercen = this.$util.keepTwoDecimalFull(this.todayData.departCarOfInside / departTotal) * 100
+                    //外部驶出车辆百分比
+                    this.todayData.departCarOfOutsidePercen = 100 - this.todayData.departCarOfInsidePercen
+
+                    //内部与外部人车辆进出的比例
+
+                    let insideTotal = this.todayData.departCarOfInside + this.todayData.enterCarOfInside
+                    let outsideTotal = this.todayData.departCarOfOutside + this.todayData.enterCarOfOutside
+
+                    let carTotal = this.todayData.departCarOfInside + this.todayData.departCarOfOutside +
+                        this.todayData.enterCarOfInside + this.todayData.enterCarOfOutside
+
+                    this.pieData = {
+                        insideTotal,
+                        outsideTotal,
+                        carTotal,
+                        peopleNum: this.todayData.peopleNum
+                    }
+                    console.log(this.pieData);
+                })
+            },
+        }
+    };
 </script>
 
 <style lang="scss">
-	.bg-red{
-		background-color: #d10000;
-		color: #FFFFFF;
-	}
-	
-	.bg-green{
-		background-color: #11914d;
-		color: #FFFFFF;
-	}
-	
-	//描述
-	.desc{
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		padding:0 30rpx 0 50rpx;
-		
-		.progress{
-			margin-top: 15rpx;
-			margin-right: 10rpx;
-			width: 40rpx;
-			height: 10rpx;
-		}
-	}
-	
-	//当日统计
-	.today-statistics{
-		padding: 20rpx 40rpx;
-		display: flex;
-	}
-	
-	
-	//描述
-	.title{
-		padding: 30rpx;
-		display: flex;
-		
-		image{
-			width: 45rpx;
-			height: 45rpx;
-			display: block;
-			padding-top: 10rpx;
-			padding-right: 10rpx;
-		}
-		
-		text{
-			font-size: 36rpx;
-			font-weight: 800;
-		}
-	}
-	
-	
-	
-	//园区数据统计
-	
-	.data-statistics{
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-around;
-		.item{
-			box-shadow: 10rpx 10rpx 10rpx #d1d1d1;
-			width: 28%;
-			height: 140rpx;
-			margin: 20rpx 15rpx;
-			background-image: linear-gradient(to top right,#55aaff,#4759d0);
-			border-radius: 10rpx;
-			color: #FFFFFF;
-			
-			.data{
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				flex-direction: column;
-				font-size: 28rpx;
-				height: 100%;
-				
-				text:first-child{
-					margin-bottom: 10rpx;
-					font-size: 45rpx;
-				}
-			}
-		}
-		.item:hover{
-			box-shadow: 0rpx 0rpx 0rpx #d1d1d1;
-			background-color: $base-color;
-		}
-		
-		.item:active {
-			background-image: linear-gradient(to top right,#55aaff,#4759d0);
-			box-shadow: 10rpx 10rpx 10rpx #d1d1d1;
-			transform: translateY(4px);
-		}
-	}
-	
+    .bg-red {
+        background-color: #d10000;
+        color: #FFFFFF;
+    }
+
+    .bg-green {
+        background-color: #11914d;
+        color: #FFFFFF;
+    }
+
+    //描述
+    .desc {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 30 rpx 0 50 rpx;
+
+        .progress {
+            margin-top: 15 rpx;
+            margin-right: 10 rpx;
+            width: 40 rpx;
+            height: 10 rpx;
+        }
+    }
+
+    //当日统计
+    .today-statistics {
+        padding: 20 rpx 40 rpx;
+        display: flex;
+    }
+
+
+    //描述
+    .title {
+        padding: 30 rpx;
+        display: flex;
+
+        image {
+            width: 45 rpx;
+            height: 45 rpx;
+            display: block;
+            padding-top: 10 rpx;
+            padding-right: 10 rpx;
+        }
+
+        text {
+            font-size: 36 rpx;
+            font-weight: 800;
+        }
+    }
+
+
+    //园区数据统计
+
+    .data-statistics {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+
+        .item {
+            box-shadow: 10 rpx 10 rpx 10 rpx #d1d1d1;
+            width: 28%;
+            height: 140 rpx;
+            margin: 20 rpx 15 rpx;
+            background-image: linear-gradient(to top right, #55aaff, #4759d0);
+            border-radius: 10 rpx;
+            color: #FFFFFF;
+
+            .data {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                font-size: 28 rpx;
+                height: 100%;
+
+                text:first-child {
+                    margin-bottom: 10 rpx;
+                    font-size: 45 rpx;
+                }
+            }
+        }
+
+        .item:hover {
+            box-shadow: 0 rpx 0 rpx 0 rpx #d1d1d1;
+            background-color: $base-color;
+        }
+
+        .item:active {
+            background-image: linear-gradient(to top right, #55aaff, #4759d0);
+            box-shadow: 10 rpx 10 rpx 10 rpx #d1d1d1;
+            transform: translateY(4px);
+        }
+    }
+
 </style>

mini-program/garden-wxapp/pages/agency/comps/fire-service.vue

@@ -1,167 +1,173 @@
 <template>
-	<view class="">
-		<view class="padding-bottom-50">
-			<view class="title">
-				<image  src="../../../static/icon/tag1.png" mode=""></image>
-				<text >消防数据统计</text>
-			</view>
-			<view class="data-statistics">
-				<view class="item">
-					<view class="data" @click="jump('/pages/index/fire/list/list?fireType=0')">
-						<text>智能烟感</text>
-						<text>正常：{{detailData.smokeNormal}}</text>
-						<text>异常：{{detailData.smokeException}}</text>
-					</view>
-				</view>
-				<view class="item">
-					<view class="data" @click="jump('/pages/index/fire/list/list?fireType=1')">
-						<text>智能气感</text>
-						<text>正常：{{detailData.gasNormal}}</text>
-						<text>异常：{{detailData.gasException}}</text>
-					</view>
-				</view>
-				<view class="item" @click="jump('/pages/index/fire/list/list?fireType=2')">
-					<view class="data">
-						<text>智能消防</text>
-						<text>正常：{{detailData.hydrantNormal}}</text>
-						<text>异常：{{detailData.hydrantException}}</text>
-					</view>
-				</view>
-			</view>
-			<gauge :gaugeData="gaugeData" v-if="!$isEmpty(gaugeData)"></gauge>
-			<view class="text-center">
-				事件总数
-				<text class="text-red text-bold padding-left-10">{{total}}</text>
-			</view>
-		</view>
-	</view>
+    <view class="">
+        <view class="padding-bottom-50">
+            <view class="title">
+                <image src="../../../static/icon/tag1.png" mode=""></image>
+                <text>消防数据统计</text>
+            </view>
+            <view class="data-statistics">
+                <view class="item">
+                    <view class="data" @click="jump('/pages/index/fire/list/list?fireType=0')">
+                        <text>智能烟感</text>
+                        <text>正常：{{detailData.smokeNormal}}</text>
+                        <text>异常：{{detailData.smokeException}}</text>
+                    </view>
+                </view>
+                <view class="item">
+                    <view class="data" @click="jump('/pages/index/fire/list/list?fireType=1')">
+                        <text>智能气感</text>
+                        <text>正常：{{detailData.gasNormal}}</text>
+                        <text>异常：{{detailData.gasException}}</text>
+                    </view>
+                </view>
+                <view class="item" @click="jump('/pages/index/fire/list/list?fireType=2')">
+                    <view class="data">
+                        <text>智能消防</text>
+                        <text>正常：{{detailData.hydrantNormal}}</text>
+                        <text>异常：{{detailData.hydrantException}}</text>
+                    </view>
+                </view>
+            </view>
+            <gauge :gaugeData="gaugeData" v-if="!$isEmpty(gaugeData)"></gauge>
+            <view class="text-center">
+                事件总数
+                <text class="text-red text-bold padding-left-10">{{total}}</text>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-import gauge from "./canvas/gauge.vue"
-import curve from "./canvas/curve.vue"
-import line from "./canvas/Line.vue"
-var that;
-export default {
-	components:{
-		gauge,curve,line
-	},
-	data() {
-		return {
-			detailData:{},
-			gaugeData:{},
-			total:'',
-			gaugeData:{}
-		};
-	},
-	created() {
-		that = this;
-		this.fetchData()
-	},
-	methods: {
-		async fetchData(){
-			this.$api.statistical.getGateStatic().then(res=>{
-				this.detailData=res.data
-			})
-			let res=await this.$api.statistical.getDeviceJobStaticByApp()
-			this.total=res.data.deviceJobAmount
-			let resolvedAmount=res.data.resolvedAmount
-			let resolvingAmount=res.data.resolvingAmount
-			let resolvedPercen=this.$util.keepTwoDecimalFull(resolvedAmount/this.total)
-			this.gaugeData={
-				categories: [{
-					value: resolvedAmount,
-					color: '#2fc25b'
-				}, {
-					value: resolvingAmount,
-					color: '#f04864'
-				}],
-				series: [{
-					name: '处理率',
-					data: resolvedPercen,
-					color: '#5064eb'
-				}]
-			}
-		},
-		jump(url){
-			if (!this.$isEmpty(url)) {
-				uni.navigateTo({
-					url
-				})
-			}
-		}
-	}
-};
+    import gauge from "./canvas/gauge.vue"
+    import curve from "./canvas/curve.vue"
+    import line from "./canvas/Line.vue"
+
+    var that;
+    export default {
+        components: {
+            gauge, curve, line
+        },
+        data() {
+            return {
+                detailData: {},
+                gaugeData: {},
+                total: '',
+                gaugeData: {}
+            };
+        },
+        created() {
+            that = this;
+            this.fetchData()
+        },
+        methods: {
+            async fetchData() {
+                this.$api.statistical.getGateStatic().then(res => {
+                    this.detailData = res.data
+                })
+                let res = await this.$api.statistical.getDeviceJobStaticByApp()
+                this.total = res.data.deviceJobAmount
+                let resolvedAmount = res.data.resolvedAmount
+                let resolvingAmount = res.data.resolvingAmount
+                let resolvedPercen = this.$util.keepTwoDecimalFull(resolvedAmount / this.total)
+                this.gaugeData = {
+                    categories: [{
+                        value: resolvedAmount,
+                        color: '#2fc25b'
+                    }, {
+                        value: resolvingAmount,
+                        color: '#f04864'
+                    }],
+                    series: [{
+                        name: '处理率',
+                        data: resolvedPercen,
+                        color: '#5064eb'
+                    }]
+                }
+            },
+            jump(url) {
+                if (!this.$isEmpty(url)) {
+                    uni.navigateTo({
+                        url
+                    })
+                }
+            }
+        }
+    };
 </script>
 
 <style lang="scss">
-	//描述
-	.title{
-		padding: 30rpx;
-		display: flex;
-		
-		image{
-			width: 45rpx;
-			height: 45rpx;
-			display: block;
-			padding-top: 10rpx;
-			padding-right: 10rpx;
-		}
-		
-		text{
-			font-size: 36rpx;
-			font-weight: 800;
-		}
-	}
-	//消防设备统计
-	.data-statistics{
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		.item{
-			box-shadow: 10rpx 10rpx 10rpx #d1d1d1;
-			width: 30%;
-			height: 230rpx;
-			margin: 20rpx 10rpx;
-			background-image: linear-gradient(to top right,#55aaff,#4759d0);
-			background-color: $base-color;
-			border-radius: 10rpx;
-			color: #FFFFFF;
-			
-			.data{
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				flex-direction: column;
-				font-size: 28rpx;
-				height: 100%;
-				
-				text{
-					padding-bottom: 10rpx;
-				}
-				
-				text:first-child{
-					margin-bottom: 15rpx;
-					font-size: 36rpx;
-				}
-				text:nth-child(2){
-					color: #02f8f8;
-				}
-				text:nth-child(3){
-					color: #ff0a4b;
-				}
-			
-			}
-		}
-		.item:hover{
-			box-shadow: 0rpx 0rpx 0rpx #d1d1d1;
-			background-color: $base-color;
-		}
-		
-		.item:active {
-			background-image: linear-gradient(to top right,#55aaff,#4759d0);
-			box-shadow: 10rpx 10rpx 10rpx #d1d1d1;
-			transform: translateY(4px);
-		}
-	}
+    //描述
+    .title {
+        padding: 30 rpx;
+        display: flex;
+
+        image {
+            width: 45 rpx;
+            height: 45 rpx;
+            display: block;
+            padding-top: 10 rpx;
+            padding-right: 10 rpx;
+        }
+
+        text {
+            font-size: 36 rpx;
+            font-weight: 800;
+        }
+    }
+
+    //消防设备统计
+    .data-statistics {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        .item {
+            box-shadow: 10 rpx 10 rpx 10 rpx #d1d1d1;
+            width: 30%;
+            height: 230 rpx;
+            margin: 20 rpx 10 rpx;
+            background-image: linear-gradient(to top right, #55aaff, #4759d0);
+            background-color: $base-color;
+            border-radius: 10 rpx;
+            color: #FFFFFF;
+
+            .data {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                font-size: 28 rpx;
+                height: 100%;
+
+                text {
+                    padding-bottom: 10 rpx;
+                }
+
+                text:first-child {
+                    margin-bottom: 15 rpx;
+                    font-size: 36 rpx;
+                }
+
+                text:nth-child(2) {
+                    color: #02f8f8;
+                }
+
+                text:nth-child(3) {
+                    color: #ff0a4b;
+                }
+
+            }
+        }
+
+        .item:hover {
+            box-shadow: 0 rpx 0 rpx 0 rpx #d1d1d1;
+            background-color: $base-color;
+        }
+
+        .item:active {
+            background-image: linear-gradient(to top right, #55aaff, #4759d0);
+            box-shadow: 10 rpx 10 rpx 10 rpx #d1d1d1;
+            transform: translateY(4px);
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/auth/auth.vue

@@ -1,662 +1,688 @@
 <template>
-	<view class="">
-		<view style="padding: 0 20rpx 20rpx;" v-if="appletStatus==1">
-			<u-top-tips type="info" ref="uTips"></u-top-tips>
-			<u-alert-tips :show="show" type="warning" title="审核意见" :close-able="true"  :description="opinion"></u-alert-tips>
-			<view class="auth">
-				<view class="flex" >
-					<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-					<text class="text-lg">个人信息认证</text>
-				</view>
-				<view class="card">
-					<u-form :model="model"  ref="uForm" >
-						<u-form-item :required="true" :label-width="labelWidth"  label="姓名" >
-							<u-input  placeholder="请输入姓名" v-model="model.realName" type="text"></u-input>
-						</u-form-item>
-						<u-form-item :required="true" :label-width="labelWidth"   label="性别" >
-							<u-input  type="select" :select-open="sexSelectShow" v-model="sexSelectList[sexSelectIndex].text" placeholder="请选择性别" @click="sexSelectShow = true"></u-input>
-						</u-form-item>
-						<u-form-item :required="true"  label="身份证号"  :label-width="labelWidth">
-							<u-input maxlength="18"  placeholder="请输入身份证号" v-model="model.idcard" ></u-input>
-						</u-form-item>
-						<u-form-item :required="true"  label="手机号码"  :label-width="labelWidth">
-							<u-input maxlength="11" disabled  placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
-						</u-form-item>
-						<u-form-item :required="true" :border-bottom="false"  label="脸部信息采集"  :label-width="labelWidth"></u-form-item>
-					</u-form>
-					
-					<view @click="faceSelectShow=true" class="flex justify-center padding-bottom-50">
-						<view class=" ">
-							<upload-img
-							   :width="$isEmpty(model.face)?350:560"
-							   :height="$isEmpty(model.face)?350:420"
-							  :currentImage="model.face"
-							  bgsrc="https://szsq.nxzhsq.cn/community/miniofile/xlyq/face1.png"
-							  >
-							</upload-img>
-							<view class="text-center  padding-top-20 base-color" >
-							 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
-							 <text v-if="$isEmpty(model.face)">点击上传人脸</text>
-							 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-			<view class="auth">
-				<view class="flex" >
-					<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-					<text class="text-lg">企业信息认证</text>
-				</view>
-				<view class="card">
-					<u-form  :model="model"  ref="uForm" >
-						<u-form-item :required="true" :label-width="labelWidth"   label="公司园区" >
-							<u-input  type="select" :select-open="ganderSelectShow" v-model="gander"  placeholder="请选择工作园区" @click="ganderShow"></u-input>
-						</u-form-item>
-						<u-form-item :required="true" :label-width="labelWidth"   label="园区区域" >
-							<u-input  type="select" :select-open="residentialSelectShow" v-model="residential"  placeholder="请选择园区区域" @click="residentialShow"></u-input>
-						</u-form-item>
-						<u-form-item :required="true" :label-width="labelWidth"   label="所属企业" >
-							<u-input  type="select" :select-open="companySelectShow" v-model="company" placeholder="请选择所属企业" @click="companyShow"></u-input>
-						</u-form-item>
-					</u-form>
-				</view>
-			</view>
-			<view class="auth">
-				<view class="flex" >
-					<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-					<text class="text-lg">其他信息</text>
-				</view>
-				<view class="card">
-					<u-form :model="model"  ref="uForm" >
-						<u-form-item label-position="top" :border-bottom="false" :label-width="labelWidth"   label="备注(可选)" >
-							<u-input height="200" v-model="model.remarks" placeholder="填写备注信息" type="textarea" :border="border" />
-						</u-form-item>
-						<!-- <textarea value="" v-model="model.remarks" placeholder="填写备注信息" /> -->
-					</u-form>
-				</view>
-			</view>
-			
-			<!-- <view class="auth flex justify-between">
-				<view class="flex flex-direction">
-					<view class="">
-						<text style="font-size: 34rpx;" class="cuIcon-noticefill  base-color padding-right-10"></text>
-						<text class="text-lg">消息通知提醒</text>
-					</view>
-					<view class="padding-top-10 text-sm text-gray">
-						<text>开启订阅后，认证审核通知将推送到您的微信上</text>
-					</view>
-				</view>
-				<button v-if="subscribeShow" @click="subscribe" class="cu-btn sm round base-bg-color">
-					订阅
-				</button>
-				<button v-else @opensetting="opensetting" open-type="openSetting"class="cu-btn sm round base-bg-color">
-					订阅
-				</button>
-			</view> -->
-			<button @click="submit" v-if="canIUseGetUserProfile" :style="{marginBottom:safeAreaBottom}"   class="cu-btn base-bg-color round flex" style="padding: 40rpx 0;margin-top: 40rpx;">
-				<text v-text="operationType==0?'提交':'重新审核'"></text>
-			</button>
-			
-			<button v-else :style="{marginBottom:safeAreaBottom}" open-type="getUserInfo" @getuserinfo="submit"  class="cu-btn base-bg-color round flex" style="padding: 40rpx 0;margin-top: 40rpx;">
-				<text v-text="operationType==0?'提交':'重新审核'"></text>
-			</button>
-			
-			
-			
-			<!-- 性别 -->
-			<u-picker v-model="sexSelectShow" @confirm="sexSelectCallback" :range="sexSelectList" range-key="text" mode="selector"></u-picker>
-			<!-- 园区 -->
-			<u-picker v-model="ganderSelectShow" @confirm="ganderSelectCallback" :range="ganderSelectList" range-key="agencyName" mode="selector"></u-picker>
-			<!-- 区域 -->
-			<u-picker v-model="residentialSelectShow" @confirm="residentialSelectCallback" :range="residentialSelectList" range-key="name" mode="selector"></u-picker>
-			<!-- 企业 -->
-			<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="companySelectShow">
-				<view class="fixed cu-bar search bg-white">
-					<view class="search-form round">
-						<text class="cuIcon-search"></text>
-						<u-input style="width: 90%;" v-model="keyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
-					</view>
-					<!-- <view @click="fetchEnterpriseList" class="action">
-						<button class="cu-btn bg-blue shadow-blur round">搜索</button>
-					</view> -->
-				</view>
-				<scroll-view v-if="!$isEmpty(companySelectList)" @scrolltolower="scrolltolower" style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
-					<view @click="companySelectCallback(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in companySelectList" :key="index">
-						<text>{{item.enterpriseName}}</text>
-					</view>
-					<u-divider v-if="flag" height="80">没有更多了</u-divider>
-				</scroll-view>
-				<u-empty v-else name="search"></u-empty>
-			</u-popup>
-			<!-- <u-picker v-model="companySelectShow" @confirm="companySelectCallback" :range="companySelectList" range-key="enterpriseName" mode="selector"></u-picker> -->
-			<u-action-sheet @click="faceSelectCallback"  z-index="999999" :list="faceSelectList" v-model="faceSelectShow"></u-action-sheet>
-		</view>
-		<view v-else>
-			
-		</view>
-	</view>
+    <view class="">
+        <view style="padding: 0 20rpx 20rpx;" v-if="appletStatus==1">
+            <u-top-tips type="info" ref="uTips"></u-top-tips>
+            <u-alert-tips :show="show" type="warning" title="审核意见" :close-able="true"
+                          :description="opinion"></u-alert-tips>
+            <view class="auth">
+                <view class="flex">
+                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                           src="../../static/icon/tag1.png" mode=""></image>
+                    <text class="text-lg">个人信息认证</text>
+                </view>
+                <view class="card">
+                    <u-form :model="model" ref="uForm">
+                        <u-form-item :required="true" :label-width="labelWidth" label="姓名">
+                            <u-input placeholder="请输入姓名" v-model="model.realName" type="text"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" :label-width="labelWidth" label="性别">
+                            <u-input type="select" :select-open="sexSelectShow"
+                                     v-model="sexSelectList[sexSelectIndex].text" placeholder="请选择性别"
+                                     @click="sexSelectShow = true"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" label="身份证号" :label-width="labelWidth">
+                            <u-input maxlength="18" placeholder="请输入身份证号" v-model="model.idcard"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" label="手机号码" :label-width="labelWidth">
+                            <u-input maxlength="11" disabled placeholder="请输入手机号" v-model="model.phone"
+                                     type="number"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" :border-bottom="false" label="脸部信息采集"
+                                     :label-width="labelWidth"></u-form-item>
+                    </u-form>
+
+                    <view @click="faceSelectShow=true" class="flex justify-center padding-bottom-50">
+                        <view class=" ">
+                            <upload-img
+                                    :width="$isEmpty(model.face)?350:560"
+                                    :height="$isEmpty(model.face)?350:420"
+                                    :currentImage="model.face"
+                                    bgsrc="https://szsq.nxzhsq.cn/community/miniofile/xlyq/face1.png"
+                            >
+                            </upload-img>
+                            <view class="text-center  padding-top-20 base-color">
+                                <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
+                                <text v-if="$isEmpty(model.face)">点击上传人脸</text>
+                                <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="auth">
+                <view class="flex">
+                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                           src="../../static/icon/tag1.png" mode=""></image>
+                    <text class="text-lg">企业信息认证</text>
+                </view>
+                <view class="card">
+                    <u-form :model="model" ref="uForm">
+                        <u-form-item :required="true" :label-width="labelWidth" label="公司园区">
+                            <u-input type="select" :select-open="ganderSelectShow" v-model="gander"
+                                     placeholder="请选择工作园区" @click="ganderShow"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" :label-width="labelWidth" label="园区区域">
+                            <u-input type="select" :select-open="residentialSelectShow" v-model="residential"
+                                     placeholder="请选择园区区域" @click="residentialShow"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" :label-width="labelWidth" label="所属企业">
+                            <u-input type="select" :select-open="companySelectShow" v-model="company"
+                                     placeholder="请选择所属企业" @click="companyShow"></u-input>
+                        </u-form-item>
+                    </u-form>
+                </view>
+            </view>
+            <view class="auth">
+                <view class="flex">
+                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                           src="../../static/icon/tag1.png" mode=""></image>
+                    <text class="text-lg">其他信息</text>
+                </view>
+                <view class="card">
+                    <u-form :model="model" ref="uForm">
+                        <u-form-item label-position="top" :border-bottom="false" :label-width="labelWidth"
+                                     label="备注(可选)">
+                            <u-input height="200" v-model="model.remarks" placeholder="填写备注信息" type="textarea"
+                                     :border="border"/>
+                        </u-form-item>
+                        <!-- <textarea value="" v-model="model.remarks" placeholder="填写备注信息" /> -->
+                    </u-form>
+                </view>
+            </view>
+
+            <!-- <view class="auth flex justify-between">
+                <view class="flex flex-direction">
+                    <view class="">
+                        <text style="font-size: 34rpx;" class="cuIcon-noticefill  base-color padding-right-10"></text>
+                        <text class="text-lg">消息通知提醒</text>
+                    </view>
+                    <view class="padding-top-10 text-sm text-gray">
+                        <text>开启订阅后，认证审核通知将推送到您的微信上</text>
+                    </view>
+                </view>
+                <button v-if="subscribeShow" @click="subscribe" class="cu-btn sm round base-bg-color">
+                    订阅
+                </button>
+                <button v-else @opensetting="opensetting" open-type="openSetting"class="cu-btn sm round base-bg-color">
+                    订阅
+                </button>
+            </view> -->
+            <button @click="submit" v-if="canIUseGetUserProfile" :style="{marginBottom:safeAreaBottom}"
+                    class="cu-btn base-bg-color round flex" style="padding: 40rpx 0;margin-top: 40rpx;">
+                <text v-text="operationType==0?'提交':'重新审核'"></text>
+            </button>
+
+            <button v-else :style="{marginBottom:safeAreaBottom}" open-type="getUserInfo" @getuserinfo="submit"
+                    class="cu-btn base-bg-color round flex" style="padding: 40rpx 0;margin-top: 40rpx;">
+                <text v-text="operationType==0?'提交':'重新审核'"></text>
+            </button>
+
+
+            <!-- 性别 -->
+            <u-picker v-model="sexSelectShow" @confirm="sexSelectCallback" :range="sexSelectList" range-key="text"
+                      mode="selector"></u-picker>
+            <!-- 园区 -->
+            <u-picker v-model="ganderSelectShow" @confirm="ganderSelectCallback" :range="ganderSelectList"
+                      range-key="agencyName" mode="selector"></u-picker>
+            <!-- 区域 -->
+            <u-picker v-model="residentialSelectShow" @confirm="residentialSelectCallback"
+                      :range="residentialSelectList" range-key="name" mode="selector"></u-picker>
+            <!-- 企业 -->
+            <u-popup border-radius="60" height="60%" mode="bottom" v-model="companySelectShow">
+                <view class="fixed cu-bar search bg-white">
+                    <view class="search-form round">
+                        <text class="cuIcon-search"></text>
+                        <u-input style="width: 90%;" v-model="keyword" type="text" :adjust-position="false"
+                                 placeholder="请输入关键字搜索" confirm-type="search"/>
+                    </view>
+                    <!-- <view @click="fetchEnterpriseList" class="action">
+                        <button class="cu-btn bg-blue shadow-blur round">搜索</button>
+                    </view> -->
+                </view>
+                <scroll-view v-if="!$isEmpty(companySelectList)" @scrolltolower="scrolltolower"
+                             style="padding-top: 110rpx;height: 100%;" :scroll-y="true">
+                    <view @click="companySelectCallback(item)" hover-class="hoverClass"
+                          class="text-center padding-30 solid-bottom" v-for="(item,index) in companySelectList"
+                          :key="index">
+                        <text>{{item.enterpriseName}}</text>
+                    </view>
+                    <u-divider v-if="flag" height="80">没有更多了</u-divider>
+                </scroll-view>
+                <u-empty v-else name="search"></u-empty>
+            </u-popup>
+            <!-- <u-picker v-model="companySelectShow" @confirm="companySelectCallback" :range="companySelectList" range-key="enterpriseName" mode="selector"></u-picker> -->
+            <u-action-sheet @click="faceSelectCallback" z-index="999999" :list="faceSelectList"
+                            v-model="faceSelectShow"></u-action-sheet>
+        </view>
+        <view v-else>
+
+        </view>
+    </view>
 </template>
 
 <script>
-	import uploadImg from '@/components/uploadimg/uploadImg.vue'
-	let that;
-	export default {
-		components:{
-		   uploadImg
-		},
-		data() {
-			return {
-				//0 体验版 1正式版
-				appletStatus:0,
-				
-				open:false,
-				
-				// 0:用户认证 1:重新审核
-				operationType:0,
-				phone:'',//当operationType为1时需要传过来
-				opinion:'',//审核不通过时的审核意见
-				show:false,//当有审核意见时才显示
-				
-				labelWidth:'200',
-				model: {
-					avatar:'',
-					name:'',//昵称
-					openId:'',
-					realName: '',
-					enterpriseId:'',
-					enterpriseName:'',
-					face:'',
-					sex: '',	//性别 1 男 2 女
-					idcard:'',
-					phone: '',
-					remarks:''
-				},
-				//性别
-				sexSelectList: [{text: '男',value:1},{text: '女',value:2}],
-				sexSelectShow: false,
-				sexSelectIndex:0,
-				//园区
-				gander:'',
-				ganderSelectList: [],
-				ganderSelectShow: false,
-				ganderSelectIndex:0,
-				//区域
-				residential:'',
-				residentialId:'',
-				residentialSelectList: [],
-				residentialSelectShow: false,
-				residentialSelectIndex:0,
-				//企业
-				current:1,
-				flag:false,
-				keyword:'',
-				
-				company:'',
-				companySelectList: [],
-				companySelectShow: false,
-				//上传人脸的方式
-				faceSelectList: [{
-					text: '相册上传',
-				}, {
-					text: '拍照上传'
-				}],
-				faceSelectShow:false,
-				//验证码
-				codeTips: '',
-				subscribeShow:true,
-				
-				//获取头像信息,兼容低版本
-				canIUseGetUserProfile: false,
-			}
-		},
-		watch:{
-			keyword(){
-				let that=this
-				//节流函数
-				if (this.timer){
-					clearTimeout(this.timer)//阻止setTimeout函数的执行
-				}
-				this.timer = setTimeout(() => {
-					that.current=1
-					that.companySelectList=[]
-					that.fetchEnterpriseList(that.residentialId)
-				}, 500)
-			},
-		},
-		computed: {
-		  //ios底部安全区域
-		  safeAreaBottom() {
-		    let info = uni.getSystemInfoSync()
-		    let safe = 20
-		    if (
-		      info &&
-		      ['devtools', 'ios'].includes(info.platform) &&
-		      info.statusBarHeight > safe
-		    ) {
-		      return info.statusBarHeight - safe+'px'
-		    }
-		    return 0
-		  }
-		},
-		onShow() {
-			this.handelAppletAudit()
-			
-			let currPage=this.getPageCtx()
-			if (!this.$isEmpty(currPage.data.image)) {
-				this.uploadFile(currPage.data.image)
-			}
-		},
-		
-		onLoad(options) {
-			
-			that=this
-			
-			//兼容低版本获取头像的方式
-			if (uni.getUserProfile) {
-				this.canIUseGetUserProfile=false
-			}
-			
-			if (!this.$isEmpty(options.operationType)) {
-				this.operationType=options.operationType
-			}
-			this.fetchAgencyList()
-			if (this.operationType==0) {
-				//用户认证
-				this.getOpenid()
-				if (!this.$isEmpty(options.phone)) {
-					this.model.phone=options.phone
-				}
-			}else{
-				//用户重新审核
-				this.phone=options.phone
-				this.fetchUserInfo()
-			}
-		},
-		methods: {
-			handelAppletAudit(){
-				this.appletStatus=uni.getStorageSync("appletStatus")
-				if (this.appletStatus==1) {
-					uni.setNavigationBarTitle({
-						title:'员工认证'
-					})
-				}else{
-					uni.setNavigationBarTitle({
-						title:'待开发'
-					})
-				}
-			},
-			/**
-			 * 重新审核操作时，加载用户的认证信息
-			 */
-			async fetchUserInfo(){
-				if (this.$isEmpty(getApp().globalData.userInfo)) {
-					let res=await this.$api.enterprisestaff.page({phone:this.phone})
-					this.model=res.data.records[0]
-				}else{
-					this.model=getApp().globalData.userInfo
-				}
-				if (this.model.sex==2) {
-					this.sexSelectIndex=1
-				}
-				this.opinion=this.model.opinion
-				if (!this.$isEmpty(this.opinion)) {
-					this.show=true
-				}
-				this.fetchResidentialList(this.model.agencyId)
-				this.fetchEnterpriseList(this.model.residentialId)
-				this.gander=this.model.agencyName
-				this.residential=this.model.residentialName
-				this.company=this.model.enterpriseName
-			},
-			/**
-			 * 获取openid
-			 */
-			getOpenid(){
-				uni.login({
-					success: (res) => {
-						let data={
-							appId:this.$api.wxData.appId,
-							jsCode:res.code,
-							secret:this.$api.wxData.secret
-						}
-						this.$api.wxApi.getOpenId(data).then(res=>{
-							let resData= JSON.parse(res.data)
-							this.model.openId=resData.openid
-							this.$cache.put('openid',resData.openid)
-						})
-					}
-				})
-			},
-			/**
-			 * 提交审核
-			 */
-			async submit(e){
-				let userInfo={}
-				try{
-					if (this.canIUseGetUserProfile) {
-						let res=await this.$mpi.getUserProfile()
-						userInfo=res.userInfo
-					}else{
-						userInfo=e.detail.userInfo
-					}
-				}catch(e){
-					this.$refs.uTips.show({
-						title: '认证失败，获取头像昵称失败',
-						type: 'error',
-						duration: '3000'
-					})
-					return
-				}
-				if (this.$isEmpty(userInfo)) {
-					this.$refs.uTips.show({
-						title: '认证失败，获取头像昵称失败',
-						type: 'error',
-						duration: '3000'
-					})
-					return
-				}
-				this.model.avatar=userInfo.avatarUrl
-				this.model.name=userInfo.nickName
-				this.model.sex=this.sexSelectList[this.sexSelectIndex].value || 1
-				if (this.$isEmpty(this.model.realName)) {
-					this.$u.toast('请输入您的姓名')
-					return
-				}
-				if (this.$isEmpty(this.model.idcard)) {
-					this.$u.toast('请输入身份证号')
-					return
-				}
-				if (!this.$u.test.idCard(this.model.idcard)) {
-					this.$u.toast('请输入正确的身份证号')
-					return
-				}
-				if (this.$isEmpty(this.model.phone)) {
-					this.$u.toast('请输入手机号码')
-					return
-				}
-				if (!this.$u.test.mobile(this.model.phone)) {
-					this.$u.toast('请输入正确的手机号码')
-					return
-				}
-				if (this.$isEmpty(this.model.face)) {
-					this.$u.toast('请上传人脸信息')
-					return
-				}
-				if (this.$isEmpty(this.model.enterpriseId)) {
-					this.$u.toast('请选择所属企业')
-					return
-				}
-				if (this.operationType==1) {
-					//重新审核
-					this.model.examine=0
-				}
-				this.model.createType=1 //1小程序认证方式 0：后台数据导入
-				let res=await this.$api.enterprisestaff.submit(this.model)
-				if (res.code==200) {
-					if (this.operationType==0) {
-						that.$showModel('提交成功，请耐心等待企业管理者审核',false).then(res=>{
-							uni.reLaunch({
-								url:"/pages/login/login"
-							})
-						})
-					}else{
-						that.$showModel('操作成功',false).then(res=>{
-							this.$navigateBack()
-						})
-					}
-					await this.$mpi.subscribe(that.$staffTmplIds)
-					this.getOpenListAndSendMsg()
-				}else{
-					this.$u.toast(res.msg)
-				}
-			},
-			async send(openId){
-				let tokenData={
-					grantType:this.$api.wxData.subscribe_grant_type,
-					appId:this.$api.wxData.appId,
-					secret:this.$api.wxData.secret
-				}
-				let res=await this.$api.wxApi.getAccessToken(tokenData)
-				let token=JSON.parse(res.data).access_token
-				let subscribeData={
-					accessToken:token,
-					touser:openId,
-					lang:"zh_CN",
-					page:'/pages/index/staffAudit/list',
-					miniprogramState:this.$miniprogramState,
-				    templateId: this.$adminTmplIds[2],
-					  "data": {
-						  "thing5": {
-							  "value": this.model.realName
-						  },
-						  "phone_number6":{
-							  "value": this.model.phone
-						  },
-						  "time3": {
-							  "value": this.$dateTime.format(new Date())
-						  }
-						}
-				}
-				let resp=await this.$api.wxApi.subscribe(subscribeData)
-				console.log(resp);
-			},
-			async getOpenListAndSendMsg(){
-				let agencyRes=await this.$api.getManagerOpenList({agencyId:this.model.agencyId})
-				let enterpriseRes=await this.$api.getManagerOpenList({enterpriseId:this.model.enterpriseId})
-				let openIds=[...agencyRes.data,...enterpriseRes.data]
-				openIds.forEach(item=>{
-					this.send(item)
-				})
-			},
-		//园区 begin
-			/**
-			 * 显示园区
-			 */
-			ganderShow(){
-				this.ganderSelectShow=true
-			},
-			/**
-			 * 获取园区列表
-			 */
-			fetchAgencyList(){
-				this.$api.agency.page().then(res=>{
-					this.ganderSelectList=res.data
-				})
-			},
-			/**
-			 * 选择园区后的回调
-			 * @param {Object} e
-			 */
-			ganderSelectCallback(e) {
-				uni.hideKeyboard();
-				//先重置区域和企业
-				if (this.ganderSelectIndex!=e[0]) {
-					this.resetResidential()
-					this.resetEnterprise()
-				}
-				this.ganderSelectIndex=e[0]
-				this.gander=this.ganderSelectList[this.ganderSelectIndex].agencyName
-				this.model.agencyName=this.ganderSelectList[this.ganderSelectIndex].agencyName
-				this.model.agencyId=this.ganderSelectList[this.ganderSelectIndex].id
-				//加载区域
-				this.fetchResidentialList(this.model.agencyId)
-			},
-		//园区 end
-			
-		//区域 begin
-			/**
-			 * 重置区域数据
-			 * @param {Object} 
-			 */
-			resetResidential(){
-				this.residentialSelectList=[]
-				this.residential=''
-				this.residentialSelectIndex=0
-				this.model.residentialName=''
-				this.model.residentialId=''
-			},
-			/**	
-			 * 根据园区id获取区域列表
-			 */
-			fetchResidentialList(agencyId){
-				this.$api.residential.page({agencyId:agencyId,size:300}).then(res=>{
-					this.residentialSelectList=res.data.records
-				})
-			},
-			//显示区域
-			residentialShow(){
-				if (this.$isEmpty(this.gander)) {
-					//未选择园区提示先选择园区
-					this.$u.toast("请先选择园区")
-					return
-				}
-				this.residentialSelectShow=true
-			},
-			/**
-			 * 选择区域的回调
-			 */
-			residentialSelectCallback(e){
-				uni.hideKeyboard();
-				//先重置数据
-				if (this.residentialSelectIndex!=e[0]) {
-					this.resetEnterprise()
-				}
-				this.residentialSelectIndex=e[0]
-				this.residential=this.residentialSelectList[this.residentialSelectIndex].name
-				this.residentialId=this.residentialSelectList[this.residentialSelectIndex].id
-				this.model.residentialName=this.residentialSelectList[this.residentialSelectIndex].name
-				this.model.residentialId=this.residentialSelectList[this.residentialSelectIndex].id
-				//加载区域下的企业
-				this.fetchEnterpriseList(this.residentialId)
-			},
-		//区域 end
-			
-		//企业 begin
-			/**
-			 * 重置企业数据
-			 */
-			resetEnterprise(){
-				this.companySelectList=[]
-				this.current=1
-				this.company=''
-				this.model.enterpriseName=''
-				this.model.enterpriseId=''
-			},
-			/**
-			 * 根据 区域id 获取 企业列表
-			 */
-			fetchEnterpriseList(residentialId){
-				let params={
-					residentialId:residentialId,
-					current:this.current,
-					enterpriseName:this.keyword
-				}
-				this.$api.enterprise.page(params).then(res=>{
-					this.companySelectList = [...this.companySelectList,...res.data.records]
-				})
-			},
-			/**
-			 * @param {Object} 下拉加载更多企业
-			 */
-			scrolltolower(e){
-				 if(this.companySelectList.length<this.current*10){
-					 this.flag=true
-				   return
-				}else{
-					this.current++
-					this.fetchEnterpriseList(this.residentialId)
-				}
-				
-			},
-			/**
-			 * 显示企业
-			 */
-			companyShow(){
-				if (this.$isEmpty(this.residential)) {
-					//未选择区域
-					this.$u.toast("请选择区域")
-					return
-				}
-				this.companySelectShow=true
-			},
-			//公司
-			companySelectCallback(item) {
-				this.model.enterpriseId=item.id
-				this.model.enterpriseName=item.enterpriseName
-				this.company=item.enterpriseName
-				this.companySelectShow=false
-			},
-			
-		//企业 end
-			
-			/**
-			 * 获取页面对象
-			 */
-			getPageCtx(idx = 0){
-			  let pages = getCurrentPages()
-			  if (pages.length > 0) {
-			    return pages[pages.length - 1 - idx] || {}
-			  }
-			  return {}
-			},
-			//性别
-			sexSelectCallback(e) {
-				uni.hideKeyboard();
-				this.sexSelectIndex=e[0]
-			},
-			
-			faceSelectCallback(index){
-				if (index==0) {
-					//图片上传
-					this.chooseImage()
-				} else if(index==1){
-					//拍照上传
-					uni.navigateTo({
-						url:'/pages/my-camera/my-camera'
-					})
-				}
-			},
-			//点击上传图片事件
-			chooseImage: function () {
-			  uni.chooseImage({
-			    count: 1,
-			    //最多可以选择的图片张数，默认9
-			    sourceType: ['album'],
-			    sizeType: ['compressed'],
-			    //可选择原图或压缩后的图片
-			    success: res => {
-			      that.uploadFile(res.tempFilePaths[0])
-			    }
-			  });
-			},
-			//处理照片，拍照上传和相册上传的共同处理方法
-			uploadFile(imgUrl){
-				this.$api.uploadFile.submit(imgUrl).then(res=>{
-					that.model.face=res.data
-				})
-			},
-		},
-	}
+    import uploadImg from '@/components/uploadimg/uploadImg.vue'
+
+    let that;
+    export default {
+        components: {
+            uploadImg
+        },
+        data() {
+            return {
+                //0 体验版 1正式版
+                appletStatus: 0,
+
+                open: false,
+
+                // 0:用户认证 1:重新审核
+                operationType: 0,
+                phone: '',//当operationType为1时需要传过来
+                opinion: '',//审核不通过时的审核意见
+                show: false,//当有审核意见时才显示
+
+                labelWidth: '200',
+                model: {
+                    avatar: '',
+                    name: '',//昵称
+                    openId: '',
+                    realName: '',
+                    enterpriseId: '',
+                    enterpriseName: '',
+                    face: '',
+                    sex: '',	//性别 1 男 2 女
+                    idcard: '',
+                    phone: '',
+                    remarks: ''
+                },
+                //性别
+                sexSelectList: [{text: '男', value: 1}, {text: '女', value: 2}],
+                sexSelectShow: false,
+                sexSelectIndex: 0,
+                //园区
+                gander: '',
+                ganderSelectList: [],
+                ganderSelectShow: false,
+                ganderSelectIndex: 0,
+                //区域
+                residential: '',
+                residentialId: '',
+                residentialSelectList: [],
+                residentialSelectShow: false,
+                residentialSelectIndex: 0,
+                //企业
+                current: 1,
+                flag: false,
+                keyword: '',
+
+                company: '',
+                companySelectList: [],
+                companySelectShow: false,
+                //上传人脸的方式
+                faceSelectList: [{
+                    text: '相册上传',
+                }, {
+                    text: '拍照上传'
+                }],
+                faceSelectShow: false,
+                //验证码
+                codeTips: '',
+                subscribeShow: true,
+
+                //获取头像信息,兼容低版本
+                canIUseGetUserProfile: false,
+            }
+        },
+        watch: {
+            keyword() {
+                let that = this
+                //节流函数
+                if (this.timer) {
+                    clearTimeout(this.timer)//阻止setTimeout函数的执行
+                }
+                this.timer = setTimeout(() => {
+                    that.current = 1
+                    that.companySelectList = []
+                    that.fetchEnterpriseList(that.residentialId)
+                }, 500)
+            },
+        },
+        computed: {
+            //ios底部安全区域
+            safeAreaBottom() {
+                let info = uni.getSystemInfoSync()
+                let safe = 20
+                if (
+                    info &&
+                    ['devtools', 'ios'].includes(info.platform) &&
+                    info.statusBarHeight > safe
+                ) {
+                    return info.statusBarHeight - safe + 'px'
+                }
+                return 0
+            }
+        },
+        onShow() {
+            this.handelAppletAudit()
+
+            let currPage = this.getPageCtx()
+            if (!this.$isEmpty(currPage.data.image)) {
+                this.uploadFile(currPage.data.image)
+            }
+        },
+
+        onLoad(options) {
+
+            that = this
+
+            //兼容低版本获取头像的方式
+            if (uni.getUserProfile) {
+                this.canIUseGetUserProfile = false
+            }
+
+            if (!this.$isEmpty(options.operationType)) {
+                this.operationType = options.operationType
+            }
+            this.fetchAgencyList()
+            if (this.operationType == 0) {
+                //用户认证
+                this.getOpenid()
+                if (!this.$isEmpty(options.phone)) {
+                    this.model.phone = options.phone
+                }
+            } else {
+                //用户重新审核
+                this.phone = options.phone
+                this.fetchUserInfo()
+            }
+        },
+        methods: {
+            handelAppletAudit() {
+                this.appletStatus = uni.getStorageSync("appletStatus")
+                if (this.appletStatus == 1) {
+                    uni.setNavigationBarTitle({
+                        title: '员工认证'
+                    })
+                } else {
+                    uni.setNavigationBarTitle({
+                        title: '待开发'
+                    })
+                }
+            },
+            /**
+             * 重新审核操作时，加载用户的认证信息
+             */
+            async fetchUserInfo() {
+                if (this.$isEmpty(getApp().globalData.userInfo)) {
+                    let res = await this.$api.enterprisestaff.page({phone: this.phone})
+                    this.model = res.data.records[0]
+                } else {
+                    this.model = getApp().globalData.userInfo
+                }
+                if (this.model.sex == 2) {
+                    this.sexSelectIndex = 1
+                }
+                this.opinion = this.model.opinion
+                if (!this.$isEmpty(this.opinion)) {
+                    this.show = true
+                }
+                this.fetchResidentialList(this.model.agencyId)
+                this.fetchEnterpriseList(this.model.residentialId)
+                this.gander = this.model.agencyName
+                this.residential = this.model.residentialName
+                this.company = this.model.enterpriseName
+            },
+            /**
+             * 获取openid
+             */
+            getOpenid() {
+                uni.login({
+                    success: (res) => {
+                        let data = {
+                            appId: this.$api.wxData.appId,
+                            jsCode: res.code,
+                            secret: this.$api.wxData.secret
+                        }
+                        this.$api.wxApi.getOpenId(data).then(res => {
+                            let resData = JSON.parse(res.data)
+                            this.model.openId = resData.openid
+                            this.$cache.put('openid', resData.openid)
+                        })
+                    }
+                })
+            },
+            /**
+             * 提交审核
+             */
+            async submit(e) {
+                let userInfo = {}
+                try {
+                    if (this.canIUseGetUserProfile) {
+                        let res = await this.$mpi.getUserProfile()
+                        userInfo = res.userInfo
+                    } else {
+                        userInfo = e.detail.userInfo
+                    }
+                } catch (e) {
+                    this.$refs.uTips.show({
+                        title: '认证失败，获取头像昵称失败',
+                        type: 'error',
+                        duration: '3000'
+                    })
+                    return
+                }
+                if (this.$isEmpty(userInfo)) {
+                    this.$refs.uTips.show({
+                        title: '认证失败，获取头像昵称失败',
+                        type: 'error',
+                        duration: '3000'
+                    })
+                    return
+                }
+                this.model.avatar = userInfo.avatarUrl
+                this.model.name = userInfo.nickName
+                this.model.sex = this.sexSelectList[this.sexSelectIndex].value || 1
+                if (this.$isEmpty(this.model.realName)) {
+                    this.$u.toast('请输入您的姓名')
+                    return
+                }
+                if (this.$isEmpty(this.model.idcard)) {
+                    this.$u.toast('请输入身份证号')
+                    return
+                }
+                if (!this.$u.test.idCard(this.model.idcard)) {
+                    this.$u.toast('请输入正确的身份证号')
+                    return
+                }
+                if (this.$isEmpty(this.model.phone)) {
+                    this.$u.toast('请输入手机号码')
+                    return
+                }
+                if (!this.$u.test.mobile(this.model.phone)) {
+                    this.$u.toast('请输入正确的手机号码')
+                    return
+                }
+                if (this.$isEmpty(this.model.face)) {
+                    this.$u.toast('请上传人脸信息')
+                    return
+                }
+                if (this.$isEmpty(this.model.enterpriseId)) {
+                    this.$u.toast('请选择所属企业')
+                    return
+                }
+                if (this.operationType == 1) {
+                    //重新审核
+                    this.model.examine = 0
+                }
+                this.model.createType = 1 //1小程序认证方式 0：后台数据导入
+                let res = await this.$api.enterprisestaff.submit(this.model)
+                if (res.code == 200) {
+                    if (this.operationType == 0) {
+                        that.$showModel('提交成功，请耐心等待企业管理者审核', false).then(res => {
+                            uni.reLaunch({
+                                url: "/pages/login/login"
+                            })
+                        })
+                    } else {
+                        that.$showModel('操作成功', false).then(res => {
+                            this.$navigateBack()
+                        })
+                    }
+                    await this.$mpi.subscribe(that.$staffTmplIds)
+                    this.getOpenListAndSendMsg()
+                } else {
+                    this.$u.toast(res.msg)
+                }
+            },
+            async send(openId) {
+                let tokenData = {
+                    grantType: this.$api.wxData.subscribe_grant_type,
+                    appId: this.$api.wxData.appId,
+                    secret: this.$api.wxData.secret
+                }
+                let res = await this.$api.wxApi.getAccessToken(tokenData)
+                let token = JSON.parse(res.data).access_token
+                let subscribeData = {
+                    accessToken: token,
+                    touser: openId,
+                    lang: "zh_CN",
+                    page: '/pages/index/staffAudit/list',
+                    miniprogramState: this.$miniprogramState,
+                    templateId: this.$adminTmplIds[2],
+                    "data": {
+                        "thing5": {
+                            "value": this.model.realName
+                        },
+                        "phone_number6": {
+                            "value": this.model.phone
+                        },
+                        "time3": {
+                            "value": this.$dateTime.format(new Date())
+                        }
+                    }
+                }
+                let resp = await this.$api.wxApi.subscribe(subscribeData)
+                console.log(resp);
+            },
+            async getOpenListAndSendMsg() {
+                let agencyRes = await this.$api.getManagerOpenList({agencyId: this.model.agencyId})
+                let enterpriseRes = await this.$api.getManagerOpenList({enterpriseId: this.model.enterpriseId})
+                let openIds = [...agencyRes.data, ...enterpriseRes.data]
+                openIds.forEach(item => {
+                    this.send(item)
+                })
+            },
+            //园区 begin
+            /**
+             * 显示园区
+             */
+            ganderShow() {
+                this.ganderSelectShow = true
+            },
+            /**
+             * 获取园区列表
+             */
+            fetchAgencyList() {
+                this.$api.agency.page().then(res => {
+                    this.ganderSelectList = res.data
+                })
+            },
+            /**
+             * 选择园区后的回调
+             * @param {Object} e
+             */
+            ganderSelectCallback(e) {
+                uni.hideKeyboard();
+                //先重置区域和企业
+                if (this.ganderSelectIndex != e[0]) {
+                    this.resetResidential()
+                    this.resetEnterprise()
+                }
+                this.ganderSelectIndex = e[0]
+                this.gander = this.ganderSelectList[this.ganderSelectIndex].agencyName
+                this.model.agencyName = this.ganderSelectList[this.ganderSelectIndex].agencyName
+                this.model.agencyId = this.ganderSelectList[this.ganderSelectIndex].id
+                //加载区域
+                this.fetchResidentialList(this.model.agencyId)
+            },
+            //园区 end
+
+            //区域 begin
+            /**
+             * 重置区域数据
+             * @param {Object}
+             */
+            resetResidential() {
+                this.residentialSelectList = []
+                this.residential = ''
+                this.residentialSelectIndex = 0
+                this.model.residentialName = ''
+                this.model.residentialId = ''
+            },
+            /**
+             * 根据园区id获取区域列表
+             */
+            fetchResidentialList(agencyId) {
+                this.$api.residential.page({agencyId: agencyId, size: 300}).then(res => {
+                    this.residentialSelectList = res.data.records
+                })
+            },
+            //显示区域
+            residentialShow() {
+                if (this.$isEmpty(this.gander)) {
+                    //未选择园区提示先选择园区
+                    this.$u.toast("请先选择园区")
+                    return
+                }
+                this.residentialSelectShow = true
+            },
+            /**
+             * 选择区域的回调
+             */
+            residentialSelectCallback(e) {
+                uni.hideKeyboard();
+                //先重置数据
+                if (this.residentialSelectIndex != e[0]) {
+                    this.resetEnterprise()
+                }
+                this.residentialSelectIndex = e[0]
+                this.residential = this.residentialSelectList[this.residentialSelectIndex].name
+                this.residentialId = this.residentialSelectList[this.residentialSelectIndex].id
+                this.model.residentialName = this.residentialSelectList[this.residentialSelectIndex].name
+                this.model.residentialId = this.residentialSelectList[this.residentialSelectIndex].id
+                //加载区域下的企业
+                this.fetchEnterpriseList(this.residentialId)
+            },
+            //区域 end
+
+            //企业 begin
+            /**
+             * 重置企业数据
+             */
+            resetEnterprise() {
+                this.companySelectList = []
+                this.current = 1
+                this.company = ''
+                this.model.enterpriseName = ''
+                this.model.enterpriseId = ''
+            },
+            /**
+             * 根据 区域id 获取 企业列表
+             */
+            fetchEnterpriseList(residentialId) {
+                let params = {
+                    residentialId: residentialId,
+                    current: this.current,
+                    enterpriseName: this.keyword
+                }
+                this.$api.enterprise.page(params).then(res => {
+                    this.companySelectList = [...this.companySelectList, ...res.data.records]
+                })
+            },
+            /**
+             * @param {Object} 下拉加载更多企业
+             */
+            scrolltolower(e) {
+                if (this.companySelectList.length < this.current * 10) {
+                    this.flag = true
+                    return
+                } else {
+                    this.current++
+                    this.fetchEnterpriseList(this.residentialId)
+                }
+
+            },
+            /**
+             * 显示企业
+             */
+            companyShow() {
+                if (this.$isEmpty(this.residential)) {
+                    //未选择区域
+                    this.$u.toast("请选择区域")
+                    return
+                }
+                this.companySelectShow = true
+            },
+            //公司
+            companySelectCallback(item) {
+                this.model.enterpriseId = item.id
+                this.model.enterpriseName = item.enterpriseName
+                this.company = item.enterpriseName
+                this.companySelectShow = false
+            },
+
+            //企业 end
+
+            /**
+             * 获取页面对象
+             */
+            getPageCtx(idx = 0) {
+                let pages = getCurrentPages()
+                if (pages.length > 0) {
+                    return pages[pages.length - 1 - idx] || {}
+                }
+                return {}
+            },
+            //性别
+            sexSelectCallback(e) {
+                uni.hideKeyboard();
+                this.sexSelectIndex = e[0]
+            },
+
+            faceSelectCallback(index) {
+                if (index == 0) {
+                    //图片上传
+                    this.chooseImage()
+                } else if (index == 1) {
+                    //拍照上传
+                    uni.navigateTo({
+                        url: '/pages/my-camera/my-camera'
+                    })
+                }
+            },
+            //点击上传图片事件
+            chooseImage: function () {
+                uni.chooseImage({
+                    count: 1,
+                    //最多可以选择的图片张数，默认9
+                    sourceType: ['album'],
+                    sizeType: ['compressed'],
+                    //可选择原图或压缩后的图片
+                    success: res => {
+                        that.uploadFile(res.tempFilePaths[0])
+                    }
+                });
+            },
+            //处理照片，拍照上传和相册上传的共同处理方法
+            uploadFile(imgUrl) {
+                this.$api.uploadFile.submit(imgUrl).then(res => {
+                    that.model.face = res.data
+                })
+            },
+        },
+    }
 </script>
 
 <style lang="scss">
-	page{
-		background-color: #FFFFFF;
-	}
-	.auth{
-		padding: 40rpx 10rpx;
-		.card{
-			margin-top: 20rpx;
-			padding: 0 30rpx;
-			box-sizing: border-box;
-			border-radius: 12rpx;
-			box-shadow: 0 -10rpx rgba(248, 248, 248,.9) ,0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
-			.item{
-				padding:30rpx 0;
-				display: flex;
-				justify-content: space-between;
-			}
-		}
-	}
+    page {
+        background-color: #FFFFFF;
+    }
+
+    .auth {
+        padding: 40 rpx 10 rpx;
+
+        .card {
+            margin-top: 20 rpx;
+            padding: 0 30 rpx;
+            box-sizing: border-box;
+            border-radius: 12 rpx;
+            box-shadow: 0 -10rpx rgba(248, 248, 248, .9), 0 10 rpx rgba(248, 248, 248, .9), -10rpx 0 rpx rgba(248, 248, 248, .9), 10 rpx 0 rpx rgba(248, 248, 248, .9);
+
+            .item {
+                padding: 30 rpx 0;
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/company/company.vue

@@ -1,248 +1,260 @@
 <template>
-	<view class="padding-bottom-20">
-		<swiper   class="screen-swiper square-dot "  :indicator-dots="true" :circular="true"
-		 :autoplay="true" interval="5000" duration="500">
-			<swiper-item v-for="(item,index) in bannerList" :key="index">
-				<image   :src="item.banners" mode="aspectFill" ></image>
-			</swiper-item>
-		</swiper>
-		
-		<view class="card">
-			<view class="flex flex-direction justify-center padding-left-20">
-				<text class="text-bold  text-lg" style="padding-bottom: 12rpx;">{{detail.enterpriseName}}</text>
-				<text class="text-sm">{{detail.enterpriseType}}</text>
-			</view>
-		</view>
-		<view class="desc">
-			<view class="flex">
-				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-				<text class="text-lg text-bold">公司简介</text>
-			</view>
-			<view class="sub-title">
-				<text style="padding-left: 60rpx;">
-					{{detail.enterpriseIntroduce}}
-				</text>
-			</view>
-		</view>
-		<view class="bg-white text-black">
-			<view class="flex padding-left-30">
-				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-				<text class="text-lg text-bold">其他信息</text>
-			</view>
-			<view class="cu-list menu text-df padding-top-20">
-				<view class="cu-item">
-					<view class="content">
-						<u-icon size="34" color="#5064eb" name="account" style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
-						<text class="text-lg">法定代表人</text>
-					</view>
-					<view class="action">
-						<text>{{detail.representative}}</text>
-					</view>
-				</view>
-				
-				<view class="cu-item">
-					<view class="content">
-						<u-icon size="38" color="#5064eb" name="plus-circle" style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
-						<text class="text-lg">统一社会信用代码</text>
-					</view>
-					<view class="action">
-						<text>{{detail.creditCode}}</text>
-					</view>
-				</view>
-				
-				<view class="cu-item">
-					<view class="content">
-						<u-icon size="38" color="#5064eb" name="rmb-circle" style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
-						<text class="text-lg">注册金额</text>
-					</view>
-					<view class="action">
-						<text>{{detail.registeredCapital}}</text>
-					</view>
-				</view>
-				
-				<view class="cu-item flex flex-direction" style="align-items: flex-start;padding:20rpx 30rpx;">
-					<view class="content" style="flex-basis: 45%;padding-bottom: 10rpx;">
-						<u-icon size="36" color="#5064eb" name="map" style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
-						<text class="text-lg">公司地址</text>
-					</view>
-					<view class="action" style="padding-left: 60rpx;line-height: 50rpx;">
-						<text>{{detail.region}}</text>
-					</view>
-				</view>
-				
-				<view class="cu-item flex flex-direction" style="align-items: flex-start;padding:20rpx 30rpx;">
-					<view class="content" style="flex-basis: 45%;padding-bottom: 10rpx;">
-						<u-icon size="34" color="#5064eb" name="info-circle" style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
-						<text class="text-lg">注册地址</text>
-					</view>
-					<view class="action" style="padding-left: 60rpx;line-height: 50rpx;">
-						<text>{{detail.registeredAddress}}</text>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- <view class="history">
-			<view class="top u-border-bottom margin-bottom-40">
-				<text class="text-bold text-lg">发展历程</text>
-				<view class="text-sm padding-top-10 text-gray">
-					<text>更多</text>
-					<text class="cuIcon-right padding-left-10"></text>
-				</view>
-			</view>
-			<u-time-line>
-				<u-time-line-item nodeTop="2" v-for="(item,index) in historyList" :key="index">
-					<template v-slot:node>
-						<view class="u-node" style="background-color: rgba(200, 217, 243,.6);">
-							<u-icon name="clock-fill" color="#093c8f" :size="28"></u-icon>
-						</view>
-					</template>
-					<template v-slot:content>
-						<view>
-							<view class="u-order-title">{{item.time}}</view>
-							<view class="u-order-desc">{{item.content}}</view>
-						</view>
-					</template>
-				</u-time-line-item>
-			</u-time-line>
-		</view>
-		<view class="address">
-			<view class="top u-border-bottom">
-				<text class="text-bold text-lg">公司地址</text>
-			</view>
-			
-			<view class="item" >
-				<view class="flex">
-					<u-icon name="map" size="50"></u-icon>
-					<text class="padding-left-20 text-lg">鹏鼎控股深圳园区</text>
-				</view>
-				<text class="sub-address">广东省深圳市宝安区燕罗街道松罗路</text>
-			</view>
-		</view> -->
-	</view>
+    <view class="padding-bottom-20">
+        <swiper class="screen-swiper square-dot " :indicator-dots="true" :circular="true"
+                :autoplay="true" interval="5000" duration="500">
+            <swiper-item v-for="(item,index) in bannerList" :key="index">
+                <image :src="item.banners" mode="aspectFill"></image>
+            </swiper-item>
+        </swiper>
+
+        <view class="card">
+            <view class="flex flex-direction justify-center padding-left-20">
+                <text class="text-bold  text-lg" style="padding-bottom: 12rpx;">{{detail.enterpriseName}}</text>
+                <text class="text-sm">{{detail.enterpriseType}}</text>
+            </view>
+        </view>
+        <view class="desc">
+            <view class="flex">
+                <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                       src="../../static/icon/tag1.png" mode=""></image>
+                <text class="text-lg text-bold">公司简介</text>
+            </view>
+            <view class="sub-title">
+                <text style="padding-left: 60rpx;">
+                    {{detail.enterpriseIntroduce}}
+                </text>
+            </view>
+        </view>
+        <view class="bg-white text-black">
+            <view class="flex padding-left-30">
+                <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                       src="../../static/icon/tag1.png" mode=""></image>
+                <text class="text-lg text-bold">其他信息</text>
+            </view>
+            <view class="cu-list menu text-df padding-top-20">
+                <view class="cu-item">
+                    <view class="content">
+                        <u-icon size="34" color="#5064eb" name="account"
+                                style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
+                        <text class="text-lg">法定代表人</text>
+                    </view>
+                    <view class="action">
+                        <text>{{detail.representative}}</text>
+                    </view>
+                </view>
+
+                <view class="cu-item">
+                    <view class="content">
+                        <u-icon size="38" color="#5064eb" name="plus-circle"
+                                style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
+                        <text class="text-lg">统一社会信用代码</text>
+                    </view>
+                    <view class="action">
+                        <text>{{detail.creditCode}}</text>
+                    </view>
+                </view>
+
+                <view class="cu-item">
+                    <view class="content">
+                        <u-icon size="38" color="#5064eb" name="rmb-circle"
+                                style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
+                        <text class="text-lg">注册金额</text>
+                    </view>
+                    <view class="action">
+                        <text>{{detail.registeredCapital}}</text>
+                    </view>
+                </view>
+
+                <view class="cu-item flex flex-direction" style="align-items: flex-start;padding:20rpx 30rpx;">
+                    <view class="content" style="flex-basis: 45%;padding-bottom: 10rpx;">
+                        <u-icon size="36" color="#5064eb" name="map"
+                                style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
+                        <text class="text-lg">公司地址</text>
+                    </view>
+                    <view class="action" style="padding-left: 60rpx;line-height: 50rpx;">
+                        <text>{{detail.region}}</text>
+                    </view>
+                </view>
+
+                <view class="cu-item flex flex-direction" style="align-items: flex-start;padding:20rpx 30rpx;">
+                    <view class="content" style="flex-basis: 45%;padding-bottom: 10rpx;">
+                        <u-icon size="34" color="#5064eb" name="info-circle"
+                                style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
+                        <text class="text-lg">注册地址</text>
+                    </view>
+                    <view class="action" style="padding-left: 60rpx;line-height: 50rpx;">
+                        <text>{{detail.registeredAddress}}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <!-- <view class="history">
+            <view class="top u-border-bottom margin-bottom-40">
+                <text class="text-bold text-lg">发展历程</text>
+                <view class="text-sm padding-top-10 text-gray">
+                    <text>更多</text>
+                    <text class="cuIcon-right padding-left-10"></text>
+                </view>
+            </view>
+            <u-time-line>
+                <u-time-line-item nodeTop="2" v-for="(item,index) in historyList" :key="index">
+                    <template v-slot:node>
+                        <view class="u-node" style="background-color: rgba(200, 217, 243,.6);">
+                            <u-icon name="clock-fill" color="#093c8f" :size="28"></u-icon>
+                        </view>
+                    </template>
+                    <template v-slot:content>
+                        <view>
+                            <view class="u-order-title">{{item.time}}</view>
+                            <view class="u-order-desc">{{item.content}}</view>
+                        </view>
+                    </template>
+                </u-time-line-item>
+            </u-time-line>
+        </view>
+        <view class="address">
+            <view class="top u-border-bottom">
+                <text class="text-bold text-lg">公司地址</text>
+            </view>
+
+            <view class="item" >
+                <view class="flex">
+                    <u-icon name="map" size="50"></u-icon>
+                    <text class="padding-left-20 text-lg">鹏鼎控股深圳园区</text>
+                </view>
+                <text class="sub-address">广东省深圳市宝安区燕罗街道松罗路</text>
+            </view>
+        </view> -->
+    </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				id:this.$cache.get('enterpriseId'),
-				detail:{},
-				bannerList: [
-					{
-					  'banners': "https://szsq.nxzhsq.cn/community/miniofile/xlyq/banner.jpg"
-					},
-				],
-				historyList:[],
-			}
-		},
-		onLoad() {
-			this.fetchDeatil()
-			// this.fetchBanner()
-		},
-		methods: {
-			fetchDeatil(){
-				this.$api.enterprise.detail({id:this.id}).then(res=>{
-					this.detail=res.data
-				})
-			},
-			fetchBanner(){
-				let params={
-					tenantId:this.$cache.get('agencyTenantId')
-				}
-				this.$api.banner.page(params).then(res=>{
-					if (!this.$isEmpty(res.data.records)) {
-						this.bannerList=res.data.records
-						console.log(this.bannerList);
-					}
-				})
-			},
-		}
-	}
+    export default {
+        data() {
+            return {
+                id: this.$cache.get('enterpriseId'),
+                detail: {},
+                bannerList: [
+                    {
+                        'banners': "https://szsq.nxzhsq.cn/community/miniofile/xlyq/banner.jpg"
+                    },
+                ],
+                historyList: [],
+            }
+        },
+        onLoad() {
+            this.fetchDeatil()
+            // this.fetchBanner()
+        },
+        methods: {
+            fetchDeatil() {
+                this.$api.enterprise.detail({id: this.id}).then(res => {
+                    this.detail = res.data
+                })
+            },
+            fetchBanner() {
+                let params = {
+                    tenantId: this.$cache.get('agencyTenantId')
+                }
+                this.$api.banner.page(params).then(res => {
+                    if (!this.$isEmpty(res.data.records)) {
+                        this.bannerList = res.data.records
+                        console.log(this.bannerList);
+                    }
+                })
+            },
+        }
+    }
 </script>
 
 <style lang="scss">
-	page{
-		background-color: #FFFFFF;
-	}
-	
-	.card{
-		padding:40rpx 20rpx;
-		background-color: #FFFFFF;
-		margin: 10rpx;
-		border-radius: 10rpx;
-		display: flex;
-		box-shadow: 0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
-		image{
-			border: 1rpx solid #f1f1f1;
-			width:100rpx;
-			height: 100rpx;
-			border-radius: 50%;
-		}
-	}
-	
-	.desc{
-		background-color: #FFFFFF;
-		padding:40rpx 30rpx;
-		.sub-title{
-			padding-top: 40rpx;
-			font-size: 28rpx;
-			line-height: 50rpx;
-		}
-	}
-	
-	.history{
-		background-color: #FFFFFF;
-		margin-top: 20rpx;
-		padding: 40rpx 20rpx 20rpx 50rpx;
-	}
-	
-	.top{
-		padding-bottom: 30rpx;
-		display: flex;
-		justify-content: space-between;
-	}
-	
-	.address{
-		margin-top: 20rpx;
-		background-color: #FFFFFF;
-		padding: 30rpx;
-		
-		
-		.item{
-			padding-top: 40rpx;
-			.sub-address{
-				padding-left: 70rpx;font-size: 26rpx;color: #bababa;
-			}
-		}
-	}
-	
-	
-	.u-node {
-			width: 44rpx;
-			height: 44rpx;
-			border-radius: 100rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			background: #d0d0d0;
-		}
-		
-		.u-order-title {
-			color: #333333;
-			font-weight: bold;
-			font-size: 32rpx;
-		}
-		
-		.u-order-desc {
-			padding-top: 20rpx;
-			color: #8d8d8d;
-			font-size: 26rpx;
-			line-height: 48rpx;
-			margin-bottom: 6rpx;
-		}
-		
-		.u-order-time {
-			color: rgb(200, 200, 200);
-			font-size: 26rpx;
-		}
+    page {
+        background-color: #FFFFFF;
+    }
+
+    .card {
+        padding: 40 rpx 20 rpx;
+        background-color: #FFFFFF;
+        margin: 10 rpx;
+        border-radius: 10 rpx;
+        display: flex;
+        box-shadow: 0 10 rpx rgba(248, 248, 248, .9), -10rpx 0 rpx rgba(248, 248, 248, .9), 10 rpx 0 rpx rgba(248, 248, 248, .9);
+
+        image {
+            border: 1 rpx solid #f1f1f1;
+            width: 100 rpx;
+            height: 100 rpx;
+            border-radius: 50%;
+        }
+    }
+
+    .desc {
+        background-color: #FFFFFF;
+        padding: 40 rpx 30 rpx;
+
+        .sub-title {
+            padding-top: 40 rpx;
+            font-size: 28 rpx;
+            line-height: 50 rpx;
+        }
+    }
+
+    .history {
+        background-color: #FFFFFF;
+        margin-top: 20 rpx;
+        padding: 40 rpx 20 rpx 20 rpx 50 rpx;
+    }
+
+    .top {
+        padding-bottom: 30 rpx;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .address {
+        margin-top: 20 rpx;
+        background-color: #FFFFFF;
+        padding: 30 rpx;
+
+
+        .item {
+            padding-top: 40 rpx;
+
+            .sub-address {
+                padding-left: 70 rpx;
+                font-size: 26 rpx;
+                color: #bababa;
+            }
+        }
+    }
+
+
+    .u-node {
+        width: 44 rpx;
+        height: 44 rpx;
+        border-radius: 100 rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #d0d0d0;
+    }
+
+    .u-order-title {
+        color: #333333;
+        font-weight: bold;
+        font-size: 32 rpx;
+    }
+
+    .u-order-desc {
+        padding-top: 20 rpx;
+        color: #8d8d8d;
+        font-size: 26 rpx;
+        line-height: 48 rpx;
+        margin-bottom: 6 rpx;
+    }
+
+    .u-order-time {
+        color: rgb(200, 200, 200);
+        font-size: 26 rpx;
+    }
 </style>

mini-program/garden-wxapp/pages/device/device.vue

@@ -1,240 +1,244 @@
-<template>
-	<view class="page" style="position: relative;">
-		<view class="content">
-			<loading  isFullScreen color="#5064eb" :active="isloading" text="开门中..."></loading>
-			<view @click="itemClick(item)" class="device u-border-bottom" v-for="(item,index) in device_list" :key="index">
-				<view class="flex justify-between">
-					<view class="flex"  style="width: 80%;">
-						<view class="tag" :class="item.tagColor">
-							<text>{{item.cameraName.substr(0,1)}}</text>
-						</view>
-						<view class="flex justify-center align-center padding-left-20 text-lg">
-							<text>{{item.cameraName}}</text>
-							<!-- <view v-if="defaultDoorValue==item.macAddress" class="margin-left-10 sm cu-tag bg-orange">
-								默认
-							</view> -->
-						</view>
-					</view>
-					
-					<view class="flex justify-center align-center">
-						<u-radio-group size="40" active-color="#5064eb" v-model="door_value">
-							<u-radio
-							 @change.stop="radioChange"
-								:name="item.macAddress">
-							</u-radio>
-						</u-radio-group>
-					</view>
-				</view>
-				
-			</view>
-			
-			<view class="" style="position: fixed;bottom: 15%;left: calc( 50% - 90rpx);">
-				<view @click="openDoor(door_value)" class="btn-open text-center flex justify-center align-center" style="border-radius: 50%;height: 180rpx;width: 180rpx;font-size: 34rpx;">
-					<text>开门</text>
-				</view>
-			</view>
-			
-			<u-action-sheet :list="actionList" v-model="actionShow" @click="actionClick"></u-action-sheet>
-		</view>
-		<u-tabbar v-model="tabbarCurr"
-		 :icon-size="tabbar.iconSize" 
-		 :active-color="tabbar.activeColor" 
-		 :mid-button-size="tabbar.MinButtonSize" 
-		 :list="tabbar.list" :mid-button="true">
-		 </u-tabbar>
-	</view>
-</template>
-
-<script>
-var app=getApp()
-var that;
-import loading from "@/components/loading/loading.vue"
-import {tabbar} from "@/assets/js/tabbar.js"
-export default {
-	components:{
-		loading
-	},
-	data() {
-		return {
-			actionList: [{
-				text: '设为默认',
-				subText:'默认选中该门禁'
-			}, {
-				text: '选中'
-			}, {
-				text: '开门' 
-			}],
-			actionShow: false,
-			//操作哪一项
-			clickItem:'',
-			
-			//默认选中值
-			defaultDoorValue:'',
-			//选中值
-			door_value:'',
-			//员工id
-			userId:'',
-			
-			//tabbar
-			tabbarCurr:1,
-			tabbar:tabbar,
-			//是否已开门
-			isopen:false,
-			//是否展示动画
-			isloading:false,
-			//设备列表
-			device_list:[],
-		};
-	},
-	onLoad() {
-		that=this
-		this.fetchDeviceList()
-		
-		let loginType=this.$cache.get('loginType')
-		if (loginType==this.$loginType.STAFF) {
-			this.getUserId()
-		}
-		
-	},
-	onShow() {
-		if (this.canReset) {
-			let list=this.$u.deepClone(this.device_list)
-			list.forEach(item=>{
-				item.tagColor='bg-'+this.ColorList[Math.floor(Math.random()*this.ColorList.length)]
-			})
-			this.device_list=list
-		}
-		this.canReset=true
-	},
-	methods:{
-		radioChange(e){
-			this.door_value=e
-		},
-		actionClick(index) {
-			if (index==0) {
-				//设为默认
-				this.$cache.put('defaultDoorValue',this.clickItem)
-				this.defaultDoorValue=this.clickItem
-			}else if (index==1) {
-				//选中
-				this.door_value=this.clickItem
-			}else if(index==2){
-				//开门
-				this.door_value=this.clickItem
-				this.openDoor(this.clickItem)
-			}
-		},
-		showAction(item){
-			this.clickItem=item.macAddress;
-			this.actionShow=true
-			console.log(this.clickItem);
-		},
-		itemClick(item){
-			this.door_value=item.macAddress
-		},
-		/**
-		 * 获取员工id
-		 */
-		getUserId(){
-			if (this.$isEmpty(getApp().globalData.userInfo)) {
-				let phone=this.$cache.get('phone')
-				this.$api.enterprisestaff.page({phone:phone,examine:1}).then(res=>{
-					let userInfo=res.data.records[0]
-					this.userId=userInfo.id
-				})
-			}else{
-				let userInfo=getApp().globalData.userInfo
-				this.userId=userInfo.id
-			}
-			
-		},
-		async fetchDeviceList(){
-			let res=await this.$api.device.page()
-			this.device_list= res.data.records
-			
-			//默认选中值
-			this.defaultDoorValue=this.$cache.get('defaultDoorValue')
-			if (this.defaultDoorValue) {
-				//如果默认选中值不为空，就选中该门禁
-				this.door_value=this.defaultDoorValue
-			}else{
-				//如果默认选中值为空，就选中第一个门禁
-				this.door_value=this.device_list[0].macAddress
-			}
-			
-			this.device_list.forEach(item=>{
-				item.tagColor='bg-'+this.ColorList[Math.floor(Math.random()*this.ColorList.length)]
-			})
-		},
-		/**
-		 * 立即开门
-		 */
-		openDoor(macAddress) {
-			let params={
-				userId:this.userId || 123,
-				macAddress:macAddress
-			}
-			this.isloading=true
-			setTimeout(()=>{
-				this.$api.device.open(params).then(res=>{
-					if (res.success) {
-						this.isloading=false
-						this.isopen=true
-						that.$showModel('开门成功',false)
-					}else{
-						that.$showModel(res.msg,false)
-						this.isloading=false
-						that.isopen=false
-					}
-				}).catch(err=>{
-					this.isloading=false
-					that.isopen=false
-				})
-			},500)
-		},
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-	page{
-		background-color: #F1F1F1;
-	}
-	
-	 .device{
-		position: relative;
-		background-color: #FFFFFF;
-		padding: 35rpx;
-		margin: 20rpx;
-		
-		.default{
-			width: 60rpx;
-			height: 60rpx;
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-		
-		.bg-blue{
-			background-color: $base-color;
-			color: #FFFFFF;
			
-		}
-	}
-	
-	.tag{
-		border-radius: 50%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 80rpx;
-		width: 80rpx;
-		font-size: 32rpx;
-	}
-	
-	.btn-open{
-		background-image: linear-gradient(#557ffc,#3d4fb6);
-		background-color: $base-color;
-		box-shadow: 0rpx 0rpx 20rpx rgba(82, 159, 247, 0.8);
-		color: #FFFFFF;
-	}
+<template>
+    <view class="page" style="position: relative;">
+        <view class="content">
+            <loading isFullScreen color="#5064eb" :active="isloading" text="开门中..."></loading>
+            <view @click="itemClick(item)" class="device u-border-bottom" v-for="(item,index) in device_list"
+                  :key="index">
+                <view class="flex justify-between">
+                    <view class="flex" style="width: 80%;">
+                        <view class="tag" :class="item.tagColor">
+                            <text>{{item.cameraName.substr(0,1)}}</text>
+                        </view>
+                        <view class="flex justify-center align-center padding-left-20 text-lg">
+                            <text>{{item.cameraName}}</text>
+                            <!-- <view v-if="defaultDoorValue==item.macAddress" class="margin-left-10 sm cu-tag bg-orange">
+                                默认
+                            </view> -->
+                        </view>
+                    </view>
+
+                    <view class="flex justify-center align-center">
+                        <u-radio-group size="40" active-color="#5064eb" v-model="door_value">
+                            <u-radio
+                                    @change.stop="radioChange"
+                                    :name="item.macAddress">
+                            </u-radio>
+                        </u-radio-group>
+                    </view>
+                </view>
+
+            </view>
+
+            <view class="" style="position: fixed;bottom: 15%;left: calc( 50% - 90rpx);">
+                <view @click="openDoor(door_value)" class="btn-open text-center flex justify-center align-center"
+                      style="border-radius: 50%;height: 180rpx;width: 180rpx;font-size: 34rpx;">
+                    <text>开门</text>
+                </view>
+            </view>
+
+            <u-action-sheet :list="actionList" v-model="actionShow" @click="actionClick"></u-action-sheet>
+        </view>
+        <u-tabbar v-model="tabbarCurr"
+                  :icon-size="tabbar.iconSize"
+                  :active-color="tabbar.activeColor"
+                  :mid-button-size="tabbar.MinButtonSize"
+                  :list="tabbar.list" :mid-button="true">
+        </u-tabbar>
+    </view>
+</template>
+
+<script>
+    var app = getApp()
+    var that;
+    import loading from "@/components/loading/loading.vue"
+    import {tabbar} from "@/assets/js/tabbar.js"
+
+    export default {
+        components: {
+            loading
+        },
+        data() {
+            return {
+                actionList: [{
+                    text: '设为默认',
+                    subText: '默认选中该门禁'
+                }, {
+                    text: '选中'
+                }, {
+                    text: '开门'
+                }],
+                actionShow: false,
+                //操作哪一项
+                clickItem: '',
+
+                //默认选中值
+                defaultDoorValue: '',
+                //选中值
+                door_value: '',
+                //员工id
+                userId: '',
+
+                //tabbar
+                tabbarCurr: 1,
+                tabbar: tabbar,
+                //是否已开门
+                isopen: false,
+                //是否展示动画
+                isloading: false,
+                //设备列表
+                device_list: [],
+            };
+        },
+        onLoad() {
+            that = this
+            this.fetchDeviceList()
+
+            let loginType = this.$cache.get('loginType')
+            if (loginType == this.$loginType.STAFF) {
+                this.getUserId()
+            }
+
+        },
+        onShow() {
+            if (this.canReset) {
+                let list = this.$u.deepClone(this.device_list)
+                list.forEach(item => {
+                    item.tagColor = 'bg-' + this.ColorList[Math.floor(Math.random() * this.ColorList.length)]
+                })
+                this.device_list = list
+            }
+            this.canReset = true
+        },
+        methods: {
+            radioChange(e) {
+                this.door_value = e
+            },
+            actionClick(index) {
+                if (index == 0) {
+                    //设为默认
+                    this.$cache.put('defaultDoorValue', this.clickItem)
+                    this.defaultDoorValue = this.clickItem
+                } else if (index == 1) {
+                    //选中
+                    this.door_value = this.clickItem
+                } else if (index == 2) {
+                    //开门
+                    this.door_value = this.clickItem
+                    this.openDoor(this.clickItem)
+                }
+            },
+            showAction(item) {
+                this.clickItem = item.macAddress;
+                this.actionShow = true
+                console.log(this.clickItem);
+            },
+            itemClick(item) {
+                this.door_value = item.macAddress
+            },
+            /**
+             * 获取员工id
+             */
+            getUserId() {
+                if (this.$isEmpty(getApp().globalData.userInfo)) {
+                    let phone = this.$cache.get('phone')
+                    this.$api.enterprisestaff.page({phone: phone, examine: 1}).then(res => {
+                        let userInfo = res.data.records[0]
+                        this.userId = userInfo.id
+                    })
+                } else {
+                    let userInfo = getApp().globalData.userInfo
+                    this.userId = userInfo.id
+                }
+
+            },
+            async fetchDeviceList() {
+                let res = await this.$api.device.page()
+                this.device_list = res.data.records
+
+                //默认选中值
+                this.defaultDoorValue = this.$cache.get('defaultDoorValue')
+                if (this.defaultDoorValue) {
+                    //如果默认选中值不为空，就选中该门禁
+                    this.door_value = this.defaultDoorValue
+                } else {
+                    //如果默认选中值为空，就选中第一个门禁
+                    this.door_value = this.device_list[0].macAddress
+                }
+
+                this.device_list.forEach(item => {
+                    item.tagColor = 'bg-' + this.ColorList[Math.floor(Math.random() * this.ColorList.length)]
+                })
+            },
+            /**
+             * 立即开门
+             */
+            openDoor(macAddress) {
+                let params = {
+                    userId: this.userId || 123,
+                    macAddress: macAddress
+                }
+                this.isloading = true
+                setTimeout(() => {
+                    this.$api.device.open(params).then(res => {
+                        if (res.success) {
+                            this.isloading = false
+                            this.isopen = true
+                            that.$showModel('开门成功', false)
+                        } else {
+                            that.$showModel(res.msg, false)
+                            this.isloading = false
+                            that.isopen = false
+                        }
+                    }).catch(err => {
+                        this.isloading = false
+                        that.isopen = false
+                    })
+                }, 500)
+            },
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        background-color: #F1F1F1;
+    }
+
+    .device {
+        position: relative;
+        background-color: #FFFFFF;
+        padding: 35 rpx;
+        margin: 20 rpx;
+
+        .default {
+            width: 60 rpx;
+            height: 60 rpx;
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+
+        .bg-blue {
+            background-color: $base-color;
+            color: #FFFFFF;
+
+        }
+    }
+
+    .tag {
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80 rpx;
+        width: 80 rpx;
+        font-size: 32 rpx;
+    }
+
+    .btn-open {
+        background-image: linear-gradient(#557ffc, #3d4fb6);
+        background-color: $base-color;
+        box-shadow: 0 rpx 0 rpx 20 rpx rgba(82, 159, 247, 0.8);
+        color: #FFFFFF;
+    }
 </style>

mini-program/garden-wxapp/pages/enterprise/add.vue

@@ -1,319 +1,323 @@
 <template>
-	<view>
-		<scroll-view scroll-y="true">
-			<view class="form">
-				<view class="card">
-					<u-form :model="model" labelWidth="200" ref="uForm">
-						<u-form-item :required="true" prop="enterpriseName" label="企业名称">
-							<u-input type="text" v-model="model.enterpriseName" placeholder="请填写企业名称"></u-input>
-						</u-form-item>
-						<u-form-item :required="true" label="法定代表人" prop="representative">
-							<u-input type="text" v-model="model.representative" placeholder="请输入法定代表人"></u-input>
-						</u-form-item>
-						<u-form-item label="所属区域" :required="true" prop="residentialName">
-							<u-input type="select" @click="residentialShow=true" :select-open="residentialShow"
-								v-model="model.residentialName" placeholder="请选择所属区域"></u-input>
-						</u-form-item>
-						<u-form-item label="企业位置">
-							<u-input disabled v-model="location" placeholder="请选择企业位置" @click="chooseLocation"></u-input>
-						</u-form-item>
-						<u-form-item :required="true" label="详细地址" prop="region">
-							<u-input type="text" v-model="model.region" placeholder="请输入详细地址"></u-input>
-						</u-form-item>
-						<u-form-item :required="true" label="统一信用代码" prop="creditCode">
-							<u-input type="text" v-model="model.creditCode" placeholder="请输入统一信用代码"></u-input>
-						</u-form-item>
-						<u-form-item label="企业类型">
-							<u-input type="select" @click="enterpriseTypeShow=true" :select-open="enterpriseTypeShow"
-								v-model="model.enterpriseType" placeholder="请选择企业类型"></u-input>
-						</u-form-item>
-						
-						<u-form-item label="组织机构代码">
-							<u-input type="text" v-model="model.organizationCode" placeholder="请输入组织机构代码"></u-input>
-						</u-form-item>
-			
-						<u-form-item label="注册资金">
-							<u-input type="text" v-model="model.registeredCapital" placeholder="请输入注册资金"></u-input>
-						</u-form-item>
-						<u-form-item label="注册地址">
-							<u-input type="text" v-model="model.registeredAddress" placeholder="请输入注册地址"></u-input>
-						</u-form-item>
-						<u-form-item label="成立日期">
-							<u-input v-model="model.registeredDate" placeholder="请输入成立日期"></u-input>
-						</u-form-item>
-						<u-form-item label="办公电话">
-							<u-input v-model="model.officeNum" placeholder="请输入办公电话"></u-input>
-						</u-form-item>
-						<u-form-item label="企业简介">
-							<u-input type="textarea" height="200" v-model="model.enterpriseIntroduce" placeholder="请输入企业简介">
-							</u-input>
-						</u-form-item>
-			
-						<u-form-item class=""  label="请上传营业执照" label-position="top">
-							<view class="upload-img">
-								<view class="" @click="chooseImage">
-									<upload-img :width="width" :height="height" :currentImage="model.businessLicense"
-										bgsrc="https://szsq.nxzhsq.cn/community/miniofile/xlyq/upload.png">
-									</upload-img>
-									<view class="text-center  padding-top-20 base-color">
-										<text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
-										<text v-if="$isEmpty(model.businessLicense)">请上传营业执照</text>
-										<text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
-									</view>
-								</view>
-							</view>
-						</u-form-item>
-			
-						<u-form-item class=""  label="请上传公司logo" label-position="top">
-							<view class="upload-img">
-								<view class="" @click="chooseImage('logo')">
-									<upload-img :width="width" :height="height" :currentImage="model.logo"
-										bgsrc="https://szsq.nxzhsq.cn/community/miniofile/xlyq/upload.png">
-									</upload-img>
-									<view class="text-center  padding-top-20 base-color">
-										<text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
-										<text v-if="$isEmpty(model.logo)">请上传公司logo</text>
-										<text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
-									</view>
-								</view>
-							</view>
-						</u-form-item>
-			
-					</u-form>
-				</view>
-			</view>
-			<view>
-				<view class="bg-white" style="height: 80rpx;"></view>
-				<view class="" @click="submit" style="width: 90%;margin: 0 auto ;margin-bottom: 10%;">
-					<view class="cu-btn round base-bg-color" style="padding: 40rpx;width: 100%;">
-						<text class="cuIcon-add"></text>
-						<text>确认提交</text>
-					</view>
-				</view>
-			</view>
-		</scroll-view>
-		<!-- 区域 -->
-		<u-select @confirm="residentialConfirm" label-name="name" value-name="id" v-model="residentialShow" :list="residentialList"></u-select>
-		<!-- 企业类型 -->
-		<u-select @confirm="enterpriseTypeConfirm" v-model="enterpriseTypeShow" :list="enterpriseTypeList"></u-select>
-		<!-- 成立日期 -->
-		<u-picker v-model="registeredDateShow" mode="time" :params="params" @confirm="registeredDateConfirm"></u-picker>
-	</view>
+    <view>
+        <scroll-view scroll-y="true">
+            <view class="form">
+                <view class="card">
+                    <u-form :model="model" labelWidth="200" ref="uForm">
+                        <u-form-item :required="true" prop="enterpriseName" label="企业名称">
+                            <u-input type="text" v-model="model.enterpriseName" placeholder="请填写企业名称"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" label="法定代表人" prop="representative">
+                            <u-input type="text" v-model="model.representative" placeholder="请输入法定代表人"></u-input>
+                        </u-form-item>
+                        <u-form-item label="所属区域" :required="true" prop="residentialName">
+                            <u-input type="select" @click="residentialShow=true" :select-open="residentialShow"
+                                     v-model="model.residentialName" placeholder="请选择所属区域"></u-input>
+                        </u-form-item>
+                        <u-form-item label="企业位置">
+                            <u-input disabled v-model="location" placeholder="请选择企业位置"
+                                     @click="chooseLocation"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" label="详细地址" prop="region">
+                            <u-input type="text" v-model="model.region" placeholder="请输入详细地址"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" label="统一信用代码" prop="creditCode">
+                            <u-input type="text" v-model="model.creditCode" placeholder="请输入统一信用代码"></u-input>
+                        </u-form-item>
+                        <u-form-item label="企业类型">
+                            <u-input type="select" @click="enterpriseTypeShow=true" :select-open="enterpriseTypeShow"
+                                     v-model="model.enterpriseType" placeholder="请选择企业类型"></u-input>
+                        </u-form-item>
+
+                        <u-form-item label="组织机构代码">
+                            <u-input type="text" v-model="model.organizationCode" placeholder="请输入组织机构代码"></u-input>
+                        </u-form-item>
+
+                        <u-form-item label="注册资金">
+                            <u-input type="text" v-model="model.registeredCapital" placeholder="请输入注册资金"></u-input>
+                        </u-form-item>
+                        <u-form-item label="注册地址">
+                            <u-input type="text" v-model="model.registeredAddress" placeholder="请输入注册地址"></u-input>
+                        </u-form-item>
+                        <u-form-item label="成立日期">
+                            <u-input v-model="model.registeredDate" placeholder="请输入成立日期"></u-input>
+                        </u-form-item>
+                        <u-form-item label="办公电话">
+                            <u-input v-model="model.officeNum" placeholder="请输入办公电话"></u-input>
+                        </u-form-item>
+                        <u-form-item label="企业简介">
+                            <u-input type="textarea" height="200" v-model="model.enterpriseIntroduce"
+                                     placeholder="请输入企业简介">
+                            </u-input>
+                        </u-form-item>
+
+                        <u-form-item class="" label="请上传营业执照" label-position="top">
+                            <view class="upload-img">
+                                <view class="" @click="chooseImage">
+                                    <upload-img :width="width" :height="height" :currentImage="model.businessLicense"
+                                                bgsrc="https://szsq.nxzhsq.cn/community/miniofile/xlyq/upload.png">
+                                    </upload-img>
+                                    <view class="text-center  padding-top-20 base-color">
+                                        <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
+                                        <text v-if="$isEmpty(model.businessLicense)">请上传营业执照</text>
+                                        <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
+                                    </view>
+                                </view>
+                            </view>
+                        </u-form-item>
+
+                        <u-form-item class="" label="请上传公司logo" label-position="top">
+                            <view class="upload-img">
+                                <view class="" @click="chooseImage('logo')">
+                                    <upload-img :width="width" :height="height" :currentImage="model.logo"
+                                                bgsrc="https://szsq.nxzhsq.cn/community/miniofile/xlyq/upload.png">
+                                    </upload-img>
+                                    <view class="text-center  padding-top-20 base-color">
+                                        <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
+                                        <text v-if="$isEmpty(model.logo)">请上传公司logo</text>
+                                        <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
+                                    </view>
+                                </view>
+                            </view>
+                        </u-form-item>
+
+                    </u-form>
+                </view>
+            </view>
+            <view>
+                <view class="bg-white" style="height: 80rpx;"></view>
+                <view class="" @click="submit" style="width: 90%;margin: 0 auto ;margin-bottom: 10%;">
+                    <view class="cu-btn round base-bg-color" style="padding: 40rpx;width: 100%;">
+                        <text class="cuIcon-add"></text>
+                        <text>确认提交</text>
+                    </view>
+                </view>
+            </view>
+        </scroll-view>
+        <!-- 区域 -->
+        <u-select @confirm="residentialConfirm" label-name="name" value-name="id" v-model="residentialShow"
+                  :list="residentialList"></u-select>
+        <!-- 企业类型 -->
+        <u-select @confirm="enterpriseTypeConfirm" v-model="enterpriseTypeShow" :list="enterpriseTypeList"></u-select>
+        <!-- 成立日期 -->
+        <u-picker v-model="registeredDateShow" mode="time" :params="params" @confirm="registeredDateConfirm"></u-picker>
+    </view>
 </template>
 
 <script>
-	import uploadImg from '@/components/uploadimg/uploadImg.vue'
-	export default {
-		components: {
-			uploadImg
-		},
-		data() {
-			return {
-				width: 480,
-				height: 320,
+    import uploadImg from '@/components/uploadimg/uploadImg.vue'
+
+    export default {
+        components: {
+            uploadImg
+        },
+        data() {
+            return {
+                width: 480,
+                height: 320,
+
+                model: {
+                    enterpriseName: '',
+                    representative: '',
+                    region: '',
+                    creditCode: '',
+                    businessLicense: '',
+                    logo: ''
+                },
+
+                //区域
+                residentialList: [],
+                residentialShow: false,
+
+                //企业位置
+                location: '',
+                //企业类型
+                enterpriseTypeShow: false,
+                enterpriseTypeList: [{
+                    label: '有限责任公司',
+                    value: '有限责任公司'
+                },
+                    {
+                        label: '股份有限公司',
+                        value: '股份有限公司'
+                    },
+                    {
+                        label: '个人独资企业',
+                        value: '个人独资企业'
+                    },
+                    {
+                        label: '一人有限公司',
+                        value: '一人有限公司'
+                    },
+                    {
+                        label: '合伙企业',
+                        value: '合伙企业'
+                    },
+                    {
+                        label: '个体工商户',
+                        value: '个体工商户'
+                    },
+                    {
+                        label: '其他',
+                        value: '其他'
+                    },
+                ],
+                //成立日期
+                registeredDateShow: false,
+                params: {
+                    year: true,
+                    month: true,
+                    day: true,
+                    hour: false,
+                    minute: false,
+                    second: false
+                },
 
-				model: {
-					enterpriseName:'',
-					representative:'',
-					region:'',
-					creditCode:'',
-					businessLicense:'',
-					logo:''
-				},
-				
-				//区域
-				residentialList:[],
-				residentialShow:false,
-				
-				//企业位置
-				location:'',
-				//企业类型
-				enterpriseTypeShow: false,
-				enterpriseTypeList: [{
-						label: '有限责任公司',
-						value: '有限责任公司'
-					},
-					{
-						label: '股份有限公司',
-						value: '股份有限公司'
-					},
-					{
-						label: '个人独资企业',
-						value: '个人独资企业'
-					},
-					{
-						label: '一人有限公司',
-						value: '一人有限公司'
-					},
-					{
-						label: '合伙企业',
-						value: '合伙企业'
-					},
-					{
-						label: '个体工商户',
-						value: '个体工商户'
-					},
-					{
-						label: '其他',
-						value: '其他'
-					},
-				],
-				//成立日期
-				registeredDateShow: false,
-				params: {
-					year: true,
-					month: true,
-					day: true,
-					hour: false,
-					minute: false,
-					second: false
-				},
-				
-				rules: {
-					enterpriseName: [
-						{ 
-							required: true, 
-							message: '请输入企业名称', 
-							trigger: ['change','blur'],
-						}
-					],
-					representative:[
-						{
-							required: true, 
-							message: '请输入法定代表人', 
-							trigger: ['change','blur'],
-						}
-					],
-					region:[
-						{
-							required: true, 
-							message: '请输入详细地址', 
-							trigger: ['change','blur'],
-						}
-					],
-					creditCode:[
-						{
-							required: true, 
-							message: '请输入统一信用代码', 
-							trigger: ['change','blur'],
-						}
-					],
-					residentialName:[
-						{
-							required: true, 
-							message: '请选择所属区域', 
-							trigger: ['change','blur'],
-						}
-					]
-				}
-			}
-		},
-		onLoad() {
-			this.fetchResidentialList()
-		},
-		onReady() {
-			this.$refs.uForm.setRules(this.rules);
-		},
-		methods: {
-			//区域列表
-			fetchResidentialList(){
-				let params={
-					agencyId:this.$cache.get('agencyId'),
-					size:300,
-				}
-				this.$api.residential.page(params).then(res=>{
-					this.residentialList=res.data.records
-				})
-			},
-			residentialConfirm(e){
-				console.log(e);
-				this.model.residentialId=e[0].value
-				this.model.residentialName=e[0].label
-			},
-			//企业类型
-			enterpriseTypeConfirm(e){
-				this.model.enterpriseType=e[0].value
-			},
-			//成立日期
-			registeredDateConfirm(e) {
-				this.model.registeredDate = e.year + '-' + e.month + '-' + e.day
-			},
-			chooseLocation(){
-				let that=this
-				uni.chooseLocation({
-				    success: function (res) {
-						that.location=`经纬度：(${res.longitude},${res.latitude})`
-						that.model.latitude=res.latitude
-						that.model.longitude=res.longitude
-						that.model.region=res.address
-				    }
-				});
-			},
-			//上传照片
-			async chooseImage(type) {
-				let tempFilePaths = await this.$mpi.chooseImage()
-				let res = await this.$api.uploadFile.submit(tempFilePaths[0])
-				if (type == 'logo') {
-					this.model.logo = res.data
-				} else {
-					this.model.businessLicense = res.data
-				}
-			},
-			//提交
-		    submit() {
-				this.$refs.uForm.validate(valid => {
-					if (valid) {
-						this.save()
-					}
-				});
-			},
-			async save(){
-				let res=await this.$api.enterprise.submit(this.model)
-				if (res.success==true) {
-					this.$dialog.showModal('添加成功',false).then(()=>{
-						this.$util.isReloadAndBack()
-					})
-				}
-			}
-		}
-	}
+                rules: {
+                    enterpriseName: [
+                        {
+                            required: true,
+                            message: '请输入企业名称',
+                            trigger: ['change', 'blur'],
+                        }
+                    ],
+                    representative: [
+                        {
+                            required: true,
+                            message: '请输入法定代表人',
+                            trigger: ['change', 'blur'],
+                        }
+                    ],
+                    region: [
+                        {
+                            required: true,
+                            message: '请输入详细地址',
+                            trigger: ['change', 'blur'],
+                        }
+                    ],
+                    creditCode: [
+                        {
+                            required: true,
+                            message: '请输入统一信用代码',
+                            trigger: ['change', 'blur'],
+                        }
+                    ],
+                    residentialName: [
+                        {
+                            required: true,
+                            message: '请选择所属区域',
+                            trigger: ['change', 'blur'],
+                        }
+                    ]
+                }
+            }
+        },
+        onLoad() {
+            this.fetchResidentialList()
+        },
+        onReady() {
+            this.$refs.uForm.setRules(this.rules);
+        },
+        methods: {
+            //区域列表
+            fetchResidentialList() {
+                let params = {
+                    agencyId: this.$cache.get('agencyId'),
+                    size: 300,
+                }
+                this.$api.residential.page(params).then(res => {
+                    this.residentialList = res.data.records
+                })
+            },
+            residentialConfirm(e) {
+                console.log(e);
+                this.model.residentialId = e[0].value
+                this.model.residentialName = e[0].label
+            },
+            //企业类型
+            enterpriseTypeConfirm(e) {
+                this.model.enterpriseType = e[0].value
+            },
+            //成立日期
+            registeredDateConfirm(e) {
+                this.model.registeredDate = e.year + '-' + e.month + '-' + e.day
+            },
+            chooseLocation() {
+                let that = this
+                uni.chooseLocation({
+                    success: function (res) {
+                        that.location = `经纬度：(${res.longitude},${res.latitude})`
+                        that.model.latitude = res.latitude
+                        that.model.longitude = res.longitude
+                        that.model.region = res.address
+                    }
+                });
+            },
+            //上传照片
+            async chooseImage(type) {
+                let tempFilePaths = await this.$mpi.chooseImage()
+                let res = await this.$api.uploadFile.submit(tempFilePaths[0])
+                if (type == 'logo') {
+                    this.model.logo = res.data
+                } else {
+                    this.model.businessLicense = res.data
+                }
+            },
+            //提交
+            submit() {
+                this.$refs.uForm.validate(valid => {
+                    if (valid) {
+                        this.save()
+                    }
+                });
+            },
+            async save() {
+                let res = await this.$api.enterprise.submit(this.model)
+                if (res.success == true) {
+                    this.$dialog.showModal('添加成功', false).then(() => {
+                        this.$util.isReloadAndBack()
+                    })
+                }
+            }
+        }
+    }
 </script>
 
 <style lang="scss">
-	page {
-		background-color: #FFFFFF;
-	}
+    page {
+        background-color: #FFFFFF;
+    }
 
-	.form {
-		padding: 40rpx 30rpx;
+    .form {
+        padding: 40 rpx 30 rpx;
 
-		.tag {
-			width: 35rpx;
-			height: 35rpx;
-			display: block;
-			padding-top: 6rpx;
-			padding-right: 10rpx;
-		}
+        .tag {
+            width: 35 rpx;
+            height: 35 rpx;
+            display: block;
+            padding-top: 6 rpx;
+            padding-right: 10 rpx;
+        }
 
-		.card {
-			margin-top: 20rpx;
-			padding: 0 30rpx;
-			box-sizing: border-box;
-			border-radius: 12rpx;
-			box-shadow: 0 -10rpx rgba(248, 248, 248, .9), 0 10rpx rgba(248, 248, 248, .9), -10rpx 0rpx rgba(248, 248, 248, .9), 10rpx 0rpx rgba(248, 248, 248, .9);
+        .card {
+            margin-top: 20 rpx;
+            padding: 0 30 rpx;
+            box-sizing: border-box;
+            border-radius: 12 rpx;
+            box-shadow: 0 -10rpx rgba(248, 248, 248, .9), 0 10 rpx rgba(248, 248, 248, .9), -10rpx 0 rpx rgba(248, 248, 248, .9), 10 rpx 0 rpx rgba(248, 248, 248, .9);
 
-			.item {
-				padding: 30rpx 0;
-				display: flex;
-				justify-content: space-between;
-			}
+            .item {
+                padding: 30 rpx 0;
+                display: flex;
+                justify-content: space-between;
+            }
 
-			.upload-img {
-				padding: 50rpx 0 30rpx;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-		}
-	}
+            .upload-img {
+                padding: 50 rpx 0 30 rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/enterprise/comps/card.vue

@@ -1,104 +1,103 @@
 <template>
-	<view class="safe-area-inset-bottom">
-		<navigator :url="`/pages/enterprise/detail?id=${item.id}`" class="card" v-for="(item,index) in list" :key="index">
-			<view class="item">
-				<view class="left">
-					<view class="tag" :class="item.tagColor">
-						<text>{{item.enterpriseName.substr(0,1)}}</text>
-					</view>
-					<view class="content">
-						<text class="text-cut-1">{{item.enterpriseName}}</text>
-						<text class="text-cut-1">{{item.residentialName}}</text>
-					</view>
-				</view>
-				<view class="right">
-					<image @click.stop="callPhone(item.officeNum)" src="../../../static/index/call.png" mode=""></image>
-				</view>
-			</view>
-		</navigator>
-	</view>
+    <view class="safe-area-inset-bottom">
+        <navigator :url="`/pages/enterprise/detail?id=${item.id}`" class="card" v-for="(item,index) in list"
+                   :key="index">
+            <view class="item">
+                <view class="left">
+                    <view class="tag" :class="item.tagColor">
+                        <text>{{item.enterpriseName.substr(0,1)}}</text>
+                    </view>
+                    <view class="content">
+                        <text class="text-cut-1">{{item.enterpriseName}}</text>
+                        <text class="text-cut-1">{{item.residentialName}}</text>
+                    </view>
+                </view>
+                <view class="right">
+                    <image @click.stop="callPhone(item.officeNum)" src="../../../static/index/call.png" mode=""></image>
+                </view>
+            </view>
+        </navigator>
+    </view>
 </template>
 
 <script>
-	export default {
-		props: {
-			list: Array
-		},
-		data() {
-			return {
-				callPhone(phone) {
-					uni.showModal({
-						title: '提示',
-						content: `确定要拨打电话：${phone}吗?`,
-						success: function(res) {
-							if (res.confirm) {
-								uni.makePhoneCall({
-									phoneNumber: phone //仅为示例
-								});
-							}
-						}
-					});
-				}
-			}
-		},
-		methods: {
-
-		}
-	}
+    export default {
+        props: {
+            list: Array
+        },
+        data() {
+            return {
+                callPhone(phone) {
+                    uni.showModal({
+                        title: '提示',
+                        content: `确定要拨打电话：${phone}吗?`,
+                        success: function (res) {
+                            if (res.confirm) {
+                                uni.makePhoneCall({
+                                    phoneNumber: phone //仅为示例
+                                });
+                            }
+                        }
+                    });
+                }
+            }
+        },
+        methods: {}
+    }
 </script>
 
 <style lang="scss">
-	.card {
-		position: relative;
-		background-color: #FFFFFF;
-		padding: 35rpx;
-		margin: 20rpx;
+    .card {
+        position: relative;
+        background-color: #FFFFFF;
+        padding: 35 rpx;
+        margin: 20 rpx;
 
-		.item {
-			display: flex;
-			justify-content: space-between;
-		}
+        .item {
+            display: flex;
+            justify-content: space-between;
+        }
 
-		.left {
-			display: flex;
-			width: 88%;
+        .left {
+            display: flex;
+            width: 88%;
 
-			.tag {
-				border-radius: 50%;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				height: 80rpx;
-				width: 80rpx;
-				font-size: 32rpx;
-			}
+            .tag {
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 80 rpx;
+                width: 80 rpx;
+                font-size: 32 rpx;
+            }
 
-			.content {
-				padding-left: 30rpx;
-				display: flex;
-				flex-direction: column;
+            .content {
+                padding-left: 30 rpx;
+                display: flex;
+                flex-direction: column;
 
-				text:first-child {
-					font-size: 32rpx;
-				}
+                text:first-child {
+                    font-size: 32 rpx;
+                }
 
-				text:last-child {
-					font-size: 28rpx;
-					color: #9f9f9f;
-					padding-top: 15rpx;
-				}
-			}
-		}
+                text:last-child {
+                    font-size: 28 rpx;
+                    color: #9f9f9f;
+                    padding-top: 15 rpx;
+                }
+            }
+        }
 
-		.right {
-			display: flex;
-			justify-content: center;
-			align-items: center;
+        .right {
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
-			image {
-				width: 50rpx;
-				height: 50rpx;
-			}
-		}
-	}
+            image {
+                width: 50 rpx;
+                height: 50 rpx;
+            }
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/enterprise/detail.vue

@@ -1,141 +1,152 @@
 <template>
-	<view>
-		<view class="card">
-			<view class="flex  justify-center padding-left-20">
-				<image src="../../static/icon/qiyegl.png" mode=""></image>
-				<view class="flex flex-direction">
-					<text class="text-bold  " style="padding-bottom: 12rpx;font-size: 36rpx;">{{detail.enterpriseName}}</text>
-					<text class="text-df">{{detail.enterpriseType}}</text>
-				</view>
-			</view>
-		</view>
-		<view class="desc">
-			<view class="flex">
-				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-				<text class="text-lg text-bold">公司简介</text>
-			</view>
-			<view class="sub-title">
-				<text style="padding-left: 60rpx;">
-					{{detail.enterpriseIntroduce}}
-				</text>
-			</view>
-		</view>
-		<view class="bg-white text-black">
-			<view class="flex padding-left-30">
-				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-				<text class="text-lg text-bold">其他信息</text>
-			</view>
-			<view class="cu-list menu text-df padding-top-20">
-				<view class="cu-item">
-					<view class="content">
-						<u-icon size="34" color="#5064eb" name="account" style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
-						<text class="text-lg">法定代表人</text>
-					</view>
-					<view class="action">
-						<text>{{detail.representative}}</text>
-					</view>
-				</view>
-				
-				<view class="cu-item">
-					<view class="content">
-						<u-icon size="38" color="#5064eb" name="plus-circle" style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
-						<text class="text-lg">统一社会信用代码</text>
-					</view>
-					<view class="action">
-						<text>{{detail.creditCode}}</text>
-					</view>
-				</view>
-				
-				<view class="cu-item">
-					<view class="content">
-						<u-icon size="38" color="#5064eb" name="rmb-circle" style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
-						<text class="text-lg">注册金额</text>
-					</view>
-					<view class="action">
-						<text>{{detail.registeredCapital}}</text>
-					</view>
-				</view>
-				
-				<view class="cu-item flex flex-direction" style="align-items: flex-start;padding:20rpx 30rpx;">
-					<view class="content" style="flex-basis: 45%;padding-bottom: 10rpx;">
-						<u-icon size="36" color="#5064eb" name="map" style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
-						<text class="text-lg">公司地址</text>
-					</view>
-					<view class="action" style="padding-left: 60rpx;line-height: 50rpx;">
-						<text>{{detail.region}}</text>
-					</view>
-				</view>
-				
-				<view class="cu-item flex flex-direction" style="align-items: flex-start;padding:20rpx 30rpx;">
-					<view class="content" style="flex-basis: 45%;padding-bottom: 10rpx;">
-						<u-icon size="34" color="#5064eb" name="info-circle" style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
-						<text class="text-lg">注册地址</text>
-					</view>
-					<view class="action" style="padding-left: 60rpx;line-height: 50rpx;">
-						<text>{{detail.registeredAddress}}</text>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
+    <view>
+        <view class="card">
+            <view class="flex  justify-center padding-left-20">
+                <image src="../../static/icon/qiyegl.png" mode=""></image>
+                <view class="flex flex-direction">
+                    <text class="text-bold  " style="padding-bottom: 12rpx;font-size: 36rpx;">
+                        {{detail.enterpriseName}}
+                    </text>
+                    <text class="text-df">{{detail.enterpriseType}}</text>
+                </view>
+            </view>
+        </view>
+        <view class="desc">
+            <view class="flex">
+                <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                       src="../../static/icon/tag1.png" mode=""></image>
+                <text class="text-lg text-bold">公司简介</text>
+            </view>
+            <view class="sub-title">
+                <text style="padding-left: 60rpx;">
+                    {{detail.enterpriseIntroduce}}
+                </text>
+            </view>
+        </view>
+        <view class="bg-white text-black">
+            <view class="flex padding-left-30">
+                <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                       src="../../static/icon/tag1.png" mode=""></image>
+                <text class="text-lg text-bold">其他信息</text>
+            </view>
+            <view class="cu-list menu text-df padding-top-20">
+                <view class="cu-item">
+                    <view class="content">
+                        <u-icon size="34" color="#5064eb" name="account"
+                                style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
+                        <text class="text-lg">法定代表人</text>
+                    </view>
+                    <view class="action">
+                        <text>{{detail.representative}}</text>
+                    </view>
+                </view>
+
+                <view class="cu-item">
+                    <view class="content">
+                        <u-icon size="38" color="#5064eb" name="plus-circle"
+                                style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
+                        <text class="text-lg">统一社会信用代码</text>
+                    </view>
+                    <view class="action">
+                        <text>{{detail.creditCode}}</text>
+                    </view>
+                </view>
+
+                <view class="cu-item">
+                    <view class="content">
+                        <u-icon size="38" color="#5064eb" name="rmb-circle"
+                                style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
+                        <text class="text-lg">注册金额</text>
+                    </view>
+                    <view class="action">
+                        <text>{{detail.registeredCapital}}</text>
+                    </view>
+                </view>
+
+                <view class="cu-item flex flex-direction" style="align-items: flex-start;padding:20rpx 30rpx;">
+                    <view class="content" style="flex-basis: 45%;padding-bottom: 10rpx;">
+                        <u-icon size="36" color="#5064eb" name="map"
+                                style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
+                        <text class="text-lg">公司地址</text>
+                    </view>
+                    <view class="action" style="padding-left: 60rpx;line-height: 50rpx;">
+                        <text>{{detail.region}}</text>
+                    </view>
+                </view>
+
+                <view class="cu-item flex flex-direction" style="align-items: flex-start;padding:20rpx 30rpx;">
+                    <view class="content" style="flex-basis: 45%;padding-bottom: 10rpx;">
+                        <u-icon size="34" color="#5064eb" name="info-circle"
+                                style="padding-left: 10rpx;padding-right: 12rpx;"></u-icon>
+                        <text class="text-lg">注册地址</text>
+                    </view>
+                    <view class="action" style="padding-left: 60rpx;line-height: 50rpx;">
+                        <text>{{detail.registeredAddress}}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				id:'',
-				detail:{},
-			}
-		},
-		onLoad(options) {
-			this.id=options.id
-			this.fetchDeatil()
-		},
-		methods: {
-			fetchDeatil(){
-				this.$api.enterprise.detail({id:this.id}).then(res=>{
-					this.detail=res.data
-				})
-			},
-		}
-	}
+    export default {
+        data() {
+            return {
+                id: '',
+                detail: {},
+            }
+        },
+        onLoad(options) {
+            this.id = options.id
+            this.fetchDeatil()
+        },
+        methods: {
+            fetchDeatil() {
+                this.$api.enterprise.detail({id: this.id}).then(res => {
+                    this.detail = res.data
+                })
+            },
+        }
+    }
 </script>
 
 <style lang="scss">
-	page{
-		background-color: #FFFFFF;
-	}
-	
-	.card{
-		padding:50rpx 20rpx;
-		background-color: #FFFFFF;
-		margin: 10rpx;
-		border-radius: 10rpx;
-		display: flex;
-		box-shadow: 0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
-		image{
-			border: 1rpx solid #f1f1f1;
-			width:95rpx;
-			height: 95rpx;
-			padding-right: 20rpx;
-		}
-	}
-	
-	.desc{
-		background-color: #FFFFFF;
-		padding:40rpx 30rpx;
-		.sub-title{
-			padding-top: 40rpx;
-			font-size: 28rpx;
-			line-height: 50rpx;
-		}
-	}
-	
-	
-	.top{
-		padding-bottom: 30rpx;
-		display: flex;
-		justify-content: space-between;
-	}
+    page {
+        background-color: #FFFFFF;
+    }
+
+    .card {
+        padding: 50 rpx 20 rpx;
+        background-color: #FFFFFF;
+        margin: 10 rpx;
+        border-radius: 10 rpx;
+        display: flex;
+        box-shadow: 0 10 rpx rgba(248, 248, 248, .9), -10rpx 0 rpx rgba(248, 248, 248, .9), 10 rpx 0 rpx rgba(248, 248, 248, .9);
+
+        image {
+            border: 1 rpx solid #f1f1f1;
+            width: 95 rpx;
+            height: 95 rpx;
+            padding-right: 20 rpx;
+        }
+    }
+
+    .desc {
+        background-color: #FFFFFF;
+        padding: 40 rpx 30 rpx;
+
+        .sub-title {
+            padding-top: 40 rpx;
+            font-size: 28 rpx;
+            line-height: 50 rpx;
+        }
+    }
+
+
+    .top {
+        padding-bottom: 30 rpx;
+        display: flex;
+        justify-content: space-between;
+    }
 </style>

mini-program/garden-wxapp/pages/enterprise/enterprise.vue

@@ -1,56 +1,55 @@
 <template>
-	<view>
-		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
-			:up="upOption">
-			<card :list="list"></card>
-		</mescroll-body>
-		<wm-list-add  ref="add" @clickAdd="add"/>
-	</view>
+    <view>
+        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
+                       :up="upOption">
+            <card :list="list"></card>
+        </mescroll-body>
+        <wm-list-add ref="add" @clickAdd="add"/>
+    </view>
 </template>
 
 <script>
-	import wmListAdd from '@/components/wm-list-add/wm-list-add';
-	import card from "./comps/card.vue"
-	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
-	export default {
-		mixins: [MescrollMixin], // 使用mixin
-		components: {
-			card,wmListAdd
-		},
-		data() {
-			return {
+    import wmListAdd from '@/components/wm-list-add/wm-list-add';
+    import card from "./comps/card.vue"
+    import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
 
-			}
-		},
-		onShow() {
-			this.$util.reload(this.mescroll)
-		},
-		methods: {
-			add(){
-				uni.navigateTo({
-					url:"./add"
-				})
-			},
-			upCallback(mescroll) {
-				let params = {}
-				try {
-					this.$api.enterprise.page(params).then(res => {
-						let data = res.data.records
-						data.forEach(item => {
-							item.tagColor = 'bg-' + this.ColorList[Math.floor(Math.random() * this
-								.ColorList.length)]
-						})
-						let total = res.data.total
-						mescroll.endBySize(data.length, total);
-						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
-						this.list = this.list.concat(data); //追加新数据
-					})
-				} catch (e) {
-					this.mescroll.endErr()
-				}
-			}
-		}
-	}
+    export default {
+        mixins: [MescrollMixin], // 使用mixin
+        components: {
+            card, wmListAdd
+        },
+        data() {
+            return {}
+        },
+        onShow() {
+            this.$util.reload(this.mescroll)
+        },
+        methods: {
+            add() {
+                uni.navigateTo({
+                    url: "./add"
+                })
+            },
+            upCallback(mescroll) {
+                let params = {}
+                try {
+                    this.$api.enterprise.page(params).then(res => {
+                        let data = res.data.records
+                        data.forEach(item => {
+                            item.tagColor = 'bg-' + this.ColorList[Math.floor(Math.random() * this
+                                .ColorList.length)]
+                        })
+                        let total = res.data.total
+                        mescroll.endBySize(data.length, total);
+                        if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
+                        this.list = this.list.concat(data); //追加新数据
+                    })
+                } catch (e) {
+                    this.mescroll.endErr()
+                }
+            }
+        }
+    }
 </script>
 
 <style lang="scss">

mini-program/garden-wxapp/pages/guest/guest.vue

@@ -1,540 +1,566 @@
 <template>
-	<view class="">
-		<view style="padding: 0 20rpx 20rpx;" v-if="appletStatus==1">
-			<view class="auth">
-				<view class="flex justify-between padding-bottom-30" >
-					<view class="flex">
-						<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-						<text class="text-lg text-bold">访客开门申请</text>
-					</view>
-					<navigator url="records/records" style="font-size: 22rpx;font-weight: 800;"  class="cu-btn base-line sm round">
-						<text class="cuIcon-footprint padding-right-sm"></text>
-						<text>申请记录</text>
-					</navigator>
-				</view>
-				<view class="card">
-					<u-form :model="model"  ref="uForm" >
-						<u-form-item :required="true"  :label-width="labelWidth"   label="访问园区" >
-							<u-input  type="select" :select-open="agencyShow" v-model="agencyName"  placeholder="请选择要访问的园区" @click="agencyShow=true"></u-input>
-						</u-form-item>
-						<u-form-item  :label-width="labelWidth"   label="访问企业" >
-							<u-input  type="select" :select-open="enterpriseShow" v-model="enterpriseName" placeholder="请选择要访问的企业" @click="enterpriseShow=true"></u-input>
-						</u-form-item>
-						<u-form-item :required="true"  :label-width="labelWidth"   label="访问时间" >
-							<u-input  type="select" :select-open="interviewTimeShow" v-model="model.interviewTime" placeholder="请选择访问时间" @click="interviewTimeShow=true"></u-input>
-						</u-form-item>
-						<u-form :model="model"  ref="uForm" >
-							<u-form-item :required="true" label-position="top" :border-bottom="false" :label-width="labelWidth"   label="访问缘由" >
-								<u-input height="200" v-model="model.guestReason" placeholder="填写访问缘由" type="textarea" :border="border" />
-							</u-form-item>
-							<!-- <textarea value="" v-model="model.remarks" placeholder="填写备注信息" /> -->
-						</u-form>
-					</u-form>
-				</view>
-			</view>
-			
-			<view class="auth">
-				<view class="flex">
-					<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-					<text class="text-lg text-bold">基本信息</text>
-				</view>
-				<view class="card">
-					<u-form :model="model"  ref="uForm" >
-						<u-form-item :required="true"  :label-width="labelWidth"  label="姓名" >
-							<u-input  placeholder="请输入姓名" v-model="model.guestName" type="text"></u-input>
-						</u-form-item>
-						<u-form-item  :label-width="labelWidth"   label="性别" >
-							<u-input  type="select" :select-open="sexSelectShow" v-model="sexSelectList[sexSelectIndex].text" placeholder="请选择性别" @click="sexSelectShow = true"></u-input>
-						</u-form-item>
-						<u-form-item  :required="true" label="手机号码"  :label-width="labelWidth">
-							<u-input maxlength="11"  placeholder="请输入手机号" v-model="model.guestTel" type="number"></u-input>
-						</u-form-item>
-						<u-form-item   label="身份证号"  :label-width="labelWidth">
-							<u-input maxlength="18"  placeholder="请输入身份证号" v-model="model.guestIdcard" ></u-input>
-						</u-form-item>
-					</u-form>
-				</view>
-			</view>
-			
-			<view class="auth">
-				<view class="flex">
-					<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-					<text class="text-lg text-bold">人脸信息采集（可选）</text>
-				</view>
-				<view  style="font-size: 28rpx;padding: 20rpx 0 10rpx 30rpx;">
-					<text class="text-red text-bold">*</text>
-					<text style="color: #797979;">人脸照片用于人脸识别开门</text>
-				</view>
-				<view class="card">
-					<view @click="faceSelectShow=true" class="flex justify-center padding-bottom-50">
-						<view class=" ">
-							<upload-img
-							   :width="$isEmpty(model.imageUri)?350:560"
-							   :height="$isEmpty(model.imageUri)?350:420"
-							  :currentImage="model.imageUri"
-							  bgsrc="https://szsq.nxzhsq.cn/community/miniofile/xlyq/face1.png"
-							  >
-							</upload-img>
-							<view class="text-center  padding-top-20 base-color" >
-							 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
-							 <text v-if="$isEmpty(model.imageUri)">点击上传人脸</text>
-							 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		
-			<button @click="submit" :style="{marginBottom:safeAreaBottom}"   class="cu-btn base-bg-color round flex" style="padding: 40rpx 0;margin-top: 40rpx;">
-				<text >提交申请</text>
-			</button>
-			<!-- 性别 -->
-			<u-picker v-model="sexSelectShow" @confirm="sexSelectCallback" :range="sexSelectList" range-key="text" mode="selector"></u-picker>
-			
-			<!-- 园区 -->
-			<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="agencyShow">
-				<view class="fixed cu-bar search bg-white">
-					<view class="search-form round">
-						<text class="cuIcon-search"></text>
-						<u-input style="width: 90%;" v-model="agencyKeyWord" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
-					</view>
-				</view>
-				<scroll-view v-if="!$isEmpty(agencyList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
-					<view @click="selectAgency(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in agencyList" :key="index">
-						<text>{{item.agencyName}}</text>
-					</view>
-					<u-divider v-if="agencyList.length>=20" height="80">只显示20条数据</u-divider>
-				</scroll-view>
-				<u-empty v-else name="search"></u-empty>
-			</u-popup>
-			
-			<!-- 企业列表 -->
-			<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="enterpriseShow">
-				<view class="fixed cu-bar search bg-white">
-					<view class="search-form round">
-						<text class="cuIcon-search"></text>
-						<u-input style="width: 90%;" v-model="enterpriseKeyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
-					</view>
-				</view>
-				<scroll-view v-if="!$isEmpty(enterpriseList)" style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
-					<view @click="selectEnterprise(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in enterpriseList" :key="index">
-						<text>{{item.enterpriseName}}</text>
-					</view>
-					<u-divider v-if="enterpriseList.length>=20" height="80">只显示20条数据</u-divider>
-				</scroll-view>
-				<u-empty v-else name="search"></u-empty>
-			</u-popup>
-			
-			<!-- 访问时间 -->
-			<u-picker @confirm="interviewTimeConfirm" :params="params" v-model="interviewTimeShow" mode="time"></u-picker>
-			<u-action-sheet @click="faceSelectCallback"  z-index="999999" :list="faceSelectList" v-model="faceSelectShow"></u-action-sheet>
-		</view>
-		<view v-else>
-			
-		</view>
-	</view>
+    <view class="">
+        <view style="padding: 0 20rpx 20rpx;" v-if="appletStatus==1">
+            <view class="auth">
+                <view class="flex justify-between padding-bottom-30">
+                    <view class="flex">
+                        <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                               src="../../static/icon/tag1.png" mode=""></image>
+                        <text class="text-lg text-bold">访客开门申请</text>
+                    </view>
+                    <navigator url="records/records" style="font-size: 22rpx;font-weight: 800;"
+                               class="cu-btn base-line sm round">
+                        <text class="cuIcon-footprint padding-right-sm"></text>
+                        <text>申请记录</text>
+                    </navigator>
+                </view>
+                <view class="card">
+                    <u-form :model="model" ref="uForm">
+                        <u-form-item :required="true" :label-width="labelWidth" label="访问园区">
+                            <u-input type="select" :select-open="agencyShow" v-model="agencyName"
+                                     placeholder="请选择要访问的园区" @click="agencyShow=true"></u-input>
+                        </u-form-item>
+                        <u-form-item :label-width="labelWidth" label="访问企业">
+                            <u-input type="select" :select-open="enterpriseShow" v-model="enterpriseName"
+                                     placeholder="请选择要访问的企业" @click="enterpriseShow=true"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" :label-width="labelWidth" label="访问时间">
+                            <u-input type="select" :select-open="interviewTimeShow" v-model="model.interviewTime"
+                                     placeholder="请选择访问时间" @click="interviewTimeShow=true"></u-input>
+                        </u-form-item>
+                        <u-form :model="model" ref="uForm">
+                            <u-form-item :required="true" label-position="top" :border-bottom="false"
+                                         :label-width="labelWidth" label="访问缘由">
+                                <u-input height="200" v-model="model.guestReason" placeholder="填写访问缘由" type="textarea"
+                                         :border="border"/>
+                            </u-form-item>
+                            <!-- <textarea value="" v-model="model.remarks" placeholder="填写备注信息" /> -->
+                        </u-form>
+                    </u-form>
+                </view>
+            </view>
+
+            <view class="auth">
+                <view class="flex">
+                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                           src="../../static/icon/tag1.png" mode=""></image>
+                    <text class="text-lg text-bold">基本信息</text>
+                </view>
+                <view class="card">
+                    <u-form :model="model" ref="uForm">
+                        <u-form-item :required="true" :label-width="labelWidth" label="姓名">
+                            <u-input placeholder="请输入姓名" v-model="model.guestName" type="text"></u-input>
+                        </u-form-item>
+                        <u-form-item :label-width="labelWidth" label="性别">
+                            <u-input type="select" :select-open="sexSelectShow"
+                                     v-model="sexSelectList[sexSelectIndex].text" placeholder="请选择性别"
+                                     @click="sexSelectShow = true"></u-input>
+                        </u-form-item>
+                        <u-form-item :required="true" label="手机号码" :label-width="labelWidth">
+                            <u-input maxlength="11" placeholder="请输入手机号" v-model="model.guestTel"
+                                     type="number"></u-input>
+                        </u-form-item>
+                        <u-form-item label="身份证号" :label-width="labelWidth">
+                            <u-input maxlength="18" placeholder="请输入身份证号" v-model="model.guestIdcard"></u-input>
+                        </u-form-item>
+                    </u-form>
+                </view>
+            </view>
+
+            <view class="auth">
+                <view class="flex">
+                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                           src="../../static/icon/tag1.png" mode=""></image>
+                    <text class="text-lg text-bold">人脸信息采集（可选）</text>
+                </view>
+                <view style="font-size: 28rpx;padding: 20rpx 0 10rpx 30rpx;">
+                    <text class="text-red text-bold">*</text>
+                    <text style="color: #797979;">人脸照片用于人脸识别开门</text>
+                </view>
+                <view class="card">
+                    <view @click="faceSelectShow=true" class="flex justify-center padding-bottom-50">
+                        <view class=" ">
+                            <upload-img
+                                    :width="$isEmpty(model.imageUri)?350:560"
+                                    :height="$isEmpty(model.imageUri)?350:420"
+                                    :currentImage="model.imageUri"
+                                    bgsrc="https://szsq.nxzhsq.cn/community/miniofile/xlyq/face1.png"
+                            >
+                            </upload-img>
+                            <view class="text-center  padding-top-20 base-color">
+                                <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
+                                <text v-if="$isEmpty(model.imageUri)">点击上传人脸</text>
+                                <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <button @click="submit" :style="{marginBottom:safeAreaBottom}" class="cu-btn base-bg-color round flex"
+                    style="padding: 40rpx 0;margin-top: 40rpx;">
+                <text>提交申请</text>
+            </button>
+            <!-- 性别 -->
+            <u-picker v-model="sexSelectShow" @confirm="sexSelectCallback" :range="sexSelectList" range-key="text"
+                      mode="selector"></u-picker>
+
+            <!-- 园区 -->
+            <u-popup border-radius="60" height="60%" mode="bottom" v-model="agencyShow">
+                <view class="fixed cu-bar search bg-white">
+                    <view class="search-form round">
+                        <text class="cuIcon-search"></text>
+                        <u-input style="width: 90%;" v-model="agencyKeyWord" type="text" :adjust-position="false"
+                                 placeholder="请输入关键字搜索" confirm-type="search"/>
+                    </view>
+                </view>
+                <scroll-view v-if="!$isEmpty(agencyList)" style="padding-top: 110rpx;height: 100%;" :scroll-y="true">
+                    <view @click="selectAgency(item)" hover-class="hoverClass"
+                          class="text-center padding-30 solid-bottom" v-for="(item,index) in agencyList" :key="index">
+                        <text>{{item.agencyName}}</text>
+                    </view>
+                    <u-divider v-if="agencyList.length>=20" height="80">只显示20条数据</u-divider>
+                </scroll-view>
+                <u-empty v-else name="search"></u-empty>
+            </u-popup>
+
+            <!-- 企业列表 -->
+            <u-popup border-radius="60" height="60%" mode="bottom" v-model="enterpriseShow">
+                <view class="fixed cu-bar search bg-white">
+                    <view class="search-form round">
+                        <text class="cuIcon-search"></text>
+                        <u-input style="width: 90%;" v-model="enterpriseKeyword" type="text" :adjust-position="false"
+                                 placeholder="请输入关键字搜索" confirm-type="search"/>
+                    </view>
+                </view>
+                <scroll-view v-if="!$isEmpty(enterpriseList)" style="padding-top: 110rpx;height: 100%;"
+                             :scroll-y="true">
+                    <view @click="selectEnterprise(item)" hover-class="hoverClass"
+                          class="text-center padding-30 solid-bottom" v-for="(item,index) in enterpriseList"
+                          :key="index">
+                        <text>{{item.enterpriseName}}</text>
+                    </view>
+                    <u-divider v-if="enterpriseList.length>=20" height="80">只显示20条数据</u-divider>
+                </scroll-view>
+                <u-empty v-else name="search"></u-empty>
+            </u-popup>
+
+            <!-- 访问时间 -->
+            <u-picker @confirm="interviewTimeConfirm" :params="params" v-model="interviewTimeShow"
+                      mode="time"></u-picker>
+            <u-action-sheet @click="faceSelectCallback" z-index="999999" :list="faceSelectList"
+                            v-model="faceSelectShow"></u-action-sheet>
+        </view>
+        <view v-else>
+
+        </view>
+    </view>
 </template>
 
 <script>
-	import uploadImg from '@/components/uploadimg/uploadImg.vue'
-	let that;
-	export default {
-		components:{
-		   uploadImg
-		},
-		data() {
-			return {
-				//0 体验版 1正式版
-				appletStatus:0,
-			
-				labelWidth:'200',
-				model: {
-					openId:'',
-					agencyId:'',
-					enterpriseId:'',
-					guestName:'',
-					guestTel:'',
-					guestSex:'',//1 男 2 女
-					guestIdcard:'',//身份证号
-					guestReason:'',//访问缘由
-					interviewTime:'',//访问时间
-					imageUri:''
-				},
-				//访问时间
-				interviewTimeShow:false,
-				params: {
-					year: true,
-					month: true,
-					day: true,
-					hour: false,
-					minute: false,
-					second: false
-				},
-				//性别
-				sexSelectList: [{text: '男',value:1},{text: '女',value:2}],
-				sexSelectShow: false,
-				sexSelectIndex:0,
-				
-				//园区下拉框
-				agencyName:'',
-				agencyList:[],
-				agencyKeyWord:'',
-				agencyShow:false,
-				
-				//企业下拉框
-				enterpriseName:'',//回显
-				enterpriseShow:false,
-				enterpriseList:[],
-				enterpriseKeyword:'',
-				
-				//上传人脸的方式
-				faceSelectList: [{
-					text: '相册上传',
-				}, {
-					text: '拍照上传'
-				}],
-				faceSelectShow:false,
-			}
-		},
-		watch:{
-			agencyKeyWord(){
-				let that=this
-				//节流函数
-				if (this.timer){
-					clearTimeout(this.timer)
-				}
-				this.timer = setTimeout(() => {
-					that.agencyList=[]
-					that.getAgencyList()
-				}, 500)
-			},
-			enterpriseKeyword(){
-				let that=this
-				//节流函数
-				if (this.timer){
-					clearTimeout(this.timer)
-				}
-				this.timer = setTimeout(() => {
-					that.enterpriseList=[]
-					that.getEnterpriseList()
-				}, 500)
-			},
-		},
-		computed: {
-		  //ios底部安全区域
-		  safeAreaBottom() {
-		    let info = uni.getSystemInfoSync()
-		    let safe = 20
-		    if (
-		      info &&
-		      ['devtools', 'ios'].includes(info.platform) &&
-		      info.statusBarHeight > safe
-		    ) {
-		      return info.statusBarHeight - safe+'px'
-		    }
-		    return 0
-		  }
-		},
-		onShow() {
-			this.handelAppletAudit()
-			
-			let currPage=this.getPageCtx()
-			if (!this.$isEmpty(currPage.data.image)) {
-				this.uploadFile(currPage.data.image)
-			}
-		},
-		
-		onLoad(options) {
-			that=this
-			//拉取园区列表
-			this.getAgencyList()
-			this.getEnterpriseList()
-			
-			if (!this.$isEmpty(options.agencyId)&&!this.$isEmpty(options.agencyName)) {
-				this.model.agencyId=options.agencyId
-				this.agencyName=options.agencyName
-			}
-			if (!this.$isEmpty(options.enterpriseId)&&!this.$isEmpty(options.enterpriseName)) {
-				this.model.enterpriseId=options.enterpriseId
-				this.enterpriseName=options.enterpriseName
-			}
-			
-			if (!this.$isEmpty(options.interviewTime)&&!this.$isEmpty(options.interviewTime)) {
-				this.model.interviewTime=options.interviewTime
-			}
-			if (!this.$isEmpty(options.openId)) {
-				this.model.openId=options.openId
-			}else{
-				//获取openid
-				this.getOpenid()
-			}
-		},
-		methods: {
-			handelAppletAudit(){
-				this.appletStatus=uni.getStorageSync("appletStatus")
-				if (this.appletStatus==1) {
-					uni.setNavigationBarTitle({
-						title:'申请开门'
-					})
-				}else{
-					uni.setNavigationBarTitle({
-						title:'待开发'
-					})
-				}
-			},
-			/**
-			 * 获取openid
-			 */
-			getOpenid(){
-				uni.login({
-					success: (res) => {
-						let data={
-							appId:this.$api.wxData.appId,
-							jsCode:res.code,
-							secret:this.$api.wxData.secret
-						}
-						this.$api.wxApi.getOpenId(data).then(res=>{
-							let resData= JSON.parse(res.data)
-							this.model.openId=resData.openid
-							if (this.$isEmpty(this.model.openId)) {
-								uni.showModal({
-									content:"系统错误，获取openid失败",
-									showCancel:false,
-									success() {
-										uni.reLaunch({
-											url:"/pages/login/login"
-										})
-									}
-								})
-							}
-						})
-					}
-				})
-			},
-			//获取园区列表
-			getAgencyList(){
-				let params={
-					size:20,
-					agencyName:this.agencyKeyWord
-				}
-				this.$api.agency.getAgencyTenantList(params).then(res=>{
-					this.agencyList = res.data
-				})
-			},
-			//选择园区
-			selectAgency(item){
-				let params={
-					tenantId:item.tenantId,
-					username:item.account,
-					password:item.password
-				}
-				this.model.agencyId=item.id
-				this.agencyName=item.agencyName
-				this.agencyShow=false
-				this.$cache.put('tokenObj',params)
-				//获取token
-				this.$api.getToken(this.$u.queryParams(params)).then(res=>{
-					let token=res.token_type+" "+res.access_token
-					uni.setStorageSync('token', token)
-					//获取企业列表
-					this.getEnterpriseList()
-				})
-				
-			},
-			//获取企业列表
-			getEnterpriseList(){
-				let params={
-					size:20,
-					enterpriseName:this.enterpriseKeyword
-				}
-				this.$api.enterprise.page(params).then(res=>{
-					this.enterpriseList =res.data.records
-				})
-			},
-			//选择企业
-			selectEnterprise(item){
-				this.enterpriseShow=false
-				this.enterpriseName=item.enterpriseName
-				this.model.enterpriseId=item.id
-			},
-			
-			/**
-			 * 获取页面对象
-			 */
-			getPageCtx(idx = 0){
-			  let pages = getCurrentPages()
-			  if (pages.length > 0) {
-			    return pages[pages.length - 1 - idx] || {}
-			  }
-			  return {}
-			},
-			//性别
-			sexSelectCallback(e) {
-				uni.hideKeyboard();
-				this.sexSelectIndex=e[0]
-				this.model.guestSex=this.sexSelectList[this.sexSelectIndex].value
-			},
-			//访问时间
-			interviewTimeConfirm(e){
-				this.model.interviewTime=e.year+'-'+e.month+'-'+e.day
-			},
-			//人脸上传
-			faceSelectCallback(index){
-				if (index==0) {
-					//图片上传
-					this.chooseImage()
-				} else if(index==1){
-					//拍照上传
-					uni.navigateTo({
-						url:'/pages/my-camera/my-camera'
-					})
-				}
-			},
-			//点击上传图片事件
-			chooseImage: function () {
-			  uni.chooseImage({
-			    count: 1,
-			    //最多可以选择的图片张数，默认9
-			    sourceType: ['album'],
-			    sizeType: ['compressed'],
-			    //可选择原图或压缩后的图片
-			    success: res => {
-			      that.uploadFile(res.tempFilePaths[0])
-			    }
-			  });
-			},
-			//处理照片，拍照上传和相册上传的共同处理方法
-			uploadFile(imgUrl){
-				this.$api.uploadFile.submit(imgUrl).then(res=>{
-					that.model.imageUri=res.data
-				})
-			},
-			async send(openId){
-				let tokenData={
-					grantType:this.$api.wxData.subscribe_grant_type,
-					appId:this.$api.wxData.appId,
-					secret:this.$api.wxData.secret
-				}
-				let res=await this.$api.wxApi.getAccessToken(tokenData)
-				let token=JSON.parse(res.data).access_token
-				let subscribeData={
-					accessToken:token,
-					touser:openId,
-					lang:"zh_CN",
-					page:'/pages/guest/records/records',
-					miniprogramState:this.$miniprogramState,
-				    templateId: this.$adminTmplIds[1],
-					  "data": {
-						  "thing1": {
-							  "value": this.model.guestName
-						  },
-						  "phone_number2":{
-							  "value": this.model.guestTel
-						  },
-						  "thing4": {
-							  "value": this.model.agencyName
-						  },
-						  "thing3": {
-							  "value": this.model.guestReason
-						  },
-					}
-				}
-				let resp=await this.$api.wxApi.subscribe(subscribeData)
-				console.log(resp);
-			},
-			async getOpenListAndSendMsg(){
-				let agencyRes=await this.$api.getManagerOpenList({agencyId:this.model.agencyId})
-				let enterpriseRes=await this.$api.getManagerOpenList({enterpriseId:this.model.enterpriseId})
-				let openIds=[...agencyRes.data,...enterpriseRes.data]
-				openIds.forEach(item=>{
-					this.send(item)
-				})
-			},
-			async submit(){
-				await this.$mpi.subscribe(that.$staffTmplIds)
-				if (this.$isEmpty(this.model.agencyId)) {
-					this.$u.toast('请选择要访问的园区')
-					return
-				}
-				if (this.$isEmpty(this.model.interviewTime)) {
-					this.$u.toast('请选择访问时间')
-					return
-				}
-				if (this.$isEmpty(this.model.guestReason)) {
-					this.$u.toast('请填写访问缘由')
-					return
-				}
-				if (this.$isEmpty(this.model.guestName)) {
-					this.$u.toast('请填写姓名')
-					return
-				}
-				if (this.$isEmpty(this.model.guestTel)) {
-					this.$u.toast('请填写手机号')
-					return
-				}
-				if (!this.$verify.isMobile(this.model.guestTel)) {
-					this.$u.toast('请填写正确的手机号')
-					return
-				}
-				if (!this.$isEmpty(this.model.guestIdcard)) {
-					if (!this.$u.test.idCard(this.model.guestIdcard)) {
-						this.$u.toast('请输入正确的身份证号')
-						return
-					}
-				}
-				this.$api.guest.submit(this.model).then(res=>{
-					if (res.success) {
-						uni.showModal({
-							content:'操作成功，请耐心等待管理员审核',
-							showCancel:false,
-							success() {
-								that.getOpenListAndSendMsg()
-								that.agencyName=''
-								that.enterpriseName=''
-								that.model={
-									openId:'',
-									agencyId:'',
-									enterpriseId:'',
-									guestName:'', 
-									guestSex:'',//1 男 2 女
-									guestIdcard:'',//身份证号
-									guestReason:'',//访问缘由
-									interviewTime:'',//访问时间
-									imageUri:''
-								}
-							}
-						})
-					}
-				})
-			},
-		},
-		
-		/**打开设置页
-		 * 方法可以不实现，但是不可以不写
-		 */
-		opensetting(){
-			
-		}
-	}
+    import uploadImg from '@/components/uploadimg/uploadImg.vue'
+
+    let that;
+    export default {
+        components: {
+            uploadImg
+        },
+        data() {
+            return {
+                //0 体验版 1正式版
+                appletStatus: 0,
+
+                labelWidth: '200',
+                model: {
+                    openId: '',
+                    agencyId: '',
+                    enterpriseId: '',
+                    guestName: '',
+                    guestTel: '',
+                    guestSex: '',//1 男 2 女
+                    guestIdcard: '',//身份证号
+                    guestReason: '',//访问缘由
+                    interviewTime: '',//访问时间
+                    imageUri: ''
+                },
+                //访问时间
+                interviewTimeShow: false,
+                params: {
+                    year: true,
+                    month: true,
+                    day: true,
+                    hour: false,
+                    minute: false,
+                    second: false
+                },
+                //性别
+                sexSelectList: [{text: '男', value: 1}, {text: '女', value: 2}],
+                sexSelectShow: false,
+                sexSelectIndex: 0,
+
+                //园区下拉框
+                agencyName: '',
+                agencyList: [],
+                agencyKeyWord: '',
+                agencyShow: false,
+
+                //企业下拉框
+                enterpriseName: '',//回显
+                enterpriseShow: false,
+                enterpriseList: [],
+                enterpriseKeyword: '',
+
+                //上传人脸的方式
+                faceSelectList: [{
+                    text: '相册上传',
+                }, {
+                    text: '拍照上传'
+                }],
+                faceSelectShow: false,
+            }
+        },
+        watch: {
+            agencyKeyWord() {
+                let that = this
+                //节流函数
+                if (this.timer) {
+                    clearTimeout(this.timer)
+                }
+                this.timer = setTimeout(() => {
+                    that.agencyList = []
+                    that.getAgencyList()
+                }, 500)
+            },
+            enterpriseKeyword() {
+                let that = this
+                //节流函数
+                if (this.timer) {
+                    clearTimeout(this.timer)
+                }
+                this.timer = setTimeout(() => {
+                    that.enterpriseList = []
+                    that.getEnterpriseList()
+                }, 500)
+            },
+        },
+        computed: {
+            //ios底部安全区域
+            safeAreaBottom() {
+                let info = uni.getSystemInfoSync()
+                let safe = 20
+                if (
+                    info &&
+                    ['devtools', 'ios'].includes(info.platform) &&
+                    info.statusBarHeight > safe
+                ) {
+                    return info.statusBarHeight - safe + 'px'
+                }
+                return 0
+            }
+        },
+        onShow() {
+            this.handelAppletAudit()
+
+            let currPage = this.getPageCtx()
+            if (!this.$isEmpty(currPage.data.image)) {
+                this.uploadFile(currPage.data.image)
+            }
+        },
+
+        onLoad(options) {
+            that = this
+            //拉取园区列表
+            this.getAgencyList()
+            this.getEnterpriseList()
+
+            if (!this.$isEmpty(options.agencyId) && !this.$isEmpty(options.agencyName)) {
+                this.model.agencyId = options.agencyId
+                this.agencyName = options.agencyName
+            }
+            if (!this.$isEmpty(options.enterpriseId) && !this.$isEmpty(options.enterpriseName)) {
+                this.model.enterpriseId = options.enterpriseId
+                this.enterpriseName = options.enterpriseName
+            }
+
+            if (!this.$isEmpty(options.interviewTime) && !this.$isEmpty(options.interviewTime)) {
+                this.model.interviewTime = options.interviewTime
+            }
+            if (!this.$isEmpty(options.openId)) {
+                this.model.openId = options.openId
+            } else {
+                //获取openid
+                this.getOpenid()
+            }
+        },
+        methods: {
+            handelAppletAudit() {
+                this.appletStatus = uni.getStorageSync("appletStatus")
+                if (this.appletStatus == 1) {
+                    uni.setNavigationBarTitle({
+                        title: '申请开门'
+                    })
+                } else {
+                    uni.setNavigationBarTitle({
+                        title: '待开发'
+                    })
+                }
+            },
+            /**
+             * 获取openid
+             */
+            getOpenid() {
+                uni.login({
+                    success: (res) => {
+                        let data = {
+                            appId: this.$api.wxData.appId,
+                            jsCode: res.code,
+                            secret: this.$api.wxData.secret
+                        }
+                        this.$api.wxApi.getOpenId(data).then(res => {
+                            let resData = JSON.parse(res.data)
+                            this.model.openId = resData.openid
+                            if (this.$isEmpty(this.model.openId)) {
+                                uni.showModal({
+                                    content: "系统错误，获取openid失败",
+                                    showCancel: false,
+                                    success() {
+                                        uni.reLaunch({
+                                            url: "/pages/login/login"
+                                        })
+                                    }
+                                })
+                            }
+                        })
+                    }
+                })
+            },
+            //获取园区列表
+            getAgencyList() {
+                let params = {
+                    size: 20,
+                    agencyName: this.agencyKeyWord
+                }
+                this.$api.agency.getAgencyTenantList(params).then(res => {
+                    this.agencyList = res.data
+                })
+            },
+            //选择园区
+            selectAgency(item) {
+                let params = {
+                    tenantId: item.tenantId,
+                    username: item.account,
+                    password: item.password
+                }
+                this.model.agencyId = item.id
+                this.agencyName = item.agencyName
+                this.agencyShow = false
+                this.$cache.put('tokenObj', params)
+                //获取token
+                this.$api.getToken(this.$u.queryParams(params)).then(res => {
+                    let token = res.token_type + " " + res.access_token
+                    uni.setStorageSync('token', token)
+                    //获取企业列表
+                    this.getEnterpriseList()
+                })
+
+            },
+            //获取企业列表
+            getEnterpriseList() {
+                let params = {
+                    size: 20,
+                    enterpriseName: this.enterpriseKeyword
+                }
+                this.$api.enterprise.page(params).then(res => {
+                    this.enterpriseList = res.data.records
+                })
+            },
+            //选择企业
+            selectEnterprise(item) {
+                this.enterpriseShow = false
+                this.enterpriseName = item.enterpriseName
+                this.model.enterpriseId = item.id
+            },
+
+            /**
+             * 获取页面对象
+             */
+            getPageCtx(idx = 0) {
+                let pages = getCurrentPages()
+                if (pages.length > 0) {
+                    return pages[pages.length - 1 - idx] || {}
+                }
+                return {}
+            },
+            //性别
+            sexSelectCallback(e) {
+                uni.hideKeyboard();
+                this.sexSelectIndex = e[0]
+                this.model.guestSex = this.sexSelectList[this.sexSelectIndex].value
+            },
+            //访问时间
+            interviewTimeConfirm(e) {
+                this.model.interviewTime = e.year + '-' + e.month + '-' + e.day
+            },
+            //人脸上传
+            faceSelectCallback(index) {
+                if (index == 0) {
+                    //图片上传
+                    this.chooseImage()
+                } else if (index == 1) {
+                    //拍照上传
+                    uni.navigateTo({
+                        url: '/pages/my-camera/my-camera'
+                    })
+                }
+            },
+            //点击上传图片事件
+            chooseImage: function () {
+                uni.chooseImage({
+                    count: 1,
+                    //最多可以选择的图片张数，默认9
+                    sourceType: ['album'],
+                    sizeType: ['compressed'],
+                    //可选择原图或压缩后的图片
+                    success: res => {
+                        that.uploadFile(res.tempFilePaths[0])
+                    }
+                });
+            },
+            //处理照片，拍照上传和相册上传的共同处理方法
+            uploadFile(imgUrl) {
+                this.$api.uploadFile.submit(imgUrl).then(res => {
+                    that.model.imageUri = res.data
+                })
+            },
+            async send(openId) {
+                let tokenData = {
+                    grantType: this.$api.wxData.subscribe_grant_type,
+                    appId: this.$api.wxData.appId,
+                    secret: this.$api.wxData.secret
+                }
+                let res = await this.$api.wxApi.getAccessToken(tokenData)
+                let token = JSON.parse(res.data).access_token
+                let subscribeData = {
+                    accessToken: token,
+                    touser: openId,
+                    lang: "zh_CN",
+                    page: '/pages/guest/records/records',
+                    miniprogramState: this.$miniprogramState,
+                    templateId: this.$adminTmplIds[1],
+                    "data": {
+                        "thing1": {
+                            "value": this.model.guestName
+                        },
+                        "phone_number2": {
+                            "value": this.model.guestTel
+                        },
+                        "thing4": {
+                            "value": this.model.agencyName
+                        },
+                        "thing3": {
+                            "value": this.model.guestReason
+                        },
+                    }
+                }
+                let resp = await this.$api.wxApi.subscribe(subscribeData)
+                console.log(resp);
+            },
+            async getOpenListAndSendMsg() {
+                let agencyRes = await this.$api.getManagerOpenList({agencyId: this.model.agencyId})
+                let enterpriseRes = await this.$api.getManagerOpenList({enterpriseId: this.model.enterpriseId})
+                let openIds = [...agencyRes.data, ...enterpriseRes.data]
+                openIds.forEach(item => {
+                    this.send(item)
+                })
+            },
+            async submit() {
+                await this.$mpi.subscribe(that.$staffTmplIds)
+                if (this.$isEmpty(this.model.agencyId)) {
+                    this.$u.toast('请选择要访问的园区')
+                    return
+                }
+                if (this.$isEmpty(this.model.interviewTime)) {
+                    this.$u.toast('请选择访问时间')
+                    return
+                }
+                if (this.$isEmpty(this.model.guestReason)) {
+                    this.$u.toast('请填写访问缘由')
+                    return
+                }
+                if (this.$isEmpty(this.model.guestName)) {
+                    this.$u.toast('请填写姓名')
+                    return
+                }
+                if (this.$isEmpty(this.model.guestTel)) {
+                    this.$u.toast('请填写手机号')
+                    return
+                }
+                if (!this.$verify.isMobile(this.model.guestTel)) {
+                    this.$u.toast('请填写正确的手机号')
+                    return
+                }
+                if (!this.$isEmpty(this.model.guestIdcard)) {
+                    if (!this.$u.test.idCard(this.model.guestIdcard)) {
+                        this.$u.toast('请输入正确的身份证号')
+                        return
+                    }
+                }
+                this.$api.guest.submit(this.model).then(res => {
+                    if (res.success) {
+                        uni.showModal({
+                            content: '操作成功，请耐心等待管理员审核',
+                            showCancel: false,
+                            success() {
+                                that.getOpenListAndSendMsg()
+                                that.agencyName = ''
+                                that.enterpriseName = ''
+                                that.model = {
+                                    openId: '',
+                                    agencyId: '',
+                                    enterpriseId: '',
+                                    guestName: '',
+                                    guestSex: '',//1 男 2 女
+                                    guestIdcard: '',//身份证号
+                                    guestReason: '',//访问缘由
+                                    interviewTime: '',//访问时间
+                                    imageUri: ''
+                                }
+                            }
+                        })
+                    }
+                })
+            },
+        },
+
+        /**打开设置页
+         * 方法可以不实现，但是不可以不写
+         */
+        opensetting() {
+
+        }
+    }
 </script>
 
 <style lang="scss">
-	page{
-		background-color: #FFFFFF;
-	}
-	.auth{
-		padding: 40rpx 10rpx;
-		.card{
-			margin-top: 20rpx;
-			padding: 0 30rpx;
-			box-sizing: border-box;
-			border-radius: 12rpx;
-			box-shadow: 0 -10rpx rgba(248, 248, 248,.9) ,0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
-			.item{
-				padding:30rpx 0;
-				display: flex;
-				justify-content: space-between;
-			}
-		}
-	}
+    page {
+        background-color: #FFFFFF;
+    }
+
+    .auth {
+        padding: 40 rpx 10 rpx;
+
+        .card {
+            margin-top: 20 rpx;
+            padding: 0 30 rpx;
+            box-sizing: border-box;
+            border-radius: 12 rpx;
+            box-shadow: 0 -10rpx rgba(248, 248, 248, .9), 0 10 rpx rgba(248, 248, 248, .9), -10rpx 0 rpx rgba(248, 248, 248, .9), 10 rpx 0 rpx rgba(248, 248, 248, .9);
+
+            .item {
+                padding: 30 rpx 0;
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/guest/open-door/open-door.vue

@@ -1,184 +1,188 @@
-<template>
-	<view class="page" style="position: relative;">
-		<view class="content">
-			<loading  isFullScreen color="#5064eb" :active="isloading" text="开门中..."></loading>
-			<view @click="itemClick(item)" class="device u-border-bottom" v-for="(item,index) in device_list" :key="index">
-				<view class="flex justify-between">
-					<view class="flex"  style="width: 80%;">
-						<view class="tag" :class="item.tagColor">
-							<text>{{item.cameraName.substr(0,1)}}</text>
-						</view>
-						<view class="flex justify-center align-center padding-left-20 text-lg">
-							<text>{{item.cameraName}}</text>
-						</view>
-					</view>
-					
-					<view class="flex justify-center align-center">
-						<u-radio-group size="40" active-color="#5064eb" v-model="door_value">
-							<u-radio
-							 @change.stop="radioChange"
-								:name="item.macAddress">
-							</u-radio>
-						</u-radio-group>
-					</view>
-				</view>
-				
-			</view>
-			
-			<view class="" style="position: fixed;bottom: 15%;left: calc( 50% - 90rpx);">
-				<view @click="openDoor(door_value)" class="btn-open text-center flex justify-center align-center" style="border-radius: 50%;height: 180rpx;width: 180rpx;font-size: 34rpx;">
-					<text>开门</text>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-var app=getApp()
-var that;
-import loading from "@/components/loading/loading.vue"
-export default {
-	components:{
-		loading
-	},
-	data() {
-		return {
-			//操作哪一项
-			clickItem:'',
-			
-			//选中值
-			door_value:'',
-			//访客开门的userid为999加该访客的手机号
-			userId:'',
-			
-			//是否已开门
-			isopen:false,
-			//是否展示动画
-			isloading:false,
-			//设备列表
-			device_list:[],
-		};
-	},
-	onLoad(options) {
-		that=this
-		if (this.$isEmpty(options.guestTel)) {
-			this.$dialog.showModal('系统异常',false).then(res=>{
-				this.$navigateBack()
-			})
-			return
-		}
-		this.userId='999'+options.guestTel
-		this.fetchDeviceList()
-	},
-	onShow() {
-		if (this.canReset) {
-			let list=this.$u.deepClone(this.device_list)
-			list.forEach(item=>{
-				item.tagColor='bg-'+this.ColorList[Math.floor(Math.random()*this.ColorList.length)]
-			})
-			this.device_list=list
-		}
-		this.canReset=true
-	},
-	methods:{
-		radioChange(e){
-			this.door_value=e
-		},
-		itemClick(item){
-			this.door_value=item.macAddress
-		},
-		/**
-		 * 获取员工id
-		 */
-		getUserId(){
-			if (this.$isEmpty(getApp().globalData.userInfo)) {
-				let phone=this.$cache.get('phone')
-				this.$api.enterprisestaff.page({phone:phone,examine:1}).then(res=>{
-					let userInfo=res.data.records[0]
-					this.userId=userInfo.id
-				})
-			}else{
-				let userInfo=getApp().globalData.userInfo
-				this.userId=userInfo.id
-			}
-			
-		},
-		async fetchDeviceList(){
-			let res=await this.$api.device.page()
-			this.device_list= res.data.records
-			this.door_value=this.device_list[0].macAddress
-			this.device_list.forEach(item=>{
-				item.tagColor='bg-'+this.ColorList[Math.floor(Math.random()*this.ColorList.length)]
-			})
-		},
-		/**
-		 * 立即开门
-		 */
-		openDoor(macAddress) {
-			let params={
-				userId:this.userId || 123,
-				macAddress:macAddress
-			}
-			this.isloading=true
-			setTimeout(()=>{
-				this.$api.device.open(params).then(res=>{
-					if (res.success) {
-						this.isloading=false
-						this.isopen=true
-						that.$showModel('开门成功',false)
-					}else{
-						that.isopen=false
-					}
-				}).catch(err=>{
-					this.isloading=false
-					that.isopen=false
-				})
-			},500)
-		},
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-	page{
-		background-color: #F1F1F1;
-	}
-	
-	 .device{
-		position: relative;
-		background-color: #FFFFFF;
-		padding: 35rpx;
-		margin: 20rpx;
-		
-		.default{
-			width: 60rpx;
-			height: 60rpx;
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-		
-		.bg-blue{
-			background-color: $base-color;
-			color: #FFFFFF;
			
-		}
-	}
-	
-	.tag{
-		border-radius: 50%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 80rpx;
-		width: 80rpx;
-		font-size: 32rpx;
-	}
-	
-	.btn-open{
-		background-image: linear-gradient(#557ffc,#3d4fb6);
-		background-color: $base-color;
-		box-shadow: 0rpx 0rpx 20rpx rgba(82, 159, 247, 0.8);
-		color: #FFFFFF;
-	}
+<template>
+    <view class="page" style="position: relative;">
+        <view class="content">
+            <loading isFullScreen color="#5064eb" :active="isloading" text="开门中..."></loading>
+            <view @click="itemClick(item)" class="device u-border-bottom" v-for="(item,index) in device_list"
+                  :key="index">
+                <view class="flex justify-between">
+                    <view class="flex" style="width: 80%;">
+                        <view class="tag" :class="item.tagColor">
+                            <text>{{item.cameraName.substr(0,1)}}</text>
+                        </view>
+                        <view class="flex justify-center align-center padding-left-20 text-lg">
+                            <text>{{item.cameraName}}</text>
+                        </view>
+                    </view>
+
+                    <view class="flex justify-center align-center">
+                        <u-radio-group size="40" active-color="#5064eb" v-model="door_value">
+                            <u-radio
+                                    @change.stop="radioChange"
+                                    :name="item.macAddress">
+                            </u-radio>
+                        </u-radio-group>
+                    </view>
+                </view>
+
+            </view>
+
+            <view class="" style="position: fixed;bottom: 15%;left: calc( 50% - 90rpx);">
+                <view @click="openDoor(door_value)" class="btn-open text-center flex justify-center align-center"
+                      style="border-radius: 50%;height: 180rpx;width: 180rpx;font-size: 34rpx;">
+                    <text>开门</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    var app = getApp()
+    var that;
+    import loading from "@/components/loading/loading.vue"
+
+    export default {
+        components: {
+            loading
+        },
+        data() {
+            return {
+                //操作哪一项
+                clickItem: '',
+
+                //选中值
+                door_value: '',
+                //访客开门的userid为999加该访客的手机号
+                userId: '',
+
+                //是否已开门
+                isopen: false,
+                //是否展示动画
+                isloading: false,
+                //设备列表
+                device_list: [],
+            };
+        },
+        onLoad(options) {
+            that = this
+            if (this.$isEmpty(options.guestTel)) {
+                this.$dialog.showModal('系统异常', false).then(res => {
+                    this.$navigateBack()
+                })
+                return
+            }
+            this.userId = '999' + options.guestTel
+            this.fetchDeviceList()
+        },
+        onShow() {
+            if (this.canReset) {
+                let list = this.$u.deepClone(this.device_list)
+                list.forEach(item => {
+                    item.tagColor = 'bg-' + this.ColorList[Math.floor(Math.random() * this.ColorList.length)]
+                })
+                this.device_list = list
+            }
+            this.canReset = true
+        },
+        methods: {
+            radioChange(e) {
+                this.door_value = e
+            },
+            itemClick(item) {
+                this.door_value = item.macAddress
+            },
+            /**
+             * 获取员工id
+             */
+            getUserId() {
+                if (this.$isEmpty(getApp().globalData.userInfo)) {
+                    let phone = this.$cache.get('phone')
+                    this.$api.enterprisestaff.page({phone: phone, examine: 1}).then(res => {
+                        let userInfo = res.data.records[0]
+                        this.userId = userInfo.id
+                    })
+                } else {
+                    let userInfo = getApp().globalData.userInfo
+                    this.userId = userInfo.id
+                }
+
+            },
+            async fetchDeviceList() {
+                let res = await this.$api.device.page()
+                this.device_list = res.data.records
+                this.door_value = this.device_list[0].macAddress
+                this.device_list.forEach(item => {
+                    item.tagColor = 'bg-' + this.ColorList[Math.floor(Math.random() * this.ColorList.length)]
+                })
+            },
+            /**
+             * 立即开门
+             */
+            openDoor(macAddress) {
+                let params = {
+                    userId: this.userId || 123,
+                    macAddress: macAddress
+                }
+                this.isloading = true
+                setTimeout(() => {
+                    this.$api.device.open(params).then(res => {
+                        if (res.success) {
+                            this.isloading = false
+                            this.isopen = true
+                            that.$showModel('开门成功', false)
+                        } else {
+                            that.isopen = false
+                        }
+                    }).catch(err => {
+                        this.isloading = false
+                        that.isopen = false
+                    })
+                }, 500)
+            },
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        background-color: #F1F1F1;
+    }
+
+    .device {
+        position: relative;
+        background-color: #FFFFFF;
+        padding: 35 rpx;
+        margin: 20 rpx;
+
+        .default {
+            width: 60 rpx;
+            height: 60 rpx;
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+
+        .bg-blue {
+            background-color: $base-color;
+            color: #FFFFFF;
+
+        }
+    }
+
+    .tag {
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80 rpx;
+        width: 80 rpx;
+        font-size: 32 rpx;
+    }
+
+    .btn-open {
+        background-image: linear-gradient(#557ffc, #3d4fb6);
+        background-color: $base-color;
+        box-shadow: 0 rpx 0 rpx 20 rpx rgba(82, 159, 247, 0.8);
+        color: #FFFFFF;
+    }
 </style>

mini-program/garden-wxapp/pages/guest/records/comps/card.vue

@@ -1,203 +1,217 @@
 <template>
-	<view class="">
-		<view @click="showDetail(item)" @longpress.stop="longpress" class="data" v-for="(item, index) in list" :key="index">
-			<view class="top">
-				<view class="left">
-					<view class="title ">
-						<text class="text-bold">访客姓名：</text>
-						<text>{{item.guestName}}</text>
-					</view>
-				</view>
-				<view class="right">
-					<text style="color: #ea7500;" v-if="item.checkState==0">待审核</text>
-					<text class="base-color" v-if="item.checkState==1">已通过</text>
-					<text style="color: #da0000;" v-if="item.checkState==2">未通过</text>
-				</view>
-			</view>
-			<view class="item">
-				<view class="left">
-					<view style="padding: 20rpx 30rpx 0;">
-						<view  v-if="item.imageUri"  class="">
-							<image @click.stop="$util.preview(item.imageUri)"  style="width: 140rpx;height: 140rpx;" :src="item.imageUri" mode=""></image>
-						</view>
-						<view class="content">
-							<text class="padding-right-10">访问园区：</text>
-							<text >{{item.agencyName}}</text>
-						</view>
-						<view  v-if="item.enterpriseName" class="content">
-							<text class="padding-right-10">访问企业：</text>
-							<text >{{item.enterpriseName}}</text>
-						</view>
-						<view class="content">
-							<text class="padding-right-10">预约时间：</text>
-							<text >{{item.interviewTime}}</text>
-						</view>
-						<!-- 访客角色不需要看到联系方式，不然卡片太大 -->
-						<view class="content" v-if="!$isEmpty(loginType)">
-							<text class="padding-right-10">联系方式：</text>
-							<text>{{item.guestTel}}</text>
-							<image @click.stop="call(item.guestTel)" class="call" src="../../../../static/index/call.png" ></image>
-						</view>
-						<view class="content" v-if="item.opinion">
-							<text class="padding-right-10">审核意见：</text>
-							<text style="line-height: 50rpx;color: #da0000;">{{item.opinion}}</text>
-						</view>
-					</view>
-				</view>
-			</view>
-			<view class="bottom" >
-				<block v-if="!$isEmpty(loginType)">
-					<!-- 待审核，显示取消工单 -->
-					<view @click.stop="pass(item)" v-if="item.checkState==0" style="font-size: 22rpx;" class="cu-btn  sm round base-bg-color margin-right-20" >
-						审核通过
-					</view>
-					<view @click.stop="fail(item)" v-if="item.checkState==0" style="font-size: 22rpx;" class="cu-btn  sm round bg-red" >
-						审核不通过
-					</view>
-					<u-button @click="del(item,index)" size="mini" v-else plain type="error">删除</u-button>
-					
-				</block>
-				
-				<block v-else>
-					<!-- 访客开门 -->
-					<view @click.stop="open(item)" v-if="item.checkState==1" style="font-size: 22rpx;" class="cu-btn  sm round base-bg-color margin-right-20" >
-						去开门
-					</view>
-				</block>
-			</view>
-		</view>
-	</view>
+    <view class="">
+        <view @click="showDetail(item)" @longpress.stop="longpress" class="data" v-for="(item, index) in list"
+              :key="index">
+            <view class="top">
+                <view class="left">
+                    <view class="title ">
+                        <text class="text-bold">访客姓名：</text>
+                        <text>{{item.guestName}}</text>
+                    </view>
+                </view>
+                <view class="right">
+                    <text style="color: #ea7500;" v-if="item.checkState==0">待审核</text>
+                    <text class="base-color" v-if="item.checkState==1">已通过</text>
+                    <text style="color: #da0000;" v-if="item.checkState==2">未通过</text>
+                </view>
+            </view>
+            <view class="item">
+                <view class="left">
+                    <view style="padding: 20rpx 30rpx 0;">
+                        <view v-if="item.imageUri" class="">
+                            <image @click.stop="$util.preview(item.imageUri)" style="width: 140rpx;height: 140rpx;"
+                                   :src="item.imageUri" mode=""></image>
+                        </view>
+                        <view class="content">
+                            <text class="padding-right-10">访问园区：</text>
+                            <text>{{item.agencyName}}</text>
+                        </view>
+                        <view v-if="item.enterpriseName" class="content">
+                            <text class="padding-right-10">访问企业：</text>
+                            <text>{{item.enterpriseName}}</text>
+                        </view>
+                        <view class="content">
+                            <text class="padding-right-10">预约时间：</text>
+                            <text>{{item.interviewTime}}</text>
+                        </view>
+                        <!-- 访客角色不需要看到联系方式，不然卡片太大 -->
+                        <view class="content" v-if="!$isEmpty(loginType)">
+                            <text class="padding-right-10">联系方式：</text>
+                            <text>{{item.guestTel}}</text>
+                            <image @click.stop="call(item.guestTel)" class="call"
+                                   src="../../../../static/index/call.png"></image>
+                        </view>
+                        <view class="content" v-if="item.opinion">
+                            <text class="padding-right-10">审核意见：</text>
+                            <text style="line-height: 50rpx;color: #da0000;">{{item.opinion}}</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="bottom">
+                <block v-if="!$isEmpty(loginType)">
+                    <!-- 待审核，显示取消工单 -->
+                    <view @click.stop="pass(item)" v-if="item.checkState==0" style="font-size: 22rpx;"
+                          class="cu-btn  sm round base-bg-color margin-right-20">
+                        审核通过
+                    </view>
+                    <view @click.stop="fail(item)" v-if="item.checkState==0" style="font-size: 22rpx;"
+                          class="cu-btn  sm round bg-red">
+                        审核不通过
+                    </view>
+                    <u-button @click="del(item,index)" size="mini" v-else plain type="error">删除</u-button>
+
+                </block>
+
+                <block v-else>
+                    <!-- 访客开门 -->
+                    <view @click.stop="open(item)" v-if="item.checkState==1" style="font-size: 22rpx;"
+                          class="cu-btn  sm round base-bg-color margin-right-20">
+                        去开门
+                    </view>
+                </block>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-export default {
-	name: 'card',
-	props:{
-		list:{
-			type:Array,
-			default:()=>{
-				[]
-			}
-		},
-		loginType:{
-			type:String,
-		}
-	},
-	data() {
-		return {
-			
-		};
-	},
-	onLoad() {
-		
-	},
-	methods:{
-		async preview(src){
-			this.$util.preview('src')
-			return
-			const urls = typeof src === 'string' ? [src] : src
-			const filePath = async src => src.match(/^http/) ? src : (await uni.compressImage({ src, quality: 100 }))[1].tempFilePath
-			for (let i = 0; i < urls.length; i++) {
-				urls[i] = await filePath(urls[i])
-			}
-			uni.previewImage({ urls })
-		},
-		longpress(){
-			console.log("我长按了");
-		},
-		call(phone){
-			uni.makePhoneCall({
-				phoneNumber:phone
-			})
-		},
-		showDetail(item){
-			this.$emit('showDetail',item)
-		},
-		pass(item){
-			this.$emit('pass',item)
-		},
-		fail(item){
-			this.$emit('fail',item)
-		},
-		del(item){
-			this.$emit('delItem',item)
-		},
-		async open(item){
-			let params={
-				id:item.agencyId
-			}
-			//获取当前园区的token并把token存进缓存中
-			//因为拉取门禁设备和开门需要用到token
-			let res=await this.$api.agency.getAgencyTenantList(params)
-			let data=res.data[0]
-			let tokenParams={
-				tenantId:data.tenantId,
-				username:data.account,
-				password:data.password
-			}
-			this.$cache.put('tokenObj',tokenParams)
-			let resp=await this.$api.getToken(this.$u.queryParams(tokenParams))
-			let token=resp.token_type+" "+resp.access_token
-			uni.setStorageSync('token', token)
-			uni.navigateTo({
-				url:"/pages/guest/open-door/open-door?guestTel="+item.guestTel
-			})
-			
-		}
-	}
-};
+    export default {
+        name: 'card',
+        props: {
+            list: {
+                type: Array,
+                default: () => {
+                    []
+                }
+            },
+            loginType: {
+                type: String,
+            }
+        },
+        data() {
+            return {};
+        },
+        onLoad() {
+
+        },
+        methods: {
+            async preview(src) {
+                this.$util.preview('src')
+                return
+                const urls = typeof src === 'string' ? [src] : src
+                const filePath = async src => src.match(/^http/) ? src : (await uni.compressImage({
+                    src,
+                    quality: 100
+                }))[1].tempFilePath
+                for (let i = 0; i < urls.length; i++) {
+                    urls[i] = await filePath(urls[i])
+                }
+                uni.previewImage({urls})
+            },
+            longpress() {
+                console.log("我长按了");
+            },
+            call(phone) {
+                uni.makePhoneCall({
+                    phoneNumber: phone
+                })
+            },
+            showDetail(item) {
+                this.$emit('showDetail', item)
+            },
+            pass(item) {
+                this.$emit('pass', item)
+            },
+            fail(item) {
+                this.$emit('fail', item)
+            },
+            del(item) {
+                this.$emit('delItem', item)
+            },
+            async open(item) {
+                let params = {
+                    id: item.agencyId
+                }
+                //获取当前园区的token并把token存进缓存中
+                //因为拉取门禁设备和开门需要用到token
+                let res = await this.$api.agency.getAgencyTenantList(params)
+                let data = res.data[0]
+                let tokenParams = {
+                    tenantId: data.tenantId,
+                    username: data.account,
+                    password: data.password
+                }
+                this.$cache.put('tokenObj', tokenParams)
+                let resp = await this.$api.getToken(this.$u.queryParams(tokenParams))
+                let token = resp.token_type + " " + resp.access_token
+                uni.setStorageSync('token', token)
+                uni.navigateTo({
+                    url: "/pages/guest/open-door/open-door?guestTel=" + item.guestTel
+                })
+
+            }
+        }
+    };
 </script>
 
 <style lang="scss">
-.bg-blue{
-	background-color: #59a5f0;
-	color: #FFFFFF;
-}	
-	
-.data {
-	width: 710rpx;
-	background-color: #ffffff;
-	margin: 20rpx auto;
-	border-radius: 6rpx;
-	box-sizing: border-box;
-	padding: 20rpx;
-	font-size: 28rpx;
-	.top {
-		display: flex;
-		justify-content: space-between;
-		padding-bottom: 20rpx;
-		border-bottom: 1rpx solid #EEEEEE;
-		.left {
-			display: flex;
-			align-items: center;
-			.title {
-				margin: 0 10rpx;
-				font-size: 30rpx;
-			}
-		}
-		.right{
-			margin-right: 10rpx;
-		}
-	}
-	.item {
-		margin: 5rpx 0 20rpx 0;
-		.content {
-			// border-bottom: 1rpx dashed #DDDDDD;
-			padding: 20rpx 0 ;
-			
-			.call{
-				width: 36rpx;
-				height: 36rpx;
-				margin-left: 40rpx;
-				margin-top: 10rpx;
-			}
-		}
-	}
-	.bottom {
-		display: flex;
-		margin-top: 30rpx;
-		justify-content: flex-end;
-		align-items: center;
-	}
-}
+    .bg-blue {
+        background-color: #59a5f0;
+        color: #FFFFFF;
+    }
+
+    .data {
+        width: 710 rpx;
+        background-color: #ffffff;
+        margin: 20 rpx auto;
+        border-radius: 6 rpx;
+        box-sizing: border-box;
+        padding: 20 rpx;
+        font-size: 28 rpx;
+
+        .top {
+            display: flex;
+            justify-content: space-between;
+            padding-bottom: 20 rpx;
+            border-bottom: 1 rpx solid #EEEEEE;
+
+            .left {
+                display: flex;
+                align-items: center;
+
+                .title {
+                    margin: 0 10 rpx;
+                    font-size: 30 rpx;
+                }
+            }
+
+            .right {
+                margin-right: 10 rpx;
+            }
+        }
+
+        .item {
+            margin: 5 rpx 0 20 rpx 0;
+
+            .content {
+                // border-bottom: 1rpx dashed #DDDDDD;
+                padding: 20 rpx 0;
+
+                .call {
+                    width: 36 rpx;
+                    height: 36 rpx;
+                    margin-left: 40 rpx;
+                    margin-top: 10 rpx;
+                }
+            }
+        }
+
+        .bottom {
+            display: flex;
+            margin-top: 30 rpx;
+            justify-content: flex-end;
+            align-items: center;
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/guest/records/comps/item.vue

@@ -1,236 +1,238 @@
 <template>
-	<MeScroll  :up="up" :down="down" @up="upFn" :fixed="false" @down="downFn" @init="initMeScroll">
-		<card @delItem="delItem" @showDetail="showDetail" @pass="pass" @fail="fail" :loginType="loginType" :list="list" ></card>
-	</MeScroll>
+    <MeScroll :up="up" :down="down" @up="upFn" :fixed="false" @down="downFn" @init="initMeScroll">
+        <card @delItem="delItem" @showDetail="showDetail" @pass="pass" @fail="fail" :loginType="loginType"
+              :list="list"></card>
+    </MeScroll>
 </template>
 <script>
-	import MeScroll from '@/components/mescroll-body/mescroll-uni.vue'
-	import card from './card.vue'
-	var app=getApp()
-	export default {
-		components:{
-			MeScroll,card
-		},
-		props: {
-			params:Object,
-			type: Number,
-			i: Number,
-			item:Object
-		},
-		data() {
-			return {
-				//审核不通过时展示
-				modelShow:false,
-				//审核不通过的原因
-				opinion:'',
-				dataDetail:{},
-				
-				loginType:'',
-				//访客openId
-				openId:'',
-				//园区id
-				agencyId:'',
-				//企业id
-				enterpriseId:'',
-				
-				isInit: false, // 是否初始化
-				list: [], // 列表数据
-				mescroll: null, // mescroll 对象
-				// 上拉配置参数
-				up: {
-					noMoreSize: 3, 
-					auto: false,
-					page: {
-						page: 0,
-						size: 10
-					}
-				},
-				// 下拉配置参数
-				down: {
-					use: true, 
-					auto: false
-				}
-			}
-		},
-		created() {
-			this.loginType=this.$cache.get('loginType')
-			if (this.loginType==this.$loginType.AGENCY) {
-				//园区管理员
-				this.agencyId=this.$cache.get('agencyId')
-			}else if (this.loginType==this.$loginType.ENTERPRISE) {
-				//企业
-				this.enterpriseId=this.$cache.get('enterpriseId')
-			}else{
-				//访客
-				this.openId=this.$cache.get('openId')
-			}
-		},
-		watch:{
-			type(val) {
-				if(!this.isInit && val === this.i) {
-					this.mescroll.resetUpScroll()
-				}
-			}
-		},
-		mounted() {
-			if(!this.isInit && this.i === 0) {
-				this.mescroll.resetUpScroll()
-			}
-		},
-		methods: {
-			delItem(item){
-				this.$dialog.showModal('确定要删除此记录？').then(res=>{
-					this.$api.guest.remove(item.id).then(res=>{
-						if (res.success==true) {
-							this.mescroll.resetUpScroll()
-						}
-					})
-				})
-			},
-			/**
-			 * 显示详情
-			 * @param {Object} item
-			 */
-			showDetail(item){
-				this.$emit('showDetail',item)
-			},
-			/**
-			 * 通过审核
-			 */
-			pass(item){
-				let that=this
-				let params={
-					id:item.id,
-					checkState:1
-				}
-				this.$showModel('确定要审核通过此申请记录吗？').then(()=>{
-					this.$api.guest.check(params).then(res=>{
-						if (res.success==true) {
-							this.$u.toast('操作成功')
-							this.send(item.openId)
-							this.mescroll.resetUpScroll()
-						}else{
-							this.$u.toast('操作失败')
-						}
-					})
-				})
-			},
-			async send(openId){
-				let tokenData={
-					grantType:this.$api.wxData.subscribe_grant_type,
-					appId:this.$api.wxData.appId,
-					secret:this.$api.wxData.secret
-				}
-				let res=await this.$api.wxApi.getAccessToken(tokenData)
-				let token=JSON.parse(res.data).access_token
-				let subscribeData={
-					accessToken:token,
-					touser:openId,
-					lang:"zh_CN",
-					page:'/pages/guest/records/records',
-					miniprogramState:this.$miniprogramState,
-				    templateId: this.$staffTmplIds[0],
-					  "data": {
-						  "name1": {
-							  "value": this.$cache.get('loginAccount')
-						  },
-						  "phrase5":{
-							  "value": "开门申请"
-						  },
-						  "phrase2": {
-							  "value": "审核通过"
-						  },
-						  "thing3": {
-							  "value": '已阅'
-						  },
-						}
-				}
-				let resp=await this.$api.wxApi.subscribe(subscribeData)
-			},
-			/**
-			 * 审核不通过
-			 * @param {Object} item
-			 */
-			fail(item){
-				this.$emit('fail',item)
-			},
-			/**
-			 * @param {Object} mescroll 初始化组件
-			 */
-			initMeScroll(mescroll) {
-				this.mescroll = mescroll
-			},
-			/**
-			 * @param {Object} mescroll 上拉回调
-			 */
-			async upFn(mescroll) {
-				try{
-					let that=this
-					let params={
-						current:mescroll.num,
-						size:mescroll.size,
-					}
-					//审核状态
-					if (this.item.value!=-1) {
-						params.checkState=this.item.value
-					}
-					if (!this.$isEmpty(this.params.guestName)) {
-						params.guestName=this.params.guestName
-					}
-					if (!this.$isEmpty(this.params.guestTel)) {
-						params.guestTel=this.params.guestTel
-					}
-					
-					if (this.loginType==this.$loginType.AGENCY) {
-						//园区管理员
-						params.agencyId=this.agencyId
-					}else if (this.loginType==this.$loginType.ENTERPRISE) {
-						//企业
-						params.enterpriseId=this.enterpriseId
-					}else{
-						//访客
-						params.openId=this.openId
-					}
-					let res={}
-					if(this.$isEmpty(params.openId)){
-						//不是访客
-						res=await this.$api.guest.page(params)
-					}else{
-						//是访客，访客调的是不需要token的接口
-						//先去除token
-						this.$cache.remove('tokenObj')
-						this.$cache.remove('token')
-						res=await this.$api.guest.getByGuestOpenId(params)
-					}
-					let data=res.data.records
-					let total=res.data.total
-					mescroll.endBySize(data.length,total);
-					if(mescroll.num == 1) that.list = []; //如果是第一页需手动制空列表
-					that.list=that.list.concat(data); //追加新数据
-					
-				}catch(e){
-					mescroll.endErr();
-				}
-			},
-			/**
-			 * 下拉回调
-			 * */
-			downFn(mescroll) {
-				setTimeout(()=>{
-					this.mescroll.resetUpScroll()
-					uni.showToast({
-						title:"刷新成功",
-						icon:"none",
-						position:"top"
-					})
-				},1500)
-			},
-		}
-	}
+    import MeScroll from '@/components/mescroll-body/mescroll-uni.vue'
+    import card from './card.vue'
+
+    var app = getApp()
+    export default {
+        components: {
+            MeScroll, card
+        },
+        props: {
+            params: Object,
+            type: Number,
+            i: Number,
+            item: Object
+        },
+        data() {
+            return {
+                //审核不通过时展示
+                modelShow: false,
+                //审核不通过的原因
+                opinion: '',
+                dataDetail: {},
+
+                loginType: '',
+                //访客openId
+                openId: '',
+                //园区id
+                agencyId: '',
+                //企业id
+                enterpriseId: '',
+
+                isInit: false, // 是否初始化
+                list: [], // 列表数据
+                mescroll: null, // mescroll 对象
+                // 上拉配置参数
+                up: {
+                    noMoreSize: 3,
+                    auto: false,
+                    page: {
+                        page: 0,
+                        size: 10
+                    }
+                },
+                // 下拉配置参数
+                down: {
+                    use: true,
+                    auto: false
+                }
+            }
+        },
+        created() {
+            this.loginType = this.$cache.get('loginType')
+            if (this.loginType == this.$loginType.AGENCY) {
+                //园区管理员
+                this.agencyId = this.$cache.get('agencyId')
+            } else if (this.loginType == this.$loginType.ENTERPRISE) {
+                //企业
+                this.enterpriseId = this.$cache.get('enterpriseId')
+            } else {
+                //访客
+                this.openId = this.$cache.get('openId')
+            }
+        },
+        watch: {
+            type(val) {
+                if (!this.isInit && val === this.i) {
+                    this.mescroll.resetUpScroll()
+                }
+            }
+        },
+        mounted() {
+            if (!this.isInit && this.i === 0) {
+                this.mescroll.resetUpScroll()
+            }
+        },
+        methods: {
+            delItem(item) {
+                this.$dialog.showModal('确定要删除此记录？').then(res => {
+                    this.$api.guest.remove(item.id).then(res => {
+                        if (res.success == true) {
+                            this.mescroll.resetUpScroll()
+                        }
+                    })
+                })
+            },
+            /**
+             * 显示详情
+             * @param {Object} item
+             */
+            showDetail(item) {
+                this.$emit('showDetail', item)
+            },
+            /**
+             * 通过审核
+             */
+            pass(item) {
+                let that = this
+                let params = {
+                    id: item.id,
+                    checkState: 1
+                }
+                this.$showModel('确定要审核通过此申请记录吗？').then(() => {
+                    this.$api.guest.check(params).then(res => {
+                        if (res.success == true) {
+                            this.$u.toast('操作成功')
+                            this.send(item.openId)
+                            this.mescroll.resetUpScroll()
+                        } else {
+                            this.$u.toast('操作失败')
+                        }
+                    })
+                })
+            },
+            async send(openId) {
+                let tokenData = {
+                    grantType: this.$api.wxData.subscribe_grant_type,
+                    appId: this.$api.wxData.appId,
+                    secret: this.$api.wxData.secret
+                }
+                let res = await this.$api.wxApi.getAccessToken(tokenData)
+                let token = JSON.parse(res.data).access_token
+                let subscribeData = {
+                    accessToken: token,
+                    touser: openId,
+                    lang: "zh_CN",
+                    page: '/pages/guest/records/records',
+                    miniprogramState: this.$miniprogramState,
+                    templateId: this.$staffTmplIds[0],
+                    "data": {
+                        "name1": {
+                            "value": this.$cache.get('loginAccount')
+                        },
+                        "phrase5": {
+                            "value": "开门申请"
+                        },
+                        "phrase2": {
+                            "value": "审核通过"
+                        },
+                        "thing3": {
+                            "value": '已阅'
+                        },
+                    }
+                }
+                let resp = await this.$api.wxApi.subscribe(subscribeData)
+            },
+            /**
+             * 审核不通过
+             * @param {Object} item
+             */
+            fail(item) {
+                this.$emit('fail', item)
+            },
+            /**
+             * @param {Object} mescroll 初始化组件
+             */
+            initMeScroll(mescroll) {
+                this.mescroll = mescroll
+            },
+            /**
+             * @param {Object} mescroll 上拉回调
+             */
+            async upFn(mescroll) {
+                try {
+                    let that = this
+                    let params = {
+                        current: mescroll.num,
+                        size: mescroll.size,
+                    }
+                    //审核状态
+                    if (this.item.value != -1) {
+                        params.checkState = this.item.value
+                    }
+                    if (!this.$isEmpty(this.params.guestName)) {
+                        params.guestName = this.params.guestName
+                    }
+                    if (!this.$isEmpty(this.params.guestTel)) {
+                        params.guestTel = this.params.guestTel
+                    }
+
+                    if (this.loginType == this.$loginType.AGENCY) {
+                        //园区管理员
+                        params.agencyId = this.agencyId
+                    } else if (this.loginType == this.$loginType.ENTERPRISE) {
+                        //企业
+                        params.enterpriseId = this.enterpriseId
+                    } else {
+                        //访客
+                        params.openId = this.openId
+                    }
+                    let res = {}
+                    if (this.$isEmpty(params.openId)) {
+                        //不是访客
+                        res = await this.$api.guest.page(params)
+                    } else {
+                        //是访客，访客调的是不需要token的接口
+                        //先去除token
+                        this.$cache.remove('tokenObj')
+                        this.$cache.remove('token')
+                        res = await this.$api.guest.getByGuestOpenId(params)
+                    }
+                    let data = res.data.records
+                    let total = res.data.total
+                    mescroll.endBySize(data.length, total);
+                    if (mescroll.num == 1) that.list = []; //如果是第一页需手动制空列表
+                    that.list = that.list.concat(data); //追加新数据
+
+                } catch (e) {
+                    mescroll.endErr();
+                }
+            },
+            /**
+             * 下拉回调
+             * */
+            downFn(mescroll) {
+                setTimeout(() => {
+                    this.mescroll.resetUpScroll()
+                    uni.showToast({
+                        title: "刷新成功",
+                        icon: "none",
+                        position: "top"
+                    })
+                }, 1500)
+            },
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	view{
-		box-sizing: border-box;
-	}
+    view {
+        box-sizing: border-box;
+    }
 </style>

mini-program/garden-wxapp/pages/guest/records/records.vue

@@ -1,274 +1,295 @@
 <template>
-	<view class="container">
-		<u-popup v-model="detailShow" mode="center" width="650" :closeable="true" border-radius="10">
-			<view style="padding: 60rpx 5rpx 10rpx;">
-				<u-cell-group >
-					<u-cell-item :icon-style="iconStyle"  :border-top="false" :arrow="false"  icon="account-fill"  title="访客姓名:" :value="detailData.guestName"></u-cell-item>
-					<u-cell-item :icon-style="iconStyle"  :arrow="false"  icon="bookmark-fill"  title="身份证号:" :value="detailData.guestIdcard"></u-cell-item>
-					<u-cell-item :icon-style="iconStyle"  :arrow="false"  icon="phone-fill"  title="手机号:" :value="detailData.guestTel"></u-cell-item>
-					<u-cell-item :icon-style="iconStyle"  :arrow="false"  icon="home-fill"  title="访问园区:" :label="detailData.agencyName"></u-cell-item>
-					<u-cell-item :icon-style="iconStyle"  :arrow="false"  icon="map-fill"  title="访问企业:" v-if="detailData.enterpriseName" :label="detailData.enterpriseName"></u-cell-item>
-					<u-cell-item :icon-style="iconStyle"  :arrow="false"  icon="clock-fill"  title="访问时间:" :value="detailData.interviewTime"></u-cell-item>
-					<u-cell-item :icon-style="iconStyle"  :border-bottom="false" :arrow="false"  icon="error-circle-fill"  title="访问缘由:" :value="detailData.guestReason"></u-cell-item>
-				</u-cell-group>
-			</view>
-		</u-popup>
-		
-		<u-modal cancel-text="重置" cancel-color="#000000" @cancel="filterReset" :show-cancel-button="true"  @confirm="filterConfirm" title="筛选" :mask-close-able="true" v-model="filterShow" >
-			<view class="slot-content" style="margin: 20rpx;">
-				<u-form label-width="150"  ref="uForm">
-					<u-form-item label="访客姓名"><u-input v-model="params.guestName" /></u-form-item>
-					<u-form-item :border-bottom="false" label="手机号"><u-input v-model="params.guestTel" type="number"  /></u-form-item>
-				</u-form>
-			</view>
-		</u-modal>
-		
-		<u-modal   :show-cancel-button="true" confirm-color="#5064eb"  @confirm="opinionConfirm" title="审核意见" :mask-close-able="true" v-model="opinionShow" >
-			<view class="slot-content" style="margin: 20rpx;">
-				<u-form label-width="150"  ref="uForm">
-					<u-form-item :border-bottom="false"><u-input height="150"  placeholder="请输入审核意见(选填)" v-model="opinion" /></u-form-item>
-				</u-form>
-			</view>
-		</u-modal>
-		
-		<view class="tabs flex flex-direction">
-			<view class="flex">
-				<scroll-view scroll-x class="bg-white nav" >
-					<view class="flex text-center">
-						<view class="cu-item flex-sub" :class="index==current?'base-color text-xl text-bold ':'text-lg'" v-for="(item,index) in tabs" :key="index" @tap="tabChange(index)" >
-							<text>{{item.name}}</text>
-						</view>
-					</view>
-				</scroll-view>
-				<view v-if="$cache.get('loginType')" class="flex justify-center align-center padding-right-20" style="flex: 10%;"  @click="show">
-					<text class="cuIcon-filter "  style="font-size: 40rpx;"></text>
-					<u-badge size="mini" type="error" :count="filterCount"></u-badge>
-				</view>
-			</view>
-		</view>
-		<view style="height: 100%;">
-			<swiper style="height: 100%;" :current="current"  @change="swiperChange"
-				@animationfinish="animationfinish">
-				<swiper-item  v-for="(item, index) in tabs" :key="index">
-					<scroll-view scroll-y style="height: 100%;">
-						<item @showDetail="showDetail" @fail="fail" ref="mescrollItem" :params="params" :i="index" :item="item" :type="current"></item>
-					</scroll-view>
-				</swiper-item>
-			</swiper>
-		</view>
-	</view>
+    <view class="container">
+        <u-popup v-model="detailShow" mode="center" width="650" :closeable="true" border-radius="10">
+            <view style="padding: 60rpx 5rpx 10rpx;">
+                <u-cell-group>
+                    <u-cell-item :icon-style="iconStyle" :border-top="false" :arrow="false" icon="account-fill"
+                                 title="访客姓名:" :value="detailData.guestName"></u-cell-item>
+                    <u-cell-item :icon-style="iconStyle" :arrow="false" icon="bookmark-fill" title="身份证号:"
+                                 :value="detailData.guestIdcard"></u-cell-item>
+                    <u-cell-item :icon-style="iconStyle" :arrow="false" icon="phone-fill" title="手机号:"
+                                 :value="detailData.guestTel"></u-cell-item>
+                    <u-cell-item :icon-style="iconStyle" :arrow="false" icon="home-fill" title="访问园区:"
+                                 :label="detailData.agencyName"></u-cell-item>
+                    <u-cell-item :icon-style="iconStyle" :arrow="false" icon="map-fill" title="访问企业:"
+                                 v-if="detailData.enterpriseName" :label="detailData.enterpriseName"></u-cell-item>
+                    <u-cell-item :icon-style="iconStyle" :arrow="false" icon="clock-fill" title="访问时间:"
+                                 :value="detailData.interviewTime"></u-cell-item>
+                    <u-cell-item :icon-style="iconStyle" :border-bottom="false" :arrow="false" icon="error-circle-fill"
+                                 title="访问缘由:" :value="detailData.guestReason"></u-cell-item>
+                </u-cell-group>
+            </view>
+        </u-popup>
+
+        <u-modal cancel-text="重置" cancel-color="#000000" @cancel="filterReset" :show-cancel-button="true"
+                 @confirm="filterConfirm" title="筛选" :mask-close-able="true" v-model="filterShow">
+            <view class="slot-content" style="margin: 20rpx;">
+                <u-form label-width="150" ref="uForm">
+                    <u-form-item label="访客姓名">
+                        <u-input v-model="params.guestName"/>
+                    </u-form-item>
+                    <u-form-item :border-bottom="false" label="手机号">
+                        <u-input v-model="params.guestTel" type="number"/>
+                    </u-form-item>
+                </u-form>
+            </view>
+        </u-modal>
+
+        <u-modal :show-cancel-button="true" confirm-color="#5064eb" @confirm="opinionConfirm" title="审核意见"
+                 :mask-close-able="true" v-model="opinionShow">
+            <view class="slot-content" style="margin: 20rpx;">
+                <u-form label-width="150" ref="uForm">
+                    <u-form-item :border-bottom="false">
+                        <u-input height="150" placeholder="请输入审核意见(选填)" v-model="opinion"/>
+                    </u-form-item>
+                </u-form>
+            </view>
+        </u-modal>
+
+        <view class="tabs flex flex-direction">
+            <view class="flex">
+                <scroll-view scroll-x class="bg-white nav">
+                    <view class="flex text-center">
+                        <view class="cu-item flex-sub" :class="index==current?'base-color text-xl text-bold ':'text-lg'"
+                              v-for="(item,index) in tabs" :key="index" @tap="tabChange(index)">
+                            <text>{{item.name}}</text>
+                        </view>
+                    </view>
+                </scroll-view>
+                <view v-if="$cache.get('loginType')" class="flex justify-center align-center padding-right-20"
+                      style="flex: 10%;" @click="show">
+                    <text class="cuIcon-filter " style="font-size: 40rpx;"></text>
+                    <u-badge size="mini" type="error" :count="filterCount"></u-badge>
+                </view>
+            </view>
+        </view>
+        <view style="height: 100%;">
+            <swiper style="height: 100%;" :current="current" @change="swiperChange"
+                    @animationfinish="animationfinish">
+                <swiper-item v-for="(item, index) in tabs" :key="index">
+                    <scroll-view scroll-y style="height: 100%;">
+                        <item @showDetail="showDetail" @fail="fail" ref="mescrollItem" :params="params" :i="index"
+                              :item="item" :type="current"></item>
+                    </scroll-view>
+                </swiper-item>
+            </swiper>
+        </view>
+    </view>
 </template>
 <script>
-	import item from "./comps/item.vue"
-	export default {
-		components: {
-			item
-		},
-		data() {
-			return {
-				iconStyle:{
-					color:'#5064eb'
-				},
-				
-				//详情
-				detailShow:false,
-				detailData:{},
-				
-				//筛选
-				filterCount:0,
-				filterShow:false,
-				params:{},
-				
-				//审核意见
-				failItem:{},
-				opinionShow:false,
-				opinion:'',
-				
-				current: 0,
-				swiperCurrent:0,
-				tabs: [
-					{
-						name: '全部',
-						value:-1
-					},
-					{
-						name: '待审核',
-						value:0,
-					},
-					{
-						name: '已通过',
-						value:1
-					},
-					{
-						name:'未通过',
-						value:2
-					}
-				],
-			}
-		},
-		onShow(){
-			
-		},
-		onLoad(options) {
-		},
-		methods:{
-			/**显示详情
-			 * @param {Object} item
-			 */
-			showDetail(item){
-				this.detailShow=true
-				this.detailData=item
-			},
-			/**
-			 * 审核不通过时显示弹出框
-			 * @param {Object} item
-			 */
-			fail(item){
-				this.failItem=item
-				this.opinionShow=true
-			},
-			opinionConfirm(){
-				let params={
-					id:this.failItem.id,
-					checkState:2,
-					opinion:this.opinion
-				}
-				this.$api.guest.check(params).then(res=>{
-					if (res.success==true) {
-						this.$u.toast('操作成功')
-						this.send()
-						this.refreshMescroll()
-					}else{
-						this.$u.toast('操作失败')
-					}
-				})
-			},
-			async send(){
-				let tokenData={
-					grantType:this.$api.wxData.subscribe_grant_type,
-					appId:this.$api.wxData.appId,
-					secret:this.$api.wxData.secret
-				}
-				let res=await this.$api.wxApi.getAccessToken(tokenData)
-				let token=JSON.parse(res.data).access_token
-				let subscribeData={
-					accessToken:token,
-					touser:this.failItem.openId,
-					lang:"zh_CN",
-					page:'/pages/guest/records/records',
-					miniprogramState:this.$miniprogramState,
-				    templateId: this.$staffTmplIds[0],
-					  "data": {
-						  "name1": {
-							  "value": this.$cache.get('loginAccount')
-						  },
-						  "phrase5":{
-							  "value": "开门申请"
-						  },
-						  "phrase2": {
-							  "value": "审核不通过"
-						  },
-						  "thing3": {
-							  "value": this.opinion || '审核不通过'
-						  },
-						}
-				}
-				let resp=await this.$api.wxApi.subscribe(subscribeData)
-				console.log(resp);
-			},
-			/**
-			 * 显示筛选弹窗
-			 */
-			show(){
-				this.filterShow=true
-			},
-			/**
-			 * 筛选
-			 */
-			filterConfirm(){
-				this.$nextTick(() => {
-					this.refreshMescroll()
-				})
-				this.getFilterCount()
-				
-			},
-			/**
-			 * 计算筛选的数量
-			 */
-			getFilterCount(){
-				let n=0
-				if (!this.$isEmpty(this.params.guestName)) {
-					n++
-				}
-				if (!this.$isEmpty(this.params.guestTel)) {
-					n++
-				}
-				this.filterCount=n
-			},
-			/**
-			 * 重置筛选项
-			 */
-			filterReset(){
-				this.filterCount=0
-				this.params={}
-				this.$nextTick(() => {
-					this.refreshMescroll()
-				})
-			},
-			/**
-			 * 刷新列表
-			 */
-			refreshMescroll(){
-				let curMescroll = this.getMescroll(this.current)
-				curMescroll && curMescroll.resetUpScroll()
-			},
-			/**
-			 * 获取Mescroll对象
-			 * @param {Object} i
-			 */
-			getMescroll(i){
-				let mescrollItems = this.$refs.mescrollItem;
-				if(mescrollItems){
-					let item = mescrollItems[i]
-					if(item) return item.mescroll
-				}
-				return null
-			},
-			
-			tabChange(index) {
-				this.current = index
-			},
-			swiperChange(e) {
-			  uni.pageScrollTo({
-			      scrollTop: 0,
-			      duration: 0
-			  });
-			  this.current = e.detail.current
-			},
-			animationfinish({detail: { current }}) {
-				this.swiperCurrent = current;
-				this.current = current;
-			},
-		}
-	}
+    import item from "./comps/item.vue"
+
+    export default {
+        components: {
+            item
+        },
+        data() {
+            return {
+                iconStyle: {
+                    color: '#5064eb'
+                },
+
+                //详情
+                detailShow: false,
+                detailData: {},
+
+                //筛选
+                filterCount: 0,
+                filterShow: false,
+                params: {},
+
+                //审核意见
+                failItem: {},
+                opinionShow: false,
+                opinion: '',
+
+                current: 0,
+                swiperCurrent: 0,
+                tabs: [
+                    {
+                        name: '全部',
+                        value: -1
+                    },
+                    {
+                        name: '待审核',
+                        value: 0,
+                    },
+                    {
+                        name: '已通过',
+                        value: 1
+                    },
+                    {
+                        name: '未通过',
+                        value: 2
+                    }
+                ],
+            }
+        },
+        onShow() {
+
+        },
+        onLoad(options) {
+        },
+        methods: {
+            /**显示详情
+             * @param {Object} item
+             */
+            showDetail(item) {
+                this.detailShow = true
+                this.detailData = item
+            },
+            /**
+             * 审核不通过时显示弹出框
+             * @param {Object} item
+             */
+            fail(item) {
+                this.failItem = item
+                this.opinionShow = true
+            },
+            opinionConfirm() {
+                let params = {
+                    id: this.failItem.id,
+                    checkState: 2,
+                    opinion: this.opinion
+                }
+                this.$api.guest.check(params).then(res => {
+                    if (res.success == true) {
+                        this.$u.toast('操作成功')
+                        this.send()
+                        this.refreshMescroll()
+                    } else {
+                        this.$u.toast('操作失败')
+                    }
+                })
+            },
+            async send() {
+                let tokenData = {
+                    grantType: this.$api.wxData.subscribe_grant_type,
+                    appId: this.$api.wxData.appId,
+                    secret: this.$api.wxData.secret
+                }
+                let res = await this.$api.wxApi.getAccessToken(tokenData)
+                let token = JSON.parse(res.data).access_token
+                let subscribeData = {
+                    accessToken: token,
+                    touser: this.failItem.openId,
+                    lang: "zh_CN",
+                    page: '/pages/guest/records/records',
+                    miniprogramState: this.$miniprogramState,
+                    templateId: this.$staffTmplIds[0],
+                    "data": {
+                        "name1": {
+                            "value": this.$cache.get('loginAccount')
+                        },
+                        "phrase5": {
+                            "value": "开门申请"
+                        },
+                        "phrase2": {
+                            "value": "审核不通过"
+                        },
+                        "thing3": {
+                            "value": this.opinion || '审核不通过'
+                        },
+                    }
+                }
+                let resp = await this.$api.wxApi.subscribe(subscribeData)
+                console.log(resp);
+            },
+            /**
+             * 显示筛选弹窗
+             */
+            show() {
+                this.filterShow = true
+            },
+            /**
+             * 筛选
+             */
+            filterConfirm() {
+                this.$nextTick(() => {
+                    this.refreshMescroll()
+                })
+                this.getFilterCount()
+
+            },
+            /**
+             * 计算筛选的数量
+             */
+            getFilterCount() {
+                let n = 0
+                if (!this.$isEmpty(this.params.guestName)) {
+                    n++
+                }
+                if (!this.$isEmpty(this.params.guestTel)) {
+                    n++
+                }
+                this.filterCount = n
+            },
+            /**
+             * 重置筛选项
+             */
+            filterReset() {
+                this.filterCount = 0
+                this.params = {}
+                this.$nextTick(() => {
+                    this.refreshMescroll()
+                })
+            },
+            /**
+             * 刷新列表
+             */
+            refreshMescroll() {
+                let curMescroll = this.getMescroll(this.current)
+                curMescroll && curMescroll.resetUpScroll()
+            },
+            /**
+             * 获取Mescroll对象
+             * @param {Object} i
+             */
+            getMescroll(i) {
+                let mescrollItems = this.$refs.mescrollItem;
+                if (mescrollItems) {
+                    let item = mescrollItems[i]
+                    if (item) return item.mescroll
+                }
+                return null
+            },
+
+            tabChange(index) {
+                this.current = index
+            },
+            swiperChange(e) {
+                uni.pageScrollTo({
+                    scrollTop: 0,
+                    duration: 0
+                });
+                this.current = e.detail.current
+            },
+            animationfinish({detail: {current}}) {
+                this.swiperCurrent = current;
+                this.current = current;
+            },
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	.text-xl{
-		font-size: 34rpx;
-	}
-	.container {
-	  height: calc(100vh);
-	  background-color: #F6F6F6;
-	  padding: 78rpx 0rpx 0rpx;
-	 .tabs {
-	    position: fixed;
-	    top: -2rpx;
-		left: 0;
-		width: 100%;
-		background-color: #FFFFFF;
-		box-sizing: border-box;
-		z-index: 3;
-	  }
-}
+    .text-xl {
+        font-size: 34 rpx;
+    }
+
+    .container {
+        height: calc(100vh);
+        background-color: #F6F6F6;
+        padding: 78 rpx 0 rpx 0 rpx;
+
+        .tabs {
+            position: fixed;
+            top: -2rpx;
+            left: 0;
+            width: 100%;
+            background-color: #FFFFFF;
+            box-sizing: border-box;
+            z-index: 3;
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/healthCode/healthCode.vue

@@ -1,109 +1,112 @@
 <template>
-	<view>
-			<view class="codeBox" :class="{ 'bg-red': healthCode.color=='red', 'bg-blue': healthCode.color=='green'}" >
-				<view class="timeBar">{{name}}</view>
-				<view class="timeBar">{{nowStr}}</view>
-				<image class="code" :src="healthCode.code"></image>
-				<view v-if="healthCode.color=='green'" class="timeBar" style="height: 250rpx;letter-spacing: 20rpx;">
-					<icon type="success" size="35"/>
-					未见异常
-				</view>
-				<view v-if="healthCode.color=='red'" class="timeBar" style="height: 250rpx;letter-spacing: 20rpx;">
-					<icon type="warn" size="35"/>
-					体温异常
-				</view>
-			</view>
-			<view class="tips">{{tips}}</view>
-			<view class="link"> 测温记录</view>
-	</view>
+    <view>
+        <view class="codeBox" :class="{ 'bg-red': healthCode.color=='red', 'bg-blue': healthCode.color=='green'}">
+            <view class="timeBar">{{name}}</view>
+            <view class="timeBar">{{nowStr}}</view>
+            <image class="code" :src="healthCode.code"></image>
+            <view v-if="healthCode.color=='green'" class="timeBar" style="height: 250rpx;letter-spacing: 20rpx;">
+                <icon type="success" size="35"/>
+                未见异常
+            </view>
+            <view v-if="healthCode.color=='red'" class="timeBar" style="height: 250rpx;letter-spacing: 20rpx;">
+                <icon type="warn" size="35"/>
+                体温异常
+            </view>
+        </view>
+        <view class="tips">{{tips}}</view>
+        <view class="link"> 测温记录</view>
+    </view>
 </template>
 
 <script>
-	import util from "@/utils/util.js"
-	export default {
-		data() {
-			return {
-				personInfo: {
-					name: "梁汉强",
-					idNumber: "440981199612222852"
-				},
-				timer: '',
-				nowStr: "",
-				healthCode: {
-					code: "http://120.92.153.151:3000/public/recog_images/2021-01-09/06d56a9f7fca42c6",
-					color: "red"
-				},
-				tips: "按照目前掌握的防疫相关数据，暂未发现您存在与防疫相关异常健康状况。防疫相关数据会随着疫情发展及时更新。此次查询并不会排除您的防疫相关健康风险。"
-			}
-		},
-		onLoad() {
-			this.timer = setInterval(()=>{
-				this.nowStr = util.dateFormat(new Date(),"yyyy-MM-dd hh:mm:ss");
-			},1000);
-		},
-		beforeDestroy() {
-			clearInterval(this.timer);
-		},
-		computed:{
-			name(){
-				let chars = this.personInfo.name.split("");
-				return "**"+ chars[chars.length-1]
-			}
-		},
-		methods: {
-			
-		}
-	}
+    import util from "@/utils/util.js"
+
+    export default {
+        data() {
+            return {
+                personInfo: {
+                    name: "梁汉强",
+                    idNumber: "440981199612222852"
+                },
+                timer: '',
+                nowStr: "",
+                healthCode: {
+                    code: "http://120.92.153.151:3000/public/recog_images/2021-01-09/06d56a9f7fca42c6",
+                    color: "red"
+                },
+                tips: "按照目前掌握的防疫相关数据，暂未发现您存在与防疫相关异常健康状况。防疫相关数据会随着疫情发展及时更新。此次查询并不会排除您的防疫相关健康风险。"
+            }
+        },
+        onLoad() {
+            this.timer = setInterval(() => {
+                this.nowStr = util.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss");
+            }, 1000);
+        },
+        beforeDestroy() {
+            clearInterval(this.timer);
+        },
+        computed: {
+            name() {
+                let chars = this.personInfo.name.split("");
+                return "**" + chars[chars.length - 1]
+            }
+        },
+        methods: {}
+    }
 </script>
 
 <style>
-	.timeBar{
-		width: 400rpx;
-		height: 100rpx;
-		color: white;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 40rpx;
-		/* background-color: rgba(255,255,255,0.5); */
-	}
-	.code{
-		background: white;
-		border-radius: 15rpx;
-		padding: 5rpx;
-		width: 400rpx;
-		height: 400rpx;
-	}
-	.codeBox{
-		width: 100%;
-		height: 1000rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		border-radius: 5rpx;
-	}
-	.tips{
-		height: 300rpx;
-		width: 90%;
-		line-height: 50rpx;
-		text-indent: 2em;
-		margin: auto;
-		color: gray;
-		/* background: #18B566; */
-		font-size: 30rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.link{
-		height: 100rpx;
-		width: 100%;
-		color: #007AFF;
-		display: flex;
-		text-decoration: underline;
-		font-style: italic;
-		align-items: center;
-		justify-content: center;
-	}
+    .timeBar {
+        width: 400 rpx;
+        height: 100 rpx;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 40 rpx;
+        /* background-color: rgba(255,255,255,0.5); */
+    }
+
+    .code {
+        background: white;
+        border-radius: 15 rpx;
+        padding: 5 rpx;
+        width: 400 rpx;
+        height: 400 rpx;
+    }
+
+    .codeBox {
+        width: 100%;
+        height: 1000 rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border-radius: 5 rpx;
+    }
+
+    .tips {
+        height: 300 rpx;
+        width: 90%;
+        line-height: 50 rpx;
+        text-indent: 2em;
+        margin: auto;
+        color: gray;
+        /* background: #18B566; */
+        font-size: 30 rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .link {
+        height: 100 rpx;
+        width: 100%;
+        color: #007AFF;
+        display: flex;
+        text-decoration: underline;
+        font-style: italic;
+        align-items: center;
+        justify-content: center;
+    }
 </style>

mini-program/garden-wxapp/pages/index/access-record/access-record.vue

@@ -1,72 +1,74 @@
 <template>
-	<view>
-	   <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
-			<card :list="dataList"></card>
-		</mescroll-body>
-	</view>
+    <view>
+        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
+                       :up="upOption">
+            <card :list="dataList"></card>
+        </mescroll-body>
+    </view>
 </template>
 <script>
-	import card from "./comps/card.vue"
-	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
-	export default {
-		mixins: [MescrollMixin],
-		components:{
-			card
-		},
-		data() {
-			return {
-				loginType:'',
-				downOption: { 
-					auto:false
-				},
-				dataList:[],
-			}
-		},
-		onLoad() {
-			this.loginType=this.$cache.get('loginType')
-		},
-		methods: {
-			downCallback(){
-				setTimeout(()=>{
-					uni.showToast({title:"刷新成功",icon:"none"})
-					this.mescroll.resetUpScroll();
-				},1500)
-			},
-			upCallback(mescroll){
-				let params={
-					current:mescroll.num,
-					size:mescroll.size,
-				}
-				if (this.loginType==this.$loginType.AGENCY) {
-					//管理员
-					params.tenantId=this.$cache.get('agencyTenantId')
-				}else if (this.loginType==this.$loginType.STAFF) {
-					//员工
-					params.userId=this.$cache.get('userId')
-				}else if (this.loginType==this.$loginType.ENTERPRISE) {
-					//企业
-					params.enterpriseId=this.$cache.get('enterpriseId')
-				}
-				try{
-					this.$api.accessrecord.page(params).then(res=>{
-						let data=res.data.records
-						this.mescroll.endBySize(data.length, res.total)
-						if (mescroll.num==1) this.dataList=[]
-						this.dataList=this.dataList.concat(data)
-						setTimeout(()=>{
-							this.mescroll.endBySize(data.length, res.total)
-						},20)
-					})
-				}catch(e){
-					this.mescroll.endErr();
-				}
-			}
-		}
-	}
+    import card from "./comps/card.vue"
+    import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
+
+    export default {
+        mixins: [MescrollMixin],
+        components: {
+            card
+        },
+        data() {
+            return {
+                loginType: '',
+                downOption: {
+                    auto: false
+                },
+                dataList: [],
+            }
+        },
+        onLoad() {
+            this.loginType = this.$cache.get('loginType')
+        },
+        methods: {
+            downCallback() {
+                setTimeout(() => {
+                    uni.showToast({title: "刷新成功", icon: "none"})
+                    this.mescroll.resetUpScroll();
+                }, 1500)
+            },
+            upCallback(mescroll) {
+                let params = {
+                    current: mescroll.num,
+                    size: mescroll.size,
+                }
+                if (this.loginType == this.$loginType.AGENCY) {
+                    //管理员
+                    params.tenantId = this.$cache.get('agencyTenantId')
+                } else if (this.loginType == this.$loginType.STAFF) {
+                    //员工
+                    params.userId = this.$cache.get('userId')
+                } else if (this.loginType == this.$loginType.ENTERPRISE) {
+                    //企业
+                    params.enterpriseId = this.$cache.get('enterpriseId')
+                }
+                try {
+                    this.$api.accessrecord.page(params).then(res => {
+                        let data = res.data.records
+                        this.mescroll.endBySize(data.length, res.total)
+                        if (mescroll.num == 1) this.dataList = []
+                        this.dataList = this.dataList.concat(data)
+                        setTimeout(() => {
+                            this.mescroll.endBySize(data.length, res.total)
+                        }, 20)
+                    })
+                } catch (e) {
+                    this.mescroll.endErr();
+                }
+            }
+        }
+    }
 </script>
 
 <style lang="scss">
-page{
-	background-color: #FFFFFF;
-}
+    page {
+        background-color: #FFFFFF;
+    }
 </style>

mini-program/garden-wxapp/pages/index/access-record/comps/card.vue

@@ -1,94 +1,95 @@
 <template>
-	<view class="history">
-		<u-time-line>
-			<u-time-line-item nodeTop="2" v-for="(item,index) in list" :key="index">
-				<template v-slot:node>
-					<view class="u-node bg-white" >
-						<u-icon name="clock-fill" color="#5064eb" :size="28"></u-icon>
-					</view>
-				</template>
-				<template v-slot:content>
-					<view>
-						<view class="">{{item.openTime}}</view>
-						<view style="width: 636rpx;">
-							<view class="content">
-								<view class="flex justify-between">
-									<view class="">
-										<view class="nav-title">
-											<text class="">人员姓名：</text>
-											<text class="">{{item.userName}}</text>
-										</view>
-										<view v-if="item.temperature" class="nav-title">
-											<text >测量体温：</text>
-											<text class="text-red">{{item.temperature}} ℃</text>
-										</view>
-										<view class="nav-title">
-											<text >所属企业：</text>
-											<text>{{item.enterpriseName}}</text>
-										</view>
-										<!-- <view class="nav-title">
-											<text >开门地址：</text>
-											<text>{{item.deviceAddress}}</text>
-										</view> -->
-									</view>
-									<view class="" v-if="item.faceUrl">
-										<image @click="$util.preview(item.faceUrl)" :src="item.faceUrl" style="width: 110rpx;height: 110rpx;border-radius: 10rpx;" mode=""></image>
-									</view>
-								</view>
-								<view class="nav-title">
-									<text >开门方式：</text>
-									<text v-if="item.openType==1">人脸识别开门</text>
-									<text v-if="item.openType==2">小程序一键开门</text>
-								</view>
-							</view>
-							
-						</view>
-					</view>
-				</template>
-			</u-time-line-item>
-		</u-time-line>
-	</view>
+    <view class="history">
+        <u-time-line>
+            <u-time-line-item nodeTop="2" v-for="(item,index) in list" :key="index">
+                <template v-slot:node>
+                    <view class="u-node bg-white">
+                        <u-icon name="clock-fill" color="#5064eb" :size="28"></u-icon>
+                    </view>
+                </template>
+                <template v-slot:content>
+                    <view>
+                        <view class="">{{item.openTime}}</view>
+                        <view style="width: 636rpx;">
+                            <view class="content">
+                                <view class="flex justify-between">
+                                    <view class="">
+                                        <view class="nav-title">
+                                            <text class="">人员姓名：</text>
+                                            <text class="">{{item.userName}}</text>
+                                        </view>
+                                        <view v-if="item.temperature" class="nav-title">
+                                            <text>测量体温：</text>
+                                            <text class="text-red">{{item.temperature}} ℃</text>
+                                        </view>
+                                        <view class="nav-title">
+                                            <text>所属企业：</text>
+                                            <text>{{item.enterpriseName}}</text>
+                                        </view>
+                                        <!-- <view class="nav-title">
+                                            <text >开门地址：</text>
+                                            <text>{{item.deviceAddress}}</text>
+                                        </view> -->
+                                    </view>
+                                    <view class="" v-if="item.faceUrl">
+                                        <image @click="$util.preview(item.faceUrl)" :src="item.faceUrl"
+                                               style="width: 110rpx;height: 110rpx;border-radius: 10rpx;"
+                                               mode=""></image>
+                                    </view>
+                                </view>
+                                <view class="nav-title">
+                                    <text>开门方式：</text>
+                                    <text v-if="item.openType==1">人脸识别开门</text>
+                                    <text v-if="item.openType==2">小程序一键开门</text>
+                                </view>
+                            </view>
+
+                        </view>
+                    </view>
+                </template>
+            </u-time-line-item>
+        </u-time-line>
+    </view>
 </template>
 
 <script>
-export default {
-	props:{
-		list:{
-			type:Array
-		}
-	},
-	data() {
-		return {
-			
-		};
-	},
-	onLoad() {
-		
-	},
-	methods:{
-		
-	}
-};
+    export default {
+        props: {
+            list: {
+                type: Array
+            }
+        },
+        data() {
+            return {};
+        },
+        onLoad() {
+
+        },
+        methods: {}
+    };
 </script>
 
 <style lang="scss" scoped>
-	page{
-		background-color: #FFFFFF;
-	}
-	.nav-title {
-		font-size: 28upx;
-		font-weight: 300;
-		padding-top: 20rpx;
-	}
-	.history{
-		box-sizing: border-box;
-		padding: 40rpx 20rpx 20rpx 50rpx;
-	}
-	.content{
-		box-shadow: 0 8rpx 10rpx rgba(234, 234, 234, 0.5),8rpx 0rpx 10rpx rgba(234, 234, 234,.5),-8rpx 0rpx 10rpx rgba(234, 234, 234,.5);
-		background-color: #FFFFFF;
-		padding: 20rpx;
-		border-radius: 10rpx;
-		margin: 20rpx 0;
-	}
+    page {
+        background-color: #FFFFFF;
+    }
+
+    .nav-title {
+        font-size: 28 upx;
+        font-weight: 300;
+        padding-top: 20 rpx;
+    }
+
+    .history {
+        box-sizing: border-box;
+        padding: 40 rpx 20 rpx 20 rpx 50 rpx;
+    }
+
+    .content {
+        box-shadow: 0 8 rpx 10 rpx rgba(234, 234, 234, 0.5), 8 rpx 0 rpx 10 rpx rgba(234, 234, 234, .5), -8rpx 0 rpx 10 rpx rgba(234, 234, 234, .5);
+        background-color: #FFFFFF;
+        padding: 20 rpx;
+        border-radius: 10 rpx;
+        margin: 20 rpx 0;
+    }
 </style>

mini-program/garden-wxapp/pages/index/agency/agency.vue

@@ -1,176 +1,182 @@
 <template>
-	<view>
-		<swiper   class="screen-swiper square-dot "  :indicator-dots="true" :circular="true"
-		 :autoplay="true" interval="5000" duration="500">
-			<swiper-item v-for="(item,index) in bannerList" :key="index">
-				<image   :src="item.banners" mode="aspectFill" ></image>
-			</swiper-item>
-		</swiper>
-		
-		<view class="card">
-			<view class="flex flex-direction justify-center padding-left-20">
-				<text class="text-bold  text-lg" style="padding-bottom: 12rpx;">{{detail.agencyName}}</text>
-			</view>
-		</view>
-		<view class="bg-white text-black">
-			<view class="flex" style="padding:20rpx 30rpx 0;">
-				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../../static/icon/tag1.png" mode=""></image>
-				<text class="text-lg  padding-left-10" >其他信息</text>
-			</view>
-			<view class="cu-list menu text-df padding-top-20">
-				<view class="cu-item">
-					<view class="content">
-						<text class="cuIcon-profilefill base-color" style="font-size: 32rpx;"></text>
-						<text class="">法定代表人</text>
-					</view>
-					<view class="action">
-						<text>{{detail.personName}}</text>
-					</view>
-				</view>
-				
-				<view class="cu-item">
-					<view class="content">
-						<text class="cuIcon-mobilefill text-bold base-color" style="font-size: 32rpx;"></text>
-						<text class="">联系方式</text>
-					</view>
-					<view class="action">
-						<text>{{detail.personPhone}}</text>
-					</view>
-				</view>
-			</view>
-			<view class="" style="padding: 20rpx 40rpx;">
-				<view class="">
-					<text class="cuIcon-locationfill base-color " style="margin-right: 20rpx;"></text>
-					公司地址：
-				</view>
-				<view class="text-cut-2 " style="padding: 20rpx 10rpx">
-					<text>{{detail.address}}</text>
-				</view>
-			</view>
-		</view>
-	</view>
+    <view>
+        <swiper class="screen-swiper square-dot " :indicator-dots="true" :circular="true"
+                :autoplay="true" interval="5000" duration="500">
+            <swiper-item v-for="(item,index) in bannerList" :key="index">
+                <image :src="item.banners" mode="aspectFill"></image>
+            </swiper-item>
+        </swiper>
+
+        <view class="card">
+            <view class="flex flex-direction justify-center padding-left-20">
+                <text class="text-bold  text-lg" style="padding-bottom: 12rpx;">{{detail.agencyName}}</text>
+            </view>
+        </view>
+        <view class="bg-white text-black">
+            <view class="flex" style="padding:20rpx 30rpx 0;">
+                <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                       src="../../../static/icon/tag1.png" mode=""></image>
+                <text class="text-lg  padding-left-10">其他信息</text>
+            </view>
+            <view class="cu-list menu text-df padding-top-20">
+                <view class="cu-item">
+                    <view class="content">
+                        <text class="cuIcon-profilefill base-color" style="font-size: 32rpx;"></text>
+                        <text class="">法定代表人</text>
+                    </view>
+                    <view class="action">
+                        <text>{{detail.personName}}</text>
+                    </view>
+                </view>
+
+                <view class="cu-item">
+                    <view class="content">
+                        <text class="cuIcon-mobilefill text-bold base-color" style="font-size: 32rpx;"></text>
+                        <text class="">联系方式</text>
+                    </view>
+                    <view class="action">
+                        <text>{{detail.personPhone}}</text>
+                    </view>
+                </view>
+            </view>
+            <view class="" style="padding: 20rpx 40rpx;">
+                <view class="">
+                    <text class="cuIcon-locationfill base-color " style="margin-right: 20rpx;"></text>
+                    公司地址：
+                </view>
+                <view class="text-cut-2 " style="padding: 20rpx 10rpx">
+                    <text>{{detail.address}}</text>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				id:this.$cache.get('agency'),
-				detail:{},
-				bannerList: [
-					{
-					  'banners': "https://park.nxzhsq.cn/park/miniofile/xlyq/banner.jpg"
-					},
-				],
-			}
-		},
-		onLoad() {
-			this.fetchDeatil()
-			// this.fetchBanner()
-		},
-		methods: {
-			fetchBanner(){
-				let params={
-					tenantId:this.$cache.get('agencyTenantId')
-				}
-				this.$api.banner.page(params).then(res=>{
-					if (!this.$isEmpty(res.data.records)) {
-						this.bannerList=res.data.records
-					}
-				})
-			},
-			fetchDeatil(){
-				this.$api.agency.page({id:this.id}).then(res=>{
-					this.detail=res.data[0]
-				})
-			},
-		}
-	}
+    export default {
+        data() {
+            return {
+                id: this.$cache.get('agency'),
+                detail: {},
+                bannerList: [
+                    {
+                        'banners': "https://park.nxzhsq.cn/park/miniofile/xlyq/banner.jpg"
+                    },
+                ],
+            }
+        },
+        onLoad() {
+            this.fetchDeatil()
+            // this.fetchBanner()
+        },
+        methods: {
+            fetchBanner() {
+                let params = {
+                    tenantId: this.$cache.get('agencyTenantId')
+                }
+                this.$api.banner.page(params).then(res => {
+                    if (!this.$isEmpty(res.data.records)) {
+                        this.bannerList = res.data.records
+                    }
+                })
+            },
+            fetchDeatil() {
+                this.$api.agency.page({id: this.id}).then(res => {
+                    this.detail = res.data[0]
+                })
+            },
+        }
+    }
 </script>
 
 <style lang="scss">
-	page{
-		background-color: #FFFFFF;
-	}
-	
-	.card{
-		padding: 20rpx;
-		background-color: #FFFFFF;
-		margin: 10rpx;
-		border-radius: 10rpx;
-		display: flex;
-		box-shadow: 0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
-		image{
-			border: 1rpx solid #f1f1f1;
-			width:100rpx;
-			height: 100rpx;
-			border-radius: 50%;
-		}
-	}
-	
-	.desc{
-		background-color: #FFFFFF;
-		padding:40rpx 30rpx;
-		.sub-title{
-			padding-top: 40rpx;
-			font-size: 28rpx;
-			line-height: 50rpx;
-		}
-	}
-	
-	.history{
-		background-color: #FFFFFF;
-		margin-top: 20rpx;
-		padding: 40rpx 20rpx 20rpx 50rpx;
-	}
-	
-	.top{
-		padding-bottom: 30rpx;
-		display: flex;
-		justify-content: space-between;
-	}
-	
-	.address{
-		margin-top: 20rpx;
-		background-color: #FFFFFF;
-		padding: 30rpx;
-		
-		
-		.item{
-			padding-top: 40rpx;
-			.sub-address{
-				padding-left: 70rpx;font-size: 26rpx;color: #bababa;
-			}
-		}
-	}
-	
-	
-	.u-node {
-			width: 44rpx;
-			height: 44rpx;
-			border-radius: 100rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			background: #d0d0d0;
-		}
-		
-		.u-order-title {
-			color: #333333;
-			font-weight: bold;
-			font-size: 32rpx;
-		}
-		
-		.u-order-desc {
-			padding-top: 20rpx;
-			color: #8d8d8d;
-			font-size: 26rpx;
-			line-height: 48rpx;
-			margin-bottom: 6rpx;
-		}
-		
-		.u-order-time {
-			color: rgb(200, 200, 200);
-			font-size: 26rpx;
-		}
+    page {
+        background-color: #FFFFFF;
+    }
+
+    .card {
+        padding: 20 rpx;
+        background-color: #FFFFFF;
+        margin: 10 rpx;
+        border-radius: 10 rpx;
+        display: flex;
+        box-shadow: 0 10 rpx rgba(248, 248, 248, .9), -10rpx 0 rpx rgba(248, 248, 248, .9), 10 rpx 0 rpx rgba(248, 248, 248, .9);
+
+        image {
+            border: 1 rpx solid #f1f1f1;
+            width: 100 rpx;
+            height: 100 rpx;
+            border-radius: 50%;
+        }
+    }
+
+    .desc {
+        background-color: #FFFFFF;
+        padding: 40 rpx 30 rpx;
+
+        .sub-title {
+            padding-top: 40 rpx;
+            font-size: 28 rpx;
+            line-height: 50 rpx;
+        }
+    }
+
+    .history {
+        background-color: #FFFFFF;
+        margin-top: 20 rpx;
+        padding: 40 rpx 20 rpx 20 rpx 50 rpx;
+    }
+
+    .top {
+        padding-bottom: 30 rpx;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .address {
+        margin-top: 20 rpx;
+        background-color: #FFFFFF;
+        padding: 30 rpx;
+
+
+        .item {
+            padding-top: 40 rpx;
+
+            .sub-address {
+                padding-left: 70 rpx;
+                font-size: 26 rpx;
+                color: #bababa;
+            }
+        }
+    }
+
+
+    .u-node {
+        width: 44 rpx;
+        height: 44 rpx;
+        border-radius: 100 rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #d0d0d0;
+    }
+
+    .u-order-title {
+        color: #333333;
+        font-weight: bold;
+        font-size: 32 rpx;
+    }
+
+    .u-order-desc {
+        padding-top: 20 rpx;
+        color: #8d8d8d;
+        font-size: 26 rpx;
+        line-height: 48 rpx;
+        margin-bottom: 6 rpx;
+    }
+
+    .u-order-time {
+        color: rgb(200, 200, 200);
+        font-size: 26 rpx;
+    }
 </style>

mini-program/garden-wxapp/pages/index/car/car-manager/car-manager.vue

@@ -1,229 +1,244 @@
 <template>
-	<view>
-		<u-modal   :show-cancel-button="true" confirmColor="#5064eb"  @confirm="opinionConfirm" title="审核意见" :mask-close-able="true" v-model="opinionShow" >
-			<view class="slot-content" style="margin: 20rpx;">
-				<u-form label-width="150"  ref="uForm">
-					<u-form-item :border-bottom="false"><u-input height="150"  placeholder="请输入审核意见(选填)" v-model="auditOpinion" /></u-form-item>
-				</u-form>
-			</view>
-		</u-modal>
-		<view class="bg-white"  style="z-index: 9999;">
-			<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#5064eb" duration="20">
-				<u-dropdown-item @change="filterChange" v-model="auditFilterValue" title="审核状态" :options="auditFilterList"></u-dropdown-item>
-				<u-dropdown-item @change="filterChange" v-model="carTypeFilterValue" title="车辆类型" :options="carTypeFilterList"></u-dropdown-item>
-				<u-dropdown-item title="其他筛选">
-					<view class="bg-white" style="padding: 20rpx 30rpx;">
-						<u-form  label-width="200" :model="params" ref="uForm">
-							<u-form-item label="车牌号码"><u-input placeholder="请输入车牌号码" v-model="params.number" /></u-form-item>
-							<u-form-item label="车主姓名"><u-input placeholder="请输入车主姓名" v-model="params.personName" /></u-form-item>
-							<u-form-item label="手机号码"><u-input placeholder="请输入手机号码" type="number" maxlength="11" v-model="params.personPhone" /></u-form-item>
-						</u-form>
-						<view class="flex justify-around " style="margin: 30rpx 0;">
-							<view class="cu-btn bg-red radius" @click="reset" style="width: 42%;padding: 37rpx;">
-								重置
-							</view>
-							<view class="cu-btn base-bg-color radius" @click="filterChange();closeDropdown()" style="width: 42%;padding: 37rpx;">
-								筛选
-							</view>
-						</view>
-					</view>
-				</u-dropdown-item>	
-			</u-dropdown>
-		</view>
-		
-		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
-			<car-manager-card  @pass="pass" @fail="fail" :list="list"></car-manager-card>
-		</mescroll-body>
-	</view>
+    <view>
+        <u-modal :show-cancel-button="true" confirmColor="#5064eb" @confirm="opinionConfirm" title="审核意见"
+                 :mask-close-able="true" v-model="opinionShow">
+            <view class="slot-content" style="margin: 20rpx;">
+                <u-form label-width="150" ref="uForm">
+                    <u-form-item :border-bottom="false">
+                        <u-input height="150" placeholder="请输入审核意见(选填)" v-model="auditOpinion"/>
+                    </u-form-item>
+                </u-form>
+            </view>
+        </u-modal>
+        <view class="bg-white" style="z-index: 9999;">
+            <u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#5064eb" duration="20">
+                <u-dropdown-item @change="filterChange" v-model="auditFilterValue" title="审核状态"
+                                 :options="auditFilterList"></u-dropdown-item>
+                <u-dropdown-item @change="filterChange" v-model="carTypeFilterValue" title="车辆类型"
+                                 :options="carTypeFilterList"></u-dropdown-item>
+                <u-dropdown-item title="其他筛选">
+                    <view class="bg-white" style="padding: 20rpx 30rpx;">
+                        <u-form label-width="200" :model="params" ref="uForm">
+                            <u-form-item label="车牌号码">
+                                <u-input placeholder="请输入车牌号码" v-model="params.number"/>
+                            </u-form-item>
+                            <u-form-item label="车主姓名">
+                                <u-input placeholder="请输入车主姓名" v-model="params.personName"/>
+                            </u-form-item>
+                            <u-form-item label="手机号码">
+                                <u-input placeholder="请输入手机号码" type="number" maxlength="11"
+                                         v-model="params.personPhone"/>
+                            </u-form-item>
+                        </u-form>
+                        <view class="flex justify-around " style="margin: 30rpx 0;">
+                            <view class="cu-btn bg-red radius" @click="reset" style="width: 42%;padding: 37rpx;">
+                                重置
+                            </view>
+                            <view class="cu-btn base-bg-color radius" @click="filterChange();closeDropdown()"
+                                  style="width: 42%;padding: 37rpx;">
+                                筛选
+                            </view>
+                        </view>
+                    </view>
+                </u-dropdown-item>
+            </u-dropdown>
+        </view>
+
+        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
+                       :up="upOption">
+            <car-manager-card @pass="pass" @fail="fail" :list="list"></car-manager-card>
+        </mescroll-body>
+    </view>
 </template>
 
 <script>
-	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
-	import carManagerCard from "../comps/car-manager-card.vue"
-	var that;
-	export default {
-		mixins: [MescrollMixin], // 使用mixin
-		components:{
-			carManagerCard
-		},
-		data() {
-			return {
-				list:[],
-				loginType:'',
-				
-				//审核意见
-				operaId:'',//操作id
-				opinionShow:false,
-				auditOpinion:'',
-				
-				//筛选
-				auditFilterValue: -2,
-				carTypeFilterValue: -1,
-				params:{
-					number:'',
-					personName:'',
-					personPhone:''
-				},
-				
-				auditFilterList: [{
-						label: '全部',
-						value: -2,
-					},
-					{
-						label: '待审核',
-						value: 0,
-					},
-					{
-						label: '审核通过',
-						value: 1,
-					},
-					{
-						label: '审核不通过',
-						value: -1,
-					}
-				],
-				carTypeFilterList: [],
-				other:[]
-			
-			}
-		},
-		onLoad() {
-			that=this
-			this.loginType=this.$cache.get('loginType')
-			
-			this.getCarTypeFilterList()
-		},
-		onShow() {
-			//刷新mescroll数据
-			this.$util.reload(this.mescroll)
-		},
-		methods: {
-			getCarTypeFilterList(){
-				let dict=this.$cache.get('dict')
-				if (dict) {
-					//缓存中有字典值
-					this.carTypeFilterList=dict.carTypeList
-					this.carTypeFilterList.unshift({
-						label:'全部',
-						value:'-1'
-					})
-					return
-				}
-				//车辆类型
-				this.$api.dict({code:'car_type'}).then(res=>{
-					res.data.forEach((item)=>{
-						let tmp={
-							value:item.dictKey,
-							label:item.dictValue
-						}
-						this.carTypeFilterList.push(tmp)
-					})
-					this.carTypeFilterList.unshift({
-						label:'全部',
-						value:'-1'
-					})
-				})
-				
-			},
-			pass(item){
-				let params={
-					id:item.id,
-					auditStatus:1
-				}
-				this.$dialog.showModal('确定要审核通过此记录吗？').then(res=>{
-					this.$api.car.carAudit(params).then(res=>{
-						if (res.success==true) {
-							this.$u.toast('操作成功')
-							this.mescroll.resetUpScroll();
-						}
-					})
-				})
-			},
-			opinionConfirm(){
-				let params={
-					id:this.operaId,
-					auditStatus:-1
-				}
-				this.$api.car.carAudit(params).then(res=>{
-					if (res.success==true) {
-						this.$u.toast('操作成功')
-						this.mescroll.resetUpScroll();
-					}
-				})
-			},
-			fail(item){
-				this.operaId=item.id
-				this.opinionShow=true
-			},
-			//筛选
-			open(index) {
-				this.$refs.uDropdown.highlight();
-			},
-			close(index) {
-				this.$refs.uDropdown.highlight(index);
-			},
-			closeDropdown() {
-				this.$refs.uDropdown.close();
-			},
-			filterChange(e){
-				this.mescroll.resetUpScroll();
-			},
-			reset(){
-				this.params={}
-				this.mescroll.resetUpScroll();
-				this.closeDropdown()
-			},
-			upCallback(mescroll){
-				let params={
-					current:mescroll.num,
-					size:mescroll.size
-				}
-				if (this.auditFilterValue!=-2) {
-					//不是筛选全部审核状态
-					params.auditStatus=this.auditFilterValue
-				}
-				if (this.carTypeFilterValue!=-1) {
-					//不是筛选全部车辆类型
-					params.type=this.carTypeFilterValue
-				}
-				if (!this.$isEmpty(this.params.number)) {
-					//车牌号
-					params.number=this.params.number
-				}
-				if (!this.$isEmpty(this.params.personName)) {
-					//姓名
-					params.personName=this.params.personName
-				}
-				if (!this.$isEmpty(this.params.personPhone)) {
-					//手机号
-					params.personPhone=this.params.personPhone
-				}
-				
-				
-				if (this.loginType==this.$loginType.AGENCY) {
-					//园区
-					params.selectType=1
-				}else if (this.loginType==this.$loginType.ENTERPRISE) {
-					//企业
-					params.selectType=2
-					params.enterpriseId=this.$cache.get('enterpriseId')
-				}
-				try{
-					this.$api.car.carList(params).then(res=>{
-						let data=res.data.records
-						let total=res.data.total
-						mescroll.endBySize(data.length,total);
-						if(mescroll.num == 1) that.list = []; //如果是第一页需手动制空列表
-						that.list=that.list.concat(data); //追加新数据
-					})
-				}catch(e){
-					this.mescroll.endErr()
-				}
-			}
-		}
-	}
+    import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
+    import carManagerCard from "../comps/car-manager-card.vue"
+
+    var that;
+    export default {
+        mixins: [MescrollMixin], // 使用mixin
+        components: {
+            carManagerCard
+        },
+        data() {
+            return {
+                list: [],
+                loginType: '',
+
+                //审核意见
+                operaId: '',//操作id
+                opinionShow: false,
+                auditOpinion: '',
+
+                //筛选
+                auditFilterValue: -2,
+                carTypeFilterValue: -1,
+                params: {
+                    number: '',
+                    personName: '',
+                    personPhone: ''
+                },
+
+                auditFilterList: [{
+                    label: '全部',
+                    value: -2,
+                },
+                    {
+                        label: '待审核',
+                        value: 0,
+                    },
+                    {
+                        label: '审核通过',
+                        value: 1,
+                    },
+                    {
+                        label: '审核不通过',
+                        value: -1,
+                    }
+                ],
+                carTypeFilterList: [],
+                other: []
+
+            }
+        },
+        onLoad() {
+            that = this
+            this.loginType = this.$cache.get('loginType')
+
+            this.getCarTypeFilterList()
+        },
+        onShow() {
+            //刷新mescroll数据
+            this.$util.reload(this.mescroll)
+        },
+        methods: {
+            getCarTypeFilterList() {
+                let dict = this.$cache.get('dict')
+                if (dict) {
+                    //缓存中有字典值
+                    this.carTypeFilterList = dict.carTypeList
+                    this.carTypeFilterList.unshift({
+                        label: '全部',
+                        value: '-1'
+                    })
+                    return
+                }
+                //车辆类型
+                this.$api.dict({code: 'car_type'}).then(res => {
+                    res.data.forEach((item) => {
+                        let tmp = {
+                            value: item.dictKey,
+                            label: item.dictValue
+                        }
+                        this.carTypeFilterList.push(tmp)
+                    })
+                    this.carTypeFilterList.unshift({
+                        label: '全部',
+                        value: '-1'
+                    })
+                })
+
+            },
+            pass(item) {
+                let params = {
+                    id: item.id,
+                    auditStatus: 1
+                }
+                this.$dialog.showModal('确定要审核通过此记录吗？').then(res => {
+                    this.$api.car.carAudit(params).then(res => {
+                        if (res.success == true) {
+                            this.$u.toast('操作成功')
+                            this.mescroll.resetUpScroll();
+                        }
+                    })
+                })
+            },
+            opinionConfirm() {
+                let params = {
+                    id: this.operaId,
+                    auditStatus: -1
+                }
+                this.$api.car.carAudit(params).then(res => {
+                    if (res.success == true) {
+                        this.$u.toast('操作成功')
+                        this.mescroll.resetUpScroll();
+                    }
+                })
+            },
+            fail(item) {
+                this.operaId = item.id
+                this.opinionShow = true
+            },
+            //筛选
+            open(index) {
+                this.$refs.uDropdown.highlight();
+            },
+            close(index) {
+                this.$refs.uDropdown.highlight(index);
+            },
+            closeDropdown() {
+                this.$refs.uDropdown.close();
+            },
+            filterChange(e) {
+                this.mescroll.resetUpScroll();
+            },
+            reset() {
+                this.params = {}
+                this.mescroll.resetUpScroll();
+                this.closeDropdown()
+            },
+            upCallback(mescroll) {
+                let params = {
+                    current: mescroll.num,
+                    size: mescroll.size
+                }
+                if (this.auditFilterValue != -2) {
+                    //不是筛选全部审核状态
+                    params.auditStatus = this.auditFilterValue
+                }
+                if (this.carTypeFilterValue != -1) {
+                    //不是筛选全部车辆类型
+                    params.type = this.carTypeFilterValue
+                }
+                if (!this.$isEmpty(this.params.number)) {
+                    //车牌号
+                    params.number = this.params.number
+                }
+                if (!this.$isEmpty(this.params.personName)) {
+                    //姓名
+                    params.personName = this.params.personName
+                }
+                if (!this.$isEmpty(this.params.personPhone)) {
+                    //手机号
+                    params.personPhone = this.params.personPhone
+                }
+
+
+                if (this.loginType == this.$loginType.AGENCY) {
+                    //园区
+                    params.selectType = 1
+                } else if (this.loginType == this.$loginType.ENTERPRISE) {
+                    //企业
+                    params.selectType = 2
+                    params.enterpriseId = this.$cache.get('enterpriseId')
+                }
+                try {
+                    this.$api.car.carList(params).then(res => {
+                        let data = res.data.records
+                        let total = res.data.total
+                        mescroll.endBySize(data.length, total);
+                        if (mescroll.num == 1) that.list = []; //如果是第一页需手动制空列表
+                        that.list = that.list.concat(data); //追加新数据
+                    })
+                } catch (e) {
+                    this.mescroll.endErr()
+                }
+            }
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	
+
 </style>

mini-program/garden-wxapp/pages/index/car/comps/car-manager-card.vue

@@ -1,222 +1,239 @@
 <template>
-	<view class="">
-		<u-popup v-model="detailShow" mode="center" width="670" :closeable="true" border-radius="10">
-			<view style="padding: 60rpx 5rpx 40rpx;">
-				<u-cell-group >
-					<u-cell-item :icon-style="iconStyle"  :border-top="false" :arrow="false"  icon="eye-fill"  title="车牌号码:" :value="detailData.number"></u-cell-item>
-					<u-cell-item :key="index" v-for="(item,index) in carTypeList" v-if="item.value==detailData.type"  :value="item.label" :icon-style="iconStyle"  :arrow="false"  icon="car-fill"  title="车辆类型:" ></u-cell-item>
-					<u-cell-item :key="index" v-for="(item,index) in carPropertiesList" v-if="item.value==detailData.properties"  :value="item.label" :icon-style="iconStyle"  :arrow="false"  icon="error-circle-fill"  title="车辆性质:" ></u-cell-item>
-					<u-cell-item :key="index" v-for="(item,index) in fuelCategoryList"  v-if="item.value==detailData.fuelCategory"  :value="item.label" :icon-style="iconStyle"  :border-bottom="false" :arrow="false"  icon="grid-fill"  title="燃油类别:" ></u-cell-item>
-					<u-cell-item  v-if="detailData.auditOpinion" :value-style="valueStyle"  :value="detailData.auditOpinion" :icon-style="iconStyle"  :arrow="false"  icon="question-circle-fill"  title="审核意见:" ></u-cell-item>
-				</u-cell-group>
-				<view class="detail-img">
-					<view @click.stop="$util.preview(detailData.vehicleDrivingLicense1)">
-						<text>行驶证【正面】</text>
-						<image  :src="detailData.vehicleDrivingLicense1" mode=""></image>
-					</view>
-					<view @click.stop="$util.preview(detailData.vehicleDrivingLicense2)">
-						<text>行驶证【反面】</text>
-						<image  :src="detailData.vehicleDrivingLicense2" mode=""></image>
-					</view>
-				</view>
-			</view>
-		</u-popup>
-		
-		<view @click="detailData=item;detailShow=true" class="card" v-for="(item,index) in list" :key="index">
-			<view class="top" >
-				<text class="number">车牌号：{{item.number}}</text>
-				<text style="color: #008f69;" class="margin-top-10" v-if="item.auditStatus==1">已通过</text>
-				<text style="color: #ea7500;" class="margin-top-10" v-if="item.auditStatus==0">待审核</text>
-				<text style="color: #da0000;" class="margin-top-10" v-if="item.auditStatus==-1">未通过</text>
-			</view>
-			<view class="center">
-				<view class="flex">
-					<view @click.stop="$util.preview(item.carImg)" class="flex justify-center align-center">
-						<image :src="item.carImg" mode=""></image>
-					</view>
-					<view class="content">
-						<text class="padding-bottom-10">车主姓名：{{item.personName}}</text>
-						<view class="padding-bottom-10">
-							<text class="">车主电话：{{item.personPhone}}</text>
-							<text @click.stop="$util.callPhone(item.personPhone)" class="base-color" style="text-decoration: underline; padding-left: 20rpx;">拨打</text>
-						</view>
-						<view class="padding-bottom-10" v-if="item1.value==item.type" v-for="(item1,index) in carTypeList" :key="index">
-							车辆类型：{{item1.label}}
-						</view>
-					</view>
-				</view>
-				
-			</view>
-			<view class="bottom" v-if="item.auditStatus==0">
-				<view @click.stop="pass(item)"  style="font-size: 22rpx;" class="cu-btn  sm round base-bg-color  margin-right-20" >
-					审核通过
-				</view>
-				<view @click.stop="fail(item)" style="font-size: 22rpx;" class="cu-btn  sm round bg-red " >
-					审核不通过
-				</view>
-			</view>
-		</view>
-	</view>
+    <view class="">
+        <u-popup v-model="detailShow" mode="center" width="670" :closeable="true" border-radius="10">
+            <view style="padding: 60rpx 5rpx 40rpx;">
+                <u-cell-group>
+                    <u-cell-item :icon-style="iconStyle" :border-top="false" :arrow="false" icon="eye-fill"
+                                 title="车牌号码:" :value="detailData.number"></u-cell-item>
+                    <u-cell-item :key="index" v-for="(item,index) in carTypeList" v-if="item.value==detailData.type"
+                                 :value="item.label" :icon-style="iconStyle" :arrow="false" icon="car-fill"
+                                 title="车辆类型:"></u-cell-item>
+                    <u-cell-item :key="index" v-for="(item,index) in carPropertiesList"
+                                 v-if="item.value==detailData.properties" :value="item.label" :icon-style="iconStyle"
+                                 :arrow="false" icon="error-circle-fill" title="车辆性质:"></u-cell-item>
+                    <u-cell-item :key="index" v-for="(item,index) in fuelCategoryList"
+                                 v-if="item.value==detailData.fuelCategory" :value="item.label" :icon-style="iconStyle"
+                                 :border-bottom="false" :arrow="false" icon="grid-fill" title="燃油类别:"></u-cell-item>
+                    <u-cell-item v-if="detailData.auditOpinion" :value-style="valueStyle"
+                                 :value="detailData.auditOpinion" :icon-style="iconStyle" :arrow="false"
+                                 icon="question-circle-fill" title="审核意见:"></u-cell-item>
+                </u-cell-group>
+                <view class="detail-img">
+                    <view @click.stop="$util.preview(detailData.vehicleDrivingLicense1)">
+                        <text>行驶证【正面】</text>
+                        <image :src="detailData.vehicleDrivingLicense1" mode=""></image>
+                    </view>
+                    <view @click.stop="$util.preview(detailData.vehicleDrivingLicense2)">
+                        <text>行驶证【反面】</text>
+                        <image :src="detailData.vehicleDrivingLicense2" mode=""></image>
+                    </view>
+                </view>
+            </view>
+        </u-popup>
+
+        <view @click="detailData=item;detailShow=true" class="card" v-for="(item,index) in list" :key="index">
+            <view class="top">
+                <text class="number">车牌号：{{item.number}}</text>
+                <text style="color: #008f69;" class="margin-top-10" v-if="item.auditStatus==1">已通过</text>
+                <text style="color: #ea7500;" class="margin-top-10" v-if="item.auditStatus==0">待审核</text>
+                <text style="color: #da0000;" class="margin-top-10" v-if="item.auditStatus==-1">未通过</text>
+            </view>
+            <view class="center">
+                <view class="flex">
+                    <view @click.stop="$util.preview(item.carImg)" class="flex justify-center align-center">
+                        <image :src="item.carImg" mode=""></image>
+                    </view>
+                    <view class="content">
+                        <text class="padding-bottom-10">车主姓名：{{item.personName}}</text>
+                        <view class="padding-bottom-10">
+                            <text class="">车主电话：{{item.personPhone}}</text>
+                            <text @click.stop="$util.callPhone(item.personPhone)" class="base-color"
+                                  style="text-decoration: underline; padding-left: 20rpx;">拨打
+                            </text>
+                        </view>
+                        <view class="padding-bottom-10" v-if="item1.value==item.type"
+                              v-for="(item1,index) in carTypeList" :key="index">
+                            车辆类型：{{item1.label}}
+                        </view>
+                    </view>
+                </view>
+
+            </view>
+            <view class="bottom" v-if="item.auditStatus==0">
+                <view @click.stop="pass(item)" style="font-size: 22rpx;"
+                      class="cu-btn  sm round base-bg-color  margin-right-20">
+                    审核通过
+                </view>
+                <view @click.stop="fail(item)" style="font-size: 22rpx;" class="cu-btn  sm round bg-red ">
+                    审核不通过
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		props:{
-			list:{
-				type:Array
-			}
-		},
-		data() {
-			return {
-				iconStyle:{
-					color:'#5064eb'
-				},
-				valueStyle:{
-					color:'#da0000'
-				},
-				//详情
-				detailShow:false,
-				detailData:{},
-				
-				
-				//字典
-				carTypeList:[],
-				carPropertiesList:[],
-				fuelCategoryList:[],
-			}
-		},
-		created() {
-			this.getDict()
-		},
-		methods: {
-			pass(item){
-				this.$emit('pass',item)
-			},
-			fail(item){
-				this.$emit('fail',item)
-			},
-			getDict(){
-				let dict=this.$cache.get('dict')
-				if (dict) {
-					//缓存中有字典值
-					this.carTypeList=dict.carTypeList
-					this.carPropertiesList=dict.carPropertiesList
-					this.fuelCategoryList=dict.fuelCategoryList
-					return
-				}
-				//车辆类型
-				this.$api.dict({code:'car_type'}).then(res=>{
-					res.data.forEach((item)=>{
-						let tmp={
-							value:item.dictKey,
-							label:item.dictValue
-						}
-						this.carTypeList.push(tmp)
-					})
-				})
-				//车辆性质
-				this.$api.dict({code:'car_properties'}).then(res=>{
-					res.data.forEach((item)=>{
-						let tmp={
-							value:item.dictKey,
-							label:item.dictValue
-						}
-						this.carPropertiesList.push(tmp)
-					})
-				})
-				//燃油类别
-				this.$api.dict({code:'fuel_category'}).then(res=>{
-					res.data.forEach((item)=>{
-						let tmp={
-							value:item.dictKey,
-							label:item.dictValue
-						}
-						this.fuelCategoryList.push(tmp)
-					})
-				})
-			},
-		}
-	}
+    export default {
+        props: {
+            list: {
+                type: Array
+            }
+        },
+        data() {
+            return {
+                iconStyle: {
+                    color: '#5064eb'
+                },
+                valueStyle: {
+                    color: '#da0000'
+                },
+                //详情
+                detailShow: false,
+                detailData: {},
+
+
+                //字典
+                carTypeList: [],
+                carPropertiesList: [],
+                fuelCategoryList: [],
+            }
+        },
+        created() {
+            this.getDict()
+        },
+        methods: {
+            pass(item) {
+                this.$emit('pass', item)
+            },
+            fail(item) {
+                this.$emit('fail', item)
+            },
+            getDict() {
+                let dict = this.$cache.get('dict')
+                if (dict) {
+                    //缓存中有字典值
+                    this.carTypeList = dict.carTypeList
+                    this.carPropertiesList = dict.carPropertiesList
+                    this.fuelCategoryList = dict.fuelCategoryList
+                    return
+                }
+                //车辆类型
+                this.$api.dict({code: 'car_type'}).then(res => {
+                    res.data.forEach((item) => {
+                        let tmp = {
+                            value: item.dictKey,
+                            label: item.dictValue
+                        }
+                        this.carTypeList.push(tmp)
+                    })
+                })
+                //车辆性质
+                this.$api.dict({code: 'car_properties'}).then(res => {
+                    res.data.forEach((item) => {
+                        let tmp = {
+                            value: item.dictKey,
+                            label: item.dictValue
+                        }
+                        this.carPropertiesList.push(tmp)
+                    })
+                })
+                //燃油类别
+                this.$api.dict({code: 'fuel_category'}).then(res => {
+                    res.data.forEach((item) => {
+                        let tmp = {
+                            value: item.dictKey,
+                            label: item.dictValue
+                        }
+                        this.fuelCategoryList.push(tmp)
+                    })
+                })
+            },
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	
-	.detail-img{
-		display: flex;
-		justify-content: space-around;
-		text-align: center;
-		color: #707175;
-		
-		view{
-			display: flex;
-			flex-direction: column;
-			width: 48%;
-			height: 300rpx;
-			
-			text{
-				padding: 10rpx 0;
-			}
-		}
-	}
-	
-	
-	.card{
-		background-color: #FFFFFF;
-		margin: 20rpx;
-		padding: 0 40rpx;
-		border-radius: 20rpx;
-		display: flex;
-		flex-direction: column;
-		image{
-			width: 120rpx;
-			height: 120rpx;
-		}
-		
-		.top{
-			display: flex;
-			justify-content: space-between;
-			padding: 20rpx 0 20rpx 0rpx;
-			border-bottom: 1rpx solid #e5e5e5;
-			.number{
-				font-size: 34rpx;
-			}
-			
-			.audit{
-				font-size: 30rpx;
-			}
-		}
-		
-		.center{
-			padding: 40rpx 0;
-			border-bottom: 1rpx solid #e5e5e5;
-			display: flex;
-			justify-content: space-between;
-			.content{
-				padding-left: 30rpx;
-				display: flex;
-				flex-direction: column;
-				font-size: 30rpx;
-				
-				text{
-					padding-bottom: 10rpx;
-				}
-				
-			}
-			.record{
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				color: #545454;
-			}
-			
-		}
-		
-		.bottom{
-			display: flex;
-			justify-content: flex-end;
-			padding: 20rpx 0;
-		}
-		
-		
-	}
+
+    .detail-img {
+        display: flex;
+        justify-content: space-around;
+        text-align: center;
+        color: #707175;
+
+        view {
+            display: flex;
+            flex-direction: column;
+            width: 48%;
+            height: 300 rpx;
+
+            text {
+                padding: 10 rpx 0;
+            }
+        }
+    }
+
+
+    .card {
+        background-color: #FFFFFF;
+        margin: 20 rpx;
+        padding: 0 40 rpx;
+        border-radius: 20 rpx;
+        display: flex;
+        flex-direction: column;
+
+        image {
+            width: 120 rpx;
+            height: 120 rpx;
+        }
+
+        .top {
+            display: flex;
+            justify-content: space-between;
+            padding: 20 rpx 0 20 rpx 0 rpx;
+            border-bottom: 1 rpx solid #e5e5e5;
+
+            .number {
+                font-size: 34 rpx;
+            }
+
+            .audit {
+                font-size: 30 rpx;
+            }
+        }
+
+        .center {
+            padding: 40 rpx 0;
+            border-bottom: 1 rpx solid #e5e5e5;
+            display: flex;
+            justify-content: space-between;
+
+            .content {
+                padding-left: 30 rpx;
+                display: flex;
+                flex-direction: column;
+                font-size: 30 rpx;
+
+                text {
+                    padding-bottom: 10 rpx;
+                }
+
+            }
+
+            .record {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #545454;
+            }
+
+        }
+
+        .bottom {
+            display: flex;
+            justify-content: flex-end;
+            padding: 20 rpx 0;
+        }
+
+
+    }
 </style>

mini-program/garden-wxapp/pages/index/car/comps/card.vue

@@ -1,140 +1,149 @@
 <template>
-	<view >
-		<view class="recommend-info" >
-		  <view class="goods-list">
-		    <view @click="showDetail(item)"  class="list" v-for="(item,index) in list" :key="index">
-		      <view class="pictrue" >
-				  <!-- 入场记录 -->
-				<image v-if="current==0" :src="item.enterImgPath?item.enterImgPath:'/static/index/noimg3.png'" mode="scaleToFill"></image>
-				  <!-- 出场记录 -->
-				<image v-if="current==1"  :src="item.outImgPath?item.outImgPath:'/static/index/noimg3.png'" mode="scaleToFill"></image>
-				
-				<view class="car">{{item.carNo}}</view>
-		      </view>
-			  <view class="content">
-				  <view>
-						<u-icon style="margin-right: 15rpx;" name="clock-fill" color="#5064eb" size="34"></u-icon>
-						<text>进：{{formatDate(item.enterTime)}}</text>
-				  </view>
-				  <!-- 出场时间 -->
-				  <view v-if="current==1" style="padding-top: 8rpx;">
-						<text class="cuIcon-timefill base-color  margin-right-10"></text>
-						<text>出：{{formatDate(item.outTime)}}</text>
-				  </view>
-				  <!-- 入场车道 -->
-				  <view v-if="current==0" style="padding-top: 8rpx;">
-					    <u-icon style="margin-right: 10rpx;" name="map-fill" color="#5064eb" size="36"></u-icon>
-						<text>{{item.enterGateName}}</text>
-				  </view>
-				  <view class="flex justify-center" style="margin: 20rpx 0 0;">
-				  	<view  class="cu-btn base-line round df" style="width: 70%;">
-				  		查看详情
-				  	</view>
-				  </view>
-			  </view>
-		    </view>
-		  </view>
-		</view>
-	</view>
+    <view>
+        <view class="recommend-info">
+            <view class="goods-list">
+                <view @click="showDetail(item)" class="list" v-for="(item,index) in list" :key="index">
+                    <view class="pictrue">
+                        <!-- 入场记录 -->
+                        <image v-if="current==0" :src="item.enterImgPath?item.enterImgPath:'/static/index/noimg3.png'"
+                               mode="scaleToFill"></image>
+                        <!-- 出场记录 -->
+                        <image v-if="current==1" :src="item.outImgPath?item.outImgPath:'/static/index/noimg3.png'"
+                               mode="scaleToFill"></image>
+
+                        <view class="car">{{item.carNo}}</view>
+                    </view>
+                    <view class="content">
+                        <view>
+                            <u-icon style="margin-right: 15rpx;" name="clock-fill" color="#5064eb" size="34"></u-icon>
+                            <text>进：{{formatDate(item.enterTime)}}</text>
+                        </view>
+                        <!-- 出场时间 -->
+                        <view v-if="current==1" style="padding-top: 8rpx;">
+                            <text class="cuIcon-timefill base-color  margin-right-10"></text>
+                            <text>出：{{formatDate(item.outTime)}}</text>
+                        </view>
+                        <!-- 入场车道 -->
+                        <view v-if="current==0" style="padding-top: 8rpx;">
+                            <u-icon style="margin-right: 10rpx;" name="map-fill" color="#5064eb" size="36"></u-icon>
+                            <text>{{item.enterGateName}}</text>
+                        </view>
+                        <view class="flex justify-center" style="margin: 20rpx 0 0;">
+                            <view class="cu-btn base-line round df" style="width: 70%;">
+                                查看详情
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		props:{
-			list: {
-				type: Array,
-				default: () => {
-					return []
-				}
-			},
-			current: {
-				type: Number,
-				default: () => {
-					return 0
-				}
-			},
-		},
-		data() {
-			return {
-				
-			}
-		},
-		computed:{
-			formatDate(){
-				return val=>{
-					if (this.$isEmpty(val)) {
-						return '未知'
-					}
-					return this.$u.timeFormat(new Date(val).getTime(), 'mm-dd hh:MM:ss') 
-				}
-			},
-		},
-		methods: {
-			showDetail(item){
-				uni.navigateTo({
-					url:"/pages/index/car/detail?id="+item.id+"&current="+this.current
-				})
-			}
-		}
-	}
+    export default {
+        props: {
+            list: {
+                type: Array,
+                default: () => {
+                    return []
+                }
+            },
+            current: {
+                type: Number,
+                default: () => {
+                    return 0
+                }
+            },
+        },
+        data() {
+            return {}
+        },
+        computed: {
+            formatDate() {
+                return val => {
+                    if (this.$isEmpty(val)) {
+                        return '未知'
+                    }
+                    return this.$u.timeFormat(new Date(val).getTime(), 'mm-dd hh:MM:ss')
+                }
+            },
+        },
+        methods: {
+            showDetail(item) {
+                uni.navigateTo({
+                    url: "/pages/index/car/detail?id=" + item.id + "&current=" + this.current
+                })
+            }
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	/* 为你推荐 */
-	.recommend-info{
-	  width: 100%;
-	  .recommend-title{
-	    display: flex;
-	    align-items: center;
-	    justify-content: center;
-	    width: 100%;
-	    height: 100rpx;
-	    .title{
-	      display: flex;
-	      align-items: center;
-	      image{
-	        width: 416rpx;
-	        height: 40rpx;
-	      }
-	    }
-	  }
-	  .goods-list{
-	    display: flex;
-	    flex-wrap: wrap;
-	    justify-content: space-between;
-	    padding: 0 30rpx;
-	    .list{
-	      width: 49%;
-	      height: 540rpx;
-	      margin-bottom: 20rpx;
-	      background-color: #FFFFFF;
-	      border-radius: 10rpx;
-	      overflow: hidden;
-	      .pictrue{
-	        width: 100%;
-			position: relative;
-	        image{
-				border-top-right-radius: 12rpx;
-				border-top-left-radius: 12rpx;
-	            height: 330rpx;
-	        }
-			.car{
-				position: absolute;
-				bottom: 20rpx;
-				left: 10rpx;
-				color: #FFFFFF;
-			}
-	      }
-		  
-		  .content{
-			  padding: 20rpx;
-			  text{
-				  padding: 10rpx 0;
-			  }
-		  }
-	      
-	    }
-	  }
-	}
+    /* 为你推荐 */
+    .recommend-info {
+        width: 100%;
+
+        .recommend-title {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100 rpx;
+
+            .title {
+                display: flex;
+                align-items: center;
+
+                image {
+                    width: 416 rpx;
+                    height: 40 rpx;
+                }
+            }
+        }
+
+        .goods-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            padding: 0 30 rpx;
+
+            .list {
+                width: 49%;
+                height: 540 rpx;
+                margin-bottom: 20 rpx;
+                background-color: #FFFFFF;
+                border-radius: 10 rpx;
+                overflow: hidden;
+
+                .pictrue {
+                    width: 100%;
+                    position: relative;
+
+                    image {
+                        border-top-right-radius: 12 rpx;
+                        border-top-left-radius: 12 rpx;
+                        height: 330 rpx;
+                    }
+
+                    .car {
+                        position: absolute;
+                        bottom: 20 rpx;
+                        left: 10 rpx;
+                        color: #FFFFFF;
+                    }
+                }
+
+                .content {
+                    padding: 20 rpx;
+
+                    text {
+                        padding: 10 rpx 0;
+                    }
+                }
+
+            }
+        }
+    }
 
 </style>

mini-program/garden-wxapp/pages/index/car/comps/item.vue

@@ -1,110 +1,111 @@
 <template>
-	<MeScroll  :up="up" :down="down" @up="upFn" :fixed="false" @down="downFn" @init="initMeScroll">
-		<card :list="dataList" :current="i"></card>
-	</MeScroll>
+    <MeScroll :up="up" :down="down" @up="upFn" :fixed="false" @down="downFn" @init="initMeScroll">
+        <card :list="dataList" :current="i"></card>
+    </MeScroll>
 </template>
 <script>
-	import MeScroll from '@/components/mescroll-body/mescroll-uni.vue'
-	import card from './card.vue'
-	var app=getApp()
-	export default {
-		components:{
-			MeScroll,card
-		},
-		props: {
-			type: Number,
-			i: Number,
-			item:Object,
-			params:Object
-		},
-		data() {
-			return {
-				tenantId:'',
-				
-				isInit: false, // 是否初始化
-				dataList: [], // 列表数据
-				mescroll: null, // mescroll 对象
-				// 上拉配置参数
-				up: {
-					noMoreSize: 2, 
-					auto: false,
-					page: {
-						page: 0,
-						size: 10
-					}
-				},
-				// 下拉配置参数
-				down: {
-					use: true, 
-					auto: false
-				}
-			}
-		},
-		created() {
-			this.tenantId=this.$cache.get('agencyTenantId')
-		},
-		watch:{
-			type(val) {
-				if(!this.isInit && val === this.i) {
-					this.mescroll.resetUpScroll()
-				}
-			}
-		},
-		mounted() {
-			if(!this.isInit && this.i === 0) {
-				this.mescroll.resetUpScroll()
-			}
-		},
-		methods: {
-			/**
-			 * @param {Object} mescroll 初始化组件
-			 */
-			initMeScroll(mescroll) {
-				this.mescroll = mescroll
-			},
-			/**
-			 * @param {Object} mescroll 上拉回调
-			 */
-			async upFn(mescroll) {
-				let that=this
-				let params={
-					current:mescroll.num,
-					size:mescroll.size,
-					tenantId:this.tenantId,
-					carNo:this.params.carNo
-				}
-				let res=null
-				try{
-					if (this.i==0) {
-						//入场记录
-						res=await this.$api.car.enterPage(params)
-					}else if (this.i==1) {
-						//出场记录
-						res=await this.$api.car.outPage(params)
-					}
-					let data=res.data.records
-					this.mescroll.endBySize(data.length, res.total)
-					if (mescroll.num==1) this.dataList=[]
-					this.dataList=this.dataList.concat(data)
-				}catch(e){
-					this.mescroll.endErr();
-				}
-			},
-			/**
-			 * 下拉回调
-			 * */
-			downFn(mescroll) {
-				setTimeout(()=>{
-					this.$u.toast('刷新成功')
-					this.mescroll.resetUpScroll()
-				},1500)
-			},
-		}
-	}
+    import MeScroll from '@/components/mescroll-body/mescroll-uni.vue'
+    import card from './card.vue'
+
+    var app = getApp()
+    export default {
+        components: {
+            MeScroll, card
+        },
+        props: {
+            type: Number,
+            i: Number,
+            item: Object,
+            params: Object
+        },
+        data() {
+            return {
+                tenantId: '',
+
+                isInit: false, // 是否初始化
+                dataList: [], // 列表数据
+                mescroll: null, // mescroll 对象
+                // 上拉配置参数
+                up: {
+                    noMoreSize: 2,
+                    auto: false,
+                    page: {
+                        page: 0,
+                        size: 10
+                    }
+                },
+                // 下拉配置参数
+                down: {
+                    use: true,
+                    auto: false
+                }
+            }
+        },
+        created() {
+            this.tenantId = this.$cache.get('agencyTenantId')
+        },
+        watch: {
+            type(val) {
+                if (!this.isInit && val === this.i) {
+                    this.mescroll.resetUpScroll()
+                }
+            }
+        },
+        mounted() {
+            if (!this.isInit && this.i === 0) {
+                this.mescroll.resetUpScroll()
+            }
+        },
+        methods: {
+            /**
+             * @param {Object} mescroll 初始化组件
+             */
+            initMeScroll(mescroll) {
+                this.mescroll = mescroll
+            },
+            /**
+             * @param {Object} mescroll 上拉回调
+             */
+            async upFn(mescroll) {
+                let that = this
+                let params = {
+                    current: mescroll.num,
+                    size: mescroll.size,
+                    tenantId: this.tenantId,
+                    carNo: this.params.carNo
+                }
+                let res = null
+                try {
+                    if (this.i == 0) {
+                        //入场记录
+                        res = await this.$api.car.enterPage(params)
+                    } else if (this.i == 1) {
+                        //出场记录
+                        res = await this.$api.car.outPage(params)
+                    }
+                    let data = res.data.records
+                    this.mescroll.endBySize(data.length, res.total)
+                    if (mescroll.num == 1) this.dataList = []
+                    this.dataList = this.dataList.concat(data)
+                } catch (e) {
+                    this.mescroll.endErr();
+                }
+            },
+            /**
+             * 下拉回调
+             * */
+            downFn(mescroll) {
+                setTimeout(() => {
+                    this.$u.toast('刷新成功')
+                    this.mescroll.resetUpScroll()
+                }, 1500)
+            },
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	view{
-		box-sizing: border-box;
-	}
+    view {
+        box-sizing: border-box;
+    }
 </style>

mini-program/garden-wxapp/pages/index/car/comps/my-car-card.vue

@@ -1,241 +1,256 @@
 <template>
-	<view class="">
-		<u-popup v-model="detailShow" mode="center" width="670" :closeable="true" border-radius="10">
-			<view style="padding: 60rpx 5rpx 40rpx;">
-				<u-cell-group >
-					<u-cell-item :icon-style="iconStyle"  :border-top="false" :arrow="false"  icon="eye-fill"  title="车牌号码:" :value="detailData.number"></u-cell-item>
-					<u-cell-item :key="index" v-for="(item,index) in carTypeList" v-if="item.value==detailData.type"  :value="item.label" :icon-style="iconStyle"  :arrow="false"  icon="car-fill"  title="车辆类型:" ></u-cell-item>
-					<u-cell-item :key="index" v-for="(item,index) in carPropertiesList" v-if="item.value==detailData.properties"  :value="item.label" :icon-style="iconStyle"  :arrow="false"  icon="error-circle-fill"  title="车辆性质:" ></u-cell-item>
-					<u-cell-item value-style="{'color':'#5064eb'}" :key="index" v-for="(item,index) in fuelCategoryList"  v-if="item.value==detailData.fuelCategory"  :value="item.label" :icon-style="iconStyle"  :border-bottom="false" :arrow="false"  icon="grid-fill"  title="燃油类别:" ></u-cell-item>
-					<u-cell-item v-if="detailData.opinion" :icon-style="iconStyle"  :border-top="false" :arrow="false"  icon="more-circle-fill"  title="审核意见:" :value="detailData.opinion"></u-cell-item>
-				</u-cell-group>
-				<view class="detail-img">
-					<view @click.stop="$util.preview(detailData.vehicleDrivingLicense1)">
-						<text>行驶证【正面】</text>
-						<image  :src="detailData.vehicleDrivingLicense1" mode=""></image>
-					</view>
-					<view @click.stop="$util.preview(detailData.vehicleDrivingLicense2)">
-						<text>行驶证【反面】</text>
-						<image  :src="detailData.vehicleDrivingLicense2" mode=""></image>
-					</view>
-				</view>
-			</view>
-		</u-popup>
-		
-		<view @click="detailData=item;detailShow=true" class="card" v-for="(item,index) in list" :key="index">
-			<view class="top" >
-				<text class="number">车牌号：{{item.number}}</text>
-				<text @click.stop="jump('/pages/index/car/list?carNo='+item.number)" style="text-decoration: underline;margin-top: 10rpx;">出入记录</text>
-			</view>
-			<view class="center">
-				<view class="flex">
-					<view @click.stop="$util.preview(item.carImg)" class="flex justify-center align-center">
-						<image :src="item.carImg" mode=""></image>
-					</view>
-					<view class="content">
-						<text class="padding-bottom-10">车主姓名：{{item.personName}}</text>
-						<text class="padding-bottom-10">车主电话：{{item.personPhone}}</text>
-						<view class="padding-bottom-10">
-							审核状态：
-							<text style="color: #008f69;" v-if="item.auditStatus==1">已通过</text>
-							<text style="color: #ea7500;" v-if="item.auditStatus==0">待审核</text>
-							<text style="color: #da0000;" v-if="item.auditStatus==-1">未通过</text>
-						</view>
-					</view>
-				</view>
-				
-			</view>
-			<view class="bottom" >
-				<view @click.stop="edit(item)" style="font-size: 22rpx;" class="cu-btn  sm round  base-line margin-right-20" >
-					<u-icon name="edit-pen-fill" style="padding-right: 10rpx;"></u-icon>
-					编辑
-				</view>
-				<view @click.stop="del(item)" style="font-size: 22rpx;" class="cu-btn  sm round red-line" >
-					<u-icon name="edit-pen-fill" style="padding-right: 10rpx;"></u-icon>
-					删除
-				</view>
-			</view>
-		</view>
-	</view>
+    <view class="">
+        <u-popup v-model="detailShow" mode="center" width="670" :closeable="true" border-radius="10">
+            <view style="padding: 60rpx 5rpx 40rpx;">
+                <u-cell-group>
+                    <u-cell-item :icon-style="iconStyle" :border-top="false" :arrow="false" icon="eye-fill"
+                                 title="车牌号码:" :value="detailData.number"></u-cell-item>
+                    <u-cell-item :key="index" v-for="(item,index) in carTypeList" v-if="item.value==detailData.type"
+                                 :value="item.label" :icon-style="iconStyle" :arrow="false" icon="car-fill"
+                                 title="车辆类型:"></u-cell-item>
+                    <u-cell-item :key="index" v-for="(item,index) in carPropertiesList"
+                                 v-if="item.value==detailData.properties" :value="item.label" :icon-style="iconStyle"
+                                 :arrow="false" icon="error-circle-fill" title="车辆性质:"></u-cell-item>
+                    <u-cell-item value-style="{'color':'#5064eb'}" :key="index" v-for="(item,index) in fuelCategoryList"
+                                 v-if="item.value==detailData.fuelCategory" :value="item.label" :icon-style="iconStyle"
+                                 :border-bottom="false" :arrow="false" icon="grid-fill" title="燃油类别:"></u-cell-item>
+                    <u-cell-item v-if="detailData.opinion" :icon-style="iconStyle" :border-top="false" :arrow="false"
+                                 icon="more-circle-fill" title="审核意见:" :value="detailData.opinion"></u-cell-item>
+                </u-cell-group>
+                <view class="detail-img">
+                    <view @click.stop="$util.preview(detailData.vehicleDrivingLicense1)">
+                        <text>行驶证【正面】</text>
+                        <image :src="detailData.vehicleDrivingLicense1" mode=""></image>
+                    </view>
+                    <view @click.stop="$util.preview(detailData.vehicleDrivingLicense2)">
+                        <text>行驶证【反面】</text>
+                        <image :src="detailData.vehicleDrivingLicense2" mode=""></image>
+                    </view>
+                </view>
+            </view>
+        </u-popup>
+
+        <view @click="detailData=item;detailShow=true" class="card" v-for="(item,index) in list" :key="index">
+            <view class="top">
+                <text class="number">车牌号：{{item.number}}</text>
+                <text @click.stop="jump('/pages/index/car/list?carNo='+item.number)"
+                      style="text-decoration: underline;margin-top: 10rpx;">出入记录
+                </text>
+            </view>
+            <view class="center">
+                <view class="flex">
+                    <view @click.stop="$util.preview(item.carImg)" class="flex justify-center align-center">
+                        <image :src="item.carImg" mode=""></image>
+                    </view>
+                    <view class="content">
+                        <text class="padding-bottom-10">车主姓名：{{item.personName}}</text>
+                        <text class="padding-bottom-10">车主电话：{{item.personPhone}}</text>
+                        <view class="padding-bottom-10">
+                            审核状态：
+                            <text style="color: #008f69;" v-if="item.auditStatus==1">已通过</text>
+                            <text style="color: #ea7500;" v-if="item.auditStatus==0">待审核</text>
+                            <text style="color: #da0000;" v-if="item.auditStatus==-1">未通过</text>
+                        </view>
+                    </view>
+                </view>
+
+            </view>
+            <view class="bottom">
+                <view @click.stop="edit(item)" style="font-size: 22rpx;"
+                      class="cu-btn  sm round  base-line margin-right-20">
+                    <u-icon name="edit-pen-fill" style="padding-right: 10rpx;"></u-icon>
+                    编辑
+                </view>
+                <view @click.stop="del(item)" style="font-size: 22rpx;" class="cu-btn  sm round red-line">
+                    <u-icon name="edit-pen-fill" style="padding-right: 10rpx;"></u-icon>
+                    删除
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		props:{
-			list:{
-				type:Array
-			}
-		},
-		data() {
-			return {
-				iconStyle:{
-					color:'#5064eb'
-				},
-				
-				//详情
-				detailShow:false,
-				detailData:{},
-				
-				
-				carTypeList:[],
-				carPropertiesList:[],
-				fuelCategoryList:[]
-			}
-		},
-		created() {
-			this.getDict()
-		},
-		methods: {
-			edit(item){
-				//重新编辑,审核状态重置为0
-				let params={
-					id:item.id,
-					auditOpinion:"",
-					auditStatus:0,
-					carImg:item.carImg,
-					fuelCategory:item.fuelCategory,
-					number:item.number,
-					properties:item.properties,
-					type:item.type,
-					vehicleDrivingLicense1:item.vehicleDrivingLicense1,
-					vehicleDrivingLicense2:item.vehicleDrivingLicense2
-				}
-				console.log(params);
-				uni.navigateTo({
-					url:"/pages/index/car/my-car/add"+this.$u.queryParams(params)
-				})
-			},
-			del(item){
-				this.$emit('delItem',item)
-			},
-			jump(url){
-				if (!this.$isEmpty(url)) {
-					uni.navigateTo({
-						url
-					})
-				}
-			},
-			getDict(){
-				let dict=this.$cache.get('dict')
-				if (dict) {
-					//缓存中有字典值
-					this.carTypeList=dict.carTypeList
-					this.carPropertiesList=dict.carPropertiesList
-					this.fuelCategoryList=dict.fuelCategoryList
-					return
-				}
-				//车辆类型
-				this.$api.dict({code:'car_type'}).then(res=>{
-					res.data.forEach((item)=>{
-						let tmp={
-							value:item.dictKey,
-							label:item.dictValue
-						}
-						this.carTypeList.push(tmp)
-					})
-				})
-				//车辆性质
-				this.$api.dict({code:'car_properties'}).then(res=>{
-					res.data.forEach((item)=>{
-						let tmp={
-							value:item.dictKey,
-							label:item.dictValue
-						}
-						this.carPropertiesList.push(tmp)
-					})
-				})
-				//燃油类别
-				this.$api.dict({code:'fuel_category'}).then(res=>{
-					res.data.forEach((item)=>{
-						let tmp={
-							value:item.dictKey,
-							label:item.dictValue
-						}
-						this.fuelCategoryList.push(tmp)
-					})
-				})
-			},
-		}
-	}
+    export default {
+        props: {
+            list: {
+                type: Array
+            }
+        },
+        data() {
+            return {
+                iconStyle: {
+                    color: '#5064eb'
+                },
+
+                //详情
+                detailShow: false,
+                detailData: {},
+
+
+                carTypeList: [],
+                carPropertiesList: [],
+                fuelCategoryList: []
+            }
+        },
+        created() {
+            this.getDict()
+        },
+        methods: {
+            edit(item) {
+                //重新编辑,审核状态重置为0
+                let params = {
+                    id: item.id,
+                    auditOpinion: "",
+                    auditStatus: 0,
+                    carImg: item.carImg,
+                    fuelCategory: item.fuelCategory,
+                    number: item.number,
+                    properties: item.properties,
+                    type: item.type,
+                    vehicleDrivingLicense1: item.vehicleDrivingLicense1,
+                    vehicleDrivingLicense2: item.vehicleDrivingLicense2
+                }
+                console.log(params);
+                uni.navigateTo({
+                    url: "/pages/index/car/my-car/add" + this.$u.queryParams(params)
+                })
+            },
+            del(item) {
+                this.$emit('delItem', item)
+            },
+            jump(url) {
+                if (!this.$isEmpty(url)) {
+                    uni.navigateTo({
+                        url
+                    })
+                }
+            },
+            getDict() {
+                let dict = this.$cache.get('dict')
+                if (dict) {
+                    //缓存中有字典值
+                    this.carTypeList = dict.carTypeList
+                    this.carPropertiesList = dict.carPropertiesList
+                    this.fuelCategoryList = dict.fuelCategoryList
+                    return
+                }
+                //车辆类型
+                this.$api.dict({code: 'car_type'}).then(res => {
+                    res.data.forEach((item) => {
+                        let tmp = {
+                            value: item.dictKey,
+                            label: item.dictValue
+                        }
+                        this.carTypeList.push(tmp)
+                    })
+                })
+                //车辆性质
+                this.$api.dict({code: 'car_properties'}).then(res => {
+                    res.data.forEach((item) => {
+                        let tmp = {
+                            value: item.dictKey,
+                            label: item.dictValue
+                        }
+                        this.carPropertiesList.push(tmp)
+                    })
+                })
+                //燃油类别
+                this.$api.dict({code: 'fuel_category'}).then(res => {
+                    res.data.forEach((item) => {
+                        let tmp = {
+                            value: item.dictKey,
+                            label: item.dictValue
+                        }
+                        this.fuelCategoryList.push(tmp)
+                    })
+                })
+            },
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	
-	.detail-img{
-		display: flex;
-		justify-content: space-around;
-		text-align: center;
-		color: #707175;
-		
-		view{
-			display: flex;
-			flex-direction: column;
-			width: 48%;
-			height: 300rpx;
-			
-			text{
-				padding: 10rpx 0;
-			}
-		}
-	}
-	
-	
-	.card{
-		background-color: #FFFFFF;
-		margin: 20rpx;
-		padding: 0 40rpx;
-		border-radius: 20rpx;
-		display: flex;
-		flex-direction: column;
-		image{
-			width: 120rpx;
-			height: 120rpx;
-		}
-		
-		.top{
-			display: flex;
-			justify-content: space-between;
-			padding: 20rpx 0 20rpx 0rpx;
-			border-bottom: 1rpx dashed #e5e5e5;
-			.number{
-				font-size: 34rpx;
-			}
-			
-			.audit{
-				font-size: 30rpx;
-			}
-		}
-		
-		.center{
-			padding: 40rpx 0;
-			display: flex;
-			justify-content: space-between;
-			.content{
-				padding-left: 30rpx;
-				display: flex;
-				flex-direction: column;
-				font-size: 30rpx;
-				
-				text{
-					padding-bottom: 10rpx;
-				}
-				
-			}
-			.record{
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				color: #545454;
-			}
-			
-		}
-		
-		.bottom{
-			display: flex;
-			justify-content: flex-end;
-			padding: 20rpx 0;
-		}
-		
-		
-	}
+
+    .detail-img {
+        display: flex;
+        justify-content: space-around;
+        text-align: center;
+        color: #707175;
+
+        view {
+            display: flex;
+            flex-direction: column;
+            width: 48%;
+            height: 300 rpx;
+
+            text {
+                padding: 10 rpx 0;
+            }
+        }
+    }
+
+
+    .card {
+        background-color: #FFFFFF;
+        margin: 20 rpx;
+        padding: 0 40 rpx;
+        border-radius: 20 rpx;
+        display: flex;
+        flex-direction: column;
+
+        image {
+            width: 120 rpx;
+            height: 120 rpx;
+        }
+
+        .top {
+            display: flex;
+            justify-content: space-between;
+            padding: 20 rpx 0 20 rpx 0 rpx;
+            border-bottom: 1 rpx dashed #e5e5e5;
+
+            .number {
+                font-size: 34 rpx;
+            }
+
+            .audit {
+                font-size: 30 rpx;
+            }
+        }
+
+        .center {
+            padding: 40 rpx 0;
+            display: flex;
+            justify-content: space-between;
+
+            .content {
+                padding-left: 30 rpx;
+                display: flex;
+                flex-direction: column;
+                font-size: 30 rpx;
+
+                text {
+                    padding-bottom: 10 rpx;
+                }
+
+            }
+
+            .record {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #545454;
+            }
+
+        }
+
+        .bottom {
+            display: flex;
+            justify-content: flex-end;
+            padding: 20 rpx 0;
+        }
+
+
+    }
 </style>

mini-program/garden-wxapp/pages/index/car/detail.vue

@@ -1,60 +1,73 @@
 <template>
-	<view style="background-color: #FFFFFF;min-height: 100vh;">
-		<view style="padding: 20rpx;">
-			<view style="position: relative;">
-				<image v-if="current==0" @click="$util.preview(detailData.enterImgPath)" :src="detailData.enterImgPath?detailData.enterImgPath:'/static/index/noimg3.png'"  style="width: 100%;height: 400rpx;"></image>
-				<image v-if="current==1" @click="$util.preview(detailData.outImgPath)" :src="detailData.outImgPath?detailData.outImgPath:'/static/index/noimg3.png'"  style="width: 100%;height: 400rpx;"></image>
-				<text style="font-size: 32rpx;color: #FFFFFF;position: absolute;bottom: 20rpx;left: 20rpx;">{{detailData.carNo}}</text>
-			</view>
-			<u-cell-group >
-				<u-cell-item :icon-style="iconStyle"  :arrow="false"  icon="bookmark-fill"  title="车牌号:" :value="detailData.carNo"></u-cell-item>
-				<u-cell-item :icon-style="iconStyle"  :arrow="false"  icon="map-fill"  title="入场车道:" :value="detailData.enterGateName"></u-cell-item>
-				<u-cell-item :icon-style="iconStyle"  :arrow="false"  icon="clock-fill"  title="入场时间:" :value="detailData.enterTime"></u-cell-item>
-				<u-cell-item v-if="current==1" :icon-style="iconStyle"  :arrow="false"  icon="map-fill"  title="出口车道:" :value="detailData.outGateName"></u-cell-item>
-				<u-cell-item v-if="current==1" :icon-style="iconStyle"  :arrow="false"  icon="clock-fill"  title="出场时间:" :value="detailData.outTime"></u-cell-item>
-				<u-cell-item :icon-style="iconStyle" :border-bottom="false"  :arrow="false"  icon="rmb-circle-fill"  title="进出费用:" :value="detailData.totalAmount?'￥'+detailData.totalAmount:'￥0'"></u-cell-item>
-			</u-cell-group>
-		</view>
-	</view>
+    <view style="background-color: #FFFFFF;min-height: 100vh;">
+        <view style="padding: 20rpx;">
+            <view style="position: relative;">
+                <image v-if="current==0" @click="$util.preview(detailData.enterImgPath)"
+                       :src="detailData.enterImgPath?detailData.enterImgPath:'/static/index/noimg3.png'"
+                       style="width: 100%;height: 400rpx;"></image>
+                <image v-if="current==1" @click="$util.preview(detailData.outImgPath)"
+                       :src="detailData.outImgPath?detailData.outImgPath:'/static/index/noimg3.png'"
+                       style="width: 100%;height: 400rpx;"></image>
+                <text style="font-size: 32rpx;color: #FFFFFF;position: absolute;bottom: 20rpx;left: 20rpx;">
+                    {{detailData.carNo}}
+                </text>
+            </view>
+            <u-cell-group>
+                <u-cell-item :icon-style="iconStyle" :arrow="false" icon="bookmark-fill" title="车牌号:"
+                             :value="detailData.carNo"></u-cell-item>
+                <u-cell-item :icon-style="iconStyle" :arrow="false" icon="map-fill" title="入场车道:"
+                             :value="detailData.enterGateName"></u-cell-item>
+                <u-cell-item :icon-style="iconStyle" :arrow="false" icon="clock-fill" title="入场时间:"
+                             :value="detailData.enterTime"></u-cell-item>
+                <u-cell-item v-if="current==1" :icon-style="iconStyle" :arrow="false" icon="map-fill" title="出口车道:"
+                             :value="detailData.outGateName"></u-cell-item>
+                <u-cell-item v-if="current==1" :icon-style="iconStyle" :arrow="false" icon="clock-fill" title="出场时间:"
+                             :value="detailData.outTime"></u-cell-item>
+                <u-cell-item :icon-style="iconStyle" :border-bottom="false" :arrow="false" icon="rmb-circle-fill"
+                             title="进出费用:"
+                             :value="detailData.totalAmount?'￥'+detailData.totalAmount:'￥0'"></u-cell-item>
+            </u-cell-group>
+        </view>
+    </view>
 </template>
 
 <script>
-export default {
-	name: '',
-	data() {
-		return {
-			id:'',
-			current:0,
-			detailData:{},
-			iconStyle:{
-				color:"#5064eb"
-			},
-		};
-	},
-	onLoad(options) {
-		this.id=options.id
-		this.current=options.current
-		this.fetchDetail()
-	},
-	methods:{
-		fetchDetail(id,current){
-			if (this.current==0) {
-				//入场
-				this.$api.car.enterPage({id:this.id}).then(res=>{
-					this.detailData=res.data.records[0]
-				})
-			}else if (this.current==1) {
-				//出场
-				this.$api.car.outPage({id:this.id}).then(res=>{
-					this.detailData=res.data.records[0]
-				})
-			}
-			
-		},
-	}
-};
+    export default {
+        name: '',
+        data() {
+            return {
+                id: '',
+                current: 0,
+                detailData: {},
+                iconStyle: {
+                    color: "#5064eb"
+                },
+            };
+        },
+        onLoad(options) {
+            this.id = options.id
+            this.current = options.current
+            this.fetchDetail()
+        },
+        methods: {
+            fetchDetail(id, current) {
+                if (this.current == 0) {
+                    //入场
+                    this.$api.car.enterPage({id: this.id}).then(res => {
+                        this.detailData = res.data.records[0]
+                    })
+                } else if (this.current == 1) {
+                    //出场
+                    this.$api.car.outPage({id: this.id}).then(res => {
+                        this.detailData = res.data.records[0]
+                    })
+                }
+
+            },
+        }
+    };
 </script>
 
 <style lang="scss" scoped>
-	
+
 </style>

mini-program/garden-wxapp/pages/index/car/list.vue

@@ -1,101 +1,103 @@
 <template>
-	<view class="container">
-		<view class="tabs" style="width: 420rpx;margin: 0rpx  auto;padding-top: 20rpx;">
-			<scroll-view scroll-x class="nav" >
-				<view class="flex text-center">
-					<view  style="border: 1rpx solid #5064eb;padding:15rpx 20rpx;" class="flex-sub" 
-					:class="index==current?'nav-checked':'nav-unchecked'" 
-					v-for="(item,index) in tabs" :key="index" @tap="tabChange(index)" >
-						{{item.name}}
-					</view>
-				</view>
-			</scroll-view>
-		</view>
-		<view style="height: 100%;margin-top: 20rpx;">
-			<swiper style="height: 100%;" :current="current"  @change="swiperChange"
-				@animationfinish="animationfinish">
-				<swiper-item v-for="(item,index) in tabs" :key="index">
-					<scroll-view scroll-y style="height: 100%;">
-						<item :params="params" :i="index" :item="item" :type="current"></item>
-					</scroll-view>
-				</swiper-item>
-			</swiper>
-		</view>
-	</view>
+    <view class="container">
+        <view class="tabs" style="width: 420rpx;margin: 0rpx  auto;padding-top: 20rpx;">
+            <scroll-view scroll-x class="nav">
+                <view class="flex text-center">
+                    <view style="border: 1rpx solid #5064eb;padding:15rpx 20rpx;" class="flex-sub"
+                          :class="index==current?'nav-checked':'nav-unchecked'"
+                          v-for="(item,index) in tabs" :key="index" @tap="tabChange(index)">
+                        {{item.name}}
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+        <view style="height: 100%;margin-top: 20rpx;">
+            <swiper style="height: 100%;" :current="current" @change="swiperChange"
+                    @animationfinish="animationfinish">
+                <swiper-item v-for="(item,index) in tabs" :key="index">
+                    <scroll-view scroll-y style="height: 100%;">
+                        <item :params="params" :i="index" :item="item" :type="current"></item>
+                    </scroll-view>
+                </swiper-item>
+            </swiper>
+        </view>
+    </view>
 </template>
 <script>
-	import item from "./comps/item.vue"
-	export default {
-		components: {
-			item
-		},
-		data() {
-			return {
-				params:{
-					carNo:''
-				},
-				
-				scrollLeft:0,
-				current: 0,
-				swiperCurrent:0,
-				tabs: [
-					{
-						name: '入场记录',
-						value:1
-					},
-					{
-						name: '出场记录',
-						value:2
-					}
-				],
-			}
-		},
-		onLoad(options) {
-			this.params.carNo=options.carNo || ''
-		},
-		methods:{
-			tabChange(index) {
-				this.current = index
-			},
-			swiperChange(e) {
-			  uni.pageScrollTo({
-			      scrollTop: 0,
-			      duration: 0
-			  });
-			  this.current = e.detail.current
-			},
-			animationfinish({detail: { current }}) {
-				this.swiperCurrent = current;
-				this.current = current;
-			},
-		}
-	}
+    import item from "./comps/item.vue"
+
+    export default {
+        components: {
+            item
+        },
+        data() {
+            return {
+                params: {
+                    carNo: ''
+                },
+
+                scrollLeft: 0,
+                current: 0,
+                swiperCurrent: 0,
+                tabs: [
+                    {
+                        name: '入场记录',
+                        value: 1
+                    },
+                    {
+                        name: '出场记录',
+                        value: 2
+                    }
+                ],
+            }
+        },
+        onLoad(options) {
+            this.params.carNo = options.carNo || ''
+        },
+        methods: {
+            tabChange(index) {
+                this.current = index
+            },
+            swiperChange(e) {
+                uni.pageScrollTo({
+                    scrollTop: 0,
+                    duration: 0
+                });
+                this.current = e.detail.current
+            },
+            animationfinish({detail: {current}}) {
+                this.swiperCurrent = current;
+                this.current = current;
+            },
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	.container {
-		  height: calc(100vh);
-		  background-color: #F6F6F6;
-		  padding: 100rpx 0rpx 0rpx;
-		 .tabs {
-			 height: 100rpx;
-		    position: fixed;
-		    top: 0rpx;
-			left: 0;
-			right: 0;
-			width: 100%;
-			z-index: 3;
-		  }
-	}
-	
-	.nav-checked{
-		background-color: $base-color;
-		color: #FFFFFF;
-		font-weight: 800;
-	}
-	
-	.nav-unchecked{
-		background-color: #FFFFFF;
-		color: $base-color;
-	}
+    .container {
+        height: calc(100vh);
+        background-color: #F6F6F6;
+        padding: 100 rpx 0 rpx 0 rpx;
+
+        .tabs {
+            height: 100 rpx;
+            position: fixed;
+            top: 0 rpx;
+            left: 0;
+            right: 0;
+            width: 100%;
+            z-index: 3;
+        }
+    }
+
+    .nav-checked {
+        background-color: $base-color;
+        color: #FFFFFF;
+        font-weight: 800;
+    }
+
+    .nav-unchecked {
+        background-color: #FFFFFF;
+        color: $base-color;
+    }
 </style>

mini-program/garden-wxapp/pages/index/car/my-car/add.vue

@@ -1,363 +1,375 @@
 <template>
-	<view>
-		<view class="form">
-			<view class="flex">
-				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../../../static/icon/tag1.png" mode=""></image>
-				<text class="text-lg text-bold">请选择基本信息</text>
-			</view>
-			<view class="card">
-				<u-form :model="model"  ref="uForm" >
-					<u-form-item :required="true"  :label-width="labelWidth"   label="车牌号码" >
-						<u-input  type="text"  v-model="model.number" disabled @click="openKeyBoard"  placeholder="请填写车牌号码" ></u-input>
-					</u-form-item>
-					<u-form-item :required="true"  :label-width="labelWidth"   label="车辆类型" >
-						<u-input  type="select" :select-open="carTypeShow" v-model="carTypeLabel"  placeholder="请选择车辆类型" @click="carTypeShow=true"></u-input>
-					</u-form-item>
-					<u-form-item :required="true"  :label-width="labelWidth"   label="车辆性质" >
-						<u-input  type="select" :select-open="carPropertiesShow" v-model="carPropertiesLabel" placeholder="请选择车辆性质" @click="carPropertiesShow=true"></u-input>
-					</u-form-item>
-					<u-form-item :required="true"  :label-width="labelWidth"   label="燃油类别" >
-						<u-input  type="select" :select-open="fuelCategoryShow" v-model="fuelCategoryLabel" placeholder="请选择燃油类别" @click="fuelCategoryShow=true"></u-input>
-					</u-form-item>
-				</u-form>
-			</view>
-		</view>
-		<view class="form">
-			<view class="flex">
-				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../../../static/icon/tag1.png" mode=""></image>
-				<text class="text-lg text-bold">请上传车辆照片</text>
-			</view>
-			<view class="card">
-				<view style="padding: 20rpx 0;" @click="chooseImage(1)"  class="flex justify-center ">
-					<view class=" ">
-						<upload-img
-						   :width="width"
-						   :height="height"
-						  :currentImage="model.carImg"
-						  bgsrc="https://park.nxzhsq.cn/park/miniofile/xlyq/upload.png"
-						  >
-						</upload-img>
-						<view class="text-center  padding-top-20 base-color" >
-						 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
-						 <text v-if="$isEmpty(model.carImg)">点击上传车辆照片</text>
-						 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="form">
-			<view class="flex">
-				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../../../static/icon/tag1.png" mode=""></image>
-				<text class="text-lg text-bold">请上传行驶证正面</text>
-			</view>
-			<view class="card">
-				<view style="padding: 20rpx 0;" @click="chooseImage(2)"  class="flex justify-center ">
-					<view class=" ">
-						<upload-img
-						   :width="width"
-						   :height="height"
-						  :currentImage="model.vehicleDrivingLicense1"
-						  bgsrc="https://park.nxzhsq.cn/park/miniofile/xlyq/zm.png"
-						  >
-						</upload-img>
-						<view class="text-center  padding-top-20 base-color" >
-						 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
-						 <text v-if="$isEmpty(model.carImg)">点击上传行驶证正面</text>
-						 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="form">
-			<view class="flex">
-				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../../../static/icon/tag1.png" mode=""></image>
-				<text class="text-lg text-bold">请上传行驶证反面</text>
-			</view>
-			<view class="card">
-				<view style="padding: 20rpx 0;" @click="chooseImage(3)"  class="flex justify-center ">
-					<view class=" ">
-						<upload-img
-						   :width="width"
-						   :height="height"
-						  :currentImage="model.vehicleDrivingLicense2"
-						  bgsrc="https://park.nxzhsq.cn/park/miniofile/xlyq/fm.png"
-						  >
-						</upload-img>
-						<view class="text-center  padding-top-20 base-color" >
-						 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
-						 <text v-if="$isEmpty(model.carImg)">点击上传行驶证反面</text>
-						 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		
-		<view >
-			<view class="bg-white" style="height: 80rpx;"></view>
-			<view class="" @click="submit" style="width: 90%;margin: 0 auto ;margin-bottom: 10%;">
-				<view  class="cu-btn round base-bg-color" style="padding: 40rpx;width: 100%;" >
-					<text class="cuIcon-add"></text>
-					<text v-text="model.id?'重新审核':'确认添加'"></text>
-				</view>
-			</view>
-		</view>
-		<u-select @confirm="carTypeConfirm" v-model="carTypeShow" :list="carTypeList"></u-select>
-		<u-select @confirm="carPropertiesConfirm" v-model="carPropertiesShow" :list="carPropertiesList"></u-select>
-		<u-select @confirm="fuelCategoryConfirm" v-model="fuelCategoryShow" :list="fuelCategoryList"></u-select>
-		<keyboard-package z-index="999" ref="plateNumber" type="plateNumber"  @onInput="onInput" @onDelete="onDelete" @onConfirm="onConfirm"/>
-	</view>
+    <view>
+        <view class="form">
+            <view class="flex">
+                <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                       src="../../../../static/icon/tag1.png" mode=""></image>
+                <text class="text-lg text-bold">请选择基本信息</text>
+            </view>
+            <view class="card">
+                <u-form :model="model" ref="uForm">
+                    <u-form-item :required="true" :label-width="labelWidth" label="车牌号码">
+                        <u-input type="text" v-model="model.number" disabled @click="openKeyBoard"
+                                 placeholder="请填写车牌号码"></u-input>
+                    </u-form-item>
+                    <u-form-item :required="true" :label-width="labelWidth" label="车辆类型">
+                        <u-input type="select" :select-open="carTypeShow" v-model="carTypeLabel" placeholder="请选择车辆类型"
+                                 @click="carTypeShow=true"></u-input>
+                    </u-form-item>
+                    <u-form-item :required="true" :label-width="labelWidth" label="车辆性质">
+                        <u-input type="select" :select-open="carPropertiesShow" v-model="carPropertiesLabel"
+                                 placeholder="请选择车辆性质" @click="carPropertiesShow=true"></u-input>
+                    </u-form-item>
+                    <u-form-item :required="true" :label-width="labelWidth" label="燃油类别">
+                        <u-input type="select" :select-open="fuelCategoryShow" v-model="fuelCategoryLabel"
+                                 placeholder="请选择燃油类别" @click="fuelCategoryShow=true"></u-input>
+                    </u-form-item>
+                </u-form>
+            </view>
+        </view>
+        <view class="form">
+            <view class="flex">
+                <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                       src="../../../../static/icon/tag1.png" mode=""></image>
+                <text class="text-lg text-bold">请上传车辆照片</text>
+            </view>
+            <view class="card">
+                <view style="padding: 20rpx 0;" @click="chooseImage(1)" class="flex justify-center ">
+                    <view class=" ">
+                        <upload-img
+                                :width="width"
+                                :height="height"
+                                :currentImage="model.carImg"
+                                bgsrc="https://park.nxzhsq.cn/park/miniofile/xlyq/upload.png"
+                        >
+                        </upload-img>
+                        <view class="text-center  padding-top-20 base-color">
+                            <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
+                            <text v-if="$isEmpty(model.carImg)">点击上传车辆照片</text>
+                            <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="form">
+            <view class="flex">
+                <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                       src="../../../../static/icon/tag1.png" mode=""></image>
+                <text class="text-lg text-bold">请上传行驶证正面</text>
+            </view>
+            <view class="card">
+                <view style="padding: 20rpx 0;" @click="chooseImage(2)" class="flex justify-center ">
+                    <view class=" ">
+                        <upload-img
+                                :width="width"
+                                :height="height"
+                                :currentImage="model.vehicleDrivingLicense1"
+                                bgsrc="https://park.nxzhsq.cn/park/miniofile/xlyq/zm.png"
+                        >
+                        </upload-img>
+                        <view class="text-center  padding-top-20 base-color">
+                            <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
+                            <text v-if="$isEmpty(model.carImg)">点击上传行驶证正面</text>
+                            <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="form">
+            <view class="flex">
+                <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                       src="../../../../static/icon/tag1.png" mode=""></image>
+                <text class="text-lg text-bold">请上传行驶证反面</text>
+            </view>
+            <view class="card">
+                <view style="padding: 20rpx 0;" @click="chooseImage(3)" class="flex justify-center ">
+                    <view class=" ">
+                        <upload-img
+                                :width="width"
+                                :height="height"
+                                :currentImage="model.vehicleDrivingLicense2"
+                                bgsrc="https://park.nxzhsq.cn/park/miniofile/xlyq/fm.png"
+                        >
+                        </upload-img>
+                        <view class="text-center  padding-top-20 base-color">
+                            <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
+                            <text v-if="$isEmpty(model.carImg)">点击上传行驶证反面</text>
+                            <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <view>
+            <view class="bg-white" style="height: 80rpx;"></view>
+            <view class="" @click="submit" style="width: 90%;margin: 0 auto ;margin-bottom: 10%;">
+                <view class="cu-btn round base-bg-color" style="padding: 40rpx;width: 100%;">
+                    <text class="cuIcon-add"></text>
+                    <text v-text="model.id?'重新审核':'确认添加'"></text>
+                </view>
+            </view>
+        </view>
+        <u-select @confirm="carTypeConfirm" v-model="carTypeShow" :list="carTypeList"></u-select>
+        <u-select @confirm="carPropertiesConfirm" v-model="carPropertiesShow" :list="carPropertiesList"></u-select>
+        <u-select @confirm="fuelCategoryConfirm" v-model="fuelCategoryShow" :list="fuelCategoryList"></u-select>
+        <keyboard-package z-index="999" ref="plateNumber" type="plateNumber" @onInput="onInput" @onDelete="onDelete"
+                          @onConfirm="onConfirm"/>
+    </view>
 </template>
 
 <script>
-	import keyboardPackage from "@/components/keyboard-package/keyboard-package.vue"
-	import uploadImg from '@/components/uploadimg/uploadImg.vue'
-	var that;
-	export default {
-		components:{
-			uploadImg,keyboardPackage
-		},
-		data() {
-			return {
-				labelWidth:'200',
-				width:480,
-				height:320,
-				
-				//员工id
-				userId:'',
-				//园区id
-				agencyId:'',
-				
-				//车牌号
-				carNoInputList:[],
-				
-				//车辆类型
-				carTypeList:[],
-				carTypeShow:false,
-				carTypeLabel:'',
-				
-				//车辆性质
-				carPropertiesList:[],
-				carPropertiesShow:false,
-				carPropertiesLabel:'',
-				
-				//燃油类别
-				fuelCategoryList:[],
-				fuelCategoryShow:false,
-				fuelCategoryLabel:'',
-				
-				model:{
-					type:'',//车辆类型的key
-					number:'',//车牌号
-					properties:'',//车辆性质的key,
-					fuelCategory:'',//燃油类别的key
-					carImg:'',//车辆照片
-					vehicleDrivingLicense1:'',//行驶证正面
-					vehicleDrivingLicense2:'',//行驶证反面
-				},
-			}
-		},
-		onLoad(options ) {
-			that=this
-			
-			let loginType=this.$cache.get('loginType')
-			this.userId=this.$cache.get('userId')
-			this.agencyId=this.$cache.get('agencyId')
-			if (loginType!=this.$loginType.STAFF||
-				this.$isEmpty(this.userId)||
-				this.$isEmpty(this.agencyId)) {
-				this.$dialog.showModal('系统异常',false).then(res=>{
-					this.$navigateBack()
-				})
-			}
-			//获取字典
-			this.getDict()
-			this.parseParams(options)
-			
-		},
-		computed:{
-			plateNumberStr(){
-				let str='';
-				this.carNoInputList.forEach(item=>{
-					str+=item.toString();
-				})
-				this.model.number=str
-				return str;
-			}
-		},
-		methods: {
-			parseParams(options){
-				if (this.$isEmpty(options)) {
-					return
-				}
-				this.model=options
-				this.carNoInputList=options.number.split('')
-				this.carTypeList.forEach(item=>{
-					if (item.value==options.type) {
-						this.carTypeLabel=item.label
-					}
-				})
-				this.carPropertiesList.forEach(item=>{
-					if (item.value==options.properties) {
-						this.carPropertiesLabel=item.label
-					}
-				})
-				this.fuelCategoryList.forEach(item=>{
-					if (item.value==options.fuelCategory) {
-						this.fuelCategoryLabel=item.label
-					}
-				})
-				
-			},
-			submit(){
-				if (this.$isEmpty(this.model.number)) {
-					this.$u.toast('请填写车牌号')
-					return
-				}
-				if (this.$isEmpty(this.model.type)) {
-					this.$u.toast('请选择车辆类型')
-					return
-				}
-				if (this.$isEmpty(this.model.properties)) {
-					this.$u.toast('请选择车辆性质')
-					return
-				}
-				if (this.$isEmpty(this.model.fuelCategory)) {
-					this.$u.toast('请选择燃油类型')
-					return
-				}
-				if (this.$isEmpty(this.model.carImg)) {
-					this.$u.toast('请上传车辆照片')
-					return
-				}
-				if (this.$isEmpty(this.model.vehicleDrivingLicense1)) {
-					this.$u.toast('请上传行驶证正面')
-					return
-				}
-				if (this.$isEmpty(this.model.vehicleDrivingLicense2)) {
-					this.$u.toast('请上传行驶证反面')
-					return
-				}
-				this.model.personId=this.userId
-				this.model.agencyId=this.agencyId
-				this.$api.car.carAdd(this.model).then(res=>{
-					if (res.success==true) {
-						this.$dialog.showModal('操作成功！',false).then(res=>{
-							this.$util.isReloadAndBack()
-						})
-					}else{
-						this.$dialog.showModal(res.msg,false)
-					}
-				})
-			},
-			getDict(){
-				let dict=this.$cache.get('dict')
-				if (dict) {
-					//缓存中有字典值
-					this.carTypeList=dict.carTypeList
-					this.carPropertiesList=dict.carPropertiesList
-					this.fuelCategoryList=dict.fuelCategoryList
-					return
-				}
-				//车辆类型
-				this.$api.dict({code:'car_type'}).then(res=>{
-					res.data.forEach((item)=>{
-						let tmp={
-							value:item.dictKey,
-							label:item.dictValue
-						}
-						this.carTypeList.push(tmp)
-					})
-				})
-				//车辆性质
-				this.$api.dict({code:'car_properties'}).then(res=>{
-					res.data.forEach((item)=>{
-						let tmp={
-							value:item.dictKey,
-							label:item.dictValue
-						}
-						this.carPropertiesList.push(tmp)
-					})
-				})
-				//燃油类别
-				this.$api.dict({code:'fuel_category'}).then(res=>{
-					res.data.forEach((item)=>{
-						let tmp={
-							value:item.dictKey,
-							label:item.dictValue
-						}
-						this.fuelCategoryList.push(tmp)
-					})
-				})
-			},
-			carTypeConfirm(e){
-				this.model.type=e[0].value
-				this.carTypeLabel=e[0].label
-			},
-			carPropertiesConfirm(e){
-				this.model.properties=e[0].value
-				this.carPropertiesLabel=e[0].label
-			},
-			fuelCategoryConfirm(e){
-				this.model.fuelCategory=e[0].value
-				this.fuelCategoryLabel=e[0].label
-			},
-			//上传图片
-			chooseImage(type) {
-			  this.$mpi.chooseImage().then(res=>{
-				  this.$api.uploadFile.submit(res[0]).then(res=>{
-				  	if (type==1) {
-				  		//车辆照片
-				  		that.model.carImg=res.data
-				  	}else if (type==2) {
-				  		that.model.vehicleDrivingLicense1=res.data//行驶证正面
-				  	}else if (type==3) {
-				  		that.model.vehicleDrivingLicense2=res.data//行驶证反面
-				  	}
-				  })
-			  })
-			},
-			//车牌号键盘
-			onInput(val){
-				console.log(val);
-				this.carNoInputList.push(val)
-			},
-			onDelete(){
-				this.carNoInputList.pop();
-			},
-			onConfirm(){
-				this.model.number=this.plateNumberStr
-				console.log(this.model.number);
-			},
-			openKeyBoard() {
-				this.$refs.plateNumber.open();
-			},
-		}
-	}
+    import keyboardPackage from "@/components/keyboard-package/keyboard-package.vue"
+    import uploadImg from '@/components/uploadimg/uploadImg.vue'
+
+    var that;
+    export default {
+        components: {
+            uploadImg, keyboardPackage
+        },
+        data() {
+            return {
+                labelWidth: '200',
+                width: 480,
+                height: 320,
+
+                //员工id
+                userId: '',
+                //园区id
+                agencyId: '',
+
+                //车牌号
+                carNoInputList: [],
+
+                //车辆类型
+                carTypeList: [],
+                carTypeShow: false,
+                carTypeLabel: '',
+
+                //车辆性质
+                carPropertiesList: [],
+                carPropertiesShow: false,
+                carPropertiesLabel: '',
+
+                //燃油类别
+                fuelCategoryList: [],
+                fuelCategoryShow: false,
+                fuelCategoryLabel: '',
+
+                model: {
+                    type: '',//车辆类型的key
+                    number: '',//车牌号
+                    properties: '',//车辆性质的key,
+                    fuelCategory: '',//燃油类别的key
+                    carImg: '',//车辆照片
+                    vehicleDrivingLicense1: '',//行驶证正面
+                    vehicleDrivingLicense2: '',//行驶证反面
+                },
+            }
+        },
+        onLoad(options) {
+            that = this
+
+            let loginType = this.$cache.get('loginType')
+            this.userId = this.$cache.get('userId')
+            this.agencyId = this.$cache.get('agencyId')
+            if (loginType != this.$loginType.STAFF ||
+                this.$isEmpty(this.userId) ||
+                this.$isEmpty(this.agencyId)) {
+                this.$dialog.showModal('系统异常', false).then(res => {
+                    this.$navigateBack()
+                })
+            }
+            //获取字典
+            this.getDict()
+            this.parseParams(options)
+
+        },
+        computed: {
+            plateNumberStr() {
+                let str = '';
+                this.carNoInputList.forEach(item => {
+                    str += item.toString();
+                })
+                this.model.number = str
+                return str;
+            }
+        },
+        methods: {
+            parseParams(options) {
+                if (this.$isEmpty(options)) {
+                    return
+                }
+                this.model = options
+                this.carNoInputList = options.number.split('')
+                this.carTypeList.forEach(item => {
+                    if (item.value == options.type) {
+                        this.carTypeLabel = item.label
+                    }
+                })
+                this.carPropertiesList.forEach(item => {
+                    if (item.value == options.properties) {
+                        this.carPropertiesLabel = item.label
+                    }
+                })
+                this.fuelCategoryList.forEach(item => {
+                    if (item.value == options.fuelCategory) {
+                        this.fuelCategoryLabel = item.label
+                    }
+                })
+
+            },
+            submit() {
+                if (this.$isEmpty(this.model.number)) {
+                    this.$u.toast('请填写车牌号')
+                    return
+                }
+                if (this.$isEmpty(this.model.type)) {
+                    this.$u.toast('请选择车辆类型')
+                    return
+                }
+                if (this.$isEmpty(this.model.properties)) {
+                    this.$u.toast('请选择车辆性质')
+                    return
+                }
+                if (this.$isEmpty(this.model.fuelCategory)) {
+                    this.$u.toast('请选择燃油类型')
+                    return
+                }
+                if (this.$isEmpty(this.model.carImg)) {
+                    this.$u.toast('请上传车辆照片')
+                    return
+                }
+                if (this.$isEmpty(this.model.vehicleDrivingLicense1)) {
+                    this.$u.toast('请上传行驶证正面')
+                    return
+                }
+                if (this.$isEmpty(this.model.vehicleDrivingLicense2)) {
+                    this.$u.toast('请上传行驶证反面')
+                    return
+                }
+                this.model.personId = this.userId
+                this.model.agencyId = this.agencyId
+                this.$api.car.carAdd(this.model).then(res => {
+                    if (res.success == true) {
+                        this.$dialog.showModal('操作成功！', false).then(res => {
+                            this.$util.isReloadAndBack()
+                        })
+                    } else {
+                        this.$dialog.showModal(res.msg, false)
+                    }
+                })
+            },
+            getDict() {
+                let dict = this.$cache.get('dict')
+                if (dict) {
+                    //缓存中有字典值
+                    this.carTypeList = dict.carTypeList
+                    this.carPropertiesList = dict.carPropertiesList
+                    this.fuelCategoryList = dict.fuelCategoryList
+                    return
+                }
+                //车辆类型
+                this.$api.dict({code: 'car_type'}).then(res => {
+                    res.data.forEach((item) => {
+                        let tmp = {
+                            value: item.dictKey,
+                            label: item.dictValue
+                        }
+                        this.carTypeList.push(tmp)
+                    })
+                })
+                //车辆性质
+                this.$api.dict({code: 'car_properties'}).then(res => {
+                    res.data.forEach((item) => {
+                        let tmp = {
+                            value: item.dictKey,
+                            label: item.dictValue
+                        }
+                        this.carPropertiesList.push(tmp)
+                    })
+                })
+                //燃油类别
+                this.$api.dict({code: 'fuel_category'}).then(res => {
+                    res.data.forEach((item) => {
+                        let tmp = {
+                            value: item.dictKey,
+                            label: item.dictValue
+                        }
+                        this.fuelCategoryList.push(tmp)
+                    })
+                })
+            },
+            carTypeConfirm(e) {
+                this.model.type = e[0].value
+                this.carTypeLabel = e[0].label
+            },
+            carPropertiesConfirm(e) {
+                this.model.properties = e[0].value
+                this.carPropertiesLabel = e[0].label
+            },
+            fuelCategoryConfirm(e) {
+                this.model.fuelCategory = e[0].value
+                this.fuelCategoryLabel = e[0].label
+            },
+            //上传图片
+            chooseImage(type) {
+                this.$mpi.chooseImage().then(res => {
+                    this.$api.uploadFile.submit(res[0]).then(res => {
+                        if (type == 1) {
+                            //车辆照片
+                            that.model.carImg = res.data
+                        } else if (type == 2) {
+                            that.model.vehicleDrivingLicense1 = res.data//行驶证正面
+                        } else if (type == 3) {
+                            that.model.vehicleDrivingLicense2 = res.data//行驶证反面
+                        }
+                    })
+                })
+            },
+            //车牌号键盘
+            onInput(val) {
+                console.log(val);
+                this.carNoInputList.push(val)
+            },
+            onDelete() {
+                this.carNoInputList.pop();
+            },
+            onConfirm() {
+                this.model.number = this.plateNumberStr
+                console.log(this.model.number);
+            },
+            openKeyBoard() {
+                this.$refs.plateNumber.open();
+            },
+        }
+    }
 </script>
 
 <style>
-	page{
-		background-color: #FFFFFF;
-	}
+    page {
+        background-color: #FFFFFF;
+    }
 </style>
 
 <style lang="scss" scoped>
-	.form{
-		padding: 40rpx 30rpx;
-		.card{
-			margin-top: 20rpx;
-			padding: 0 30rpx;
-			box-sizing: border-box;
-			border-radius: 12rpx;
-			box-shadow: 0 -10rpx rgba(248, 248, 248,.9) ,0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
-			.item{
-				padding:30rpx 0;
-				display: flex;
-				justify-content: space-between;
-			}
-		}
-	}
+    .form {
+        padding: 40 rpx 30 rpx;
+
+        .card {
+            margin-top: 20 rpx;
+            padding: 0 30 rpx;
+            box-sizing: border-box;
+            border-radius: 12 rpx;
+            box-shadow: 0 -10rpx rgba(248, 248, 248, .9), 0 10 rpx rgba(248, 248, 248, .9), -10rpx 0 rpx rgba(248, 248, 248, .9), 10 rpx 0 rpx rgba(248, 248, 248, .9);
+
+            .item {
+                padding: 30 rpx 0;
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/index/car/my-car/my-car.vue

@@ -1,82 +1,84 @@
 <template>
-	<view>
-		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
-			<myCarCard @delItem="delItem" :list="list"></myCarCard>
-		</mescroll-body>
-		<wm-list-add  ref="add" @clickAdd="add"/>
-	</view>
+    <view>
+        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
+                       :up="upOption">
+            <myCarCard @delItem="delItem" :list="list"></myCarCard>
+        </mescroll-body>
+        <wm-list-add ref="add" @clickAdd="add"/>
+    </view>
 </template>
 
 <script>
-	import wmListAdd from '@/components/wm-list-add/wm-list-add';
-	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
-	import myCarCard from "../comps/my-car-card.vue"
-	var that;
-	export default {
-		mixins: [MescrollMixin], // 使用mixin
-		components:{
-			myCarCard,wmListAdd
-		},
-		data() {
-			return {
-				personId:'',
-				list:[]
-			}
-		},
-		onLoad() {
-			that=this
-			this.personId=this.$cache.get('userId')
-		},
-		onShow() {
-			//刷新mescroll数据
-			this.$util.reload(this.mescroll)
-		},
-		methods: {
-			add(){
-				uni.navigateTo({
-					url:"/pages/index/car/my-car/add"
-				})
-			},
-			delItem(item){
-				this.$dialog.showModal('确认要删除此记录吗？').then(res=>{
-					this.$api.car.carRemove(item.id).then(res=>{
-						if (res.success==true) {
-							this.$u.toast('操作成功')
-							this.mescroll.resetUpScroll();
-						}else{
-							this.$dialog.showModal(res.msg,false)
-						}
-					})
-				})
-			},
-			downCallback(){
-				setTimeout(()=>{
-					this.mescroll.resetUpScroll();
-				},1200)
-			},
-			upCallback(mescroll){
-				let params={
-					current:mescroll.num,
-					size:mescroll.size,
-					selectType:3,//员工，我的车辆
-					personId:this.personId
-				}
-				try{
-					this.$api.car.carList(params).then(res=>{
-						let data=res.data.records
-						let total=res.data.total
-						mescroll.endBySize(data.length,total);
-						if(mescroll.num == 1) that.list = []; //如果是第一页需手动制空列表
-						that.list=that.list.concat(data); //追加新数据
-					})
-				}catch(e){
-					this.mescroll.endErr()
-				}
-			}
-		}
-	}
+    import wmListAdd from '@/components/wm-list-add/wm-list-add';
+    import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
+    import myCarCard from "../comps/my-car-card.vue"
+
+    var that;
+    export default {
+        mixins: [MescrollMixin], // 使用mixin
+        components: {
+            myCarCard, wmListAdd
+        },
+        data() {
+            return {
+                personId: '',
+                list: []
+            }
+        },
+        onLoad() {
+            that = this
+            this.personId = this.$cache.get('userId')
+        },
+        onShow() {
+            //刷新mescroll数据
+            this.$util.reload(this.mescroll)
+        },
+        methods: {
+            add() {
+                uni.navigateTo({
+                    url: "/pages/index/car/my-car/add"
+                })
+            },
+            delItem(item) {
+                this.$dialog.showModal('确认要删除此记录吗？').then(res => {
+                    this.$api.car.carRemove(item.id).then(res => {
+                        if (res.success == true) {
+                            this.$u.toast('操作成功')
+                            this.mescroll.resetUpScroll();
+                        } else {
+                            this.$dialog.showModal(res.msg, false)
+                        }
+                    })
+                })
+            },
+            downCallback() {
+                setTimeout(() => {
+                    this.mescroll.resetUpScroll();
+                }, 1200)
+            },
+            upCallback(mescroll) {
+                let params = {
+                    current: mescroll.num,
+                    size: mescroll.size,
+                    selectType: 3,//员工，我的车辆
+                    personId: this.personId
+                }
+                try {
+                    this.$api.car.carList(params).then(res => {
+                        let data = res.data.records
+                        let total = res.data.total
+                        mescroll.endBySize(data.length, total);
+                        if (mescroll.num == 1) that.list = []; //如果是第一页需手动制空列表
+                        that.list = that.list.concat(data); //追加新数据
+                    })
+                } catch (e) {
+                    this.mescroll.endErr()
+                }
+            }
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	
+
 </style>

mini-program/garden-wxapp/pages/index/fire/alarm-record.vue

@@ -1,257 +1,267 @@
 <template>
-	<view  :class="$isEmpty(list)?'bg-white':'container'">
-		<u-calendar v-model="dateShow" mode="date" @change="change"></u-calendar>
-		<view  class="top bg-white " style="position: fixed;top: 0;z-index: 999;width: 100%;">
-			<view class="flex justify-between">
-				<view class="flex">
-					<view class="flex justify-center align-center">
-						<image v-if="fireType==0" style="width: 80rpx;height: 80rpx;" src="../../../static/icon/yangan.png"></image>
-						<image v-if="fireType==1" style="width: 80rpx;height: 80rpx;" src="../../../static/icon/ranqi.png"></image>
-						<image v-if="fireType==2" style="width: 80rpx;height: 80rpx;" src="../../../static/icon/xiaofang.png"></image>
-						<image v-if="fireType==3" style="width: 80rpx;height: 80rpx;" src="../../../static/icon/dianbiao.png"></image>
-					</view>
-					<view class="padding-left-40">
-						<view >
-							<text class="text-bold">设备类型：</text>
-							<text v-if="fireType==0">烟感报警器</text>
-							<text v-if="fireType==1">燃气报警器</text>
-							<text v-if="fireType==2">消防栓</text>
-							<text v-if="fireType==3">电表设备</text>
-						</view>
-						<view class="padding-top-10">
-							<text class="text-bold" v-text="fireType==3?'抄表记录：':'告警记录：'"></text>
-							<text class="text-red padding-right-10 text-bold text-lg">{{total?total:0}}</text>条
-						</view>
-					</view>
-				</view>
-				<view @click="dateShow=true" class="flex base-color flex-direction justify-center align-center">
-					<view class="padding-bottom-20 text-bold">
-						<text class="cuIcon-filter padding-right-20"></text>
-						<text class="">筛选</text>
-					</view>
-					<u-tag :text="filterDate" @close="tagClick" :show="!$isEmpty(filterDate)"  size="mini" :closeable="true" mode="plain" type="error"/>
-				</view>
-			</view>
-		</view>
-		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
-			<view v-if="!$isEmpty(list)"  class="history">
-				<u-time-line>
-					<u-time-line-item nodeTop="2" v-for="(item,index) in list" :key="index">
-						<template v-slot:node>
-							<view class="u-node bg-white" >
-								<u-icon name="clock-fill" color="#5064eb" :size="28"></u-icon>
-							</view>
-						</template>
-						<template v-slot:content>
-							<view v-if="fireType==3">
-								<view class="u-order-title">抄表时间：{{item.readTime}}</view>
-								<view class="content" style="width: 636rpx;">
-									<view class="nav-title">
-										<text class="">设备厂家：</text>
-										<text >{{item.deviceFactory}}</text>
-									</view>
-									<view class="nav-title">
-										<text class="">安装位置：</text>
-										<text v-text="item.installAddress"></text>
-									</view>
-									<view class="nav-title">
-										<text class="">年用量：</text>
-										<text>{{item.yearValue}} Kwh</text>
-									</view>
-									<view class="nav-title">
-										<text class="">月用量：</text>
-										<text>{{item.monthValue}} Kwh</text>
-									</view>
-									<view class="nav-title">
-										<text class="">日用量：</text>
-										<text>{{item.dayValue}} Kwh</text>
-									</view>
-									<view class="nav-title">
-										<text class="">总用量：</text>
-										<text>{{item.totalValue}} Kwh</text>
-									</view>
-								</view>
-							</view>
-							<view v-else>
-								<view class="u-order-title">{{item.recordTime}}</view>
-								<view class="content" style="width: 636rpx;">
-									<view >
-										<text >告警等级：</text>
-										<text v-if="item.level==1" class="text-red">严重告警</text>
-										<text v-else-if="item.level==2" class="text-orange">警告告警</text>
-										<text v-else >提示告警</text>
-									</view>
-									<view class="nav-title">
-										<text class="">告警类型：</text>
-										<text v-text="item.alarmType==0?'业务报警':'设备报警'"></text>
-									</view>
-									<view class="nav-title">
-										<text class="">设备名称：</text>
-										<text>{{item.deviceName}}</text>
-									</view>
-									<view class="nav-title">
-										<text class="">告警原因：</text>
-										<text>{{item.name}}</text>
-									</view>
-									<view v-if="item.monitorValue" class="nav-title">
-										<text class="">监测值：</text>
-										<text class="text-red text-bold">{{item.monitorValue}}</text>
-									</view>
-								</view>
-							</view>
-						</template>
-					</u-time-line-item>
-				</u-time-line>
-			</view>
-		</mescroll-body>
-	</view>
+    <view :class="$isEmpty(list)?'bg-white':'container'">
+        <u-calendar v-model="dateShow" mode="date" @change="change"></u-calendar>
+        <view class="top bg-white " style="position: fixed;top: 0;z-index: 999;width: 100%;">
+            <view class="flex justify-between">
+                <view class="flex">
+                    <view class="flex justify-center align-center">
+                        <image v-if="fireType==0" style="width: 80rpx;height: 80rpx;"
+                               src="../../../static/icon/yangan.png"></image>
+                        <image v-if="fireType==1" style="width: 80rpx;height: 80rpx;"
+                               src="../../../static/icon/ranqi.png"></image>
+                        <image v-if="fireType==2" style="width: 80rpx;height: 80rpx;"
+                               src="../../../static/icon/xiaofang.png"></image>
+                        <image v-if="fireType==3" style="width: 80rpx;height: 80rpx;"
+                               src="../../../static/icon/dianbiao.png"></image>
+                    </view>
+                    <view class="padding-left-40">
+                        <view>
+                            <text class="text-bold">设备类型：</text>
+                            <text v-if="fireType==0">烟感报警器</text>
+                            <text v-if="fireType==1">燃气报警器</text>
+                            <text v-if="fireType==2">消防栓</text>
+                            <text v-if="fireType==3">电表设备</text>
+                        </view>
+                        <view class="padding-top-10">
+                            <text class="text-bold" v-text="fireType==3?'抄表记录：':'告警记录：'"></text>
+                            <text class="text-red padding-right-10 text-bold text-lg">{{total?total:0}}</text>
+                            条
+                        </view>
+                    </view>
+                </view>
+                <view @click="dateShow=true" class="flex base-color flex-direction justify-center align-center">
+                    <view class="padding-bottom-20 text-bold">
+                        <text class="cuIcon-filter padding-right-20"></text>
+                        <text class="">筛选</text>
+                    </view>
+                    <u-tag :text="filterDate" @close="tagClick" :show="!$isEmpty(filterDate)" size="mini"
+                           :closeable="true" mode="plain" type="error"/>
+                </view>
+            </view>
+        </view>
+        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
+                       :up="upOption">
+            <view v-if="!$isEmpty(list)" class="history">
+                <u-time-line>
+                    <u-time-line-item nodeTop="2" v-for="(item,index) in list" :key="index">
+                        <template v-slot:node>
+                            <view class="u-node bg-white">
+                                <u-icon name="clock-fill" color="#5064eb" :size="28"></u-icon>
+                            </view>
+                        </template>
+                        <template v-slot:content>
+                            <view v-if="fireType==3">
+                                <view class="u-order-title">抄表时间：{{item.readTime}}</view>
+                                <view class="content" style="width: 636rpx;">
+                                    <view class="nav-title">
+                                        <text class="">设备厂家：</text>
+                                        <text>{{item.deviceFactory}}</text>
+                                    </view>
+                                    <view class="nav-title">
+                                        <text class="">安装位置：</text>
+                                        <text v-text="item.installAddress"></text>
+                                    </view>
+                                    <view class="nav-title">
+                                        <text class="">年用量：</text>
+                                        <text>{{item.yearValue}} Kwh</text>
+                                    </view>
+                                    <view class="nav-title">
+                                        <text class="">月用量：</text>
+                                        <text>{{item.monthValue}} Kwh</text>
+                                    </view>
+                                    <view class="nav-title">
+                                        <text class="">日用量：</text>
+                                        <text>{{item.dayValue}} Kwh</text>
+                                    </view>
+                                    <view class="nav-title">
+                                        <text class="">总用量：</text>
+                                        <text>{{item.totalValue}} Kwh</text>
+                                    </view>
+                                </view>
+                            </view>
+                            <view v-else>
+                                <view class="u-order-title">{{item.recordTime}}</view>
+                                <view class="content" style="width: 636rpx;">
+                                    <view>
+                                        <text>告警等级：</text>
+                                        <text v-if="item.level==1" class="text-red">严重告警</text>
+                                        <text v-else-if="item.level==2" class="text-orange">警告告警</text>
+                                        <text v-else>提示告警</text>
+                                    </view>
+                                    <view class="nav-title">
+                                        <text class="">告警类型：</text>
+                                        <text v-text="item.alarmType==0?'业务报警':'设备报警'"></text>
+                                    </view>
+                                    <view class="nav-title">
+                                        <text class="">设备名称：</text>
+                                        <text>{{item.deviceName}}</text>
+                                    </view>
+                                    <view class="nav-title">
+                                        <text class="">告警原因：</text>
+                                        <text>{{item.name}}</text>
+                                    </view>
+                                    <view v-if="item.monitorValue" class="nav-title">
+                                        <text class="">监测值：</text>
+                                        <text class="text-red text-bold">{{item.monitorValue}}</text>
+                                    </view>
+                                </view>
+                            </view>
+                        </template>
+                    </u-time-line-item>
+                </u-time-line>
+            </view>
+        </mescroll-body>
+    </view>
 </template>
 
 <script>
-	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
-	export default {
-		mixins:[MescrollMixin],
-		data() {
-			return {
-				//设备类型
-				fireType:0,
-				deviceId:'' ,//设备列表的imei等于设备告警记录的deviceId
-				
-				//日期筛选
-				dateShow:false,
-				filterDate:'',
-				filterTagShow:false,
-				
-				list:[],
-				total:'',
-				
-				downOption: {
-					use: false,
-					auto: false
-				},
-				upOption: {
-					page: {
-						page: 0,
-						size: 10
-					},
-					noMoreSize: 3, 
-					empty: {
-						tip: '暂无相关数据'
-					}
-				},
-			}
-		},
-		onLoad(options) {
-			this.deviceId=options.imei || ''
-		},
-		onShow() {
-			this.fireType=getApp().globalData.fireType || 0
-			if (this.fireType==0) {
-				uni.setNavigationBarTitle({
-					title:"烟感报警记录"
-				})
-			}else if (this.fireType==1) {
-				uni.setNavigationBarTitle({
-					title:"气感报警记录"
-				})
-			}else if (this.fireType==2) {
-				uni.setNavigationBarTitle({
-					title:"消防水压报警记录"
-				})
-			}
-			
-		},
-		methods: {
-			change(e) {
-				this.filterDate=e.result
-				this.mescroll.resetUpScroll()
-			},
-			tagClick(){
-				this.filterDate=''
-				this.mescroll.resetUpScroll()
-			},
-			
-			downCallback(){
-				setTimeout(()=>{
-					this.list=[]
-					this.mescroll.resetUpScroll()
-				},1500)
-			},
-			async upCallback(mescroll) {
-				let params={
-					current:mescroll.num,
-					size:mescroll.size,
-					deviceId:this.deviceId
-				}
-				if (!this.$isEmpty(this.filterDate)) {
-					params.recordTime=this.filterDate
-				}
-				try{
-					
-					let res=null
-					if (this.fireType==3) {
-						//抄表记录
-						 res=await this.$api.fireDevice.electricmeterrecord({imei:this.deviceId})
-					}else{
-						//设备报警记录
-						res=await this.$api.fireDevice.alarmRecord(params)
-					}
-					let data=res.data.records
-					let length=data.length
-					this.total=res.data.total
-					mescroll.endBySize(length, this.total);
-					if(mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
-					this.list=this.list.concat(data); //追加新数据
-					
-				}catch(e){
-					console.log(e);
-					mescroll.endErr();
-				}
-			},
-		}
-	}
+    import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
+
+    export default {
+        mixins: [MescrollMixin],
+        data() {
+            return {
+                //设备类型
+                fireType: 0,
+                deviceId: '',//设备列表的imei等于设备告警记录的deviceId
+
+                //日期筛选
+                dateShow: false,
+                filterDate: '',
+                filterTagShow: false,
+
+                list: [],
+                total: '',
+
+                downOption: {
+                    use: false,
+                    auto: false
+                },
+                upOption: {
+                    page: {
+                        page: 0,
+                        size: 10
+                    },
+                    noMoreSize: 3,
+                    empty: {
+                        tip: '暂无相关数据'
+                    }
+                },
+            }
+        },
+        onLoad(options) {
+            this.deviceId = options.imei || ''
+        },
+        onShow() {
+            this.fireType = getApp().globalData.fireType || 0
+            if (this.fireType == 0) {
+                uni.setNavigationBarTitle({
+                    title: "烟感报警记录"
+                })
+            } else if (this.fireType == 1) {
+                uni.setNavigationBarTitle({
+                    title: "气感报警记录"
+                })
+            } else if (this.fireType == 2) {
+                uni.setNavigationBarTitle({
+                    title: "消防水压报警记录"
+                })
+            }
+
+        },
+        methods: {
+            change(e) {
+                this.filterDate = e.result
+                this.mescroll.resetUpScroll()
+            },
+            tagClick() {
+                this.filterDate = ''
+                this.mescroll.resetUpScroll()
+            },
+
+            downCallback() {
+                setTimeout(() => {
+                    this.list = []
+                    this.mescroll.resetUpScroll()
+                }, 1500)
+            },
+            async upCallback(mescroll) {
+                let params = {
+                    current: mescroll.num,
+                    size: mescroll.size,
+                    deviceId: this.deviceId
+                }
+                if (!this.$isEmpty(this.filterDate)) {
+                    params.recordTime = this.filterDate
+                }
+                try {
+
+                    let res = null
+                    if (this.fireType == 3) {
+                        //抄表记录
+                        res = await this.$api.fireDevice.electricmeterrecord({imei: this.deviceId})
+                    } else {
+                        //设备报警记录
+                        res = await this.$api.fireDevice.alarmRecord(params)
+                    }
+                    let data = res.data.records
+                    let length = data.length
+                    this.total = res.data.total
+                    mescroll.endBySize(length, this.total);
+                    if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
+                    this.list = this.list.concat(data); //追加新数据
+
+                } catch (e) {
+                    console.log(e);
+                    mescroll.endErr();
+                }
+            },
+        }
+    }
 </script>
 
 <style lang="scss">
-.container {
-  height: calc(100vh );
-  padding: 140rpx 0rpx 0rpx;
- .fixed {
-	position: fixed;
-	top: 0rpx;
-	left: 0;
-	width: 100%;
-	background-color: #FFFFFF;
-	box-sizing: border-box;
-	z-index: 999;
-  }
-}
+    .container {
+        height: calc(100vh);
+        padding: 140 rpx 0 rpx 0 rpx;
+
+        .fixed {
+            position: fixed;
+            top: 0 rpx;
+            left: 0;
+            width: 100%;
+            background-color: #FFFFFF;
+            box-sizing: border-box;
+            z-index: 999;
+        }
+    }
+
+    .text-red {
+        color: #ca0000;
+    }
+
+    .nav-title {
+        font-size: 28 upx;
+        font-weight: 300;
+        padding-top: 20 rpx;
+    }
+
+    .top {
+        padding: 30 rpx;
+        box-shadow: 0 4 rpx 6 rpx rgba(204, 204, 204, .2);
+        // border-bottom: 1rpx solid #efefef;
+    }
 
-.text-red{
-	color: #ca0000;
-}
+    .history {
+        background-color: #FFFFFF;
+        padding: 40 rpx 20 rpx 20 rpx 50 rpx;
+    }
 
-.nav-title {
-	font-size: 28upx;
-	font-weight: 300;
-	padding-top: 20rpx;
-}
-	
-.top{
-	padding: 30rpx;
-	box-shadow: 0 4rpx 6rpx rgba(204, 204, 204,.2);
-	// border-bottom: 1rpx solid #efefef;
-}
-	
-.history{
-		background-color: #FFFFFF;
-		padding: 40rpx 20rpx 20rpx 50rpx;
-	}
-.content{
-	box-shadow: 0 8rpx 2rpx rgba(204, 204, 204,.2),0 -8rpx 6rpx rgba(204, 204, 204,.1),8rpx 0rpx 6rpx rgba(204, 204, 204,.1),-8rpx 0rpx 6rpx rgba(204, 204, 204,.1);
-	background-color: #FFFFFF;
-	padding: 20rpx;
-	border-radius: 10rpx;
-	margin-top: 20rpx;
-}
+    .content {
+        box-shadow: 0 8 rpx 2 rpx rgba(204, 204, 204, .2), 0 -8rpx 6 rpx rgba(204, 204, 204, .1), 8 rpx 0 rpx 6 rpx rgba(204, 204, 204, .1), -8rpx 0 rpx 6 rpx rgba(204, 204, 204, .1);
+        background-color: #FFFFFF;
+        padding: 20 rpx;
+        border-radius: 10 rpx;
+        margin-top: 20 rpx;
+    }
 </style>

mini-program/garden-wxapp/pages/index/fire/detail.vue

@@ -1,220 +1,250 @@
 <template>
-	<view class="page">
-		<view class="data" >
-			<view class="top">
-				<view class="left">
-					
-					<view class="title flex " style="padding:0  24rpx;">
-						<u-icon color="#3895e1" size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/sn.png"></u-icon>
-						<text class="padding-left-10 text-lg text-bold">IEMI：{{dataDetail.imei}}</text>
-						<text @click.stop="copy(dataDetail.imei)" style="text-decoration: underline;" class="base-color padding-left-20">复制</text>
-					</view>
-				</view>
-				<view class="right">
-					<view v-if="dataDetail.defenseStatus==1" style="font-size: 22rpx;" class="radius sm cu-btn line-green">
-						已上线
-					</view>
-					<view v-if="dataDetail.defenseStatus==2" style="font-size: 22rpx;" class="radius sm cu-btn line-red">
-						已下线
-					</view>
-				</view>
-			</view>
-			<view class="item">
-				<view class="left">
-					<view style="padding: 0 30rpx;">
-						<view class="content flex">
-							<u-icon  size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/name.png"></u-icon>
-							<text class="text-bold padding-left-10">设备名称：</text>
-							<text>{{dataDetail.deviceName}}</text>
-						</view>
-						<view class="content flex">
-							<view class="flex">
-								<u-icon  size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/dianchi.png"></u-icon>
-								<text class="text-bold padding-left-10">电池电量：</text>
-							</view>
-							<view class="striped active cu-progress round margin-top-sm " style="width: 60%;">
-								<view :style="[{ width:loading?dataDetail.battery+'%':''}]" style="background-color: #16c60c;color: #FFFFFF;">
-									{{dataDetail.battery?dataDetail.battery:0}}%
-								</view>
-							</view>
-						</view>
-						<!-- 电表没有这个字段 -->
-						<view class="content flex"  v-if="dataDetail.deviceType!=100030">
-							<view class="flex">
-								<u-icon  size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/wifi.png"></u-icon>
-								<text class="text-bold padding-left-10">信号强弱：</text>
-							</view>
-							<view class="striped active cu-progress round margin-top-sm " style="width: 60%;">
-								<view :style="[{ width:loading?dataDetail.signalIntensity+'%':''}]" style="width: 58%;background-color: #fc5f44;color: #FFFFFF;">
-									{{dataDetail.signalIntensity?dataDetail.signalIntensity:0}}%
-								</view>
-							</view>
-						</view>
-<!-- 						<view  class="content flex">
-							<view class="flex justify-start " style="width: 200rpx;">
-								<u-icon  size="36" name="map" color="#fd9510"></u-icon>
-								<text class="text-bold padding-left-10" >安装位置：</text>
-							</view>
-							<view class="">
-								<text  v-text="dataDetail.deviceInstallAddress?dataDetail.deviceInstallAddress:'未知'" class="text-unknow" style="padding-top: 8rpx;" ></text>
-							</view>
-						</view> -->
-						
-						<view class="content flex align-center justify-start">
-							<u-icon  size="36" name="map" color="#5064eb"></u-icon>
-							<text class="text-bold padding-left-10" >安装位置：</text>
-							<text  v-text="dataDetail.deviceInstallAddress?dataDetail.deviceInstallAddress:'未知'"  style="padding-top: 8rpx;" ></text>
-						</view>
-						
-						<view class="content flex align-center justify-start">
-							<u-icon  size="36" name="home" color="#fd9510"></u-icon>
-							<text class="text-bold padding-left-10">所属企业：</text>
-							<text  v-text="dataDetail.enterpriseNames?dataDetail.enterpriseNames:'未知'"  style="padding-top: 8rpx;" ></text>
-						</view>
-						
-						
-						<view  class="content flex">
-							<u-icon  size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/updateTime2.png"></u-icon>
-							<text class="text-bold padding-left-10">更新时间：</text>
-							<text class="text-unknow" style="padding-top: 8rpx;"  v-text="dataDetail.updateTime?dataDetail.updateTime:'未知'"></text>
-						</view>
-						<view  class="content flex">
-							<u-icon name="changshangguanliyuan" custom-prefix="custom-icon" size="32" color="#00aa00"></u-icon>
-							<text class="text-bold padding-left-10">厂商名称：</text>
-							<text :class="dataDetail.manufacturers?'':'text-unknow'"  v-text="dataDetail.manufacturers?dataDetail.manufacturers:'未知'"></text>
-						</view>
-						<view  class="content flex">
-							<u-icon name="ICCID" custom-prefix="custom-icon" size="32" color="#5064eb"></u-icon>
-							<text class="text-bold padding-left-10">ICCID：</text>
-							<text :class="dataDetail.iccid?'':'text-unknow'"  v-text="dataDetail.iccid?dataDetail.iccid:'未知'"></text>
-						</view>
-						
-						<view  class="content flex">
-							<u-icon name="MCUruanjianyouneirong" custom-prefix="custom-icon" size="32" color="#ff00ff"></u-icon>
-							<text class="text-bold padding-left-10">Mcu软件版本：</text>
-							<text :class="dataDetail.mcuEdition?'':'text-unknow'"  v-text="dataDetail.mcuEdition?dataDetail.mcuEdition:'未知'"></text>
-						</view>
-						
-						<view  class="content flex">
-							<u-icon name="xinghao" custom-prefix="custom-icon" size="32" color="#64c692"></u-icon>
-							<text class="text-bold padding-left-10">NB模组型号：</text>
-							<text :class="dataDetail.nbModuleModel?'':'text-unknow'"  v-text="dataDetail.nbModuleModel?dataDetail.nbModuleModel:'未知'"></text>
-						</view>
-						<view  class="content flex">
-							<u-icon name="banbenhao" custom-prefix="custom-icon" size="32" color="#5064eb"></u-icon>
-							<text class="text-bold padding-left-10">NB模组版本信息：</text>
-							<text :class="dataDetail.nbModuleEdition?'':'text-unknow'"  v-text="dataDetail.nbModuleEdition?dataDetail.nbModuleEdition:'未知'"></text>
-						</view>
-						<view  class="content flex">
-							<u-icon name="cichang" custom-prefix="custom-icon" size="32" color="#53b9b6"></u-icon>
-							<text class="text-bold padding-left-10">当场磁场值：</text>
-							<text :class="dataDetail.magneticField?'':'text-unknow'"  v-text="dataDetail.magneticField?dataDetail.magneticField:'未知'"></text>
-						</view>
-						<view  class="content flex">
-							<u-icon name="-" custom-prefix="custom-icon" size="32" color="#d0267b"></u-icon>
-							<text class="text-bold padding-left-10">心跳保护时间：</text>
-							<text :class="dataDetail.heartbeatTime?'':'text-unknow'"  v-text="dataDetail.heartbeatTime?dataDetail.heartbeatTime:'未知'"></text>
-						</view>
-						<view  class="content flex">
-							<u-icon name="wuxian" custom-prefix="custom-icon" size="32" color="#6c9a3a"></u-icon>
-							<text class="text-bold padding-left-10">无线信号覆盖等级：</text>
-							<text :class="dataDetail.wirelessLevel?'':'text-unknow'"  v-text="dataDetail.wirelessLevel?dataDetail.wirelessLevel:'未知'"></text>
-						</view>
-						<view  class="content flex">
-							<u-icon name="fashegongshuai" custom-prefix="custom-icon" size="32" color="#afc629"></u-icon>
-							<text class="text-bold padding-left-10">终端发射功率：</text>
-							<text :class="dataDetail.transmittingPower?'':'text-unknow'"  v-text="dataDetail.transmittingPower?dataDetail.transmittingPower:'未知'"></text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
+    <view class="page">
+        <view class="data">
+            <view class="top">
+                <view class="left">
+
+                    <view class="title flex " style="padding:0  24rpx;">
+                        <u-icon color="#3895e1" size="36"
+                                name="https://park.nxzhsq.cn/park/miniofile/xlyq/sn.png"></u-icon>
+                        <text class="padding-left-10 text-lg text-bold">IEMI：{{dataDetail.imei}}</text>
+                        <text @click.stop="copy(dataDetail.imei)" style="text-decoration: underline;"
+                              class="base-color padding-left-20">复制
+                        </text>
+                    </view>
+                </view>
+                <view class="right">
+                    <view v-if="dataDetail.defenseStatus==1" style="font-size: 22rpx;"
+                          class="radius sm cu-btn line-green">
+                        已上线
+                    </view>
+                    <view v-if="dataDetail.defenseStatus==2" style="font-size: 22rpx;"
+                          class="radius sm cu-btn line-red">
+                        已下线
+                    </view>
+                </view>
+            </view>
+            <view class="item">
+                <view class="left">
+                    <view style="padding: 0 30rpx;">
+                        <view class="content flex">
+                            <u-icon size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/name.png"></u-icon>
+                            <text class="text-bold padding-left-10">设备名称：</text>
+                            <text>{{dataDetail.deviceName}}</text>
+                        </view>
+                        <view class="content flex">
+                            <view class="flex">
+                                <u-icon size="36"
+                                        name="https://park.nxzhsq.cn/park/miniofile/xlyq/dianchi.png"></u-icon>
+                                <text class="text-bold padding-left-10">电池电量：</text>
+                            </view>
+                            <view class="striped active cu-progress round margin-top-sm " style="width: 60%;">
+                                <view :style="[{ width:loading?dataDetail.battery+'%':''}]"
+                                      style="background-color: #16c60c;color: #FFFFFF;">
+                                    {{dataDetail.battery?dataDetail.battery:0}}%
+                                </view>
+                            </view>
+                        </view>
+                        <!-- 电表没有这个字段 -->
+                        <view class="content flex" v-if="dataDetail.deviceType!=100030">
+                            <view class="flex">
+                                <u-icon size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/wifi.png"></u-icon>
+                                <text class="text-bold padding-left-10">信号强弱：</text>
+                            </view>
+                            <view class="striped active cu-progress round margin-top-sm " style="width: 60%;">
+                                <view :style="[{ width:loading?dataDetail.signalIntensity+'%':''}]"
+                                      style="width: 58%;background-color: #fc5f44;color: #FFFFFF;">
+                                    {{dataDetail.signalIntensity?dataDetail.signalIntensity:0}}%
+                                </view>
+                            </view>
+                        </view>
+                        <!-- 						<view  class="content flex">
+                                                    <view class="flex justify-start " style="width: 200rpx;">
+                                                        <u-icon  size="36" name="map" color="#fd9510"></u-icon>
+                                                        <text class="text-bold padding-left-10" >安装位置：</text>
+                                                    </view>
+                                                    <view class="">
+                                                        <text  v-text="dataDetail.deviceInstallAddress?dataDetail.deviceInstallAddress:'未知'" class="text-unknow" style="padding-top: 8rpx;" ></text>
+                                                    </view>
+                                                </view> -->
+
+                        <view class="content flex align-center justify-start">
+                            <u-icon size="36" name="map" color="#5064eb"></u-icon>
+                            <text class="text-bold padding-left-10">安装位置：</text>
+                            <text v-text="dataDetail.deviceInstallAddress?dataDetail.deviceInstallAddress:'未知'"
+                                  style="padding-top: 8rpx;"></text>
+                        </view>
+
+                        <view class="content flex align-center justify-start">
+                            <u-icon size="36" name="home" color="#fd9510"></u-icon>
+                            <text class="text-bold padding-left-10">所属企业：</text>
+                            <text v-text="dataDetail.enterpriseNames?dataDetail.enterpriseNames:'未知'"
+                                  style="padding-top: 8rpx;"></text>
+                        </view>
+
+
+                        <view class="content flex">
+                            <u-icon size="36"
+                                    name="https://park.nxzhsq.cn/park/miniofile/xlyq/updateTime2.png"></u-icon>
+                            <text class="text-bold padding-left-10">更新时间：</text>
+                            <text class="text-unknow" style="padding-top: 8rpx;"
+                                  v-text="dataDetail.updateTime?dataDetail.updateTime:'未知'"></text>
+                        </view>
+                        <view class="content flex">
+                            <u-icon name="changshangguanliyuan" custom-prefix="custom-icon" size="32"
+                                    color="#00aa00"></u-icon>
+                            <text class="text-bold padding-left-10">厂商名称：</text>
+                            <text :class="dataDetail.manufacturers?'':'text-unknow'"
+                                  v-text="dataDetail.manufacturers?dataDetail.manufacturers:'未知'"></text>
+                        </view>
+                        <view class="content flex">
+                            <u-icon name="ICCID" custom-prefix="custom-icon" size="32" color="#5064eb"></u-icon>
+                            <text class="text-bold padding-left-10">ICCID：</text>
+                            <text :class="dataDetail.iccid?'':'text-unknow'"
+                                  v-text="dataDetail.iccid?dataDetail.iccid:'未知'"></text>
+                        </view>
+
+                        <view class="content flex">
+                            <u-icon name="MCUruanjianyouneirong" custom-prefix="custom-icon" size="32"
+                                    color="#ff00ff"></u-icon>
+                            <text class="text-bold padding-left-10">Mcu软件版本：</text>
+                            <text :class="dataDetail.mcuEdition?'':'text-unknow'"
+                                  v-text="dataDetail.mcuEdition?dataDetail.mcuEdition:'未知'"></text>
+                        </view>
+
+                        <view class="content flex">
+                            <u-icon name="xinghao" custom-prefix="custom-icon" size="32" color="#64c692"></u-icon>
+                            <text class="text-bold padding-left-10">NB模组型号：</text>
+                            <text :class="dataDetail.nbModuleModel?'':'text-unknow'"
+                                  v-text="dataDetail.nbModuleModel?dataDetail.nbModuleModel:'未知'"></text>
+                        </view>
+                        <view class="content flex">
+                            <u-icon name="banbenhao" custom-prefix="custom-icon" size="32" color="#5064eb"></u-icon>
+                            <text class="text-bold padding-left-10">NB模组版本信息：</text>
+                            <text :class="dataDetail.nbModuleEdition?'':'text-unknow'"
+                                  v-text="dataDetail.nbModuleEdition?dataDetail.nbModuleEdition:'未知'"></text>
+                        </view>
+                        <view class="content flex">
+                            <u-icon name="cichang" custom-prefix="custom-icon" size="32" color="#53b9b6"></u-icon>
+                            <text class="text-bold padding-left-10">当场磁场值：</text>
+                            <text :class="dataDetail.magneticField?'':'text-unknow'"
+                                  v-text="dataDetail.magneticField?dataDetail.magneticField:'未知'"></text>
+                        </view>
+                        <view class="content flex">
+                            <u-icon name="-" custom-prefix="custom-icon" size="32" color="#d0267b"></u-icon>
+                            <text class="text-bold padding-left-10">心跳保护时间：</text>
+                            <text :class="dataDetail.heartbeatTime?'':'text-unknow'"
+                                  v-text="dataDetail.heartbeatTime?dataDetail.heartbeatTime:'未知'"></text>
+                        </view>
+                        <view class="content flex">
+                            <u-icon name="wuxian" custom-prefix="custom-icon" size="32" color="#6c9a3a"></u-icon>
+                            <text class="text-bold padding-left-10">无线信号覆盖等级：</text>
+                            <text :class="dataDetail.wirelessLevel?'':'text-unknow'"
+                                  v-text="dataDetail.wirelessLevel?dataDetail.wirelessLevel:'未知'"></text>
+                        </view>
+                        <view class="content flex">
+                            <u-icon name="fashegongshuai" custom-prefix="custom-icon" size="32"
+                                    color="#afc629"></u-icon>
+                            <text class="text-bold padding-left-10">终端发射功率：</text>
+                            <text :class="dataDetail.transmittingPower?'':'text-unknow'"
+                                  v-text="dataDetail.transmittingPower?dataDetail.transmittingPower:'未知'"></text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-export default {
-	name: 'card',
-	data() {
-		return {
-			loading:false,
-			dataDetail:{}
-		};
-	},
-	onShow() {
-		this.dataDetail= getApp().globalData.fireHydrantDetail
-	},
-	onLoad(options) {
-		let that = this;
-		setTimeout(function() {
-			that.loading = true
-		}, 500)
-	},
-	methods:{
-		copy(data){
-			uni.setClipboardData({
-				data:data
-			})
-		},
-	}
-};
+    export default {
+        name: 'card',
+        data() {
+            return {
+                loading: false,
+                dataDetail: {}
+            };
+        },
+        onShow() {
+            this.dataDetail = getApp().globalData.fireHydrantDetail
+        },
+        onLoad(options) {
+            let that = this;
+            setTimeout(function () {
+                that.loading = true
+            }, 500)
+        },
+        methods: {
+            copy(data) {
+                uni.setClipboardData({
+                    data: data
+                })
+            },
+        }
+    };
 </script>
 
 <style lang="scss">
-page{
-	background-color: #FFFFFF;
-}
-
-.line-green{
-	border-color: #16aa5d;
-	color: #16aa5d;
-}
-
-.line-red{
-	border-color: #cf0000;
-	color: #cf0000;
-}
-
-.text-unknow{
-	color: $base-color;
-}
-	
-.data {
-	background-color: #ffffff;
-	border-radius: 6rpx;
-	box-sizing: border-box;
-	margin-top: 40rpx;
-	padding: 20rpx 10rpx;
-	font-size: 28rpx;
-	.top {
-		display: flex;
-		justify-content: space-between;
-		padding-bottom: 20rpx;
-		// border-bottom: 1rpx solid $dt-border-color-sm;
-		.left {
-			display: flex;
-			align-items: center;
-			.title {
-				margin: 0 10rpx;
-				font-size: 30rpx;
-			}
-		}
-		.right{
-			margin-right: 10rpx;
-		}
-	}
-	.item {
-		margin: 5rpx 0 20rpx 0;
-		.content {
-			// border-bottom: 1rpx dashed #DDDDDD;
-			padding: 30rpx 0;
-		}
-	}
-	.bottom {
-		display: flex;
-		margin-top: 30rpx;
-		justify-content: flex-end;
-		align-items: center;
-	}
-}
+    page {
+        background-color: #FFFFFF;
+    }
+
+    .line-green {
+        border-color: #16aa5d;
+        color: #16aa5d;
+    }
+
+    .line-red {
+        border-color: #cf0000;
+        color: #cf0000;
+    }
+
+    .text-unknow {
+        color: $base-color;
+    }
+
+    .data {
+        background-color: #ffffff;
+        border-radius: 6 rpx;
+        box-sizing: border-box;
+        margin-top: 40 rpx;
+        padding: 20 rpx 10 rpx;
+        font-size: 28 rpx;
+
+        .top {
+            display: flex;
+            justify-content: space-between;
+            padding-bottom: 20 rpx;
+            // border-bottom: 1rpx solid $dt-border-color-sm;
+            .left {
+                display: flex;
+                align-items: center;
+
+                .title {
+                    margin: 0 10 rpx;
+                    font-size: 30 rpx;
+                }
+            }
+
+            .right {
+                margin-right: 10 rpx;
+            }
+        }
+
+        .item {
+            margin: 5 rpx 0 20 rpx 0;
+
+            .content {
+                // border-bottom: 1rpx dashed #DDDDDD;
+                padding: 30 rpx 0;
+            }
+        }
+
+        .bottom {
+            display: flex;
+            margin-top: 30 rpx;
+            justify-content: flex-end;
+            align-items: center;
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/index/fire/list/comps/card.vue

@@ -1,170 +1,187 @@
 <template>
-	<view class="">
-		<view @click="goDetail(item)"  class="data" v-for="(item, index) in list" :key="index">
-			<view class="top">
-				<view class="left">
-					<view class="title">
-						<text>IMEI：{{item.imei}}</text>
-						<text @click.stop="copy(item.imei)" style="text-decoration: underline;" class="base-color padding-left-20">复制</text>
-					</view>
-				</view>
-				<view class="right">
-					<view v-if="item.defenseStatus==1" style="font-size: 24rpx;" class="radius sm cu-btn line-green">
-						已上线
-					</view>
-					<view v-if="item.defenseStatus==2" class="radius sm cu-btn line-red">
-						已下线
-					</view>
-				</view>
-			</view>
-			<view class="item">
-				<view class="left">
-					<view style="padding: 0 30rpx;">
-						<view class="content flex">
-							<u-icon  size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/xiaofangshuang.png"></u-icon>
-							<text class="text-bold padding-left-10">设备名称：</text>
-							<text>{{item.deviceName}}</text>
-						</view>
-						<view v-if="item.deviceType==100030" class="content flex align-center justify-start">
-							<u-icon  size="36" name="home" color="#fd9510"></u-icon>
-							<text class="text-bold padding-left-10">所属企业：</text>
-							<text  v-text="item.enterpriseNames?item.enterpriseNames:'未知'"  style="padding-top: 8rpx;" ></text>
-						</view>
-						<view class="content flex">
-							<view class="flex">
-								<u-icon  size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/dianchi.png"></u-icon>
-								<text class="text-bold padding-left-10">电池电量：</text>
-							</view>
-							<view class="striped active cu-progress round margin-top-sm " style="width: 60%;">
-								<view :style="[{ width:loading?item.battery+'%':''}]" style="background-color: #16c60c;color: #FFFFFF;">
-									{{item.battery?item.battery:0}}%
-								</view>
-							</view>
-						</view>
-						<!-- 电表没有这个字段 -->
-						<view class="content flex" v-if="item.deviceType!=100030">
-							<view class="flex">
-								<u-icon  size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/wifi.png"></u-icon>
-								<text class="text-bold padding-left-10">信号强弱：</text>
-							</view>
-							<view class="striped active cu-progress round margin-top-sm " style="width: 60%;">
-								<view :style="[{ width:loading?item.signalIntensity+'%':''}]" style="background-color: #fc5f44;color: #FFFFFF;">
-									{{item.signalIntensity?item.signalIntensity:0}}%
-								</view>
-							</view>
-						</view>
-						<view  class="content flex">
-							<u-icon  size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/updateTime2.png"></u-icon>
-							<text class="text-bold padding-left-10">更新时间：</text>
-							<text style="padding-top: 8rpx;" v-text="item.updateTime?item.updateTime:'未知'"></text>
-						</view>
-					</view>
-				</view>
-			</view>
-			<view class="bottom flex" >
-				<view @click.stop="goDetail(item)" style="font-size: 22rpx;font-weight: 800;" class="cu-btn  sm round  base-line" >
-					查看详情
-				</view>
-				<view @click.stop="goAlarm(item)"  class="cu-btn  sm round base-line" style="margin: 0 20rpx;font-size: 22rpx;font-weight: 800;">
-					<text v-if="item.deviceType==100030">抄表记录</text>
-					<text v-else>告警记录</text>
-				</view>
-			</view>
-		</view>
-	</view>
+    <view class="">
+        <view @click="goDetail(item)" class="data" v-for="(item, index) in list" :key="index">
+            <view class="top">
+                <view class="left">
+                    <view class="title">
+                        <text>IMEI：{{item.imei}}</text>
+                        <text @click.stop="copy(item.imei)" style="text-decoration: underline;"
+                              class="base-color padding-left-20">复制
+                        </text>
+                    </view>
+                </view>
+                <view class="right">
+                    <view v-if="item.defenseStatus==1" style="font-size: 24rpx;" class="radius sm cu-btn line-green">
+                        已上线
+                    </view>
+                    <view v-if="item.defenseStatus==2" class="radius sm cu-btn line-red">
+                        已下线
+                    </view>
+                </view>
+            </view>
+            <view class="item">
+                <view class="left">
+                    <view style="padding: 0 30rpx;">
+                        <view class="content flex">
+                            <u-icon size="36"
+                                    name="https://park.nxzhsq.cn/park/miniofile/xlyq/xiaofangshuang.png"></u-icon>
+                            <text class="text-bold padding-left-10">设备名称：</text>
+                            <text>{{item.deviceName}}</text>
+                        </view>
+                        <view v-if="item.deviceType==100030" class="content flex align-center justify-start">
+                            <u-icon size="36" name="home" color="#fd9510"></u-icon>
+                            <text class="text-bold padding-left-10">所属企业：</text>
+                            <text v-text="item.enterpriseNames?item.enterpriseNames:'未知'"
+                                  style="padding-top: 8rpx;"></text>
+                        </view>
+                        <view class="content flex">
+                            <view class="flex">
+                                <u-icon size="36"
+                                        name="https://park.nxzhsq.cn/park/miniofile/xlyq/dianchi.png"></u-icon>
+                                <text class="text-bold padding-left-10">电池电量：</text>
+                            </view>
+                            <view class="striped active cu-progress round margin-top-sm " style="width: 60%;">
+                                <view :style="[{ width:loading?item.battery+'%':''}]"
+                                      style="background-color: #16c60c;color: #FFFFFF;">
+                                    {{item.battery?item.battery:0}}%
+                                </view>
+                            </view>
+                        </view>
+                        <!-- 电表没有这个字段 -->
+                        <view class="content flex" v-if="item.deviceType!=100030">
+                            <view class="flex">
+                                <u-icon size="36" name="https://park.nxzhsq.cn/park/miniofile/xlyq/wifi.png"></u-icon>
+                                <text class="text-bold padding-left-10">信号强弱：</text>
+                            </view>
+                            <view class="striped active cu-progress round margin-top-sm " style="width: 60%;">
+                                <view :style="[{ width:loading?item.signalIntensity+'%':''}]"
+                                      style="background-color: #fc5f44;color: #FFFFFF;">
+                                    {{item.signalIntensity?item.signalIntensity:0}}%
+                                </view>
+                            </view>
+                        </view>
+                        <view class="content flex">
+                            <u-icon size="36"
+                                    name="https://park.nxzhsq.cn/park/miniofile/xlyq/updateTime2.png"></u-icon>
+                            <text class="text-bold padding-left-10">更新时间：</text>
+                            <text style="padding-top: 8rpx;" v-text="item.updateTime?item.updateTime:'未知'"></text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="bottom flex">
+                <view @click.stop="goDetail(item)" style="font-size: 22rpx;font-weight: 800;"
+                      class="cu-btn  sm round  base-line">
+                    查看详情
+                </view>
+                <view @click.stop="goAlarm(item)" class="cu-btn  sm round base-line"
+                      style="margin: 0 20rpx;font-size: 22rpx;font-weight: 800;">
+                    <text v-if="item.deviceType==100030">抄表记录</text>
+                    <text v-else>告警记录</text>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-export default {
-	name: 'card',
-	props:{
-		list:{
-			type:Array,
-			default:()=>{
-				[]
-			}
-		}
-	},
-	data() {
-		return {
-			loading:false
-		};
-	},
-	created() {
-		let that = this;
-		setTimeout(function() {
-			that.loading = true
-		}, 500)
-	},
-	methods:{
-		copy(data){
-			uni.setClipboardData({
-				data:data
-			})
-		},
-		goDetail(item){
-			getApp().globalData.fireHydrantDetail=item
-			uni.navigateTo({
-				url:'/pages/index/fire/detail'
-			})
-		},
-		goAlarm(item){
-			uni.navigateTo({
-				url:"/pages/index/fire/alarm-record?imei="+item.imei
-			})
-		}
-	}
-};
+    export default {
+        name: 'card',
+        props: {
+            list: {
+                type: Array,
+                default: () => {
+                    []
+                }
+            }
+        },
+        data() {
+            return {
+                loading: false
+            };
+        },
+        created() {
+            let that = this;
+            setTimeout(function () {
+                that.loading = true
+            }, 500)
+        },
+        methods: {
+            copy(data) {
+                uni.setClipboardData({
+                    data: data
+                })
+            },
+            goDetail(item) {
+                getApp().globalData.fireHydrantDetail = item
+                uni.navigateTo({
+                    url: '/pages/index/fire/detail'
+                })
+            },
+            goAlarm(item) {
+                uni.navigateTo({
+                    url: "/pages/index/fire/alarm-record?imei=" + item.imei
+                })
+            }
+        }
+    };
 </script>
 
 <style lang="scss">
-.line-green{
-	border-color: #16aa5d;
-	color: #16aa5d;
-}
+    .line-green {
+        border-color: #16aa5d;
+        color: #16aa5d;
+    }
 
-.line-red{
-	border-color: #cf0000;
-	color: #cf0000;
-}
+    .line-red {
+        border-color: #cf0000;
+        color: #cf0000;
+    }
 
-.data {
-	width: 710rpx;
-	background-color: #ffffff;
-	margin: 20rpx auto;
-	border-radius: 6rpx;
-	box-sizing: border-box;
-	padding: 20rpx 10rpx;
-	font-size: 28rpx;
-	.top {
-		display: flex;
-		justify-content: space-between;
-		padding-bottom: 20rpx;
-		border-bottom: 1rpx solid $dt-border-color-sm;
-		.left {
-			display: flex;
-			align-items: center;
-			.title {
-				margin: 0 10rpx;
-				font-size: 30rpx;
-			}
-		}
-		.right{
-			margin-right: 20rpx;
-		}
-	}
-	.item {
-		margin: 5rpx 0 20rpx 0;
-		.content {
-			border-bottom: 1rpx dashed #DDDDDD;
-			padding: 30rpx 0;
-		}
-	}
-	.bottom {
-		display: flex;
-		margin-top: 30rpx;
-		justify-content: flex-end;
-		align-items: center;
-	}
-}
+    .data {
+        width: 710 rpx;
+        background-color: #ffffff;
+        margin: 20 rpx auto;
+        border-radius: 6 rpx;
+        box-sizing: border-box;
+        padding: 20 rpx 10 rpx;
+        font-size: 28 rpx;
+
+        .top {
+            display: flex;
+            justify-content: space-between;
+            padding-bottom: 20 rpx;
+            border-bottom: 1 rpx solid $dt-border-color-sm;
+
+            .left {
+                display: flex;
+                align-items: center;
+
+                .title {
+                    margin: 0 10 rpx;
+                    font-size: 30 rpx;
+                }
+            }
+
+            .right {
+                margin-right: 20 rpx;
+            }
+        }
+
+        .item {
+            margin: 5 rpx 0 20 rpx 0;
+
+            .content {
+                border-bottom: 1 rpx dashed #DDDDDD;
+                padding: 30 rpx 0;
+            }
+        }
+
+        .bottom {
+            display: flex;
+            margin-top: 30 rpx;
+            justify-content: flex-end;
+            align-items: center;
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/index/fire/list/comps/item.vue

@@ -1,138 +1,139 @@
 <template>
-	<MeScroll  :up="up" :down="down" @up="upFn" :fixed="false" @down="downFn" @init="initMeScroll">
-		<card  :list="list" ></card>
-	</MeScroll>
+    <MeScroll :up="up" :down="down" @up="upFn" :fixed="false" @down="downFn" @init="initMeScroll">
+        <card :list="list"></card>
+    </MeScroll>
 </template>
 <script>
-	import MeScroll from '@/components/mescroll-body/mescroll-uni.vue'
-	import card from './card.vue'
-	var app=getApp()
-	export default {
-		components:{
-			MeScroll,card
-		},
-		props: {
-			refresh:Boolean,
-			type: Number,
-			i: Number,
-			fireType: Number,
-			item:Object
-		},
-		data() {
-			return {
-				isInit: false, // 是否初始化
-				list: [], // 列表数据
-				mescroll: null, // mescroll 对象
-				// 上拉配置参数
-				up: {
-					noMoreSize: 2, 
-					auto: false,
-					page: {
-						page: 0,
-						size: 10
-					}
-				},
-				// 下拉配置参数
-				down: {
-					use: true, 
-					auto: false
-				}
-			}
-		},
-		watch:{
-			refresh() {
-				console.log("我要刷新了");
-				this.mescroll.resetUpScroll()
-			},
-			type(val) {
-				if(!this.isInit && val === this.i) {
-					this.mescroll.resetUpScroll()
-				}
-			}
-		},
-		mounted() {
-			if(!this.isInit && this.i === 0) {
-				this.mescroll.resetUpScroll()
-			}
-		},
-		methods: {
-			/**
-			 * @param {Object} mescroll 初始化组件
-			 */
-			initMeScroll(mescroll) {
-				this.mescroll = mescroll
-			},
-			/**
-			 * 企业通过 page接口查询，园区通过agencyPage接口查询
-			 * 烟感和燃气通过设备前缀查询
-			 * 消防栓通过设备类型查询
-			 * @param {Object} mescroll 上拉回调
-			 */
-			async upFn(mescroll) {
-				let that=this
-				let loginType=this.$cache.get('loginType')
-				let params={
-					current:mescroll.num,
-					size:mescroll.size,
-				}
-				if (loginType==this.$loginType.ENTERPRISE) {
-					//公司统一信用代码
-					params.creditCode=this.$cache.get('creditCode')
-				}else if (loginType==this.$loginType.AGENCY) {
-					//园区tenantId
-					params.tenantId=this.$cache.get('agencyTenantId')
-				}
-				
-				if (this.fireType==0) {
-					//烟感报警
-					params.prefix=this.$device_prefix.SMOKE
-				}else if (this.fireType==1) {
-					//燃气告警
-					params.prefix=this.$device_prefix.GAS
-				}else if (this.fireType==2) {
-					//消防水压
-					params.deviceType=this.$device_type.FIRE_HYDRANT
-				}else if (this.fireType==3) {
-					//电表记录
-					params.deviceType=this.$device_type.ELECTRIC_METER
-				}
-				if (!this.$isEmpty(this.item.value)) {
-					params.deviceStatus=this.item.value	//设备状态
-				}
-				try{
-					let res=null;
-					if (loginType==this.$loginType.ENTERPRISE) {
-						//企业设备接口
-						res=await this.$api.fireDevice.page(params)
-					}else if (loginType==this.$loginType.AGENCY) {
-						//园区设备接口
-						res=await this.$api.fireDevice.agencyPage(params)
-					}
-					let data=res.data.records
-					let length=data.length
-					let total=res.data.total
-					mescroll.endBySize(length, total);
-					if(mescroll.num == 1) that.list = []; //如果是第一页需手动制空列表
-					that.list=that.list.concat(data); //追加新数据
-					
-				}catch(e){
-					mescroll.endErr();
-				}
-			},
-			/**
-			 * 下拉回调
-			 * */
-			downFn(mescroll) {
-				setTimeout(()=>{
-					this.mescroll.resetUpScroll()
-				},1000)
-			},
-		}
-	}
+    import MeScroll from '@/components/mescroll-body/mescroll-uni.vue'
+    import card from './card.vue'
+
+    var app = getApp()
+    export default {
+        components: {
+            MeScroll, card
+        },
+        props: {
+            refresh: Boolean,
+            type: Number,
+            i: Number,
+            fireType: Number,
+            item: Object
+        },
+        data() {
+            return {
+                isInit: false, // 是否初始化
+                list: [], // 列表数据
+                mescroll: null, // mescroll 对象
+                // 上拉配置参数
+                up: {
+                    noMoreSize: 2,
+                    auto: false,
+                    page: {
+                        page: 0,
+                        size: 10
+                    }
+                },
+                // 下拉配置参数
+                down: {
+                    use: true,
+                    auto: false
+                }
+            }
+        },
+        watch: {
+            refresh() {
+                console.log("我要刷新了");
+                this.mescroll.resetUpScroll()
+            },
+            type(val) {
+                if (!this.isInit && val === this.i) {
+                    this.mescroll.resetUpScroll()
+                }
+            }
+        },
+        mounted() {
+            if (!this.isInit && this.i === 0) {
+                this.mescroll.resetUpScroll()
+            }
+        },
+        methods: {
+            /**
+             * @param {Object} mescroll 初始化组件
+             */
+            initMeScroll(mescroll) {
+                this.mescroll = mescroll
+            },
+            /**
+             * 企业通过 page接口查询，园区通过agencyPage接口查询
+             * 烟感和燃气通过设备前缀查询
+             * 消防栓通过设备类型查询
+             * @param {Object} mescroll 上拉回调
+             */
+            async upFn(mescroll) {
+                let that = this
+                let loginType = this.$cache.get('loginType')
+                let params = {
+                    current: mescroll.num,
+                    size: mescroll.size,
+                }
+                if (loginType == this.$loginType.ENTERPRISE) {
+                    //公司统一信用代码
+                    params.creditCode = this.$cache.get('creditCode')
+                } else if (loginType == this.$loginType.AGENCY) {
+                    //园区tenantId
+                    params.tenantId = this.$cache.get('agencyTenantId')
+                }
+
+                if (this.fireType == 0) {
+                    //烟感报警
+                    params.prefix = this.$device_prefix.SMOKE
+                } else if (this.fireType == 1) {
+                    //燃气告警
+                    params.prefix = this.$device_prefix.GAS
+                } else if (this.fireType == 2) {
+                    //消防水压
+                    params.deviceType = this.$device_type.FIRE_HYDRANT
+                } else if (this.fireType == 3) {
+                    //电表记录
+                    params.deviceType = this.$device_type.ELECTRIC_METER
+                }
+                if (!this.$isEmpty(this.item.value)) {
+                    params.deviceStatus = this.item.value	//设备状态
+                }
+                try {
+                    let res = null;
+                    if (loginType == this.$loginType.ENTERPRISE) {
+                        //企业设备接口
+                        res = await this.$api.fireDevice.page(params)
+                    } else if (loginType == this.$loginType.AGENCY) {
+                        //园区设备接口
+                        res = await this.$api.fireDevice.agencyPage(params)
+                    }
+                    let data = res.data.records
+                    let length = data.length
+                    let total = res.data.total
+                    mescroll.endBySize(length, total);
+                    if (mescroll.num == 1) that.list = []; //如果是第一页需手动制空列表
+                    that.list = that.list.concat(data); //追加新数据
+
+                } catch (e) {
+                    mescroll.endErr();
+                }
+            },
+            /**
+             * 下拉回调
+             * */
+            downFn(mescroll) {
+                setTimeout(() => {
+                    this.mescroll.resetUpScroll()
+                }, 1000)
+            },
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	view{
-		box-sizing: border-box;
-	}
+    view {
+        box-sizing: border-box;
+    }
 </style>

mini-program/garden-wxapp/pages/index/fire/list/list.vue

@@ -1,129 +1,134 @@
 <template>
-	<view class="container">
-		<view class="tabs">
-			<scroll-view scroll-x class="bg-white nav">
-				<view class="flex text-center">
-					<view class="cu-item flex-sub" :class="index==current?'base-color text-xl text-bold ':'text-lg'" v-for="(item,index) in tabs" :key="index" @tap="tabChange(index)" >
-						{{item.name}}
-					</view>
-				</view>
-			</scroll-view>
-		</view>
-		<view style="height: 100%;">
-			<swiper style="height: 100%;" :current="current"  @change="swiperChange"
-				@animationfinish="animationfinish">
-				<swiper-item  v-for="(item, index) in tabs" :key="index">
-					<scroll-view scroll-y style="height: 100%;">
-						<item :fireType="fireType" :refresh="refresh" :i="index" :item="item" :type="current"></item>
-					</scroll-view>
-				</swiper-item>
-			</swiper>
-		</view>
-	</view>
+    <view class="container">
+        <view class="tabs">
+            <scroll-view scroll-x class="bg-white nav">
+                <view class="flex text-center">
+                    <view class="cu-item flex-sub" :class="index==current?'base-color text-xl text-bold ':'text-lg'"
+                          v-for="(item,index) in tabs" :key="index" @tap="tabChange(index)">
+                        {{item.name}}
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+        <view style="height: 100%;">
+            <swiper style="height: 100%;" :current="current" @change="swiperChange"
+                    @animationfinish="animationfinish">
+                <swiper-item v-for="(item, index) in tabs" :key="index">
+                    <scroll-view scroll-y style="height: 100%;">
+                        <item :fireType="fireType" :refresh="refresh" :i="index" :item="item" :type="current"></item>
+                    </scroll-view>
+                </swiper-item>
+            </swiper>
+        </view>
+    </view>
 </template>
 <script>
-	import item from "./comps/item.vue"
-	export default {
-		components: {
-			item
-		},
-		data() {
-			return {
-				//0 烟感报警 1 燃气告警 2 消防水压
-				fireType:0,
-				//是否第一次进入页面
-				isfirst:false,
-				//让item主动刷新
-				refresh:false,
-				scrollLeft:0,
-				current: 0,
-				swiperCurrent:0,
-				tabs: [
-					{
-						name: '全部',
-						value:''
-					},
-					{
-						name: '正常',
-						value:1
-					},
-					{
-						name: '告警',
-						value:2
-					},
-					{
-						name:'失联',
-						value:3
-					},
-					{
-						name:'停用',
-						value:4
-					},
-				],
-			}
-		},
-		onShow(){
-			
-		},
-		onLoad(options) {
-			this.fireType=options.fireType || 0
-			getApp().globalData.fireType=this.fireType
-			if (this.fireType==1) {
-				uni.setNavigationBarTitle({
-				    title: '气感'
-				});
-			}else if (this.fireType==2) {
-				uni.setNavigationBarTitle({
-				    title: '消防栓'
-				});
-			}else if (this.fireType==3) {
-				uni.setNavigationBarTitle({
-				    title: '电表'
-				});
-			}
-		},
-		methods:{
-			tabChange(index) {
-				this.current = index
-				// this.scrollLeft = (index - 1) * 60
-			},
-			swiperChange(e) {
-			  uni.pageScrollTo({
-			      scrollTop: 0,
-			      duration: 0
-			  });
-			  this.current = e.detail.current
-			  // this.scrollLeft = (this.current - 1) * 60
-			},
-			animationfinish({detail: { current }}) {
-				this.swiperCurrent = current;
-				this.current = current;
-			},
-		}
-	}
+    import item from "./comps/item.vue"
+
+    export default {
+        components: {
+            item
+        },
+        data() {
+            return {
+                //0 烟感报警 1 燃气告警 2 消防水压
+                fireType: 0,
+                //是否第一次进入页面
+                isfirst: false,
+                //让item主动刷新
+                refresh: false,
+                scrollLeft: 0,
+                current: 0,
+                swiperCurrent: 0,
+                tabs: [
+                    {
+                        name: '全部',
+                        value: ''
+                    },
+                    {
+                        name: '正常',
+                        value: 1
+                    },
+                    {
+                        name: '告警',
+                        value: 2
+                    },
+                    {
+                        name: '失联',
+                        value: 3
+                    },
+                    {
+                        name: '停用',
+                        value: 4
+                    },
+                ],
+            }
+        },
+        onShow() {
+
+        },
+        onLoad(options) {
+            this.fireType = options.fireType || 0
+            getApp().globalData.fireType = this.fireType
+            if (this.fireType == 1) {
+                uni.setNavigationBarTitle({
+                    title: '气感'
+                });
+            } else if (this.fireType == 2) {
+                uni.setNavigationBarTitle({
+                    title: '消防栓'
+                });
+            } else if (this.fireType == 3) {
+                uni.setNavigationBarTitle({
+                    title: '电表'
+                });
+            }
+        },
+        methods: {
+            tabChange(index) {
+                this.current = index
+                // this.scrollLeft = (index - 1) * 60
+            },
+            swiperChange(e) {
+                uni.pageScrollTo({
+                    scrollTop: 0,
+                    duration: 0
+                });
+                this.current = e.detail.current
+                // this.scrollLeft = (this.current - 1) * 60
+            },
+            animationfinish({detail: {current}}) {
+                this.swiperCurrent = current;
+                this.current = current;
+            },
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	.text-blue{
-		color: #59a5f0;
-	}
-	.text-xl{
-		font-size: 34rpx;
-	}
-	.container {
-	  height: calc(100vh);
-	  background-color: #F6F6F6;
-	  padding: 78rpx 0rpx 0rpx;
-	 .tabs {
-	    position: fixed;
-	    top: -10rpx;
-		left: 0;
-		display: flex;
-		align-items: center;
-		width: 100%;
-		background-color: #FFFFFF;
-		box-sizing: border-box;
-		z-index: 3;
-	  }
-}
+    .text-blue {
+        color: #59a5f0;
+    }
+
+    .text-xl {
+        font-size: 34 rpx;
+    }
+
+    .container {
+        height: calc(100vh);
+        background-color: #F6F6F6;
+        padding: 78 rpx 0 rpx 0 rpx;
+
+        .tabs {
+            position: fixed;
+            top: -10rpx;
+            left: 0;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            background-color: #FFFFFF;
+            box-sizing: border-box;
+            z-index: 3;
+        }
+    }
 </style>

mini-program/garden-wxapp/pages/index/index.vue

@@ -1,770 +1,790 @@
-
 <template>
-	<view class="content">
-		<view class="">
-			<!-- 头部 -->
-			<u-navbar :border-bottom="false" :background="background" :is-back="false" title=" ">
-				<view class="slot-wrap">
-					<view class="padding-left-20 flex" >
-						<u-icon size="34" name="map-fill" color="#FFFFFF"></u-icon>
-						<text class="text-cut-1 text-white"  style="font-size: 32rpx;padding: 0 10rpx;">{{gander?gander:'暂无园区信息'}}</text>
-					</view>
-				</view>
-			</u-navbar>
-			<!-- banner -->
-			<swiper   class="screen-swiper square-dot "  :indicator-dots="true" :circular="true"
-			 :autoplay="true" interval="5000" duration="500">
-				<swiper-item v-for="(item,index) in bannerList" :key="index">
-					<image   :src="item.banners" mode="aspectFill" ></image>
-				</swiper-item>
-			</swiper>
-			<!-- 公告 -->
-			<view v-if="!$isEmpty(noticeList)" class="">
-				<view class="bg-white" style="height: 10rpx;"></view>
-				<hotConsult  @onTap="jump('/pages/index/notice/notice')" @detailTap="goNoticeDetail" :swiperTexts="noticeList"></hotConsult>
-			</view>
-			
-			<!-- 园区信息 -->
-			<view class="bg-white" v-if="loginType=='agency'">
-				<view class="flex"  style="padding: 30rpx; ">
-					<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-					<text class="text-lg text-black">园区信息</text>
-				</view>
-				
-				<view class="cu-list grid col-4 no-border" :key="index">
-					<view class="cu-item" @click="jump(item.url)"  v-for="(item,index) in statistical" :key="index">
-						<view class="grid-icon" >
-							<image  style="width: 70rpx;height: 70rpx;" :src="item.icon"/>
-						</view>
-						<text  style="color: #333333;font-size: 26rpx;" >{{item.title}}</text>
-						<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
-					</view>
-				</view>
-			</view>
-			
-			
-			<!-- 园区服务 -->
-			<view class="bg-white">
-				<view class="flex"  style="padding: 30rpx; ">
-					<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-					<text class="text-lg text-black">园区服务</text>
-				</view>
-				
-				<view class="cu-list grid col-4 no-border">
-					<view class="cu-item" v-if="item.show" @click="jump(item.url)"  v-for="(item,index) in elements" :key="index">
-						<view class="grid-icon" >
-							<image  style="width: 70rpx;height: 70rpx;" :src="item.icon"/>
-						</view>
-						<text  style="color: #333333;font-size: 26rpx;" >{{item.title}}</text>
-						<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
-					</view>
-				</view>
-				
-				
-				<!-- <view class="nav-list  padding-top-30" >
-					<view
-						v-if="item.show"
-						hover-class="none"
-						@click="jump(item.url)"
-						class="nav-li light"  :style="{backgroundColor:item.color}" 
-						v-for="(item,index) in elements" :key="index">
-						<view class="nav-title" style="color: #000000;font-size: 28rpx;">{{item.title}}</view>
-						<view class="" style="padding-top: 10rpx;font-size: 24rpx;color: #acacac;">{{item.name}}{{item.show}}</view>
-						<image :src="item.icon" mode=""></image>
-						<u-badge  :is-center="true" type="error" :count="item.count"></u-badge>
-					</view>
-				</view> -->
-			</view>
-			<view class="bg-white" v-if="loginType!='staff'">
-				<view class="flex"  style="padding: 30rpx; ">
-					<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-					<text class="text-lg">消防服务</text>
-				</view>
-				<view class="cu-list grid col-4 no-border">
-					<view class="cu-item" @click="jump(item.url)"  v-for="(item,index) in fireList" :key="index">
-						<view class="grid-icon" >
-							<image  style="width: 70rpx;height: 70rpx;" :src="item.icon"/>
-						</view>
-						<text  style="color: #333333;font-size: 26rpx;" >{{item.title}}</text>
-						<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
-					</view>
-				</view>
-				
-				<!-- <view class="nav-list  padding-top-30" >
-					<view hover-class="none"
-						@click="jump(item.url)"
-						class="nav-li light"  :style="{backgroundColor:item.color}" 
-						v-for="(item,index) in fireList" :key="index">
-						<view class="nav-title" style="color: #000000;font-size: 28rpx;">{{item.title}}</view>
-						<view class="" style="padding-top: 10rpx;font-size: 24rpx;color: #acacac;">{{item.name}}</view>
-						<image :src="item.icon" mode=""></image>
-					</view>
-				</view> -->
-			</view>
-			<view class="bg-white padding-bottom-20" v-if="newsList.length>0">
-				<view class="flex justify-between" style="padding: 30rpx;">
-					<view class="flex">
-						<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../static/icon/tag1.png" mode=""></image>
-						<text class="text-lg text-black">园区动态</text>
-					</view>
-					<view @click="jump('/pages/news/list')" style="padding-top: 6rpx;font-size: 26rpx;color: #676767;">
-						<text style="font-size: 24rpx;color: #676767;margin-top: 5rpx;">查看更多</text>
-						<text class="cuIcon-right "></text>
-					</view>
-				</view>
-				<infomation :newList="newsList"></infomation>
-			</view>
-			<u-action-sheet @click="ganderChange" :list="ganderArray" v-model="ganderShow"></u-action-sheet>
-		</view>
-		 <u-tabbar v-model="tabbarCurr"
-		  :icon-size="tabbar.iconSize" 
-		  :active-color="tabbar.activeColor" 
-		  :mid-button-size="tabbar.MinButtonSize" 
-		  :list="tabbar.list" :mid-button="true">
-		  </u-tabbar>
-	</view>
+    <view class="content">
+        <view class="">
+            <!-- 头部 -->
+            <u-navbar :border-bottom="false" :background="background" :is-back="false" title=" ">
+                <view class="slot-wrap">
+                    <view class="padding-left-20 flex">
+                        <u-icon size="34" name="map-fill" color="#FFFFFF"></u-icon>
+                        <text class="text-cut-1 text-white" style="font-size: 32rpx;padding: 0 10rpx;">
+                            {{gander?gander:'暂无园区信息'}}
+                        </text>
+                    </view>
+                </view>
+            </u-navbar>
+            <!-- banner -->
+            <swiper class="screen-swiper square-dot " :indicator-dots="true" :circular="true"
+                    :autoplay="true" interval="5000" duration="500">
+                <swiper-item v-for="(item,index) in bannerList" :key="index">
+                    <image :src="item.banners" mode="aspectFill"></image>
+                </swiper-item>
+            </swiper>
+            <!-- 公告 -->
+            <view v-if="!$isEmpty(noticeList)" class="">
+                <view class="bg-white" style="height: 10rpx;"></view>
+                <hotConsult @onTap="jump('/pages/index/notice/notice')" @detailTap="goNoticeDetail"
+                            :swiperTexts="noticeList"></hotConsult>
+            </view>
+
+            <!-- 园区信息 -->
+            <view class="bg-white" v-if="loginType=='agency'">
+                <view class="flex" style="padding: 30rpx; ">
+                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                           src="../../static/icon/tag1.png" mode=""></image>
+                    <text class="text-lg text-black">园区信息</text>
+                </view>
+
+                <view class="cu-list grid col-4 no-border" :key="index">
+                    <view class="cu-item" @click="jump(item.url)" v-for="(item,index) in statistical" :key="index">
+                        <view class="grid-icon">
+                            <image style="width: 70rpx;height: 70rpx;" :src="item.icon"/>
+                        </view>
+                        <text style="color: #333333;font-size: 26rpx;">{{item.title}}</text>
+                        <view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
+                    </view>
+                </view>
+            </view>
+
+
+            <!-- 园区服务 -->
+            <view class="bg-white">
+                <view class="flex" style="padding: 30rpx; ">
+                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                           src="../../static/icon/tag1.png" mode=""></image>
+                    <text class="text-lg text-black">园区服务</text>
+                </view>
+
+                <view class="cu-list grid col-4 no-border">
+                    <view class="cu-item" v-if="item.show" @click="jump(item.url)" v-for="(item,index) in elements"
+                          :key="index">
+                        <view class="grid-icon">
+                            <image style="width: 70rpx;height: 70rpx;" :src="item.icon"/>
+                        </view>
+                        <text style="color: #333333;font-size: 26rpx;">{{item.title}}</text>
+                        <view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
+                    </view>
+                </view>
+
+
+                <!-- <view class="nav-list  padding-top-30" >
+                    <view
+                        v-if="item.show"
+                        hover-class="none"
+                        @click="jump(item.url)"
+                        class="nav-li light"  :style="{backgroundColor:item.color}"
+                        v-for="(item,index) in elements" :key="index">
+                        <view class="nav-title" style="color: #000000;font-size: 28rpx;">{{item.title}}</view>
+                        <view class="" style="padding-top: 10rpx;font-size: 24rpx;color: #acacac;">{{item.name}}{{item.show}}</view>
+                        <image :src="item.icon" mode=""></image>
+                        <u-badge  :is-center="true" type="error" :count="item.count"></u-badge>
+                    </view>
+                </view> -->
+            </view>
+            <view class="bg-white" v-if="loginType!='staff'">
+                <view class="flex" style="padding: 30rpx; ">
+                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                           src="../../static/icon/tag1.png" mode=""></image>
+                    <text class="text-lg">消防服务</text>
+                </view>
+                <view class="cu-list grid col-4 no-border">
+                    <view class="cu-item" @click="jump(item.url)" v-for="(item,index) in fireList" :key="index">
+                        <view class="grid-icon">
+                            <image style="width: 70rpx;height: 70rpx;" :src="item.icon"/>
+                        </view>
+                        <text style="color: #333333;font-size: 26rpx;">{{item.title}}</text>
+                        <view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
+                    </view>
+                </view>
+
+                <!-- <view class="nav-list  padding-top-30" >
+                    <view hover-class="none"
+                        @click="jump(item.url)"
+                        class="nav-li light"  :style="{backgroundColor:item.color}"
+                        v-for="(item,index) in fireList" :key="index">
+                        <view class="nav-title" style="color: #000000;font-size: 28rpx;">{{item.title}}</view>
+                        <view class="" style="padding-top: 10rpx;font-size: 24rpx;color: #acacac;">{{item.name}}</view>
+                        <image :src="item.icon" mode=""></image>
+                    </view>
+                </view> -->
+            </view>
+            <view class="bg-white padding-bottom-20" v-if="newsList.length>0">
+                <view class="flex justify-between" style="padding: 30rpx;">
+                    <view class="flex">
+                        <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
+                               src="../../static/icon/tag1.png" mode=""></image>
+                        <text class="text-lg text-black">园区动态</text>
+                    </view>
+                    <view @click="jump('/pages/news/list')" style="padding-top: 6rpx;font-size: 26rpx;color: #676767;">
+                        <text style="font-size: 24rpx;color: #676767;margin-top: 5rpx;">查看更多</text>
+                        <text class="cuIcon-right "></text>
+                    </view>
+                </view>
+                <infomation :newList="newsList"></infomation>
+            </view>
+            <u-action-sheet @click="ganderChange" :list="ganderArray" v-model="ganderShow"></u-action-sheet>
+        </view>
+        <u-tabbar v-model="tabbarCurr"
+                  :icon-size="tabbar.iconSize"
+                  :active-color="tabbar.activeColor"
+                  :mid-button-size="tabbar.MinButtonSize"
+                  :list="tabbar.list" :mid-button="true">
+        </u-tabbar>
+    </view>
 </template>
 
 <script>
-import {tabbar} from "@/assets/js/tabbar.js"
-import hotConsult from "@/components/hot-consult/hot-consult.vue"
-import infomation from "@/components/infomation/infomation.vue"
-let plugin = requirePlugin("subway");
-export default {
-	components:{
-		hotConsult,infomation
-	},
-	data() {
-		return {
-			background:{
-				backgroundColor:'#5064eb'
-			},
-			
-			//登陆类型
-			loginType:this.$cache.get('loginType') || '',
-			//tabbar
-			tabbarCurr:0,
-			tabbar:tabbar,
-			//园区 label
-			
-			ganderShow:false,
-			//园区列表
-			ganderArray:[], 
-			gander:'',
-			
-			//banner
-			bannerList: [
-				{
-				  'banners': "https://park.nxzhsq.cn/park/miniofile/xlyq/banner.jpg"
-				},
-			],
-			// 公告
-			noticeList:[],
-			//消防服务
-			fireList:[],
-			//园区服务
-		    elements: [],
-			//园区统计
-			statistical:[],
-			//园区动态
-			newsList:[],
-			//是否为党员
-			isPartMember:false,
-			//该人员是否能打卡
-			canPunch:false
-		};
-	},
-	onShow() {
-		if (this.loginType!=this.$loginType.STAFF) {
-			this.fetchWaitAuditNum()
-			this.fetchWaitAuditGuestNum()
-		}
-	},
-	// onReady() {
-	// 	if (this.$cache.get('loginType')!=this.$loginType.STAFF) {
-	// 		let tmp=this.$u.deepClone(tabbar)
-	// 		tmp.list.splice(1,1)
-	// 		this.tabbar=tmp
-	// 	}else{
-	// 		this.tabbar=tabbar
-	// 	}
-	// },
-	onLoad() {
-		//判断员工是否为党员
-		this.checkIsPartMember()
-		//加载静态数据
-		this.fetchStaticData()
-		//加载用户数据
-		this.fetchUserInfo()
-		//加载园区动态
-		this.fetchNewsList()
-		//加载通知公告
-		this.fetchNoticeList()
-		//缓存字段值
-		// this.cacheDict()
-		//获取该员工的打卡规则
-		if (this.$cache.get('loginType')==this.$loginType.STAFF) {
-			this.getRules()
-		}
-	},
-	methods:{
-	    getRules(){
-			let params={
-				personType:0,
-				personId:this.$cache.get('userId')
-			}
-			this.$api.punch.getRule(params).then(res=>{
-				if (res.data) {
-					this.$u.vuex('vuex_punch_rules',res.data)
-					this.canPunch=true
-				}else{
-					this.canPunch=false
-				}
-			}).catch(err=>{
-				this.canPunch=false
-			})
-		},
-		async checkIsPartMember(){
-			if (this.$cache.get('loginType')==this.$loginType.STAFF) {
-				let id=this.$cache.get('userId')
-				let res=await this.$api.party.isPartyMember({id})
-				this.isPartMember=!this.$isEmpty(res.data)
-				this.$u.vuex('vuex_party_person',res.data)
-			}
-		},
-		fetchBanner(){
-			let params={
-				tenantId:this.$cache.get('agencyTenantId')
-			}
-			this.$api.banner.page(params).then(res=>{
-				if (!this.$isEmpty(res.data.records)) {
-					this.bannerList=res.data.records
-				}
-			})
-		},
-		/**
-		 * 获取园区动态
-		 */
-		fetchNewsList(){
-			let params={
-				size:5,
-				agencyId:this.$cache.get('agencyId').toString()
-			}
-			this.$api.CMS.page(params).then(res=>{
-				this.newsList=res.data.records
-			})
-		},
-		/**
-		 * 加载用户数据
-		 */
-		fetchUserInfo(){
-		   if (this.loginType==this.$loginType.STAFF) {
-				//员工
-				let phone=this.$cache.get('phone')
-				this.$api.enterprisestaff.page({phone:phone,examine:1}).then(res=>{
-					let userInfo=res.data.records[0]
-					getApp().globalData.userInfo=userInfo
-					this.$u.vuex('vuex_userInfo',userInfo)
-					this.$cache.put("residentialId",userInfo.residentialId)
-					this.gander=userInfo.enterpriseName
-				})
-		   }else if (this.loginType==this.$loginType.ENTERPRISE) {
-				let creditCode=this.$cache.get('creditCode')
-				this.$api.enterprise.detail({creditCode:creditCode}).then(res=>{
-					this.gander=res.data.enterpriseName
-					getApp().globalData.userInfo=res.data
-					this.$u.vuex('vuex_userInfo',userInfo)
-					this.$cache.put('enterpriseName',res.data.enterpriseName)
-					this.$cache.put("residentialId",res.data.residentialId)
-				})
-		   }else if (this.loginType==this.$loginType.AGENCY) {
-				this.gander=this.$cache.get('agency')
-		   }
-		},
-		/**
-		 * 加载待审核员工的数量
-		 */
-		fetchWaitAuditNum(){
-			let that=this
-			let params={
-				size:200,
-				examine:0
-			}
-			if (this.loginType==this.$loginType.ENTERPRISE) {
-				params.enterpriseId=this.$cache.get('enterpriseId')
-			}
-			if (this.loginType==this.$loginType.AGENCY) {
-				params.agencyId=this.$cache.get('agencyId')
-			}
-			
-			this.$api.enterprisestaff.page(params).then(res=>{
-				this.elements.forEach(item=>{
-					if (item.url=='/pages/index/staffAudit/list') {
-						item.count=res.data.total
-					}
-				})
-			})
-		},
-		fetchWaitAuditGuestNum(){
-			let params={
-				checkState:0
-			}
-			//企业
-			if (this.loginType==this.$loginType.ENTERPRISE) {
-				params.enterpriseId=this.$cache.get('enterpriseId')
-			}
-			//园区
-			if (this.loginType==this.$loginType.AGENCY) {
-				params.agencyId=this.$cache.get('agencyId')
-			}
-			this.$api.guest.page(params).then(res=>{
-				this.elements.forEach(item=>{
-					if (item.url=='/pages/guest/records/records') {
-						item.count=res.data.total
-					}
-				})
-			})
-		},
-		/**
-		 * @param {Object} index更改园区
-		 */
-		ganderChange(index){
-			this.gander=this.ganderArray[index].text
-		},
-		/**
-		 * 跳转
-		 * @param {Object} url
-		 */
-		jump(url){
-			if (url=='/party/pages/home/home') {
-				//智慧党建
-				if (!this.isPartMember) {
-					url='/party/pages/empty/empty'
-				}
-			}
-			//打卡
-			if (url=='/punch/pages/index/index') {
-				if (this.canPunch) {
-					uni.navigateTo({
-						url
-					})
-					return
-				}
-				this.$dialog.showModal('您还未绑定打卡规则，请联系企业负责人',false)
-				return
-			}
-			
-			//地铁图
-			if (url=='subway') {
-				let key='WAGBZ-EFIKU-2W2VF-4UX5F-ATB3F-HKBFU'
-				let referer='新邻园区'
-				uni.navigateTo({
-					url: 'plugin://subway/index?key=' + key + '&referer=' + referer
-				})
-				return
-			}
-			
-			if (!this.$isEmpty(url)) {
-				uni.navigateTo({
-					url:url,
-					fail(err) {
-						console.log(err);
-					}
-				})
-			}
-		},
-		/**
-		 * 加载通知列表
-		 */
-		fetchNoticeList(){
-			let params={
-				agencyId:this.$cache.get('agencyId')
-			}
-			this.$api.notice.page(params).then(res=>{
-				this.noticeList=res.data.records
-			})
-		},
-		/**
-		 * 跳转到通知详情
-		 */
-		goNoticeDetail(item){
-			console.log(item);
-			getApp().globalData.noticeDetail=item
-			uni.navigateTo({
-				url:"/pages/index/notice/detail",
-			})
-		},
-		//缓存字典的值
-		async cacheDict(){
-			let dictCacheData=this.$cache.get('dict')
-			if (dictCacheData&&
-				dictCacheData.carTypeList&&
-				dictCacheData.carPropertiesList&&
-				dictCacheData.fuelCategoryList&&
-				dictCacheData.partyMeetingClass&&
-				dictCacheData.partyInfoClass) {
-				return
-			}
-			//有效时间
-			let validTime=1*24*60*60*3
-			
-			//车辆类型
-			let carTypeList=[]
-			//车辆性质
-			let carPropertiesList=[]
-			//燃油类别
-			let fuelCategoryList=[]
-			//三会一课
-			let partyMeetingClass=[]
-			//党内资讯
-			let partyInfoClass=[]
-			
-			// 请求字典begin
-			let res1=await this.$api.dict({code:'car_type'})
-			res1.data.forEach((item)=>{
-				let tmp={
-					value:item.dictKey,
-					label:item.dictValue
-				}
-				carTypeList.push(tmp)
-			})
-			
-			let res2=await this.$api.dict({code:'car_properties'})
-			res2.data.forEach((item)=>{
-				let tmp={
-					value:item.dictKey,
-					label:item.dictValue
-				}
-				carPropertiesList.push(tmp)
-			})
-		
-			let res3=await this.$api.dict({code:'fuel_category'})
-			res3.data.forEach((item)=>{
-				let tmp={
-					value:item.dictKey,
-					label:item.dictValue
-				}
-				fuelCategoryList.push(tmp)
-			})
-			
-			//三会一课分类
-			let res4=await this.$api.dict({code:'party_meeting_class'})
-			res4.data.forEach((item)=>{
-				let tmp={
-					value:item.dictKey,
-					label:item.dictValue
-				}
-				partyMeetingClass.push(tmp)
-			})
-
-			//党内资讯
-			let res5=await this.$api.dict({code:'party_new_class'})
-			res5.data.forEach((item)=>{
-				let tmp={
-					value:item.dictKey,
-					label:item.dictValue
-				}
-				partyInfoClass.push(tmp)
-			})
-			
-			// 请求字典end
-			
-			//缓存字典的值begin
-			let dict={
-				carTypeList,
-				carPropertiesList,
-				fuelCategoryList,
-				partyMeetingClass,
-				partyInfoClass
-			}
-			this.$cache.put('dict',dict,validTime)
-			//缓存字典的值end
-		},
-		/**
-		 * 加载静态数据
-		 */
-		fetchStaticData(){
-			this.statistical=[
-				{
-					title: '园区信息',
-					name: 'Campus information',
-					color: '#e3f5ff',
-					icon:'../../static/icon/yuanqu.png',
-					url:'/pages/agency/agency',
-					count:0,
-				},
-				{
-					title: '数据统计',
-					icon:'../../static/icon/data-service.png',
-					url:'/pages/agency/agency?current=1',
-				},
-				{
-					title: '消防统计',
-					icon:'../../static/icon/fire-service.png',
-					url:'/pages/agency/agency?current=2',
-				},
-			]
-			
-			this.elements=[
-				{
-					title: '园区企业',
-					name: 'My business',
-					color: '#e3f5ff',
-					icon:'../../static/icon/qiyegl.png',
-					url:'/pages/enterprise/enterprise',
-					count:0,
-					show:this.loginType==this.$loginType.AGENCY
-				},
-				{
-					title: '我的企业',
-					name: 'My business',
-					color: '#e3f5ff',
-					icon:'../../static/icon/yuanqu.png',
-					url:'/pages/company/company',
-					count:0,
-					show:this.loginType!=this.$loginType.AGENCY
-				},
-				{
-					title: '我的资料',
-					name: 'My profile',
-					color: '#ecf3f9',
-					icon:'../../static/icon/info.png',
-					url:'/pages/index/myinfo/myinfo',
-					count:0,
-					show:this.loginType==this.$loginType.STAFF
-				}, 
-				{
-					title: '员工审核',
-					name: 'Staff certification',
-					color: '#eaebf9',
-					icon:'../../static/icon/info.png',
-					url:'/pages/index/staffAudit/list',
-					count:0,
-					show:this.loginType!=this.$loginType.STAFF
-				},
-				{
-					title: '访客审核',
-					icon:'../../static/icon/guest-gl.png',
-					url:'/pages/guest/records/records',
-					count:0,
-					show:this.loginType!=this.$loginType.STAFF
-				},
-				{
-					title: '我的测温',
-					name: 'My temperature',
-					color: '#e5eef9',
-					icon:'../../static/icon/cewen.png',
-					url:'/pages/index/staff-temperature/list',
-					count:0,
-					show:this.loginType==this.$loginType.STAFF
-				}, 
-				{
-					title: '测温记录',
-					name: 'Staff temperature',
-					color: '#e5eef9',
-					icon:'../../static/icon/cewen.png',
-					url:'/pages/index/staff-temperature/list',
-					count:0,
-					show:this.loginType!=this.$loginType.STAFF
-				}, 
-				{
-					title: '通行记录',
-					name: 'Access records',
-					color: '#e9f9f3',
-					icon:'../../static/icon/jilu.png',
-					url:'/pages/index/access-record/access-record',
-					count:0,
-					show:true
-				},
-				{
-					title: this.loginType==this.$loginType.STAFF?'我的车辆':'车辆管理',
-					name: 'Notice managerment',
-					color: '#eaebf9',
-					icon:'../../static/icon/car.png',
-					url:this.loginType==this.$loginType.STAFF?'/pages/index/car/my-car/my-car':'/pages/index/car/car-manager/car-manager',
-					count:0,
-					show:true
-				},
-				{
-					title: '车辆记录',
-					name: 'The vehicle record',
-					color: '#fcf5f3',
-					icon:'../../static/icon/car-records.png',
-					url:'/pages/index/car/list',
-					count:0,
-					show:this.loginType==this.$loginType.AGENCY
-				}, 
-				{
-					title: '企业项目',
-					icon:'../../static/icon/project1.png',
-					url:'/pages/management/product/product',
-					count:0,
-					show:this.loginType==this.$loginType.ENTERPRISE
-				}, 
-				{
-					title: '打卡',
-					icon:'../../static/icon/dk1.png',
-					url:'/punch/pages/index/index',
-					count:0,
-					show:this.loginType==this.$loginType.STAFF
-				}, 
-				{
-					title: '智慧党建',
-					icon:'../../static/icon/dang.png',
-					url:'/party/pages/home/home',
-					count:0,
-					show:this.loginType==this.$loginType.STAFF
-				}, 
-				{
-					title: '视频监控',
-					icon:'../../static/icon/live.png',
-					url:'/pages/live/live',
-					count:0,
-					show:false
-					// show:this.loginType==this.$loginType.AGENCY
-				}, 
-				{
-					title: '地铁图',
-					icon:'../../static/icon/subway.png',
-					url:'subway',
-					count:0,
-					show:this.loginType==this.$loginType.STAFF
-				}, 
-				{
-					title: '公告管理',
-					name: 'Notice managerment',
-					color: '#eaebf9',
-					icon:'../../static/icon/tongzhi.png',
-					url:'/pages/index/notice/list',
-					count:0,
-					show:this.loginType==this.$loginType.AGENCY
-				},
-			]
-			this.fireList=[
-				{
-					title: '烟感报警',
-					name: 'Smoke alarm',
-					color: '#e5eef9',
-					icon:'../../static/icon/yangan.png',
-					url:"/pages/index/fire/list/list?fireType=0"
-				},
-				{
-					title: '消防水压',
-					name: 'Fire water pressure',
-					color: '#e9f9f3',
-					icon: '../../static/icon/xiaofang.png',
-					url:"/pages/index/fire/list/list?fireType=2"
-				}, 
-				{
-					title: '燃气告警',
-					name: 'Gas alarm',
-					color: '#ffefef',
-					icon: '../../static/icon/ranqi.png',
-					url:"/pages/index/fire/list/list?fireType=1"
-				}, 
-				
-				{
-					title: '电表设备',
-					name: 'Metering equipment',
-					color: '#e3f5ff',
-					icon:'../../static/icon/dianbiao.png',
-					// icon: '../../static/index/fire/dianbiao.png',
-					url:"/pages/index/fire/list/list?fireType=3"
-				}, 
-				
-			]
-		}
-	}
-};
+    import {tabbar} from "@/assets/js/tabbar.js"
+    import hotConsult from "@/components/hot-consult/hot-consult.vue"
+    import infomation from "@/components/infomation/infomation.vue"
+
+    let plugin = requirePlugin("subway");
+    export default {
+        components: {
+            hotConsult, infomation
+        },
+        data() {
+            return {
+                background: {
+                    backgroundColor: '#5064eb'
+                },
+
+                //登陆类型
+                loginType: this.$cache.get('loginType') || '',
+                //tabbar
+                tabbarCurr: 0,
+                tabbar: tabbar,
+                //园区 label
+
+                ganderShow: false,
+                //园区列表
+                ganderArray: [],
+                gander: '',
+
+                //banner
+                bannerList: [
+                    {
+                        'banners': "https://park.nxzhsq.cn/park/miniofile/xlyq/banner.jpg"
+                    },
+                ],
+                // 公告
+                noticeList: [],
+                //消防服务
+                fireList: [],
+                //园区服务
+                elements: [],
+                //园区统计
+                statistical: [],
+                //园区动态
+                newsList: [],
+                //是否为党员
+                isPartMember: false,
+                //该人员是否能打卡
+                canPunch: false
+            };
+        },
+        onShow() {
+            if (this.loginType != this.$loginType.STAFF) {
+                this.fetchWaitAuditNum()
+                this.fetchWaitAuditGuestNum()
+            }
+        },
+        // onReady() {
+        // 	if (this.$cache.get('loginType')!=this.$loginType.STAFF) {
+        // 		let tmp=this.$u.deepClone(tabbar)
+        // 		tmp.list.splice(1,1)
+        // 		this.tabbar=tmp
+        // 	}else{
+        // 		this.tabbar=tabbar
+        // 	}
+        // },
+        onLoad() {
+            //判断员工是否为党员
+            this.checkIsPartMember()
+            //加载静态数据
+            this.fetchStaticData()
+            //加载用户数据
+            this.fetchUserInfo()
+            //加载园区动态
+            this.fetchNewsList()
+            //加载通知公告
+            this.fetchNoticeList()
+            //缓存字段值
+            // this.cacheDict()
+            //获取该员工的打卡规则
+            if (this.$cache.get('loginType') == this.$loginType.STAFF) {
+                this.getRules()
+            }
+        },
+        methods: {
+            getRules() {
+                let params = {
+                    personType: 0,
+                    personId: this.$cache.get('userId')
+                }
+                this.$api.punch.getRule(params).then(res => {
+                    if (res.data) {
+                        this.$u.vuex('vuex_punch_rules', res.data)
+                        this.canPunch = true
+                    } else {
+                        this.canPunch = false
+                    }
+                }).catch(err => {
+                    this.canPunch = false
+                })
+            },
+            async checkIsPartMember() {
+                if (this.$cache.get('loginType') == this.$loginType.STAFF) {
+                    let id = this.$cache.get('userId')
+                    let res = await this.$api.party.isPartyMember({id})
+                    this.isPartMember = !this.$isEmpty(res.data)
+                    this.$u.vuex('vuex_party_person', res.data)
+                }
+            },
+            fetchBanner() {
+                let params = {
+                    tenantId: this.$cache.get('agencyTenantId')
+                }
+                this.$api.banner.page(params).then(res => {
+                    if (!this.$isEmpty(res.data.records)) {
+                        this.bannerList = res.data.records
+                    }
+                })
+            },
+            /**
+             * 获取园区动态
+             */
+            fetchNewsList() {
+                let params = {
+                    size: 5,
+                    agencyId: this.$cache.get('agencyId').toString()
+                }
+                this.$api.CMS.page(params).then(res => {
+                    this.newsList = res.data.records
+                })
+            },
+            /**
+             * 加载用户数据
+             */
+            fetchUserInfo() {
+                if (this.loginType == this.$loginType.STAFF) {
+                    //员工
+                    let phone = this.$cache.get('phone')
+                    this.$api.enterprisestaff.page({phone: phone, examine: 1}).then(res => {
+                        let userInfo = res.data.records[0]
+                        getApp().globalData.userInfo = userInfo
+                        this.$u.vuex('vuex_userInfo', userInfo)
+                        this.$cache.put("residentialId", userInfo.residentialId)
+                        this.gander = userInfo.enterpriseName
+                    })
+                } else if (this.loginType == this.$loginType.ENTERPRISE) {
+                    let creditCode = this.$cache.get('creditCode')
+                    this.$api.enterprise.detail({creditCode: creditCode}).then(res => {
+                        this.gander = res.data.enterpriseName
+                        getApp().globalData.userInfo = res.data
+                        this.$u.vuex('vuex_userInfo', userInfo)
+                        this.$cache.put('enterpriseName', res.data.enterpriseName)
+                        this.$cache.put("residentialId", res.data.residentialId)
+                    })
+                } else if (this.loginType == this.$loginType.AGENCY) {
+                    this.gander = this.$cache.get('agency')
+                }
+            },
+            /**
+             * 加载待审核员工的数量
+             */
+            fetchWaitAuditNum() {
+                let that = this
+                let params = {
+                    size: 200,
+                    examine: 0
+                }
+                if (this.loginType == this.$loginType.ENTERPRISE) {
+                    params.enterpriseId = this.$cache.get('enterpriseId')
+                }
+                if (this.loginType == this.$loginType.AGENCY) {
+                    params.agencyId = this.$cache.get('agencyId')
+                }
+
+                this.$api.enterprisestaff.page(params).then(res => {
+                    this.elements.forEach(item => {
+                        if (item.url == '/pages/index/staffAudit/list') {
+                            item.count = res.data.total
+                        }
+                    })
+                })
+            },
+            fetchWaitAuditGuestNum() {
+                let params = {
+                    checkState: 0
+                }
+                //企业
+                if (this.loginType == this.$loginType.ENTERPRISE) {
+                    params.enterpriseId = this.$cache.get('enterpriseId')
+                }
+                //园区
+                if (this.loginType == this.$loginType.AGENCY) {
+                    params.agencyId = this.$cache.get('agencyId')
+                }
+                this.$api.guest.page(params).then(res => {
+                    this.elements.forEach(item => {
+                        if (item.url == '/pages/guest/records/records') {
+                            item.count = res.data.total
+                        }
+                    })
+                })
+            },
+            /**
+             * @param {Object} index更改园区
+             */
+            ganderChange(index) {
+                this.gander = this.ganderArray[index].text
+            },
+            /**
+             * 跳转
+             * @param {Object} url
+             */
+            jump(url) {
+                if (url == '/party/pages/home/home') {
+                    //智慧党建
+                    if (!this.isPartMember) {
+                        url = '/party/pages/empty/empty'
+                    }
+                }
+                //打卡
+                if (url == '/punch/pages/index/index') {
+                    if (this.canPunch) {
+                        uni.navigateTo({
+                            url
+                        })
+                        return
+                    }
+                    this.$dialog.showModal('您还未绑定打卡规则，请联系企业负责人', false)
+                    return
+                }
+
+                //地铁图
+                if (url == 'subway') {
+                    let key = 'WAGBZ-EFIKU-2W2VF-4UX5F-ATB3F-HKBFU'
+                    let referer = '新邻园区'
+                    uni.navigateTo({
+                        url: 'plugin://subway/index?key=' + key + '&referer=' + referer
+                    })
+                    return
+                }
+
+                if (!this.$isEmpty(url)) {
+                    uni.navigateTo({
+                        url: url,
+                        fail(err) {
+                            console.log(err);
+                        }
+                    })
+                }
+            },
+            /**
+             * 加载通知列表
+             */
+            fetchNoticeList() {
+                let params = {
+                    agencyId: this.$cache.get('agencyId')
+                }
+                this.$api.notice.page(params).then(res => {
+                    this.noticeList = res.data.records
+                })
+            },
+            /**
+             * 跳转到通知详情
+             */
+            goNoticeDetail(item) {
+                console.log(item);
+                getApp().globalData.noticeDetail = item
+                uni.navigateTo({
+                    url: "/pages/index/notice/detail",
+                })
+            },
+            //缓存字典的值
+            async cacheDict() {
+                let dictCacheData = this.$cache.get('dict')
+                if (dictCacheData &&
+                    dictCacheData.carTypeList &&
+                    dictCacheData.carPropertiesList &&
+                    dictCacheData.fuelCategoryList &&
+                    dictCacheData.partyMeetingClass &&
+                    dictCacheData.partyInfoClass) {
+                    return
+                }
+                //有效时间
+                let validTime = 1 * 24 * 60 * 60 * 3
+
+                //车辆类型
+                let carTypeList = []
+                //车辆性质
+                let carPropertiesList = []
+                //燃油类别
+                let fuelCategoryList = []
+                //三会一课
+                let partyMeetingClass = []
+                //党内资讯
+                let partyInfoClass = []
+
+                // 请求字典begin
+                let res1 = await this.$api.dict({code: 'car_type'})
+                res1.data.forEach((item) => {
+                    let tmp = {
+                        value: item.dictKey,
+                        label: item.dictValue
+                    }
+                    carTypeList.push(tmp)
+                })
+
+                let res2 = await this.$api.dict({code: 'car_properties'})
+                res2.data.forEach((item) => {
+                    let tmp = {
+                        value: item.dictKey,
+                        label: item.dictValue
+                    }
+                    carPropertiesList.push(tmp)
+                })
+
+                let res3 = await this.$api.dict({code: 'fuel_category'})
+                res3.data.forEach((item) => {
+                    let tmp = {
+                        value: item.dictKey,
+                        label: item.dictValue
+                    }
+                    fuelCategoryList.push(tmp)
+                })
+
+                //三会一课分类
+                let res4 = await this.$api.dict({code: 'party_meeting_class'})
+                res4.data.forEach((item) => {
+                    let tmp = {
+                        value: item.dictKey,
+                        label: item.dictValue
+                    }
+                    partyMeetingClass.push(tmp)
+                })
+
+                //党内资讯
+                let res5 = await this.$api.dict({code: 'party_new_class'})
+                res5.data.forEach((item) => {
+                    let tmp = {
+                        value: item.dictKey,
+                        label: item.dictValue
+                    }
+                    partyInfoClass.push(tmp)
+                })
+
+                // 请求字典end
+
+                //缓存字典的值begin
+                let dict = {
+                    carTypeList,
+                    carPropertiesList,
+                    fuelCategoryList,
+                    partyMeetingClass,
+                    partyInfoClass
+                }
+                this.$cache.put('dict', dict, validTime)
+                //缓存字典的值end
+            },
+            /**
+             * 加载静态数据
+             */
+            fetchStaticData() {
+                this.statistical = [
+                    {
+                        title: '园区信息',
+                        name: 'Campus information',
+                        color: '#e3f5ff',
+                        icon: '../../static/icon/yuanqu.png',
+                        url: '/pages/agency/agency',
+                        count: 0,
+                    },
+                    {
+                        title: '数据统计',
+                        icon: '../../static/icon/data-service.png',
+                        url: '/pages/agency/agency?current=1',
+                    },
+                    {
+                        title: '消防统计',
+                        icon: '../../static/icon/fire-service.png',
+                        url: '/pages/agency/agency?current=2',
+                    },
+                ]
+
+                this.elements = [
+                    {
+                        title: '园区企业',
+                        name: 'My business',
+                        color: '#e3f5ff',
+                        icon: '../../static/icon/qiyegl.png',
+                        url: '/pages/enterprise/enterprise',
+                        count: 0,
+                        show: this.loginType == this.$loginType.AGENCY
+                    },
+                    {
+                        title: '我的企业',
+                        name: 'My business',
+                        color: '#e3f5ff',
+                        icon: '../../static/icon/yuanqu.png',
+                        url: '/pages/company/company',
+                        count: 0,
+                        show: this.loginType != this.$loginType.AGENCY
+                    },
+                    {
+                        title: '我的资料',
+                        name: 'My profile',
+                        color: '#ecf3f9',
+                        icon: '../../static/icon/info.png',
+                        url: '/pages/index/myinfo/myinfo',
+                        count: 0,
+                        show: this.loginType == this.$loginType.STAFF
+                    },
+                    {
+                        title: '员工审核',
+                        name: 'Staff certification',
+                        color: '#eaebf9',
+                        icon: '../../static/icon/info.png',
+                        url: '/pages/index/staffAudit/list',
+                        count: 0,
+                        show: this.loginType != this.$loginType.STAFF
+                    },
+                    {
+                        title: '访客审核',
+                        icon: '../../static/icon/guest-gl.png',
+                        url: '/pages/guest/records/records',
+                        count: 0,
+                        show: this.loginType != this.$loginType.STAFF
+                    },
+                    {
+                        title: '我的测温',
+                        name: 'My temperature',
+                        color: '#e5eef9',
+                        icon: '../../static/icon/cewen.png',
+                        url: '/pages/index/staff-temperature/list',
+                        count: 0,
+                        show: this.loginType == this.$loginType.STAFF
+                    },
+                    {
+                        title: '测温记录',
+                        name: 'Staff temperature',
+                        color: '#e5eef9',
+                        icon: '../../static/icon/cewen.png',
+                        url: '/pages/index/staff-temperature/list',
+                        count: 0,
+                        show: this.loginType != this.$loginType.STAFF
+                    },
+                    {
+                        title: '通行记录',
+                        name: 'Access records',
+                        color: '#e9f9f3',
+                        icon: '../../static/icon/jilu.png',
+                        url: '/pages/index/access-record/access-record',
+                        count: 0,
+                        show: true
+                    },
+                    {
+                        title: this.loginType == this.$loginType.STAFF ? '我的车辆' : '车辆管理',
+                        name: 'Notice managerment',
+                        color: '#eaebf9',
+                        icon: '../../static/icon/car.png',
+                        url: this.loginType == this.$loginType.STAFF ? '/pages/index/car/my-car/my-car' : '/pages/index/car/car-manager/car-manager',
+                        count: 0,
+                        show: true
+                    },
+                    {
+                        title: '车辆记录',
+                        name: 'The vehicle record',
+                        color: '#fcf5f3',
+                        icon: '../../static/icon/car-records.png',
+                        url: '/pages/index/car/list',
+                        count: 0,
+                        show: this.loginType == this.$loginType.AGENCY
+                    },
+                    {
+                        title: '企业项目',
+                        icon: '../../static/icon/project1.png',
+                        url: '/pages/management/product/product',
+                        count: 0,
+                        show: this.loginType == this.$loginType.ENTERPRISE
+                    },
+                    {
+                        title: '打卡',
+                        icon: '../../static/icon/dk1.png',
+                        url: '/punch/pages/index/index',
+                        count: 0,
+                        show: this.loginType == this.$loginType.STAFF
+                    },
+                    {
+                        title: '智慧党建',
+                        icon: '../../static/icon/dang.png',
+                        url: '/party/pages/home/home',
+                        count: 0,
+                        show: this.loginType == this.$loginType.STAFF
+                    },
+                    {
+                        title: '视频监控',
+                        icon: '../../static/icon/live.png',
+                        url: '/pages/live/live',
+                        count: 0,
+                        show: false
+                        // show:this.loginType==this.$loginType.AGENCY
+                    },
+                    {
+                        title: '地铁图',
+                        icon: '../../static/icon/subway.png',
+                        url: 'subway',
+                        count: 0,
+                        show: this.loginType == this.$loginType.STAFF
+                    },
+                    {
+                        title: '公告管理',
+                        name: 'Notice managerment',
+                        color: '#eaebf9',
+                        icon: '../../static/icon/tongzhi.png',
+                        url: '/pages/index/notice/list',
+                        count: 0,
+                        show: this.loginType == this.$loginType.AGENCY
+                    },
+                ]
+                this.fireList = [
+                    {
+                        title: '烟感报警',
+                        name: 'Smoke alarm',
+                        color: '#e5eef9',
+                        icon: '../../static/icon/yangan.png',
+                        url: "/pages/index/fire/list/list?fireType=0"
+                    },
+                    {
+                        title: '消防水压',
+                        name: 'Fire water pressure',
+                        color: '#e9f9f3',
+                        icon: '../../static/icon/xiaofang.png',
+                        url: "/pages/index/fire/list/list?fireType=2"
+                    },
+                    {
+                        title: '燃气告警',
+                        name: 'Gas alarm',
+                        color: '#ffefef',
+                        icon: '../../static/icon/ranqi.png',
+                        url: "/pages/index/fire/list/list?fireType=1"
+                    },
+
+                    {
+                        title: '电表设备',
+                        name: 'Metering equipment',
+                        color: '#e3f5ff',
+                        icon: '../../static/icon/dianbiao.png',
+                        // icon: '../../static/index/fire/dianbiao.png',
+                        url: "/pages/index/fire/list/list?fireType=3"
+                    },
+
+                ]
+            }
+        }
+    };
 </script>
 
 <style lang="scss" scoped>
-	page,.content{
-		background-color: #FFFFFF;
-		min-height: 100vh;
-	}
-	//四宫格 begin
-	.nav-list {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: flex-start;
-	}
-	.nav-li {
-		padding: 30upx 30rpx;
-		border-radius: 12upx;
-		width: 44%;
-		margin: 10rpx 2% 10upx;
-		background-size: cover;
-		background-position: center;
-		position: relative;
-		z-index: 1;
-	}
-	.nav-li::after {
-		content: "";
-		position: absolute;
-		z-index: -1;
-		background-color: inherit;
-		width: 100%;
-		height: 100%;
-		left: 0;
-		bottom: -10%;
-		border-radius: 10upx;
-		opacity: 0.2;
-		transform: scale(0.9, 0.9);
-	}
-	.nav-li.cur {
-		color: #fff;
-		background: rgb(94, 185, 94);
-		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
-	}
-	.nav-title {
-		font-size: 32upx;
-		font-weight: 300;
-	}
-	.nav-title::first-letter {
-		font-size: 40upx;
-		margin-right: 4upx;
-	}
-	.nav-name {
-		font-size: 28upx;
-		text-transform: Capitalize;
-		margin-top: 20upx;
-		position: relative;
-	}
-	.nav-name::before {
-		content: "";
-		position: absolute;
-		display: block;
-		width: 40upx;
-		height: 6upx;
-		background: #fff;
-		bottom: 0;
-		right: 0;
-		opacity: 0.5;
-	}
-	.nav-name::after {
-		content: "";
-		position: absolute;
-		display: block;
-		width: 100upx;
-		height: 1px;
-		background: #fff;
-		bottom: 0;
-		right: 40upx;
-		opacity: 0.3;
-	}
-	.nav-name::first-letter {
-		font-weight: bold;
-		font-size: 36upx;
-		margin-right: 1px;
-	}
-	.nav-li image {
-		position: absolute;
-		right: 30upx;
-		top: 22upx;
-		width: 66upx;
-		height: 66upx;
-	}
-	//四宫格 end
-	
+    page, .content {
+        background-color: #FFFFFF;
+        min-height: 100vh;
+    }
+
+    //四宫格 begin
+    .nav-list {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+
+    .nav-li {
+        padding: 30 upx 30 rpx;
+        border-radius: 12 upx;
+        width: 44%;
+        margin: 10 rpx 2% 10 upx;
+        background-size: cover;
+        background-position: center;
+        position: relative;
+        z-index: 1;
+    }
+
+    .nav-li::after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        background-color: inherit;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        bottom: -10%;
+        border-radius: 10 upx;
+        opacity: 0.2;
+        transform: scale(0.9, 0.9);
+    }
+
+    .nav-li.cur {
+        color: #fff;
+        background: rgb(94, 185, 94);
+        box-shadow: 4 upx 4 upx 6 upx rgba(94, 185, 94, 0.4);
+    }
+
+    .nav-title {
+        font-size: 32 upx;
+        font-weight: 300;
+    }
+
+    .nav-title::first-letter {
+        font-size: 40 upx;
+        margin-right: 4 upx;
+    }
+
+    .nav-name {
+        font-size: 28 upx;
+        text-transform: Capitalize;
+        margin-top: 20 upx;
+        position: relative;
+    }
+
+    .nav-name::before {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 40 upx;
+        height: 6 upx;
+        background: #fff;
+        bottom: 0;
+        right: 0;
+        opacity: 0.5;
+    }
+
+    .nav-name::after {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 100 upx;
+        height: 1px;
+        background: #fff;
+        bottom: 0;
+        right: 40 upx;
+        opacity: 0.3;
+    }
+
+    .nav-name::first-letter {
+        font-weight: bold;
+        font-size: 36 upx;
+        margin-right: 1px;
+    }
+
+    .nav-li image {
+        position: absolute;
+        right: 30 upx;
+        top: 22 upx;
+        width: 66 upx;
+        height: 66 upx;
+    }
+
+    //四宫格 end
+
 </style>

mini-program/garden-wxapp/pages/index/my-temperature/deatil.vue

@@ -1,83 +1,86 @@
 <template>
-	<view class="content ">
-		<view class="flex flex-direction ">
-			<view class="flex justify-between">
-				<view class="">
-					<view class="item">
-						<text class="cuIcon-peoplefill text-blue margin-right-10"></text>
-						<text class="text-bold padding-right-10">姓名：</text>
-						<text >{{dataDetail.personName}}</text>
-					</view>
-					<view class="item">
-						<text class="cuIcon-male text-blue margin-right-10"></text>
-						<text class="text-bold padding-right-10">性别：</text>
-						<text v-text="dataDetail.gender==0?'男':'女'"></text>
-					</view>
-					<view class="item">
-						<text class="cuIcon-hotfill text-blue margin-right-10"></text>
-						<text class="text-bold padding-right-10">体温：</text>
-						<text>{{dataDetail.temperature}} ℃</text>
-					</view>
-					<view class="item">
-						<text class="cuIcon-activityfill text-blue margin-right-10"></text>
-						<text class="text-bold padding-right-10">相机名称：</text>
-						<text>{{dataDetail.cameraName}}</text>
-					</view>
-				</view>
-				<view class="padding-top-20">
-					<image @click="previewImg(dataDetail.faceUrl)"  style="width: 220rpx;height: 250rpx;border-radius: 12rpx;"  :src="dataDetail.faceUrl"></image>
-				</view>
-			</view>
-			<view class="item">
-				<text class="cuIcon-mobilefill text-blue margin-right-10"></text>
-				<text class="text-bold padding-right-10">手机号：</text>
-				<text>{{dataDetail.phone}}</text>
-			</view>
-			<view class="item">
-				<text class="cuIcon-timefill text-blue margin-right-10"></text>
-				<text class="text-bold padding-right-10">测温时间：</text>
-				<text>{{dataDetail.recogTime}}</text>
-			</view>
-			<view class="item">
-				<text class="cuIcon-locationfill text-blue margin-right-10"></text>
-				<text class="text-bold padding-right-10">安装位置：</text>
-				<text>{{dataDetail.address?dataDetail.address:'未知'}}</text>
-			</view>
-		</view>
-	</view>
+    <view class="content ">
+        <view class="flex flex-direction ">
+            <view class="flex justify-between">
+                <view class="">
+                    <view class="item">
+                        <text class="cuIcon-peoplefill text-blue margin-right-10"></text>
+                        <text class="text-bold padding-right-10">姓名：</text>
+                        <text>{{dataDetail.personName}}</text>
+                    </view>
+                    <view class="item">
+                        <text class="cuIcon-male text-blue margin-right-10"></text>
+                        <text class="text-bold padding-right-10">性别：</text>
+                        <text v-text="dataDetail.gender==0?'男':'女'"></text>
+                    </view>
+                    <view class="item">
+                        <text class="cuIcon-hotfill text-blue margin-right-10"></text>
+                        <text class="text-bold padding-right-10">体温：</text>
+                        <text>{{dataDetail.temperature}} ℃</text>
+                    </view>
+                    <view class="item">
+                        <text class="cuIcon-activityfill text-blue margin-right-10"></text>
+                        <text class="text-bold padding-right-10">相机名称：</text>
+                        <text>{{dataDetail.cameraName}}</text>
+                    </view>
+                </view>
+                <view class="padding-top-20">
+                    <image @click="previewImg(dataDetail.faceUrl)"
+                           style="width: 220rpx;height: 250rpx;border-radius: 12rpx;" :src="dataDetail.faceUrl"></image>
+                </view>
+            </view>
+            <view class="item">
+                <text class="cuIcon-mobilefill text-blue margin-right-10"></text>
+                <text class="text-bold padding-right-10">手机号：</text>
+                <text>{{dataDetail.phone}}</text>
+            </view>
+            <view class="item">
+                <text class="cuIcon-timefill text-blue margin-right-10"></text>
+                <text class="text-bold padding-right-10">测温时间：</text>
+                <text>{{dataDetail.recogTime}}</text>
+            </view>
+            <view class="item">
+                <text class="cuIcon-locationfill text-blue margin-right-10"></text>
+                <text class="text-bold padding-right-10">安装位置：</text>
+                <text>{{dataDetail.address?dataDetail.address:'未知'}}</text>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	var app=getApp()
-	export default {
-		data() {
-			return {
-				dataDetail:{}
-			}
-		},
-		onShow() {
-			this.dataDetail=getApp().globalData.staffTemperature
-		},
-		methods: {
-			previewImg(img){
-				let imgs=[]
-				imgs.push(img)
-				uni.previewImage({
-					urls:imgs
-				})
-			}
-		}
-	}
+    var app = getApp()
+    export default {
+        data() {
+            return {
+                dataDetail: {}
+            }
+        },
+        onShow() {
+            this.dataDetail = getApp().globalData.staffTemperature
+        },
+        methods: {
+            previewImg(img) {
+                let imgs = []
+                imgs.push(img)
+                uni.previewImage({
+                    urls: imgs
+                })
+            }
+        }
+    }
 </script>
 
 <style lang="scss">
-	page{
-		background-color: #FFFFFF;
-	}
-	.content{
-		padding:60rpx;
-		.item{
-			padding: 22rpx 0;
-		}
-	}
+    page {
+        background-color: #FFFFFF;
+    }
+
+    .content {
+        padding: 60 rpx;
+
+        .item {
+            padding: 22 rpx 0;
+        }
+    }
 </style>