myOrderList.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. <template>
  2. <view class="container">
  3. <view class="tab-h flex flex-nowarp flex-y-center">
  4. <view :class="['item',tabActive == 1?'active':'']" :style="[tabActive == 1?{color:setColor}:'']"
  5. @click="changeTab(1)">待付款</view>
  6. <view :class="['item',tabActive == 2?'active':'']" :style="[tabActive == 2?{color:setColor}:'']"
  7. @click="changeTab(2)">已支付</view>
  8. <view :class="['item',tabActive == 3?'active':'']" :style="[tabActive == 3?{color:setColor}:'']"
  9. @click="changeTab(3)">待收货</view>
  10. <view :class="['item',tabActive == 4?'active':'']" :style="[tabActive == 4?{color:setColor}:'']"
  11. @click="changeTab(4)">已完成</view>
  12. <view class="tab-h-border"
  13. :style="{'background-color':setColor,left:tabActive==1?'22%':tabActive==2?'47%':tabActive==3?'71.5%':'98%'}"></view>
  14. </view>
  15. <view class="tab-b">
  16. <no-none v-if="orderList.length<=0"></no-none>
  17. <block v-else>
  18. <block v-for="(item,index) in orderList" :key="index">
  19. <!-- 自提订单 -->
  20. <block v-if="tabActive==3">
  21. <navigator :url="`/pages/orderDetail/orderDetail?order_id=${item.id}`" v-if="item.state==3"
  22. class="item">
  23. <!-- block v-if="item.state==3" -->
  24. <view class="top flex flex-x-between flex-nowarp">
  25. <view class="order-info">
  26. <view class="order-title">
  27. {{item.storename}}({{item.type == 3?'自助结账':item.tablename}})
  28. </view>
  29. <view class="order-title" v-if="item.is_pay == 1&&item.state==3">
  30. 取单号:{{item.number||item.id}}
  31. </view>
  32. <view class="time">{{item.create_time}}</view>
  33. </view>
  34. <view class="order-status">
  35. <view>
  36. {{item.state==3?'打包带走':''}}
  37. </view>
  38. <view :style="{color:setColor}">
  39. {{
  40. item.cancel_status==2 ?'订单已退款':
  41. item.order_status== 0?'待支付':item.order_status== 1?'待配送':
  42. item.order_status== 2?'配送中':item.order_status== 3?'已完成':
  43. item.order_status== 4?'已取消':
  44. item.order_status== 5?'已退款':
  45. item.order_status== 6?'部分退款':
  46. item.order_status== 7?'待自提':''
  47. }}
  48. <!-- order_status订单状态 0:待支付 1:待配送 2:配送中 3:已完成 4:已取消 5:已退款 6:部分退款 7:待自提 -->
  49. </view>
  50. </view>
  51. </view>
  52. <view class="goods-list" v-if="item.type != 3">
  53. <view class="goods flex flex-x-between flex-nowarp flex-y-center"
  54. v-for="(goods,index2) in item.goods" :key="index2">
  55. <view class="text-nowarp">{{goods.name}} {{getGoodsSpec(goods.spec)}}</view>
  56. <view>×{{goods.num}}</view>
  57. <view class="rebate-info" v-if="goods.user_rebate == 1">会员折扣</view>
  58. <view>¥{{goods.total_price}}</view>
  59. </view>
  60. </view>
  61. <view class="total-block">
  62. <block v-if="item.type != 3">共 {{item.count}} 件商品,</block>实付:¥{{item.pay_price}}
  63. </view>
  64. </navigator>
  65. </block>
  66. <navigator v-else :url="`/pages/orderDetail/orderDetail?order_id=${item.id}`" class="item">
  67. <view class="top flex flex-x-between flex-nowarp">
  68. <view class="order-info">
  69. <view class="order-title">
  70. {{item.storename}}
  71. <block v-if="item.type == 3">
  72. ({{item.type == 3?'自助结账':item.tablename||''}})
  73. </block>
  74. <block v-if="item.type != 3 && item.state!=2 && item.tablename">
  75. ({{item.tablename}})
  76. </block>
  77. </view>
  78. <view class="order-title" v-if="item.is_pay == 1&&item.state!=2">
  79. 取单号:{{item.number||item.id}}
  80. </view>
  81. <view class="time">{{item.create_time}}</view>
  82. </view>
  83. <view class="order-status">
  84. <block v-if="item.type!=3">
  85. <!--type 3 ==自助结账 2==餐后付款
  86. state 2==外卖订单 1 ==店内就餐 3==打包带走; is_send 已配送 is_dd==1达达配送,2聚合配送-->
  87. <block v-if="item.state==2">
  88. <view>{{descFood.food2}}订单</view>
  89. <view :style="{color:setColor}">
  90. <block v-if="item.is_send==1&&item.is_dd==1">
  91. {{
  92. item.cancel_status==2 ?'订单已退款':
  93. item.order_status== 0?'待支付':
  94. item.order_status== 1?'待配送':
  95. item.order_status== 2?'配送中':
  96. item.order_status== 3?'已完成':
  97. item.order_status== 4?'已取消':
  98. item.order_status== 5?'已退款':
  99. item.order_status== 6?'部分退款':
  100. item.order_status== 7?'待自提':
  101. '达达配送'
  102. }}
  103. </block>
  104. <block v-if="item.is_send==1&&item.is_dd==2">
  105. {{
  106. item.cancel_status==2 ?'订单已退款':
  107. item.order_status== 0?'待支付':item.order_status== 1?'待配送':
  108. item.order_status== 2?'配送中':item.order_status== 3?'已完成':
  109. item.order_status== 4?'已取消':
  110. item.order_status== 5?'已退款':
  111. item.order_status== 6?'部分退款':
  112. item.order_status== 7?'待自提':
  113. '聚合配送'
  114. }}
  115. </block>
  116. <block v-if="item.is_dd==0&&item.is_send==0">
  117. {{
  118. item.cancel_status==2 ?'订单已退款':
  119. item.order_status== 0?'待支付':item.order_status== 1?'待配送':
  120. item.order_status== 2?'配送中':item.order_status== 3?'已完成':
  121. item.order_status== 4?'已取消':
  122. item.order_status== 5?'已退款':
  123. item.order_status== 6?'部分退款':
  124. item.order_status== 7?'待自提':
  125. '待配送'
  126. }}
  127. </block>
  128. </view>
  129. </block>
  130. <!-- {{item.cancel_status==2 ?'订单已退款': item.is_pay == 1?'订单已完成':'待支付'}} -->
  131. <block v-else>
  132. <view>
  133. {{item.state==1?descOrder.food1:item.state==3?descOrder.food2:''}}
  134. </view>
  135. <view :style="{color:setColor}">
  136. {{
  137. item.cancel_status==2 ?'订单已退款':
  138. item.order_status== 0?'待支付':item.order_status== 1?'待配送':
  139. item.order_status== 2?'配送中':item.order_status== 3?'已完成':
  140. item.order_status== 4?'已取消':
  141. item.order_status== 5?'已退款':
  142. item.order_status== 6?'部分退款':
  143. item.order_status== 7?'待自提':''
  144. }}
  145. </view>
  146. </block>
  147. </block>
  148. <block v-if="item.type==3">
  149. {{
  150. item.cancel_status==2 ?'订单已退款':
  151. item.order_status== 0?'待支付':item.order_status== 1?'待配送':
  152. item.order_status== 2?'配送中':item.order_status== 3?'已完成':
  153. item.order_status== 4?'已取消':
  154. item.order_status== 5?'已退款':
  155. item.order_status== 6?'部分退款':
  156. item.order_status== 7?'待自提':''
  157. }}
  158. </block>
  159. </view>
  160. </view>
  161. <view class="goods-list" v-if="item.type != 3">
  162. <view class="goods flex flex-x-between flex-nowarp flex-y-center"
  163. v-for="(goods,index2) in item.goods" :key="index2">
  164. <view class="text-nowarp">{{goods.name}} {{getGoodsSpec(goods.spec)}}</view>
  165. <view>×{{goods.num}}</view>
  166. <view>¥{{goods.total_price}}</view>
  167. </view>
  168. </view>
  169. <view class="total-block">
  170. <block v-if="item.type != 3">共 {{item.count}} 件商品,</block>实付:¥{{item.pay_price}}
  171. </view>
  172. </navigator>
  173. </block>
  174. <view class="no-more" v-if="is_bottom">
  175. ~没有更多了~
  176. </view>
  177. </block>
  178. </view>
  179. <view class="hg100">
  180. </view>
  181. <page-btm-bar :active="3" />
  182. </view>
  183. </template>
  184. <script>
  185. let hideLoading = true;
  186. import {
  187. mapState
  188. } from 'vuex'
  189. export default {
  190. data() {
  191. return {
  192. userInfo: {},
  193. tabActive: 1,
  194. page: 1,
  195. is_bottom: false,
  196. orderList: [],
  197. orderNum: 0,
  198. setColor: "",
  199. store_id:'',
  200. }
  201. },
  202. computed: {
  203. ...mapState(['descOrder','descFood'])
  204. },
  205. onLoad(e) {
  206. uni.hideTabBar();
  207. this.userInfo = uni.getStorageSync('userInfo');
  208. this.store_id=this.$store.state.store_id;
  209. this.tabActive = this.$store.state.tabActive;
  210. console.log(this.tabActive)
  211. // e.tabActive ? e.tabActive : 1;
  212. uni.setNavigationBarColor({
  213. frontColor: '#ffffff',
  214. backgroundColor: this.$store.state.color,
  215. })
  216. this.setColor = this.$store.state.color;
  217. },
  218. // onReady() {
  219. // uni.getSystemInfo({
  220. // success: (e) => {
  221. // console.log("getSystemInfo", e)
  222. // }
  223. // })
  224. // },
  225. onShow() {
  226. this.getMyOrderList(1);
  227. },
  228. onReachBottom() {
  229. if (!this.is_bottom) {
  230. this.getMyOrderList(this.page + 1)
  231. }
  232. },
  233. onShareAppMessage() {},
  234. onPullDownRefresh() {
  235. this.orderList = [];
  236. this.getMyOrderList(1)
  237. },
  238. onShareTimeline() {},
  239. methods: {
  240. getGoodsSpec(spec) {
  241. spec = spec.split(',')
  242. let specList = []
  243. for (let i in spec) {
  244. specList.push(spec[i].split(':')[1])
  245. }
  246. return specList.join(',')
  247. },
  248. changeTab(index) {
  249. if (index != this.tabActive) {
  250. this.tabActive = index
  251. this.getMyOrderList(1)
  252. }
  253. },
  254. getMyOrderList(page) {
  255. this.$http.request('xcx/orderlists', {
  256. user_id: this.userInfo.id,
  257. page: page,
  258. store_id:this.store_id,
  259. type: this.tabActive == 3 ? 1 : this.tabActive
  260. }, "", "", hideLoading).then(res => {
  261. if (page == 1) {
  262. this.orderNum = res.data.count
  263. this.orderList = res.data.list.length ? res.data.list : []
  264. } else if (res.data.list && res.data.list.length) {
  265. this.orderList = this.orderList.concat(res.data.list)
  266. this.page++
  267. }
  268. if (res.data.list.length == 0) {
  269. this.is_bottom = true
  270. } else {
  271. this.is_bottom = false
  272. }
  273. })
  274. },
  275. }
  276. }
  277. </script>
  278. <style lang="scss">
  279. page {
  280. background-color: #eee;
  281. }
  282. .text-nowarp {
  283. width: 55%;
  284. }
  285. .hg100 {
  286. height: 100rpx;
  287. height: calc(100rpx + constant(safe-area-inset-bottom));
  288. height: calc(100rpx + env(safe-area-inset-bottom));
  289. }
  290. .tab-h {
  291. background-color: #fff;
  292. position: sticky;
  293. top: 0;
  294. z-index: 900;
  295. box-shadow: 0 10rpx 20rpx #eee;
  296. }
  297. .tab-h .item {
  298. height: 100rpx;
  299. line-height: 100rpx;
  300. text-align: center;
  301. font-size: 30rpx;
  302. font-weight: 500;
  303. flex: none;
  304. width: 25%;
  305. }
  306. .tab-h .item.active {
  307. color: $theme-color;
  308. }
  309. .tab-h .tab-h-border {
  310. height: 4rpx;
  311. width: 10%;
  312. background-color: $theme-color;
  313. border-radius: 2rpx;
  314. position: absolute;
  315. bottom: 0;
  316. margin-left: -15%;
  317. transition: left 0.3s;
  318. }
  319. .tab-b {
  320. padding: 20rpx;
  321. }
  322. .tab-b .item {
  323. background-color: #fff;
  324. padding: 20rpx 20rpx 0;
  325. border-radius: 10rpx;
  326. margin-bottom: 20rpx;
  327. }
  328. .tab-b .item .top {
  329. padding: 10rpx 0 20rpx;
  330. }
  331. .tab-b .item .top .order-title {
  332. font-size: 30rpx;
  333. font-weight: bold;
  334. color: #555;
  335. }
  336. .tab-b .item .top .time {
  337. font-size: 26rpx;
  338. color: #555;
  339. line-height: 1;
  340. margin-top: 10rpx;
  341. }
  342. .tab-b .item .top .order-status {
  343. font-size: 26rpx;
  344. color: #666;
  345. text-align: center;
  346. }
  347. .tab-b .item .goods-list {
  348. padding: 0 20rpx;
  349. border-top: 1rpx solid #eee;
  350. }
  351. .tab-b .item .goods {
  352. padding: 20rpx 0;
  353. font-size: 26rpx;
  354. color: #666;
  355. }
  356. .tab-b .item .total-block {
  357. height: 100rpx;
  358. line-height: 100rpx;
  359. text-align: right;
  360. border-top: 1rpx solid #eee;
  361. font-size: 30rpx;
  362. font-weight: bold;
  363. color: #555;
  364. }
  365. .rebate-info {
  366. display: inline-block;
  367. font-size: 24rpx;
  368. padding: 2rpx 10rpx;
  369. background: red;
  370. color: #fff;
  371. border-radius: 8rpx;
  372. }
  373. </style>