Skip to content

P
pica-professional-exam
提交 c6dd8279 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

1、几个通用组件及相应实例 

2、学分相关业务页面（提交用户信息页面；学分详情页面）
上级 b63d399b
隐藏空白字符变更
内嵌 并排
正在显示 包含 645 行增加 和 3 行删除
src/components/business/update-dialog.vue
浏览文件 @ c6dd8279
......@@ -2,7 +2,7 @@
<div class="dialog-mask-container" v-if="showGoUpdate">
<div class="dialog-mask"></div>
<div class="dialog-container">
<div class="dialog-content">更新至最新版本才能观看视频哦</div>
<div class="dialog-content">更新至最新版本才能观看视频哦更新至最新版本才能观看视频哦</div>
<div class="dialog-footer v-hairline-top">
<span @click.stop.prevent="goUpdateHandler(1)">取消</span>
<span class="confirm-btn v-hairline-left" @click.stop.prevent="goUpdateHandler(2)">立即更新</span>
......
src/components/cme/common-bottom-info.vue 0 → 100644
浏览文件 @ c6dd8279
<template>
<div class="common-bottom-info-wrapper">
<div class="common-bottom">
<span>若有问题可联系客服：</span>
<img src="../../images/cme/icon-phone.png" />
<span>400-920-8877</span>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "../../style/mixin";
.common-bottom-info-wrapper {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
margin: 20px auto;
.common-bottom {
display: flex;
display: 100%;
flex-direction: row;
font-size: 14px;
text-align: center;
justify-content: center;
align-items: center;
span {
font-size: 14px;
font-weight: 400;
height: 14px;
line-height: 14px;
color: #676869;
&:nth-child(3) {
color: #449284;
}
}
// span:nth-child(1) {
// color: #449284;
// }
img {
margin-right: 4px;
width: 10px;
height: 12px;
}
}
}
</style>
src/components/cme/common-button.vue 0 → 100644
浏览文件 @ c6dd8279
<template>
<div class="common-button-wrapper button-default" :class="type" @click="btnClick">
<span>{{btnText}}</span>
</div>
</template>
<script>
export default {
props: {
btnText: {
type: String,
default: '确定'
},
type: {
type: String,
default: 'primary'
}
},
data() {
return {
}
},
methods: {
btnClick() {
if(this.type == 'disabled') return;
this.$emit('btnClick');
}
},
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.common-button-wrapper {
font-size: px2rem(14px);
margin: px2rem(20px) px2rem(15px);
text-align: center;
&.button-default {
span {
display: block;
height: px2rem(50px);
line-height: px2rem(50px);
width: 100%;
border-radius: px2rem(25px);
font-size: 17px;
font-weight: 700;
color: #FFFFFF;
background: #449284;
}
}
&.primary {
span {
color: #FFFFFF;
background: #449284;
}
}
&.disabled {
span {
color: rgba(255, 255, 255, 0.95);
background: rgba(68, 146, 132, 0.4);;
}
}
}
</style>
\ No newline at end of file
src/components/cme/common-dialog.vue 0 → 100644
浏览文件 @ c6dd8279
<template>
<div class="common-dialog-wrraper" v-if="isShowDialog">
<div class="dialog-mask"></div>
<div class="dialog-container">
<div class="dialog-content">{{content}}</div>
<div v-show="needSubContent" class="dialog-sub-content" v-html="subContent"></div>
<div class="dialog-footer v-hairline-top">
<span :class="{'single-btn': isSingle}" @click.stop.prevent="handlerAction(1)">{{cancleBtnText}}</span>
<span v-show="!isSingle" class="confirm-btn v-hairline-left" @click.stop.prevent="handlerAction(2)">{{confirmBtnText}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "common-dialog",
data() {
return {
};
},
props: {
content: {
type: String,
default: ''
},
needSubContent: {
type: Boolean,
default: false
},
subContent: {
type: String,
default: ''
},
cancleBtnText: {
type: String,
default: '取消'
},
confirmBtnText: {
type: String,
default: '确定'
},
isShowDialog: {
type: Boolean,
default: false
},
isSingle: {
type: Boolean,
default: false
},
},
methods: {
handlerAction(type) {
this.$emit("handlerAction", type);
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.common-dialog-wrraper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2019;
.dialog-mask {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2020;
}
.dialog-container {
z-index: 2021;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
width: px2rem(300px);
font-size: px2rem(18px);
-webkit-transition: 0.3s;
transition: 0.3s;
border-radius: px2rem(4px);
background-color: #fff;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
.dialog-content {
// margin: px2rem(30px) px2rem(22px);
margin: px2rem(30px);
text-align: center;
font-size: px2rem(18px);
font-weight: 400;
color: #373839;
}
.dialog-sub-content {
margin: px2rem(-16px) px2rem(30px) px2rem(30px);
// margin: px2rem(-16px) px2rem(22px) px2rem(30px);
text-align: left;
font-size: px2rem(14px);
line-height: px2rem(24px);
font-weight: 400;
color: #676869;
}
.dialog-footer {
height: px2rem(50px);
display: flex;
align-items: center;
&.v-hairline-top::after {
border-top-width: 1px;
}
span {
display: inline-block;
// width: 50%;
flex: 1;
height: px2rem(50px);
line-height: px2rem(50px);
font-size: px2rem(17px);
text-align: center;
color: #979899;
&.v-hairline-left::after {
border-left-width: 1px;
}
&.confirm-btn {
color: #449284;
}
&.single-btn {
color: #449284;
}
}
}
}
[class*="v-hairline"] {
position: relative;
&::after {
content: " ";
position: absolute;
pointer-events: none;
box-sizing: border-box;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border: 0 solid #f0f1f2;
}
}
}
</style>
src/router/router.js
浏览文件 @ c6dd8279
......@@ -5,6 +5,9 @@ const complist = r => require.ensure([], () => r(require('../views/component-det
const cooplist = r => require.ensure([], () => r(require('../views/cooperation-details')), 'cooplist')
const parent = r => require.ensure([], () => r(require('../views/parent-page')), 'parent')
const merge = r => require.ensure([], () => r(require('../views/merge-detail')), 'merge')
const test = r => require.ensure([], () => r(require('../views/test-components')), 'test-components')
const CreditEdit = r => require.ensure([], () => r(require('../views/credit-edit')), 'credit-edit')
const CreditDetail = r => require.ensure([], () => r(require('../views/credit-detail')), 'credit-detail')
export default [{
path: '/',
......@@ -38,5 +41,18 @@ export default [{
path: '/coop',
component: merge
},
{
path: '/test',
component: test
},
{
path: '/credit-edit',
component: CreditEdit
},
{
path: '/credit-detail',
component: CreditDetail
},
]
}]
src/style/common.scss
浏览文件 @ c6dd8279
......@@ -12,8 +12,8 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
font-style: normal;
text-decoration: none;
border: none;
font-size: px2rem(14px);
color: #333;
// font-size: px2rem(14px);
// color: #333;
font-weight: normal;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-family: "PingFangSC-Regular","-apple-system-font","Source Han Sans","Helvetica Neue","sans-serif";
......@@ -139,4 +139,7 @@ html,body{
border: 0 solid #F0F1F2;
}
}
// .van-toast__text {
// color: #fff !important;
// }
src/style/global.scss
浏览文件 @ c6dd8279
......@@ -82,4 +82,28 @@
}
.fs30{
font-size: px2rem(15px);
}
.van-cell {
padding: px2rem(20px) 0 !important;
font-size: px2rem(15px) !important;
color: #373839 !important;
}
.van-cell:not(:last-child)::after {
left: 0 !important;
}
.van-field__control {
text-align: right !important;
}
.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
border-width: px2rem(1px) 0 !important;
}
// .van-hairline, .van-hairline--surround, .van-hairline--top, .van-hairline--top-bottom {
// position: inherit !important;
// }
// .van-hairline--top {
// }
.van-field__label, .van-field__body {
height: px2rem(15px) !important;
line-height: px2rem(15px) !important;
}
\ No newline at end of file
src/views/credit-detail.vue 0 → 100644
浏览文件 @ c6dd8279
<!-- 学分：个人信息编辑页面 -->
<template>
<section class="credit-detail-wrapper">
<CommonNavbar
:bgColor="bgColor"
v-show="isShowNavbar"
:isBlack="isBlack"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:burialPoint="pointStyle"
borderStyle="0px solid #fff"
:backMethod="from"
></CommonNavbar>
<section class="info">
<div class="credit-basic">
<ul>
<li>
<span>项目名称</span>
<span>人工髋关节翻修手术的策略及技术</span>
</li>
<li>
<span>学分等级</span>
<span>国家级Ⅰ类</span>
</li>
<li>
<span>学分</span>
<span>5学分</span>
</li>
<li>
<span>申请范围</span>
<span>河北省 石家庄市</span>
</li>
<li>
<span>状态</span>
<span :class="statusStyle">{{statusText}}</span>
</li>
</ul>
<div v-show="needShowTips" class="tips" >
<span class="triangle"></span>
您提交的信息不准确，请重新提交或联系云鹊医官方客服
</div>
</div>
<CommonSpliteLine v-show="needShowUserInfo"></CommonSpliteLine>
<div class="credit-user">
<ul>
<li>
<span>申请人</span>
<span>王小丫</span>
</li>
<li>
<span>身份证号</span>
<span>210182198012240988</span>
</li>
<li>
<span>继续医学教育IC卡号</span>
<span>150NMKL91</span>
</li>
<li>
<span>申请时间</span>
<span>2019年11月18日 23:56:56</span>
</li>
</ul>
</div>
</section>
<CommonButton v-if="needShowBtn" @btnClick="btnClick" :btnText="btnText"></CommonButton>
<CommonBottomInfo></CommonBottomInfo>
</section>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CommonButton from "@/components/cme/common-button";
import CommonSpliteLine from "@/components/common/common-splite-line";
import CommonBottomInfo from "@/components/cme/common-bottom-info";
export default {
components: {
CommonNavbar,
CommonButton,
CommonSpliteLine,
CommonBottomInfo
},
data() {
return {
from: "outer",
isBlack: true,
bgColor: "#fff",
navTitle: "学分详情",
isShowNavbar: true,
isFixNavbar: false,
pointStyle: "activity",
// buttonStyleType: "primary",
// 1: 学习中 continue 不显示用户信息 不显示提示信息
// 2: 学习已经完成 completed 不显示用户信息 不显示提示信息
// 3：审核中 continue 显示用户信息 预计2019年12月10日前有反馈结果
// 4: 审核失败 error 显示用户信息 您提交的信息不准确，请重新提交或联系云鹊医官方客服
// 5: 审核通过 continue 不显示用户信息 不显示提示信息
status: 4,
statusStyle: "continue",
statusText: "学习中",
statusDescText: "",
needShowTips: false,
needShowUserInfo: true,
needShowBtn: false,
btnText: "重新提交"
};
},
created() {
this.statusChanged(this.status);
},
methods: {
statusChanged(status) {
this.needShowUserInfo = false;
this.needShowTips = false;
this.statusDescText = '';
this.statusText = "学习中";
this.statusStyle = 'continue';
this.needShowBtn = false;
if(status == 1) {
} else if(status == 2){
this.needShowBtn = true;
this.statusText = "学习已经完成";
this.btnText = '申请学分';
this.statusStyle = 'completed';
} else if(status == 3){
this.needShowUserInfo = true;
this.needShowTips = true;
this.statusText = "审核中";
this.statusDescText = '预计2019年12月10日前有反馈结果';
} else if(status == 4){
this.needShowUserInfo = true;
this.needShowTips = true;
this.statusText = "审核失败";
this.statusStyle = 'error';
this.needShowBtn = true;
this.btnText = '重新提交';
this.statusDescText = '您提交的信息不准确，请重新提交或联系云鹊医官方客服';
} else if(status == 5){
this.statusText = "审核通过";
}
},
btnClick() {
if(this.status == 2) {
alert('调用申请学分的接口');
}
if(this.status == 4) {
alert('调用重新提交的接口');
}
}
},
};
</script>
<style lang="scss" scoped>
@import "../style/mixin";
.credit-detail {
&-wrapper {
.tips {
position: relative;
top: 0;
left: 0;
margin: px2rem(10px) 0 px2rem(10px);
border-radius: px2rem(4px);
padding: px2rem(10px);
font-weight: 400;
font-size: px2rem(12px);
// height: px2rem(32px);
line-height: px2rem(12px);
color: #979899;
background: #f8f9fa;
.triangle {
position: absolute;
top: px2rem(-5px);
transform: rotateZ(45deg);
right: px2rem(10px);
width: px2rem(10px);
height: px2rem(10px);
background: #f8f9fa;
}
}
.info {
font-size: px2rem(14px);
font-weight: 400;
margin-bottom: px2rem(50px);
.credit-basic {
margin: px2rem(20px) px2rem(15px);
}
.credit-user {
margin: px2rem(20px) px2rem(15px);
}
ul {
li {
display: flex;
flex-direction: row;
justify-content: space-between;
height: px2rem(30px);
line-height: px2rem(30px);
span {
&:nth-child(1) {
color: #979899;
}
&:nth-child(2) {
color: #373839;
}
&.continue {
color: #449284;
}
&.error {
color: #FB5B52;
}
&.completed {
color: #373839;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/credit-edit.vue 0 → 100644
浏览文件 @ c6dd8279
<!-- 学分：个人信息编辑页面 -->
<template>
<section class="credit-edit-wrapper">
<CommonNavbar
:bgColor="bgColor"
v-show="isShowNavbar"
:isBlack="isBlack"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:burialPoint="pointStyle"
borderStyle="0px solid #fff"
:backMethod="from"
></CommonNavbar>
<van-cell-group style="margin: 10px 15px;">
<van-field label-width="150" v-model="userName" label="姓名" placeholder="请填写您的姓名" />
<van-field label-width="150" v-model="idCardId" label="身份证号" placeholder="请填写您的真实身份证号" />
<van-field label-width="150" v-model="icCardId" label="继续医学教育IC卡号" placeholder="请填写您的IC卡号" />
</van-cell-group>
<div class="credit-edit-tips">
您的身份证号将用于生成项目学分证书对应的编号，请确保您所填写的身份证号的真实性
</div>
<CommonButton :type="buttonStyleType" @btnClick="isShowDialog = true" btnText="提交"></CommonButton>
<CommonDialog content="提交成功" subContent="您可在“个人中心-证书与学分”中查看审核结果" cancleBtnText="我知道了" isSingle needSubContent :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog>
</section>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CommonButton from "@/components/cme/common-button";
import CommonDialog from "@/components/cme/common-dialog";
export default {
components: {
CommonNavbar,
CommonButton,
CommonDialog
},
data() {
return {
userName: "",
idCardId: "",
icCardId: "",
from: "outer",
isBlack: true,
bgColor: "#fff",
navTitle: "申请学分",
isShowNavbar: true,
isFixNavbar: false,
pointStyle: "activity",
buttonStyleType: 'disabled1',
isShowDialog: false
};
},
methods: {
handlerDialogAction(type) {
this.isShowDialog = false;
}
},
};
</script>
<style lang="scss" scoped>
@import "../style/mixin";
.credit-edit-tips {
margin: px2rem(10px) px2rem(15px) px2rem(50px);
font-weight: 400;
font-size: px2rem(14px);
line-height: px2rem(21px);
color: #979899;
}
</style>
\ No newline at end of file
src/views/index.vue
浏览文件 @ c6dd8279
......@@ -208,6 +208,7 @@ export default {
</script>
<style lang="scss" scoped>
@import "../style/mixin";
.page-content {
&-table {
position: fixed;
......
src/views/test-components.vue 0 → 100644
浏览文件 @ c6dd8279
<template>
<div class="test-container">
<CommonButton btnText="去学习"></CommonButton>
<!-- <CommonDialog content="该项目仅对河北省石家庄市的用户开放" :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
<!-- <CommonDialog content="您暂未认证身份，完成认证身份后可申请学分" confirmBtnText="去认证" :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
<!-- <CommonDialog content="您暂未加入机构，加入机构后且认证身份后可申请学分" confirmBtnText="加入机构" :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
<!-- <CommonDialog content="您的所属机构不在可申请范围（河北省石家庄市）内" cancleBtnText="我知道了" isSingle :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
<CommonDialog content="提交成功" subContent="您可在“个人中心-证书与学分”中查看审核结果" cancleBtnText="我知道了" isSingle needSubContent :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog>
<!-- <CommonDialog content="兑换" subContent="确定要花200云鹊豆兑换课程吗？<br>我的云鹊豆：<span style='color:#FF9A4B;'>1500</span>" cancleBtnText="我再想想" confirmBtnText="确认兑换" needSubContent :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
<CommonBottomInfo></CommonBottomInfo>
</div>
</template>
<script>
import CommonButton from "@/components/cme/common-button";
import CommonDialog from "@/components/cme/common-dialog";
import CommonBottomInfo from "@/components/cme/common-bottom-info";
export default {
data() {
return {
isShowDialog: true,
};
},
components: {
CommonButton,
CommonDialog,
CommonBottomInfo
},
mounted() {
// Toast
this.$toast({message: '展示图片', duration: 3000 });
},
beforeDestroyed() {},
methods: {
handlerDialogAction(type) {
this.isShowDialog = false;
}
}
};
</script>
<style lang="scss" scoped>
@import "../style/mixin";
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或