提交 f9cdaadb 编写于 作者: guangjun.yang's avatar guangjun.yang

代码整理、样式优化

上级 d2dc7da2
# COMPONENTS
**This directory is not required, you can delete it if you don't want to use it.**
The components directory contains your Vue.js Components.
_Nuxt.js doesn't supercharge these components._
<template>
<div class="about-container">
about nuxtjs ssr
</div>
</template>
<script>
// asyncData fetch 在组件中无效
export default {
data() {
return {
name: 'about'
}
}
}
</script>
<style lang="less">
.about-container {
font-size: 18px;
}
</style>
\ No newline at end of file
此差异已折叠。
<template>
<!-- 专项合作列表 -->
<section class="coop-container">
<div
v-for="(item , index) in dataList"
:key="index"
class="coop-item"
@click="jumpByAuthId(item)"
>
<div class="coop-item-left">
<img :src="item.attachmentUrl">
</div>
<div class="coop-item-right">
<span class="coop-item-right-title">{{item.projectName}}</span>
<span class="coop-item-right-other">
<img src="../../assets/images/org.png" >
{{item.organizationNameList | subOrgNames}}
</span>
<span v-if="item.authType == 1"
class="coop-item-right-other">
<img src="../../assets/images/pub-time.png" >
2010-10-10
<!-- {{item.oldTime}} -->
<!-- <span class="pro-status" :class="{continue: item.projectStatus == 5}">
{{item.projectStatus == 5 ? '进行中' : item.projectStatus == 10 ? '已结束' : ''}}
</span> -->
</span>
<span v-else
class="coop-item-right-other"
><img src="../../assets/images/pub-time.png" >
2010.01.10 ~ 2010.10.10
<!-- {{item.projectBegintimeLong | formatTime}}-{{item.projectEndtimeLong | formatTime}} -->
<!-- <span class="pro-status" :class="{continue: item.projectStatus == 5}">
{{item.projectStatus == 5 ? '进行中' : item.projectStatus == 10 ? '已结束' : ''}}
</span> -->
</span>
</div>
</div>
<!-- <NoMoreContent v-show="dataList.length > 9"></NoMoreContent> -->
<!-- <NoContent v-show="!dataList.length && isShow"></NoContent> -->
<!-- <van-popup
v-model="showGoUpdate"
position="bottom"
:style="{ height: '4.427rem' }"
>
<div class="update-dialog-content">
<p class="title">本项目需要更新至最新版本才能参加哦</p>
<p class="update-btn v-hairline-top confirm-btn" @click="goUpdateHandler">立即更新</p>
<p class="update-btn v-hairline-top" @click="showGoUpdate = false">取消</p>
</div>
</van-popup> -->
</section>
</template>
<script>
// import NoMoreContent from "@/components/business/no-more-content";
// import NoContent from "@/components/business/no-content";
// import UpdateDialog from "@/components/business/update-dialog";
// import { setEventByModuleCode, deepCopy, getWebPageUrl } from "@/utils/index";
import { goNativePage, goPageByNative } from "@/utils/index";
// import { getAppVersion } from "@/utils";
// import { mapActions, mapGetters } from "vuex";
// import { Popup } from 'vant';
export default {
name: "coop-list-item",
data() {
return {
bgColor: "green"
};
},
props: {
dataList: {
type: Array,
default: () => []
},
},
// computed: {
// ...mapGetters(["userInfo"])
// },
components: {
// NoMoreContent,
// NoContent,
// UpdateDialog,
},
mounted() {},
filters: {
subOrgNames(orgNameList) {
let allName = orgNameList[0];
for(let i = 1; i < orgNameList.length; i ++) {
allName += `/${orgNameList[i]}`
}
if (allName && allName.length > 13) {
return allName.substring(0, 13) + '...'
} else {
return allName
}
},
// 将字符串截短至指定长度,并用在最后追加特定字符串(例如:...)
shortNameL(value, length = 15, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
},
methods: {
jumpByAuthId(pInfo) {
// this.$sendBuriedData({
// component_tag: '467#400141'
// });
if(pInfo.authId == 1) {
goNativePage(this, pInfo);
} else {
goPageByNative(this, pInfo);
}
}
}
};
</script>
<style scoped lang="less">
.coop-container {
position: relative;
margin: 0px 15px;
&-status {
position: absolute;
top: 6px;
left: 0;
// display: block;
width: 44px;
height: 18px;
line-height: 18px;
padding: 0 0 0 4px;
background: rgba(88, 144, 221, 1);
color: #fff;
font-size: 11px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
}
.coop-item {
display: flex;
width: 100%;
height: 128px;
border-bottom: 1px solid #f0f0f0;
background: #fff;
flex-direction: row;
justify-content: center;
align-items: center;
img {
width: 115px;
height: 86px;
margin-right: 15px;
border-radius: 3px;
}
&-left {
display: flex;
position: relative;
top: 0;
}
&-right {
display: flex;
width: 215px;
flex-direction: column;
padding-top: 4px;
&-title {
height: 50px;
line-height: 23px;
font-size: 16px;
font-weight: 700;
color: rgba(55, 56, 57, 1);
}
&-other {
height: 20px;
line-height: 20px;
font-size: 13px;
font-weight: 400;
color: rgba(151, 152, 153, 1);
& > img {
position: relative;
top: 2px;
left: 0;
width: 15px;
height: 15px;
margin-right: 0;
}
.pro-status {
float: right;
font-size: 13px;
padding-right: 4px;
color: #979899;
&.continue {
color: #449284;
}
&.end {
color: #979899;
}
}
}
}
}
.update-dialog-content{
padding: 0 15px;
box-sizing: border-box;
.title{
text-align: center;
color: #373839;
font-size: 18px;
padding: 15px 0;
line-height: 25px;
}
.update-btn{
text-align: center;
height: 55px;
line-height: 55px;
font-size: 16px;
color: #979899;
&.confirm-btn{
color: #449284;
}
&.v-hairline-top::after{
border-top-width: 1px;
}
}
}
</style>
<style>
.van-overlay{
background-color: rgba(0,0,0,0.5);
}
</style>
<!-- 区域与机构选择(表头)组件 -->
<template>
<ul class="common-area-select">
<li class="center" @click="areaClick">
{{areaName}}<img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
</li>
<li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
{{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
</li>
</ul>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
areaName: {
type: String,
default: "全部"
},
orgName: {
type: String,
default: "全部机构"
},
showArea: {
type: Boolean,
default: false,
},
showOrg: {
type: Boolean,
default: false
}
},
computed: {
...mapGetters({
orgList: 'orgList',
areaDegree: 'areaDegree'
}),
isNotVisible() {
if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
return true;
} else {
return false;
}
}
},
methods: {
areaClick() {
this.$emit("areaClick");
},
orgClick() {
this.$emit("orgClick");
}
}
};
</script>
<style lang="less" scoped>
.common-area-select {
&.fixed {
position: fixed;
top: 69px;
z-index: 10000000;
}
// padding-top: 50px;
display: flex;
width: 100%;
height: 35px;
line-height: 35px;
margin: 2px 0 0px;
flex-direction: row nowrap;
align-content: center;
align-items: center;
text-align: center;
justify-content: center; /* 水平居中 */
.center {
flex: 1;
font-size: 15px;
font-weight: 400;
color: #676869;
&.gray {
color: #C7C8C9;
}
}
img {
// padding-top: 10px;
position: relative;
left: 3px;
top: 1px;
width: 12px;
height: 12px;
}
}
</style>
<!-- 区域与机构选择(表头)组件 -->
<template>
<ul class="common-area-select">
<li class="center" @click="areaClick">
{{areaName}}<img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
</li>
<li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
{{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
</li>
</ul>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
areaName: {
type: String,
default: "全部"
},
orgName: {
type: String,
default: "全部机构"
},
showArea: {
type: Boolean,
default: false,
},
showOrg: {
type: Boolean,
default: false
}
},
computed: {
...mapGetters({
orgList: 'orgList',
areaDegree: 'areaDegree'
}),
isNotVisible() {
if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
return true;
} else {
return false;
}
}
},
methods: {
areaClick() {
this.$emit("areaClick");
},
orgClick() {
this.$emit("orgClick");
}
}
};
</script>
<style lang="less" scoped>
.common-area-select {
// padding-top: 50px;
display: flex;
width: 100%;
height: 35px;
line-height: 35px;
margin: 2px 0 10px;
flex-direction: row nowrap;
align-content: center;
align-items: center;
text-align: center;
justify-content: center; /* 水平居中 */
.center {
flex: 1;
font-size: 15px;
font-weight: 400;
color: #676869;
&.gray {
color: #C7C8C9;
}
}
img {
// padding-top: 10px;
position: relative;
left: 3px;
top: 1px;
width: 12px;
height: 12px;
}
}
</style>
...@@ -4,9 +4,6 @@ ...@@ -4,9 +4,6 @@
<li class="center" @click="areaClick"> <li class="center" @click="areaClick">
<span><img class="map" src="../../assets/images/map-icon.png"/>{{areaName}}</span><img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/> <span><img class="map" src="../../assets/images/map-icon.png"/>{{areaName}}</span><img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
</li> </li>
<!-- <li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
{{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
</li> -->
</ul> </ul>
</template> </template>
<script> <script>
...@@ -17,31 +14,23 @@ export default { ...@@ -17,31 +14,23 @@ export default {
type: String, type: String,
default: "全部" default: "全部"
}, },
orgName: {
type: String,
default: "全部机构"
},
showArea: { showArea: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
showOrg: {
type: Boolean,
default: false
}
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
orgList: 'orgList', // orgList: 'orgList',
areaDegree: 'areaDegree' areaDegree: 'areaDegree'
}), }),
isNotVisible() { // isNotVisible() {
if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) { // if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
return true; // return true;
} else { // } else {
return false; // return false;
} // }
} // }
}, },
methods: { methods: {
......
<!-- Tabs组件 -->
<template>
<div class="common-tabs-wrapper">
<ul class="common-tabs">
<li
v-show="(item === '总体概况'
|| item === '人群分析'
|| item === '课程分析' && projectInfo.existCourse === 1)
|| (item === '考试分析' && projectInfo.existExam === 1)
|| (item === '学习效果分析' && projectInfo.existEffect === 1)"
v-for="(item, index) in tapList"
:class="{'active': index === cIndex}"
:key="index"
@click="clickTab(index)"
>{{item}}</li>
</ul>
<span class="over"></span>
<span class="border"></span>
</div>
</template>
<script>
export default {
data() {
return {
cIndex: 0,
tapList: [
"总体概况",
"人群分析",
"课程分析",
"考试分析",
"学习效果分析"
]
};
},
props: {
projectInfo: {
type: Object
}
},
mounted() {},
methods: {
clickTab(index) {
this.cIndex = index;
this.$emit("tabClicked", index);
}
}
};
</script>
<style lang="less" scoped>
.common-tabs-wrapper {
display: flex;
position: relative;
top: 0;
left: 0;
z-index: 1;
font-size: 13px;
.common-tabs {
white-space: nowrap;
overflow-x: auto;
padding-bottom: 6px;
font-size: 13px;
li {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 13px;
font-weight: 700;
margin: 0 6px;
color: #979899;
background: #f0f1f2;
padding: 0 12px;
border-radius: 30px;
&:first-child {
margin-left: 15px;
}
&.active {
color: #449284;
background: #e3efed;
}
}
margin-top: 0;
}
.over {
display: block;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 6px;
z-index: 2;
background: #fff;
}
.border {
display: block;
width: 100%;
height: 1px;
bottom: -3px;
left: 0;
border-bottom: 1px solid #f0f1f2;
position: absolute;
z-index: 2;
}
}
</style>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
...@@ -157,7 +157,6 @@ export default { ...@@ -157,7 +157,6 @@ export default {
cityName: "", cityName: "",
countyId: "", countyId: "",
countyName: "", countyName: "",
patientAddress: "",
provinceId: "", provinceId: "",
provinceName: "", provinceName: "",
townId: "", townId: "",
...@@ -226,6 +225,7 @@ export default { ...@@ -226,6 +225,7 @@ export default {
// this.value.provinceName = this.areaList.provinceList[0].label; // this.value.provinceName = this.areaList.provinceList[0].label;
// this.value.areaDegree = this.areaList.provinceList[0].degree; // this.value.areaDegree = this.areaList.provinceList[0].degree;
// 包含所在机构
if(newVal[0].containHospitalFlag == 1) { if(newVal[0].containHospitalFlag == 1) {
// this.value.provinceName = newVal[1].label; // this.value.provinceName = newVal[1].label;
// this.value.provinceName = '请选择'; // this.value.provinceName = '请选择';
...@@ -347,7 +347,6 @@ export default { ...@@ -347,7 +347,6 @@ export default {
this.value.provinceId = item.id; this.value.provinceId = item.id;
this.queryParams.regionId = item.id; this.queryParams.regionId = item.id;
this.value.provinceName = item.label; this.value.provinceName = item.label;
// this.value.patientAddress = "";
this.value.cityId = null; this.value.cityId = null;
this.value.cityName = ""; this.value.cityName = "";
this.value.countyId = null; this.value.countyId = null;
...@@ -397,7 +396,6 @@ export default { ...@@ -397,7 +396,6 @@ export default {
this.value.cityId = item.id; this.value.cityId = item.id;
this.queryParams.regionId = item.id; this.queryParams.regionId = item.id;
this.value.cityName = item.label; this.value.cityName = item.label;
// this.value.patientAddress = "";
this.value.countyId = null; this.value.countyId = null;
this.value.countyName = ""; this.value.countyName = "";
this.value.townId = null; this.value.townId = null;
...@@ -441,7 +439,6 @@ export default { ...@@ -441,7 +439,6 @@ export default {
this.value.townName = ""; this.value.townName = "";
this.value.newOrgId = null; this.value.newOrgId = null;
this.value.newOrgName = "" this.value.newOrgName = ""
// this.value.patientAddress = "";
// 当前选中的样式 // 当前选中的样式
this.areaList.countyList.map(a => (a.selected = false)); this.areaList.countyList.map(a => (a.selected = false));
this.areaList.countyList[idx].selected = true; this.areaList.countyList[idx].selected = true;
...@@ -477,7 +474,6 @@ export default { ...@@ -477,7 +474,6 @@ export default {
this.value.townName = item.label; this.value.townName = item.label;
this.value.newOrgId = null; this.value.newOrgId = null;
this.value.newOrgName = "" this.value.newOrgName = ""
// this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
this.value.areaDegree = item.degree; this.value.areaDegree = item.degree;
if (item.degree == 0) { if (item.degree == 0) {
return; return;
...@@ -508,7 +504,6 @@ export default { ...@@ -508,7 +504,6 @@ export default {
this.value.newOrgId = item.id; this.value.newOrgId = item.id;
// this.queryParams.regionId = item.id; // this.queryParams.regionId = item.id;
this.value.newOrgName = item.label; this.value.newOrgName = item.label;
// this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
this.value.areaDegree = item.degree; this.value.areaDegree = item.degree;
if (item.degree == 0) { if (item.degree == 0) {
return; return;
...@@ -555,7 +550,6 @@ export default { ...@@ -555,7 +550,6 @@ export default {
} }
}, },
confirm() { confirm() {
console.log(this.areaList);
this.$emit("confirm", this.value); this.$emit("confirm", this.value);
}, },
cancelSelect() { cancelSelect() {
...@@ -635,7 +629,7 @@ export default { ...@@ -635,7 +629,7 @@ export default {
display: flex; display: flex;
position: relative; position: relative;
padding-bottom: 4px; padding-bottom: 4px;
margin: 0 5px;
&:after { &:after {
content: " "; content: " ";
position: absolute; position: absolute;
...@@ -656,7 +650,8 @@ export default { ...@@ -656,7 +650,8 @@ export default {
font-size: 15px; font-size: 15px;
line-height: 35px; line-height: 35px;
height: 35px; height: 35px;
padding: 0 15px; padding: 0 10px;
// padding-right: 15px;
box-sizing: border-box; box-sizing: border-box;
max-width: 25%; max-width: 25%;
text-align: left; text-align: left;
......
<!-- 选择机构组件 -->
<template>
<div class="select-wrapper" @touchmove.prevent.stop>
<div class="mask" @click="cancel" @touchmove.prevent.stop>
<div class="address-wrap" @click.stop @touchmove.prevent.stop>
<div class="tip-header">
<span class="cancel-btn" @click="cancel">取消</span>
<h3>选择机构</h3>
<span class="submit-btn" @click="confirm">确定</span>
</div>
<div class="address-select">
<ul class="show-address-header">
<li class="item active">
请选择
</li>
</ul>
<div class="address-content" @touchmove.stop>
<ul id="province">
<li
v-for="(orgItem, index) in dataList"
:key="index"
:class="{ active: orgItem.selected }"
@click="orgSelect(orgItem, index)"
>
<span>{{ orgItem.hospitalName }}</span>
<span v-show="orgItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "PicaOrg",
data() {
return {
dataList: [],
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 4
}
},
computed: {
...mapGetters({
orgList: "orgList"
})
},
watch: {
orgList: {
handler(newList) {
this.dataList = newList || [];
this.dataList.map(a => {
a.selected = false;
});
},
deep: true
}
},
created() {
},
methods: {
orgSelect(item, idx) {
this.dataList[idx].selected = !this.dataList[idx].selected;
this.$forceUpdate()
},
confirm() {
this.$emit("confirm", this.dataList);
},
cancel() {
this.$emit("cancel", false);
}
}
};
</script>
<style lang="less" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000000005;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
z-index: 1000000006;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 15px;
box-sizing: border-box;
max-width: 25%;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
height: 100%;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
# LAYOUTS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Application Layouts.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
# MIDDLEWARE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your application middleware.
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册