appraise.vue 8.8 KB

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