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> <template>
<div class="sz-appoint"> <div class="page-wrapper">
<page-model <img
v-if="picaWechat != 'wechat'" class="pic"
ref="PageModel" :src="bgPath"
:header-info="headerInfo"
/> />
<div class="insurance-register-bg">
<div class="bg-img back-img"> <div
<img :src="bgPath" /> v-for="(url, index) in staticINFO.logoUrlList"
</div> :key="index"
<div class="wrap-reg"> >
<div class="choose-section"> <img
<div class="sz-appoint-form-tips"> class="pic"
<img :src="url"
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> </div>
<!-- 选择证件类型弹框 --> <div
<van-popup v-for="(url, index) in staticINFO2.descList"
v-model="showCardTypeVisible" :key="index"
position="bottom" @click="handleBanner(index)"
:style="{ height: '280px' }"
> >
<van-cell <img
v-for="(item, index) in cardTypes" class="pic"
:key="index" :src="url"
:title="item.value" />
style="display: flex; align-items: center" </div>
@click="handleChooseCardType(item)"
> <div class="footer-box">
<template #right-icon> <div class="fixed-btn">
<van-icon <div
v-if="dectionForm.idType == item.no" class="wx-btn"
name="success" v-if="picaWechat != 'wechat'"
/> >
</template> <span>领取权益</span>
</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>
<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>
</van-overlay> </div>
</div> </div>
</template> </template>
<script> <script>
import { getBanner, getCardTypes, projectMaterial } from '@/api/entitlement'; import { getBanner } from '@/api/entitlement';
import { import { uploadPointData } from '@/api/question';
createOrderSzV2,
queryUserInfo,
uploadPointData,
} from '@/api/question';
import { isWeixin } from '@/utils/index'; import { isWeixin } from '@/utils/index';
import DatePicker from './date-picker.vue';
let that;
export default { export default {
components: { DatePicker },
data() { data() {
return { return {
projectEquityNo: '',
externalOrderNo: '',
rightsNo: '',
userInfo: '',
picaWechat: window._picaWechat, picaWechat: window._picaWechat,
headerInfo: { headerInfo: {
title: '健康服务权益领取', title: '健康服务权益领取',
...@@ -246,70 +86,22 @@ export default { ...@@ -246,70 +86,22 @@ export default {
style: 'backgroundColor:#ffffff;zIndex:100;', style: 'backgroundColor:#ffffff;zIndex:100;',
background: '', 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, envVersion: process.env.VUE_APP_MINI_PROGRAM_ENV,
openWebAppConfigPositive: { openWebAppConfigPositive: {
username: 'gh_e92f58174364', // 小程序唯一username 1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康 username: 'gh_e92f58174364', // 小程序唯一username 1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康
path: 'pagesInsurance/all-entrance/index', // 打开页面 path: 'pagesInsurance/health-card/index', // 打开页面
extraData: JSON.stringify({}), extraData: JSON.stringify({}),
}, },
bgPath: '', bgPath: '',
staticINFO: { staticINFO: {
logoUrlList: [], logoUrlList: [],
}, },
// 太保项目用户信息 staticINFO2: {
inherentUserInfo: null, descList: [],
openWebAppConfig_without_yunorder: descBottomList: [],
'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() { created() {
if (!isWeixin()) { if (!isWeixin()) {
this.$dialog this.$dialog
...@@ -326,28 +118,29 @@ export default { ...@@ -326,28 +118,29 @@ export default {
}, },
mounted() { mounted() {
document.title = this.headerInfo.title; document.title = this.headerInfo.title;
that = this;
const { const {
externalOrderNo, externalOrderNo = '',
projectEquityNo, projectEquityNo = '',
rightsNo, rightsNo = '',
channelCode, channelCode = '',
userInfo, userInfo = '',
} = this.$route.query; } = 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.getBanner(7, rightsNo || projectEquityNo);
this.getProjectMaterial(); this.getBanner2(36, rightsNo || projectEquityNo);
this.loadCardTypes();
this.getUserInfo();
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( this.$sendBuriedData(
{ {
action: 'ACTION_WEB_ENTER', action: 'ACTION_WEB_ENTER',
...@@ -357,444 +150,81 @@ export default { ...@@ -357,444 +150,81 @@ export default {
externalOrderNo: externalOrderNo, externalOrderNo: externalOrderNo,
rightsNo: rightsNo, rightsNo: rightsNo,
userInfo: userInfo, userInfo: userInfo,
channelCode: channelCode || '', channelCode: channelCode,
}, },
}, },
'enter' 'enter'
); );
}, },
methods: { 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) { getBanner(pageType, yunOrderNo) {
const self = this; this.$loading.show();
self.$loading.show();
getBanner(pageType, yunOrderNo).then((res) => { getBanner(pageType, yunOrderNo).then((res) => {
if (res.code === '000000') { if (res.code === '000000') {
self.bgPath = res.data.logoUrl; this.bgPath = res.data.logoUrl;
self.staticINFO = res.data; this.staticINFO = res.data;
self.$loading.hide(); this.$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(); this.$loading.show();
createOrderSzV2(data) getBanner(pageType, yunOrderNo).then((res) => {
.then((res) => { if (res.code === '000000') {
this.$loading.hide(); this.staticINFO2 = res.data;
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(); this.$loading.hide();
}); }
}, });
appointment() {
this.$refs.dectionForm
.validate()
.then((result) => {
console.log('this.dectionForm', result);
this.createOrderSz();
})
.catch((err) => {
console.log(err);
});
}, },
handleErrorFn(e) { handleErrorFn(e) {
console.log('handleErrorFn', e); console.log('handleErrorFn', e);
}, },
handleLaunchFn(e) { handleLaunchFn(e) {
console.log('handleLaunchFn', e); console.log('handleLaunchFn', e);
that.showProtocol = false;
}, },
initInsurancePath() { handleBanner(index) {
this.openWebAppConfig_without_yunorder = `pagesInsurance/all-entrance/index?insurance_without_yunorder=insurance_without_yunorder&projectEquityNo=${this.projectEquityNo}`; console.log('index', index);
window.location.href = this.staticINFO2.descBottomList[index];
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.sz-appoint { .page-wrapper {
width: 100%; min-height: 100vh;
overflow: auto;
box-sizing: border-box;
padding-bottom: 70px;
background-color: #bee2fd; background-color: #bee2fd;
.insurance-register-bg { }
width: 100%; .footer-box {
.bg-img { height: 50px;
width: 100%; padding-bottom: calc(constant(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
img { box-sizing: content-box;
width: 100%; }
height: 100%; .fixed-btn {
} position: fixed;
} left: 0;
.wrap-reg { right: 0;
width: 350px; bottom: 0;
border-radius: 20px; height: 50px;
margin: 0 auto; padding-bottom: calc(constant(safe-area-inset-bottom) / 2);
margin-top: 280px; padding-bottom: calc(env(safe-area-inset-bottom) / 2);
position: relative; box-shadow: inset 0px 1px 0px 0px #e9e9e9;
} background-color: #fff;
} box-sizing: content-box;
.back-img { z-index: 9999;
position: absolute; .wx-btn {
top: 0; display: block;
} width: 93.33333%;
.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; height: 40px;
background: #d9d9d9; margin: 5px auto;
border-radius: 20px; border-radius: 40px;
border: none;
position: absolute;
font-size: 16px; font-size: 16px;
font-weight: 600; 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; color: #ffffff;
font-size: 16px; line-height: 40px;
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; text-align: center;
padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2); background: linear-gradient(270deg, #ff7400 0%, #fe4000 100%);
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> </style>
src/views/sz-public-new/index2.vue
浏览文件 @ 16d28fac
<!-- eslint-disable -->
<template> <template>
<div class="page-wrapper"> <div class="sz-appoint">
<img <page-model
class="pic" v-if="picaWechat != 'wechat'"
:src="bgPath" ref="PageModel"
:header-info="headerInfo"
/> />
<div class="insurance-register-bg">
<div <div class="bg-img back-img">
v-for="(url, index) in staticINFO.logoUrlList" <img :src="bgPath" />
:key="index" </div>
> <div class="wrap-reg">
<img <div class="choose-section">
class="pic" <div class="sz-appoint-form-tips">
:src="url" <img
/> src="https://files.yunqueyi.com/image/png/common/20230628155802981.png"
</div> />
</div>
<div <van-form
v-for="(url, index) in staticINFO2.descList" ref="dectionForm"
:key="index" validate-first
@click="handleBanner(index)" >
> <van-field
<img v-model="dectionForm.name"
class="pic" label="参保人姓名"
:src="url" clearable
/> required
</div> class="appoint-form-items"
:class="{ 'field-readonly': isReadonly('name') }"
<div class="footer-box"> :readonly="isReadonly('name')"
<div class="fixed-btn"> 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 <div
class="wx-btn" v-for="(i, ind) in staticINFO.logoUrlList"
v-if="picaWechat != 'wechat'" :key="ind"
class="bg-img mt20"
> >
<span>领取权益</span> <img :src="i" />
</div> </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> </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> </div>
</template> </template>
<script> <script>
import { getBanner } from '@/api/entitlement'; import { getBanner, getCardTypes, projectMaterial } from '@/api/entitlement';
import { uploadPointData } from '@/api/question'; import {
createOrderSzV2,
queryUserInfo,
uploadPointData,
} from '@/api/question';
import { isWeixin } from '@/utils/index'; import { isWeixin } from '@/utils/index';
import DatePicker from './date-picker.vue';
let that;
export default { export default {
components: { DatePicker },
data() { data() {
return { return {
projectEquityNo: '',
externalOrderNo: '',
rightsNo: '',
userInfo: '',
picaWechat: window._picaWechat, picaWechat: window._picaWechat,
headerInfo: { headerInfo: {
title: '健康服务权益领取', title: '健康服务权益领取',
...@@ -86,22 +246,70 @@ export default { ...@@ -86,22 +246,70 @@ export default {
style: 'backgroundColor:#ffffff;zIndex:100;', style: 'backgroundColor:#ffffff;zIndex:100;',
background: '', 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, envVersion: process.env.VUE_APP_MINI_PROGRAM_ENV,
openWebAppConfigPositive: { openWebAppConfigPositive: {
username: 'gh_e92f58174364', // 小程序唯一username 1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康 username: 'gh_e92f58174364', // 小程序唯一username 1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康
path: 'pagesInsurance/health-card/index', // 打开页面 path: 'pagesInsurance/all-entrance/index', // 打开页面
extraData: JSON.stringify({}), extraData: JSON.stringify({}),
}, },
bgPath: '', bgPath: '',
staticINFO: { staticINFO: {
logoUrlList: [], logoUrlList: [],
}, },
staticINFO2: { // 太保项目用户信息
descList: [], inherentUserInfo: null,
descBottomList: [], 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() { created() {
if (!isWeixin()) { if (!isWeixin()) {
this.$dialog this.$dialog
...@@ -118,19 +326,28 @@ export default { ...@@ -118,19 +326,28 @@ export default {
}, },
mounted() { mounted() {
document.title = this.headerInfo.title; document.title = this.headerInfo.title;
that = this;
const { const {
externalOrderNo = '', externalOrderNo,
projectEquityNo = '', projectEquityNo,
rightsNo = '', rightsNo,
channelCode = '', channelCode,
userInfo = '', userInfo,
} = this.$route.query; } = 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.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}`; this.initInsurancePath();
if (channelCode) uploadPointData({ channelCode });
this.$sendBuriedData( this.$sendBuriedData(
{ {
action: 'ACTION_WEB_ENTER', action: 'ACTION_WEB_ENTER',
...@@ -140,81 +357,444 @@ export default { ...@@ -140,81 +357,444 @@ export default {
externalOrderNo: externalOrderNo, externalOrderNo: externalOrderNo,
rightsNo: rightsNo, rightsNo: rightsNo,
userInfo: userInfo, userInfo: userInfo,
channelCode: channelCode, channelCode: channelCode || '',
}, },
}, },
'enter' 'enter'
); );
}, },
methods: { 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) { getBanner(pageType, yunOrderNo) {
this.$loading.show(); const self = this;
self.$loading.show();
getBanner(pageType, yunOrderNo).then((res) => { getBanner(pageType, yunOrderNo).then((res) => {
if (res.code === '000000') { if (res.code === '000000') {
this.bgPath = res.data.logoUrl; self.bgPath = res.data.logoUrl;
this.staticINFO = res.data; self.staticINFO = res.data;
this.$loading.hide(); 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(); this.$loading.show();
getBanner(pageType, yunOrderNo).then((res) => { createOrderSzV2(data)
if (res.code === '000000') { .then((res) => {
this.staticINFO2 = res.data;
this.$loading.hide(); 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) { handleErrorFn(e) {
console.log('handleErrorFn', e); console.log('handleErrorFn', e);
}, },
handleLaunchFn(e) { handleLaunchFn(e) {
console.log('handleLaunchFn', e); console.log('handleLaunchFn', e);
that.showProtocol = false;
}, },
handleBanner(index) { initInsurancePath() {
console.log('index', index); this.openWebAppConfig_without_yunorder = `pagesInsurance/all-entrance/index?insurance_without_yunorder=insurance_without_yunorder&projectEquityNo=${this.projectEquityNo}`;
window.location.href = this.staticINFO2.descBottomList[index];
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-wrapper { .sz-appoint {
min-height: 100vh; width: 100%;
overflow: auto;
box-sizing: border-box;
padding-bottom: 70px;
background-color: #bee2fd; background-color: #bee2fd;
} .insurance-register-bg {
.footer-box { width: 100%;
height: 50px; .bg-img {
padding-bottom: calc(constant(safe-area-inset-bottom) / 2); width: 100%;
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
box-sizing: content-box; img {
} width: 100%;
.fixed-btn { height: 100%;
position: fixed; }
left: 0; }
right: 0; .wrap-reg {
bottom: 0; width: 350px;
height: 50px; border-radius: 20px;
padding-bottom: calc(constant(safe-area-inset-bottom) / 2); margin: 0 auto;
padding-bottom: calc(env(safe-area-inset-bottom) / 2); margin-top: 280px;
box-shadow: inset 0px 1px 0px 0px #e9e9e9; position: relative;
background-color: #fff; }
box-sizing: content-box; }
z-index: 9999; .back-img {
.wx-btn { position: absolute;
display: block; top: 0;
width: 93.33333%; }
.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; height: 40px;
margin: 5px auto; background: #d9d9d9;
border-radius: 40px; border-radius: 20px;
border: none;
position: absolute;
font-size: 16px; font-size: 16px;
font-weight: 600; 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; 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; 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> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或