<style lang="scss">
.header {
  height: 342rpx;
  background-color: red;
  background: url('../../static/images/user/nav_bg.png') center center no-repeat;

  .history {
    margin-top: 50rpx;
  }

  .setting {
    position: relative;
    z-index: 22;
  }

  .share_wrapper {
    padding: 20rpx;
    margin-top: 10rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: linear-gradient(90deg, rgb(54, 55, 57), rgb(22, 22, 22));

    .left {
      .text {
        color: gold;
        padding-bottom: 20rpx;
      }
    }

    .btn_share {
      padding: 10rpx 14rpx;
      border-radius: 10rpx;
      background: linear-gradient(90deg, rgb(247, 246, 231), rgb(249, 220, 178));

      .text {
        margin-right: 4rpx;
      }
    }
  }
}

.nick_name {
  color: #000;
  font-weight: bold;
  font-size: 36rpx;
}

.user_id {
  margin-left: 20rpx;
}

.grade {
  color: gold;
  background-color: rgb(79, 55, 36);
  // width: 140rpx;
  border-radius: 30rpx;
  padding: 4rpx 16rpx;
  margin: 4rpx 0;
  margin-right: 10rpx;

  .zyhs {
    margin-right: 6rpx;
  }
}

.con {
  .zyhs {
    color: rgb(110, 108, 126);
  }

  .grod-item {

    // width: auto !important;
    // flex: 1 !important;
    .zyhs {
      padding-bottom: 40rpx;
    }
  }

  .tabs_item {
    margin-bottom: 20rpx;
    padding-right: 20rpx;

    .left {
      margin-right: 20rpx;
    }

    border-right: 1rpx solid #e6e6e6;
  }
}

.btn_logout {
  color: red;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 40rpx;
  margin-top: 40rpx;
}

.scroll_view {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 100rpx;
}

.btn_copy {
  padding: 4rpx 26rpx;
  font-size: 24rpx;
  border-radius: 8rpx;
  margin-left: 10rpx;
  border: 1rpx solid rgb(75, 136, 254);
}
</style>
<template>
  <view class="main">
    <u-navbar bgColor="transparent" leftIconSize="0"></u-navbar>
    <view id="header" class="header flex flex-align-center">
      <view class="flex-grow " style="justify-content: space-between;" v-if="userDetailInfo.username">
        <view class="flex flex-space-end setting padding-50" @click="toNav('/pages/setting/index')">
          <text class="iconfont blod font48">&#xe62a;</text>
        </view>
        <view class="flex padding-50" @click="toNav('/pages/setting/personal')">
          <view>
            <image :src="filterImg(avatar)" mode="aspectFill" class="avatar"></image>
          </view>
          <view>
            <view class="flex flex-align-center">
              <text class="font38 line nick_name">{{ userDetailInfo.nickname }}</text>
              <text class="user_id font24">ID:{{ userDetailInfo.username }}</text>
              <view @click.stop="handlerCopy(userDetailInfo.username)" class="flex flex-center btn_copy">复制</view>
            </view>
            <view class="flex flex-align-center flex-wrap">
              <view v-if="consumer != null" class="grade">
                <u-rate activeColor="gold" inactiveColor="#fff" gutter="0" count="5"
                  v-model="consumer.identityStatus"></u-rate>
              </view>
              <view class="flex flex-align-center flex-center grade font24" v-if="!isVip">
                <text class="zyhs zyhs-huangguan"></text>
                普通用户
              </view>
              <block v-for="(item, index) in identity" :key="index">
                <view class="flex flex-align-center grade font24"
                  v-if="item.identityNameCode == 1 && item.identityStatus == 1">
                  <text class="zyhs zyhs-huangguan"></text>
                  VIP
                </view>
                <view class="flex flex-align-center grade font24"
                  v-if="item.identityNameCode == 2 && item.identityStatus == 1">
                  <text class="zyhs zyhs-lianchuangdaili-33"></text>
                  联创
                </view>
                <view class="flex flex-align-center grade font24"
                  v-if="item.identityNameCode == 3 && item.identityStatus == 1">
                  <text class="zyhs zyhs-hehuoren"></text>
                  合伙人
                </view>
                <view class="flex flex-align-center grade font24"
                  v-if="item.identityNameCode == 4 && item.identityStatus == 1">
                  <text class="zyhs zyhs-wodefenxiaoshang"></text>
                  分销商
                </view>
                <!-- <view class="flex flex-align-center grade font24" v-if="item.identityNameCode == 5 && item.identityStatus > 0">
										<text   class="zyhs zyhs-dailishang"></text>
										消费商
									</view> -->
              </block>
              <block v-if="userDetailInfo.storeIsOpen === 1">
                <view class="flex flex-align-center grade font24">
                  <text style="font-size: 24rpx;" class="zyhs zyhs-shangjiaguanli"></text> 商家
                </view>
              </block>
            </view>
            <!-- <view class="flex flex-align-center">
								<view class="six" v-if="userDetailInfo.distributorIsOpen === 1">
									<text class="font24">配送员</text>
								</view>
								<view class="six" v-if="userDetailInfo.storeIsOpen === 1">
									<text class="font24">商家</text>
								</view>
							</view> -->
          </view>
        </view>
        <view class="culist history padding-50" v-if="myAsset.length">
          <view class="grod pad flex flex-between">
            <view class="grod-item flex flex-column flex-align-center"
              @click="toNav('/pages/user/record/list?title=贡献值&type=getConsumeRecord')">
              <text class="f-b">{{ myAsset[0].assetAccount }}</text>
              <text class="font26">贡献值</text>
            </view>
            <view class="grod-item flex flex-column flex-align-center"
              @click="toNav('/pages/user/record/list?title=绿色积分&type=getGreenRecord&transferType=2')">
              <text class="f-b">{{ myAsset[1].assetAccount }}</text>
              <text class="font26">绿色积分</text>
            </view>
            <view class="grod-item flex flex-column flex-align-center"
              @click="toNav('/pages/user/balance/list?title=余额&type=getBalanceRecord')">
              <text class="f-b">{{ myAsset[2].assetAccount }}</text>
              <text class="font26">余额</text>
            </view>
            <!-- <view class="grod-item" @click="toNav('/pages/user/coupon')">
								<text>{{cbfcAcountData.coupon}}</text>
								<text class="font26">优惠券</text>
							</view>
							<view class="grod-item" @click="toNav('/pages/user/cardBag')">
								<text>{{cardsTotal}}</text>
								<text class="font26">卡包</text>
							</view> -->
          </view>
        </view>
        <view class="padding-30">
          <view class="share_wrapper flex flex-align-center flex-between">
            <view class="left">
              <view class="font32 f-b text">分享好友</view>
              <view class="color-w font24">分享好友可获得贡献值奖励</view>
            </view>
            <view class="btn_share font24 flex flex-center" @click="goPage('/pages/user/invite')">
              <text class="text f-b">立即分享</text>
              <text class="zyhs zyhs-fenxiang1"></text>
            </view>
          </view>
        </view>
      </view>
      <view class="flex flex-grow padding-30" style="justify-content: space-between;" v-else>
        <view class="flex flex-align-center" @click="toNav('/pages/login/login')">
          <view>
            <image :src="filterImg(avatar)" mode="aspectFill" class="avatar"></image>
          </view>
          <view>
            <view class="flex flex-align-center">
              <text class="font38 line">登录/注册</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y="true" class="scroll_view" :style="{ top: scrollTop + 'px' }">
      <view class="con">
        <view class="culist flex flex-between">
          <view @click="goPage(tab.path)" class="tabs_item flex flex-align-center" v-for="(tab, i) in tabsList" :key="i">
            <view class="left">
              <text class="fb font28">{{ tab.name }}</text>
              <view class="font24">
                {{ tab.text }}
              </view>
            </view>
            <text class="zyhs font40" :style="{ color: tab.color }" :class="tab.icon"></text>
          </view>
        </view>
        <view class="culist">
          <view class="title flex flex-between" @click="goOrder(false)">
            <text class="blod font30">我的订单</text>
            <view class="flex flex-align-center color-b9">
              <text class="font28">查看全部</text>
              <text class="iconfont font38">&#xe770;</text>
            </view>
          </view>
          <view class="grod flex flex-between">
            <view class="grod-item" style="width: 16%;" v-for="(item, i) in cuList" :key="i"
              @click="goOrder(item.status)">
              <text class="zyhs" :style="{ fontSize: item.size + 'rpx' }" :class="item.icon"></text>

              <text class="color-b5 font26">{{ item.name }}</text>
              <text class="tips" v-if="item.tip">{{ item.tip > 99 ? '99+' : item.tip }}</text>
            </view>
          </view>
        </view>
        <view class="culist">
          <view class="title flex flex-between" @click="goOrder(false)">
            <text class="blod font30">常用工具</text>
          </view>
          <view class="grod flex">
            <view class="grod-item" style="width: 16%; margin-right: 40rpx;" v-for="(item, i) in toolList" :key="i"
              @click="goPage(item.path)">
              <text class="zyhs" :style="{ fontSize: item.size + 'rpx' }" :class="item.icon"></text>

              <text class="color-b5 font26">{{ item.name }}</text>
              <text class="tips" v-if="item.tip">{{ item.tip > 99 ? '99+' : item.tip }}</text>
            </view>
          </view>
        </view>
        <view class="culist">
          <view class="title flex flex-between" @click="goOrder(false)">
            <text class="blod font30">商家管理</text>
          </view>
          <view class="grod flex flex-between">
            <view class="grod-item" style="width: 16%;" v-for="(item, i) in shopManageList" :key="i"
              @click="merchantMenuClick(item)">
              <text class="zyhs" :style="{ fontSize: item.size + 'rpx' }" :class="item.icon"></text>

              <text class="color-b5 font26">{{ item.name }}</text>
              <text class="tips" v-if="item.tip">{{ item.tip > 99 ? '99+' : item.tip }}</text>
            </view>
          </view>
        </view>
        <view class="culist">
          <view class="title flex flex-between" @click="goOrder(false)">
            <text class="blod font30">教育中心</text>
          </view>
          <view class="grod flex">
            <view class="grod-item" style="width: 16%; margin-right: 40rpx;" v-for="(item, i) in educationList" :key="i"
              @click="goPage(item.path)">
              <text class="zyhs" :style="{ fontSize: item.size + 'rpx' }" :class="item.icon"></text>

              <text class="color-b5 font26">{{ item.name }}</text>
              <text class="tips" v-if="item.tip">{{ item.tip > 99 ? '99+' : item.tip }}</text>
            </view>
          </view>
        </view>
        <view class="culist">
          <view class="title flex" @click="goOrder(false)">
            <text class="blod font30">实用工具</text>
          </view>
          <view class="grod flex flex-between">
            <view class="grod-item" style="width: 21%;" v-for="(item, i) in practicalList" :key="i"
              @click="goPage(item.path)">
              <text class="zyhs" :style="{ fontSize: item.size + 'rpx' }" :class="item.icon"></text>

              <text class="color-b5 font26">{{ item.name }}</text>
              <text class="tips" v-if="item.tip">{{ item.tip > 99 ? '99+' : item.tip }}</text>
            </view>
            <view style="width: 21%;">

            </view>
          </view>
        </view>

        <!-- <view class="fixed">
					<text class="p2" style="margin-bottom: 88upx;">Copyright©️2018 南宁物芊科技有限公司 版权所有</text>
				</view> -->
        <view class="btn_logout flex flex-center" @click="toLogout">退出登录</view>
        <u-gap height="50rpx"></u-gap>
      </view>

    </scroll-view>

    <!-- 弹框 -->
    <modal v-if="showModal">
      <image :src="advertData.ossUrl" mode="widthFix" @click="imgJump"></image>
      <text class="iconfont color-w font60" style="margin-top: 20rpx;" @click="showModal = false">&#xe64a;</text>
    </modal>

    <!-- 福利红包 -->
    <!-- <red-envelopes v-for="(item, i) in redList" :key="i" :data="item" :type="3" :bottom="i === 0 ? 100 : i*80+100"></red-envelopes> -->

    <!-- <tabbar></tabbar> -->
  </view>
</template>

<script>
import {
  mapMutations,
  mapState
} from "vuex"
import modal from "@/components/modal.vue"
import redEnvelopes from "@/components/red-envelopes.vue"
import uniPopup from "@/components/uni-popup/uni-popup.vue"
import tabbar from "@/components/tabbar.vue"
import url from "@/common/http/url.js"
import publics from "@/common/utils/public.js"
export default {
  components: {
    modal,
    redEnvelopes,
    uniPopup,
    tabbar
  },
  data () {
    return {
      userDetailInfo: {},
      staticUrl: this.$staticUrl,
      avatar: this.$staticUrl + "user/avatar.png",
      tabsList: [{
        name: "管理钱包",
        text: '天天领钱',
        icon: "zyhs-daifukuan",
        color: 'rgb(75, 136, 254)',
        size: '34',
        path: '/pages/user/record/list?title=管理钱包&type=getWalletRecord&transferType=3'
      },
      {
        name: "积分统计",
        text: '今日释放',
        icon: "zyhs-tongji1",
        color: 'rgb(236, 72, 69)',
        size: '40',
        path: '/pages/user/myScore'
      },
      {
        name: "我的团队",
        text: '团队分红',
        icon: "zyhs-jiangbei-",
        color: 'rgb(253, 178, 114)',
        size: '40',
        path: "/pages/user/team"
      }
      ],
      toolList: [{
        name: "我的资产",
        tip: 0,
        icon: "zyhs-zichan",
        status: 0,
        size: '46',
        path: '/pages/user/wallet/index'
      },
      {
        name: "地址管理",
        tip: 0,
        icon: "zyhs-dizhi",
        status: 2,
        size: '44',
        path: '/pages/user/address/index?type=1'
      },
      // {name: "其他资产", tip: 0, icon: "zyhs-dashanghongbao", status: 3, size: '40'},
      {
        name: "线下订单",
        tip: 0,
        icon: "zyhs-xianxiadingdan",
        status: 3,
        size: '42'
      }
      ],
      cuList: [{
        name: "全部",
        tip: 0,
        icon: "zyhs-quanbu",
        status: 1,
        size: '34'
      },
      {
        name: "待付款",
        tip: 0,
        icon: "zyhs-daifukuan1",
        status: 2,
        size: '40'
      },
      {
        name: "待发货",
        tip: 0,
        icon: "zyhs-daifahuo",
        status: 3,
        size: '40'
      },
      {
        name: "待收货",
        tip: 0,
        icon: "zyhs-daishouhuo",
        status: 4,
        size: '42'
      },
      {
        name: "线下订单",
        tip: 0,
        icon: "zyhs-xianxiadingdan",
        status: 5,
        size: '42'
      }
      ],
      shopManageList: [{
        name: "商家入驻",
        tip: 0,
        icon: "zyhs-shangjiaruzhu",
        status: 0,
        size: '46',
        type: 1,
        path: 'merchants'
      },
      {
        name: "商家管理",
        tip: 0,
        icon: "zyhs-shangjiaguanli",
        status: 2,
        size: '38',
        type: 2,
        path: 'merchants'
      },
      {
        name: "商家打赏",
        tip: 0,
        icon: "zyhs-dashang2",
        status: 3,
        size: '40',
        type: 3,
        path: "reward"
      },
      {
        name: "商家转账",
        tip: 0,
        icon: "zyhs-zhuanzhang2",
        status: 3,
        size: '44',
        type: 4
      }
      ],
      educationList: [{
        name: "应知应会",
        tip: 0,
        icon: "zyhs-jurassic_book",
        status: 0,
        size: '46'
      },
      {
        name: "精彩课程",
        tip: 0,
        icon: "zyhs-kechengtixi",
        status: 2,
        size: '44'
      },
      {
        name: "分公司",
        tip: 0,
        icon: "zyhs-VIP1",
        status: 3,
        size: '40'
      }
      ],
      practicalList: [{
        name: "设置",
        tip: 0,
        icon: "zyhs-shezhi1",
        status: 0,
        size: '46',
        path: '/pages/setting/index'
      },
      {
        name: "银行卡",
        tip: 0,
        icon: "zyhs-yinhangka",
        status: 2,
        size: '38',
        path: ''
      },
      {
        name: "忘记密码",
        tip: 0,
        icon: "zyhs-mima",
        status: 3,
        size: '40',
        path: '/pages/login/forget'
      },
      {
        name: "收藏",
        tip: 0,
        icon: "zyhs-shoucang",
        status: 0,
        size: '46',
        path: '/pages/user/collect'
      },
      {
        name: "客服",
        tip: 0,
        icon: "zyhs-kefu1",
        status: 2,
        size: '38',
        path: 'service'
      },
      {
        name: "帮助中心",
        tip: 0,
        icon: "zyhs-bangzhu1",
        status: 3,
        size: '40'
      },
      {
        name: "余额充值",
        tip: 0,
        icon: "zyhs-chongzhi",
        status: 3,
        size: '40'
      }
      ],
      servicePhone: "",
      cbfcAcountData: {},
      teamTotal: 0,
      balance: 0,
      cardsTotal: 0,
      showModal: false,
      advertData: false,
      redList: [],
      mobileList: [],
      threeData: [],
      platform: uni.getSystemInfoSync().platform,
      uniPlatform: uni.getSystemInfoSync().uniPlatform,
      configAppstoreHidePage: false,
      wxBtnHeight: 20,
      scrollTop: 516 / uni.getStorageSync('dpi') + 44 + uni.getStorageSync('system').statusBarHeight,
      loading: true,
      identity: [],
      isVip: false,
      consumer: null
    }
  },
  onPullDownRefresh () {
    this.init()
  },
  computed: {
    ...mapState(["userInfo", "myAsset"])
  },
  onLoad () {

    // #ifdef MP-WEIXIN
    this.wxBtnHeight = wx.getMenuButtonBoundingClientRect().height
    // #endif
    // #ifdef APP-PLUS

    this.wxBtnHeight = uni.getStorageSync('system').statusBarHeight + 10

    // this.scrollTop = 516/uni.getStorageSync('dpi') + 44;
    // #endif
    // 广告弹框
    this.$http("GET", url.cms.advertisingMap, {
      position: 8
    }).then(res => {
      if (res.data && res.data.length > 0) {
        this.advertData = res.data[0]
        if (this.advertData.popupMode === 2) {
          if (!publics.advertShowToStorage(this.advertData.id)) {
            this.showModal = true
          }
        } else {
          this.showModal = true
        }
      }
    });

  },
  mounted () {
    console.log('**********************')
    this.userDetailInfo = this.userInfo || null;
    if (this.userDetailInfo.username) this.loading = false
    console.log('this.wxBtnHeight', this.userDetailInfo)
    if (!this.userDetailInfo.username) {
      this.getHeaderHeight(); this.loading = false;
    }
    this.init()
    this.getRedBagList()
    this.getUserIdentity()
    // this.getMyAsset();
    this.$store.dispatch('getMyAsset');
    // 获取 苹果应用商店需要隐藏的页面和功能模块 配置
    if (this.platform === "ios" && this.uniPlatform === 'app') {
      this.$http("GET", url.common.appstoreHidePage).then(res => {
        console.log(this.platform)
        if (res.data) {
          this.configAppstoreHidePage = res.data.keyValue === "1" ? false : true
        }
      })
    } else { //其它设备则显示
      this.configAppstoreHidePage = true
    }
  },
  onShow () {
    console.log('**********************')
    this.userDetailInfo = this.userInfo;
    if (this.userDetailInfo.username) this.loading = false
    console.log('this.wxBtnHeight', this.userDetailInfo)
    this.init()
    this.getRedBagList()
    this.getUserIdentity()
    // this.getMyAsset();
    this.$store.dispatch('getMyAsset');
    // 获取 苹果应用商店需要隐藏的页面和功能模块 配置
    if (this.platform === "ios" && this.uniPlatform === 'app') {
      this.$http("GET", url.common.appstoreHidePage).then(res => {
        console.log(this.platform)
        if (res.data) {
          this.configAppstoreHidePage = res.data.keyValue === "1" ? false : true
        }
      })
    } else { //其它设备则显示
      this.configAppstoreHidePage = true
    }
  },
  onBackPress () {
    //隐藏到后台，不退出app
    let main = plus.android.runtimeMainActivity();
    main.moveTaskToBack(false);
    return true;
  },
  methods: {
    ...mapMutations(["setUserInfo", "logout"]),
    getUserIdentity () {
      this.$http("GET", url.user.getUserIdentity).then(({ code, data }) => {
        if (code == 200) data.map((item) => {
          if (item.identityStatus >= 1) this.identity.push(item);
          this.isVip = data.some((item) => {
            return item.identityNameCode == 1 && item.identityStatus == 1
          });
          this.consumer = data.find((item) => {
            return item.identityNameCode == 5 && item.identityStatus > 0
          })
        })
        console.log('this.identity', this.identity)
      })
    },
    handlerCopy (str) {
      uni.setClipboardData({
        data: str,
        success: () => {
          this.$msg('复制成功')
        }
      });
    },
    getMyAsset () {
      this.$http("GET", url.user.getMyAsset).then(res => {
        let {
          code,
          data
        } = res;
        console.log('res', res)
        if (code == 200) {
          this.myAsset = data;
        }
      })
    },
    getHeaderHeight () {
      let query = uni.createSelectorQuery().in(this);
      setTimeout(() => {
        query.select('#header').boundingClientRect(data => {
          console.log('=============', data);
          this.scrollTop = data.height + 44 + uni.getStorageSync('system').statusBarHeight;

        }).exec();
      }, 300)
    },
    goPage (path) {
      if (path.indexOf('getWalletRecord') >= 0) {
        this.$http("GET", url.asset.checkManageIdentity).then(({ code, data }) => {
          if (code == 200 && data) this.toNav(path)
        })
        return;
      }
      if (!path) this.$msg("暂未开放", 2000)
      if (path == 'service') this.onContact();
      else if (path == 'merchants') this.toMerchants();
      else this.toNav(path)
    },
    //退出登录
    toLogout () {
      let that = this;
      uni.showModal({
        title: "提示",
        content: '确定要退出登陆么',
        success: e => {
          if (e.confirm) {
            that.logout();
          }
        }
      });
    },
    // 红包福利
    getRedBagList () {
      this.$http("GET", url.cms.redEnvelopesList).then(res => {
        this.redList = res.data
        if (res.data.length > 0) {
          this.redList.map(v => {
            v.show = true
          })
        }
      })
    },
    init () {
      // 获取收藏、足迹、关注、优惠券数量
      this.$http("GET", url.user.cbfcAcount).then(res => {
        this.cbfcAcountData = res.data
      })
      // 获取订单状态数量
      this.$http("GET", url.order.getOrderAmount).then(res => {
        this.cuList[0].tip = res.data.unpaid
        this.cuList[1].tip = res.data.ongoing
        this.cuList[2].tip = res.data.evaluated
        this.cuList[3].tip = res.data.completed
        this.cuList[4].tip = res.data.refund
      })
      // 获取团队总数
      this.$http("GET", url.user.getTeamList, {
        pageSize: 1
      }).then(res => {
        this.teamTotal = res.data.total
      })
      // 获取卡包总数
      this.$http("GET", url.user.getUserCards, {
        pageSize: 1
      }).then(res => {
        this.cardsTotal = res.data.total
      })
      // 获取用户信息
      this.getUserInfo()
      // 获取钱包余额
      this.$http('GET', url.user.getWalletInfo).then(res => {
        // this.balance = res.data.balance
      })
      // 获取客服信息
      this.$http("GET", url.common.customerService).then(res => {
        let mobileList = res.data.mobile
        mobileList.map(v => {
          v.type = "电话"
        })
        let qqList = res.data.qq
        qqList.map(v => {
          v.type = "QQ"
        })
        let wechatList = res.data.wechat
        wechatList.map(v => {
          v.type = "微信"
        })
        this.mobileList = wechatList.concat(qqList).concat(mobileList)
      })
      // 获取第三方服务比例
      this.$http("GET", url.common.threeProportion).then(res => {
        this.threeData = res.data
      })
    },
    getUserInfo () {
      this.$http("GET", url.user.getUserInfoBasic).then(res => {
        this.setUserInfo(res.data)
        this.userDetailInfo = res.data
        this.avatar = res.data.headPortrait
        this.loading = false
        this.getHeaderHeight();
        if (!this.avatar && res.data.userResources) {
          let userResources = res.data.userResources
          userResources.forEach(v => {
            if (v.type === 0) {
              this.avatar = v.ossUrl
              return
            }
          })
        }
        uni.stopPullDownRefresh()
      })
    },
    getScale (code) {
      if (!code || this.threeData.length === 0) return
      let scale = null
      this.threeData.forEach(v => {
        if (v.keyCode === code) {
          scale = v.remarks
          return
        }
      })
      return scale
    },
    showThreeItem (code) {
      if (!code || this.threeData.length === 0) return
      let show = false
      this.threeData.forEach(v => {
        if (v.keyCode === code) {
          show = v.keyValue === "1" ? true : false
          return
        }
      })
      return show
    },
    filterImg (img) {
      return publics.filterImgUrl(img, 1)
    },
    callPhoto (phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    goUser (imAccount) {
      this.$navigateTo("/pages/interaction/user?userId=" + imAccount)
      this.closePopup()
    },
    toAgent () {
      if (this.userDetailInfo.distributorIsOpen === 1) {
        this.toNav("/pages/agent/index")
      } else {
        this.$http("GET", url.distributor.getApplyInfo).then(res => {
          // status: 1=审核中，2=审核通过，3=审核失败
          if (!res.data) {
            this.toNav("/pages/agent/apply")
          } else if (res.data.status === 2) {
            this.toNav("/pages/agent/index")
          } else {
            uni.setStorageSync("examineData", res.data)
            this.toNav("/pages/merchants/settleIn/result")
          }
        })
      }
    },
    /**
     * item.type === 1 商家入住
     * item.type === 2 商家管理
     * item.type === 3 商家打赏
     * item.type === 4 商家转账
     * 
     * 
     */
    merchantMenuClick (item) {
      const { storeIsOpen } = this.userDetailInfo || {};
      switch (item.type) {
        case 1:
          if (storeIsOpen) {
            this.$msg("商家已入驻，请进入商家管理", 2000)
          } else {
            this.toMerchants()
          }
          break;
        case 2:
          if (!storeIsOpen) {
            this.$msg("请先商家入驻", 2000)
          } else {
            this.toMerchants()
          }
          break;
        case 3:
          this.toNav("/pages/merchants/reward/reward")
          break;
        default:
          this.$msg("暂未开放", 2000)
          break;
      }

    },
    toMerchants () {
      this.$http("GET", url.store.getApplyInfo).then(res => {
        // status: 1=审核中，2=审核通过，3=审核失败
        if (!res.data) {
          this.toNav("/pages/merchants/settleIn/step")
        } else if (res.data.status === 2) { // 审核通过
          this.toNav("/pages/merchants/home")
        } else if (res.data.status === 1) { // 审核中
          uni.setStorageSync("examineData", res.data)
          this.toNav("/pages/merchants/settleIn/result")
        } else { //审核失败
          uni.setStorageSync("examineData", res.data)
          this.toNav("/pages/merchants/settleIn/result")
        }
      })
    },
    // 客服电话
    onContact () {
      if (this.mobileList.length === 0) return
      let _this = this
      let itemList = []
      let phoneList = []
      this.mobileList.map(v => {
        itemList.push(`[${v.type}]${v.name}(${v.keyValue})`)
        phoneList.push(v.keyValue)
      })
      uni.showActionSheet({
        itemList: itemList,
        success (res) {
          if (itemList[res.tapIndex].indexOf("QQ") > -1) {
            _this.$onCopy(phoneList[res.tapIndex])
            _this.$msg("QQ号已复制, 请打开QQ添加客服联系", 2000)
          } else if (itemList[res.tapIndex].indexOf("微信") > -1) {
            _this.$onCopy(phoneList[res.tapIndex])
            _this.$msg("微信号已复制, 请打开微信添加客服联系", 2000)
          } else {
            uni.makePhoneCall({
              phoneNumber: phoneList[res.tapIndex]
            });
          }
        }
      })
    },
    // 扫一扫
    scanCode () {
      let _this = this
      uni.scanCode({
        scanType: ["qrCode"],
        success: function (res) {
          console.log('条码内容：' + res.result);
          let result = res.result
          // 判断内容是url,并且存在data
          if ((result.indexOf("https") > -1 || result.indexOf("http") > -1) && result.indexOf(
            "data") > -1) {
            let reg = new RegExp("(^|&)data=([^&]*)(&|$)");
            let json = result.substr(1).match(reg)
            try {
              let r = JSON.parse(json[2])
              if (r && r.type && r.data) {
                if (r.type === 99) {
                  _this.$navigateTo("/pages/interaction/user?userId=" + r.data)
                } else {
                  uni.setStorageSync("codeResultData", r)
                  _this.$navigateTo("scan/index")
                }
              } else {
                _this.$msg("暂不支持扫码该类型二维码，目前只支持扫商户收款码付款", 5000)
              }
            } catch (err) {
              _this.$msg("暂不支持扫码该类型二维码，目前只支持扫商户收款码付款", 5000)
            }
          } else {
            _this.$msg("暂不支持扫码该类型二维码，目前只支持扫商户收款码付款", 5000)
          }
        }
      });
    },
    goOrder (status) {
      let url = "/pages/order/index"
      if (status) {
        url = url + "?status=" + status
      }
      this.toNav(url)
    },
    toNav (path) {
      console.log('path', path)
      if (!path) return this.$msg('暂未开放')
      this.$navigateTo(path)
    },
    imgJump () {
      this.showModal = false
      this.$http("POST", url.cms.clickAdvertisingMap, {
        id: this.advertData.id
      })
      publics.advertOption(this.advertData.operationCode, this.advertData.operationValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  // min-height: 100vh;
  // background-color: #f2f2f2;
  // padding-bottom: 50rpx;
}

.header {
  // height: 300rpx;
  padding: 0 20rpx 20rpx 20rpx;
  background: linear-gradient(180deg, #F6D5D2, #FFFFFF);
  // background-color: rgb(249, 249, 249);
  background: url('../../static/images/user/nav_bg.png') center center no-repeat;
  background-size: cover;

  .avatar {
    width: 100rpx;
    height: 100rpx;
    background-color: white;
    border-radius: 50%;
    margin-right: 30rpx;
  }

  .six {
    margin-top: 10rpx;
    margin-right: 10rpx;
    border-radius: 10rpx;
    padding: 0 10rpx 10rpx;
    line-height: 28rpx;
    // background: linear-gradient(to bottom, #a60ab8 0%, #5c04c3 100%);
    border: 2rpx solid white;
  }

  .yellow {
    background: linear-gradient(to bottom, #b69700 0%, #c66d00 100%);
  }

  .green {
    background: linear-gradient(to bottom, #38b948 0%, #238300 100%);
  }

  .orange {
    background: linear-gradient(to bottom, #be5b00 0%, #ff9400 100%);
  }

  .redd {
    background: linear-gradient(to bottom, #dc4839 0%, #e20b3b 100%);
  }
}

.con {
  padding: 0 20rpx;
  padding-top: 30rpx;
  background-color: rgb(242, 242, 242);
  border-radius: 40rpx 40rpx 0 0;

  .culist {
    background-color: white;
    border-radius: 16rpx;

    margin-bottom: 20rpx;
    padding: 0 30rpx;
    padding-top: 20rpx;

    .title {

      border-bottom: 2rpx solid #eee;
      padding-bottom: 20rpx;
    }

    .pad {
      padding: 30rpx 0;
    }

    .grod {
      border-radius: 14rpx;
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 30rpx;

      &-item {
        width: 20%;
        margin-top: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;

        .img {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 10rpx;
        }

        .icon {
          font-size: 50rpx;
          margin-bottom: 10rpx;
        }

        .tips {
          position: absolute;
          left: 80rpx;
          top: -20rpx;
          color: white;
          font-size: 24rpx;
          padding: 0 14rpx;
          border-radius: 50rpx;
          z-index: 9;
          background-color: #CA0400;
        }
      }
    }

    .flex-start {
      padding: 30rpx 0 0;

      .grod-item {
        justify-content: flex-start !important;
        margin-bottom: 30rpx;
      }
    }
  }

  .history {
    padding-top: 0;
    background-color: rgba($color: #fff, $alpha: 0) !important;
    margin: 0;
    margin-top: 50rpx;
    // margin-bottom: 50rpx;
  }

  .list {
    margin-bottom: 20rpx;

    &-item {
      height: 110rpx;
      padding: 0 30rpx;
      border-radius: 14rpx;
      margin-bottom: 10rpx;

      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }

  }

  .carousel-section {
    margin-bottom: 20rpx;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .carousel {
      width: 48%;
      height: 220upx;

      .img {
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
      }
    }

    .swiper-dots {
      left: 45upx;
      bottom: 40upx;
    }
  }

  .third {
    padding-bottom: 100rpx;

    .title {
      margin-bottom: 20rpx;

      .xian {
        margin: 0 40rpx;
        color: #C0C0C0;
        font-size: 30rpx;
      }
    }

    .grid {
      flex-flow: wrap;
      display: flex;
      background-color: white;
      border-radius: 14rpx;

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 226rpx;
        padding: 30rpx 0;
        border-right: 2rpx solid #f5f5f5;
        border-bottom: 2rpx solid #f5f5f5;

        .icon {
          font-size: 50rpx;
        }

        .name {
          margin-top: 10rpx;
          font-size: 28rpx;
          color: #666666;
        }
      }
    }
  }
}

.popup {
  width: 600rpx;
  background-color: white;
  padding: 30rpx;
  border-radius: 16rpx;

  .img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .btn {
    font-size: 24rpx;
    color: #F8D247;
    border: 2rpx solid #F8D247;
    border-radius: 6rpx;
    padding: 4rpx 20rpx;
  }
}

.fixed {
  // position: fixed;
  // bottom: 30rpx;
  // left: 0;
  // right: 0;
  margin-top: 80rpx;
  margin-bottom: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .p1 {
    font-size: 30rpx;
    color: #666;
  }

  .p2 {
    font-size: 24rpx;
    color: #999999;
  }
}
</style>
