fangliaoxiaochengxv/subPages/storeConsumption/storeConsumptionOrder.vue

<script>
import {expenseDetail, expenseList, expensePay} from "../../common/api";
import UCodeInput from "../../components/uview-ui/components/u-code-input/u-code-input.vue";
import {getCustomerInfo} from "../../common/api/user";

export default {
  name: "storeConsumptionOrder",
  components: { UCodeInput},
  data() {
    return {
      orderNo: '',
      goodsList: [
        {}, {}
      ],
      pwd:"",
      show: false,
      userInfo: {},
      customerInfo: {balance_num:0},
      detailDataList: [],
      pageParams: {
        page: 1,
        pageSize: 5,
      },
      topData: {
        top: 0,
        height: 0
      },
    }
  },
  onLoad(options) {
    this.orderNo = options.orderNo
    console.log(
        'options',
        options
    )
    // const mData = uni.getStorageSync('selectTaskData') || undefined
  },
  onReachBottom() {
    this.expenseDetail()
  },
  onShow() {
    const topData = uni.getMenuButtonBoundingClientRect()
    this.topData.top = topData.top
    this.topData.height = topData.height
    const userInfo = uni.getStorageSync("userInfo");
    this.userInfo = JSON.parse(userInfo);
    this.expenseDetail(true)
    this.getCustomerInfo()
  },
  methods: {
    getCustomerInfo(){
      getCustomerInfo().then(res => {
        this.customerInfo = res.data||{}
        if (this.customerInfo){
          this.customerInfo.balance_total = this.customerInfo.balance_total ? parseFloat(this.customerInfo.balance_total) : 0;
          this.customerInfo.balance_used = this.customerInfo.balance_used ? parseFloat(this.customerInfo.balance_used) : 0;
          this.customerInfo.balance_num = this.customerInfo.balance_total - this.customerInfo.balance_used;
        }
      })
    },
    expenseDetail(initFlag) {
      if (!initFlag) {
        if (this.pageParams.page * this.pageParams.pageSize < this.total) {
          this.pageParams.page++
        } else {
          return
        }
      } else {
        this.pageParams.page = 1
        this.total = 0
        this.detailDataList = []
      }
      this.$api.expenseList(this.pageParams).then(res => {
        this.detailDataList = res.data.list
        this.total = res.data.page.total
      })
    },

    toHome() {
      uni.switchTab({
        url: '/pages/home/index'
      })
    },

  }
}
</script>

<template>
  <view class="common-page">
    <view class="header-box" :style="{
				paddingTop: '60rpx',
		  }" id="headerBox" ref="headerBox">
      <view class="navbar-box display-flex-content-center" :style="{
					height: `${topData.height}px`,
					paddingTop: `${topData.top}px`,
					paddingBottom: '30rpx',
					color: '#666666',
					fontSize: '34rpx',
					fontWeight: 'bold'
				}">
        <view @click="toHome" style="position: absolute;left:30rpx">
          <u-icon size="20" name="arrow-left" color="#666666"></u-icon>
        </view>
        <text class="page-title">消费订单</text>
      </view>
    </view>

    <view class="content-box">
      <view class="common-card">
        <view class="display-flex-center" style="justify-content: space-between;">
          <view class="display-flex-center">
            <image style="width: 32rpx;height: 32rpx;" :src="require('../static/store-2.png')">
            </image>
            <text style="margin-left: 16rpx" class="color-333 fs14">账户余额:</text>
          </view>
          <text style="margin-left: 16rpx" class="color-333 fw700 fs14">￥{{ customerInfo.balance_num }}</text>
        </view>
      </view>
      <view class="common-card">
        <view  v-for="(item, index) in detailDataList" :key="index">
          <view class="display-flex-center"  >
            <image style="width: 56rpx;height: 56rpx; margin-right: 16rpx" :src="require('../static/store-3.png')">
            </image>
            <view class="flex-center-column" style="width: 100%">
              <text class="color-333 lh20 fs13 fw400" style="width: 100%">消费单号：{{ item.order_no }}</text>
              <view class="display-flex-center mt6"   style="justify-content: space-between;width: 100%">
                <text class="color-888 lh16 fs12 fw400 " >{{ item.created_at }}</text>
                <text class="color-333 lh20 fs14 fw400 " >- ￥{{ item.amount_real }}</text>
              </view>
            </view>
          </view>
          <u-divider  v-if="detailDataList.length>0 &&  index <(detailDataList.length-1)" :dashed="true"></u-divider>
        </view>

      </view>
    </view>

  </view>
</template>


<style lang="scss" scoped>

.page-title{
  font-weight: 400;
  font-size: 36rpx;
  color: #333333;
  line-height: 50rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}


.common-page {
  height: 100vh;
  overflow-y: auto;
  // padding: 20rpx;
  color: #2C2C2C;
  padding-bottom: 188rpx;
  box-sizing: border-box;
}







.content-box {
  padding: 20rpx;
}


.navbar-box {
  position: relative;
}





</style>