个人中心
This commit is contained in:
		
							
								
								
									
										353
									
								
								src/project/pingchang/AppPcMine/AppPcMine.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										353
									
								
								src/project/pingchang/AppPcMine/AppPcMine.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,353 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="page">
 | 
			
		||||
    <div class="header-bg">
 | 
			
		||||
      <div class="header-info">
 | 
			
		||||
        <div class="wrap" @click="handleLogin()">
 | 
			
		||||
          <div class="user-img-div">
 | 
			
		||||
            <img :src="user.avatarUrl" alt="" class="user-img" v-if="user.id && user.avatarUrl"/>
 | 
			
		||||
            <open-data type="userAvatarUrl" lang="zh_CN" class="user-img" v-else/>
 | 
			
		||||
          </div>
 | 
			
		||||
          <div class="user-info">
 | 
			
		||||
            <div class="option">
 | 
			
		||||
              <template v-if="!user.id">
 | 
			
		||||
                <p>登录</p>
 | 
			
		||||
                <p>点击进行登录</p>
 | 
			
		||||
              </template>
 | 
			
		||||
              <template v-else>
 | 
			
		||||
                <p v-if="isApprove">{{ user.realName }}</p>
 | 
			
		||||
                <p v-else>{{ user.nickName }}</p>
 | 
			
		||||
                <p>{{ user.areaName || "" }}</p>
 | 
			
		||||
              </template>
 | 
			
		||||
            </div>
 | 
			
		||||
            <p class="info" v-if="user.id" @click.stop="$linkTo('./userInfo')">个人信息</p>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="approve">
 | 
			
		||||
      <img class="icon" src="./authentication-img.png" alt="">
 | 
			
		||||
      <div class="flex">
 | 
			
		||||
        <span class="cert" v-if="isApprove" v-text="approveLabel" @click="$linkTo('/mods/AppPartyAuth/AppPartyAuth')"/>
 | 
			
		||||
        <u-icon v-else name="arrow-right" color="#E7F2FF" size="28"
 | 
			
		||||
                :label="approveLabel" label-color="#E7F2FF" label-pos="left" @click="approve"/>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <!-- <div class="list-wrap">
 | 
			
		||||
      <div class="card" v-for="(group,index) in listGroup" :key="index">
 | 
			
		||||
        <div class="item" v-for="(item) in group" hover-class="bg-hover" :key="item.label"
 | 
			
		||||
             @click="linkTo(item.path, item.type)">
 | 
			
		||||
          <div class="block">
 | 
			
		||||
            <img class="icon" :src="item.icon" alt="">
 | 
			
		||||
          </div>
 | 
			
		||||
          <span class="desc" v-if="!item.share">{{ item.label }}</span>
 | 
			
		||||
          <button open-type="share" v-else>
 | 
			
		||||
            <span>{{ item.label }}</span>
 | 
			
		||||
          </button>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div> -->
 | 
			
		||||
    <AiLogin ref="login" @success="getAuth()"/>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import {mapActions, mapState} from "vuex";
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: "AppPcMine",
 | 
			
		||||
  appName: "我的",
 | 
			
		||||
  customNavigation: true,
 | 
			
		||||
  computed: {
 | 
			
		||||
    ...mapState(['user', 'token']),
 | 
			
		||||
    isApprove() {
 | 
			
		||||
      return this.user?.status == 2;
 | 
			
		||||
    },
 | 
			
		||||
    approveLabel() {
 | 
			
		||||
      return this.user?.status == 2 ? "已认证" :
 | 
			
		||||
          this.user?.status == 1 ? "审核中" :
 | 
			
		||||
              this.user?.status == -1 ? "审核驳回" : "前往认证"
 | 
			
		||||
    },
 | 
			
		||||
    listGroup() {
 | 
			
		||||
      return [
 | 
			
		||||
        [
 | 
			
		||||
          {
 | 
			
		||||
            icon: "https://cdn.cunwuyun.cn/wxmp/mine/wodejiating.png",
 | 
			
		||||
            label: "我的家庭",
 | 
			
		||||
            path: "./myFamily",
 | 
			
		||||
            type: 'idNumber'
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            icon: "https://cdn.cunwuyun.cn/wxmp/mine/wodejiaxiang.png",
 | 
			
		||||
            label: "我的家乡",
 | 
			
		||||
            path: "/mods/AppHometown/AppHometown",
 | 
			
		||||
            type: 'token'
 | 
			
		||||
          }
 | 
			
		||||
        ],
 | 
			
		||||
        [
 | 
			
		||||
          {
 | 
			
		||||
            icon: "https://cdn.cunwuyun.cn/wxmp/mine/wodejifen.png",
 | 
			
		||||
            label: "我的积分",
 | 
			
		||||
            path: "/mods/AppCreditPoints/AppCreditPoints?type=detail",
 | 
			
		||||
            type: 'idNumber'
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            icon: "https://cdn.cunwuyun.cn/wxmp/mine/chaoshidingdan.png",
 | 
			
		||||
            label: "超市订单",
 | 
			
		||||
            path: "/mods/AppOrderList/AppOrderList",
 | 
			
		||||
            type: 'idNumber'
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            icon: "https://cdn.cunwuyun.cn/wxmp/mine/banshijindu.png",
 | 
			
		||||
            label: "办事进度",
 | 
			
		||||
            path: "/mods/AppMyPlan/AppMyPlan",
 | 
			
		||||
            type: 'idNumber'
 | 
			
		||||
          }
 | 
			
		||||
        ],
 | 
			
		||||
      ]
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    ...mapActions(['getUserInfo']),
 | 
			
		||||
    approve() {
 | 
			
		||||
      if (!this.token) {
 | 
			
		||||
        this.$refs.login.show();
 | 
			
		||||
      } else if (!this.isApprove) {
 | 
			
		||||
        if (this.user.status == 0) {
 | 
			
		||||
          this.$linkTo('/mods/AppAuth/AppAuth');
 | 
			
		||||
        } else {
 | 
			
		||||
          this.$linkTo('/mods/AppAuth/authSuccess')
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    linkTo(url, type) {
 | 
			
		||||
      if (type) {
 | 
			
		||||
        if (this.token) {
 | 
			
		||||
          if (type == 'token') {
 | 
			
		||||
            this.$linkTo(url)
 | 
			
		||||
          }
 | 
			
		||||
          if (type == 'idNumber') {
 | 
			
		||||
            if (this.user.status == 0) {
 | 
			
		||||
              if (!this.user.phone) {
 | 
			
		||||
                this.$linkTo('/pages/phone/bingPhoneNumber?from=auth')
 | 
			
		||||
              } else {
 | 
			
		||||
                this.$linkTo('/mods/AppAuth/AppAuth')
 | 
			
		||||
              }
 | 
			
		||||
            } else {
 | 
			
		||||
              this.$linkTo(url)
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
        } else {
 | 
			
		||||
          this.$refs.login.show()
 | 
			
		||||
        }
 | 
			
		||||
      } else {
 | 
			
		||||
        this.$linkTo(url)
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    handleLogin() {
 | 
			
		||||
      if (!this.token) {
 | 
			
		||||
        this.$refs.login.show();
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    getAuth() {
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.token && this.getUserInfo()
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  onShow() {
 | 
			
		||||
    this.getAuth();
 | 
			
		||||
  },
 | 
			
		||||
  onShareAppMessage() {
 | 
			
		||||
    return {
 | 
			
		||||
      title: `欢迎使用数字平昌~`,
 | 
			
		||||
      path: `/pages/AppHome/AppHome`
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
@import "~dvcp-wui/common";
 | 
			
		||||
 | 
			
		||||
.page {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  min-height: 100%;
 | 
			
		||||
  background-color: #F3F6F9;
 | 
			
		||||
  position: relative;
 | 
			
		||||
 | 
			
		||||
  .header-bg {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 512px;
 | 
			
		||||
    position: relative;
 | 
			
		||||
 | 
			
		||||
    .header-info {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      height: 100%;
 | 
			
		||||
      background: url("https://cdn.cunwuyun.cn/wxmp/sanjianxi/mineBg.png") no-repeat no-repeat;
 | 
			
		||||
      background-size: 100% 100%;
 | 
			
		||||
      box-sizing: border-box;
 | 
			
		||||
      padding: 240px 0 0 48px;
 | 
			
		||||
 | 
			
		||||
      .wrap {
 | 
			
		||||
        width: 100%;
 | 
			
		||||
        height: 96px;
 | 
			
		||||
        display: flex;
 | 
			
		||||
        align-items: center;
 | 
			
		||||
 | 
			
		||||
        .user-img-div {
 | 
			
		||||
          display: inline-block;
 | 
			
		||||
          width: 96px;
 | 
			
		||||
          height: 96px;
 | 
			
		||||
          border-radius: 50%;
 | 
			
		||||
          overflow: hidden;
 | 
			
		||||
          border: 4px solid #FFFFFF;
 | 
			
		||||
          flex-shrink: 0;
 | 
			
		||||
 | 
			
		||||
          .user-img {
 | 
			
		||||
            display: inline-block;
 | 
			
		||||
            width: 96px;
 | 
			
		||||
            height: 96px;
 | 
			
		||||
            border-radius: 58px;
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .user-info {
 | 
			
		||||
          flex: 1;
 | 
			
		||||
          display: flex;
 | 
			
		||||
          align-items: center;
 | 
			
		||||
          justify-content: space-between;
 | 
			
		||||
          margin-left: 26px;
 | 
			
		||||
          box-sizing: border-box;
 | 
			
		||||
          padding-right: 32px;
 | 
			
		||||
 | 
			
		||||
          .option {
 | 
			
		||||
            & > p:first-child {
 | 
			
		||||
              font-size: 34px;
 | 
			
		||||
              font-weight: 600;
 | 
			
		||||
              color: #333333;
 | 
			
		||||
              line-height: 54px;
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            & > p:last-child {
 | 
			
		||||
              font-size: 26px;
 | 
			
		||||
              font-weight: 400;
 | 
			
		||||
              color: #7088A0;
 | 
			
		||||
              line-height: 36px;
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
 | 
			
		||||
          .info {
 | 
			
		||||
            width: 136px;
 | 
			
		||||
            height: 48px;
 | 
			
		||||
            border-radius: 8px;
 | 
			
		||||
            border: 2px solid #7088A0;
 | 
			
		||||
            font-size: 26px;
 | 
			
		||||
            font-weight: 400;
 | 
			
		||||
            color: #7088A0;
 | 
			
		||||
            display: flex;
 | 
			
		||||
            align-items: center;
 | 
			
		||||
            justify-content: center;
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .approve {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    left: 50%;
 | 
			
		||||
    top: 400px;
 | 
			
		||||
    transform: translateX(-50%);
 | 
			
		||||
    width: 686px;
 | 
			
		||||
    height: 112px;
 | 
			
		||||
    background: linear-gradient(90deg, #8FB4FF 0%, #4181FF 100%);
 | 
			
		||||
    border-radius: 16px;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    justify-content: space-between;
 | 
			
		||||
    box-sizing: border-box;
 | 
			
		||||
    padding: 0 20px;
 | 
			
		||||
 | 
			
		||||
    .icon {
 | 
			
		||||
      width: 296px;
 | 
			
		||||
      height: 52px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .cert {
 | 
			
		||||
      font-family: PingFangSC-Regular, PingFang SC;
 | 
			
		||||
      font-size: 28px;
 | 
			
		||||
      color: #E7F2FF;
 | 
			
		||||
      margin-right: 4px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .list-wrap {
 | 
			
		||||
    box-sizing: border-box;
 | 
			
		||||
    padding: 32px;
 | 
			
		||||
 | 
			
		||||
    .card {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      min-height: 100px;
 | 
			
		||||
      border-radius: 16px;
 | 
			
		||||
      background-color: #fff;
 | 
			
		||||
      margin-bottom: 32px;
 | 
			
		||||
 | 
			
		||||
      .item {
 | 
			
		||||
        height: 100px;
 | 
			
		||||
        display: flex;
 | 
			
		||||
        align-items: center;
 | 
			
		||||
 | 
			
		||||
        &:last-child {
 | 
			
		||||
          .desc {
 | 
			
		||||
            border-bottom: none !important;
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .block {
 | 
			
		||||
          width: 80px;
 | 
			
		||||
          height: 100%;
 | 
			
		||||
          display: flex;
 | 
			
		||||
          align-items: center;
 | 
			
		||||
          justify-content: center;
 | 
			
		||||
          flex-shrink: 0;
 | 
			
		||||
 | 
			
		||||
          .icon {
 | 
			
		||||
            width: 44px;
 | 
			
		||||
            height: 44px;
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .desc, & > button {
 | 
			
		||||
          height: 100%;
 | 
			
		||||
          flex: 1;
 | 
			
		||||
          font-size: 30px;
 | 
			
		||||
          font-weight: 400;
 | 
			
		||||
          color: #666666;
 | 
			
		||||
          display: flex;
 | 
			
		||||
          align-items: center;
 | 
			
		||||
          border-bottom: 1px solid #EEEEEE;
 | 
			
		||||
 | 
			
		||||
          & > span {
 | 
			
		||||
            width: 100%;
 | 
			
		||||
            height: 100%;
 | 
			
		||||
            text-align: left;
 | 
			
		||||
            display: flex;
 | 
			
		||||
            align-items: center;
 | 
			
		||||
          }
 | 
			
		||||
 | 
			
		||||
          &::after {
 | 
			
		||||
            border: none;
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .no-border {
 | 
			
		||||
          border-bottom: none;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      &:first-of-type {
 | 
			
		||||
        margin-bottom: 32px;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										
											BIN
										
									
								
								src/project/pingchang/AppPcMine/authentication-img.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/project/pingchang/AppPcMine/authentication-img.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 22 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/project/pingchang/AppPcMine/me.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/project/pingchang/AppPcMine/me.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 993 B  | 
							
								
								
									
										
											BIN
										
									
								
								src/project/pingchang/AppPcMine/me_selected.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/project/pingchang/AppPcMine/me_selected.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 1.0 KiB  | 
							
								
								
									
										180
									
								
								src/project/pingchang/AppPcMine/myFamily.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										180
									
								
								src/project/pingchang/AppPcMine/myFamily.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,180 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="page">
 | 
			
		||||
    <div class="credit-points">
 | 
			
		||||
      <div class="bg-blue"></div>
 | 
			
		||||
      <div class="header-content">
 | 
			
		||||
        <div class="title">家庭地址</div>
 | 
			
		||||
        <div class="address">
 | 
			
		||||
          <img src="https://cdn.cunwuyun.cn/img/location-blue.svg" alt="">
 | 
			
		||||
          <p>{{ info.resident.currentAreaName || '' }}{{ info.resident.currentAddress || '' }}</p>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="list-content">
 | 
			
		||||
        <div class="title">家庭成员</div>
 | 
			
		||||
        <div class="item" v-for="(item, index) in info.family" :key="index">
 | 
			
		||||
          <img src="https://cdn.cunwuyun.cn/dvcp/myFamily/1.png" alt="" class="banner-top" v-if="item.sex == 1">
 | 
			
		||||
          <img src="https://cdn.cunwuyun.cn/dvcp/myFamily/2.png" alt="" class="banner-top" v-else>
 | 
			
		||||
          <div class="user-img">
 | 
			
		||||
            <img v-if="item.photo" :src="item.photo" alt=""/>
 | 
			
		||||
            <img v-else src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt=""/>
 | 
			
		||||
          </div>
 | 
			
		||||
          <div class="user-info">
 | 
			
		||||
            <p>{{ item.name }}</p>
 | 
			
		||||
            <div v-if="item.householdName == 1" class="color-5AAD6A">户主</div>
 | 
			
		||||
            <div v-else>{{ $dict.getLabel('householdRelation', item.householdRelation) }}</div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import {mapState} from 'vuex'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  appName: "我的家庭",
 | 
			
		||||
  computed: {
 | 
			
		||||
    ...mapState(['user', 'token'])
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      info: {}
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  onLoad() {
 | 
			
		||||
    this.$dict.load('householdRelation').then(() => {
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.getUser()
 | 
			
		||||
      })
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    getUser() {
 | 
			
		||||
      this.$instance.post(`/app/appresident/detailForWx?id=${this.user.residentId}`).then(res => {
 | 
			
		||||
        if (res.code === 0) {
 | 
			
		||||
          this.info = res.data
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
@import "~dvcp-wui/common";
 | 
			
		||||
 | 
			
		||||
.page {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  background-color: #f3f6f9;
 | 
			
		||||
 | 
			
		||||
  .credit-points {
 | 
			
		||||
    .bg-blue {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      height: 112px;
 | 
			
		||||
      background-color: #197DF0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .header-content {
 | 
			
		||||
      width: 690px;
 | 
			
		||||
      background: #FFF;
 | 
			
		||||
      border-radius: 16px;
 | 
			
		||||
      margin: -80px 0 32px 30px;
 | 
			
		||||
      padding: 0 30px 80px;
 | 
			
		||||
      box-sizing: border-box;
 | 
			
		||||
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
 | 
			
		||||
 | 
			
		||||
      .address {
 | 
			
		||||
        font-size: 32px;
 | 
			
		||||
        color: #666;
 | 
			
		||||
        overflow: hidden;
 | 
			
		||||
 | 
			
		||||
        img {
 | 
			
		||||
          width: 34px;
 | 
			
		||||
          height: 38px;
 | 
			
		||||
          margin-right: 14px;
 | 
			
		||||
          vertical-align: middle;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        p {
 | 
			
		||||
          line-height: 44px;
 | 
			
		||||
          width: 580px;
 | 
			
		||||
          word-break: break-all;
 | 
			
		||||
          float: right;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .title {
 | 
			
		||||
      font-size: 32px;
 | 
			
		||||
      font-weight: 500;
 | 
			
		||||
      color: #333;
 | 
			
		||||
      line-height: 120px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .list-content {
 | 
			
		||||
      width: 690px;
 | 
			
		||||
      background: #FFF;
 | 
			
		||||
      border-radius: 16px;
 | 
			
		||||
      padding: 0 30px 110px;
 | 
			
		||||
      box-sizing: border-box;
 | 
			
		||||
      margin-left: 30px;
 | 
			
		||||
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
 | 
			
		||||
 | 
			
		||||
      .item {
 | 
			
		||||
        width: 630px;
 | 
			
		||||
        height: 192px;
 | 
			
		||||
        background: #FFF;
 | 
			
		||||
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
 | 
			
		||||
        border-radius: 16px;
 | 
			
		||||
        padding-left: 30px;
 | 
			
		||||
        box-sizing: border-box;
 | 
			
		||||
        margin-bottom: 32px;
 | 
			
		||||
        overflow: hidden;
 | 
			
		||||
 | 
			
		||||
        .banner-top {
 | 
			
		||||
          width: 100%;
 | 
			
		||||
          height: 72px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .user-img {
 | 
			
		||||
          width: 104px;
 | 
			
		||||
          height: 104px;
 | 
			
		||||
          margin: -16px 34px 0 0;
 | 
			
		||||
          border-radius: 50%;
 | 
			
		||||
          float: left;
 | 
			
		||||
 | 
			
		||||
          img {
 | 
			
		||||
            width: 100%;
 | 
			
		||||
            height: 100%;
 | 
			
		||||
            border-radius: 50%;
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .user-info {
 | 
			
		||||
          margin-top: -16px;
 | 
			
		||||
          width: calc(100% - 138px);
 | 
			
		||||
          float: right;
 | 
			
		||||
 | 
			
		||||
          p {
 | 
			
		||||
            font-size: 32px;
 | 
			
		||||
            font-weight: 600;
 | 
			
		||||
            color: #333;
 | 
			
		||||
            line-height: 44px;
 | 
			
		||||
            margin-bottom: 8px;
 | 
			
		||||
          }
 | 
			
		||||
 | 
			
		||||
          div {
 | 
			
		||||
            font-size: 26px;
 | 
			
		||||
            font-weight: 400;
 | 
			
		||||
            color: #666;
 | 
			
		||||
            line-height: 36px;
 | 
			
		||||
          }
 | 
			
		||||
 | 
			
		||||
          .color-5AAD6A {
 | 
			
		||||
            color: #5AAD6A;
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										222
									
								
								src/project/pingchang/AppPcMine/userInfo.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										222
									
								
								src/project/pingchang/AppPcMine/userInfo.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,222 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="page">
 | 
			
		||||
    <div class="info-list">
 | 
			
		||||
      <div class="item-content mar-b8">
 | 
			
		||||
        <div class="item solid">
 | 
			
		||||
          <p class="mar-t22">头像</p>
 | 
			
		||||
          <button class="user-img-div" open-type="chooseAvatar" @chooseavatar="handleWeixinSync">
 | 
			
		||||
            <img :src="user.avatarUrl" class="user-img">
 | 
			
		||||
          </button>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="item">
 | 
			
		||||
          <p>用户昵称</p>
 | 
			
		||||
          <div v-if="!editNickName" @click="editNickName=true">
 | 
			
		||||
            <p class="name" v-text="nickName"/>
 | 
			
		||||
          </div>
 | 
			
		||||
          <input v-else type="nickname" class="editNickName" v-model="nickName" @blur="handleWeixinSync">
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="item-content mar-b8">
 | 
			
		||||
        <div class="item">
 | 
			
		||||
          <p>手机号</p>
 | 
			
		||||
          <div>{{ user.phone || '' }}</div>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="item-content" @click="onLogout">
 | 
			
		||||
        <div class="item">
 | 
			
		||||
          <p class="login-out">退出登录</p>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import {mapActions, mapState} from 'vuex'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: "userInfo",
 | 
			
		||||
  appName: "个人中心",
 | 
			
		||||
  computed: {
 | 
			
		||||
    ...mapState(['user', 'token']),
 | 
			
		||||
    nickName: {
 | 
			
		||||
      set(v) {
 | 
			
		||||
      },
 | 
			
		||||
      get() {
 | 
			
		||||
        const {nickName} = this.user
 | 
			
		||||
        return nickName
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  onLoad() {
 | 
			
		||||
    this.getUserInfo()
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      editNickName: false
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    ...mapActions(['getUserInfo', 'autoLogin']),
 | 
			
		||||
    upLoad(img) {
 | 
			
		||||
      return new Promise((resolve, reject) => {
 | 
			
		||||
        uni.uploadFile({
 | 
			
		||||
          url: `${this.$instance.defaults.baseURL}/admin/file/add`,
 | 
			
		||||
          filePath: img,
 | 
			
		||||
          name: 'file',
 | 
			
		||||
          header: {
 | 
			
		||||
            'Content-Type': 'multipart/form-data',
 | 
			
		||||
            Authorization: uni.getStorageSync('token')
 | 
			
		||||
          },
 | 
			
		||||
          success: uploadFileRes => {
 | 
			
		||||
            resolve(uploadFileRes)
 | 
			
		||||
          },
 | 
			
		||||
          fail: err => {
 | 
			
		||||
            reject(err)
 | 
			
		||||
          }
 | 
			
		||||
        })
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    onLogout() {
 | 
			
		||||
      uni.showModal({
 | 
			
		||||
        title: '提示',
 | 
			
		||||
        content: "是否要退出登录",
 | 
			
		||||
        success: res => {
 | 
			
		||||
          if (res.confirm) {
 | 
			
		||||
            this.$store.commit('logout')
 | 
			
		||||
            this.$toast('退出成功');
 | 
			
		||||
            setTimeout(() => {
 | 
			
		||||
              uni.switchTab({
 | 
			
		||||
                url: '/pages/AppMine/AppMine'
 | 
			
		||||
              })
 | 
			
		||||
            }, 500)
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    handleWeixinSync({detail}) {
 | 
			
		||||
      const {value: nickName, avatarUrl} = detail
 | 
			
		||||
      this.autoLogin({nickName, avatarUrl})
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
@import "~dvcp-wui/common";
 | 
			
		||||
 | 
			
		||||
.page {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  background-color: #F5F5F5;
 | 
			
		||||
 | 
			
		||||
  .info-list {
 | 
			
		||||
    margin: 0 0 16px 0;
 | 
			
		||||
 | 
			
		||||
    .item-content {
 | 
			
		||||
      padding: 0 32px;
 | 
			
		||||
      background-color: #fff;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .item {
 | 
			
		||||
      padding: 36px 0;
 | 
			
		||||
      line-height: 40px;
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      box-sizing: content-box;
 | 
			
		||||
      display: flex;
 | 
			
		||||
      justify-content: space-between;
 | 
			
		||||
 | 
			
		||||
      p {
 | 
			
		||||
        color: #333;
 | 
			
		||||
        font-weight: 400;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      div {
 | 
			
		||||
        color: #666;
 | 
			
		||||
        font-size: 28px;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .user-img-div {
 | 
			
		||||
        width: 104px;
 | 
			
		||||
        height: 104px;
 | 
			
		||||
        border-radius: 50%;
 | 
			
		||||
        overflow: hidden;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .user-img {
 | 
			
		||||
        width: 104px;
 | 
			
		||||
        height: 104px;
 | 
			
		||||
        vertical-align: middle;
 | 
			
		||||
        border-radius: 50%;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .right-icon {
 | 
			
		||||
        width: 40px;
 | 
			
		||||
        height: 40px;
 | 
			
		||||
        vertical-align: middle;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .mar-t22 {
 | 
			
		||||
        margin-top: 44px;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .login-out {
 | 
			
		||||
      width: 100%;
 | 
			
		||||
      font-size: 30px;
 | 
			
		||||
      text-align: center;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .self-knowledge-show {
 | 
			
		||||
    position: fixed;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    z-index: 100;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    background: rgba(0, 0, 0, 0.3);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .toast-bg {
 | 
			
		||||
    position: fixed;
 | 
			
		||||
    z-index: 101;
 | 
			
		||||
    top: 50%;
 | 
			
		||||
    left: 50%;
 | 
			
		||||
    transform: translate(-50%, -50%);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .toast {
 | 
			
		||||
    background-color: #fff;
 | 
			
		||||
    width: 686px;
 | 
			
		||||
    height: 316px;
 | 
			
		||||
    font-size: 36px;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .toast-msg {
 | 
			
		||||
    text-align: center;
 | 
			
		||||
    line-height: 50px;
 | 
			
		||||
    color: #333;
 | 
			
		||||
    font-weight: 500;
 | 
			
		||||
    padding: 84px 0 80px 0;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .toast-btn {
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    width: 120px;
 | 
			
		||||
    text-align: center;
 | 
			
		||||
    line-height: 50px;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .cancel {
 | 
			
		||||
    margin-left: 394px;
 | 
			
		||||
    margin-right: 40px;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .confirm {
 | 
			
		||||
    color: #197DF0;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .editNickName {
 | 
			
		||||
    text-align: right;
 | 
			
		||||
    font-size: 28px;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
		Reference in New Issue
	
	Block a user