You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

order-evaluate-product.vue 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  1. <!-- 订单-评价 -->
  2. <template>
  3. <!-- 1,4 -->
  4. <!-- 产品 -->
  5. <view class="card" style="padding: 40rpx 30rpx;">
  6. <view class="title">{{state.orderInfo.productName}}</view>
  7. <evaluate-star v-model="state.product.score" title="评价得分"></evaluate-star>
  8. <textarea class="input-box" v-model="state.product.content" placeholder-class="text-hint" :maxlength="500"
  9. style="height: 260rpx;" placeholder="从多角度评价,可以帮助我们提升服务质量。">
  10. </textarea>
  11. <view class="upload-img">
  12. <form-image @backImg="backImg($event)" @removeImg="removeImg" :isUrl="false" style="width: 100%;" :retract="-15"></form-image>
  13. </view>
  14. </view>
  15. <!-- 权益产品评价 -->
  16. <view class="card" v-if='state.haveInterestsProduct' style="padding: 40rpx 30rpx;">
  17. <view class="title">权益产品评价</view>
  18. <evaluate-star v-model="state.interest.score" title="评价得分"></evaluate-star>
  19. <textarea class="input-box" v-model="state.interest.content" placeholder-class="text-hint" :maxlength="500"
  20. style="height: 260rpx;" placeholder="从多角度评价,可以帮助我们提升服务质量。">
  21. </textarea>
  22. <view class="upload-img">
  23. <form-image @backImg="backImgInterest($event)" @removeImg="removeImgInterest" :isUrl="false" style="width: 100%;" :retract="-15"></form-image>
  24. </view>
  25. </view>
  26. <view class="btn">
  27. <submit-button @submit="publish" title="发布"></submit-button>
  28. </view>
  29. <!-- 选择标签弹窗 -->
  30. <u-popup v-model="state.showTagPop" mode="bottom" height="60%">
  31. <view v-if="state.showTagPop">
  32. <tag-popup :selTags="state.user.tagList" :tagAllList="state.tagAllList" @cancel="state.showTagPop = !state.showTagPop" @confirm="confirmSelectTag"></tag-popup>
  33. </view>
  34. </u-popup>
  35. </template>
  36. <script setup lang="ts">
  37. import evaluateStar from "./components/evaluate-star.vue"
  38. import {reactive} from "vue";
  39. import {confirm, isBlank, msg} from "@/utils/utils";
  40. import tagPopup from "./components/popup-order-evaluate-tag";
  41. import { request } from "@/utils/network/request";
  42. import { orderDetail, orderEvaluate,orderEvaluateTag,saleMessage,addEvaluation,judageQuanProduct } from "@/utils/network/api";
  43. import {onLoad} from "@dcloudio/uni-app";
  44. import { stringToJson } from "@/utils/network/encryption";
  45. import { getItem, StorageKeys } from "@/utils/storage";
  46. const state = reactive({
  47. orderInfo:{} as any, //订单信息
  48. showTagPop: false, //显示标签选择弹窗
  49. product: { //产品
  50. score: 0, //星级得分 最高5分,0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评(必选)
  51. content: '', //评价内容
  52. imageList: [], //支持拍照上传最多上传9张
  53. },
  54. interest: { //产品
  55. score: 0, //星级得分 最高5分,0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评(必选)
  56. content: '', //评价内容
  57. imageList: [], //支持拍照上传最多上传9张
  58. },
  59. user: { //业务员
  60. score: 0, //星级得分 最高5分,0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评(必选)
  61. content: '', //评价内容
  62. tagList: [], //已选择的评价标签列表
  63. },
  64. tagAllList:[],
  65. orderId:"",
  66. haveInterestsProduct:false, //是否有权益产品
  67. })
  68. /* 确认选择tag */
  69. const confirmSelectTag = (selectTag) => {
  70. state.showTagPop = !state.showTagPop
  71. state.user.tagList = [...selectTag];
  72. }
  73. //选择图片
  74. const backImg = (e: any) => {
  75. state.product.imageList = e;
  76. }
  77. //删除图片
  78. const removeImg = (imgList) => {
  79. state.product.imageList = imgList
  80. }
  81. //选择图片权益产品
  82. const backImgInterest = (e: any) => {
  83. state.interest.imageList = e;
  84. }
  85. //删除图片
  86. const removeImgInterest = (imgList) => {
  87. state.interest.imageList = imgList
  88. }
  89. /* 删除评价标签 */
  90. const removeTag = (item: any) => {
  91. state.user.tagList.map((tag, index) => {
  92. if (tag.id === item.id) {
  93. state.user.tagList.splice(index, 1)
  94. }
  95. })
  96. }
  97. /* 发布 */
  98. const publish = (e) => {
  99. addProduct();
  100. }
  101. const addProduct=()=>{
  102. if (state.product.score === 0) {
  103. msg('请对产品进行打分!');
  104. return;
  105. }
  106. //若不填评价内容,根据打分规则自动填充评价内容
  107. //差评展示:默认差评 2.5分及以下
  108. //中评展示:默认中评 2.5以上4.0以下
  109. //好评展示:默认好评 4.0及4.0以上
  110. if (!state.product.content) {
  111. if (state.product.score <= 2.5) {
  112. state.product.content = "默认差评";
  113. } else if (state.product.score > 2.5 && state.product.score < 4) {
  114. state.product.content = "默认中评";
  115. } else {
  116. state.product.content = "默认好评";
  117. }
  118. }
  119. const options = {
  120. type: 2,
  121. data: {
  122. "orderId":state.orderId,
  123. "serviceType":"product",
  124. "score":state.product.score,
  125. "pictureUrl":state.product.imageList.join(";"),
  126. "message":'',
  127. "suggestion":state.product.content
  128. },
  129. method: 'POST',
  130. showLoading: true,
  131. }
  132. console.log("options",options)
  133. debugger;
  134. request(addEvaluation,options).then((res)=>{
  135. if(state.haveInterestsProduct){
  136. addProductInterest();
  137. }else{
  138. confirm('您的评价已发布成功!',()=>{
  139. uni.$emit('refreshOrder');
  140. uni.navigateBack();
  141. },'发布成功',false);
  142. }
  143. })
  144. }
  145. const addProductInterest=()=>{
  146. if (state.interest.score === 0) {
  147. msg('请对权益产品进行打分!');
  148. return;
  149. }
  150. //若不填评价内容,根据打分规则自动填充评价内容
  151. //差评展示:默认差评 2.5分及以下
  152. //中评展示:默认中评 2.5以上4.0以下
  153. //好评展示:默认好评 4.0及4.0以上
  154. if (!state.interest.content) {
  155. if (state.interest.score <= 2.5) {
  156. state.interest.content = "默认差评";
  157. } else if (state.interest.score > 2.5 && state.interest.score < 4) {
  158. state.interest.content = "默认中评";
  159. } else {
  160. state.interest.content = "默认好评";
  161. }
  162. }
  163. const options = {
  164. type: 2,
  165. data: {
  166. "orderId":state.orderId,
  167. "serviceType":"equity",
  168. "score":state.interest.score,
  169. "pictureUrl":state.interest.imageList.join(";"),
  170. "message":'',
  171. "suggestion":state.interest.content
  172. },
  173. method: 'POST',
  174. showLoading: true,
  175. }
  176. console.log("options",options)
  177. request(addEvaluation,options).then((res)=>{
  178. confirm('您的评价已发布成功!',()=>{
  179. uni.$emit('refreshOrder');
  180. uni.navigateBack();
  181. },'发布成功',false);
  182. })
  183. }
  184. /* 获取业务员标签ID */
  185. const getTagIds = () => {
  186. const list = [];
  187. state.user.tagList.map((tag)=>{
  188. list.push(tag.id);
  189. });
  190. return list;
  191. }
  192. // 获取是否有权益产品
  193. const isInterestsProduct=(orderId)=>{
  194. const options = {
  195. type: 2,
  196. data: {"orderId": orderId},
  197. method: 'POST',
  198. showLoading: true,
  199. }
  200. request(judageQuanProduct, options).then((res) => {
  201. console.log("获取是否有业务员",stringToJson(res.bizContent))
  202. state.haveInterestsProduct = stringToJson(res.bizContent);
  203. })
  204. }
  205. /* 获取订单详情 */
  206. const getOrderDetails = (id) => {
  207. const options = {
  208. type: 2,
  209. data: {"id": id},
  210. method: 'POST',
  211. showLoading: true,
  212. }
  213. request(orderDetail, options).then((res) => {
  214. console.log("获取订单详情",stringToJson(res.bizContent))
  215. state.orderInfo = stringToJson(res.bizContent);
  216. })
  217. }
  218. onLoad((option) => {
  219. getOrderDetails(option.id);
  220. state.orderId=option.orderId
  221. isInterestsProduct(option.orderId); //获取是否有权益产品
  222. })
  223. </script>
  224. <style>
  225. page {
  226. background-color: #EEF7F7;
  227. padding-bottom: 50rpx;
  228. }
  229. </style>
  230. <style lang="scss" scoped>
  231. .card {
  232. background-color: white;
  233. border-radius: 20rpx;
  234. box-shadow: 0px 0px 6rpx 2rpx rgba(223, 223, 223, 0.3);
  235. margin: 30rpx;
  236. .title {
  237. text-align: center;
  238. font-size: 32rpx;
  239. color: #333333;
  240. padding-bottom: 30rpx;
  241. }
  242. .upload-img {
  243. margin-top: 10rpx;
  244. }
  245. .rate {
  246. .rate-label {
  247. font-size: 28rpx;
  248. color: #333333;
  249. padding-right: 20rpx;
  250. }
  251. }
  252. .input-box {
  253. width: 100%;
  254. border: 1px solid #DCDCDC;
  255. border-radius: 10rpx;
  256. background-color: #F3F3F3;
  257. padding: 30rpx;
  258. box-sizing: border-box;
  259. -moz-box-sizing: border-box;
  260. /*Firefox*/
  261. -webkit-box-sizing: border-box;
  262. /*Safari*/
  263. margin-top: 30rpx;
  264. }
  265. .text-hine {
  266. color: #999999;
  267. font-size: 26rpx;
  268. }
  269. .title1 {
  270. font-size: 30rpx;
  271. color: #333333;
  272. border-bottom: 1px solid #DCDCDC;
  273. padding: 30rpx;
  274. }
  275. .user {
  276. margin-bottom: 40rpx;
  277. .avatar {
  278. width: 140rpx;
  279. height: 160rpx;
  280. background-color: #F3F3F3;
  281. border-radius: 10rpx;
  282. }
  283. .user-info {
  284. margin-left: 40rpx;
  285. margin-top: 28rpx;
  286. .name {
  287. font-size: 28rpx;
  288. color: #333333;
  289. &:last-child {
  290. margin-top: 40rpx;
  291. }
  292. }
  293. }
  294. }
  295. .center {
  296. margin-top: 40rpx;
  297. padding-bottom: 20rpx;
  298. border-bottom: 1rpx solid #DCDCDC;
  299. .tags {
  300. flex-wrap: wrap;
  301. .tag {
  302. border-radius: 28rpx;
  303. background-color: #F3F3F3;
  304. padding: 0rpx 20rpx;
  305. border: 1px solid #DCDCDC;
  306. margin-right: 18rpx;
  307. margin-bottom: 15rpx;
  308. color: #333333;
  309. font-size: 26rpx;
  310. display: flex;
  311. flex-direction: row;
  312. justify-content: center;
  313. align-items: center;
  314. height: 57rpx;
  315. &:last-child {
  316. margin-right: 0rpx;
  317. margin-bottom: 0px;
  318. }
  319. .tag-close {
  320. width: 32rpx;
  321. height: 32rpx;
  322. margin-left: 15rpx;
  323. }
  324. }
  325. }
  326. }
  327. }
  328. .btn {
  329. margin: 60rpx 40rpx 0rpx;
  330. }
  331. </style>