Merge branch 'dev' into yiruiwen

pages/componentsB/rate/index.vue

@@ -6,7 +6,7 @@
 				<u-rate v-model="value" :count="count" @change="change"
 				:active-color="activeColor" :inaction-color="inactiveColor"
 				:active-icon="activeIcon" :inactive-icon="inactiveIcon"
-				:disabled="disabled"></u-rate>
+				:disabled="disabled" :colors="colors" :icons="icons"></u-rate>
 			</view>
 		</view>
 		<view class="u-config-wrap">
@@ -29,6 +29,10 @@
 				<view class="u-item-title">自定义图标</view>
 				<u-subsection vibrateShort current="1" :list="['是', '否']" @change="iconChange"></u-subsection>
 			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否分层</view>
+				<u-subsection vibrateShort current="1" :list="['是', '否']" @change="decimalChange"></u-subsection>
+			</view>
 			<view class="u-config-item">
 				<view class="u-item-title">是否禁用</view>
 				<u-subsection vibrateShort current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
@@ -53,7 +57,9 @@
 				count: 5,
 				customIcon: false,
 				plain: false,
-				value: 0
+				value: 0,
+				colors: [],
+				icons: []
 			}
 		},
 		watch: {
@@ -93,6 +99,15 @@
 					this.inactiveColor = '#b2b2b2';
 				}
 			},
+			decimalChange(index) {
+				if(index == 0) {
+					this.colors = ['#ffc454', '#ffb409', '#ff9500'];
+					this.icons = ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'];
+				} else {
+					this.colors = [];
+					this.icons = [];
+				}
+			},
 			iconChange(index) {
 				this.customIcon = !index;
 			},

uview-ui/components/u-icon/u-icon.vue

 <template>
 	<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
 		<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
-		<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass" @touchstart="touchstart"></text>
+		<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass"
+			  @touchstart="touchstart">
+			<text v-if="showDecimalIcon" :style="[decimalIconStyle]" :class="decimalIconClass" :hover-class="hoverClass"
+				  class="u-icon__decimal">
+			</text>
+		</text>
 		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
 		<text v-if="label !== ''" class="u-icon__label" :style="{
 			color: labelColor,
@@ -10,7 +15,8 @@
 			marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
 			marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
 			marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
-		}">{{label}}</text>
+		}">{{ label }}
+		</text>
 	</view>
 </template>
 
@@ -38,6 +44,11 @@
  * @property {String} width 显示图片小图标时的宽度
  * @property {String} height 显示图片小图标时的高度
  * @property {String} top 图标在垂直方向上的定位
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {Boolean} show-decimal-icon 是否为DecimalIcon
+ * @property {String} inactive-color 背景颜色，可接受主题色，仅Decimal时有效
+ * @property {String | Number} percent 显示的百分比，仅Decimal时有效
  * @event {Function} click 点击图标时触发
  * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
  */
@@ -145,71 +156,120 @@ export default {
 		top: {
 			type: [String, Number],
 			default: 0
+		},
+		// 是否为DecimalIcon
+		showDecimalIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 背景颜色，可接受主题色，仅Decimal时有效
+		inactiveColor: {
+			type: String,
+			default: '#ececec'
+		},
+		// 显示的百分比，仅Decimal时有效
+		percent: {
+			type: [Number, String],
+			default: '50'
 		}
 	},
 	computed: {
 		customClass() {
-			let classes = [];
-			classes.push(this.customPrefix + '-' + this.name);
+			let classes = []
+			classes.push(this.customPrefix + '-' + this.name)
 			// uView的自定义图标类名为u-iconfont
-			if (this.customPrefix == 'uicon') classes.push('u-iconfont');
-			else classes.push(this.customPrefix);
+			if (this.customPrefix == 'uicon') {
+				classes.push('u-iconfont')
+			} else {
+				classes.push(this.customPrefix)
+			}
 			// 主题色，通过类配置
-			if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color);
+			if (this.showDecimalIcon && this.inactiveColor && this.$u.config.type.includes(this.inactiveColor)) {
+				classes.push('u-icon__icon--' + this.inactiveColor)
+			} else if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
 			// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
 			// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
 			//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
-			classes = classes.join(' ');
+			classes = classes.join(' ')
 			//#endif
-			return classes;
+			return classes
 		},
 		iconStyle() {
-			let style = {};
+			let style = {}
 			style = {
 				fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
 				fontWeight: this.bold ? 'bold' : 'normal',
 				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
 				top: this.$u.addUnit(this.top)
-			};
+			}
 			// 非主题色值时，才当作颜色值
-			if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color;
-			return style;
+			if (this.showDecimalIcon && this.inactiveColor && !this.$u.config.type.includes(this.inactiveColor)) {
+				style.color = this.inactiveColor
+			} else if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color
+
+			return style
 		},
 		// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
 		isImg() {
-			return this.name.indexOf('/') !== -1;
+			return this.name.indexOf('/') !== -1
 		},
 		imgStyle() {
-			let style = {};
+			let style = {}
 			// 如果设置width和height属性，则优先使用，否则使用size属性
-			style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size);
-			style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size);
-			return style;
+			style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size)
+			style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size)
+			return style
+		},
+		decimalIconStyle() {
+			let style = {}
+			style = {
+				fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
+				fontWeight: this.bold ? 'bold' : 'normal',
+				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+				top: this.$u.addUnit(this.top),
+				width: this.percent + '%'
+			}
+			// 非主题色值时，才当作颜色值
+			if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color
+			return style
+		},
+		decimalIconClass() {
+			let classes = []
+			classes.push(this.customPrefix + '-' + this.name)
+			// uView的自定义图标类名为u-iconfont
+			if (this.customPrefix == 'uicon') {
+				classes.push('u-iconfont')
+			} else {
+				classes.push(this.customPrefix)
+			}
+			// 主题色，通过类配置
+			if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
+			else classes.push('u-icon__icon--primary')
+			// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+			// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+			//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+			classes = classes.join(' ')
+			//#endif
+			return classes
 		}
 	},
 	methods: {
 		click() {
-			this.$emit('click', this.index);
+			this.$emit('click', this.index)
 		},
 		touchstart() {
-			this.$emit('touchstart', this.index);
+			this.$emit('touchstart', this.index)
 		}
 	}
-};
+}
 </script>
 
 <style scoped lang="scss">
 @import "../../libs/css/style.components.scss";
-/* #ifndef APP-NVUE */
-// 目前由于nvue对定义字体时的content属性报错，所以nvue先不引入
 @import '../../iconfont.css';
-/* #endif */
 
 .u-icon {
-	/* #ifndef APP-NVUE */
 	display: inline-flex;
-	/* #endif */
-	flex-direction: row;
 	align-items: center;
 
 	&--left {
@@ -256,11 +316,17 @@ export default {
 		}
 	}
 
+	&__decimal {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: inline-block;
+		overflow: hidden;
+	}
+
 	&__img {
-		/* #ifndef APP-PLUS */
 		height: auto;
 		will-change: transform;
-		/* #endif */
 	}
 
 	&__label {

uview-ui/components/u-rate/u-rate.vue

@@ -2,20 +2,22 @@
 	<view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
 		<view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
 			<u-icon
-				:name="activeIndex > index ? activeIcon : inactiveIcon"
+				:name="activeIndex > index ? elActiveIcon : inactiveIcon"
 				@click="click(index + 1, $event)"
-				:color="activeIndex > index ? activeColor : inactiveColor"
+				:color="activeIndex > index ? elActiveColor : inactiveColor"
 				:custom-style="{
 					fontSize: size + 'rpx',
 					padding: `0 ${gutter / 2 + 'rpx'}`
 				}"
+				:custom-prefix="customPrefix"
+				:show-decimal-icon="showDecimalIcon(index)"
+				:percent="decimal"
 			></u-icon>
 		</view>
 	</view>
 </template>
 
-<script>
-/**
+<script>/**
  * rate 评分
  * @description 该组件一般用于满意度调查，星型评分的场景
  * @tutorial https://www.uviewui.com/components/rate.html
@@ -33,6 +35,7 @@
  * @event {Function} change 选中的星星发生变化时触发
  * @example <u-rate :count="count" :current="2"></u-rate>
  */
+
 export default {
 	name: 'u-rate',
 	props: {
@@ -97,6 +100,23 @@ export default {
 		inactiveIcon: {
 			type: String,
 			default: 'star'
+		},
+		// 自定义扩展前缀，方便用户扩展自己的图标库
+		customPrefix: {
+			type: String,
+			default: 'uicon'
+		},
+		colors: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		icons: {
+			type: Array,
+			default() {
+				return []
+			}
 		}
 	},
 	data() {
@@ -109,94 +129,127 @@ export default {
 			activeIndex: this.value != -1 ? this.value : this.current,
 			starWidth: 0, // 每个星星的宽度
 			starWidthArr: [] //每个星星最右边到组件盒子最左边的距离
-		};
+		}
 	},
 	watch: {
 		current(val) {
-			this.activeIndex = val;
+			this.activeIndex = val
 		},
 		value(val) {
-			this.activeIndex = val;
+			this.activeIndex = val
+		}
+	},
+	computed: {
+		decimal() {
+			if (this.disabled) {
+				return this.activeIndex * 100 % 100
+			} else if (this.allowHalf) {
+				return 50
+			}
+		},
+		elActiveIcon() {
+			const len = this.icons.length
+			if (len && len <= this.count) {
+				const step = Math.round(this.activeIndex / Math.round(this.count / len))
+				if (step < 1) return this.icons[0]
+				if (step > len) return this.icons[len - 1]
+				return this.icons[step - 1]
+			}
+			return this.activeIcon
+		},
+		elActiveColor() {
+			const len = this.colors.length
+			if (len && len <= this.count) {
+				const step = Math.round(this.activeIndex / Math.round(this.count / len))
+				if (step < 1) return this.colors[0]
+				if (step > len) return this.colors[len - 1]
+				return this.colors[step - 1]
+			}
+			return this.activeColor
 		}
 	},
 	methods: {
 		// 获取评分组件盒子的布局信息
 		getElRectById() {
 			// uView封装的获取节点的方法，详见文档
-			this.$uGetRect('#' + this.elId).then(res => {
-				this.starBoxLeft = res.left;
+			this.$u.getRect('#' + this.elId).then(res => {
+				this.starBoxLeft = res.left
 			})
 		},
 		// 获取单个星星的尺寸
 		getElRectByClass() {
 			// uView封装的获取节点的方法，详见文档
-			this.$uGetRect('.' + this.elClass).then(res => {
-				this.starWidth = res.width;
+			this.$u.getRect('.' + this.elClass).then(res => {
+				this.starWidth = res.width
 				// 把每个星星右边到组件盒子左边的距离放入数组中
 				for (let i = 0; i < this.count; i++) {
-					this.starWidthArr[i] = (i + 1) * this.starWidth;
+					this.starWidthArr[i] = (i + 1) * this.starWidth
 				}
 			})
 		},
 		// 手指滑动
 		touchMove(e) {
 			if (this.disabled) {
-				return;
+				return
 			}
 			if (!e.changedTouches[0]) {
-				return;
+				return
 			}
-			const movePageX = e.changedTouches[0].pageX;
+			const movePageX = e.changedTouches[0].pageX
 			// 滑动点相对于评分盒子左边的距离
-			const distance = movePageX - this.starBoxLeft;
+			const distance = movePageX - this.starBoxLeft
 
 			// 如果滑动到了评分盒子的左边界，就设置为0星
 			if (distance <= 0) {
-				this.activeIndex = 0;
+				this.activeIndex = 0
 			}
 			// 滑动的距离，相当于多少颗星星
-			let index = Math.ceil(distance / this.starWidth);
-			this.activeIndex = index > this.count ? this.count : index;
+			let index = Math.ceil(distance / this.starWidth)
+			this.activeIndex = index > this.count ? this.count : index
 			// 对最少颗星星的限制
-			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
-			this.emitEvent();
+			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
+			this.emitEvent()
 		},
 		// 通过点击，直接选中
 		click(index, e) {
 			if (this.disabled) {
-				return;
+				return
 			}
 			// 半星选择，尚未实现
 			if (this.allowHalf) {
 			}
 			// 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价
 			if (index == 1) {
-				if (this.activeIndex == 1) this.activeIndex = 0;
-				else this.activeIndex = 1;
+				if (this.activeIndex == 1) {
+					this.activeIndex = 0
+				} else {
+					this.activeIndex = 1
+				}
 			} else {
-				this.activeIndex = index;
+				this.activeIndex = index
 			}
 			// 对最少颗星星的限制
-			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
-			this.emitEvent();
+			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
+			this.emitEvent()
 		},
 		// 发出事件
 		emitEvent() {
 			// 发出change事件
-			this.$emit('change', this.activeIndex);
+			this.$emit('change', this.activeIndex)
 			// 同时修改双向绑定的value的值
-			if(this.value != -1) {
-				this.$emit('input', this.activeIndex);
+			if (this.value != -1) {
+				this.$emit('input', this.activeIndex)
 			}
+		},
+		showDecimalIcon(index) {
+			return this.disabled && parseInt(this.activeIndex) === index
 		}
 	},
 	mounted() {
-		setTimeout(() => {
-			this.getElRectById();
-			this.getElRectByClass();
-		}, 100)
+		this.getElRectById()
+		this.getElRectByClass()
 	}
-};
+}
 </script>
 
 <style scoped lang="scss">

uview-ui/libs/mixin/mpShare.js

@@ -9,5 +9,10 @@ module.exports = {
 	},
 	onShareAppMessage() {
 		return this.$u.mpShare
+	},
+	// #ifdef MP-WEIXIN
+	onShareTimeline() {
+		return this.$u.mpShare
 	}
+	// #endif
 }