Skip to content

P
pica-insurance
提交 16d28fac 编写于 作者: zhongyao.qiao's avatar zhongyao.qiao
浏览文件
操作

feat 三要素迁移

上级 b419ca13
隐藏空白字符变更
内嵌 并排
正在显示 包含 829 行增加 和 819 行删除
src/views/sz-public-new/index.vue
浏览文件 @ 16d28fac
<!-- eslint-disable -->
<template>
<div class="sz-appoint">
<page-model
v-if="picaWechat != 'wechat'"
ref="PageModel"
:header-info="headerInfo"
<div class="page-wrapper">
<img
class="pic"
:src="bgPath"
/>
<div class="insurance-register-bg">
<div class="bg-img back-img">
<img :src="bgPath" />
</div>
<div class="wrap-reg">
<div class="choose-section">
<div class="sz-appoint-form-tips">
<img
src="https://files.yunqueyi.com/image/png/common/20230628155802981.png"
/>
</div>
<van-form
ref="dectionForm"
validate-first
>
<van-field
v-model="dectionForm.name"
label="参保人姓名"
clearable
required
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('name') }"
:readonly="isReadonly('name')"
placeholder="点击此处输入"
:rules="[
{ required: true, message: '请输入参保人姓名' },
{
pattern: /^.{2,40}$/,
message: '参保人姓名请填写2-40位',
},
]"
/>
<van-field
label="证件类型"
required
disabled
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('cardTypeName') }"
:right-icon="isReadonly('cardTypeName') ? '' : 'arrow'"
:readonly="isReadonly('cardTypeName')"
@click="
!isReadonly('cardTypeName') && (showCardTypeVisible = true)
"
>
<template #input>
<van-field
class="van-inner-field"
:value="cardTypeName"
readonly
/>
</template>
</van-field>
<van-field
v-model="dectionForm.idCard"
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('idCard') }"
clearable
required
label="参保人证件号"
placeholder="点击此处输入"
:rules="rules"
:readonly="isReadonly('idCard')"
/>
<van-field
v-if="dectionForm.idType != 1"
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('sex') }"
required
label="参保人性别"
>
<template #input>
<van-radio-group
v-model="dectionForm.sex"
direction="horizontal"
:disabled="isReadonly('sex')"
>
<van-radio :name="1"> 男 </van-radio>
<van-radio :name="2"> 女 </van-radio>
</van-radio-group>
</template>
</van-field>
<van-field
v-if="dectionForm.idType != 1"
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('birthTime') }"
required
label="参保人出生日期"
:right-icon="isReadonly('birthTime') ? '' : 'arrow'"
:readonly="isReadonly('birthTime')"
>
<template #input>
<DatePicker
v-model="dectionForm.birthTime"
:readonly="isReadonly('birthTime')"
/>
</template>
</van-field>
<van-field
v-model="dectionForm.mobilePhone"
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('mobilePhone') }"
label="参保人手机号"
label-width="100%"
clearable
required
placeholder="点击此处输入"
:rules="[
{ required: true, message: '请输入手机号' },
{
pattern: /^([1][3,4,5,6,7,8,9])\d{9}$/,
message: '手机号格式填写有误',
},
]"
:readonly="isReadonly('mobilePhone')"
>
<template #label>
<div class="phone-wrap">
参保人手机号
<span class="sm-grey">该手机号将用于接收预约信息</span>
</div>
</template>
</van-field>
</van-form>
<wx-open-launch-weapp
v-if="!(rightsNo || projectEquityNo === 'SZ202306011000938751')"
id="checkBtn"
style="display: block"
:username="openWebAppConfigPositive.username"
:path="openWebAppConfig_without_yunorder"
:env-version="envVersion"
@launch="handleLaunchFn"
>
<script type="text/wxtag-template">
<style>.bottom-text { display: flex; align-items: center; justify-content: center; margin-top: 15px; margin-bottom: 10px;height: 18px;font-size: 13px;line-height: 18px;text-align: center;font-weight: 400;font-family: PingFangSC-Regular, PingFang SC;color: #212121ff; }</style> <div class="bottom-text">查看领取记录 ></div>
</script>
</wx-open-launch-weapp>
</div>
<div
v-for="(i, ind) in staticINFO.logoUrlList"
:key="ind"
class="bg-img mt20"
>
<img :src="i" />
</div>
</div>
</div>
<div class="bottom-btn">
<van-button
class="btn"
:class="canSubmit ? 'appoint-form-submit-active' : ''"
@click="appointment"
>
领取权益
</van-button>
<div
v-for="(url, index) in staticINFO.logoUrlList"
:key="index"
>
<img
class="pic"
:src="url"
/>
</div>
<!-- 选择证件类型弹框 -->
<van-popup
v-model="showCardTypeVisible"
position="bottom"
:style="{ height: '280px' }"
<div
v-for="(url, index) in staticINFO2.descList"
:key="index"
@click="handleBanner(index)"
>
<van-cell
v-for="(item, index) in cardTypes"
:key="index"
:title="item.value"
style="display: flex; align-items: center"
@click="handleChooseCardType(item)"
>
<template #right-icon>
<van-icon
v-if="dectionForm.idType == item.no"
name="success"
/>
</template>
</van-cell>
</van-popup>
<!-- 校验通过弹框 -->
<van-overlay :show="showProtocol">
<div class="check-popup-wrapper">
<van-icon
name="close"
class="delete-icon"
size="25"
@click="showProtocol = false"
/>
<p class="title">身份校验通过</p>
<span class="content">请点击“下一步”进入权益领取流程</span>
<div class="submit-button submit-button-empty">
<wx-open-launch-weapp
id="launchBtn"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
"
:username="openWebAppConfigPositive.username"
:path="openWebAppConfigPositive.path"
:env-version="envVersion"
@error="handleErrorFn"
@launch="handleLaunchFn"
>
<script type="text/wxtag-template">
<style>.btn {position:absolute; top: -3px; color: #ffffff;text-align: center;line-height: 50px; font-size: 16px; font-weight: 500; left: 0; width:100%; height: 100%;}</style> <div class="btn">下一步</div>
</script>
</wx-open-launch-weapp>
<img
class="pic"
:src="url"
/>
</div>
<div class="footer-box">
<div class="fixed-btn">
<div
class="wx-btn"
v-if="picaWechat != 'wechat'"
>
<span>领取权益</span>
</div>
<wx-open-launch-weapp
v-else
style="display: block; width: 100%"
:username="openWebAppConfigPositive.username"
:path="openWebAppConfigPositive.path"
:env-version="envVersion"
@error="handleErrorFn"
@launch="handleLaunchFn"
>
<script type="text/wxtag-template">
<div class="wx-btn">
<span>领取权益</span>
</div>
<style>
.wx-btn {
display: block;
width: 93.33333%;
height: 40px;
margin: 5px auto;
border-radius: 40px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
line-height: 40px;
text-align: center;
background: linear-gradient(270deg, #ff7400 0%, #fe4000 100%);
}
</style>
</script>
</wx-open-launch-weapp>
</div>
</van-overlay>
</div>
</div>
</template>
<script>
import { getBanner, getCardTypes, projectMaterial } from '@/api/entitlement';
import {
createOrderSzV2,
queryUserInfo,
uploadPointData,
} from '@/api/question';
import { getBanner } from '@/api/entitlement';
import { uploadPointData } from '@/api/question';
import { isWeixin } from '@/utils/index';
import DatePicker from './date-picker.vue';
let that;
export default {
components: { DatePicker },
data() {
return {
projectEquityNo: '',
externalOrderNo: '',
rightsNo: '',
userInfo: '',
picaWechat: window._picaWechat,
headerInfo: {
title: '健康服务权益领取',
......@@ -246,70 +86,22 @@ export default {
style: 'backgroundColor:#ffffff;zIndex:100;',
background: '',
},
dectionForm: {
mobilePhone: '',
idCard: '',
idType: 1 /** 默认为1:身份证 */,
name: '',
sex: '',
birthTime: '',
},
showProtocol: false,
showCardTypeVisible: false,
cardTypes: [],
// envVersion: process.env.MINI_PROGRAM_ENV,
envVersion: process.env.VUE_APP_MINI_PROGRAM_ENV,
openWebAppConfigPositive: {
username: 'gh_e92f58174364', // 小程序唯一username 1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康
path: 'pagesInsurance/all-entrance/index', // 打开页面
path: 'pagesInsurance/health-card/index', // 打开页面
extraData: JSON.stringify({}),
},
bgPath: '',
staticINFO: {
logoUrlList: [],
},
// 太保项目用户信息
inherentUserInfo: null,
openWebAppConfig_without_yunorder:
'pagesInsurance/all-entrance/index?insurance_without_yunorder=insurance_without_yunorder',
nextConfig: null,
staticINFO2: {
descList: [],
descBottomList: [],
},
};
},
computed: {
canSubmit() {
const normalValidate =
this.dectionForm.idCard &&
this.dectionForm.name &&
this.dectionForm.mobilePhone;
if (this.dectionForm.idType != 1) {
return (
normalValidate && this.dectionForm.birthTime && this.dectionForm.sex
);
}
return normalValidate;
},
cardTypeName() {
const item = this.cardTypes.find(
(item) => item.no == this.dectionForm.idType
);
return item ? item.value : '';
},
rules() {
const rules = [{ required: true, message: '请输入真实证件号' }];
if (this.dectionForm.idType === 1) {
return [
...rules,
{
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: '身份证号格式填写有误',
},
];
}
return rules;
},
},
created() {
if (!isWeixin()) {
this.$dialog
......@@ -326,28 +118,29 @@ export default {
},
mounted() {
document.title = this.headerInfo.title;
that = this;
const {
externalOrderNo,
projectEquityNo,
rightsNo,
channelCode,
userInfo,
externalOrderNo = '',
projectEquityNo = '',
rightsNo = '',
channelCode = '',
userInfo = '',
} = this.$route.query;
if (channelCode) {
this.uploadPointData(channelCode);
// 兰州项目
if (
projectEquityNo === 'YX202306161001636491' ||
projectEquityNo === 'YX202302271000328363'
) {
const url = `${window.location.origin}/pica-insurance/sz-public-new2?projectEquityNo=${projectEquityNo}&externalOrderNo=${externalOrderNo}`;
window.location.href = url;
return;
}
this.projectEquityNo = projectEquityNo;
this.externalOrderNo = externalOrderNo || '';
this.rightsNo = rightsNo || '';
this.userInfo = userInfo || '';
// this.$loading.show();
this.getBanner(7, rightsNo || projectEquityNo);
this.getProjectMaterial();
this.loadCardTypes();
this.getUserInfo();
this.getBanner2(36, rightsNo || projectEquityNo);
this.initInsurancePath();
this.openWebAppConfigPositive.path = `pagesInsurance/health-card/index?channelCode=${channelCode}&projectEquityNo=${projectEquityNo}&externalOrderNo=${externalOrderNo}&rightsNo=${rightsNo}&userInfo=${userInfo}`;
if (channelCode) uploadPointData({ channelCode });
this.$sendBuriedData(
{
action: 'ACTION_WEB_ENTER',
......@@ -357,444 +150,81 @@ export default {
externalOrderNo: externalOrderNo,
rightsNo: rightsNo,
userInfo: userInfo,
channelCode: channelCode || '',
channelCode: channelCode,
},
},
'enter'
);
},
methods: {
getUserInfo() {
const params = {
projectEquityNo: this.projectEquityNo,
externalOrderNo: this.externalOrderNo,
rightsNo: this.rightsNo,
encryptedUserInfo: this.userInfo,
};
queryUserInfo(params)
.then((res) => {
console.log('userinfo =>', res);
if (!res?.data) return;
const { data } = res;
this.inherentUserInfo = data;
data.mobilePhone && (this.dectionForm.mobilePhone = data.mobilePhone);
data.idCard && (this.dectionForm.idCard = data.idCard);
data.idType && (this.dectionForm.idType = data.idType);
data.name && (this.dectionForm.name = data.name);
data.sex && (this.dectionForm.sex = data.sex);
data.birthTime && (this.dectionForm.birthTime = data.birthTime);
})
.catch((err) => {
console.log(err);
});
},
getProjectMaterial() {
projectMaterial().then((res) => {
const list = res.data || [];
const target = this.rightsNo || this.projectEquityNo;
const item = list.find((i) => i.no_char === target);
if (item) {
this.nextConfig = {
projectEquityNo: this.projectEquityNo,
rightsNo: this.rightsNo,
image: encodeURIComponent(item.value),
};
}
});
},
isReadonly(fieldName) {
if (!this.inherentUserInfo) return false;
return (
this.inherentUserInfo[fieldName] !== null &&
this.inherentUserInfo[fieldName] !== ''
);
},
uploadPointData(channelCode) {
uploadPointData({ channelCode });
},
async loadCardTypes() {
const { data } = await getCardTypes();
this.cardTypes = data || [];
},
handleChooseCardType(item) {
this.dectionForm.idType = item.no;
this.showCardTypeVisible = false;
},
getBanner(pageType, yunOrderNo) {
const self = this;
self.$loading.show();
this.$loading.show();
getBanner(pageType, yunOrderNo).then((res) => {
if (res.code === '000000') {
self.bgPath = res.data.logoUrl;
self.staticINFO = res.data;
self.$loading.hide();
this.bgPath = res.data.logoUrl;
this.staticINFO = res.data;
this.$loading.hide();
}
});
},
// 创建深圳订单
createOrderSz() {
const { externalOrderNo, projectEquityNo, rightsNo } = this;
const data = {
...this.dectionForm,
projectEquityNo,
};
if (externalOrderNo) {
data['externalOrderNo'] = externalOrderNo;
}
if (rightsNo) {
data['rightsNo'] = rightsNo;
}
getBanner2(pageType, yunOrderNo) {
this.$loading.show();
createOrderSzV2(data)
.then((res) => {
this.$loading.hide();
console.log(res);
if (res.code == '000000') {
const {
yunOrderNo,
statusCode,
externalOrderNo,
versionNumber,
projectEquityNo,
lanZhouOldflag,
projectEquityNoNext,
yunOrderNoNext,
rightsNo,
encryptPatientId,
} = res.data;
if (this.nextConfig) {
this.$router.replace({
path: '/notice',
query: this.nextConfig,
});
} else if (rightsNo) {
this.showProtocol = true;
const yo = yunOrderNoNext || yunOrderNo;
const po = projectEquityNoNext || projectEquityNo;
this.openWebAppConfigPositive.path = `pagesInsurance/my-right/index?encryptPatientId=${encryptPatientId}&projectEquityNo=${po}&yunOrderNo=${yo}&externalOrderNo=${externalOrderNo}&rightsNo=${rightsNo}`;
console.log(
'-this.openWebAppConfigPositive.path',
versionNumber,
this.openWebAppConfigPositive.path
);
} else if (lanZhouOldflag) {
const url = '/home';
const l = window.location.origin;
const hr =
l +
`/pica-insurance${url}?projectEquityNo=${projectEquityNo}&externalOrderNo=${externalOrderNo}`;
window.location.href = hr;
} else if (
statusCode == '0103' ||
[4, 5, 6].includes(versionNumber)
) {
this.showProtocol = true;
const yo = yunOrderNo;
const po = projectEquityNo;
this.openWebAppConfigPositive.path = `pagesInsurance/all-entrance/index?channelSource=insurance_channel&projectEquityNo=${po}&yunOrderNo=${yo}&externalOrderNo=${externalOrderNo}`;
console.log(
'-this.openWebAppConfigPositive.path',
versionNumber,
this.openWebAppConfigPositive.path
);
} else {
this.$router.replace({
path: '/entitlement',
query: {
projectEquityNo: projectEquityNo,
externalOrderNo: externalOrderNo,
},
});
}
} else {
this.$toast(res.message);
}
})
.catch((err) => {
console.log(err);
getBanner(pageType, yunOrderNo).then((res) => {
if (res.code === '000000') {
this.staticINFO2 = res.data;
this.$loading.hide();
});
},
appointment() {
this.$refs.dectionForm
.validate()
.then((result) => {
console.log('this.dectionForm', result);
this.createOrderSz();
})
.catch((err) => {
console.log(err);
});
}
});
},
handleErrorFn(e) {
console.log('handleErrorFn', e);
},
handleLaunchFn(e) {
console.log('handleLaunchFn', e);
that.showProtocol = false;
},
initInsurancePath() {
this.openWebAppConfig_without_yunorder = `pagesInsurance/all-entrance/index?insurance_without_yunorder=insurance_without_yunorder&projectEquityNo=${this.projectEquityNo}`;
handleBanner(index) {
console.log('index', index);
window.location.href = this.staticINFO2.descBottomList[index];
},
},
};
</script>
<style lang="scss" scoped>
.sz-appoint {
width: 100%;
overflow: auto;
box-sizing: border-box;
padding-bottom: 70px;
.page-wrapper {
min-height: 100vh;
background-color: #bee2fd;
.insurance-register-bg {
width: 100%;
.bg-img {
width: 100%;
img {
width: 100%;
height: 100%;
}
}
.wrap-reg {
width: 350px;
border-radius: 20px;
margin: 0 auto;
margin-top: 280px;
position: relative;
}
}
.back-img {
position: absolute;
top: 0;
}
.choose-section {
padding: 10px 12px;
background: #ffffff;
border-radius: 11px;
font-weight: 600;
padding-top: 0px;
margin: 0 auto;
/deep/ .van-field__label {
color: #212121;
}
/deep/ .van-field__control:disabled {
color: #323233;
-webkit-text-fill-color: inherit;
}
.item {
color: #212121;
font-size: 14px;
display: flex;
height: 60px;
align-items: center;
position: relative;
.input-key {
font-weight: 300;
margin-left: 10px;
}
.input-value {
margin-left: 18px;
font-weight: 500;
overflow: visible;
}
.right {
position: absolute;
right: 10px;
top: 25px;
}
}
.height60 {
height: 30px;
}
.required {
position: relative;
}
.required::after {
position: absolute;
content: '*';
display: block;
left: -10px;
top: 0;
text-align: center;
color: rgba(255, 56, 56, 1);
}
}
.appoint-form-items {
.van-inner-field {
padding: 0;
}
/deep/ .van-field__label {
color: #212121;
width: auto;
}
&.field-readonly {
/deep/ .van-field__label {
color: #999999;
width: auto;
}
&::before {
color: #999999;
}
/deep/ .van-field__control {
&:disabled,
&:read-only {
color: #999999;
-webkit-text-fill-color: inherit;
.van-radio__label {
color: inherit;
}
}
}
}
}
.appoint-form-placeholder {
color: #999999;
}
.appoint-form-title::after {
display: none;
}
.appoint-form-submit {
margin-top: 30px;
}
.footer-box {
height: 50px;
padding-bottom: calc(constant(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
box-sizing: content-box;
}
.fixed-btn {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 50px;
padding-bottom: calc(constant(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
box-shadow: inset 0px 1px 0px 0px #e9e9e9;
background-color: #fff;
box-sizing: content-box;
z-index: 9999;
.wx-btn {
display: block;
width: 93.33333%;
height: 40px;
background: #d9d9d9;
border-radius: 20px;
border: none;
position: absolute;
margin: 5px auto;
border-radius: 40px;
font-size: 16px;
font-weight: 600;
}
.sz-appoint-form-tips {
width: 175px;
height: 32px;
margin: 0 auto;
margin-bottom: 10px;
}
/deep/.van-cell {
display: block;
font-weight: 300;
font-size: 14px;
}
.phone-wrap {
.sm-grey {
font-weight: 100;
color: #999999;
font-size: 12px;
}
}
.protocol-content {
padding: 20px;
border-radius: 20px;
}
.block70 {
font-size: 14px;
color: #212121 !important;
text-align: center;
margin-top: 15px;
}
.f20 {
font-size: 20px;
}
.submit-button {
position: relative;
height: 40px;
border-radius: 20px;
color: #ffffff;
font-size: 16px;
display: flex;
align-items: center;
background: #00bda5;
justify-content: center;
width: 242px;
margin: 0px auto;
}
/deep/.van-popup--center {
border-radius: 20px;
}
.bottom-btn {
width: 100%;
background: #ffffff;
box-shadow: inset 0px 1px 0px 0px #e9e9e9;
overflow: hidden;
line-height: 40px;
text-align: center;
padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
position: fixed;
bottom: 0;
left: 0;
.btn {
width: 351px;
height: 40px;
border-radius: 20px;
margin: 4px auto;
font-size: 16px;
background: #cccccc;
font-weight: 600;
color: #ffffff;
line-height: 40px;
text-align: center;
}
.appoint-form-submit-active {
background: linear-gradient(270deg, #ff7400 0%, #fe4000 100%);
}
}
.mt20 {
margin-top: 10px;
background-color: #bee2fd;
}
.check-popup-wrapper {
width: 295px;
height: 227px;
position: fixed;
background: url('https://files.yunqueyi.com/image/png/common/20230830115339979.png')
no-repeat center;
background-size: 100% 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.delete-icon {
// width: 25px;
// height: 25px;
position: absolute;
color: #fff;
right: 0;
top: -36px;
}
.title {
font-size: 18px;
font-weight: 800;
color: #3c877d;
margin-top: 36px;
padding: 0 24px;
}
.content {
display: inline-block;
font-size: 16px;
color: #212121;
margin: 25px 0 48px 0;
padding: 0 24px;
}
.next-btn {
width: 247px;
height: 39px;
margin: 0 auto;
background: #00bda5;
border-radius: 23px;
color: #fff;
font-size: 18px;
font-weight: 800;
line-height: 39px;
text-align: center;
}
background: linear-gradient(270deg, #ff7400 0%, #fe4000 100%);
}
}
</style>
src/views/sz-public-new/index2.vue
浏览文件 @ 16d28fac
<!-- eslint-disable -->
<template>
<div class="page-wrapper">
<img
class="pic"
:src="bgPath"
<div class="sz-appoint">
<page-model
v-if="picaWechat != 'wechat'"
ref="PageModel"
:header-info="headerInfo"
/>
<div
v-for="(url, index) in staticINFO.logoUrlList"
:key="index"
>
<img
class="pic"
:src="url"
/>
</div>
<div
v-for="(url, index) in staticINFO2.descList"
:key="index"
@click="handleBanner(index)"
>
<img
class="pic"
:src="url"
/>
</div>
<div class="footer-box">
<div class="fixed-btn">
<div class="insurance-register-bg">
<div class="bg-img back-img">
<img :src="bgPath" />
</div>
<div class="wrap-reg">
<div class="choose-section">
<div class="sz-appoint-form-tips">
<img
src="https://files.yunqueyi.com/image/png/common/20230628155802981.png"
/>
</div>
<van-form
ref="dectionForm"
validate-first
>
<van-field
v-model="dectionForm.name"
label="参保人姓名"
clearable
required
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('name') }"
:readonly="isReadonly('name')"
placeholder="点击此处输入"
:rules="[
{ required: true, message: '请输入参保人姓名' },
{
pattern: /^.{2,40}$/,
message: '参保人姓名请填写2-40位',
},
]"
/>
<van-field
label="证件类型"
required
disabled
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('cardTypeName') }"
:right-icon="isReadonly('cardTypeName') ? '' : 'arrow'"
:readonly="isReadonly('cardTypeName')"
@click="
!isReadonly('cardTypeName') && (showCardTypeVisible = true)
"
>
<template #input>
<van-field
class="van-inner-field"
:value="cardTypeName"
readonly
/>
</template>
</van-field>
<van-field
v-model="dectionForm.idCard"
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('idCard') }"
clearable
required
label="参保人证件号"
placeholder="点击此处输入"
:rules="rules"
:readonly="isReadonly('idCard')"
/>
<van-field
v-if="dectionForm.idType != 1"
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('sex') }"
required
label="参保人性别"
>
<template #input>
<van-radio-group
v-model="dectionForm.sex"
direction="horizontal"
:disabled="isReadonly('sex')"
>
<van-radio :name="1"> 男 </van-radio>
<van-radio :name="2"> 女 </van-radio>
</van-radio-group>
</template>
</van-field>
<van-field
v-if="dectionForm.idType != 1"
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('birthTime') }"
required
label="参保人出生日期"
:right-icon="isReadonly('birthTime') ? '' : 'arrow'"
:readonly="isReadonly('birthTime')"
>
<template #input>
<DatePicker
v-model="dectionForm.birthTime"
:readonly="isReadonly('birthTime')"
/>
</template>
</van-field>
<van-field
v-model="dectionForm.mobilePhone"
class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('mobilePhone') }"
label="参保人手机号"
label-width="100%"
clearable
required
placeholder="点击此处输入"
:rules="[
{ required: true, message: '请输入手机号' },
{
pattern: /^([1][3,4,5,6,7,8,9])\d{9}$/,
message: '手机号格式填写有误',
},
]"
:readonly="isReadonly('mobilePhone')"
>
<template #label>
<div class="phone-wrap">
参保人手机号
<span class="sm-grey">该手机号将用于接收预约信息</span>
</div>
</template>
</van-field>
</van-form>
<wx-open-launch-weapp
v-if="!(rightsNo || projectEquityNo === 'SZ202306011000938751')"
id="checkBtn"
style="display: block"
:username="openWebAppConfigPositive.username"
:path="openWebAppConfig_without_yunorder"
:env-version="envVersion"
@launch="handleLaunchFn"
>
<script type="text/wxtag-template">
<style>.bottom-text { display: flex; align-items: center; justify-content: center; margin-top: 15px; margin-bottom: 10px;height: 18px;font-size: 13px;line-height: 18px;text-align: center;font-weight: 400;font-family: PingFangSC-Regular, PingFang SC;color: #212121ff; }</style> <div class="bottom-text">查看领取记录 ></div>
</script>
</wx-open-launch-weapp>
</div>
<div
class="wx-btn"
v-if="picaWechat != 'wechat'"
v-for="(i, ind) in staticINFO.logoUrlList"
:key="ind"
class="bg-img mt20"
>
<span>领取权益</span>
<img :src="i" />
</div>
<wx-open-launch-weapp
v-else
style="display: block; width: 100%"
:username="openWebAppConfigPositive.username"
:path="openWebAppConfigPositive.path"
:env-version="envVersion"
@error="handleErrorFn"
@launch="handleLaunchFn"
>
<script type="text/wxtag-template">
<div class="wx-btn">
<span>领取权益</span>
</div>
<style>
.wx-btn {
display: block;
width: 93.33333%;
height: 40px;
margin: 5px auto;
border-radius: 40px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
line-height: 40px;
text-align: center;
background: linear-gradient(270deg, #ff7400 0%, #fe4000 100%);
}
</style>
</script>
</wx-open-launch-weapp>
</div>
</div>
<div class="bottom-btn">
<van-button
class="btn"
:class="canSubmit ? 'appoint-form-submit-active' : ''"
@click="appointment"
>
领取权益
</van-button>
</div>
<!-- 选择证件类型弹框 -->
<van-popup
v-model="showCardTypeVisible"
position="bottom"
:style="{ height: '280px' }"
>
<van-cell
v-for="(item, index) in cardTypes"
:key="index"
:title="item.value"
style="display: flex; align-items: center"
@click="handleChooseCardType(item)"
>
<template #right-icon>
<van-icon
v-if="dectionForm.idType == item.no"
name="success"
/>
</template>
</van-cell>
</van-popup>
<!-- 校验通过弹框 -->
<van-overlay :show="showProtocol">
<div class="check-popup-wrapper">
<van-icon
name="close"
class="delete-icon"
size="25"
@click="showProtocol = false"
/>
<p class="title">身份校验通过</p>
<span class="content">请点击“下一步”进入权益领取流程</span>
<div class="submit-button submit-button-empty">
<wx-open-launch-weapp
id="launchBtn"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
"
:username="openWebAppConfigPositive.username"
:path="openWebAppConfigPositive.path"
:env-version="envVersion"
@error="handleErrorFn"
@launch="handleLaunchFn"
>
<script type="text/wxtag-template">
<style>.btn {position:absolute; top: -3px; color: #ffffff;text-align: center;line-height: 50px; font-size: 16px; font-weight: 500; left: 0; width:100%; height: 100%;}</style> <div class="btn">下一步</div>
</script>
</wx-open-launch-weapp>
</div>
</div>
</van-overlay>
</div>
</template>
<script>
import { getBanner } from '@/api/entitlement';
import { uploadPointData } from '@/api/question';
import { getBanner, getCardTypes, projectMaterial } from '@/api/entitlement';
import {
createOrderSzV2,
queryUserInfo,
uploadPointData,
} from '@/api/question';
import { isWeixin } from '@/utils/index';
import DatePicker from './date-picker.vue';
let that;
export default {
components: { DatePicker },
data() {
return {
projectEquityNo: '',
externalOrderNo: '',
rightsNo: '',
userInfo: '',
picaWechat: window._picaWechat,
headerInfo: {
title: '健康服务权益领取',
......@@ -86,22 +246,70 @@ export default {
style: 'backgroundColor:#ffffff;zIndex:100;',
background: '',
},
dectionForm: {
mobilePhone: '',
idCard: '',
idType: 1 /** 默认为1:身份证 */,
name: '',
sex: '',
birthTime: '',
},
showProtocol: false,
showCardTypeVisible: false,
cardTypes: [],
// envVersion: process.env.MINI_PROGRAM_ENV,
envVersion: process.env.VUE_APP_MINI_PROGRAM_ENV,
openWebAppConfigPositive: {
username: 'gh_e92f58174364', // 小程序唯一username 1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康
path: 'pagesInsurance/health-card/index', // 打开页面
path: 'pagesInsurance/all-entrance/index', // 打开页面
extraData: JSON.stringify({}),
},
bgPath: '',
staticINFO: {
logoUrlList: [],
},
staticINFO2: {
descList: [],
descBottomList: [],
},
// 太保项目用户信息
inherentUserInfo: null,
openWebAppConfig_without_yunorder:
'pagesInsurance/all-entrance/index?insurance_without_yunorder=insurance_without_yunorder',
nextConfig: null,
};
},
computed: {
canSubmit() {
const normalValidate =
this.dectionForm.idCard &&
this.dectionForm.name &&
this.dectionForm.mobilePhone;
if (this.dectionForm.idType != 1) {
return (
normalValidate && this.dectionForm.birthTime && this.dectionForm.sex
);
}
return normalValidate;
},
cardTypeName() {
const item = this.cardTypes.find(
(item) => item.no == this.dectionForm.idType
);
return item ? item.value : '';
},
rules() {
const rules = [{ required: true, message: '请输入真实证件号' }];
if (this.dectionForm.idType === 1) {
return [
...rules,
{
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: '身份证号格式填写有误',
},
];
}
return rules;
},
},
created() {
if (!isWeixin()) {
this.$dialog
......@@ -118,19 +326,28 @@ export default {
},
mounted() {
document.title = this.headerInfo.title;
that = this;
const {
externalOrderNo = '',
projectEquityNo = '',
rightsNo = '',
channelCode = '',
userInfo = '',
externalOrderNo,
projectEquityNo,
rightsNo,
channelCode,
userInfo,
} = this.$route.query;
if (channelCode) {
this.uploadPointData(channelCode);
}
this.projectEquityNo = projectEquityNo;
this.externalOrderNo = externalOrderNo || '';
this.rightsNo = rightsNo || '';
this.userInfo = userInfo || '';
// this.$loading.show();
this.getBanner(7, rightsNo || projectEquityNo);
this.getBanner2(36, rightsNo || projectEquityNo);
this.getProjectMaterial();
this.loadCardTypes();
this.getUserInfo();
this.openWebAppConfigPositive.path = `pagesInsurance/health-card/index?channelCode=${channelCode}&projectEquityNo=${projectEquityNo}&externalOrderNo=${externalOrderNo}&rightsNo=${rightsNo}&userInfo=${userInfo}`;
if (channelCode) uploadPointData({ channelCode });
this.initInsurancePath();
this.$sendBuriedData(
{
action: 'ACTION_WEB_ENTER',
......@@ -140,81 +357,444 @@ export default {
externalOrderNo: externalOrderNo,
rightsNo: rightsNo,
userInfo: userInfo,
channelCode: channelCode,
channelCode: channelCode || '',
},
},
'enter'
);
},
methods: {
getUserInfo() {
const params = {
projectEquityNo: this.projectEquityNo,
externalOrderNo: this.externalOrderNo,
rightsNo: this.rightsNo,
encryptedUserInfo: this.userInfo,
};
queryUserInfo(params)
.then((res) => {
console.log('userinfo =>', res);
if (!res?.data) return;
const { data } = res;
this.inherentUserInfo = data;
data.mobilePhone && (this.dectionForm.mobilePhone = data.mobilePhone);
data.idCard && (this.dectionForm.idCard = data.idCard);
data.idType && (this.dectionForm.idType = data.idType);
data.name && (this.dectionForm.name = data.name);
data.sex && (this.dectionForm.sex = data.sex);
data.birthTime && (this.dectionForm.birthTime = data.birthTime);
})
.catch((err) => {
console.log(err);
});
},
getProjectMaterial() {
projectMaterial().then((res) => {
const list = res.data || [];
const target = this.rightsNo || this.projectEquityNo;
const item = list.find((i) => i.no_char === target);
if (item) {
this.nextConfig = {
projectEquityNo: this.projectEquityNo,
rightsNo: this.rightsNo,
image: encodeURIComponent(item.value),
};
}
});
},
isReadonly(fieldName) {
if (!this.inherentUserInfo) return false;
return (
this.inherentUserInfo[fieldName] !== null &&
this.inherentUserInfo[fieldName] !== ''
);
},
uploadPointData(channelCode) {
uploadPointData({ channelCode });
},
async loadCardTypes() {
const { data } = await getCardTypes();
this.cardTypes = data || [];
},
handleChooseCardType(item) {
this.dectionForm.idType = item.no;
this.showCardTypeVisible = false;
},
getBanner(pageType, yunOrderNo) {
this.$loading.show();
const self = this;
self.$loading.show();
getBanner(pageType, yunOrderNo).then((res) => {
if (res.code === '000000') {
this.bgPath = res.data.logoUrl;
this.staticINFO = res.data;
this.$loading.hide();
self.bgPath = res.data.logoUrl;
self.staticINFO = res.data;
self.$loading.hide();
}
});
},
getBanner2(pageType, yunOrderNo) {
// 创建深圳订单
createOrderSz() {
const { externalOrderNo, projectEquityNo, rightsNo } = this;
const data = {
...this.dectionForm,
projectEquityNo,
};
if (externalOrderNo) {
data['externalOrderNo'] = externalOrderNo;
}
if (rightsNo) {
data['rightsNo'] = rightsNo;
}
this.$loading.show();
getBanner(pageType, yunOrderNo).then((res) => {
if (res.code === '000000') {
this.staticINFO2 = res.data;
createOrderSzV2(data)
.then((res) => {
this.$loading.hide();
}
});
console.log(res);
if (res.code == '000000') {
const {
yunOrderNo,
statusCode,
externalOrderNo,
versionNumber,
projectEquityNo,
lanZhouOldflag,
projectEquityNoNext,
yunOrderNoNext,
rightsNo,
encryptPatientId,
} = res.data;
if (this.nextConfig) {
this.$router.replace({
path: '/notice',
query: this.nextConfig,
});
} else if (rightsNo) {
this.showProtocol = true;
const yo = yunOrderNoNext || yunOrderNo;
const po = projectEquityNoNext || projectEquityNo;
this.openWebAppConfigPositive.path = `pagesInsurance/my-right/index?encryptPatientId=${encryptPatientId}&projectEquityNo=${po}&yunOrderNo=${yo}&externalOrderNo=${externalOrderNo}&rightsNo=${rightsNo}`;
console.log(
'-this.openWebAppConfigPositive.path',
versionNumber,
this.openWebAppConfigPositive.path
);
} else if (lanZhouOldflag) {
const url = '/home';
const l = window.location.origin;
const hr =
l +
`/pica-insurance${url}?projectEquityNo=${projectEquityNo}&externalOrderNo=${externalOrderNo}`;
window.location.href = hr;
} else if (
statusCode == '0103' ||
[4, 5, 6].includes(versionNumber)
) {
this.showProtocol = true;
const yo = yunOrderNo;
const po = projectEquityNo;
this.openWebAppConfigPositive.path = `pagesInsurance/all-entrance/index?channelSource=insurance_channel&projectEquityNo=${po}&yunOrderNo=${yo}&externalOrderNo=${externalOrderNo}`;
console.log(
'-this.openWebAppConfigPositive.path',
versionNumber,
this.openWebAppConfigPositive.path
);
} else {
this.$router.replace({
path: '/entitlement',
query: {
projectEquityNo: projectEquityNo,
externalOrderNo: externalOrderNo,
},
});
}
} else {
this.$toast(res.message);
}
})
.catch((err) => {
console.log(err);
this.$loading.hide();
});
},
appointment() {
this.$refs.dectionForm
.validate()
.then((result) => {
console.log('this.dectionForm', result);
this.createOrderSz();
})
.catch((err) => {
console.log(err);
});
},
handleErrorFn(e) {
console.log('handleErrorFn', e);
},
handleLaunchFn(e) {
console.log('handleLaunchFn', e);
that.showProtocol = false;
},
handleBanner(index) {
console.log('index', index);
window.location.href = this.staticINFO2.descBottomList[index];
initInsurancePath() {
this.openWebAppConfig_without_yunorder = `pagesInsurance/all-entrance/index?insurance_without_yunorder=insurance_without_yunorder&projectEquityNo=${this.projectEquityNo}`;
},
},
};
</script>
<style lang="scss" scoped>
.page-wrapper {
min-height: 100vh;
.sz-appoint {
width: 100%;
overflow: auto;
box-sizing: border-box;
padding-bottom: 70px;
background-color: #bee2fd;
}
.footer-box {
height: 50px;
padding-bottom: calc(constant(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
box-sizing: content-box;
}
.fixed-btn {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 50px;
padding-bottom: calc(constant(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
box-shadow: inset 0px 1px 0px 0px #e9e9e9;
background-color: #fff;
box-sizing: content-box;
z-index: 9999;
.wx-btn {
display: block;
width: 93.33333%;
.insurance-register-bg {
width: 100%;
.bg-img {
width: 100%;
img {
width: 100%;
height: 100%;
}
}
.wrap-reg {
width: 350px;
border-radius: 20px;
margin: 0 auto;
margin-top: 280px;
position: relative;
}
}
.back-img {
position: absolute;
top: 0;
}
.choose-section {
padding: 10px 12px;
background: #ffffff;
border-radius: 11px;
font-weight: 600;
padding-top: 0px;
margin: 0 auto;
/deep/ .van-field__label {
color: #212121;
}
/deep/ .van-field__control:disabled {
color: #323233;
-webkit-text-fill-color: inherit;
}
.item {
color: #212121;
font-size: 14px;
display: flex;
height: 60px;
align-items: center;
position: relative;
.input-key {
font-weight: 300;
margin-left: 10px;
}
.input-value {
margin-left: 18px;
font-weight: 500;
overflow: visible;
}
.right {
position: absolute;
right: 10px;
top: 25px;
}
}
.height60 {
height: 30px;
}
.required {
position: relative;
}
.required::after {
position: absolute;
content: '*';
display: block;
left: -10px;
top: 0;
text-align: center;
color: rgba(255, 56, 56, 1);
}
}
.appoint-form-items {
.van-inner-field {
padding: 0;
}
/deep/ .van-field__label {
color: #212121;
width: auto;
}
&.field-readonly {
/deep/ .van-field__label {
color: #999999;
width: auto;
}
&::before {
color: #999999;
}
/deep/ .van-field__control {
&:disabled,
&:read-only {
color: #999999;
-webkit-text-fill-color: inherit;
.van-radio__label {
color: inherit;
}
}
}
}
}
.appoint-form-placeholder {
color: #999999;
}
.appoint-form-title::after {
display: none;
}
.appoint-form-submit {
margin-top: 30px;
height: 40px;
margin: 5px auto;
border-radius: 40px;
background: #d9d9d9;
border-radius: 20px;
border: none;
position: absolute;
font-size: 16px;
font-weight: 600;
}
.sz-appoint-form-tips {
width: 175px;
height: 32px;
margin: 0 auto;
margin-bottom: 10px;
}
/deep/.van-cell {
display: block;
font-weight: 300;
font-size: 14px;
}
.phone-wrap {
.sm-grey {
font-weight: 100;
color: #999999;
font-size: 12px;
}
}
.protocol-content {
padding: 20px;
border-radius: 20px;
}
.block70 {
font-size: 14px;
color: #212121 !important;
text-align: center;
margin-top: 15px;
}
.f20 {
font-size: 20px;
}
.submit-button {
position: relative;
height: 40px;
border-radius: 20px;
color: #ffffff;
line-height: 40px;
font-size: 16px;
display: flex;
align-items: center;
background: #00bda5;
justify-content: center;
width: 242px;
margin: 0px auto;
}
/deep/.van-popup--center {
border-radius: 20px;
}
.bottom-btn {
width: 100%;
background: #ffffff;
box-shadow: inset 0px 1px 0px 0px #e9e9e9;
overflow: hidden;
text-align: center;
background: linear-gradient(270deg, #ff7400 0%, #fe4000 100%);
padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
position: fixed;
bottom: 0;
left: 0;
.btn {
width: 351px;
height: 40px;
border-radius: 20px;
margin: 4px auto;
font-size: 16px;
background: #cccccc;
font-weight: 600;
color: #ffffff;
line-height: 40px;
text-align: center;
}
.appoint-form-submit-active {
background: linear-gradient(270deg, #ff7400 0%, #fe4000 100%);
}
}
.mt20 {
margin-top: 10px;
background-color: #bee2fd;
}
.check-popup-wrapper {
width: 295px;
height: 227px;
position: fixed;
background: url('https://files.yunqueyi.com/image/png/common/20230830115339979.png')
no-repeat center;
background-size: 100% 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.delete-icon {
// width: 25px;
// height: 25px;
position: absolute;
color: #fff;
right: 0;
top: -36px;
}
.title {
font-size: 18px;
font-weight: 800;
color: #3c877d;
margin-top: 36px;
padding: 0 24px;
}
.content {
display: inline-block;
font-size: 16px;
color: #212121;
margin: 25px 0 48px 0;
padding: 0 24px;
}
.next-btn {
width: 247px;
height: 39px;
margin: 0 auto;
background: #00bda5;
border-radius: 23px;
color: #fff;
font-size: 18px;
font-weight: 800;
line-height: 39px;
text-align: center;
}
}
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或