create-uniapps 1.0.0

package/template/src/uni_modules/uview-plus/components/u-circle-progress/u-circle-progress.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="u-circle-progress">
+		<view class="u-circle-progress__left">
+			<view
+			    class="u-circle-progress__left__circle"
+			    :style="[leftSyle]"
+			    ref="left-circle"
+			>
+
+			</view>
+		</view>
+		<view
+		    class="u-circle-progress__right"
+		>
+			<view
+			    class="u-circle-progress__right__circle"
+			    ref="right-circle"
+				:style="[rightSyle]"
+			>
+
+			</view>
+		</view>
+		<view class="u-circle-progress__circle">
+
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import {sleep } from '../../libs/function/index';
+	// #ifdef APP-NVUE
+	const animation = uni.requireNativePlugin('animation')
+	// #endif
+	/**
+	 * CircleProgress 圆形进度条 TODO: 待完善 
+	 * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度环。
+	 * @tutorial https://ijry.github.io/uview-plus/components/circleProgress.html
+	 * @property {String | Number}	percentage	圆环进度百分比值，为数值类型，0-100 (默认 30 )
+	 * @example
+	 */
+	export default {
+		name: 'u-circle-progress',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				leftBorderColor: 'rgb(200, 200, 200)',
+				rightBorderColor: 'rgb(200, 200, 200)',
+			}
+		},
+		computed: {
+			leftSyle() {
+				const style = {}
+				style.borderTopColor = this.leftBorderColor
+				style.borderRightColor = this.leftBorderColor
+				return style
+			},
+			rightSyle() {
+				const style = {}
+				style.borderLeftColor = this.rightBorderColor
+				style.borderBottomColor = this.rightBorderColor
+				return style
+			}
+		},
+		mounted() {
+			sleep().then(() => {
+				this.rightBorderColor = 'rgb(66, 185, 131)'
+				// this.init()
+			})
+		},
+		methods: {
+			init() {
+				animation.transition(this.$refs['right-circle'].ref, {
+					styles: {
+						transform: 'rotate(45deg)',
+						transformOrigin: 'center center'
+					},
+				}, () => {
+					this.rightBorderColor = 'rgb(66, 185, 131)'
+					// animation.transition(this.$refs['right-circle'].ref, {
+					// 	styles: {
+					// 		transform: 'rotate(225deg)',
+					// 		transformOrigin: 'center center'
+					// 	},
+					// 	duration: 3000,
+					// }, () => {
+					// 	animation.transition(this.$refs['left-circle'].ref, {
+					// 		styles: {
+					// 			transform: 'rotate(45deg)',
+					// 			transformOrigin: 'center center'
+					// 		},
+					// 	}, () => {
+					// 		this.leftBorderColor = 'rgb(66, 185, 131)'
+					// 		animation.transition(this.$refs['left-circle'].ref, {
+					// 			styles: {
+					// 				transform: 'rotate(225deg)',
+					// 				transformOrigin: 'center center'
+					// 			},
+					// 			duration: 1500,
+					// 		}, () => {
+
+					// 		})
+					// 	})
+					// })
+				})
+
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.u-circle-progress {
+		@include flex(row);
+		position: relative;
+		border-radius: 100px;
+		height: 100px;
+		width: 100px;
+		// transform: rotate(0deg);
+		// background-color: rgb(66, 185, 131);
+		background-color: rgb(200, 200, 200);
+		overflow: hidden;
+		justify-content: space-between;
+
+		&__circle {
+			border-radius: 100px;
+			height: 90px;
+			width: 90px;
+			transform: translate(-50%, -50%);
+			background-color: rgb(255, 255, 255);
+			left: 50px;
+			top: 50px;
+			position: absolute;
+		}
+
+		&__left {
+			position: absolute;
+			left: 0;
+			width: 50px;
+			height: 100px;
+			overflow: hidden;
+			box-sizing: border-box;
+			// background-color: rgb(66, 185, 131);
+			// background-color: rgb(200, 200, 200);
+			// transform-origin: left center;
+
+			&__circle {
+				box-sizing: border-box;
+				// background-color: red;
+				border-left-color: transparent;
+				border-bottom-color: transparent;
+				border-top-left-radius: 50px;
+				border-top-right-radius: 50px;
+				border-bottom-right-radius: 50px;
+				// border-left-color: rgb(66, 185, 131);
+				// border-bottom-color: rgb(66, 185, 131);
+				border-top-color: rgb(66, 185, 131);
+				border-right-color: rgb(66, 185, 131);
+				border-width: 5px;
+				width: 100px;
+				height: 100px;
+				transform: rotate(225deg);
+				// border-radius: 100px;
+			}
+		}
+
+		&__right {
+			position: absolute;
+			right: 0;
+			width: 50px;
+			height: 100px;
+			overflow: hidden;
+
+			&__circle {
+				position: absolute;
+				right: 0;
+				box-sizing: border-box;
+				// background-color: red;
+				border-top-color: transparent;
+				border-right-color: transparent;
+				border-top-left-radius: 50px;
+				border-bottom-left-radius: 50px;
+				border-bottom-right-radius: 50px;
+				// border-left-color: rgb(66, 185, 131);
+				// border-bottom-color: rgb(66, 185, 131);
+				border-left-color: rgb(200, 200, 200);
+				border-bottom-color: rgb(200, 200, 200);
+				border-width: 5px;
+				width: 100px;
+				height: 100px;
+				transform: rotate(45deg);
+				transform-origin: center center;
+				// border-radius: 100px;
+			}
+		}
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-city-locate/u-city-locate.vue

@@ -0,0 +1,161 @@
+<template>
+	<view class="u-city-locate">
+		<up-index-list :indexList="indexList">
+			<template #header>
+				<view class="u-current-city-wrap">
+					<view class="u-current-city-title">定位城市</view>
+					<view class="u-current-city-item" @tap="location">
+						<view class="u-location-city">{{locationCity}}</view>
+					</view>
+				</view>
+			</template>
+			<template :key="index" v-for="(item, index) in cityList">
+				<!-- #ifdef APP-NVUE -->
+				<up-index-anchor :text="indexList[index]"></up-index-anchor>
+				<!-- #endif -->
+				<up-index-item>
+					<!-- #ifndef APP-NVUE -->
+					<up-index-anchor :text="indexList[index]"></up-index-anchor>
+					<!-- #endif -->
+					<view class="hot-city-list" v-if="index == 0">
+						<view class="" v-for="(item1, index1) in item" @tap="selectedCity(item1)">
+							<view class="hot-city-item">{{ item1[nameKey] }}</view>
+						</view>
+					</view>
+					<view v-else class="item-list" v-for="(item1, index1) in item" :key="index1">
+						<view class="list__item" @tap="selectedCity(item1)">
+							<text class="list__item__city-name">{{item1[nameKey]}}</text>
+						</view>
+						<up-line></up-line>
+					</view>
+				</up-index-item>
+			</template>
+			<template #footer>
+				<view class="u-safe-area-inset--bottom">
+					<text class="list__footer"></text>
+				</view>
+			</template>
+		</up-index-list>
+	</view>
+</template>
+
+<script>
+	export default{
+		name: 'u-city-locate',
+		props:{
+			indexList: {
+				type: Array,
+				default: ['🔥']
+			},
+			cityList:{
+				type: Array,
+				default: () => {
+					return [
+						[{
+							name: '北京',
+							value: 'beijing'
+						},
+						{
+							name: '上海',
+							value: 'shanghai'
+						},
+						{
+							name: '广州',
+							value: 'guangzhou'
+						},
+						{
+							name: '深圳',
+							value: 'shenzhen'
+						},
+						{
+							name: '杭州',
+							value: 'hangzhou'
+						}]
+					]
+				}
+			},
+			locationType: {
+				type: String,
+				default: 'wgs84'
+			},
+			currentCity: {
+				type: String,
+				default: ''
+			},
+			nameKey: {
+				type: String,
+				default: 'name'
+			}
+		},
+		computed:{
+		},
+		watch:{
+			currentCity(val) {
+				this.locationCity = val;
+			}
+		},
+		data(){
+			return{
+				locationCity: '定位中....'
+			}
+		},
+		emits: ['location-success', 'select-city'],
+		methods:{
+			// 获取城市
+			selectedCity(city){
+				this.locationCity = city[this.nameKey];
+				this.$emit('select-city', {
+					locationCity: this.locationCity
+				});
+			},
+			// 定位操作
+			location(){
+				let That = this;
+				uni.getLocation({
+				    type: this.locationType,
+					geocode:true,
+				    success(res){
+						console.log(res);
+						That.locationCity = res.address && res.address.city;
+						That.$emit('location-success', {
+							...res,
+							locationCity: That.locationCity
+						});
+				    },
+					fail(){
+						That.locationCity = "定位失败，请点击重试"
+					}
+				});
+			},
+		},
+		// 页面挂载后进行异步操作
+		created(){
+		},
+		mounted(){
+			this.location();
+		}
+	}
+</script>
+
+<style lang="scss">
+	.list__item {
+		padding: 8px 1px;
+	}
+	.u-current-city-title {
+		color: grey;
+		margin-bottom: 5px;
+	}
+	.u-current-city-item {
+		height: 30px;
+	}
+	.hot-city-list {
+		display: flex !important;
+		flex-direction: row !important;
+		padding: 12px 0;
+		.hot-city-item {
+			padding: 6px 12px;
+			margin: 5px;
+			border: 1px solid #ededed;
+		}
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-code/code.js

@@ -0,0 +1,21 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 16:55:27
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/code.js
+ */
+
+export default {
+    // code 组件
+    code: {
+        seconds: 60,
+        startText: '获取验证码',
+        changeText: 'X秒重新获取',
+        endText: '重新获取',
+        keepRunning: false,
+        uniqueKey: ''
+    }
+}

package/template/src/uni_modules/uview-plus/components/u-code/props.js

@@ -0,0 +1,36 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 倒计时总秒数
+        seconds: {
+            type: [String, Number],
+            default: () => defProps.code.seconds
+        },
+        // 尚未开始时提示
+        startText: {
+            type: String,
+            default: () => defProps.code.startText
+        },
+        // 正在倒计时中的提示
+        changeText: {
+            type: String,
+            default: () => defProps.code.changeText
+        },
+        // 倒计时结束时的提示
+        endText: {
+            type: String,
+            default: () => defProps.code.endText
+        },
+        // 是否在H5刷新或各端返回再进入时继续倒计时
+        keepRunning: {
+            type: Boolean,
+            default: () => defProps.code.keepRunning
+        },
+        // 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+        uniqueKey: {
+            type: String,
+            default: () => defProps.code.uniqueKey
+        }
+    }
+})

package/template/src/uni_modules/uview-plus/components/u-code/u-code.vue

@@ -0,0 +1,131 @@
+<template>
+	<view class="u-code">
+		<!-- 此组件功能由js完成，无需写html逻辑 -->
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	/**
+	 * Code 验证码输入框
+	 * @description 考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景
+	 * @tutorial https://ijry.github.io/uview-plus/components/code.html
+	 * @property {String | Number}	seconds			倒计时所需的秒数（默认 60 ）
+	 * @property {String}			startText		开始前的提示语，见官网说明（默认 '获取验证码' ）
+	 * @property {String}			changeText		倒计时期间的提示语，必须带有字母"x"，见官网说明（默认 'X秒重新获取' ）
+	 * @property {String}			endText			倒计结束的提示语，见官网说明（默认 '重新获取' ）
+	 * @property {Boolean}			keepRunning		是否在H5刷新或各端返回再进入时继续倒计时（ 默认false ）
+	 * @property {String}			uniqueKey		为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+	 *
+	 * @event {Function}	change	倒计时期间，每秒触发一次
+	 * @event {Function}	start	开始倒计时触发
+	 * @event {Function}	end		结束倒计时触发
+	 * @example <u-code ref="uCode" @change="codeChange" seconds="20"></u-code>
+	 */
+	export default {
+		name: "u-code",
+		mixins: [mpMixin, mixin,props],
+		data() {
+			return {
+				secNum: this.seconds,
+				timer: null,
+				canGetCode: true, // 是否可以执行验证码操作
+			}
+		},
+		mounted() {
+			this.checkKeepRunning()
+		},
+		watch: {
+			seconds: {
+				immediate: true,
+				handler(n) {
+					this.secNum = n
+				}
+			}
+		},
+		emits: ["start", "end", "change"],
+		methods: {
+			checkKeepRunning() {
+				// 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
+				let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$uCountDownTimestamp'))
+				if(!lastTimestamp) return this.changeEvent(this.startText)
+				// 当前秒的时间戳
+				let nowTimestamp = Math.floor((+ new Date()) / 1000)
+				// 判断当前的时间戳，是否小于上一次的本该按设定结束，却提前结束的时间戳
+				if(this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
+					// 剩余尚未执行完的倒计秒数
+					this.secNum = lastTimestamp - nowTimestamp
+					// 清除本地保存的变量
+					uni.removeStorageSync(this.uniqueKey + '_$uCountDownTimestamp')
+					// 开始倒计时
+					this.start()
+				} else {
+					// 如果不存在需要继续上一次的倒计时，执行正常的逻辑
+					this.changeEvent(this.startText)
+				}
+			},
+			// 开始倒计时
+			start() {
+				// 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱
+				if(this.timer) {
+					clearInterval(this.timer)
+					this.timer = null
+				}
+				this.$emit('start')
+				this.canGetCode = false
+				// 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
+				this.changeEvent(this.changeText.replace(/x|X/, this.secNum))
+				this.timer = setInterval(() => {
+					if (--this.secNum) {
+						// 用当前倒计时的秒数替换提示字符串中的"x"字母
+						this.changeEvent(this.changeText.replace(/x|X/, this.secNum))
+					} else {
+						clearInterval(this.timer)
+						this.timer = null
+						this.changeEvent(this.endText)
+						this.secNum = this.seconds
+						this.$emit('end')
+						this.canGetCode = true
+					}
+				}, 1000)
+				this.setTimeToStorage()
+			},
+			// 重置，可以让用户再次获取验证码
+			reset() {
+				this.canGetCode = true
+				clearInterval(this.timer)
+				this.secNum = this.seconds
+				this.changeEvent(this.endText)
+			},
+			changeEvent(text) {
+				this.$emit('change', text)
+			},
+			// 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
+			setTimeToStorage() {
+				if(!this.keepRunning || !this.timer) return
+				// 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
+				// 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
+				if(this.secNum > 0 && this.secNum <= this.seconds) {
+					// 获取当前时间戳(+ new Date()为特殊写法)，除以1000变成秒，再去除小数部分
+					let nowTimestamp = Math.floor((+ new Date()) / 1000)
+					// 将本该结束时候的时间戳保存起来 => 当前时间戳 + 剩余的秒数
+					uni.setStorage({
+						key: this.uniqueKey + '_$uCountDownTimestamp',
+						data: nowTimestamp + Number(this.secNum)
+					})
+				}
+			}
+		},
+		// 组件销毁的时候，清除定时器，否则定时器会继续存在，系统不会自动清除
+		beforeUnmount() {
+			this.setTimeToStorage()
+			clearTimeout(this.timer)
+			this.timer = null
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+</style>

package/template/src/uni_modules/uview-plus/components/u-code-input/codeInput.js

@@ -0,0 +1,29 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 16:55:58
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/codeInput.js
+ */
+export default {
+    // codeInput 组件
+    codeInput: {
+		adjustPosition: true,
+        maxlength: 6,
+        dot: false,
+        mode: 'box',
+        hairline: false,
+        space: 10,
+        value: '',
+        focus: false,
+        bold: false,
+        color: '#606266',
+        fontSize: 18,
+        size: 35,
+        disabledKeyboard: false,
+        borderColor: '#c9cacc',
+		disabledDot: true
+    }
+}

package/template/src/uni_modules/uview-plus/components/u-code-input/props.js

@@ -0,0 +1,90 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+		// 键盘弹起时，是否自动上推页面
+		adjustPosition: {
+			type: Boolean,
+            default: () => defProps.codeInput.adjustPosition
+		},
+        // 最大输入长度
+        maxlength: {
+            type: [String, Number],
+            default: () => defProps.codeInput.maxlength
+        },
+        // 是否用圆点填充
+        dot: {
+            type: Boolean,
+            default: () => defProps.codeInput.dot
+        },
+        // 显示模式，box-盒子模式，line-底部横线模式
+        mode: {
+            type: String,
+            default: () => defProps.codeInput.mode
+        },
+        // 是否细边框
+        hairline: {
+            type: Boolean,
+            default: () => defProps.codeInput.hairline
+        },
+        // 字符间的距离
+        space: {
+            type: [String, Number],
+            default: () => defProps.codeInput.space
+        },
+		// #ifdef VUE3
+		// 预置值
+		modelValue: {
+			type: [String, Number],
+			default: () => defProps.codeInput.value
+		},
+		// #endif
+		// #ifdef VUE2
+		// 预置值
+		value: {
+			type: [String, Number],
+			default: () => defProps.codeInput.value
+		},
+		// #endif
+        // 是否自动获取焦点
+        focus: {
+            type: Boolean,
+            default: () => defProps.codeInput.focus
+        },
+        // 字体是否加粗
+        bold: {
+            type: Boolean,
+            default: () => defProps.codeInput.bold
+        },
+        // 字体颜色
+        color: {
+            type: String,
+            default: () => defProps.codeInput.color
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: () => defProps.codeInput.fontSize
+        },
+        // 输入框的大小，宽等于高
+        size: {
+            type: [String, Number],
+            default: () => defProps.codeInput.size
+        },
+        // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+        disabledKeyboard: {
+            type: Boolean,
+            default: () => defProps.codeInput.disabledKeyboard
+        },
+        // 边框和线条颜色
+        borderColor: {
+            type: String,
+            default: () => defProps.codeInput.borderColor
+        },
+		// 是否禁止输入"."符号
+		disabledDot: {
+			type: Boolean,
+			default: () => defProps.codeInput.disabledDot
+		}
+    }
+})