<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <z-nav-bar title="我的积分" bgColor="#258feb" fontColor="#fff" > </z-nav-bar>
    <view class="ACTable"  >
      <!-- <u-tabs :list="tab_list" @click="tab_click" lineColor="#54a966  100% 100%"
				:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}" ></u-tabs> -->

      <!-- <u-tabs :list="tab_list_ios" @click="tab_click" lineColor="#54a966  100% 100%"
				:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}" v-if="!iosHide"></u-tabs> -->

      <view>
        <view class="AC_mes">
          <view class="wallet_title PM_font">积分</view>
          <view class="wallet_number">{{
            userMes.jf ? userMes.jf : 0
          }}</view>

          <!-- <text v-if="platform != 'ios'" class="AC_chong" @click="buPoint()"
            >充值</text
          > -->
        </view>
      
        <view style="padding: 30rpx; padding-top: 0">
          <view class="AC_con">
            <view class="AC_jilu PM_font">积分记录</view>
            <common-list
              :dataList="MoneyRecord"
              isCondition="true"
              isNoIcon="true"
              label="orderType"
            >
              <template slot="labelSlot" slot-scope="slotProps">
                <view class="label_content AC_List">
                  <view class="left">
                    <view class="title">{{ slotProps.row.orderType }}</view>
                  </view>
                  <view
                    :class="`right ${
                      slotProps.row.changeAmount > 0 ? 'Hot' : ''
                    }`"
                  >
                    <text v-if="slotProps.row.changeAmount > 0">+</text>
                    <text>{{ slotProps.row.changeAmount }}</text> </view
                  ><view
                    class="AC_mark"
                    v-if="slotProps.row.remark "
                    >{{ slotProps.row.remark}}</view
                  ><view class="AC_time">{{ slotProps.row.createTime }}</view>
                </view>
              </template>
            </common-list>
          </view>
        </view>
      </view>
      <!-- <view v-if="tab_muJian==1">
				<view class="couponList">
					<view v-for="(item,index) in couponTabs" @click="couponTabCLi(index)"
						:class="couponListTab==index?'couStyle':''">{{item.name}}</view>
				</view>
				<view>
					<view class="card" v-for="item in cardList">
						<view>
							<view class="content">
								<view :class="couponListTab==0?'page-group':'page-group grey'">
									<i class="fold-page"></i>
									<span class="page">优惠券</span>
								</view>
								<i class="dot-left"></i>
								<i class="dot-right"></i>
								<view class="coupon-detail">
									<view :class="couponListTab==0?'':'grey'">
										<span>￥</span>
										<span>{{item.coupons.amount}}</span>
									</view>
									<view>
										<view>{{item.coupons.couponName}}</view>
										<view>满{{item.coupons.useLevel}}元可用</view>
										<view>
											<span v-if="item.coupons.couponProType == 0">使用类型：商品类</span>
											<span v-if="item.coupons.couponProType == 1">使用类型：电子书</span>
										</view>
									</view>
									<view>
										<view v-if="couponListTab==0" @click="onPageJump('../bookShop/bookShopIndex')">
											立即使用</view>
									</view>
								</view>
							</view>
							<view class="footer">
								<view style="margin: 0 0 8rpx 0;">使用时间：{{item.coupons.takeEffectDate}} -
									{{item.coupons.expirationDate}}
								</view>
								<view>{{item.coupons.note}}</view>
								<view class="arrow"></view>
								<view class="arrow-up"></view>
							</view>
							<view class="ribbon" v-if="couponListTab==0">未使用</view>
							<view class="ribbon grey" v-if="couponListTab==1">已使用</view>
							<view class="ribbon grey" v-if="couponListTab==2">已过期</view>
						</view>
					</view>
					<view v-if="cardList.length==0" style="text-align: center;font-size: 30rpx;color: #666;">暂无代金券
					</view>
				</view>
			</view> -->

      <!-- <view>
        <view v-if="status == 0" style="text-align: center">
          <u-loading-icon style="display: inline-block"></u-loading-icon>
          <font
            style="
              vertical-align: super;
              margin-left: 10px;
              font-size: 26rpx;
              color: #909399;
            "
            >努力加载中</font
          >
        </view>
        <view v-if="status == 1">
          <u-divider text="全部加载完成"></u-divider>
        </view>
      </view> -->

      <view style="padding-bottom: 20rpx">
        <u-back-top
          :scroll-top="scrollTop"
          bottom="60"
          :customStyle="bgiStyle"
          :iconStyle="iconStyle"
        >
        </u-back-top>
      </view>
    </view>
    <music-play :playData="playData"></music-play>
  </view>
</template>

<script>
import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      playData: {},
      platform: null,
      urlList: {
        list: "common/jfTransactionDetails/getJfTransactionDetailsList",
      },
      tab_list: [
        {
          name: "天医币",
        },
      ],
      tab_list_ios: [
        {
          name: "优惠券",
        },
      ],
      couponTabs: [
        {
          name: "未使用",
        },
        {
          name: "已使用",
        },
        {
          name: "已过期",
        },
      ],
      cardList: [],
      couponListTab: 0,
      MoneyRecord: [],
      userMes: {},
      RecordScreen: {
        userid: "",
        page: 1,
        limit: 5,
      },
      scrollTop: 0,
      status: 3,
      totalPage: 0,
      totalCount: 0,
      tab_muJian: 0,
      bgiStyle: {
        background: "#bbe5d8",
      },
      iconStyle: {
        fontSize: "40rpx",
        fontWeight: "bold",
        color: "#54a966",
      },
    };
  },
  // 返回顶部
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },

  // 下拉刷新
  onReachBottom() {
    this.status = 0;
    if (this.RecordScreen.page < this.totalPage) {
      this.RecordScreen.page = this.RecordScreen.page + 1;
      setTimeout(() => {
        this.$http
          .post(this.urlList.list, {
            userId: this.userInfo.id,
          })
          .then((res) => {
            this.totalPage = res.page.totalPage;
            this.totalCount = res.page.totalCount;
            for (let i in res.page.list) {
              this.MoneyRecord.push(res.page.list[i]);
            }
          });
      }, 1000);
    } else {
      this.status = 1;
    }
  },

  //第一次加载
  onLoad(e) {
    // 隐藏原生的tabbar
    uni.hideTabBar();
    // #ifdef APP-PLUS
    this.platform = uni.getSystemInfoSync().platform;
    console.log("操纵系统", this.platform);
    // #endif
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  //页面显示
  onShow() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
    this.getData();
    // this.getCourpe();
  },
  components: {
    musicPlay,
  },
  //方法
  methods: {
    // 获取
    getData() {
      var data = {
        userId: this.userInfo.id,
      };
      if (!this.iosHide) {
        this.tab_muJian = 1;
      }
      // 用户详情
      if (this.userInfo.id != undefined) {
        this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
          this.userMes = res.user;
        });
      }
      $http
        .request({
          url: this.urlList.list,
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        // 充值记录

        .then((res) => {
          console.log("res at line 255:", res);
          this.MoneyRecord = res.transactionDetailsList;
          //   this.totalPage = res.page.totalPage;
          //   this.totalCount = res.page.totalCount;
        });
    },

    // 点击tab
    tab_click(e) {
      this.tab_muJian = e.index;
    },

    // 优惠券
    getCourpe() {
      this.$http
        .post(
          "/book/couponhistory/appGetUserCenterCoupon?userId=" +
            this.userInfo.id +
            "&useStatus=" +
            this.couponListTab
        )
        .then((res) => {
          // this.cardList = res.couponVos
          this.cardList = res.couponVos;
        });
    },
    // 切换优惠券
    couponTabCLi(e) {
      this.couponListTab = e;
      this.getCourpe();
    },

    // 充值天医币
    buPoint() {
      uni.navigateTo({
        url: "../peanut/reCharge",
      });
    },

    // 跳转
    onPageJump(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";

.ACTable {
  // padding: 20rpx 30rpx;

  .AC_mes {
    width: 100%;
    height: 400rpx;
    background-image: url("@/static/image/wallet.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // margin-top: 50rpx;
    padding: 160rpx 160rpx 100rpx 120rpx;
    box-shadow: 0 0px 10px 1px #d3d1d133;
    // background-color: #fff;
    border-radius: 15rpx;
    margin-bottom: 40rpx;
    position: relative;
    .wallet_title {
      color: #fff;
      font-size: 62rpx;
      line-height: 80rpx;
      font-weight: 600;
      text-align: center;
    }
    .wallet_number {
      color: #fff;
      font-size: 70rpx;
      line-height: 100rpx;
      font-weight: 500;
      text-align: center;
    }
  }

  .AC_con {
    background-color: #fff;
    overflow: hidden;
    // margin-top: 50rpx;
    // padding: 30rpx 30rpx;
    box-shadow: 0 0px 10px 1px #d3d1d133;

    border-radius: 15rpx;
    margin-bottom: 40rpx;
    font-size: 30rpx;
    padding-bottom: 30rpx;

    .AC_jilu {
      font-size: 42rpx;
      text-align: left;
      color: $themeColor;
      //   background-image: linear-gradient(90deg, #258feb 20%, #c3fade 100%);
      //   margin-bottom: 30rpx;
      padding: 30rpx 20rpx 20rpx;
    }

    .AC_List {
      overflow: hidden;
      .left {
        width: calc(100% - 120rpx) !important;
        font-weight: 700;
        float: left;
        color: #333;
        font-size: 32rpx;
        line-height: 60rpx;
      }
      .right {
        display: block;
        width: 100rpx !important;
        float: right;
        text-align: right;
        font-size: 32rpx;
        font-weight: 700;
        color: #333;
      }

      //   border-bottom: 1px solid #eee;
      //   padding: 40rpx 10rpx;

      .AC_title {
        font-size: 32rpx;
        margin-bottom: 20rpx;

        view {
          float: right;
          font-size: 34rpx;
          font-weight: bold;
        }
      }

      .AC_mark {
        font-size: 28rpx;
        margin-top: 20rpx;
        margin-bottom: 15rpx;
        // white-space: nowrap;
        color: #888;
        float: left;
      }

      .AC_time {
        color: #bababa;
        font-size: 28rpx;
      }
    }
  }

  .couponList {
    view {
      display: inline-block;
      padding: 0 0 25rpx 0;
      margin: 40rpx 0 40rpx 0;
      width: 33%;
      text-align: center;
      font-size: 30rpx;
    }

    .couStyle {
      border-bottom: 5rpx solid #54a966;
      color: #54a966;
      font-weight: bold;
    }
  }

  .card {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30rpx;
    padding-left: 10rpx;
    position: relative;
  }

  .card > view {
    background: #fff;
    border-radius: 5rpx;
  }

  .card .dot-left,
  .card .dot-right {
    display: block;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #f5f5f5;
    position: absolute;
    z-index: 999;
  }

  .card .dot-left {
    bottom: -6rpx;
    left: -6rpx;
  }

  .card .dot-right {
    bottom: -6rpx;
    right: -6rpx;
  }

  .card .page-group {
    position: absolute;
    top: 10rpx;
    left: -2rpx;
    width: 100%;
    max-width: 200rpx;

    .fold-page {
      display: block;
      width: 10rpx;
      height: 8rpx;
      background: #54a966;
      transform: skewY(-40deg);
      position: absolute;
      top: -5rpx;
      left: -8rpx;
      z-index: 0;
    }

    .page {
      position: absolute;
      z-index: 1;
      display: block;
      padding: 5rpx 20rpx 3rpx 20rpx;
      height: 40rpx;
      line-height: 40rpx;
      background: linear-gradient(137deg, #54a966 0%, #0d5e1e 100%);
      border-radius: 0 20rpx 20rpx 0;
      color: #fff;
      text-align: center;
      font-size: 24rpx;
      overflow: hidden;
      left: -8rpx;
    }
  }

  .card .page-group.grey {
    .fold-page {
      background: #c6c6c6;
    }

    .page {
      background: linear-gradient(137deg, #c6c6c6 0%, #999595 100%);
    }
  }

  .card .content {
    width: 100%;
    height: 180rpx;
    border-bottom: 1rpx dotted #f5f5f5;
    position: relative;
    z-index: 2;
  }

  .card .content .coupon-detail {
    display: flex;
    padding: 0 15rpx 0 20rpx;
  }

  .card .content .coupon-detail > view {
    height: 130rpx;
    display: flex;
    align-items: center;
  }

  .card .content .coupon-detail > view:first-child {
    color: #54a966;
    padding-top: 100rpx;
    width: 30%;
  }

  .card .content .coupon-detail > view.grey {
    color: #c6c6c6;
  }

  .card .content .coupon-detail > view:first-child > span:first-child {
    font-size: 30rpx;
    margin: 0 10rpx 0 0;
  }

  .card .content .coupon-detail > view:first-child > span:last-child {
    font-size: 70rpx;
  }

  .card .content .coupon-detail > view:last-child > view {
    color: #54a966;
    border: 1rpx solid #54a966;
    border-radius: 50rpx;
    font-size: 12px;
    line-height: 25px;
    width: 150rpx;
    height: 50rpx;
    margin: 100rpx 0 0 5rpx;
    text-align: center;
  }

  .card .coupon-detail > view:nth-child(2) {
    flex-direction: column;
    padding-top: 60rpx;
    width: 40%;
  }

  .card .coupon-detail > view:nth-child(2) > view {
    width: 100%;
  }

  .card .coupon-detail > view:nth-child(2) > view:first-child {
    color: #333;
    font-weight: bold;
    font-size: 25rpx;
    margin: 0 0 10rpx 0;
  }

  .card .coupon-detail > view:nth-child(2) > view:last-child {
    font-size: 12px;
    color: #adadad;
    margin-top: 5rpx;
  }

  .card .coupon-detail > view:nth-child(2) > view:last-child > view {
    transform: scale(0.8);
    margin-left: -14rpx;
  }

  .card {
    .footer {
      color: #999;
      font-size: 12px;
      padding: 30rpx 15rpx 30rpx 30rpx;
    }

    .ribbon {
      width: 160rpx;
      height: 40rpx;
      background: #54a966;
      position: absolute;
      right: -40rpx;
      top: 25rpx;
      transform: rotateZ(45deg);
      text-align: center;
      color: #fff;
      font-size: 20rpx;
      line-height: 44rpx;
    }

    .ribbon.grey {
      background: #c6c6c6;
    }
  }
}
.Hot {
  color: $themeColor !important;
}
.AC_chong {
	display: flex;
	align-items: center;
	justify-content: space-between;
  background-image: linear-gradient(90deg, #258feb 0%, #73ee9c 100%);
  color: #fff;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
  padding:20rpx 20rpx;
  font-size: 36rpx;
  font-weight: 800;
  text-align: right;
}
.rightArrow {
  width: 40rpx;
  height: 40rpx;
  float: right;
  margin-left: 10rpx;
  //   position: absolute;
  //   right: 30rpx;
  //   top: 20rpx;
}
</style>
