orderList.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <template>
  2. <view class="container">
  3. <!-- 订单 -->
  4. <view class="order">
  5. <view class="order-box">
  6. <view class="order-item" v-for="(item, index) of list" :key="index" @click="toDetail(item)">
  7. <view class="item-allnumb-box">
  8. <view class="allnumb-left">
  9. <image class="img" :src="item.avatar || '@/tatic/logo.png' "
  10. style="width: 50rpx; height: 50rpx" />
  11. <span style="margin-left:20rpx">{{item.memberUsername}}</span>
  12. </view>
  13. <view class="allnumb-right" :style="{color: getStatusColor(item.status)}">
  14. {{ getStatusText(item.status) }}
  15. </view>
  16. </view>
  17. <u-line margin="20rpx 0"></u-line>
  18. <view class="item-center" :key="idx" v-for="(itm, idx) of item.goodsInfo">
  19. <view class="center-left">
  20. <image :src="itm.goodsPic" class="img"></image>
  21. </view>
  22. <view class="center-right">
  23. <view class="r-l">
  24. <view class="right-name"> {{ itm.goodsName }} </view>
  25. <!-- <view class="right-descript"> 测试商品描述111 </view> -->
  26. <view class="l-box">
  27. <view class="right-price"> ¥{{ itm.goodsPrice }} </view>
  28. <view class="right-numb"> ×{{ itm.goodsQuantity }} </view>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="item-allnumb-box">
  34. <view class="allnumb-left"></view>
  35. <view class="allnumb-right">
  36. <span class="r-text">实付款</span>¥{{ item.payAmount }}
  37. </view>
  38. </view>
  39. <u-line margin="20rpx 0" dashed="true"></u-line>
  40. <view class="item-top">
  41. <view class="top-left gray-color">订单编号 : {{ item.id }}</view>
  42. <view class="top-right">{{ type_name }}</view>
  43. </view>
  44. <view class="item-top">
  45. <view class="top-left gray-color">下单时间 : {{ formatTime1(item.createTime) }}</view>
  46. <view class="top-right"></view>
  47. </view>
  48. <view class="item-top">
  49. <view v-if="item.status == 2" class="top-left gray-color">核销时间:
  50. {{ formatTime1(item.receive_time) }}
  51. </view>
  52. <view v-if="item.status == 3" class="top-left gray-color">退款时间:
  53. {{ formatTime1(item.updateTime) }}
  54. </view>
  55. <!-- <view v-if="item.status == 4" class="top-left gray-color">过期时间:
  56. {{ formatTime1(item.createTime) }}</view> -->
  57. <!-- <view v-else class="top-left gray-color"></view>
  58. <view class="top-right"></view> -->
  59. </view>
  60. </view>
  61. </view>
  62. <view style="margin-top: 40rpx" v-if="list.length === 0">
  63. <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
  64. </view>
  65. </view>
  66. </view>
  67. </template>
  68. <script>
  69. import {
  70. userOrdersApi,
  71. getUserOrderList,
  72. cancelOrder
  73. } from '@/api/client/order';
  74. export default {
  75. props: {
  76. typeStyle: {
  77. type: Number,
  78. default: 0,
  79. },
  80. list: {
  81. type: Array,
  82. default: [],
  83. },
  84. },
  85. data() {
  86. return {
  87. };
  88. },
  89. mounted() {
  90. },
  91. onShow() {
  92. },
  93. computed: {
  94. },
  95. methods: {
  96. toDetail(item){
  97. console.log(item,"item")
  98. uni.navigateTo({
  99. url: `/pageMerchant/components/orderDetail?detailDate=${JSON.stringify(item)}`,
  100. });
  101. },
  102. getStatusColor(status) {
  103. switch (status) {
  104. case 1:
  105. return 'blue';
  106. case 2:
  107. return 'red';
  108. case 3:
  109. return 'orange';
  110. case 4:
  111. return 'green';
  112. default:
  113. return 'black';
  114. }
  115. },
  116. getStatusText(status) {
  117. switch (status) {
  118. case 1:
  119. return '待核销';
  120. case 2:
  121. return '已核销';
  122. case 3:
  123. return '已退款';
  124. case 4:
  125. return '已过期';
  126. default:
  127. return '';
  128. }
  129. },
  130. // 跳转到订单详情
  131. handlerSkipDetail(e) {
  132. uni.navigateTo({
  133. url: `/PageMine/orderModules/orderDetail?orderList=${JSON.stringify(e)}`,
  134. });
  135. },
  136. formatTime1(timestamp) {
  137. const date = new Date(timestamp); // 转换为毫秒
  138. const year = date.getFullYear();
  139. const month = ('0' + (date.getMonth() + 1)).slice(-2);
  140. const day = ('0' + date.getDate()).slice(-2);
  141. const hour = ('0' + date.getHours()).slice(-2);
  142. const minute = ('0' + date.getMinutes()).slice(-2);
  143. const second = ('0' + date.getSeconds()).slice(-2);
  144. return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  145. }
  146. },
  147. };
  148. </script>
  149. <style lang="scss" scoped>
  150. .order {
  151. margin-top: 10px;
  152. padding: 10rpx 20rpx 20rpx;
  153. box-sizing: border-box;
  154. .order-box {
  155. .order-item {
  156. margin-bottom: 20rpx;
  157. background-color: #fff;
  158. border-radius: 20rpx;
  159. padding: 20rpx;
  160. box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
  161. .item-top {
  162. display: flex;
  163. justify-content: space-between;
  164. margin-bottom: 10rpx;
  165. }
  166. .item-center {
  167. display: flex;
  168. align-items: center;
  169. margin-bottom: 10rpx;
  170. .center-left {
  171. height: 160rpx;
  172. .img {
  173. width: 160rpx;
  174. height: 160rpx;
  175. }
  176. }
  177. .center-right {
  178. width: 100%;
  179. height: 160rpx;
  180. display: flex;
  181. justify-content: space-between;
  182. margin-left: 20rpx;
  183. .r-l {
  184. display: flex;
  185. flex-direction: column;
  186. justify-content: space-around;
  187. .right-name {
  188. color: #4d5671;
  189. font-size: 32rpx;
  190. font-weight: bold;
  191. }
  192. .right-descript {
  193. font-size: 28rpx;
  194. color: #858797;
  195. }
  196. .l-box {
  197. display: flex;
  198. font-size: 24rpx;
  199. align-items: center;
  200. font-style: italic;
  201. .right-price {
  202. margin-right: 20rpx;
  203. font-weight: bold;
  204. font-size: 28rpx;
  205. color: #f57f32;
  206. }
  207. .right-numb {
  208. font-size: 24rpx;
  209. color: #858797;
  210. }
  211. }
  212. }
  213. .r-r {
  214. .r-item {
  215. align-items: center;
  216. }
  217. }
  218. }
  219. }
  220. .item-allnumb-box {
  221. display: flex;
  222. justify-content: space-between;
  223. align-items: center;
  224. font-weight: bold;
  225. .allnumb-left {
  226. display: flex;
  227. justify-content: start;
  228. align-items: center;
  229. font-size: 32rpx;
  230. .img {
  231. display: block;
  232. }
  233. }
  234. .allnumb-right {
  235. font-size: 26rpx;
  236. color: #f57f32;
  237. .r-text {
  238. color: #000;
  239. }
  240. }
  241. }
  242. }
  243. }
  244. }
  245. .item-bottom {
  246. width: 100%;
  247. margin-top: 20rpx;
  248. .btn {
  249. height: 70rpx;
  250. background-color: rgba(248, 213, 53, 0.8);
  251. color: #4e5059;
  252. font-size: 28rpx;
  253. text-align: center;
  254. line-height: 70rpx;
  255. border-radius: 20rpx;
  256. }
  257. }
  258. .gray-color {
  259. color: #858797;
  260. }
  261. ::deep .u-tabs__wrapper__nav__item__text {
  262. font-size: 30px;
  263. }
  264. </style>