orderDetail.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. <template>
  2. <view class="order-pages">
  3. <view class="order-info">
  4. <!-- 订单状态 -->
  5. <view class="order-status">
  6. <view class="status-title">{{orderInfo.orderFlag}}</view>
  7. <view v-if="orderInfo.orderFlag=='待支付'" class="status-care">
  8. 请在 <text>2020-10-30</text>前付款,过期系统将自动取消订单
  9. </view>
  10. <view v-if="orderInfo.orderFlag=='已取消'" class="status-care">
  11. 超时未支付,系统已自动取消订单
  12. </view>
  13. </view>
  14. <u-gap height="10" bg-color="#f8f8f8"></u-gap>
  15. <!-- 地址 -->
  16. <view class="order-address">
  17. <view>
  18. <text class="address-title">{{orderInfo.address}}</text>
  19. </view>
  20. <view>
  21. <text style="margin-right: 30upx;">{{orderInfo.userName}}</text>
  22. <text>{{orderInfo.phone}}</text>
  23. </view>
  24. </view>
  25. <u-gap height="10" bg-color="#f8f8f8"></u-gap>
  26. <!-- 商品列表 -->
  27. <view class="bundle-list" v-for="item in orderInfo.itemList" :key="item.id">
  28. <view class="img-cont">
  29. <image :src="item.icon?item.icon:'../../static/goods.png'"></image>
  30. </view>
  31. <view >
  32. <view class="ellipsis-two">{{item.name}}</view>
  33. <view class="bundle-num">
  34. <view ><text class="price-num">{{item.price}}</text> <text class="price-text">乐豆</text></view>
  35. <view >X {{item.number}}</view>
  36. </view>
  37. </view>
  38. </view>
  39. <u-gap height="10" bg-color="#f8f8f8"></u-gap>
  40. <!-- 订单信息 -->
  41. <u-cell-group>
  42. <u-cell-item title="订单编号" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false" >
  43. {{orderInfo.orderNo}}
  44. </u-cell-item>
  45. <u-cell-item title="下单时间" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false" >
  46. {{orderInfo.orderTime}}
  47. </u-cell-item>
  48. <u-cell-item v-if="orderInfo.payTime" title="支付时间" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
  49. {{orderInfo.payTime}}
  50. </u-cell-item>
  51. <u-gap height="10" bg-color="#f8f8f8"></u-gap>
  52. <u-cell-item title="商品合计" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
  53. <text class="price-num">{{orderInfo.amount}}</text> <text class="price-text">乐豆</text>
  54. </u-cell-item>
  55. <u-cell-item title="运费" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
  56. 免运费
  57. </u-cell-item>
  58. <u-cell-item :title="(orderInfo.orderFlag=='待支付'||orderInfo.orderFlag=='已取消') ? '待支付':'实际支付'" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
  59. <text class="price-num">{{orderInfo.amount}}</text> <text class="price-text">乐豆</text>
  60. </u-cell-item>
  61. </u-cell-group>
  62. </view>
  63. <view v-if="orderInfo.orderFlag=='待支付'" class="footer">
  64. <u-button @click="cancleOrder" type="error" >去支付</u-button>
  65. </view>
  66. </view>
  67. </template>
  68. <script>
  69. import {orderDetail, cancleOrder} from '@/api/order.js'
  70. import {getLookUpDatas} from '@/api/data.js'
  71. export default{
  72. data() {
  73. return {
  74. orderInfo: {
  75. address: '陕西省西安市未央区常青二路大明宫小区',
  76. userName: '王明',
  77. phone: '18792701023',
  78. orderTime: "2020-10-28 11:15:59",
  79. orderFlag: "待支付",
  80. orderNo: 121245465748,
  81. payedAmount: 0,
  82. id: 11,
  83. amount: 450,
  84. totalNum: 3,
  85. itemList: [
  86. {
  87. name: "八九箭冠",
  88. id: 76435,
  89. number: 1,
  90. price: 150,
  91. icon: ''
  92. },
  93. {
  94. name: "数据库的合法身份觉得很附近发生纠纷解决",
  95. id: 76436,
  96. number: 2,
  97. price: 150,
  98. icon: ''
  99. }
  100. ]
  101. },
  102. src: '',
  103. orderStatusList: []
  104. }
  105. },
  106. onLoad(options) {
  107. if (options.id) {
  108. console.log(options.id)
  109. this.getOrderDetail(options.id)
  110. this.orderStatusList = this.$store.state.vuex_payStatus
  111. }
  112. },
  113. methods:{
  114. getOptionName (list,val) {
  115. if(val){
  116. let p = list.find((item) => {
  117. return item.code == val
  118. })
  119. return p ? p.dispName : '-'
  120. }
  121. return '-'
  122. },
  123. // 获取订单详情
  124. getOrderDetail (id) {
  125. let payTypeList = this.$store.state.vuex_payType
  126. orderDetail({id:id}).then(res =>{
  127. if (res.status == 200) {
  128. this.orderInfo = res.data
  129. this.orderInfo.payType = this.orderInfo.payType ? this.getOptionName(payTypeList,this.orderInfo.payType) : ''
  130. } else {
  131. }
  132. })
  133. },
  134. // 取消订单
  135. cancleOrder (){
  136. cancleOrder({id:this.orderInfo.id}).then(res=>{
  137. if (res.status==200) {
  138. this.toashMsg(res.message)
  139. setTimeout(()=>{
  140. uni.navigateBack()
  141. },500)
  142. }
  143. })
  144. },
  145. // 图片预览
  146. showImage (url) {
  147. uni.previewImage({
  148. urls: [url],
  149. longPressActions: {
  150. itemList: ['发送给朋友', '保存图片', '收藏'],
  151. success: function(data) {
  152. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  153. },
  154. fail: function(err) {
  155. console.log(err.errMsg);
  156. }
  157. }
  158. });
  159. }
  160. },
  161. }
  162. </script>
  163. <style lang="scss">
  164. page {
  165. height: 100%;
  166. background-color: #fff;
  167. }
  168. .order-pages{
  169. width: 100%;
  170. height: 100%;
  171. padding: 0 24upx;
  172. display: flex;
  173. flex-direction: column;
  174. .order-info{
  175. width: 100%;
  176. flex: 1;
  177. overflow-y: scroll;
  178. // 状态
  179. .order-status{
  180. padding: 30upx 0;
  181. text-align: center;
  182. .status-title{
  183. font-size: 36upx;
  184. color: #000;
  185. }
  186. .status-care{
  187. font-size: 24upx;
  188. margin-top: 10upx;
  189. color: #a9aaac;
  190. >text {
  191. color: red;
  192. }
  193. }
  194. }
  195. // 地址
  196. .order-address {
  197. font-size: 32upx;
  198. padding: 20upx 0;
  199. >view {
  200. line-height: 60upx;
  201. }
  202. .address-title {
  203. color: #000;
  204. }
  205. }
  206. // 订单中商品列表
  207. .bundle-list {
  208. display: flex;
  209. padding: 20upx 10upx;
  210. font-size: 28upx;
  211. border-bottom: 1px solid #F8F8F8;
  212. .img-cont {
  213. width: 158rpx;
  214. height: 140upx;
  215. border-radius: 15upx;
  216. overflow: hidden;
  217. >image {
  218. width: 100%;
  219. height: 100%;
  220. }
  221. }
  222. >view {
  223. &:last-child {
  224. padding: 10upx 0;
  225. flex: 1;
  226. margin-left: 20upx;
  227. display: flex;
  228. flex-direction: column;
  229. justify-content: space-between;
  230. }
  231. }
  232. .bundle-num {
  233. display: flex;
  234. justify-content: space-between;
  235. }
  236. }
  237. .price-text{
  238. font-size: 20upx;
  239. margin-left: 10upx;
  240. }
  241. .price-num{
  242. font-size: 32upx;
  243. color: red;
  244. }
  245. .u-cell{
  246. padding:10rpx 32rpx;
  247. }
  248. }
  249. .footer{
  250. padding: 20rpx;
  251. }
  252. }
  253. </style>