first commit
This commit is contained in:
GYJ
269
pages/index/course/courseList.vue
Normal file
269
pages/index/course/courseList.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<u-sticky :enable="enable">
|
||||
<view class="search-box">
|
||||
<u-search bg-color="#f2f2f2" style="width: 100%;" placeholder="搜索更多资源" v-model="keyword"
|
||||
:show-action="false" :animation="true" @search="getCourseList()"></u-search>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<view class="swiper flex align-center justify-center">
|
||||
<view class="swiper-box">
|
||||
<swiper :indicator-dots="true" class="swiper " :autoplay="true" interval="5000" duration="500"
|
||||
:circular="true" style="width: 100%;height: 350rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key='index' @tap="goPage(item.url)">
|
||||
<image :src="item.imageUrl" mode="scaleToFill"
|
||||
style="width: 100%;height: 100%;border-radius: 24rpx;"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-lr">
|
||||
<view class="" v-if="courseList.length">
|
||||
<!-- <view class="vidoList flex align-center justify-between flex-wrap">
|
||||
<view class="vidoList-item" @click="goCourse(item.courseId,item.courseDetailsId)"
|
||||
v-for="(item, index) in courseList" :key="index">
|
||||
<view class="vidoList-item-img">
|
||||
<image :src="item.titleImg" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="vidoList-item-title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="vidoList-item" style="height: 0;"></view>
|
||||
<view class="vidoList-item" style="height: 0;"></view>
|
||||
</view> -->
|
||||
<videoList @success="posterSuccess" :list="courseList" />
|
||||
</view>
|
||||
<empty title="暂无视频" :isShow='false' v-else></empty>
|
||||
<u-loadmore v-if="courseList.length > 0" :status="status" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videoList from '../../../components/videoList/videoList.vue'
|
||||
import empty from '@/components/empty.vue'
|
||||
export default {
|
||||
components: {
|
||||
empty,
|
||||
videoList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enable: true,
|
||||
status: 'loadmore',
|
||||
swiperList: [], //轮播图列表
|
||||
courseList: [], //资源列表
|
||||
page: 1,
|
||||
limit: 10,
|
||||
id: '',
|
||||
|
||||
datalist: [{
|
||||
id: 1,
|
||||
name: '综合'
|
||||
}, {
|
||||
id: 2,
|
||||
name: '人气'
|
||||
}, {
|
||||
id: 3,
|
||||
name: '价格',
|
||||
label: '0'
|
||||
}],
|
||||
dataIndex: 0,
|
||||
sort: '',
|
||||
count: 0,
|
||||
keyword: '',
|
||||
isPrice: '', //是否免费 2:免费
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.enable = true
|
||||
this.getCourseList()
|
||||
},
|
||||
onHide() {
|
||||
this.enable = false
|
||||
},
|
||||
onLoad(option) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.title
|
||||
})
|
||||
this.getBannerList()
|
||||
if (option.sort) {
|
||||
this.sort = option.sort
|
||||
}
|
||||
if (option.isPrice) {
|
||||
this.isPrice = option.isPrice
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
goPage(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
//点击回调
|
||||
posterSuccess(item) {
|
||||
uni.navigateTo({
|
||||
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId
|
||||
})
|
||||
},
|
||||
//最新热播
|
||||
getCourseList() {
|
||||
let data = {
|
||||
limit: this.limit,
|
||||
page: this.page,
|
||||
sort: this.sort ? this.sort : '',
|
||||
title: this.keyword,
|
||||
}
|
||||
// #ifdef MP-WEIXIN
|
||||
data.wxShow = 1
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
data.dyShow = 1
|
||||
// #endif
|
||||
if (this.isPrice) {
|
||||
data.isPrice = this.isPrice
|
||||
}
|
||||
this.$u.api.courseList(data).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.pages = res.data.totalPage
|
||||
if (this.page < this.pages) {
|
||||
this.status = 'loadmore'
|
||||
} else {
|
||||
this.status = 'nomore'
|
||||
}
|
||||
// res.data.list.forEach(ret => {
|
||||
// ret.courseLabel = ret.courseLabel ? ret.courseLabel.split(',') : []
|
||||
// })
|
||||
if (this.page == 1) {
|
||||
this.courseList = res.data.list
|
||||
} else {
|
||||
this.courseList = [...this.courseList, ...res.data.list]
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
uni.stopPullDownRefresh();
|
||||
|
||||
})
|
||||
},
|
||||
// 获取轮播图列表
|
||||
getBannerList() {
|
||||
this.$u.api.bannerList({
|
||||
classify: '1'
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
res.data.forEach(d => {
|
||||
if (d.state == 1) {
|
||||
this.swiperList.push(d)
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
onReachBottom: function() {
|
||||
if (this.page < this.pages) {
|
||||
this.page += 1
|
||||
this.status = 'loading'
|
||||
this.getCourseList()
|
||||
|
||||
} else {
|
||||
this.status = 'nomore'
|
||||
}
|
||||
|
||||
},
|
||||
onPullDownRefresh: function() {
|
||||
this.page = 1;
|
||||
this.getCourseList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-box {
|
||||
width: 100%;
|
||||
padding: 15upx 2.5%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.vidoList {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.vidoList-item {
|
||||
width: calc((100% - 40rpx) / 3);
|
||||
height: 356rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.vidoList-item-img {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vidoList-item-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 0 0 24rpx 24rpx;
|
||||
padding: 20rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; // 默认不换行；
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 10rpx;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.swiper-box {
|
||||
width: 686rpx;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #5074FF;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 150upx;
|
||||
height: 60upx;
|
||||
background: #5074FF;
|
||||
border-radius: 30upx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
397
pages/index/course/orderDet.vue
Normal file
397
pages/index/course/orderDet.vue
Normal file
@@ -0,0 +1,397 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="bg-white padding-sm margin flex" style="border-radius: 24rpx;">
|
||||
<u-image width="200rpx" height="200rpx" border-radius="10rpx" :src="courseList.titleImg">
|
||||
</u-image>
|
||||
<view class="flex flex-direction justify-between margin-left-sm" style="width:420rpx;">
|
||||
<view class="text-bold text-black margin-top-xs u-line-1 text-lg">{{courseList.title}}
|
||||
</view>
|
||||
<!-- <view class="text-gray text-26 margin-top">最近在学{{courseList.payNum}}</view> -->
|
||||
<view class="flex justify-between ">
|
||||
<view class=" text-bold " style="color: #FF8211;">¥<text
|
||||
style="font-size: 42rpx;">{{courseList.price}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="popup_pay">
|
||||
<view class="text-lg text-bold">支付方式</view>
|
||||
<view class="flex align-center justify-between" style="height: 100upx;" v-for="(item,index) in openLists"
|
||||
:key='index'>
|
||||
<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
|
||||
</image>
|
||||
<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
|
||||
{{item.text}}
|
||||
</view>
|
||||
<radio-group name="openWay" style="margin-left: 45upx;" @tap.stop='selectWay(item)'>
|
||||
<label class="tui-radio">
|
||||
<radio color="red" :checked="openWay === item.id ? true : false" />
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<!-- <view class="pay_btn" @click="pay()">确认支付</view> -->
|
||||
</view>
|
||||
|
||||
<view class="taber">
|
||||
<view class="flex align-center" style="color: #FF8211;">
|
||||
<text style="color: #333;">实付款：</text>
|
||||
<view class=" text-bold " style="color: #FF8211;">¥<text
|
||||
style="font-size: 42rpx;">{{courseList.price}}</text></view>
|
||||
</view>
|
||||
<view class="btn" @click="pay">确定并支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
courseId: '',
|
||||
courseList: [],
|
||||
|
||||
openLists: [],
|
||||
openWay: 1,
|
||||
flag: true
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
// #ifdef APP
|
||||
this.openLists = [{
|
||||
image: '../../../static/images/index/weixin.png',
|
||||
text: '微信支付',
|
||||
id: 1
|
||||
}, {
|
||||
image: '../../../static/images/index/zhifubao.png',
|
||||
text: '支付宝',
|
||||
id: 2
|
||||
}],
|
||||
this.openWay = 1;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.openLists = [{
|
||||
image: '../../../static/images/index/weixin.png',
|
||||
text: '微信支付',
|
||||
id: 1
|
||||
}],
|
||||
this.openWay = 1;
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf('micromessenger') !== -1) {
|
||||
this.openLists = [{
|
||||
image: '../../../static/images/index/weixin.png',
|
||||
text: '微信支付',
|
||||
id: 1
|
||||
}, {
|
||||
image: '../../../static/images/index/zhifubao.png',
|
||||
text: '支付宝',
|
||||
id: 2
|
||||
}],
|
||||
this.openWay = 1;
|
||||
} else {
|
||||
this.openLists = [{
|
||||
image: '../../../static/images/index/zhifubao.png',
|
||||
text: '支付宝',
|
||||
id: 2
|
||||
}],
|
||||
this.openWay = 2;
|
||||
}
|
||||
// this.openLists = [{
|
||||
// image: '../../../static/images/index/zhifubao.png',
|
||||
// text: '支付宝',
|
||||
// id: 2
|
||||
// }],
|
||||
// this.openWay = 2;
|
||||
// #endif
|
||||
if (option.courseId) {
|
||||
this.courseId = option.courseId
|
||||
this.getDataList(this.courseId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectWay(e) {
|
||||
this.openWay = e.id;
|
||||
},
|
||||
// 资源详情
|
||||
getDataList(id) {
|
||||
let data = {
|
||||
id
|
||||
}
|
||||
this.$u.api.courseDet(data).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.courseList = res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
duration: 1500,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
pay() {
|
||||
let that = this
|
||||
if (that.flag) {
|
||||
that.flag = false
|
||||
let data = {
|
||||
courseId: that.courseList.courseId
|
||||
}
|
||||
that.$u.api.courseOrder(data).then(res => {
|
||||
if (res.code == 0 && res.data.flag == 1) {
|
||||
uni.showToast({
|
||||
title: '已获取资源',
|
||||
icon: 'success'
|
||||
})
|
||||
that.getDataList(that.courseId);
|
||||
} else if (res.code == 0 && res.data.flag == 2) {
|
||||
uni.showLoading({
|
||||
title: '支付中...'
|
||||
})
|
||||
if (that.openWay == 1) {
|
||||
// #ifdef MP-WEIXIN
|
||||
that.$u.post('app/wxPay/wxPayJsApiOrder?orderId=' + res.data.orders.ordersId, {})
|
||||
.then(
|
||||
ret => {
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
timeStamp: ret.data.timestamp,
|
||||
nonceStr: ret.data.noncestr,
|
||||
package: ret.data.package,
|
||||
signType: ret.data.signType,
|
||||
paySign: ret.data.sign,
|
||||
success: function(suc) {
|
||||
console.log('success:' + JSON.stringify(suc));
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(function() {
|
||||
uni.navigateTo({
|
||||
url: '/me/order/index'
|
||||
})
|
||||
}, 1000)
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
console.log('fail:' + JSON.stringify(err));
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf('micromessenger') !== -1) {
|
||||
that.$u.post('/app/wxPay/wxPayMpOrder?orderId=' + res.data.orders.ordersId)
|
||||
.then(
|
||||
res => {
|
||||
if (res.code === 0) {
|
||||
that.callPay(res.data);
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败!'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP
|
||||
console.log(res.data.orders.ordersId,
|
||||
'res.data.orders.ordersIdres.data.orders.ordersId')
|
||||
// let data = {
|
||||
// orderId: res.data.orders.ordersId,
|
||||
// }
|
||||
that.$u.post('/app/wxPay/payAppOrder?orderId=' + res.data.orders.ordersId).then(
|
||||
rea => {
|
||||
console.log(rea)
|
||||
if (rea.code == 0) {
|
||||
that.isCheckPay(rea.code, 'wxpay', JSON.stringify(rea.data));
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else if (that.openWay == 2) {
|
||||
// #ifdef H5
|
||||
that.$u.post('/app/aliPay/payOrder?orderId=' + res.data.orders.ordersId +
|
||||
'&classify=2').then(
|
||||
res => {
|
||||
if (res.code === 0) {
|
||||
uni.hideLoading();
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = res.data //此处form就是后台返回接收到的数据
|
||||
document.body.appendChild(div)
|
||||
document.forms[0].submit()
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败!'
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP
|
||||
console.log('---------', res.data.orders.ordersId)
|
||||
// let data = {
|
||||
// orderId: res.data.orders.ordersId,
|
||||
// classify:1
|
||||
// }
|
||||
that.$u.post('/app/aliPay/payOrder?orderId=' + res.data.orders.ordersId +
|
||||
'&classify=1').then(
|
||||
rea => {
|
||||
console.log('---------', rea)
|
||||
that.setPayment('alipay', rea.data);
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
// duration: 1500
|
||||
})
|
||||
// that.getDataList(that.courseId);
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
that.flag = true
|
||||
}, 1500)
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
isCheckPay(code, name, order) {
|
||||
if (code == 0) {
|
||||
console.log('999999999999')
|
||||
this.setPayment(name, order);
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '支付信息有误'
|
||||
});
|
||||
}
|
||||
},
|
||||
setPayment(name, order) {
|
||||
console.log(777777777, name, order)
|
||||
uni.requestPayment({
|
||||
provider: name,
|
||||
orderInfo: order, //微信、支付宝订单数据
|
||||
success: function(res) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(function() {
|
||||
uni.navigateTo({
|
||||
url: '/me/order/index'
|
||||
})
|
||||
}, 1000)
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
callPay: function(response) {
|
||||
if (typeof WeixinJSBridge === "undefined") {
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
|
||||
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
|
||||
}
|
||||
} else {
|
||||
this.onBridgeReady(response);
|
||||
}
|
||||
},
|
||||
onBridgeReady: function(response) {
|
||||
let that = this;
|
||||
if (!response.package) {
|
||||
return;
|
||||
}
|
||||
console.log("response)))):" + JSON.stringify(response))
|
||||
WeixinJSBridge.invoke(
|
||||
'getBrandWCPayRequest', {
|
||||
"appId": response.appid, //公众号名称，由商户传入
|
||||
"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
|
||||
"nonceStr": response.noncestr, //随机串
|
||||
"package": response.package,
|
||||
"signType": response.signType, //微信签名方式：
|
||||
"paySign": response.sign //微信签名
|
||||
},
|
||||
function(res) {
|
||||
if (res.err_msg === "get_brand_wcpay_request:ok") {
|
||||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.navigateTo({
|
||||
url: '/me/order/index'
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
}
|
||||
WeixinJSBridge.log(response.err_msg);
|
||||
}
|
||||
);
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.popup_pay {
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
margin: 30rpx 30rpx;
|
||||
padding: 30rpx 30rpx 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.taber {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
background: #FFFFFF;
|
||||
padding: 10rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 260rpx;
|
||||
height: 78rpx;
|
||||
background: #5074FF;
|
||||
border-radius: 39rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 78rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
</style>
|
||||
1002
pages/index/index copy.vue
Normal file
1002
pages/index/index copy.vue
Normal file
File diff suppressed because it is too large
Load Diff
1190
pages/index/index.vue
Normal file
1190
pages/index/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
456
pages/index/search/index.vue
Normal file
456
pages/index/search/index.vue
Normal file
@@ -0,0 +1,456 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<u-sticky :enable="enable">
|
||||
<view class="search-box">
|
||||
<u-search bg-color="#f2f2f2" style="width: 100%;" placeholder="搜索更多资源" :focus="true" v-model="keyword" :show-action="true"
|
||||
:animation="true" action-text="取消" @custom="goBack()" @search="doSearch(false)"></u-search>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<view class="search-keyword" v-if="isSearch">
|
||||
<view class="keyword-block" v-if="hotKeywordList.length !=0">
|
||||
<view class="keyword-list-header">
|
||||
<view>热搜</view>
|
||||
<view>
|
||||
<image @tap="hotToggle" :src="'/static/images/index/attention'+forbid+'.png'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="keyword" v-if="forbid==''">
|
||||
<view v-for="(keyword,index) in hotKeywordList" @tap="doSearchs(keyword)" :key="index"
|
||||
v-if="keyword">
|
||||
{{keyword}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="hide-hot-tis" v-else>
|
||||
<view>当前搜热已隐藏</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="keyword-block" v-if="oldKeywordList.length>0">
|
||||
<view class="keyword-list-header">
|
||||
<view>历史记录</view>
|
||||
<view>
|
||||
<image @tap="oldDelete" src="/static/images/index/delete.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="keyword">
|
||||
<view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword)" :key="index"
|
||||
v-if="keyword">
|
||||
{{keyword}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-list flex align-center justify-center" v-else>
|
||||
<view class="search-list-box flex align-center justify-between flex-wrap">
|
||||
<swiper class="swiper" :indicator-dots="true" :autoplay="true" interval="5000" duration="500"
|
||||
:circular="true" style="width: 100%;height: 350rpx;margin-bottom: 20rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key='index' @tap="goPage(item.url)">
|
||||
<image :src="item.imageUrl" mode="scaleToFill"
|
||||
style="width: 100%;height: 100%;border-radius: 24rpx;"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<videoList @success="posterSuccess" :list="keywordList" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<empty title="暂无视频" v-if="isSearch == false && keywordList.length==0" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videoList from '../../../components/videoList/videoList.vue'
|
||||
import empty from '../../../components/empty.vue'
|
||||
export default {
|
||||
components: {
|
||||
empty,
|
||||
videoList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swiperList: [], //轮播图列表
|
||||
enable: true,
|
||||
defaultKeyword: "",
|
||||
keyword: "",
|
||||
oldKeywordList: [], //历史记录
|
||||
hotKeywordList: [], //热搜
|
||||
keywordList: [], //搜索列表
|
||||
forbid: '',
|
||||
isShowKeywordList: false,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
noData: true,
|
||||
count: 0,
|
||||
isSearch: true,
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.enable = true
|
||||
if (uni.getStorageSync('moreSearch')) {
|
||||
this.hotKeywordList = (uni.getStorageSync('moreSearch')).split(',')
|
||||
} else {
|
||||
this.hotKeywordList = []
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
this.enable = false
|
||||
},
|
||||
onLoad() {
|
||||
// this.init();
|
||||
// this.getSearchList()
|
||||
this.getBannerList()
|
||||
},
|
||||
methods: {
|
||||
//点击回调
|
||||
posterSuccess(item) {
|
||||
let userId = uni.getStorageSync('userId')
|
||||
if (userId) {
|
||||
uni.navigateTo({
|
||||
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
|
||||
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
|
||||
.dyEpisodeId
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/pages/login/login"
|
||||
})
|
||||
}
|
||||
},
|
||||
doSearchs(keyWord) {
|
||||
this.keyword = keyWord
|
||||
this.doSearch(false)
|
||||
},
|
||||
// 跳转资源详情
|
||||
goCourse(e) {
|
||||
let userId = uni.getStorageSync('userId')
|
||||
if (userId) {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/index/course/courseDet?id=' + e
|
||||
// });
|
||||
uni.navigateTo({
|
||||
url: '/me/detail/detail?id=' + e
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/pages/login/login"
|
||||
})
|
||||
}
|
||||
},
|
||||
getBannerList() {
|
||||
this.$u.api.bannerList({
|
||||
classify: '1'
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
res.data.forEach(d => {
|
||||
if (d.state == 1) {
|
||||
this.swiperList.push(d)
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取搜索历史
|
||||
getSearchList() {
|
||||
this.$u.api.SearchList().then(res => {
|
||||
if (res.code == 0) {
|
||||
this.hotKeywordList = res.data.allSerchName
|
||||
this.oldKeywordList = res.data.userSearchName
|
||||
}
|
||||
})
|
||||
},
|
||||
//清除历史搜索
|
||||
oldDelete() {
|
||||
uni.showModal({
|
||||
content: '确定清除历史搜索记录？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
this.$u.api.SearchDet().then(res => {
|
||||
if (res.code == 0) {
|
||||
this.getSearchList()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//执行搜索
|
||||
doSearch(keyword) {
|
||||
this.isSearch = false
|
||||
this.isShowKeywordList = true;
|
||||
this.noData = true
|
||||
let data = {
|
||||
title: this.keyword,
|
||||
limit: this.limit,
|
||||
page: this.page,
|
||||
}
|
||||
// #ifdef MP-WEIXIN
|
||||
data.wxShow = 1
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
data.dyShow = 1
|
||||
// #endif
|
||||
let token = uni.getStorageSync('token')
|
||||
if (token) {
|
||||
this.$u.api.search(data).then(res => {
|
||||
uni.stopPullDownRefresh()
|
||||
if (res.code == 0) {
|
||||
this.count = res.data.totalPage
|
||||
if (this.page == 1) {
|
||||
this.keywordList = res.data.list
|
||||
} else {
|
||||
this.keywordList = [...this.keywordList, ...res.data.list]
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$u.api.searchs(data).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.count = res.data.totalPage
|
||||
if (this.page == 1) {
|
||||
this.keywordList = res.data.list
|
||||
} else {
|
||||
this.keywordList = [...this.keywordList, ...res.data.list]
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 点击取消返回首页
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
//热门搜索开关
|
||||
hotToggle() {
|
||||
this.forbid = this.forbid ? '' : '_forbid';
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
onReachBottom: function() {
|
||||
if (this.page < this.count) {
|
||||
this.page += 1
|
||||
this.doSearch();
|
||||
}
|
||||
},
|
||||
onPullDownRefresh: function() {
|
||||
this.page = 1;
|
||||
this.doSearch();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.search-box {
|
||||
width: 100%;
|
||||
/* background-color: rgb(242, 242, 242); */
|
||||
padding: 15upx 2.5%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// position: sticky;
|
||||
// top: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.search-box .mSearch-input-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-box .input-box {
|
||||
width: 85%;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box .search-btn {
|
||||
width: 15%;
|
||||
margin: 0 0 0 2%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 28upx;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(to right, #ff9801, #ff570a);
|
||||
border-radius: 60upx;
|
||||
}
|
||||
|
||||
.search-box .input-box>input {
|
||||
width: 100%;
|
||||
height: 60upx;
|
||||
font-size: 32upx;
|
||||
border: 0;
|
||||
border-radius: 60upx;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0 3%;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.search-keyword {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-list {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.search-list-box {
|
||||
width: 686rpx;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.keyword-list-box {
|
||||
height: calc(100vh - 110upx);
|
||||
padding-top: 10upx;
|
||||
/* border-radius: 20upx 20upx 0 0; */
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.keyword-entry-tap {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.keyword-entry {
|
||||
width: 94%;
|
||||
height: 80upx;
|
||||
margin: 0 3%;
|
||||
font-size: 30upx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: solid 1upx #e7e7e7;
|
||||
}
|
||||
|
||||
.keyword-entry image {
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
}
|
||||
|
||||
.keyword-entry .keyword-text,
|
||||
.keyword-entry .keyword-img {
|
||||
height: 80upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyword-entry .keyword-text {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.keyword-entry .keyword-img {
|
||||
width: 10%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.keyword-block {
|
||||
padding: 10upx 0;
|
||||
}
|
||||
|
||||
.keyword-block .keyword-list-header {
|
||||
width: 94%;
|
||||
padding: 10upx 3%;
|
||||
font-size: 27upx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.keyword-block .keyword-list-header image {
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
}
|
||||
|
||||
.keyword-block .keyword {
|
||||
width: 94%;
|
||||
padding: 3px 3%;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.keyword-block .hide-hot-tis {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 28upx;
|
||||
color: #6b6b6b;
|
||||
}
|
||||
|
||||
.keyword-block .keyword>view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 60upx;
|
||||
padding: 0 20upx;
|
||||
margin: 10upx 20upx 10upx 0;
|
||||
height: 60upx;
|
||||
font-size: 28upx;
|
||||
// background-color: rgb(242, 242, 242);
|
||||
background: #E6EBFF;
|
||||
color: #6b6b6b;
|
||||
}
|
||||
|
||||
.centre {
|
||||
text-align: center;
|
||||
margin: 200rpx auto;
|
||||
font-size: 32rpx;
|
||||
|
||||
image {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
// margin-bottom: 20rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
// border: 1px dotted #000000;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 34rpx;
|
||||
color: #5074FF;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 80rpx auto;
|
||||
width: 600rpx;
|
||||
border-radius: 32rpx;
|
||||
line-height: 90rpx;
|
||||
color: #ffffff;
|
||||
font-size: 34rpx;
|
||||
background: #5074FF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
pages/index/webView.vue
Normal file
66
pages/index/webView.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<view style="width: 100%;">
|
||||
<web-view :src="url" style="width: 100%;"></web-view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: null, //要打开的外部链接
|
||||
viewerUrl: '/hybrid/html/web/viewer.html',
|
||||
webviewStyles: {
|
||||
width: '750px',
|
||||
height: '100%',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
uni.setNavigationBarTitle({
|
||||
title:'预览'
|
||||
})
|
||||
// #ifdef APP-PLUS
|
||||
console.log('App plus2')
|
||||
var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
|
||||
setTimeout(function() {
|
||||
wv = currentWebview.children()[0]
|
||||
wv.setStyle({
|
||||
scalable: true
|
||||
})
|
||||
}, 1000); //如果是页面初始化调用时，需要延时一下
|
||||
// #endif
|
||||
},
|
||||
onLoad: function(option) {
|
||||
this.url = option.url
|
||||
// this.url="https://jiaoyu.xianmxkj.com/file/uploadPath/2023/03/08/b6c0dd4821cc9ce70c897adca3ad22c2.pdf"
|
||||
// h5，使用h5访问的时候记得跨域
|
||||
// #ifdef H5
|
||||
// this.url="https://jiaoyu.xianmxkj.com/file/uploadPath/2023/03/08/b6c0dd4821cc9ce70c897adca3ad22c2.pdf"
|
||||
// this.url = `${this.viewerUrl}?file=${encodeURIComponent(option.url)}`;
|
||||
// this.url = `${this.viewerUrl}?file=${'https://jiaoyu.xianmxkj.com/file/uploadPath/2023/03/08/b6c0dd4821cc9ce70c897adca3ad22c2.pdf'}`;
|
||||
// #endif
|
||||
|
||||
// 在安卓和ios手机上
|
||||
// 判断是手机系统：安卓，使用pdf.js
|
||||
// #ifdef APP-PLUS
|
||||
// if(plus.os.name === 'Android') {
|
||||
// this.url = `${this.viewerUrl}?file=${encodeURIComponent(option.url)}`;
|
||||
// }
|
||||
// // ios，直接访问pdf所在路径
|
||||
// else {
|
||||
// this.url = encodeURIComponent(option.url);
|
||||
// }
|
||||
// #endif
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.webview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user