yanzong_qianduan/pages/order/index.vue

<template>
  <view class="order" :style="appThemeStyle">
    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
      @up="upCallback">
	  <view class="search">
		  <view class="box">
			  <image src="/static/news/icon-search.png"></image>
			  <input type="search" placeholder="搜索订单" />
		  </view>
	  </view>
      <!-- tab栏 -->
      <u-tabs :list="tabs" bg-color="#fafafa" :is-scroll="false" height="120" font-size="32" :current="curTab" bar-width="0" active-color="#111111" :duration="0.2" @change="onChangeTab" />
      <!-- 订单列表 -->
      <view class="order-list">
		<view class="item">
			<view class="hd">
				<view class="a">
					<image class="icon" src="/static/news/icon-mall.jpg"></image>
					大白兔家电
				</view>
				<view class="b">卖家已发货</view>
			</view>
			<view class="bd" @click="goOrderDetail()">
				<view class="pic">
					<image src="/static/home/phone.jpg"></image>
				</view>
				<view class="info">
					<view class="a">iphone13 绿色 128GB</view>
					<view class="b">￥<text>7599</text></view>
				</view>
				<view class="num">
					x1
				</view>
			</view>
			<view class="fd">
				实付款￥<text>7599</text>
			</view>
			<view class="btn">
				<view class="a">更多</view>
				<view class="b">
					<view class="n">延长收货</view>
					<view class="n">查看物流</view>
					<view class="n n-1">确认收货</view>
				</view>
			</view>
		</view>
    </view> 
    </mescroll-body>
	<u-modal v-model="show" :show-cancel-button="true" title="确认删除订单？" confirm-color="#F55349">
		<view class="slot-content order-modal">
			<view class="content">删除之后订单无法恢复，无法处理您的售后问题 ，请慎重考虑</view>
			<view class="desc" @click="toggleImage()"><image v-if="isToggle" src="/static/invoice/select.png"></image><image v-else src="/static/invoice/select-on.png"></image>删除后将拼单信息设置为匿名</view>
		</view>
	</u-modal>
  </view>
</template>

<script>
  import {
    DeliveryStatusEnum,
    DeliveryTypeEnum,
    OrderStatusEnum,
    PayStatusEnum,
    ReceiptStatusEnum
  } from '@/common/enum/order'
  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
  import * as OrderApi from '@/api/order'

  // 每页记录数量
  const pageSize = 15

  // tab栏数据
  const tabs = [{
    name: `待付款`,
    value: 'payment'
  }, {
    name: `待发货`,
    value: 'delivery'
  }, {
    name: `待收货`,
    value: 'received'
  }, {
    name: `已完成`,
    value: 'received'
  },
  // {
  //   name: `待评价`,
  //   value: 'comment'
  // },
  ]

  export default {
    mixins: [MescrollMixin],
    data() {
      return {
		  isToggle: false,
		  show: true,
        // 枚举类
        DeliveryStatusEnum,
        DeliveryTypeEnum,
        OrderStatusEnum,
        PayStatusEnum,
        ReceiptStatusEnum,

        // 当前页面参数
        options: { dataType: 'all' },
        // tab栏数据
        tabs,
        // 当前标签索引
        curTab: 0,
        // 订单列表数据
        list: getEmptyPaginateObj(),

        // 上拉加载配置
        upOption: {
          // 首次自动执行
          auto: true,
          // 每页数据的数量; 默认10
          page: { size: pageSize },
          // 数量要大于4条才显示无更多数据
          noMoreSize: 4,
          // 空布局
          empty: {
            tip: '亲，暂无订单记录'
          }
        },
        // 控制onShow事件是否刷新订单列表
        canReset: false,
        // 核销二维码弹窗
        showQRCodePopup: false,
        // 核销二维码图片url (通过后端获取)
        qrcodeImage: '',
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 初始化当前选中的标签
      this.initCurTab(options)
      // 注册全局事件订阅: 是否刷新订单列表
      uni.$on('syncRefresh', canReset => {
        this.canReset = canReset
      })
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      this.canReset && this.onRefreshList()
      this.canReset = false
    },

    /**
     * 生命周期函数--监听页面的卸载
     */
    onUnload() {
      // 卸载全局事件订阅
      uni.$off('syncRefresh')
    },

    methods: {
		goOrderDetail(){
			uni.navigateTo({
				url:'/pages/order/detail',
			})
		},
		toggleImage() {
			this.isToggle = !this.isToggle
		},
      // 初始化当前选中的标签
      initCurTab(options) {
        const app = this
        if (options.dataType) {
          const index = app.tabs.findIndex(item => item.value == options.dataType)
          app.curTab = index > -1 ? index : 0
        }
      },

      /**
       * 上拉加载的回调 (页面初始化时也会执行一次)
       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
       * @param {Object} page
       */
      upCallback(page) {
        const app = this
        // 设置列表数据
        app.getOrderList(page.num)
          .then(list => {
            const curPageLen = list.data.length
            const totalSize = list.data.total
            app.mescroll.endBySize(curPageLen, totalSize)
          })
          .catch(() => app.mescroll.endErr())
      },

      // 获取订单列表
      getOrderList(pageNo = 1) {
        const app = this
        return new Promise((resolve, reject) => {
          OrderApi.list({ dataType: app.getTabValue(), page: pageNo }, { load: false })
            .then(result => {
              // 合并新数据
              const newList = app.initList(result.data.list)
              app.list.data = getMoreListData(newList, app.list, pageNo)
              resolve(newList)
            })
        })
      },

      // 初始化订单列表数据
      initList(newList) {
        newList.data.forEach(item => {
          item.total_num = 0
          item.goods.forEach(goods => {
            item.total_num += goods.total_num
          })
        })
        return newList
      },

      // 获取当前标签项的值
      getTabValue() {
        return this.tabs[this.curTab].value
      },

      // 切换标签项
      onChangeTab(index) {
        const app = this
        // 设置当前选中的标签
        app.curTab = index
        // 刷新订单列表
        app.onRefreshList()
      },

      // 刷新订单列表
      onRefreshList() {
        this.list = getEmptyPaginateObj()
        setTimeout(() => {
          this.mescroll.resetUpScroll()
        }, 120)
      },

      // 取消订单
      onCancel(orderId) {
        const app = this
        uni.showModal({
          title: '友情提示',
          content: '确认要取消该订单吗？',
          success(o) {
            if (o.confirm) {
              OrderApi.cancel(orderId)
                .then(result => {
                  // 显示成功信息
                  app.$toast(result.message)
                  // 刷新订单列表
                  app.onRefreshList()
                })
            }
          }
        });
      },

      // 确认收货
      onReceipt(orderId) {
        const app = this
        uni.showModal({
          title: '友情提示',
          content: '确认收到商品了吗？',
          success(o) {
            if (o.confirm) {
              OrderApi.receipt(orderId)
                .then(result => {
                  // 显示成功信息
                  app.$success(result.message)
                  // 刷新订单列表
                  app.onRefreshList()
                })
            }
          }
        });
      },

      // 获取核销二维码
      onExtractQRCode(orderId) {
        const app = this
        OrderApi.extractQrcode(orderId, { channel: app.platform })
          .then(result => {
            app.qrcodeImage = result.data.qrcode
            app.showQRCodePopup = true
          })
      },

      // 点击去支付
      onPay(orderId) {
        this.$navTo('pages/checkout/cashier/index', { orderId })
      },

      // 跳转到订单详情页
      handleTargetDetail(orderId) {
        this.$navTo('pages/order/detail', { orderId })
      },

      // 跳转到订单评价页
      handleTargetComment(orderId) {
        this.$navTo('pages/order/comment/index', { orderId })
      }

    },

  }
</script>

<style lang="scss" scoped>
	.order{
		.search{
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			padding: 20rpx 26rpx 20rpx 48rpx;
			box-sizing: border-box;
			.box{
				padding: 15rpx 25rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				background: #F3F3F3;
				border-radius: 60rpx;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 22rpx;
				}
				input{
					flex: 1;
					font-size: 28rpx;
					line-height: 30rpx;
				}
			}
		}
		&-list{
			padding: 0 30rpx 30rpx;
			overflow: hidden;
			.item{
				background: #FFFFFF;
				padding: 0 25rpx;
				border-radius: 10rpx;
				margin-top: 30rpx;
				&:first-child{
					margin-top: 0;
				}
				.hd{
					padding: 24rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					overflow: hidden;
					.a{
						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
						padding-right: 30rpx;
						position: relative;
						image{
							width: 40rpx;
							height: 40rpx;
							margin-right: 24rpx;
						}
						&::after{
							content: "";
							width: 16rpx;
							height: 16rpx;
							border-top: 1px solid #818181;
							border-left: 1px solid #818181;
							position: absolute;
							right: 0;
							top: 14rpx;
							z-index: 1;
							transform: rotate(135deg);
						}
					}
					.b{
						font-size: 24rpx;
						font-weight: 400;
						color: #F21A1C;
					}
				}
				.bd{
					display: flex;
					align-items: flex-start;
					overflow: hidden;
					.pic{
						width: 145rpx;
						height: 135rpx;
						margin-right: 20rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}
					.info{
						flex: 1;
						overflow: hidden;
						.a{
							text-align: left;
							font-size: 28rpx;
							font-weight: 400;
							color: #1E1E1E;
							height: 90rpx;
						}
						.b{
							text{
								font-size: 36rpx;
								font-weight: 600;
							}
							font-size: 24rpx;
							color: #F21A1C;
						}
					}
					.num{
						margin-left: 20rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #1E1E1E;
					}
				}
				.fd{
					display: flex;
					align-items: baseline;
					justify-content: flex-end;
					font-size: 24rpx;
					font-weight: 500;
					color: #1E1E1E;
					text{
						font-size: 36rpx;
					}
				}
				.btn{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 0;
					overflow: hidden;
					.a{
						font-size: 28rpx;
						font-weight: 400;
						color: #A59E9E;
					}
					.b{
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						overflow: hidden;
						.n{
							width: 148rpx;
							line-height: 56rpx;
							background: #FFFFFF;
							border-radius: 56rpx;
							opacity: 1;
							border: 1px solid #DFDFDF;
							margin-left: 6rpx;
							text-align: center;
							font-size: 24rpx;
							font-weight: 400;
							color: #1E1E1E;
							&-1{
								border-color: #F21A1C;
								color: #F21A1C;
							}
						}
					}
				}
				
			}
		}
		&-modal{
			padding: 50rpx;
			position: relative;
			.content{
				font-size: 28rpx;
				font-weight: 400;
				line-height: 50rpx;
				color: #4C4C4C;
			}
			.desc{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #9F9F9F;
				justify-content: center;
				margin-top: 20rpx;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>