<template>
  <div class="page-body">
    <div class="userDetailBox">
      <div class="userBox">
        <div class="userLeft">
          <div class="userImgBox">
            <!-- <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: #eaecee;
                  border-radius: 50%;
                "
              >
                <image
                  style="width: 40%; height: 40%"
                  src="/static/images/home/defaultUser.png"
                />
              </div> -->
            <button
              class="avatarBtn"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
            >
              <image class="headerImg" :src="user.MEMBERSHIP_HEADIMAGEURL" />
            </button>
          </div>
          <div class="userDetail" @click="goRegister()">
            <div class="userName">{{ user.MEMBERSHIP_NAME || "游客" }}</div>
            <span class="identity">{{ user.MEMBERSHIP_LEVEL_TEXT || "" }}</span>
          </div>
        </div>

        <div class="codeBox" @click="isGo('/pages/homeFn/payfor/index')">
          <image class="codeImg" src="/static/images/home/codeIcon.png" />
          <span class="codeText">会员码</span>
        </div>
      </div>

      <div class="propertyBox">
        <div class="propertyItem" @click="isGo('/pages/homeFn/myCoupon/index')">
          <div class="propertyLabel">优惠券</div>
          <div class="propertyValue">{{ user.COUPON_COUNT || 0 }}</div>
        </div>
        <div class="propertyItem" @click="isGo('/pages/homeFn/integral/index')">
          <div class="propertyLabel">积分</div>
          <div class="propertyValue">{{ user.MEMBERSHIP_POINT || 0 }}</div>
        </div>
        <div
          class="propertyItem"
          @click="isGo('/pages/homeFn/consumption/index')"
        >
          <div class="propertyLabel">余额</div>
          <div class="propertyValue">{{ user.ACCOUNT_BALANCE || 0 }}</div>
        </div>
      </div>
    </div>

    <div class="funListBox">
      <div class="funItem" @click="isGo('/pages/orders/order/index')">
        <image class="funIcon" src="/static/images/home/foodIcon.svg" />
        <div class="funName">我的点餐</div>
      </div>
      <div class="funItem" @click="isGo('/pages/homeFn/myCoupon/index')">
        <image class="funIcon" src="/static/images/home/couponLogo.png" />
        <div class="funName">优惠券</div>
      </div>

      <div class="funItem" @click="isGo('/pages/homeFn/mycar/index')">
        <image class="funIcon" src="/static/images/home/carLogo.png" />
        <div class="funName">绑定车辆</div>
      </div>

      <div class="funItem" @click="isGo('/pages/myAddress/address/index')">
        <image class="funIcon" src="/static/images/home/addressUser.png" />
        <div class="funName">我的地址</div>
      </div>

      <div class="funItem" @click="isGo('/pages/community/myPost')">
        <image class="funIcon" src="/static/images/home/post.png" />
        <div class="funName">我的发帖</div>
      </div>
      <div class="funItem" @click="isGo('/pages/contact/index')">
        <image class="funIcon" src="/static/images/home/lostAndfound.png" />
        <div class="funName">失物招领</div>
      </div>

      <div class="funItem">
        <image class="funIcon" src="/static/images/home/noiLike.svg" />
        <div class="funName gray">我的关注</div>
      </div>

      <div class="funItem">
        <image
          class="funIcon"
          src="/static/images/home/nocustomerService.svg"
        />
        <div class="funName gray">客户服务</div>
      </div>

      <div class="funItem">
        <image class="funIcon" src="/static/images/home/noserviceHotline.svg" />
        <div class="funName gray">服务热线</div>
      </div>

      <div class="funItem" v-if="loginType && loginType !== 'min'">
        <image class="funIcon" src="/static/images/home/closeLogin.png" />
        <div class="funName gray">退出登录</div>
      </div>
    </div>

    <div v-if="false">
      <div
        style="
          padding: 40rpx 44rpx 0 44rpx;
          background: linear-gradient(#4e4e4e, #000);
        "
      >
        <div class="user-card">
          <div class="user-card-top">
            <div class="photo" v-if="user.MEMBERSHIP_NAME">
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: #eaecee;
                  border-radius: 50%;
                "
              >
                <image
                  style="width: 40%; height: 40%"
                  src="/static/images/home/defaultUser.png"
                />
              </div>
            </div>
            <div class="photo" v-else>
              <image
                mode="aspectFit"
                lazy-load="true"
                src="https://eshangtech.com/ShopICO/noName.png"
                style="height: 100rpx; width: 100rpx"
              ></image>
            </div>
            <div>
              <div v-if="user.MEMBERSHIP_NAME" class="name-text">
                {{ user.MEMBERSHIP_NAME }}
              </div>
              <div class="name-text" v-else @click="goRegister()">游客</div>
              <!-- <open-data v-else type="userNickName" class="name-text"></open-data> -->
              <!-- <div v-if="!user.MEMBERSHIP_MOBILEPHONE ||user.MEMBERSHIP_MOBILEPHONE==''" class="novip"></div> -->
              <div
                v-if="user.MEMBERSHIP_MOBILEPHONE"
                style="font-size: 24rpx; margin-top: 10rpx"
              >
                {{ phone }}
              </div>
            </div>
            <div style="position: absolute; right: 40rpx; top: 40rpx">
              <van-button
                icon="qr"
                size="small"
                round
                color="linear-gradient(to right, #232323, #777)"
                custom-style="height: 48rpx;font-size:22rpx;"
                @tap="creatPageQR"
                >邀请码</van-button
              >
            </div>
          </div>
          <div
            style="
              display: flex;
              font-size: 24rpx;
              margin-top: 5rpx;
              margin-right: 40rpx;
              justify-content: flex-end;
            "
          >
            <block
              v-if="
                user.MEMBERSHIP_MOBILEPHONE && user.MEMBERSHIP_MOBILEPHONE != ''
              "
            >
              <image
                class="ico-menu"
                src="https://eshangtech.com/ShopICO/vip.png"
                mode="aspectFill"
              ></image>
              <span style="vertical-align: middle; display: inline-block">{{
                user.MEMBERSHIP_LEVEL_TEXT
              }}</span>
            </block>
            <block v-else>
              <div class="user-btn" @click="goRegister()"></div>
            </block>
          </div>
        </div>
      </div>

      <div class="user-tab">
        <div class="u-t-unit" @click="isGo('/pages/homeFn/integral/index')">
          <span>积分</span>
          <span class="user-tab-num">{{ user.MEMBERSHIP_POINT || 0 }}</span>
        </div>
        <div class="u-t-unit" @click="isGo('/pages/homeFn/myCoupon/index')">
          <span>优惠券</span>
          <span class="user-tab-num">{{ user.COUPON_COUNT || 0 }}</span>
        </div>
        <div class="u-t-unit" @click="isGo('/pages/homeFn/consumption/index')">
          <span>余额</span>
          <span class="user-tab-num">{{ user.ACCOUNT_BALANCE || "0.00" }}</span>
        </div>
      </div>

      <div class="spread-view">
        <div
          style="
            padding: 0 24rpx;
            display: flex;
            justify-content: space-between;
          "
        >
          <div style="display: flex; align-items: center">
            <image
              src="https://eshangtech.com/ShopICO/icos/yx-ico.png"
              mode="aspectFill"
              style="width: 32rpx; height: 32rpx; vertical-align: middle"
            ></image>
            <span>我的营销</span>
          </div>
        </div>
        <div class="spread-tab">
          <div class="u-t-unit">
            <span class="user-tab-num">{{ spreadMsg.DirectCount || 0 }}</span>
            <span>一级推广</span>
          </div>
          <div class="u-t-unit">
            <span class="user-tab-num">{{ spreadMsg.IndirectCount || 0 }}</span>
            <span>二级推广</span>
          </div>
          <div class="u-t-unit">
            <span class="user-tab-num">{{ spreadMsg.DoneCount || 0 }}</span>
            <span>成交订单</span>
          </div>
        </div>
      </div>

      <div class="user-menu">
        <div class="my-list" @click="isGo('/pages/orders/order/index')">
          <div class="list-title">
            <image
              mode="aspectFit"
              class="my-ico1"
              src="https://eshangtech.com/ShopICO/orderT-ico.png"
            ></image>
            <span> 我的点餐 </span>
          </div>
          <div>
            <span class="list-num" v-if="user.PENDORDER_COUNT > 0"
              >待支付 {{ user.PENDORDER_COUNT }}</span
            >
            <image
              mode="aspectFit"
              class="my-ico4"
              src="https://eshangtech.com/ShopICO/you-ico.png"
            ></image>
          </div>
        </div>

        <!--      <div class="my-list" @click="isGo('/pages/orders/buyOrder/index')" >-->
        <!--        <div class="list-title">-->
        <!--          <image mode="aspectFit" class="my-ico1" src="https://eshangtech.com/ShopICO/order-ico.png"></image>-->
        <!--          <span >-->
        <!--            商城订单-->
        <!--          </span>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--          <span class="list-num" v-if="user.DELIVER_COUNT>0">待发货 {{user.DELIVER_COUNT}}</span>-->
        <!--          <image mode="aspectFit" class="my-ico4" src="https://eshangtech.com/ShopICO/you-ico.png"></image>-->
        <!--        </div>-->
        <!--      </div>-->

        <div class="my-list" @click="isGo('/pages/homeFn/myCoupon/index')">
          <div class="list-title">
            <image
              mode="aspectFit"
              class="my-ico3"
              src="https://eshangtech.com/ShopICO/coupon-ico.png"
            ></image>
            <span> 优惠券 </span>
          </div>
          <div>
            <span class="list-num" v-if="user.COUPON_COUNT > 0"
              >{{ user.COUPON_COUNT }} 张可用</span
            >

            <image
              mode="aspectFit"
              class="my-ico4"
              src="https://eshangtech.com/ShopICO/you-ico.png"
            ></image>
          </div>
        </div>
        <div class="my-list" @click="isGo('/pages/myAddress/address/index')">
          <div class="list-title">
            <image
              mode="aspectFit"
              class="my-ico5"
              src="https://eshangtech.com/ShopICO/address-ico.png"
            ></image>
            <span> 收货地址 </span>
          </div>
          <div>
            <image
              mode="aspectFit"
              class="my-ico4"
              src="https://eshangtech.com/ShopICO/you-ico.png"
            ></image>
          </div>
        </div>
        <div class="my-list" @click="isGo('/pages/homeFn/mycar/index')">
          <div class="list-title">
            <image
              mode="aspectFit"
              class="my-ico5"
              src="../../static/images/bindig-car-ico.png"
            ></image>
            <span> 绑定车辆 </span>
          </div>
          <div>
            <image
              mode="aspectFit"
              class="my-ico4"
              src="https://eshangtech.com/ShopICO/you-ico.png"
            ></image>
          </div>
        </div>
      </div>
    </div>

    <UniPopup
      :show="isShowPop && !user.MEMBERSHIP_MOBILEPHONE"
      @close="isShowPop = false"
      custom-style="border-radius: 24rpx;"
    >
      <div class="pop-box">
        <div class="pop-title">温馨提示</div>
        <div class="pop-body">您还没有登录，快去登录吧!</div>
        <div class="popbtn-box">
          <div class="popbtn cancel-btn" @click="isShowPop = false">取消</div>
          <div class="popbtn confirm-btn" @click="goRegister">去登录</div>
        </div>
      </div>
    </UniPopup>
    <UniPopup
      :show="isShowBuilding"
      @close="isShowBuilding = false"
      custom-style="border-radius: 24rpx;"
    >
      <div class="pop-box">
        <div class="pop-title">温馨提示</div>
        <div class="pop-body">该模块正在建设中，尽请期待。</div>
        <div class="popbtn-box">
          <!-- <div class="popbtn cancel-btn" @click="isShowBuilding=false">关闭</div> -->
          <div class="popbtn confirm-btn" @click="isShowBuilding = false">
            确定
          </div>
        </div>
      </div>
    </UniPopup>
    <UniPopup
      :show="showInvitedCode"
      position="bottom"
      overlay="false"
      custom-style="height: 60%"
      @close="showInvitedCode = false"
    >
      <van-divider contentPosition="center">我的邀请码</van-divider>
      <image
        :src="InviteCodePath"
        :style="{
          width: windowMsg.width * windowMsg.scale + 'px',
          height: windowMsg.width + 'rpx',
          margin: '48rpx auto',
          display: 'block',
        }"
      />
      <view class="down-img-btn">
        <van-button
          icon="down"
          round
          color="linear-gradient(to right, #1f1f1f, #62605f)"
          custom-style="width:300rpx;padding:32rpx auto;"
          @click="saveImage"
          >保存到本地</van-button
        >
      </view>
    </UniPopup>
    <!-- <popGet/> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  computed: {
    ...mapGetters({
      canIuse: "canIuse",
      user: "user",
    }),
    phone() {
      if (this.user.MEMBERSHIP_MOBILEPHONE) {
        let a = this.user.MEMBERSHIP_MOBILEPHONE.substring(0, 3);
        let b = this.user.MEMBERSHIP_MOBILEPHONE.substring(7, 11);
        return a + "****" + b;
      } else {
        return "";
      }
    },
  },
  components: {
    UniPopup,
  },
  data() {
    const windows = uni.getSystemInfoSync();
    return {
      isShowBuilding: false,
      isShowPop: false,
      showInvitedCode: false,
      InviteCodePath: "",
      windowMsg: {
        width: windows.windowWidth,
        height: windows.windowHeight,
        scale: windows.windowWidth / 750,
      },
      spreadMsg: {
        DirectCount: 0,
        IndirectCount: 0,
        DoneCount: 0,
      }, // 我的营销数据
      loginType: "", // 登录类型
      WXProfile: "",
    };
  },
  onUnload() {
    this.isShowPop = false;
  },
  onLoad() {
    // uni.setNavigationBarColor({
    //   frontColor: "#ffffff",
    //   backgroundColor: "#4E4E4E",
    //   animation: {
    //     duration: 30,
    //     timingFunc: "linear",
    //   },
    // });

    // 判断是小程序还是app
    let type = uni.getStorageSync("loginType");
    console.log("type", type);
    this.loginType = type;
  },
  onShow() {
    if (!this.user.MEMBERSHIP_ID) {
      if (this.loginType === "min") {
        uni.navigateTo({ url: "/pages/register/index" });
      } else {
        uni.navigateTo({ url: "/pages/login/index" });
      }
    }
    this.getMember();
    this.getDistributionCount();
  },
  methods: {
    // 微信用户头像
    onChooseAvatar(e) {
      console.log("e", e);
      this.WXProfile = e.detail.avatarUrl;
    },
    goRegister() {
      if (this.user.MEMBERSHIP_NAME) {
      } else {
        if (this.loginType === "min") {
          this.isShowPop = false;
          uni.navigateTo({ url: "/pages/register/index" });
        } else {
          uni.redirectTo({ url: "/pages/login/index" });
        }
      }
    },
    shouldShowBuilding(url) {
      if (url === "/pages/orders/order/index") {
        this.isGo(url);
      } else {
        this.isShowBuilding = true;
      }
    },
    isGo(url) {
      console.log("this.user", this.user);
      if (this.user.MEMBERSHIP_MOBILEPHONE) {
        if (url === "/pages/homeFn/consumption/index") {
          if (this.user.INDUSTRY_MEMBERSHIP_ID) {
            uni.navigateTo({ url: url });
          }
        } else {
          uni.navigateTo({ url: url });
        }
      } else {
        this.isShowPop = true;
      }
    },
    getMember() {
      let _this = this;
      _this.$api
        .getCoop({
          action_type: "GetMembershipInfo",
          // memberShipId: this.user.MEMBERSHIP_ID,
          WechatUserId: this.user.WechatUserId,
          RegisterType: 0,
        })
        .then(function (data) {
          console.log("GetMembershipInfo", data);
          if (data.ResultCode === "100") {
            let _data = data.Data;
            _this.user.MEMBERSHIP_LEVEL_TEXT =
              _data.Data.MEMBERSHIP_LEVEL_TEXT || "";
            _this.user.COUPON_COUNT = _data.Data.COUPON_COUNT || "";
            _this.user.PENDORDER_COUNT = _data.Data.PENDORDER_COUNT || "";
            _this.user.RESERVATION_COUNT = _data.Data.RESERVATION_COUNT || "";
            _this.user.ACCOUNT_BALANCE = _data.Data.ACCOUNT_BALANCE || "";
            _this.user.ISPLUS = _data.Data.ISPLUS || "";
            _this.user.INDUSTRY_MEMBERSHIP_ID =
              _data.Data.INDUSTRY_MEMBERSHIP_ID || "";
            _this.user.MEMBERSHIP_TYPE = _data.Data.MEMBERSHIP_TYPE || "";
            _this.user.MEMBERSHIP_LEVEL = _data.Data.MEMBERSHIP_LEVEL || "";
            _this.user.DELIVER_COUNT = _data.Data.DELIVER_COUNT || "";
            _this.user.InviteCode = _data.Data.InviteCode || "";
            _this.user.MEMBERSHIP_POINT = _data.Data.MEMBERSHIP_POINT || "";
            _this.user.MEMBERSHIP_MOBILEPHONE =
              _data.Data.MEMBERSHIP_MOBILEPHONE || "";

            _this.$store.commit("setUser", _this.user);
          }
        });
    },
    getDistributionCount() {
      let _this = this;
      if (_this.user.MEMBERSHIP_ID) {
        _this.$api
          .getCoop({
            action_type: "GetDistributionCount",
          })
          .then((res) => {
            console.log("312312", res);
            _this.spreadMsg = res.Data;
            _this.$forceUpdate();
          });
      }
    },

    creatPageQR() {
      // 生成当前页面小程序二维码
      let _this = this;

      uni.showLoading({
        title: "正在加载",
      });
      _this.$api
        .getCoop({
          action_type: "CreateWxCode",
          page: "pages/home/index",
          scene: _this.user.InviteCode, // 商品id & 当前用户邀请码
          width: 1280,
        })
        .then((res) => {
          _this.InviteCodePath = res.Data.imgUrl;
          _this.showInvitedCode = true;
          _this.$forceUpdate();
          uni.hideLoading();
        });
    },
    saveImage() {
      // 将海报保存图片到
      let _this = this;
      uni.getSetting({
        success(res) {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",

              success() {
                // 用户已经同意小程序使用相册

                _this.saveImageToPhotos();
              },

              fail() {
                wx.openSetting({
                  success: (res) => {},
                });
              },
            });
          } else {
            // 用户已经同意小程序使用相册

            _this.saveImageToPhotos();
          }
        },
      });
    },
    saveImageToPhotos() {
      let _this = this;
      uni.showLoading({ title: "正在保存" });
      uni.getImageInfo({
        src: _this.InviteCodePath, // _this.good.DEFAULT_IMG,
        success: (rs) => {
          uni.saveImageToPhotosAlbum({
            filePath: rs.path,
            success(result) {
              uni.showToast({
                title: "保存成功，从相册中分享到朋友圈吧",
                icon: "none",
                duration: 4000,
              });

              uni.hideLoading();
              _this.showInvitedCode = false;
            },
            fail: function (res) {
              uni.showToast({
                title: "图片保存失败",
                icon: "none",
                duration: 2000,
              });
            },
          });
        },
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.page-body {
  // background #ffffff
  padding: 24rpx 32rpx;
  // padding-bottom: 20rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #F0F4FF 0%, #F6F7F9 100%);
  min-height: 100vh;

  .userDetailBox {
    width: 100%;
    background: #FFFFFF;
    border-radius: 8rpx;
    box-sizing: border-box;
    padding: 24rpx 32rpx;
    margin-bottom: 32rpx;

    .userBox {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding-bottom: 24rpx;
      border-bottom: 1px solid #F3F3F3;

      .userLeft {
        display: flex;
        align-items: center;

        .userImgBox {
          width: 104rpx;
          height: 104rpx;
          border-radius: 50%;
          overflow: hidden;

          .avatarBtn {
            width: 100%;
            height: 100%;
            padding: 0;

            .headerImg {
              width: 100%;
              height: 100%;
            }
          }
        }

        .userDetail {
          margin-left: 24rpx;
          // display: flex;
          // flex-direction: column;
          // justify-content: space-between;
          height: 104rpx;

          .userName {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #130F05;
            line-height: 44rpx;
            text-align: justify;
            font-style: normal;
            margin-bottom: 8rpx;
          }

          .identity {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #c79519;
            line-height: 32rpx;
            text-align: justify;
            font-style: normal;
            background: #faf3e2;
            border-radius: 16rpx 16rpx 16rpx 0rpx;
            padding: 2rpx 6rpx;
          }
        }
      }

      .codeBox {
        width: 80rpx;
        box-sizing: border-box;
        padding: 4rpx;
        display: flex;
        flex-direction: column;

        .codeImg {
          width: 64rpx;
          height: 64rpx;
        }

        .codeText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #130F05;
          line-height: 32rpx;
          text-align: justify;
          font-style: normal;
          white-space: nowrap;
        }
      }
    }

    .propertyBox {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      padding-top: 24rpx;

      .propertyItem {
        width: calc((100% / 3));
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .propertyLabel {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130F05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .propertyValue {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #BA922F;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }

  .funListBox {
    width: 100%;
    background: #fff;
    border-radius: 8rpx;
    box-sizing: border-box;
    padding: 0 32rpx;

    .funItem {
      padding: 32rpx 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #F5F6F7;

      .funIcon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;
      }

      .funName {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #130F05;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .gray {
        color: #c5c6c7;
      }
    }
  }
}

.user-card {
  display: flex;
  height: 278rpx;
  color: #3e4148;
  border-radius: 20rpx;
  flex-direction: column;
  // align-items center
  // justify-content center
  background-image: url('https://eshangtech.com/ShopICO/user-card.png'); // eshangtech.com/ShopICO/user-card.png)
  background-size: cover;
  background-position: center;
}

.photo {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
}

.user-card-top {
  display: flex;
  // justify-content space-between
  color: #41414b;
  box-sizing: border-box;
  padding: 40rpx 40rpx;
  width: 100%;
  font-size: 28rpx;
  position: relative;
  align-items: center;
}

.novip {
  background: url('https://eshangtech.com/ShopICO/nohavevip.png') no-repeat left center; // eshangtech.com/ShopICO/nohavevip.png) no-repeat left center
  background-size: contain;
  height: 30rpx;
  width: 160rpx;
}

.user-btn {
  background: url('https://eshangtech.com/ShopICO/join-vip.png') no-repeat center; // eshangtech.com/ShopICO/join-vip.png) no-repeat center
  background-size: contain;
  color: #414141;
  height: 54rpx;
  width: 176rpx;
  border-radius: 28rpx;
}

.ico-menu {
  width: 34rpx;
  height: 34rpx;
  vertical-align: middle;
  margin-right: 12rpx;
}

.name-text {
  line-height: 50rpx;
  font-size: 32rpx;
  color: #28292d;
}

.user-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 138rpx;
  width: 100%;
  background-color: #2C2C2C;
  position: relative;
  top: -20rpx;
  font-family: 'PingFang SC Medium';
  padding: 0 30rpx;
  box-sizing: border-box;
}

.u-t-unit {
  font-size: 12px;
  color: #D5C59D;
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.user-tab-num {
  margin-top: 12rpx;
  color: #D5C59D;
  font-size: 28rpx;
}

.code-cont-box {
  padding: 24rpx 0 24rpx 24rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  margin: 0 30rpx 30rpx;
}

.code-title {
  font-size: 24rpx;
  width: 100rpx;
}

.code-text {
  font-size: 30rpx;
  color: #498fe2;
  width: 370rpx;
}

.code-btn {
  font-size: 24rpx;
  color: #498fe2;
  width: 192rpx;
  text-align: center;
  border-left: 1rpx solid #eee;
}

.list-num {
  color: #A4A5A8;
  margin-right: 20rpx;
  font-size: 24rpx;
  display: inline-block;
  vertical-align: middle;
  font-family: 'PingFang SC Medium';
}

.user-menu {
  margin: 0 30rpx;
  padding: 0 30rpx;
  background: #fff;
  border-radius: 12rpx;
}

.my-list + .my-list {
  border-top: 1rpx solid #eee;
}

.my-list {
  height: 80rpx;
  padding: 16rpx 0rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  color: #383838;
}

.list-title {
  flex: 0.5;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC Regular';
}

.list-title span {
  flex: 0.7;
}

.my-list image, .spread-view image {
  vertical-align: middle;
  margin-right: 18rpx;
}

image.my-ico1 {
  width: 35rpx;
  height: 31rpx;
}

image.my-ico2 {
  width: 35rpx;
  height: 28rpx;
}

image.my-ico3 {
  width: 35rpx;
  height: 26rpx;
}

image.my-ico4 {
  width: 17rpx;
  height: 30rpx;
}

image.my-ico5 {
  width: 35rpx;
  height: 31rpx;
}

.no-border {
  border: none;
}

.pop-box {
  width: 588rpx;
  height: 256rpx;
  text-align: center;
  padding: 40rpx 0;
  border-radius: 30rpx;
  overflow: hidden;
}

.pop-title {
  font-size: 32rpx;
}

.pop-body {
  font-size: 28rpx;
  margin-top: 36rpx;
}

.popbtn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 72rpx;
}

.popbtn {
  height: 60rpx;
  width: 208rpx;
  border-radius: 32rpx;
  text-align: center;
  font-size: 24rpx;
  line-height: 60rpx;
}

.popbtn+.popbtn {
  margin-left: 60rpx;
}

.cancel-btn {
  border: 1rpx solid #616161;
  color: #616161;
}

.confirm-btn {
  background: #515151;
  color: #fff;
}

// 营销
.spread-view {
  border-radius: 12rpx;
  background: #fff;
  margin: 0 30rpx 24rpx 30rpx;
  font-size: 26rpx;
  padding: 24rpx 0;
}

.spread-tab {
  margin-top: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spread-tab .u-t-unit {
  color: #B89051;
}

.spread-tab .user-tab-num {
  color: #B89051;
  margin-bottom: 12rpx;
}

.down-img-btn {
  text-align: center;
  padding: 32rpx 0;
  background: #fff;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}
</style>
