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-salesman.vue 9.9KB

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