Tuzki
/
CjyTravel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

音频视频接口对接

Browse Source
lu_quan_dev
han 11 months ago
parent 8e4f750f73
commit 8274fffe65
4 changed files with 702 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      static/animg/daolan/icon-zan.png
  2. 395
      subPageA/Audiovisual/AudiovisualList/AudiovisualList.vue
  3. 157
      subPageA/shop/shopDetail/shopDetail.vue
  4. 150
      subPageA/shop/shopList/shopList.vue

BIN
static/animg/daolan/icon-zan.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

395
subPageA/Audiovisual/AudiovisualList/AudiovisualList.vue
Unescape View File

@ -0,0 +1,395 @@
<template>
<view class="v-pages bgcolor tab">
<!-- tab切换 -->
<view class="v-tab-list row flex-align-center">
<view class="tab-item col-12" :class="activeTab==item.value?'active':''" v-for="(item,index) in tab_list"
:key="index" @click="activeTab=item.value">{{item.name}}</view>
</view>
<!-- 影动心声 -->
<view v-if="activeTab==1" class="v-page-tab-top">
<!-- 影动心声 热门推荐 -->
<view class="v-card container-fluid">
<view class="v-page-title circle">
<view class="inner"><text class="text">热门推荐</text></view>
</view>
<scroll-view scroll-x="true">
<view class="v-pages-suggest video row">
<view class="list_item" v-for="(item,index) in class_list" :key="index"
@click="openVideo(item)">
<view class="item_image">
<image class="img" :src="item.logo" mode="widthFix"></image>
</view>
<view class="item_title">{{item.title}}</view>
</view>
</view>
</scroll-view>
</view>
<!-- 影动心声 列表 -->
<view class="v-card container-fluid m-t-24">
<view class="v-page-title circle">
<view class="inner"><text class="text">精选视频</text></view>
</view>
<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
<view class="v-video-list row">
<view class="list_item col-12" v-for="(item,index) in data_list" :key="index"
@click="openVideo(item)">
<view class="item_box">
<view class="item_image">
<image class="img" :src="item.logo" mode="widthFix"></image>
</view>
<view class="item_content col">
<view class="title">{{item.title}}</view>
</view>
</view>
</view>
</view>
</mescroll-uni>
</view>
</view>
<!-- 音悦时光 -->
<view v-if="activeTab==2" class="v-page-tab-top">
<!-- 音悦时光 热门推荐 -->
<view class="v-card container-fluid">
<view class="v-page-title circle">
<view class="inner"><text class="text">热门推荐</text></view>
</view>
<scroll-view scroll-x="true">
<view class="v-pages-suggest audio row">
<view class="list_item" v-for="(item,index) in class_list" :key="index"
@click="openAutio(item)">
<view class="item_image">
<image class="img" :src="item.logo" mode="widthFix"></image>
</view>
<view class="item_title">{{item.title}}</view>
</view>
</view>
</scroll-view>
</view>
<!-- 音悦时光 列表 -->
<view class="v-card container-fluid m-t-24">
<view class="v-page-title circle">
<view class="inner"><text class="text">精选音频</text></view>
</view>
<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
<view class="v-audio-list">
<view class="list_item row" v-for="(item,index) in data_list" :key="index"
@click="openAutio(item)">
<view class="item_image">
<image class="img" :src="item.logo" mode="widthFix"></image>
</view>
<view class="item_content col">
<view class="title">{{item.title}}</view>
</view>
<view class="item_play">
</view>
</view>
</view>
</mescroll-uni>
</view>
</view>
<!-- 视频弹窗 -->
<view class="v-video-popup" v-show="videoVisible">
<view class="v-video-popup-content">
<view class="close" @click="videoVisible=false"></view>
<video controls class="video" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
<view class="v-video-popup-title m-t-12">{{activeVideo.title}}{{activeVideo.videopath}}</view>
</view>
</view>
<!-- 音频弹窗 -->
<view class="v-video-popup" v-if="autioVisible">
<view class="v-video-popup-content">
<view class="close" @click="autioVisible=false"></view>
<audio style="text-align: center" :src="activeAutio.src" :poster="activeAutio.poster"
:name="activeAutio.name" :action="audioAction" ></audio>
</view>
</view>
</view>
</template>
<script>
// 自定义的mescroll-xinlang.vue
import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue';
export default {
components: {
MescrollUni
},
data() {
return {
rootPath: this.$config.ROOTPATH,
//tab
activeTab: 1,
tab_list: [{
name: "影动心声",
value: 1
}, {
name: "音悦时光",
value: 2
}],
class_list: [],
data_list: [],
videoVisible: false,
activeVideo: {},
autioVisible: false,
activeAutio: {},
audioAction: {
method: 'pause'
},
//滚动
downOption: {
auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
},
upOption: {
auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true
},
mescroll: '',
param: {
pagesize: 10,
pageno: 1,
noData: false,
loading: false,
finished: false,
type: 1,
userkey: this.$param.userkey,
},
};
},
watch: {
activeTab: {
// 监听器的回调函数，当属性值变化时执行
handler(newValue, oldValue) {
this.param.type = newValue
this.getInitPage()
},
// 是否立即触发回调函数，默认为false
immediate: false,
// 深度监听对象内部的属性变化，默认为false
deep: false
},
},
onLoad(option) {
},
onShow() {
this.getInitPage()
},
methods: {
// 页面初始化
getInitPage: function() {
this.getClassData()
},
/*下拉刷新的回调 */
downCallback(mescroll) {
this.param.pageno = this.mescroll.num
this.getListData();
// #ifdef H5
this.top = uni.upx2px(100 + 88) + 'px'; // H5的高度需加上 88的标题栏
// #endif
// #ifndef H5
this.top = uni.upx2px(100) + 'px'; // 非H5不必加
// #endif
setTimeout(() => {
mescroll.endSuccess();
this.top = 0;
}, 2500);
},
upCallback(mescroll) {
this.mescroll = mescroll
this.param.pageno = this.mescroll.num
this.getListData();
},
// 获取分类数据
getClassData() {
this.$Request.get(this.$config.getVideoList, this.param, '', '', false, '').then(res => {
this.class_list = res.data.recommendList.map((item, index) => {
return {
isrecommend: item.isrecommend,
guid: item.guid,
logo: this.rootPath + item.logo,
title: item.title,
videopath: this.rootPath + item.videopath,
soundpath: this.rootPath + item.soundpath
}
})
});
},
// 获取列表数据
getListData() {
this.$Request.get(this.$config.getVideoList, this.param, '', '', false, '').then(res => {
const curPageData = res.data.selectList || [] // 当前页数据
if (this.mescroll.num == 1) this.data_list = []; // 第一页需手动制空列表
curPageData.forEach((item, index) => {
let data = {
isrecommend: item.isrecommend,
guid: item.guid,
logo: this.rootPath + item.logo,
title: item.title,
videopath: this.rootPath + item.videopath,
soundpath: this.rootPath + item.soundpath
}
this.data_list.push(data)
})
setTimeout(() => {
this.mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
}, 1000);
}).catch(() => {
this.mescroll.endErr(); // 请求失败, 结束加载
});
},
// 获取视频 弹框
openVideo(val) {
this.videoVisible = true
this.activeVideo = val
},
// 获取音频 弹框
openAutio(val) {
this.autioVisible = true
this.activeAutio = {
poster: val.logo,
name: val.title,
src: val.soundpath,
}
}
}
};
</script>
<style lang="scss">
.v-video-list {
flex-wrap: wrap;
margin-left: -24rpx;
.list_item {
margin-bottom: 24rpx;
.item_box {
margin-left: 24rpx;
box-sizing: border-box;
}
.item_image {
position: relative;
width: 100%;
height: 220rpx;
border-radius: 16rpx;
overflow: hidden;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60rpx;
height: 60rpx;
background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-video-play.png');
background-repeat: no-repeat;
background-size: contain;
}
.img {
width: 110%;
}
}
.item_content {
.title {
margin-top: 8rpx;
font-size: 28rpx;
color: #333333;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
}
.v-audio-list {
.list_item {
margin-bottom: 24rpx;
.item_image {
width: 140rpx;
height: 140rpx;
margin-right: 20rpx;
border-radius: 16rpx;
overflow: hidden;
.img {
width: 110%;
}
}
.item_content {
.title {
font-size: 28rpx;
color: #333333;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.item_play {
margin-left: 20rpx;
width: 60rpx;
height: 60rpx;
background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-autio-play.png');
background-repeat: no-repeat;
background-size: cover;
}
}
}
.v-video-popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
background-color: rgba(0, 0, 0, .85);
.v-video-popup-content {
position: absolute;
top: 50%;
left: 50%;
width: 90%;
transform: translate(-50%, -50%);
.close {
position: absolute;
top: -100rpx;
left: 50%;
right: 10rpx;
width: 80rpx;
height: 80rpx;
background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-close.png');
background-repeat: no-repeat;
background-size: contain;
}
.video {
width: 100%;
}
.v-video-popup-title {
text-align: center;
color: #fff;
}
}
}
</style>

157
subPageA/shop/shopDetail/shopDetail.vue
Unescape View File

@ -0,0 +1,157 @@
<template>
<view class="v-pages-bg bgcolor p-b-24">
<!-- 轮播 -->
<swiper :autoplay="autoplay" class="lh-swiper" :duration="duration" :indicator-dots="indicatorDots"
:interval="interval">
<swiper-item v-for="(item,index) in pic_list" :key="index">
<image class="slide-image" :src="item" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
//轮播
indicatorDots: false,
autoplay: true,
interval: 3000,
duration: 500,
pic_list: undefined,
class_list: undefined,
data_list: undefined,
};
},
onLoad(option) {
},
onShow() {
this.getInitPage()
},
methods: {
// 页面初始化
getInitPage: function() {
this.getClassData()
this.getListData()
},
// 获取分类数据
getClassData() {
this.class_list = [{
name: "热门景区",
dec: "不停发现惊喜"
},
{
name: "精选美食",
dec: "不停发现惊喜"
},
{
name: "乐趣钓鱼",
dec: "不停发现惊喜"
},
{
name: "精选美食",
dec: "不停发现惊喜"
},
]
this.pic_list = ['http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
'http://119.249.56.5:8083/upload/images/573a5c48f2bf4771ae0004b029241836.png'
]
},
}
};
</script>
<style lang="scss">
.scroll-view {
top: 200rpx;
}
.lh-swiper {
width: 100%;
height: 325rpx;
overflow: hidden;
position: relative;
}
.lh-swiper .slide-image {
width: 100%;
height: 100%;
}
.v-method-class {
box-sizing: border-box;
padding: 0 24rpx;
.list-item:nth-child(1) {
height: 200rpx;
}
.list-item {
flex: 0 0 240rpx;
width: 240rpx;
height: 80rpx;
margin-right: 24rpx;
.name {
padding: 0 24rpx;
font-size: 30rpx;
font-weight: bold;
}
.dec {
padding: 0 24rpx;
font-size: 24rpx;
}
}
}
.v-method-list {
padding: 0 24rpx;
.method-list-item {
margin-bottom: 24rpx;
border-radius: 10rpx;
background-color: #fff;
height: 160rpx;
overflow: hidden;
.item_image {
width: 200rpx;
flex: 0 0 200rpx;
height: 165rpx;
margin-right: 24rpx;
overflow: hidden;
.img {
width: 250rpx;
}
}
.item_content {
padding: 24rpx 0;
.title {
font-size: 30rpx;
}
.dec {
margin-top: 10rpx;
font-size: 24rpx;
color: #666;
display: -webkit-box;
-webkit-line-clamp: 2;
/* 显示的行数 */
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
}
</style>

150
subPageA/shop/shopList/shopList.vue
Unescape View File

@ -0,0 +1,150 @@
<template>
<view class="v-pages v-pages-bg tab">
<view class="v-pages-search">
<view class="search_box row flex-align-center">
<view class="col">
<input @input="write" type="text" class="input" @confirm="confirm" confirm-type="search"
placeholder-style="color:#999" placeholder="搜索美食" />
</view>
<view class="btn_img" @click="search()">
<image src="/subPageB/static/img/icon-search.png" class="img"></image>
</view>
</view>
</view>
<!-- 列表 -->
<view class="v-shop-list row">
<view class="list_item col-12" v-for="(item,index) in data_list" :key="index">
<view class="item_box">
<view class="item_image">
<image class="img" :src="item.img" mode="aspectFill"></image>
</view>
<view class="item_content">
<view class="title">{{item.name}}</view>
<view class="dec">{{item.price}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//轮播
indicatorDots: false,
autoplay: true,
interval: 3000,
duration: 500,
pic_list: undefined,
class_list: undefined,
data_list: undefined,
};
},
onLoad(option) {
},
onShow() {
this.getInitPage()
},
methods: {
// 页面初始化
getInitPage: function() {
this.getClassData()
this.getListData()
},
// 获取分类数据
getClassData() {
this.pic_list = ['http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
'http://119.249.56.5:8083/upload/images/573a5c48f2bf4771ae0004b029241836.png'
]
},
// 获取列表数据
getListData() {
this.data_list = [{
img:'http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
name: "白鹿白茶",
price: 158,
delPrice:198,
sale:58,
business:"稻香村河北总部基地",
tip:"文创产品"
},
{
img:'http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
name: "稻香村糕点",
price: 158,
delPrice:198,
sale:58,
business:"稻香村河北总部基地",
tip:"文创产品"
},
{
img:'http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
name: "文创小皮马包",
price: 158,
delPrice:198,
sale:58,
business:"稻香村河北总部基地",
tip:"文创产品"
},
{
img:'http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
name: "网红非遗漆扇",
price: 158,
delPrice:198,
sale:58,
business:"稻香村河北总部基地",
tip:"文创产品"
},
]
}
}
};
</script>
<style lang="scss">
.v-shop-list {
padding: 0 24rpx;
flex-wrap: wrap;
margin-left: -24rpx;
.list_item {
margin-bottom: 24rpx;
.item_box {
margin-left: 24rpx;
box-sizing: border-box;
background-color: #fff;
}
.item_image {
position: relative;
width: 100%;
height: 220rpx;
border-radius: 16rpx;
overflow: hidden;
.img {
width: 110%;
}
}
.item_content {
.title {
margin-top: 8rpx;
font-size: 28rpx;
color: #333333;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save