<template>
    <div class="container">
        <div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
            <div class="searchBox_add">
                <u-icon bold color="#fff" size="40" name="arrow-left" @click="back"></u-icon>
            </div>
        </div>

        <div class="mypoint">
            <div class="tit">我的积分</div>
            <div class="point">{{banlance}}</div>
            <div class="funList">
                <div class="funItem">
                    <image src="http://192.168.0.172:5500/local_fun1.png" mode="aspectFill"></image>
                    积分商城
                </div>
                <div class="funItem">
                    <image src="http://192.168.0.172:5500/local_fun2.png" mode="aspectFill"></image>
                    积分抽奖
                </div>
                <div class="funItem">
                    <image src="http://192.168.0.172:5500/local_fun3.png" mode="aspectFill"></image>
                    兑换优惠券
                </div>
            </div>
        </div>

        <div class="textHis">积分变动历史</div>
        <div class="HisList">
            <div class="HisItem" v-for="item in pointList">
                <div class="His_tit">
                    <div class="His_tit_left"></div>
                    <div class="His_tit_right">{{item.change_value}}</div>
                </div>

                <div class="His_time">
                    <div class="His_time_left">{{item.create_time}}</div>
                    <div class="His_time_right">{{item.change_reason}}</div>
                </div>
                <div class="his_remark">
                    相关单号#{{item.quick_payment_record.order_no}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    request,
    picUrl,
    uniqueByField,
    menuButtonInfo,
    NavgateTo
} from '../../../utils';

import {
    apiArr
} from '../../../api/v2local';


export default {
    data() {
        return {
            picUrl,
            top: "",
            localHeight: "",
            pointList:[],
            flag:false,
            banlance:"",
            page_num:1,
            page_size:10,
          
        }
    },
    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        this.localHeight = meun.height;
        this.getUserPoint()
        this.getPointList() 
    },
    onReachBottom() {
        if(this.flag){
            this.getPointList();
        }
	},

    methods: {
        async getUserPoint() {
            let that = this
            await request(apiArr.getUserPoints, "POST").then(res => {
                that.banlance = res.balance_after
            })
        },

        async getPointList(){
            let that = this
            await request(apiArr.getPointsList,"POST",{
                page_num:that.page_num,
                page_size:that.page_size
            }).then(res=>{
                if(res.rows.length == that.page_size){
                    that.flag = true
                }else{
                    that.flag = false
                }
                that.pointList = that.pointList.concat(res.rows)
                that.page_num++
            })
        },

    },


}
</script>

<style>
@import url("./index.css");
</style>
