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

整理

上级 1310641d
<template>
<section class="back-top">
<div class="back-btn" @click="backTop">
<img src="../../assets/images/search/back-top.png" />
</div>
</section>
</template>
<script>
export default {
data() {
return {
objPoint: {}
};
},
mounted() {},
methods: {
backTop: function() {
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop > 0) {
document.documentElement.scrollTop = document.body.scrollTop = 0;
this.$emit("backTop");
}
}
}
};
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
.back-btn {
position: fixed;
width: px2rem(35px);
height: px2rem(35px);
right: px2rem(15px);
z-index: 100;
bottom: px2rem(80px);
img {
width: 100%;
height: 100%;
display: block;
}
}
</style>
<template>
<span style="border-bottom: 0" :style="{'border-color': borderColor, 'border-style': borderStyle, 'border-width': borderWidth}">
</span>
</template>
<script>
export default {
props: {
borderWidth: {
type: String,
default: '0.5px'
},
borderStyle: {
type: String,
default: 'solid'
},
borderColor: {
type: String,
default: '#F8F8F8'
}
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
// @import '@/assets/style/global';
</style>
<template>
<section class="loader loader--style3" title="2">
<div class="loader-mask"></div>
<article class="confirm-content">
<span class="confirm-content-title">{{confirmTitle}}</span>
<div class="confirm-content-split"></div>
<div class="confirm-content-btn">
<span v-bp="{ component_tag: '003#022015' }" class="confirm-content-btn-confirm" @click="confirm">{{confirmBtnText}}</span>
<span class="confirm-content-btn-split"></span>
<span v-bp="{ component_tag: '003#022016' }" class="confirm-content-btn-concle" @click="cancle">{{concleBtnText}}</span>
</div>
</article>
</section>
</template>
<script>
export default {
data() {
return {
}
},
props: {
confirmTitle: {
type: String,
default: '确认删除所有搜索历史'
},
confirmBtnText: {
type: String,
default: '删除'
},
concleBtnText: {
type: String,
default: '再想想'
}
},
methods: {
confirm() {
this.$emit('confirm')
},
cancle() {
this.$emit('cancle')
}
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
.loader {
&-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
background: rgba(205,205,205, 0.6);
}
.confirm-content {
position: absolute;
top: px2rem(280px);
left: px2rem(52.5px);
z-index: 101;
width: px2rem(270px);
height: px2rem(116px);
border-radius: px2rem(6px);
text-align: center;
font-weight: 400;
background: #fff;
&-title {
display: inline-flex;
height: px2rem(70px);
line-height: px2rem(70px);
font-size: px2rem(17px);
color: rgba(102,102,102,1);
}
&-split {
border-top: 1px solid #F0F0F0;
}
&-btn {
display: flex;
padding-top: px2rem(14px);
justify-content: center;
font-size: px2rem(15px);
&-confirm {
color: #999;
}
&-split {
margin: 0 px2rem(50px);
border-left: 1px solid #F0F0F0;
}
&-concle {
color: #4A9E8F;
}
}
}
}
</style>
<template>
<section>
<GroupTitle groupTitle="大家在看" :isShowNum="isShowNum"/>
<div class="cource-teach" id="adjust-u">
<div class="couse-cont">
<div
class="couse-list"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10"
:style="'height:'+clientHeight"
>
<div
v-show="index < 4"
:class="index%2==1 ? 'course-item end-left' : 'course-item'"
:key="index"
v-for="(item,index) in cParamData"
>
<div class="course-pic" @click="goToPage(item)">
<img :src="item.appCourseUrl" class="pic-tec">
<span class="course-tag">{{item.disName}}</span>
</div>
<p class="course-txt">{{item.name}}</p>
<div class="course-opt">
<span
class="opt-info"
>{{!item.showTime ? '' : item.showTime + ' |'}} {{item.joinNum}}人已学</span>
<span
:class="item.whetherFavors==2?'opt collect':'opt collected'"
@click="collectFun(item.whetherFavors,item.id,item.name)"
>{{item.whetherFavors==2?'收藏':'已收藏'}}</span>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import GroupTitle from "@/components/search/GroupTitle";
import { setEventByModuleCode } from '@/utils'
import { getRecommendCourseList, favorsCourse } from '@/service';
export default {
name: 'CourseAdjust',
data() {
return {
token: "",
isShowNum: false,
list: [],
pageNo: 2,
isDisabled: false,
pageSize: 10,
title: "为您推荐",
isCollected: "",
allLoaded: true,
loading: false, //是否滚动加载
isLoading: false, //加载中
noMore: false,
clientHeight: "auto",
isShowLoading: true,
menuHeight: 0,
ptop: 20,
popHeight: 0,
menuptop: 0,
isReauestBack: true,
isWeb: true
};
},
props: {
isFixed: {
default: false,
type: Boolean
},
statusBarHeight: {
type: Number,
default: 0
},
adjustPageNo: {
type: Number,
default: 1
},
userToken: {
type: String,
default: ""
},
parmData: {
type: Array,
default: () => []
}
},
created() {
if(process.client) {
let _this = this;
this.isWeb = this.$rocNative.isWeb;
window.__refresh = function(parm) {
_this.getUserInfo();
};
}
},
mounted() {
if(!this.isWeb && this.$rocNative.appInit()) {
this.getUserInfo();
}
if(this.isWeb) {
this.getData();
}
},
computed: {
...mapGetters({
userInfo: "userInfo",
refreshNum: "refreshNum"
}),
cParamData() {
if (this.list && this.list.length) {
return this.list;
} else {
return this.parmData;
}
}
},
watch: {
refreshNum(val) {
this.getData();
}
},
components: {
GroupTitle
},
methods: {
...mapActions({
setUserInfo: "setUserInfo",
setRefreshNum: "setRefreshNum"
}),
getUserInfo() {
this.$rocNative
.getUserInfo()
.then(params => {
this.token = params.userToken;
this.getData();
this.setUserInfo(params);
this.setRefreshNum(this.refreshNum + 1)
});
},
// 跳转课程介绍页
goToPage(item) {
this.pageNo = 1;
this.$emit("setRefrshParm", {isclick: true});
let itemData = {
title: item.name,
imageUrl: "",
appModuleInfo: {
code: "M200",
type: 4,
name: "课程介绍页",
paramFlag: 1,
paramList: [{
key: "className",
value:
"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
type: 4,
seqNo: 1
},
{
key: "courseId",
value: `${item.id}`,
type: 1,
seqNo: 2
}]
}
};
let paramList = setEventByModuleCode(itemData.appModuleInfo);
this.$rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
},
// 收藏/取消收藏
collectFun(status, id, name) {
status = status == 1 ? 2 : 1;
let params = {
token: (this.userInfo && this.userInfo.userToken) || this.token,
type: status,
courseId: id,
setEntry: "headers"
};
favorsCourse(params).then( res => {
if (res.code === "000000") {
this.getData();
} else {
this.$rocNative.showNativeToast({
message: "登录后才能收藏"
});
}
});
},
// 获取推荐的课程列表
getData(type) {
let params = {
pageNo: 1,
pageSize: 4,
token: (this.userInfo && this.userInfo.userToken) || this.token,
setEntry: "headers"
};
getRecommendCourseList(params).then( res => {
if (res.code === "000000") {
this.list = res.data || [];
}
})
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '@/assets/style/mixin';
@import '@/assets/style/global';
// img {
// @include bis("../../assets/images/evaluatBg.png");
// }
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.couse-list {
overflow: hidden;
}
.bgFill {
background: inherit;
height: px2rem(20px);
}
.cource-teach .cource-header,
.couse-cont {
padding: 0 px2rem(15px);
}
.couse-cont {
}
.fixBox {
}
.cource-header {
/* margin: 0 0 px2rem(11px) 0;*/
/*height: px2rem(45px);*/
margin-bottom: px2rem(15px);
.font-title {
line-height: px2rem(36px);
height: px2rem(36px);
background: #fff;
}
}
.loading-box {
font-size: px2rem(16px);
padding: px2rem(10px) 0 px2rem(20px) 0;
text-align: center;
span {
color: #999;
}
}
.change-part {
margin-top: px2rem(10px);
float: right;
font-size: px2rem(11px);
line-height: px2rem(11px);
border: 1px solid #a9aeb7;
border-radius: px2rem(9px);
vertical-align: middle;
padding: px2rem(3px) px2rem(5px) px2rem(4px) px2rem(6px);
img {
width: px2rem(12px);
height: px2rem(12px);
}
}
.fixed {
.fixBox {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 112;
.font-title {
background: #44a99b;
padding: 0 px2rem(15px);
color: #fff;
}
}
.bgFill {
background: #44a99b;
}
}
.course-item {
float: left;
margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
}
.end-left {
margin-right: 0;
}
.course-pic {
width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px);
position: relative;
.pic-tec {
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px);
}
.course-tag {
position: absolute;
display: inline-block;
top: px2rem(5px);
left: px2rem(5px);
line-height: px2rem(16px);
height: px2rem(16px);
color: #4a87d4;
padding: 0 px2rem(3px);
background: #fafcff;
border: 1px solid #c3dcfb;
font-size: px2rem(10px);
border-radius: px2rem(2px);
}
}
.course-txt {
margin-top: px2rem(5px);
font-size: px2rem(14px);
line-height: px2rem(19px);
max-height: px2rem(38px);
color: #333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.course-opt {
font-size: px2rem(12px);
position: relative;
/*margin-top: px2rem(6px);*/
.opt-info {
color: #999;
}
.opt {
display: inline-block;
height: px2rem(18px);
line-height: px2rem(18px);
padding: 0 px2rem(4px);
position: absolute;
right: 0;
top: 0;
}
.collect {
background: #f7f8f9;
color: #666;
}
.collected {
color: #f47a48;
background: RGBA(244, 122, 72, 0.04);
}
}
.font-title {
font-size: px2rem(18px);
font-weight: bold;
color: #28344c;
}
.title {
font-size: px2rem(16px);
text-align: left;
width: px2rem(170px);
max-height: px2rem(20px);
}
</style>
<template>
<section class="group-title">
<article v-show="showTitle" class="group-title-title">
<span>{{groupTitle}}</span><span class="group-title-title-ml-6" v-show="isShowNum">{{groupNum}}</span>
</article>
<article v-show="showOrder" class="group-title-order">
<div @click="order(2, index1IsSortUp)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 2}">{{orderIndex1Title}}</span>
<!-- <img src="../../assets/images/sousuo/sort-down.png" v-show="showOrderIndex === 1"/> -->
<img :class="{'ad-top': isAndroid}" v-show="showOrderIndex === 2 && index1IsSortUp" src="../../assets/images/search/sort-down.png"/>
<img :class="{'ad-top': isAndroid}" v-show="showOrderIndex === 2 && !index1IsSortUp" src="../../assets/images/search/sort-up.png"/>
<img :class="{'ad-top': isAndroid}" v-show="showOrderIndex !== 2" src="../../assets/images/search/sort-no.png"/>
</div>
<div @click="order(1, index2IsSortUp)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 1}">{{orderIndex2Title}}</span>
<!-- <img src="../../assets/images/sousuo/sort-down.png"/> -->
<img :class="{'ad-top': isAndroid}" v-show="showOrderIndex === 1 && index2IsSortUp" src="../../assets/images/search/sort-down.png"/>
<img :class="{'ad-top': isAndroid}" v-show="showOrderIndex === 1 && !index2IsSortUp" src="../../assets/images/search/sort-up.png"/>
<img :class="{'ad-top': isAndroid}" v-show="showOrderIndex !== 1" src="../../assets/images/search/sort-no.png"/>
<!-- <img src="../../assets/images/sousuo/sort-down.png" v-show="showOrderIndex === 2"/> -->
</div>
</article>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
cOrderIndex: 2,
showOrderIndex: 2,
index1IsSortUp: true,
index2IsSortUp: true,
// isAndroid: __isAndroid,
isAndroid: false,
}
},
props: {
groupTitle: {
type: String,
default: '课程'
},
isShowNum: {
type: Boolean,
default: true
},
groupNum: {
type: Number,
default: 0
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
},
orderIndex1Title: {
type: String,
default: '发布时间'
},
orderIndex2Title: {
type: String,
default: '学习人数'
}
},
computed: {
...mapGetters({
orderNum: 'orderNum'
})
},
watch: {
orderNum(val) {
// console.log('in Group Title', val)
this.showOrderIndex = 2
this.cOrderIndex = 2
this.index1IsSortUp = true
this.index2IsSortUp = true
}
},
created() {
// this.isAndroid = window.__isAndroid
},
mounted() {
this.isAndroid = window.__isAndroid
},
methods: {
toggle() {
this.showTitle = !showTitle
this.showOrder = !showOrder
},
order(index, isSortUp) {
let isCIndex = this.cOrderIndex == index
let isUp = isSortUp
this.cOrderIndex = index
this.showOrderIndex = index
if(isCIndex) {
if(index === 2) {
this.index1IsSortUp = !isSortUp
} else {
this.index2IsSortUp = !isSortUp
}
} else {
isUp = !isSortUp
}
this.$emit('order', index, isUp ? 1 : 2)
},
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
.group-title {
display: flex;
margin: 0 px2rem(15px) px2rem(10px);
flex-direction: row;
justify-content: space-between;
&-order {
display: flex;
flex-direction: row;
padding: px2rem(20px) 0 px2rem(10px);
font-size: px2rem(13px);
&-item {
position: relative;
span {
margin: 0 0 0 px2rem(15px);
padding: px2rem(2px) px2rem(20px) px2rem(2px) px2rem(10px);
border: 1px solid #F8F9FA;
border-radius: px2rem(26px);
font-size: px2rem(12px);
background: #F8F9FA;
}
img {
position: absolute;
top: px2rem(4px);
left: px2rem(75px);
height: px2rem(12px);
width: px2rem(12px);
}
}
}
.active {
border: 1px solid #449284;
color: #449284;
background: #fff;
}
&-title {
padding: px2rem(20px) 0 px2rem(10px);
font-size: px2rem(14px);
font-weight: 400;
span {
font-size: px2rem(14px);
color: #676869;
}
&-ml-6 {
margin-left: -4px;
}
}
}
.ad-top {
top: px2rem(2px) !important;
}
</style>
<template>
<section>
<GroupTitle
:groupTitle="groupTitle"
:groupNum="groupNum"
:showTitle="showTitle"
:isShowNum="isShowNum"
:showOrder="showOrder"
orderIndex2Title="推送人数"
@order="orderAction"
/>
<div
v-bp="{ component_tag: '003#022008' }"
v-if="displayConfig && displayConfig.educationComtentDisplayFlag && appVerstion >= 308"
class="jump-img"
@click="jumpToCartoonByCatageryId"
>
<img src="../../assets/images/search/jump-bg.png" alt />
<span v-html="getTextByHT(displayConfig.educationComtentDisplayContent)"></span>
</div>
<div class="font-style">
<div class="teach-opt">
<div class="teach-list">
<div
v-bp="{ component_tag: '003#022004#健康知识' }"
:class="index%2==1 ? 'list-item mr0':'list-item'"
v-for="(item, index) in cParamData"
:key="index"
@click="goToPage(item)"
>
<div class="tea-img">
<img :src="item.imageUrl" />
</div>
<div class="tea-txt">
<div class="tea-position" v-html="item.highLightHeaderName"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapGetters } from "vuex";
import { searchForOrder, setEventByModuleCode } from "@/utils/index";
import GroupTitle from "@/components/search/GroupTitle";
import { debug } from "util";
export default {
data() {
return {
list: [],
orderIndex: 1,
orderDir: 1
};
},
components: {
GroupTitle
},
props: {
groupTitle: {
type: String,
default: "健康知识"
},
isShowNum: {
type: Boolean,
default: true
},
parmData: {
type: Array,
default: () => []
},
groupNum: {
type: Number,
default: 0
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
},
isListPage: {
type: Boolean,
default: false
}
},
computed: {
...mapGetters({
cSearchText: "cSearchText",
orderNum: "orderNum",
displayConfig: "displayConfig",
userInfo: "userInfo"
}),
cParamData() {
if (this.list && this.list.length) {
return this.list;
} else {
return this.parmData;
}
},
appVerstion() {
let appVersion = this.userInfo.appVersion || "300";
return appVersion.split(".").join("");
}
},
watch: {
orderNum(val) {
if (!this.isListPage && this.groupNum > 0) {
this.orderIndex = 2;
this.orderDir = 2;
this.orderAction(2, 2);
}
}
},
mounted() {},
methods: {
goToPage(item) {
let itemData = {
imageUrl: "",
appModuleInfo: {
code: "M200",
type: 4,
name: "课程介绍页",
paramFlag: 1,
paramList: []
}
};
itemData.title = item.name;
itemData.appModuleInfo["paramList"] = [
{
key: "className",
value:
"com.picahealth.yunque.activitys.webs.CaricatureDetailActivity###EducationDetailViewController",
// "value": 'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
type: 4,
seqNo: 1
},
{
key: "id",
value: `${item.id}`,
type: 1,
seqNo: 2
}
];
let paramList = setEventByModuleCode(itemData.appModuleInfo);
this.$rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
},
// 跳转到漫画页面
jumpToCartoonByCatageryId() {
let paramList = [
{
key: "className",
value:
"com.picahealth.yunque.activitys.patienteduknowledge.TotalCartoonActivity###AllCartoonViewController",
type: 4,
seqNo: 1
},
{
key: "id",
value: this.displayConfig.educationComtentDisplayParam.id,
type: 1,
seqNo: 2
},
{
key: "seq_no",
value: this.displayConfig.educationComtentDisplayParam.seqNo,
type: 1,
seqNo: 3
},
{
key: "lable",
value: this.displayConfig.educationComtentDisplayParam.name,
type: 1,
seqNo: 4
}
];
this.$rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
orderAction(orderIndex, orderDir) {
this.orderIndex = orderIndex;
this.orderDir = orderDir;
searchForOrder(
"4",
this.cSearchText,
this.orderIndex,
this.orderDir,
this.cParamData.length,
this.parmData,
this.userInfo.userToken
).then(param => {
this.list = param;
});
},
getTextByHT: function(rText) {
return rText.replace(/color: rgba/g, "font-weight:700;color:rgba");
}
}
};
</script>
<style lang="scss" scoped>
body {
background: #fff;
}
@import "@/assets/style/mixin";
.mint-header {
background-color: rgba($color: #000000, $alpha: 0);
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.teach-opt {
padding: 0 px2rem(15px) px2rem(15px) px2rem(15px);
.teach-title {
font-size: px2rem(18px);
// padding-bottom: px2rem(0px);
color: #333;
}
.teach-list {
margin-top: px2rem(-14px);
overflow: hidden;
}
.opt-span {
span {
color: #449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(10px);
line-height: px2rem(10px);
img {
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item {
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
border-radius: 0 0 px2rem(3px) px2rem(3px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) 0 RGBA(0, 0, 0, 0.06);
}
.mr0 {
margin-right: 0;
}
.tea-txt {
padding: px2rem(5px) px2rem(7px);
}
.tea-img {
width: px2rem(170px);
height: px2rem(125px);
position: relative;
border-radius: px2rem(3px) px2rem(3px) 0 0;
img {
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0;
}
.learn-p {
padding-left: px2rem(5px);
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background: #333;
background: -webkit-linear-gradient(
left,
RGBA(0, 0, 0, 0.2),
RGBA(0, 0, 0, 0)
);
background: -o-linear-gradient(
right,
RGBA(0, 0, 0, 0.2),
RGBA(0, 0, 0, 0)
);
background: -moz-linear-gradient(
right,
RGBA(0, 0, 0, 0.2),
RGBA(0, 0, 0, 0)
);
background: linear-gradient(
to right,
RGBA(0, 0, 0, 0.2),
RGBA(0, 0, 0, 0)
);
color: #fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(20px);
}
}
.tea-name {
padding: 0;
color: #333;
font-size: px2rem(14px);
font-weight: 500;
}
.tea-position {
height: px2rem(53px);
padding: px2rem(7px) px2rem(0px) px2rem(10px);
line-height: px2rem(15px);
font-size: px2rem(14px);
font-weight: 400;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis("../../assets/images/sousuo/headerTop.png");
.logo_img {
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
.jump-img {
position: relative;
top: 0;
left: 0;
text-align: center;
margin-bottom: px2rem(10px);
img {
width: px2rem(345px);
height: px2rem(30px);
}
span {
position: absolute;
top: px2rem(6px);
left: px2rem(25px);
font-size: px2rem(14px);
font-weight: 700;
color: #373839;
}
}
</style>
此差异已折叠。
<template>
<article v-if="allLabels && allLabels.length > 0" class="history-labels">
<!-- <article v-if="allHistoryLabels && allHistoryLabels.length > 0" class="history-labels"> -->
<section class="history-labels-title">
<span>{{title}}</span>
<span v-show="showDelete" class="history-labels-title-all">
<span @click="confirmDelete" v-bp="{ component_tag: '003#022013' }">全部删除</span>
<span>|</span>
<span v-bp="{ component_tag: '003#022014' }" @click="toggleDelete">取消</span>
</span>
<img
v-bp="{ component_tag: '003#022011' }"
@click="toggleDelete"
v-show="!showDelete"
src="../../assets/images/sousuo/recicle.png"
alt="删除"
/>
</section>
<section
v-bp="{ component_tag: '003#022009' }"
class="history-labels-item"
@click="searchAction(item.keyword)"
v-for="(item, index) in allLabels"
:key="index"
>
<span class="history-labels-item-name" v-if="index < 15">
<span>{{item.keyword}}</span>
<img
v-bp="{ component_tag: '003#022012' }"
@click.stop="deleteHistorys(false, index)"
v-show="showDelete"
src="../../assets/images/sousuo/delete.png"
alt
/>
</span>
</section>
<ConfirmTip v-show="showConfirm" @cancle="showConfirm=false" @confirm="confirm" />
</article>
</template>
<script>
import ConfirmTip from "@/components/search/ConfirmTip";
import { getListHistorys, delHistorysService } from "@/service";
import { mapGetters, mapActions } from 'vuex';
export default {
name: "HistoryLabels",
props: {
title: {
type: String,
default: "历史搜索"
},
allHistoryLabels: {
type: Array,
default: () => []
}
},
computed: {
// ...mapGetters([
// 'allHistoryLabels'
// ]),
},
watch:{
allHistoryLabels: {
handler: function(val, oldval){
this.allLabels = val
},
deep: true //对象内部的属性监听,也叫深度监听
}
},
components: {
ConfirmTip
},
data() {
return {
token: "",
allLabels: [],
showDelete: false,
showConfirm: false
};
},
created() {
// if (process.client) {
// }
},
mounted() {
// if (this.$rocNative.isWeb) {
// // 为了Web调试用
// this.listHistorys(this.token);
// } else {
// this.getUserInfo();
// }
},
methods: {
// ...mapActions([
// 'setAllHistoryLabels'
// ]),
// 跳转到搜索结果页面
searchAction(searchText) {
if (this.showDelete) return;
this.$router.push({
path: "/result",
query: {
searchText: searchText,
pageFrom: "searchIndex"
}
});
},
// 获取用户TOKEN,并获取个人的历史数据
getUserInfo() {
this.$rocNative
.getUserInfo()
.then(params => {
this.token = params.userToken;
this.listHistorys(this.token);
});
},
// 获取个人的历史搜索关键字(必须)
listHistorys(token) {
let data = {
token: token || "",
setEntry: "headers"
};
getListHistorys(data).then(res => {
this.allLabels = res.data.list;
});
},
// // 批量删除关键词(亦可单个)
// deleteHistorys(isAll, index = 0, length = 1) {
// let params = {
// token: this.token || '',
// setEntry: "headers",
// keywordIds: []
// };
// if (isAll) {
// params.keywordIds = this.allLabels.map(element => {
// return element.id;
// });
// } else {
// params.keywordIds.push(this.allLabels[index].id);
// }
// delHistorysService(params).then(res => {
// this.allLabels.splice(index, params.keywordIds.length);
// });
// },
// 批量删除关键词(亦可单个)
deleteHistorys(isAll, index = 0, length = 1) {
let params = {
token: this.token || '',
setEntry: "headers",
keywordIds: []
};
if (isAll) {
params.keywordIds = this.allHistoryLabels.map(element => {
return element.id;
});
} else {
params.keywordIds.push(this.allHistoryLabels[index].id);
}
delHistorysService(params).then(res => {
this.allHistoryLabels.splice(index, params.keywordIds.length);
// this.setAllHistoryLabels(this.allHistoryLabels.splice(index, params.keywordIds.length))
});
},
// 确认删除
confirm() {
this.deleteHistorys(true);
},
// 切换删除与全部删除按钮
toggleDelete() {
this.showDelete = !this.showDelete;
},
// 弹出删除全部的确认框
confirmDelete() {
this.showConfirm = true;
}
}
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/mixin";
.history-labels {
width: 100%;
padding: px2rem(20px) px2rem(15px) 0;
margin-bottom: px2rem(20px);
background-color: #fff;
&-title {
display: inline-flex;
height: px2rem(30px);
width: 100%;
align-items: center;
justify-content: space-between;
span {
font-size: px2rem(14px);
color: #666;
}
img {
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
&-all {
span {
padding: px2rem(4px) px2rem(5px);
font-size: px2rem(12px);
color: #999;
}
}
}
&-item {
display: inline-flex;
height: px2rem(30px);
margin: px2rem(10px) px2rem(15px) 0 0;
text-align: center;
align-items: center;
&-name {
position: relative;
top: 0;
left: 0;
padding: px2rem(6px) px2rem(15px) px2rem(6px);
border-radius: px2rem(15px);
background-color: #f8f9fa;
color: #999;
font-size: px2rem(13px);
span {
background-color: #f8f9fa;
color: #999;
font-size: px2rem(13px);
}
img {
position: absolute;
top: px2rem(-10px);
right: px2rem(-10px);
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
}
}
}
.del-all {
font-size: px2rem(12px);
font-weight: 400;
color: rgba(103, 104, 105, 1);
line-height: px2rem(12px);
}
</style>
<template>
<article v-if="allLabels && allLabels.length > 0" class="history-labels">
<section class="history-labels-title">
<span>{{title}}</span>
<span v-show="showDelete" class="history-labels-title-all">
<span @click="confirmDelete" v-bp="{ component_tag: '003#022013' }">全部删除</span>
<span>|</span>
<span v-bp="{ component_tag: '003#022014' }" @click="toggleDelete">取消</span>
</span>
<img
v-bp="{ component_tag: '003#022011' }"
@click="toggleDelete"
v-show="!showDelete"
src="../../assets/images/sousuo/recicle.png"
alt="删除"
/>
</section>
<section
v-bp="{ component_tag: '003#022009' }"
class="history-labels-item"
@click="searchAction(item.keyword)"
v-for="(item, index) in allLabels"
:key="index"
>
<span class="history-labels-item-name" v-if="index < 15">
<span>{{item.keyword}}</span>
<img
v-bp="{ component_tag: '003#022012' }"
@click.stop="deleteHistorys(false, index)"
v-show="showDelete"
src="../../assets/images/sousuo/delete.png"
alt
/>
</span>
</section>
<ConfirmTip v-show="showConfirm" @cancle="showConfirm=false" @confirm="confirm" />
</article>
</template>
<script>
import ConfirmTip from "@/components/search/ConfirmTip";
import { getListHistorys, delHistorysService } from "@/service";
export default {
name: "HistoryLabels",
props: {
title: {
type: String,
default: "历史搜索"
}
},
components: {
ConfirmTip
},
data() {
return {
token: "",
allLabels: [],
showDelete: false,
showConfirm: false
};
},
created() {
// if (process.client) {
// }
},
mounted() {
if (this.$rocNative.isWeb) {
// 为了Web调试用
this.listHistorys(this.token);
} else {
this.getUserInfo();
}
},
methods: {
// 跳转到搜索结果页面
searchAction(searchText) {
if (this.showDelete) return;
this.$router.push({
path: "/result",
query: {
searchText: searchText,
pageFrom: "searchIndex"
}
});
},
// 获取用户TOKEN,并获取个人的历史数据
getUserInfo() {
this.$rocNative
.getUserInfo()
.then(params => {
this.token = params.userToken;
this.listHistorys(this.token);
});
},
// 获取个人的历史搜索关键字(必须)
listHistorys(token) {
let data = {
token: token || "",
setEntry: "headers"
};
getListHistorys(data).then(res => {
this.allLabels = res.data.list;
});
},
// 批量删除关键词(亦可单个)
deleteHistorys(isAll, index = 0, length = 1) {
let params = {
token: this.token || '',
setEntry: "headers",
keywordIds: []
};
if (isAll) {
params.keywordIds = this.allLabels.map(element => {
return element.id;
});
} else {
params.keywordIds.push(this.allLabels[index].id);
}
delHistorysService(params).then(res => {
this.allLabels.splice(index, params.keywordIds.length);
});
},
// 确认删除
confirm() {
this.deleteHistorys(true);
},
// 切换删除与全部删除按钮
toggleDelete() {
this.showDelete = !this.showDelete;
},
// 弹出删除全部的确认框
confirmDelete() {
this.showConfirm = true;
}
}
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/mixin";
.history-labels {
width: 100%;
padding: px2rem(20px) px2rem(15px) 0;
margin-bottom: px2rem(20px);
background-color: #fff;
&-title {
display: inline-flex;
height: px2rem(30px);
width: 100%;
align-items: center;
justify-content: space-between;
span {
font-size: px2rem(14px);
color: #666;
}
img {
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
&-all {
span {
padding: px2rem(4px) px2rem(5px);
font-size: px2rem(12px);
color: #999;
}
}
}
&-item {
display: inline-flex;
height: px2rem(30px);
margin: px2rem(10px) px2rem(15px) 0 0;
text-align: center;
align-items: center;
&-name {
position: relative;
top: 0;
left: 0;
padding: px2rem(6px) px2rem(15px) px2rem(6px);
border-radius: px2rem(15px);
background-color: #f8f9fa;
color: #999;
font-size: px2rem(13px);
span {
background-color: #f8f9fa;
color: #999;
font-size: px2rem(13px);
}
img {
position: absolute;
top: px2rem(-10px);
right: px2rem(-10px);
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
}
}
}
.del-all {
font-size: px2rem(12px);
font-weight: 400;
color: rgba(103, 104, 105, 1);
line-height: px2rem(12px);
}
</style>
<template>
<article v-if="allLabels && allLabels.length > 0" class="history-labels">
<section class="history-labels-title">
<span>{{title}}</span>
<span v-show="showDelete" class="history-labels-title-all">
<span @click="confirmDelete" v-bp="{ component_tag: '003#022013' }">全部删除</span>
<span>|</span>
<span v-bp="{ component_tag: '003#022014' }" @click="toggleDelete">取消</span>
</span>
<img
v-bp="{ component_tag: '003#022011' }"
@click="toggleDelete"
v-show="!showDelete"
src="../../assets/images/sousuo/recicle.png"
alt="删除"
/>
</section>
<section
v-bp="{ component_tag: '003#022009' }"
class="history-labels-item"
@click="searchAction(item.keyword)"
v-for="(item, index) in allLabels"
:key="index"
>
<span class="history-labels-item-name" v-if="index < 15">
<span>{{item.keyword}}</span>
<img
v-bp="{ component_tag: '003#022012' }"
@click.stop="deleteHistorys(false, index)"
v-show="showDelete"
src="../../assets/images/sousuo/delete.png"
alt
/>
</span>
</section>
<ConfirmTip v-show="showConfirm" @cancle="showConfirm=false" @confirm="confirm" />
</article>
</template>
<script>
import ConfirmTip from "@/components/search/ConfirmTip";
import { getListHistorys, delHistorysService } from "@/service";
export default {
name: "HistoryLabels",
props: {
title: {
type: String,
default: "历史搜索"
}
},
components: {
ConfirmTip
},
data() {
return {
token: "",
allLabels: [],
showDelete: false,
showConfirm: false
};
},
created() {
// if (process.client) {
// }
},
mounted() {
if (this.$rocNative.isWeb) {
// 为了Web调试用
this.listHistorys(this.token);
} else {
this.getUserInfo();
}
},
methods: {
// 跳转到搜索结果页面
searchAction(searchText) {
if (this.showDelete) return;
this.$router.push({
path: "/result",
query: {
searchText: searchText,
pageFrom: "searchIndex"
}
});
},
// 获取用户TOKEN,并获取个人的历史数据
getUserInfo() {
this.$rocNative
.getUserInfo()
.then(params => {
this.token = params.userToken;
this.listHistorys(this.token);
});
},
// 获取个人的历史搜索关键字(必须)
listHistorys(token) {
let data = {
token: token || "",
setEntry: "headers"
};
getListHistorys(data).then(res => {
this.allLabels = res.data.list;
});
},
// 批量删除关键词(亦可单个)
deleteHistorys(isAll, index = 0, length = 1) {
let params = {
token: this.token || '',
setEntry: "headers",
keywordIds: []
};
if (isAll) {
params.keywordIds = this.allLabels.map(element => {
return element.id;
});
} else {
params.keywordIds.push(this.allLabels[index].id);
}
delHistorysService(params).then(res => {
this.allLabels.splice(index, params.keywordIds.length);
});
},
// 确认删除
confirm() {
this.deleteHistorys(true);
},
// 切换删除与全部删除按钮
toggleDelete() {
this.showDelete = !this.showDelete;
},
// 弹出删除全部的确认框
confirmDelete() {
this.showConfirm = true;
}
}
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/mixin";
.history-labels {
width: 100%;
padding: px2rem(20px) px2rem(15px) 0;
margin-bottom: px2rem(20px);
background-color: #fff;
&-title {
display: inline-flex;
height: px2rem(30px);
width: 100%;
align-items: center;
justify-content: space-between;
span {
font-size: px2rem(14px);
color: #666;
}
img {
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
&-all {
span {
padding: px2rem(4px) px2rem(5px);
font-size: px2rem(12px);
color: #999;
}
}
}
&-item {
display: inline-flex;
height: px2rem(30px);
margin: px2rem(10px) px2rem(15px) 0 0;
text-align: center;
align-items: center;
&-name {
position: relative;
top: 0;
left: 0;
padding: px2rem(6px) px2rem(15px) px2rem(6px);
border-radius: px2rem(15px);
background-color: #f8f9fa;
color: #999;
font-size: px2rem(13px);
span {
background-color: #f8f9fa;
color: #999;
font-size: px2rem(13px);
}
img {
position: absolute;
top: px2rem(-10px);
right: px2rem(-10px);
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
}
}
}
.del-all {
font-size: px2rem(12px);
font-weight: 400;
color: rgba(103, 104, 105, 1);
line-height: px2rem(12px);
}
</style>
<template>
<article v-if="allLabels && allLabels.length > 0" class="history-labels">
<section class="history-labels-title">
<span>{{title}}</span>
</section>
<section
v-bp="{ component_tag: '003#022010' }"
class="history-labels-item"
@click="gotoPage(item)"
v-for="(item, index) in allLabels"
:key="index"
>
<span class="history-labels-item-name" v-if="index < 15">{{item.keyword}}</span>
</section>
</article>
</template>
<script>
import { getHotLabelsService } from "@/service";
import { setEventByModuleCode } from '@/utils'
export default {
name: "HotLabels",
props: {
title: {
type: String,
default: "热门搜索"
}
},
data() {
return {
allLabels: []
};
},
mounted() {
this.getHotLabels();
},
methods: {
// 通用原生或内部跳转
gotoPage(itemData) {
if (
!itemData.appModuleInfo ||
!(
itemData.appModuleInfo.code === "M001" ||
itemData.appModuleInfo.code === "M002" ||
itemData.appModuleInfo.code === "M003" ||
itemData.appModuleInfo.code === "M100" ||
itemData.appModuleInfo.code === "M200" ||
itemData.appModuleInfo.code === "M300" ||
itemData.appModuleInfo.code === "M400" ||
itemData.appModuleInfo.code === "M500"
)
) {
console.log("不支持的中转。。。");
this.jump2RezultPage(itemData.keyword);
return;
}
let paramList = setEventByModuleCode(itemData.appModuleInfo);
// alert(JSON.stringify(paramList))
if (paramList !== "NO") {
this.$rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
}
},
// 跳转到结果页面
jump2RezultPage(searchText) {
if (this.showDelete) return;
this.$router.push({
path: "/result",
query: {
searchText: searchText,
pageFrom: "searchIndex"
}
});
},
// 通过原生跳转
dispatchEventByModuleCode(itemData) {
let modeCode = itemData.appModuleInfo.code;
let paramList = itemData.appModuleInfo.paramList
? itemData.appModuleInfo.paramList
: "";
if (modeCode === "M001" || modeCode === "M002" || modeCode === "M003") {
paramList = "";
} else if (modeCode === "M100" || modeCode === "M300") {
let urlPara = this.getUrlPara(paramList);
paramList[0].value += urlPara;
}
if (typeof paramList === "string" && !paramList) {
paramList = [];
}
this.$rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
},
// 跳转到课程介绍页
jumpToCourse(id) {
let itemData = {
title: "课程介绍页",
imageUrl:
"https://test-file.yunqueyi.com/image/jpeg/2018/09/18/20180918103322254-f8bba621.jpg",
appModuleInfo: {
code: "M200",
type: 4,
name: "课程介绍页",
paramFlag: 1,
paramList: [
{
key: "className",
value:
"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
type: 4,
seqNo: 1
},
{
key: "courseId",
value: `${id}`,
type: 1,
seqNo: 2
}
]
}
};
this.dispatchEventByModuleCode(itemData);
},
// 跳转到漫画详情页
jumpToCartoon(url, name) {
let itemData = {
title: "漫画详情页",
imageUrl:
"https://test-file.yunqueyi.com/image/jpeg/2018/09/18/20180918103322254-f8bba621.jpg",
appModuleInfo: {
code: "M300",
type: 4,
name: "漫画详情页",
paramFlag: 1,
paramList: [
{
key: "pageUrl",
value: url,
type: 4,
seqNo: 1
},
{
key: "showTitle",
value: true,
type: 1,
seqNo: 2
},
{
key: "title",
value: name,
type: 1,
seqNo: 2
}
]
}
};
this.$rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
});
},
// 获取个人的历史搜索关键字
getHotLabels() {
getHotLabelsService({type: 2}).then(res => {
this.allLabels = res.data;
});
}
}
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/mixin";
.history-labels {
width: 100%;
padding: 0 px2rem(15px) 0;
// margin-bottom: px2rem(6px);
margin: px2rem(20px) 0 px2rem(6px);
background-color: #fff;
&-title {
display: inline-flex;
height: px2rem(30px);
width: 100%;
align-items: center;
justify-content: space-between;
span {
font-size: px2rem(14px);
color: #666;
}
img {
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
}
&-item {
display: inline-flex;
height: px2rem(30px);
margin: px2rem(10px) px2rem(15px) 0 0;
text-align: center;
align-items: center;
&-name {
padding: px2rem(6px) px2rem(15px) px2rem(6px);
border-radius: px2rem(15px);
background-color: #f8f9fa;
color: #979899;
font-size: px2rem(13px);
}
}
}
</style>
<template>
<div class="loader loader--style3" title="2">
<div class="loader-mask"></div>
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
</template>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
.loader {
&-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
// background: rgba(0, 0, 0, 0.5);
}
svg {
position: absolute;
top: px2rem(280px);
left: px2rem(166px);
z-index: 101;
}
}
svg path, svg rect{
// fill: #fff;
// fill: #449284;
fill: #449284;
}
</style>
<template>
<section class="no-more">
<span class="no-more-sub"></span>
<span class="no-more-text">{{noMoreText}}</span>
<span class="no-more-sub"></span>
</section>
</template>
<script>
export default {
data() {
return {
noMoreText: '到底啦'
}
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
.no-more {
display: flex;
height: px2rem(41px);
flex-direction: row;
justify-content: center;
align-items: center;
// background:rgba(248,248,248,1);
&-sub {
width: px2rem(84px);
// height: px2rem(26px);
border: px2rem(1px) solid #F7F7F7;
border-bottom: 0;
}
&-text {
padding: 0 px2rem(8px);
font-size: px2rem(14px);
color: #BEC2CC;
}
}
</style>
<template>
<section class="no-result">
<img src="../../assets/images/sousuo/search-big.png" alt="">
<p>没有找到相关内容</p>
<p>您可以修改条件后重新搜索</p>
</section>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
.no-result {
height: px2rem(180px);
margin-top: px2rem(0px);
text-align: center;
img {
width: px2rem(100px);
height: px2rem(100px);
}
p {
font-size: px2rem(15px);
color: #999;
}
}
</style>
此差异已折叠。
<template>
<section>
<GroupTitle :groupTitle="groupTitle" :groupNum="groupNum" :showTitle="showTitle" :isShowNum="isShowNum" :showOrder="showOrder" @order="orderAction"/>
<div
v-bp="{ component_tag: '003#022004#5分钟医学院' }"
class="item-five"
v-for="(item, index) in cParamData"
:key="index"
:class="{'is-last': index == cParamData.length - 1 && isShowNum}"
@click="goToPage(item)"
>
<div class="left-info">
<div class="top-title ellipsis-1" v-html="getTextByHT(item.title)"></div>
<span class="bottom-flag">#<span v-html="item.categoryName"></span></span>
</div>
<div class="right-img" @click.stop="playFun(item)">
<img :src="item.appImageUrl">
<img class="play-img" src="../../assets/images/search/play.png" />
</div>
</div>
<!-- <NoMoreItem v-if="isShowFiveNoItem"></NoMoreItem> -->
</section>
</template>
<script>
import { searchForOrder, setEventByModuleCode } from "@/utils/index";
import { mapGetters } from 'vuex'
import GroupTitle from '@/components/search/GroupTitle';
import NoMoreItem from "@/components/search/NoMoreItem";
let heardHeight = 140;
let fiveListHeight = 87;
export default {
name: 'SearchFiveMedicalList',
components: {
GroupTitle,
NoMoreItem
},
props: {
dataObj: Object,
parmData: {
type: Array,
default: () => []
},
groupTitle: {
type: String,
default: '5分钟医学院'
},
isShowNum: {
isShowNum: Boolean,
default: true
},
groupNum: {
type: Number,
default: 0
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
},
isListPage: {
type: Boolean,
default: false
}
},
data(){
return{
list: [],
orderIndex: 2,
orderDir: 2,
// isShowFiveNoItem: false
}
},
watch: {
orderNum(val) {
if ( !this.isListPage && this.groupNum > 0 ) {
this.orderIndex = 2
this.orderDir = 2
this.orderAction(2, 2)
}
},
},
computed: {
...mapGetters({
cSearchText: 'cSearchText',
orderNum: 'orderNum',
userInfo: 'userInfo',
}),
cParamData() {
if (this.list && this.list.length) {
return this.list
} else {
return this.parmData
}
}
},
created(){
// let _this = this;
// //暂停
// window.__pauseAudioView = function (parm) {
// _this.changePlay(_this.id, '2');
// }
// //开始
// window.__playAudioView = function (parm) {
// _this.changePlay(_this.id, '1');
// }
// window.__closeAudioView = function (parm) {
// _this.changePlay(_this.id, '0');
// }
},
mounted() {
let _this = this;
//暂停
window.__pauseAudioView = function (parm) {
_this.changePlay(_this.id, '2');
}
//开始
window.__playAudioView = function (parm) {
_this.changePlay(_this.id, '1');
}
window.__closeAudioView = function (parm) {
_this.changePlay(_this.id, '0');
}
// let fiveListWrapper = fiveListHeight * this.cParamData.length;
// let screenHight = window.screen.height
// this.isShowfiveNoItem = false
// if(fiveListWrapper > screenHight) {
// this.$nextTick( ()=> {
// this.isShowfiveNoItem = true
// })
// }
},
filters: {
shortName: function(value, length = 10, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
},
methods: {
// orderAction(orderIndex) {
// this.searchForOrder('4', this.cSearchText, orderIndex, this.groupNum, this.parmData).then( param => {
// this.list = param
// })
// },
shortName(value, length = 10, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
goToPage(item) {
let itemData = {
"imageUrl": "",
"appModuleInfo": {
"code": "M200",
"type": 4,
"name": "课程介绍页",
"paramFlag": 1,
"paramList": []
}
};
if (!!item) {
itemData.title = item.name;
itemData.appModuleInfo["paramList"] = [{
"key": "className",
"value": 'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
"type": 4,
"seqNo": 1
},
{
"key": "id",
"value": `${item.id}`,
"type": 1,
"seqNo": 2
}]
} else {
itemData.appModuleInfo.paramList = [{
"key": "className",
"value": 'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
"type": 4,
"seqNo": 1
}]
}
let paramList = setEventByModuleCode(itemData.appModuleInfo);
this.$rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
changePlay(id, str) {
//play : 1播放 2:暂停 0:初始状态
for (let i = 0; i < this.parmData.length; i++) {
if (id == this.parmData[i].id) {
if (str == '1') {
this.parmData[i].play = '1';
} else if (str == '2') {
this.parmData[i].play = '2';
} else if (str == '0') {
this.parmData[i].play = '0';
}
} else {
this.parmData[i].play = '0';
}
}
},
playFun(item) {
this.id = item.id; //保存id
this.changePlay(item.id, '1');
this.$rocNative.openFiveMintusAudio({
categoryName: item.categoryName,
appImageUrl: item.appImageUrl,
publishTime: item.publishTime,
id: item.id,
filePath: item.filePath,
title: this.getPureText(item.title),
size: item.size,
isPlay: true,
fileType: item.fileType,
totalTime: item.totalTime
})
},
// 将带高亮(标签)的文本处理成不带标签的
getPureText(title) {
let t1 = title.replace(/<span style="color:rgba\(244,122,72,1\)">/g, '')
return t1.replace(/<\/span>/g, '')
},
orderAction(orderIndex, orderDir) {
this.orderIndex = orderIndex
this.orderDir = orderDir
searchForOrder('2', this.cSearchText, orderIndex, this.orderDir, this.cParamData.length, this.parmData, this.userInfo.userToken).then( param => {
this.list = param
})
},
getTextByHT: function(rText) {
return rText.replace(/color:rgba/g, 'font-weight:700;color:rgba');
},
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
@import '@/assets/style/global';
.item-five {
width: px2rem(345px);
height: px2rem(70px);
margin: 0 auto;
border-bottom: 0.5px solid #F0F1F2;
// padding: px2rem(20px) 0;
margin: px2rem(10px) px2rem(15px) px2rem(20px);
box-sizing: border-box;
display: flex;
justify-content: space-between;
.left-info{
align-items: center;
span {
color: #BF9E15;
}
.top-title{
width: px2rem(280px);
line-height: px2rem(24px);
color: #373839;
font-size: px2rem(16px);
font-weight: 700;
span{
color: #F68367;
font-weight: 700;
}
}
.bottom-flag{
display: inline-block;
height: px2rem(17px);
line-height: px2rem(17px);
text-align: center;
background:rgba(255,253,250,1);
border: px2rem(0.5px) solid rgba(250,229,175,1);
color: #BF9E15;
font-size: px2rem(11px);
margin-top: px2rem(3px);
padding: 0 px2rem(3px) 0 ;
}
}
.right-img{
align-items: center;
width: px2rem(50px);
height: px2rem(50px);
position: relative;
img {
width: 100%;
height: 100%;
}
.play-img {
position: relative;
width: px2rem(28px);
height: px2rem(28px);
top: px2rem(-55px);
left: px2rem(0);
padding: px2rem(11px);
z-index: 1;
}
}
}
.is-last {
border-bottom: 0px solid #fff !important;
margin-bottom: 0 !important;
}
.ellipsis-1 {
width: 69%;
height: 0.8rem;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
white-space: nowrap;
}
</style>
<template>
<section>
<GroupTitle
:groupTitle="groupTitle"
:groupNum="groupNum"
:showTitle="showTitle"
:isShowNum="isShowNum"
:showOrder="showOrder"
/>
<div
v-bp="{ component_tag: '003#022004#讲师' }"
class="item-lecturer"
:class="{'first-item': index === 0, 'is-last': index == cParamData.length - 1 && isShowNum}"
v-for="(item, index) in cParamData"
:key="index"
@click="goToPage(item)"
>
<div class="left-info">
<img :src="item.avatarImageUrl">
</div>
<div class="right-info" :class="{'right-info-pt': isAndroid}">
<div><span class="name" v-html="getTextByHT(item.name)"></span><span class="expert" v-html="item.doctorDepartment"></span></div>
<div class="bottom-flag ellipsis-1">{{item.doctorHospital}}</div>
</div>
</div>
</section>
</template>
<script>
import { searchForOrder } from "@/utils/index";
import { mapGetters } from 'vuex'
import { getShareUrl } from '@/utils/index'
import GroupTitle from '@/components/search/GroupTitle';
export default {
name: 'SearchLecturerList',
components: {
GroupTitle,
},
props: {
dataObj: Object,
parmData: {
type: Array,
default: () => []
},
groupTitle: {
type: String,
default: '讲师'
},
isShowNum: {
isShowNum: Boolean,
default: true
},
groupNum: {
type: Number,
default: 0
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
},
isListPage: {
type: Boolean,
default: false
}
},
data() {
return {
list: [],
orderIndex: 2,
isAndroid: false,
orderDir: 2,
isShowLecturerNoItem: false
}
},
watch: {
orderNum(val) {
if ( !this.isListPage && this.groupNum > 0 ) {
this.orderIndex = 2
this.orderDir = 2
this.orderAction(2, 2)
}
},
},
computed: {
...mapGetters({
cSearchText: 'cSearchText',
orderNum: 'orderNum',
userInfo: 'userInfo',
}),
cParamData() {
if (this.list && this.list.length) {
return this.list
} else {
return this.parmData
}
}
},
created(){
},
mounted() {
this.isAndroid = window.__isAndroid
},
methods: {
//跳转讲师详情页面
goToPage(item){
let _this = this,
url = '', action_code = '', label_id = '';
url = getShareUrl('') +'/appl/#/teachersDetail?id='+item.id+"&from=appHome&userToken="+ _this.userInfo.userToken;
let paramList = [
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
this.$rocNative.dispatchEventByModuleCode({
modeCode: 'M300',
jsonString: paramList
})
},
orderAction(orderIndex, orderDir) {
this.orderIndex = orderIndex
this.orderDir = orderDir
searchForOrder('3', this.cSearchText, orderIndex, this.orderDir, this.cParamData.length, this.parmData, this.userInfo.userToken).then( param => {
this.list = param
})
},
getTextByHT: function(rText) {
return rText.replace(/color:rgba/g, 'font-weight:700;color:rgba');
},
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
@import '@/assets/style/global';
.item-lecturer{
display: flex;
width: px2rem(345px);
height: px2rem(80px);
margin: 0 auto;
border-bottom: 0.5px solid #F0F1F2;
padding: px2rem(20px) 0;
// margin: px2rem(10px) px2rem(15px) px2rem(20px);
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
.left-info {
width: px2rem(40px);
height: px2rem(40px);
border-radius: 50%;
background-color: #ccc;
img{
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
}
.right-info {
// height: px2rem(40px);
height: px2rem(40px);
// line-height: px2rem(16px);
margin-left: px2rem(12px);
.name {
color: #373839;
font-size: px2rem(15px);
font-weight: 700;
margin-right: px2rem(10px);
// span {
// margin-left: px2rem(10px);
// color: #F68367;
// font-size: px2rem(12px);
// }
}
.expert {
color: #676869;
font-weight: 400;
font-size: px2rem(12px);
}
.bottom-flag{
color: #979899;
font-size: px2rem(12px);
margin-top: px2rem(2px);
span{
color: #F68367;
}
}
&-pt {
padding-top: px2rem(2px);
}
}
}
.first-item {
padding-top: 0;
height: px2rem(60px);
}
.is-last {
border-bottom: 0px solid #fff !important;
// margin-bottom: 0 !important;
}
// .ellipsis-1 {
// width: 100%;
// height: 0.8rem;
// overflow: hidden;
// text-overflow: ellipsis;
// -webkit-line-clamp: 1;
// white-space: nowrap;
// }
</style>
此差异已折叠。
<template>
<section class="show-wrapper" >
<span :class="{'margin-top15': needMarginTop}" @click="showAllItem">{{btnText}}</span>
</section>
</template>
<script>
export default {
data() {
return {
}
},
props: {
needMarginTop: {
type: Boolean,
default: false
},
btnText: {
type: String,
default: '查看全部'
},
itemIndex: {
type: String,
default: '0'
}
},
methods: {
showAllItem() {
this.$emit('showAllItem', this.itemIndex)
}
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
// @import '@/assets/style/global';
.show-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: px2rem(6px);
span {
display: inline-block;
width: px2rem(345px);
height: px2rem(40px);
line-height: px2rem(40px);
margin-bottom: px2rem(15px);
text-align: center;
border-radius: px2rem(22px);
color: #676869;
background: #F8F9FA;
}
.margin-top15 {
margin-top: px2rem(15px);
}
}
</style>
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '云鹊医-赋能基层医生',
meta: [
{ charset: 'utf-8' },
// { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
{ name: 'screen-orientation', content: 'portrait' },
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
{ name: 'format-detection', content: 'telephone=no' },
{ name: 'full-screen', content: 'yes' },
{ name: 'x5-fullscreen', content: 'true' },
{ name: 'referrer', content: 'never' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
// { rel: 'stylesheet', href: '/css/common.css' }
],
style: [
{ cssText: `
@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:PingFangSC-Regular,-apple-system-font,Source Han Sans,Helvetica Neue,sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}
`, type: 'text/css' }
],
__dangerouslyDisableSanitizers: ['script'],
script: [
{ innerHTML: `
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
`, type: 'text/javascript', charset: 'utf-8'}
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'vant/lib/index.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
{
src: '~/plugins/vue-inject',
ssr: false
}
],
/*
** Nuxt.js modules
*/
modules: [],
/*
** Build configuration
*/
router: {
// base: '/detection/' 上下文根据自己的需求自行打开修改
},
build: {
postcss: {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
},
extractCSS: true,
filenames: {
app: ({ isDev }) => isDev ? '[name].js' : '[name].[chunkhash:7].js',
chunk: ({ isDev }) => isDev ? '[name].js' : '[name].[chunkhash:7].js',
css: ({ isDev }) => isDev ? '[name].css' : '[name].[contenthash:7].css',
img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[name].[hash:7].[ext]',
font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[name].[hash:7].[ext]',
video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[name].[hash:7].[ext]'
},
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config.devtool = ['dev', 'test'].indexOf(process.env.NUXT_ENV_APP) !== -1 ? 'source-map' : false;
}
}
}
\ No newline at end of file
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册