create-uniapps 1.0.0

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

@@ -0,0 +1,97 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 标题
+        title: {
+            type: String,
+            default: () => defProps.collapseItem.title
+        },
+        // 标题的样式
+        titleStyle: {
+            type: [Object, String],
+			default: () => {
+				return defProps.collapseItem.titleStyle
+			}
+        },
+        // 标题右侧内容
+        value: {
+            type: String,
+            default: () => defProps.collapseItem.value
+        },
+        // 标题下方的描述信息
+        label: {
+            type: String,
+            default: () => defProps.collapseItem.label
+        },
+        // 是否禁用折叠面板
+        disabled: {
+            type: Boolean,
+            default: () => defProps.collapseItem.disabled
+        },
+        // 是否展示右侧箭头并开启点击反馈
+        isLink: {
+            type: Boolean,
+            default: () => defProps.collapseItem.isLink
+        },
+        // 是否开启点击反馈
+        clickable: {
+            type: Boolean,
+            default: () => defProps.collapseItem.clickable
+        },
+        // 是否显示内边框
+        border: {
+            type: Boolean,
+            default: () => defProps.collapseItem.border
+        },
+        // 标题的对齐方式
+        align: {
+            type: String,
+            default: () => defProps.collapseItem.align
+        },
+        // 唯一标识符
+        name: {
+            type: [String, Number],
+            default: () => defProps.collapseItem.name
+        },
+        // 标题左侧图片，可为绝对路径的图片或内置图标
+        icon: {
+            type: String,
+            default: () => defProps.collapseItem.icon
+        },
+        // 面板展开收起的过渡时间，单位ms
+        duration: {
+            type: Number,
+            default: () => defProps.collapseItem.duration
+        },
+        // 显示右侧图标
+        showRight: {
+            type: Boolean,
+            default: () => defProps.collapseItem.showRight
+        },
+        // 左侧图标样式
+        iconStyle: {
+            type: [Object, String],
+            default: () => {
+				return defProps.collapseItem.iconStyle
+			}
+        },
+        // 右侧箭头图标的样式
+        rightIconStyle: {
+            type: [Object, String],
+            default: () => {
+				return defProps.collapseItem.rightIconStyle
+			}
+        },
+        cellCustomStyle: {
+            type: [Object, String],
+            default: () => {
+				return defProps.collapseItem.cellCustomStyle
+			}
+        },
+        cellCustomClass: {
+            type: String,
+            default: () => defProps.collapseItem.cellCustomClass
+        }
+    }
+})

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

@@ -0,0 +1,243 @@
+<template>
+	<view class="u-collapse-item">
+		<u-cell
+			:title="$slots.title ? '' : title"
+			:value="value"
+			:label="label"
+			:icon="icon"
+			:isLink="isLink"
+			:clickable="clickable"
+			:border="parentData.border && showBorder"
+			@click="clickHandler"
+			:arrowDirection="expanded ? 'up' : 'down'"
+			:disabled="disabled"
+			:customClass="cellCustomClass"
+			:customStyle="cellCustomStyle"
+		>
+			<!-- 微信小程序不支持，因为微信中不支持 <slot name="title" #title />的写法 -->
+			<template #title>
+				<slot name="title">
+					<text v-if="!$slots.title && title">
+						{{title}}
+					</text>
+				</slot>
+			</template>
+			<template #icon>
+				<slot name="icon">
+					<u-icon v-if="!$slots.icon && icon" :size="22" :name="icon"></u-icon>
+				</slot>
+			</template>
+			<template #value>
+				<slot name="value">
+					<text v-if="!$slots.value && value">
+						{{value}}
+					</text>
+				</slot>
+			</template>
+			<template #right-icon>
+				<template v-if="showRight">
+					<u-icon v-if="!$slots['right-icon']" :size="16" name="arrow-right"></u-icon>
+					<slot name="right-icon">
+					</slot>
+				</template>
+			</template>
+		</u-cell>
+		<view
+			class="u-collapse-item__content"
+			:animation="animationData"
+			ref="animation"
+		>
+			<view
+				class="u-collapse-item__content__text content-class"
+				:id="elId"
+				:ref="elId"
+			><slot /></view>
+		</view>
+		<u-line v-if="parentData.border"></u-line>
+	</view>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import { nextTick } from 'vue';
+	import { guid, sleep, error } from '../../libs/function/index';
+	import test from '../../libs/function/test.js';
+	// #ifdef APP-NVUE
+	const animation = uni.requireNativePlugin('animation')
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * collapseItem 折叠面板Item
+	 * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
+	 * @tutorial https://ijry.github.io/uview-plus/components/collapse.html
+	 * @property {String}			title 		标题
+	 * @property {String}			value 		标题右侧内容
+	 * @property {String}			label 		标题下方的描述信息
+	 * @property {Boolean}			disbled 	是否禁用折叠面板 ( 默认 false )
+	 * @property {Boolean}			isLink 		是否展示右侧箭头并开启点击反馈 ( 默认 true )
+	 * @property {Boolean}			clickable	是否开启点击反馈 ( 默认 true )
+	 * @property {Boolean}			border		是否显示内边框 ( 默认 true )
+	 * @property {String}			align		标题的对齐方式 ( 默认 'left' )
+	 * @property {String | Number}	name		唯一标识符
+	 * @property {String}			icon		标题左侧图片，可为绝对路径的图片或内置图标
+	 * @event {Function}			change 			某个item被打开或者收起时触发
+	 * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
+	 */
+	export default {
+		name: "u-collapse-item",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				elId: guid(),
+				// uni.createAnimation的导出数据
+				animationData: {},
+				// 是否展开状态
+				expanded: false,
+				// 根据expanded确定是否显示border，为了控制展开时，cell的下划线更好的显示效果，进行一定时间的延时
+				showBorder: false,
+				// 是否动画中，如果是则不允许继续触发点击
+				animating: false,
+				// 父组件u-collapse的参数
+				parentData: {
+					accordion: false,
+					border: false
+				}
+			};
+		},
+		watch: {
+			expanded(n) {
+				clearTimeout(this.timer)
+				this.timer = null
+				// 这里根据expanded的值来进行一定的延时，是为了cell的下划线更好的显示效果
+				this.timer = setTimeout(() => {
+					this.showBorder = n
+				}, n ? 10 : 290)
+			}
+		},
+		mounted() {
+			this.init()
+			// console.log('$slots', this.$slots)
+		},
+		methods: {
+			// 异步获取内容，或者动态修改了内容时，需要重新初始化
+			async init() {
+				// 初始化数据
+				this.updateParentData()
+				if (!this.parent) {
+					return error('u-collapse-item必须要搭配u-collapse组件使用')
+				}
+				const {
+					value,
+					accordion,
+					children = []
+				} = this.parent
+
+				if (accordion) {
+					if (test.array(value)) {
+						return error('手风琴模式下，u-collapse组件的value参数不能为数组')
+					}
+					this.expanded = this.name == value
+				} else {
+					if (!test.array(value) && value !== null) {
+						return error('非手风琴模式下，u-collapse组件的value参数必须为数组')
+					}
+					this.expanded = (value || []).some(item => item == this.name)
+				}
+				// 设置组件的展开或收起状态
+				await nextTick()
+				this.setContentAnimate()
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				this.getParentData('u-collapse')
+			},
+			async setContentAnimate() {
+				// 每次面板打开或者收起时，都查询元素尺寸
+				// 好处是，父组件从服务端获取内容后，变更折叠面板后可以获得最新的高度
+				const rect = await this.queryRect()
+				const height = this.expanded ? rect.height : 0
+				this.animating = true
+				// #ifdef APP-NVUE
+				const ref = this.$refs['animation'].ref
+				animation.transition(ref, {
+					styles: {
+						height: height + 'px'
+					},
+					duration: this.duration,
+					// 必须设置为true，否则会到面板收起或展开时，页面其他元素不会随之调整它们的布局
+					needLayout: true,
+					timingFunction: 'ease-in-out',
+				}, () => {
+					this.animating = false
+				})
+				// #endif
+
+				// #ifndef APP-NVUE
+				const animation = uni.createAnimation({
+					timingFunction: 'ease-in-out',
+				});
+				animation
+					.height(height)
+					.step({
+						duration: this.duration,
+					})
+					.step()
+				// 导出动画数据给面板的animationData值
+				this.animationData = animation.export()
+				// 标识动画结束
+				sleep(this.duration).then(() => {
+					this.animating = false
+				})
+				// #endif
+			},
+			// 点击collapsehead头部
+			clickHandler() {
+				if (this.disabled && this.animating) return
+				// 设置本组件为相反的状态
+				this.parent && this.parent.onChange(this)
+			},
+			// 查询内容高度
+			queryRect() {
+				// #ifndef APP-NVUE
+				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://ijry.github.io/uview-plus/js/getRect.html
+				// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
+				return new Promise(resolve => {
+					this.$uGetRect(`#${this.elId}`).then(size => {
+						resolve(size)
+					})
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				// nvue下，使用dom模块查询元素高度
+				// 返回一个promise，让调用此方法的主体能使用then回调
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs[this.elId], res => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			}
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+
+	.u-collapse-item {
+
+		&__content {
+			overflow: hidden;
+			height: 0;
+
+			&__text {
+				padding: 12px 15px;
+				color: $u-content-color;
+				font-size: 14px;
+				line-height: 18px;
+			}
+		}
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-column-notice/columnNotice.js

@@ -0,0 +1,25 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 16:57:16
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/columnNotice.js
+ */
+export default {
+    // columnNotice 组件
+    columnNotice: {
+        text: '',
+        icon: 'volume',
+        mode: '',
+        color: '#f9ae3d',
+        bgColor: '#fdf6ec',
+        fontSize: 14,
+        speed: 80,
+        step: false,
+        duration: 1500,
+        disableTouch: true,
+		justifyContent: 'flex-start'
+    }
+}

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

@@ -0,0 +1,61 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 显示的内容，字符串
+        text: {
+            type: [Array],
+            default: () => defProps.columnNotice.text
+        },
+        // 是否显示左侧的音量图标
+        icon: {
+            type: String,
+            default: () => defProps.columnNotice.icon
+        },
+        // 通告模式，link-显示右箭头，closable-显示右侧关闭图标
+        mode: {
+            type: String,
+            default: () => defProps.columnNotice.mode
+        },
+        // 文字颜色，各图标也会使用文字颜色
+        color: {
+            type: String,
+            default: () => defProps.columnNotice.color
+        },
+        // 背景颜色
+        bgColor: {
+            type: String,
+            default: () => defProps.columnNotice.bgColor
+        },
+        // 字体大小，单位px
+        fontSize: {
+            type: [String, Number],
+            default: () => defProps.columnNotice.fontSize
+        },
+        // 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度
+        speed: {
+            type: [String, Number],
+            default: () => defProps.columnNotice.speed
+        },
+        // direction = row时，是否使用步进形式滚动
+        step: {
+            type: Boolean,
+            default: () => defProps.columnNotice.step
+        },
+        // 滚动一个周期的时间长，单位ms
+        duration: {
+            type: [String, Number],
+            default: () => defProps.columnNotice.duration
+        },
+        // 是否禁止用手滑动切换
+        // 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
+        disableTouch: {
+            type: Boolean,
+            default: () => defProps.columnNotice.disableTouch
+        },
+		justifyContent: {
+			type: String,
+			default: () => defProps.columnNotice.justifyContent
+		}
+    }
+})

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

@@ -0,0 +1,165 @@
+<template>
+	<view
+		class="u-notice"
+		@tap="clickHandler"
+	>
+		<slot name="icon">
+			<view
+				class="u-notice__left-icon"
+				v-if="icon"
+			>
+				<u-icon
+					:name="icon"
+					:color="color"
+					size="19"
+				></u-icon>
+			</view>
+		</slot>
+		<swiper
+			:disable-touch="disableTouch"
+			:vertical="step ? false : true"
+			circular
+			:interval="duration"
+			:autoplay="true"
+			class="u-notice__swiper"
+			@change="noticeChange"
+		>
+			<swiper-item
+				v-for="(item, index) in text"
+				:key="index"
+				class="u-notice__swiper__item"
+				:style="{'justifyContent': justifyContent}"
+			>
+				<text
+					class="u-notice__swiper__item__text u-line-1"
+					:style="[textStyle]"
+				>{{ item }}</text>
+			</swiper-item>
+		</swiper>
+		<view
+			class="u-notice__right-icon"
+			v-if="['link', 'closable'].includes(mode)"
+		>
+			<u-icon
+				v-if="mode === 'link'"
+				name="arrow-right"
+				:size="17"
+				:color="color"
+			></u-icon>
+			<u-icon
+				v-if="mode === 'closable'"
+				name="close"
+				:size="16"
+				:color="color"
+				@click="close"
+			></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, error } from '../../libs/function/index';
+	import test from '../../libs/function/test';
+	/**
+	 * ColumnNotice 滚动通知中的垂直滚动 内部组件
+	 * @description 该组件用于滚动通告场景，是其中的垂直滚动方式
+	 * @tutorial https://ijry.github.io/uview-plus/components/noticeBar.html
+	 * @property {Array}			text 			显示的内容，字符串
+	 * @property {String}			icon 			是否显示左侧的音量图标 （ 默认 'volume' ）
+	 * @property {String}			mode 			通告模式，link-显示右箭头，closable-显示右侧关闭图标
+	 * @property {String}			color 			文字颜色，各图标也会使用文字颜色 （ 默认 '#f9ae3d' ）
+	 * @property {String}			bgColor 		背景颜色 （ 默认 '#fdf6ec' ）
+	 * @property {String | Number}	fontSize		字体大小，单位px  （ 默认 14 ）
+	 * @property {String | Number}	speed			水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度 （ 默认 80 ）
+	 * @property {Boolean}			step			direction = row时，是否使用步进形式滚动 （ 默认 false ）
+	 * @property {String | Number}	duration		滚动一个周期的时间长，单位ms （ 默认 1500 ）
+	 * @property {Boolean}			disableTouch	是否禁止用手滑动切换   目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 （ 默认 true ）
+	 * @example 
+	 */
+	export default {
+		mixins: [mpMixin, mixin, props],
+		watch: {
+			text: {
+				immediate: true,
+				handler(newValue, oldValue) {
+					if(!test.array(newValue)) {
+						error('noticebar组件direction为column时，要求text参数为数组形式')
+					}
+				}
+			}
+		},
+		computed: {
+			// 文字内容的样式
+			textStyle() {
+				let style = {}
+				style.color = this.color
+				style.fontSize = addUnit(this.fontSize)
+				return style
+			},
+			// 垂直或者水平滚动
+			vertical() {
+				if (this.mode == 'horizontal') return false
+				else return true
+			},
+		},
+		data() {
+			return {
+				index:0
+			}
+		},
+		emits: ["click", "close"],
+		methods: {
+			noticeChange(e){
+				this.index = e.detail.current
+			},
+			// 点击通告栏
+			clickHandler() {
+				this.$emit('click', this.index)
+			},
+			// 点击关闭按钮
+			close() {
+				this.$emit('close')
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+
+	.u-notice {
+		@include flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&__left-icon {
+			align-items: center;
+			margin-right: 5px;
+		}
+
+		&__right-icon {
+			margin-left: 5px;
+			align-items: center;
+		}
+
+		&__swiper {
+			height: 16px;
+			@include flex;
+			align-items: center;
+			flex: 1;
+
+			&__item {
+				@include flex;
+				align-items: center;
+				overflow: hidden;
+
+				&__text {
+					font-size: 14px;
+					color: $u-warning;
+				}
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+	<view @click="handleClick">
+        <slot>复制</slot>
+    </view>
+</template>
+<script>
+export default {
+    name: "up-copy",
+    props: {
+        content: {
+            type: String,
+            default: ''
+        },
+		alertStyle: {
+			type: String,
+			default: 'toast'
+		},
+		notice: {
+			type: String,
+			default: '复制成功'
+		}
+    },
+	emits: ['success'],
+    methods: {
+        handleClick() {
+            let content = this.content;
+			if (!content) {
+				uni.showToast({
+				    title: '暂无',
+				    icon: 'none',
+				    duration: 2000,
+				});
+				return false;
+			}
+            content = typeof content === 'string' ? content : content.toString() // 复制内容，必须字符串，数字需要转换为字符串
+            /**
+			* 小程序端 和 app端的复制逻辑
+			*/
+			let that = this;
+            uni.setClipboardData({
+                data: content,
+                success: function() {
+					if (that.alertStyle == 'modal') {
+						uni.showModal({
+							title: '提示',
+							content: that.notice
+						});
+					} else {
+						uni.showToast({
+						    title: that.notice,
+						    icon: 'none'
+						});
+					}
+					that.$emit('success');
+                },
+                fail:function(){
+                    uni.showToast({
+                        title: '复制失败',
+                        icon: 'none',
+                        duration:3000,
+                    });
+                }
+            });
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

package/template/src/uni_modules/uview-plus/components/u-count-down/countDown.js

@@ -0,0 +1,18 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:11:29
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/countDown.js
+ */
+export default {
+    // u-count-down 计时器组件
+    countDown: {
+        time: 0,
+        format: 'HH:mm:ss',
+        autoStart: true,
+        millisecond: false
+    }
+}