myOrderList.vue 11 KB

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