nbjk-xcx/src/pages/user/index.vue

<template>
  <view>
    <scroll-view scroll-y class="bg">
      <div class="user">
        <van-cell custom-class="head-cell" is-link label-class="" center>
          <view
            @click="
              () => {
                userFormShow = true;
                nickName = userInfo.nickName || '新用户';
              }
            "
            class="userButton"
            slot="title"
          >
            <image
              class="user-headImg"
              v-if="userInfo.headImage"
              :src="userInfo.headImage"
            ></image>
            <image class="user-headImg" v-else :src="unLoginHead"></image>
            <view
              class="flex"
              style="width: 60%; padding-left: 24rpx; text-align: left"
            >
              <view style="font-size: 38rpx; color: #0a1a33; width: 100%">{{
                userInfo.nickName || "新用户"
              }}</view>
              <view style="font-size: 26rpx; color: #8a9099; width: 100%">
                {{ userInfo.phone || "点击绑定手机号" }}</view
              >
            </view>
          </view>
        </van-cell>
        <van-cell
          title-class="uni-app-fontsize-paragraph"
          title="三力测试"
          is-link
          center
          url="/otherPages/beforeThreeExam/index"
        >
        </van-cell>

        <van-cell
          title-class="uni-app-fontsize-paragraph"
          title="关注公众号"
          is-link
          center
          url="/otherPages/careGzh/index"
        >
        </van-cell>
        <van-cell
          title-class="uni-app-fontsize-paragraph"
          title="电子资料"
          is-link
          @click="
            goPath(
              '/pages/extraWeb/index?src=https://nbjk-h5.zzxcx.net/pdfImages'
            )
          "
          center
        >
        </van-cell>
         <van-cell
          title-class="uni-app-fontsize-paragraph"
          title="每日驾考资讯"
          is-link
          center
          url="/otherPages/careEveryDay/index"
        >
        </van-cell>
          <van-cell
          title-class="uni-app-fontsize-paragraph"
          title="生成分享二维码"
          is-link
          center
          url="/otherPages/createReferCode/index"
        >
        </van-cell>
        <!-- <van-cell title="我要提现" value="" is-link center @click="goCashOut">
        </van-cell> -->
        <!-- <van-cell title="我的下级" value="" is-link center @click="goMyBranch">
				<template #icon>
					<m-icon type="hyyxq" class="cell-icon" />
				</template>
			</van-cell> -->
        <!-- <van-cell
          title="我的推广积分"
          value=""
          is-link
          center
          @click="goMyIntegral"
        >
        </van-cell> -->
        <!-- #ifdef MP-WEIXIN -->
        <!-- <van-cell
        title="会员有效期"
        :value="expireTime ? expireTime : '开通会员'"
        is-link
        center
        url="/otherPages/buyVip/index"
      >
      </van-cell> -->

        <!-- #endif -->
        <!-- #ifdef MP-TOUTIAO -->
        <van-cell
          v-if="!isVip"
          title="会员有效期"
          :value="'开通会员'"
          is-link
          center
          url="/otherPages/buyVip/index"
        >
        </van-cell>
        <van-cell
          v-if="isVip"
          title="会员有效期"
          :value="'已开通'"
          is-link
          center
        >
        </van-cell>
        <van-cell
          title="资料下载"
          is-link
          @click="goVipPath('/otherPages/pdfList/index')"
          left
        >
          <template #icon>
            <m-icon type="fkbz" class="cell-icon" />
          </template>
        </van-cell>

        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <!-- 
      <van-cell title-class="uni-app-fontsize-paragraph" title="反馈帮助" is-link center url="/pages/extraWeb/index?src=https://support.qq.com/product/359609">
        <template #icon>
          <m-icon type="fkbz" class="cell-icon" />
        </template>
      </van-cell> -->

        <!-- #endif -->
      </div>
      <view class="list"> </view>
      <view class="wxad">
        <ad
          ad-type="video"
          :ad-intervals="100"
          unit-id="adunit-8eb44bbd7e3147d4"
        ></ad>
      </view>
      <van-popup position="bottom" :show="userFormShow">
        <view class="userform">
          <view class="userform-close">
            <van-icon
              @click="
                () => {
                  userFormShow = false;
                }
              "
              color="#a8a8a8"
              size="18"
              name="cross"
            />
          </view>
          <view>
            <van-field
              :value="userInfo.nickName"
              required
              clearable
              label="用户名"
              @change="changeUserName"
              placeholder="请输入用户名"
            />
            <van-field
              readonly
              :value="userInfo.phone"
              clearable
              label="手机号"
              placeholder="请绑定手机号"
              @change="changeUserPhone"
            >
              <van-button
                open-type="getPhoneNumber"
                @getphonenumber="getPhoneByUser"
                slot="button"
                size="small"
                type="primary"
              >
                获取手机号
              </van-button>
            </van-field>
          </view>
          <view class="userform-bind">
            <van-button
              @click="sendUserInfo"
              custom-style="width:690rpx;"
              round
              type="primary"
              >修改用户信息</van-button
            >
          </view>
        </view>
      </van-popup>

      <!-- <view class="ad-box serviceBox">
			<ad unit-id="adunit-d8c1548cc9663765"></ad>
		</view> -->
    </scroll-view>
  </view>
</template>

<script>
import api from "@/api/index";
import unLoginHead from "@/assets/img/unLoginHead.png";
export default {
  computed: {
    unLoginHead() {
      return unLoginHead;
    },
    expireTime() {
      return this.$store.state.user.userInfo.expireTime &&
        this.$store.getters.isVip
        ? this.$store.state.user.userInfo.expireTime.split(" ")[0]
        : null;
    },
    isVip() {
      return this.$store.getters.isVip;
    },
  },
  data() {
    return {
      userFormShow: false,
      userInfo: uni.getStorageSync("userInfo"),
    };
  },
  mounted() {
    this.$store.dispatch("GetInfo");
  },
  methods: {
    sendUserInfo() {
      api.user.userInfoUserInfo(this.userInfo).then((res) => {
        this.userFormShow = false;
        this.$store.dispatch("GetInfo");
      });
    },
    changeUserName(e) {
      console.log(e);
      this.userInfo.nickName = e.detail;
    },
    changeUserPhone(e) {
      console.log(e);
      this.userInfo.phone = e.detail;
    },
    getPhoneByUser(e) {
      api.user
        .userInfoGetPhoneByCode({
          code: e.detail.code,
        })
        .then((res) => {
          this.userInfo.phone = res.data;
        });
    },
    goPath(url) {
      uni.navigateTo({
        url,
      });
    },
    goVipPath(url) {
      if (this.isVip) {
        uni.navigateTo({
          url,
        });
      } else {
        uni.showToast({
          title: "vip才能使用",
          icon: "none",
        });
      }
    },
    getUserProfile(e) {
      let that = this;
      uni.getUserProfile({
        desc: "业务需要",
        success(res) {
          console.log(res);
          api.user
            .userInfoUserInfo({
              headImage: res.userInfo.avatarUrl,
              nickName: res.userInfo.nickName,
            })
            .then((res) => {
              that.$store.dispatch("GetInfo");
            });
        },
      });

      // let updateRes = await this.$api.user.updateUserInfo({
      //   headImage: userInfo.userInfo.avatarUrl,
      //   nickName: userInfo.userInfo.nickName,
      // });
      // if (updateRes.code == 200) {

      //   this.$store.state.user.userInfo.headImage = userInfo.userInfo.avatarUrl;
      //   this.$store.state.user.userInfo.nickName = userInfo.userInfo.nickName;
      // }
    },
  },
};
</script>
<style>
.user .head-cell {
  background: transparent;
}
</style>
<style lang="scss" scoped>
.userform {
  width: 100%;
  height: 450rpx;
  background: #fff;

  .userform-close {
    text-align: right;
    padding-right: 15rpx;
    padding-top: 15rpx;
  }
  .userform-bind {
    width: 100%;
    padding: 30rpx 30rpx;
    display: flex;
    justify-content: center;
  }
}
.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.userButton::after {
  border: 0;
}
.userButton {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background: transparent;
  align-items: flex-start;
  height: auto;
  padding: 0;
  line-height: 1.4;
}

.bg {
  width: 100%;
  min-height: 812rpx;
  // background: #fff;
  background-image: url("https://ndata.zzxcx.net/ctjk/mp-wx/user/bg.png");
}

.list {
  padding: 0 15rpx;
}

.user {
  padding: 0 15rpx;

  /* height: 100vh; */
  .group {
    margin: 10px 0;
  }

  .user-avatar {
    width: 46px;
    height: 46px;
    margin-right: 10px;
  }
}

.user-headImg {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
}

.cell-icon {
  margin-right: 5px;
}
</style>