首次提交

components/colorui/animation.css

@@ -0,0 +1,184 @@
+/* 
+  Animation 微动画  
+  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
+ */
+
+/* css 滤镜 控制黑白底色gif的 */
+.gif-black{  
+  mix-blend-mode: screen;  
+}
+.gif-white{  
+  mix-blend-mode: multiply; 
+}
+
+
+/* Animation css */
+[class*=animation-] {
+    animation-duration: .5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both
+}
+
+.animation-fade {
+    animation-name: fade;
+    animation-duration: .8s;
+    animation-timing-function: linear
+}
+
+.animation-scale-up {
+    animation-name: scale-up
+}
+
+.animation-scale-down {
+    animation-name: scale-down
+}
+
+.animation-slide-top {
+    animation-name: slide-top
+}
+
+.animation-slide-bottom {
+    animation-name: slide-bottom
+}
+
+.animation-slide-left {
+    animation-name: slide-left
+}
+
+.animation-slide-right {
+    animation-name: slide-right
+}
+
+.animation-shake {
+    animation-name: shake
+}
+
+.animation-reverse {
+    animation-direction: reverse
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes scale-up {
+    0% {
+        opacity: 0;
+        transform: scale(.2)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes scale-down {
+    0% {
+        opacity: 0;
+        transform: scale(1.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes slide-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slide-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    10% {
+        transform: translateX(-9px)
+    }
+
+    20% {
+        transform: translateX(8px)
+    }
+
+    30% {
+        transform: translateX(-7px)
+    }
+
+    40% {
+        transform: translateX(6px)
+    }
+
+    50% {
+        transform: translateX(-5px)
+    }
+
+    60% {
+        transform: translateX(4px)
+    }
+
+    70% {
+        transform: translateX(-3px)
+    }
+
+    80% {
+        transform: translateX(2px)
+    }
+
+    90% {
+        transform: translateX(-1px)
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}

components/colorui/components/cu-custom.vue

@@ -0,0 +1,65 @@
+<template>
+	<view>
+		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
+			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
+				<view class="action" @tap="BackPage" v-if="isBack">
+					<text class="cuIcon-back"></text>
+					<slot name="backText"></slot>
+				</view>
+				<view class="content" :style="[{top:StatusBar + 'px'}]">
+					<slot name="content"></slot>
+				</view>
+				<slot name="right"></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				StatusBar: this.StatusBar,
+				CustomBar: this.CustomBar
+			};
+		},
+		name: 'cu-custom',
+		computed: {
+			style() {
+				var StatusBar= this.StatusBar;
+				var CustomBar= this.CustomBar;
+				var bgImage = this.bgImage;
+				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
+				if (this.bgImage) {
+					style = `${style}background-image:url(${bgImage});`;
+				}
+				return style
+			}
+		},
+		props: {
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: false
+			},
+			bgImage: {
+				type: String,
+				default: ''
+			},
+		},
+		methods: {
+			BackPage() {
+				uni.navigateBack({
+					delta: 1
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

components/empty.vue

@@ -0,0 +1,69 @@
+<template>
+	<view class="page-box">
+		<view class="centre">
+			<image src="../static/images/empty.png" mode=""></image>
+			<view class="tips">
+				{{content}}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			content: {
+				type: String,
+				default: '暂无内容'
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.page-box {
+		position: relative;
+		// left: 0;
+		height: 50vh;
+		z-index: 0;
+		top: 70px;
+	}
+
+	.centre {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+		height: 400rpx;
+		text-align: center;
+		// padding: 200rpx auto;
+		font-size: 32rpx;
+
+		image {
+			width: 387rpx;
+			height: 341rpx;
+			// margin-bottom: 20rpx;
+			margin: 0 auto 20rpx;
+			// border: 1px dotted #000000;
+		}
+
+		.tips {
+			font-size: 32rpx;
+			color: #2F3044;
+			margin-top: 20rpx;
+			font-weight: 700;
+		}
+
+		.btn {
+			margin: 80rpx auto;
+			width: 600rpx;
+			border-radius: 32rpx;
+			line-height: 90rpx;
+			color: #ffffff;
+			font-size: 34rpx;
+			background: #5074FF;
+		}
+	}
+</style>

components/permission.js

@@ -0,0 +1,269 @@
+ 
+var isIos
+// #ifdef APP-PLUS
+isIos = (plus.os.name == "iOS")
+// #endif
+ 
+// 判断推送权限是否开启
+function judgeIosPermissionPush() {
+	var result = false;
+	var UIApplication = plus.ios.import("UIApplication");
+	var app = UIApplication.sharedApplication();
+	var enabledTypes = 0;
+	if (app.currentUserNotificationSettings) {
+		var settings = app.currentUserNotificationSettings();
+		enabledTypes = settings.plusGetAttribute("types");
+		console.log("enabledTypes1:" + enabledTypes);
+		if (enabledTypes == 0) {
+			console.log("推送权限没有开启");
+		} else {
+			result = true;
+			console.log("已经开启推送功能!")
+		}
+		plus.ios.deleteObject(settings);
+	} else {
+		enabledTypes = app.enabledRemoteNotificationTypes();
+		if (enabledTypes == 0) {
+			console.log("推送权限没有开启!");
+		} else {
+			result = true;
+			console.log("已经开启推送功能!")
+		}
+		console.log("enabledTypes2:" + enabledTypes);
+	}
+	plus.ios.deleteObject(app);
+	plus.ios.deleteObject(UIApplication);
+	return result;
+}
+ 
+// 判断定位权限是否开启
+function judgeIosPermissionLocation() {
+	var result = false;
+	var cllocationManger = plus.ios.import("CLLocationManager");
+	var status = cllocationManger.authorizationStatus();
+	result = (status != 2)
+	console.log("定位权限开启：" + result);
+	// 以下代码判断了手机设备的定位是否关闭，推荐另行使用方法 checkSystemEnableLocation
+	/* var enable = cllocationManger.locationServicesEnabled();
+	var status = cllocationManger.authorizationStatus();
+	console.log("enable:" + enable);
+	console.log("status:" + status);
+	if (enable && status != 2) {
+		result = true;
+		console.log("手机定位服务已开启且已授予定位权限");
+	} else {
+		console.log("手机系统的定位没有打开或未给予定位权限");
+	} */
+	plus.ios.deleteObject(cllocationManger);
+	return result;
+}
+ 
+// 判断麦克风权限是否开启
+function judgeIosPermissionRecord() {
+	var result = false;
+	var avaudiosession = plus.ios.import("AVAudioSession");
+	var avaudio = avaudiosession.sharedInstance();
+	var permissionStatus = avaudio.recordPermission();
+	console.log("permissionStatus:" + permissionStatus);
+	if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
+		console.log("麦克风权限没有开启");
+	} else {
+		result = true;
+		console.log("麦克风权限已经开启");
+	}
+	plus.ios.deleteObject(avaudiosession);
+	return result;
+}
+ 
+// 判断相机权限是否开启
+function judgeIosPermissionCamera() {
+	var result = false;
+	var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
+	var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
+	console.log("authStatus:" + authStatus);
+	if (authStatus == 3) {
+		result = true;
+		console.log("相机权限已经开启");
+	} else {
+		console.log("相机权限没有开启");
+	}
+	plus.ios.deleteObject(AVCaptureDevice);
+	return result;
+}
+ 
+// 判断相册权限是否开启
+function judgeIosPermissionPhotoLibrary() {
+	var result = false;
+	var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
+	var authStatus = PHPhotoLibrary.authorizationStatus();
+	console.log("authStatus:" + authStatus);
+	if (authStatus == 3) {
+		result = true;
+		console.log("相册权限已经开启");
+	} else {
+		console.log("相册权限没有开启");
+	}
+	plus.ios.deleteObject(PHPhotoLibrary);
+	return result;
+}
+ 
+// 判断通讯录权限是否开启
+function judgeIosPermissionContact() {
+	var result = false;
+	var CNContactStore = plus.ios.import("CNContactStore");
+	var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
+	if (cnAuthStatus == 3) {
+		result = true;
+		console.log("通讯录权限已经开启");
+	} else {
+		console.log("通讯录权限没有开启");
+	}
+	plus.ios.deleteObject(CNContactStore);
+	return result;
+}
+ 
+// 判断日历权限是否开启
+function judgeIosPermissionCalendar() {
+	var result = false;
+	var EKEventStore = plus.ios.import("EKEventStore");
+	var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
+	if (ekAuthStatus == 3) {
+		result = true;
+		console.log("日历权限已经开启");
+	} else {
+		console.log("日历权限没有开启");
+	}
+	plus.ios.deleteObject(EKEventStore);
+	return result;
+}
+ 
+// 判断备忘录权限是否开启
+function judgeIosPermissionMemo() {
+	var result = false;
+	var EKEventStore = plus.ios.import("EKEventStore");
+	var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
+	if (ekAuthStatus == 3) {
+		result = true;
+		console.log("备忘录权限已经开启");
+	} else {
+		console.log("备忘录权限没有开启");
+	}
+	plus.ios.deleteObject(EKEventStore);
+	return result;
+}
+ 
+// Android权限查询
+function requestAndroidPermission(permissionID) {
+	return new Promise((resolve, reject) => {
+		plus.android.requestPermissions(
+			[permissionID], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
+			function(resultObj) {
+				var result = 0;
+				for (var i = 0; i < resultObj.granted.length; i++) {
+					var grantedPermission = resultObj.granted[i];
+					console.log('已获取的权限：' + grantedPermission);
+					result = 1
+				}
+				for (var i = 0; i < resultObj.deniedPresent.length; i++) {
+					var deniedPresentPermission = resultObj.deniedPresent[i];
+					console.log('拒绝本次申请的权限：' + deniedPresentPermission);
+					result = 0
+				}
+				for (var i = 0; i < resultObj.deniedAlways.length; i++) {
+					var deniedAlwaysPermission = resultObj.deniedAlways[i];
+					console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
+					result = -1
+				}
+				resolve(result);
+				// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
+				// if (result != 1) {
+				// gotoAppPermissionSetting()
+				// }
+			},
+			function(error) {
+				console.log('申请权限错误：' + error.code + " = " + error.message);
+				resolve({
+					code: error.code,
+					message: error.message
+				});
+			}
+		);
+	});
+}
+ 
+// 使用一个方法，根据参数判断权限
+function judgeIosPermission(permissionID) {
+	if (permissionID == "location") {
+		return judgeIosPermissionLocation()
+	} else if (permissionID == "camera") {
+		return judgeIosPermissionCamera()
+	} else if (permissionID == "photoLibrary") {
+		return judgeIosPermissionPhotoLibrary()
+	} else if (permissionID == "record") {
+		return judgeIosPermissionRecord()
+	} else if (permissionID == "push") {
+		return judgeIosPermissionPush()
+	} else if (permissionID == "contact") {
+		return judgeIosPermissionContact()
+	} else if (permissionID == "calendar") {
+		return judgeIosPermissionCalendar()
+	} else if (permissionID == "memo") {
+		return judgeIosPermissionMemo()
+	}
+	return false;
+}
+ 
+// 跳转到**应用**的权限页面
+function gotoAppPermissionSetting() {
+	if (isIos) {
+		var UIApplication = plus.ios.import("UIApplication");
+		var application2 = UIApplication.sharedApplication();
+		var NSURL2 = plus.ios.import("NSURL");
+		// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");		
+		var setting2 = NSURL2.URLWithString("app-settings:");
+		application2.openURL(setting2);
+ 
+		plus.ios.deleteObject(setting2);
+		plus.ios.deleteObject(NSURL2);
+		plus.ios.deleteObject(application2);
+	} else {
+		// console.log(plus.device.vendor);
+		var Intent = plus.android.importClass("android.content.Intent");
+		var Settings = plus.android.importClass("android.provider.Settings");
+		var Uri = plus.android.importClass("android.net.Uri");
+		var mainActivity = plus.android.runtimeMainActivity();
+		var intent = new Intent();
+		intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
+		var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
+		intent.setData(uri);
+		mainActivity.startActivity(intent);
+	}
+}
+ 
+// 检查系统的设备服务是否开启
+// var checkSystemEnableLocation = async function () {
+function checkSystemEnableLocation() {
+	if (isIos) {
+		var result = false;
+		var cllocationManger = plus.ios.import("CLLocationManager");
+		var result = cllocationManger.locationServicesEnabled();
+		console.log("系统定位开启:" + result);
+		plus.ios.deleteObject(cllocationManger);
+		return result;
+	} else {
+		var context = plus.android.importClass("android.content.Context");
+		var locationManager = plus.android.importClass("android.location.LocationManager");
+		var main = plus.android.runtimeMainActivity();
+		var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
+		var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
+		console.log("系统定位开启:" + result);
+		return result
+	}
+}
+ 
+export {
+	judgeIosPermission,
+	requestAndroidPermission,
+	checkSystemEnableLocation,
+	gotoAppPermissionSetting
+}

components/ren-dropdown-filter/ren-dropdown-filter.vue

@@ -0,0 +1,260 @@
+<template>
+	<view class="filter-wrapper"
+		:style="{ height: height + 'rpx', top: top,'border-top':border?'1rpx solid #f2f2f2':'none' }"
+		@touchmove.stop.prevent="discard">
+		<view class="inner-wrapper">
+			<view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view>
+			<view class="navs">
+				<view class="c-flex-align c-flex-center" :class="{ 'c-flex-center': index > 0, actNav: index === actNav }"
+					v-for="(item, index) in navData" :key="index" @click="navClick(index)">
+					<view v-for="(child, childx) in item" :key="childx" v-if="child.select">{{ child.label }}</view>
+					<image src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png" mode="" class="icon-triangle"
+						v-if="index === actNav"></image>
+					<image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle" v-else>
+					</image>
+				</view>
+			</view>
+			<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''">
+				<view class="item-opt c-flex-align" :class="item.select ? 'actOpt' : ''"
+					v-for="(item, index) in navData[actNav]" :key="index" @click="handleOpt(index)">
+					{{ item.label }}
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// import { getCurDateTime } from '@/libs/utils.js';
+	export default {
+		props: {
+			height: {
+				type: Number,
+				default: 100
+			},
+			top: {
+				type: String,
+				default: 'calc(var(--window-statsu-bar) + 44px)'
+			},
+			border: {
+				type: Boolean,
+				default: false
+			},
+			filterData: {
+				//必填
+				type: Array,
+				default: () => {
+					return [];
+				}
+				// default: () => {
+				//     return [
+				//         [{ text: '全部状态', value: '' }, { text: '状态1', value: 1 }, { text: '状态2', value: 2 }, { text: '状态3', value: 3 }],
+				//         [{ text: '全部类型', value: '' }, { text: '类型1', value: 1 }, { text: '类型2', value: 2 }, { text: '类型3', value: 3 }]
+				//     ];
+				// }
+			},
+			defaultIndex: {
+				//默认选中条件索引,超出一类时必填
+				type: Array,
+				default: () => {
+					return [0];
+				}
+			}
+		},
+		data() {
+			return {
+				navData: [],
+				popupShow: false,
+				showMask: false,
+				actNav: null,
+				selDate: '选择日期',
+				selIndex: [] //选中条件索引
+			};
+		},
+		created() {
+			this.navData = this.filterData;
+			this.selIndex = this.defaultIndex;
+			this.keepStatus();
+		},
+		mounted() {
+			// this.selDate = getCurDateTime().formatDate;
+		},
+		methods: {
+			keepStatus() {
+				this.navData.forEach(itemnavData => {
+					itemnavData.map(child => {
+						child.select = false;
+					});
+					return itemnavData;
+				});
+				for (let i = 0; i < this.selIndex.length; i++) {
+					let selindex = this.selIndex[i];
+					this.navData[i][selindex].select = true;
+				}
+			},
+			navClick(index) {
+				if (index === this.actNav) {
+					this.tapMask();
+					return;
+				}
+				this.popupShow = true;
+				this.showMask = true;
+				this.actNav = index;
+			},
+			handleOpt(index) {
+				this.selIndex[this.actNav] = index;
+				this.keepStatus();
+				setTimeout(() => {
+					this.tapMask();
+				}, 100);
+				let data = [];
+				let res = this.navData.forEach(item => {
+					let sel = item.filter(child => child.select);
+					data.push(sel);
+				});
+				console.log(this.selIndex)
+				console.log(data);
+				this.$emit('onSelected', data);
+			},
+			dateClick() {
+				this.tapMask();
+			},
+			tapMask() {
+				this.showMask = false;
+				this.popupShow = false;
+				this.actNav = null;
+			},
+			handleDate(e) {
+				let d = e.detail.value;
+				this.selDate = d;
+				this.$emit('dateChange', d);
+			},
+			discard() {}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	page {
+		font-size: 28rpx;
+	}
+
+	.c-flex-align {
+		display: flex;
+		align-items: center;
+	}
+
+	.c-flex-center {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+	}
+
+	.filter-wrapper {
+		position: relative;
+		// left: 0;
+		width: 750rpx;
+		z-index: 99;
+
+		// padding: 0 20rpx;
+		.inner-wrapper {
+			position: relative;
+
+			.navs {
+				position: relative;
+				height: 80rpx;
+				// padding: 0 40rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				background-color: #FFFFFF;
+				// border-bottom: 2rpx solid #f5f6f9;
+				color: #8b9aae;
+				z-index: 999;
+				box-sizing: border-box;
+
+				// border-radius: 10rpx;
+				&>view {
+					flex: 1;
+					height: 100%;
+					flex-direction: row;
+					z-index: 999;
+				}
+
+				.date {
+					justify-content: flex-end;
+				}
+
+				.actNav {
+					color: #FCD202;
+					font-weight: bold;
+				}
+			}
+
+			.mask {
+				z-index: 666;
+				position: fixed;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background-color: rgba(0, 0, 0, 0);
+				transition: background-color 0.15s linear;
+
+				&.show {
+					background-color: rgba(0, 0, 0, 0.4);
+				}
+
+				&.hide {
+					display: none;
+				}
+			}
+
+			.popup {
+				position: relative;
+				max-height: 500rpx;
+				background-color: #FFFFFF;
+				border-bottom-left-radius: 20rpx;
+				border-bottom-right-radius: 20rpx;
+				overflow: scroll;
+				z-index: 999;
+				transition: all 2s linear;
+				opacity: 0;
+				display: none;
+
+				.item-opt {
+					height: 100rpx;
+					padding: 0 40rpx;
+					color: #8b9aae;
+					border-bottom: 2rpx solid #f1f1f1;
+				}
+
+				.actOpt {
+					color: #FCD202;
+					font-weight: bold;
+					position: relative;
+
+					&::after {
+						content: '✓';
+						font-weight: bold;
+						font-size: 36rpx;
+						position: absolute;
+						right: 40rpx;
+					}
+				}
+			}
+
+			.popupShow {
+				display: block;
+				opacity: 1;
+			}
+		}
+
+		.icon-triangle {
+			width: 16rpx;
+			height: 16rpx;
+			margin-left: 10rpx;
+		}
+	}
+</style>

components/watch-login/watch-button.vue

@@ -0,0 +1,108 @@
+<template>
+	<view>
+		<!-- 按钮 -->
+		<button :class="['buttonBorder',!_rotate?'dlbutton':'dlbutton_loading']" :style="{'background':bgColor, 'color': fontColor}">
+			<view :class="_rotate?'rotate_loop':''">
+				<text v-if="_rotate" class="cuIcon cuIcon-loading1 "></text>
+				<text v-if="!_rotate">{{ text }}</text>
+			</view>
+		</button>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			text: String, //显示文本
+			rotate:{
+				//是否启动加载
+				type: [Boolean,String],
+				default: false,
+			}, 
+			bgColor:{
+				//按钮背景颜色
+				type: String,
+				// default: "linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6))",
+			},
+			fontColor:{
+				//按钮字体颜色
+				type: String,
+				default: "#FFFFFF",
+			},
+		},
+		computed:{
+			_rotate() {
+				//处理值
+				return String(this.rotate) !== 'false'
+			},
+		}
+	}
+</script>
+
+<style>
+	@import url("./css/icon.css");
+	
+	.dlbutton {
+		color: #FFFFFF;
+		font-size: 30upx;
+		width:601upx;
+		height:90upx;
+		background: #FCD202;
+		box-shadow:0upx 0upx 13upx 0upx rgba(164,217,228,0.4);
+		border-radius:2.5rem;
+		line-height: 90upx;
+		text-align: center;
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 96upx;
+	}
+	.dlbutton_loading {
+		color: #FFFFFF;
+		font-size: 30upx;
+		width:100upx;
+		height:100upx;
+		background: #FCD202;
+		box-shadow:0upx 0upx 13upx 0upx rgba(164,217,228,0.4);
+		border-radius:2.5rem;
+		line-height: 100upx;
+		text-align: center;
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 96upx;
+	}
+	.buttonBorder{
+	    border: none ;
+	    border-radius: 2.5rem ;
+	    -webkit-box-shadow: 0 0 60upx 0 rgba(0,0,0,.2) ;
+	    box-shadow: 0 0 60upx 0 rgba(0,0,0,.2) ;
+	    -webkit-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    -moz-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    -ms-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    -o-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	}
+	
+	/* 旋转动画 */
+	.rotate_loop{
+		-webkit-transition-property: -webkit-transform;
+	    -webkit-transition-duration: 1s;
+	    -moz-transition-property: -moz-transform;
+	    -moz-transition-duration: 1s;
+	    -webkit-animation: rotate 1s linear infinite;
+	    -moz-animation: rotate 1s linear infinite;
+	    -o-animation: rotate 1s linear infinite;
+	    animation: rotate 1s linear infinite;
+	}
+	@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
+	    to{-webkit-transform: rotate(360deg)}
+	}
+	@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
+	    to{-moz-transform: rotate(359deg)}
+	}
+	@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
+	    to{-o-transform: rotate(359deg)}
+	}
+	@keyframes rotate{from{transform: rotate(0deg)}
+	    to{transform: rotate(359deg)}
+	}
+</style>

components/watch-login/watch-input.vue

@@ -0,0 +1,223 @@
+<template>
+	<view class="main-list oBorder">
+		<!-- 文本框 -->
+		<input
+			class="main-input"
+			:value="value"
+			:type="_type"
+			:maxlength="maxlength"
+			:placeholder="placeholder"
+			:password="type==='password'&&!showPassword"
+			@input="onInput"
+		/>
+		<!-- 是否可见密码 -->
+		<image
+			v-if="_isShowPass&&type==='password'&&!_isShowCode"
+			class="img cuIcon"
+			:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'"
+			@tap="showPass"
+		></image>
+		<!-- 倒计时 -->
+		<view
+				v-if="_isShowCode&&!_isShowPass"
+				:class="['vercode',{'vercode-run': second>0}]"
+				@click="setCode"
+		>{{ getVerCodeSecond }}</view>
+
+
+		<view
+				v-if="_isShowGet"
+				class="vercode"
+				@click="setNumberCode"
+		>官方邀请码</view>
+
+	</view>
+</template>
+
+<script>
+	var _this, countDown;
+	export default{
+		data(){
+			return{
+				showPassword: false, //是否显示明文
+				second: 0, //倒计时
+				isRunCode: false, //是否开始倒计时
+			}
+		},
+		props:{
+			type: String, //类型
+			value: String, //值
+			placeholder: String, //框内提示
+			maxlength: {
+				//最大长度
+				type: [Number,String],
+				default: 20,
+			},
+			isShowPass:{
+				//是否显示密码图标（二选一）
+				type: [Boolean,String],
+				default: false,
+			},
+			isShowCode:{
+				//是否显示获取验证码（二选一）
+				type: [Boolean,String],
+				default: false,
+			},
+			isShowGet:{
+				//是否显示获取验证码（二选一）
+				type: [Boolean,String],
+				default: false,
+			},
+			codeText:{
+				type: String,
+				default: "获取验证码",
+			},
+			setTime:{
+				//倒计时时间设置
+				type: [Number,String],
+				default: 60,
+			}
+		},
+		model: {
+			prop: 'value',
+			event: 'input'
+		},
+		mounted() {
+			_this=this
+			//准备触发
+			this.$on('runCode',(val)=>{
+                this.runCode(val);
+            });
+			clearInterval(countDown);//先清理一次循环，避免缓存
+		},
+		methods:{
+			showPass(){
+				//是否显示密码
+				this.showPassword = !this.showPassword
+			},
+			onInput(e) {
+				//传出值
+				this.$emit('input', e.target.value)
+			},
+			setCode(){
+				//设置获取验证码的事件
+				if(this.isRunCode){
+					//判断是否开始倒计时，避免重复点击
+					return false;
+				}
+				this.$emit('setCode')
+			},
+			setNumberCode(){
+				this.$emit('setNumberCode')
+			},
+			runCode(val){
+				//开始倒计时
+				if(String(val)=="0"){
+
+					//判断是否需要终止循环
+					this.second = 0; //初始倒计时
+					clearInterval(countDown);//清理循环
+					this.isRunCode= false; //关闭循环状态
+					return false;
+				}
+				if(this.isRunCode){
+					//判断是否开始倒计时，避免重复点击
+					return false;
+				}
+				this.isRunCode= true
+				this.second = this._setTime //倒数秒数
+
+				let _this=this;
+				countDown = setInterval(function(){
+					_this.second--
+					if(_this.second==0){
+						_this.isRunCode= false
+						clearInterval(countDown)
+					}
+				},1000)
+			}
+
+
+		},
+		computed:{
+			_type(){
+				//处理值
+				const type = this.type
+				return type == 'password' ? 'text' : type
+			},
+			_isShowPass() {
+				//处理值
+				return String(this.isShowPass) !== 'false'
+			},
+			_isShowCode() {
+				//处理值
+				return String(this.isShowCode) !== 'false'
+			},
+			_isShowGet() {
+				//处理值
+				return String(this.isShowGet) !== 'false'
+			},
+			_setTime() {
+				//处理值
+				const setTime = Number(this.setTime)
+				return setTime>0 ? setTime : 60
+			},
+			getVerCodeSecond(){
+				//验证码倒计时计算
+				if(this.second<=0){
+					return this.codeText;
+				}else{
+					if(this.second<10){
+						return '0'+this.second;
+					}else{
+						return this.second;
+					}
+				}
+
+			}
+		}
+	}
+</script>
+
+<style>
+	@import url("./css/icon.css");
+
+	.main-list{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		height: 90upx;   /* Input 高度 */
+		color: #333333;
+		padding: 32upx;
+		margin-top:18upx;
+		margin-bottom: 18upx;
+	}
+	.img{
+		width: 32upx;
+		height: 32upx;
+		font-size: 32upx;
+	}
+	.main-input{
+		flex: 1;
+		text-align: left;
+		font-size: 28upx;
+		/* line-height: 100upx; */
+		padding-right: 10upx;
+		margin-left: 20upx;
+	}
+	.vercode {
+		color: rgba(0,0,0,0.7);
+		font-size: 24upx;
+		line-height: 100upx;
+	}
+	.vercode-run {
+		color: rgba(0,0,0,0.4) !important;
+	}
+	.oBorder{
+	    border: none;
+	    border-radius: 2.5rem ;
+	    -webkit-box-shadow: 0 0 60upx 0 rgba(43,86,112,.1) ;
+	    box-shadow: 0 0 60upx 0 rgba(43,86,112,.1) ;
+	}
+</style>