orderdetail.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. <template>
  2. <view>
  3. <!-- <van-tabs :active="active" @change="changeselect" >
  4. <van-tab v-for="(item, index) in menu" :name="index" :title="item.name">
  5. </van-tab>
  6. </van-tabs> -->
  7. <scroll-view v-if="order_list.length > 0" style="height: 100vh;" class="floor-list"
  8. :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower"
  9. :refresher-enabled="false">
  10. <view v-for="(item,index) in order_list" :key="index" class="cart-list">
  11. <view class="topTip" @click="goDetail(item.order_id)">
  12. <view>
  13. <image :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_avatar" style="border-radius: 50%;
  14. width: 50upx;height: 50upx;vertical-align: middle;"></image>
  15. <span style="padding-left: 16upx;">{{item.store_name}}</span>
  16. </view>
  17. <view style="color: #D9332E;font-size: 24upx;">{{item.status}}</view>
  18. </view>
  19. <view @click="goDetail(item.order_id)" v-for="(items,indexs) in item.goods" :key="indexs" class="shoplist" style="background-color: #fff;">
  20. <view>
  21. <van-card
  22. title-class="changewidth"
  23. price-class ="priceClass"
  24. :price="items.goods_pay_price"
  25. :desc="items.descire+'X'+items.goods_num"
  26. :title="items.desarray"
  27. :thumb="pictureUrl + '/uploads/home/store/goods/'+items.goods_image.substr(0, items.goods_image.indexOf('\_')) + '/' + items.goods_image"
  28. >
  29. </van-card>
  30. </view>
  31. </view>
  32. <view class="topTip">
  33. <view style="font-size: 28upx;">合计:{{item.order_amount}}</view>
  34. <!-- <view class="deleChange" v-if="item.order_state == 10">未付款</view>
  35. <view class="deleChange" v-if="item.order_state == 20">催单</view>
  36. <view class="deleChange" v-if="item.order_state == 20">确认收货</view> uni.navigateTo({
  37. url:`/pages/myOrder/paymoment?order_id=${order_id}&prices=${prices}`
  38. })
  39. <view class="deleChange" v-if="item.order_state == 40 && item.evaluation_state == 0">去评价</view> -->
  40. <view class="deleChange" @click="gopay(item)" v-if="item.order_state == 10">去付款</view>
  41. <view class="deleChange" @click="gopay(item)" v-if="item.order_state == 20&&item.shipping_type==0">催单</view>
  42. <view class="deleChange" @click="gopay(item)" v-if="item.order_state == 20&&item.shipping_type!=0">联系酒店</view>
  43. <view class="deleChange" @click="gopay(item)" v-if="item.order_state == 30">确认收货</view>
  44. <view class="deleChange" @click="gopay(item)" v-if="item.order_state == 40 && item.evaluation_state == 0">去评价</view>
  45. <!-- <view class="deleChange" @click="gopay(item)">{{item.operate}}</view> -->
  46. </view>
  47. </view>
  48. </scroll-view>
  49. <view v-if="order_list.length == 0 && successlogion && hasLogin" >
  50. <view style="margin: 120upx auto;text-align: center;">
  51. <van-icon size="160rpx" color="#909399" name="description" />
  52. <view style="text-align: center;color: #909399;"> 去买点什么</view>
  53. </view>
  54. </view>
  55. <view v-if="order_list.length == 0 && !successlogion || order_list.length == 0 && !hasLogin" >
  56. <view style="margin: 120upx auto;text-align: center;">
  57. <van-icon size="160rpx" color="#909399" name="description" />
  58. <view style="text-align: center;color: #909399;">啥都没有
  59. <span style="color: #F76260;" @click="gotologion">去登录吧</span></view>
  60. </view>
  61. </view>
  62. <!-- 催单 -->
  63. <Dialog :orderCancel="orderCancel"
  64. :titles="titles"
  65. @colseDialog="cancelDialog"
  66. @confirmPay="confirmOrder"
  67. />
  68. <Gobacktop @getop="getop" v-if="isTop" />
  69. <!-- <logionDialog @confirmDiaolog="confirmDiaolog" :ishow="false" @cancelDiaolog="cancelDiaolog" :showdialog="showdialog"/> -->
  70. </view>
  71. </template>
  72. <script>
  73. import {
  74. mapMutations,mapState
  75. } from 'vuex'
  76. import Dialog from '@/component/Dialog.vue'
  77. import Gobacktop from '@/component/Gobacktop.vue'
  78. export default{
  79. components: {
  80. Dialog,
  81. Gobacktop
  82. },
  83. data() {
  84. return {
  85. isTop: false,
  86. ispull: true,
  87. showdialog: false,
  88. orderCancel: false,
  89. titles:'',
  90. pictureUrl: this.pictureUrl,
  91. menu:[
  92. {name:'全部'},
  93. {name:'待支付'},
  94. {name:'处理中'},
  95. {name:'已收货'},
  96. {name:'已取消'},
  97. {name:'退款售后'}
  98. ],
  99. deleteorder: 0, // 判断删除订单还是确认收货
  100. // 要查找的订单状态 all-全部 waiting-待支付 payed-处理中 complete-已收货 cancel-已取消 refund-退款售后
  101. active: 0,
  102. scrollTop: 0,
  103. old: {
  104. scrollTop: 0
  105. },
  106. order_id:'',
  107. page: 1,
  108. page_size: 10,
  109. state: 'all',
  110. order_list:[]
  111. }
  112. },
  113. computed:{
  114. ...mapState([
  115. 'hasLogin',
  116. 'userInfo',
  117. 'successlogion'
  118. ]),
  119. },
  120. onLoad(a) {
  121. uni.$on("refehlist",()=>{
  122. this.order_list = [];
  123. this.getlist();
  124. })
  125. // 完成支付
  126. uni.$on(" finshlist",()=>{
  127. this.page = 1;
  128. this.order_list = [];
  129. this.getlist();
  130. })
  131. // 完成评价
  132. uni.$on("finshesitmate",()=>{
  133. this.page = 1;
  134. this.order_list = [];
  135. this.getlist();
  136. })
  137. if(this.successlogion && this.hasLogin){
  138. let title = '';
  139. if(a.state == 'waiting') {
  140. title = '待付款';
  141. }else if(a.state == 'payed') {
  142. title = '处理中';
  143. }else if(a.state == 'cancel'){
  144. title = '已取消';
  145. }else if(a.state == 'complete'){
  146. title = '已收货';
  147. }else if(a.state == 'all') {
  148. title = '我的订单';
  149. }
  150. uni.setNavigationBarTitle({
  151. title: title
  152. })
  153. this.state = a.state;
  154. this.getlist(); // 获取订单
  155. }else {
  156. uni.navigateTo({
  157. url: '/pages/myCenter/logion'
  158. })
  159. }
  160. },
  161. watch:{
  162. 'successlogion':function(val) {
  163. if(val) {
  164. this.active = 0;
  165. this.getlist();
  166. }else {
  167. uni.navigateTo({
  168. url: '/pages/myCenter/logion'
  169. })
  170. }
  171. },
  172. 'hasLogin':function(val) {
  173. if(val) {
  174. this.active = 0;
  175. this.getlist();
  176. }else {
  177. uni.navigateTo({
  178. url: '/pages/myCenter/logion'
  179. })
  180. }
  181. },
  182. },
  183. methods: {
  184. getop() {
  185. this.scrollTop = this.old.scrollTop
  186. this.$nextTick(function(){
  187. this.scrollTop=0;
  188. });
  189. this.isTop = false;
  190. },
  191. gotologion() {
  192. uni.navigateTo({
  193. url: '/pages/myCenter/logion'
  194. })
  195. },
  196. // 关闭弹窗
  197. // cancelDiaolog() {
  198. // this.showdialog = false;
  199. // },
  200. // // 确定
  201. // confirmDiaolog() {
  202. // this.showdialog = false;
  203. // this.getlist(); // 获取订单
  204. // },
  205. // changeselect(e) {
  206. // if(this.successlogion && this.hasLogin) {
  207. // console.log(e);
  208. // this.active = e.target.name;
  209. // this.page = 1;
  210. // this.ispull = true;
  211. // this.order_list = [];
  212. // if(e.target.name == 0) {
  213. // this.state = 'all';
  214. // this.getlist();
  215. // }else if(e.target.name == 1) {
  216. // this.state = 'waiting';
  217. // this.getlist();
  218. // }else if(e.target.name == 2) {
  219. // this.state = 'payed';
  220. // this.getlist();
  221. // }else if(e.target.name == 3) {
  222. // this.state = 'complete';
  223. // this.getlist();
  224. // }else if(e.target.name == 4) {
  225. // this.state = 'cancel';
  226. // this.getlist();
  227. // }
  228. // if(e.target.name == 5) {
  229. // this.state = 'refund';
  230. // this.refund();
  231. // }
  232. // }else {
  233. // uni.navigateTo({
  234. // url: '/pages/myCenter/logion'
  235. // })
  236. // }
  237. // },
  238. // 订单退款售后列表
  239. refund() {
  240. this.request({
  241. url: '/v3/order/refund_list',
  242. method: 'POST',
  243. data: {
  244. state: this.state,
  245. page: this.page,
  246. page_size: 10
  247. },
  248. success: (res) => {
  249. if(res.data.data.refund_list.length< 10) {
  250. this.ispull = false;
  251. }
  252. res.data.data.refund_list.forEach((item,index) => {
  253. // item.goods.forEach(items => {
  254. let arr = item.goods_name.split(' ');
  255. item.desarray = arr[0];
  256. item.descire = item.goods_name.replace(arr[0], '');
  257. // })
  258. })
  259. this.order_list = this.order_list.concat(res.data.data.refund_list);
  260. }
  261. })
  262. },
  263. // 订单列表
  264. getlist() {
  265. this.request({
  266. url: '/v2/order/orders',
  267. method: 'POST',
  268. data: {
  269. state: this.state,
  270. page: this.page,
  271. page_size: 10
  272. },
  273. success: (res) => {
  274. if(res.data.data.order_list.length< 10) {
  275. this.ispull = false;
  276. }
  277. res.data.data.order_list.forEach((item,index) => {
  278. item.goods.forEach(items => {
  279. let arr = items.goods_name.split(' ');
  280. items.desarray = arr[0];
  281. items.descire = items.goods_name.replace(arr[0], '');
  282. })
  283. })
  284. // let arr = item.goods_name.split(' ');
  285. // item.desarray = arr[0];
  286. // item.descire = arr.replace(arr[0], '');
  287. this.order_list = this.order_list.concat(res.data.data.order_list);
  288. }
  289. })
  290. },
  291. gopay(e) {
  292. let prices = e.order_amount;
  293. this.order_id = e.order_id;
  294. let order_id = e.order_id;
  295. if(e.operate == '去付款') {
  296. uni.navigateTo({
  297. url:`/pages/myOrder/paymoment?order_id=${order_id}&prices=${prices}`
  298. })
  299. }else if(e.operate == '删除') {
  300. this.titles = '确认删除订单?'
  301. this.deleteorder = 1;
  302. this.orderCancel = true;
  303. }else if(e.operate == '催单') {
  304. let a = 1;
  305. uni.navigateTo({
  306. url:`/pages/myOrder/reminder?order_id=${order_id}&a=${a}`
  307. })
  308. }else if(e.operate == '确认收货') {
  309. this.deleteorder = 2;
  310. this.titles = '确认收货?'
  311. this.orderCancel = true;
  312. }else if(e.operate == '去评价') {
  313. uni.navigateTo({
  314. url:`/pages/myOrder/estimate?order_id=${order_id}`
  315. })
  316. }else if(e.operate == '联系酒店') {
  317. let a = 2;
  318. uni.navigateTo({
  319. url:`/pages/myOrder/reminder?order_id=${order_id}&a=${a}`
  320. })
  321. }
  322. },
  323. cancelDialog() {
  324. this.orderCancel = false;
  325. },
  326. confirmOrder() {
  327. // 删除订单 确认收货
  328. this.orderCancel = false;
  329. let url = this.deleteorder == 1?'/v2/order/drop':'/v2/order/confirm';
  330. this.request({
  331. url: url,
  332. method:'POST',
  333. data: {
  334. order_id: this.order_id
  335. },
  336. success: (res) => {
  337. this.order_list = [];
  338. this.page = 1;
  339. this.ispull = true;
  340. this.getlist();
  341. }
  342. })
  343. },
  344. goDetail(e) {
  345. let order_id = e;
  346. uni.navigateTo({
  347. url: `/pages/myOrder/order?id=${order_id}`
  348. });
  349. },
  350. upper(e) {
  351. console.log(e)
  352. console.log("顶部")
  353. },
  354. // 滚到底部
  355. lower(e) {
  356. if(this.ispull) {
  357. this.page += 1;
  358. this.getlist();
  359. }
  360. },
  361. // 滚动时触发
  362. scroll(e) {
  363. if(e.detail.scrollTop > 400) {
  364. this.isTop = true;
  365. }else{ //当距离小于500时显示回到顶部按钮
  366. this.isTop = false;
  367. }
  368. this.old.scrollTop = e.detail.scrollTop
  369. }
  370. }
  371. }
  372. </script>
  373. <style>
  374. page {
  375. background-color: #F5F5F5;
  376. }
  377. .cart-list {
  378. background-color: #fff;
  379. border-top: 12upx solid #F5F5F5;
  380. }
  381. .topTip {
  382. display: flex;
  383. align-items: center;
  384. justify-content: space-between;
  385. padding: 20upx 36upx;
  386. border-bottom: 1px solid #F5F5F5;
  387. }
  388. .changewidth {
  389. color: #303133;
  390. font-size: 32upx;
  391. font-weight: 100!important;
  392. }
  393. .van-card__desc {
  394. font-size: 25rpx;
  395. color: #999!important;
  396. padding-top: 10rpx;
  397. }
  398. .priceClass {
  399. color:#303133!important;
  400. font-size: 36upx;
  401. font-weight: normal!important;
  402. }
  403. .van-card {
  404. background-color: #fff!important;
  405. }
  406. .shoplist {
  407. display: flex;
  408. justify-content: space-between;
  409. align-items: center;
  410. }
  411. .deleChange {
  412. border: 1px solid #C0C4CC;
  413. padding: 8upx;
  414. }
  415. </style>