Skip to content

C
center-psp-show-h5
提交 83048432 authored 作者: matian's avatar matian
浏览文件
操作

Auto stash before merge of "master" and "origin/master"

上级 ac0b4e8e
隐藏空白字符变更
内嵌 并排
正在显示 包含 440 行增加 和 3 行删除
src/modules/query/api.ts 0 → 100644
浏览文件 @ 83048432
import httpRequest from '@/utils/axios'
// 查询名片
export function getBussinessCard(params: unknown) {
return httpRequest.get('/api/psp/v1/welfare/get-card',{params})
}
// 获取验证码
export function getPhoneCode(params: unknown) {
return httpRequest.get('/api/psp/v1/welfare/send-code',{params})
}
// 查询证书
export function getCertificate(params: unknown) {
return httpRequest.get('/api/psp/v1/welfare/get-certificate',{params})
}
// 持证人权益-持证人列表
export function getLicenseList() {
return httpRequest.post('/api/psp/v1/welfare/avatar-list')
}
// 获取用户信息
export function getUserInfo() {
return httpRequest.post('/api/psp/v1/my/info')
}
src/modules/query/components/BusinessCardQuery.vue 0 → 100644
浏览文件 @ 83048432
<script setup lang="ts">
import * as api from '../api'
import { reactive, onMounted } from 'vue'
const FormInfo = reactive({
email: '',
address: ''
})
const userInfo = reactive({
name: '',
mobile: '',
certificate_number: ''
})
onMounted(() => {
getUserInfo()
})
// 获取用户信息
function getUserInfo() {
api.getUserInfo().then(res => {
userInfo.name = res.data.info.name
userInfo.mobile = res.data.info.mobile
userInfo.certificate_number = res.data.info.certificate_number
})
}
// 查询名片
function handleSubmit() {
const params: unknown = {
email: FormInfo.email,
address: FormInfo.address
}
api.getBussinessCard(params).then(res => {
console.log(res, '0000')
})
}
</script>
<template>
<div class="main_content">
<van-form>
<van-cell-group inset>
<van-field
v-model="userInfo.name"
name="姓名"
label="姓名"
placeholder="请输入姓名"
:rules="[{ required: true, message: '请输入姓名' }]"
disabled
/>
<van-field
v-model="userInfo.mobile"
name="手机号"
label="手机号"
placeholder="请输入手机号"
:rules="[{ required: true, message: '请输入手机号' }]"
disabled
/>
<van-field
v-model="userInfo.certificate_number"
name="证书号"
label="证书号"
placeholder="请输入证书号"
:rules="[{ required: true, message: '请输入证书号' }]"
disabled
/>
<van-field
v-model="FormInfo.email"
name="邮箱"
label="邮箱"
placeholder="请输入邮箱"
:rules="[{ required: true, message: '请输入邮箱' }]"
/>
<van-field
v-model="FormInfo.address"
name="地址"
label="地址"
placeholder="请输入地址"
:rules="[{ required: true, message: '请输入地址' }]"
/>
</van-cell-group>
<div style="margin-top: 0.93rem">
<van-button
round
block
native-type="submit"
style="background: linear-gradient(149deg, #f7c988 0%, #e5a448 100%)"
@click="handleSubmit"
:disabled="FormInfo.email === '' || FormInfo.address === ''"
>
确认信息正确，查询名片
</van-button>
</div>
</van-form>
<template>
<div class="main_content_card"></div>
<div class="main_content_bottom"></div>
</template>
</div>
</template>
<style lang="scss" scoped>
.main_content {
height: 8.02rem;
padding: 0.23rem 0.3rem 0 0.3rem;
background: #ffffff;
border-radius: 0.2rem;
.main_content_card {
margin: 0.83rem 0.38rem 0 0.34rem;
height: 3.22rem;
background-color: red;
}
.main_content_bottom {
height: 3.28rem;
margin-top: 0.66rem;
// background-color: red;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/prp_h5/card_img.png) no-repeat;
background-size: 100% 100%;
}
}
::v-deep .van-button {
font-size: 0.28rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
</style>
src/modules/query/components/CertificateQuery.vue 0 → 100644
浏览文件 @ 83048432
<script setup lang="ts">
// import type { FormInfo } from '../types'
import { Toast } from 'vant'
import * as api from '../api'
import { ref, reactive } from 'vue'
const FormInfo = reactive({
phone: '',
code: ''
})
const url = ref('')
const time = ref(60)
const isDisposed = ref(false)
const isShowForm = ref(false)
function getCode() {
console.log('00000', FormInfo.phone)
if (FormInfo.phone === '') {
console.log('1111')
Toast('请输入手机号')
console.log('2222')
return
}
const params: unknown = {
phone: FormInfo.phone
}
api.getPhoneCode(params).then(res => {
console.log('获取验证码结果', res)
console.log('验证码发送成功！')
isDisposed.value = true
handleTimeChange()
})
}
// 倒计时
const handleTimeChange = () => {
if (time.value <= 0) {
isDisposed.value = false
time.value = 60
} else {
setTimeout(() => {
time.value--
handleTimeChange()
}, 1000)
}
}
// 查询名片
function handleQuery() {
const params: unknown = {
phone: FormInfo.phone,
code: FormInfo.code
}
api.getCertificate(params).then(res => {
url.value = res.data.url
console.log(res.data.url, 'res.data.url')
})
}
// 他人代查
function handleOther() {
isShowForm.value = true
}
</script>
<template>
<div class="main_content">
<van-form v-if="url === '' || isShowForm">
<van-cell-group inset>
<van-field
v-model="FormInfo.phone"
name="手机号"
label="手机号"
placeholder="请输入手机号"
:rules="[{ required: true, message: '请输入手机号' }]"
/>
<!-- <van-field
v-model="FormInfo.code"
name="验证码"
label="验证码"
placeholder="请输入验证码"
/> -->
<van-field
v-model="FormInfo.code"
center
clearable
label="验证码"
placeholder="请输入验证码"
:rules="[{ required: true, message: '请输入验证码' }]"
>
<template #button>
<van-button size="small" type="primary" round block @click="getCode" :disabled="isDisposed">{{
isDisposed ? `${time}s后重新获取` : '获取验证码'
}}</van-button>
</template>
</van-field>
</van-cell-group>
<div style="margin-top: 0.93rem">
<van-button
round
block
native-type="submit"
style="background: linear-gradient(149deg, #f7c988 0%, #e5a448 100%)"
@click="handleQuery"
:disabled="FormInfo.code === '' || FormInfo.code === ''"
>
确认信息正确，查询名片
</van-button>
</div>
</van-form>
<div class="main_content_card" v-else-if="url !== '' || !isShowForm">
<img :src="url" alt="" class="main_content_card_img" />
<div class="main_content_card_btn" @click="handleOther">他人代查</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.main_content {
// width: 6.9rem;
height: 8.02rem;
padding: 0.23rem 0.3rem 0 0.3rem;
background: #ffffff;
border-radius: 0.2rem;
.main_content_card {
.main_content_card_img {
width: 100%;
display: block;
}
.main_content_card_btn {
width: 1.18rem;
height: 0.4rem;
background: linear-gradient(164deg, #f7c988 0%, #e5a448 100%);
border-radius: 0.2rem;
opacity: 1;
font-size: 0.22rem;
font-weight: 400;
color: #ffffff;
line-height: 0.4rem;
text-align: center;
float: right;
margin-top: 0.34rem;
}
}
}
::v-deep {
.van-button {
font-size: 0.28rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
.van-field__control {
margin-left: -0.4rem !important;
}
// .van-cell {
// padding: var(--van-cell-horizontal-padding);
// }
// :root {
// --van-cell-horizontal-padding: var(--van-padding-md);
// }
// :root {
// --van-padding-md: 7px !important;
// }
}
</style>
src/modules/query/components/LicenseeView.vue 0 → 100644
浏览文件 @ 83048432
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as api from '../api'
import type { licenseeList } from '../types'
const data = ref<licenseeList>({
list: []
})
onMounted(() => {
// 获取持证人列表
handleLicenseList()
})
// 获取持证人列表
const handleLicenseList = () => {
api.getLicenseList().then(res => {
data.value = res.data
})
}
</script>
<template>
<div class="main_content">
<div v-if="data.list.length > 0">
<div class="main_content_list" v-for="(item, index) in data.list" :key="index">
<img class="img_top" :src="item.avatar" />
<div class="img_bottom">
<div class="img_bottom_people">{{ item.batch_name }}</div>
<div class="img_bottom_name">{{ item.name }}</div>
<div class="img_bottom_cardnum">证书编号</div>
<div class="img_bottom_num">{{ item.certificate_number }}</div>
</div>
</div>
</div>
<van-empty v-else description="暂无持证人" />
</div>
</template>
<style lang="scss" scoped>
.main_content {
height: 8.02rem;
padding: 0.23rem 0.31rem 0 0.31rem;
background: #ffffff;
border-radius: 0.2rem;
display: flex;
justify-content: space-around;
// align-items: center;
flex-wrap: wrap;
.main_content_list {
width: 45%;
height: 4.54rem;
margin-top: 0.2rem;
border-radius: 0.2rem;
box-sizing: border-box;
.img_top {
width: 100%;
height: 2.6rem;
background: red;
border-top-left-radius: 0.2rem;
border-top-right-radius: 0.2rem;
}
.img_bottom {
height: 1.94rem;
border-bottom-left-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
padding-left: 0.21rem;
padding-top: 0.15rem;
background: url(https://webapp-pub.ezijing.com/prp_h5/license_bg.png) no-repeat;
background-size: contain;
.img_bottom_people {
font-size: 0.24rem;
font-weight: 400;
color: #ffffff;
}
.img_bottom_name {
font-size: 0.32rem;
font-weight: 500;
color: #cfb181;
margin-top: 0.1rem;
}
.img_bottom_cardnum {
font-size: 0.24rem;
font-weight: 400;
color: #ffffff;
margin-top: 0.2rem;
}
.img_bottom_num {
font-size: 0.28rem;
font-weight: 400;
color: #cfb181;
margin-top: 0.1rem;
}
}
}
}
</style>
src/modules/query/types.ts 0 → 100644
浏览文件 @ 83048432
export interface FormInfo {
name: string
mobile: string
cardNumber: string
email: string
address: string
}
export interface Ilist {
avatar: string
name: string
batch_name:string
certificate_number: string
}
export interface licenseeList {
list: Ilist[]
}
src/modules/query/views/Index.vue
浏览文件 @ 83048432
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import BusinessBusinessCardQuery from '../components/BusinessCardQuery.vue'
import CertificateQuery from '../components/CertificateQuery.vue'
import LicenseeView from '../components/LicenseeView.vue'
const active = ref<number>(0) const active = ref<number>(0)
</script> </script>
...@@ -13,9 +17,17 @@ const active = ref<number>(0) ...@@ -13,9 +17,17 @@ const active = ref<number>(0)
title-inactive-color="#4E4E4E" title-inactive-color="#4E4E4E"
line-height="0" line-height="0"
> >
<van-tab title="名片查询"> </van-tab> <van-tab title="名片查询&nbsp;&nbsp;&nbsp;｜"><BusinessBusinessCardQuery /> </van-tab>
<van-tab title="证书查询"> </van-tab> <van-tab title="证书查询&nbsp;&nbsp;&nbsp;｜"> <CertificateQuery /></van-tab>
<van-tab title="持证人查看"> </van-tab>
<van-tab title="&nbsp;持证人查看"><LicenseeView /> </van-tab>
</van-tabs> </van-tabs>
</AppContainer> </AppContainer>
</template> </template>
<style lang="scss" scoped>
.van-tab {
font-size: 0.26rem;
font-weight: 400;
color: #868686;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论