stellar-ui-v2 1.35.3

package/components/ste-price/ste-price.vue

@@ -0,0 +1,258 @@
+<template>
+	<view class="ste-price-root">
+		<view class="content" :style="[cmpPriceStyle]">
+			<text v-if="showUnit" class="unit" :style="[cmpUnitStyle]">{{ unitSymbol }}</text>
+			<text class="yuan-price" :style="[cmpYuanPriceStyle]">{{ cmpYuanValue }}</text>
+			<text v-if="valueUnit === 'fen'" class="fen-price" :style="[cmpFenPriceStyle]">
+				{{ cmpFenValue }}
+			</text>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+/**
+ * ste-price 价格
+ * @description 金额组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-price
+ * @property {Number|String} value 金额 默认值 0
+ * @property {String} valueUnit 金额单位
+ * @value fen 分(默认值){String}
+ * @value yuan 元{String}
+ * @property {Boolean} showUnit 是否显示符号
+ * @property {String} unitSymbol 符号标记，默认值 ¥
+ * @property {Number} digits 精度 默认值 -1
+ * @value -1 不处理（默认值）{Number}
+ * @value 0 取整（四舍五入）{Number}
+ * @value 1 保留1位小数（四舍五入）{Number}
+ * @value 2 保留2位小数（四舍五入）{Number}
+ * @property {Number|String} fontSize 金额文字尺寸 默认值 30
+ * @property {String} color 文字颜色 默认值 #ff1e19
+ * @property {String} linePriceColor 划线价文字颜色 默认值 #999999
+ * @property {Number|String} lineHeight 行高，Number，单位rpx，String，同原生 默认值 1
+ * @property {Boolean} isSuggestPrice 是否划线价 默认值 false
+ * @property {Number|String} marginLeft 左边距	 默认值 0
+ * @property {Number|String} marginRight 右边距	 默认值 0
+ * @property {Number|String} marginTop 上边距	 默认值 0
+ * @property {Number|String} marginBottom 下边距	 默认值 0
+ * @property {Number} styleType 金额样式	 默认值 2
+ * @property {Boolean} bold 是否加粗 默认值 false
+ * @property {Function(value)} formatter 用来格式化内容
+ */
+export default {
+	group: '电商组件',
+	title: 'Price 价格',
+	name: 'ste-price',
+	props: {
+		// 金额
+		value: {
+			type: [Number, String, null],
+			default: 0,
+		},
+		// 金额单位，fen | yuan，当为fen（分）时，值除以100
+		valueUnit: {
+			type: [String, null],
+			default: 'fen',
+		},
+		// 精度 -1 不使用精度 0 保留0位小数 1 保留1位小数 2保留2位小数
+		digits: {
+			type: [Number, null],
+			default: -1,
+		},
+		// 是否显示单位符号
+		showUnit: {
+			type: [Boolean, null],
+			default: true,
+		},
+		// 单位符号
+		unitSymbol: {
+			type: [String, null],
+			default: '¥',
+		},
+		// 金额文字尺寸
+		fontSize: {
+			type: [Number, String, null],
+			default: 30,
+		},
+		// 金额文字颜
+		color: {
+			type: [String, null, null],
+			default: '#FF1E19',
+		},
+		// 划线价颜色
+		linePriceColor: {
+			type: [String, null, null],
+			default: '#999999',
+		},
+		// 行高，默认值为-1，当为-1是，line-height:1
+		lineHeight: {
+			type: [Number, String, null],
+			default: -1,
+		},
+		// 是否是划线价
+		isSuggestPrice: {
+			type: [Boolean, null],
+			default: false,
+		},
+		// 左margin
+		marginLeft: {
+			type: [Number, String, null],
+			default: 0,
+		}, // 右margin
+		marginRight: {
+			type: [Number, String, null],
+			default: 0,
+		},
+		// 上margin
+		marginTop: {
+			type: [Number, String, null],
+			default: 0,
+		}, // 下margin
+		marginBottom: {
+			type: [Number, String, null],
+			default: 0,
+		},
+		// 金额样式 1 元和角分大小相等（特殊价格） 2 角分小于元（常规价格）3 价格符号和角，分相等
+		styleType: {
+			type: [Number, null],
+			default: 2,
+		},
+		bold: {
+			type: [Boolean, null],
+			default: false,
+		},
+		// 过滤器
+		formatter: {
+			type: [Function, null],
+			default: undefined,
+		},
+	},
+	data() {
+		return {};
+	},
+	computed: {
+		cmpValue() {
+			if (this.formatter && typeof this.formatter === 'function') {
+				return this.formatter(this.value);
+			}
+
+			let value = this.value;
+			if (this.valueUnit == 'fen') {
+				value = utils.fenToYuan(this.value, -1, '', 0);
+			}
+			if (this.digits == -1) {
+				value = Number.parseFloat(Number(value)).toString();
+			} else {
+				value = Number(value).toFixed(this.digits).toString();
+			}
+			return value;
+		},
+		cmpYuanValue() {
+			if (this.cmpValue) {
+				if (this.cmpValue.indexOf('.') > -1) {
+					return this.cmpValue.split('.')[0];
+				} else {
+					return this.cmpValue;
+				}
+			} else {
+				return utils.fenToYuan(this.value, -1, '', 1);
+			}
+		},
+		cmpFenValue() {
+			if (this.cmpValue) {
+				if (this.cmpValue.indexOf('.') > -1) {
+					return '.' + this.cmpValue.split('.')[1];
+				}
+				return '';
+			} else {
+				return utils.fenToYuan(this.value, -1, '', 2);
+			}
+		},
+		cmpPriceStyle() {
+			return {
+				lineHeight: this.lineHeight === -1 ? 0.8 : utils.formatPx(this.lineHeight),
+				color: (this.isSuggestPrice ? this.linePriceColor : this.color) + ' !important',
+				marginLeft: utils.formatPx(this.marginLeft),
+				marginRight: utils.formatPx(this.marginRight),
+				marginTop: utils.formatPx(this.marginTop),
+				marginBottom: utils.formatPx(this.marginBottom),
+				fontWeight: this.bold ? 'bold' : 'normal',
+			};
+		},
+		cmpUnitStyle() {
+			let style = {
+				textDecoration: this.isSuggestPrice ? 'line-through' : 'none',
+				color: (this.isSuggestPrice ? this.linePriceColor : this.color) + ' !important',
+			};
+
+			if (this.isSuggestPrice) {
+				style.color = this.linePriceColor;
+				style.fontSize = utils.formatPx(this.fontSize);
+			} else {
+				style.fontSize = this.calcFontSize();
+			}
+			return style;
+		},
+		cmpYuanPriceStyle() {
+			return {
+				fontSize: utils.formatPx(this.fontSize),
+				textDecoration: this.isSuggestPrice ? 'line-through' : 'none',
+			};
+		},
+		cmpFenPriceStyle() {
+			let fontSize = 0;
+			if (this.isSuggestPrice) {
+				fontSize = utils.formatPx(this.fontSize);
+			} else {
+				if (this.styleType == 2) {
+					fontSize = this.calcFontSize();
+				} else {
+					fontSize = utils.formatPx(this.fontSize);
+				}
+			}
+			return {
+				fontSize,
+				textDecoration: this.isSuggestPrice ? 'line-through' : 'none',
+			};
+		},
+	},
+	methods: {
+		calcFontSize() {
+			let size = utils.formatPx(this.fontSize);
+			if (this.styleType == 1) {
+				if (this.fontSize <= 40) {
+					size = utils.formatPx(20);
+				} else {
+					size = utils.formatPx(this.fontSize - 20);
+				}
+			} else if (this.styleType == 3) {
+				size = utils.formatPx(this.fontSize);
+			} else {
+				// 常规 - 分元不一致
+				if (this.fontSize > 28 && this.fontSize <= 40) {
+					size = utils.formatPx(20);
+				} else if (this.fontSize > 40) {
+					size = utils.formatPx(this.fontSize - 20);
+				}
+			}
+			return size;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-price-root {
+	display: inline-flex;
+	.content {
+		display: inline-block;
+		vertical-align: bottom;
+	}
+	.unit {
+		vertical-align: baseline;
+	}
+	.yuan-price {
+	}
+}
+</style>

package/components/ste-progress/README.md

@@ -0,0 +1,87 @@
+# Progress 进度条
+进度条组件
+
+---$
+
+
+### 代码演示
+#### 背景色
+- 背景色支持纯色、渐变色、图片
+- 支持设置激活部分的背景(`activeBg`)和未激活部分(`inactiveBg`)的背景
+```html
+<ste-progress :percentage="40"></ste-progress>
+<ste-progress :percentage="45" activeBg="https://image.whzb.com/chain/StellarUI/image/p-red.png" inactiveBg="#CCCCCC"></ste-progress>
+<ste-progress :percentage="50"activeBg="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></ste-progress>
+```
+
+#### 线条粗细
+- 通过`strokeWidth`设置线条的粗细
+```html
+<ste-progress :percentage="40" strokeWidth="20"></ste-progress>
+<ste-progress :percentage="45" strokeWidth="36"></ste-progress>
+```
+
+#### 禁用
+```html
+<ste-progress :percentage="40" disabled></ste-progress>
+```
+
+#### 长度
+- 通过`width`设置进度条长度
+- 默认是`100%`，跟随父容器的宽度
+```html
+<ste-progress :percentage="40" width="80%"></ste-progress>
+<ste-progress :percentage="45" width="200"></ste-progress>
+```
+
+#### 动画时间
+```html
+<ste-progress :percentage="p" duration="0.5"></ste-progress>
+```
+
+#### 自定义文字内容
+- 通过`pivotText`属性来自定义进度条内文字显示的内容
+- 通过`textColor`属性来自定义进度条内文字的颜色
+- 通过`textAlign`属性来自定义进度条内文字的对齐方式
+- 通过`textSize`属性来自定义进度条内文字的大小
+```html
+<ste-progress :percentage="30" pivotText="已抢30%"></ste-progress>
+<ste-progress :percentage="40" pivotText="已抢40%" textColor="#FF1E19"></ste-progress>
+<ste-progress :percentage="45" pivotText="已抢45%" textAlign="left"></ste-progress>
+<ste-progress :percentage="50" pivotText="已抢50%" textSize="20"></ste-progress>
+```
+
+#### 文本显示阈值
+- 当进度条百分比(`percentage`)小于阈值时(`displayTextThreshold`)，进度条的内容将不会显示
+- 默认阈值是`0`，此时内容将始终显示
+```html
+<ste-progress :percentage="14" :displayTextThreshold="15"></ste-progress>
+<ste-progress :percentage="35" :displayTextThreshold="15"></ste-progress>
+```
+
+---$
+### API
+#### Props
+| 参数					| 说明																												| 类型				| 默认值		| 可选值							| 支持版本	|
+| ---					| ---																												| ---				| ---		| ---							| ---		|
+|`activeBg`				| 进度条激活部分的背景																								| `String`			| `#0090FF`	| -								| -			|
+|`inactiveBg`			| 进度条未激活部分的背景																								| `String`			| `#eeeeee`	| -								| -			|
+|`percentage`			| 进度条百分比																										| `Number`			| `0`		| 0-100							| -			|
+|`strokeWidth`			| 进度条的粗细，默认单位rpx																							| `String/Number`	| `24rpx`	| -								| -			|
+|`disabled`				| 是否禁用																											| `Boolean`			| `false`	| -								| -			|
+|`width`				| 宽度 <br/>Number，单位rpx<br/>String，同原生<br/>默认宽度是`100%`，会根据父容器的宽度，如果父容器没有宽度将不会显示	| `String/Number`	| `100%`	| -								| -			|
+|`duration`				| 动画时间，单位秒，设置为 0 可以禁用动画																				| `Number`			| `0.3`		| -								| -			|
+|`pivotText`			| 进度文字内容																										| `String`			| -			| -								| -			|
+|`textColor`			| 进度文字颜色																										| `String`			| `#ffffff`	| -								| -			|
+|`textAlign`			| 文本对齐方式																										| `String`			| `right`	| `left` 居左<br/>`center` 居中	| -			|
+|`textSize`				| 文本字体大小，默认单位rpx																							| `String/Number`	| `16`		| -								| -			|
+|`displayTextThreshold`	| 默认文本显示阈值																									| `Number`			| `0`		| -								| -			|
+
+#### Slots
+|插槽名		|说明		|插槽参数	|支持版本	|
+| ---		| ---		| ---		| ---		|
+| `default`	| 进度条内容	|-			| -			|
+
+---$
+
+{{fuyuwei}}

package/components/ste-progress/ste-progress.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="ste-progress-root" :style="[cmpRootCssVar]">
+		<view class="inactive-box" :style="[cmpInactiveStyle]"></view>
+		<view class="active-box line" :style="[cmpActiveStyle]" v-if="realPercentage > 0">
+			<slot v-if="haveSlot"></slot>
+			<text class="text" v-else>{{ cmpActiveText }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import useColor from '../../config/color.js';
+let color = useColor();
+/**
+ * ste-progress 进度条
+ * @description 进度条组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-progress
+ * @property {String} activeBg 进度条激活部分的背景	 默认值 #0090FF
+ * @property {String} inactiveBg 进度条未激活部分的背景	 默认值 #eeeeee
+ * @property {Number} percentage 进度条百分比	默认值 0
+ * @property {Number|String} strokeWidth 进度条的粗细，默认单位rpx	默认值 24
+ * @property {Boolean} disabled 是否禁用状态 默认 false
+ * @property {Number|String} width 进度条宽度 默认值 100%
+ * @property {Number} duration 进度条动画执行时间，单位秒，设置为 0 可以禁用动画 	默认值 0.3
+ * @property {String} pivotText 进度文字内容
+ * @property {String} textColor 进度文字颜色		默认 #ffffff
+ * @property {String} textAlign 文本对齐方式		默认 right
+ * @property {String} textSize 文本字体大小，默认单位rpx		默认 16
+ * @property {Number} textSize 默认文本显示阈值	默认 0
+ */
+const MIN = 0;
+const MAX = 100;
+export default {
+	group: '数据组件',
+	title: 'Progress 进度条',
+	name: 'ste-progress',
+	props: {
+		activeBg: {
+			type: [String, null],
+			default: '',
+		},
+		inactiveBg: {
+			type: [String, null],
+			default: '#eeeeee',
+		},
+		percentage: {
+			type: [Number, null],
+			default: 0,
+		},
+		strokeWidth: {
+			type: [String, Number, null],
+			default: 24,
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: false,
+		},
+		width: {
+			type: [String, Number, null],
+			default: '100%',
+		},
+		duration: {
+			type: [Number, null],
+			default: 0.3,
+		},
+		pivotText: {
+			type: [String, null],
+			default: '',
+		},
+		textColor: {
+			type: [String, null],
+			default: '#ffffff',
+		},
+		textAlign: {
+			type: [String, null],
+			default: 'right',
+		},
+		textSize: {
+			type: [String, Number, null],
+			default: 16,
+		},
+		displayTextThreshold: {
+			type: [Number, null],
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			realPercentage: 0,
+			haveSlot: false,
+		};
+	},
+	created() {},
+	mounted() {
+		this.haveSlot = this.$slots.default;
+	},
+	computed: {
+		cmpRootCssVar() {
+			const style = {
+				'--progress-width': utils.addUnit(this.width),
+				'--progress-height': utils.addUnit(this.strokeWidth),
+				// #ifdef MP-WEIXIN || MP-ALIPAY
+				'--progress-padding': this.$slots.default ? '0' : '0 16rpx',
+				// #endif
+				// #ifdef H5
+				'--progress-padding': this.$slots.default ? '0' : '0 8px',
+				// #endif
+				'--active-width': this.realPercentage + '%',
+				'--active-text-align': this.textAlign == 'right' ? 'flex-end' : this.textAlign,
+				'--active-text-color': this.textColor,
+				'--active-text-font-size': utils.addUnit(this.textSize),
+				'--active-transition-duration': `${this.duration}s`,
+			};
+			return style;
+		},
+		cmpInactiveStyle() {
+			let style = {};
+			if (this.disabled) {
+				style.backgroundColor = '#eeeeee';
+			} else {
+				const bg = utils.bg2style(this.inactiveBg);
+				style = { ...style, ...bg };
+			}
+			return style;
+		},
+		cmpActiveStyle() {
+			let style = {};
+			if (this.disabled) {
+				style.backgroundColor = '#cccccc';
+			} else {
+				const bg = utils.bg2style(this.activeBg ? this.activeBg : color.getColor().steThemeColor);
+				style = { ...style, ...bg };
+			}
+			return style;
+		},
+		cmpActiveText() {
+			let str = this.pivotText ? this.pivotText : this.realPercentage <= MIN ? '' : `${this.realPercentage}%`;
+			if (this.displayTextThreshold > 0 && this.realPercentage < this.displayTextThreshold) {
+				return '';
+			}
+			return str;
+		},
+	},
+	watch: {
+		percentage: {
+			handler(val) {
+				if (this.percentage >= MAX) {
+					this.realPercentage = MAX;
+				} else if (this.percentage <= MIN) {
+					this.realPercentage = MIN;
+				} else {
+					this.realPercentage = val;
+				}
+			},
+			immediate: true,
+		},
+	},
+	methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-progress-root {
+	position: relative;
+	width: var(--progress-width);
+	height: var(--progress-height);
+
+	.inactive-box,
+	.active-box {
+		width: var(--progress-width);
+		height: var(--progress-height);
+		border-radius: 24rpx;
+
+		background-repeat: repeat;
+		background-size: contain;
+	}
+
+	.active-box {
+		width: var(--active-width);
+		position: absolute;
+		left: 0;
+		top: 0;
+
+		display: flex;
+		align-items: center;
+		justify-content: var(--active-text-align);
+		padding: var(--progress-padding);
+
+		transition: width var(--active-transition-duration) ease;
+
+		.text {
+			color: var(--active-text-color);
+			font-size: var(--active-text-font-size);
+			vertical-align: middle;
+			line-height: 0;
+		}
+	}
+}
+</style>

package/components/ste-qrcode/README.md

@@ -0,0 +1,50 @@
+# QRcode 二维码
+能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置
+
+---$
+
+### 代码演示
+#### 基础使用
+```html
+<ste-qrcode content="https://stellar-ui.intecloud.com.cn/mp/index/index" />
+```
+
+#### 自定义颜色
+```html
+<ste-qrcode
+	content="https://stellar-ui.intecloud.com.cn/mp/index/index"
+	foreground="#c11"
+	background="#dad"
+/>
+```
+
+#### 带logo
+```html
+<ste-qrcode
+	content="https://stellar-ui.intecloud.com.cn/mp/index/index"
+	foregroundImageSrc="https://image.whzb.com/chain/StellarUI/logo.png"
+/>
+
+```
+
+
+---$
+### API
+#### Props
+| 参数						| 说明								| 类型		| 默认值		| 可选值	| 支持版本	|
+| ---						| ---								| ---		| ---		| ---	| ---		|
+| `content`					| 二维码内容							| `String`	| -			| -		| `v1.35.4`			|
+| `size`					| 二维码尺寸，单位`px`					| `Number`	| 200		| -		| `v1.35.4`    			|
+| `background`				| 背景色								| `String`	| `#fff`	| -		| `v1.35.4`    			|
+| `foreground`				| 前景色(二维码画笔颜色)				| `String`	| `#000`	| -		| `v1.35.4`    			|
+| `foregroundImageSrc`		| 二维码中间logo图					| `String`	| -			| -		| `v1.35.4`    			|
+| `foregroundImageWidth`	| logo图宽度, 默认二维码尺寸的四分之一	| `Number`	| `size/4`	| -		| `v1.35.4`    			|
+| `foregroundImageHeight`	| logo图高度, 默认二维码尺寸的四分之一	| `Number`	| `size/4`	| -		| `v1.35.4`    			|
+
+#### Events
+|事件名			|说明				|事件参数	|支持版本		|
+| ---			| ---				| ---	| ---		|
+| `loadImage`	| `二维码获取图片数据`	| `src`	| `v1.35.4`	|
+
+---$
+{{fuyuwei}}