Skip to content

P
pica.cloud.web-app-learning-report
提交 1b83af21 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

整理

上级 1310641d
显示空白字符变更
内嵌 并排
正在显示 包含 0 行增加 和 5167 行删除
components/search/BackTop.vue 已删除 100644 → 0
浏览文件 @ 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>
components/search/BottomLine.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/ConfirmTip.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/CourseAdjust.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/GroupTitle.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/HealthComics.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/HealthComicsNew.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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.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
class="teach-item"
v-for="(item, index) in cParamData"
:key="index"
@click="goToPage(item)"
>
<div class="left">
<p
v-bp="{ component_tag: '003#022004#健康知识' }"
v-html="getTextByHT(item.highLightHeaderName)"
></p>
<div class="labels">
<span v-for="(label,labelIndex) in item.labels" :key="labelIndex">{{label}}</span>
</div>
<div class="operation">
<button @click.stop="choiceComics(item)" v-if="appVerstion>=310">推送给居民</button>
<span>已推送{{item.sendNum}}</span>
</div>
</div>
<div class="right">
<img :src="item.imageUrl" alt />
<p>{{item.releaseTime}}</p>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapGetters } from "vuex";
import { searchForOrder, setEventByModuleCode } from "@/utils/index";
import { sortParmData } 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
},
{
key: "pageSource",
value: "4",
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
},
{
key: "pageSource",
value: "4",
type: 1,
seqNo: 2
}
];
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");
},
choiceComics(item) {
//推送给居民
item.comicsType = 4;
this.$rocNative.selectHealthcartoonCallBack(item);
},
//标题高亮
getTextByHT: function(rText) {
return rText.replace(/color:rgba/g, "font-weight:700;color:rgba");
}
}
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/mixin";
body {
background: #fff;
}
.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-list {
margin-top: px2rem(-14px);
overflow: hidden;
.teach-item {
padding: px2rem(20px) 0;
display: flex;
justify-content: space-between;
position: relative;
.left {
width: px2rem(245px);
display: flex;
flex-flow: column;
p {
font-size: px2rem(16px);
line-height: px2rem(18px);
font-family: PingFangSC;
font-weight: 700;
color: #373839;
width: px2rem(245px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
span {
font-weight: 700 !important;
}
}
.labels {
margin-top: px2rem(8px);
display: flex;
align-items: center;
span {
display: inline;
padding: 0 px2rem(5px);
height: px2rem(15px);
line-height: px2rem(15px);
margin-right: px2rem(6px);
background: #fffdfa;
border-radius: px2rem(2px);
font-size: px2rem(11px);
font-family: PingFangSC;
font-weight: 400;
color: #bf9e15;
position: relative;
}
span:after {
position: absolute;
content: " ";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 200%;
height: 200%;
border: 1PX solid #fae5af;
border-radius: px2rem(2px);
color: #e7e8e9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}
}
.operation {
margin-top: px2rem(6px);
display: flex;
align-items: center;
button {
padding: 0 px2rem(10px);
height: px2rem(25px);
line-height: px2rem(25px);
background: #fff;
color: #449284;
border-radius: px2rem(15px);
position: relative;
border: none;
margin-right: px2rem(10px);
font-size: px2rem(12px);
}
button:after {
position: absolute;
content: " ";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 200%;
height: 200%;
border: 1PX solid #449284;
opacity: 0.6;
border-radius: px2rem(30px);
color: #449284;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}
span {
font-size: px2rem(12px);
font-family: PingFangSC;
font-weight: 400;
color: #979899;
}
}
}
.right {
width: px2rem(80px);
height: px2rem(60px);
border-radius: px2rem(4px);
position: relative;
img {
width: px2rem(80px);
height: px2rem(60px);
border-radius: px2rem(4px);
}
p {
width: px2rem(77px);
height: px2rem(20px);
line-height: px2rem(20px);
position: absolute;
bottom: 0;
font-size: px2rem(12px);
font-family: PingFangSC;
font-weight: 700;
color: #fff;
text-align: right;
padding-right: px2rem(3px);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.5) 100%
);
border-bottom-right-radius: px2rem(4px);
border-bottom-left-radius: px2rem(4px);
}
}
}
.teach-item:after {
position: absolute;
content: " ";
left: 0;
top: 0;
right: 0;
height: 1PX;
border-top: 1PX solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
.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>
components/search/HistoryLabels copy 2.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/HistoryLabels copy.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/HistoryLabels.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/HotLabels.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/Loading-old.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/NoMoreItem.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/NoResultPage.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/SearchCourseList.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<template>
<section>
<GroupTitle
:groupTitle="groupTitle"
:groupNum="groupNum"
:showTitle=true
:isShowNum="isShowNum"
:showOrder="showOrder"
@order="orderAction"
/>
<div
v-bp="{ component_tag: '003#022007' }"
v-if="displayConfig && displayConfig.courseDisplayFlag && appVerstion >= 308"
class="jump-img"
@click="jumpToCourseByCatageryId"
>
<img src="../../assets/images/search/jump-bg.png" alt="">
<span :class="{'android-pt':isAndroid}" v-html="getTextByHT2(displayConfig.courseDisplayContent)"></span>
</div>
<div
v-bp="{ component_tag: '003#022004#课程' }"
class="item-course"
:class="{'item-course-h': item.highLightField == 2
|| item.highLightField == 3
|| item.highLightField == 4
|| item.highLightField == 5,
'is-last': index == cParamData.length - 1 && isShowNum}"
v-for="(item, index) in cParamData"
:key="index"
@click="goToPage(item)"
>
<div class="top-info">
<!-- <span class="top-flag">入门</span> -->
<!-- <span v-show="item.typeName" class="teacher-itemname-tag" :class="[item.typeId == 1 ? 'rm-bg' : item.typeId == 2 ? 'zj-bg': 'gj-bg']">{{item.typeId == 1 ? '入门' : item.typeId == 2 ? '中级' : '高级'}}</span> -->
<span class="teacher-itemname-tag" :class="[item.type == 1 ? 'rm-bg' : item.type == 2 ? 'zj-bg': 'gj-bg']">{{item.typeStr}}
</span>
<div class="ellipsis-1">
<span class="top-title" v-html="getTextByHT(item, 1, 'courseName', true)"></span>
</div>
<span
class="top-star"
@click.stop="collectFun(item.favorFlag, item.courseId)">
<span v-if="item.favorFlag == 1">
<span class="have-favor">已收藏</span>
</span>
<span v-else>
<img src="../../assets/images/search/collect-icon.png" />
<span class="have-no-favor">收藏</span>
</span>
</span>
</div>
<div class="bottom-info">
<div class="left-info">
<div class="top-flag">
<span v-html="getTextByHT(item, 6, 'docName')"></span><span :class="{'v-is-android': isAndroid}" class="ver-line">|</span><span class="chat">{{item.chapterSum}}章{{item.lectureNum}}节</span><span>{{item.totalTime}}分</span><span v-if="userInfo.userMobile" :class="{'v-is-android': isAndroid}" class="ver-line">|</span><span v-if="userInfo.userMobile">{{item | courseProgress}}</span>
<!-- <span v-html="item.docName"></span><span :class="{'v-is-android': isAndroid}" class="ver-line">|</span><span class="chat">{{item.chapterSum}}章{{item.lectureNum}}节</span><span>{{item.totalTime}}分</span><span v-if="isCourseProgress(item)" :class="{'v-is-android': isAndroid}" class="ver-line">|</span><span>{{item | courseProgress}}</span> -->
</div>
<div class="bottom-flag">
<span v-show="item.personGradeModel.purchased == 0" class="bottom-flag-title-mf">免费</span><span v-show="item.personGradeModel.purchased == 1" class="bottom-flag-title-ydh">已兑换<img src="../../assets/images/search/pc-icon.png" /></span><span v-show="item.personGradeModel.purchased == 2" class="bottom-flag-title">{{item | showCourseAcount}}云鹊豆<img src="../../assets/images/search/yqd-icon-2.png" /><img v-show="item.personGradeModel.costValueOnSale > 0" src="../../assets/images/search/discount-icon.png" /></span><span :class="{'v-is-android': isAndroid}" class="ver-line">|</span><span class="bottom-flag-num">{{yLocalString(item.joinNum)}}人已学</span>
</div>
</div>
<div class="right-img">
<!-- <img :src="item.courseImageUrl" /> -->
<img :src="item.courseImageUrl" />
<span>{{item.showTime}}</span>
</div>
</div>
<div class="bottom-keyword ellipsis-1-1"
v-show="item.highLightField == 2
|| item.highLightField == 3
|| item.highLightField == 4
|| item.highLightField == 5">
<span><span class="keyword">{{getHighLightText(item.highLightField)}}</span><span class="hl-name" v-html="item.highLightName"></span></span>
</div>
</div>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
import GroupTitle from '@/components/search/GroupTitle';
import { sousuoSearch } from '@/service';
import { searchForOrder, setEventByModuleCode } from "@/utils/index";
import { favorsCourse } from '@/service';
let mapDesc = ['', '课程名：', '关键字：', '', '章：', '节：']
export default {
name: "SearchCourseList",
props: {
dataObj: Object,
parmData: {
type: Array,
default: () => []
},
groupTitle: {
type: String,
default: '课程'
},
groupNum: {
type: Number | String,
default: 0
},
isShowNum: {
type: Boolean,
default: true
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
},
isListPage: {
type: Boolean,
default: false
}
},
data() {
return {
isAndroid: false,
list: [],
orderIndex: 0,
orderDir: 0,
isShowCourseNoItem: false
}
},
components: {
GroupTitle,
},
watch: {
orderNum(val) {
if ( !this.isListPage && this.groupNum > 0 ) {
this.orderIndex = 2
this.orderDir = 2
this.orderAction(2, 2)
}
},
refreshNum(val) {
if ( this.isListPage ) {
this.orderAction(0, 0)
} else {
this.orderAction(this.orderIndex, this.orderDir)
}
},
},
computed: {
...mapGetters({
cSearchText: 'cSearchText',
refreshNum: 'refreshNum',
orderNum: 'orderNum',
displayConfig: 'displayConfig',
userInfo: 'userInfo',
}),
appVerstion() {
let appVersion = this.userInfo.appVersion || '300';
return appVersion.split('.').join('')
},
cParamData() {
if (this.list && this.list.length) {
return this.list
} else {
return this.parmData
}
}
},
mounted() {
this.isAndroid = window.__isAndroid
},
methods: {
orderAction(orderIndex, orderDir) {
this.orderIndex = orderIndex
this.orderDir = orderDir
searchForOrder('1', this.cSearchText, orderIndex, this.orderDir, this.cParamData.length, this.parmData, this.userInfo.userToken).then( param => {
if (orderIndex == 0) {
this.list = param.splice(0, 4)
} else {
this.list = param
}
})
},
getTextByHT: function(item, typeId, typeName, needFW) {
let rText = ""
if(item.highLightField == typeId) {
rText = item.highLightName
} else {
rText = item[typeName]
}
if(needFW) {
rText = rText.replace(/color:rgba/g, 'font-weight:700;color:rgba');
}
return rText
},
getHighLightText(val){
return mapDesc[val]
},
// 将数字转换成带千分位数字及100万
yLocalString: function (value) {
if(value >= 1000000) return (value / 10000).toFixed(1) + '万';
var b = parseInt(value).toString();
if (b === 'NaN') return 0;
var len = b.length;
if (len <= 3) { return b; }
var r = len % 3;
return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{3}/g).join(",") : b.slice(r, len).match(/\d{3}/g).join(",");
},
// 将字符串截短至指定长度，并用在最后追加特定字符串（例如：...）
shortName: function (value, length = 10, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
// 跳转到课程分类页面
jumpToCourseByCatageryId() {
let paramList = [{
"key": "className",
"value": "com.picahealth.yunque.activitys.famousteacherschool.CourseCategoryActivity###MicroProfessionTableController",
"type": 4,
"seqNo": 1
},
{
"key": "lableIds",
"value": this.displayConfig.courseDisplayParam.join(','),
"type": 1,
"seqNo": 2
}]
this.$rocNative.dispatchEventByModuleCode({
modeCode: 'M200',
jsonString: paramList
})
},
// 收藏 取消收藏
collectFun(status, id) {
status = status == 0 ? 1 : 2;
let parms = {
token: this.userInfo.userToken,
type: status,
courseId: id,
setEntry: "headers"
};
favorsCourse(parms).then( res => {
if (res.code === "000000") {
if(this.isListPage) {
this.orderAction(0, 0)
} else {
this.orderAction(this.orderIndex, this.orderDir)
}
} else {
this.$rocNative.showNativeToast({
message: "登录后才能收藏"
});
}
});
},
// 跳转到课程介绍页
goToPage(item) {
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.courseId}`,
type: 1,
seqNo: 2
}
]
}
};
let paramList = setEventByModuleCode(itemData.appModuleInfo);
this.$rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
},
isCourseProgress(item) {
return this.userInfo.userMobile
},
getTextByHT2: function(rText) {
return rText.replace(/color:rgba/g, 'font-weight:700;color:rgba');
},
},
// 过滤器
filters: {
getTextByHT: function(item, typeId, typeName) {
if(item.highLightField == typeId) {
return item.highLightName
} else {
return item[typeName]
}
},
showCourseAcount(item) {
if(item.personGradeModel.costValueOnSale > 0){
return item.personGradeModel.costValueOnSale
} else {
return item.personGradeModel.costValue
}
},
courseProgress(item) {
if(item.status == 2) {
return '已学' + (item.courseProgress * 100).toFixed(0) + '%'
} else {
return item.statusStr
}
}
}
};
</script>
<style scoped lang="scss">
@import '@/assets/style/mixin';
@import '@/assets/style/global';
.item-course {
height: px2rem(102px);
margin: 0 auto;
margin: px2rem(10px) px2rem(15px) px2rem(20px);
box-sizing: border-box;
border-bottom: 0.5px solid #F0F1F2;
&-h {
height: px2rem(128px);
}
.top-info {
width: px2rem(345px);
height: px2rem(24px);
display: flex;
justify-content: space-between;
div {
align-items: center;
}
.top-flag {
width: px2rem(28px);
height: px2rem(16px);
line-height: px2rem(16px);
text-align: center;
font-size: px2rem(11px);
border-radius: px2rem(1px);
color: #fff;
background: #6a9fe9;
align-self: center;
font-weight: 300;
}
.top-title {
width: px2rem(240px);
// margin-left: px2rem(6px);
line-height: px2rem(24px);
color: #373839;
font-size: px2rem(16px);
font-weight: 700;
span {
font-weight: 700 !important;
color: #f68367;
}
}
.top-star {
width: px2rem(58px);
height: px2rem(24px);
line-height: px2rem(24px);
background: #f4f9f8;
border-radius: px2rem(15px);
text-align: center;
color: #449284;
font-size: px2rem(12px);
img {
width: px2rem(12px);
height: px2rem(12px);
vertical-align: middle;
}
span {
vertical-align: middle;
}
.have-favor {
background: #F8F9FA;
color: #C7C8C9;
}
.have-no-favor {
color: #449284;
}
}
}
.bottom-info {
width: px2rem(345px);
margin-top: px2rem(10px);
display: flex;
justify-content: space-between;
.left-info {
align-items: center;
div {
span {
img {
width: px2rem(12px);
height: px2rem(12px);
}
}
}
.top-flag {
font-size: px2rem(12px);
span {
color: #979899;
}
.ver-line {
position: relative;
top: 0;
left: 0;
margin: 0 px2rem(5px);
}
.chat {
padding-right: px2rem(6px);
}
}
.bottom-flag {
margin-top: px2rem(10px);
color: #676869;
font-size: px2rem(14px);
&-title {
font-weight: 700;
color: #676869;
&-mf {
font-weight: 700;
color: #F68367;
}
}
&-num {
color: #676869;
font-weight: 400;
}
span {
img {
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
padding: 0 0 px2rem(4px) px2rem(2px);
}
}
.ver-line {
position: relative;
top: 0;
left: 0;
margin: 0 px2rem(12px);
color: #979899;
}
}
}
.right-img {
align-items: center;
width: px2rem(80px);
height: px2rem(45px);
position: relative;
img {
width: 100%;
height: 100%;
}
span {
position: absolute;
right: 0;
bottom: 0;
width: px2rem(80px);
height: px2rem(20px);
padding-top: px2rem(4px);
padding: px2rem(4px) px2rem(2px) 0 0;
text-align: right;
font-size: px2rem(12px);
font-weight: 700;
color: #fff;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
}
}
}
}
.is-last {
border-bottom: 0px solid #fff !important;
margin-bottom: 0 !important;
}
.teacher-itemname-tag {
vertical-align: top;
height: px2rem(16px);
line-height: px2rem(16px);
margin-top: px2rem(4px);
padding: 0 px2rem(3px) 0;
border-radius: px2rem(2px);
font-size: px2rem(11px);
color: #fff;
background: rgba(106,159,233,1);
}
.rm-bg {
background-color: #6A9FE9 !important;
}
.zj-bg {
background-color: #449284 !important;
}
.gj-bg {
background-color: #CAA861 !important;
}
.bottom-keyword {
height: px2rem(36px);
line-height: px2rem(36px);
font-size: px2rem(12px);
.keyword {
color: #979899;
}
.hl-name {
color: #373839;
}
}
.ellipsis-1 {
width: 71%;
height: px2rem(30px);
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
white-space: nowrap;
}
.ellipsis-1-1 {
width: 100%;
height: px2rem(30px);
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
white-space: nowrap;
}
.jump-img {
position: relative;
top: 0;
left: 0;
text-align: center;
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;
}
}
.android-pt {
padding-top: px2rem(10px);
}
.v-is-android {
top: px2rem(-1px) !important;
}
</style>
components/search/SearchFiveMedicalList.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/SearchLecturerList.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
components/search/SearchMedicalLiveList.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<template>
<section>
<GroupTitle
:groupTitle="groupTitle"
:groupNum="groupNum"
:showTitle="showTitle"
:isShowNum="isShowNum"
:showOrder="showOrder"
/>
<div
v-bp="{ component_tag: '003#022004#医直播' }"
:class="{'first-item': index === 0,
'is-last': index == cParamData.length - 1}"
class="item-live"
v-for="(item, index) in cParamData"
:key="index"
@click="jumpToLiveById(item)"
>
<header>
<span class="tag before-tag" v-if="item.liveStatus==1">预告</span>
<span class="tag ing-tag" v-if="item.liveStatus==5">
<span class="tag-i" :class="{'tag-i-ios': !isAndroid}">
<i class="i-one"></i>
<i class="i-two"></i>
<i class="i-three"></i>
</span>
<span class="ing-txt">直播中&nbsp;</span>
</span>
<span class="tag end-tag" v-if="item.liveStatus==10">已结束</span>
<span class="tag end-tag" v-if="item.liveStatus==15">去回顾</span>
</header>
<section>
<div class="live-info">
<div class="title ellipsis-2" v-html="getTextByHT(item.liveName)"></div>
<!-- <div class="info"><span class="lect-name" v-html="shortName(`<span style='color:red;'>我想</span>`, 20)"></span> -->
<div class="info ellipsis-1"><span class="lect-name" v-html="item.lecturerName + ' ' + item.lecturerHospital + ' ' + item.lecturerTitle"></span>
<!-- <div class="info"><span class="lect-name" v-html="shortName(item.lecturerName + item.lecturerHospital, 20)"></span> -->
</div>
<div class="time">
<span>{{item.liveTime}}</span>
<span v-show="item.liveStatus != 1" class="number">{{item.userNum}}{{getStatusText(item.liveStatus)}}</span>
</div>
</div>
<aside>
<img :src="item.imageUrl" />
</aside>
</section>
</div>
</section>
</template>
<script>
import { searchForOrder } from "@/utils/index";
import { mapGetters } from 'vuex'
import GroupTitle from '@/components/search/GroupTitle';
let mapLiveStatus = {1: '', 5: '人正在看', 10: '人已看', 15: '人已看'}
export default {
name: "SearchMedicalLiveList",
components: {
GroupTitle,
},
props: {
dataObj: Object,
parmData: {
type: Array,
default: () => []
},
groupTitle: {
type: String,
default: '医直播'
},
isShowNum: {
type: 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,
isAndroid: false,
isShowLiveNoItem: 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: {
// 跳转到直播详情页面
jumpToLiveById(item) {
let paramList = [
{
"key": "className",
"value": "com.picahealth.yunque.activitys.living.CourseLivingActivity###LiveStreamingViewController",
"type": 4,
"seqNo": 1
},
{
"key": "liveId",
"value": item.liveId,
"type": 1,
"seqNo": 2
},
{
"key": "liveUrl",
"value": item.receiveStreamAddressIdentification,
"type": 1,
"seqNo": 3
},
{
"key": "liveUrlGQ",
"value": item.receiveStreamAddress,
"type": 1,
"seqNo": 4
},
{
"key": "liveStatus",
"value": item.liveStatus,
"type": 1,
"seqNo": 5
},
{
"key": "loginFlag",
"value": item.liveStatus == 1 ? '0' : '1',
"type": 1,
"seqNo": 6
}
]
this.$rocNative.dispatchEventByModuleCode({
modeCode: 'M200',
jsonString: paramList
})
},
getStatusText(liveStatus) {
return mapLiveStatus[liveStatus]
},
shortName: function (value, length = 10, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
orderAction(orderIndex, orderDir) {
this.orderIndex = orderIndex
this.orderDir = orderDir
searchForOrder('5', 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 scoped lang="scss">
@import '@/assets/style/mixin';
@import '@/assets/style/global';
.item-live {
width: px2rem(345px);
margin: 0 auto;
box-sizing: border-box;
border-bottom: 0.5px solid #f0f1f2;
padding: px2rem(20px) 0;
header {
img {
width: px2rem(52px);
height: px2rem(15px);
}
}
section {
display: flex;
justify-content: space-between;
.live-info {
width: px2rem(254px);
height: px2rem(100px);
.title {
height: px2rem(42px);
line-height: px2rem(21px);
color: #373839;
font-size: px2rem(16px);
font-weight: 700;
}
.info {
font-size: px2rem(12px);
margin-top: px2rem(19px);
.lect-name {
color: #676869;
margin-left: 0;
}
span {
color: #979899;
margin-left: px2rem(8px);
}
}
.time {
margin-top: px2rem(6px);
font-size: px2rem(12px);
display: flex;
justify-content: space-between;
.number {
color: #979899;
}
}
}
aside {
width: px2rem(75px);
height: px2rem(100px);
img {
width: 100%;
height: 100%;
display: block;
}
}
}
}
.first-item {
padding-top: 0;
height: px2rem(144px);
}
.is-last {
border-bottom: 0px solid #fff !important;
// margin-bottom: 0 !important;
}
.tag-i{
width: px2rem(10px);
height: px2rem(12px);
position: relative;
top: -3px;
left: 0;
margin-left: 0;
float: right;
i{
width:px2rem(1px);
/* display: inline-block;*/
background: #fff;
position: absolute;
left:0;
bottom:0;
-webkit-animation: bodong 0.5s infinite ease-in-out alternate;
-moz-animation: bodong 0.5s infinite ease-in-out alternate;
-o-animation: bodong 0.5s infinite ease-in-out alternate;
-ms-animation: bodong 0.5s infinite ease-in-out alternate;
animation: bodong 0.5s infinite ease-in-out alternate;
}
.i-one{
height: px2rem(10px);
-webkit-animation-delay:0.1s;
-moz-animation-delay:0.1s;
-o-animation-delay:0.1s;
-ms-animation-delay:0.1s;
animation-delay:0.1s;
}
.i-two{
height: px2rem(5px);
left: 4px;
-webkit-animation-delay:0.3s;
-moz-animation-delay:0.3s;
-o-animation-delay:0.3s;
-ms-animation-delay:0.3s;
animation-delay:0.3s;
}
.i-three{
height:px2rem(7px);
left: 8px;
-webkit-animation-delay:0.5s;
-moz-animation-delay:0.5s;
-o-animation-delay:0.5s;
-ms-animation-delay:0.5s;
animation-delay:0.5s;
}
@-webkit-keyframes bodong {
0%{height:0;}
40%{height:8px;}
100%{height:4px;}
}
@-moz-keyframes bodong {
0%{height:0;}
40%{height:8px;}
100%{height:4px;}
}
@-o-keyframes bodong {
0% {height:0; }
40% {height:8px;}
100% {height:4px;}
}
@-ms-keyframes bodong {
0% {height:0; }
40% {height:8px;}
100% {height:4px;}
}
@keyframes bodong {
0% {height:0; }
40% {height:8px;}
100% {height:4px;}
}
}
.tag-i-ios {
top: -1px !important;
}
.tag{
font-size: px2rem(10px);
padding: px2rem(3px) px2rem(5px) px2rem(1px);
display: inline-block;
margin-bottom: px2rem(4px);
}
.before-tag{
border-radius: px2rem(1px);
background:#FFF9E6;
color: #BE994B
}
.ing-tag {
background: -webkit-linear-gradient(left, #8DC5BB , #449284);
background: -o-linear-gradient(right, #8DC5BB , #449284);
background: -moz-linear-gradient(right, #8DC5BB , #449284);
background: linear-gradient(to right, #8DC5BB , #449284);
border-radius: px2rem(2px);
color: #fff;
}
.end-tag {
border-radius: px2rem(2px);
background: #EFF2F6;
color: #8D8D8D
}
.ing-txt{
// float: left;
color: #fff;
}
.ellipsis-1 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
white-space: nowrap;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
white-space: wrap;
}
</style>
components/search/ShowAllItem.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<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>
nuxt.config copy.js 已删除 100644 → 0
浏览文件 @ 1310641d
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
pages/result.vue 已删除 100644 → 0
浏览文件 @ 1310641d
<template>
<section id="navbar-container-wrapper">
<div class="top-bar-height"></div>
<form @submit.prevent="search" action="/">
<div class="search-container">
<img
class="search-container-img pt-22"
@click.stop="back"
src="../assets/images/sousuo/left-arrow-black.png"
/>
<div class="search-content">
<van-search
v-bp="{ component_tag: '003#022002' }"
v-model="searchText"
:maxlength="20"
:id="'focusInput'"
:show-action="appVerstion >= 308"
class="search-container-input"
@search="search"
>
<img
class="search-black"
slot="left-icon"
src="../assets/images/sousuo/search-black.png"
alt
/>
<div v-if="appVerstion >= 308" class="voice-container" slot="action">
<span></span>
<img
class="voice-search"
@click="awakeVoiceSearch"
src="../assets/images/sousuo/icon-voice.svg"
alt
/>
</div>
</van-search>
<span
v-bp="{ component_tag: '003#022003' }"
class="search-container-cancle"
@click.prevent="search"
>搜索</span>
</div>
</div>
<button v-show="false" v-bp="{ component_tag: '003#022003' }" type="submit" />
</form>
<div v-show="allNum != 0" class="category-wrapper">
<div class="category-wrapper-list">
<!-- <img class="pn-left" :src="pnLeft"> -->
<img class="pn-left" src="../assets/images/search/pn-left.png" />
<span
v-bp="{ component_tag: '003#022005#' + item }"
class="item"
@click.stop="clickCategory(index)"
v-for="(item, index) in ['综合', '课程', '5分钟医学院', '讲师', '健康知识', '医直播']"
:key="index"
>
<span class="item-text" :class="{'active-text': categoryIndex == index}">{{item}}</span>
<span class="item-flag" :class="{'active-flag': categoryIndex == index}"></span>
</span>
<!-- <img class="pn-right" :src="pnRight"> -->
<img class="pn-right" src="../assets/images/search/pn-right.png" />
</div>
<div v-if="isIOS" class="scroll-hide"></div>
</div>
<!-- 综合 -->
<div v-show="categoryIndex == 0 && allNum > 0" class="category-wrapper-content">
<div v-for="mIndex in displayOrder" :key="mIndex">
<!-- 课程 -->
<div v-if="contentAppModelCount && mIndex == 1">
<SearchCourseList
:parmData="contentAppModels"
:groupNum="contentAppModelCount"
:isListPage="true"
></SearchCourseList>
<ShowAllItem
v-bp="{ component_tag: '003#022006#课程' }"
@showAllItem="showAllItem"
itemIndex="1"
v-if="contentAppModelCount > 4"
></ShowAllItem>
<SplitLine v-if="displayOrder[4] != 1" height="6px" />
</div>
<!-- 5分钟 -->
<div v-if="fiveMinutesMedicalContentListCount && mIndex == 2">
<SearchFiveMedicalList
:parmData="fiveMinutesMedicalContentList"
:groupNum="fiveMinutesMedicalContentListCount"
:isListPage="true"
></SearchFiveMedicalList>
<ShowAllItem
v-bp="{ component_tag: '003#022006#5分钟医学院' }"
@showAllItem="showAllItem"
itemIndex="2"
v-if="fiveMinutesMedicalContentListCount > 4"
></ShowAllItem>
<SplitLine height="6px" v-if="displayOrder[4] != 2" />
</div>
<!-- 健康知识 -->
<div v-if="educationContentCount && mIndex == 3">
<HealthComics
:parmData="educationContents"
:groupNum="educationContentCount"
:isListPage="true"
/>
<ShowAllItem
v-bp="{ component_tag: '003#022006#健康知识' }"
@showAllItem="showAllItem"
itemIndex="4"
v-if="educationContentCount > 4"
></ShowAllItem>
<SplitLine height="6px" v-if="displayOrder[4] != 3" />
</div>
<!-- 讲师 -->
<div v-if="pCourseDoctorModelCount && mIndex == 4">
<SearchLecturerList
:parmData="pCourseDoctorModels"
:groupNum="pCourseDoctorModelCount"
:isListPage="true"
></SearchLecturerList>
<ShowAllItem
v-bp="{ component_tag: '003#022006#讲师' }"
@showAllItem="showAllItem"
itemIndex="3"
v-if="pCourseDoctorModelCount > 4"
:needMarginTop="true"
></ShowAllItem>
<SplitLine height="6px" v-if="displayOrder[4] != 4" />
</div>
<!-- 医直播 -->
<div v-if="liveModelListCount && mIndex == 5">
<SearchMedicalLiveList
:parmData="liveModelList"
:groupNum="liveModelListCount"
:isListPage="true"
></SearchMedicalLiveList>
<ShowAllItem
v-bp="{ component_tag: '003#022006#医直播' }"
@showAllItem="showAllItem"
itemIndex="5"
v-if="liveModelListCount > 4"
:needMarginTop="true"
></ShowAllItem>
<SplitLine height="6px" v-if="displayOrder[4] != 5" />
</div>
</div>
<NoMoreItem v-if="allNum > 10"></NoMoreItem>
</div>
<!-- 综合 没有搜索到内容 -->
<div class="pt-170" v-show="allNum == 0">
<NoResultPage></NoResultPage>
<SplitLine height="6px" />
<CourseAdjust></CourseAdjust>
</div>
<!-- 课程 -->
<div id="course-list-wrapper" v-show="categoryIndex == 1 && contentAppModelCount" class="category-wrapper-content">
<SearchCourseList
:parmData="contentAppModelsAll"
:groupNum="contentAppModelCount"
:groupTitle="getGroupTitle(contentAppModelCount)"
:isShowNum="false"
:showOrder="true"
/>
<NoMoreItem v-if="isShowCourseNoItem"></NoMoreItem>
</div>
<!-- 5分钟 -->
<div id="five-list-wrapper"
v-show="categoryIndex == 2 && fiveMinutesMedicalContentListCount"
class="category-wrapper-content"
>
<SearchFiveMedicalList
:parmData="fiveMinutesMedicalContentListAll"
:groupNum="fiveMinutesMedicalContentListCount"
:groupTitle="getGroupTitle(fiveMinutesMedicalContentListCount)"
:isShowNum="false"
:showOrder="true"
/>
<NoMoreItem v-if="isShowFiveNoItem"></NoMoreItem>
</div>
<!-- 讲师 -->
<div id="lecturer-list-wrapper" v-show="categoryIndex == 3 && pCourseDoctorModelCount" class="category-wrapper-content">
<SearchLecturerList
:parmData="pCourseDoctorModelsAll"
:groupNum="pCourseDoctorModelCount"
:groupTitle="getGroupTitle(pCourseDoctorModelCount)"
:isShowNum="false"
/>
<NoMoreItem v-if="isShowLecturerNoItem"></NoMoreItem>
</div>
<!-- 健康知识 -->
<div id="comic-list-wrapper" v-show="categoryIndex == 4 && educationContentCount" class="category-wrapper-content">
<HealthComics
:parmData="educationContentsAll"
:groupNum="educationContentCount"
:groupTitle="getGroupTitle(educationContentCount)"
:isShowNum="false"
:showOrder="true"
/>
<NoMoreItem v-if="isShowComicNoItem"></NoMoreItem>
</div>
<!-- 医直播 -->
<div id="live-list-wrapper" v-show="categoryIndex == 5 && liveModelListCount" class="category-wrapper-content">
<SearchMedicalLiveList
:parmData="liveModelListAll"
:groupNum="liveModelListCount"
:groupTitle="getGroupTitle(liveModelListCount)"
:isShowNum="false"
/>
<NoMoreItem v-if="isShowLiveNoItem"></NoMoreItem>
</div>
<!-- Tap页面没有内容时 -->
<div
class="pt-170"
v-show="(categoryIndex == 1 && contentAppModelCount == 0)
|| (categoryIndex == 2 && fiveMinutesMedicalContentListCount == 0)
|| (categoryIndex == 3 && pCourseDoctorModelCount == 0)
|| (categoryIndex == 4 && educationContentCount == 0)
|| (categoryIndex == 5 && liveModelListCount == 0)"
>
<NoResultPage></NoResultPage>
</div>
<Loading v-show="showLoading" />
<BackTop ref="refBackTop" @backTop="isShowTop=false" v-show="isShowTop" />
</section>
</template>
<script>
import VanSearch from "vant/lib/search";
import HealthComics from "@/components/search/HealthComicsNew";
import ShowAllItem from "@/components/search/ShowAllItem";
import SearchCourseList from "@/components/search/SearchCourseList";
import SearchFiveMedicalList from "@/components/search/SearchFiveMedicalList";
import SearchLecturerList from "@/components/search/SearchLecturerList";
import SearchMedicalLiveList from "@/components/search/SearchMedicalLiveList";
import SplitLine from "@/components/search/SplitLine";
import NoMoreItem from "@/components/search/NoMoreItem";
import NoResultPage from "@/components/search/NoResultPage";
import Loading from "@/components/search/Loading";
import CourseAdjust from "@/components/search/CourseAdjust";
import BackTop from "@/components/search/BackTop";
import { mapGetters, mapActions } from "vuex";
import { sousuoSearch } from '@/service';
import { handelFive, spliceCertenNumData } from '@/utils'
let heardHeight = 140;
let courseListHeight = 110;
let fiveListHeight = 87;
let lecturerListHeight = 66;
let comicListHeight = 110;
let liveListHeight = 152;
export default {
data() {
return {
token: "",
showOrder: true,
showLoading: false,
searchText: "",
showTitle: false,
showOrder: true,
adjustList: [],
categoryIndex: 0,
displayOrder: [],
isIOS: false,
isShowTop: false,
showNoItem: false,
showZHNoItem: false,
isShowCourseNoItem: false,
isShowFiveNoItem: false,
isShowLecturerNoItem: false,
isShowComicNoItem: false,
isShowLiveNoItem: false,
}
},
computed: {
...mapGetters({
displayConfig: "displayConfig",
orderNum: "orderNum",
refreshNum: "refreshNum",
userInfo: "userInfo"
}),
appVerstion() {
let appVersion = this.userInfo.appVersion || "300";
return appVersion.split(".").join("");
}
},
components: {
VanSearch,
HealthComics,
SplitLine,
SearchCourseList,
SearchFiveMedicalList,
SearchLecturerList,
SearchMedicalLiveList,
ShowAllItem,
NoMoreItem,
NoResultPage,
Loading,
CourseAdjust,
BackTop
},
async asyncData( context ) {
console.log(context)
// 去掉特殊字符
let str2 = (context.query && context.query.searchText || '').replace(
/[\-\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\L\<\>\?\/\\]/g, '');
// 将搜索的字符串保存到Store中
context.store.dispatch('setCSearchText', str2);
let params = {
searchCategory: "1,2,3,4,5",
searchValue: str2,
keywordColor: "rgba(244,122,72,1)",
sortItem: 0,
dir: 0,
pageNo: 1,
pageSize: 100,
token: context.query && context.query.token || '',
setEntry: "headers"
};
let rezult = await sousuoSearch(params);
if (rezult.code == "000000") {
let cData = rezult.data
let allNum = spliceCertenNumData(cData.contentAppModels, 4).length +
spliceCertenNumData(cData.fiveMinutesMedicalContentList, 4).length +
spliceCertenNumData(cData.pCourseDoctorModels, 4).length +
spliceCertenNumData(cData.educationContents, 4).length +
spliceCertenNumData(cData.liveModelList, 4).length
const vmData = {
categoryIndex: 0,
displayOrder: cData.displayOrder,
contentAppModels: spliceCertenNumData(cData.contentAppModels, 4),
contentAppModelsAll: cData.contentAppModels,
contentAppModelCount: cData.contentAppModelCount,
fiveMinutesMedicalContentList: handelFive(spliceCertenNumData(cData.fiveMinutesMedicalContentList, 4)),
fiveMinutesMedicalContentListAll: handelFive(cData.fiveMinutesMedicalContentList || []),
fiveMinutesMedicalContentListCount: cData.fiveMinutesMedicalContentListCount,
pCourseDoctorModels: spliceCertenNumData(cData.pCourseDoctorModels, 4),
pCourseDoctorModelsAll: cData.pCourseDoctorModels,
pCourseDoctorModelCount: cData.pCourseDoctorModelCount,
educationContents: spliceCertenNumData(cData.educationContents, 4),
educationContentsAll: cData.educationContents,
educationContentCount: cData.educationContentCount,
liveModelList: spliceCertenNumData(cData.liveModelList, 4),
liveModelListAll: cData.liveModelList,
liveModelListCount: cData.liveModelCount,
allNum: allNum
}
// 将搜索的字符串保存到Store中
context.store.dispatch('setDisplayConfig', {
courseDisplayFlag: cData.courseDisplayFlag || 0,
courseDisplayContent: cData.courseDisplayContent || "",
courseDisplayParam: cData.courseDisplayParam || [],
educationComtentDisplayFlag:
cData.educationComtentDisplayFlag || 0,
educationComtentDisplayContent:
cData.educationComtentDisplayContent || "",
educationComtentDisplayParam: cData
.educationComtentDisplayParam || {
id: 1,
name: "高血压",
seqNo: "1"
}
});
context.store.dispatch('setOrderNum', 2)
context.store.dispatch('setRefreshNum', 2)
return vmData;
} else {
context.store.dispatch('setRefreshNum', 2)
return {
contentAppModelCount: 0,
contentAppModels: [],
contentAppModelsAll: [],
educationContentCount: 0,
educationContents: [],
educationContentsAll: [],
fiveMinutesMedicalContentListCount: 0,
fiveMinutesMedicalContentList: [],
fiveMinutesMedicalContentListAll: [],
pCourseDoctorModelCount: 0,
pCourseDoctorModels: [],
pCourseDoctorModelsAll: [],
liveModelListCount: 0,
liveModelList: [],
liveModelListAll: [],
allNum: 0
}
}
},
created() {
if (process.client) {
this.searchText = this.$route.query.searchText.substr(0, 20) || "";
let _this = this;
// 暂时隐藏
if (this.$rocNative.isWeb) {
// _this.search();
}
// window.__refresh = function(params) {
// // alert('__refresh' + JSON.stringify(params))
// };
window.__setSearchText = function(params) {
_this.searchText = params.searchText;
_this.search();
};
window.addEventListener("scroll", this.scrollFun);
}
},
mounted() {
if(!this.$rocNative.isWeb) {
this.getUserInfo();
}
// this.search()
this.computedShowNoItem()
},
methods: {
...mapActions({
setCSearchText: "setCSearchText",
setOrderNum: "setOrderNum",
setRefreshNum: "setRefreshNum",
setDisplayConfig: "setDisplayConfig"
}),
computedShowNoItem() {
let screenHight = window.screen.height
let courseListWrapper = courseListHeight * this.contentAppModelCount;
let fiveListWrapper = fiveListHeight * this.fiveMinutesMedicalContentListCount;
let lectureListWrapper = lecturerListHeight * this.pCourseDoctorModelCount;
let comicListWrapper = comicListHeight * this.educationContentCount;
let liveListWrapper = liveListHeight * this.liveModelListCount;
this.isShowCourseNoItem = false
this.isShowFiveNoItem = false
this.isShowLecturerNoItem = false
this.isShowComicNoItem = false
this.isShowLiveNoItem = false
if(courseListWrapper > screenHight) {
this.isShowCourseNoItem = true
}
if(fiveListWrapper > screenHight) {
this.isShowFiveNoItem = true
}
if(lectureListWrapper > screenHight) {
this.isShowLecturerNoItem = true
}
if(comicListWrapper > screenHight) {
this.isShowComicNoItem = true
}
if(liveListWrapper > screenHight) {
this.isShowLiveNoItem = true
}
},
// 唤起搜索的语音助手
awakeVoiceSearch() {
this.$rocNative.gotoVoiceSearchActivity();
},
// 获取用户信息
getUserInfo() {
this.$rocNative
.getUserInfo()
.then(params => {
this.setUserInfo(params)
this.token = params.userToken;
this.search();
});
},
// 查看全部按钮
showAllItem(index) {
this.categoryIndex = index;
this.backTop();
},
// 搜索结果
search() {
this.backTop();
this.allNum = 1;
this.showLoading = true;
let str2 = (this.searchText || "").replace(
/[\-\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\L\<\>\?\/\\]/g,
""
); // 去掉特殊字符
this.setCSearchText(str2);
let _this = this,
para = {
searchCategory: "1,2,3,4,5",
searchValue: str2,
keywordColor: "rgba(244,122,72,1)",
sortItem: 0,
dir: 0,
pageNo: 1,
pageSize: 100,
token: _this.token,
setEntry: "headers"
};
// let url = "contents/searchKeyword/v2/search";
// this.GET(url, para).then(res => {
sousuoSearch(para).then(res => {
this.showLoading = false;
if (res.code == "000000") {
_this.categoryIndex = 0;
_this.displayOrder = res.data.displayOrder;
_this.setDisplayConfig({
courseDisplayFlag: res.data.courseDisplayFlag || 0,
courseDisplayContent: res.data.courseDisplayContent || "",
courseDisplayParam: res.data.courseDisplayParam || [],
educationComtentDisplayFlag:
res.data.educationComtentDisplayFlag || 0,
educationComtentDisplayContent:
res.data.educationComtentDisplayContent || "",
educationComtentDisplayParam: res.data
.educationComtentDisplayParam || {
id: 1,
name: "高血压",
seqNo: "1"
}
});
// _this.$nextTick(function() {
// 课程
_this.contentAppModels = spliceCertenNumData(
res.data.contentAppModels, 4
);
_this.contentAppModelsAll = res.data.contentAppModels;
_this.contentAppModelCount = res.data.contentAppModelCount;
// 5分钟医学
_this.fiveMinutesMedicalContentList = handelFive(spliceCertenNumData(
res.data.fiveMinutesMedicalContentList, 4
));
_this.fiveMinutesMedicalContentListAll = handelFive(
res.data.fiveMinutesMedicalContentList || []
);
_this.fiveMinutesMedicalContentListCount = res.data.fiveMinutesMedicalContentListCount;
// 讲师
_this.pCourseDoctorModels = spliceCertenNumData(
res.data.pCourseDoctorModels, 4
);
_this.pCourseDoctorModelsAll = res.data.pCourseDoctorModels;
_this.pCourseDoctorModelCount = res.data.pCourseDoctorModelCount;
// 健康漫画
_this.educationContents = spliceCertenNumData(
res.data.educationContents, 4
);
_this.educationContentsAll = res.data.educationContents;
_this.educationContentCount = res.data.educationContentCount;
// 直播
_this.liveModelList = spliceCertenNumData(
res.data.liveModelList, 4
);
_this.liveModelListAll = res.data.liveModelList;
_this.liveModelListCount = res.data.liveModelCount;
_this.setOrderNum(_this.orderNum + 1);
_this.setRefreshNum(_this.refreshNum + 1);
_this.allNum =
_this.contentAppModels.length +
_this.fiveMinutesMedicalContentList.length +
_this.pCourseDoctorModels.length +
_this. educationContents.length +
_this.liveModelList.length;
// });
_this.computedShowNoItem()
}
});
},
// 从原数组中提取前num个元素
spliceCertenNumData(oriData, num) {
let result = [];
if (oriData.length === 0 || oriData.length < num) {
return oriData;
} else {
for (let i = 0; i < num; i++) {
result.push(oriData[i]);
}
return result.slice();
}
},
// 将滚动条置顶
backTop: function() {
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop > 0) {
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
},
// 单击选中各个分类
clickCategory(categoryIndex) {
this.categoryIndex = categoryIndex;
this.$refs.refBackTop.backTop();
// this.backTop()
},
// 每个分类的标题栏
getGroupTitle(count) {
return "共" + count + "条结果";
},
// 头部返回
back() {
if (this.$route.query.pageFrom == "searchIndex") {
this.$router.push("/index");
} else {
this.$rocNative.goBack();
}
},
// 滚动事件（scroll）监听器
scrollFun() {
let navConWrapDom = document.querySelector("#navbar-container-wrapper");
let navConWrapDomOT = document.querySelector("#navbar-container-wrapper").offsetParent.offsetTop;
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 5) {
this.isShowTop = true;
} else {
this.isShowTop = false;
}
},
}
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/mixin";
@import "@/assets/style/global";
.category {
&-wrapper {
position: fixed;
top: px2rem(76px);
left: 0;
right: 0;
z-index: 4;
height: px2rem(52px);
overflow: hidden;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
background: #fff;
&::-webkit-scrollbar {
width: 0px;
height: 0px;
display: none;
}
&-list {
// width: 100%;
display: flex;
margin-right: px2rem(15px);
margin-left: px2rem(15px);
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
// border-bottom: 1px solid hsla(0,0%,91%,.2);
// height: px2rem(50px);
-webkit-overflow-scrolling: touch;
// box-shadow: 0px px2rem(2px) px2rem(8px) 0 rgba(0,0,0,0.04) inset;
&::-webkit-scrollbar {
width: 0px;
height: 0px;
display: none;
}
.item {
display: flex;
flex-direction: column;
padding: px2rem(16px) px2rem(10px) 0;
align-items: center;
span {
font-size: px2rem(15px);
font-weight: 400;
}
&-text {
color: #979899;
}
.active-text {
color: #373839 !important;
font-weight: 700;
}
.active-flag {
background: #449284;
}
&-flag {
width: px2rem(10px);
height: px2rem(3px);
border-radius: px2rem(2px);
background: #fff;
margin-top: px2rem(10px);
}
&:first-child {
padding-left: 0 !important;
}
&:last-child {
padding-right: 0 !important;
}
}
.pn-left {
position: fixed;
right: px2rem(0px);
width: px2rem(21px);
height: px2rem(50px);
}
.pn-right {
position: fixed;
left: px2rem(0px);
width: px2rem(21px);
height: px2rem(50px);
}
}
&-content {
font-size: px2rem(15px);
padding-top: px2rem(135px);
}
.scroll-hide {
position: fixed;
top: px2rem(111px);
left: 0;
z-index: 5;
width: px2rem(375px);
height: px2rem(3px);
background: #fff;
}
}
}
.search-container {
display: flex;
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
flex-direction: row;
text-align: center;
padding: px2rem(40px) 0 px2rem(12.5px) ;
background: #fff;
border-bottom: 0.5px solid #e7e7e7;
&-img {
/* padding: px2rem(21px) 0 px2rem(10px) px2rem(16px);*/
width: px2rem(20px);
height: px2rem(20px);
font-size: 0;
position: absolute;
bottom: px2rem(18px);
left: px2rem(16px);
// transform: rotate(180deg);
}
// .pt-22 {
// padding-top: px2rem(22px);
// }
&-img2 {
position: absolute;
top: px2rem(10px);
left: px2rem(24px);
z-index: 2;
img {
width: px2rem(22px);
height: px2rem(22px);
}
}
&-img3 {
position: absolute;
top: px2rem(9px);
left: px2rem(274px);
z-index: 2;
img {
width: px2rem(22px);
height: px2rem(22px);
}
}
&-input {
display: inline-flex;
flex: 1;
position: relative;
left: px2rem(0px);
width: px2rem(280px);
height: px2rem(30px);
margin-left: px2rem(0px);
// padding-left: px2rem(26px);
// padding-right: px2rem(28px);
border-radius: px2rem(4px);
background: rgba(246, 246, 246, 1);
font-size: px2rem(13px);
color: #666;
-webkit-appearance: none;
vertical-align: bottom;
}
&-cancle {
position: relative; top: px2rem(-6px);
left: px2rem(4px);
height: px2rem(14px);
line-height: px2rem(14px);
margin-top: px2rem(2px);
font-size: px2rem(14px);
color: #373839;
vertical-align: baseline;
}
.search-content {
margin-left: px2rem(40px);
}
}
.top-bar-height {
position: fixed;
height: px2rem(20px);
width: 100%;
top: 0;
left: 0;
z-index: 2;
background: #fff;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
.ios-top {
padding-top: px2rem(22.5px);
}
.pt-170 {
padding-top: px2rem(172px);
}
</style>
<style lang="scss">
@import '@/assets/style/mixin';
// .van-cell__value {
// top: px2rem(2px) !important;
// }
.van-field__control {
margin-top: px2rem(4px) !important;
}
.mint-search {
position: fixed;
top: 0px;
z-index: 2;
height: 66px;
width: 100%;
/* margin: 0 20px; */
border-bottom: 0.5px solid #e7e7e7 !important;
background-color: #fff;
}
.mint-searchbar {
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #fff;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 10px;
padding: 30px 10px 8px;
z-index: 1;
}
.mint-searchbar-cancel {
margin-left: 10px;
font-size: 14px;
color: #999;
text-decoration: none;
}
.mint-searchbar-inner {
background: #f5f6f6;
}
.mint-searchbar-core {
color: #555555;
background: #f5f6f6;
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或