appraise.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <view class="one_1">
  6. <view class="text1">{{info.goods.name}}{{info.specs[0].name}}</view>
  7. <view class="text2">好评率 <text>{{info.rate||100}}%</text></view>
  8. </view>
  9. <view class="one_2">
  10. <view class="one_2_1" v-for="(item,index) in btnlist" :key="index" @tap="toSelect(item)">
  11. <text>{{item.name}}</text><text>({{item.total||0}})</text>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="two">
  16. <scroll-view scroll-y="true" class="scroll-view">
  17. <view class="list-scroll-view">
  18. <view class="list" v-for="(item, index) in list" :key="index">
  19. <image v-if="item.customer.icon&&item.customer.icon.length>0" class="image"
  20. :src="item.customer.icon&&item.customer.icon.length>0?item.customer.icon[0].url:''"
  21. mode="">
  22. </image>
  23. <text v-else class="iconfont icon-top"></text>
  24. <view class="list_1">
  25. <view class="other">
  26. <text>{{item.customer.phone}}</text>
  27. <text>{{item.reply[0].time||'暂无'}}</text>
  28. </view>
  29. <view class="flie">
  30. <view v-for="(tag, indexs) in item.reply[0].file" :key="indexs">
  31. <image @click="toLarge(item,indexs)" class="images" :src="tag.url" mode="">
  32. </image>
  33. </view>
  34. </view>
  35. <view class="stars">
  36. <uni-rate size="18" :readonly="true" :value="item.goods_score" />
  37. </view>
  38. <view class="other1"><text>{{item.reply[0].content||'暂无'}}</text></view>
  39. <view class="other2">规格:{{item.goodsSpec.name}}</view>
  40. <view class="other2" v-for="(itm, indexx) in item.reply" :key="indexx">
  41. <view class="other2_1">
  42. <view :class="[item.customer._id!=user._id?'reply_2':'reply']">
  43. <text>用户评论:{{itm.content||'暂无'}}</text>
  44. <text v-if="itm.reply">商家回复:{{itm.reply||'暂无'}}</text>
  45. </view>
  46. <view v-if="item.customer._id==user._id" @tap="toReply(item,indexx)">回复</view>
  47. </view>
  48. <uni-easyinput
  49. v-if="reply.reply&&reply.customer._id==user._id&&reply._id==item._id&&reply.index==indexx"
  50. class="input" maxlength=-1 type="textarea" @change="confirm"
  51. placeholder="评论" />
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. </scroll-view>
  57. </view>
  58. </view>
  59. </mobile-frame>
  60. </template>
  61. <script>
  62. import moment from 'moment';
  63. export default {
  64. data() {
  65. return {
  66. id: '',
  67. user: {},
  68. btnlist: [{
  69. name: '全部好评',
  70. total: 0,
  71. code: '0'
  72. },
  73. {
  74. name: '好评',
  75. total: 0,
  76. code: '1'
  77. },
  78. {
  79. name: '中评',
  80. total: 0,
  81. code: '2'
  82. },
  83. {
  84. name: '差评',
  85. total: 0,
  86. code: '3'
  87. }
  88. ],
  89. info: {},
  90. list: [],
  91. total: 0,
  92. skip: 0,
  93. limit: 6,
  94. page: 0,
  95. one: [],
  96. two: [],
  97. thr: [],
  98. // 回复数据
  99. reply: {},
  100. // 列表
  101. code: ''
  102. };
  103. },
  104. onLoad: function(e) {
  105. const that = this;
  106. that.$set(that, `id`, e.id || '');
  107. that.watchLogin()
  108. },
  109. methods: {
  110. async confirm(e) {
  111. const that = this;
  112. if (e) {
  113. let reply = that.reply
  114. let obj = {
  115. content: e,
  116. time: moment().format('YYYY-MM-DD HH:mm:ss')
  117. }
  118. reply.reply.push(obj)
  119. const arr = await that.$api(`/goodsRate/${that.reply._id}`, 'POST', reply)
  120. if (arr.errcode == '0') {
  121. uni.showToast({
  122. title: `回复成功`,
  123. icon: 'success',
  124. });
  125. that.$set(that, `reply`, {});
  126. } else {
  127. uni.showToast({
  128. title: arr.errmsg,
  129. icon: 'none',
  130. })
  131. }
  132. } else {
  133. that.$set(that, `reply`, {});
  134. }
  135. },
  136. // 回复
  137. toReply(e, index) {
  138. const that = this;
  139. that.$set(that, `reply`, e);
  140. that.$set(that.reply, `index`, index);
  141. },
  142. // 放大
  143. toLarge(e, index) {
  144. let url = e.reply[0].file.map(item => item.url)
  145. uni.previewImage({
  146. current: index,
  147. urls: url
  148. })
  149. },
  150. // 选择
  151. toSelect(e) {
  152. const that = this;
  153. that.$set(that, `code`, e.code);
  154. if (e.code == '0') {
  155. // that.clearPage();
  156. that.search()
  157. } else if (e.code == '1') {
  158. that.$set(that, `list`, that.one);
  159. } else if (e.code == '2') {
  160. that.$set(that, `list`, that.two);
  161. } else {
  162. that.$set(that, `list`, that.thr);
  163. }
  164. },
  165. // 监听用户是否登录
  166. watchLogin() {
  167. const that = this;
  168. uni.getStorage({
  169. key: 'token',
  170. success: function(res) {
  171. let user = that.$jwt(res.data);
  172. that.$set(that, `user`, user);
  173. that.search()
  174. },
  175. fail: function(err) {
  176. uni.reLaunch({
  177. url: `/pages/login/index`
  178. })
  179. }
  180. })
  181. },
  182. // 查询列表
  183. async search() {
  184. const that = this;
  185. let user = that.user;
  186. let res;
  187. res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  188. id: that.id
  189. });
  190. if (res.errcode == '0') {
  191. that.$set(that, `info`, res.data)
  192. }
  193. let info = {
  194. // skip: that.skip,
  195. // limit: that.limit,
  196. goods: that.id
  197. }
  198. res = await that.$api(`/goodsRate`, `GET`, {
  199. ...info,
  200. })
  201. if (res.errcode == '0') {
  202. // let list = [...that.list, ...res.data]
  203. let list = res.data;
  204. for (let val of list) {
  205. val.customer.phone = val.customer.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  206. }
  207. that.$set(that, `list`, list)
  208. that.$set(that, `total`, res.total)
  209. that.$set(that.btnlist[0], `total`, res.total)
  210. let one = list.filter(item => item.goods_score == 5);
  211. that.$set(that, `one`, one)
  212. that.$set(that.btnlist[1], `total`, one.length);
  213. let two = list.filter(item => item.goods_score < 5 && item.goods_score > 2)
  214. that.$set(that, `two`, two)
  215. that.$set(that.btnlist[2], `total`, two.length);
  216. let thr = list.filter(item => item.goods_score <= 2)
  217. that.$set(that, `thr`, thr)
  218. that.$set(that.btnlist[3], `total`, thr.length);
  219. } else {
  220. uni.showToast({
  221. title: res.errmsg,
  222. });
  223. }
  224. },
  225. // 分页
  226. toPage(e) {
  227. const that = this;
  228. let list = that.list;
  229. let limit = that.limit;
  230. if (that.total > list.length) {
  231. uni.showLoading({
  232. title: '加载中',
  233. mask: true
  234. })
  235. let page = that.page + 1;
  236. that.$set(that, `page`, page)
  237. let skip = page * limit;
  238. that.$set(that, `skip`, skip)
  239. that.search();
  240. uni.hideLoading();
  241. } else uni.showToast({
  242. title: '没有更多数据了',
  243. icon: 'none'
  244. });
  245. },
  246. // 清空列表
  247. clearPage() {
  248. const that = this;
  249. that.$set(that, `list`, [])
  250. that.$set(that, `skip`, 0)
  251. that.$set(that, `limit`, 6)
  252. that.$set(that, `page`, 0)
  253. }
  254. }
  255. }
  256. </script>
  257. <style lang="scss">
  258. .main {
  259. display: flex;
  260. flex-direction: column;
  261. width: 100vw;
  262. height: 100vh;
  263. background-color: var(--f1Color);
  264. .one {
  265. margin: 0 0 2vw 0;
  266. .one_1 {
  267. display: flex;
  268. justify-content: space-around;
  269. background-color: var(--mainColor);
  270. margin: 0 0 0.5vw 0;
  271. padding: 2vw;
  272. .text1 {
  273. width: 65vw;
  274. font-size: var(--font16Szie);
  275. }
  276. .text2 {
  277. font-size: var(--font16Szie);
  278. color: var(--f85Color);
  279. text {
  280. margin: 0 0 0 1vw;
  281. color: var(--ff0Color);
  282. }
  283. }
  284. }
  285. .one_2 {
  286. display: flex;
  287. justify-content: space-around;
  288. padding: 2vw;
  289. background-color: var(--mainColor);
  290. }
  291. }
  292. .two {
  293. position: relative;
  294. flex-grow: 1;
  295. .list {
  296. display: flex;
  297. justify-content: space-around;
  298. align-items: flex-start;
  299. background-color: var(--mainColor);
  300. margin: 0 0 2vw 0;
  301. padding: 2vw;
  302. .image {
  303. width: 10vw;
  304. height: 10vw;
  305. border-radius: 10vw;
  306. }
  307. .iconfont {
  308. font-size: 30px;
  309. }
  310. .list_1 {
  311. flex-grow: 1;
  312. width: 85vw;
  313. margin: 0 0 0 2vw;
  314. font-size: var(--font14Size);
  315. .other {
  316. display: flex;
  317. justify-content: space-between;
  318. text:last-child {
  319. font-size: var(--font12Size);
  320. color: var(--f85Color);
  321. }
  322. }
  323. .other1 {
  324. margin: 1vw 0 0 0;
  325. word-break: break-all;
  326. word-wrap: break-word;
  327. }
  328. .flie {
  329. display: flex;
  330. flex-wrap: wrap;
  331. margin: 1vw 0;
  332. .images {
  333. width: 20vw;
  334. height: 20vw;
  335. margin: 0 1vw 0 0;
  336. }
  337. }
  338. .other2 {
  339. font-size: var(--font12Size);
  340. color: var(--f85Color);
  341. margin: 2vw 0 0 0;
  342. .other2_1 {
  343. display: flex;
  344. justify-content: space-between;
  345. }
  346. .reply {
  347. display: flex;
  348. flex-direction: column;
  349. width: 70vw;
  350. word-wrap: break-word;
  351. word-break: break-all;
  352. }
  353. .reply_2 {
  354. display: flex;
  355. flex-direction: column;
  356. word-wrap: break-word;
  357. word-break: break-all;
  358. }
  359. }
  360. }
  361. }
  362. }
  363. }
  364. .scroll-view {
  365. position: absolute;
  366. top: 0;
  367. left: 0;
  368. right: 0;
  369. bottom: 0;
  370. .list-scroll-view {
  371. display: flex;
  372. flex-direction: column;
  373. }
  374. }
  375. </style>