userCenterMyOrderEvaluate.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <template>
  2. <div class="userCenterMyOrderEvaluate">
  3. <div class="title">
  4. {{ $i18n.locale == 'zh' ? '订单评价' : 'Order evaluate' }}
  5. </div>
  6. <div class="orderMessage">
  7. <div class="header">
  8. <span>
  9. {{ $i18n.locale === 'zh' ? '商品信息' : 'Product information' }}
  10. </span>
  11. </div>
  12. <div class="content">
  13. <el-table
  14. :data="[orderDetail]"
  15. style="width: 100%"
  16. :header-cell-style="{ backgroundColor: '#f8f8f8' }"
  17. >
  18. <el-table-column
  19. prop="commodityName"
  20. align="center"
  21. :label="$i18n.locale === 'zh' ? '商品名称' : 'Commodity Name'"
  22. width="200"
  23. >
  24. <!-- <template slot-scope="scope">
  25. <div>
  26. <span style="font-weight: 600">{{ scope.row.tradeName }}</span>
  27. </div>
  28. <div>
  29. {{ $i18n.locale === "zh" ? "规格:" : "specifications: "
  30. }}{{ scope.row.specifications }}
  31. </div>
  32. <div>
  33. {{ $i18n.locale === "zh" ? "下单时间:" : "order time: "
  34. }}{{ scope.row.orderTime | time("YYYY-MM-DD HH:mm:ss") }}
  35. </div>
  36. </template> -->
  37. </el-table-column>
  38. <el-table-column
  39. prop="point"
  40. align="center"
  41. :label="$i18n.locale === 'zh' ? '积分' : 'Integral'"
  42. width="200"
  43. >
  44. </el-table-column>
  45. <el-table-column
  46. prop="exchangeQuantity"
  47. align="center"
  48. :label="$i18n.locale === 'zh' ? '数量' : 'Number'"
  49. width="200"
  50. >
  51. </el-table-column>
  52. <el-table-column
  53. align="center"
  54. :label="$i18n.locale === 'zh' ? '创建时间' : 'Create Time'"
  55. width="200"
  56. >
  57. <template slot-scope="scope">
  58. <div>
  59. {{ orderDetail.createDate | time('YYYY-MM-DD HH:mm:ss') }}
  60. </div>
  61. </template>
  62. </el-table-column>
  63. <el-table-column
  64. prop="point"
  65. align="center"
  66. :label="$i18n.locale === 'zh' ? '实付积分' : 'Pay Points'"
  67. width="184"
  68. >
  69. </el-table-column>
  70. </el-table>
  71. </div>
  72. </div>
  73. <div class="orderEvaluate">
  74. <div class="header">
  75. <span>
  76. {{ $i18n.locale === 'zh' ? '商品评价' : 'Evaluate' }}
  77. </span>
  78. </div>
  79. <div class="content">
  80. <el-form :model="evaluate" label-width="135px">
  81. <el-form-item
  82. :label="$i18n.locale === 'zh' ? '商品打分' : 'Commodity Score'"
  83. >
  84. <el-radio-group v-model="evaluate.resource">
  85. <el-radio label="1">{{
  86. $i18n.locale === 'zh' ? '一星' : 'One Star'
  87. }}</el-radio>
  88. <el-radio label="2">{{
  89. $i18n.locale === 'zh' ? '二星' : 'Two Star'
  90. }}</el-radio>
  91. <el-radio label="3">{{
  92. $i18n.locale === 'zh' ? '三星' : 'Three Star'
  93. }}</el-radio>
  94. <el-radio label="4">{{
  95. $i18n.locale === 'zh' ? '四星' : 'Four Star'
  96. }}</el-radio>
  97. <el-radio label="5">{{
  98. $i18n.locale === 'zh' ? '五星' : 'Five Star'
  99. }}</el-radio>
  100. </el-radio-group>
  101. </el-form-item>
  102. <el-form-item
  103. :label="$i18n.locale === 'zh' ? '评价内容' : 'Evaluation Content'"
  104. >
  105. <el-input type="textarea" v-model="evaluate.desc"></el-input>
  106. </el-form-item>
  107. <el-form-item>
  108. <el-button @click="cancel">{{
  109. $i18n.locale === 'zh' ? '取消' : 'Cancel'
  110. }}</el-button>
  111. <el-button type="primary" @click="onSubmit">
  112. {{ $i18n.locale === 'zh' ? '发布' : 'Publish' }}
  113. </el-button>
  114. </el-form-item>
  115. </el-form>
  116. </div>
  117. </div>
  118. </div>
  119. </template>
  120. <script>
  121. import moment from 'moment'
  122. import { getToken } from '@/api/token'
  123. import { orderDetails, orderReview } from '@/api/user'
  124. export default {
  125. name: 'userCenterMyOrderEvaluate',
  126. data() {
  127. return {
  128. userOrder: this.$route.query.key,
  129. evaluate: {
  130. resource: '',
  131. desc: '',
  132. checked: '',
  133. },
  134. orderDetail: [],
  135. }
  136. },
  137. filters: {
  138. time(date, type) {
  139. return moment(date).format(type)
  140. },
  141. },
  142. mounted() {
  143. this.toGetOrderDetails()
  144. },
  145. methods: {
  146. // 获取订单详情
  147. toGetOrderDetails() {
  148. let orderId = this.userOrder.id
  149. orderDetails(orderId)
  150. .then((res) => {
  151. this.orderDetail = res.data.order
  152. console.log(this.orderDetail, '商品评论')
  153. })
  154. .catch((error) => {})
  155. },
  156. // 提交
  157. onSubmit() {
  158. let params = {
  159. commodityId: this.orderDetail.commodityId, // 商品id
  160. orderId: this.userOrder.id, // 订单id
  161. commodityMark: this.evaluate.resource, // 星级
  162. comment: this.evaluate.desc, // 评价内容
  163. }
  164. let orderNo = this.orderDetail.orderNo
  165. console.log(params)
  166. getToken().then((res) => {
  167. orderReview(
  168. JSON.stringify(params),
  169. JSON.stringify(orderNo),
  170. res.data
  171. ).then((res) => {
  172. console.log(res)
  173. })
  174. })
  175. if (this.$i18n.locale === 'zh') {
  176. this.$message.success('发布成功')
  177. } else {
  178. this.$message.success('Publish successfully')
  179. }
  180. this.$router.push('userCenterMyOrder')
  181. },
  182. // 取消
  183. cancel() {
  184. this.$router.push('userCenterMyOrder')
  185. },
  186. },
  187. }
  188. </script>
  189. <style scoped lang="less">
  190. .userCenterMyOrderEvaluate {
  191. width: 100%;
  192. background: #fff;
  193. min-height: 800px;
  194. .title {
  195. height: 60px;
  196. line-height: 60px;
  197. padding-top: 30px;
  198. margin-left: 30px;
  199. margin-right: 30px;
  200. border-bottom: 1px solid rgba(228, 228, 228, 1);
  201. }
  202. .orderMessage {
  203. .header {
  204. width: 100%;
  205. height: 60px;
  206. padding-left: 30px;
  207. box-sizing: border-box;
  208. background-color: #e4e4e4;
  209. span {
  210. font-size: 14px;
  211. line-height: 60px;
  212. }
  213. }
  214. }
  215. .orderEvaluate {
  216. margin-top: 20px;
  217. .header {
  218. width: 100%;
  219. height: 60px;
  220. padding-left: 30px;
  221. box-sizing: border-box;
  222. background-color: #e4e4e4;
  223. span {
  224. font-size: 14px;
  225. line-height: 60px;
  226. }
  227. }
  228. .content {
  229. margin-top: 10px;
  230. }
  231. }
  232. }
  233. </style>