Skip to content

V
voucher-h5
Commit ddc2b834 by 潘琦
Options

电子券H5页面针对张家港相关需求代码变动及功能完善；

parent d24031d8
Showing with 1956 additions and 123 deletions
config/index.js
......@@ -6,15 +6,9 @@ const path = require('path')
const url = 'http://voucher.check.icaremgt.com' // 开发
// const url = 'http://voucher.icaremgt.com' // 正式
const sjkgurl = 'https://api-wx-service.check.icaremgt.com' // 机构空间（开发）
// const sjkgurl = 'https://api-wx-service.check.icaremgt.com' // 机构空间（开发）
// const sjkgurl = 'https://sjkg-wx-service.icaremgt.com' // 机构空间（正式）
// console.log('NODE_ENV' + process.env.NODE_ENV)
// if (process.env.NODE_ENV === 'production') {
// let root = process.env.API_ROOT
// axios.defaults.baseURL = root // 开发服
// }
const sjkgurl = 'http://192.168.1.234:9005'
module.exports = {
dev: {
......
config/prod.env.js
......@@ -4,6 +4,7 @@ const prodEnv = require('./prod.env')
const baseUrl = '"http://voucher.check.icaremgt.com"' //打包后请求前缀（开发）
// const baseUrl = '"http://voucher.icaremgt.com"' //打包后请求前缀（正式）
module.exports = merge(prodEnv, {
NODE_ENV: '"production"',
API_ROOT: baseUrl
......
src/App.vue
......@@ -685,4 +685,23 @@ ul li {
.mint-indicator-wrapper{
z-index: 9999;
}
.mint-radiolist .mint-cell {
width: 90px;
float: right;
background-image: none;
min-height: 0;
}
.mint-radiolist .mint-cell > .mint-cell-wrapper {
background-image: none;
padding: 0;
font-size: 14px;
}
.mint-radiolist-label {
font-weight: normal;
padding: 0;
}
.mint-radio-input:checked + .mint-radio-core {
background-color: #FF9B44;
border-color: #FF9B44;
}
</style>
src/api/signing/signing.js
......@@ -35,3 +35,30 @@ export function getSignInfo (params) {
data: params
})
}
// 根据区域code获取该区域下所有机构
export function getOrgsByAreaCode (params) {
return request({
url: '/v1/org/orglistByCountry',
method: 'POST',
params: params
})
}
// 签约
export function createSign (params) {
return request({
url: '/v1/voucher/sign',
method: 'POST',
data: params
})
}
// 签约详情（根据sign id）
export function getSignInfoBySignId (params) {
return request({
url: '/v1/voucher/signInfo',
method: 'GET',
params: params
})
}
src/components/signature.vue 0 → 100644
<template>
<div class="signature-block" ref="signBlock">
<canvas ref="signatureCanvas" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></canvas>
</div>
</template>
<script>
export default {
name: 'signature',
data () {
return {
canvasWidth: window.innerWidth,
canvasHeight: window.innerHeight,
canvasImg: '', // 签名图片地址
ctx: null, // 画板
stage_info: [], // 移动端按下点到屏幕的偏差
isDown: false, // 是否按下
points: [], // 按下点组合
startX: 0, // 起始点x坐标
startY: 0
}
},
created () {
},
mounted () {
console.log('mounted 1')
this.init()
},
methods: {
init () {
console.log('init 1')
let canvas = this.$refs.signatureCanvas
this.ctx = canvas.getContext('2d')
this.ctx.strokeStyle = '#000'
this.stage_info = canvas.getBoundingClientRect()
},
touchStart (ev) {
// console.log('touchStart')
// this.$toast({
// message: 'touchStart',
// position: 'center',
// duration: 1 * 1000
// })
let e = ev || event
e.preventDefault()
if (e.touches.length === 1) {
let obj = {
x: e.targetTouches[0].clientX - this.stage_info.left,
y: e.targetTouches[0].clientY - this.stage_info.top
}
this.startX = obj.x
this.startY = obj.y
this.ctx.beginPath()
this.ctx.moveTo(this.startX, this.startY)
this.ctx.lineTo(obj.x, obj.y)
this.ctx.stroke()
this.ctx.closePath()
this.points.push(obj)
}
},
touchMove (ev) {
let e = ev || event
e.preventDefault()
if (e.touches.length === 1) {
let obj = {
x: e.targetTouches[0].clientX - this.stage_info.left,
y: e.targetTouches[0].clientY - this.stage_info.top
}
this.ctx.beginPath()
this.ctx.moveTo(this.startX, this.startY)
this.ctx.lineTo(obj.x, obj.y)
this.ctx.stroke()
this.ctx.closePath()
this.startX = obj.x
this.startY = obj.y
this.points.push(obj)
}
},
touchEnd (ev) {
let e = ev || event
e.preventDefault()
if (e.touches.length === 1) {
let obj = {
x: e.targetTouches[0].clientX - this.stage_info.left,
y: e.targetTouches[0].clientY - this.stage_info.top
}
this.startX = obj.x
this.startY = obj.y
this.ctx.beginPath()
this.ctx.moveTo(this.startX, this.startY)
this.ctx.lineTo(obj.x, obj.y)
this.ctx.stroke()
this.ctx.closePath()
this.points.push(obj)
}
},
// pc
mouseDown (ev) {
let e = ev || event
e.preventDefault()
this.isDown = true
let obj = {
x: e.offsetX,
y: e.offsetY
}
this.startX = obj.x
this.startY = obj.y
this.ctx.beginPath()
this.ctx.moveTo(this.startX, this.startY)
this.ctx.lineTo(obj.x, obj.y)
this.ctx.stroke()
this.ctx.closePath()
this.points.push(obj)
},
mouseMove (ev) {
let e = ev || event
e.preventDefault()
if (this.isDown) {
let obj = {
x: e.offsetX,
y: e.offsetY
}
this.ctx.beginPath()
this.ctx.moveTo(this.startX, this.startY)
this.ctx.lineTo(obj.x, obj.y)
this.ctx.stroke()
this.ctx.closePath()
this.startY = obj.y
this.startX = obj.x
this.points.push(obj)
}
},
mouseUp (ev) {
let e = ev || event
e.preventDefault()
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.ctx.beginPath()
this.ctx.moveTo(this.startX, this.startY)
this.ctx.lineTo(obj.x, obj.y)
this.ctx.stroke()
this.ctx.closePath()
this.points.push(obj)
this.points.push({ x: -1, y: -1 })
this.isDown = false
},
handelOverwrite () { // 重写清空
console.log('handelOverwrite')
this.ctx.clearRect(0, 0, this.$refs.signatureCanvas.width, this.$refs.signatureCanvas.height)
this.points = []
},
handelSignSubmit () {
let imgData = this.$refs.canvasF.toDataURL()
console.log(imgData)
}
}
}
</script>
<style scoped>
.signature-block,
.signature-block canvas {
width: 100%;
height: 100%;
}
</style>
src/main.js
......@@ -23,9 +23,11 @@ import {
Indicator,
Actionsheet,
Radio,
Checklist,
InfiniteScroll
} from 'mint-ui'
import 'mint-ui/lib/style.css'
import vueSignature from 'vue-signature'
Vue.component(TabContainer.name, TabContainer)
Vue.component(TabContainerItem.name, TabContainerItem)
......@@ -41,7 +43,9 @@ Vue.component(Spinner.name, Spinner)
Vue.component(DatetimePicker.name, DatetimePicker)
Vue.component(Actionsheet.name, Actionsheet)
Vue.component(Radio.name, Radio)
Vue.component(Checklist.name, Checklist)
Vue.use(InfiniteScroll)
Vue.use(vueSignature)
Vue.prototype.$toast = Toast
Vue.prototype.$MessageBox = MessageBox
......
src/permission.js
......@@ -4,10 +4,10 @@ import store from '@/store'
// import {validatenull} from '@/util/validate'
import { getParamsByUrl, removeUrlParam } from '@/util/index'
import { getOauth, getUserByToken } from '@/api/auth/auth'
import baseUrl from '@/util/baseUrl'
import { Toast } from 'mint-ui'
// const baseUrl = 'http://www.icareyou.net' // 正式
const baseUrl = 'http://test.icareyou.net' // 开发
const defaultUrl = baseUrl.authUrl
router.beforeEach((to, from, next) => {
console.log('缓冲设置')
console.log('code ===' + store.getters.code)
......@@ -39,10 +39,13 @@ let getWXOauth = () => {
authId = '&auth_id=' + getParamsByUrl(window.location.href).auth_id
store.dispatch('setAuthId', getParamsByUrl(window.location.href).auth_id)
}
window.location.href = baseUrl + '/wxoauth/route?redirect_uri=' + encodeURIComponent(url) + authId + '&scoe=&auth_scene=voucher'
window.location.href = defaultUrl + '/wxoauth/route?redirect_uri=' + encodeURIComponent(url) + authId + '&scoe=&auth_scene=voucher'
}
let getOauthFn = (callback) => {
if (getParamsByUrl(window.location.href).auth_id) {
store.dispatch('setAuthId', getParamsByUrl(window.location.href).auth_id)
}
let spoauthParams = {
code: store.getters.code
}
......@@ -80,6 +83,10 @@ const getUserByTokenFn = (token, code, callback) => {
getUserByToken(spoauthParams).then(function (res) {
let accessToken = ''
let userId = ''
let accountId = res.accountid
if (accountId && accountId !== '') {
store.dispatch('setAccountId', accountId)
}
if (res.ext && res.ext !== '') {
let extOBJ = JSON.parse(res.ext)
accessToken = extOBJ.access_token
......
src/router/index.js
......@@ -7,19 +7,24 @@ export default new Router({
routes: [
{
path: '/',
name: 'Home',
name: '起始页',
redirect: '/home'
},
{
path: '/home',
name: '首页',
component: () => import('@/views/home/index'),
meta: {keepAlive: false, title: '凯歌电子券'}
meta: {keepAlive: false, title: '凯歌健康券'}
},
{
path: '/signing',
name: 'signing',
name: '生育全程签约',
component: () => import('@/views/signing/index'),
meta: {keepAlive: false, title: '生育全程签约'}
},
{
path: '/vouchers',
name: 'vouchers',
name: '我的健康券',
component: () => import('@/views/vouchers/index'),
meta: {keepAlive: false, title: '我的健康券'}
},
......
src/router/request.js
import axios from 'axios'
import store from '../store'
import { Toast } from 'mint-ui'
import router from '@/router/index'
// import router from '@/router/index'
import { removeUrlParam } from '@/util/index'
axios.defaults.timeout = 30000
......@@ -31,7 +31,7 @@ axios.interceptors.request.use(config => {
// respone拦截器
axios.interceptors.response.use(response => {
const res = response.data ? response.data : response
const res = response.data && response.data.code === 0 ? response.data : response
const status = Number(response.status) || 200
console.log('response status:' + status)
if (status !== 200) {
......@@ -49,9 +49,17 @@ axios.interceptors.response.use(response => {
}, 4 * 1000)
} else if (status === 403) {
if (res.msg === '请先进行实名认证') { // 跳转至社区推荐页
router.push({
path: '/recommend'
Toast({
message: '您还未实名认证，进入实名认证页面中...',
position: 'center',
duration: 5 * 1000
})
setTimeout(() => {
// router.push({
// path: '/recommend'
// })
window.location.href = 'http://' + location.host + '/#/recommend/list'
}, 4 * 1000)
}
} else {
return Promise.reject(new Error(res.msg))
......
src/router/requestSjkg.js
import axios from 'axios'
import { getStore, setStore } from '@/util/store'
import store from '../store'
import { Toast } from 'mint-ui'
import baseUrl from '@/util/baseUrl'
// import router from '@/router/index'
import { removeUrlParam } from '@/util/index'
axios.defaults.timeout = 30000
console.log('NODE_ENV' + process.env.NODE_ENV)
if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = baseUrl.sjkgUrl
}
// 返回其他状态吗
axios.defaults.validateStatus = function (status) {
return status // 默认的
......@@ -11,9 +18,9 @@ axios.defaults.validateStatus = function (status) {
axios.defaults.withCredentials = true
// request拦截器
axios.interceptors.request.use(config => {
let token = getStore({name: 'access_token'})
let token = store.getters.access_token
if (token) {
config.headers['Authorization'] = 'Bearer ' + token
// config.headers['Authorization'] = 'Bearer ' + token
}
return config
}, error => {
......@@ -24,36 +31,49 @@ axios.interceptors.request.use(config => {
// respone拦截器
axios.interceptors.response.use(response => {
const res = response.data ? response.data : response
const res = response.data && response.data.code === 200 ? response.data : response
const status = Number(response.status) || 200
console.log('response status:' + status)
if (status !== 200) {
// Toast({
// message: res.msg,
// position: 'center',
// duration: 5 * 1000
// })
if (status === 401) {
Toast({
message: '您因长时间逗留，验证已过期，正在刷新！',
position: 'center',
duration: 5 * 1000
})
setStore({ name: 'access_token', content: '' })
return
store.dispatch('setToken', '')
store.dispatch('setUserId', '')
store.dispatch('setCode', '')
setTimeout(function () {
window.location.href = removeUrlParam('code')
}, 4 * 1000)
} else if (status === 403) {
if (res.msg === '请先进行实名认证') { // 跳转至社区推荐页
Toast({
message: '您还未实名认证，进入实名认证页面中...',
position: 'center',
duration: 5 * 1000
})
setTimeout(() => {
// router.push({
// path: '/recommend'
// })
window.location.href = 'http://' + location.host + '/#/recommend/list'
}, 4 * 1000)
}
} else {
return Promise.reject(new Error(res.msg))
}
} else if (res.code === 1) {
if (!res.msg) {
res.msg = '内部服务器错误[500]'
}
return Promise.reject(new Error(res.msg))
}
return res
}, error => {
console.log('错误' + error)// for debug
Toast({
message: error.message,
position: 'center',
duration: 5 * 1000
})
return Promise.reject(new Error(error))
})
......
src/router/requestToken.js
import axios from 'axios'
import { Toast } from 'mint-ui'
import baseUrl from '@/util/baseUrl'
// const defaultUrl = 'http://www.icareyou.net/' // 正式
const defaultUrl = 'http://test.icareyou.net/' // 开发
const defaultUrl = baseUrl.authUrl
// 创建axios实例
const service = axios.create({
......
src/store/getters.js
......@@ -3,6 +3,7 @@ const getters = {
user_id: state => state.user.user_id,
userInfo: state => state.user.userInfo,
code: state => state.user.code,
authId: state => state.user.authId
authId: state => state.user.authId,
accountId: state => state.user.accountId
}
export default getters
src/util/baseUrl.js 0 → 100644
/**
* 鉴权地址
*/
const authUrl = 'http://test.icareyou.net' // 开发
// const authUrl = 'http://www.icareyou.net' // 正式
/**
* 项目接口请求地址
*/
const baseUrl = '"http://voucher.check.icaremgt.com"' // 开发
// const baseUrl = '"http://voucher.icaremgt.com"' // 正式
/**
* 机构控件项目接口请求地址
*/
// const sjkgUrl = 'https://api-wx-service.check.icaremgt.com' // 开发
// const sjkgUrl = 'https://sjkg-wx-service.icaremgt.com' // 正式
const sjkgUrl = 'http://192.168.1.234:9005'
const defaultUrl = {
authUrl: authUrl,
baseUrl: baseUrl,
sjkgUrl: sjkgUrl
}
export default defaultUrl
src/views/home/index.vue
......@@ -27,6 +27,7 @@ import CardItem from '@/components/cardItem'
import ListItem from '@/components/listItem'
import { getUserCard, getunUsedCountById } from '@/api/apply/apply'
import { getUserInfoByUserId } from '@/api/basic/basic'
// import { wxpermission } from '@/wxpermission'
import _itemPoster from '../../assets/images/doctor.jpg'
export default {
......@@ -47,6 +48,16 @@ export default {
}
},
created () {
// let that = this
// wxpermission(() => {
// // setTimeout(() => {
// // that.$router.push({
// // path: '/recommend'
// // })
// // }, 2000)
// // window.location.href = 'http://' + location.host + '/#/recommend/list'
// }, false)
this.getUserCardByIdFn() // 获取当前用户待使用健康券(前3条)
this.getUserInfoByUserIdFn() // 获取当前用户基本信息
this.getunUsedCountByIdFn() // 获取当前用户待使用健康券数量
......
src/views/member/addMain.vue
......@@ -191,7 +191,7 @@ export default {
let that = this
setTimeout(function () {
that.$router.push({
path: '/'
path: '/home'
})
}, 2500)
} else {
......
src/views/member/addMember.vue
......@@ -267,7 +267,7 @@ export default {
let that = this
setTimeout(function () {
that.$router.push({
path: '/'
path: '/home'
})
}, 2500)
} else {
......
src/views/member/edit.vue
......@@ -371,7 +371,7 @@ export default {
let that = this
setTimeout(function () {
that.$router.push({
path: '/'
path: '/home'
})
}, 2500)
} else {
......
src/views/recommend/list.vue
......@@ -180,16 +180,17 @@ export default {
})
})
},
fail: function () {
fail: function (res) {
that.$Indicator.close()
that.$toast({
message: '位置获取失败，请打开定位后再重新尝试！',
// message: JSON.stringify(res),
position: 'center',
duration: 3000
})
}
})
})
}, false)
},
loadMore () {
if (!this.queryAccountId) {
......@@ -273,7 +274,7 @@ export default {
},
goToHome () {
this.$router.push({
path: '/'
path: '/home'
})
},
handleRegister (type) { // 进入成员注册领券页 type=1本人 type=2配偶
......
src/views/signing/index.vue
<template>
<div class="full-page">
<div class="container sign-page">
<div class="head">
<!-- <div class="head">
<div class="head-bg"></div>
<div class="head-block">
<div class="table">
......@@ -16,7 +16,7 @@
</div>
</div>
</div>
</div>
</div> -->
<div class="p-title">
<span class="label">准妈妈/妈妈基本信息</span>
<span class="link">默认为户主</span>
......@@ -26,7 +26,7 @@
<div class="tr">
<div class="td label">姓名</div>
<div class="td text-right">
<input type="text" class="form-control" v-model="BaseForm.name" @blur="BaseValidateName" placeholder="请输入姓名"/>
<input type="text" class="form-control" v-model="BaseForm.name" @blur="BaseValidateName" placeholder="请输入姓名" :disabled="signStatus=='update'"/>
<span v-show="!BaseValidate.nameState" class="small-hint">（只能是中文或英文,长度1~15位）</span>
</div>
</div>
......@@ -40,7 +40,7 @@
<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"/>
<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>
......@@ -71,9 +71,16 @@
<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="form">
<div class="table">
<div class="tr">
<div class="td label">保健手册编码</div>
......@@ -90,11 +97,65 @@
</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" v-if="pageType===0">
<span class="label">上传身份证明资料：身份证正面/反面</span>
</div>
<div class="p-title">
<div class="upload-list" v-if="pageType===0">
<ul class="nav-pills">
<li v-for="(item, index) in BaseForm.chooseImages" :key="index">
<span>
<img :src="item" class="full-width"/>
<i class="close-btn glyphicon glyphicon-remove-circle" @click="removeChooseImgsByIndex(index)"></i>
</span>
</li>
<li>
<span class="upload-plus" @click="handelChooseImage(1)">
<i class="glyphicon glyphicon-plus"></i>
</span>
</li>
</ul>
</div>
<span v-show="!BaseValidate.chooseImg1State" class="text-danger">请选择身份证正反面两张图片</span>
<div class="p-title" v-if="pageType===0">
<span class="label" style="white-space: initial;">上传怀孕资料：早孕告知书、最近一次化验单（B照、肝功、肾功、血常规、尿常规、心电图）</span>
</div>
<div class="upload-list" v-if="pageType===0">
<ul class="nav-pills">
<li v-for="(item, index) in BaseForm.chooseImages2" :key="index">
<span>
<img :src="item" class="full-width"/>
</span>
</li>
<li>
<span class="upload-plus" @click="handelChooseImage(2)">
<i class="glyphicon glyphicon-plus"></i>
</span>
</li>
</ul>
</div>
<div class="p-title hide">
<span class="label">服务成员信息</span>
</div>
<div class="form" v-if="pageType===0">
<div class="form hide" v-if="pageType===0">
<div class="table">
<div class="tr">
<div class="td label">成员类型</div>
......@@ -128,8 +189,51 @@
</div>
</div>
</div>
<div class="p-title" v-if="pageType === 1">
<span class="label">服务成员信息</span>
</div>
<div class="form" v-if="pageType===1" v-for="(item, index) in childrenArr" :key="index">
<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="item.name"/>
</div>
</div>
<div class="tr">
<div class="td label">性别</div>
<div class="td text-right">
<mt-radio
v-model="item.sex"
:options="['女孩', '男孩']">
</mt-radio>
</div>
</div>
<div class="tr">
<div class="td label">出生年月</div>
<div class="td text-right">
<span @click="openPickerBirth(index)">{{item.birth === '' ? '请选择子女出生日期': item.birth}}</span>
</div>
</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
......@@ -243,9 +347,65 @@
</div>
</div>
<div class="footer-btn">
<button class="btn-block">取消</button>
<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="SignatureSheetVisible=false"><i class="glyphicon glyphicon-remove-circle"></i></span></div>
<div class="canvas" ref="signCanvasBlock">
<vueSignature ref="signature" :sigOption="signOption" :h="signCanvasH"></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"
......@@ -273,22 +433,24 @@
</template>
<script>
import { getStore } from '@/util/store'
// import { saveMember } from '@/api/basic/basic'
import { getOrgInfo, getSignInfo, getAreaList, getVillages } from '@/api/signing/signing'
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 { wxpermission } from '@/wxpermission'
const wx = require('weixin-js-sdk')
export default {
name: 'Home',
data () {
return {
userId: getStore({ name: 'user_id' }),
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 : '',
accountId: this.$route.query.accountId ? this.$route.query.accountId : store.getters.accountId,
orgInfo: {
picture: _defaultPicture,
orgname: '',
......@@ -296,7 +458,18 @@ export default {
},
signStatus: 'create',
alreadySignNum: 0, // 已签约服务人员数
childrenArr: [], // 签约（儿童）服务成员
childrenArr: [
{
name: '',
sex: '男孩',
age: '',
birth: '',
editor: true,
animate: '',
state: '',
signState: ''
}
], // 签约（儿童）服务成员
childrensValidate: [], // 签约（儿童）服务成员，姓名、性别、年龄校验合法性
addChildrenBtnVisible: true,
BaseForm: {
......@@ -306,14 +479,21 @@ export default {
lastMensesTime: '', // 末次月经时间
address: '',
subAddress: '',
code: ''
street: '',
code: '',
orgName: '',
chooseImages: [], // 身份证图片
chooseImages2: [] // 怀孕资料图片
},
BaseValidate: { // 表单各个列是否合法状态
nameState: true,
idCardState: true,
phoneState: true,
lastMensesTimeState: true,
addressState: true
addressState: true,
streetState: true,
orgState: true,
chooseImg1State: true
},
btnDisabled: false,
pickerLastMensesTimeDefault: new Date(), // 末次月经时间默认选中日期为当天
......@@ -321,7 +501,9 @@ export default {
pickerLastMensesTimeEnd: new Date(), // 末次月经时间控件结束日期小于当天
pickerBirthDefault: new Date(), // 出生年月默认选中日期为当天
pickerBirthEnd: new Date(), // 出生年月控件结束日期小于当天
pickerOpenIndex: 0, // 子女出生年月日期控件下标
addressPopupVisible: false, // “现住址”popup显示状态
orgPopupVisible: false, // “所在卫生服务机构”popup显示状态
addressForm: {
province: '贵州省',
city: '贵阳市',
......@@ -347,11 +529,27 @@ export default {
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'
}
}
},
created () {
this.getOrgInfoFn()
// this.getOrgInfoFn()
this.getUserSignInfoFn() // 获取用户签约信息回显
},
mounted: function () {
},
......@@ -414,12 +612,21 @@ export default {
}
getSignInfo(params).then(res => {
this.$Indicator.close()
let data = res.records
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
......@@ -434,8 +641,8 @@ export default {
if (data.townName !== '' && data.villageName !== '') {
this.BaseForm.subAddress = data.townName + ' ' + data.villageName
}
this.BaseForm.lastMensesTime = data.pregnantDate !== '' ? data.pregnantDate.split(' ')[0] : ''
this.BaseForm.code = data.healthCode
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
......@@ -449,6 +656,23 @@ export default {
this.BaseForm.street = data.userAdress
this.BaseForm.chooseImages.push(data.signSfzz) // 身份证图片回显
this.BaseForm.chooseImages.push(data.signSfzf)
// 孕产资料图片回显
if (data.hyzl1 !== '') {
this.BaseForm.chooseImages2.push(data.hyzl1)
}
if (data.hyzl2 !== '') {
this.BaseForm.chooseImages2.push(data.hyzl2)
}
if (data.hyzl3 !== '') {
this.BaseForm.chooseImages2.push(data.hyzl3)
}
if (data.hyzl4 !== '') {
this.BaseForm.chooseImages2.push(data.hyzl4)
}
if (this.pageType === 1) { // 签约（儿童）服务成员回显
if (data.bs.length > 0) {
this.alreadySignNum = data.bs.length
......@@ -497,6 +721,10 @@ export default {
this.BaseValidateIdCard()
this.BaseValidateMensesLastDate()
this.BaseValidatePhone()
this.BaseValidateAddress()
this.BaseValidateStreet()
// this.BaseValidateOrg()
this.BaseValidateChooseImg()
},
BaseValidateName () { // 姓名验证
if (validatename(this.BaseForm.name)) {
......@@ -504,6 +732,9 @@ export default {
} else {
this.BaseValidate.nameState = false
}
if (this.pageType === 0) {
this.BaseFormIntoTab1()
}
},
BaseValidateIdCard () { // 身份证验证
if (cardid(this.BaseForm.idCard)[0]) {
......@@ -511,6 +742,9 @@ export default {
} else {
this.BaseValidate.idCardState = true
}
if (this.pageType === 0) {
this.BaseFormIntoTab1()
}
},
// BaseValidateIdCardKid () { // 子女身份证验证
// if (cardid(this.userData.idCardKid)[0]) {
......@@ -535,6 +769,9 @@ export default {
} else {
this.BaseValidate.phoneState = true
}
if (this.pageType === 0) {
this.BaseFormIntoTab1()
}
},
BaseValidateAddress () { // 现住址验证
if (this.BaseForm.address === '') {
......@@ -543,6 +780,23 @@ export default {
this.BaseValidate.addressState = true
}
},
BaseValidateStreet () { // 详细地址
if (this.BaseForm.street === '') {
this.BaseValidate.streetState = false
} else {
this.BaseValidate.streetState = true
}
if (this.pageType === 0) {
this.BaseFormIntoTab1()
}
},
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
......@@ -550,6 +804,13 @@ export default {
this.BaseValidate.birthKidState = true
}
},
BaseValidateChooseImg () { // 上传身份证图片验证（最少两张）
if (this.BaseForm.chooseImages.length < 2) {
this.BaseValidate.chooseImg1State = false
} else {
this.BaseValidate.chooseImg1State = true
}
},
openPickerLastMensesTime () { // 打开末次月经时间日期控件
this.$refs.pickerLastMensesTime.open()
},
......@@ -561,7 +822,8 @@ export default {
}
this.BaseForm.lastMensesTime = selectedDate.getFullYear() + '-' + month + '-' + selectedDate.getDate()
},
openPickerBirth () { // 打开出生日期控件
openPickerBirth (index) { // 打开出生日期控件
this.pickerOpenIndex = index
this.$refs.pickerBirth.open()
},
pickerBirthConfirm (date) {
......@@ -571,7 +833,9 @@ export default {
if (selectedDate.getMonth() + 1 <= 9) {
month = '0' + (selectedDate.getMonth() + 1)
}
this.userData.birthKid = selectedDate.getFullYear() + '-' + month + '-' + selectedDate.getDate()
let birth = selectedDate.getFullYear() + '-' + month + '-' + selectedDate.getDate()
this.childrenArr[this.pickerOpenIndex].birth = birth
this.childrenArr[this.pickerOpenIndex].age = getAgeByBirth(birth)
},
openPopupAddress () { // 现住址picker
this.addressPopupVisible = true
......@@ -607,6 +871,30 @@ export default {
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
......@@ -615,70 +903,136 @@ export default {
this.tab1Form.sex = getSexByIdCard(this.BaseForm.idCard) === '1' ? '男' : '女'
}
},
handelSave () {
console.log('submit')
confirmSignature () {
this.BaseValidateHandle()
if (this.labelId === 2) { // 子女
if (this.pageType === 1) { // 子女
if (!this.BaseValidate.nameState || !this.BaseValidate.birthKidState) {
return false
}
} else if (this.labelId === 1 || this.labelId === 3) { // 配偶
if (!this.BaseValidate.nameState || !this.BaseValidate.idCardState || !this.BaseValidate.lastMensesTimeState) {
} else if (this.pageType === 0) { // 配偶
if (!this.BaseValidate.nameState || !this.BaseValidate.idCardState || !this.BaseValidate.lastMensesTimeState || !this.BaseValidate.chooseImg1State) {
return false
}
}
let params = {
userId: this.userId,
name: this.userData.name,
phone: '',
orgId: this.orgId,
orgName: this.orgName,
relationType: this.labelId === 2 ? 1 : this.labelId === 1 || this.labelId === 3 ? 2 : ''
if (parseInt(this.noticeCheck[0]) !== 1) {
this.$toast({
message: '请预览签约须知后勾选',
position: 'center',
duration: 3000
})
return false
}
if (this.labelId === 2) {
params.idCard = this.userData.idCard === '' ? null : this.userData.idCard
params.sex = this.userData.idCard !== '' ? getSexByIdCard(this.userData.idCard) : this.userData.sexKid === '男孩' ? '1' : this.userData.sexKid === '女孩' ? '2' : '3'
params.birth = this.userData.birthKid
} else if (this.labelId === 1 || this.labelId === 3) {
params.idCard = this.userData.idCard
params.sex = getSexByIdCard(this.userData.idCard)
params.lastMensesTime = this.userData.lastMensesTime
params.birth = getBirthByIdNumber(this.userData.idCard)
}
// this.btnDisabled = true
// this.$Indicator.open()
// saveMember(params).then(res => {
// this.btnDisabled = false
// this.$Indicator.close()
// if (res.code === 0 && res.data) {
// this.$toast({
// message: '保存成功',
// position: 'center',
// duration: 3000
// })
// let that = this
// setTimeout(function () {
// that.$router.push({
// path: '/'
// })
// }, 2500)
// } 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
// })
// })
this.SignatureSheetVisible = true
this.signCanvasW = this.$refs.signCanvasBlock.offsetWidth
},
handelSubmit () { // 签名无误提交
this.signatureImage = this.$refs.signature.save()
if (this.signatureImage === '') {
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 ? '3' : this.pageType,
// 'healthCode': this.BaseForm.code,
'userAdress': this.BaseForm.street,
'shenBm': this.addressForm.ProvinceCode,
'shiBm': this.addressForm.CityCode,
'xiaBm': this.addressForm.RegionCode,
'xngBm': this.addressForm.StreetCode,
'villageBm': this.addressForm.VillagesCode,
'voucherUserId': this.userId,
'hyzl1': this.BaseForm.chooseImages2[0] ? this.BaseForm.chooseImages2[0] : '',
'hyzl2': this.BaseForm.chooseImages2[1] ? this.BaseForm.chooseImages2[1] : '',
'hyzl3': this.BaseForm.chooseImages2[2] ? this.BaseForm.chooseImages2[2] : '',
'hyzl4': this.BaseForm.chooseImages2[3] ? this.BaseForm.chooseImages2[3] : '',
'signSfzz': this.BaseForm.chooseImages[0] ? this.BaseForm.chooseImages[0] : '',
'signSfzf': this.BaseForm.chooseImages[1] ? this.BaseForm.chooseImages[1] : ''
}
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
})
let that = this
setTimeout(function () {
that.$router.push({
path: '/home'
})
}, 2500)
} 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)
......@@ -784,6 +1138,11 @@ export default {
// this.stepCurrent = 5
this.cancelPopupAddress()
},
setOrgId (item) {
this.BaseForm.orgId = item.orgId
this.BaseForm.orgName = item.orgName
this.cancelPopupOrg()
},
getAreaListFn (params) { // 获取全国省市区街
getAreaList(params).then(res => {
if (params.level === 0) {
......@@ -801,6 +1160,35 @@ export default {
getVillages(params).then(res => {
this.VillagesData = res.records
})
},
handelChooseImage (type) {
let that = this
if ((that.BaseForm.chooseImages.length < 2 && type === 1) || (that.BaseForm.chooseImages2.length < 4 && type === 2)) {
wxpermission(() => {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
let localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
wx.getLocalImgData({
localId: localIds[0], // 图片的localID
success: function (res) {
var localData = res.localData // localData是图片的base64数据，可以用img标签显示
if (type === 1) { // 身份证照片
that.BaseForm.chooseImages.push(localData)
} else if (type === 2) { // 怀孕资料图片
that.BaseForm.chooseImages2.push(localData)
}
}
})
}
})
}, false)
}
},
removeChooseImgsByIndex (index) {
this.BaseForm.chooseImages.splice(index, 1)
}
}
}
......@@ -964,4 +1352,183 @@ 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;
margin-top: 1.2em;
}
.upload-list ul li {
padding-right: 5px;
margin-left: 0;
}
.upload-list ul li > span{
display: inline-block;
width: 90px;
height: 90px;
position: relative;
}
.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 > span > .close-btn {
position: absolute;
right: 0;
top: 0;
z-index: 1;
color: #9aa0a4;
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;
}
.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;
/* background-color: #dddee1; */
}
.signPopup .footer-btn {
overflow: hidden;
}
.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;
}
.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;
}
</style>
src/views/signing/indexbate.vue 0 → 100644
<template>
<div class="full-page">
<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" v-model="BaseForm.name" @blur="BaseValidateName" placeholder="请输入姓名"/>
<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" 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"/>
<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">{{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">{{BaseForm.address==''? '请选择现在居住地址':BaseForm.address}}</p>
<p class="m-b-normal" v-if="BaseForm.subAddress!=''">{{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>
</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="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="footer">
<button class="btn-default btn-block" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelSave">立即领取</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="switch province-list" v-if="stepCurrent===1">
<div class="title">选择区域</div>
<ul>
<li v-for="(item, index) in ProvinceData" @click="setProvince(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
</ul>
</div>
<div class="switch city-list" v-if="stepCurrent===2">
<div class="title">选择城市</div>
<ul>
<li v-for="(item, index) in CityData" @click="setCity(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
</ul>
</div>
<div class="switch area-list" v-if="stepCurrent===3">
<div class="title">选择区域</div>
<ul>
<li v-for="(item, index) in AreaData" @click="setArea(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
</ul>
</div>
<div class="switch street-list" v-if="stepCurrent===4">
<div class="title">选择街道</div>
<ul>
<li v-for="(item, index) in StreetData" @click="setStreet(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
</ul>
</div>
<div class="switch villages-list" v-if="stepCurrent===5">
<div class="title">选择居委会</div>
<ul>
<li v-for="(item, index) in VillagesData" @click="setVillages(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
</ul>
</div>
</div>
<div class="footer-btn">
<button class="btn-block">取消</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>
</template>
<script>
import { getStore } from '@/util/store'
// import { saveMember } from '@/api/basic/basic'
import { getOrgInfo, getSignInfo, getAreaList, getVillages } 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'
export default {
name: 'Home',
data () {
return {
userId: getStore({ name: '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 : '',
orgInfo: {
picture: _defaultPicture,
orgname: '',
groupname: ''
},
signStatus: 'create',
alreadySignNum: 0, // 已签约服务人员数
childrenArr: [], // 签约（儿童）服务成员
childrensValidate: [], // 签约（儿童）服务成员，姓名、性别、年龄校验合法性
addChildrenBtnVisible: true,
BaseForm: {
name: '',
idCard: '',
phone: '',
lastMensesTime: '', // 末次月经时间
address: '',
subAddress: '',
code: ''
},
BaseValidate: { // 表单各个列是否合法状态
nameState: true,
idCardState: true,
phoneState: true,
lastMensesTimeState: true,
addressState: true
},
btnDisabled: false,
pickerLastMensesTimeDefault: new Date(), // 末次月经时间默认选中日期为当天
pickerLastMensesTimeStart: SubtractDay(290), // 末次月经时间起始日期为当天日期前290天
pickerLastMensesTimeEnd: new Date(), // 末次月经时间控件结束日期小于当天
pickerBirthDefault: new Date(), // 出生年月默认选中日期为当天
pickerBirthEnd: new Date(), // 出生年月控件结束日期小于当天
addressPopupVisible: false, // “现住址”popup显示状态
addressForm: {
province: '贵州省',
city: '贵阳市',
area: '',
street: '',
villages: '',
ProvinceCode: '520000',
CityCode: '520100',
AreaCode: '',
StreetCode: '',
VillagesCode: ''
},
stepCurrent: 3, // 地址省市区街道步骤下标
ProvinceData: null, // 省会列表数据
CityData: null, // 城市列表数据
AreaData: null, // 区域列表数据
StreetData: null, // 街道列表数据
VillagesData: null, // 居委会列表数据
tab1Form: { // 签约（孕产妇）服务成员信息
name: '',
IdCard: '',
age: '',
type: '',
sex: '',
state: ''
}
}
},
created () {
this.getOrgInfoFn()
},
mounted: function () {
},
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)
if (res && res.records != null) {
let records = res.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
}
getSignInfo(params).then(res => {
this.$Indicator.close()
let data = res.records
console.log(data)
if (data.signId && data.signId !== '') {
this.signStatus = 'update'
} else {
this.signStatus = 'create'
}
this.accountId = data.accountId
this.fileUuid = data.fileUuid
this.signId = data.signId
this.userId = data.userId
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.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
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' ? '男孩' : '女孩',
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()
},
BaseValidateName () { // 姓名验证
if (validatename(this.BaseForm.name)) {
this.BaseValidate.nameState = true
} else {
this.BaseValidate.nameState = false
}
},
BaseValidateIdCard () { // 身份证验证
if (cardid(this.BaseForm.idCard)[0]) {
this.BaseValidate.idCardState = false
} else {
this.BaseValidate.idCardState = true
}
},
// 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
}
},
BaseValidateAddress () { // 现住址验证
if (this.BaseForm.address === '') {
this.BaseValidate.addressState = false
} else {
this.BaseValidate.addressState = true
}
},
BaseValidateBirthKid () { // 出生日期验证
if (this.BaseForm.birthKid === '') {
this.BaseValidate.birthKidState = false
} else {
this.BaseValidate.birthKidState = true
}
},
openPickerLastMensesTime () { // 打开末次月经时间日期控件
this.$refs.pickerLastMensesTime.open()
},
lastMensesTimePickerConfirm (date) {
const selectedDate = new Date(date)
let month = selectedDate.getMonth() + 1
if (selectedDate.getMonth() + 1 <= 9) {
month = '0' + (selectedDate.getMonth() + 1)
}
this.BaseForm.lastMensesTime = selectedDate.getFullYear() + '-' + month + '-' + selectedDate.getDate()
},
openPickerBirth () { // 打开出生日期控件
this.$refs.pickerBirth.open()
},
pickerBirthConfirm (date) {
this.BaseValidate.birthKidState = true
const selectedDate = new Date(date)
let month = selectedDate.getMonth() + 1
if (selectedDate.getMonth() + 1 <= 9) {
month = '0' + (selectedDate.getMonth() + 1)
}
this.userData.birthKid = selectedDate.getFullYear() + '-' + month + '-' + selectedDate.getDate()
},
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.region !== '') {
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
}
},
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' ? '男' : '女'
}
},
handelSave () {
console.log('submit')
this.BaseValidateHandle()
if (this.labelId === 2) { // 子女
if (!this.BaseValidate.nameState || !this.BaseValidate.birthKidState) {
return false
}
} else if (this.labelId === 1 || this.labelId === 3) { // 配偶
if (!this.BaseValidate.nameState || !this.BaseValidate.idCardState || !this.BaseValidate.lastMensesTimeState) {
return false
}
}
let params = {
userId: this.userId,
name: this.userData.name,
phone: '',
orgId: this.orgId,
orgName: this.orgName,
relationType: this.labelId === 2 ? 1 : this.labelId === 1 || this.labelId === 3 ? 2 : ''
}
if (this.labelId === 2) {
params.idCard = this.userData.idCard === '' ? null : this.userData.idCard
params.sex = this.userData.idCard !== '' ? getSexByIdCard(this.userData.idCard) : this.userData.sexKid === '男孩' ? '1' : this.userData.sexKid === '女孩' ? '2' : '3'
params.birth = this.userData.birthKid
} else if (this.labelId === 1 || this.labelId === 3) {
params.idCard = this.userData.idCard
params.sex = getSexByIdCard(this.userData.idCard)
params.lastMensesTime = this.userData.lastMensesTime
params.birth = getBirthByIdNumber(this.userData.idCard)
}
// this.btnDisabled = true
// this.$Indicator.open()
// saveMember(params).then(res => {
// this.btnDisabled = false
// this.$Indicator.close()
// if (res.code === 0 && res.data) {
// this.$toast({
// message: '保存成功',
// position: 'center',
// duration: 3000
// })
// let that = this
// setTimeout(function () {
// that.$router.push({
// path: '/'
// })
// }, 2500)
// } 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.RegionCode)
} 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.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
},
getCity (parentCode) { // 根据省会code获取城市信息
let params = {
parentCode: parentCode,
level: 1
}
this.getAreaListFn(params)
},
setCity (code, val) {
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
},
getArea (parentCode) { // 根据城市code获取区域信息
let params = {
parentCode: parentCode,
level: 2
}
this.getAreaListFn(params)
},
setArea (code, val) {
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
},
getStreet (parentCode) { // 根据区域code获取街道信息
let params = {
parentCode: parentCode,
level: 3
}
this.getAreaListFn(params)
},
setStreet (code, val) {
this.getVillages(code)
this.addressForm.street = val
this.addressForm.StreetCode = code
this.addressForm.villages = ''
this.addressForm.VillagesCode = ''
this.stepCurrent = 5
},
getVillages (parentCode) { // 根据街道code获取居委会信息
let params = {
parentCode: parentCode,
level: 4
}
this.getVillagesFn(params)
},
setVillages (code, val) {
this.addressForm.villages = val
this.addressForm.VillagesCode = code
// this.stepCurrent = 5
this.cancelPopupAddress()
},
getAreaListFn (params) { // 获取全国省市区街
getAreaList(params).then(res => {
if (params.level === 0) {
this.ProvinceData = res.records
} else if (params.level === 1) {
this.CityData = res.records
} else if (params.level === 2) {
this.AreaData = res.records
} else if (params.level === 3) {
this.StreetData = res.records
}
})
},
getVillagesFn (params) { // 获取街道下居委会信息
getVillages(params).then(res => {
this.VillagesData = res.records
})
}
}
}
</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;
}
.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 > .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 > .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;
}
</style>
src/views/user/index.vue
......@@ -265,4 +265,11 @@ export default {
.line-list > .item > .status > img {
width: 100%;
}
.line-list .card-item > .card-item-content > .card-item-table > .price .label {
font-size: 2em;
}
.line-list .card-item > .card-item-content > .card-item-table > .info .title {
margin-bottom: 5px;
}
</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