feat:新增我的信息页面

src/pages/mine/info.vue

+<template>
+  <view class="content">
+    <u-cell-group>
+      <u-cell-item title="头像" @click="changeHead">
+        <view slot="right-icon">
+          <u-image width="50rpx" height="50rpx" :src="headPhoto"></u-image>
+        </view>
+      </u-cell-item>
+      <u-cell-item title="证件照" @click="changeCertPhoto">
+        <view slot="right-icon">
+          <u-image
+            v-if="isupLoadCertPhoto"
+            width="50rpx"
+            height="50rpx"
+            :src="headCertPhoto"
+          ></u-image>
+          <text v-else style="color:blue;">未上传</text>
+        </view>
+      </u-cell-item>
+      <u-cell-item
+        title="手机号"
+        :arrow="false"
+        :hover-class="none"
+        :value="getMobile"
+      ></u-cell-item>
+      <u-cell-item
+        title="实名认证"
+        :arrow="false"
+        :hover-class="none"
+        title-style="{'font':'bold','font-size':'40rpx'}"
+      >
+        <view slot="label" style="display:flex;flex-direction: column;">
+          <text>上传二代身份证照片，图片大小不大于2M</text>
+          <view class="upload-image">
+            <image
+              class="cert-image"
+              :src="certFront"
+              mode="widthFix"
+              lazy-load="false"
+              binderror=""
+              bindload=""
+              @click="getFront"
+            />
+            <image
+              class="cert-image"
+              style="margin-left: 30rpx;"
+              :src="certBack"
+              mode="widthFix"
+              lazy-load="false"
+              binderror=""
+              bindload=""
+              @click="getBack"
+            />
+          </view>
+        </view>
+      </u-cell-item>
+      <u-cell-item
+        :arrow="false"
+        :hover-class="none"
+        title="姓名"
+        value="阿斯达"
+      ></u-cell-item>
+      <u-cell-item
+        :arrow="false"
+        :hover-class="none"
+        title="身份证号"
+        :value="idCardNum"
+      ></u-cell-item>
+      <u-cell-item
+        :arrow="false"
+        :hover-class="none"
+        title="有效期"
+        :value="expire"
+      ></u-cell-item>
+      <u-cell-item title="工作单位" :value="company"></u-cell-item>
+    </u-cell-group>
+  </view>
+</template>
+
+<script>
+import upload from '@/common/upload'
+export default {
+  data() {
+    return {
+      title: '个人信息',
+      headPhoto: 'https://qn-static.banshouhui.com/self-support/avatar.gif',
+      headCertPhoto: 'https://qn-static.banshouhui.com/self-support/avatar.gif',
+      certFront: 'https://qn-static.banshouhui.com/self-support/renxiang.png',
+      certBack: 'https://qn-static.banshouhui.com/self-support/guohui.png',
+      idCardNum: '1312315661651',
+      expire: '2020-12-01~2090-09-01',
+      mobile: '1773322111',
+      company: '深圳维修会科技有限公司',
+      token: null,
+      host: process.uniEnv.qn_asset_url,
+    }
+  },
+  computed: {
+    isupLoadCertPhoto() {
+      return true //this.member && this.member.certPhoto || false
+    },
+    getMobile() {
+      return this.mobile
+    },
+  },
+  onLoad() {
+    this.$u.api.getQiNiuToken({ type: 'image' }).catch((data) => {
+      if (data.errMsg == 'request:ok') {
+        this.token = data.data.token //token为七牛云的token一般由后台接口提供
+      } else {
+        console.log('get token error')
+      }
+    })
+  },
+  methods: {
+    changeHead() {
+      //获取图片
+      upload.getPhoto(1, this.token).then((res) => {
+        this.headPhoto = this.host + res.key
+      })
+    },
+    changeCertPhoto() {
+      //获取图片
+      upload.getPhoto(2, this.token).then((res) => {
+        //显示
+        this.headCertPhoto = this.host + res.key
+      })
+    },
+    getFront() {
+      //获取图片
+      upload.getPhoto(1, this.token).then((res) => {
+        this.certFront = this.host + res.key
+      })
+    },
+    getBack() {
+      //获取图片
+      upload.getPhoto(1, this.token).then((res) => {
+        this.certBack = this.host + res.key
+      })
+    },
+    toUrl(url) {
+      this.$u.route({
+        url: url,
+      })
+    },
+  },
+}
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.logo {
+  height: 200rpx;
+  width: 200rpx;
+  margin: 200rpx auto 50rpx auto;
+}
+
+.text-area {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  font-size: 36rpx;
+  color: #8f8f94;
+}
+
+.cell-item {
+  display: flex;
+}
+
+.cert-image {
+  width: 300rpx;
+  height: 300rpx;
+}
+
+.upload-image {
+  margin-top: 30rpx;
+}
+</style>