添加商学院页面
This commit is contained in:
parent
7b0a905c56
commit
c4565861ca
74
bundle_b/pages/business_school/components/list.vue
Normal file
74
bundle_b/pages/business_school/components/list.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="list">
|
||||
<view class="list-block p-t-20 m-b-20" v-for="(item, index) in list" :key="index">
|
||||
<view class="shop-name line-2 bold">
|
||||
{{item.title}}
|
||||
</view>
|
||||
|
||||
<view class="shop-name line-2" v-if="item.intro">
|
||||
{{item.intro}}
|
||||
</view>
|
||||
|
||||
<view class="goods-video">
|
||||
<video :src="item.video" :poster="item.video + '?x-oss-process=video/snapshot,t_1000,m_fast'"></video>
|
||||
</view>
|
||||
|
||||
<view class="m-t-20 m-b-20 p-b-20 text-center">
|
||||
<u-button type="primary" size="medium" class="spec-name-btn" @click="toPage(item.id)" hover-class="none">查看详情</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toPage(id) {
|
||||
this.$Router.push({
|
||||
path: '/bundle_b/pages/business_school/detail',
|
||||
query: {id}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 48%);
|
||||
column-gap: 20rpx;
|
||||
margin: 0 20rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
.list-block {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.goods-video {
|
||||
margin: 20rpx 20rpx 0 20rpx;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 375rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
margin: 20rpx 20rpx 0 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
bundle_b/pages/business_school/detail.vue
Normal file
103
bundle_b/pages/business_school/detail.vue
Normal file
@ -0,0 +1,103 @@
|
||||
|
||||
|
||||
<template>
|
||||
<view class="main">
|
||||
<view class="top">
|
||||
<view>
|
||||
<view class="goods-name bold lg">{{item.title}}</view>
|
||||
<view class="goods-name m-t-10" v-if="item.intro">{{item.intro}}</view>
|
||||
|
||||
<view class="goods-video">
|
||||
<video :src="item.video" :poster="item.video + '?x-oss-process=video/snapshot,t_1000,m_fast'"></video>
|
||||
</view>
|
||||
|
||||
<view class="m-t-40 m-l-20 m-r-20" v-if="item.content">
|
||||
<view class="bold text-center m-b-20">
|
||||
<u-divider color="#000">
|
||||
<view class="bold">内容详情</view>
|
||||
</u-divider>
|
||||
</view>
|
||||
<view>
|
||||
<u-parse :html="item.content" :lazy-load="true" :show-with-animation="true"></u-parse>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
businessSchoolDetail
|
||||
} from '@/api/user';
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
item: [],
|
||||
top: [],
|
||||
type: '',
|
||||
price_type: 0
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.id = this.$Route.query.id;
|
||||
this.getDetail()
|
||||
},
|
||||
methods: {
|
||||
preview(url) {
|
||||
uni.previewImage({
|
||||
urls: [url]
|
||||
});
|
||||
},
|
||||
|
||||
async getDetail() {
|
||||
const {code, data, msg} = await businessSchoolDetail({id: this.id});
|
||||
if (code == 1) {
|
||||
this.item = data
|
||||
console.log(this.item)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main {
|
||||
.top > view,
|
||||
.list > view {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
margin-right: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.thumb-video {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
margin: 20rpx 20rpx 0 20rpx;
|
||||
}
|
||||
|
||||
.goods-video {
|
||||
margin: 20rpx 20rpx 0 20rpx;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 375rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
122
bundle_b/pages/business_school/index.vue
Normal file
122
bundle_b/pages/business_school/index.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
|
||||
:up="upOption" :down="downOption" v-if="hasData">
|
||||
<view class="goods-column">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="column-wrap">
|
||||
<view class="item flex-col m-r-50 muted" v-for="(item, index) in columnList" :key="index" @tap="changeActive(index)">
|
||||
<view class="xxl normal title" :class="{bold: active == index}">{{item.name}}</view>
|
||||
<view class="m-t-8 xs text-center" :class="{normal : active == index}">{{item.remark}}</view>
|
||||
<view v-if="active == index" class="line br60"></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="goods">
|
||||
<list type="double" :list="videoList" :price-type="price_type"></list>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
import {businessSchool, businessSchoolCategory} from '@/api/user'
|
||||
import list from './components/list.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
list
|
||||
},
|
||||
mixins: [MescrollMixin],
|
||||
data() {
|
||||
return {
|
||||
videoList: [],
|
||||
active: 0,
|
||||
columnList: [],
|
||||
upOption: {
|
||||
auto: false,
|
||||
empty: {
|
||||
icon: 'https://zjeloong.oss-cn-hangzhou.aliyuncs.com/uniapp/goods_null.png',
|
||||
tip: "暂无数据",
|
||||
},
|
||||
toTop: {
|
||||
bottom: '30rpx'
|
||||
}
|
||||
},
|
||||
hasData: true,
|
||||
price_type: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
await this.getGoodsColumnFun()
|
||||
this.mescroll.resetUpScroll();
|
||||
},
|
||||
changeActive(index) {
|
||||
this.active = index
|
||||
this.mescroll.resetUpScroll();
|
||||
},
|
||||
upCallback(page) {
|
||||
const {columnList, active} = this
|
||||
const pageNum = page.num;
|
||||
const pageSize = page.size;
|
||||
if(!columnList.length) return
|
||||
const columnId = columnList[active].id
|
||||
businessSchool({
|
||||
page_size: pageSize,
|
||||
page_no: pageNum,
|
||||
cid: columnId,
|
||||
}).then(({
|
||||
data
|
||||
}) => {
|
||||
let curPageData = data.list;
|
||||
let curPageLen = curPageData.length;
|
||||
let hasNext = !!data.more;
|
||||
if (page.num == 1) this.videoList = [];
|
||||
this.videoList = this.videoList.concat(curPageData);
|
||||
this.mescroll.endSuccess(curPageLen, hasNext);
|
||||
})
|
||||
},
|
||||
async getGoodsColumnFun() {
|
||||
const {
|
||||
data,
|
||||
code
|
||||
} = await businessSchoolCategory()
|
||||
if (code == 1) {
|
||||
this.columnList = data
|
||||
this.hasData = data.length ? true : false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.goods-column {
|
||||
.column-wrap {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
padding: 30rpx;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.line {
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
left: 0;
|
||||
width: 144rpx;
|
||||
height: 12rpx;
|
||||
background: linear-gradient(90deg, #FF2C3C 0%, rgba(255, 44, 60, 0) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user