order.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <template>
  2. <view class="cart-list">
  3. <view style="padding: 0 36upx;line-height: 70upx;border-bottom: 14upx solid #F5F5F5;">
  4. <!-- <span v-if="detail.order_state == 10">未付款</span>
  5. <span v-if="detail.order_state == 0">已取消</span>
  6. <span v-if="detail.order_state == 20">待发货</span>
  7. <!-- 已付款 -->
  8. <!-- <span v-if="detail.order_state == 30">已发货</span>
  9. <span v-if="detail.order_state == 40">已收货</span> -->
  10. <span>{{detail.status}}</span>
  11. </view>
  12. <view style="padding: 0 36upx;line-height: 70upx;border-bottom: 14upx solid #F5F5F5;">
  13. <span v-if="detail.refund_state == 1">等待酒店处理退货申请</span>
  14. <span v-if="detail.refund_state == 2">同意退款售后</span>
  15. <span v-if="detail.order_state == 3">拒绝退款</span>
  16. </view>
  17. <view class="adress">
  18. <view class="adressDetail">{{detail.reciver_info.mob_phone}}</view>
  19. <view>{{detail.reciver_info.address}}</view>
  20. </view>
  21. <view style="padding: 30upx 36upx 15upx 36upx;border-bottom: 1px solid #F5F5F5;">
  22. <image :src="pictureUrl+'/uploads/home/store/'+detail.store_id+'/'+detail.store_avatar" style="border-radius: 50%;
  23. width: 50upx;height: 50upx;vertical-align: middle;"></image>
  24. <span style="padding-left: 16upx;">{{detail.store_name}}</span>
  25. </view>
  26. <view class="shoplist" v-for="(items,index) in detail.goods" :key="index">
  27. <view>
  28. <van-card
  29. title-class="changewidth"
  30. price-class ="priceClass"
  31. :price="items.goods_price"
  32. :desc="items.descire"
  33. :title="items.desarray"
  34. :thumb="pictureUrl + '/uploads/home/store/goods/'+items.goods_image.substr(0, items.goods_image.indexOf('\_')) + '/' + items.goods_image"
  35. >
  36. </van-card>
  37. </view>
  38. </view>
  39. <view class="topTip">
  40. <view style="font-size: 28upx;">合计:{{detail.order_amount}}</view>
  41. <view style="padding-left: 20upx;">运费: {{detail.shipping_fee}}</view>
  42. </view>
  43. <view style="padding: 15upx 36upx;">订单编号:<text class="orderCode">{{detail.order_sn}}</text></view>
  44. <view class="adressbottom">
  45. <view>下单时间: <text style="font-weight: 500;" class="time">{{detail.add_time}}</text></view>
  46. <view>支付订单:
  47. <text class="time" v-if="detail.order_state == 10 || detail.order_state == 0">未支付</text>
  48. <text class="time" v-else>{{detail.payment_time}}</text>
  49. </view>
  50. <view>商家发货:
  51. <text class="time" v-if="detail.order_state == 10 || detail.order_state == 0 || detail.order_state == 20">未发货</text>
  52. <text class="time" v-else>{{detail.shipping_time}}</text>
  53. </view>
  54. <view>确认收货:
  55. <text class="time" v-if="detail.order_state == 10 || detail.order_state == 0|| detail.order_state == 20">未确认</text>
  56. <text class="time" v-else>{{detail.finnshed_time}}</text>
  57. </view>
  58. </view>
  59. <view class="adressbutton">
  60. <view class="buttonStatus">
  61. <!-- <view>{{detail.operate}}</view> -->
  62. <!-- <view v-if="detail.order_state == 0 " @click="cancelOrder(2)" class="deleteOrder">删除订单</view> -->
  63. <view @click="reminder" v-if="detail.order_state == 20" class="deleteOrder">催单</view>
  64. <view @click="cancelOrder(1)" v-if="detail.order_state == 10" class="deleteOrder">取消订单</view>
  65. <view class="payOrder" v-if="detail.order_state == 10" @click="goPay">去付款</view>
  66. <!-- detail.order_state == 40 && detail.refund_state == 0 -->
  67. <view v-if=" detail.status == '已发货'" @click="cancelOrder(3)" class="deleteOrder">确认收货</view>
  68. <view v-if=" detail.status == '已收货'" class="deleteOrder">退货退款</view>
  69. <view v-if=" detail.status == '已收货'" @click="estimate" class="deleteOrder">去评价</view>
  70. <view v-if=" detail.status == '已完成' || detail.status == '已取消'" @click="cancelOrder(2)" class="deleteOrder">删除订单</view>
  71. </view>
  72. <!-- <view v-else>
  73. <view v-if="detail.refund_state == 2">删除订单</view>
  74. </view> -->
  75. </view>
  76. <Dialog :orderCancel="orderCancel"
  77. :titles="titles"
  78. @colseDialog="cancelDialog"
  79. @confirmPay="confirmOrder"
  80. />
  81. </view>
  82. </template>
  83. <script>
  84. import Dialog from '@/component/Dialog.vue'
  85. export default {
  86. components: {
  87. Dialog
  88. },
  89. data() {
  90. return {
  91. isCancel: false,
  92. isDelete: false,
  93. isGet: false,
  94. titles:'',
  95. pictureUrl: this.pictureUrl,
  96. orderCancel: false,
  97. detail:{},
  98. id: '' ,// 订单id
  99. }
  100. },
  101. onLoad(e) {
  102. console.log(e);
  103. this.id = e.id;
  104. this.getDetail();
  105. },
  106. methods: {
  107. getDetail() {
  108. this.request({
  109. url: '/v2/order/info',
  110. method: 'post',
  111. data: {
  112. order_id: this.id
  113. },
  114. success: (res) => {
  115. let { data } = res.data;
  116. data.goods.forEach((items,index) => {
  117. let arr = items.goods_name.split(' ');
  118. items.desarray = arr[0];
  119. items.descire = items.goods_name.replace(arr[0], '');
  120. })
  121. this.detail = data;
  122. console.log(this.detail);
  123. }
  124. })
  125. },
  126. // 取消订单
  127. cancelOrder(e) {
  128. if(e == 1) {
  129. this.titles="确认取消订单?"
  130. this.isCancel = true;
  131. }else if(e == 3){
  132. this.titles="确认收货?"
  133. this.isGet = true;
  134. }else {
  135. this.titles="确认删除订单?"
  136. this.isDelete = true;
  137. }
  138. this.orderCancel = true;
  139. },
  140. cancelDialog() {
  141. this.isCancel = false;
  142. this.isDelete = false;
  143. this.isGet = false;
  144. this.orderCancel = false;
  145. },
  146. confirmOrder() {
  147. let url = '';
  148. this.orderCancel = false;
  149. // 取消
  150. if(this.isCancel) {
  151. url = '/v2/order/cancel';
  152. }else if(this.isDelete) {
  153. // 删除
  154. url = '/v2/order/drop';
  155. }else if(this.isGet) {
  156. // 收货
  157. url = '/v2/order/confirm';
  158. }
  159. this.request({
  160. url: url,
  161. method:'post',
  162. data: {
  163. order_id: this.id
  164. },
  165. success: (res) => {
  166. if(this.isDelete) {
  167. this.$msg("删除成功");
  168. }else if(this.isGet) {
  169. this.$msg("收货成功");
  170. }else if(this.isCancel) {
  171. this.$msg("取消成功");
  172. }
  173. setTimeout(()=> {
  174. uni.$emit("refehlist");
  175. uni.navigateBack();
  176. }, 2000)
  177. }
  178. })
  179. },
  180. goPay() {
  181. let prices = this.detail.order_amount;
  182. let order_id = this.id;
  183. let isform = 1;
  184. uni.navigateTo({
  185. url:`/pages/myOrder/paymoment?order_id=${order_id}
  186. &prices=${prices}&isform=${isform}`
  187. })
  188. },
  189. // 催单
  190. reminder() {
  191. let order_id = this.id;
  192. uni.navigateTo({
  193. url: `/pages/myOrder/reminder?order_id=${order_id}`
  194. })
  195. },
  196. // 评价晒单
  197. estimate() {
  198. let order_id = this.id;
  199. uni.navigateTo({
  200. url: `/pages/myOrder/estimate?order_id=${order_id}`
  201. })
  202. }
  203. }
  204. }
  205. </script>
  206. <style lang="scss">
  207. page {
  208. background-color: #F5F5F5;
  209. }
  210. .cart-list {
  211. background-color: #fff;
  212. }
  213. .topTip {
  214. display: flex;
  215. align-items: center;
  216. justify-content: flex-start;
  217. padding: 20upx 36upx;
  218. }
  219. .changewidth {
  220. color: #303133;
  221. font-size: 32upx;
  222. font-weight: 100!important;
  223. }
  224. .priceClass {
  225. color:#303133!important;
  226. font-weight: normal!important;
  227. font-size: 36upx;
  228. }
  229. .van-card {
  230. background-color: #fff!important;
  231. }
  232. .shoplist {
  233. display: flex;
  234. justify-content: space-between;
  235. align-items: center;
  236. }
  237. .adress {
  238. padding: 35upx 36upx;
  239. border-bottom: 14upx solid #F5F5F5;
  240. }
  241. .adressDetail {
  242. padding: 6upx 0;
  243. }
  244. .orderCode {
  245. padding-left: 15upx;
  246. font-weight: 500;
  247. }
  248. .adressbottom {
  249. padding: 0 36upx;
  250. color: #606266;
  251. border-top: 16upx solid #F5F5F5;
  252. padding-bottom: 32upx;
  253. margin-bottom: 100upx;
  254. view {
  255. padding: 32upx 0 0 0;
  256. }
  257. .time {
  258. padding-left: 16upx;
  259. }
  260. }
  261. .adressbutton {
  262. position: fixed;
  263. bottom: 0;
  264. width: 100%;
  265. .buttonStatus {
  266. display: flex;
  267. text-align: center;
  268. .deleteOrder {
  269. flex: 1;
  270. color: #303133;
  271. font-size: 32upx;
  272. background-color: #fff;
  273. padding: 10px 0;
  274. }
  275. .payOrder {
  276. flex: 1;
  277. font-size: 32upx;
  278. color: #fff;
  279. background-color: #D9332E;
  280. padding: 10px 0;
  281. }
  282. }
  283. }
  284. </style>