Skip to content

V
voucher-h5
Commit af62afb5 by 潘琦
Options

1、生育全程签约乌当和张家港页面独立开；2、券详情页券码显示在券详情中间；

parent 7dd6f9ad
Showing with 2433 additions and 7 deletions
src/router/index.js
......@@ -23,6 +23,12 @@ export default new Router({
meta: {keepAlive: false, title: '生育全程签约'}
},
{
path: '/signingWD',
name: '生育全程签约(乌当)',
component: () => import('@/views/signingWD/index'),
meta: {keepAlive: false, title: '生育全程签约'}
},
{
path: '/vouchers',
name: '我的健康券',
component: () => import('@/views/vouchers/index'),
......
src/views/signingWD/index.vue 0 → 100644
<template>
<div class="full-page" style="overflow:hidden;">
<div class="container sign-page">
<div class="head">
<div class="head-bg"></div>
<div class="head-block">
<div class="table">
<div class="tr">
<div class="td picture">
<div class="avatar" :style="{backgroundImage: 'url(' + orgInfo.picture + ')' }"></div>
</div>
<div class="td info">
<div class="title">{{orgInfo.orgname}}</div>
<div class="des">{{orgInfo.groupname}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-title">
<span class="label">准妈妈/妈妈基本信息</span>
<span class="link">默认为户主</span>
</div>
<div class="form">
<div class="table">
<div class="tr">
<div class="td label">姓名</div>
<div class="td text-right">
<input type="text" class="form-control" maxlength="15" v-model="BaseForm.name" @blur="BaseValidateName" placeholder="请输入姓名" :disabled="signStatus=='update'"/>
<span v-show="!BaseValidate.nameState" class="small-hint">（只能是中文或英文,长度1~15位）</span>
</div>
</div>
<div class="tr">
<div class="td label">手机号</div>
<div class="td text-right">
<input type="text" class="form-control" maxlength="11" placeholder="请输入有效手机号" @blur="BaseValidatePhone" v-model="BaseForm.phone"/>
<span v-show="!BaseValidate.phoneState" class="small-hint">请输入有效手机号</span>
</div>
</div>
<div class="tr">
<div class="td label">身份证号</div>
<div class="td text-right">
<input type="text" class="form-control" placeholder="请输入有效身份证" @blur="BaseValidateIdCard" v-model="BaseForm.idCard" :disabled="signStatus=='update'"/>
<span v-show="!BaseValidate.idCardState" class="small-hint">请输入有效身份证</span>
</div>
</div>
<div class="tr">
<div class="td label">末次月经时间</div>
<div class="td text-right">
<div class="td-table" @click="openPickerLastMensesTime">
<div class="td-table-cell text">
<span v-if="BaseForm.lastMensesTime === ''">请选择末次月经时间</span>
<span v-else class="light">{{BaseForm.lastMensesTime}}</span>
<!-- {{BaseForm.lastMensesTime !== '' ? BaseForm.lastMensesTime : '请选择末次月经时间'}} -->
</div>
<div class="td-table-cell icon">
<i class="glyphicon glyphicon-menu-right"></i>
</div>
</div>
<span v-show="!BaseValidate.lastMensesTimeState" class="small-hint">请选择末次月经时间</span>
</div>
</div>
<div class="tr">
<div class="td label">现住址</div>
<div class="td text-right">
<div class="td-table" @click="openPopupAddress">
<div class="td-table-cell text">
<p class="m-b-normal">
<span v-if="BaseForm.address === '' || BaseForm.address === ' '">请选择现在居住地址</span>
<span v-else class="light">{{BaseForm.address}}</span>
<!-- {{BaseForm.address==''? '请选择现在居住地址':BaseForm.address}} -->
</p>
<p class="m-b-normal" v-if="BaseForm.subAddress!=''" :class="BaseForm.subAddress!=''?'light':''">
{{BaseForm.subAddress}}
</p>
</div>
<div class="td-table-cell icon">
<i class="glyphicon glyphicon-menu-right"></i>
</div>
</div>
<span v-show="!BaseValidate.addressState" class="small-hint">请选择现在居住地址</span>
</div>
</div>
<div class="tr">
<div class="td label">详细地址</div>
<div class="td text-right">
<input type="text" v-model="BaseForm.street" class="form-control" placeholder="请输入小区/楼栋/门牌号(最多25字)" maxlength="25" @blur="BaseValidateStreet" />
<span v-if="!BaseValidate.streetState" class="small-hint">请输入详细地址</span>
</div>
</div>
</div>
</div>
<div class="form">
<div class="table">
<div class="tr">
<div class="td label">保健手册编码</div>
<div class="td text-right">
<div class="td-table">
<div class="td-table-cell text">
<input class="form-control" v-model="BaseForm.code" placeholder="请扫描保健手册条形码"/>
</div>
<div class="td-table-cell icon text-orange">
<i class="glyphicon glyphicon-barcode" @click="scanCode()"></i>
</div>
</div>
<span v-show="!BaseValidate.lastMensesTimeState" class="small-hint">请扫描或手动输入保健手册条形码</span>
</div>
</div>
</div>
</div>
<!-- <div class="form">
<div class="table">
<div class="tr">
<div class="td label">社区卫生机构</div>
<div class="td text-right">
<div class="td-table" @click="openPopupOrg">
<div class="td-table-cell text">
<p class="m-b-normal">{{BaseForm.orgName==''? '请选择所在社区卫生机构':BaseForm.orgName}}</p>
</div>
<div class="td-table-cell icon">
<i class="glyphicon glyphicon-menu-right"></i>
</div>
</div>
<span v-show="!BaseValidate.orgState" class="small-hint">请选择所在社区卫生机构</span>
</div>
</div>
</div>
</div> -->
<div class="p-title">
<span class="label">服务成员信息</span>
</div>
<div class="form" v-if="pageType===0">
<div class="table">
<div class="tr">
<div class="td label">成员类型</div>
<div class="td text-right">
<input class="form-control" disabled placeholder="孕产妇"/>
</div>
</div>
<div class="tr">
<div class="td label">姓名</div>
<div class="td text-right">
<input class="form-control" v-model="tab1Form.name" disabled/>
</div>
</div>
<div class="tr">
<div class="td label">身份证</div>
<div class="td text-right">
<input class="form-control" v-model="tab1Form.IdCard" disabled/>
</div>
</div>
<div class="tr">
<div class="td label">年龄</div>
<div class="td text-right">
<input class="form-control" v-model="tab1Form.age" disabled/>
</div>
</div>
<div class="tr">
<div class="td label">性别</div>
<div class="td text-right">
<input class="form-control" v-model="tab1Form.sex" disabled/>
</div>
</div>
</div>
</div>
<div class="form" v-if="pageType===1">
<div class="table" v-for="(item, index) in childrenArr" :key="index" :class="item.animate=='in'?'animate-in':item.animate=='out'?'animate-out':''">
<span class="table-delete" v-if="item.editor && index > 0" @click="delTable(index)">
<i class="glyphicon glyphicon-remove-circle"></i>
</span>
<div class="tr">
<div class="td label">属性</div>
<div class="td text-right">
<input class="form-control" disabled placeholder="儿童"/>
</div>
</div>
<div class="tr">
<div class="td label">姓名</div>
<div class="td text-right">
<input class="form-control" v-model="item.name" placeholder="请输入子女真实姓名" :disabled="!item.editor"/>
<span v-if="!childrensValidate[index].nameState" class="small-hint">（只能是中文或英文,长度1~15位）</span>
</div>
</div>
<div class="tr">
<div class="td label">性别</div>
<div class="td text-right">
<mt-radio
v-if="item.editor"
v-model="item.sex"
:options="['女孩', '男孩']">
</mt-radio>
<input class="form-control" v-model="item.sex" v-if="!item.editor" disabled placeholder="请选择子女性别"/>
</div>
</div>
<div class="tr">
<div class="td label">出生年月</div>
<div class="td text-right">
<div class="td-table" @click="openPickerBirth(index)" v-if="item.editor">
<div class="td-table-cell text">
<p class="m-b-normal">
<span v-if="item.age === ''">请选择子女出生日期</span>
<span v-else class="light">{{item.age}}</span>
</p>
</div>
<div class="td-table-cell icon">
<i class="glyphicon glyphicon-menu-right"></i>
</div>
</div>
<input class="form-control" v-model="item.age" v-if="!item.editor" placeholder="请选择子女出生日期" disabled/>
<span v-show="!childrensValidate[index].ageState" class="small-hint">请选择子女出生日期</span>
</div>
</div>
</div>
</div>
<div v-if="pageType==1&&addChildrenBtnVisible" class="adduser-item" @click="addChildren">
<span class="inner"><span class="icon"><i class="glyphicon glyphicon-plus-sign"></i></span> <span class="title">继续添加子女</span></span>
</div>
<div class="notice">
<span>
<mt-checklist
v-model="noticeCheck"
:options="noticeOptions">
</mt-checklist>
<span class="cell link" @click="noticePopupVisible=true">签约须知</span>
</span>
</div>
<div class="footer">
<button class="btn-default btn-block" @click="confirmSignature">确认签约</button>
</div>
</div>
<mt-popup
v-model="addressPopupVisible"
class="full-width addressPopup"
position="bottom">
<div class="address-step">
<ul class="step-list">
<li>
<div class="step-item" :class="addressForm.province!=='' && stepCurrent !=1? 'finish':stepCurrent==1?'process':''" @click="handleStep(1)">
<span class="icon">
<span class="ico">
<span class="glyphicon"><i class="glyphicon glyphicon-ok"></i></span>
<span class="number">1</span>
</span>
<span class="line"></span>
</span>
<span class="text" :class="addressForm.province===''?'text-red':''">
{{addressForm.province !== '' ? addressForm.province : '请选择省会'}}
</span>
</div>
</li>
<li>
<div class="step-item" :class="addressForm.city!=='' && stepCurrent !=2? 'finish':stepCurrent==2?'process':''" @click="handleStep(2)">
<span class="icon">
<span class="ico">
<span class="glyphicon"><i class="glyphicon glyphicon-ok"></i></span>
<span class="number">2</span>
</span>
<span class="line"></span>
</span>
<span class="text" :class="addressForm.city===''?'text-red':''">
{{addressForm.city !== '' ? addressForm.city : '请选择城市'}}
</span>
</div>
</li>
<li>
<div class="step-item" :class="addressForm.area!=='' && stepCurrent !=3? 'finish':stepCurrent==3?'process':''" @click="handleStep(3)">
<span class="icon">
<span class="ico">
<span class="glyphicon"><i class="glyphicon glyphicon-ok"></i></span>
<span class="number">3</span>
</span>
<span class="line"></span>
</span>
<span class="text" :class="addressForm.area===''?'text-red':''">
{{addressForm.area !== '' ? addressForm.area : '请选择区域'}}
</span>
</div>
</li>
<li>
<div class="step-item" :class="addressForm.street!=='' && stepCurrent !=4? 'finish':stepCurrent==4?'process':''" @click="handleStep(4)">
<span class="icon">
<span class="ico">
<span class="glyphicon"><i class="glyphicon glyphicon-ok"></i></span>
<span class="number">4</span>
</span>
<span class="line"></span>
</span>
<span class="text" :class="addressForm.street===''?'text-red':''">
{{addressForm.street !== '' ? addressForm.street : '请选择街道'}}
</span>
</div>
</li>
<li>
<div class="step-item" :class="addressForm.villages!=='' && stepCurrent !=5? 'finish':stepCurrent==5?'process':''" @click="handleStep(5)">
<span class="icon">
<span class="ico">
<span class="glyphicon"><i class="glyphicon glyphicon-ok"></i></span>
<span class="number">5</span>
</span>
<span class="line"></span>
</span>
<span class="text" :class="addressForm.villages===''?'text-red':''">
{{addressForm.villages !== '' ? addressForm.villages : '请选择居委会'}}
</span>
</div>
</li>
</ul>
</div>
<div class="address-list">
<div class="address-head">
<div class="search-control">
<input type="search" @keyup.enter="changesearch" v-model="addressSearchValue" placeholder="搜索"/>
</div>
</div>
<div class="switch province-list" v-if="stepCurrent===1">
<div class="title">选择省份</div>
<ul>
<template v-for="(item, index) in ProvinceData">
<li v-if="item.disabled === false" @click="setProvince(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
</template>
</ul>
</div>
<div class="switch city-list" v-if="stepCurrent===2">
<div class="title">选择城市</div>
<ul>
<template v-for="(item, index) in CityData">
<li v-if="item.disabled === false" @click="setCity(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
</template>
</ul>
</div>
<div class="switch area-list" v-if="stepCurrent===3">
<div class="title">选择区域</div>
<ul>
<template v-for="(item, index) in AreaData">
<li v-if="item.disabled === false" @click="setArea(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
</template>
</ul>
</div>
<div class="switch street-list" v-if="stepCurrent===4">
<div class="title">选择街道</div>
<ul>
<template v-for="(item, index) in StreetData">
<li v-if="item.disabled === false" @click="setStreet(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
</template>
</ul>
</div>
<div class="switch villages-list" v-if="stepCurrent===5">
<div class="title">选择居委会</div>
<ul>
<template v-for="(item, index) in VillagesData">
<li v-if="item.disabled === false" @click="setVillages(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
</template>
</ul>
</div>
</div>
<div class="footer-btn">
<button class="btn-block" @click="cancelPopupAddress">取消</button>
</div>
</mt-popup>
<mt-popup
v-model="orgPopupVisible"
class="full-width addressPopup"
position="bottom">
<div class="">
<div class="address-list">
<div class="switch area-list">
<div class="title">选择卫生服务机构</div>
<ul>
<li v-for="(item, index) in areaOrgs" @click="setOrgId(item)" :key="index">{{item.orgName}}</li>
</ul>
</div>
</div>
</div>
<div class="footer-btn">
<button class="btn-block" @click="cancelPopupOrg">取消</button>
</div>
</mt-popup>
<mt-popup
v-model="noticePopupVisible"
class="full-width noticePopup"
position="bottom">
<div class="body">
<img :src="noticePicture" class="full-width"/>
<div class="footer-btn">
<button class="btn-block" @click="noticePopupHandelClose">确定</button>
</div>
</div>
</mt-popup>
<div class="signPopup" :class="SignatureSheetVisible?'on':'off'">
<div class="body">
<div class="title">居民签约 <span class="close" @click="closeSignPopup"><i class="glyphicon glyphicon-remove-circle"></i></span></div>
<div class="canvas" ref="signCanvasBlock" @touchstart.prevent="signChange">
<vueSignature ref="signature" :sigOption="signOption" :h="signCanvasH" :waterMark="waterMarkOptions"></vueSignature>
</div>
</div>
<div class="footer-btn">
<button class="overwrite-btn" @click="handelOverwrite">重写</button>
<button class="confirm-btn" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelSubmit">确认</button>
</div>
</div>
<!-- <mt-popup
v-model="SignatureSheetVisible"
class="full-width signaturePopup"
position="bottom">
<div class="body">
<div class="title">居民签约 <span class="close" @click="SignatureSheetVisible=false"><i class="glyphicon glyphicon-remove-circle"></i></span></div>
<div class="canvas">
<vueSignature ref="signature" :sigOption="signOption" :w="'400px'" :h="'400px'"></vueSignature>
</div>
</div>
<div class="footer-btn">
<button class="overwrite-btn" @click="handelOverwrite">重写</button>
<button class="confirm-btn" @click="handelSubmit">确认</button>
</div>
</mt-popup> -->
<!-- 出生年月picker -->
<mt-datetime-picker
v-model="pickerBirthDefault"
ref="pickerBirth"
type="date"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="pickerBirthConfirm"
:endDate="pickerBirthEnd">
</mt-datetime-picker>
<!-- 末次月经时间picker -->
<mt-datetime-picker
v-model="pickerLastMensesTimeDefault"
ref="pickerLastMensesTime"
type="date"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="lastMensesTimePickerConfirm"
:startDate="pickerLastMensesTimeStart"
:endDate="pickerLastMensesTimeEnd">
</mt-datetime-picker>
<div class="light-box" :class="lightBoxVisible?'show':'hide'" @click="handelLightBoxClose">
<div class="table">
<div class="cell">
<img :src="lightBoxImage"/>
</div>
</div>
</div>
<div class="v-modal" v-show="modalVisible" style="z-index: 98"></div>
</div>
</template>
<script>
import store from '@/store'
import { getOrgInfo, getSignInfo, getAreaList, getVillages, getOrgsByAreaCode, createSign } from '@/api/signing/signing'
import { validatename, cardid, isvalidatemobile } from '@/util/validate'
import { SubtractDay, getBirthByIdNumber, getSexByIdCard, getAgeByBirth } from '@/util/index'
import _defaultPicture from '../../assets/images/org-default-picture.png'
import _noticePicture from '../../assets/images/notice-img.png'
import _signatureBg from '../../assets/images/signature-bg.png'
// import { wxpermission } from '@/wxpermission'
const wx = require('weixin-js-sdk')
export default {
name: 'Home',
data () {
return {
userId: store.getters.user_id,
pageType: this.$route.query.pageType ? parseInt(this.$route.query.pageType) : null, // 0=孕产妇 1=儿童
orgId: this.$route.query.orgId ? parseInt(this.$route.query.orgId) : null,
groupId: this.$route.query.groupId ? parseInt(this.$route.query.groupId) : null,
accountId: this.$route.query.accountId ? this.$route.query.accountId : store.getters.accountId,
slaveId: this.$route.query.slaveId ? this.$route.query.slaveId : null,
from: this.$route.query.voucherFrom ? this.$route.query.voucherFrom : '',
orgInfo: {
picture: _defaultPicture,
orgname: '',
groupname: ''
},
signStatus: 'create',
signState: '', // 0=待审核 1=审核通过 2=审核不通过 3=审核已取消
alreadySignNum: 0, // 已签约服务人员数
childrenArr: [
{
name: '',
sex: '男孩',
age: '',
birth: '',
editor: true,
animate: '',
state: '',
signState: ''
}
], // 签约（儿童）服务成员
childrensValidate: [
{
nameState: true,
sexState: true,
birthState: true,
ageState: true
}
], // 签约（儿童）服务成员，姓名、性别、年龄校验合法性
addChildrenBtnVisible: true,
BaseForm: {
name: '',
idCard: '',
phone: '',
lastMensesTime: '', // 末次月经时间
address: '',
subAddress: '',
street: '',
code: '',
orgName: '',
chooseImages: [], // 身份证图片
chooseImagesIds: [], // 身份证图片微信本地图片id
chooseImages2: [], // 怀孕资料图片
chooseImages2Ids: [] // 怀孕资料图片微信本地图片id
},
BaseValidate: { // 表单各个列是否合法状态
nameState: true,
idCardState: true,
phoneState: true,
lastMensesTimeState: true,
addressState: true,
streetState: true,
orgState: true,
chooseImg1State: true
},
btnDisabled: false,
pickerLastMensesTimeDefault: new Date(), // 末次月经时间默认选中日期为当天
pickerLastMensesTimeStart: SubtractDay(290), // 末次月经时间起始日期为当天日期前290天
pickerLastMensesTimeEnd: new Date(), // 末次月经时间控件结束日期小于当天
pickerBirthDefault: new Date(), // 出生年月默认选中日期为当天
pickerBirthEnd: new Date(), // 出生年月控件结束日期小于当天
pickerOpenIndex: 0, // 子女出生年月日期控件下标
addressPopupVisible: false, // “现住址”popup显示状态
orgPopupVisible: false, // “所在卫生服务机构”popup显示状态
addressForm: {
province: '',
city: '',
area: '',
street: '',
villages: '',
ProvinceCode: '',
CityCode: '',
AreaCode: '',
StreetCode: '',
VillagesCode: ''
},
stepCurrent: 1, // 地址省市区街道步骤下标
ProvinceData: [], // 省会列表数据
CityData: [], // 城市列表数据
AreaData: [], // 区域列表数据
StreetData: [], // 街道列表数据
VillagesData: [], // 居委会列表数据
tab1Form: { // 签约（孕产妇）服务成员信息
name: '',
IdCard: '',
age: '',
type: '',
sex: '',
state: ''
},
noticePopupVisible: false,
noticePicture: _noticePicture,
noticeCheck: [],
noticeOptions: [
{ label: '我已阅读并确认', value: '1' }
],
areaOrgs: [], // 区域下所有机构
SignatureSheetVisible: false,
signatureImage: '',
signCanvasW: '400px',
signCanvasH: '220px',
signOption: {
penColor: 'rgb(0, 0, 0)',
backgroundColor: '#efefef'
},
signBGdataUrl: _signatureBg,
signWaterMarkState: true,
waterMarkOptions: {
text: '请在此处签名，字迹工整！', // watermark text, > default ''
font: '16px Arial', // mark font, > default '20px sans-serif'
style: 'fill', // fillText and strokeText, 'all'/'stroke'/'fill', > default 'fill
fillStyle: '#333', // fillcolor, > default '#333'
x: 100, // fill positionX, > default 20
y: 100 // fill positionY, > default 20
},
lightBoxVisible: false,
lightBoxImage: '',
ChoosePlusVisible: true,
Choose2PlusVisible: true,
modalVisible: false, // 底层透明遮挡显示状态
addressSearchValue: ''
}
},
created () {
console.log('created')
// wxpermission(0, () => {})
// this.getOrgInfoFn()
// 根据来源，省市区联动相对应显示默认值
if (this.from !== '') {
switch (this.from) {
case '520112':
this.addressForm.province = '贵州省'
this.addressForm.city = '贵阳市'
this.addressForm.area = '乌当区'
this.addressForm.ProvinceCode = '520000'
this.addressForm.CityCode = '520100'
this.addressForm.AreaCode = '520112'
this.stepCurrent = 4
break
default:
this.stepCurrent = 1
break
}
}
this.getOrgInfoFn()
// this.getUserSignInfoFn() // 获取用户签约信息回显
},
mounted: function () {
console.log('mounted')
},
computed: {
},
components: {
},
methods: {
getOrgInfoFn () { // 获取机构及团队信息
if (this.orgId === null || this.groupId === null) {
this.$toast({
message: '机构或团队标识为空！',
position: 'center',
duration: 3000
})
return
}
let params = {
orgId: this.orgId,
groupId: this.groupId
}
this.$Indicator.open()
getOrgInfo(params).then(res => {
console.log(res)
let records = res.data.records
if (records) {
this.orgInfo.picture = records.groupImage
this.orgInfo.orgname = records.orgName
this.orgInfo.groupname = records.groupName
this.getUserSignInfoFn() // 获取用户签约信息回显
} else {
this.$toast({
message: res.message,
position: 'center',
duration: 3000
})
this.$Indicator.close()
}
}).catch(error => {
this.$toast({
message: error.message,
position: 'center',
duration: 3000
})
this.$Indicator.close()
})
},
getUserSignInfoFn () { // 获取用户签约信息
if (this.accountId === null || this.accountId === '') {
this.$toast({
message: '用户account id不能为空！',
position: 'center',
duration: 3000
})
return
}
let params = {
type: this.pageType,
accountId: this.accountId
}
if (this.slaveId) {
params.userId = this.slaveId
}
getSignInfo(params).then(res => {
this.$Indicator.close()
// if (res.code && res.code !== 0) {
// this.$toast({
// message: res.message,
// position: 'center',
// duration: 3000
// })
// return false
// }
let data = res.data.records
console.log(data)
if (data.signId && data.signId !== '') {
this.signStatus = 'update'
} else {
this.signStatus = 'create'
return false
}
this.accountId = data.accountId
this.fileUuid = data.fileUuid
this.signId = data.signId
this.userId = data.userId
this.signState = data.state
this.BaseForm.name = data.name
this.BaseForm.idCard = data.idCard
this.BaseForm.phone = data.phoneNumber
if (data.shenName !== '' && data.shiName !== '' && data.xiaName !== '') {
this.BaseForm.address = data.shenName + ' ' + data.shiName + ' ' + data.xiaName
}
if (data.townName !== '' && data.villageName !== '') {
this.BaseForm.subAddress = data.townName + ' ' + data.villageName
}
this.BaseForm.lastMensesTime = data.pregnantDate && data.pregnantDate !== '' ? data.pregnantDate.split(' ')[0] : ''
this.BaseForm.code = data.healthCode
this.addressForm.province = data.shenName
this.addressForm.city = data.shiName
this.addressForm.area = data.xiaName
this.addressForm.street = data.townName
this.addressForm.villages = data.villageName
this.addressForm.ProvinceCode = data.shenBm
this.addressForm.CityCode = data.shiBm
this.addressForm.AreaCode = data.xiaBm
this.addressForm.StreetCode = data.xngBm
this.addressForm.VillagesCode = data.villageBm
if (this.addressForm.ProvinceCode !== '') {
this.stepCurrent = 1
}
if (this.addressForm.CityCode !== '') {
this.stepCurrent = 2
}
if (this.addressForm.AreaCode !== '') {
this.stepCurrent = 3
}
if (this.addressForm.StreetCode !== '') {
this.stepCurrent = 4
}
if (this.addressForm.VillagesCode !== '') {
this.stepCurrent = 5
}
this.BaseForm.street = data.userAdress
if (this.pageType === 1) { // 签约（儿童）服务成员回显
if (data.bs.length > 0) {
this.alreadySignNum = data.bs.length
this.childrenArr = []
this.childrensValidate = []
for (let i = 0; i < data.bs.length; i++) {
this.childrenArr.push({
name: data.bs[i].name,
sex: data.bs[i].sex === '1' ? '男孩' : '女孩',
birth: data.bs[i].birth.split(' ').length > 0 ? data.bs[i].birth.split(' ')[0] : '',
age: data.bs[i].birth !== null ? getAgeByBirth(data.bs[i].birth) : '1',
editor: false,
state: data.bs[i].state,
signState: data.bs[i].signState
})
this.childrensValidate.push({
nameState: true,
sexState: true,
ageState: true
})
}
console.log('childrenArr:' + this.childrenArr.length)
}
if (data.bs.length >= 3) { // 儿童签约服务成员最多添加三条
this.addChildrenBtnVisible = false
}
} else if (this.pageType === 0) { // 孕产妇
if (this.signStatus === 'update') { // 将基本信息赋值至服务成员
this.BaseFormIntoTab1()
}
if (data.bs.length > 0) {
this.tab1Form.state = data.bs[0].state
}
}
}).catch((error) => {
this.$Indicator.close()
this.$toast({
message: error.message,
position: 'center',
duration: 3000
})
})
},
BaseValidateHandle () { // 表单验证
this.BaseValidateName()
this.BaseValidateIdCard()
this.BaseValidateMensesLastDate()
this.BaseValidatePhone()
this.BaseValidateAddress()
this.BaseValidateStreet()
// this.BaseValidateOrg()
this.BaseValidateChooseImg()
},
BaseValidateName () { // 姓名验证
if (validatename(this.BaseForm.name)) {
this.BaseValidate.nameState = true
} else {
this.BaseValidate.nameState = false
}
if (this.pageType === 0) {
this.BaseFormIntoTab1()
}
this.saveSignInfoToCookie() // 储存用户签约录入信息
},
BaseValidateIdCard () { // 身份证验证
if (cardid(this.BaseForm.idCard)[0]) {
this.BaseValidate.idCardState = false
} else {
this.BaseValidate.idCardState = true
}
if (this.pageType === 0) {
this.BaseFormIntoTab1()
}
this.saveSignInfoToCookie() // 储存用户签约录入信息
},
// BaseValidateIdCardKid () { // 子女身份证验证
// if (cardid(this.userData.idCardKid)[0]) {
// this.BaseValidate.idCardKidState = false
// } else {
// this.BaseValidate.idCardKidState = true
// }
// },
BaseValidateMensesLastDate () { // 末次月经时间验证
if (this.BaseForm.lastMensesTime === '') {
this.BaseValidate.lastMensesTimeState = false
} else {
this.BaseValidate.lastMensesTimeState = true
}
},
BaseValidatePhone () { // 手机号验证
console.log('1')
if (this.BaseForm.phone === '') {
this.BaseValidate.phoneState = false
} else if (isvalidatemobile(this.BaseForm.phone)[0]) {
this.BaseValidate.phoneState = false
} else {
this.BaseValidate.phoneState = true
}
if (this.pageType === 0) {
this.BaseFormIntoTab1()
}
this.saveSignInfoToCookie() // 储存用户签约录入信息
},
BaseValidateAddress () { // 现住址验证
if (this.BaseForm.address === '') {
this.BaseValidate.addressState = false
} else {
this.BaseValidate.addressState = true
}
},
BaseValidateStreet () { // 详细地址
if (this.BaseForm.street === '' && this.BaseForm.street.length > 25) {
this.BaseValidate.streetState = false
} else {
this.BaseValidate.streetState = true
}
if (this.pageType === 0) {
this.BaseFormIntoTab1()
}
this.saveSignInfoToCookie() // 储存用户签约录入信息
},
BaseValidateOrg () { // 所在社区服务机构验证
if (!this.BaseForm.orgId || this.BaseForm.orgId === '') {
this.BaseValidate.orgState = false
} else {
this.BaseValidate.orgState = true
}
},
BaseValidateBirthKid () { // 出生日期验证
if (this.BaseForm.birthKid === '') {
this.BaseValidate.birthKidState = false
} else {
this.BaseValidate.birthKidState = true
}
},
BaseValidateChooseImg () { // 上传身份证图片验证（最少两张）
if (this.BaseForm.chooseImages.length < 2) {
this.BaseValidate.chooseImg1State = false
} else {
this.BaseValidate.chooseImg1State = true
}
},
tab2Validate (index) {
this.tab2ValidateName(index)
this.tab2ValidateAge(index)
},
tab2ValidateName (index) {
if (validatename(this.childrenArr[index].name)) {
this.childrensValidate[index].nameState = true
} else {
this.childrensValidate[index].nameState = false
}
},
tab2ValidateAge (index) {
if (this.childrenArr[index].birth === '') {
this.childrensValidate[index].ageState = false
} else {
this.childrensValidate[index].ageState = true
}
},
openPickerLastMensesTime () { // 打开末次月经时间日期控件
this.$refs.pickerLastMensesTime.open()
},
lastMensesTimePickerConfirm (date) {
const selectedDate = new Date(date)
let month = selectedDate.getMonth() + 1
if (selectedDate.getMonth() + 1 < 10) {
month = '0' + month
}
let day = selectedDate.getDate()
if (day < 10) {
day = '0' + day
}
this.BaseForm.lastMensesTime = selectedDate.getFullYear() + '-' + month + '-' + day
this.saveSignInfoToCookie() // 储存用户签约录入信息
},
openPickerBirth (index) { // 打开出生日期控件
this.pickerOpenIndex = index
this.$refs.pickerBirth.open()
},
pickerBirthConfirm (date) {
this.BaseValidate.birthKidState = true
const selectedDate = new Date(date)
let month = selectedDate.getMonth() + 1
if (month < 10) {
month = '0' + month
}
let day = selectedDate.getDate()
if (day < 10) {
month = '0' + day
}
let birth = selectedDate.getFullYear() + '-' + month + '-' + day
this.childrenArr[this.pickerOpenIndex].birth = birth
this.childrenArr[this.pickerOpenIndex].age = getAgeByBirth(birth)
},
openPopupAddress () { // 现住址picker
this.addressPopupVisible = true
console.log(this.stepCurrent)
if (this.stepCurrent === 1) {
this.getProvince()
} else if (this.stepCurrent === 2) {
this.getCity(this.addressForm.ProvinceCode)
} else if (this.stepCurrent === 3) {
this.getArea(this.addressForm.CityCode)
} else if (this.stepCurrent === 4) {
this.getStreet(this.addressForm.AreaCode)
} else if (this.stepCurrent === 5) {
this.getVillages(this.addressForm.StreetCode)
}
},
cancelPopupAddress () {
this.addressPopupVisible = false
if (this.addressForm.province !== '') {
this.BaseForm.address = this.addressForm.province
}
if (this.addressForm.city !== '') {
this.BaseForm.address = this.BaseForm.address + ' ' + this.addressForm.city
}
if (this.addressForm.area !== '') {
this.BaseForm.address = this.BaseForm.address + ' ' + this.addressForm.area
}
if (this.addressForm.street !== '') {
this.BaseForm.subAddress = this.addressForm.street
}
if (this.addressForm.villages !== '') {
this.BaseForm.subAddress = this.BaseForm.subAddress + ' ' + this.addressForm.villages
}
},
openPopupOrg () {
if (this.addressForm.AreaCode !== '') {
this.orgPopupVisible = true
let params = {
countryId: this.addressForm.AreaCode
}
getOrgsByAreaCode(params).then(res => {
this.areaOrgs = res.date
})
} else {
this.$toast({
message: '请先选择现住址',
position: 'center',
duration: 3000
})
}
},
cancelPopupOrg () {
this.orgPopupVisible = false
},
noticePopupHandelClose () {
this.noticePopupVisible = false
this.noticeCheck.push(1)
},
BaseFormIntoTab1 () { // 将基本信息赋值至孕产妇服务成员
if (this.BaseForm.name !== '' && this.BaseValidate.nameState && this.BaseForm.idCard !== '' && this.BaseValidate.idCardState) {
this.tab1Form.name = this.BaseForm.name
this.tab1Form.IdCard = this.BaseForm.idCard
this.tab1Form.age = getAgeByBirth(getBirthByIdNumber(this.BaseForm.idCard))
this.tab1Form.sex = getSexByIdCard(this.BaseForm.idCard) === '1' ? '男' : '女'
}
},
confirmSignature () {
this.BaseValidateHandle()
if (this.pageType === 1) { // 子女
let downState = true
for (let i = 0; i < this.childrenArr.length; i++) {
this.tab2Validate(i)
if (!this.childrensValidate[i].nameState || !this.childrensValidate[i].ageState) {
downState = false
}
}
if (!downState) {
return false
}
} else if (this.pageType === 0) { // 配偶
if (!this.BaseValidate.nameState || !this.BaseValidate.idCardState || !this.BaseValidate.lastMensesTimeState) {
return false
}
}
if (parseInt(this.noticeCheck[0]) !== 1) {
this.$toast({
message: '请预览签约须知后勾选',
position: 'center',
duration: 3000
})
return false
}
this.SignatureSheetVisible = true
this.modalVisible = true
this.signCanvasW = this.$refs.signCanvasBlock.offsetWidth
},
closeSignPopup () {
this.SignatureSheetVisible = false
this.modalVisible = false
},
handelSubmit () { // 签名无误提交
this.signatureImage = this.$refs.signature.save()
if (this.$refs.signature.isEmpty()) {
this.$toast({
message: '未获到签名信息，请先签名！',
position: 'center',
duration: 3000
})
return false
}
this.handelSave()
},
handelOverwrite () { // 签名重写
this.$refs.signature.clear()
},
handelSave () {
console.log('submit')
let childrenArr = []
if (this.pageType === 0) {
childrenArr = [
{
birth: this.tab1Form.IdCard.substring(6, 10) + '-' + this.tab1Form.IdCard.substring(10, 12) + '-' + this.tab1Form.IdCard.substring(12, 14),
idCard: this.tab1Form.IdCard,
name: this.tab1Form.name,
relation: '30', // 20:子女;30:本人(为孕妇)
sex: this.tab1Form.sex === '男' ? '1' : this.tab1Form.sex === '女' ? '2' : '3',
state: this.tab1Form.state
}
]
} else if (this.pageType === 1) {
for (let i = this.alreadySignNum; i < this.childrenArr.length; i++) { // 儿童签约只获取新增服务人员信息
childrenArr.push({
birth: this.childrenArr[i].birth,
idCard: '',
name: this.childrenArr[i].name,
relation: '20', // 20:子女;30:本人(为孕妇)
sex: this.childrenArr[i].sex === '男孩' ? '1' : this.childrenArr[i].sex === '女孩' ? '2' : '3'
})
}
}
let params = {
bs: childrenArr,
'accountId': this.accountId,
'group_id': this.groupId,
'orgId': this.orgId,
'idCard': this.BaseForm.idCard,
'pregnantDate': this.BaseForm.lastMensesTime,
'imagedate': this.signatureImage,
'name': this.BaseForm.name,
'phoneNumber': this.BaseForm.phone,
'type': this.pageType === 0 ? 0 : this.pageType,
'healthCode': this.BaseForm.code,
'userAdress': this.BaseForm.street,
'shenBm': this.addressForm.ProvinceCode,
'shiBm': this.addressForm.CityCode,
'xiaBm': this.addressForm.AreaCode,
'xngBm': this.addressForm.StreetCode,
'villageBm': this.addressForm.VillagesCode,
'voucherUserId': this.userId,
'dq': 'wd'
}
params.accountId = this.accountId
if (this.signStatus === 'update') { // 如signId不为0或者为空则是修改签约信息
params.fileUuid = this.fileUuid
params.signId = this.signId
params.userId = this.userId
}
this.btnDisabled = true
this.$Indicator.open()
// console.log('sign params:' + JSON.stringify(params))
createSign(params).then(res => {
this.btnDisabled = false
this.$Indicator.close()
if (res.code === 200 && res.value) {
this.$toast({
message: '签约成功！',
position: 'center',
duration: 3000
})
this.$router.push({
path: '/home'
})
} else {
this.$toast({
message: '保存失败',
position: 'center',
duration: 3000
})
}
}).catch((error) => {
this.btnDisabled = false
this.$Indicator.close()
this.$toast({
message: error.message,
position: 'center',
duration: 3000
})
})
},
handleStep (index) {
console.log('handleStep' + index)
if (index === 1 && this.addressForm.province !== '') {
this.stepCurrent = index
this.getProvince()
} else if (index === 2 && this.addressForm.city !== '') {
this.stepCurrent = index
this.getCity(this.addressForm.ProvinceCode)
} else if (index === 3 && this.addressForm.region !== '') {
this.stepCurrent = index
this.getArea(this.addressForm.CityCode)
} else if (index === 4 && this.addressForm.street !== '') {
this.stepCurrent = index
this.getStreet(this.addressForm.AreaCode)
} else if (index === 5 && this.addressForm.villages !== '') {
this.stepCurrent = index
this.getVillages(this.addressForm.StreetCode)
}
},
getProvince () { // 获取省会信息
let params = {
parentCode: 0,
level: 0
}
this.getAreaListFn(params)
},
setProvince (code, val) {
this.addressSearchValue = ''
this.getCity(code)
this.addressForm.province = val
this.addressForm.ProvinceCode = code
this.addressForm.city = ''
this.addressForm.area = ''
this.addressForm.street = ''
this.addressForm.villages = ''
this.addressForm.CityCode = ''
this.addressForm.AreaCode = ''
this.addressForm.StreetCode = ''
this.addressForm.VillagesCode = ''
this.stepCurrent = 2
this.saveSignInfoToCookie() // 储存用户签约录入信息
},
getCity (parentCode) { // 根据省会code获取城市信息
let params = {
parentCode: parentCode,
level: 1
}
this.getAreaListFn(params)
},
setCity (code, val) {
this.addressSearchValue = ''
this.getArea(code)
this.addressForm.city = val
this.addressForm.CityCode = code
this.addressForm.area = ''
this.addressForm.AreaCode = ''
this.addressForm.street = ''
this.addressForm.StreetCode = ''
this.addressForm.villages = ''
this.addressForm.VillagesCode = ''
this.stepCurrent = 3
this.saveSignInfoToCookie() // 储存用户签约录入信息
},
getArea (parentCode) { // 根据城市code获取区域信息
let params = {
parentCode: parentCode,
level: 2
}
this.getAreaListFn(params)
},
setArea (code, val) {
this.addressSearchValue = ''
this.getStreet(code)
this.addressForm.area = val
this.addressForm.AreaCode = code
this.addressForm.street = ''
this.addressForm.StreetCode = ''
this.addressForm.villages = ''
this.addressForm.VillagesCode = ''
this.stepCurrent = 4
this.saveSignInfoToCookie() // 储存用户签约录入信息
},
getStreet (parentCode) { // 根据区域code获取街道信息
let params = {
parentCode: parentCode,
level: 3
}
this.getAreaListFn(params)
},
setStreet (code, val) {
this.addressSearchValue = ''
this.getVillages(code)
this.addressForm.street = val
this.addressForm.StreetCode = code
this.addressForm.villages = ''
this.addressForm.VillagesCode = ''
this.stepCurrent = 5
this.saveSignInfoToCookie() // 储存用户签约录入信息
},
getVillages (parentCode) { // 根据街道code获取居委会信息
let params = {
parentCode: parentCode,
level: 4
}
this.getVillagesFn(params)
},
setVillages (code, val) {
this.addressSearchValue = ''
this.addressForm.villages = val
this.addressForm.VillagesCode = code
// this.stepCurrent = 5
this.saveSignInfoToCookie() // 储存用户签约录入信息
this.cancelPopupAddress()
},
setOrgId (item) {
this.BaseForm.orgId = item.orgId
this.BaseForm.orgName = item.orgName
this.cancelPopupOrg()
},
getAreaListFn (params) { // 获取全国省市区街
getAreaList(params).then(res => {
let records = res.data.records
if (params.level === 0) {
this.ProvinceData = []
records.forEach(item => {
item.disabled = false
this.ProvinceData.push(item)
})
} else if (params.level === 1) {
this.CityData = []
records.forEach(item => {
item.disabled = false
this.CityData.push(item)
})
} else if (params.level === 2) {
this.AreaData = []
records.forEach(item => {
item.disabled = false
this.AreaData.push(item)
})
} else if (params.level === 3) {
this.StreetData = []
records.forEach(item => {
item.disabled = false
this.StreetData.push(item)
})
}
})
},
getVillagesFn (params) { // 获取街道下居委会信息
getVillages(params).then(res => {
let records = res.data.records
this.VillagesData = []
records.forEach(item => {
item.disabled = false
this.VillagesData.push(item)
})
})
},
handelChooseImage (type) {
let that = this
if ((that.BaseForm.chooseImages.length < 2 && type === 1) || (that.BaseForm.chooseImages2.length < 4 && type === 2)) {
let chooseImgCount = 0
if (type === 1) { // 身份证明必传2张
chooseImgCount = 2 - that.BaseForm.chooseImages.length
} else if (type === 2) { // 产检证明最多传4张
chooseImgCount = 4 - that.BaseForm.chooseImages2.length
}
wx.chooseImage({
count: chooseImgCount, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
let localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
console.log(localIds, type)
if (type === 1) {
that.BaseForm.chooseImagesIds.push(localIds)
} else if (type === 2) {
that.BaseForm.chooseImages2Ids.push(localIds)
}
that.saveSignInfoToCookie() // 储存用户签约录入信息
that.wxGetLocalImgData(localIds, type)
}
})
}
},
wxGetLocalImgData (localIds, type) {
let that = this
wx.getLocalImgData({
localId: localIds.shift(), // 需要上传的图片的本地ID，由chooseImage接口获得
success: function (res) {
let localData = res.localData
let imageBase64 = ''
// 自处目的是为了解决android图片前没有“data:image/jpeg;base64,”图片无法显示问题
if (localData.indexOf('data:image') === 0) {
imageBase64 = localData
} else {
imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '')
}
if (type === 1) {
that.BaseForm.chooseImages.push(imageBase64)
} else if (type === 2) {
that.BaseForm.chooseImages2.push(imageBase64)
}
if (localIds.length > 0) {
that.wxGetLocalImgData(localIds, type)
}
that.uploadImgBtnHandel()
}
})
},
// async iosPreview (localIds) {
// for (let i = 0; i < localIds.length; i++) {
// await this.readImage(localIds[i])
// }
// },
// readImage (item) {
// let _this = this
// return new Promise((resolve, reject) => {
// wx.getLocalImgData({
// localId: item,
// success: function (res) {
// let localData = res.localData
// localData = localData.replace('jgp', 'jpeg')
// _this.BaseForm.chooseImages.push(localData)
// resolve('done!')
// },
// fail: function () {
// }
// })
// })
// },
uploadImgBtnHandel () {
let that = this
console.log('===1' + that.BaseForm.chooseImages.length)
if (that.BaseForm.chooseImages.length >= 2) {
that.ChoosePlusVisible = false
} else {
that.ChoosePlusVisible = true
}
console.log('===2' + that.BaseForm.chooseImages2.length)
if (that.BaseForm.chooseImages2.length >= 4) {
that.Choose2PlusVisible = false
} else {
that.Choose2PlusVisible = true
}
},
removeChooseImgsByIndex (type, index) {
if (type === '1') { // 身份证照片移除
this.BaseForm.chooseImages.splice(index, 1)
this.BaseForm.chooseImagesIds.splice(index, 1)
} else if (type === '2') { // 产检资料照片移除
this.BaseForm.chooseImages2.splice(index, 1)
this.BaseForm.chooseImages2Ids.splice(index, 1)
}
this.saveSignInfoToCookie()
this.uploadImgBtnHandel() // 上传图片按钮根据数量限制显示/隐藏
},
handelLightbox (image) { // 图片放大弹层预览
this.lightBoxImage = image
this.lightBoxVisible = true
},
handelLightBoxClose () {
this.lightBoxImage = ''
this.lightBoxVisible = false
},
saveSignInfoToCookie () { // 将签约信息存入cookie
// if (this.signId === '' || !this.signId) {
// let signInfoJSON = {
// BaseForm: {
// name: this.BaseForm.name,
// idCard: this.BaseForm.idCard,
// phone: this.BaseForm.phone,
// lastMensesTime: this.BaseForm.lastMensesTime, // 末次月经时间
// address: this.BaseForm.address,
// subAddress: this.BaseForm.subAddress,
// street: this.BaseForm.street,
// chooseImagesIds: this.BaseForm.chooseImagesIds, // 身份证图片微信本地图片id
// chooseImages2Ids: this.BaseForm.chooseImages2Ids // 怀孕资料图片微信本地图片id
// },
// addressForm: this.addressForm
// }
// this.$cookies.set('signInfo', JSON.stringify(signInfoJSON), 60 * 60 * 24 * 1)
// // store.dispatch('setSignInfo', JSON.stringify(signInfoJSON))
// }
},
getSignInfoCookies () { // 获取用户签约信息cookie
// let signInfo = this.$cookies.get('signInfo')
// if (signInfo !== '' && signInfo) {
// this.BaseForm.name = signInfo.BaseForm.name
// this.BaseForm.idCard = signInfo.BaseForm.idCard
// this.BaseForm.phone = signInfo.BaseForm.phone
// this.BaseForm.lastMensesTime = signInfo.BaseForm.lastMensesTime // 末次月经时间
// // this.BaseForm.address = signInfo.addressForm.province + ' ' + signInfo.addressForm.city + ' ' + signInfo.addressForm.area
// // this.BaseForm.subAddress = signInfo.addressForm.street + ' ' + signInfo.addressForm.villages
// console.log(this.addressForm.province)
// if (signInfo.addressForm.province !== '') {
// this.BaseForm.address = signInfo.addressForm.province
// }
// if (signInfo.addressForm.city !== '') {
// this.BaseForm.address = this.BaseForm.address + ' ' + signInfo.addressForm.city
// }
// if (signInfo.addressForm.area !== '') {
// this.BaseForm.address = this.BaseForm.address + ' ' + signInfo.addressForm.area
// }
// if (signInfo.addressForm.street !== '') {
// this.BaseForm.subAddress = signInfo.addressForm.street
// }
// if (signInfo.addressForm.villages !== '') {
// this.BaseForm.subAddress = this.BaseForm.subAddress + ' ' + signInfo.addressForm.villages
// }
// this.BaseForm.street = signInfo.BaseForm.street
// this.BaseForm.chooseImagesIds = signInfo.BaseForm.chooseImagesIds // 身份证图片微信本地图片id
// this.BaseForm.chooseImages2Ids = signInfo.BaseForm.chooseImages2Ids // 怀孕资料图片微信本地图片id
// if (this.BaseForm.chooseImagesIds.length > 0) {
// this.getWXLocalImgDataById(0, 1)
// }
// // this.wxGetLocalImgData(signInfo.BaseForm.chooseImages2Ids, 2)
// if (!this.from || this.from === '') {
// this.addressForm = signInfo.addressForm
// }
// // this.$toast({
// // message: signInfo.BaseForm.chooseImagesIds,
// // position: 'center',
// // duration: 3000
// // })
// }
},
getWXLocalImgDataById (index, type) {
let that = this
let localId = ''
if (type === 1) {
localId = that.BaseForm.chooseImagesIds[index]
} else if (type === 2) {
localId = that.BaseForm.chooseImages2Ids[index]
}
wx.getLocalImgData({
localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
success: function (res) {
let localData = res.localData
let imageBase64 = ''
// 自处目的是为了解决android图片前没有“data:image/jpeg;base64,”图片无法显示问题
if (localData.indexOf('data:image') === 0) {
imageBase64 = localData
} else {
imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '')
}
if (type === 1) {
that.BaseForm.chooseImages.push(imageBase64)
if (index + 1 < that.BaseForm.chooseImagesIds.length) {
that.getWXLocalImgDataById(index + 1, 1)
} else {
index = 0
if (that.BaseForm.chooseImages2Ids.length > 0) {
that.getWXLocalImgDataById(index, 2)
}
}
} else if (type === 2) {
that.BaseForm.chooseImages2.push(imageBase64)
if (index + 1 < that.BaseForm.chooseImages2Ids.length) {
that.getWXLocalImgDataById(index + 1, 2)
}
}
that.uploadImgBtnHandel()
}
})
},
signChange (e) { // 第一次签名清除水印
if (this.signWaterMarkState) {
console.log('signChange')
this.handelOverwrite()
this.signWaterMarkState = false
}
},
changesearch () {
let searchVal = this.addressSearchValue
switch (this.stepCurrent) {
case 1:
if (searchVal !== '') {
this.ProvinceData.forEach(item => {
if (item.adminAreaName.indexOf(searchVal) >= 0) {
item['disabled'] = false
} else {
item['disabled'] = true
}
})
} else {
this.ProvinceData.forEach(item => {
item['disabled'] = false
})
}
break
case 2:
if (searchVal !== '') {
this.CityData.forEach(item => {
if (item.adminAreaName.indexOf(searchVal) >= 0) {
item['disabled'] = false
} else {
item['disabled'] = true
}
})
} else {
this.CityData.forEach(item => {
item['disabled'] = false
})
}
break
case 3:
if (searchVal !== '') {
this.AreaData.forEach(item => {
if (item.adminAreaName.indexOf(searchVal) >= 0) {
item['disabled'] = false
} else {
item['disabled'] = true
}
})
} else {
this.AreaData.forEach(item => {
item['disabled'] = false
})
}
break
case 4:
if (searchVal !== '') {
// let newStreetData = []
this.StreetData.forEach(item => {
if (item.adminAreaName.indexOf(searchVal) >= 0) {
item['disabled'] = false
} else {
item['disabled'] = true
}
})
console.log(JSON.stringify(this.StreetData))
} else {
this.StreetData.forEach(item => {
item['disabled'] = false
})
}
break
case 5:
if (searchVal !== '') {
this.VillagesData.forEach(item => {
if (item.adminAreaName.indexOf(searchVal) >= 0) {
item['disabled'] = false
} else {
item['disabled'] = true
}
})
} else {
this.VillagesData.forEach(item => {
item['disabled'] = false
})
}
break
}
},
addChildren () {
if (this.childrenArr.length < 3) {
this.childrenArr.push({
name: '',
sex: '男孩',
age: '',
editor: true,
animate: 'in'
})
this.childrensValidate.push({
nameState: true,
sexState: true,
ageState: true
})
}
if (this.childrenArr.length === 3) {
this.addChildrenBtnVisible = false
}
},
delTable (index) {
this.childrenArr[index].animate = 'out'
for (let i = 0; i < this.childrenArr.length; i++) {
if (i !== index) {
this.childrenArr[i].animate = ''
}
}
let that = this
setTimeout(function () {
that.childrenArr.splice(index, 1)
that.childrensValidate.splice(index, 1)
if (that.childrenArr.length === 3) {
that.addChildrenBtnVisible = false
} else {
that.addChildrenBtnVisible = true
}
}, 1000)
},
scanCode () {
let that = this
wx.scanQRCode({
needResult: 1,
success (res) {
console.log(res)
that.BaseForm.code = res.resultStr.split(',')[1]
}
})
}
}
}
</script>
<style scoped>
.full-page {
background-color: #f5f6f7;
}
.sign-page .head{
position:relative;
height: 10em;
}
.sign-page .head > .head-bg {
position:absolute;
background-color:#43d1be;
width:120%;
height: 7em;
left:-10%;
top:0;
z-index:1;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
.sign-page .head > .head-block {
position:absolute;
left:0;
top: 3em;
z-index:2;
background-color:#fff;
width:100%;
color:#333;
box-shadow:0 2px 8px #ccc;
border-radius: 5px;
padding: 0 0.5em;
}
.sign-page .head > .head-block > .table {
margin-bottom: 0;
}
.sign-page .head > .head-block .td.picture {
width: 6em;
}
.sign-page .head > .head-block .td.picture > .avatar{
width: 5em;
height: 5em;
border-radius: 50%;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
}
.sign-page .head > .head-block .info > .title{
font-size: 1.1em;
color:#35444f;
margin-bottom: 0.5em;
}
.sign-page .head > .head-block .info > .des{
font-size:80%;
}
.sign-page .p-title{
padding: 1.2em 0 0 0;
}
.sign-page .form > .table > .tr > .td.label {
color: #9aa0a4;
font-weight: normal;
}
.sign-page .form > .table .table-delete {
position: absolute;
right: -10px;
top: -10px;
font-size: 20px;
color: #333;
}
.sign-page > .form > .table.animate-in {
animation: addtable 1s ease-in;
}
.sign-page > .form > .table.animate-out {
animation: removetable 1s ease-out;
}
@keyframes addtable{
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes removetable{
0% {
opacity: 1;
transform: translateX(0)
}
100% {
opacity: 0;
transform: translateX(100%)
}
}
.addressPopup .address-step{
padding: 0 1em;
}
.address-step .step-list{
margin-bottom: 0;
margin-top: 1em;
}
.address-step .step-list .step-item > .icon {
display: inline-block;
width: 2em;
height: 2.7em;
position: relative;
}
.address-step .step-list .step-item > .icon > .ico{
display: inline-block;
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border: 1px solid #dddee1;
color: #333;
border-radius: 50%;
position: relative;
z-index: 2;
background-color: #fff;
font-size: 0.9em;
}
.address-step .step-list .step-item > .icon > .ico > .glyphicon {
display: none;
line-height: initial;
}
.address-step .step-list .step-item > .icon > .ico > .number{
display: block;
}
.address-step .step-list .step-item.finish > .icon > .ico{
border:#2d8cf0 solid 1px;
color:#2d8cf0;
}
.address-step .step-list .step-item.finish > .icon > .ico > .glyphicon{
display: block;
}
.address-step .step-list .step-item.finish > .icon > .ico > .glyphicon > i {
top: 2px;
}
.address-step .step-list .step-item.finish > .icon > .ico > .number{
display: none;
}
.address-step .step-list .step-item.process > .icon > .ico{
border:#2d8cf0 solid 1px;
background-color: #2d8cf0;
color:#ffffff;
}
.address-step .step-list .step-item > .icon > .line {
position:absolute;
height:100%;
top:0;
left:0;
right: 0;
margin:0 auto;
width:1px;
background:#dddee1;
}
.address-step .step-list .step-item.finish > .icon > .line{
background:#2d8cf0;
}
.address-step .step-list > li:last-child .step-item > .icon > .line{
display: none;
}
.address-step .step-list .step-item > .text{
margin-left: 0.5em;
}
.addressPopup .address-list {
padding: 0.5em 1em;
background-color:#f5f6f7;
height: 17em;
overflow-y:auto;
}
.addressPopup .address-list .address-head {
margin: 0.2em 0;
}
.addressPopup .address-list > .switch > .title {
color: #9aa0a4;
}
.addressPopup .address-list > .switch > ul li {
padding: 0.5em 0;
}
.addressPopup .footer-btn > button{
width: 100%;
padding: 1em 0;
border: none;
background-color: #fff;
font-size: 1em;
}
.noticePopup .body {
padding: 1em;
overflow: auto;
height: 100%;
position: relative;
padding-bottom: 60px;
}
.noticePopup .footer-btn {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
}
.noticePopup .footer-btn > button {
width: 100%;
padding: 1em 0;
border: none;
background-color:#43d1be;
color: #fff;
font-size: 1em;
}
.signaturePopup .body .title{
padding: 0.7em 0.5em;
font-size: 1.2em;
border-bottom: 1px solid #efefef;
}
.signaturePopup .body .title > .close {
opacity: 1;
}
.signaturePopup .body .canvas {
min-height: 240px;
background-color: #dddee1;
}
.signaturePopup .footer-btn {
overflow: hidden;
}
.signaturePopup .footer-btn > button {
width: 50%;
padding: 1em 0;
border: none;
background-color:#fff;
font-size: 1em;
float: left;
}
.signaturePopup .footer-btn > button.confirm-btn {
background-color:#43d1be;
color: #fff;
}
.upload-list{
overflow: hidden;
padding-top: 1.2em;
}
.upload-list ul li {
padding-right: 5px;
margin-left: 0;
margin-bottom: 5px;
position: relative;
}
.upload-list ul li > span{
display: inline-block;
width: 90px;
height: 90px;
max-height: 90px;
position: relative;
overflow: hidden;
}
.upload-list ul li > span.upload-plus {
font-size: 3em;
line-height: 90px;
text-align: center;
color: #9aa0a4;
border: 1px dotted #9aa0a4;
border-radius: 5px;
}
.upload-list ul li > .close-btn {
position: absolute;
right: 0;
top: -5px;
z-index: 1;
color: #333;
font-size: 1.2em;
}
.notice{
margin: 1.1em 0;
text-align: center;
}
.notice .link {
color: #43d1be;
}
.notice > span {
display: inline-block;
}
.notice .mint-checkbox-core::after {
width: 5px;
}
.signPopup {
position: fixed;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
.signPopup.on {
top: initial;
bottom: 0;
}
.signPopup.off {
top: 100%;
bottom: initial;
}
.signPopup .body{
background-color: #fff;
}
.signPopup .body .title{
padding: 0.7em 0.5em;
font-size: 1.2em;
border-bottom: 1px solid #efefef;
}
.signPopup .body .title > .close {
opacity: 1;
}
.signPopup .body .canvas {
min-height: 150px;
padding: 0 1em;
/* background-color: #dddee1; */
}
.signPopup .footer-btn {
overflow: hidden;
border-top: 1px solid #efefef;
}
.signPopup .footer-btn > button {
width: 50%;
padding: 1em 0;
border: none;
background-color:#fff;
font-size: 1em;
float: left;
}
.signPopup .footer-btn > button.confirm-btn {
background-color:#43d1be;
color: #fff;
}
.adduser-item {
background-color: #fff;
padding: 10px 0;
margin-top: 10px;
text-align: center;
}
.adduser-item > .inner {
display: inline-block;
}
.adduser-item > .inner .icon {
float: left;
margin-right: 5px;
}
.adduser-item .icon > i{
color: #43d1be;
font-size: 1.2em;
}
.light-box {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5);
}
.light-box > .table {
width: 100%;
height: 100%;
display: table;
}
.light-box > .table > .cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.light-box > .table > .cell > img {
max-width: 80%;
}
.footer {
margin: 10px 0;
}
</style>
<style>
.noticePopup.mint-popup-bottom{
top: 0 ;
}
.notice .mint-checklist {
display: inline-block;
float: left;
}
.notice .mint-checklist > .mint-checklist-title {
display: none;
}
.notice .mint-checklist > .mint-cell {
min-height: 0;
background-image: none;
background-color: transparent;
}
.notice .mint-checklist > .mint-cell .mint-cell-wrapper{
font-size: 1em;
background-image: none;
padding: 0;
}
.notice .mint-checklist > .mint-cell .mint-cell-wrapper .mint-checklist-label{
padding: 0;
}
.notice .mint-checklist .mint-checkbox-core::after {
width: 5px;
}
.notice .mint-checkbox-input:checked + .mint-checkbox-core {
background-color: #43d1be;
border-color: #43d1be;
}
.sign-page .form .table .tr .td .mint-radiolist{
width: 200px;
float: right;
}
</style>
src/views/signing/indexbate.vue → src/views/signingWD/indexbate.vue
......@@ -128,8 +128,17 @@
</div>
</div>
</div>
<div class="notice">
<span>
<mt-checklist
v-model="noticeCheck"
:options="noticeOptions">
</mt-checklist>
<span class="cell link" @click="noticePopupVisible=true">签约须知</span>
</span>
</div>
<div class="footer">
<button class="btn-default btn-block" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelSave">立即领取</button>
<button class="btn-default btn-block" @click="confirmSignature">确认签约</button>
</div>
</div>
<mt-popup
......@@ -269,6 +278,17 @@
:startDate="pickerLastMensesTimeStart"
:endDate="pickerLastMensesTimeEnd">
</mt-datetime-picker>
<mt-popup
v-model="noticePopupVisible"
class="full-width noticePopup"
position="bottom">
<div class="body">
<img :src="noticePicture" class="full-width"/>
<div class="footer-btn">
<button class="btn-block" @click="noticePopupHandelClose">确定</button>
</div>
</div>
</mt-popup>
</div>
</template>
......@@ -279,6 +299,8 @@ import { getOrgInfo, getSignInfo, getAreaList, getVillages } from '@/api/signing
import { validatename, cardid, isvalidatemobile } from '@/util/validate'
import { SubtractDay, getBirthByIdNumber, getSexByIdCard, getAgeByBirth } from '@/util/index'
import _defaultPicture from '../../assets/images/org-default-picture.png'
import _noticePicture from '../../assets/images/notice-img.png'
import _signatureBg from '../../assets/images/signature-bg.png'
export default {
name: 'Home',
......@@ -347,6 +369,30 @@ export default {
type: '',
sex: '',
state: ''
},
noticePopupVisible: false,
noticePicture: _noticePicture,
noticeCheck: [],
noticeOptions: [
{ label: '我已阅读并确认', value: '1' }
],
SignatureSheetVisible: false,
signatureImage: '',
signCanvasW: '400px',
signCanvasH: '220px',
signOption: {
penColor: 'rgb(0, 0, 0)',
backgroundColor: '#efefef'
},
signBGdataUrl: _signatureBg,
signWaterMarkState: true,
waterMarkOptions: {
text: '请在此处签名，字迹工整！', // watermark text, > default ''
font: '16px Arial', // mark font, > default '20px sans-serif'
style: 'fill', // fillText and strokeText, 'all'/'stroke'/'fill', > default 'fill
fillStyle: '#333', // fillcolor, > default '#333'
x: 100, // fill positionX, > default 20
y: 100 // fill positionY, > default 20
}
}
},
......@@ -801,6 +847,41 @@ export default {
getVillages(params).then(res => {
this.VillagesData = res.records
})
},
confirmSignature () {
this.BaseValidateHandle()
if (this.pageType === 1) { // 子女
let downState = true
for (let i = 0; i < this.childrenArr.length; i++) {
this.tab2Validate(i)
if (!this.childrensValidate[i].nameState || !this.childrensValidate[i].ageState) {
downState = false
}
}
if (!downState) {
return false
}
} else if (this.pageType === 0) { // 配偶
if (!this.BaseValidate.nameState || !this.BaseValidate.idCardState || !this.BaseValidate.lastMensesTimeState || !this.BaseValidate.chooseImg1State) {
return false
}
}
if (parseInt(this.noticeCheck[0]) !== 1) {
this.$toast({
message: '请预览签约须知后勾选',
position: 'center',
duration: 3000
})
return false
}
this.SignatureSheetVisible = true
this.modalVisible = true
this.signCanvasW = this.$refs.signCanvasBlock.offsetWidth
},
noticePopupHandelClose () {
this.noticePopupVisible = false
this.noticeCheck.push(1)
}
}
}
......@@ -914,6 +995,9 @@ export default {
.address-step .step-list .step-item.finish > .icon > .ico > .glyphicon{
display: block;
}
.address-step .step-list .step-item.finish > .icon > .ico > .glyphicon > i {
top: 2px;
}
.address-step .step-list .step-item.finish > .icon > .ico > .number{
display: none;
}
......@@ -949,6 +1033,10 @@ export default {
overflow-y:auto;
}
.addressPopup .address-list .address-head {
margin: 0.2em 0;
}
.addressPopup .address-list > .switch > .title {
color: #9aa0a4;
}
......@@ -964,4 +1052,216 @@ export default {
background-color: #fff;
font-size: 1em;
}
.noticePopup .body {
padding: 1em;
overflow: auto;
height: 100%;
position: relative;
padding-bottom: 60px;
}
.noticePopup .footer-btn {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
}
.noticePopup .footer-btn > button {
width: 100%;
padding: 1em 0;
border: none;
background-color:#43d1be;
color: #fff;
font-size: 1em;
}
.signaturePopup .body .title{
padding: 0.7em 0.5em;
font-size: 1.2em;
border-bottom: 1px solid #efefef;
}
.signaturePopup .body .title > .close {
opacity: 1;
}
.signaturePopup .body .canvas {
min-height: 240px;
background-color: #dddee1;
}
.signaturePopup .footer-btn {
overflow: hidden;
}
.signaturePopup .footer-btn > button {
width: 50%;
padding: 1em 0;
border: none;
background-color:#fff;
font-size: 1em;
float: left;
}
.signaturePopup .footer-btn > button.confirm-btn {
background-color:#43d1be;
color: #fff;
}
.upload-list{
overflow: hidden;
padding-top: 1.2em;
}
.upload-list ul li {
padding-right: 5px;
margin-left: 0;
margin-bottom: 5px;
position: relative;
}
.upload-list ul li > span{
display: inline-block;
width: 90px;
height: 90px;
max-height: 90px;
position: relative;
overflow: hidden;
}
.upload-list ul li > span.upload-plus {
font-size: 3em;
line-height: 90px;
text-align: center;
color: #9aa0a4;
border: 1px dotted #9aa0a4;
border-radius: 5px;
}
.upload-list ul li > .close-btn {
position: absolute;
right: 0;
top: -5px;
z-index: 1;
color: #333;
font-size: 1.2em;
}
.notice{
margin: 1.1em 0;
text-align: center;
}
.notice .link {
color: #43d1be;
}
.notice > span {
display: inline-block;
}
.notice .mint-checkbox-core::after {
width: 5px;
}
.signPopup {
position: fixed;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
.signPopup.on {
top: initial;
bottom: 0;
}
.signPopup.off {
top: 100%;
bottom: initial;
}
.signPopup .body{
background-color: #fff;
}
.signPopup .body .title{
padding: 0.7em 0.5em;
font-size: 1.2em;
border-bottom: 1px solid #efefef;
}
.signPopup .body .title > .close {
opacity: 1;
}
.signPopup .body .canvas {
min-height: 150px;
padding: 0 1em;
/* background-color: #dddee1; */
}
.signPopup .footer-btn {
overflow: hidden;
border-top: 1px solid #efefef;
}
.signPopup .footer-btn > button {
width: 50%;
padding: 1em 0;
border: none;
background-color:#fff;
font-size: 1em;
float: left;
}
.signPopup .footer-btn > button.confirm-btn {
background-color:#43d1be;
color: #fff;
}
.light-box {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5);
}
.light-box > .table {
width: 100%;
height: 100%;
display: table;
}
.light-box > .table > .cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.light-box > .table > .cell > img {
max-width: 80%;
}
.footer {
margin: 10px 0;
}
</style>
<style>
.noticePopup.mint-popup-bottom{
top: 0 ;
}
.notice .mint-checklist {
display: inline-block;
float: left;
}
.notice .mint-checklist > .mint-checklist-title {
display: none;
}
.notice .mint-checklist > .mint-cell {
min-height: 0;
background-image: none;
background-color: transparent;
}
.notice .mint-checklist > .mint-cell .mint-cell-wrapper{
font-size: 1em;
background-image: none;
padding: 0;
}
.notice .mint-checklist > .mint-cell .mint-cell-wrapper .mint-checklist-label{
padding: 0;
}
.notice .mint-checklist .mint-checkbox-core::after {
width: 5px;
}
.notice .mint-checkbox-input:checked + .mint-checkbox-core {
background-color: #43d1be;
border-color: #43d1be;
}
.sign-page .form .table .tr .td .mint-radiolist{
width: 200px;
float: right;
}
</style>
src/views/voucherDetail/index.vue
......@@ -20,6 +20,13 @@
<div class="big-title" v-if="voucherType === '2'">免费<span class="unit">价值{{voucherData.cost}}元</span></div>
<div class="big-title" v-else>{{voucherData.cost}}<span class="unit">元</span></div>
<div class="text-center">{{voucherData.voucherName}}</div>
<div class="qrcode-block">
<div class="qrcode-inner">
<mt-spinner v-show="qrcodeLoading" type="fading-circle" color="#43d1be"></mt-spinner>
<div id="qrcode"></div>
</div>
<h4 class="text-danger text-center">请在使用时将券码出示给医生</h4>
</div>
<div class="table">
<div class="tr">
<div class="td label">领取人：</div>
......@@ -73,7 +80,7 @@
<div v-show="contentMessageVisible" class="message-block"><i class="glyphicon glyphicon-info-sign"></i> 暂无相关健康知识！</div>
</div>
<!-- 扫码核销 -->
<div class="model" v-show="qrCodeVisible">
<!-- <div class="model" v-show="qrCodeVisible">
<div class="model-body">
<div class="title">医生扫描券码即可服务</div>
<div id="qrcode"></div>
......@@ -81,7 +88,7 @@
<div class="text-center model-close">
<i class="glyphicon glyphicon-remove-circle" @click="qrCodeVisible=false"></i>
</div>
</div>
</div> -->
<!-- 小贴士 -->
<div class="popup-model" v-if="tipsPopupVisible">
......@@ -120,7 +127,8 @@ export default {
contentData: [], // 内容流数据
contentMessageSpinner: true, // 内容流加载状态，默认显示
contentMessageVisible: false, // 内容流文字提示，默认不显示，接口返回数组为0显示
qrCodeVisible: false, // “查看券码”弹窗显示状态
qrCodeVisible: true, // 二维码显示状态
qrcodeLoading: true,
tipsPopupVisible: false, // “小贴士”弹窗显示状态
tipsData: { // “小贴士”数据
tipsTime: '无',
......@@ -155,6 +163,7 @@ export default {
data.logoLoading = true // 图片加载中标识
this.voucherData = data
this.foreachButtons() // 配置按钮图标
this.qrCodePopup() // 获取券的核销二维码
console.log('getVoucherInfoByIdFn' + this.voucherData.merchantsLogo)
}
}).catch((error) => {
......@@ -213,10 +222,12 @@ export default {
}
},
qrCodePopup () { // 核销二维码弹窗
document.getElementById('qrcode').innerHTML = ''
console.log(this.voucherId)
// document.getElementById('qrcode').innerHTML = ''
getQrCodeByVoucherId(this.voucherId).then(res => {
this.qrcodeLoading = false
if (res && res.msg === 'success') {
this.qrCodeVisible = true
// this.qrCodeVisible = true
let qrcode = new QRCode('qrcode', {
width: 200,
height: 200,
......@@ -225,8 +236,13 @@ export default {
colorLight: '#fff'
})
qrcode.clear()
qrcode.makeCode(JSON.stringify(res.data))
if (res.data) {
qrcode.makeCode(JSON.stringify(res.data))
} else {
this.qrCodeVisible = false
}
} else {
this.qrCodeVisible = false
this.$toast({
message: '获取服务券二维码失败',
position: 'center',
......@@ -357,4 +373,30 @@ export default {
font-weight:bold;
text-align: right;
}
.detail-card .body .qrcode-block {
margin: 2em 0;
}
.detail-card .body .qrcode-block h4{
font-size: 1.2em;
}
.detail-card .body .qrcode-inner {
margin-bottom: 1em;
text-align: center;
}
.detail-card .body .qrcode-inner #qrcode {
display: inline-block;
width: 220px;
height: 220px;
padding: 10px;
background-color: #fff;
box-shadow: 0 0 16px rgb(221, 221, 221, 1);
}
</style>
<style>
.detail-card .mint-spinner-fading-circle{
width: 5em !important;
height: 5em !important;
margin: 0 auto;
}
</style>
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