敢为人鲜小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

487 lines
11 KiB

5 months ago
5 months ago
5 months ago
1 month ago
1 month ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
1 month ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
3 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="page">
  3. <!-- 导航栏 -->
  4. <navbar title=" " bgColor="#019245" color="#fff" />
  5. <!-- 搜索框 -->
  6. <view style="background-color: #fff; padding: 12rpx 20rpx 0rpx; ">
  7. <uv-search placeholder="搜索商品名" v-model="keyword" :showAction="false" actionText="" height="80rpx" animation
  8. bgColor="#F5F5F5" inputAlign="center" color="#000" placeholderColor="#979797"
  9. searchIconSize="50rpx"></uv-search>
  10. </view>
  11. <!-- 订单筛选 -->
  12. <view class="tabs">
  13. <uv-tabs :list="tabs" :activeStyle="{ color: '#019245'}" lineColor="#019245" :scrollable="false"
  14. :inactiveStyle="{color: 'black'}" lineHeight="6rpx" lineWidth="55rpx" :current="current"
  15. @click="clickTabs" />
  16. </view>
  17. <!-- 团餐列表 -->
  18. <view class="group-meal-list" v-if="identity">
  19. <view class="meal-item" v-for="(meal, index) in mealList" :key="meal.id">
  20. <view class="meal-name">{{ meal.title }}</view>
  21. <view class="meal-price">本单佣金合计: <text class="price-value">¥{{ levelInfo.amount || '0.00' }}</text>
  22. </view>
  23. <view class="meal-action">
  24. <button class="order-btn" @tap="viewOrder(meal)">查看订单</button>
  25. </view>
  26. </view>
  27. <view style="margin-top: 200rpx; min-width: 700rpx;">
  28. <uv-empty mode="order" v-if="mealList.length == 0" />
  29. </view>
  30. </view>
  31. <!-- 订单列表 -->
  32. <view class="order-list" v-else>
  33. <OrderItem v-for="(order, index) in orderList" :key="order.id" :order="order" @cancel="handleCancelOrder(order.id)"
  34. @pick="handlePickOrder(order.id)" @pay="handlePayOrder" @click="goToOrderDetail(order)" />
  35. <view style="margin-top: 200rpx; min-width: 700rpx;">
  36. <uv-empty mode="order" v-if="orderList.length == 0" />
  37. </view>
  38. </view>
  39. <!-- <view class="list">
  40. <view class="item" v-for="(item, index) in list" @tap="toOrderDetail(item.id)" :key="index">
  41. <view class="content" :key="index" v-for="(good, index) in item.commonOrderSkuList">
  42. <view class="top">
  43. <view class="service">
  44. {{ good.title }}
  45. </view>
  46. <view class="status">
  47. <text> {{ tabs[Number(item.state) + 1].name }}</text>
  48. </view>
  49. </view>
  50. <view class="main">
  51. <view class="left">
  52. <image mode="aspectFill" :src="good.image && good.image.split(',')[0]"></image>
  53. </view>
  54. <view class="right">
  55. <view class="text-hidden-1">
  56. 客户姓名{{item.name}}
  57. </view>
  58. <view class="text-hidden-1">
  59. 下单时间{{item.createTime}}
  60. </view>
  61. <view class="text-hidden-1">
  62. 联系电话{{item.phone}}
  63. </view>
  64. </view>
  65. </view>
  66. </view>
  67. <view class="bottom">
  68. <view class="price">
  69. <text class="total-title">总价格</text>
  70. <text class="unit"></text>
  71. <text class="num">{{item.price}}</text>
  72. <text class="c-unit"></text>
  73. </view>
  74. <view @tap.stop="toPayOrder(item)" class="btn" v-if="item.state == 0">
  75. 立即付款
  76. </view>
  77. <view @tap.stop="cancelOrder(item)" class="btn" v-if="item.state == 0">
  78. 取消订单
  79. </view>
  80. <view class="btn" @tap.stop="confirmOrder(item)" v-if="item.state == 2">
  81. 确认收货
  82. </view>
  83. <view @tap.stop="$refs.customerServicePopup.open()" class="btn" v-if="item.state > 0">
  84. 联系客服
  85. </view>
  86. </view>
  87. </view>
  88. <view style="
  89. margin-top: 20rpx;
  90. min-width: 700rpx;">
  91. <uv-empty mode="list" v-if="list.length == 0"></uv-empty>
  92. </view>
  93. </view> -->
  94. <customerServicePopup ref="customerServicePopup" />
  95. <tabber select="order" />
  96. </view>
  97. </template>
  98. <script>
  99. import {
  100. mapGetters
  101. } from 'vuex'
  102. import mixinsList from '@/mixins/list.js'
  103. import mixinsOrder from '@/mixins/order.js'
  104. import tabber from '@/components/base/tabbar.vue'
  105. import customerServicePopup from '@/components/config/customerServicePopup.vue'
  106. import OrderItem from '@/components/order/OrderItem.vue'
  107. export default {
  108. mixins: [mixinsList, mixinsOrder],
  109. components: {
  110. tabber,
  111. customerServicePopup,
  112. OrderItem
  113. },
  114. computed: {
  115. orderList() {
  116. return this.memberOrderList.filter(order => order.status == this.current)
  117. },
  118. mealList() {
  119. return this.leaderOrderList.filter(order => order.status == this.current)
  120. },
  121. tabs() {
  122. return this.identity ? this.tabMeal : this.tabOrder
  123. }
  124. },
  125. data() {
  126. return {
  127. keyword: '',
  128. tabOrder: [{
  129. name: '待支付'
  130. },
  131. {
  132. name: '待出餐'
  133. },
  134. {
  135. name: '送餐中'
  136. },
  137. {
  138. name: '待取餐'
  139. },
  140. {
  141. name: '已完成'
  142. }
  143. ],
  144. tabMeal: [{
  145. name: '待出餐'
  146. },
  147. {
  148. name: '已出餐'
  149. },
  150. {
  151. name: '待取餐'
  152. },
  153. {
  154. name: '已完成'
  155. }
  156. ],
  157. current: 0,
  158. memberOrderList: [],
  159. leaderOrderList: [],
  160. identity: uni.getStorageSync('identity')
  161. }
  162. },
  163. onLoad(args) {
  164. this.getData()
  165. },
  166. methods: {
  167. getData() {
  168. uni.showLoading({
  169. title: '加载中'
  170. })
  171. if (!this.identity) {
  172. this.$api('queryMemberOrderList', {}, res => {
  173. uni.hideLoading()
  174. if (res.code == 200) {
  175. this.memberOrderList = res.result.records
  176. }
  177. })
  178. }
  179. else {
  180. this.$api('queryLeaderOrderList', {}, res => {
  181. uni.hideLoading()
  182. if (res.code == 200) {
  183. this.leaderOrderList = res.result.records
  184. }
  185. })
  186. }
  187. },
  188. //点击tab栏
  189. clickTabs({
  190. index
  191. }) {
  192. if (index == 0) {
  193. delete this.queryParams.state
  194. } else {
  195. this.queryParams.state = index - 1
  196. }
  197. this.current = index
  198. },
  199. // 跳转到新订单详情页
  200. goToOrderDetail(order) {
  201. if (order.status === 'completed') {
  202. this.$utils.navigateTo({
  203. url: '/pages_order/order/newOrderDetail?id=' + order.id + '&status=' + order.status
  204. })
  205. } else {
  206. this.$utils.navigateTo({
  207. url: '/pages_order/order/newOrderDetail?id=' + order.id + '&status=' + order.status_dictText
  208. })
  209. }
  210. },
  211. // 查看团餐订单
  212. viewOrder(meal) {
  213. this.$utils.navigateTo({
  214. url: '/pages_order/order/groupMealDetail?id=' + meal.id + '&status=' + meal.status
  215. })
  216. },
  217. // 根据状态筛选订单
  218. // filterOrdersByStatus(index) {
  219. // this.loadMockOrders() // 先重置数据
  220. // // if (index === 0) return // 全部订单不需要筛选
  221. // const targetStatus = this.statusMap[index]
  222. // if (targetStatus) {
  223. // this.orderList = this.orderList.filter(order => order.status === targetStatus)
  224. // this.groupMeals = this.groupMeals.filter(meal => meal.status === targetStatus)
  225. // }
  226. // },
  227. // // 处理取消订单
  228. handleCancelOrder(orderId) {
  229. uni.showModal({
  230. title: '提示',
  231. content: '确定要取消订单吗?',
  232. confirmColor: '#019245',
  233. success: (res) => {
  234. if (res.confirm) {
  235. // 模拟取消订单API调用
  236. this.$api('deleteMemberOrderById', {
  237. memberOrderId: orderId,
  238. }, res => {
  239. if (res.code == 200){
  240. uni.showToast({
  241. title: '订单已取消',
  242. icon: 'success'
  243. })
  244. this.getData()
  245. }
  246. })
  247. }
  248. }
  249. })
  250. },
  251. // 处理支付订单
  252. // handlePayOrder(orderId) {
  253. // uni.showToast({
  254. // title: '正在跳转支付...',
  255. // icon: 'loading'
  256. // })
  257. // // 模拟支付操作,实际项目中应调用支付API
  258. // setTimeout(() => {
  259. // uni.hideToast()
  260. // this.$api('payOrder', {
  261. // orderId: orderId,
  262. // payType: 0
  263. // }, res => {
  264. // if (res.code == 200) {
  265. // uni.showToast({
  266. // title: '支付成功',
  267. // icon: 'success'
  268. // })
  269. // }
  270. // })
  271. // // 更新订单状态
  272. // const orderIndex = this.orderList.findIndex(item => item.id === orderId)
  273. // if (orderIndex !== -1) {
  274. // this.orderList[orderIndex].status = 'processing'
  275. // // 如果当前标签页不是全部或待发货,则移除该订单
  276. // if (this.current !== 0 && this.current !== 2) {
  277. // this.orderList.splice(orderIndex, 1)
  278. // }
  279. // }
  280. // }, 1500)
  281. // },
  282. // 处理取餐完成
  283. handlePickOrder(orderId) {
  284. uni.showModal( {
  285. title: '提示',
  286. content: '确定取餐完成?',
  287. confirmColor: '#019245',
  288. success: (res) => {
  289. if (res.confirm) {
  290. this.$api('finishMemberOrderById', {
  291. memberOrderId: orderId
  292. }, res => {
  293. if (res.code === 200) {
  294. uni.showToast({
  295. title: '取餐完成',
  296. icon: 'success',
  297. duration: 2000
  298. })
  299. this.getData()
  300. }
  301. })
  302. }
  303. }
  304. })
  305. }
  306. }
  307. }
  308. </script>
  309. <style scoped lang="scss">
  310. .page {}
  311. .tabs {
  312. background: #fff;
  313. padding-bottom: 4rpx;
  314. }
  315. .order-list {
  316. padding: 0 20rpx;
  317. // position: relative;
  318. }
  319. /* 团餐列表样式 */
  320. .group-meal-list {
  321. padding: 20rpx;
  322. }
  323. .meal-item {
  324. display: flex;
  325. justify-content: space-between;
  326. align-items: center;
  327. padding: 30rpx 20rpx;
  328. background-color: #fff;
  329. margin-bottom: 20rpx;
  330. border-radius: 10rpx;
  331. }
  332. .meal-info {
  333. flex: 1;
  334. }
  335. .meal-name {
  336. font-size: 32rpx;
  337. font-weight: 500;
  338. margin-bottom: 10rpx;
  339. }
  340. .meal-price {
  341. font-size: 28rpx;
  342. color: $uni-color;
  343. background-color: #ECFEF4;
  344. padding: 10rpx 20rpx;
  345. border-radius: 10rpx;
  346. }
  347. .price-value {
  348. margin-left: 10rpx;
  349. font-weight: 500;
  350. }
  351. .meal-action {
  352. margin-left: 20rpx;
  353. }
  354. .order-btn {
  355. background-color: $uni-color;
  356. color: #fff;
  357. font-size: 28rpx;
  358. padding: 10rpx 30rpx;
  359. border-radius: 30rpx;
  360. line-height: 1.5;
  361. min-width: 160rpx;
  362. }
  363. .list {
  364. .item {
  365. width: calc(100% - 40rpx);
  366. background-color: #fff;
  367. margin: 20rpx;
  368. box-sizing: border-box;
  369. border-radius: 16rpx;
  370. padding: 30rpx;
  371. .content {
  372. .top {
  373. display: flex;
  374. justify-content: space-between;
  375. align-items: center;
  376. font-size: 34rpx;
  377. .status {
  378. font-weight: 600;
  379. color: #FFAC2F;
  380. flex-shrink: 0;
  381. margin-left: 20rpx;
  382. }
  383. }
  384. .main {
  385. display: flex;
  386. margin: 20rpx 0rpx;
  387. .left {
  388. display: flex;
  389. align-items: center;
  390. justify-content: center;
  391. width: 180rpx;
  392. height: 180rpx;
  393. image {
  394. width: 95%;
  395. height: 95%;
  396. border-radius: 10rpx;
  397. }
  398. }
  399. .right {
  400. display: flex;
  401. flex-direction: column;
  402. justify-content: space-between;
  403. width: calc(100% - 200rpx);
  404. color: #777;
  405. font-size: 26rpx;
  406. padding: 30rpx 20rpx;
  407. box-sizing: border-box;
  408. margin-left: 20rpx;
  409. border-radius: 10rpx;
  410. background-color: #F8F8F8;
  411. }
  412. }
  413. }
  414. .bottom {
  415. display: flex;
  416. justify-content: space-between;
  417. font-size: 25rpx;
  418. .price {
  419. .total-title {}
  420. .num {
  421. font-size: 36rpx;
  422. }
  423. .num,
  424. .unit,
  425. .c-unit {
  426. color: $uni-color;
  427. }
  428. }
  429. .btn {
  430. border: 1px solid #C7C7C7;
  431. padding: 10rpx 20rpx;
  432. border-radius: 40rpx;
  433. color: #575757;
  434. }
  435. }
  436. }
  437. }
  438. </style>