feat: 关联项目

README.md

@@ -34,7 +34,7 @@ npm run preview 本地预览打包完的文件
 5. 还款计划 （支付）（✋ 2）
 6. 还款计划查询  （发票预览下载） （✋ 2）
 7. 自助服务  ✅ （ ✋.5）
-8. 客户信息变更  （✋ 1）
+8. 客户信息变更  ✅ （✋ 1）
 
 #### 首页
 1. 还款情况展示  （✋ 2）
@@ -44,7 +44,7 @@ npm run preview 本地预览打包完的文件
 #### 我的
 
 1. 我的奖励券 （✋ 1）
-2. 关联项目  （✋ 1.5）
+2. 关联项目  ✅ （验证码）（✋ 1.5）
 3. 投诉与建议  ✅  （✋ .5）
 4. 关于我们  ✅ （✋ .5）
 

package.json

@@ -10,7 +10,8 @@
     "build:calculator": "VITE_TARGET=calculator vite build",
     "build:about": "VITE_TARGET=about vite build",
     "build:complaint": "VITE_TARGET=complaint vite build",
-    "build:infoChange": "VITE_TARGET=infoChange vite build"
+    "build:infoChange": "VITE_TARGET=infoChange vite build",
+    "build:relatedProject": "VITE_TARGET=relatedProject vite build"
   },
   "dependencies": {
     "@hips/plugin-vue-jssdk": "^1.1.2",

src/components/ListItem.vue

@@ -8,7 +8,7 @@
         </h1>
         <hr />
       </template>
-      <table :class="{ only_two: values[0].length < 3 }">
+      <table :class="{ only_two: values[0].length < 3, more_four: values[0].length > 3 }">
         <template v-for="(value, i ) in values">
           <tr>
             <th v-if="i === 0" v-for="text in value">{{ text }}</th>
@@ -20,7 +20,9 @@
 
     <template #right>
       <Button square type="danger" style="height: 100%" @click.stop="$emit('clickRight')">
-        <Icon name="delete" color="#fff" size="30" />
+        <slot name="rightTxt">
+          <Icon name="delete" color="#fff" size="30" />
+        </slot>
       </Button>
 
     </template>
@@ -108,6 +110,11 @@ table.only_two tr>td:nth-child(2) {
   color: orange
 }
 
+table.more_four tr>td,
+table.more_four tr>th {
+  text-align: left;
+}
+
 .swipe {
   box-sizing: border-box;
   background-color: white;

src/components/Notice.vue

@@ -21,7 +21,7 @@ defineProps({
 <style lang="less" scoped>
 .hint {
   box-sizing: border-box;
-  height: 60px;
+  // height: 60px;
   width: 95%;
   margin: 5px auto 10px;
   background-color: #f0f9e5;
@@ -40,8 +40,11 @@ defineProps({
 }
 
 .detail {
+  box-sizing: border-box;
   width: 100%;
-  text-align: center;
+  text-align: left;
   color: gray;
+  padding-left: 2em;
+  line-height: 20px;
 }
 </style>
\ No newline at end of file

src/modules/relatedProject/api/index.js

+import { get, put, post, File, deleteReq } from '@/utils/http'
+
+const baseURL = import.meta.env.VITE_HTTP_BASE_URL
+const api = {
+  // getMakingList (data) { // 查询合同制作列表
+  //   return get(
+  //     `${baseURL}/hlct/v1/0/contracts/toMake`,
+  //     {...data}
+  //   )
+  // },
+};
+
+export default api;

src/modules/relatedProject/store/index.js

+const state = {};
+
+export default {
+  namespaced: true,
+  state,
+};

src/modules/relatedProject/views/index.vue

+<template>
+  <div class="container">
+    <NavBar title="关联项目" left-arrow @click-left="goBack" />
+
+    <Notice detail="关联项目后，您即可使用 APP 中项目查询，还款计划等功能" />
+
+    <section class="list">
+      <PullRefresh v-model="refreshing" @refresh="onRefresh" class="scroll">
+        <List :finished="finished" finished-text="没有更多了" @load="loadApproval">
+          <ListItem v-for="item in listValue" :other_title="item.other_title" :title="item.title" :values="item.values"
+            @click="jump" isSwiper>
+            <template #rightTxt>
+              <span>取消解绑</span>
+            </template>
+          </ListItem>
+        </List>
+      </PullRefresh>
+    </section>
+
+    <Plus @click="jump" />
+  </div>
+</template>
+
+<script setup>
+import { goBack } from "@/utils/globalFun"
+import Notice from "@/components/Notice.vue"
+import { NavBar, List, PullRefresh } from "vant";
+import ListItem from '@/components/ListItem.vue'
+import Plus from '@/components/Plus.vue'
+import api from "../api";
+import { useRouter } from "vue-router";
+
+const listValue = $ref([
+  {
+    title: 'R00001',
+    other_title: "2022-07-18",
+    values: [["机型", "机号", "状态", "代理店"], ["HB205-1M0", "234333", "签约", '江苏宁隆']]
+  }
+])
+
+const refreshing = $ref(true);
+const finished = $ref(true);
+
+const onRefresh = () => {
+  // 下拉重置参数，重新加载
+};
+
+const loadApproval = () => {
+
+}
+
+const router = useRouter();
+const jump = () => {
+  router.push({ name: "relatedProject-views-relatedFlow" })
+}
+</script>
+
+<style scoped lang="less">
+.list {
+  box-sizing: border-box;
+  height: calc(100vh - var(--van-nav-bar-height) - 90px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-top: 8px;
+  padding-bottom: 10px;
+}
+
+.scroll {
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: auto;
+}
+</style>
+
+<route>
+{
+  meta: {
+    title: '关联项目'
+  }
+}
+</route>
+

src/modules/relatedProject/views/relatedFlow.vue

+<template>
+  <div class="container">
+    <NavBar title="关联项目" left-arrow @click-left="lastStep" />
+
+    <div class="content">
+      <section class="form-area">
+        <template v-if="(step == 1)">
+          <AuForm v-model="firstFormConfig" />
+        </template>
+
+        <template v-else-if="(step == 2)">
+          <Field v-model="tel" type="tel" label="手机号" input-align="right" />
+          <Field v-model="sms" center clearable label="验证码" placeholder="请输入短信验证码">
+            <template #button>
+              <Button size="small" type="primary">获取验证码</Button>
+            </template>
+          </Field>
+        </template>
+
+        <template v-else-if="(step == 3)">
+          <AuForm v-model="lastFormConfig" />
+        </template>
+      </section>
+
+      <section class="sub">
+        <Button v-if="(step < 3)" type="primary" block @click="nextStep">下一步</Button>
+        <Button v-else type="primary" block @click="nextStep">确认绑定</Button>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { goBack } from "@/utils/globalFun"
+import { NavBar, Button, Field } from "vant";
+import AuForm from '@/components/AuForm.vue';
+import AuFormClass from "@/components/useAuForm";
+
+
+const step = $ref(1);
+
+const firstFormConfig = $ref(new AuFormClass([
+  {
+    title: '项目编号  ',
+    propName: 'paymentReqDate',
+    type: 'input',
+    value: '',
+    isRequired: true
+  },
+  {
+    title: '机型',
+    propName: 'nput',
+    type: 'input',
+    value: '',
+    isRequired: true
+  },
+  {
+    title: '机号',
+    propName: 'paymentReqDat3e',
+    type: 'input',
+    value: '',
+    isRequired: true
+  }
+]))
+const secondFormConfig = $ref(new AuFormClass([
+  {
+    title: '合同经办人手机号',
+    propName: 'paymentReqDate',
+    type: 'input',
+    value: '',
+    isRequired: true
+  },
+  {
+    title: '验证码',
+    propName: 'paymentReqDate',
+    type: 'input',
+    value: '',
+    isRequired: true
+  },
+]))
+const lastFormConfig = $ref(new AuFormClass([
+  {
+    title: '项目编号',
+    propName: 'paymentReqDate',
+    type: 'input',
+    value: '33333333333333',
+    isRequired: true,
+    disabled: true
+  },
+  {
+    title: '机型',
+    propName: 'paymentReqDate',
+    type: 'input',
+    value: '洛基亚',
+    isRequired: true,
+    disabled: true
+  },
+  {
+    title: '机号',
+    propName: 'paymentReqDate',
+    type: 'input',
+    value: '309937',
+    isRequired: true,
+    disabled: true
+  },
+  {
+    title: '承租人名称',
+    propName: 'paymentReqDate',
+    type: 'input',
+    value: '张三',
+    isRequired: true,
+    disabled: true
+  },
+  {
+    title: '代理店名称',
+    propName: 'paymentReqDate',
+    type: 'input',
+    value: '将来发扽代理店',
+    isRequired: true,
+    disabled: true
+  },
+  {
+    title: '融资金额',
+    propName: 'paymentReqDate',
+    type: 'currency',
+    value: '80000000',
+    isRequired: true,
+    disabled: true
+  },
+]))
+
+const nextStep = () => {
+  if (step < 3) {
+    step += 1
+  }
+}
+
+const lastStep = () => {
+  if (step > 1) {
+    step -= 1
+  } else {
+    goBack()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.sub {
+  width: 70%;
+  margin: 50px auto 5px;
+}
+
+.form-area {
+  padding: 10px;
+}
+
+.content {
+  height: calc(100% - var(--van-nav-bar-height));
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file