init

src/views/my/contract/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <j-nav-bar />
+    <div class="contract" v-if="contractHtml" v-html="contractHtml"></div>
+    <div v-else class="noData">暂无合同</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, ref} from 'vue'
+import {getContract} from "@/api";
+import {showToast} from "vant";
+import {useRoute} from "vue-router";
+
+const route = useRoute()
+
+const contractHtml = ref('')
+
+
+
+const _getContract = () => {
+  if (route.query.tradeNo) {
+    getContract({tradeNo: route.query.tradeNo}).then(res => {
+      contractHtml.value = res
+    })
+  } else {
+    showToast('暂无合同')
+  }
+}
+
+onMounted(() => {
+  _getContract()
+})
+</script>
+
+<style lang="scss" scoped>
+.contract {
+  //width: 100%;
+  padding: 20px ;
+}
+.noData {
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #cccccc;
+  font-size: 50px;
+  font-weight: bold;
+}
+</style>

src/views/my/myLoan/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <j-nav-bar color="#FFF" nav-bar-background="#f9bf3a"/>
+  <div>
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+
+        <view class="j-item" v-for="item in borrowList" :key="item.id" @click="goInfo(item.tradeNo)">
+          <view class="j-item-t">贷款编号：{{item.tradeNo}}</view>
+
+          <view style="display: flex; justify-content: space-between">
+
+            <view class="j-item-c">
+              <view>贷款总额：{{ item.totalLoanMoney }}元</view>
+              <view class="yellow_color1">每期还款：{{ item.avgRepayment }}*{{ item.totalMonth }}</view>
+              <view>贷款申请日期：{{ new Date(item.createTime).format('yyyy-MM-dd hh:mm:ss') }}</view>
+            </view>
+
+            <view :style="{paddingRight: px2vw(20)}" @click.stop="toContract(item.tradeNo)" style="display: flex; justify-content: center; align-items: center; flex-flow: column">
+              <van-icon size="50" name="orders-o" />
+              合同
+            </view>
+          </view>
+        </view>
+
+      </van-list>
+    </van-pull-refresh>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, reactive, ref} from "vue";
+import {getBorrowPage} from "@/api";
+import {useRouter} from "vue-router";
+import {px2vw} from "@/utils";
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
+
+
+const router = useRouter()
+
+const onLoad = () => {
+  if (refreshing.value) {
+    list.value = [];
+    refreshing.value = false;
+  }
+
+  _getBorrowPage()
+  loading.value = false;
+};
+
+const onRefresh = () => {
+  // 清空列表数据
+  finished.value = false;
+
+  // 重新加载数据
+  // 将 loading 设置为 true，表示处于加载状态
+  loading.value = true;
+  onLoad();
+};
+
+const borrowPage = {
+  pageNum: 0,
+  pageSize: 100,
+}
+const borrowList = reactive([])
+const _getBorrowPage = () => {
+  getBorrowPage(borrowPage).then(res => {
+    borrowList.newPush(res)
+  })
+}
+
+const goInfo = (tradeNo) => {
+  router.push({
+    path: '/borrowInfo',
+    query: {
+      tradeNo: tradeNo
+    }
+  })
+}
+const toContract = (tradeNo) => {
+  router.push({
+    path: '/contract',
+    query: {
+      tradeNo: tradeNo
+    }
+  })
+}
+
+onMounted(() => {
+  _getBorrowPage()
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+.j-item {
+  display: flex;
+  flex-flow: column;
+  margin: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 1vw 0px #e0e0e0;
+  background: #fff;
+  overflow: hidden;
+  &-t {
+    padding: 20px;
+    display: flex;
+    width: 100%;
+    background: #f9fbff;
+    color: #738aa4;
+  }
+  &-c {
+    padding: 20px;
+    display: flex;
+    width: 100%;
+    flex-flow: column;
+  }
+}
+
+
+</style>

src/views/my/myRepayment/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <j-nav-bar color="#FFF" nav-bar-background="#f9bf3a"/>
+  <div>
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+
+        <view class="j-item" v-for="item in borrowList" :key="item.id" @click="goInfo(item.tradeNo)">
+          <view class="j-item-t">贷款编号：{{item.tradeNo}}</view>
+
+          <view class="j-item-c">
+            <view>贷款总额：{{ item.totalLoanMoney }}元</view>
+            <view class="yellow_color1">每期还款：{{ item.avgRepayment }}*{{ item.totalMonth }}</view>
+            <view>贷款申请日期：{{ new Date(item.createTime).format('yyyy-MM-dd hh:mm:ss') }}</view>
+          </view>
+        </view>
+
+      </van-list>
+    </van-pull-refresh>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, reactive, ref} from "vue";
+import {getBorrowPage} from "@/api";
+import {useRouter} from "vue-router";
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
+
+
+const router = useRouter()
+
+const onLoad = () => {
+  if (refreshing.value) {
+    list.value = [];
+    refreshing.value = false;
+  }
+
+  _getBorrowPage()
+  loading.value = false;
+};
+
+const onRefresh = () => {
+  // 清空列表数据
+  finished.value = false;
+
+  // 重新加载数据
+  // 将 loading 设置为 true，表示处于加载状态
+  loading.value = true;
+  onLoad();
+};
+
+const borrowPage = {
+  pageNum: 0,
+  pageSize: 100,
+}
+const borrowList = reactive([])
+const _getBorrowPage = () => {
+  getBorrowPage(borrowPage).then(res => {
+    borrowList.newPush(res)
+  })
+}
+
+const goInfo = (tradeNo) => {
+  router.push({
+    path: '/borrowInfo',
+    query: {
+      tradeNo: tradeNo
+    }
+  })
+}
+
+onMounted(() => {
+  _getBorrowPage()
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+.j-item {
+  display: flex;
+  flex-flow: column;
+  margin: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 1vw 0px #e0e0e0;
+  background: #fff;
+  overflow: hidden;
+  &-t {
+    padding: 20px;
+    display: flex;
+    width: 100%;
+    background: #f9fbff;
+    color: #738aa4;
+  }
+  &-c {
+    padding: 20px;
+    display: flex;
+    width: 100%;
+    flex-flow: column;
+  }
+}
+
+
+</style>

src/views/my/signature/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <j-nav-bar v-if="!useEdit" />
+    <van-signature v-if="!useEdit" @submit="onSubmit" @clear="onClear" />
+    <div class="my-signature">我的签名：</div>
+    <van-image class="my-signature-image" v-if="userInfo.signature" :src="userInfo.signature" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive, ref, onMounted} from 'vue';
+import {showToast} from "vant";
+import {useRouter} from "vue-router";
+import {getBorrowPage, getUserInfo, updateCustomerCard} from "@/api";
+import {resetData} from "@/utils/dataUtil";
+const image = ref('');
+const onSubmit = (data) => {
+  userInfo.signature = data.image;
+  saveUserInfoBtn()
+};
+
+const borrowPage = {
+  pageNum: 0,
+  pageSize: 3,
+}
+const useEdit = ref(true)
+const _getBorrowPage = () => {
+  getBorrowPage(borrowPage).then(res => {
+    useEdit.value = res.length !== 0;
+  })
+}
+
+const onClear = () => showToast('clear');
+
+const userInfo = reactive({
+  signature: ''
+})
+const router = useRouter()
+const saveUserInfoBtn = () => {
+  updateCustomerCard(userInfo).then(res => {
+    console.log('')
+    router.back()
+  })
+}
+const _getUserInfo = () => {
+  getUserInfo().then(res => {
+    resetData(userInfo, res)
+  })
+}
+onMounted(() => {
+  _getUserInfo()
+  _getBorrowPage()
+})
+</script>
+
+<style lang="scss" scoped>
+.my-signature {
+  padding: 20px;
+}
+.my-signature-image {
+  margin: 20px;
+  background: #fff;
+  border-radius: 10px;
+}
+</style>

src/views/my/userInfo/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <j-nav-bar color="#FFF" nav-bar-background="#ffffff00" :placeholder="false"/>
+  <div class="content">
+    <j-gap height="120" background="#F9BF3A" opacity="0"/>
+    <van-cell-group inset>
+      <van-cell :style="{ padding: px2vw(40) + ' ' + px2vw(35)}" title="我的资料" is-link to="userInfo1" :value="userInfo.cardFlag ? '完整' : '不完整'">
+        <template #title>
+          <div class="t">身份信息</div>
+          <div class="t2">*让我们了解您的资料信息</div>
+        </template>
+        <template #icon>
+          <div style="display: flex; justify-content: center; align-items: center; padding-right: 12px">
+            <van-icon :name="getAssetsImages('my/uuuu1.png')"  size="45"/>
+          </div>
+        </template>
+      </van-cell>
+
+      <van-cell :style="{ padding: px2vw(40) + ' ' + px2vw(35)}" title="我的借款" is-link to="userInfo2" :value="userInfo.infoFlag ? '完整' : '不完整'">
+        <template #title>
+          <div class="t">资料信息</div>
+          <div class="t2">*让我们了解您的资料信息</div>
+        </template>
+        <template #icon>
+          <div style="display: flex; justify-content: center; align-items: center; padding-right: 12px">
+            <van-icon :name="getAssetsImages('my/uuuu2.png')" size="45"/>
+          </div>
+        </template>
+      </van-cell>
+
+      <van-cell :style="{ padding: px2vw(40) + ' ' + px2vw(35)}" title="我的还款" is-link to="userInfo3" :value="userInfo.bankFlag ? '完整' : '不完整'">
+        <template #title>
+          <div class="t">收款银行卡</div>
+          <div class="t2">*让我们了解您的资料信息</div>
+        </template>
+        <template #icon>
+          <div style="display: flex; justify-content: center; align-items: center; padding-right: 12px">
+            <van-icon :name="getAssetsImages('my/uuuu3.png')" size="45"/>
+          </div>
+        </template>
+      </van-cell>
+      <van-cell v-if="userInfo.allowSignature" :style="{ padding: px2vw(40) + ' ' + px2vw(35)}" title="我的借款" is-link to="signature" :value="userInfo.signatureFlag ? '完整' : '不完整'" >
+        <template #title>
+          <div class="t">签名信息</div>
+          <div class="t2">*让我们了解您的资料信息</div>
+        </template>
+        <template #icon>
+          <div style="display: flex; justify-content: center; align-items: center; padding-right: 12px">
+            <van-icon :name="getAssetsImages('my/uuuu2.png')" size="45"/>
+          </div>
+        </template>
+      </van-cell>
+    </van-cell-group>
+
+
+    <div style="padding: 60px 20px 60px">
+      <van-button
+        color="linear-gradient(to right, #D2A64C, #F9D88D)"
+        round
+        style="width: 100%; "
+        @click.stop="goHome"
+      >
+        立即借款
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {getAssetsImages, px2vw} from "@/utils";
+import {useRouter} from "vue-router";
+import {getBorrowPage, getUserInfo} from "@/api";
+import {resetData} from "@/utils/dataUtil";
+import {onMounted, reactive} from "vue";
+
+const router = useRouter()
+const goHome = () => {
+  router.push({
+    path: '/home'
+  })
+}
+const userInfo = reactive({
+  cardFlag: false,
+  infoFlag: false,
+  bankFlag: false,
+  signatureFlag: false,
+  allowSignature: true
+})
+const _getUserInfo = () => {
+  getUserInfo().then(res => {
+    resetData(userInfo, res)
+    userInfo.signatureFlag = !!res.signature
+  })
+}
+const borrowPage = {
+  pageNum: 0,
+  pageSize: 100,
+}
+const borrowList = reactive([])
+const _getBorrowPage = () => {
+  getBorrowPage(borrowPage).then(res => {
+    borrowList.newPush(res)
+  })
+}
+onMounted(() => {
+  _getUserInfo()
+  _getBorrowPage()
+})
+</script>
+
+<style lang="scss" scoped>
+.content {
+  background-image: linear-gradient(to bottom, #f9bf3a, #ffffff) !important;
+  height: 100vh;
+
+  .t {
+    font-size: 36px;
+    font-weight: 600;
+    color: #111a34;
+    margin-bottom: 4px;
+  }
+  .t2 {
+    margin-top: 4px;
+    font-size: 24px;
+    color: #858b9c;
+  }
+
+}
+
+
+
+</style>

src/views/my/userInfo1/index.vue

@@ -0,0 +1,266 @@
+<template>
+  <j-nav-bar color="#FFF" nav-bar-background="#f9bf3a" :placeholder="false"/>
+  <van-form @submit="saveUserInfoBtn">
+    <div class="content">
+      <j-gap height="120" background="#F9BF3A" opacity="0"/>
+      <div class="action">
+        <view class="tt">填写真实有效的信息，审核才会通过哦~</view>
+        <van-field required v-model="userInfo.realName" type="text" label="姓名" placeholder="请输入真实姓名" :rules="[{ required: true, message: '请输入真实姓名' }]"/>
+        <van-field required v-model="userInfo.cardNum" type="text" label="身份证号" placeholder="请输入真实身份证号" :rules="[{ required: true, message: '请输入真实身份证号' }]"/>
+<!--        <van-field required label="身份证号" placeholder="请输入真实身份证号" v-model="userInfo.cardNum" readonly clickable @touchstart.stop="idCardKeyboardShow = true" :rules="[{ required: true, message: '请输入真实身份证号' }]"/>-->
+
+<!--        <van-number-keyboard-->
+<!--          :show="idCardKeyboardShow"-->
+<!--          v-model="userInfo.cardNum"-->
+<!--          extra-key="X"-->
+<!--          close-button-text="完成"-->
+<!--          @blur="idCardKeyboardShow = false"-->
+<!--        />-->
+      </div>
+
+      <div class="action">
+        <view class="tt">
+          <view>*需本人身份证，且内容清晰可辨</view>
+          <view>请您确认拍照权限已开启</view>
+        </view>
+
+        <view class="action-content">
+
+          <view class="action-content-item">
+            <van-uploader :rules="[{ required: true, message: '点击上传身份证人像面' }]" required :after-read="afterReadIdFront" :before-read="beforeRead" :max-count="1">
+              <div class="id-card-box">
+                <van-image v-if="userInfo.cardBackPicture" :height="px2vw(156)" :src="userInfo.cardBackPicture"
+                           :width="px2vw(236)"/>
+                <van-image v-if="!userInfo.cardBackPicture" :height="px2vw(156)" :src="getAssetsImages('my/idcard1.png')"
+                           :width="px2vw(236)"/>
+                <div :style="{fontSize: px2vw(26)}" style="color: #858B9C; width: 100%; text-align: center; padding-top: 10px">
+                  点击上传身份证人像面
+                </div>
+              </div>
+            </van-uploader>
+          </view>
+
+          <view class="action-content-item">
+            <van-uploader :rules="[{ required: true, message: '点击上传身份证国徽面' }]" required :after-read="afterReadIdBack" :before-read="beforeRead" :max-count="1">
+              <div class="id-card-box">
+                <van-image v-if="userInfo.cardFrontPicture" :height="px2vw(156)" :src="userInfo.cardFrontPicture"
+                           :width="px2vw(236)"/>
+                <van-image v-if="!userInfo.cardFrontPicture" :height="px2vw(156)" :src="getAssetsImages('my/idcard1.png')"
+                           :width="px2vw(236)"/>
+                <div :style="{fontSize: px2vw(26)}" style="color: #858B9C; width: 100%; text-align: center; padding-top: 10px">
+                  点击上传身份证国徽面
+                </div>
+              </div>
+            </van-uploader>
+          </view>
+
+          <view class="action-content-item">
+            <van-uploader :rules="[{ required: true, message: '点击上传手持身份证照' }]" required :after-read="afterReadAvatar" :before-read="beforeRead" :max-count="1">
+              <div class="id-card-box">
+                <van-image v-if="userInfo.handCardPicture" :height="px2vw(156)" :src="userInfo.handCardPicture"
+                           :width="px2vw(236)"/>
+                <van-image v-if="!userInfo.handCardPicture" :height="px2vw(156)" :src="getAssetsImages('my/idcard1.png')"
+                           :width="px2vw(236)"/>
+                <div :style="{fontSize: px2vw(26)}" style="color: #858B9C; width: 100%; text-align: center; padding-top: 10px">
+                  点击上传手持身份证照
+                </div>
+              </div>
+            </van-uploader>
+          </view>
+
+
+          <view style="width: 100%; padding: 20px 0">
+            <view>拍摄要求</view>
+            <view style="display: flex; justify-content: space-between; align-items: center">
+              <view style="display: flex; justify-content: center; align-items: center; flex-flow: column">
+                <van-image :height="px2vw(92)" :width="px2vw(148)" :src="getAssetsImages('my/idcard2.png')"/>
+                <view class="gray_color font-22">√标准拍摄</view>
+              </view>
+              <view style="display: flex; justify-content: center; align-items: center; flex-flow: column">
+                <van-image :height="px2vw(92)" :width="px2vw(148)" :src="getAssetsImages('my/idcard3.png')"/>
+                <view class="gray_color font-22">×边框缺失</view>
+              </view>
+              <view style="display: flex; justify-content: center; align-items: center; flex-flow: column">
+                <van-image :height="px2vw(92)" :width="px2vw(148)" :src="getAssetsImages('my/idcard4.png')"/>
+                <view class="gray_color font-22">×照片模糊</view>
+              </view>
+              <view style="display: flex; justify-content: center; align-items: center; flex-flow: column">
+                <van-image :height="px2vw(92)" :width="px2vw(148)" :src="getAssetsImages('my/idcard5.png')"/>
+                <view class="gray_color font-22">×闪光强烈</view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+
+
+      </div>
+    </div>
+
+    <div style="padding: 0 20px 60px">
+      <van-button
+        color="linear-gradient(to right, #D2A64C, #F9D88D)"
+        round
+        style="width: 100%; "
+        native-type="submit"
+        :disabled="!useEdit || !(userInfo.realName && userInfo.cardNum)"
+      >
+        提交
+      </van-button>
+    </div>
+  </van-form>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, reactive, ref} from "vue";
+import {getBorrowPage, getUserInfo, updateCustomerCard, uploadCommon} from "@/api";
+import {resetData} from "@/utils/dataUtil";
+import {getAssetsImages, px2vw} from "@/utils";
+import {showToast} from "vant";
+import {useRouter} from "vue-router";
+
+const idCardKeyboardShow = ref(false)
+
+const userInfo = reactive({
+  backCardNum: '',
+  bankType: '',
+  cardBackPicture: '',
+  cardFrontPicture: '',
+  handCardPicture: '',
+  cardNum: '',
+  companyAddress: '',
+  companyAddressInfo: '',
+  companyName: '',
+  companyPhone: '',
+  companyTitle: '',
+  companyYear: '',
+  customerAddress: '',
+  customerAddressInfo: '',
+  customerId: 0,
+  id: 0,
+  kinsfolkName: '',
+  kinsfolkPhone: '',
+  kinsfolkRef: '',
+  realName: ''
+})
+const _getUserInfo = () => {
+  getUserInfo().then(res => {
+    resetData(userInfo, res)
+  })
+}
+
+const borrowPage = {
+  pageNum: 0,
+  pageSize: 3,
+}
+const useEdit = ref(true)
+const _getBorrowPage = () => {
+  getBorrowPage(borrowPage).then(res => {
+    useEdit.value = res.length === 0;
+  })
+}
+
+const beforeRead = (file) => {
+  if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
+    showToast('请上传 jpg 或者 png 格式图片');
+    return false;
+  }
+  return true;
+};
+
+const afterReadAvatar = (file) => {
+  // 此时可以自行将文件上传至服务器
+  upLoadImage(file, 'handCardPicture')
+};
+const afterReadIdFront = (file) => {
+  upLoadImage(file, 'cardBackPicture')
+};
+const afterReadIdBack = (file) => {
+  upLoadImage(file, 'cardFrontPicture')
+};
+
+const upLoadImage = (file, flag) => {
+  uploadCommon(file.file).then(res => {
+    if (res.data.code == 200) {
+      userInfo[flag] = res.data.data.url
+    } else {
+      showToast('上传失败');
+    }
+  })
+}
+
+const router = useRouter()
+const saveUserInfoBtn = () => {
+  updateCustomerCard(userInfo).then(res => {
+    console.log('')
+    router.back()
+  })
+}
+
+
+
+onMounted(() => {
+  _getBorrowPage()
+  _getUserInfo()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.content {
+  background-image: linear-gradient(to bottom, #f9bf3a, #ffffff) !important;
+  padding-bottom: 30px;
+
+
+  .action {
+    margin: 20px;
+    border-radius: 20px;
+    overflow: hidden;
+    background: #fff;
+    display: flex;
+    flex-flow: column;
+    box-shadow: 0 0 1vw 0px #e0e0e0;
+    &-content {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      padding: 20px 20px;
+      box-shadow: 0 0 1vw 0px #e0e0e0;
+
+      &-item {
+        margin: 20px 0;
+      }
+
+      .id-card-box {
+        border-radius: 10px;
+        box-shadow: 0 0 1vw 0px #e0e0e0;
+        width: 500px;
+        height: 300px;
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .tt {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      background: #f6f9fd;
+      color: #738aa4;
+      padding: 20px 0;
+    }
+    //
+  }
+
+}
+
+.font-22 {
+  font-size: 22px;
+}
+
+</style>

src/views/my/userInfo2/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <j-nav-bar color="#FFF" nav-bar-background="#f9bf3a" :placeholder="false"/>
+
+  <van-form @submit="saveUserInfoBtn">
+    <div class="content">
+      <j-gap height="120" background="#F9BF3A" opacity="0"/>
+      <div class="action">
+        <view class="tt">填写真实有效的信息，审核才会通过哦~</view>
+<!--        <van-field required v-model="userInfo.realName" type="text" label="姓名" placeholder="请输入真实姓名" :rules="[{ required: true, message: '请输入真实姓名' }]"/>-->
+        <van-field required v-model="userInfo.companyName" type="text" label="单位名称" placeholder="请输入单位名称" :rules="[{ required: true, message: '请输入单位名称' }]"/>
+        <van-field required v-model="userInfo.companyTitle" type="text" label="职位" placeholder="请输入职位" :rules="[{ required: true, message: '请输入职位' }]"/>
+        <van-field required v-model="userInfo.companyPhone" type="tel" label="单位电话" placeholder="号码加区号（非必填）" :rules="[{ required: true, message: '号码加区号' }]"/>
+        <van-field required v-model="userInfo.companyYear" type="number" label="工作年龄" placeholder="请输入工龄" :rules="[{ required: true, message: '请输入工龄' }]"/>
+        <van-field required v-model="userInfo.incomeWan" type="number" label="月薪" placeholder="请输入月薪" :rules="[{ required: true, message: '请输入月薪' }]"/>
+        <van-field
+          v-model="userInfo.companyAddress"
+          is-link
+          required
+          readonly
+          :rules="[{ required: true, message: '请选择省市区' }]"
+          label="单位地址"
+          placeholder="请选择省市区"
+          @click="companyAddressShow = true"
+        />
+        <van-popup v-model:show="companyAddressShow" round position="bottom">
+          <van-cascader
+            v-model="cascaderValue"
+            title="请选择所在地区"
+            :options="options"
+            @close="companyAddressShow = false"
+            @finish="onFinish"
+          />
+        </van-popup>
+        <van-field required v-model="userInfo.companyAddressInfo" type="text" label="详细地址" placeholder="请输入详细地址" :rules="[{ required: true, message: '请输入详细地址' }]"/>
+
+
+        <van-field
+          v-model="userInfo.customerAddress"
+          is-link
+          required
+          readonly
+          :rules="[{ required: true, message: '请选择所在地区' }]"
+          label="现居住地址"
+          placeholder="请选择所在地区"
+          @click="customerAddressShow = true"
+        />
+        <van-popup v-model:show="customerAddressShow" round position="bottom">
+          <van-cascader
+            v-model="customerAddressValue"
+            title="请选择所在地区"
+            :options="options"
+            @close="customerAddressShow = false"
+            @finish="onCustomerAddressFinish"
+          />
+        </van-popup>
+        <van-field required v-model="userInfo.customerAddressInfo" type="text" label="详细地址" placeholder="例：东北石油大学启智寝室楼2A603" :rules="[{ required: true, message: '请输入详细地址' }]"/>
+      </div>
+
+      <div class="action">
+        <view class="tt">
+          直系亲属联系人
+        </view>
+
+        <van-field required v-model="userInfo.kinsfolkName" type="text" label="姓名" placeholder="请输入真实姓名" :rules="[{ required: true, message: '请输入真实姓名' }]"/>
+        <van-field required v-model="userInfo.kinsfolkPhone" type="tel" label="手机号码" placeholder="请输入手机号码" :rules="[{ required: true, message: '请输入手机号码' }]"/>
+        <van-field
+          v-model="userInfo.kinsfolkRefText"
+          is-link
+          :rules="[{ required: true, message: '请选择关系' }]"
+          required
+          readonly
+          label="关系"
+          placeholder="请选择关系"
+          @click="showPicker = true"
+        />
+        <van-popup v-model:show="showPicker" round position="bottom">
+          <van-picker
+            :columns="columns"
+            @cancel="showPicker = false"
+            @confirm="onConfirm"
+          />
+        </van-popup>
+
+
+      </div>
+    </div>
+
+    <div style="padding: 0 20px 60px">
+      <van-button
+        color="linear-gradient(to right, #D2A64C, #F9D88D)"
+        round
+        style="width: 100%; "
+        native-type="submit"
+        :disabled="!useEdit"
+      >
+        提交
+      </van-button>
+    </div>
+  </van-form>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, reactive, ref} from "vue";
+import {getBorrowPage, getUserInfo, updateCustomerCard} from "@/api";
+import {resetData} from "@/utils/dataUtil";
+import {showToast} from "vant";
+import {useRouter} from "vue-router";
+import {useCascaderAreaData} from "@vant/area-data";
+
+const companyAddressShow = ref(false)
+const customerAddressShow = ref(false)
+const cascaderValue = ref('');
+const customerAddressValue = ref('');
+const columns = [
+  { text: '父母', value: '1' },
+  { text: '配偶', value: '2' },
+  { text: '子女', value: '3' },
+  { text: '祖父母', value: '4' },
+];
+const userInfo = reactive({
+  backCardNum: '',
+  incomeWan: 0,
+  bankType: '',
+  cardBackPicture: '',
+  cardFrontPicture: '',
+  cardNum: '',
+  companyAddress: '',
+  companyAddressInfo: '',
+  companyName: '',
+  companyPhone: '',
+  companyTitle: '',
+  companyYear: '',
+  customerAddress: '',
+  customerAddressInfo: '',
+  customerId: 0,
+  id: 0,
+  kinsfolkName: '',
+  kinsfolkPhone: '',
+  kinsfolkRef: '',
+  kinsfolkRefText: '',
+  realName: ''
+})
+const _getUserInfo = () => {
+  getUserInfo().then(res => {
+    resetData(userInfo, res)
+    columns.forEach(c => {
+      if (c.value == userInfo.kinsfolkRef) {
+        userInfo.kinsfolkRefText = c.text
+      }
+    })
+  })
+}
+
+const borrowPage = {
+  pageNum: 0,
+  pageSize: 3,
+}
+const useEdit = ref(true)
+const _getBorrowPage = () => {
+  getBorrowPage(borrowPage).then(res => {
+    useEdit.value = res.length === 0;
+  })
+}
+
+const options = useCascaderAreaData();
+const onFinish = ({ selectedOptions }) => {
+  companyAddressShow.value = false;
+  userInfo.companyAddress = selectedOptions.map((option) => option.text).join('/');
+};
+
+
+const onCustomerAddressFinish = ({ selectedOptions }) => {
+  customerAddressShow.value = false;
+  userInfo.customerAddress = selectedOptions.map((option) => option.text).join('/');
+};
+
+const showPicker = ref(false);
+
+const onConfirm = ({ selectedOptions }) => {
+  showPicker.value = false;
+  userInfo.kinsfolkRef = selectedOptions[0].value;
+  userInfo.kinsfolkRefText = selectedOptions[0].text;
+};
+
+
+
+
+const router = useRouter()
+const saveUserInfoBtn = (values) => {
+  updateCustomerCard(userInfo).then(res => {
+    router.back()
+  })
+}
+
+
+
+onMounted(() => {
+  _getUserInfo()
+  _getBorrowPage()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.content {
+  background-image: linear-gradient(to bottom, #f9bf3a, #ffffff) !important;
+  padding-bottom: 30px;
+
+
+  .action {
+    margin: 20px;
+    border-radius: 20px;
+    overflow: hidden;
+    background: #fff;
+    display: flex;
+    flex-flow: column;
+    box-shadow: 0 0 1vw 0px #e0e0e0;
+    &-content {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      padding: 20px 20px;
+      box-shadow: 0 0 1vw 0px #e0e0e0;
+
+      &-item {
+        margin: 20px 0;
+      }
+
+      .id-card-box {
+        border-radius: 10px;
+        box-shadow: 0 0 1vw 0px #e0e0e0;
+        width: 500px;
+        height: 300px;
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .tt {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      background: #f6f9fd;
+      color: #738aa4;
+      padding: 20px 0;
+    }
+    //
+  }
+
+}
+
+.font-22 {
+  font-size: 22px;
+}
+
+</style>

src/views/my/userInfo3/index.vue

@@ -0,0 +1,197 @@
+<template>
+  <j-nav-bar :placeholder="false" color="#FFF" nav-bar-background="#f9bf3a"/>
+
+  <van-form @submit="saveUserInfoBtn">
+
+    <div class="content">
+      <j-gap background="#F9BF3A" height="120" opacity="0"/>
+      <div class="action">
+        <view class="tt">填写真实有效的信息，审核才会通过哦~</view>
+        <van-field
+          v-model="userInfo.bankType"
+          :rules="[{ required: true, message: '请选择开户银行' }]"
+          label="开户银行"
+          placeholder="请输入开户银行"
+          :readonly="!useEdit"
+          required
+        />
+<!--        <van-popup v-model:show="showPicker" position="bottom" round>
+          <van-picker
+            :columns="columns"
+            @cancel="showPicker = false"
+            @confirm="onConfirm"
+          />
+        </van-popup>-->
+        <van-field :readonly="!useEdit" @paste="pasteField" @copy="copyField" v-model="userInfo.backCardNum" :rules="[{ required: true, message: '请输入银行卡号' }]" label="银行卡号" placeholder="请输入银行卡号" required
+                   type="digit"/>
+
+      </div>
+
+    </div>
+
+    <div style="padding: 0 20px 60px">
+      <van-button
+        color="linear-gradient(to right, #D2A64C, #F9D88D)"
+        native-type="submit"
+        round
+        style="width: 100%; "
+        :disabled="!useEdit"
+      >
+        提交
+      </van-button>
+    </div>
+  </van-form>
+
+</template>
+
+<script lang="ts" setup>
+import {onMounted, reactive, ref} from "vue";
+import {getBankType, getBorrowPage, getUserInfo, updateCustomerCard, uploadCommon} from "@/api";
+import {resetData} from "@/utils/dataUtil";
+import {showToast} from "vant";
+import {useRouter} from "vue-router";
+
+
+const userInfo = reactive({
+  backCardNum: '',
+  bankType: '',
+  cardBackPicture: '',
+  cardFrontPicture: '',
+  cardNum: '',
+  companyAddress: '',
+  companyAddressInfo: '',
+  companyName: '',
+  companyPhone: '',
+  companyTitle: '',
+  companyYear: '',
+  customerAddress: '',
+  customerAddressInfo: '',
+  customerId: 0,
+  id: 0,
+  kinsfolkName: '',
+  kinsfolkPhone: '',
+  kinsfolkRef: '',
+  realName: ''
+})
+
+const borrowPage = {
+  pageNum: 0,
+  pageSize: 3,
+}
+const useEdit = ref(true)
+const _getBorrowPage = () => {
+  getBorrowPage(borrowPage).then(res => {
+    useEdit.value = res.length === 0;
+  })
+}
+
+
+const _getUserInfo = () => {
+  getUserInfo().then(res => {
+    resetData(userInfo, res)
+  })
+}
+
+const bankTypeList = reactive([])
+const columns: any[] = reactive([])
+const _getBankType = () => {
+  getBankType().then(res => {
+    bankTypeList.newPush(res)
+    bankTypeList.forEach(btl => {
+      columns.push({
+        value: btl,
+        text: btl
+      })
+    })
+  })
+}
+const showPicker = ref(false);
+const onConfirm = ({selectedOptions}) => {
+  showPicker.value = false;
+  userInfo.bankType = selectedOptions[0].value;
+};
+
+const pasteField = (e) => {
+  e.preventDefault()
+}
+const copyField = (e) => {
+  e.preventDefault()
+}
+
+const router = useRouter()
+const saveUserInfoBtn = () => {
+  updateCustomerCard(userInfo).then(res => {
+    console.log('')
+    router.back()
+  })
+}
+
+
+onMounted(() => {
+  _getUserInfo()
+  // _getBankType()
+  _getBorrowPage()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.content {
+  background-image: linear-gradient(to bottom, #f9bf3a, #ffffff) !important;
+  padding-bottom: 30px;
+
+
+  .action {
+    margin: 20px;
+    border-radius: 20px;
+    overflow: hidden;
+    background: #fff;
+    display: flex;
+    flex-flow: column;
+    box-shadow: 0 0 1vw 0px #e0e0e0;
+
+    &-content {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      padding: 20px 20px;
+      box-shadow: 0 0 1vw 0px #e0e0e0;
+
+      &-item {
+        margin: 20px 0;
+      }
+
+      .id-card-box {
+        border-radius: 10px;
+        box-shadow: 0 0 1vw 0px #e0e0e0;
+        width: 500px;
+        height: 300px;
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .tt {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      background: #f6f9fd;
+      color: #738aa4;
+      padding: 20px 0;
+    }
+
+    //
+  }
+
+}
+
+.font-22 {
+  font-size: 22px;
+}
+
+</style>