店铺评论展示，评论组件

App.vue

@@ -26,6 +26,7 @@ export default {
 				}
 			}
 		})
+		
 	},
 	
 	globalData: {

components/rate/index.vue

+<template>
+	<view class="rate-wrap">
+		<view
+			class="rate_icon"
+			:style="{ 'margin-right': marginNumber + 'px' }"
+			v-for="(star, index) in stars"
+			:key="index"
+			@touchstart.stop="touchstart"
+			@touchmove.stop="touchmove"
+			@mousedown.stop="mousedown"
+			@mousemove.stop="mousemove"
+			@mouseleave="mouseleave"
+		>
+			<text
+				class="start"
+			/>
+			
+			<view class="rate_icon-on" :style="{ width: star.activeWitch}">
+				<text
+					class="start_fill"
+				/>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * @param {Number} 	size 						星星的大小
+	 * @param {Number} 	value/v-model 				当前评分
+	 * @param {Number} 	max 						最大评分评分数量，目前一分一颗星
+	 * @param {Number} 	margin 						星星的间距，单位 px
+	 * @param {Boolean} disabled = [true|false] 	是否为禁用状态，默认为 false
+	 * @param {Boolean} readonly = [true|false] 	是否为只读状态，默认为 false
+	 * @param {Boolean} allowHalf = [true|false] 	是否实现半星，默认为 false
+	 * @param {Boolean} touchable = [true|false] 	是否支持滑动手势，默认为 true
+	 * @event {Function} change 				    Rate 的 value 改变时触发事件，e={value:Number}
+	 */
+
+	export default {
+		name: "Rate",
+		props: {
+			size: {
+				type: [Number, String],
+				default: 17
+			},
+			value: {
+				// 当前评分
+				type: [Number, String],
+				default: 1
+			},
+			max: {
+				// 最大评分
+				type: [Number, String],
+				default: 5
+			},
+			margin: {
+				// 星星的间距
+				type: [Number, String],
+				default: 0
+			},
+			disabled: {
+				// 是否可点击
+				type: [Boolean, String],
+				default: false
+			},
+			readonly: {
+				// 是否只读
+				type: [Boolean, String],
+				default: false
+			},
+			allowHalf: {
+				// 是否显示半星
+				type: [Boolean, String],
+				default: true
+			},
+			touchable: {
+				// 是否支持滑动手势
+				type: [Boolean, String],
+				default: true
+			}
+		},
+		data() {
+			return {
+				valueSync: "",
+				userMouseFristMove: true,
+				userRated: false,
+				userLastRate: 1
+			};
+		},
+		watch: {
+			value(newVal) {
+				this.valueSync = Number(newVal);
+			}
+		},
+		computed: {
+			stars() {
+				const value = this.valueSync ? this.valueSync : 0
+				const starList = []
+				const floorValue = Math.floor(value)
+				const ceilValue = Math.ceil(value)
+				for (let i = 0; i < this.max; i++) {
+					if (floorValue > i) {
+						starList.push({
+							activeWitch: "100%"
+						});
+					} else if (ceilValue - 1 === i) {
+						starList.push({
+							activeWitch: (value - floorValue) * 100 + "%"
+						});
+					} else {
+						starList.push({
+							activeWitch: "0"
+						})
+					}
+				}
+				return starList
+			},
+
+			marginNumber() {
+				return Number(this.margin)
+			}
+		},
+		created() {
+			this.valueSync = Number(this.value)
+			this._rateBoxLeft = 0
+			this._oldValue = null
+		},
+		mounted() {
+			setTimeout(() => {
+				this._getSize()
+			}, 100)
+		},
+		methods: {
+			touchstart(e) {
+				if (this.readonly || this.disabled) return
+				const { clientX } = e.changedTouches[0]
+				this._getRateCount(clientX)
+			},
+			touchmove(e) {
+				if (this.readonly || this.disabled || !this.touchable) return
+				const { clientX } = e.changedTouches[0]
+				this._getRateCount(clientX)
+			},
+
+			/**
+			 * 获取星星个数
+			 */
+			_getRateCount(clientX) {
+				this._getSize()
+				const size = Number(this.size)
+				if(size === NaN){
+					return new Error('size 属性只能设置为数字')
+				}
+				// move星星的距离
+				const rateMoveRange = clientX - this._rateBoxLeft
+				let index = parseInt(rateMoveRange / (size + this.marginNumber))
+				index = index < 0 ? 0 : index;
+				index = index > this.max ? this.max : index;
+				const range = parseInt(rateMoveRange - (size + this.marginNumber) * index);
+				console.log(range)
+				let value = 0;
+				if (this._oldValue === index) return;
+				this._oldValue = index;
+				if (this.allowHalf) {
+					if (range > (size / 2)) {
+						value = index + 1
+					} else {
+						value = index + 0.5
+					}
+				} else {
+					value = index + 1
+				}
+				value = Math.max(0.5, Math.min(value, this.max))
+				console.log(value)
+				this.valueSync = value
+				this._onChange()
+			},
+
+			/**
+			 * 触发动态修改
+			 */
+			_onChange() {
+				this.$emit("update:modelValue", this.valueSync);
+				this.$emit("change", {
+					value: this.valueSync
+				});
+			},
+			/**
+			 * 获取星星距离屏幕左侧距离
+			 */
+			_getSize() {
+				uni.createSelectorQuery()
+					.in(this)
+					.select('.rate-wrap')
+					.boundingClientRect()
+					.exec(ret => {
+						if (ret) {
+							this._rateBoxLeft = ret[0].left
+						}
+					})
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+.rate-wrap {
+	display: flex;
+	line-height: 1;
+	font-size: 0;
+	flex-direction: row;
+}
+
+.rate_icon {
+	position: relative;
+	line-height: 1;
+	font-size: 0;
+}
+
+.rate_icon-on {
+	overflow: hidden;
+	position: absolute;
+	top: 0;
+	left: 0;
+	line-height: 1;
+	text-align: left;
+}
+
+.start {
+	display: inline-block;
+	width: 34rpx;
+	height: 34rpx;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAApVBMVEUAAAD/Zhr/byr/Zhr/jlj/eCb/Zhv/aBz/Zhr/Zxv/Zhr/Zhr/Zxr/Zxv/Zhr/Zhr/Zxr/Zxv/aBv/aRz/Zxr/Zxv/aBv/aBv/Zxz/ax7/Zhr/Zhr/Zhv/Zhr/Zxr/Zxv/Zxz/ax7/aiH/ah//Zxr/Zxr/Zxr/Zxv/Zxv/Zx3/aBz/Zxr/Zxv/Zhv/Zxv/Zxv/aB3/Zhr/Zxv/Zhv/Zxv/Zxr/ZhqOyFXpAAAANnRSTlMA+wzxAgaNO/az4+msSuzYt3BPLMGAZ0AkGdPFvKViVTUfExCYk4Z4X0Ux3J6CfFgpznLKa7mhqILLAAACjElEQVRYw+2W2XqqMBSF2cwzgoJWFGvV43isU9f7P1o/9StoxSTE264bwR3/bJM9KX9qLGvYj5yR/hLDxEWO+gIjBqXtXuZhKM94sxGcP3sali/8Gf/6MEf+giPt65MaYvmaI1dXOnKMDxsrRSld6UpB/sGpXrYYSDmi4b16m2iwZB2plMq4MqkckXflP1qML4QdsRhnJOrI4OGQmroSEKya69oKA4xd4hNmj4YF0FmsOFVB7wXx7GtNAMisq0OFDQBeZzMftWtYk5HpRISLaN1K209SMvb7Nq5yO9NsfGvMNAAgdzCNg56hsDXuZj87klktjoHBPNkZSgPp4+XJJwxLNCFTpPROSMqYcBRJpWXsOEikix+8EhLIQj5KiImZLGRRls02qCvHGHtYVNlmS1F67s2V6BvYSylGfhv9U9iND3fnonOfQTNQw3tuexioD52KRk0YqxAto6a602eDgA/hGLUhTAtRhqXBr8/XOZAJM4bPpqeDIMWyS0aNTiBLIOs8bFhT3BQDkQZ71Jk9i0jlQvq8MSNEjwvRMOYt+OBCXM5GbwgVrlqcSrgUmc1MTjs9iBS5gjMbb3ASyBv0mfajyDikgphxYmOi8LXGjlV44SoCcsAqPQm+xAbLlGGdwxSBfMJnWIcofh9iMZvGb7/LKyJmar3fI7bXwWV6jzGIjKcMnaDero09IE8PDsE271IqwooRAOENsXCB/JL0Ox/Qtjf8FrrPIWSXbo4iYB+UDaIFeHFpPLIqyv6nPwd7YH3XQawccAv9erBkG6y704LzDzqAm1WhXYGj0ZmxhslOQPT9PhAejLo9IsD1c0LOrqFxCMBLnyzSiwgAmbw6bFiJpbN6cLJUlT9x9Q2wO0gQqPtdlQAAAABJRU5ErkJggg==);
+	background-position: 0 0;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+.start_fill_half {
+	display: inline-block;
+	width: 34rpx;
+	height: 34rpx;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAqFBMVEUAAAD2kYn/Zhr/Zhv/Zhv/Zhr/Zhv/Zhv/eiH/Zxv/aB3/aR3/ay3/l2n/Zxr/Zxr/aBr/Zxz/Zhv/Zhr/Zhr/Zhr/Zxv/Zxr/aiL/ah//Zhr/Zhr/Zhv/Zxv/Zhv/Zxv/aBz/ahz/ah7/ayH/fTT/Zxv/Zxv/aBv/Zxr/Zxz/bCH/cyb/Zxr/Zxr/Zxr/Zhv/Zxz/Zxr/Zhr/Zhr/Zhz/aBz/Zxv/ZhrAwdp6AAAAN3RSTlMAGfzujfLbswdyPSsLArh+TET66OPFpIc4IPbr0peCeDIaEg8Evp5nXyQWDcGtqW5ZVdbLZFHJ+Q6zgQAAAkxJREFUWMPt1tuSojAQBuAMR1EURUBAHNDxfNbR/d//zbZW2cQRCSHezn9JFV81JN3V5De10wzOhnlqv2UMcIu5ecM4AEC4GCKQN8YxAHyQlY6eNKLhjpAUvqyxjv8j9hA9+UJyhKTYShaiM2Sjoil5vAwhDmYyxkR/RL7kShmAItKlTHSG5KWEtZFPMCR/0KlrfKkMoaWFkoUwhAzqltJVishEhSMMNFrXvYsiQpbAdplVTIXpqnsYdYy8iCJCLjoA9Lfz9NqyX/zHk2bSt0sRsrZ2SYx7vNloMX40FjpoShCWqLfQzPPtgxWtQR9bgCDC0o56h72CgNJuPYQldNGld0IWIQ69O6Y8Mkb/fWRNEU0eWdIB0ZJGoj6WtNskkciDyc58LoWsPPhfhGUkgbT62NqEiCkfpcbsuQu1mkg2RKdRnO61kEyFyQwWpwYSqthNyaukwkhTxz43CrEEkWaMoM3ZjESQ9RBz3hY3EkEG+OYZZKIIIEnVxqMKICqi9xEPK64xhgDSQZeL9EQQDSkXsUSQZcVuPBdBQiRc5FsEseFOeYgughADLY4RQQgxceIgXTFkgE8OkoohR+w4SPAKCazx83iFwUESvIwy+sk0FKVRarTdIuA7lqkg1ibkIWdk5ctrkbgt9Ks9oDv2Q/dwhoH9NE0S2mhZBxha9Bv+oCl4YY3jj7nqA96lff+xStwoR46M8BbT50uUAMbpn2FAq27AvPRCjgbg7XwFvs2fBSqAvrMpWZcvBgBXs6uW8vDa5M3yrNvbkN9U5i8qUQdciqz2fwAAAABJRU5ErkJggg==);
+	background-position: 0 0;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+.start_fill {
+	display: inline-block;
+	width: 34rpx;
+	height: 34rpx;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAmVBMVEUAAAD/Zxr/Zhr/Zhr/cC7/dCX/Zhv/Zxv/aBz/Zhv/Zxr/Zhr/Zxr/Zxr/Zhv/Zxz/Zxz/Zhr/Zhv/Zxr/Zhr/Zxr/aBr/aB3/aRz/aBv/ahr/aB3/Zxr/Zxv/aBv/Zxv/aB//aCD/Zhr/Zxr/Zxr/Zxv/Zxv/ZiL/aB//aCL/Zhv/Zhv/Zxr/cRz/Zhr/Zxr/aBv/aR7/Zhprn+e+AAAAMnRSTlMA/PbrBQnaQTb68OaimmxRLN++spRgTEY7MCYii3VmXCgg49XOyKoeGA62qFYSf35xETz/Gz4AAAG8SURBVFjD7dbbcoIwEIDhTSgnAUE5CHi2Wu253fd/uLaOpiCYLGGmvfG/FT92lhkI3Pqf1sm99ez0M5wBfsfSPoY5wmO87IF84KnnHoN4Z4SttJEhivweg4hYqT9I71HuNlWETbWQBdYKtAYZ1RG27jGIKOgxiMjdd0ZSbJR0NfZeE3HzbsbjFlsyVvRtlNnMwNZ48FKYin9PJ8PkyWIozxsH8zBqscxsFlsudmk0TtLXqhFZqJWRVda4Qc14IZA5avcgkFgf8QTypI8YAnnTR2KBHAxdg+UgsrkmMoRK9kDLWECtXENhafOr29lYQqPC6Gi8QEtRJ8UNobWVRzd4BlcqN2RjAlebjoiGDZLWpL0wG6QtKchM9ZbmBKQARRYBeVQhlKWsFcYBCWUKxKYgc+URi5CvQAIKslUgOwrC7+TIACmVUmOPpEIpMqEh71JkTv14yvJpyL0U2eJF7sNwETS2zaSPh19c7B8P468zjvUiifGJtWJx7SFxsdpEgpgMfxs7tTenX/0tB0ljPLdr3CyK8Zwh3UnBT+sPoSXnfI8lSMstRLRSuJK9+5ljqTwKO6EDklahbcKtv+kLjzJulSJV8MoAAAAASUVORK5CYII=);
+	background-position: 0 0;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+</style>

lib/colorui/animation.css

+/* 
+  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)
+    }
+}
\ No newline at end of file

lib/colorui/components/cu-custom.vue

+<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>

main.js

@@ -3,6 +3,8 @@ import App from './App'
 import store from './store'
 
 import "@/utils/vue_extend.js" // 常用方法
+import "@/lib/colorui/main.css"
+import "@/lib/colorui/icon.css"
 
 // 全局组件
 import emptyView from '@/components/empty-view/index.vue'

mixins/globalMixins.js

+import { mapState } from 'vuex'
+
+const globalMixins = {
+	computed: {
+		...mapState({
+			isIphoneX: state => state.systemInfo.isIphoneX
+		})
+	}
+}
+
+export default globalMixins
\ No newline at end of file

pages.json

@@ -139,6 +139,12 @@
 					"style": {
 						"navigationBarTitleText": "支付结果"
 					}
+				},
+				{
+					"path": "comments/comment",
+					"style": {
+						"navigationBarTitleText": "写评论"
+					}
 				}
 			]
 		},

pages/goods/detail.vue

@@ -3,6 +3,7 @@
 		class="wrapper w-100"
 		:style="{paddingBottom: 98 + isIphoneX + 'px'}"
 	>
+	
 		<c-nav_bar
 			showBack
 			title="商品详情"

pages/home/index.vue

@@ -90,7 +90,7 @@
 		</template>
 		<template v-else>
 			<!-- search bar -->
-			<search-bar bg="#f8f8f8" innerBg="#fff" />
+			<search-bar bg="#f2f2f2" innerBg="#fff" />
 			
 			<view class="w-100 content-wrap">
 				
@@ -193,9 +193,12 @@ import { makePhoneCall, throttle } from '@/utils/common.js'
 import { goodsSku } from '@/apis/goods.js'
 import { mapState, mapActions } from 'vuex'
 import common_share from '@/mixins/setting_share.js'
+
 export default {
 	data() {
 		return {
+			rateValue: 0,
+			
 			baseUrl,
 			cate_data: {},
 			searchList: [],

pages/login/index.vue

@@ -4,18 +4,18 @@
 		<view class="title font-36 font-bold ml-4">欢迎来到{{storeInfo.shop_name || '格利专属小程序'}}</view>
 		
 		<view class="input-wrap">
-			<view class="item">
+			<view class="item py-2">
 				<input
-					class="font-28 py-2"
+					class="font-28"
 					:type="form.lgtype === 3 ? 'text' : 'number'"
 					:placeholder="userPlachelder"
 					v-model="form.user"
 				/>
 			</view>
 			
-			<view class="item" v-show="form.lgtype === 2">
+			<view class="item py-2" v-show="form.lgtype === 2">
 				<input
-					class="font-28 py-2"
+					class="font-28"
 					type="text"
 					placeholder="请输入验证码"
 					v-model="form.yzm" 
@@ -27,9 +27,9 @@
 				>{{smsMsg}}</view>
 			</view>
 			
-			<view class="item" v-show="form.lgtype === 3">
+			<view class="item py-2" v-show="form.lgtype === 3">
 				<input
-					class="font-28 py-2"
+					class="font-28"
 					type="password"
 					placeholder="请输入密码"
 					v-model="form.pwd"

pages/mine/index.vue

@@ -62,20 +62,20 @@
 					<view>已收货</view>
 					<view v-if="orderNum.wait_send > 0" class="badge">{{orderNum.wait_send > 99 ? '99+' : orderNum.wait_send}}</view>
 				</view>
-				<view 
+				<view
 					class="order-menu_item flex flex-column j-center a-center"
-					@click="nav('order', 4)"
+					@click="nav('comment')"
 				>
-					<image class="icon mb-2" src="/static/images/mine/unneed.png" mode="aspectFit"></image>
-					<view>退款售后</view>
+					<image class="icon mb-2" src="/static/images/mine/comment.png" mode="aspectFit"></image>
+					<view>待评价</view>
+				
 				</view>
 				<view 
 					class="order-menu_item flex flex-column j-center a-center"
-					@click="nav('order', 5)"
+					@click="nav('order', 4)"
 				>
-					<image class="icon mb-2" src="/static/images/mine/close.png" mode="aspectFit"></image>
-					<view>交易关闭</view>
-
+					<image class="icon mb-2" src="/static/images/mine/unneed.png" mode="aspectFit"></image>
+					<view>退款售后</view>
 				</view>
 			</view>
 		</view>
@@ -160,6 +160,11 @@ export default {
 							url: '/subPages/storeInfo/index'
 						})
 						break;
+					case 'comment':
+						uni.navigateTo({
+							url: '/subPages/comments/comment'
+						})
+						break;
 					default:
 						break;
 				}

styles/mixins.scss

@@ -19,6 +19,15 @@
 	color: transparent;
 }
 
+@mixin box-wrap($w, $r: 8rpx, $bt:30rpx, $lr: 30rpx) {
+	box-sizing: border-box;
+	width: $w;
+	padding: $bt $lr;
+	margin: 20rpx auto 0;
+	border-radius: $r;
+	background-color: #fff;
+}
+
 /* borderBox */
 @mixin borderBox($row, $vertical){
 	box-sizing: border-box;
@@ -47,6 +56,7 @@
 
 // 选中
 @mixin selected($w, $h) {
+	display: inline-block;
 	width: $w;
 	height: $h;
 	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAtFBMVEUAAAD/aRz/Zhv/Zxr/dif/aBz/Zxr/Zhv/Zxv/Zxv/Zxr/Zhv/Zxr/Zxv/Zhv/Zhv/Zxr/Zhv/aBz/aBv/Zxz/Zh7/Zh//Zxv/Zhr//////f3/ayL/+vf/9/L/aB3/7uX/8+3/vZ3/n2//lWH/iE3//Pv/8On/1L7/y7H/tI//r4f/m2n/j1f/g0X/28r/z7j/x6v/wqP/sIn/rIP/fj7/2MT/uZb/qHz/pHf/ezr/dTH/6+KOlGpFAAAAGHRSTlMAI/m3BlPx7+zi38/Mq6CYiISAcVw8MlRiNL+jAAACK0lEQVRYw7WY6VaDMBBGA12BAlIp/cCuVrtal9bd938vK4YGOElYovcfAe7JMieZCRGj+Z5tmV1d75qW7fkaqUpz6BjIYTjDZgVF4HbApeMGJRWDBiQ0BqQYjSokGq1oLvo6CtH7TWk3eihFT9KZVhslabdEjktU4JLvuEAlLlQczCIci9KIWqhBK7e2bdSgrWVirIda9NJR10dN+qnB6KiJzgbUQG0ahDKAAgPWEeWuBKjG53r2dWSPQSxxUYmPaXhie3524xjpoArPsSOcsn33J1aG1RzLMGbGmoYniYMK7GfhL3PW5pwkRh3H/RVrNAjRUJ6bMXOk0IgPxmQ7Ha8/ix0vGQd84oFxiOf9A3zuRtSxyjrgERuM39VbPssdDzkHbGKBQZdvuec4FmfHBDksYoIxp9/N9mLHeoI8JumCcXVPvxzfIMvulr55pI40XaIjbXnhW3YRbX8CB51KzpYVz3LNHHxJF3zL6A4J71E61nnDMZFl8pC3vIWUV/AxiYW8ZZ1YFvHzMXFsIMBiwcYsj/Sv2x/LNnEcIMImHqf1bNlhkziOEOIRHxye6J/RKnG8QYwv2ArmYYboHRI00ab0mnFcQ4Ih3h43ZR1wJBv1IWTTK6UlOzK2tB8LSOk0pYfXnI5FjltwjG5G0bjIgeDPDnT11EI9yfnbdEs98VNPQdWTYfW0/B8KBPVSRb1oUi/f1AtJ9ZJWvbhWL/PVLxzUrz7+8xJG/TroG3vvWlo8bKcIAAAAAElFTkSuQmCC);
@@ -57,6 +67,7 @@
 
 // 未选中
 @mixin unSelected($w, $h) {
+	display: inline-block;
 	width: $w;
 	height: $h;
 	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAXVBMVEUAAADc3Nza2tra2trZ2dna2trb29vs7OzZ2dna2trZ2dna2tra2tra2tra2tra2tra2trb29vb29vd3d3b29v4+PjZ2dn09PTy8vLn5+fj4+Pr6+vg4ODd3d3u7u7gtn+qAAAAFXRSTlMAI/Dht4FTBvn47M/Mq6CYh3FcPDLeKf3yAAABjklEQVRYw6TTCY6DQAxEUbNnX/F3d7Pc/5gjIU0mEwEB+h2gVJbKMi15FOdjdtjtDtnxXDwSWasqLxkfsktZyXL1NQW64Htnpmrmeh86IL3WsswzB9rG6QfXtED+lO+SHPBORzkP5InMq4o9eNNJ5mFfVLM1ThBMZ1mA00yZMqVz+pXrSEuZcIfWdAFr4S6jbhB0oQC3iYxGF2tGU+7Q6wr9yEXlq8eKLqX8k6QEXSmQJvKmOtHqai2n99UVdKarWUfxdswepxs49n8H5QTdJJC/fh9MNzF4vop43cj/VqnBdCODegi54nUzz3XYSIrTzRxpNQy+1QjtMP4LjUZouIhIhtMIjkwkodMoHYk8CBol8JACr1E8hZzpNUrPWY44jeI4SoZpFCOTQ3zIQXZoJHY/rdgBEQAgDAMx/65jIga4A7a233JIuU552PLFZdjK2JcFLFIwRKnIYxHqYhnDvIqNDkMv0WKEnBK3RvArEXSE4RHLByAMVBnQNPBtgORA2gHXAfND4fCqj1/ClDoICj8rGDL0Qy4AAAAASUVORK5CYII=);

subPages/comments/comment.vue

+<template>
+	<view class="isIphoneX">
+		<view class="comment-wrap">
+			<view class="goods-info flex j-star a-center">
+				<image
+					class="cover mr-2"
+					src="https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png"
+					mode="aspectFit"
+				/>
+				<view class="goods flex-1 flex flex-column j-around">
+					<view class="title">设计方案就是积分卡</view>
+					<view class="title descColor font-24">spu</view>
+				</view>
+			</view>
+			
+			<view class="w-100 my-4 flex j-star a-center">
+				<view class="font-32 font-bold mr-2">商品评分</view>
+				<rate
+					:value="1.3"
+					size="17"
+					margin="15"
+				/>
+			</view>
+			
+			<view class="input-wrap mb-4">
+				<textarea
+					class="input-area font-24"
+					placeholder-class="icon-edit"
+					placeholder="说说您的使用感受，为更多小伙伴购买提供参考～"
+					v-model="form.val"
+				/>
+				
+				<view class="w-100 flex j-between a-end">
+					<viwe class="flex j-start a-center">
+						<view class="flex flex-column j-center a-center mr-2">
+							<image class="icon" src="/static/images/common/icon-img.png" mode="aspectFit" />
+							<text>添加图片</text>
+						</view>
+						<view class="flex flex-column j-center a-center">
+							<image class="icon" src="/static/images/common/icon-video.png" mode="aspectFit" />
+							<text>添加视频</text>
+						</view>
+					</viwe>
+					<text class="font-24 descColor">{{words}}/300</text>
+				</view>
+			</view>
+			
+			<view class="w-100 mb-4">
+				<view class="w-100 flex j-between a-center">
+					<view class="font-32 font-bold">服务评价</view>
+					<view class="flex a-center">
+						<view class="icon-unSelect"></view>
+						<text class="ml-2 font-24 descColor">匿名评价</text>
+					</view>
+				</view>
+			</view>
+			
+			<view class="w-100 my-4 flex j-star a-center">
+				<view class="font-2 mr-2">商品评分</view>
+				<rate
+					:value="1.3"
+					size="17"
+					margin="15"
+				/>
+			</view>
+			
+			<view class="w-100 my-4 flex j-star a-center">
+				<view class="font-28 mr-2">商品评分</view>
+				<rate
+					:value="1.3"
+					size="17"
+					margin="15"
+				/>
+			</view>
+			
+			<view class="w-100 my-4 flex j-star a-center">
+				<view class="font-28 mr-2">商品评分</view>
+				<rate
+					:value="1.3"
+					size="17"
+					margin="15"
+				/>
+			</view>
+			
+			<view class="descColor font-24">满意请给5星哦～</view>
+			
+		</view>
+		<view class="submit font-32 text-center">提交</view>
+	</view>
+</template>
+
+<script>
+	import rate from '@/components/rate/index.vue'
+	export default {
+		components: {
+			rate
+		},
+		data() {
+			return {
+				form: {
+					val: ''
+				}
+			}
+		},
+		
+		computed: {
+			words() {
+				return this.form.val.trim().length
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.comment-wrap {
+		@include box-wrap(690rpx, 8rpx, 20rpx, 20rpx);
+		.goods-info {
+			width: 100%;
+			.cover {
+				width: 110rpx;
+				height: 110rpx;
+			}
+			.goods {
+				height: 110rpx;
+				.title {
+					@include text-ellipsis(1);
+				}
+			}
+		}
+		
+		.input-wrap {
+			@include borderBox(20rpx, 20rpx);
+			width: 650rpx;
+			border-radius: 8rpx;
+			background-color: $mainBg;
+			.input-area {
+				width: 100%;
+				height: 200rpx;
+				overflow: hidden;
+			}
+			.icon {
+				width: 88rpx;
+				height: 88rpx;
+			}
+			.icon-edit {
+				display: inline-block;
+				content: "";
+				width: 34rpx;
+				height: 34rpx;
+				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAeFBMVEUAAACAgICBgYGAgICCgoKHh4eGhoaAgICAgICAgICBgYGAgICCgoKAgICAgICAgICAgICAgICAgICEhISAgICAgICAgICCgoKAgICAgICAgICAgICBgYGAgICAgICBgYGAgICBgYGBgYGAgIB/f3+AgICAgIB/f38yHicCAAAAJ3RSTlMAmXf4FwkE4vLUOushyXCoWdq5DYEtSxHBoJSEa11IJa5gMkCMiVKByMuRAAAB7ElEQVRYw+2W23KCQAyGoSwgqFA8gUcErXn/N+xku5gFHCGx04uO/5U6k2+WJN+K886LWar8RULthgAwPZ/kiHwLTealkDHLgOJdRAxlGB7oTGoBw58DtuMwc9RN46KAD0l1K2b6c6CbU7EZKyzL8uZYEQAUXManfpZZ+7vPY8QedjS2po2QmjfcKdYc7Z+QGrM2PQLM1RqH4p4kWMBPCtXqicfpyQ6ahHHDzZjTOejyaqK3NbG4n+MZJ73ja6eMAJP6DXc+fmPX+gQbXLAUMFFpuOM9ViEWmIdIPF2dGC7POve+cyE0SZjWLQI6WGEYLtO6aGnvzBWIK7HOtlluHXHF1hH3wrRu/4BbMa1LH3GZ1s39Pvc8npFo69QT7nA2xrq+zYpvXd9miXXEFVm363Dl1hFXbh1x/511MdO61QD3D6zbkx1d7ujknty69r+0zDrKFq8LmXUU9OMgs45KsKIUW0e3WSizjrLAEpF1FB8HfOvbzMoFi3KRdZQv3KrmS50CWcdIROqdCgCedfabaYy2HBFn28zb+UngLJPQIEJ6O+TtvNpPDCKqaLa8nc88gyg298En7vOslN0Syjm2DziUzLrAwMRzS8dKBoNRnSWH6V51t2cohb31W4As6V9hm4/nqdolvnLe+c18A7kTb54aqYy+AAAAAElFTkSuQmCC);
+				background-position: 0 0;
+				background-repeat: no-repeat;
+				background-size: 100% 100%;
+			}
+		}
+		
+		.icon-select {
+			@include selected(30rpx, 30rpx);
+		}
+		.icon-unSelect {
+			@include unSelected(30rpx, 30rpx);
+		}
+		
+	}
+	
+	.submit {
+		width: 690rpx;
+		height: 98rpx;
+		line-height: 98rpx;
+		border-radius: 8rpx;
+		margin: 154rpx auto 0;
+		background-color: $primary;
+		color: #fff;
+	}
+	
+</style>

subPages/storeInfo/index.vue

 <template>
-	<view class="wrap">
+	<view class="wrap flex flex-column j-center a-center">
 		<view class="store-info my-2 flex j-star a-center" v-if="storeInfo">
 			<image
 				class="logo mr-2"
@@ -12,6 +12,34 @@
 			</view>
 		</view>
 		
+		<view class="comments mb-2">
+			<view class="font-28 font-bold">服务评价</view>
+			<view class="flex j-star a-center mt-2">
+				<view class="font-28 mr-3">店铺服务</view>
+				<rate
+					:readonly="true"
+					:value="1.3"
+					margin="16"
+				/>
+			</view>
+			<view class="flex j-star a-center mt-2">
+				<view class="font-28 mr-3">店铺服务</view>
+				<rate
+					:readonly="true"
+					:value="2.5"
+					margin="16"
+				/>
+			</view>
+			<view class="flex j-star a-center mt-2">
+				<view class="font-28 mr-3">店铺服务</view>
+				<rate
+					:readonly="true"
+					:value="6"
+					margin="16"
+				/>
+			</view>
+		</view>
+		
 		<view class="store-introduct">
 			<view class="font-28 font-bold">基本信息</view>
 			<view class="store-item py-3 font-28">
@@ -50,6 +78,7 @@
 </template>
 
 <script>
+import rate from '@/components/rate/index.vue'
 import { baseUrl } from '@/config/index.js'
 import dayjs from 'dayjs'
 import { weeks } from '@/config/global.js'
@@ -61,6 +90,9 @@ export default {
 			baseUrl
 		}
 	},
+	components: {
+		rate
+	},
 	computed: {
 		startT() {
 			return weeks[this.storeInfo.business_week_start] || ''
@@ -77,48 +109,48 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.store-info {
-	@include borderBox(20rpx, 40rpx);
-	width: 690rpx;
-	height: 220rpx;
-	margin: 20rpx auto;
-	background-color: #fff;
-	border-radius: 8rpx;
-	.logo {
-		flex: 0 0 140rpx;
-		width: 140rpx;
-		height: 140rpx;
-		border-radius: 8rpx;
-	}
-	.introduct {
-		height: 140rpx;
-		.detail {
-			@include text-ellipsis(3);
+.wrap {
+	padding-bottom: 30rpx;
+	.store-info {
+		@include  box-wrap(690rpx, 8rpx, 30rpx, 20rpx);
+		height: 220rpx;
+		.logo {
+			flex: 0 0 140rpx;
+			width: 140rpx;
+			height: 140rpx;
+			border-radius: 8rpx;
 		}
-	}
-}
-
-.store-introduct {
-	@include borderBox(30rpx, 30rpx);
-	width: 690rpx;
-	margin: 0 auto;
-	background-color: #fff;
-	.store-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		text-align: right;
-		border-bottom: 1rpx solid $line;
-		&:last-child {
-			border-bottom: none;
+		.introduct {
+			height: 140rpx;
+			.detail {
+				@include text-ellipsis(3);
+			}
 		}
-		.hd {
-			text-align: left;
-			flex: 0 0 120rpx;
-			color: $desc;
-		}
-		.theme {
-			color: $primary;
+	}
+	
+	.comments {
+		@include  box-wrap(690rpx, 8rpx, 30rpx, 20rpx);
+	}
+	
+	.store-introduct {
+		@include  box-wrap(690rpx, 8rpx, 30rpx, 30rpx);
+		.store-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			text-align: right;
+			border-bottom: 1rpx solid $line;
+			&:last-child {
+				border-bottom: none;
+			}
+			.hd {
+				text-align: left;
+				flex: 0 0 120rpx;
+				color: $desc;
+			}
+			.theme {
+				color: $primary;
+			}
 		}
 	}
 }

utils/vue_extend.js

@@ -3,6 +3,7 @@ import { getStorage, setStorage } from "@/lib/storage/index.js"
 import Toast from "@/lib/toast/index.js"
 import Modal from '@/lib/modal/index.js'
 import { checkLogin } from '@/utils/modules/login.js'
+import globalMixins from '@/mixins/globalMixins.js'
 import dayjs from 'dayjs'
 
 Vue.prototype.$getStorage = getStorage
@@ -14,4 +15,5 @@ Vue.prototype.$checkLogin = checkLogin
 Vue.filter('parseTime', timestamp => {
 	if (!~~timestamp) return '——'
 	return dayjs(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')
-})
\ No newline at end of file
+})
+Vue.mixin(globalMixins)
\ No newline at end of file