Compare commits
No commits in common. "c4855b2b03dc0f46d8a4edb326b1627b99eb2e6e" and "89b18e4593642babdba8923239ff88a90c657866" have entirely different histories.
c4855b2b03
...
89b18e4593
File diff suppressed because it is too large
Load Diff
43
pages.json
43
pages.json
|
|
@ -53,7 +53,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"path": "pages/cooperate/index",
|
"path": "pages/cooperate/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -65,39 +64,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/my/newseckill",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "秒杀",
|
|
||||||
"enablePullDownRefresh": true,
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"app-plus": {
|
|
||||||
"titleNView": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/my/newseckilldetails",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "秒杀详情",
|
|
||||||
"enablePullDownRefresh": true,
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"app-plus": {
|
|
||||||
"titleNView": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/my/newTeaml",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "团购",
|
|
||||||
"enablePullDownRefresh": true,
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"app-plus": {
|
|
||||||
"titleNView": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/cooperate/hehuo",
|
"path": "pages/cooperate/hehuo",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -630,15 +596,6 @@
|
||||||
"titleNView": false
|
"titleNView": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},{
|
|
||||||
"path": "order/payModifyMs",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "秒杀订单",
|
|
||||||
"enablePullDownRefresh": false,
|
|
||||||
"app-plus": {
|
|
||||||
"titleNView": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},{
|
},{
|
||||||
"path": "order/payModifyTcMyDaiB",
|
"path": "order/payModifyTcMyDaiB",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
|
||||||
|
|
@ -97,7 +97,7 @@
|
||||||
<image src="../../static/index-fenglei6.png" mode="widthFix"></image>
|
<image src="../../static/index-fenglei6.png" mode="widthFix"></image>
|
||||||
<span class="feng_word">服务疗程</span>
|
<span class="feng_word">服务疗程</span>
|
||||||
</view>
|
</view>
|
||||||
<view class="index-project-content" @click="goNav('/pages/my/newseckill')">
|
<view class="index-project-content" @click="qidai()">
|
||||||
<image src="../../static/index-fenglei7.png" mode="widthFix"></image>
|
<image src="../../static/index-fenglei7.png" mode="widthFix"></image>
|
||||||
<span class="feng_word">限时秒杀</span>
|
<span class="feng_word">限时秒杀</span>
|
||||||
</view>
|
</view>
|
||||||
|
|
|
||||||
|
|
@ -100,14 +100,14 @@
|
||||||
<image src="../../static/my-liaocheng.png" mode=""></image>
|
<image src="../../static/my-liaocheng.png" mode=""></image>
|
||||||
<span class="my-serve-list-text">服务疗程</span>
|
<span class="my-serve-list-text">服务疗程</span>
|
||||||
</view>
|
</view>
|
||||||
<view class="my-serve-list" @click="miaoshao()">
|
<view class="my-serve-list" @click="meServe('企业')">
|
||||||
|
<image src="../../static/my-liaocheng1.png" mode=""></image>
|
||||||
|
<span class="my-serve-list-text">企业预约</span>
|
||||||
|
</view>
|
||||||
|
<view class="my-serve-list" @click="meServe('新人拼团')">
|
||||||
<image src="../../static/my-liaocheng2.png" mode=""></image>
|
<image src="../../static/my-liaocheng2.png" mode=""></image>
|
||||||
<span class="my-serve-list-text">新人拼团</span>
|
<span class="my-serve-list-text">新人拼团</span>
|
||||||
</view>
|
</view>
|
||||||
<view class="my-serve-list" @click="miaoshao()">
|
|
||||||
<image src="../../static/my-liaocheng2.png" mode=""></image>
|
|
||||||
<span class="my-serve-list-text">秒杀</span>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="my-use width">
|
<view class="my-use width">
|
||||||
|
|
@ -606,11 +606,6 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
miaoshao(){
|
|
||||||
uni.navigateTo({
|
|
||||||
url:'/pages/my/newseckill'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
meServe(item){
|
meServe(item){
|
||||||
if (this.userId) {
|
if (this.userId) {
|
||||||
if(item=="服务套餐"){
|
if(item=="服务套餐"){
|
||||||
|
|
@ -625,6 +620,10 @@
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/pages/my/fuwuliaocheng'
|
url:'/pages/my/fuwuliaocheng'
|
||||||
})
|
})
|
||||||
|
}else if(item=="企业"){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/shop/index?text='+item
|
||||||
|
})
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,447 @@
|
||||||
|
<!-- 自定义下拉刷新与上拉加载演示(vue) -->
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<z-paging ref="paging" v-model="dataList" @query="queryList" >
|
||||||
|
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
||||||
|
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
||||||
|
<template #top>
|
||||||
|
<view class="service-head-top">
|
||||||
|
<view class="service-head-top-left">
|
||||||
|
<image @click="backImg" src="../../static/fanhui.png" mode="widthFix"></image>
|
||||||
|
<image style="width: 136rpx; height:40rpx ;" src="../../static/seckill.png"></image>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<uni-search-bar @service="serviceTrue" @confirm="search" :cancelext="'取消'" v-model="searchValue" @input="input"
|
||||||
|
@clear="clear">
|
||||||
|
</uni-search-bar>
|
||||||
|
<view class="search-btn" @click="searchBtn">
|
||||||
|
搜索
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="fenlei">
|
||||||
|
<z-tabs class="z-tabs-fenlei" :list="tabList" @change="tabChange" @changeClick="changeClick"/>
|
||||||
|
</view> -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
|
||||||
|
|
||||||
|
<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
|
||||||
|
<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
|
||||||
|
<template #refresher="{refresherStatus}" >
|
||||||
|
<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
|
||||||
|
<custom-refresher :status="refresherStatus" />
|
||||||
|
</template>
|
||||||
|
<!-- 自定义没有更多数据view -->
|
||||||
|
<template #loadingMoreNoMore >
|
||||||
|
<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
|
||||||
|
<custom-nomore />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
||||||
|
<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)" >
|
||||||
|
<!-- <view class="item-title">{{item.title}}</view>
|
||||||
|
<view class="item-detail">{{item.detail}}</view> -->
|
||||||
|
<!-- <view class="item-line"></view> -->
|
||||||
|
<view class="item-img">
|
||||||
|
<image :src="item.packageImg" mode=""></image>
|
||||||
|
<span class="img-span">{{item.status=='1'?'未用完':item.status=='2'?'退款':'已用完'}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="item-view">
|
||||||
|
<view class="view-cata">
|
||||||
|
<view class="item-view-title">【好价】传统中式学位推拿</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
|
||||||
|
<view><span>已售</span><span>1万+</span></view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view>
|
||||||
|
<span>秒杀价</span>
|
||||||
|
<span>27.8</span>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<image style="width: 20rpx; height: 20rpx;" src="../../static/fanhui.png"></image>
|
||||||
|
<span>抢</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-view-bottom-qian">
|
||||||
|
<span>￥</span>
|
||||||
|
<span>{{item.price}}</span>
|
||||||
|
<span>/{{item.serviceCount}}次</span>
|
||||||
|
<span>￥</span>
|
||||||
|
<span>{{item.oldPrice}}/{{item.serviceCount}}次</span>
|
||||||
|
</view>
|
||||||
|
<view class="item-view-jianjie">
|
||||||
|
{{item.content}}
|
||||||
|
</view>
|
||||||
|
<view class="item-view-bottom">
|
||||||
|
<view class="item-view-xiangmu">
|
||||||
|
<span>已售</span><span>{{item.sales}}w+ <!-- | 好评{{item.esteemRate}}% --></span>
|
||||||
|
</view>
|
||||||
|
<view class="item-view-bottom-btn">
|
||||||
|
查看
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</z-paging>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
myId: '',
|
||||||
|
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
||||||
|
dataList: [],
|
||||||
|
tabList: [],
|
||||||
|
typeData:'105',
|
||||||
|
tabIndex: 0,
|
||||||
|
searchValue:'',
|
||||||
|
serviceTrue:true,
|
||||||
|
page:1,
|
||||||
|
limit:10,
|
||||||
|
titleNmae:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(){
|
||||||
|
this.myId = uni.getStorageSync('userId')
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
input(res) {//搜索 输入框
|
||||||
|
this.searchValue=res;
|
||||||
|
console.log('----input:', res)
|
||||||
|
},
|
||||||
|
searchBtn(){//搜索按钮
|
||||||
|
if(this.searchValue!=""){
|
||||||
|
this.getData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getData(){
|
||||||
|
let data = {
|
||||||
|
userId: this.myId,
|
||||||
|
type: this.typeData,
|
||||||
|
page: this.page,
|
||||||
|
limit: this.limit,
|
||||||
|
title:this.searchValue,
|
||||||
|
}
|
||||||
|
this.$Request.get('/app/user/package/findMyPackageList', data).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.dataList=res.data.records;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
tabChange(index) {
|
||||||
|
this.tabIndex = index;
|
||||||
|
//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
|
||||||
|
//调用reload时参数传true则代表reload时触发下拉刷新效果，不传或false则代表取消此效果
|
||||||
|
this.$refs.paging.reload(true);
|
||||||
|
},
|
||||||
|
queryList(pageNo, pageSize) {
|
||||||
|
// console.log(pageNo,pageSize,this.tabIndex)
|
||||||
|
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||||
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||||
|
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||||
|
const params = {
|
||||||
|
userId: this.myId,
|
||||||
|
page: pageNo,
|
||||||
|
limit: pageSize,
|
||||||
|
type: this.typeData,
|
||||||
|
title:''
|
||||||
|
}
|
||||||
|
this.$Request.get('/app/user/package/findMyPackageList',params).then(res => {
|
||||||
|
// 将请求的结果数组传递给z-paging
|
||||||
|
this.$refs.paging.complete(res.data.records);
|
||||||
|
}).catch(res => {
|
||||||
|
// 如果请求失败写this.$refs.paging.complete(false);
|
||||||
|
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
||||||
|
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
||||||
|
this.$refs.paging.complete(false);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
backImg(){//返回上一页
|
||||||
|
uni.reLaunch({
|
||||||
|
url:'/pages/my/index'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
clear(res) {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
itemClick(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/my/cikarDrtail?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+'my'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.item-view-bottom-qian{
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.item-view-bottom-btn{
|
||||||
|
text-align: center;
|
||||||
|
width: 131rpx;
|
||||||
|
height: 55rpx;
|
||||||
|
line-height: 55rpx;
|
||||||
|
background: linear-gradient(90deg, #019C88, #0FA78B, #35C495);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian span:nth-child(5){
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #848484;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian span:nth-child(4){
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #848484;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian span:nth-child(1){
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 25rpx;
|
||||||
|
color: #F95900;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian span:nth-child(2){
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 36.81rpx;
|
||||||
|
color: #F95900;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian span:nth-child(3){
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 25rpx;
|
||||||
|
color: #F95900;
|
||||||
|
}
|
||||||
|
.item-view-bottom{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.item-view-jianjie{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin:5px 0px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.item-view-biao{
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 15rpx 3rpx 15rpx 3rpx;
|
||||||
|
}
|
||||||
|
.tuina{
|
||||||
|
background-color:#d1f2df;
|
||||||
|
color: #17984d;
|
||||||
|
}
|
||||||
|
.xiaoer{
|
||||||
|
background-color:#f1f8d7;
|
||||||
|
color: #58b314;
|
||||||
|
}
|
||||||
|
.taishi{
|
||||||
|
background-color:#e5d5c6;
|
||||||
|
color: #805d39;
|
||||||
|
}
|
||||||
|
.kangfu{
|
||||||
|
background-color:#fcf3da;
|
||||||
|
color: #ff8600;
|
||||||
|
}
|
||||||
|
.item-view-xiangmu span:nth-child(2){
|
||||||
|
font-weight: normal;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.item-view-xiangmu span:nth-child(1){
|
||||||
|
font-weight: normal;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
.item-view-xiangmu{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 25rpx;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.item-view-title{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.item-view{
|
||||||
|
width: 55%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.item-img{
|
||||||
|
width: 285rpx;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 14rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.img-span{
|
||||||
|
padding: 2px 5px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 8px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(-90deg, #FF6F48, #FF9E69);
|
||||||
|
border-radius: 7px 0px 7px 0px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
right: 0;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.item-img image{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 14rpx;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 140px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 21rpx;
|
||||||
|
margin-top:10px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-detail {
|
||||||
|
padding: 5rpx 15rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: white;
|
||||||
|
background-color: #007AFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
/deep/.zp-paging-container{
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
/deep/.zp-paging-container-content{
|
||||||
|
width: 95%;
|
||||||
|
margin: 50px auto 0px auto;
|
||||||
|
}
|
||||||
|
.fenlei{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.index-fenl-title{
|
||||||
|
width: 81rpx;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 34rpx;
|
||||||
|
color:#019C88;
|
||||||
|
}
|
||||||
|
.index-fenl-title-bottom{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
width: 81rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
border-radius: 7rpx;
|
||||||
|
background: linear-gradient(-48deg,rgba(1, 156, 136, 0.35),rgba(45, 196, 142, 0.35));
|
||||||
|
}
|
||||||
|
/deep/.uni-searchbar__cancel{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.search-btn{
|
||||||
|
text-align: center;
|
||||||
|
line-height: 31px;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
margin-top:9.4px;
|
||||||
|
margin-right: 11px;
|
||||||
|
height: 32px !important;
|
||||||
|
}
|
||||||
|
/deep/.uni-searchbar__box-icon-search,.search-btn{
|
||||||
|
width: 150rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: #18A689;
|
||||||
|
border-radius: 31rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
/deep/.uni-searchbar__box{
|
||||||
|
height: 31px;
|
||||||
|
border-radius: 15px !important;
|
||||||
|
background-color: #fff !important;
|
||||||
|
border: 1px solid #E5E5E5;
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-flow: row-reverse;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
/deep/.uni-searchbar{
|
||||||
|
width: 240px;
|
||||||
|
border-radius: 31rpx;
|
||||||
|
}
|
||||||
|
.service-head-top-left image{
|
||||||
|
width: 25px;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.service-head-top-left span{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 34rpx;
|
||||||
|
color: #171717;
|
||||||
|
}
|
||||||
|
.service-head-top-left{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.service-head-top{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #fff;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.view-cata{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,487 @@
|
||||||
|
<!-- 自定义下拉刷新与上拉加载演示(vue) -->
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<z-paging ref="paging" v-model="dataList" @query="queryList" >
|
||||||
|
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
||||||
|
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
||||||
|
<template #top>
|
||||||
|
<view class="service-head-top">
|
||||||
|
<view class="service-head-top-left">
|
||||||
|
<image @click="backImg" src="../../static/fanhui.png" mode="widthFix"></image>
|
||||||
|
<span>预约服务</span>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<uni-search-bar @service="serviceTrue" @confirm="search" :cancelext="'取消'" v-model="searchValue" @input="input"
|
||||||
|
@clear="clear">
|
||||||
|
</uni-search-bar>
|
||||||
|
<view class="search-btn" @click="searchBtn">
|
||||||
|
搜索
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="fenlei">
|
||||||
|
<z-tabs class="z-tabs-fenlei" :list="tabList" @change="tabChange" @changeClick="changeClick"/>
|
||||||
|
</view> -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
|
||||||
|
|
||||||
|
<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
|
||||||
|
<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
|
||||||
|
<template #refresher="{refresherStatus}" >
|
||||||
|
<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
|
||||||
|
<custom-refresher :status="refresherStatus" />
|
||||||
|
</template>
|
||||||
|
<!-- 自定义没有更多数据view -->
|
||||||
|
<template #loadingMoreNoMore >
|
||||||
|
<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
|
||||||
|
<custom-nomore />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
||||||
|
<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)" >
|
||||||
|
<!-- <view class="item-title">{{item.title}}</view>
|
||||||
|
<view class="item-detail">{{item.detail}}</view> -->
|
||||||
|
<!-- <view class="item-line"></view> -->
|
||||||
|
<view class="item-img">
|
||||||
|
<image :src="item.packageImg" mode=""></image>
|
||||||
|
<span class="img-span">{{item.status=='1'?'未用完':item.status=='2'?'退款':'已用完'}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="item-view">
|
||||||
|
<view class="view-cata">
|
||||||
|
<view class="item-view-title">企业2小时福利项目</view>
|
||||||
|
<span class="xiaoer item-view-biao">{{item.classifyName}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="recommend-line">
|
||||||
|
<view class="recom-model">荐</view>
|
||||||
|
<view class="recom-model-text"><span>放松颈肩</span><span>缓解疲劳</span></view>
|
||||||
|
</view>
|
||||||
|
<view class="recommend-line">
|
||||||
|
<image src="../../static/rumen-time.png" mode="" style="width: 14px; height: 14px;"></image>
|
||||||
|
<view class="pattern">
|
||||||
|
<span>180分钟</span>
|
||||||
|
<span>(坐姿)</span>
|
||||||
|
<span>492</span>
|
||||||
|
<span>人选择</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="recommend-line1">
|
||||||
|
<view class="item-view-bottom-qian">
|
||||||
|
<span>￥</span>
|
||||||
|
<span>{{item.price}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="item-view-bottom-btn">
|
||||||
|
预约
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</z-paging>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
myId: '',
|
||||||
|
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
||||||
|
dataList: [],
|
||||||
|
tabList: [],
|
||||||
|
typeData:'105',
|
||||||
|
tabIndex: 0,
|
||||||
|
searchValue:'',
|
||||||
|
serviceTrue:true,
|
||||||
|
page:1,
|
||||||
|
limit:10,
|
||||||
|
titleNmae:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(){
|
||||||
|
this.myId = uni.getStorageSync('userId')
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
input(res) {//搜索 输入框
|
||||||
|
this.searchValue=res;
|
||||||
|
console.log('----input:', res)
|
||||||
|
},
|
||||||
|
searchBtn(){//搜索按钮
|
||||||
|
if(this.searchValue!=""){
|
||||||
|
this.getData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getData(){
|
||||||
|
let data = {
|
||||||
|
userId: this.myId,
|
||||||
|
type: this.typeData,
|
||||||
|
page: this.page,
|
||||||
|
limit: this.limit,
|
||||||
|
title:this.searchValue,
|
||||||
|
}
|
||||||
|
this.$Request.get('/app/user/package/findMyPackageList', data).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.dataList=res.data.records;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
tabChange(index) {
|
||||||
|
this.tabIndex = index;
|
||||||
|
//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
|
||||||
|
//调用reload时参数传true则代表reload时触发下拉刷新效果，不传或false则代表取消此效果
|
||||||
|
this.$refs.paging.reload(true);
|
||||||
|
},
|
||||||
|
queryList(pageNo, pageSize) {
|
||||||
|
// console.log(pageNo,pageSize,this.tabIndex)
|
||||||
|
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||||
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||||
|
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||||
|
const params = {
|
||||||
|
userId: this.myId,
|
||||||
|
page: pageNo,
|
||||||
|
limit: pageSize,
|
||||||
|
type: this.typeData,
|
||||||
|
title:''
|
||||||
|
}
|
||||||
|
this.$Request.get('/app/user/package/findMyPackageList',params).then(res => {
|
||||||
|
// 将请求的结果数组传递给z-paging
|
||||||
|
this.$refs.paging.complete(res.data.records);
|
||||||
|
}).catch(res => {
|
||||||
|
// 如果请求失败写this.$refs.paging.complete(false);
|
||||||
|
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
||||||
|
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
||||||
|
this.$refs.paging.complete(false);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
backImg(){//返回上一页
|
||||||
|
uni.reLaunch({
|
||||||
|
url:'/pages/my/index'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
clear(res) {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
itemClick(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/my/cikarDrtail?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+'my'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.recommend-line{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
.recommend-line1{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.recom-model{
|
||||||
|
border: 1px solid #019C88;
|
||||||
|
padding:0 6rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
color: #019C88;
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
.recom-model-text{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.recom-model-text span{
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
.pattern{
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
.pattern span:nth-child(1){
|
||||||
|
color:#999;
|
||||||
|
}
|
||||||
|
.pattern span:nth-child(2){
|
||||||
|
color:#bcbcbc;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
.pattern span:nth-child(3){
|
||||||
|
color:#019c88;
|
||||||
|
}
|
||||||
|
.pattern span:nth-child(4){
|
||||||
|
color:#999;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian{
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.item-view-bottom-btn{
|
||||||
|
text-align: center;
|
||||||
|
width: 131rpx;
|
||||||
|
height: 55rpx;
|
||||||
|
line-height: 55rpx;
|
||||||
|
background: linear-gradient(90deg, #019C88, #0FA78B, #35C495);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian span:nth-child(5){
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #848484;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian span:nth-child(4){
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #848484;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian span:nth-child(1){
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 25rpx;
|
||||||
|
color: #F95900;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian span:nth-child(2){
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 36.81rpx;
|
||||||
|
color: #F95900;
|
||||||
|
}
|
||||||
|
.item-view-bottom-qian span:nth-child(3){
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 25rpx;
|
||||||
|
color: #F95900;
|
||||||
|
}
|
||||||
|
.item-view-bottom{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.item-view-jianjie{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin:5px 0px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.item-view-biao{
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 15rpx 3rpx 15rpx 3rpx;
|
||||||
|
}
|
||||||
|
.tuina{
|
||||||
|
background-color:#d1f2df;
|
||||||
|
color: #17984d;
|
||||||
|
}
|
||||||
|
.xiaoer{
|
||||||
|
background-color:#f1f8d7;
|
||||||
|
color: #58b314;
|
||||||
|
}
|
||||||
|
.taishi{
|
||||||
|
background-color:#e5d5c6;
|
||||||
|
color: #805d39;
|
||||||
|
}
|
||||||
|
.kangfu{
|
||||||
|
background-color:#fcf3da;
|
||||||
|
color: #ff8600;
|
||||||
|
}
|
||||||
|
.item-view-xiangmu span:nth-child(2){
|
||||||
|
font-weight: normal;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.item-view-xiangmu span:nth-child(1){
|
||||||
|
font-weight: normal;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
.item-view-xiangmu{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 25rpx;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.item-view-title{
|
||||||
|
width: 76%;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.item-view{
|
||||||
|
width: 55%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.item-img{
|
||||||
|
width: 285rpx;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 14rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.img-span{
|
||||||
|
padding: 2px 5px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 8px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(-90deg, #FF6F48, #FF9E69);
|
||||||
|
border-radius: 7px 0px 7px 0px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
right: 0;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.item-img image{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 14rpx;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 140px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 21rpx;
|
||||||
|
margin-top:10px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-detail {
|
||||||
|
padding: 5rpx 15rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: white;
|
||||||
|
background-color: #007AFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
/deep/.zp-paging-container{
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
/deep/.zp-paging-container-content{
|
||||||
|
width: 95%;
|
||||||
|
margin: 50px auto 0px auto;
|
||||||
|
}
|
||||||
|
.fenlei{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.index-fenl-title{
|
||||||
|
width: 81rpx;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 34rpx;
|
||||||
|
color:#019C88;
|
||||||
|
}
|
||||||
|
.index-fenl-title-bottom{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
width: 81rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
border-radius: 7rpx;
|
||||||
|
background: linear-gradient(-48deg,rgba(1, 156, 136, 0.35),rgba(45, 196, 142, 0.35));
|
||||||
|
}
|
||||||
|
/deep/.uni-searchbar__cancel{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.search-btn{
|
||||||
|
text-align: center;
|
||||||
|
line-height: 31px;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
margin-top:9.4px;
|
||||||
|
margin-right: 11px;
|
||||||
|
height: 32px !important;
|
||||||
|
}
|
||||||
|
/deep/.uni-searchbar__box-icon-search,.search-btn{
|
||||||
|
width: 150rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: #18A689;
|
||||||
|
border-radius: 31rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
/deep/.uni-searchbar__box{
|
||||||
|
height: 31px;
|
||||||
|
border-radius: 15px !important;
|
||||||
|
background-color: #fff !important;
|
||||||
|
border: 1px solid #E5E5E5;
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-flow: row-reverse;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
/deep/.uni-searchbar{
|
||||||
|
width: 240px;
|
||||||
|
border-radius: 31rpx;
|
||||||
|
}
|
||||||
|
.service-head-top-left image{
|
||||||
|
width: 25px;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.service-head-top-left span{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 34rpx;
|
||||||
|
color: #171717;
|
||||||
|
}
|
||||||
|
.service-head-top-left{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.service-head-top{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #fff;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.view-cata{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -49,23 +49,21 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="item-view">
|
<view class="item-view">
|
||||||
<view class="view-cata">
|
<view class="view-cata">
|
||||||
<view class="item-view-title">{{item.title}}</view>
|
<view class="item-view-title">【好价】传统中式学位推拿</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="pace-plan">
|
<view class="pace-plan">
|
||||||
|
<view class="pace">已抢50%</view>
|
||||||
|
<view class="pace-text"><span>已售</span><span>1万+</span></view>
|
||||||
|
</view>
|
||||||
|
<view class="seckill-entry">
|
||||||
<view class="seckill-money">
|
<view class="seckill-money">
|
||||||
<span>秒杀价￥</span>
|
<span>秒杀价￥</span>
|
||||||
<span>{{item.price}}</span>
|
<span>27</span>
|
||||||
|
<span>.8</span>
|
||||||
</view>
|
</view>
|
||||||
<view style="text-decoration: line-through;">
|
|
||||||
<span>原价￥{{item.oldPrice}}</span>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="pace">已抢50%</view> -->
|
|
||||||
</view>
|
|
||||||
<view class="seckill-entry" v-if="item.btnShow==true">
|
|
||||||
<view>{{item.startTime}}</view>
|
|
||||||
<view class="seckill-rob ">
|
<view class="seckill-rob ">
|
||||||
<image class="seckill-img" src="../../static/seckill3.png"></image>
|
<image class="seckill-img" src="../../static/seckill3.png"></image>
|
||||||
<span class="seckill-text">开抢</span>
|
<span class="seckill-text">抢</span>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -106,31 +104,17 @@
|
||||||
this.getData()
|
this.getData()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getTimeInMilliseconds(timeString) {
|
|
||||||
return new Date(timeString).getTime();
|
|
||||||
},
|
|
||||||
getData(){
|
getData(){
|
||||||
let data = {
|
let data = {
|
||||||
type: '112',
|
userId: this.myId,
|
||||||
|
type: this.typeData,
|
||||||
page: this.page,
|
page: this.page,
|
||||||
limit: this.limit,
|
limit: this.limit,
|
||||||
title:this.searchValue,
|
title:this.searchValue,
|
||||||
}
|
}
|
||||||
this.$Request.get('/app/massage/package/findAppActivityPage', data).then(res => {
|
this.$Request.get('/app/user/package/findMyPackageList', data).then(res => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
var newTime = new Date().getTime();
|
this.dataList=res.data.records;
|
||||||
var starTime;
|
|
||||||
var endTime;
|
|
||||||
for(var i=0;i<res.data.list.length;i++){
|
|
||||||
starTime=this.getTimeInMilliseconds(res.data.list[i].startTime);
|
|
||||||
endTime=this.getTimeInMilliseconds(res.data.list[i].endTime);
|
|
||||||
if(newTime>=starTime&&newTime<=endTime){
|
|
||||||
this.$set(res.data.list[i], 'btnShow', true)
|
|
||||||
}else{
|
|
||||||
this.$set(res.data.list[i], 'btnShow', false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.dataList=res.data.list;
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -146,28 +130,15 @@
|
||||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||||
const params = {
|
const params = {
|
||||||
// userId: this.myId,
|
userId: this.myId,
|
||||||
page: pageNo,
|
page: pageNo,
|
||||||
limit: pageSize,
|
limit: pageSize,
|
||||||
type: '112',
|
type: this.typeData,
|
||||||
title:''
|
title:''
|
||||||
}
|
}
|
||||||
this.$Request.get('/app/massage/package/findAppActivityPage',params).then(res => {
|
this.$Request.get('/app/user/package/findMyPackageList',params).then(res => {
|
||||||
// 将请求的结果数组传递给z-paging
|
// 将请求的结果数组传递给z-paging
|
||||||
this.$refs.paging.complete(res.data.list);
|
this.$refs.paging.complete(res.data.records);
|
||||||
var newTime = new Date().getTime();
|
|
||||||
var starTime;
|
|
||||||
var endTime;
|
|
||||||
for(var i=0;i<res.data.list.length;i++){
|
|
||||||
starTime=this.getTimeInMilliseconds(res.data.list[i].startTime);
|
|
||||||
endTime=this.getTimeInMilliseconds(res.data.list[i].endTime);
|
|
||||||
if(newTime>=starTime&&newTime<=endTime){
|
|
||||||
this.$set(res.data.list[i], 'btnShow', true)
|
|
||||||
}else{
|
|
||||||
this.$set(res.data.list[i], 'btnShow', false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.dataList=res.data.list;
|
|
||||||
}).catch(res => {
|
}).catch(res => {
|
||||||
// 如果请求失败写this.$refs.paging.complete(false);
|
// 如果请求失败写this.$refs.paging.complete(false);
|
||||||
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
||||||
|
|
@ -186,7 +157,7 @@
|
||||||
},
|
},
|
||||||
itemClick(item) {
|
itemClick(item) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/pages/my/newseckilldetails?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+'index'
|
url:'/pages/my/cikarDrtail?id='+item.id+'&limit='+this.limit+'&page='+this.page+'&name='+'my'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -198,7 +169,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
padding: 20rpx 0;
|
padding: 20rpx 0;
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
.pace-text{
|
.pace-text{
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
|
|
@ -213,8 +183,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.pace{
|
.pace{
|
||||||
/* width: 60%; */
|
width: 60%;
|
||||||
padding: 0px 5px;
|
|
||||||
height: 30rpx;
|
height: 30rpx;
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
|
|
@ -244,7 +213,7 @@
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
}
|
}
|
||||||
.seckill-rob{
|
.seckill-rob{
|
||||||
width: 80px;
|
width: 120rpx;
|
||||||
height: 50rpx;
|
height: 50rpx;
|
||||||
background: linear-gradient(90deg, #fb2d30, #fc2e37);
|
background: linear-gradient(90deg, #fb2d30, #fc2e37);
|
||||||
border-radius: 5rpx 8rpx 30rpx 8rpx ;
|
border-radius: 5rpx 8rpx 30rpx 8rpx ;
|
||||||
|
|
|
||||||
|
|
@ -8,12 +8,12 @@
|
||||||
<view class="group-buy">
|
<view class="group-buy">
|
||||||
<view class="group-buy-left">
|
<view class="group-buy-left">
|
||||||
<view class="group_amount">
|
<view class="group_amount">
|
||||||
<span>秒杀价￥</span>
|
<span>券后￥</span>
|
||||||
<span>{{mainData.price}}</span>
|
<span>234.00</span>
|
||||||
</view>
|
</view>
|
||||||
<view class="group-rule">
|
<view class="group-rule">
|
||||||
<span>原价</span>
|
<span>优惠前</span>
|
||||||
<span>￥{{mainData.oldPrice}}</span>
|
<span>￥688.00</span>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="group-buy-right">
|
<view class="group-buy-right">
|
||||||
|
|
@ -26,24 +26,65 @@
|
||||||
<view class="header-bottom-top">
|
<view class="header-bottom-top">
|
||||||
<view class="header-bottom-title">
|
<view class="header-bottom-title">
|
||||||
<view class="header-bottom-title-text">
|
<view class="header-bottom-title-text">
|
||||||
<span>{{mainData.title}}</span>
|
<span>{{mainData.title}}至尊级精油SPA</span>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="header-bottom-title-num">
|
<view class="header-bottom-title-num">
|
||||||
<span> 已售</span>
|
<span> 已售</span>
|
||||||
<span>{{mainData.sales}}</span>
|
<span>16</span>
|
||||||
</view> -->
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tewmork-key">
|
<view class="tewmork-key">
|
||||||
<span v-for="(item,index) in labels" :key="index">{{item}}</span>
|
<span>精油开背</span>
|
||||||
|
<span>增强免疫</span>
|
||||||
|
<span>调节</span>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
|
||||||
<span>秒杀时间：{{mainData.startTime}} - {{mainData.endTime}}</span>
|
<!--<view class="header-bottom-money-view">
|
||||||
|
<view class="header-bottom-money1">
|
||||||
|
<view class="header-bottom-money-zhen">
|
||||||
|
<span>￥</span>
|
||||||
|
<span>{{mainData.price}}</span>
|
||||||
|
<span v-if="dataList.name=='index'">/{{serviceCount}}次</span>
|
||||||
|
<span v-else>/{{mainData.serviceCount}}次</span>
|
||||||
</view>
|
</view>
|
||||||
|
<view v-if="dataList.name=='index'" class="header-bottom-money-jia" style="text-decoration: line-through;">
|
||||||
|
￥{{mainData.oldPrice}}/{{serviceCount}}次
|
||||||
|
</view>
|
||||||
|
<view v-else class="header-bottom-money-jia" style="text-decoration: line-through;">
|
||||||
|
￥{{mainData.oldPrice}}/{{mainData.serviceCount}}次
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-title-bottom">
|
||||||
|
<image src="../../static/cure.png" mode=""></image>
|
||||||
|
<span>{{liaoTime}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-foot">-->
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- <view class="detail-foot">
|
||||||
|
<view class="detail-foot-nav">
|
||||||
|
<span class="detail-foot-nav-text">适用说明</span>
|
||||||
|
<span class="detail-foot-nav-bor"></span>
|
||||||
|
</view>
|
||||||
|
<view class="detail-foot-mian">
|
||||||
|
<view class="detail-foot-mian-top">
|
||||||
|
<span class="detail-foot-mian-top-title">性别限制: </span>
|
||||||
|
<span class="detail-foot-mian-top-text">不限性别</span>
|
||||||
|
</view>
|
||||||
|
<view class="detail-foot-mian-top-bottom">
|
||||||
|
<span class="detail-foot-mian-top-title">适应人群: </span>
|
||||||
|
<span class="detail-foot-mian-top-text">
|
||||||
|
{{mainData.applyPeople}}
|
||||||
|
</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
<view class="teamwork-plate">
|
<view class="teamwork-plate">
|
||||||
<view class="header-bottom-foot-cont">
|
<view class="header-bottom-foot-cont">
|
||||||
<view class="header-bottom-foot-view">
|
<view class="header-bottom-foot-view">
|
||||||
|
|
@ -67,12 +108,51 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="detail-foot-mian">
|
<view class="detail-foot-mian">
|
||||||
<image class="detail-foot-mian-img" v-for="(item,index) in contentImg" :key="index" :src="item" mode="widthFix"></image>
|
<image class="detail-foot-mian-img" v-for="(item,index) in contentImg" :key="index" :src="item" mode="widthFix"></image>
|
||||||
|
<!-- <view class="lab-view">
|
||||||
|
<view class="detail-foot-mian-txet" v-for="item in labels" :key="item">
|
||||||
|
<span class="detail-foot-mian-txetList">{{item}}</span>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="push-button">
|
<!--<view class="detail-foot" v-if="dataList.name!='index'">
|
||||||
<view class="detail-btn" :class="[mainData.btnShow==true?'aBavk':'hBack']" @click="goumai(mainData)">
|
<view class="detail-foot-nav">
|
||||||
立即购买
|
<span class="detail-foot-nav-text">疗程详情</span>
|
||||||
|
<span class="detail-foot-nav-bor"></span>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="detail-foot-mian">
|
||||||
|
<view class="detail-foot-list" v-for="(item,index) in detailData" :key="index">
|
||||||
|
<view class="detail-foot-list-top">
|
||||||
|
<span style="margin-right: 5px;">{{item.title}}</span>
|
||||||
|
<span style="display: none;">详情</span>
|
||||||
|
<span v-if="item.maxTime">上次预约:{{item.maxTime}}</span>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-money">
|
||||||
|
<view class="header-bottom-money-zhen">
|
||||||
|
已使用{{item.usedQuantity}}次
|
||||||
|
</view>
|
||||||
|
<view class="dingdan-btn" @click="details(item)" :class="[item.usedQuantity=='0'?'dingdan-btn-h':'dingdan-btn-l']">
|
||||||
|
订单详情
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom-money" style="margin-top: 5px;">
|
||||||
|
<view class="header-bottom-money-zhen">
|
||||||
|
未使用{{item.unUsedQuantity}}次
|
||||||
|
</view>
|
||||||
|
<view class="dingdan-btn" @click="goumai(item)" :class="[item.unUsedQuantity=='0'?'dingdan-btn-h':'dingdan-btn-l']">
|
||||||
|
立即预约
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="detail-foot-title">
|
||||||
|
服务疗程
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>-->
|
||||||
|
|
||||||
|
<view class="detail-btn">
|
||||||
|
<span>￥234.00</span>
|
||||||
|
<span>秒杀</span>
|
||||||
</view>
|
</view>
|
||||||
<!-- 支付方式 -->
|
<!-- 支付方式 -->
|
||||||
<u-popup v-model="showpay" mode="bottom" :closeable="closeable">
|
<u-popup v-model="showpay" mode="bottom" :closeable="closeable">
|
||||||
|
|
@ -175,12 +255,30 @@
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
goumai(item){//立即购买
|
details(item){//详情
|
||||||
this.$queue.setData('mainData',item)
|
if(item.usedQuantity){
|
||||||
this.$queue.setData('youhui','');
|
item.id=this.mainData.id
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/my/order/payModifyMs?ordersId='+item.id
|
url:'/pages/my/orderDetailsList?id='+item.id+'&mainId='+this.mainId+'&name='+'疗程'
|
||||||
})
|
})
|
||||||
|
}else{
|
||||||
|
uni.showToast({
|
||||||
|
icon:'error',
|
||||||
|
title:'服务疗程尚未使用，无订单信息！'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
goumai(item){//立即购买
|
||||||
|
if(item.unUsedQuantity>'0'){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/my/myCiLiaoDetail?id='+item.massageTypeId+'&mainId='+this.mainId+'&name='+'疗程'
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
uni.showToast({
|
||||||
|
icon:'error',
|
||||||
|
title:'服务疗程已使用完成，无订单信息！'
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
goNav(e) {
|
goNav(e) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
|
|
@ -587,31 +685,24 @@
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
getTimeInMilliseconds(timeString) {
|
|
||||||
return new Date(timeString).getTime();
|
|
||||||
},
|
|
||||||
getData(){
|
getData(){
|
||||||
var that=this;
|
var that=this;
|
||||||
if(that.dataList.name=='index'){
|
if(that.dataList.name=='index'){
|
||||||
let data = {
|
let data = {
|
||||||
id: that.dataList.id,
|
mainId: that.dataList.id,
|
||||||
page: that.page,
|
page: that.page,
|
||||||
limit: that.limit,
|
limit: that.limit,
|
||||||
}
|
}
|
||||||
that.$Request.get('/app/massage/package/getAppFlashDetail', data).then(res => {
|
that.$Request.get('/app/massage/packageDetail/findAppPage', data).then(res => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
var newTime = new Date().getTime();
|
that.mainData=res.mainData;
|
||||||
var starTime=this.getTimeInMilliseconds(res.data.startTime);
|
that.detailData=res.detailData.list;
|
||||||
var endTime=this.getTimeInMilliseconds(res.data.endTime);
|
that.backgroundImageUrl=res.mainData.packageImg
|
||||||
if(newTime>=starTime&&newTime<=endTime){
|
that.contentImg=res.mainData.contentImg.split(",");
|
||||||
this.$set(res.data, 'btnShow', true)
|
that.liaoTime=that.detailData[0].intervalDaysStr;
|
||||||
}else{
|
that.serviceCount=that.detailData[0].serviceCount;
|
||||||
this.$set(res.data, 'btnShow', false)
|
that.labels=that.mainData.labels.split(',')
|
||||||
}
|
|
||||||
that.mainData=res.data;
|
|
||||||
that.backgroundImageUrl=res.data.packageImg
|
|
||||||
that.contentImg=res.data.contentImg.split(",");
|
|
||||||
that.labels=res.data.labels.split(',');
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}else{
|
}else{
|
||||||
|
|
@ -637,34 +728,6 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.push-button{
|
|
||||||
width: 100%;
|
|
||||||
height: 48px;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.hBack{
|
|
||||||
background: #ccc;
|
|
||||||
}
|
|
||||||
.aBavk{
|
|
||||||
background: linear-gradient(to right, rgb(255, 117, 98), rgb(233, 71, 52));
|
|
||||||
}
|
|
||||||
.detail-btn{
|
|
||||||
display: inline-block;
|
|
||||||
width: 92%;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 28px;
|
|
||||||
color: #ffffff;
|
|
||||||
line-height: 40px;
|
|
||||||
margin-top: 4px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.group-buy-img{
|
.group-buy-img{
|
||||||
margin-bottom: 10rpx;
|
margin-bottom: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
@ -926,7 +989,7 @@
|
||||||
border-bottom-right-radius: 20px;
|
border-bottom-right-radius: 20px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
/* .detail-btn{
|
.detail-btn{
|
||||||
width: 94%;
|
width: 94%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
|
|
@ -941,7 +1004,7 @@
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-left:3%;
|
margin-left:3%;
|
||||||
} */
|
}
|
||||||
.detail-foot-mian-txet span:nth-child(1){
|
.detail-foot-mian-txet span:nth-child(1){
|
||||||
color: #777777;
|
color: #777777;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
<image :src="item.massageImg" mode="" class="item-img"></image>
|
<image :src="item.massageImg" mode="" class="item-img"></image>
|
||||||
<view class="item-view">
|
<view class="item-view">
|
||||||
<view class="view-cata">
|
<view class="view-cata">
|
||||||
<view class="item-view-title">{{item.title}}</view>
|
<view class="item-view-title">{{item.title}}门店名称</view>
|
||||||
<span class="xiaoer">{{item.classifyName}}</span>
|
<span class="xiaoer">{{item.classifyName}}</span>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,451 @@
|
||||||
|
<template>
|
||||||
|
<view style="height: 100vh;flex:1;width:100%">
|
||||||
|
<view class="com-line">
|
||||||
|
<image style="width: 380rpx; height: 330rpx;" src="../../static/coming.png" mode=""></image>
|
||||||
|
<view class="com-text">系统建设中,敬请期待！</view>
|
||||||
|
</view>
|
||||||
|
<!-- v-if="videoShow==true" -->
|
||||||
|
<swiper v-if="videoShow==true" @animationfinish="qiehuan" :current="activeIndex" @change="swiper" :circular="index==0?true:false" vertical
|
||||||
|
class="list">
|
||||||
|
<swiper-item disable-programmatic-animation class="item" v-for="(item,index) in list" :key="index">
|
||||||
|
<video @ended="end" @pause='item.active=false' @click="pause(item,index)"
|
||||||
|
@timeupdate="long($event,item,index)" :id="'Video'+index" class="video"
|
||||||
|
:show-center-play-btn='false' :controls="false" object-fit="cover" :autoplay='false' loop
|
||||||
|
src="https://media.w3.org/2010/05/sintel/trailer.mp4">
|
||||||
|
<cover-view class="back" v-if="item.active==false">
|
||||||
|
<cover-image class="pauseIcon" src="../../static/bofang.png"></cover-image>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="iconList">
|
||||||
|
<cover-view class="iconListClass">
|
||||||
|
<cover-image class="icon" src="../../static/dituzhaoren3.png"></cover-image>
|
||||||
|
<cover-view>
|
||||||
|
<text class="context">12.5w</text>
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="iconListClass">
|
||||||
|
<cover-image class="icon" src="../../static/dituzhaoren4.png"></cover-image>
|
||||||
|
<cover-view>
|
||||||
|
<text class="context">12.5w</text>
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="iconListClass">
|
||||||
|
<cover-image class="icon" src="../../static/dituzhaoren4.png"></cover-image>
|
||||||
|
<cover-view style="white-space: nowrap;lines:1;">
|
||||||
|
<text class="context">12.5w</text>
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="formation">
|
||||||
|
<cover-view style="display: flex;align-items: center;flex-direction: row;">
|
||||||
|
<cover-image class="header"
|
||||||
|
src="https://i02piccdn.sogoucdn.com/a977a5bc3f44ffcf"></cover-image>
|
||||||
|
<cover-view>
|
||||||
|
<text class="context">作者</text>
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view>
|
||||||
|
<text class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="duration">
|
||||||
|
<cover-view class="long" :style="{width:item.percent+'rpx'}"></cover-view>
|
||||||
|
</cover-view>
|
||||||
|
</video>
|
||||||
|
</swiper-item>
|
||||||
|
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
videoShow:false,
|
||||||
|
// 视频下标，记录播放到第几个
|
||||||
|
index: 0,
|
||||||
|
// 数据
|
||||||
|
allList: [{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 7
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 10
|
||||||
|
},
|
||||||
|
],
|
||||||
|
list: [{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
||||||
|
active: false,
|
||||||
|
currentTime: 0,
|
||||||
|
duration: 121,
|
||||||
|
percent: 0,
|
||||||
|
id: 2
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 播放器下标
|
||||||
|
activeIndex: 0,
|
||||||
|
// 记录上一个播放器下标
|
||||||
|
oldActiveIndex: 0,
|
||||||
|
page:1,
|
||||||
|
limit:10,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReady() {},
|
||||||
|
onLoad() {
|
||||||
|
this.jiukou()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
jiukou(){
|
||||||
|
var data={
|
||||||
|
page:1,
|
||||||
|
limit:10,
|
||||||
|
// id:'1',
|
||||||
|
shipinquanId:'1'
|
||||||
|
}
|
||||||
|
uni.request({
|
||||||
|
url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
|
||||||
|
method: 'POST',
|
||||||
|
data:{
|
||||||
|
info: 'get_video'
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
var msg = res.data.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// this.$Request.getT('/app/shipinquan/list',data).then(res => {
|
||||||
|
// if (res.code == 0) {
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// this.$Request.post('/app/shipinquan/add',data).then(res => {
|
||||||
|
// if (res.code == 0) {
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// this.$Request.post('/app/shipinquan/delete',data).then(res => {
|
||||||
|
// if (res.code == 0) {
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// this.$Request.post('/app/shipinquan/addContent',data).then(res => {
|
||||||
|
// if (res.code == 0) {
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// this.$Request.getT('/app/shipinquan/contentlist',data).then(res => {
|
||||||
|
// if (res.code == 0) {
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
qiehuan(e) {
|
||||||
|
if (this.oldActiveIndex < e.detail.current) {
|
||||||
|
if (this.oldActiveIndex - e.detail.current != -2) {
|
||||||
|
console.log('上滑');
|
||||||
|
this.index++
|
||||||
|
this.next(e.detail.current)
|
||||||
|
} else {
|
||||||
|
console.log("下滑");
|
||||||
|
this.pre(e.detail.current)
|
||||||
|
this.index--
|
||||||
|
}
|
||||||
|
} else if (this.oldActiveIndex > e.detail.current) {
|
||||||
|
if (this.oldActiveIndex - e.detail.current != 2) {
|
||||||
|
console.log('下滑');
|
||||||
|
this.pre(e.detail.current)
|
||||||
|
this.index--
|
||||||
|
} else {
|
||||||
|
console.log("上滑");
|
||||||
|
this.index++
|
||||||
|
this.next(e.detail.current)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.oldActiveIndex = e.detail.current
|
||||||
|
})
|
||||||
|
},
|
||||||
|
next(index) {
|
||||||
|
if (Object.is(this.index, 2)) {
|
||||||
|
}
|
||||||
|
if (Object.is(index, 0)) {
|
||||||
|
this.list[1] = this.allList[this.index + 1]
|
||||||
|
}
|
||||||
|
if (Object.is(index, 1)) {
|
||||||
|
this.list[2] = this.allList[this.index + 1]
|
||||||
|
}
|
||||||
|
if (Object.is(index, 2)) {
|
||||||
|
this.list[0] = this.allList[this.index + 1]
|
||||||
|
}
|
||||||
|
this.play(this.activeIndex)
|
||||||
|
},
|
||||||
|
pre(index) {
|
||||||
|
if (Object.is(this.index, 2)) {
|
||||||
|
}
|
||||||
|
if (Object.is(index, 0)) {
|
||||||
|
this.list[2] = this.allList[this.index - 2]
|
||||||
|
}
|
||||||
|
if (Object.is(index, 1)) {
|
||||||
|
this.list[0] = this.allList[this.index - 2]
|
||||||
|
}
|
||||||
|
if (Object.is(index, 2)) {
|
||||||
|
this.list[1] = this.allList[this.index - 2]
|
||||||
|
}
|
||||||
|
this.play(this.activeIndex)
|
||||||
|
},
|
||||||
|
play(index) {
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
uni.createVideoContext(`Video${i}`, this).pause()
|
||||||
|
}
|
||||||
|
this.videoContext = uni.createVideoContext('Video' + index, this)
|
||||||
|
this.list[index].active = true
|
||||||
|
this.videoContext.play()
|
||||||
|
},
|
||||||
|
swiper(e) {
|
||||||
|
// console.log(e.detail.current);
|
||||||
|
this.activeIndex = e.detail.current
|
||||||
|
// this.play(e.detail.current)
|
||||||
|
// this.play(this.activeIndex)
|
||||||
|
},
|
||||||
|
end(e) {
|
||||||
|
this.activeIndex++
|
||||||
|
if (Object.is(this.activeIndex, 3)) {
|
||||||
|
this.activeIndex = 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
long(e, item, index) {
|
||||||
|
item.currentTime = e.detail.currentTime
|
||||||
|
item.percent = (e.detail.currentTime / e.detail.duration) * 750
|
||||||
|
},
|
||||||
|
pause(item, index) {
|
||||||
|
this.videoContext = uni.createVideoContext('Video' + index, this)
|
||||||
|
if (item.active) {
|
||||||
|
this.videoContext.pause()
|
||||||
|
} else {
|
||||||
|
this.videoContext.play()
|
||||||
|
}
|
||||||
|
this.list[index].active = !this.list[index].active
|
||||||
|
},
|
||||||
|
videoClick() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.com-line{
|
||||||
|
width:80%;
|
||||||
|
margin: 45% auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.com-text{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
background-color: black;
|
||||||
|
flex: 1;
|
||||||
|
width:100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
background-color: rgba(225, 225, 225, 0.3);
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pauseIcon {
|
||||||
|
position: absolute;
|
||||||
|
left: calc(50% - 25px);
|
||||||
|
top: calc(50% - 30px);
|
||||||
|
width: 50px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 100vw;
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.long {
|
||||||
|
height: 100%;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.formation {
|
||||||
|
flex-direction: column;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconListClass {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.context {
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100rpx;
|
||||||
|
color: white;
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 600rpx;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: white;
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
lines: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.iconList {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 40px;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 161px;
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
/deep/.uni-cover-view{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.context {
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,762 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<!--
|
|
||||||
注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用
|
|
||||||
|
|
||||||
1. new_index.nvue、index.nvue这两个是App页面
|
|
||||||
|
|
||||||
2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）
|
|
||||||
|
|
||||||
3. 请各位大神多多留手，我已经把请求内存开到最大了
|
|
||||||
|
|
||||||
4. 视频 id 切记是字符串类型 -->
|
|
||||||
<image v-if="isShowAixin" src="@/static/img/index/aixining.png" :style="'position: fixed; margin-left: '+ aixinLeft +'px; margin-top: '+ aixinTop +'px; width: 70px; height: 65px; transform: rotate('+ Rotate +'deg);'"></image>
|
|
||||||
<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'" :vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false" :duration="duration">
|
|
||||||
<swiper-item v-for="(list,index) in dataList" :key="index">
|
|
||||||
<view v-if="Math.abs(k-index)<=1">
|
|
||||||
<view>
|
|
||||||
<!--
|
|
||||||
1.v-if：用于控制视频在节点的渲染数
|
|
||||||
2.muted的默认值是 false，代表默认是禁音视频的
|
|
||||||
3.http-cache默认开启视频缓存
|
|
||||||
4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
|
|
||||||
5.show-loading：这里默认去掉播放转圈的标志
|
|
||||||
v-if="Math.abs(k-index)<=1"
|
|
||||||
-->
|
|
||||||
<video
|
|
||||||
v-if="isShow"
|
|
||||||
:id="list.id+''+index"
|
|
||||||
:loop="true"
|
|
||||||
:muted="list.isplay"
|
|
||||||
:controls="false"
|
|
||||||
:autoplay="true"
|
|
||||||
:http-cache="true"
|
|
||||||
:page-gesture="false"
|
|
||||||
:show-fullscreen-btn="false"
|
|
||||||
:show-loading="false"
|
|
||||||
:show-center-play-btn="false"
|
|
||||||
:enable-progress-gesture="false"
|
|
||||||
:src="list.filePath"
|
|
||||||
@ended="ended"
|
|
||||||
@click="tapVideoHover(list.state,$event)"
|
|
||||||
@timeupdate="timeupdate($event,index)"
|
|
||||||
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: 8;'"
|
|
||||||
:poster="list.filePath+'?x-oss-process=video/snapshot,t_100,f_jpg'"
|
|
||||||
></video>
|
|
||||||
<!--
|
|
||||||
1.这里是封面（方案二）：这里的封面可以自定义。
|
|
||||||
2.也在代码中做了批注，两种方案可以共存，不会相互影响。
|
|
||||||
-->
|
|
||||||
<image
|
|
||||||
v-if="!list.playIng"
|
|
||||||
:src="list.filePath+'?x-oss-process=video/snapshot,t_100,f_jpg'"
|
|
||||||
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; position: absolute; z-index: 6;'"
|
|
||||||
mode="aspectFit"
|
|
||||||
></image>
|
|
||||||
</view>
|
|
||||||
<!-- 播放状态：pause 的时候就会暂停 -->
|
|
||||||
<view class="videoHover" @click="tapVideoHover(list.state,$event)" @touchstart="touchstartHover" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;z-index:14;'">
|
|
||||||
<image v-if="list.state=='pause'" class="playState" src="@/static/img/index/play.png"></image>
|
|
||||||
</view>
|
|
||||||
<view class="userInfo">
|
|
||||||
<!-- 1.头像 -->
|
|
||||||
<image @click="tozuozhe" class="userAvatar" :src="list.href" mode="aspectFill"></image>
|
|
||||||
<!-- 2.点赞 -->
|
|
||||||
<view class="list-view" @click="cLike(list.like);" style="opacity: 0.9; margin-top: 17px;">
|
|
||||||
<image v-if="list.like" src="@/static/img/index/xin.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
|
||||||
<image v-if="!list.like" src="@/static/img/index/xin-2.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
|
||||||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;" :class="{'likeNumActive':list.like}">{{list.like_n}}</text>
|
|
||||||
</view>
|
|
||||||
<!-- 3.评论 -->
|
|
||||||
<view class="comment list-view" @click="toComment(index)" style="opacity: 0.9; margin-top: 17px;">
|
|
||||||
<image src="@/static/img/index/liaotian-2.png" style="width: 35px; height: 35px; position: absolute; right: 7px;"></image>
|
|
||||||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{list.sms_n}}</text>
|
|
||||||
</view>
|
|
||||||
<!-- 4.分享 -->
|
|
||||||
<view @click="share" class="list-view" style="opacity: 0.9; margin-top: 17px;">
|
|
||||||
<image src="@/static/img/index/share-fill.png" style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
|
|
||||||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">分享</text>
|
|
||||||
</view>
|
|
||||||
<view @click="dealVoice" class="list-view" style="margin-top: 17px;">
|
|
||||||
<view style="width: 48px; height: 48px; border-radius: 50px; position: absolute; right: 2.5px;">
|
|
||||||
<image :style="'width: 48px; height: 48px; border-radius: 50px; transform: rotate('+ rotates +'deg);'" src="@/static/img/index/bfq.png" mode="aspectFill"></image>
|
|
||||||
<image v-if="showPlay" :style="'width: 30px; height: 30px; margin-top: 9px; margin-left: 9px; position: absolute; border-radius: 50px; transform: rotate('+ rotates +'deg);'" :src="list.href" mode="aspectFill"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 最底下的文字部分 -->
|
|
||||||
<view class="content" style="display: flex;flex-direction: column;">
|
|
||||||
<text class="userName" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.title}}</text><!-- i={{i}} -->
|
|
||||||
<text class="words" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.msg}}-{{k+1}}</text><!-- k={{k}} -->
|
|
||||||
</view>
|
|
||||||
<!-- 进度条 -->
|
|
||||||
<view v-if="k === index" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :style="'width: '+ (windowWidth - (windowWidth*0.10)) +'px; margin-left: '+ (windowWidth * 0.05) +'px; height: 40px; position: absolute;bottom: 0px;margin-bottom: 6px;z-index: 14;'">
|
|
||||||
<!-- 不拖动情况下 -->
|
|
||||||
<view>
|
|
||||||
<!-- 1.底部背景进度条 -->
|
|
||||||
<view :style="'width: '+ (windowWidth - (windowWidth*0.10)) +'px; margin-top: 18px; height: 5px; border-radius: 10px; background-color: #999999; opacity: 0.6;'"></view>
|
|
||||||
<!-- 2.播放的进度条 -->
|
|
||||||
<view v-if="isTouch==false" :style="'width: '+ ((windowWidth - (windowWidth*0.10)) * progressBarPercent) +'px; position: absolute;top: 0; margin-top: 18px; height: 5px; border-radius: 10px; background-color: #e6e4e7; '"></view>
|
|
||||||
<!-- -->
|
|
||||||
<view v-if="isTouch==true" :style="'width: '+ (videoStartPositon + addPositon) +'px; position: absolute;top: 0; margin-top: 18px; height: 5px; border-radius: 10px; background-color: #e6e4e7; '"></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
<uni-popup type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
|
|
||||||
<view :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px; background-color: #242424; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
|
|
||||||
<!--
|
|
||||||
注意：
|
|
||||||
deleteIOSHeight
|
|
||||||
deleteAndroidHeight
|
|
||||||
这两个参数用于控制评论等的高度
|
|
||||||
-->
|
|
||||||
<douyin-scrollview
|
|
||||||
:Width="windowWidth"
|
|
||||||
:Height="(boxStyle.height/1.23)"
|
|
||||||
:deleteIOSHeight="36"
|
|
||||||
:deleteAndroidHeight="15"
|
|
||||||
@closeScrollview="closeScrollview"
|
|
||||||
></douyin-scrollview>
|
|
||||||
</view>
|
|
||||||
</uni-popup>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// import userList from '../new_index/data.js'//这个是假数据
|
|
||||||
let audo = uni.createInnerAudioContext()
|
|
||||||
audo.loop = true
|
|
||||||
import douyinScrollview from '@/components/douyin-scrollview/douyin-scrollview.vue'
|
|
||||||
export default {
|
|
||||||
components:{
|
|
||||||
douyinScrollview
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
windowWidth: 0,
|
|
||||||
windowHeight: 0,
|
|
||||||
platform: "",
|
|
||||||
model: "",
|
|
||||||
deleteHeight: 0,
|
|
||||||
dataList: [],
|
|
||||||
k: 0,
|
|
||||||
oldVideo: "",
|
|
||||||
voice: "",
|
|
||||||
timeout: "",
|
|
||||||
current: 0,
|
|
||||||
boxStyle:{//视频，图片封面样式🌟💗
|
|
||||||
'height': 0,
|
|
||||||
'width': 0,
|
|
||||||
},
|
|
||||||
|
|
||||||
videoID: "",
|
|
||||||
isShow: false,
|
|
||||||
|
|
||||||
showPlay: false,//转轮显示控制
|
|
||||||
rotates: 0,//转轮旋转角度
|
|
||||||
rotateTime: "",//转轮递归事件控制
|
|
||||||
xrotats: "",
|
|
||||||
|
|
||||||
mpcleartime: "",
|
|
||||||
|
|
||||||
isClick: false,
|
|
||||||
|
|
||||||
changeTimeout: "",
|
|
||||||
mptime: 0,
|
|
||||||
mpstartTime: 0,
|
|
||||||
|
|
||||||
duration: 500,
|
|
||||||
// -- 进度条相关 -- start
|
|
||||||
videoStartPositon: 0,
|
|
||||||
progressBarPercent: 0,
|
|
||||||
touchStartPosition: 0,
|
|
||||||
addPositon: 0,
|
|
||||||
timeduration: 0,
|
|
||||||
isTouch: false,
|
|
||||||
// -- 进度条相关 -- end
|
|
||||||
// 引入评论 - 参数
|
|
||||||
heightNum: 1.18,
|
|
||||||
|
|
||||||
// 双击点赞参数
|
|
||||||
touchNum: 0,
|
|
||||||
aixinLeft: 0,
|
|
||||||
aixinTop: 0,
|
|
||||||
isShowAixin: false,
|
|
||||||
Rotate: 0,
|
|
||||||
|
|
||||||
isShow1: false,//控制渲染变量1
|
|
||||||
isShow2: false,//控制渲染变量2 ： 专门控制 uni-popup
|
|
||||||
currents: 0,//用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
|
|
||||||
page:1,
|
|
||||||
limit:10
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch:{
|
|
||||||
async k(k,old_k){
|
|
||||||
// console.log(k, old_k)
|
|
||||||
this.progressBarPercent = 0;
|
|
||||||
// #ifndef MP
|
|
||||||
this.clearToTime();
|
|
||||||
// #endif
|
|
||||||
this.isShow = false
|
|
||||||
this.dataList[old_k].playIng = false//如果视频暂停，就加载封面
|
|
||||||
this.dataList[old_k].isplay = true
|
|
||||||
this.dataList[old_k].state = 'pause'
|
|
||||||
console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k].id+''+old_k)
|
|
||||||
// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
|
|
||||||
uni.createVideoContext(this.dataList[old_k].id + '' + old_k,this).stop()//如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
|
|
||||||
console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～')//提示
|
|
||||||
this.dataList[k].state = 'play'
|
|
||||||
this.isShow = true
|
|
||||||
this.xrotats = setTimeout(()=>{
|
|
||||||
this.showPlay = true;
|
|
||||||
// #ifndef MP
|
|
||||||
this.rotateX();
|
|
||||||
// #endif
|
|
||||||
},200)
|
|
||||||
// #ifdef MP
|
|
||||||
// 如果是小程序端
|
|
||||||
clearTimeout(this.changeTimeout);
|
|
||||||
this.dataList[k].isplay = false
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.dataList[k].playIng = true
|
|
||||||
},250)
|
|
||||||
if(this.mptime < 0.2){
|
|
||||||
this.changeTimeout = setTimeout(()=>{
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
|
|
||||||
},1400)
|
|
||||||
} else {
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
// #ifdef H5
|
|
||||||
this.dataList[k].isplay = true
|
|
||||||
audo.src = this.dataList[k].src
|
|
||||||
if(this.isClick){
|
|
||||||
setTimeout(()=>{
|
|
||||||
if (typeof WeixinJSBridge == "undefined") {
|
|
||||||
setTimeout(()=>{
|
|
||||||
audo.play()
|
|
||||||
uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0)
|
|
||||||
uni.createVideoContext(this.dataList[k].id+''+k,this).play()
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.dataList[k].playIng = true
|
|
||||||
},650)
|
|
||||||
},500)
|
|
||||||
} else {
|
|
||||||
WeixinJSBridge.invoke('getNetworkType', {}, e => {
|
|
||||||
setTimeout(()=>{
|
|
||||||
audo.play()
|
|
||||||
uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0)
|
|
||||||
uni.createVideoContext(this.dataList[k].id+''+k,this).play()
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.dataList[k].playIng = true
|
|
||||||
},850)
|
|
||||||
},200)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},200)
|
|
||||||
} else {
|
|
||||||
audo.pause()
|
|
||||||
this.dataList[k].state = 'pause'
|
|
||||||
uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0)
|
|
||||||
uni.createVideoContext(this.dataList[k].id+''+k,this).pause()
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
var p = k+1;
|
|
||||||
console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p].id+''+p)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
this.platform = uni.getSystemInfoSync().platform
|
|
||||||
this.model = uni.getSystemInfoSync().model
|
|
||||||
var model = this.model
|
|
||||||
if(this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8')){
|
|
||||||
this.deleteHeight = 0//有 tabbar的 修改这里可以改变视频高度
|
|
||||||
}
|
|
||||||
this.windowWidth = uni.getSystemInfoSync().windowWidth
|
|
||||||
this.windowHeight = uni.getSystemInfoSync().windowHeight
|
|
||||||
this.boxStyle.width = this.windowWidth + 'px'//给宽度加px
|
|
||||||
this.boxStyle.height = this.windowHeight - this.deleteHeight;//有 tabbar的 修改这里可以改变视频高度
|
|
||||||
this.get() //刚进入页面加载数据
|
|
||||||
// #ifndef MP
|
|
||||||
this.rotateX();
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
onShow(){
|
|
||||||
console.log('回到前台');
|
|
||||||
if(this.dataList.length !== 0){
|
|
||||||
// #ifdef MP
|
|
||||||
this.dataList[this.k].state = 'play';
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
|
|
||||||
// #endif
|
|
||||||
// #ifdef H5
|
|
||||||
if(this.isClick){
|
|
||||||
this.dataList[this.k].state = 'play';
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
|
|
||||||
audo.play()
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onHide(){
|
|
||||||
// #ifdef MP
|
|
||||||
this.dataList[this.k].state = 'pause';
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
|
|
||||||
// #endif
|
|
||||||
// #ifdef H5
|
|
||||||
if(this.isClick){
|
|
||||||
this.dataList[this.k].state = 'pause';
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
|
|
||||||
audo.pause()
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
console.log('到后台');
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
closeScrollview(){
|
|
||||||
// 点击评论里面的叉叉，就会关闭评论
|
|
||||||
this.$refs.pinglun.close('bottom');
|
|
||||||
},
|
|
||||||
onTabItemTaps() {
|
|
||||||
if (uni.getSystemInfoSync().platform == "ios") {
|
|
||||||
let UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
|
|
||||||
let impact = new UIImpactFeedbackGenerator();
|
|
||||||
impact.prepare();
|
|
||||||
impact.init(1);
|
|
||||||
impact.impactOccurred();
|
|
||||||
}
|
|
||||||
if (uni.getSystemInfoSync().platform == "android") {
|
|
||||||
uni.vibrateShort({
|
|
||||||
success: () => {
|
|
||||||
console.log('点击震动');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 双击点赞效果
|
|
||||||
touchstartHover(event){
|
|
||||||
if(this.touchNum >= 1){
|
|
||||||
// console.log('双击 -- X坐标：'+ event.touches[0].screenX);
|
|
||||||
// console.log('双击 -- Y坐标：'+ event.touches[0].screenY);
|
|
||||||
this.aixinLeft = event.touches[0].screenX - 50;
|
|
||||||
this.aixinTop = event.touches[0].screenY - 50;
|
|
||||||
this.isShowAixin = true;
|
|
||||||
let max = 40; let min = -40;
|
|
||||||
this.Rotate = Math.floor(Math.random() * (max - min + 1)) + min;
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.isShowAixin = false;
|
|
||||||
},700)
|
|
||||||
this.onTabItemTaps();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tozuozhe(){
|
|
||||||
this.currents = 1//点击头像以后就会切换
|
|
||||||
},
|
|
||||||
mpTouchend(){
|
|
||||||
this.mptime = (new Date()/1000) - this.mpstartTime;
|
|
||||||
},
|
|
||||||
mpTouchstart(){
|
|
||||||
this.mpstartTime = (new Date()/1000);
|
|
||||||
},
|
|
||||||
dealVoice(){
|
|
||||||
uni.showToast({
|
|
||||||
title: '处理声音',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
clearToTime(){
|
|
||||||
//清理定时器
|
|
||||||
for(let i=0;i<20;i++){
|
|
||||||
clearTimeout(this.rotateTime);
|
|
||||||
clearTimeout(this.xrotats);
|
|
||||||
this.showPlay = false;
|
|
||||||
this.rotates = 0;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
clearTime(){
|
|
||||||
//清理定时器
|
|
||||||
for(let i=0;i<20;i++){
|
|
||||||
clearTimeout(this.rotateTime);
|
|
||||||
clearTimeout(this.xrotats);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
rotateX(){
|
|
||||||
// clearTimeout(this.rotateTime);
|
|
||||||
this.rotateTime = setTimeout(()=>{
|
|
||||||
this.rotateX();
|
|
||||||
this.showPlay = true;
|
|
||||||
this.rotates += 1;
|
|
||||||
},30)
|
|
||||||
},
|
|
||||||
|
|
||||||
ended(){
|
|
||||||
// 1.播放当前视频结束时触发，自动切换下一个视频
|
|
||||||
// this.current = this.k+1
|
|
||||||
},
|
|
||||||
// ---- 进度条相关 --- start
|
|
||||||
touchstart(e){
|
|
||||||
// console.log(e);
|
|
||||||
this.isTouch = true;
|
|
||||||
// #ifdef H5
|
|
||||||
this.addPositon = 0;
|
|
||||||
this.videoStartPositon = (this.windowWidth - (this.windowWidth*0.10)) * this.progressBarPercent;
|
|
||||||
this.touchStartPosition = e.changedTouches[0].clientX;
|
|
||||||
// #endif
|
|
||||||
// #ifdef MP
|
|
||||||
this.addPositon = 0;
|
|
||||||
this.videoStartPositon = (this.windowWidth - (this.windowWidth*0.10)) * this.progressBarPercent;
|
|
||||||
this.touchStartPosition = e.changedTouches[0].clientX;
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
touchmove(e){
|
|
||||||
// console.log(e);
|
|
||||||
// #ifdef H5
|
|
||||||
let num = e.changedTouches[0].clientX - this.touchStartPosition;
|
|
||||||
if((this.videoStartPositon + num) <= (this.windowWidth - (this.windowWidth*0.10))) {
|
|
||||||
this.addPositon = e.changedTouches[0].clientX - this.touchStartPosition;
|
|
||||||
} else {
|
|
||||||
this.addPositon = 0;
|
|
||||||
this.videoStartPositon = (this.windowWidth - (this.windowWidth*0.10));
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
},
|
|
||||||
touchend(e){
|
|
||||||
// #ifdef H5
|
|
||||||
let per = Number( (this.videoStartPositon+this.addPositon) / (this.windowWidth - (this.windowWidth*0.10)) );
|
|
||||||
let timeSubmit = parseInt( this.timeduration * per )
|
|
||||||
audo.seek(timeSubmit)
|
|
||||||
audo.play()
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(timeSubmit)
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
|
|
||||||
this.dataList[this.k].state = 'play'
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.isTouch = false;
|
|
||||||
},500)
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
},
|
|
||||||
timeupdate(event,index){
|
|
||||||
// 触发进度条更新
|
|
||||||
// console.log(event,index);
|
|
||||||
if(index === this.k){
|
|
||||||
this.timeduration = event.detail.duration;
|
|
||||||
this.progressBarPercent = parseFloat( Number( event.detail.currentTime / event.detail.duration ) );
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// ---- 进度条相关 --- ending
|
|
||||||
doubleLike(){
|
|
||||||
if(this.dataList[this.k].like == false){
|
|
||||||
this.dataList[this.k].like_n += 1;
|
|
||||||
this.dataList[this.k].like = true;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
点赞
|
|
||||||
*/
|
|
||||||
},
|
|
||||||
//点击播放&&暂停
|
|
||||||
tapVideoHover(state,event){
|
|
||||||
// this.dataList[this.k].isShowimage = false
|
|
||||||
// this.dataList[this.k].isShowProgressBarTime = false
|
|
||||||
this.ProgressBarOpacity = 0.5
|
|
||||||
this.dotWidth = 0
|
|
||||||
console.log('state--',state);
|
|
||||||
// 1.启用双击点赞 --- start
|
|
||||||
this.touchNum++;
|
|
||||||
setTimeout(()=>{
|
|
||||||
if(this.touchNum == 1){
|
|
||||||
if(state=='play'||state=='continue'){
|
|
||||||
this.dataList[this.k].state = 'pause';
|
|
||||||
}else{
|
|
||||||
this.dataList[this.k].state = 'continue';
|
|
||||||
}
|
|
||||||
if(this.dataList[this.k].state == 'continue'){
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play();//暂停以后继续播放
|
|
||||||
this.clearTime();
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.rotateX();
|
|
||||||
},50)
|
|
||||||
}
|
|
||||||
if(this.dataList[this.k].state == 'pause'){
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
|
|
||||||
this.clearTime();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(this.touchNum >= 2){
|
|
||||||
this.doubleLike();
|
|
||||||
}
|
|
||||||
this.touchNum = 0;
|
|
||||||
},200)
|
|
||||||
// --------------- ending
|
|
||||||
// 2. 不启用双击点赞 start
|
|
||||||
// if(state=='play'||state=='continue'){
|
|
||||||
// this.dataList[this.k].state = 'pause';
|
|
||||||
// }else{
|
|
||||||
// this.dataList[this.k].state = 'continue';
|
|
||||||
// }
|
|
||||||
// if(this.dataList[this.k].state == 'continue'){
|
|
||||||
// uni.createVideoContext(this.dataList[this.k].id,this).play();//暂停以后继续播放
|
|
||||||
// }
|
|
||||||
// if(this.dataList[this.k].state == 'pause'){
|
|
||||||
// uni.createVideoContext(this.dataList[this.k].id,this).pause();//暂停以后继续播放
|
|
||||||
// }
|
|
||||||
// --------------- ending
|
|
||||||
},
|
|
||||||
//点击播放&&暂停
|
|
||||||
tapVideoHovers(state,event){
|
|
||||||
console.log('state--',state);
|
|
||||||
if(state=='play'||state=='continue'){
|
|
||||||
this.dataList[this.k].state = 'pause';
|
|
||||||
}else{
|
|
||||||
this.dataList[this.k].state = 'continue';
|
|
||||||
}
|
|
||||||
if(this.dataList[this.k].state == 'continue'){
|
|
||||||
this.isClick = true;
|
|
||||||
this.dataList[this.k].playIng = true
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play();//暂停以后继续播放
|
|
||||||
// #ifdef MP
|
|
||||||
this.dataList[this.k].isplay = false
|
|
||||||
// #endif
|
|
||||||
// #ifdef H5
|
|
||||||
audo.play()
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
if(this.dataList[this.k].state == 'pause'){
|
|
||||||
uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
|
|
||||||
// #ifdef MP
|
|
||||||
this.dataList[this.k].isplay = true
|
|
||||||
// #endif
|
|
||||||
// #ifdef H5
|
|
||||||
audo.pause()
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
},
|
|
||||||
change(event){
|
|
||||||
this.k = event.detail.current
|
|
||||||
},
|
|
||||||
animationfinish(event){
|
|
||||||
// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
|
|
||||||
if(this.k == this.dataList.length - 1){
|
|
||||||
this.GET()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//每一组结束时新的请求
|
|
||||||
GET(){
|
|
||||||
uni.request({
|
|
||||||
url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
|
|
||||||
method: 'POST',
|
|
||||||
data:{
|
|
||||||
info: 'get_video'
|
|
||||||
},
|
|
||||||
success: (res) => {
|
|
||||||
var msg = res.data.data
|
|
||||||
// 2.这里把视频添加到视频列表
|
|
||||||
for (let i = 0; i < msg.length; i++) {
|
|
||||||
this.dataList.push(msg[i])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
get(){
|
|
||||||
// 1.这里引入后端请求数据
|
|
||||||
var data={
|
|
||||||
page: this.page,
|
|
||||||
limit:this.limit,
|
|
||||||
}
|
|
||||||
this.$Request.get("/app/shipinquan/list", data).then(res => {
|
|
||||||
if (res.code == 0) {
|
|
||||||
var msg = res.data.records
|
|
||||||
// this.dataList=res.data.records
|
|
||||||
this.isShow = false;
|
|
||||||
// 2.这里把视频添加到视频列表
|
|
||||||
this.dataList = msg.map(item => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
isplay: true,
|
|
||||||
playIng: true,
|
|
||||||
state: 'pause',
|
|
||||||
};
|
|
||||||
});
|
|
||||||
console.log("this.dataList",this.dataList)
|
|
||||||
// 3.播放当前视频
|
|
||||||
// setTimeout(()=>{
|
|
||||||
// this.isShow = true;
|
|
||||||
// this.dataList[this.k].isplay = true
|
|
||||||
// this.dataList[this.k].playIng = true
|
|
||||||
// setTimeout(()=>{
|
|
||||||
// uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(0)
|
|
||||||
// uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
|
|
||||||
// this.dataList[this.k].state = 'pause';
|
|
||||||
// audo.src = this.dataList[this.k].src;
|
|
||||||
|
|
||||||
// },500)
|
|
||||||
// },200)
|
|
||||||
// this.videoID = this.dataList[this.k].id
|
|
||||||
} else {
|
|
||||||
uni.showToast({
|
|
||||||
title: res.msg,
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// uni.request({
|
|
||||||
// url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
|
|
||||||
// method: 'POST',
|
|
||||||
// data:{
|
|
||||||
// info: 'get_video'
|
|
||||||
// },
|
|
||||||
// success: (res) => {
|
|
||||||
// this.isShow = false;
|
|
||||||
// var msg = res.data.data
|
|
||||||
// // 2.这里把视频添加到视频列表
|
|
||||||
// for (let i = 0; i < msg.length; i++) {
|
|
||||||
// this.dataList.push(msg[i])
|
|
||||||
// }
|
|
||||||
// // 3.播放当前视频
|
|
||||||
// setTimeout(()=>{
|
|
||||||
// this.isShow = true;
|
|
||||||
// this.dataList[this.k].isplay = true
|
|
||||||
// this.dataList[this.k].playIng = true
|
|
||||||
// setTimeout(()=>{
|
|
||||||
// uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(0)
|
|
||||||
// uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
|
|
||||||
// this.dataList[this.k].state = 'pause';
|
|
||||||
// audo.src = this.dataList[this.k].src;
|
|
||||||
|
|
||||||
// },500)
|
|
||||||
// },200)
|
|
||||||
// this.videoID = this.dataList[this.k].id
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
},
|
|
||||||
share(){
|
|
||||||
uni.showToast({
|
|
||||||
title: '分享',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
toComment(index){
|
|
||||||
// 注意点击评论之后会执行这里
|
|
||||||
/*
|
|
||||||
（1）先加载缓冲
|
|
||||||
（2）获取当前视频 ID 信息
|
|
||||||
（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
|
|
||||||
- 一定要记得看 index.vue 里面
|
|
||||||
uni.setStorageSync("user",this.peopleList[i]);
|
|
||||||
这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
|
|
||||||
记得写一下。
|
|
||||||
|
|
||||||
（4）打开评论
|
|
||||||
*/
|
|
||||||
uni.showToast({
|
|
||||||
title: '加载中...',
|
|
||||||
icon: 'none',
|
|
||||||
position: 'bottom',
|
|
||||||
duration: 300
|
|
||||||
})
|
|
||||||
uni.setStorageSync("videoID",this.dataList[index].id);
|
|
||||||
this.videoID = this.dataList[index].id;
|
|
||||||
this.$refs.pinglun.open('bottom')
|
|
||||||
},
|
|
||||||
cLike(sss){
|
|
||||||
this.dataList[this.k].like = !this.dataList[this.k].like
|
|
||||||
const video = this.dataList[this.k];
|
|
||||||
sss?video.like_n -= 1:video.like_n += 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.list-view{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.container {background-color: #000000;}
|
|
||||||
.item {
|
|
||||||
/* width : 750rpx; */
|
|
||||||
background-color: #000000;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.videoHover{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
flex: 1;
|
|
||||||
background-color: rgba(0,0,0,0.1);
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
/* border-style: dashed;
|
|
||||||
border-color: #DD524D;
|
|
||||||
border-width: 1px; */
|
|
||||||
}
|
|
||||||
.playState{
|
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.userInfo{
|
|
||||||
position: absolute;
|
|
||||||
bottom:110px;
|
|
||||||
right: 10px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 18;
|
|
||||||
}
|
|
||||||
.userAvatar{
|
|
||||||
border-radius: 500%;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 2px;
|
|
||||||
border-color: #ffffff;
|
|
||||||
}
|
|
||||||
.userAvatar{
|
|
||||||
width : 100rpx;
|
|
||||||
height: 100rpx;
|
|
||||||
}
|
|
||||||
.likeIco,.shareIco,.commentIco{
|
|
||||||
width : 60rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
.likeNum,.commentNum,.shareTex{
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 30rpx;
|
|
||||||
text-align: center;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
.likeNumActive{
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
.content{
|
|
||||||
width: 620rpx;
|
|
||||||
z-index: 99;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 50px;
|
|
||||||
/* justify-content: center; */
|
|
||||||
padding: 15rpx;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
color: #ffffff;
|
|
||||||
z-index: 12;
|
|
||||||
/* background-color: aqua; */
|
|
||||||
}
|
|
||||||
.userName {
|
|
||||||
font-size: 30rpx;
|
|
||||||
color: #ffffff;
|
|
||||||
margin-top: 80upx;
|
|
||||||
}
|
|
||||||
.words {
|
|
||||||
margin-top: 10rpx;
|
|
||||||
font-size: 30rpx;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.root{
|
|
||||||
background-color: #000000;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue