<template>
  <div class="uc_container">
    <view class="head"></view>
    <img
      class="bianji"
      src="https://img.shuimuai.com/m_btn_bianji%402x.png"
      @click="to_edit"
    />
    <view class="user">
      <view class="up">
        <view class="left">
          <img :src="userinfo.portrait" />
          <view>
            <text>
              <text>{{ userinfo.user_name }}</text>
            </text>
            <text v-if="userinfo.level != 1">{{ userinfo.level_name }}&emsp;有效期至 {{ userinfo.validity_time }}</text>
            <text v-else>{{ userinfo.level_name }}</text>
          </view>
        </view>
        <!--        <view class="right">-->
        <!--          <img src="https://img.shuimuai.com/m_icon_xiaoxi%402x.png"/>-->
        <!--          <text>消息中心</text>-->
        <!--        </view>-->
      </view>
      <view class="down">
        <view class="down_num">{{userinfo.ratio}}</view>
        <view>
          <!-- <img src="https://img.shuimuai.com/m_icon_jifen%402x.png"/>
          <text>积分</text> -->
          <text>智脑成长系数</text>
        </view>
      </view>
    </view>

    <van-row class="detail">
      <van-col
        span="6"
        offset="1"
      >
        <view>{{ userinfo.play_time }}</view>
        <view>可用时长(分钟)</view>
      </van-col>
      <van-col
        span="6"
        offset="2"
        @click="to_coupons"
      >
        <view>{{ userinfo.coupon }}</view>
        <view>已领券数量</view>
      </van-col>
      <van-col
        span="6"
        offset="2"
      >
        <view>{{ userinfo.experience }}</view>
        <view>次卡</view>
      </van-col>
    </van-row>
    <view class="detail flex justify-around">
      <!--      会员码-->
      <img
        src="https://img.shuimuai.com/m_btn_huiyuanma%402x.png"
        @click="to_vip_code"
      />
      <!--      会员权益-->
      <img
        src="https://img.shuimuai.com/m_btn_huiyuanquanyi%402x.png"
        @click="to_vip"
      />
      <!--      加入家庭组-->
      <img
        src="https://img.shuimuai.com/m_btn_jiatingzu%402x.png"
        @click="open_scan"
      />
    </view>

    <!--    菜单模块-->
    <van-cell-group class="menu">
      <van-cell
        title="我的订单"
        is-link
        url="/pages/user_center/orders/main"
      >
        <img
          src="https://img.shuimuai.com/web/icon/icon_dingdan.png"
          alt=""
          slot="icon"
          class="icon1"
        >
      </van-cell>
      <!--      <van-cell title="家庭组" icon="wap-home-o" is-link/>-->
      <van-cell
        title="联系客服"
        is-link
      >
        <img
          src="https://img.shuimuai.com/web/icon/icon_kefu.png"
          alt=""
          slot="icon"
          class="icon4"
        >
      </van-cell>
      <van-button
        open-type="contact"
        block
        custom-class="contact_button"
      >
        <div>
          <view>
            <van-icon name="service-o" />&nbsp;联系客服
          </view>
        </div>

      </van-button>
    </van-cell-group>
    <van-toast id="van-toast" />

  </div>
</template>

<script>
import { reload_userinfo } from "../../utils/user";

import Toast from "../../../static/vant/toast/toast";

var $this;
export default {
  name: "uc_container",
  components: {},
  data() {
    return {
      userinfo: {},
    };
  },
  methods: {
    to_edit() {
      mpvue.navigateTo({
        url: "/pages/user_center/edit/main",
      });
    },
    //跳转vip权益
    to_vip() {
      mpvue.navigateTo({
        url: "/pages/user_center/vip/main",
      });
    },
    //打开扫一扫
    open_scan() {
      Toast.fail("暂未开通");
      // mpvue.scanCode({
      //   onlyFromCamera: true
      // })
    },
    //跳转会员码
    to_vip_code() {
      mpvue.navigateTo({
        url: "/pages/user_center/vip_code/main",
      });
    },
    to_coupons() {
      mpvue.navigateTo({
        url: "/pages/coupons/main",
      });
    },
    to_agent() {
      if ($this.userinfo.level == 8 || $this.userinfo.level == 9) {
        Toast.fail("店员、店长不可进");
        return false;
      }
      mpvue.navigateTo({
        url: "/pages/agent/index/main",
      });
    },
  },
  mounted() {},
  created() {
    $this = this;
  },
  onLoad() {
    reload_userinfo($this);
  },
};
</script>

<style>
.contact_button {
  position: relative;
  bottom: 45px;
  opacity: 0;
}
</style>
<style scoped>
/* 头部椭圆 */
.head {
  width: 442px;
  height: 285px;
  background-color: #4b3ab0;
  border-radius: 50%;
  position: absolute;
  left: -34px;
  top: -155px;
  z-index: -1;
}

.user {
  width: 100%;
}

.user .up {
  width: 100%;
  height: 40px;
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.user .up .left {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: start;
}

.user .up .left image {
  width: 40px;
  height: 40px;
  margin-left: 17px;
  margin-right: 8px;
}

image.bianji {
  width: 43px;
  height: 18px;
  position: absolute;
  top: 9px;
  left: 155px;
}

.user .up .left view {
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.user .up .left view text:first-child {
  font-size: 15px;
  font-weight: bold;
}

.user .up .left view text:last-child {
  font-size: 13px;
}

.user .up .right {
  height: 40px;
}

.user .up .right image {
  width: 14px;
  height: 15px;
  vertical-align: middle;
  margin-right: 4px;
}

.user .up .right text {
  font-size: 12px;
  text-decoration: underline;
  margin-right: 10px;
}

.user .down {
  width: 100%;
  height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}
.user .down .down_num {
  margin: 5px 0;
}
.user .down image {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 2px;
}

.user .down view:first-child {
  font-size: 36px;
  color: #ffd800;
  font-weight: bold;
}

.user .down view:last-child {
  font-size: 15px;
  color: #c7c4d8;
  margin-top: -2px;
}

/* 详细数据 */
.detail {
  width: 100%;
  height: 102px;
  text-align: center;
  margin: 10px auto;
}

.detail view {
  color: #6c6c6c;
  font-size: 10px;
}

.detail view view:first-child {
  color: #000;
  font-size: 30px;
}

.detail image {
  width: 114px;
  height: 83px;
}

/* 菜单 */
.menu {
  width: 100%;
}

.menu image:first-child {
  width: 21px;
  height: 21px;
}

.menu image:last-child {
  width: 9px;
  height: 16px;
}

.contact_button {
  position: relative;
  bottom: 45px;
  opacity: 0;
}

.icon1 {
  width: 19px;
  height: 20px;
  padding: 0px 2px;
  margin: 0px 2px;
}

.icon2 {
  width: 20px;
  height: 23px;
  padding: 0px 2px;
  margin: 0px 2px;
}

.icon3 {
  width: 21px;
  height: 21px;
  padding: 0px 2px;
  margin: 0px 2px;
}

.icon4 {
  width: 17px;
  height: 20px;
  padding: 0px 2px;
  margin: 0px 2px;
}
</style>
