HNKDBOSS-WEB/hn-shop-uniapp/pages/firm/order/index.vue

<template>
  <view class="container" :style="appThemeStyle">
    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{native: true}" @down="downCallback" :up="upOption" @up="upCallback">
      <!-- tab栏 -->
      <u-tabs :list="tabs" :is-scroll="false" v-model="curTab" :active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab" />
      <!-- 订单列表 -->
      <view class="order-list">
        <!-- l-time-actvied  -待激活 -->
        <!-- l-time-complete -已经完成 -->
        <view
          class="order-item"
          :class="{'l-time-actvied': item.payordersfkt === 0 && item.payorderstatus == '已支付', 'l-time-complete': item.payordersfkt === 1 && item.payorderstatus == '已支付'}"
          v-for="(item, index) in list.data"
          :key="index"
        >
          <view class="item-top">
            <view class="item-top-left">
              <text class="order-time">{{ item.payordercreatedate }}</text>
            </view>
            <view class="item-top-right">
              <text class="state-text">{{ item.payorderstatus }}</text>
            </view>
          </view>

          <!-- 实名激活状态弹窗 -->
          <view class="actvied-center" v-if="userInfoData.customersfrz === 0">
            <text class="actvied-t1">此订单已经付款，订单待激活，请尽快绑定手机号码以及实名认证，信飞通会快速给您安排产品服务</text>
          </view>

          <!-- 已实名 待绑定手机号码 状态弹窗 -->
          <view class="actvied-center" v-if="userInfoData.customersfrz === 1">
            <text class="actvied-t1">此订单已经付款，订单待激活，请尽快绑定手机号码，信飞通会快速给您安排产品服务</text>
          </view>

          <!-- 已经完成 -->
          <view class="complete-center">
            <text class="actvied-t1">此订单已经激活，请注意查收产品账户密码，信飞通会通过绑定的手机号码进行发送</text>
          </view>

          <!-- 商品列表 -->
          <view class="goods-list" v-if="false" @click="handleTargetDetail(item.order_id)">
            <view class="goods-item" v-for="(goods, idx) in 1" :key="idx">
              <!-- 商品图片 -->
              <view class="goods-image">
                <image class="image" :src="goods.goods_image" mode="scaleToFill"></image>
              </view>
              <!-- 商品信息 -->
              <view class="goods-content">
                <view class="goods-title"><text class="twoline-hide">XX商品</text></view>
                <view class="goods-props clearfix">
                  <view class="goods-props-item" v-for="(props, idx) in goods.goods_props" :key="idx">
                    <text>{{ props.value.name }}</text>
                  </view>
                </view>
              </view>
              <!-- 交易信息 -->
              <view class="goods-trade">
                <view class="goods-price">
                  <text class="unit">￥</text>
                  <text class="value">{{ item.payorderprice }}</text>
                </view>
                <view class="goods-num">
                  <text>× 1</text>
                </view>
              </view>
            </view>
          </view>
          <!-- 订单合计 -->
          <view class="order-total" style="text-align: left">
            <text>共 1 件商品，总金额 </text>
            <text class="unit">￥</text>
            <text class="money">{{ item.payorderprice }}</text>
          </view>

          <!-- 订单号 -->
          <view class="order-total" style="text-align: left">
            <!-- <text class="order-time">账号状态：{{ item.payordersfkt ? '已经激活' : '待激活' }}</text
            ><br /> -->
            <text class="order-time">订单号：{{ item.payorderproductid }}</text
            ><br />
            <text class="order-time">商品id：{{ item.payorderproductid }}</text>
          </view>

          <!-- 订单操作 -->
          <view class="order-handle">
            <view class="btn-group clearfix">
              <!-- 未支付的订单 -->
              <view v-if="userInfoData.customersfrz === 0" class="btn-item redbt actviedbt" @click="handleService('pages/user/activatorder/index', item)">立刻实名认证</view>
              <view v-if="userInfoData.customersfrz === 1" class="btn-item redbt actviedbt" @click="handleService('pages/user/activatorder/index', item)">立刻绑定手机号</view>
              <!-- <view class="btn-item" @click="onCancel(item.order_id)">申请取消</view> -->
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </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'
import * as AppApi from '@/api/app'
import storage from '@/utils/storage'

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

// tab栏数据
const tabs = [
  {
    name: `全部`,
    value: 'all',
    key: ''
  },
  {
    name: `待支付`,
    value: 'payment',
    key: '待支付'
  },
  // {
  //   name: `待发货`,
  //   value: 'delivery'
  // },
  // {
  //   name: `待收货`,
  //   value: 'received'
  // },
  {
    name: `已支付`,
    value: 'comment',
    key: '已支付'
  }
]

export default {
  mixins: [MescrollMixin],
  data() {
    return {
      // 枚举类
      DeliveryStatusEnum,
      DeliveryTypeEnum,
      OrderStatusEnum,
      PayStatusEnum,
      ReceiptStatusEnum,
      userInfoData: {},
      // 当前页面参数
      options: {dataType: 'all'},
      // tab栏数据
      tabs,
      // 当前标签索引
      curTab: 0,
      // 订单列表数据
      list: getEmptyPaginateObj(),

      // 上拉加载配置
      upOption: {
        // 首次自动执行
        auto: true,
        // 每页数据的数量; 默认10
        page: {size: pageSize},
        // 数量要大于4条才显示无更多数据
        noMoreSize: 4,
        // 空布局
        empty: {
          tip: '亲，暂无订单记录'
        }
      },
      // 控制onShow事件是否刷新订单列表
      canReset: false
    }
  },

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

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

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

  methods: {
    // 初始化当前选中的标签
    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
     */
    async upCallback(page) {
      const app = this
      // 设置列表数据

      // 获取支付数据
      const params = {
        pageindex: page.num,
        rows: page.size,
        'payorderopenid.value': storage.get('wx_openid'),
        'payorderstatus.value': this.tabs[app.curTab].key || '',
        pagevalue: 299
      }
      const {Data: res} = await AppApi.getPalList(params)

      const curPageLen = res.Data.length
      const totalSize = res.Total
      app.mescroll.endBySize(curPageLen, totalSize)

      // const newList = app.initList({data: res.Data})
      app.list.data = getMoreListData({data: res.Data}, app.list, page.num)

      // 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
      console.log('获取订单列表')
      // 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() {
      console.log('刷新订单列表')
      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()
            })
          }
        }
      })
    },

    // 跳转到服务页面
    handleService(url, item) {
      this.$navTo(url, {payorderid: item.payorderid, payordercustomerid: item.payordercustomerid})
    },

    // 点击去支付
    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>
// 待激活
.actvied-center {
  display: none;
  color: #fa2209;
  margin-bottom: 10rpx;
}
.actviedbt {
  display: none;
}
.l-time-actvied {
  background: #fff2f2 !important;
  border: 1px solid #fa2209;
  .actvied-center {
    display: flex;
  }
  .actviedbt {
    display: block;
  }
}

// 已经激活
.complete-center {
  display: none;
  color: #4caf50;
  margin-bottom: 10rpx;
}
.l-time-complete {
  border: 1px solid #4caf50;
  .complete-center {
    display: flex;
  }
}

.redbt {
  background: #fa2209;
  color: #fff !important;
  border: none !important;
}
// 项目内容
.order-item {
  margin: 20rpx auto 20rpx auto;
  padding: 30rpx 30rpx;
  width: 94%;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  background: #fff;
}

// 项目顶部
.item-top {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  margin-bottom: 40rpx;

  .order-time {
    color: #777;
  }

  .state-text {
    color: $main-bg;
  }
}

// 商品列表
.goods-list {
  // 商品项
  .goods-item {
    display: flex;
    margin-bottom: 40rpx;

    // 商品图片
    .goods-image {
      width: 180rpx;
      height: 180rpx;

      .image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
    }

    // 商品内容
    .goods-content {
      flex: 1;
      padding-left: 16rpx;
      padding-top: 16rpx;

      .goods-title {
        font-size: 26rpx;
        max-height: 76rpx;
      }

      .goods-props {
        margin-top: 14rpx;
        color: #ababab;
        font-size: 24rpx;
        overflow: hidden;

        .goods-props-item {
          padding: 4rpx 16rpx;
          border-radius: 12rpx;
          background-color: #fcfcfc;
        }
      }
    }

    // 交易信息
    .goods-trade {
      padding-top: 16rpx;
      width: 150rpx;
      text-align: right;
      color: $uni-text-color-grey;
      font-size: 26rpx;

      .goods-price {
        vertical-align: bottom;
        margin-bottom: 16rpx;

        .unit {
          margin-right: -2rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}

// 订单合计
.order-total {
  font-size: 26rpx;
  vertical-align: bottom;
  text-align: right;
  line-height: 50rpx;

  .unit {
    margin-left: 8rpx;
    margin-right: -2rpx;
    font-size: 26rpx;
  }

  .money {
    font-size: 28rpx;
  }
}

// 订单操作
.order-handle {
  .btn-group {
    .btn-item {
      border-radius: 10rpx;
      padding: 8rpx 20rpx;
      margin-left: 15rpx;
      font-size: 26rpx;
      float: right;
      color: #383838;
      border: 1rpx solid #a8a8a8;

      &:last-child {
        margin-left: 0;
      }

      &.active {
        color: $main-bg;
        border: 1rpx solid $main-bg;
      }
    }
  }
}
</style>