Merge branch 'msb_prod'

fix: node 版本

See merge request yanxuan-frontend/shop-pc!101

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12.13.1
+FROM node:14.17.0
 WORKDIR /workload
 
 COPY nuxt.config.js /workload/nuxt.config.js

README.md

@@ -5,30 +5,59 @@
  * @LastEditTime: 2022-05-07 11:39:38
  * @Description: file content
 -->
+
 # shop-pc
 
+## 前置环境
+
+由于项目依赖问题，开发 `node` 版本必须是 `14`。
+
+如果电脑安装 `Node 18`，那么怎么添多个 `node` 版本，可以使用 `nvm` 版本管理工具。具体安装可以参考下面教程
+
+[window install nvm](https://juejin.cn/post/7074108351524634655)
+[mac install nvm](https://juejin.cn/post/7206882855200047161)
+
+## 修改前端接口请求地址
+
+进入到 ` plugins/config/env.js` 中：
+
+```js
+// 修改对应值即可
+const ENV = {
+  base_url: "https://k8s-horse-gateway.mashibing.cn",
+  imUrl: "wss://k8s-horse-gateway.mashibing.cn",
+};
+export default ENV;
+```
+
+> `注意 ⚠️`：通常本地开发访问线上接口地址时会出现跨越(协议、域名、端口不一样时就会出现跨越问题)，此时后端服务需要配置跨域相关的内容。
+
 ## 运行&打包
-- 运行直接执行 npm run dev 打包执行npm run build 即可，会根据分支读取不同环境变量配置；
+
+- 运行直接执行 npm run dev 打包执行 npm run build 即可，会根据分支读取不同环境变量配置；
 
 ## 环境变量配置
-- 环境变量配置文件env.config;
-- 配置与分支对应关系：msb_prod -> prod  msb_beta -> beta  msb_test -> test  msb-其他 -> dev
+
+- 环境变量配置文件 env.config;
+- 配置与分支对应关系：msb_prod -> prod msb_beta -> beta msb_test -> test msb-其他 -> dev
 - 输出的环境变量文件：plugins/config/env.js
 - 修改环境变量配置后需要执行 “ node env.config " 输出的环境变量才会更新
-``` js
+
+```js
 // 直接引入输出的配置文件即可
-import ENV from '@/plugins/config/env.js';
+import ENV from "@/plugins/config/env.js";
 // 直接访问你在配置文件中定义的属性
 console.log(ENV.baseUrl);
-
 ```
 
-## 公共方法utils
-- 公共方法统一放置utils文件夹内，可以按分类建方法文件 如：验证类verify.js 请求类request.js；
+## 公共方法 utils
+
+- 公共方法统一放置 utils 文件夹内，可以按分类建方法文件 如：验证类 verify.js 请求类 request.js；
 - 所有公共方法采用大驼峰命名法
-- 所有的方法都从index.js输出，引入时统一引入index，不允许直接引入方法文件
+- 所有的方法都从 index.js 输出，引入时统一引入 index，不允许直接引入方法文件
 - 所有方法文件如果导出的是多个方法，不允许在定义方法时导出，必须在文件底部一一导出，并附上方法简单的注释
-``` js
+
+```js
 // 正确
 import {Req, IsPhone} from '@/common/utils';
 
@@ -46,21 +75,25 @@ export {
 	IsEmail
 }
 ```
+
 ## 组件
-- 根目录的components 只放置真正的组件，某个页面的业务模块应该在pages的相应目录下新建module目录放置
-- 所有的自定义组件文件名以大驼峰命名，且在templet中使用也用大驼峰形式使用(包括页面内的模块组件)
 
-## storage的使用
-- 不要在页面内直接使用loaclStorage，全都放置到vuex中做一次管理
+- 根目录的 components 只放置真正的组件，某个页面的业务模块应该在 pages 的相应目录下新建 module 目录放置
+- 所有的自定义组件文件名以大驼峰命名，且在 templet 中使用也用大驼峰形式使用(包括页面内的模块组件)
 
+## storage 的使用
+
+- 不要在页面内直接使用 loaclStorage，全都放置到 vuex 中做一次管理
 
 ## 请求
-- 项目中有两个axios请求实例，一个事nuxt自带的（不需要Token请使用这个），一个是额外封装的（需要Token请使用这个）；
-- 需要Token的请求，不要写在asyncData中；
+
+- 项目中有两个 axios 请求实例，一个事 nuxt 自带的（不需要 Token 请使用这个），一个是额外封装的（需要 Token 请使用这个）；
+- 需要 Token 的请求，不要写在 asyncData 中；
 - 所有请求方法命名以（Api+请求类型+具体方） 法命名
-- 所有请求使用ToAsyncAwait 包裹
-- 不允许使用try catch 和 then 处理返回结果
-``` js
+- 所有请求使用 ToAsyncAwait 包裹
+- 不允许使用 try catch 和 then 处理返回结果
+
+```js
 // 使用示例
 	// xxapi.js
 	import {ToAsyncAwait, ReqestTk} from '@/common/utils'
@@ -71,7 +104,7 @@ export {
 	}
 	// user.vue
 	improt {ApiGetUserInfo} from '@/common/api/xxapi.js';
-	
+
 	const getUserInfo = async () =>{
 		const {error, result} = await ApiGetUserInfo();
 		if(error){
@@ -82,46 +115,47 @@ export {
 	}
 
 ```
+
 ## css
-- 采用BEM命名法
 
-### 兼容CSS
-``` css
+- 采用 BEM 命名法
+
+### 兼容 CSS
+
+```css
 /* 以下兼容方式的样式请使用util.css中的adj方法 */
-.my-class{
-   transform: translate3d(-50%, 0, 0);
-   -webkit-transform: translate3d(-50%, 0, 0);
-   -moz-transform: translate3d(-50%, 0, 0);
-   -o-transform: translate3d(-50%, 0, 0);
-   -ms-transform: translate3d(-50%, 0, 0);
+.my-class {
+  transform: translate3d(-50%, 0, 0);
+  -webkit-transform: translate3d(-50%, 0, 0);
+  -moz-transform: translate3d(-50%, 0, 0);
+  -o-transform: translate3d(-50%, 0, 0);
+  -ms-transform: translate3d(-50%, 0, 0);
 }
 /* 使用以下方法 */
 @import "~/assets/scss/util.scss";
-.my-class{
+.my-class {
   @include adj(transform, translate3d(-50%, 0, 0));
 }
-
 ```
 
 ## 登录相关
+
 ```javascript
 // 访问token
-this.$store.state.token
+this.$store.state.token;
 // 设置token
-this.$store.commit('setToken')
+this.$store.commit("setToken");
 // 退出登录
-this.$store.commit('setLoginOut')
+this.$store.commit("setLoginOut");
 // 获取登录的用户信息
-this.$store.state.userInfo
+this.$store.state.userInfo;
 
 // 登录拦截
 // 示例：点击购买课程前需要判断当前用户是否登录，未登录则弹出登录弹窗
 function onPurchaseCourse() {
-	if (!this.$isLoginValidate()) {
-		return;
-	}
-	// 此处省略其他业务代码...
+  if (!this.$isLoginValidate()) {
+    return;
+  }
+  // 此处省略其他业务代码...
 }
-
 ```
-

components/BsChosen.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-26 10:41:45
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-15 15:43:49
+ * @Description: file content
+-->
 <template>
   <div class="chosen">
     <div class="chosen-title flex flex-between flex-middle">
@@ -45,7 +52,6 @@ export default {
         categoryId: "",
         order: "",
       });
-      console.log(res.result);
       vm.recommendedData = res.result.records;
       vm.pages = res.result.pages;
     },

components/BsCommentFollowInfo.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-06-23 10:40:04
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-30 22:11:19
+ * @Description: file content
+-->
+<template>
+	<div class="follow">
+		<b class="follow--title">{{day}}追评:</b>
+		<p class="follow--ctx">{{followComment.commentContent}}</p>
+		<UiImgs v-if="imgs.length" :list="imgs" class="follow--imgs" />
+	</div>
+</template>
+<script>
+import UiImgs from './UiImgs.vue';
+export default {
+	components: { UiImgs },
+	props : {
+		followComment : {
+			type : Object,
+			default : () => ({})
+		},
+		commentTime : {
+			type : String,
+			default : ''
+		}
+	},
+	computed:{
+		day(){
+			const followTime = (new Date(this.followComment.createTime)).getTime();
+			const commentTime = (new Date(this.commentTime)).getTime();
+			const day = Math.floor((followTime - commentTime) / (24 * 60 * 60 * 1000));
+			return day > 0 ? `${day}天后` : `当天`;
+		},
+		imgs (){
+			let urls = this.followComment.pictureUrl || '';
+			return urls ? urls.split(',') : [];
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.follow{
+	margin-top: 30px;
+	&--title{
+		color: #FF6A19;
+		font-weight: normal;
+	}
+	&--ctx{
+		line-height: 24px;
+		word-break: break-all;
+	}
+	&--imgs{
+		margin-top: 10px;
+	}
+}
+</style>

components/BsCommentInfo.vue

@@ -0,0 +1,408 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-06-24 11:43:04
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-01 18:13:33
+ * @Description: file content
+-->
+<template>
+	<div class="comment-info">
+		<div class="side-user"  v-if="source == 'detail'">
+			<el-avatar :size="55" :src="commentDetail.userAvatar" />
+			<p>{{commentDetail.userName}}</p>
+		</div>
+		<div class="side-product" v-else>
+			<img :src="commentDetail.productPicture"/>
+			<p>{{commentDetail.productName}}</p>
+			<span>{{commentDetail.skuName}}</span>
+		</div>
+		<main>
+			<BsCommentSubmit v-if="!commentDetail.id" :commentDetail="commentDetail" @submit="handleSubmit" 
+				@editStatusChange="editStatusChange"/>
+			<template v-else>
+				<div class="top">
+					<el-rate :value="commentDetail.commentScore" disabled/>
+					<span class="time">{{FormatDate(commentDetail.createTime, 'yyyy-mm-dd hh:ii')}}</span>
+				</div>
+				<p class="sku" v-if="commentDetail.skuName">已购买：{{commentDetail.skuName}}</p>
+				<div class="ctx">{{commentDetail.commentContent}}</div>
+				<!-- 图片预览 -->
+				<UiImgs v-if="imgs.length" :list="imgs" class="imgs" />
+
+				<!-- 追评 -->
+				<UiButton class="follow-btn" type="yellow_line" radius="4px"
+					v-if="isCanFollowComment && !showFollowForm" @click="showFollowForm = true">发起追评</UiButton>
+				
+				<BsCommentSubmit v-if="showFollowForm && !followComment" :type="COMMENT.TYPE.FOLLOW_COMMENT" 
+					:commentDetail="commentDetail" @submit="handleSubmitFollow" @editStatusChange="editStatusChange"/>
+					
+				<BsCommentFollowInfo v-if="followComment" 
+					:followComment="followComment" :commentTime="commentDetail.commentTime"/>
+				
+				<!-- 点赞评论Bar -->
+				<div class="operation">
+					<div>
+						<span class="operation--chat" @click="answerVisible = !answerVisible">
+							<template v-if="replyCount">{{replyCount}}条</template>评论
+						</span>
+						<span class="operation--show" v-if="answerCommentList.length" @click="answerVisible = !answerVisible">
+							{{answerVisible ? '收起' : '展开'}}
+						</span>
+					</div>
+					<span class="operation--thumb" :class="{'operation--thumb__active':isLike}" @click="handleUseful">{{usefulCount || '有用'}}</span>
+				</div>
+
+				<!-- 评论内容 -->
+				<div class="answer" v-if="showAnswerBox">
+					<b class="answer--title">全部评论({{replyCount}})</b>
+					<ul>
+						<li class="answer--item" v-if="commentDetail.merchantComment">
+							<div class="answer--name"><b>{{commentDetail.merchantComment.userName}}：</b><span>{{commentDetail.merchantComment.createTime}}</span></div>
+							<p class="answer--ctx">{{commentDetail.merchantComment.commentContent}}</p>
+						</li>
+						<template  v-if="answerVisible">
+							<li class="answer--item" v-for="(item, idx) in answerCommentList" :key="idx">
+								<div class="answer--name">
+									<b>{{item.userName}} {{item.parentId !== commentDetail.id ? ` 回复 ${item.parentUserName}` : ''}}：</b>
+									<span>{{FormatDate(item.createTime, 'yyyy-mm-dd hh:ii')}}</span>
+								</div>
+								<p class="answer--ctx">{{item.commentContent}}</p>
+								<span class="answer--answer" @click="handleAnswer(item)">回复</span>
+							</li>
+						</template>
+					</ul>
+					<div v-if="answerVisible" class="answer--form">
+						<input v-model="answerContent" class="answer--input" maxlength="500"
+							@keydown="handleClearAnswer" :placeholder="answerPlaceholder"/>
+						<UiButton :disabled="!answerContent.trim()" @click="handleSubmitAnswer"
+							radius="4px" class="answer--btn" type="red_panel">发表</UiButton>
+					</div>
+				</div>
+
+			</template>
+		</main>
+		
+	</div>
+</template>
+<script>
+import BsCommentFollowInfo from './BsCommentFollowInfo.vue';
+import {ApiPostComment, ApiPutCommentUseful} from '@/plugins/api/comment';
+import {Debounce, FormatDate } from '@/plugins/utils';
+import UiImgs from './UiImgs.vue';
+import UiButton from './UiButton.vue';
+import BsCommentSubmit from './BsCommentSubmit.vue';
+import {COMMENT} from '@/constants'
+export default {
+	components: { BsCommentFollowInfo, UiImgs, UiButton, BsCommentSubmit },
+	props:{
+		// 来源 comment从我的订单来是需要操作评价，detail游客从商品中来只要显示评价详情
+		source:{
+			type : String,
+			default : 'comment' 
+		},
+		// 是否默认打开追评，只有在无追评时有用
+		isFollowForm : {
+			type : Boolean,
+			default : false,
+			require : true
+		},
+		commentDetail : {
+			type : Object,
+			default : () => ({})
+		}
+	},
+	data(){
+		return { 
+			COMMENT,
+			answerCommentList : this.commentDetail.answerCommentList || [],
+			answerVisible : false,
+			answerContent : '',
+			answer : null,
+			isLike : this.commentDetail.isLike,
+			usefulCount : this.commentDetail.usefulCount,
+			replyCount : this.commentDetail.replyCount,
+			showFollowForm : this.isFollowForm,
+			followComment : this.commentDetail.followComment || null
+
+		}
+	},
+	computed:{
+		showAnswerBox(){
+			return (this.commentDetail.merchantComment || this.answerVisible) ? true : false
+		},
+		answerPlaceholder (){
+			return this.answer ? `回复：${this.answer.userName}` : '说点什么吧？'
+		},
+		imgs (){
+			let imgs = this.commentDetail.pictureUrl;
+			return imgs ? imgs.split(',') : [];
+		},
+		/**
+		 * 是否需要显示追评按钮
+		 * 如果是在订单里进来的，且没有追评则显示
+		 */
+		isCanFollowComment(){
+			let status = (!this.followComment && this.source === 'comment')
+			return status;
+		}
+	},
+	watch:{
+		commentDetail:{
+			handler(){
+				this.followComment = this.commentDetail.followComment;
+				this.replyCount = this.commentDetail.replyCount || 0;
+				this.answerCommentList = this.commentDetail.answerCommentList || [];
+				this.isLike = this.commentDetail.isLike;
+				this.usefulCount = this.commentDetail.usefulCount;
+			},
+			deep : true
+			
+		}
+	},
+	mounted(){
+		this.answerCommentList = this.commentDetail.answerCommentList || [];
+	},
+	methods : {
+		FormatDate,
+		/**
+		 * 评价成功后，抛出事件，方便父组件做数据处理
+		 */
+		handleSubmit(result){
+			this.$emit('submit', result)
+		},
+		/**
+		 * 追评提交成功，抛出事件，方便父组件做数据处理
+		 */
+		handleSubmitFollow(result){
+			this.followComment = result;
+		},
+		handleAnswer (item){
+			this.answer = item;
+		},
+		/**
+		 * 有回复用户时，取消回复对象
+		 * 输入框没有内容后再按一次退格，删除回复对象，直接回复评价
+		 */
+		handleClearAnswer(e){
+			if(e.code === 'Backspace' && !this.answerContent && this.answer){
+				this.answer = null;
+			}
+		},
+		/**
+		 * 评论回复，请求成功往列表添加一条记录
+		 */
+		async handleSubmitAnswer(){
+			let data = {
+				commentContent : this.answerContent,
+				commentType : 3,
+				originId : this.commentDetail.id,
+				parentId : this.answer ? this.answer.id : this.commentDetail.id
+			}
+			const {error, result} = await ApiPostComment(data);
+			if(error){
+				this.$message.error(error.message);
+				return false
+
+			}
+			this.answerCommentList.unshift({
+				...result, 
+				userName : this.$store.state.userInfo.nickname,
+				parentUserName: this.answer ? this.answer.userName : ''
+			});
+			this.answerContent = '';
+			this.replyCount++;
+			this.$message.success('评论成功!');
+		},
+		/**
+		 * 点击点赞，做防抖处理
+		 */
+		handleUseful(){
+			this.isLike = !this.isLike
+			if(this.isLike){
+				this.usefulCount++;
+			}else{
+				this.usefulCount--;
+			}
+			if(!this.debounce){
+				this.debounce = Debounce(this.updateUseFul, 500);
+			}
+			this.debounce();
+		},
+		/**
+		 * 更新点赞请求
+		 */
+		async updateUseFul(){
+			if(this.isLike === this.commentDetail.isLike){
+				return false
+			}
+			const {error, result} = await ApiPutCommentUseful({
+				commentId : this.commentDetail.id,
+				isLike : this.isLike
+			});
+			this.commentDetail.isLike = this.isLike;
+			
+		},
+		/**
+		 * 动态监听是否有输入内容的评价或追评
+		 */
+		editStatusChange(val){
+			this.$emit('editStatusChange', val)
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.comment-info{
+	display: flex;
+	border-top: 1px solid #f2f2f2;
+	padding: 35px 20px 50px 0;
+	main{
+		flex: 1;
+	}
+}
+.side-user{
+	width: 170px;
+	text-align: center;
+	p{
+		margin-top: 10px;
+		@include ellipses(2)
+	}
+	
+}
+.side-product{
+	width: 230px;
+	padding: 0 45px;
+	text-align: left;
+	img{
+		width: 140px;
+		height: 140px;
+		object-fit: contain;
+	}
+	p{
+		margin-top: 10px;
+		@include ellipses(2);
+	}
+	span{
+		margin-top: 5px;
+		display: block;
+		color: #999;
+		font-size: 12px;
+	}
+
+}
+.top{
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 10px;
+	/deep/.el-rate__icon{
+		margin-right: 0;
+		font-size: 24px;
+	}
+}
+.time, .sku{
+	color: #999;
+	font-size: 12px;
+}
+.ctx{
+	word-break: break-all;
+	line-height: 24px;
+	margin-top: 8px;
+}
+.imgs{
+	margin-top: 10px;
+}
+.follow-btn{
+	margin-top:30px
+}
+.follow{
+	margin-top: 30px;
+	&--title{
+		color: #FF6A19;
+		font-weight: normal;
+	}
+}
+.operation{
+	color: #999;
+	display: flex;
+	justify-content: space-between;
+	margin-top: 30px;
+	&--show{
+		color: #3083FF;
+		margin-left: 28px;
+		cursor: pointer;
+	}
+	&--chat,&--thumb{
+		background: url('@/assets/img/comment/chat.png') no-repeat left center;
+		background-size: 16px;
+		padding-left: 24px;
+		cursor: pointer;
+		&__active,&:hover{
+			background-image: url('@/assets/img/comment/chat_active.png');
+			color: #FF6A19;
+
+		}
+	}
+
+	&--thumb{
+		background-image: url('@/assets/img/comment/thumb.png');
+		&__active,&:hover{
+			background-image: url('@/assets/img/comment/thumb_active.png');
+
+		}
+	}
+}
+.answer{
+	background: #F8F8F8;
+	margin-top: 14px;
+	padding: 0 24px 20px;
+	&--item{
+		border-top: 1px solid #eee;
+		padding: 20px 0;
+	}
+	&--title{
+		height: 54px;
+		line-height: 54px;
+		font-weight: normal;
+		color: #666;
+	}
+	&--name{
+		color: #999;
+		font-size: 12px;
+		display: flex;
+		justify-content: space-between;
+	}
+	&--ctx{
+		color: #666;
+		margin: 15px 0 0;
+		word-break: break-all;
+	}
+	&--answer{
+		font-size: 12px;
+		color: #666;
+		text-align: right;
+		cursor: pointer;
+		display: block;
+		
+	}
+	&--form{
+		display: flex;
+	}
+	&--input{
+		flex: 1;
+		height: 40px;
+		border: 1px solid #eee;
+		border-radius: 4px;
+		margin-right: 15px;
+		padding: 0 20px;
+	}
+	&--btn{
+		height: 40px;
+		font-size: 14px;
+		
+	}
+	/deep/.ui-button__disabled{
+		background: #eee;
+		color: #999;
+	}
+}
+</style>

components/BsCommentSubmit.vue

@@ -0,0 +1,205 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-06-25 15:29:43
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-30 22:53:16
+ * @Description: file content
+-->
+<template>
+	
+	<div class="submit">
+		<p class="rate-box" v-if="type === COMMENT.TYPE.COMMENT">
+			<b>满意度评分</b>
+			<el-rate v-model="rate"></el-rate>
+			<span>{{reteDesc}}</span>
+		</p>
+		<el-input type="textarea" class="textarea" placeholder="从多个维度评价，可以帮助更多想买的人哦~"
+			v-model="commentContent"  show-word-limit :maxlength="500" :rows="6"/>
+		<div class="operation">
+			<el-upload list-type="picture-card" 
+				:on-remove="handleRemove" :limit="6"
+				:action="uploadAction" :data="uploadData" 
+				:before-upload="handleBeforeUpload" 
+				:on-exceed="handleUploadExceed"
+              	:on-error="handleUploadError">
+					<i class="el-icon-plus"></i>
+					<p class="upload-txt">我要晒图</p>
+				</el-upload>
+			<UiButton class="upload-btn" :disabled="isDisabled" @click="handleSubmit">发表评论</UiButton>
+		</div>
+	</div>
+</template>
+<script>
+import {ApiPostComment} from '@/plugins/api/comment';
+import {ApiPostGetOssConfig} from '@/plugins/api/oss';
+import {COMMENT} from '@/constants';
+
+export default {
+	props : {
+		type : {
+			type : String | Number,
+			default : COMMENT.TYPE.COMMENT
+		},
+		commentDetail : {
+			type : Object,
+			default : () => ({})
+		}
+	},
+	data(){
+		return {
+			COMMENT,
+			rate: 5,
+			commentContent : '',
+			uploadData : {},
+			uploadAction : '',
+			fileList : []
+		}
+	},
+	computed:{
+		isEdit(){
+			return (this.commentContent || this.fileList.length > 0) ? true : false
+		},
+		reteDesc(){
+			return COMMENT.RATE_LEVEL[this.rate];
+		},
+		isDisabled(){
+			let status = false
+			if(this.type === COMMENT.TYPE.COMMENT){
+				status = !this.rate || !this.commentContent.trim();
+			}
+			if(this.type === COMMENT.TYPE.FOLLOW_COMMENT){
+				status = !this.commentContent.trim();
+			}
+			return status;
+		}
+	},
+	watch : {
+		isEdit(val){
+			this.$emit('editStatusChange', val)
+		}
+	},
+	methods : {
+		async handleSubmit(){
+			let data = {
+				commentContent : this.commentContent,
+				commentType : this.type,
+				orderProductId : this.commentDetail.orderProductId,
+				pictureUrl : this.fileList.map(i => i.url).join(',')
+			}
+			if(this.type === COMMENT.TYPE.COMMENT){
+				data.productId = this.commentDetail.productId;
+				data.commentScore = this.rate;
+			}else if(this.type === COMMENT.TYPE.FOLLOW_COMMENT){
+				data.originId = data.parentId = this.commentDetail.id;
+			}
+			const {error, result} = await ApiPostComment(data);
+			if(error){
+				this.$message.error(error.message);
+				return false;
+			}
+			this.commentContent = '';
+			this.fileList = [];
+			this.$nextTick(()=>{
+				this.$emit('submit',result);
+			})
+			
+		},
+
+		/**
+		 * 获取OSS鉴权信息
+		 * configId 自定义文件夹 图片存储的文件夹名称
+		 * serviceName 服务名
+		 */
+		async getOssCon(){
+			const {error, result} = await ApiPostGetOssConfig({
+				configId : 'account-comment/',
+				serviceName : 'comment'
+			});
+			if(error){
+				this.$message.error(error.message);
+				return false
+			}
+			return result
+			
+		},
+
+		async handleBeforeUpload(file) {
+			let result = await this.getOssCon();
+			if(result){
+				this.uploadAction = result.host;
+				this.uploadData = {
+					...this.uploadData,
+					policy : result.policy,
+					OSSAccessKeyId: result.accessId,
+					success_action_status: 200,
+					signature: result.signature,
+				}
+			}
+			Object.assign(this.uploadData, {
+				key: `${result.dir}${"${filename}"}`,
+				name: file.name,
+			});
+			this.fileList.push({
+				url : `${result.host}/${result.dir}${file.name}`,
+				uid : file.uid
+			})
+		},
+
+		handleUploadError(error, file) {
+			this.handleRemove(file)
+		},
+		handleRemove(file) {
+			this.fileList = this.fileList.filter(i => i.uid != file.uid );
+		},
+		handleUploadExceed(){
+			this.$message.warning('最多只能上传6张照片哦~')
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.rate-box{
+	display: flex;
+	b{
+		font-weight: normal;
+		margin-right: 10px;
+		color: #666;
+	}
+	span{
+		color: #FF6A19;
+		margin-left: 10px;
+	}
+}
+.textarea{
+	height: 138px;
+	margin-top: 30px;
+}
+.operation{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 15px;
+	.upload-txt{
+		font-size: 12px;
+		color: #999;
+	}
+	.upload-btn{
+		height: 40px;
+		width: 100px;
+		border-radius: 4px;
+		font-size: 14px;
+		padding: 0;
+	}
+}
+/deep/{
+	 .el-upload--picture-card,.el-upload-list__item{
+		 height: 70px !important;
+		 width: 70px !important;
+		 line-height: 20px;
+	 }
+	 .el-upload--picture-card{
+		 padding-top: 10px;
+	 }
+}
+</style>

components/BsPay.vue

@@ -2,30 +2,45 @@
  * @Author: ch
  * @Date: 2022-05-08 00:39:50
  * @LastEditors: ch
- * @LastEditTime: 2022-05-12 11:44:04
+ * @LastEditTime: 2022-07-11 11:32:27
  * @Description: file content
 -->
 <template>
-	<el-dialog title="打开微信扫描付款" width="380px" class="box" center
-		 :visible.sync="myVisible" @open="open" @close="close">
-		<div class="pay">
+	<el-dialog :title="title" width="380px" class="box" center
+		 :visible.sync="myVisible" @open="open" @close="close" :modal="false">
+		<div class="pay-type" v-if="!myPayType">
+			<el-radio-group v-model="myPayType">
+				<el-radio label="wx" class="pay-type--item" >
+					<img class="pay-type--wx" src="@/assets/img/order/wx.png"/>
+				</el-radio>
+				<el-radio label="ali" class="pay-type--item" >
+					<img class="pay-type--ali" src="@/assets/img/order/zfb.png"/>
+				</el-radio>
+			</el-radio-group>
+		</div>
+		<div class="pay" v-else>
 			<span class="pay--timer">{{timerTxt}}</span>
 			<UiMoney class="money" sufSize="14px" preSize="14px" size="20px" 
 				float suffix prefix :money="orderInfo.payAmount"/>
 			<div class="pay--code">
 				<img :src="imgUrl" v-if="imgUrl"/>
-				<!-- <p v-if="!timer">已超时，请重新下单</p> -->
+				<span v-else>{{imgTip}}</span>
 			</div>
 			<p class="pay--tips">如支付后没有自动跳转，请点击 <span class="pay--finish" @click="finish">完成付款</span></p>
+			<UiButton class="pay--btn" type='yellow_gradual' @click="back">其他支付方式</UiButton>
 		</div>
 	</el-dialog>
 </template>
 <script>
-import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
+import {ApiPostWxPayCdoeImg, ApiPostAliPayCdoeImg} from '@/plugins/api/pay'
 import {ApiGetOrderDetail} from '@/plugins/api/order'
-import UiMoney from './UiMoney.vue'
+import UiMoney from './UiMoney.vue';
+import UiButton from './UiButton.vue';
+import QRcode from 'qrcode';
+import {CreateUUID} from '@/plugins/utils';
+
 export default {
-	components: { UiMoney },
+	components: { UiMoney, UiButton },
 	props : {
 		visible : {
 			type : Boolean,
@@ -34,15 +49,30 @@ export default {
 		orderId : {
 			type : Number | String,
 			default : ''
+		},
+		payType:{
+			type : String | null,
+			require : true
 		}
 	},
 	data(){
 		return {
 			orderInfo: {},
 			imgUrl : '',
+			imgTip : '二维码获取中',
 			timerTxt : '',
 			startSecondNum : 0,
 			timerStop : null,
+			myPayType : null,
+			payUUID : null
+		}
+	},
+	watch:{
+		myPayType(val){
+			// 单选框change事件无效，使用watch代替
+			if(val){
+				this.getQrCode();
+			}
 		}
 	},
 	computed:{
@@ -53,12 +83,25 @@ export default {
 			set(val){
 				this.$emit('update:visible', val)
 			}
+		},
+		title(){
+			let str = '请选择支付方式';
+			if(this.myPayType === 'wx'){
+				str = '打开微信扫描付款';
+			}else if(this.myPayType === 'ali'){
+				str = '打开支付宝扫描付款';
+			};
+			return str;
 		}
 	},
 	methods : {
 		open(){
 			this.getOrderInfo();
-			this.getCodeImg();
+			this.myPayType = this.payType;
+			if(this.myPayType){
+				this.getQrCode();
+			}
+			
 		},
 		/**
 		 * 获取订单最新信息
@@ -80,12 +123,52 @@ export default {
 
 			}
 		},
-		async getCodeImg(){
-			const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
+		getQrCode(){
+
+			this.payUUID = CreateUUID();
+			if(this.myPayType == 'wx'){
+				this.getWxCodeImg(this.payUUID);
+			}else if(this.myPayType === 'ali'){
+				this.getAliCodeImg(this.payUUID);
+			}
+		},
+		/**
+		 * 支付宝二维码
+		 */
+		async getAliCodeImg(uid){
+			const {error, result} = await ApiPostAliPayCdoeImg({orderId : this.orderId});
+			if(this.payUUID !== uid){
+				return false;
+			}
 			if(error){
+				this.imgTip = error.message;
 				return false;
 			}
-			this.imgUrl = result.dataInfo.codeImgData;
+			QRcode.toDataURL(result.payDataInfo.qrCodeData,{
+				width : 200
+			}, (err, url)=>{
+				this.imgUrl = url;
+				
+			})
+		},
+		/**
+		 * 微信二维码
+		 */
+		async getWxCodeImg(uid){
+			const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId});
+			if(this.payUUID !== uid){
+				return false;
+			}
+			if(error){
+				this.imgTip = error.message;
+				return false;
+			}
+			QRcode.toDataURL(result.payDataInfo.codeUrlData,{
+				width : 200
+			}, (err, url)=>{
+				this.imgUrl = url;
+			})
+			
 		},
 
 		/**
@@ -116,22 +199,62 @@ export default {
 		close(){
 			clearInterval(this.timerStop);
 			this.timerStop = null;
+			this.myPayType = this.payType;
 			this.$emit('cancel');
 		},
 		finish(){
 			this.myVisible = false;
 			this.$emit('finish')
+		},
+		back(){
+			this.myPayType = null;
+			this.imgUrl = null;
+			this.imgTip = '二维码获取中'
 		}
 	}
 }
 </script>
 <style lang="scss" scoped>
+.box{
+	background: rgba(0,0,0, .5);
+}
+.pay-type{
+	width: 270px;
+	padding: 0 30px;
+	&--item{
+		width: 270px;
+		height: 56px;
+		display: flex;
+		align-items: center;
+		border: 1px solid #ccc;
+		padding-left: 55px;
+		margin-bottom: 20px;
+	}
+	&--wx{
+		width: 108px;
+	}
+	&--ali{
+		width: 78px;
+	}
+}
 .pay{
 	text-align: center;
 	&--code{
 		width: 160px;
 		height: 160px;
 		margin: 15px auto 20px;
+		position: relative;
+		overflow: hidden;
+		img{
+			width: 200px;
+			position: absolute;
+			left: -20px;
+			top: -20px;
+		}
+		span{
+			line-height: 100px;
+			color: #999;
+		}
 	}
 	&--timer{
 		color: #999;
@@ -145,6 +268,12 @@ export default {
 		color: #FF512B;
 		cursor: pointer;
 	}
+	&--btn{
+		border-radius: 4px;
+		width: 143px;
+		height: 32px;
+		margin-top: 20px;
+	}
 }
 .money{
 	color: #FF512B;

components/UiImgs.vue

@@ -0,0 +1,137 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-06-24 19:07:45
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-30 19:40:36
+ * @Description: file content
+-->
+<template>
+	<div class="preview-imgs">
+		<ul>
+			<li v-for="(i, idx) in list" :key="idx" :class="{'active' : curIndex == idx}" >
+				<img :src="i" @click="curIndex = idx"/>
+			</li>
+		</ul>
+		<p v-if="curIndex > -1">
+			<img :src="list[curIndex]" @click="curIndex = -1"/>
+			<span class="prev" @click="prev" v-if="curIndex > 0"></span>
+			<span class="next" @click="next" v-if="curIndex < list.length-1"></span>
+		</p>
+	</div>
+</template>
+<script>
+export default {
+	props : {
+		list : {
+			type : Array,
+			default : () => ([])
+		}
+	},
+	data(){
+		return {
+			curIndex : -1,
+		}
+	},
+	methods:{
+		next(){
+			this.curIndex++;
+		},
+		prev(){
+			this.curIndex--;
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.preview-imgs{
+	ul{
+		display: flex;
+	}
+	li{
+		width: 46px;
+		height : 46px;
+		border: 1px solid #eee;
+		margin-right: 10px;
+		padding: 1px;
+		cursor: pointer;
+		img{
+			width: 42px;
+			height: 42px;
+			object-fit: contain;
+		}
+		&.active{
+			border-color: #FF512B;
+			position: relative;
+			&::after{
+				content: '';
+				height: 3px;
+				width: 3px;
+				bottom: -7px;
+				left: 17px;
+				display: block;
+				position: absolute;
+				// transform: rotate(45deg);
+				border: 3px solid #FF512B;
+				border-left-color: transparent;
+				border-right-color: transparent;
+				border-bottom-color: transparent;
+			}
+		}
+	}
+	p{
+		width: 300px;
+		margin-top: 20px;
+		position: relative;
+		border: 1px solid #eee;
+		img{
+			width: 300px;
+			height: 300px;
+			object-fit: contain;
+			cursor: zoom-out;
+		}
+		&:hover span{
+			display: block;
+		}
+		span{
+			display: none;
+			position: absolute;
+			width: 40px;
+			height: 40px;
+			background: rgba(0,0,0, .5);
+			top : 130px;
+			cursor: pointer;
+			&::after,&::before{
+				position: absolute;
+				display: block;
+				content: '';
+				background: #fff;
+				height: 20px;
+				width: 4px;
+				border-radius: 4px;
+				left: 16px;
+				top: 4px;
+				transform: rotate(45deg);
+			}
+			&::after{
+				transform: rotate(-45deg);
+				top: 16px;
+			}
+			&.prev{
+				left: 10px;
+				
+			}
+			&.next{
+				right: 10px;
+				&::after{
+					left: 20px;
+					transform: rotate(45deg);
+				}
+				&::before{
+					left: 20px;
+					transform: rotate(-45deg);
+				}
+			}
+		}
+	}
+}
+</style>

constants/index.js

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-17 18:17:00
  * @LastEditors: ch
- * @LastEditTime: 2022-06-09 18:50:01
+ * @LastEditTime: 2022-06-27 16:20:31
  * @Description: file content
  */
 /**
@@ -18,6 +18,9 @@ const ORDER_STATUS = {
   WAIT_PAY: 1, // 待付款
   WAIT_SEND: 3, //待发货
   WAIT_RECEIVE: 4, // 待收货
+  WAIT_COMMENT: 5,//评价
+  FINISH: 6,
+  FINISH_FOLLOW_COMMENT : 7
 };
 
 // 性别
@@ -38,5 +41,23 @@ const SECKILL_STATUS = {
   NOT_START: 1, // 未开始
   GOING: 2, // 进行中
 };
+const COMMENT = {
+  TYPE: {
+      // 评价
+    COMMENT: 1,
+    // 追评
+    FOLLOW_COMMENT: 2,
+    // 回复
+    ANSWER: 3,
+  },
+  RATE_LEVEL: {
+    1 : '很不满意',
+    2 : '不太满意',
+    3 : '一般',
+    4 : '满意',
+    5 : '非常满意'
+  }
+  
+}
 
-export { TOKEN_KEY, UUID_KEY, ORDER_STATUS, SEX_TYPE, CATEGROY_LEVEL, SECKILL_STATUS };
+export { TOKEN_KEY, UUID_KEY, ORDER_STATUS, SEX_TYPE, CATEGROY_LEVEL, SECKILL_STATUS, COMMENT };

env.config.js

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-05 14:40:00
  * @LastEditors: ch
- * @LastEditTime: 2022-05-27 18:25:28
+ * @LastEditTime: 2022-06-24 14:21:20
  * @Description: 根据git分支生成对应环境的环境变量
  * 开发时如果环境变量换了，可以不用重启服务，直接运行node env.config.js即可
  */
@@ -28,7 +28,6 @@ const envConfig = {
 		imUrl : 'wss://you-gateway.mashibing.com'
 	}
 }
-const branch = getRepoInfo().branch; // 调用获取git信息
 let curEnvConfig = null;
 const argv = global.process.argv;
 for(key in envConfig){

layouts/default.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:56:39
  * @LastEditors: ch
- * @LastEditTime: 2022-05-31 16:52:40
+ * @LastEditTime: 2022-06-25 10:10:25
  * @Description: file content
 -->
 <template>

layouts/module/footer/index.vue

@@ -17,7 +17,9 @@
       <div class="layout-footer-wrap__line"></div>
       <div class="layout-footer-wrap__address">
         © 2020 马士兵（北京）教育科技有限公司
-        地址：北京市海淀区北三环中路44号4号楼1层114 京ICP备17012835号-1
+        地址：北京市海淀区北三环中路44号4号楼1层114 京ICP备17012835号-1 
+        <a href="https://oss-cdn.mashibing.com/teacher_attachment/user_00020172/yyzz.jpg"​ target="_blank">营业页执照</a>
+        <a href="https://oss-cdn.mashibing.com/default/cbwxkz.jpg"​ target="_blank">出版物经营许可证：新出发京零字第海210140号</a>
       </div>
     </div>
   </div>
@@ -89,6 +91,9 @@ export default {
       color: #999999;
       text-align: center;
       line-height: 20px;
+      a{
+        color: #999;
+      }
     }
   }
 }

layouts/module/header/HeaderCategory.vue

@@ -96,7 +96,7 @@ export default {
   },
   methods: {
     getList(id) {
-      let list = this.list.filter((item) => item.id == id);
+      let list = this.list.filter((item) => item && item.id == id);
       // console.log(`list[0]?.list`, list[0]?.list);
       return list[0]?.list || [];
     },

layouts/module/header/index.vue

@@ -192,7 +192,6 @@ export default {
   z-index: 10;
   background: #ffffff;
   box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
-  z-index: 9999;
 
   &--hide-shadow {
     box-shadow: none;

nuxt.config.js

@@ -2,97 +2,90 @@
  * @Author: ch
  * @Date: 2022-05-03 22:14:16
  * @LastEditors: ch
- * @LastEditTime: 2022-06-12 14:31:52
+ * @LastEditTime: 2023-04-21 16:14:15
  * @Description: file content
  */
 export default {
-	// Global page headers: https://go.nuxtjs.dev/config-head
-	head: {
-		title: '马士兵严选',
-		htmlAttrs: {
-			lang: 'zh'
-		},
-		meta: [
-			{ charset: 'utf-8' },
-			{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
-			{ hid: 'description', name: 'description', content: '' },
-			{ name: 'format-detection', content: 'telephone=no' }
-		],
-		link: [
-			{ rel: 'icon', type: 'image/x-icon', href: '/logo.ico' }
-		]
-	},
-	router: {
-		extendRoutes(routes, resolve) {
-			routes.push({
-				name: 'custom',
-				path: '/',
-				component: resolve(__dirname, 'pages/index/index.vue')
-			})
-		},
-		middleware: ['redirect']
-	},
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  head: {
+    title: "马士兵严选",
+    htmlAttrs: {
+      lang: "zh",
+    },
+    meta: [
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { hid: "description", name: "description", content: "" },
+      { name: "format-detection", content: "telephone=no" },
+    ],
+    link: [{ rel: "icon", type: "image/x-icon", href: "/logo.ico" }],
+  },
+  router: {
+    extendRoutes(routes, resolve) {
+      routes.push({
+        name: "custom",
+        path: "/",
+        component: resolve(__dirname, "pages/index/index.vue"),
+      });
+    },
+    middleware: ["redirect"],
+  },
 
-	// Global CSS: https://go.nuxtjs.dev/config-css
-	css: [
-		'@assets/scss/global.scss',
-		'element-ui/lib/theme-chalk/index.css'
-	],
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: ["@assets/scss/global.scss", "element-ui/lib/theme-chalk/index.css"],
 
-	// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-	plugins: [
-		'@/plugins/element-ui',
-		'@/plugins/axios',
-		'@/plugins/axiosTk.js',
-		'@plugins/vue-inject.js',
-    	'@/plugins/v-distpicker', 
-		'@/plugins/router', 
-		'@/plugins/im',
-		'@/plugins/chat'
-	],
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [
+    "@/plugins/element-ui",
+    "@/plugins/axios",
+    "@/plugins/axiosTk.js",
+    "@plugins/vue-inject.js",
+    "@/plugins/v-distpicker",
+    "@/plugins/router",
+    "@/plugins/im",
+    "@/plugins/chat",
+  ],
 
-	// Auto import components: https://go.nuxtjs.dev/config-components
-	components: true,
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: true,
 
-	// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
-	buildModules: [
-	],
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+  buildModules: [],
 
   build: {
-    vendor: ['v-distpicker']
+    vendor: ["v-distpicker"],
   },
 
-	styleResources: {
-		scss: '@/assets/scss/global.scss'
-	},
+  styleResources: {
+    scss: "@/assets/scss/global.scss",
+  },
 
-	// Modules: https://go.nuxtjs.dev/config-modules
-	modules: [
-		'@nuxtjs/axios',
-		'cookie-universal-nuxt',
-		'@nuxtjs/style-resources'
-	],
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [
+    "@nuxtjs/axios",
+    "cookie-universal-nuxt",
+    "@nuxtjs/style-resources",
+  ],
 
-	// Build Configuration: https://go.nuxtjs.dev/config-build
-	build: {
-		transpile: [/^element-ui/],
-	},
-	axios: {
-		// 表示开启代理
-		proxy: true,
-	},
-	proxy: {
-		'/mall/': {
-			// target: 'http://114.55.64.39:3004', // 目标接口域名
-			target: 'https://you-gateway.mashibing.com/', // 目标接口域名
-			target: 'https://k8s-horse-gateway.mashibing.cn/', // 目标接口域名
-			pathRewrite: {
-				changeOrigin: true, // 表示是否跨域
-			},
-		},
-	},
-	server: {
-		port: 3000, // default: 3000
-		host: '0.0.0.0' // default: localhost,
-	},
-}
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {
+    transpile: [/^element-ui/],
+  },
+  axios: {
+    // 表示开启代理
+    // proxy: true,
+  },
+  proxy: {
+    // '/mall/': {
+    // 	target: 'https://you-gateway.mashibing.com/', // 目标接口域名
+    // 	// target: 'https://k8s-horse-gateway.mashibing.cn/', // 目标接口域名
+    // 	pathRewrite: {
+    // 		changeOrigin: true, // 表示是否跨域
+    // 	},
+    // },
+  },
+  server: {
+    port: 3000,
+    host: "0.0.0.0",
+  },
+};

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "node env.config.js & nuxt",
-    "dev:beta": "node env.config.js --ENV:beta & nuxt",
-    "dev:prod": "node env.config.js --ENV:prod & nuxt",
+    "server": "node env.config.js & nuxt",
+    "server:beta": "node env.config.js --ENV:beta & nuxt",
+    "server:prod": "node env.config.js --ENV:prod & nuxt",
     "build:test": "node env.config.js --ENV:test & nuxt build",
     "build:beta": "node env.config.js --ENV:beta & nuxt build",
     "build:prod": "node env.config.js --ENV:prod & nuxt build",
@@ -21,25 +21,26 @@
     "element-ui": "^2.15.8",
     "js-util-all": "^1.0.6",
     "lodash": "^4.17.21",
-    "nuxt": "^2.15.8",
+    "nuxt": "2.15.8",
+    "qrcode": "^1.5.0",
     "v-distpicker": "^1.2.13",
-    "vue": "^2.6.14",
-    "vue-server-renderer": "^2.6.14",
-    "vue-template-compiler": "^2.6.14"
+    "vue": "2.6.14",
+    "vue-server-renderer": "2.6.14",
+    "vue-template-compiler": "2.6.14"
   },
   "devDependencies": {
     "@vue/test-utils": "^1.3.0",
     "babel-core": "7.0.0-bridge.0",
-    "webpack": "^4.46.0",
-    "node-sass": "^4.14.1",
-    "sass": "^1.32.13",
-    "sass-loader": "^7.3.1",
     "babel-jest": "^27.4.4",
     "eslint": "^8.15.0",
     "eslint-plugin-prettier": "^4.0.0",
     "git-repo-info": "^2.1.1",
     "jest": "^27.4.4",
+    "node-sass": "^4.14.1",
     "prettier": "^2.6.2",
-    "vue-jest": "^3.0.4"
+    "sass": "^1.32.13",
+    "sass-loader": "^7.3.1",
+    "vue-jest": "^3.0.4",
+    "webpack": "^4.46.0"
   }
 }

pages/account/comment/index.vue

@@ -0,0 +1,153 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-06-27 11:46:34
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-30 23:40:44
+ * @Description: file content
+-->
+<template>
+	<div class="main">
+		<div class="tab">
+			<router-link class="tab--link" to="/account/home">个人中心</router-link>
+			<router-link class="tab--link" to="/account/order/list">我的订单</router-link>
+			<span>商品评价</span>
+		</div>
+		<div class="title">商品评价</div>
+		<div class="ctx">
+			<UiLoading v-if="loading"></UiLoading>
+			<BsCommentInfo v-else source="comment" :isFollowForm="isFollow" v-for="(item, idx) in list" :key="idx"
+				:commentDetail="item" @submit="handleSubmitComment($event, idx)" 
+				@submitFollow="handleSubmitFollow($event, idx)" @editStatusChange="editChange($event, idx)"/>
+		</div>
+	</div>
+</template>
+<script>
+import {
+  ApiGetOrderCommentDetail,
+  ApiGetCommentTabCount,
+  ApiGetProductSatisfaction,
+  ApiGetCommentCount,
+  ApiGetCommentDetail
+} from "@/plugins/api/comment";
+import {COMMENT} from '@/constants'
+import BsCommentInfo from '../../../components/BsCommentInfo.vue';
+export default {
+	components: { BsCommentInfo },
+	data(){
+		let query = this.$route.query;
+		return {
+			isFollow : query.follow ? true : false, // 是否自动打开追评
+			orderId: query.orderId,
+			commentId : query.commentId,
+			list:[],
+			loading : true
+		}
+	},
+	mounted(){
+		if(this.orderId){
+			this.getOrderCommentDetail();
+		}else if(this.commentId){
+			this.getCommentDetail();
+		}
+	},
+
+	beforeRouteLeave(to, from, next) {
+		if(this.list.findIndex(i => i.isEdit) > -1){
+			this.$confirm('你正在进行商品评价，退出后评价的内容将不保存！','提示').then(()=>{
+				next()
+			}).catch(()=>{
+
+			})
+		}else{
+			next()
+		}
+	},
+	methods:{
+		/**
+		 * 按订单查询评价详情
+		 */
+		async getOrderCommentDetail() {
+			this.loading = true;
+			const { error, result } = await ApiGetOrderCommentDetail({
+				orderId: this.orderId,
+			});
+			this.loading = false;
+			if (error) {
+				this.$message.warning(error.message);
+				return false;
+			}
+			this.list = result;
+		},
+		/**
+		 * 按评论查询，追评时用
+		 */
+		async getCommentDetail(){
+			this.loading = true;
+			const {error, result} = await ApiGetCommentDetail({
+				commentId : this.commentId
+			});
+			this.loading = false;
+			if (error) {
+				this.$message.warning(error.message);
+				return false;
+			}
+			this.list = [result];
+		},
+		/**
+		 * 提交评论成功事件
+		 * 如果还有未评论的则弹窗提示，并更新当前行的数据
+		 * 如果是最好一条产品评论则跳到评论成功页
+		 */
+		handleSubmitComment(result, idx){
+			this.$set(this.list, idx, {...this.list[idx],...result});
+			if(this.list.findIndex(i => !i.id) > -1){
+				this.$message.success('评论成功~');
+			}else{
+				this.$router.replace('/account/comment/success');
+			}
+		},
+		
+		editChange(isEdit, idx){
+			this.$set(this.list[idx], 'isEdit', isEdit);
+		},
+	}
+}
+</script>
+<style lang="scss" scoped>
+.main{
+	@include layout-box;
+	margin-bottom: 32px;
+}
+.tab{
+	margin: 10px 0;
+	height: 40px;
+	line-height: 40px;
+	color: #999;
+	&--link{
+		background: url('@/assets/img/comment/right.png') no-repeat right center;
+		padding-right: 15px;
+		margin-right: 10px;
+		background-size: 5px;
+		color: #666;
+	}
+}
+.title{
+    width: 100%;
+	height: 40px;
+	line-height: 40px;
+	background: #f7f7f7;
+	border: 1px solid #f2f2f2;
+	padding: 0 16px;
+	font-size: 14px;
+	font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+	font-weight: 400;
+	color: #666666;
+	display: flex;
+	justify-content: space-between;
+}
+
+.ctx{
+	border: 1px solid #f2f2f2;
+	border-top: 0;
+}
+</style>

pages/account/comment/success.vue

@@ -0,0 +1,114 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-08 01:11:33
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-28 10:39:35
+ * @Description: file content
+-->
+<template>
+	<div>
+		<div class="main">
+			<img class="icon" src="@/assets/img/order/pay_success.png" />
+			<p>评价成功</p>
+			<div>
+				<UiButton type="grey" @click="$router.back()" :radius="true">返回</UiButton>
+			</div>
+			<div v-if="goodsList.length">
+				<b class="product-title">这些宝贝还在等你得评价哦~</b>
+				<ul class="product">
+					<li v-for="(item, idx) in goodsList" :key="idx">
+						<img :src="item.productPicture"/>
+						<p>{{item.productName}}</p>
+						<UiButton type="grey" @click="$router.replace(`/account/comment?orderId=${item.orderId}`)" >
+							{{item.commentStatus == 1 ? '立即评价' : '立即追评'}}
+						</UiButton>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<BsChosen class="chosen"/>
+	</div>
+</template>
+<script>
+import UiButton from '@/components/UiButton.vue';
+import {ApiGetCommentOrderDetailList} from '@/plugins/api/order';
+export default {
+	components: { UiButton },
+	data(){
+		return {
+			goodsList : []
+		}
+	},
+	mounted(){
+		this.getAwaitGoodsList();
+	},
+	methods:{
+		
+		async getAwaitGoodsList (){
+			const  {error, result} = await ApiGetCommentOrderDetailList({
+				length:6,
+				pageIndex : 1
+			});
+			if(error){
+				this.$message.warning(error.message)
+			}
+			this.goodsList = result.records.map(item => {
+				return {
+					productPicture : item.productImageUrl,
+					productName : item.productName,
+					commentStatus : item.commentStatus,
+					orderId : item.orderId
+				}
+			});
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.main{
+	@include layout-box; 
+	text-align: center;
+	padding: 100px 0 40px;
+}
+.icon{
+	width: 239px;
+}
+b{
+	display: block;
+}
+p{
+	margin: 10px 0 25px 0;
+	color: #999;
+}
+button{
+	margin: 0 10px 30px;
+}
+.product-title{
+	height: 40px;
+	line-height: 40px;
+	text-align: left;
+	background: #F7F7F7;
+	font-weight: normal;
+	color: #666;
+	padding: 0 16px;
+}
+.product{
+	display: flex;
+	// justify-content: flex-start;
+	li{
+		margin:40px 0 0 48px;
+		width: 140px;
+		img{
+			width: 140px;
+			height: 140px;
+			object-fit: contain;
+
+		}
+		p{
+			@include ellipses(2);
+			height: 40px;
+			margin: 10px 0;
+		}
+	}
+}
+</style>

pages/account/index/home/index.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:27:37
  * @LastEditors: ch
- * @LastEditTime: 2022-05-04 17:27:39
+ * @LastEditTime: 2022-06-28 16:38:18
  * @Description: file content
 -->
 
@@ -79,17 +79,24 @@ export default {
           path: `/account/order/list?type=${ORDER_STATUS.WAIT_RECEIVE}`,
           count: 0,
         },
+        {
+          key: "waitComment",
+          label: "待评价",
+          icon: getOrderTypeIcon("icon-order4"),
+          path: `/account/order/list?type=${ORDER_STATUS.WAIT_COMMENT}`,
+          count: 0,
+        },
         {
           key: "progressCount",
           label: "退款/售后",
-          icon: getOrderTypeIcon("icon-order4"),
+          icon: getOrderTypeIcon("icon-order5"),
           path: "/account/order/saleAfter/list",
           count: 0,
         },
         {
           key: "",
           label: "全部订单",
-          icon: getOrderTypeIcon("icon-order5"),
+          icon: getOrderTypeIcon("icon-order6"),
           path: "/account/order/list",
         },
       ],
@@ -180,8 +187,8 @@ export default {
           border: 2px solid #ffffff;
         }
         img {
-          width: 54px;
-          height: 54px;
+          width: 50px;
+          height: 50px;
         }
       }
     }

pages/account/index/order/detail/module/StatusInfo.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-09 14:41:37
  * @LastEditors: ch
- * @LastEditTime: 2022-05-16 18:27:52
+ * @LastEditTime: 2022-06-30 20:01:46
  * @Description: file content
 -->
 <template>
@@ -13,6 +13,8 @@
 			<div class="operation--btns">
 			<!-- 已发货可以确认收货 -->
 			<UiButton v-if="orderInfo.orderStatus === 4" type="yellow_gradual" :radius="true" @click="receive">确认收货</UiButton>
+			<UiButton v-if="orderInfo.orderStatus === 5" type="yellow_gradual" :radius="true" @click="handelComment">去评价</UiButton>
+			<UiButton v-if="orderInfo.orderStatus === 6" type="yellow_gradual" :radius="true" @click="handelComment">去追评</UiButton>
 			<!-- 待支付可以取消，支付订单 -->
 			<template v-if="orderInfo.orderStatus === 1">
 				<UiButton type="yellow_gradual" :radius="true" @click="payVisible = true">去支付</UiButton>
@@ -51,6 +53,7 @@ export default {
 				'5' : {name:'已收货'},
 				// 已完成
 				'6' : {name:'交易成功'},
+				'7' : {name:'交易成功'},
 			},
 			ctxCon : {},
 			startSecondNum : 0,
@@ -127,11 +130,21 @@ export default {
 					uni.$toast(error.message);
 					return false;
 				}
-				this.$message({
-					type: 'success',
-					message: '成功收货!'
-				});
-				this.emitStatus()
+
+				this.handelComment()
+				// this.$message({
+				// 	type: 'success',
+				// 	message: '成功收货!'
+				// });
+				// this.emitStatus()
+			});
+		},
+		handelComment(){
+			this.$router.push({
+				path : '/account/comment',
+				query : {
+					orderId : this.orderInfo.orderId
+				}
 			});
 		},
 		emitStatus(){

pages/account/index/order/list/index.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 20:47:29
  * @LastEditors: ch
- * @LastEditTime: 2022-05-16 17:51:43
+ * @LastEditTime: 2022-06-29 11:50:49
  * @Description: file content
 -->
 <template>
@@ -55,11 +55,13 @@
 										<UiButton type="yellow_gradual" @click="pay(item)">去支付</UiButton>
 										<span class="link-btn" @click="cancelPay(item)">取消支付</span>
 									</template>
-									<router-link :to="`./detail?id=${item.orderId}`" v-if="item.orderStatus > 4">查看物流</router-link>
-									<template v-if="item.orderStatus === 4">
-										<UiButton type="yellow_gradual" @click="receive(item)">确认收货</UiButton>
-										<router-link class="link-btn" :to="`./detail?id=${item.orderId}`">查看物流</router-link>
-									</template>
+									<UiButton type="yellow_gradual" v-if="item.orderStatus === 4" @click="receive(item)">确认收货</UiButton>
+									<UiButton type="yellow_gradual" v-if="item.orderStatus === 5"
+										@click="$router.push(`/account/comment?orderId=${item.orderId}`)">去评价</UiButton>
+									<UiButton type="yellow_gradual" v-if="item.orderStatus === 6"
+										@click="$router.push(`/account/comment?orderId=${item.orderId}&follow=true`)">去追评</UiButton>
+
+									<router-link class="link-btn" :to="`./detail?id=${item.orderId}`" v-if="item.orderStatus >= 4">查看物流</router-link>
 								</td>
 							</template>
 						</tr>
@@ -165,11 +167,17 @@ export default {
 					this.$$message.error(error.message);
 					return false;
 				}
-				this.$message({
-					type: 'success',
-					message: '成功收货!'
+				this.$router.push({
+					path : '/account/tradeSuccess',
+					query : {
+						orderId : item.orderId
+					}
 				});
-				this.reloadData()
+				// this.$message({
+				// 	type: 'success',
+				// 	message: '成功收货!'
+				// });
+				// this.reloadData();
 			});
 		},
 		handleDetail(id){

pages/account/index/order/list/module/Tab.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2019-01-01 08:04:09
  * @LastEditors: ch
- * @LastEditTime: 2022-05-11 21:34:49
+ * @LastEditTime: 2022-06-27 11:38:50
  * @Description: file content
 -->
 <template>
@@ -30,6 +30,7 @@ export default {
 				{label : '待付款', value : 1, code: 'unpaidCount'},
 				{label : '待发货', value : 3, code: 'waitDeliveryCount'},
 				{label : '待收货', value : 4, code: 'deliveredCount'},
+				{label : '待评价', value : 5, code: 'waitComment'},
 			]
 		}
 	},

pages/account/index/userInfo.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-20 09:59:05
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-25 15:40:05
+ * @Description: file content
+-->
 <!--
  * @Author: ch
  * @Date: 2022-05-04 17:52:50

pages/account/tradeSuccess.vue

@@ -0,0 +1,59 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-08 01:11:33
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-27 15:37:53
+ * @Description: file content
+-->
+<template>
+	<div>
+		<div class="main">
+			<img class="icon" src="@/assets/img/order/pay_success.png" />
+			<!-- <b>交易成功</b> -->
+			<p>交易成功</p>
+			<div>
+				<UiButton type="grey" @click="$router.replace(`/`)" :radius="true">返回首页</UiButton>
+				<UiButton type="yellow_gradual" @click="$router.replace(`./comment?orderId=${orderId}`)" :radius="true">去评价</UiButton>
+			</div>
+		</div>
+		<BsChosen class="chosen"/>
+	</div>
+</template>
+<script>
+import UiButton from '@/components/UiButton.vue';
+import {ApiGetOrderPaySatus} from '@/plugins/api/order';
+export default {
+	components: { UiButton },
+	data(){
+		return {
+			orderId : this.$route.query.orderId
+		}
+	},
+	mounted(){
+
+      
+	},
+	methods:{
+	}
+}
+</script>
+<style lang="scss" scoped>
+.main{
+	@include layout-box; 
+	text-align: center;
+	padding: 100px 0 40px;
+}
+.icon{
+	width: 239px;
+}
+b{
+	display: block;
+}
+p{
+	margin: 10px 0 25px 0;
+	color: #999;
+}
+button{
+	margin: 0 10px 30px;
+}
+</style>

pages/goods/detail/_id.vue

@@ -41,6 +41,7 @@
     </main>
   </div>
   <div v-else>
+    <HeaderBar v-show="showHeaderBar" :tabKey="headerKey" @jump="handleJump" @addCart="addCart" />
     <nav class="nav flex flex-middle flex-center">
       <p class="nav__crumbs">
         全部商品
@@ -188,17 +189,15 @@
         ></UiGoodsItem>
       </div>
       <div class="section-details">
-        <p class="section-title">商品详情</p>
-        <div
-          class="rich"
-          v-html="detailData.detail"
-          v-if="detailData.detail"
-        ></div>
+        <p class="section-title" ref="detailRef">商品详情</p>
+        <div class="rich" v-html="detailData.detail" v-if="detailData.detail" ></div>
         <div class="section-details--none" v-else>
           <img src="@/assets/img/goods/none.png" alt="" />
           <p>暂无详情</p>
         </div>
+        <Comment ref="commentRef" />
       </div>
+
     </section>
     <BsChosen v-else></BsChosen>
 
@@ -235,14 +234,16 @@ import UiMoney from "@/components/UiMoney.vue";
 import UiButton from "@/components/UiButton.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
 import BsChosen from "@/components/BsChosen.vue";
+import Comment from './module/Comment.vue';
 import { ApiPutAddCart } from "@/plugins/api/cart";
 import {
   ApiGetGoodsDetail,
   ApiGetGoodsSkus,
   ApiGetGoodsList,
 } from "@/plugins/api/goods";
+import HeaderBar from './module/HeaderBar.vue';
 export default {
-  componetns: { UiMoney, UiButton, UiGoodsItem, BsChosen },
+  components: { UiMoney, UiButton, UiGoodsItem, BsChosen, Comment, HeaderBar },
   data() {
     return {
       pageLoading: true,
@@ -260,6 +261,8 @@ export default {
       startTime: "",
       endTime: "",
       showService: false,
+      showHeaderBar : false,
+      headerKey: 'detail'
     };
   },
   async created() {
@@ -277,7 +280,7 @@ export default {
     vm.detailData = res1.result;
     vm.skuData = res2.result;
 
-    vm.recommendedData = res3.result.records;
+    vm.recommendedData = res3.result ? res3.result.records : [];
     vm.pageLoading = false;
     if (
       vm.detailData.productActivityVO.isActivity &&
@@ -341,7 +344,37 @@ export default {
       }
     },
   },
+  mounted(){
+      window.addEventListener("scroll", this.setHeaderBar);
+      this.setHeaderBar()
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.setHeaderBar);
+  },
   methods: {
+    setHeaderBar(){
+      const  y = window.scrollY
+      this.showHeaderBar = y > 700;
+      if(this.showHeaderBar){
+        const dY = this.$refs.detailRef.offsetTop;
+        const cY = this.$refs.commentRef.$el.offsetTop;
+        if(y >= cY){
+          this.headerKey = 'comment';
+        }else if(y > dY){
+          this.headerKey = 'detail';
+        }
+      }
+
+
+    },
+    handleJump(val){
+      if(val === 'detail'){
+        this.$refs.detailRef.scrollIntoView();
+      }else{
+        this.$refs.commentRef.$el.scrollIntoView();
+      }
+      this.headerKey = val;
+    },
     onShowService() {
       this.showService = true;
     },
@@ -526,6 +559,8 @@ export default {
       this.$store.dispatch("getCartProducts");
       // this.$Router.push('/cart');
     },
+
+    
   },
 };
 </script>

pages/goods/detail/module/Comment.vue

@@ -0,0 +1,318 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-06-24 14:39:38
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-30 22:42:19
+ * @Description: file content
+-->
+<template>
+	<div>
+		<div class="title">
+			<b>商品评价</b>
+			<div>
+				<el-dropdown class="title--sort" @command="handleCommand">
+					<span>{{sortActive.label}}<i class="el-icon-arrow-down el-icon--right"></i></span>
+					<el-dropdown-menu slot="dropdown">
+						<el-dropdown-item v-for="item in sortData" :key="item.val" :command="item">{{item.label}}</el-dropdown-item>
+					</el-dropdown-menu>
+				</el-dropdown>
+				<el-checkbox v-model="isContent" @change="handledContent">有内容评价</el-checkbox>
+			</div>
+		</div>
+		<div class="ctx">
+			
+			
+			<div class="ctx--top">
+				<div class="ctx--top-rate" v-if="productRate">
+					<b>商品满意度</b>
+					<p>{{productRate}}</p>
+					<el-rate :value="productRate" disabled size="16px"></el-rate>
+				</div>
+				<div class="ctx--top-tabs" v-if="tabs.length > 1">
+					<span v-for="i in tabs" :key="i.labelType" @click="handleTabChanage(i)"
+						:class="{'active':i.labelType == tabActive}">
+						{{i.labelName}}({{i.commentCount}})
+					</span>
+				</div>
+			</div>
+			<UiEmpty v-if="!list.length && loading=='finish'" :icon="require('@/assets/img/comment/empty.png')" desc="暂时没有评论"/>
+			<template v-else>
+				<BsCommentInfo v-for="item in list" :key="item.id" :commentDetail="item" source="detail"/>
+			</template>
+			<div v-if="loading === 'loading'" class="loading">数据加载中....</div>
+			<div v-if="loading === 'finish'" class="more" @click="next">查看更多></div>
+		</div>
+
+      <!-- <el-pagination class="pagination flex flex-right" layout="prev, pager, next"
+        @current-change="handleCurrentChange" :current-page.sync="pageIndex"
+        :page-size="pageSize" :total="total"></el-pagination> -->
+	</div>
+</template>
+<script>
+import {
+  ApiGetCommentList,
+  ApiGetCommentTabCount,
+  ApiGetProductSatisfaction,
+  ApiGetCommentCount
+} from "@/plugins/api/comment";
+import BsCommentInfo from '../../../../components/BsCommentInfo.vue';
+export default {
+	components: { BsCommentInfo },
+	props : {
+		
+	},
+	data(){
+		return {
+			productId : this.$route.params.id,
+			tabActive : -1,
+			sortData : [{
+				val : 1,
+				label : '默认排序'
+			},{
+				val : 2,
+				label : '按时间排序'
+			}],
+			sortActive : {
+				val : 1,
+				label : '默认排序'
+			},
+			productRate : 0,
+			isContent : true,
+			pageIndex : 1,
+			pageSize : 10,
+			total:0,
+			tabs : [
+				{
+					labelName : '全部',
+					labelType : -1,
+					commentCount : 0
+				}
+			],
+			pageSize : 10,
+			list : [],
+			loading : 'finish'
+		}
+	},
+	mounted(){
+		this.getList();
+		this.getTabCount();
+		this.getProductSatisfaction();
+		this.getCount();
+	},
+	methods:{
+		async getList(){
+			if(this.loading === 'loading'){
+				return false;
+			}
+			this.loading = 'loading';
+			const {error, result} = await ApiGetCommentList({
+				pageIndex : this.pageIndex,
+				length : this.pageSize,
+				productId : this.productId,
+				commentLabel : this.tabActive == -1 ? null : this.tabActive,
+				sortType : this.sortActive.val,
+				isContent : this.isContent || null
+			});
+			this.loading = 'finish';
+			if(error){
+				return false;
+			}
+			this.list = this.list.concat(result.records);
+			// 如果当前页数据为空，且不是最后一页则再查一次下一页，因过滤条件后端接口无法实现分页。所以这么做的。
+			if(result.records.length == 0 && this.pageIndex < result.pages){
+				this.next();
+				return false;
+			}
+			if(this.pageIndex === result.pages){
+				this.loading = 'nomore'
+			}
+			// this.total = result.total
+		},
+		next(){
+			this.pageIndex++;
+			this.getList();
+		},
+		async getTabCount (){
+			const {error, result} = await ApiGetCommentTabCount({
+				productId : this.productId
+			});
+			if(error){
+				return false;
+			}
+			this.tabs = this.tabs.concat(result.filter(i => i.commentCount > 0));
+			
+		},
+
+		async getCount(){
+			const {error, result} = await ApiGetCommentCount({
+				productId : this.productId
+			});
+			if(error){
+				return false;
+			}
+			this.$set(this.tabs[0],'commentCount', result.allCommentCount)
+		},
+		async getProductSatisfaction (){
+			const {error, result} = await ApiGetProductSatisfaction({
+				productId : this.productId
+			});
+			if(error){
+				return false;
+			}
+			this.productRate = Number(result.productSatisfaction);
+		},
+		handleCurrentChange(val) {
+			this.pageIndex = val;
+			this.getList();
+		},
+		handleTabChanage(i){
+			if(this.tabActive == i.labelType){
+				return false
+			}
+			this.tabActive = i.labelType;
+			this.pageIndex = 1;
+			this.list = [];
+			this.getList();
+		},
+		handleCommand(val){
+			this.sortActive = val;
+			this.pageIndex = 1;
+			this.list = [];
+			this.getList();
+		},
+		handledContent(){
+			this.pageIndex = 1;
+			this.list = [];
+			this.getList();
+
+		}
+	}	
+}
+</script>
+<style lang="scss" scoped>
+.title {
+	margin-top: 30px;
+    width: 100%;
+	height: 40px;
+	line-height: 40px;
+	background: #f7f7f7;
+	border: 1px solid #f2f2f2;
+	padding: 0 16px;
+	font-size: 14px;
+	font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+	font-weight: 400;
+	color: #666666;
+	display: flex;
+	justify-content: space-between;
+	&--sort{
+		margin-right: 30px;
+		cursor: pointer;
+		&:hover{
+			color: #FF512B;
+		}
+	}
+}
+.ctx{
+	border: 1px solid #f2f2f2;
+	border-top: 0;
+	overflow: hidden;
+	margin-bottom: 40px;
+	&--top{
+		display: flex;
+		&-rate{
+			width: 170px;
+			height: 136px;
+			text-align: center;
+			padding-top: 26px;
+			color: #666;
+			position: relative;
+			b{
+				font-weight: normal;
+				display: block;
+   				height: 14px;
+			}
+			p{
+				font-size: 40px;
+				height: 40px;
+				line-height: 40px;
+				font-weight: bold;
+				margin-top: 6px;
+			}
+			&::after{
+				content: '';
+				display: block;
+				height: 90px;
+				width: 1px;
+				background: #eee;
+				position: absolute;
+				right: 0;
+				top: 26px;
+			}
+			/deep/.el-rate__icon{
+				margin-right: 0;
+				font-size: 24px;
+			}
+		}
+		&-tabs{
+			margin: 34px 0;
+			padding-left: 40px;
+			display: flex;
+			align-items: center;
+			span{
+				display: inline-block;
+				height: 24px;
+				line-height: 22px;
+				border: 1px solid #eee;
+				color: #999;
+				padding: 0 12px;
+				font-size: 12px;
+				border-radius: 4px;
+				margin-right: 16px;
+				cursor: pointer;
+				&.active{
+					background: #FF6A19;
+					border-color: #FF6A19;
+					color: #fff;
+				}
+			}
+		}
+	}
+}
+.loading,.more{
+	color: #999;
+	text-align: center;
+	margin-bottom: 40px;
+}
+.more{
+	cursor: pointer;
+}
+
+.pagination {
+    margin: 50px 0;
+    /deep/.el-pager {
+      margin-left: 8px;
+    }
+
+    /deep/button,
+    /deep/.number,
+    /deep/.btn-quicknext,
+    /deep/.btn-quickprev {
+      width: 32px;
+      height: 32px;
+      text-align: center;
+      line-height: 32px;
+      margin-left: 8px;
+      border-radius: 2px 2px 2px 2px;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      font-size: 14px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    /deep/.active {
+      background: #ff512b;
+      color: #fff;
+    }
+  }
+</style>

pages/goods/detail/module/HeaderBar.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-06-25 07:24:32
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-29 14:19:36
+ * @Description: file content
+-->
+<template>
+	<div class="header">
+		<div class="header--layout">
+			<ul>
+				<li @click="handleJump('detail')" :class="{'active': tabKey =='detail'}">商品详情</li>
+				<li @click="handleJump('comment')" :class="{'active': tabKey =='comment'}">商品评价</li>
+			</ul>
+			<UiButton @click="handleAddCart">加入购物车</UiButton>
+		</div>
+	</div>
+</template>
+<script>
+import UiButton from '@/components/UiButton.vue'
+export default {
+	components: { UiButton },
+	props:{
+		tabKey : {
+			type : String,
+			default : 'detail'
+		}
+	},
+	data(){
+		return {}
+	},
+	methods:{
+		handleJump(val){
+			this.$emit('jump', val)
+		},
+		handleAddCart(){
+			this.$emit('addCart')
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.header{
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 70px;
+	background: #fff;
+	z-index: 11;
+	&--layout{
+  		@include layout-box;
+		padding-left: 256px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 100%;
+		ul{
+			display: flex;
+			font-size: 16px;
+			li{
+				margin-right: 50px;
+				height: 70px;
+    			line-height: 70px;
+				&.active{
+					color: #FF6A19;
+					position: relative;
+					&::after{
+						display: block;
+						content: '';
+						position: absolute;
+						height: 2px;
+						width: 40px;
+						background: #FF6A19;
+						bottom: 0;
+						left: 50%;
+						transform: translateX(-50%);
+					}
+				}
+			}
+		}
+	}
+}
+</style>

pages/order/submit/index.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:30:58
  * @LastEditors: ch
- * @LastEditTime: 2022-05-27 19:54:39
+ * @LastEditTime: 2022-06-30 11:19:15
  * @Description: file content
 -->
 
@@ -12,11 +12,17 @@
 			<h3 class="title">收货地址</h3>
 			<BsAddress v-model="address"/>
 		</template>
-		<!-- <h3 class="title">支付方式</h3>
+		<h3 class="title">支付方式</h3>
 		<div class="pay-type">
-			<el-radio label="微信支付" />
-			<el-radio label="支付宝支付" />
-		</div> -->
+			<el-radio-group v-model="payType">
+				<el-radio label="wx" >
+					<img class="pay-type--wx" src="@/assets/img/order/wx.png"/>
+				</el-radio>
+				<el-radio label="ali" >
+					<img class="pay-type--ali" src="@/assets/img/order/zfb.png"/>
+				</el-radio>
+			</el-radio-group>
+		</div>
 		<h3 class="title">确认商品信息</h3>
 		<OrderInfo :products="orderInfo.products" />
 		<Message :orderInfo="orderInfo" :message.sync="userMessage"/>
@@ -24,7 +30,7 @@
 		<div class="pay">
 			<UiButton radius type="red_panel" @click="submit">立即支付</UiButton>
 		</div>
-		<BsPay :visible.sync="payVisible" :orderId="payOrder.orderId"
+		<BsPay :visible.sync="payVisible" :payType="payType" :orderId="payOrder.orderId"
 			@cancel="cancelPay" @finish="finishPay" />
 	</div>
 </template>
@@ -45,6 +51,7 @@ export default {
 			orderInfo : {},
 			userMessage : '',
 			payOrder : {},
+			payType : 'wx',
 			payVisible : false,
 			payTimerTxt : '',
 			payTimerStop : null,
@@ -102,7 +109,7 @@ export default {
 				return false;
 			}
 			const {error, result} = await ApiPostSubmitOrder({
-				orderSource :  4,
+				orderSource :  6,
 				recipientAddressId : this.address.id,
 				isVirtual :this.productType == 2 && true,
 				shoppingCartIds : query.ids ? query.ids.split(',') : [],
@@ -165,6 +172,12 @@ export default {
 .pay-type{
 	border: 1px solid #DDDDDD;
 	padding: 30px 70px;
+	&--wx{
+		width: 130px;
+	}
+	&--ali{
+		width:92px
+	}
 }
 .pay{
 	text-align: right;

plugins/api/comment.js

@@ -0,0 +1,86 @@
+/*
+ * @Author: ch
+ * @Date: 2022-06-20 11:38:48
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-30 11:48:53
+ * @Description: file content
+ */
+
+import {axiosTk} from "../axiosTk";
+import {axios} from "../axios";
+import { ToAsyncAwait } from "../utils";
+import ENV from '../config/env';
+
+const BASE_URL = `${ENV.base_url}/mall/comment`;
+
+/**
+ * 根据商品获取评论列表未
+ * @param {*} param0 
+ */
+export const ApiGetCommentList = (params) => 
+	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/comment`, {
+		params,
+		headers: {
+			notVerifyToken : true
+		}
+	}));
+
+/**
+ * 根据商品获取评论总数
+ * @param {*} param0 
+ */
+export const ApiGetCommentCount = ({productId}) => 
+	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/comment/getAllCommentCountByProductId/${productId}`,{
+		headers: {
+			notVerifyToken : true
+		}
+	}));
+/**
+ * 根据商品获取标签评论总数
+ * @param {*} param0 
+ */
+export const ApiGetCommentTabCount = ({productId}) => 
+	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/comment/listCommentLabel/${productId}`,{
+		headers: {
+			notVerifyToken : true
+		}
+	}));
+/**
+ * 获取订单评论详情
+ * @param {*} param0 
+ */
+export const ApiGetOrderCommentDetail = ({orderId}) => 
+	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/comment/listOrderCommentByOrderId/${orderId}`));
+/**
+ * 获取商品满意度
+ * @param {*} param0 
+ */
+export const ApiGetProductSatisfaction = ({productId}) => 
+	ToAsyncAwait(axios.get(`${BASE_URL}/app/comment/getProductSatisfaction/${productId}`));
+/**
+ * 获取评论详情
+ * @param {*} param0 
+ */
+export const ApiGetCommentDetail = ({commentId}) => 
+	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/comment/getCommentDetail/${commentId}`, {
+		headers: {
+			notVerifyToken : true
+		}
+	}));
+/**
+ * 新增评论
+ * @param {*} param0 
+ */
+export const ApiPostComment = (data) => 
+	ToAsyncAwait(axiosTk.post(`${BASE_URL}/app/comment`, data));
+
+
+/**
+ * 更新评论有用数
+ * @param {*} param0 
+ */
+export const ApiPutCommentUseful = (data) => 
+	ToAsyncAwait(axiosTk.put(`${BASE_URL}/app/comment/updateUsefulCount`, data));
+
+
+

plugins/api/order.js

@@ -4,7 +4,7 @@
  * @Author: ch
  * @Date: 2022-05-04 18:17:25
  * @LastEditors: ch
- * @LastEditTime: 2022-05-09 11:07:28
+ * @LastEditTime: 2022-06-28 09:56:23
  * @Description: file content
  */
 import {axiosTk} from "../axiosTk";
@@ -49,6 +49,12 @@ export const  ApiGetOrderDetail = (id) =>
 export const  ApiGetOrderProductDetail = ({orderProductId}) =>
 	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/product/${orderProductId}`));
 
+/**
+ * 获取待评价订单详请列表
+ */
+export const ApiGetCommentOrderDetailList = (params) => 
+	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/listOrderProductWaitComment`,{params}))
+
 /**
 * 提交订单
 * @param {*} data 

plugins/api/pay.js

@@ -0,0 +1,26 @@
+/*
+ * @Author: ch
+ * @Date: 2022-05-08 00:44:22
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-29 14:51:00
+ * @Description: file content
+ */
+
+
+import {axiosTk} from "../axiosTk";
+import {ToAsyncAwait} from "@/plugins/utils";
+import ENV from '../config/env';
+
+const BASE_URL = `${ENV.base_url}/mall/trade`;
+/**
+ * 获取微信支付二维码
+ * @param {*} data 
+ */
+export const ApiPostWxPayCdoeImg = (data) => 
+	ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/wxPay/nativeData`, data));
+/**
+ * 获取支付宝支付二维码
+ * @param {*} data 
+ */
+export const ApiPostAliPayCdoeImg = (data) => 
+	ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/aliPay/qr`, data));

plugins/api/wx.js

@@ -1,17 +0,0 @@
-/*
- * @Author: ch
- * @Date: 2022-05-08 00:44:22
- * @LastEditors: ch
- * @LastEditTime: 2022-05-08 00:47:55
- * @Description: file content
- */
-
-
-import {axiosTk} from "../axiosTk";
-import {ToAsyncAwait} from "@/plugins/utils";
-import ENV from '../config/env';
-
-const BASE_URL = `${ENV.base_url}/mall/trade`;
-
-export const ApiPostPayCdoeImg = (data) => 
-	ToAsyncAwait(axiosTk.post(`${BASE_URL}/pay/wxPay/nativeImage`, data));

plugins/axiosTk.js

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:11:07
  * @LastEditors: ch
- * @LastEditTime: 2022-06-10 14:26:57
+ * @LastEditTime: 2022-06-29 16:01:55
  * @Description: file content
  */
 import { CreateUUID } from "@/plugins/utils";
@@ -23,10 +23,12 @@ export default function ({$axios, store, route, req}, inject) {
 	$axiosTk.defaults.timeout = 3000;
 	$axiosTk.onRequest( config =>{
 		config.headers.uid = uuid;
-		if(!store.state.token){
+		if(!store.state.token && !config.headers.notVerifyToken){
 			location.href = '/';
 			return Promise.reject({message : '要先登录才能操作哦~'});
 		}
+			
+		delete config.headers.notVerifyToken;
 		config.headers.Authorization = store.state.token;
 		return config;
 	});