userCenterMyOrderDetails.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523
  1. <template>
  2. <div class="userCenterMyOrderDetails">
  3. <div class="title">
  4. {{ $i18n.locale == 'zh' ? '订单详情' : 'Order Details' }}
  5. </div>
  6. <div class="backButton" @click="voteback">
  7. {{ $i18n.locale == 'zh' ? '返回' : 'Return' }}
  8. </div>
  9. <div class="orderDetails">
  10. <div class="header">
  11. <span>
  12. {{ $i18n.locale === 'zh' ? '订单编号' : 'OrderID' }}:{{
  13. orderDetail.orderNo
  14. }}
  15. </span>
  16. <span style="margin-left: 20px">
  17. {{ $i18n.locale === 'zh' ? '下单时间' : 'Order Time' }}:{{
  18. orderDetail.createDate | time('YYYY-MM-DD HH:mm:ss')
  19. }}
  20. </span>
  21. <span style="margin-left: 290px" v-if="userOrder.orderStatus == '0'"
  22. ><el-button @click="alterAddress">{{
  23. $i18n.locale === 'zh' ? '修改地址' : 'Modify Address'
  24. }}</el-button>
  25. <!-- <el-button @click="cancelOrder">{{
  26. $i18n.locale === 'zh' ? '取消订单' : 'Cancel Order'
  27. }}</el-button> -->
  28. </span>
  29. </div>
  30. <div class="content">
  31. <div class="row">
  32. <div style="width: 640px">
  33. {{ $i18n.locale === 'zh' ? '兑换人' : 'Exchanger' }}:{{
  34. orderDetail.userName
  35. }}
  36. </div>
  37. <div style="width: 150px">
  38. {{ $i18n.locale === 'zh' ? '礼品类型' : 'Gift Type' }}
  39. </div>
  40. <div style="flex: 1">
  41. {{ determineCommodityType }}
  42. </div>
  43. </div>
  44. <div class="row">
  45. <div style="width: 640px">
  46. {{ $i18n.locale === 'zh' ? '联系方式' : 'Contact Details' }}:{{
  47. orderDetail.phone
  48. }}
  49. </div>
  50. <div style="width: 150px">
  51. {{ $i18n.locale === 'zh' ? '兑换要求' : 'Exchange requirements' }}
  52. </div>
  53. <div style="flex: 1">
  54. <span>
  55. {{ orderDetail.point
  56. }}{{ $i18n.locale === 'zh' ? '积分' : 'Integral' }}
  57. </span>
  58. <span v-if="orderDetail.price !== 0"
  59. >+{{ orderDetail.price
  60. }}{{ $i18n.locale === 'zh' ? '元' : 'RMB' }}</span
  61. >
  62. </div>
  63. </div>
  64. <div class="row">
  65. <div style="width: 640px">
  66. {{ $i18n.locale === 'zh' ? '收货地址' : 'Receive Address' }}:{{
  67. $i18n.locale === 'zh'
  68. ? orderDetail.addressConcat
  69. : orderDetail.address
  70. }}
  71. <!-- orderDetail.addressConcat -->
  72. </div>
  73. <div style="width: 150px">
  74. {{ $i18n.locale === 'zh' ? '兑换数量' : 'Exchange Quantity' }}
  75. </div>
  76. <div style="flex: 1">
  77. {{ orderDetail.exchangeQuantity }}
  78. </div>
  79. </div>
  80. <hr style="border-top: 1px dashed #a2a9b6" />
  81. <div class="row">
  82. <div style="width: 640px"></div>
  83. <div style="width: 150px">
  84. {{ $i18n.locale === 'zh' ? '消耗积分' : 'Consume Points' }}
  85. </div>
  86. <div style="flex: 1">
  87. <span style="font-size: 20px; color: #ff0000">
  88. {{ orderDetail.point }}
  89. </span>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. <div class="orderMessage">
  95. <div class="header">
  96. <span>
  97. {{ $i18n.locale === 'zh' ? '订单状态:' : 'Order Status:' }}
  98. </span>
  99. <span style="margin-left: 0px">
  100. <span v-if="userOrder.orderStatus == '0'">
  101. {{ $i18n.locale == 'zh' ? '待发货' : 'Wait Deliver' }}
  102. </span>
  103. <span v-if="userOrder.orderStatus == '1'">
  104. {{ $i18n.locale == 'zh' ? '待收货' : 'To Be Received' }}
  105. </span>
  106. <span v-if="userOrder.orderStatus == '2'">
  107. {{ $i18n.locale == 'zh' ? '待评论' : 'To Be Commented' }}
  108. </span>
  109. <span v-if="userOrder.orderStatus == '3'">
  110. {{ $i18n.locale == 'zh' ? '已取消' : 'Cancelled' }}
  111. </span>
  112. <span v-if="userOrder.orderStatus == '4'">
  113. {{ $i18n.locale == 'zh' ? '已完成' : 'Completed' }}
  114. </span>
  115. <span v-if="userOrder.orderStatus == '5'">
  116. {{ $i18n.locale == 'zh' ? '待支付' : 'To be Paid' }}
  117. </span>
  118. <span v-if="userOrder.orderStatus == '6'">
  119. {{ $i18n.locale == 'zh' ? '已关闭' : 'Colsed' }}
  120. </span>
  121. </span>
  122. </div>
  123. <div class="content">
  124. <el-table
  125. :data="[orderDetail]"
  126. style="width: 100%"
  127. :header-cell-style="{ backgroundColor: '#f8f8f8' }"
  128. >
  129. <el-table-column
  130. :prop="$i18n.locale === 'zh' ? 'commodityName' : 'commodityNameEn'"
  131. align="center"
  132. :label="$i18n.locale === 'zh' ? '礼品名称' : 'Gift Name'"
  133. >
  134. </el-table-column>
  135. <el-table-column
  136. prop="point"
  137. align="center"
  138. :label="$i18n.locale === 'zh' ? '积分' : 'Integral'"
  139. >
  140. </el-table-column>
  141. <el-table-column
  142. prop="exchangeQuantity"
  143. align="center"
  144. :label="$i18n.locale === 'zh' ? '数量' : 'Number'"
  145. >
  146. </el-table-column>
  147. <el-table-column
  148. align="center"
  149. :label="$i18n.locale === 'zh' ? '创建时间' : 'Create Time'"
  150. >
  151. <template slot-scope="scope">
  152. <div>
  153. {{ orderDetail.createDate | time('YYYY-MM-DD HH:mm:ss') }}
  154. </div>
  155. </template>
  156. </el-table-column>
  157. <!-- <el-table-column
  158. prop="point"
  159. align="center"
  160. :label="$i18n.locale === 'zh' ? '实付积分' : 'Pay Points'"
  161. width="184"
  162. >
  163. </el-table-column> -->
  164. </el-table>
  165. </div>
  166. </div>
  167. <!-- 修改地址dialog -->
  168. <el-dialog
  169. :title="$i18n.locale === 'zh' ? '修改地址' : 'Modify Address'"
  170. :visible.sync="addressDialogVisible"
  171. width="30%"
  172. :before-close="dialogBeforeClose"
  173. >
  174. <div>
  175. <!-- :rules="this.isZh ? rules : rulesEn" -->
  176. <el-form ref="addressForm" :model="addressForm" label-width="120px">
  177. <!-- <el-form-item
  178. :label="$i18n.locale == 'zh' ? '收货人' : 'Consignee'"
  179. prop="consignee"
  180. >
  181. <el-input
  182. maxlength="30"
  183. v-model="addressForm.consignee"
  184. :placeholder="
  185. $i18n.locale == 'zh'
  186. ? '长度不超过30个字符'
  187. : '30 characters or less in length'
  188. "
  189. ></el-input>
  190. </el-form-item>
  191. <el-form-item
  192. :label="$i18n.locale == 'zh' ? '电话号码' : 'Mobile'"
  193. prop="mobile"
  194. >
  195. <el-input
  196. v-model="addressForm.mobile"
  197. :placeholder="
  198. $i18n.locale == 'zh'
  199. ? '电话号码、手机号码必须填一项'
  200. : 'Phone number, mobile phone number must fill in one item'
  201. "
  202. ></el-input>
  203. </el-form-item> -->
  204. <el-form-item
  205. v-if="isZh"
  206. :label="$i18n.locale == 'zh' ? '地址信息' : 'Division'"
  207. required
  208. prop="division"
  209. >
  210. <el-cascader
  211. v-model="addressForm.division"
  212. :options="sysAreaList"
  213. :props="{ value: 'name', label: 'name', children: 'child' }"
  214. placeholder="请选择省/市/区/街道"
  215. >
  216. </el-cascader>
  217. </el-form-item>
  218. <el-form-item
  219. :label="$i18n.locale == 'zh' ? '详细地址' : 'Detail'"
  220. prop="address"
  221. >
  222. <el-input
  223. v-model="addressForm.address"
  224. :placeholder="
  225. $i18n.locale == 'zh' ? '请输入详细地址' : 'Please enter address'
  226. "
  227. ></el-input>
  228. </el-form-item>
  229. <el-form-item>
  230. <el-button type="primary" @click="saveAddress('addressForm')">{{
  231. $i18n.locale == 'zh' ? '保存' : 'Save'
  232. }}</el-button>
  233. </el-form-item>
  234. </el-form>
  235. </div>
  236. <!-- <div slot="footer">
  237. <el-button @click="addressDialogVisible = false">取 消</el-button>
  238. <el-button type="primary" @click="determine">确 定</el-button>
  239. </div> -->
  240. </el-dialog>
  241. </div>
  242. </template>
  243. <script>
  244. import moment from 'moment'
  245. import {
  246. orderDetails,
  247. cancelGoodsOrders,
  248. getSysAreaList,
  249. addUmsUserCommodityAddresss,
  250. modifyAddress,
  251. } from '@/api/user'
  252. import { getToken } from '@/api/token'
  253. export default {
  254. name: 'userCenterMyOrderDetails',
  255. data() {
  256. return {
  257. addressDialogVisible: null,
  258. userOrder: JSON.parse(window.localStorage.getItem('orderDetail')),
  259. // userOrder: this.$route.query.key,
  260. orderDetail: {},
  261. isZh: true,
  262. addressForm: {
  263. consignee: '',
  264. mobile: '',
  265. division: [],
  266. address: '',
  267. postal_code: '',
  268. status: '0',
  269. },
  270. sysAreaList: [],
  271. }
  272. },
  273. filters: {
  274. time(date, type) {
  275. return moment(date).format(type)
  276. },
  277. },
  278. watch: {
  279. '$i18n.locale': {
  280. handler: function () {
  281. if (this.$i18n.locale == 'zh') {
  282. this.isZh = true
  283. } else {
  284. this.isZh = false
  285. }
  286. },
  287. deep: true,
  288. },
  289. },
  290. mounted() {
  291. this.language = window.localStorage.getItem('locale')
  292. if (this.language == 'zh') {
  293. this.isZh = true
  294. } else {
  295. this.isZh = false
  296. }
  297. this.init()
  298. this.getSysAreaList()
  299. this.toGetOrderDetails()
  300. },
  301. methods: {
  302. voteback() {
  303. this.$router.go(-1)
  304. },
  305. init() {
  306. this.user = JSON.parse(window.localStorage.getItem('user'))
  307. if (this.user.umsUser.userPic == undefined) {
  308. this.user.umsUser.userPic = ''
  309. }
  310. this.toGetOrderDetails()
  311. },
  312. // 获取订单详情
  313. toGetOrderDetails() {
  314. // let orderId = window.localStorage.getItem("orderID");
  315. let orderId = this.userOrder.id
  316. orderDetails(orderId)
  317. .then((res) => {
  318. console.log(res.data)
  319. this.orderDetail = res.data.order
  320. })
  321. .catch((error) => {})
  322. },
  323. // 取消订单
  324. cancelOrder() {
  325. getToken().then((res) => {
  326. cancelGoodsOrders(this.userOrder.id, res.data)
  327. .then((res) => {
  328. if (res.status === '200')
  329. this.$message({
  330. message:
  331. this.$i18n.locale == 'zh'
  332. ? '取消订单成功'
  333. : 'Order cancelled successfully',
  334. type: 'success',
  335. })
  336. this.$router.push({
  337. path: '/userCenterMyOrder',
  338. })
  339. })
  340. .catch((error) => {
  341. console.log(error)
  342. this.$message({
  343. message:
  344. this.$i18n.locale == 'zh'
  345. ? '取消订单失败'
  346. : 'Order cancelled error',
  347. type: 'error',
  348. })
  349. })
  350. })
  351. },
  352. // 获取省市区
  353. getSysAreaList() {
  354. function clearLeaf(data) {
  355. data.forEach((item, index) => {
  356. if (item.child.length != 0) {
  357. clearLeaf(item.child)
  358. } else {
  359. item.child = undefined
  360. }
  361. })
  362. }
  363. getSysAreaList().then((res) => {
  364. if (res) {
  365. let data = res.data
  366. clearLeaf(data)
  367. this.sysAreaList = data
  368. }
  369. })
  370. },
  371. alterAddress() {
  372. this.addressForm = {
  373. division: [
  374. this.orderDetail.province,
  375. this.orderDetail.city,
  376. this.orderDetail.area,
  377. ],
  378. address: this.orderDetail.address,
  379. }
  380. this.addressDialogVisible = true
  381. },
  382. saveAddress() {
  383. let params = {
  384. // id: this.addressForm.id,
  385. // orderId:this.orderDetail.orderNo,
  386. // userId: this.user.userId,
  387. consignee: this.orderDetail.consignee,
  388. mobile: this.orderDetail.phone,
  389. province: this.addressForm.division[0],
  390. city: this.addressForm.division[1],
  391. area: this.addressForm.division[2],
  392. address: this.addressForm.address,
  393. }
  394. let orderId = this.userOrder.id
  395. getToken().then((res) => {
  396. modifyAddress(JSON.stringify(params), orderId, res.data).then((res) => {
  397. if (res.status == '200') {
  398. this.addressDialogVisible = false
  399. this.$message({
  400. message:
  401. this.$i18n.locale == 'zh'
  402. ? '修改地址成功'
  403. : 'Address Modified Successfully',
  404. type: 'success',
  405. })
  406. this.init()
  407. } else {
  408. this.$message({
  409. message:
  410. this.$i18n.locale == 'zh'
  411. ? '修改地址失败'
  412. : 'Address Modified Failed',
  413. type: 'error',
  414. })
  415. }
  416. })
  417. })
  418. },
  419. dialogBeforeClose() {
  420. this.addressDialogVisible = false
  421. },
  422. },
  423. computed: {
  424. determineCommodityType() {
  425. if (this.isZh) {
  426. if (this.orderDetail.commodityType == '1') {
  427. return '实体礼品'
  428. } else {
  429. return '虚拟礼品'
  430. }
  431. } else {
  432. if (this.orderDetail.commodityType == '1') {
  433. return 'Physical Gifts'
  434. } else {
  435. return 'Virtual Gifts'
  436. }
  437. }
  438. },
  439. },
  440. }
  441. </script>
  442. <style scoped lang="less">
  443. ::v-deep .el-dialog {
  444. display: flex;
  445. flex-direction: column;
  446. margin: 0 !important;
  447. position: absolute;
  448. top: 50%;
  449. left: 50%;
  450. transform: translate(-50%, -50%);
  451. max-height: calc(100% - 30px);
  452. max-width: calc(100% - 30px);
  453. }
  454. .userCenterMyOrderDetails {
  455. width: 100%;
  456. background: #fff;
  457. min-height: 800px;
  458. .title {
  459. height: 60px;
  460. line-height: 60px;
  461. padding-top: 30px;
  462. margin-left: 30px;
  463. margin-right: 30px;
  464. border-bottom: 1px solid rgba(228, 228, 228, 1);
  465. }
  466. .orderDetails {
  467. .header {
  468. width: 100%;
  469. height: 60px;
  470. padding-left: 30px;
  471. box-sizing: border-box;
  472. background-color: #e4e4e4;
  473. span {
  474. font-size: 14px;
  475. line-height: 60px;
  476. }
  477. }
  478. .content {
  479. padding: 20px;
  480. .row {
  481. display: flex;
  482. font-size: 14px;
  483. line-height: 30px;
  484. }
  485. }
  486. }
  487. .orderMessage {
  488. .header {
  489. width: 100%;
  490. height: 60px;
  491. padding-left: 30px;
  492. box-sizing: border-box;
  493. background-color: #e4e4e4;
  494. span {
  495. font-size: 14px;
  496. line-height: 60px;
  497. }
  498. }
  499. }
  500. .backButton {
  501. width: 60px;
  502. height: 30px;
  503. background-color: #b4d5ff;
  504. position: absolute;
  505. top: 40px;
  506. right: 1%;
  507. border-radius: 8px;
  508. text-align: center;
  509. line-height: 30px;
  510. cursor: pointer;
  511. }
  512. }
  513. </style>