Commit 0dd33f4c authored by Step_by_step's avatar Step_by_step

feat: 客户信息变更

parent deea6082
......@@ -9,7 +9,8 @@
"build:intention": "VITE_TARGET=intention vite build",
"build:calculator": "VITE_TARGET=calculator vite build",
"build:about": "VITE_TARGET=about vite build",
"build:complaint": "VITE_TARGET=complaint vite build"
"build:complaint": "VITE_TARGET=complaint vite build",
"build:infoChange": "VITE_TARGET=infoChange vite build"
},
"dependencies": {
"@hips/plugin-vue-jssdk": "^1.1.2",
......
<template>
<section class="hint">
<p class="title">
<Icon class="icon" name="info" color="#7dc401" size="6vw" />
<span>温馨提示</span>
</p>
<div class="detail">{{ detail }}</div>
</section>
</template>
<script setup>
import { Icon } from "vant";
defineProps({
detail: {
type: String,
default: ''
}
})
</script>
<style lang="less" scoped>
.hint {
box-sizing: border-box;
height: 60px;
width: 95%;
margin: 5px auto 10px;
background-color: #f0f9e5;
padding: 6px 7px;
}
.title {
color: #7dc401;
font-weight: 600;
line-height: 6vw;
i {
vertical-align: middle;
margin-right: 8px;
}
}
.detail {
width: 100%;
text-align: center;
color: gray;
}
</style>
\ No newline at end of file
<template>
<div class="plus">
<Icon class="icon" name="plus" color="#fff" size="6vw" />
</div>
</template>
<script setup>
import { Icon } from 'vant'
</script>
<style lang="less" scoped>
.plus {
width: 40px;
height: 40px;
background-color: #019ae5;
border-radius: 50%;
position: absolute;
bottom: 70px;
right: 20px;
display: flex;
justify-content: center;
}
.icon {
line-height: 38px;
}
</style>
\ No newline at end of file
<template>
<div class="box">
<template v-if="title">
<h1 class="title ">{{ title }}</h1>
<hr />
</template>
<table>
<template v-for="(value, i ) in values">
<tr v-if="i === 0">
<th>{{ value[0] }}</th>
<th>{{ value[1] }}</th>
<th>{{ value[2] }}</th>
</tr>
<tr v-else>
<td>{{ value[0] }}</td>
<td>{{ value[1] }}</td>
<td>{{ value[2] }}</td>
</tr>
</template>
</table>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: ''
},
values: {
type: Array,
default() { return [] }
}
})
</script>
<style scoped lang="less">
.box {
box-sizing: border-box;
height: auto;
background-color: white;
width: 90%;
margin: 0 auto;
border-left: 3px solid #019ae5;
padding: 5px 3px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.box+.box {
margin-top: 20px;
}
.title {
font-weight: 600;
}
hr {
border: 1px solid #f7f8f8;
background-color: #f7f8f8;
}
table {
width: 100%;
th {
color: gray;
}
td,
th {
text-align: center;
height: 25px;
line-height: 20px;
}
}
</style>
\ No newline at end of file
<template>
<section class="hint">
<p class="title">
<Icon class="icon" name="info" color="#7dc401" size="6vw" />
<span>温馨提示</span>
</p>
<div class="detail">{{ detail }}</div>
</section>
</template>
<script setup>
import { Icon } from "vant";
defineProps({
detail: {
type: String,
default: ''
}
})
</script>
<style lang="less" scoped>
.hint {
box-sizing: border-box;
height: 60px;
width: 95%;
margin: 5px auto 10px;
background-color: #f0f9e5;
padding: 6px 7px;
}
.title {
color: #7dc401;
font-weight: 600;
line-height: 6vw;
i {
vertical-align: middle;
margin-right: 8px;
}
}
.detail {
width: 100%;
text-align: center;
color: gray;
}
</style>
\ No newline at end of file
<template>
<div class="plus">
<Icon class="icon" name="plus" color="#fff" size="6vw" />
</div>
</template>
<script setup>
import { Icon } from 'vant'
</script>
<style lang="less" scoped>
.plus {
width: 40px;
height: 40px;
background-color: #019ae5;
border-radius: 50%;
position: absolute;
bottom: 70px;
right: 20px;
display: flex;
justify-content: center;
}
.icon {
line-height: 38px;
}
</style>
\ No newline at end of file
<template>
<div class="box">
<template v-if="title">
<h1 class="title ">{{ title }}</h1>
<hr />
</template>
<table>
<template v-for="(value, i ) in values">
<tr v-if="i === 0">
<th>{{ value[0] }}</th>
<th>{{ value[1] }}</th>
<th>{{ value[2] }}</th>
</tr>
<tr v-else>
<td>{{ value[0] }}</td>
<td>{{ value[1] }}</td>
<td>{{ value[2] }}</td>
</tr>
</template>
</table>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: ''
},
values: {
type: Array,
default() { return [] }
}
})
</script>
<style scoped lang="less">
.box {
box-sizing: border-box;
height: auto;
background-color: white;
width: 90%;
margin: 0 auto;
border-left: 3px solid #019ae5;
padding: 5px 3px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.box+.box {
margin-top: 20px;
}
.title {
font-weight: 600;
}
hr {
border: 1px solid #f7f8f8;
background-color: #f7f8f8;
}
table {
width: 100%;
th {
color: gray;
}
td,
th {
text-align: center;
height: 25px;
line-height: 20px;
}
}
</style>
\ No newline at end of file
<template>
<section class="hint">
<p class="title">
<Icon class="icon" name="info" color="#7dc401" size="6vw" />
<span>温馨提示</span>
</p>
<div class="detail">{{ detail }}</div>
</section>
</template>
<script setup>
import { Icon } from "vant";
defineProps({
detail: {
type: String,
default: ''
}
})
</script>
<style lang="less" scoped>
.hint {
box-sizing: border-box;
height: 60px;
width: 95%;
margin: 5px auto 10px;
background-color: #f0f9e5;
padding: 6px 7px;
}
.title {
color: #7dc401;
font-weight: 600;
line-height: 6vw;
i {
vertical-align: middle;
margin-right: 8px;
}
}
.detail {
width: 100%;
text-align: center;
color: gray;
}
</style>
\ No newline at end of file
<template>
<div class="plus">
<Icon class="icon" name="plus" color="#fff" size="6vw" />
</div>
</template>
<script setup>
import { Icon } from 'vant'
</script>
<style lang="less" scoped>
.plus {
width: 40px;
height: 40px;
background-color: #019ae5;
border-radius: 50%;
position: absolute;
bottom: 70px;
right: 20px;
display: flex;
justify-content: center;
}
.icon {
line-height: 38px;
}
</style>
\ No newline at end of file
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;
<template>
<div class="box">
<template v-if="title">
<h1 class="title ">{{ title }}</h1>
<SwipeCell class="swipe" :disabled="true">
<div class="box">
<p>
<span>申请编号:</span>
<span>{{ info.id }}</span>
</p>
<hr />
</template>
<table>
<template v-for="(value, i ) in values">
<tr v-if="i === 0">
<th>{{ value[0] }}</th>
<th>{{ value[1] }}</th>
<th>{{ value[2] }}</th>
</tr>
<tr v-else>
<td>{{ value[0] }}</td>
<td>{{ value[1] }}</td>
<td>{{ value[2] }}</td>
</tr>
</template>
</table>
</div>
<p>
<span>申请日期:</span>
<span>{{ info.applyDate }}</span>
</p>
<p>
<span>审批状态:</span>
<span>{{ info.status }}</span>
</p>
</div>
</SwipeCell>
</template>
<script setup>
import { SwipeCell } from 'vant'
defineProps({
title: {
type: String,
default: ''
},
values: {
type: Array,
default() { return [] }
info: {
type: Object,
default: {
id: '',
applyDate: '',
status: ''
}
}
})
</script>
<style scoped lang="less">
......@@ -39,39 +39,38 @@ defineProps({
box-sizing: border-box;
height: auto;
background-color: white;
width: 90%;
margin: 0 auto;
border-left: 3px solid #019ae5;
padding: 5px 3px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
padding: 8px 8px;
p {
line-height: 20px;
}
span:nth-child(1) {
color: #019ae5;
font-weight: 600;
display: inline-block;
margin-right: 10px;
}
}
.box+.box {
margin-top: 20px;
}
.title {
font-weight: 600;
}
hr {
border: 1px solid #f7f8f8;
background-color: #f7f8f8;
}
table {
width: 100%;
th {
color: gray;
}
td,
th {
text-align: center;
height: 25px;
line-height: 20px;
}
.swipe {
box-sizing: border-box;
background-color: white;
width: 92%;
margin: 0 auto;
border-left: 3px solid #019ae5;
// padding: 8px 8px 0px 8px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
\ No newline at end of file
const state = {};
export default {
namespaced: true,
state,
};
<template>
<div class="container">
<NavBar title="客户信息变更" left-arrow @click-left="goBack" />
<div class="content">
<section class="form-area">
<Tabs v-model:active="active" title-active-color="#0277bc" color="#0277bc">
<Tab title="地址信息">
<AuForm v-model="addressFormConfig" :key="addressForm" />
<Field v-model="message" rows="2" autosize label="备注说明" type="textarea" maxlength="200"
placeholder="最多可编写200字" show-word-limit />
</Tab>
<Tab title="联系人信息">
<AuForm v-model="contactPersonConfig" :key="contactPerson" />
<Field v-model="message" rows="2" autosize label="备注说明" type="textarea" maxlength="200"
placeholder="最多可编写200字" show-word-limit />
</Tab>
</Tabs>
</section>
<section class="sub">
<Button type="primary" block>申请</Button>
</section>
</div>
</div>
</template>
<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, Button, Field, Tab, Tabs } from "vant";
import AuForm from '@/components/AuForm.vue';
import AuFormClass from "@/components/useAuForm";
const active = $ref(0)
const message = $ref('')
const addressForm = $ref();
const addressFormConfig = $ref(new AuFormClass([
{
title: '地址类型',
propName: 'paymentReqDate',
type: 'cell',
value: '',
isRequired: true,
select: []
},
{
title: '省/市/区',
propName: 'paymentReqDat3e',
type: 'cell',
value: '',
isRequired: true,
select: []
},
{
title: '详细地址',
propName: 'paymentReqDat3e',
type: 'input',
value: '',
isRequired: true
},
{
title: '邮编',
propName: 'paymentReqDat3e',
type: 'input',
value: '',
isRequired: true
},
{
title: '电话',
propName: 'paymentReqDat3e',
type: 'input',
value: '',
isRequired: true
},
{
title: '手机',
propName: 'paymentRe3qDat3e',
type: 'input',
value: '',
isRequired: true,
}
]))
const contactPerson = $ref();
const contactPersonConfig = $ref(new AuFormClass([
{
title: '联系人类型',
propName: 'paymentReqDate',
type: 'cell',
value: '',
isRequired: true,
select: []
},
{
title: '联系人姓名',
propName: 'paymentReqDat3e',
type: 'input',
value: '',
isRequired: true,
},
{
title: '职务',
propName: 'paymentReqDat3e',
type: 'cell',
value: '',
isRequired: true,
select: []
},
{
title: '证件类型',
propName: 'paymentReqDat3e',
type: 'input',
value: '',
isRequired: true,
select: []
},
{
title: '电话',
propName: 'paymentReqDat3e',
type: 'input',
value: '',
isRequired: true
},
{
title: '邮箱',
propName: 'paymentReqDat3e',
type: 'input',
value: '',
isRequired: true
},
{
title: '传真',
propName: 'paymentReqDat3e',
type: 'input',
value: '',
isRequired: true
},
{
title: '家庭住址',
propName: 'paymentRe3qDat3e',
type: 'input',
value: '',
isRequired: true,
}
]))
</script>
<style lang="less" scoped>
.sub {
width: 70%;
margin: 50px auto 5px;
}
.form-area {
padding: 10px;
min-height: 500px;
}
.content {
height: calc(100% - var(--van-nav-bar-height));
overflow-y: auto;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<NavBar title="客户信息变更" left-arrow @click-left="goBack" />
<section class="list">
<PullRefresh v-model="refreshing" @refresh="onRefresh" class="scroll">
<List :finished="finished" finished-text="没有更多了" @load="loadApproval">
<ChangeListItem v-for="item in infos" :info="item" @click="jump" />
</List>
</PullRefresh>
</section>
<Plus @click="jump" />
</div>
</template>
<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, List, PullRefresh } from "vant";
import ChangeListItem from '../components/ChangeListItem.vue'
import Plus from '@/components/Plus.vue'
import api from "../api";
import { useRouter } from "vue-router";
const infos = $ref([
{
id: 'BG001001001',
applyDate: '2022-8-18',
status: '拒绝'
}
])
const refreshing = $ref(true);
const finished = $ref(true);
const onRefresh = () => {
// 下拉重置参数,重新加载
};
const loadApproval = () => {
}
const router = useRouter();
const jump = () => {
router.push({ name: 'infoChange-views-changeForm' })
}
</script>
<style scoped lang="less">
.list {
box-sizing: border-box;
height: calc(100vh - var(--van-nav-bar-height));
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>
<template>
<div class="box">
<template v-if="title">
<h1 class="title ">{{ title }}</h1>
<hr />
</template>
<table>
<template v-for="(value, i ) in values">
<tr v-if="i === 0">
<th>{{ value[0] }}</th>
<th>{{ value[1] }}</th>
<th>{{ value[2] }}</th>
</tr>
<tr v-else>
<td>{{ value[0] }}</td>
<td>{{ value[1] }}</td>
<td>{{ value[2] }}</td>
</tr>
</template>
</table>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: ''
},
values: {
type: Array,
default() { return [] }
}
})
</script>
<style scoped lang="less">
.box {
box-sizing: border-box;
height: auto;
background-color: white;
width: 90%;
margin: 0 auto;
border-left: 3px solid #019ae5;
padding: 5px 3px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.box+.box {
margin-top: 20px;
}
.title {
font-weight: 600;
}
hr {
border: 1px solid #f7f8f8;
background-color: #f7f8f8;
}
table {
width: 100%;
th {
color: gray;
}
td,
th {
text-align: center;
height: 25px;
line-height: 20px;
}
}
</style>
\ No newline at end of file
<template>
<section class="hint">
<p class="title">
<Icon class="icon" name="info" color="#7dc401" size="6vw" />
<span>温馨提示</span>
</p>
<div class="detail">{{ detail }}</div>
</section>
</template>
<script setup>
import { Icon } from "vant";
defineProps({
detail: {
type: String,
default: ''
}
})
</script>
<style lang="less" scoped>
.hint {
box-sizing: border-box;
height: 60px;
width: 95%;
margin: 5px auto 10px;
background-color: #f0f9e5;
padding: 6px 7px;
}
.title {
color: #7dc401;
font-weight: 600;
line-height: 6vw;
i {
vertical-align: middle;
margin-right: 8px;
}
}
.detail {
width: 100%;
text-align: center;
color: gray;
}
</style>
\ No newline at end of file
<template>
<div class="plus">
<Icon class="icon" name="plus" color="#fff" size="6vw" />
</div>
</template>
<script setup>
import { Icon } from 'vant'
</script>
<style lang="less" scoped>
.plus {
width: 40px;
height: 40px;
background-color: #019ae5;
border-radius: 50%;
position: absolute;
bottom: 70px;
right: 20px;
display: flex;
justify-content: center;
}
.icon {
line-height: 38px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment