appraise.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. <template>
  2. <mobile-frame>
  3. <view class="info">
  4. <view class="one">
  5. <view class="one_1">
  6. <text>评论商品</text>
  7. </view>
  8. <view class="one_2">
  9. <view class="list" v-for="(item,index) in goodsList" :key="index">
  10. <view class="list_1">
  11. <image class="image"
  12. :src="item.goods.file&&item.goods.file.length>0?item.goods.file[0].url:''" mode="">
  13. </image>
  14. </view>
  15. <view class="list_2">
  16. <view class="name">
  17. {{item.goods_name}}
  18. </view>
  19. <view class="other_1">
  20. <text>规格:</text>
  21. <text>{{item.name}}</text>
  22. </view>
  23. <view class="other_1">
  24. <text>金额:</text>
  25. <text class="money">¥{{info.type=='0'?item.sell_money:item.group_config.money}}</text>
  26. </view>
  27. <view class="other_1">
  28. <text>数量:</text>
  29. <text>×{{item.buy_num}}</text>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="two">
  36. <uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
  37. <uni-forms-item label="评论商品" name="goods">
  38. <picker class="picker" mode="selector" :range="goodsList" @change="goodsChange"
  39. range-key="goods_name">
  40. <view>{{form.goods_name||'请选择评论商品'}}</view>
  41. </picker>
  42. </uni-forms-item>
  43. <uni-forms-item label="评论内容" name="content">
  44. <uni-easyinput maxlength=-1 type="textarea" v-model="form.content" placeholder="请输入评论内容" />
  45. </uni-forms-item>
  46. <uni-forms-item label="上传评论图片" name="file" v-if="readonly==false">
  47. <upload :list="file" name="file" :count="6" @uplSuc="uplSuc" @uplDel="uplDel"></upload>
  48. </uni-forms-item>
  49. <uni-forms-item label="商品评分" name="goods_score">
  50. <uni-rate :readonly="readonly" size="18" v-model="form.goods_score" />
  51. </uni-forms-item>
  52. <uni-forms-item label="发货评分" name="transport_score">
  53. <uni-rate :readonly="readonly" size="18" v-model="form.transport_score" />
  54. </uni-forms-item>
  55. <uni-forms-item label="店铺评分" name="shop_score">
  56. <uni-rate :readonly="readonly" size="18" v-model="form.shop_score" />
  57. </uni-forms-item>
  58. </uni-forms>
  59. <view class="btn">
  60. <button type="primary" @click="onSubmit('form')" size="small">提交</button>
  61. </view>
  62. </view>
  63. </view>
  64. </mobile-frame>
  65. </template>
  66. <script>
  67. import moment from 'moment';
  68. import upload from '@/components/upload/index.vue';
  69. export default {
  70. components: {
  71. upload
  72. },
  73. data() {
  74. return {
  75. id: '',
  76. // 追加
  77. rate_id: '',
  78. user: {},
  79. form: {},
  80. info: {},
  81. file: [],
  82. // 商品
  83. goodsList: [],
  84. rules: {
  85. content: {
  86. rules: [{
  87. required: true,
  88. errorMessage: '请输入评论内容',
  89. }]
  90. },
  91. grade: {
  92. rules: [{
  93. required: true,
  94. errorMessage: '请输入评论等级',
  95. }]
  96. },
  97. goods: {
  98. rules: [{
  99. required: true,
  100. errorMessage: '请选择评论商品',
  101. }]
  102. },
  103. },
  104. readonly: false,
  105. };
  106. },
  107. onLoad: function(e) {
  108. const that = this;
  109. that.$set(that, `id`, e.id || '');
  110. // 监听用户是否登录
  111. that.watchLogin();
  112. },
  113. methods: {
  114. // 监听用户是否登录
  115. watchLogin() {
  116. const that = this;
  117. uni.getStorage({
  118. key: 'token',
  119. success: function(res) {
  120. let user = that.$jwt(res.data);
  121. if (user) that.$set(that, `user`, user);
  122. that.search();
  123. },
  124. fail: function(err) {
  125. uni.navigateTo({
  126. url: `/pages/login/index`
  127. })
  128. }
  129. });
  130. },
  131. // 查询列表
  132. async search() {
  133. const that = this;
  134. let user = that.user;
  135. let res;
  136. if (that.id) {
  137. res = await that.$api(`/orderDetail/${that.id}`);
  138. if (res.errcode == '0') {
  139. that.$set(that, `info`, res.data.order);
  140. for (let val of res.data.goods) val.goods_name = val.goods.name
  141. that.$set(that, `goodsList`, res.data.goods);
  142. uni.hideLoading();
  143. }
  144. }
  145. },
  146. async goodsChange(e) {
  147. const that = this;
  148. let data = that.goodsList[e.detail.value];
  149. if (data) that.$set(that, `goodsList`, [data])
  150. if (data.rate) {
  151. that.$set(that, `rate_id`, data.rate);
  152. let res = await that.$api(`/goodsRate/${data.rate}`);
  153. if (res.errcode == '0') {
  154. that.$set(that, `form`, res.data);
  155. that.$set(that.form, `goods_name`, data.goods_name);
  156. that.$set(that, `readonly`, true)
  157. }
  158. } else {
  159. that.$set(that.form, `goods`, data.goods._id);
  160. that.$set(that.form, `goods_name`, data.goods_name);
  161. that.$set(that.form, `goodsSpec`, data._id);
  162. }
  163. },
  164. // 图片上传
  165. uplSuc(e) {
  166. const that = this;
  167. that.$set(that, `${e.name}`, [...that[e.name], e.data]);
  168. },
  169. // 图片删除
  170. uplDel(e) {
  171. const that = this;
  172. let data = that[e.name];
  173. let arr = data.filter((i, index) => index != e.data.index);
  174. that.$set(that, `${e.name}`, arr)
  175. },
  176. // 提交保存
  177. async onSubmit(ref) {
  178. const that = this;
  179. that.$refs[ref].validate().then(async params => {
  180. if (that.rate_id) {
  181. let reply = that.form;
  182. let obj = {
  183. file: that.file,
  184. content: params.content,
  185. time: moment().format('YYYY-MM-DD HH:mm:ss')
  186. }
  187. reply.reply.push(obj)
  188. const arr = await that.$api(`/goodsRate/${that.rate_id}`, 'POST', reply)
  189. if (arr.errcode == '0') {
  190. uni.showToast({
  191. title: `追加成功`,
  192. icon: 'success',
  193. });
  194. uni.navigateBack({
  195. detail: 1
  196. })
  197. } else {
  198. uni.showToast({
  199. title: arr.errmsg,
  200. icon: 'none',
  201. })
  202. }
  203. } else {
  204. let reply = [{
  205. file: that.file,
  206. content: params.content,
  207. time: moment().format('YYYY-MM-DD HH:mm:ss')
  208. }];
  209. params.orderDetail = that.id
  210. params.reply = reply;
  211. params.customer = that.user?._id;
  212. params.shop = that.info?.goods[0]?.shop;
  213. params.goodsSpec = that.form.goodsSpec;
  214. const arr = await that.$api(`/goodsRate`, 'POST', params);
  215. if (arr.errcode == '0') {
  216. uni.showToast({
  217. title: `评论成功`,
  218. icon: 'success',
  219. });
  220. uni.navigateBack({
  221. detail: 1
  222. })
  223. } else {
  224. uni.showToast({
  225. title: arr.errmsg,
  226. icon: 'none',
  227. })
  228. }
  229. }
  230. })
  231. }
  232. }
  233. }
  234. </script>
  235. <style lang="scss">
  236. .info {
  237. display: flex;
  238. flex-direction: column;
  239. width: 100vw;
  240. height: 100vh;
  241. .one {
  242. margin: 2vw;
  243. border: 1px solid #f1f1f1;
  244. border-radius: 5px;
  245. padding: 2vw;
  246. .one_1 {
  247. margin: 0 0 2vw 0;
  248. text {
  249. font-size: 16px;
  250. font-weight: bold;
  251. }
  252. }
  253. .one_2 {
  254. .list {
  255. display: flex;
  256. background-color: #f1f1f1;
  257. padding: 2vw;
  258. margin: 0 0 2vw 0;
  259. border-radius: 5px;
  260. .list_1 {
  261. width: 22vw;
  262. height: 22vw;
  263. border-radius: 5px;
  264. .image {
  265. width: 100%;
  266. height: 100%;
  267. border-radius: 5px;
  268. }
  269. }
  270. .list_2 {
  271. width: 63vw;
  272. padding: 0 0 0 2vw;
  273. .name {
  274. font-size: 16px;
  275. font-weight: bold;
  276. margin: 0 0 0.5vw 0;
  277. }
  278. .other_1 {
  279. .money {
  280. color: #ff0000 !important;
  281. }
  282. text {
  283. font-size: 13px;
  284. color: #858585;
  285. }
  286. text:last-child {
  287. color: #000000;
  288. }
  289. }
  290. }
  291. }
  292. .list:last-child {
  293. margin: 0;
  294. }
  295. }
  296. }
  297. .two {
  298. padding: 2vw;
  299. .picker {
  300. width: 100%;
  301. border: 1px solid #3333;
  302. border-radius: 5px;
  303. padding: 2vw;
  304. }
  305. .uni-input {
  306. border: #f1f1ff 1px solid;
  307. padding: 2vw 2vw;
  308. border-radius: 1vw;
  309. }
  310. .btn {
  311. text-align: center;
  312. button {
  313. margin: 0 2vw 2vw 2vw;
  314. background-color: var(--ff0Color);
  315. color: var(--fffColor);
  316. }
  317. .name {
  318. color: var(--f85Color);
  319. font-size: var(--font14Size);
  320. }
  321. }
  322. }
  323. }
  324. .uni-forms-item {
  325. margin-bottom: 6vw !important;
  326. display: flex;
  327. flex-direction: row;
  328. }
  329. .uni-forms-item__content {
  330. display: flex;
  331. align-items: center;
  332. }
  333. </style>