提交 082da397 编写于 作者: 杨广俊's avatar 杨广俊

删除多余的文件

上级 d94a37eb
...@@ -8,15 +8,15 @@ ...@@ -8,15 +8,15 @@
<transition name="router-fade" mode="out-in"> <transition name="router-fade" mode="out-in">
<router-view v-if="!$route.meta.keepAlive"></router-view> <router-view v-if="!$route.meta.keepAlive"></router-view>
</transition> </transition>
<svg-icon></svg-icon> <!-- <svg-icon></svg-icon> -->
</div> </div>
</template> </template>
<script> <script>
import svgIcon from './components/common/svg'; // import svgIcon from './componentsn/common/svg';
export default { export default {
components:{ components:{
svgIcon // svgIcon
}, },
} }
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<style lang="scss"> <style lang="scss">
@import './style/common'; @import './style/common';
.router-fade-enter-active, .router-fade-leave-active { .router-fade-enter-active, .router-fade-leave-active {
transition: opacity .3s; transition: opacity .1s;
} }
.router-fade-enter, .router-fade-leave-active { .router-fade-enter, .router-fade-leave-active {
opacity: 0; opacity: 0;
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
<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(1)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 1}">学习人数</span>
<img src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 1"/>
</div>
<div @click="order(2)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 2}">发布时间</span>
<img src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 2"/>
</div>
</article>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
showOrderIndex: 1
}
},
props: {
groupTitle: {
type: String,
default: '课程'
},
isShowNum: {
type: Boolean,
default: true
},
groupNum: {
type: String,
default: "0"
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
}
},
computed: {
...mapGetters({
orderNum: 'orderNum'
})
},
watch: {
orderNum(val) {
this.showOrderIndex = 1
}
},
methods: {
toggle() {
this.showTitle = !showTitle
this.showOrder = !showOrder
},
order(index) {
this.showOrderIndex = index
this.$emit('order', index)
},
// resetShowOrderIndex(){
// this.showOrderIndex = 1
// }
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.group-title {
margin-left: px2rem(15px);
display: flex;
flex-direction: row;
&-order {
display: flex;
flex-direction: row;
padding: px2rem(20px) 0 px2rem(10px);
font-size: px2rem(13px);
&-item {
position: relative;
span {
margin-right: px2rem(30px);
}
img {
position: absolute;
top: px2rem(2px);
left: px2rem(51px);
height: px2rem(15px);
width: px2rem(15px);
}
}
}
.active {
color: #449284;
}
&-title {
padding: px2rem(20px) 0 px2rem(10px);
font-size: px2rem(18px);
font-weight: 500;
color: #28344C;
&-ml-6 {
margin-left: -6px;
}
}
}
</style>
<template>
<section>
<GroupTitle groupTitle="健康漫画" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder" @order="orderAction"/>
<div class="font-style">
<div class="teach-opt">
<div class="teach-list">
<div :class="index%2==1 ? 'list-item mr0':'list-item'"
v-for="(item, index) in cParamData" :key="index"
@click="goToPage(item)">
<div class="tea-img" :style="'background:'+ item.bgColor">
<img :src="item.imageUrl">
<!-- <span class="learn-p">{{item.joinNum}}人已学</span> -->
<!-- <span class="learn-p">{{item.joinNum | yLocalString}}人已学</span> -->
</div>
<div class="tea-txt">
<!-- <div class="tea-name">{{item.doctorName}}</div> -->
<div class="tea-position" v-html="item.highLightHeaderName">
<!-- {{item.headerName}} -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
import { sortParmData } from '@/utils/index'
import {
m_search_result_health_cartoon_detail,
m_search_result_health_cartoon_order,
m_search_result_health_cartoon_top,
} from '@/utils/buryingPoint'
import GroupTitle from '@/components/business/group-title';
export default {
data() {
return {
topTitle: '讲师集',
isScroll: false,
token: '',
list: [],
isShowCount: true,
followCount: 0,
studyCount: 0,
col: 1, //0综合,1人气,2资源数,3姓名首字母
dir: 2, //1:正序 2:逆序
}
},
components: {
GroupTitle
},
props: {
parmData: {
type: Array,
default: () => []
},
groupNum: {
type: String,
default: '0'
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
}
},
computed: {
...mapGetters({
cSearchText: 'cSearchText',
orderNum: 'orderNum'
}),
cParamData() {
if (this.list && this.list.length) {
return this.list
} else {
return this.parmData
}
}
},
watch: {
orderNum(val) {
if (this.showOrder) {
this.orderAction(1, true)
}
}
},
mounted() {
let _this = this
this.token = this.$route.query.userToken || this.$route.query.token
// this.getUserInfo()
// this.getData();
// window.__getUserInfo = function(parm){
// // alert('in __getUserInfo')
// _this.token = parm.userToken || _this.$route.query.token;
// this.getData();
// }
// window.__refresh = function (parm) {
// _this.getData();
// }
window.addEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll: function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 25) {
this.isScroll = true;
} else {
this.isScroll = false;
}
},
//获取版本号
getUserInfo() {
rocNative.getUserInfo({
__funcName: '__getUserInfo'
})
},
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 = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
this.pageBurialPoin({
...m_search_result_health_cartoon_detail,
labelValue: item.headerName,
createdTime: new Date().getTime(),
})
},
orderAction(orderIndex, notBP) {
if(!notBP) {
this.pageBurialPoin({
...m_search_result_health_cartoon_order,
labelValue: orderIndex,
createdTime: new Date().getTime(),
})
}
this.searchForOrder('4', this.cSearchText, orderIndex, this.groupNum, this.parmData).then( param => {
this.list = param
})
}
}
}
</script>
<style>
body {
background: #fff
}
</style>
<style lang="scss" scoped>
body {
background: #fff
}
@import '../../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('../../images/headerTop.png');
.logo_img {
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
<template>
<article v-if="allLabels && allLabels.length > 0" class="history-labels">
<section class="history-labels-title">
<span>{{title}}</span>
<span v-show="showDelete" class="history-labels-title-all">
<span @click="confirmDelete">全部删除</span><span>|</span><span @click="toggleDelete">取消</span>
</span>
<img @click="toggleDelete" v-show="!showDelete" src="../../images/sousuo/recicle.png" alt="删除">
</section>
<section class="history-labels-item"
v-if="index < 15"
@click="searchAction(item.keyword)"
v-for="(item, index) in allLabels" :key="index" >
<span class="history-labels-item-name">
<span >{{item.keyword}}</span>
<img @click.stop="deleteLabels(false, index)" v-show="showDelete"
src="../../images/sousuo/delete.png" alt=""
>
</span>
</section>
<ConfirmTip v-show="showConfirm" @cancle="showConfirm=false" @confirm="confirm"/>
</article>
</template>
<script>
import {
m_search_history_search_hs,
m_search_history_search_db,
m_search_history_search_d,
m_search_history_search_da,
m_search_history_search_dc,
} from '@/utils/buryingPoint'
import ConfirmTip from '@/components/common/confirm-tip'
export default {
name: 'HistoryLabels',
props: {
// allLabels: {
// type: Array
// },
title: {
type: String,
default: '历史搜索'
}
},
components: {
ConfirmTip
},
data () {
return {
token: '',
allLabels: [],
showDelete: false,
showConfirm: false
}
},
created() {
let _self = this;
window.__getUserInfo_HL = function(params){
_self.token = params.userToken
_self.getData()
}
},
mounted(){
if(window.__isWeb) {
this.getData()
}
this.getUserInfo()
},
methods: {
searchAction(searchText) {
this.pageBurialPoin({
...m_search_history_search_hs,
labelValue: searchText,
createdTime: new Date().getTime(),
})
if(this.showDelete) return
this.$router.push({
path: '/result',
query: {
searchText: searchText
}
})
},
// 获取历史搜索
getData() {
let _this = this,
para = {
token: _this.token,
setEntry: 'headers'
}
let url = 'contents/searchHistory/listHistory'
this.GET(url, para).then(res => {
// alert('getData' + JSON.stringify(res))
if (res.code == '000000') {
this.allLabels = res.data.list
console.log(res)
}
})
},
// 删除关键词
deleteLabels(isAll, index=0, length=1) {
if(isAll) {
this.pageBurialPoin({
...m_search_history_search_dc,
labelValue: '',
createdTime: new Date().getTime(),
})
} else {
this.pageBurialPoin({
...m_search_history_search_d,
labelValue: '',
createdTime: new Date().getTime(),
})
}
let _this = this,
para = {
token: _this.token,
setEntry: 'headers',
keywordIds: []
};
let url = 'contents/searchHistory/deleteHistory'
if (isAll) {
para.keywordIds = this.allLabels.map(element => {
return element.id
});
} else {
para.keywordIds.push(this.allLabels[index].id)
}
this.POST(url, para).then(res => {
if (res.code == '000000') {
// this.allLabels = res.data.list
this.allLabels.splice(index, para.keywordIds.length)
}
})
},
confirm() {
this.deleteLabels(true)
},
toggleDelete() {
this.pageBurialPoin({
...m_search_history_search_db,
labelValue: this.showDelete - 0,
createdTime: new Date().getTime(),
})
this.showDelete = !this.showDelete
},
getUserInfo: function () {
// alert('in hist getUserInfo')
rocNative.getUserInfo({'__funcName': '__getUserInfo_HL'})
},
confirmDelete() {
this.showConfirm = true
this.pageBurialPoin({
...m_search_history_search_da,
labelValue: this.showConfirm - 1,
createdTime: new Date().getTime(),
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.history-labels {
width: 100%;
padding: 0 px2rem(15px) 0;
margin-bottom: px2rem(20px);
background-color: #fff;
&-title {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: space-between;
span {
font-size: px2rem(12px);
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(0px) px2rem(15px) 0 0;
text-align: center;
align-items: center;
&-name {
position: relative;
top: 0;
left: 0;
padding: px2rem(6px) px2rem(15px) px2rem(8px);
border-radius: px2rem(15px);
background-color: #F8F8F8;
color: #999;
font-size: px2rem(13px);
span {
background-color: #F8F8F8;
color: #999;
font-size: px2rem(13px);
}
img {
position: absolute;
top: px2rem(-10px);
right: px2rem(-10px);
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
}
}
}
</style>
<template>
<article v-if="allLabels && allLabels.length > 0" class="history-labels">
<section class="history-labels-title">
<span>{{title}}</span>
</section>
<!-- <section class="history-labels-item" @click="hotLabel(item.resourceType, item.structureId, item.resourceUrl, item.labelName, item)" v-for="(item, index) in allLabels" :key="index"> -->
<section class="history-labels-item"
v-if="index < 15"
@click="gotoPage(item)"
v-for="(item, index) in allLabels" :key="index">
<span class="history-labels-item-name">{{item.keyword}}</span>
</section>
</article>
</template>
<script>
import {
m_search_history_hot_search
} from '@/utils/buryingPoint'
import {
mapMutations
} from 'vuex'
export default {
name: 'HotLabels',
props: {
title: {
type: String,
default: '热门搜索'
}
},
data() {
return {
allLabels: []
}
},
mounted() {
this.getData()
},
methods: {
gotoPage(itemData){
console.log('itemData', itemData)
// 如果没有跳转信息,则直接到搜索结果页面
this.pageBurialPoin({
...m_search_history_hot_search,
labelId: itemData.id,
labelValue: itemData.keyword,
createdTime: new Date().getTime()
})
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.searchAction(itemData.keyword)
return
}
// if(!itemData.appModuleInfo || (itemData.appModuleInfo.code === 'M100' )){
// this.searchAction(itemData.keyword)
// return
// }
let paramList = this.setEventByModuleCode(itemData);
if(paramList !== 'NO') {
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
}
},
searchAction(searchText) {
if(this.showDelete) return
this.$router.push({
path: '/result',
query: {
searchText: searchText
}
})
},
// ...mapMutations([
// 'SET_CLEAR_VUEX'
// ]),
hotLabel(val, id, url, name, item) {
this.$emit('hotLabel', id, name)
//讲师集
switch (val) {
case 1:
this.SET_CLEAR_VUEX()
this.jumpToCourse(item.resourceId);
break;
case 2:
this.SET_CLEAR_VUEX()
//window.location.href=url;
this.jumpToCartoon(url, name)
break;
case 3:
this.SET_CLEAR_VUEX()
this.$router.push({
path: '/lecturer',
query: {
id: id
}
})
break;
default:
break;
}
},
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 = []
}
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
}]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
},
// 获取历史搜索
getData() {
let _this = this,
para = {
type: 2,
token: _this.token,
setEntry: 'headers'
}
let url = '/contents/searchKeyword/listKeywords'
this.GET(url, para).then(res => {
if (res.code == '000000') {
this.allLabels = res.data
console.log(res)
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.history-labels {
width: 100%;
padding: 0 px2rem(15px) 0;
margin-bottom: px2rem(6px);
background-color: #fff;
&-title {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: space-between;
span {
font-size: px2rem(12px);
color: #666;
}
img {
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
}
&-item {
display: inline-flex;
height: px2rem(30px);
margin: px2rem(0px) px2rem(15px) 0 0;
text-align: center;
align-items: center;
&-name {
padding: px2rem(6px) px2rem(15px) px2rem(8px);
border-radius: px2rem(15px);
background-color: #F8F8F8;
color: #999;
font-size: px2rem(13px);
}
}
}
</style>
<template>
<section class="no-more">
<span class="no-more-sub"></span>
<span class="no-more-text">{{noMoreText}}</span>
<span class="no-more-sub"></span>
</section>
</template>
<script>
export default {
data() {
return {
noMoreText: '已经到底了'
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.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(13px);
// height: px2rem(26px);
border: px2rem(1px) solid rgba(200,200,200,1);
border-bottom: 0;
}
&-text {
padding: 0 px2rem(4px);
font-size: px2rem(11px);
color: #B3B3B3;
}
}
</style>
<template>
<section class="no-result">
<img src="../../images/sousuo/search-big.png" alt="">
<p>没有找到相关内容</p>
<p>您可以修改条件后重新搜索</p>
</section>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.no-result {
height: px2rem(180px);
margin-top: px2rem(0px);
text-align: center;
img {
width: px2rem(100px);
height: px2rem(100px);
}
p {
font-size: px2rem(15px);
color: #999;
}
}
</style>
<template>
<article class="search-wrapper">
<section class="search-wrapper-input">
<!-- <form action="" @submit.stop.prevent="search"> -->
<img src='../../images/search-grey.png'>
<input type="search" v-model="currentText2" @keydown.enter="search"/>
<!-- <button type="submit" v-show="false"/> -->
<!-- </form> -->
</section>
<section class="search-wrapper-cancle">
<span @click="cancel">取消</span>
</section>
</article>
</template>
<script>
export default {
data() {
return {
currentText2: ''
}
},
props: {
searchText: {
type: String,
default: ''
}
},
computed: {
currentText: {
get: function(){
return this.searchText
},
set: function(val) {
this.currentText2 = val
}
}
},
// watch: {
// searchText(val) {
// this.currentText = val
// console.log(val)
// }
// },
mounted() {
// this.getData()
},
methods: {
// 取消
cancel() {
console.log('in cancel')
this.currentText = ''
},
// 搜索
search() {
console.log(this.currentText2)
this.$emit('search', this.currentText2)
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
// @import '../../style/global.scss';
.search-wrapper {
display: flex;
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
flex-direction: row;
padding: px2rem(20px) px2rem(10px) px2rem(10px) px2rem(15px);
text-align: center;
align-items: center;
background: #fff;
border-bottom: 1px solid #F8F8F8;
&-input {
width: px2rem(290px);
height: px2rem(30px);
border: 1px solid #efefef;
border-radius: px2rem(18px);
background: rgba(245, 246, 246, 1);
img {
position: relative;
top: px2rem(-13px);
left: px2rem(0px);
width: px2rem(14px);
height: px2rem(14px);
}
input {
position: relative;
top: px2rem(-15px);
left: px2rem(-8px);
width: px2rem(240px);
height: px2rem(30px);
line-height: px2rem(30px);
text-decoration-color: #bbb;
color: #666;
font-size: px2rem(13px);
font-weight: 400;
background: rgba(245, 246, 246, 1);
user-select: all;
&[type="search"]::-webkit-search-cancel-button{
display: none;
}
}
}
&-cancle {
position: relative;
top: 0;
left: px2rem(15px);
// width: px2rem(60px);
font-size: px2rem(14px);
color: #999;
span {
padding: px2rem(4px);
}
}
}
</style>
<template>
<article v-if="allLabels && allLabels.length > 0" class="search-tag search-label">
<!-- <section :style="{'text-align': direction}" class="search-tag-title">
{{title}}
</section> -->
<header class="history-search-title">
<span>{{title}}</span>
<img v-show="showDelete" src="../../images/sousuo/recicle.png" alt="删除">
</header>
<div class="search-tag-item"
@click="hotLabel(item.resourceType, item.structureId, item.resourceUrl, item.labelName, item)"
v-for="(item, index) in allLabels" :key="index" >
<span class="item-name">{{item.doctorName}}</span>
</div>
</article>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
name: 'YqyHotLabel',
props: {
allLabels: {
type: Array
},
direction: {
type: String,
default: 'left'
},
title: {
type: String,
default: '历史搜索'
},
hasBanner: {
type: Boolean,
default: false
},
hasInfo: {
type: Boolean,
default: false
},
showDelete: {
type: Boolean,
default: true
}
},
data () {
return {
}
},
mounted(){
},
methods: {
...mapMutations([
'SET_CLEAR_VUEX'
]),
hotLabel(val,id,url,name,item){
this.$emit('hotLabel',id,name)
//讲师集
switch (val) {
case 1:
this.SET_CLEAR_VUEX()
this.jumpToCourse(item.resourceId);
break;
case 2:
this.SET_CLEAR_VUEX()
//window.location.href=url;
this.jumpToCartoon(url,name)
break;
case 3:
this.SET_CLEAR_VUEX()
this.$router.push({path:'/lecturer',query:{id:id}})
break;
default:
break;
}
},
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 = []
}
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
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.search-tag {
padding: 0 px2rem(15px) 0;
}
.search-label {
width: 100%;
background-color: #fff;
margin-bottom: px2rem(6px);
}
.search-tag-title {
font-size: px2rem(12px);
font-weight: bold;
}
.search-tag-item {
display: inline-flex;
height: px2rem(30px);
margin: px2rem(0px) px2rem(15px) 0 0;
text-align: center;
align-items: center;
.item-name {
padding: px2rem(6px) px2rem(15px) px2rem(8px);
border-radius: px2rem(15px);
background-color: #F8F8F8;
color: #999;
font-size: px2rem(13px);
}
}
.history-search-title {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: space-between;
span {
// padding: px2rem(4px) px2rem(4px);
font-size: px2rem(12px);
color: 6;
}
img {
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
}
</style>
<template>
<section class="show-wrapper">
<article class="show-wrapper-all" :class="{'border-top': showTopBorder}">
<span class="show-wrapper-all-item" @click="showAllItem">{{noMoreText}}</span>
</article>
</section>
</template>
<script>
import {
m_search_result_colligation_all
} from '@/utils/buryingPoint'
export default {
data() {
return {
}
},
props: {
showTopBorder: {
type: Boolean,
default: true
},
noMoreText: {
type: String,
default: '查看全部'
},
itemIndex: {
type: String,
default: '0'
}
},
methods: {
showAllItem() {
this.pageBurialPoin({
...m_search_result_colligation_all,
labelValue: '',
createdTime: new Date().getTime(),
})
this.$emit('showAllItem', this.itemIndex)
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
// @import '../../style/global.scss';
.show-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&-all {
height: px2rem(40px);
width: px2rem(345px);
&-item {
display: block;
margin-top: px2rem(11px);
text-align: center;
font-size: px2rem(11px);
color: #999999;
}
}
}
.border-top {
border-top: px2rem(1px) solid rgba(240,240,240,1);
}
</style>
<template>
<section style="border-bottom: 0" :style="{'border-color': borderColor, 'border-style': borderStyle, 'border-width': borderWidth}">
</section>
</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 '../../style/mixin.scss';
// @import '../../style/global.scss';
</style>
<template>
<section>
<GroupTitle groupTitle="讲师" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder" @order="orderAction"/>
<div class="font-style">
<div class="teach-opt">
<div class="teach-list">
<div :class="index % 2 == 1 ? 'list-item mr0' : 'list-item'"
v-for="(item, index) in cParamData" :key="index"
@click="goToPage(item)">
<div class="tea-img" :style="'background:'+ item.bgColor">
<img :src="item.appImageUrl">
<span class="learn-p">{{item.joinNum}}人已学</span>
<!-- <span class="learn-p">{{item.joinNum | yLocalString}}人已学</span> -->
</div>
<div class="tea-txt">
<div class="tea-name" v-html="item.highLightName">{{item.name}}</div>
<div class="tea-position">
{{item.doctorHospital}}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
import { jumpWebPageUrl } from '@/utils/index'
import { sortParmData } from '@/utils/index'
import {
m_search_result_lecturer_detail,
m_search_result_lecturer_order,
m_search_result_lecturer_top,
} from '@/utils/buryingPoint'
import GroupTitle from '@/components/business/group-title';
export default {
data() {
return {
topTitle: '讲师集',
token: '',
list: [],
isShowCount: true,
followCount: 0,
studyCount: 0,
col: 1, //0综合,1人气,2资源数,3姓名首字母
dir: 2, //1:正序 2:逆序
}
},
components: {
GroupTitle
},
props: {
parmData: {
type: Array,
default: () => []
},
groupNum: {
type: String,
default: '0'
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
}
},
mounted() {
// window.__refresh = function (parm) {
// _this.getData();
// }
window.addEventListener('scroll', this.handleScroll)
},
computed: {
...mapGetters({
cSearchText: 'cSearchText',
userInfo: 'userInfo',
orderNum: 'orderNum'
}),
cParamData() {
if (this.list && this.list.length) {
return this.randomBg(this.list)
} else {
return this.randomBg(this.parmData)
}
}
},
watch: {
orderNum(val) {
if (this.showOrder) {
this.orderAction(1, true)
}
}
},
methods: {
//跳转
goToPage(item){
let _this = this,
url = '',action_code = '',label_id = '';
url = jumpWebPageUrl+'appl/#/teachersDetail?id='+item.id+"&from=appHome&userToken="+ _this.userInfo.userToken
action_code = 'c_teacher';
label_id = item.id;
let itemData = {
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.pageBurialPoin({
...m_search_result_lecturer_detail,
labelId: label_id,
labelValue :item.name,
createdTime: new Date().getTime()
})
},
// goToDetail(item) {
// let _this = this;
// this.$router.push({
// path: '/details',
// query: {
// id: item.doctorId,
// token: _this.token
// }
// })
// this.pageBurialPoin({
// ...m_search_result_lecturer_detail,
// labelValue: item.name,
// createdTime: new Date().getTime(),
// })
// },
randomBg(d) {
for (let i = 0; i < d.length; i++) {
if (i % 4 == 0) {
d[i].bgColor = '#EBF6F1'
} else if (i % 4 == 1) {
d[i].bgColor = '#EDF3FA'
} else if (i % 4 == 2) {
d[i].bgColor = '#F0F0FA'
} else if (i % 4 == 3) {
d[i].bgColor = '#F6EFE6'
}
}
return d
},
orderAction(orderIndex, notBP) {
if(!notBP) {
this.pageBurialPoin({
...m_search_result_lecturer_order,
labelValue: orderIndex,
createdTime: new Date().getTime(),
})
}
this.searchForOrder('3', this.cSearchText, orderIndex, this.groupNum, this.parmData).then( param => {
this.list = param
})
}
}
}
</script>
<style>
body {
background: #fff
}
</style>
<style lang="scss" scoped>
body {
background: #fff
}
@import '../../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: 1px solid rgba(0, 0, 0, 0.02);
border-radius: 0 0 px2rem(3px) px2rem(3px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0 {
margin-right: 0
}
.tea-txt {
padding: px2rem(5px) px2rem(7px);
}
.tea-img {
width: px2rem(170px);
height: px2rem(83px);
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(30px);
font-size: px2rem(12px);
line-height: px2rem(15px);
color: #666;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis('../../images/headerTop.png');
.logo_img {
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
.ellipsis-1 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
</style>
<template>
<div class="alet_container">
<section class="tip_text_container">
<div class="tip_icon">
<span></span>
<span></span>
</div>
<p class="tip_text">{{alertText}}</p>
<div class="confrim" @click="closeTip">确认</div>
</section>
</div>
</template>
<script>
export default {
data(){
return{
positionY: 0,
timer: null,
}
},
mounted(){
},
props: ['alertText'],
methods: {
closeTip(){
this.$emit('closeTip')
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
@keyframes tipMove{
0% { transform: scale(1) }
35% { transform: scale(.8) }
70% { transform: scale(1.1) }
100% { transform: scale(1) }
}
.alet_container{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 200;
}
.tip_text_container{
position: absolute;
top: 50%;
left: 50%;
margin-top: -6rem;
margin-left: -6rem;
width: 12rem;
animation: tipMove .4s ;
background-color: rgba(255,255,255,1);
border: 1px;
padding-top: .6rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px;
border-radius: 0.25rem;
.tip_icon{
@include wh(3rem, 3rem);
border: 0.15rem solid #f8cb86;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
span:nth-of-type(1){
@include wh(.12rem, 1.5rem);
background-color: #f8cb86;
}
span:nth-of-type(2){
@include wh(.2rem, .2rem);
border: 1px;
border-radius: 50%;
margin-top: .2rem;
background-color: #f8cb86;
}
}
.tip_text{
@include sc(.7rem, #333);
line-height: .9rem;
text-align: center;
margin-top: .8rem;
padding: 0 .4rem;
}
.confrim{
@include sc(.8rem, #fff);
font-weight: bold;
margin-top: .8rem;
background-color: #4cd964;
width: 100%;
text-align: center;
line-height: 1.8rem;
border: 1px;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
}
</style>
<template>
<section class="back-top">
<div class="back-btn" @click="backTop">
<img src="../../images/backTop.png"/>
</div>
</section>
</template>
<script>
import {
m_search_result_colligation_top
} from '@/utils/buryingPoint'
export default {
data(){
return {
objPoint:{}
}
},
props: {
burialPoint:{
default:'',
type:String
}
},
// computed: {
// cNeedShow() {
// return this.needShow
// }
// },
mounted(){
},
methods: {
backTop: function(){
this.pageBurialPoin({
...m_search_result_colligation_top,
labelValue: '',
createdTime: new Date().getTime(),
})
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if(osTop > 0){
document.documentElement.scrollTop = document.body.scrollTop = 0;
this.$emit('backTop')
// this.needShow = false
}
}
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.back-btn{
position: fixed;
width: px2rem(35px);
height: px2rem(35px);
right: px2rem(15px);
z-index: 100;
bottom: px2rem(80px);;
img{
width: 100%;
height: 100%;
display: block;
}
}
</style>
<template>
<section class="cart_module">
<section v-if="!foods.specifications.length" class="cart_button">
<transition name="showReduce">
<span @click="removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock)" v-if="foodNum">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
</svg>
</span>
</transition>
<transition name="fade">
<span class="cart_num" v-if="foodNum">{{foodNum}}</span>
</transition>
<svg class="add_icon" @touchstart="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
</svg>
</section>
<section v-else class="choose_specification">
<section class="choose_icon_container">
<transition name="showReduce">
<svg class="specs_reduce_icon" v-if="foodNum" @click="showReduceTip">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
</svg>
</transition>
<transition name="fade">
<span class="cart_num" v-if="foodNum">{{foodNum}}</span>
</transition>
<span class="show_chooselist" @click="showChooseList(foods)">选规格</span>
</section>
</section>
</section>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
export default {
data(){
return{
showMoveDot: [], //控制下落的小圆点显示隐藏
}
},
mounted(){
},
computed: {
...mapState([
'cartList'
]),
/**
* 监听cartList变化,更新当前商铺的购物车信息shopCart,同时返回一个新的对象
*/
shopCart: function (){
return Object.assign({},this.cartList[this.shopId]);
},
//shopCart变化的时候重新计算当前商品的数量
foodNum: function (){
let category_id = this.foods.category_id;
let item_id = this.foods.item_id;
if (this.shopCart&&this.shopCart[category_id]&&this.shopCart[category_id][item_id]) {
let num = 0;
Object.values(this.shopCart[category_id][item_id]).forEach((item,index) => {
num += item.num;
})
return num;
}else {
return 0;
}
},
},
props:['foods', 'shopId'],
methods: {
...mapMutations([
'ADD_CART','REDUCE_CART',
]),
//移出购物车
removeOutCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock){
if (this.foodNum > 0) {
this.REDUCE_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
}
},
//加入购物车,计算按钮位置。
addToCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock, event){
this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
let elLeft = event.target.getBoundingClientRect().left;
let elBottom = event.target.getBoundingClientRect().bottom;
this.showMoveDot.push(true);
this.$emit('showMoveDot', this.showMoveDot, elLeft, elBottom);
},
//显示规格列表
showChooseList(foodScroll){
this.$emit('showChooseList', foodScroll)
},
//点击多规格商品的减按钮,弹出提示
showReduceTip(){
this.$emit('showReduceTip')
},
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.cart_module{
.add_icon{
position: relative;
z-index: 999;
}
.cart_button{
display: flex;
align-items: center;
}
svg{
@include wh(.9rem, .9rem);
fill: #3190e8;
}
.specs_reduce_icon{
fill: #999;
}
.cart_num{
@include sc(.65rem, #666);
min-width: 1rem;
text-align: center;
font-family: Helvetica Neue,Tahoma;
}
.choose_specification{
.choose_icon_container{
display: flex;
align-items: center;
.show_chooselist{
display: block;
@include sc(.55rem, #fff);
padding: .1rem .2rem;
background-color: $blue;
border-radius: 0.2rem;
border: 1px solid $blue;
}
}
}
}
.showReduce-enter-active, .showReduce-leave-active {
transition: all .3s ease-out;
}
.showReduce-enter, .showReduce-leave-active {
opacity: 0;
transform: translateX(1rem);
}
.fade-enter-active, .fade-leave-active {
transition: all .3s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
}
.fadeBounce-enter-active, .fadeBounce-leave-active {
transition: all .3s;
}
.fadeBounce-enter, .fadeBounce-leave-active {
opacity: 0;
transform: scale(.7);
}
</style>
<template>
<div class="page">
<span class="rem_time" style="color: orange;border-width: 1px;border-style: solid;border-color: orange;" @click="gotoPay">
{{remaining}}
</span>
<alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
</div>
</template>
<script>
import alertTip from 'src/components/common/alertTip'
export default {
data(){
return{
countNum: 900,
showAlert: false,
alertText: null,
}
},
mounted(){
this.countNum -= this.numTime;
this.remainingTime();
},
props: ['time'],
components: {
alertTip,
},
methods: {
closeTip(){
this.$emit('closeTip')
},
//计算时间
remainingTime(){
clearInterval(this.timer);
this.timer = setInterval(() => {
this.countNum --;
if (this.countNum == 0) {
clearInterval(this.timer);
this.showAlert = true;
this.alertText = '支付超时';
}
}, 1000);
},
gotoPay(){
this.showAlert = true;
this.alertText = '暂不开放支付接口';
}
},
computed: {
//转换时间成分秒
remaining: function (){
let minute = parseInt(this.countNum/60);
let second = parseInt(this.countNum%60);
if (minute < 10) {
minute = '0' + minute;
}
if (second < 10) {
second = '0' + second;
}
return '去支付(还剩' + minute + '分' + second + '秒)';
},
//订单返回时间秒分分别处理
numTime: function (){
if (this.time.toString().indexOf('分钟') !== -1) {
return parseInt(this.time)*60;
}else{
return parseInt(this.time);
}
}
},
}
</script>
<style lang="scss" scoped>
@import 'src/style/mixin';
.page{
display: inline-block;
.rem_time{
@include sc(.55rem, orange);
padding: .1rem .2rem;
border-radius: .15rem;
}
}
</style>
<template>
<section class="xb-pop-wrap">
<div v-if="show" class="img-content">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/xbdzz/xb_pop.png"/>
<span @click="goSearch"></span>
<img class="close" @click="close" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/xbdzz/xb_close.png"/>
</div>
<div v-if="show" @click="close" class="shadow"></div>
</section>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
// 关闭xb弹框
close() {
this.show = false
},
// 去看看
goSearch() {
this.$router.push({path:'xb',query:{pop:true}})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.xb-pop-wrap {
.img-content {
position: fixed;
left: px2rem(61px);
top: px2rem(192px);
z-index: 9999999999;
width: px2rem(250px);
img {
width: 100%;
}
img.close {
display: block;
width: px2rem(30px);
margin: 0 auto;
}
span {
position: absolute;
left: px2rem(46px);
bottom: px2rem(41px);
display: block;
width: px2rem(158px);
height: px2rem(46px);
}
}
.shadow {
position: fixed;
left: 0;
top: 0;
z-index: 999999999;
background: #000;
opacity: 0.5;
width: 100%;
height: 100%;
}
}
</style>
<template>
<section class="loader loader--style3" title="2">
<div class="loader-mask"></div>
<article class="confirm-content">
<span class="confirm-content-title">{{confirmTitle}}</span>
<div class="confirm-content-split"></div>
<div class="confirm-content-btn">
<span class="confirm-content-btn-confirm" @click="confirm">{{confirmBtnText}}</span>
<span class="confirm-content-btn-split"></span>
<span 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 '../../style/mixin';
.loader {
&-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
background: rgba(205,205,205, 0.6);
}
.confirm-content {
position: absolute;
top: px2rem(280px);
left: px2rem(52.5px);
z-index: 101;
width: px2rem(270px);
height: px2rem(116px);
border-radius: px2rem(6px);
text-align: center;
font-weight: 400;
background: #fff;
&-title {
display: inline-flex;
height: px2rem(70px);
line-height: px2rem(70px);
font-size: px2rem(17px);
color: rgba(102,102,102,1);
}
&-split {
border-top: 1px solid #F0F0F0;
}
&-btn {
display: flex;
padding-top: px2rem(14px);
justify-content: center;
font-size: px2rem(15px);
&-confirm {
color: #999;
}
&-split {
margin: 0 px2rem(50px);
border-left: 1px solid #F0F0F0;
}
&-concle {
color: #4A9E8F;
}
}
}
}
</style>
<template>
<div class="loader">
<img class="loader-mask" src="../../images/sousuo/sousuo-fc.png" />
<span @click="closeFC" class="loader-btn">我知道了</span>
</div>
</template>
<script>
export default {
methods: {
closeFC() {
this.$emit('closeFC')
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
&-mask {
position: fixed;
top: px2rem(64px);
left: px2rem(38px);
bottom: px2rem(64px);
right: px2rem(37px);
width: px2rem(300px);
z-index: 4;
background: rgba(0, 0, 0, 0.5);
}
&-btn {
display: inline-block;
position: absolute;
left: px2rem(128px);
bottom: px2rem(120px);
height: px2rem(30px);
width: px2rem(120px);
z-index: 6;
text-align: center;
padding-top: px2rem(4px);
font-size: px2rem(15px);
border: 1px solid #fff;
border-radius: px2rem(30px);
color: #fff;
}
}
</style>
<template>
<div class="loader loader--style3" title="2">
<div class="loader-mask"></div>
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
</template>
<style lang="scss" scoped>
@import '../../style/mixin';
.loader {
margin: 0 0 2em;
height: 100px;
width: 20%;
text-align: center;
padding: 1em;
margin: 0 auto 1em;
display: inline-block;
vertical-align: top;
&-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
background: rgba(205,205,205, 0.8);
}
svg {
position: absolute;
top: px2rem(280px);
left: px2rem(166px);
z-index: 101;
}
}
svg path, svg rect{
fill: #449284;
}
</style>
<template>
<div class="loader loader--style3" title="2">
<div class="loader-mask"></div>
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
</template>
<style lang="scss" scoped>
@import '../../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;
}
</style>
<template>
<div class="loading_container">
<div class="load_img" :style="{backgroundPositionY: -(positionY%7)*2.5 + 'rem'}">
</div>
<svg class="load_ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="26" cy="10" rx="26" ry="10" style="fill:#ddd;stroke:none;"></ellipse>
</svg>
</div>
</template>
<script>
export default {
data(){
return{
positionY: 0,
timer: null,
}
},
mounted(){
this.timer = setInterval(() => {
this.positionY ++;
}, 600)
},
beforeDestroy(){
clearInterval(this.timer);
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
@keyframes load{
0% {transform: translateY(0px);}
50% {transform: translateY(-50px);}
100% {transform: translateY(0px);}
}
@keyframes ellipse{
0% {transform: scale(1);}
50% {transform: scale(0.3);}
100% {transform: scale(1);}
}
.loading_container{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@include wh(2.5rem, 2.5rem);
}
.load_img{
@include wh(100%, 100%);
// background: url(../../images/icon_loading.png) no-repeat 0 0;
background: url(../../images/loading-new.png) no-repeat 0 0;
background-size: 2.5rem auto;
transform: translateY(0px);
animation: load .6s infinite ease-in-out;
position: relative;
z-index: 11;
}
.load_ellipse{
position: absolute;
@include wh(2.6rem, 2rem);
top: 2.2rem;
left: 0.2rem;
z-index: 10;
animation: ellipse .6s infinite ease-in-out;
}
</style>
import { getStyle } from '../../config/mUtils'
import { imgBaseUrl, localapi, proapi } from '../../config/env'
export const loadMore = {
directives: {
'load-more': {
bind: (el, binding) => {
let windowHeight = window.screen.height;
let height;
let setTop;
let paddingBottom;
let marginBottom;
let requestFram;
let oldScrollTop;
let scrollEl;
let heightEl;
let scrollType = el.attributes.type && el.attributes.type.value;
let scrollReduce = 2;
if (scrollType == 2) {
scrollEl = el;
heightEl = el.children[0];
} else {
scrollEl = document.body;
heightEl = el;
}
el.addEventListener('touchstart', () => {
height = heightEl.clientHeight;
if (scrollType == 2) {
height = height
}
setTop = el.offsetTop;
paddingBottom = getStyle(el, 'paddingBottom');
marginBottom = getStyle(el, 'marginBottom');
}, false)
el.addEventListener('touchmove', () => {
loadMore();
}, false)
el.addEventListener('touchend', () => {
oldScrollTop = scrollEl.scrollTop;
moveEnd();
}, false)
const moveEnd = () => {
requestFram = requestAnimationFrame(() => {
if (scrollEl.scrollTop != oldScrollTop) {
oldScrollTop = scrollEl.scrollTop;
moveEnd()
} else {
cancelAnimationFrame(requestFram);
height = heightEl.clientHeight;
loadMore();
}
})
}
const loadMore = () => {
if (scrollEl.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
binding.value();
}
}
}
}
}
};
export const getImgPath = {
methods: {
//传递过来的图片地址需要处理后才能正常使用
getImgPath(path) {
let suffix;
if (!path) {
return '//yqy.cangdu.org/img/default.jpg'
}
if (path.indexOf('jpeg') !== -1) {
suffix = '.jpeg'
} else {
suffix = '.png'
}
let url = '/' + path.substr(0, 1) + '/' + path.substr(1, 2) + '/' + path.substr(3) + suffix;
return 'https://fuss10.elemecdn.com' + url
},
}
}
\ No newline at end of file
<template>
<div class="rating_container">
<section class="star_container">
<svg class="grey_fill" v-for="num in 5" :key="num">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
</svg>
</section>
<div :style="'width:' + rating*2/5 + 'rem'" class="star_overflow">
<section class="star_container" >
<svg class="orange_fill" v-for="num in 5" :key="num">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
</svg>
</section>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
mounted(){
},
props:['rating'],
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.rating_container{
position: relative;
top: .2rem;
@include wh(2rem, .4rem);
.star_overflow{
overflow: hidden;
position: relative;
height: 100%;
}
.star_container{
position: absolute;
display: flex;
width: 2rem;
height: 0.4rem;
top: -0.02rem;
left: -0.02rem;
.grey_fill{
fill: #d1d1d1;
}
.orange_fill{
fill: #ff9a0d;
}
}
}
</style>
<template>
<div class="shoplist_container">
<ul v-load-more="loaderMore" v-if="shopListArr.length" type="1">
<router-link :to="{path: 'shop', query:{geohash, id: item.id}}" v-for="item in shopListArr" tag='li' :key="item.id" class="shop_li">
<section>
<img :src="imgBaseUrl + item.image_path" class="shop_img">
</section>
<hgroup class="shop_right">
<header class="shop_detail_header">
<h4 :class="item.is_premium? 'premium': ''" class="" class="shop_title ellipsis">{{item.name}}</h4>
<ul class="shop_detail_ul">
<li v-for="item in item.supports" :key="item.id" class="supports">{{item.icon_name}}</li>
</ul>
</header>
<h5 class="rating_order_num">
<section class="rating_order_num_left">
<section class="rating_section">
<rating-star :rating='item.rating'></rating-star>
<span class="rating_num">{{item.rating}}</span>
</section>
<section class="order_section">
月售{{item.recent_order_num}}
</section>
</section>
<section class="rating_order_num_right">
<span class="delivery_style delivery_left" v-if="item.delivery_mode">{{item.delivery_mode.text}}</span>
<span class="delivery_style delivery_right" v-if="zhunshi(item.supports)">准时达</span>
</section>
</h5>
<h5 class="fee_distance">
<p class="fee">
¥{{item.float_minimum_order_amount}}起送
<span class="segmentation">/</span>
{{item.piecewise_agent_fee.tips}}
</p>
<p class="distance_time">
<span v-if="Number(item.distance)">{{item.distance > 1000? (item.distance/1000).toFixed(2) + 'km': item.distance + 'm'}}
<span class="segmentation">/</span>
</span>
<span v-else>{{item.distance}}</span>
<span class="segmentation">/</span>
<span class="order_time">{{item.order_lead_time}}</span>
</p>
</h5>
</hgroup>
</router-link>
</ul>
<ul v-else class="animation_opactiy">
<li class="list_back_li" v-for="item in 10" :key="item">
<img src="../../images/shopback.svg" class="list_back_svg">
</li>
</ul>
<p v-if="touchend" class="empty_data">没有更多了</p>
<aside class="return_top" @click="backTop" v-if="showBackStatus">
<svg class="back_top_svg">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#backtop"></use>
</svg>
</aside>
<div ref="abc" style="background-color: red;"></div>
<transition name="loading">
<loading v-show="showLoading"></loading>
</transition>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {shopList} from 'src/service/getData'
import {imgBaseUrl} from 'src/config/env'
import {showBack, animate} from 'src/config/mUtils'
import {loadMore, getImgPath} from './mixin'
import loading from './loading'
import ratingStar from './ratingStar'
export default {
data(){
return {
offset: 0, // 批次加载店铺列表,每次加载20个 limit = 20
shopListArr:[], // 店铺列表数据
preventRepeatReuqest: false, //到达底部加载数据,防止重复加载
showBackStatus: false, //显示返回顶部按钮
showLoading: true, //显示加载动画
touchend: false, //没有更多数据
imgBaseUrl,
}
},
mounted(){
this.initData();
},
components: {
loading,
ratingStar,
},
props: ['restaurantCategoryId', 'restaurantCategoryIds', 'sortByType', 'deliveryMode', 'supportIds', 'confirmSelect', 'geohash'],
mixins: [loadMore, getImgPath],
computed: {
...mapState([
'latitude','longitude'
]),
},
updated(){
// console.log(this.supportIds, this.sortByType)
},
methods: {
async initData(){
//获取数据
let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
this.shopListArr = [...res];
if (res.length < 20) {
this.touchend = true;
}
this.hideLoading();
//开始监听scrollTop的值,达到一定程度后显示返回顶部按钮
showBack(status => {
this.showBackStatus = status;
});
},
//到达底部加载更多数据
async loaderMore(){
if (this.touchend) {
return
}
//防止重复请求
if (this.preventRepeatReuqest) {
return
}
this.showLoading = true;
this.preventRepeatReuqest = true;
//数据的定位加20位
this.offset += 20;
let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
this.hideLoading();
this.shopListArr = [...this.shopListArr, ...res];
//当获取数据小于20,说明没有更多数据,不需要再次请求数据
if (res.length < 20) {
this.touchend = true;
return
}
this.preventRepeatReuqest = false;
},
//返回顶部
backTop(){
animate(document.body, {scrollTop: '0'}, 400,'ease-out');
},
//监听父级传来的数据发生变化时,触发此函数重新根据属性值获取数据
async listenPropChange(){
this.showLoading = true;
this.offset = 0;
let res = await shopList(this.latitude, this.longitude, this.offset, '', this.restaurantCategoryIds, this.sortByType, this.deliveryMode, this.supportIds);
this.hideLoading();
//考虑到本地模拟数据是引用类型,所以返回一个新的数组
this.shopListArr = [...res];
},
//开发环境与编译环境loading隐藏方式不同
hideLoading(){
this.showLoading = false;
},
zhunshi(supports){
let zhunStatus;
if ((supports instanceof Array) && supports.length) {
supports.forEach(item => {
if (item.icon_name === '准') {
zhunStatus = true;
}
})
}else{
zhunStatus = false;
}
return zhunStatus
},
},
watch: {
//监听父级传来的restaurantCategoryIds,当值发生变化的时候重新获取餐馆数据,作用于排序和筛选
restaurantCategoryIds: function (value){
this.listenPropChange();
},
//监听父级传来的排序方式
sortByType: function (value){
this.listenPropChange();
},
//监听父级的确认按钮是否被点击,并且返回一个自定义事件通知父级,已经接收到数据,此时父级才可以清除已选状态
confirmSelect: function (value){
this.listenPropChange();
}
}
}
</script>
<style lang="scss" scoped>
@import 'src/style/mixin';
.shoplist_container{
background-color: #fff;
margin-bottom: 2rem;
}
.shop_li{
display: flex;
border-bottom: 0.025rem solid #f1f1f1;
padding: 0.7rem 0.4rem;
}
.shop_img{
@include wh(2.7rem, 2.7rem);
display: block;
margin-right: 0.4rem;
}
.list_back_li{
height: 4.85rem;
.list_back_svg{
@include wh(100%, 100%)
}
}
.shop_right{
flex: auto;
.shop_detail_header{
@include fj;
align-items: center;
.shop_title{
width: 8.5rem;
color: #333;
padding-top: .01rem;
@include font(0.65rem, 0.65rem, 'PingFangSC-Regular');
font-weight: 700;
}
.premium::before{
content: '品牌';
display: inline-block;
font-size: 0.5rem;
line-height: .6rem;
color: #333;
background-color: #ffd930;
padding: 0 0.1rem;
border-radius: 0.1rem;
margin-right: 0.2rem;
}
.shop_detail_ul{
display: flex;
transform: scale(.8);
margin-right: -0.3rem;
.supports{
@include sc(0.5rem, #999);
border: 0.025rem solid #f1f1f1;
padding: 0 0.04rem;
border-radius: 0.08rem;
margin-left: 0.05rem;
}
}
}
.rating_order_num{
@include fj(space-between);
height: 0.6rem;
margin-top: 0.52rem;
.rating_order_num_left{
@include fj(flex-start);
.rating_section{
display: flex;
.rating_num{
@include sc(0.4rem, #ff6000);
margin: 0 0.2rem;
}
}
.order_section{
transform: scale(.8);
margin-left: -0.2rem;
@include sc(0.4rem, #666);
}
}
.rating_order_num_right{
display: flex;
align-items: center;
transform: scale(.7);
min-width: 5rem;
justify-content: flex-end;
margin-right: -0.8rem;
.delivery_style{
font-size: 0.4rem;
padding: 0.04rem 0.08rem 0;
border-radius: 0.08rem;
margin-left: 0.08rem;
border: 1px;
}
.delivery_left{
color: #fff;
background-color: $blue;
border: 0.025rem solid $blue;
}
.delivery_right{
color: $blue;
border: 0.025rem solid $blue;
}
}
}
.fee_distance{
margin-top: 0.52rem;
@include fj;
@include sc(0.5rem, #333);
.fee{
transform: scale(.9);
@include sc(0.5rem, #666);
}
.distance_time{
transform: scale(.9);
span{
color: #999;
}
.order_time{
color: $blue;
}
.segmentation{
color: #ccc;
}
}
}
}
.loader_more{
@include font(0.6rem, 3);
text-align: center;
color: #999;
}
.empty_data{
@include sc(0.5rem, #666);
text-align: center;
line-height: 2rem;
}
.return_top{
position: fixed;
bottom: 3rem;
right: 1rem;
.back_top_svg{
@include wh(2rem, 2rem);
}
}
.loading-enter-active, .loading-leave-active {
transition: opacity 1s
}
.loading-enter, .loading-leave-active {
opacity: 0
}
</style>
<template>
<section :class="isNavFix ? 'nav-top fixed' : 'nav-top'">
<div class="nav-part" :style="'background:'+bgColor">
<div class="nav-title">
<span class="nav-back" @click="goBack">
<img src="../../images/grey-throw.png"/>
</span>
{{title}}
<!-- <span class="nav-share" @click="goShare">
<img src="../../images/Shape1@2x.png"/>
</span> -->
</div>
</div>
</section>
</template>
<script>
export default {
data(){
return{
// title:'测试',
content:'',
shareImageUrl:'',
}
},
props:{
bgColor:{//背景色
type:String,
default:''
},
title:{//标题
type:String,
default:'暂无数据'
},
isNavFix:{//是否fix定位
type:Boolean,
default:true
},
burialPoint:{
default:'',
type:String
}
},
mounted(){
if(this.burialPoint == 'activity'){
this.objPoint = {
menuLevel:2,
menuFromCode:'m_home',
menuCode:'m_content_list',
functionCode:'f_activity',
actionCode:'c_last'
}
}
},
methods: {
//返回
goBack(){
if(this.burialPoint == 'activity'){
this.pageBurialPoin(this.objPoint);
}
this.$router.back(-1);
//rocNative.backPreviousPage();
//rocNative.goBack();
},
//分享
goShare(){
let url = location.hef,_this = this;
rocNative.shareWechat({
url:url,
title:_this.title,
content:_this.content,
shareImageUrl:_this.shareImageUrl
})
}
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.nav-top{
height: px2rem(65px);
background: #fff;
color: #333;
position: relative;
z-index: 109;
.nav-back{
display: inline-block;
position: absolute;
left:px2rem(8px);;
top:0;
height: px2rem(25px);
width: px2rem(25px);
transform:rotate(180deg);
}
img{
display: block;
width: 100%;
height: 100%
}
.nav-icon{
display: inline-block;
width: 50px;
height: 50px;
svg{
stroke: #000;
fill: #0000ff;
}
}
.nav-share{
position: absolute;
right: px2rem(8px);;
top:0;
height: px2rem(25px);
width: px2rem(25px);
}
.nav-title{
display: inline-block;
width: 100%;
/* padding:0 px2rem(33px);*/
position: relative;
}
.nav-part{
width: 100%;
font-size: px2rem(18px);
text-align: center;
padding: px2rem(30px) 0 px2rem(10px) 0;
/* height: px2rem(25px);*/
}
}
.fixed{
.nav-part{
position: fixed;
top:0;
left: 0;
border-bottom: 1px solid #E7E7E7;
/* height: px2rem(25px);*/
}
}
</style>
<!-- courselist中的人数/收藏等细节,在图片的下方显示,有此种情形时,选用此组件 -->
<template>
<div class="section" :style="{paddingLeft:padding,paddingRight:padding}">
<header :class="{'title-center':titlePosition=='center','title-left':titlePosition=='left','title-right':titlePosition=='right'}">
<div class="title">{{title}}</div>
<div class="change-content" :class="{'active':hasChange=='true'}">
<!-- 注意更改这里 -->
<div class="text">换一批</div>
<img class="icon" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png" alt="">
</div>
</header>
<div class="recommends">
<div class="recommend-item" v-for="(course,index) in courses" :key="index">
<div class="top-sec">
<img class="recommend-image" :src="course.imgUrl" alt="">
<div
class="recommend-course-tag"
:class="{'active':hasCourseTag=='true','left-tag':tagPosition=='left','right-tag':tagPosition=='right'}"
>{{course.courseTag}}</div>
<!-- <div class="recommend-name">{{course.name}}</div> -->
<!-- <div class="recommend-num"><span>{{course.num}}</span>人已学</div> -->
</div>
<div class="recommend-title">{{course.title}}</div>
<div class="course-detail">
<div class="course-detail-item course-time">
{{course.time}}
</div>
<div class="course-detail-item bar"></div>
<div class="course-detail-item course-num">{{course.num}}已学</div>
<div class="course-detail-item save-button not-saved" v-if="!course.saveStatus">收藏</div>
<div class="course-detail-item save-button has-saved" v-if="course.saveStatus">已收藏</div>
</div>
</div>
</div>
<div class="show-more" :class="{'active':hasMore=='true'}">
更多课程
</div>
</div>
</template>
<script>
export default {
name:"CourseList",
props:{
courses:{
type:Array,
default:()=>{
return [
{name:'肖丹',num:'666人',time:'刚刚',saveStatus:true,title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'}
]
}
},
title:{
type:String,
default:'更多课程'
},
titlePosition:{
type:String,
default:'left'
},
hasChange:{
type:String,
default:false//传递true/false
},
hasMore:{
type:String,
default:false//传递true/false
},
hasCourseTag:{
type:String,
default:true//传递true/false
},
tagPosition:{
type:String,
default:'left'
},
padding:{
type:String,
default:'0'//注意传输单位,如'2rem''2px'
}
},
data(){
return{
}
},
mounted(){
},
created(){
}
}
</script>
<style lang="scss" scoped>
@import 'src/style/mixin';
.section>header{
display: flex;
display:-webkit-flex;
flex-direction: row;
position:relative;
align-items:center;
margin-top:px2rem(20px);
margin-bottom: px2rem(20px);
}
.section>header.title-center{
justify-content: center;
}
.section>header.title-left{
justify-content: flex-start;
}
.section>header.title-right{
justify-content: flex-end;
}
.section>header .title{
font-size:px2rem(18px);
color:#333;
}
.section>header .change-content{
display:none;
}
.section>header .change-content.active{
position:absolute;
right:0;
width:px2rem(56.5px);
height:px2rem(16px);
padding-left:px2rem(7px);
border:px2rem(0.5px) solid #A9AEB7;
border-radius:px2rem(8.5px);
opacity:0.5;
font-weight:400;
color:#28344c;
display:block;
padding-top:px2rem(0.5px);
padding-bottom:px2rem(0.5px);
}
.section>header .change-content .text{
font-size:px2rem(11px);
width:px2rem(33px);
height:px2rem(14px);
line-height:px2rem(14px);
}
.section>header .change-content .icon{/*!加图片后调整*/
width:px2rem(12px);
height:px2rem(12px);
position:absolute;
top:px2rem(1.5px);
right:0;
}
// .section>header .change-content .icon img{
// width:px2rem(12px);
// height:px2rem(12px);
// }
.recommends{
display: -webkit-flex;
display:flex;
flex-direction:row;
flex-wrap:wrap;
-ms-flex-wrap: wrap;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width:px2rem(345px)
}
.recommend-item{
position: relative;
width:px2rem(172.5px);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.recommend-item:nth-child(odd){
padding-right:px2rem(2.5px);
}
.recommend-item:nth-child(even){
padding-left:px2rem(2.5px);
}
.recommend-item .top-sec{
width:px2rem(170px);
height:px2rem(95.5px);
position:relative;
}
.recommend-item .recommend-image{
/* width:100%; */
width:px2rem(170px);
height:px2rem(95.5px);
border-radius: px2rem(3px);
}
.recommend-item .recommend-course-tag{
display:none;
}
.recommend-item .recommend-course-tag.active{
display:block;
position:absolute;
top:px2rem(5px);
left:px2rem(5px);
width:px2rem(40px);
height:px2rem(16px);
line-height:px2rem(16px);
background-color:#FAFCFF;
font-size:px2rem(10px);
color:#4A87D4;
text-align:center;
border:px2rem(0.5px) solid rgba(195,220,251,1);
border-radius: px2rem(2px);
// padding:px2rem(3px) 0;
}
.recommend-item .recommend-course-tag.active.left-tag{
top:px2rem(5px);
left:px2rem(5px);
}
.recommend-item .recommend-course-tag.active.right-tag{
top:px2rem(5px);
right:px2rem(5px);
}
.recommend-item .recommend-title{
margin-top:px2rem(5px);
margin-bottom:px2rem(6px);
height:px2rem(38px);
line-height:px2rem(19px);
font-size:px2rem(14px);
font-weight:400;
color:rgb(51,51,51);
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.course-detail {
display:flex;
display:-webkit-flex;
flex-direction:row;
position:relative;
margin-bottom:px2rem(18px);
}
.course-detail div.course-detail-item{
font-size:px2rem(12px);
}
.course-detail .course-time,.course-detail .course-num{
height:px2rem(12px);
line-height:px2rem(12px);
color:#999;
margin-top:px2rem(6px);
}
.course-detail .bar{//?这个样式注意一下
width:px2rem(1.5px);
height:px2rem(10.5px);
background-color:#999;
margin-top:px2rem(6.5px);
}
.course-detail .course-time{
margin-right:px2rem(5px)
}
.course-detail .course-num{
margin-left:px2rem(3.5px)
}
.course-detail .save-button{
position:absolute;
top:px2rem(3px);
right:px2rem(2.5px);
font-size:px2rem(11px);
text-align:center;
}
.course-detail .save-button.not-saved{
width:px2rem(30px);
height:px2rem(18px);
line-height:px2rem(18px);
color:#666;
background-color:rgba(247,248,249,1)
}
.course-detail .save-button.has-saved{
width:px2rem(39px);
height:px2rem(18px);
line-height:px2rem(18px);
color:#F47A48;
background-color:rgba(244,122,72,0.04);
}
/* 更多课程 */
.section .show-more{
display:none;
}
.section .show-more.active{
display:block;
font-size:px2rem(15px);
font-weight:400;
color:#999;
text-align:center;
padding-top:px2rem(14px);
padding-bottom: px2rem(15px);
border-top:px2rem(0.5px) solid #e7e7e7;
}
</style>
此差异已折叠。
<template>
<div class="alet_container">
<section class="tip_text_container">
我是文本
</section>
</div>
</template>
<script>
</script>
<style lang="scss" scoped>
</style>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
...@@ -292,7 +292,7 @@ export default { ...@@ -292,7 +292,7 @@ export default {
selectAreaAction(item, index) { selectAreaAction(item, index) {
if(item.name){ if(item.name){
this.selectedAreaIndex = index this.selectedAreaIndex = index
// this.selectedAreaSubIndex = -1 this.selectedAreaSubIndex = -1
this.allAreaSubList = item.cities this.allAreaSubList = item.cities
this.selectedAreaName = item.name this.selectedAreaName = item.name
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册