mkm/nk-shop2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改app视频列表显示问题

Browse Source
This commit is contained in:
cc_zbp 2023-05-17 11:25:41 +08:00
parent d5b5703f72
commit 9491da8d31
6 changed files with 1884 additions and 1647 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/zbpSwiper.vue
View File

@ -51,9 +51,7 @@
} from '@/api/api.js'
import { getGeocoder } from '@/api/store.js';
import {
mapGetters
} from 'vuex'
import { mapGetters } from 'vuex'
export default {
props: {
isSelectPlace: {
@ -149,7 +147,8 @@
console.log(res)
this.detaile_address = res.data.address;
this.location_address = res.data.address;
this.recommend_address = res.data.formatted_addresses.recommend.length > 4 ? res.data.formatted_addresses.recommend.slice(0,7) + '...' : res.data.formatted_addresses.recommend
this.recommend_address = res.data.formatted_addresses.recommend.length > 4 ? res.data
.formatted_addresses.recommend.slice(0, 7) + '...' : res.data.formatted_addresses.recommend
}).catch(err => {
uni.showToast({
title: err,

36
config/app.js
View File

@ -8,26 +8,26 @@ let httpApiTwo
let httpApiThree
// 网络接口修改此字符 小程序域名要求https
// let httpApi = 'http://192.168.31.110:8324' //测试
// httpApi = 'https://shop.lihaink.cn' //生产
// httpApi = 'http://192.168.0.222:8324' //生产
// httpApiTwo = 'https://nk.lihaink.cn' //生产
if (process.env.NODE_ENV === "development") {
httpApi = "https://crmeb-test.shop.lihaink.cn"
// #ifdef MP-WEIXIN
httpApiTwo = "http://cms.com"
httpApiThree = 'http://ceshi-oa.lihaink.cn'
// #endif
// #ifdef H5
// httpApiTwo = "baseUrl" // h5跨域配置
httpApiTwo = "https://nk.lihaink.cn" // h5跨域配置
// httpApiThree = 'baseUrlTest' // h5跨域配置
// #endif
} else if (process.env.NODE_ENV === 'production') {
httpApi = 'https://shop.lihaink.cn' //生产
// httpApi = 'http://192.168.0.222:8324' //生产
httpApiTwo = 'https://nk.lihaink.cn' //生产
httpApiThree = 'http://ceshi-oa.lihaink.cn' //生产
}
// if (process.env.NODE_ENV === "development") {
// httpApi = "https://crmeb-test.shop.lihaink.cn"
// // #ifdef MP-WEIXIN
// httpApiTwo = "http://cms.com"
// httpApiThree = 'http://ceshi-oa.lihaink.cn'
// // #endif
// // #ifdef H5
// // httpApiTwo = "baseUrl" // h5跨域配置
// httpApiTwo = "https://nk.lihaink.cn" // h5跨域配置
// // httpApiThree = 'baseUrlTest' // h5跨域配置
// // #endif
// } else if (process.env.NODE_ENV === 'production') {
// httpApi = 'https://shop.lihaink.cn' // 生产
// httpApiTwo = 'https://nk.lihaink.cn' // 生产
// httpApiThree = 'http://ceshi-oa.lihaink.cn' //生产
// }
// 聊天接口修改此字符 小程序聊天要求wss 例如：wss://mer.crmeb.net
// let wsApi = 'ws://192.168.3.20:8324'

59
pages/home/index.vue
View File

@ -5,8 +5,7 @@
<zbpSwiper></zbpSwiper>
<view class="tabs_wrapper">
<u-tabs :list="tabsData.list" @click="tabsChange" :activeStyle="tabsData.activeStyle"
:inactiveStyle="tabsData.inactiveStyle" lineHeight="0" keyName="cate_name"></u-tabs>
<u-tabs :list="tabsData.list" @click="tabsChange" lineColor="#F84221" keyName="cate_name"></u-tabs>
</view>
<view class="goods">
@ -53,29 +52,12 @@
<script>
import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
import zbpSwiper from '@/components/zbpSwiper'
import {
getSlideAPI
} from '@/api/lihai.js'
import {
graphicLstApi,
getTopicList,
graphicStartApi
} from '@/api/community.js'
import {
getIndexData,
getDiy
} from '@/api/api.js'
import {
getGeocoder,
merClassifly
} from '@/api/store.js';
import {
getArea,
getStreet
} from '@/api/article.js';
import {
Toast
} from '@/libs/uniApi'
import { getSlideAPI } from '@/api/lihai.js'
import { graphicLstApi, getTopicList, graphicStartApi } from '@/api/community.js'
import { getIndexData, getDiy } from '@/api/api.js'
import { getGeocoder, merClassifly } from '@/api/store.js';
import { getArea, getStreet } from '@/api/article.js';
import { Toast } from '@/libs/uniApi'
export default {
components: {
mTabbar,
@ -99,18 +81,7 @@
},
tabsData: {
list: [],
tabsActive: 0,
activeStyle: {
color: '#fff',
fontWeight: 'bold',
borderRadius: '100px',
backgroundColor: '#F84221',
padding: '15.79rpx 21.05rpx'
},
inactiveStyle: {
color: '#000',
padding: '15.79rpx 21.05rpx',
}
tabsActive: 0
},
where: {
category_id: 0,
@ -232,7 +203,12 @@
this.tabsData.tabsActive = item.index
if (item.index == 1) {
uni.navigateTo({
url: '/pages/short_video/nvueSwiper/index?id=' + '136'
// #ifdef MP || H5
url: '/pages/short_video/nvueSwiper/index?id=' + this.cateGoods[0].community_id
// #endif
// #ifdef APP
url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}`
// #endif
})
}
},
@ -420,13 +396,8 @@
.tabs_wrapper {
width: 694.74rpx;
margin: 0 auto;
margin-top: 0;
margin: 38.6rpx auto;
margin-bottom: 21.05rpx;
::v-deep .u-tabs__wrapper__nav__item {
padding: 0 !important;
}
}
.empty_wrapper {

5
pages/plant_release/index.vue
View File

@ -1,5 +1,10 @@
<template>
<!-- #ifdef MP -->
<view :style="viewColor" style="padding-top: 180rpx;">
<!-- #endif -->
<!-- #ifdef APP || H5 -->
<view :style="viewColor" style="padding-top: 80rpx;">
<!-- #endif -->
<form @submit="formSubmit" report-submit='true'>
<view class="release_content">
<view v-if="community_app_switch.length == 2" class="release_tab acea-row">

396
pages/short_video/appSwiper/index.nvue
View File

@ -27,6 +27,9 @@
<view class="items" @click.stop="navTap(1)">
<text class="tName" :class="currentNav==1?'on':''">推荐</text>
</view>
<view class="items" @click.stop="navTap(3)">
<text class="tName" :class="currentNav==3?'on':''">列表</text>
</view>
</view>
<view class="noVideo acea-row row-center-wrapper" v-if="!dataList.length && !loadVideo">
<view>
@ -34,7 +37,7 @@
<text class="tips">暂无短视频内容哦~</text>
</view>
</view>
<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
<view v-if="currentNav !== 3" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
<!--
1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
@ -44,11 +47,15 @@
（1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
（2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
-->
<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false" ref="listBox" :pagingEnabled="true" :scrollable="true">
<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false" ref="listBox"
:pagingEnabled="true" :scrollable="true">
<!-- 刷新模块 -->
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
:display="refreshing ? 'show' : 'hide'">
<loading style="background-color: #FFFFFF;">
<image src="../static/img/index/logins.gif" :style="'width: 80upx; height: 40upx; margin-top: 80upx; margin-bottom: 30upx; margin-left: '+ (windowWidth - 200) +'px;'"></image>
<image src="../static/img/index/logins.gif"
:style="'width: 80upx; height: 40upx; margin-top: 80upx; margin-bottom: 30upx; margin-left: '+ (windowWidth - 200) +'px;'">
</image>
</loading>
</refresh>
<!-- 循环数据 -->
@ -87,23 +94,10 @@
（6）在 timeupdate 方法里加入，if(index == this.k){把里面的加一个总的判断}
3.其他的下面有详解
-->
<video
:ref="'item'+i"
:id="item.community_id"
:loop="true"
:autoplay="i == k"
:src="item.video_link"
:muted="item.isplay"
:enable-progress-gesture="false"
:page-gesture="false"
:controls="false"
:show-loading="true"
:show-fullscreen-btn="false"
:show-center-play-btn="false"
:style="boxStyle"
:object-fit="object_fit"
@timeupdate="timeupdate($event,i)"
></video>
<video :ref="'item'+i" :id="item.community_id" :loop="true" :autoplay="i == k" :src="item.video_link"
:muted="item.isplay" :enable-progress-gesture="false" :page-gesture="false" :controls="false"
:show-loading="true" :show-fullscreen-btn="false" :show-center-play-btn="false" :style="boxStyle"
:object-fit="object_fit" @timeupdate="timeupdate($event,i)"></video>
</view>
<!-- 直接用 view 就行了，一样是可以覆盖原生组件的 -->
<!-- 这个是暂停时出现的图标 -->
@ -121,7 +115,8 @@
<text class="title">正在审核，内容仅自己可见</text>
</view>
<view class="status_info">
<text class="refusal">{{(item.status == -1 || item.status == -2) ? item.refusal : '发布的内容审核通过后，将在首页展示！'}}</text>
<text
class="refusal">{{(item.status == -1 || item.status == -2) ? item.refusal : '发布的内容审核通过后，将在首页展示！'}}</text>
</view>
</view>
<!-- 最底下的文字部分 -->
@ -142,17 +137,20 @@
</view>
</view>
<view v-if="item.relevance.length > 0 && k==i" class="product">
<scroll-view class="scroll-view" scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation show-scrollbar="true">
<scroll-view class="scroll-view" scroll-x="true" style="white-space: nowrap; display: flex;"
scroll-with-animation show-scrollbar="true">
<view class="product-item" v-for="(goods,idx) in item.relevance" :key="idx">
<view v-if="goods.spu" class="item-count acea-row" @click="goDetail(goods.spu)">
<view class="picture">
<image class="image" :src="goods.spu.image"></image>
</view>
<view class="product-text">
<text class="name line1" v-if="goods.spu && goods.spu.store_name.length>=12">{{goods.spu.store_name.slice(0,12)}}...</text>
<text class="name line1"
v-if="goods.spu && goods.spu.store_name.length>=12">{{goods.spu.store_name.slice(0,12)}}...</text>
<text class="name line1" v-else>{{goods.spu && goods.spu.store_name}}</text>
<view class="product-price">
<view class="price"><text class="sm">¥</text><text class="money">{{goods.spu.price}}</text></view>
<view class="price"><text class="sm">¥</text><text class="money">{{goods.spu.price}}</text>
</view>
<text class="buy-btn">购买</text>
</view>
</view>
@ -161,7 +159,8 @@
</scroll-view>
</view>
<navigator v-if="item.topic" hover-class="none" class="product_cate" :url="'/pages/plantGrass/plant_search_list/index?id='+item.topic.topic_id">
<navigator v-if="item.topic" hover-class="none" class="product_cate"
:url="'/pages/plantGrass/plant_search_list/index?id='+item.topic.topic_id">
<view class="pro-view">
<text class="icon">#</text><text class="text">{{item.topic.topic_name}}</text>
</view>
@ -169,24 +168,31 @@
</view>
<view class="userInfo">
<!-- 1.头像 -->
<navigator v-if="userInfo.uid != item.author.uid" hover-class="none" :url="'/pages/plantGrass/plant_user/index?id='+item.uid" class="pictrue">
<image class="userAvatar" :src="item.author.avatar || '/static/images/f.png'" mode="aspectFill"></image>
<view v-if="!item.is_fans || userInfo.uid == 0" class="guanzhu" @click.stop="followAuthor(item)"><text class="iconfont icon-shangpinshuliang-jia">+</text></view>
<navigator v-if="userInfo.uid != item.author.uid" hover-class="none"
:url="'/pages/plantGrass/plant_user/index?id='+item.uid" class="pictrue">
<image class="userAvatar" :src="item.author.avatar || '/static/images/f.png'" mode="aspectFill">
</image>
<view v-if="!item.is_fans || userInfo.uid == 0" class="guanzhu" @click.stop="followAuthor(item)"><text
class="iconfont icon-shangpinshuliang-jia">+</text></view>
<view v-else class="yiguanzhu"><text class="iconfont"></text></view>
</navigator>
<!-- 2.点赞 -->
<view @click="cLike(item);" style="margin-top: 5px;" :class="{'likeNumActive':item.relevance_id}">
<image v-if="item.relevance_id" src="../static/img/index/xin.png" style="width: 32px; height: 32px;"></image>
<image v-if="!item.relevance_id" src="../static/img/index/xin-2.png" style="width: 32px; height: 32px;"></image>
<image v-if="item.relevance_id" src="../static/img/index/xin.png" style="width: 32px; height: 32px;">
</image>
<image v-if="!item.relevance_id" src="../static/img/index/xin-2.png"
style="width: 32px; height: 32px;"></image>
<text class="info-text">{{item.count_start > 0 ? item.count_start : '点赞'}}</text>
</view>
<!-- 3.评论 -->
<view v-if="community_reply_status == 1 && item.status == 1" class="comment" @click="toComment(item,i)" style="margin-top: 18px;">
<view v-if="community_reply_status == 1 && item.status == 1" class="comment" @click="toComment(item,i)"
style="margin-top: 18px;">
<image src="../static/img/index/evaluate.png" style="width: 54rpx; height: 50rpx;"></image>
<text class="info-text">{{item.count_reply>0 ? item.count_reply : '评论'}}</text>
</view>
<!-- 4.分享 -->
<view v-if="item.status == 1" @click="appShare('WXSceneSession',item.community_id)" style="margin-top: 17px;">
<view v-if="item.status == 1" @click="appShare('WXSceneSession',item.community_id)"
style="margin-top: 17px;">
<image src="../static/img/index/share-fill.png" style="width: 40px; height: 40px;"></image>
<text class="info-text">分享</text>
</view>
@ -201,14 +207,16 @@
</view>
</view>
<!-- 提到的商品 -->
<view v-if="item.relevance.length>0 && k==i" @click="openMore(item)" class="mention" style="opacity: 0.9; margin-top: 18px;">
<view v-if="item.relevance.length>0 && k==i" @click="openMore(item)" class="mention"
style="opacity: 0.9; margin-top: 18px;">
<image class="image" src="../static/img/index/collection.png"></image>
<text class="count">{{item.relevance.length}}</text>
</view>
</view>
<view v-if="showManage" class="manage">
<view class="manage-gou"></view>
<navigator hover-class="none" :url="'/pages/plantGrass/plant_release/index?id='+item.community_id+'&type=2'" class="items">
<navigator hover-class="none"
:url="'/pages/plantGrass/plant_release/index?id='+item.community_id+'&type=2'" class="items">
<image src="../static/img/index/video-edit.png" style="width: 16px; height: 16px;"></image>
<text class="text">编辑</text>
</navigator>
@ -223,43 +231,66 @@
这个是阿里云的东西，至于其他的视频截帧我还没有试过。
-->
<!-- 3.阿里云视频截帧地址：https://help.aliyun.com/document_detail/64555.html -->
<image
v-if="item.isShowimage == true"
:src="item.src+'?x-oss-process=video/snapshot,t_'+ currenttimes +'000,f_jpg'"
mode="aspectFill"
:style="'width: 120upx; height: 160upx; border-radius: 10upx; position: absolute; bottom: '+ (ProgressBarBottom + 160) +'upx; left: '+ (currentPositions - 15) +'px;'"
></image>
<image v-if="item.isShowimage == true"
:src="item.src+'?x-oss-process=video/snapshot,t_'+ currenttimes +'000,f_jpg'" mode="aspectFill"
:style="'width: 120upx; height: 160upx; border-radius: 10upx; position: absolute; bottom: '+ (ProgressBarBottom + 160) +'upx; left: '+ (currentPositions - 15) +'px;'">
</image>
</view>
</div>
</cell>
</list>
</view>
<waterfall class="video-list" v-if="currentNav == 3" column-gap="6" column-count="2" :show-scrollbar="false"
column-width="195px" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
<cell class="goods_item" style="margin-bottom: 10px;" v-for="item in cateGoods" :key="item.uid"
@click="gogogo(item)">
<image class="goods_img" :src="item.image[0]" mode="aspectFill"></image>
<view class="botm">
<text class="title">{{item.title}}</text>
<view class="goods_info">
<view class="l_info">
<image :src="(item.author && item.author.avatar) || '/static/images/f.png'" mode="aspectFill"
class="g_img"></image>
<text class="g_name">{{item.author && item.author.nickname}}</text>
</view>
<view class="nice_box flex_a_c" @click.stop="giveStart(item)">
<text class="iconfont" :class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
<text class="collect">{{item.count_start}}</text>
</view>
</view>
</view>
</cell>
</waterfall>
<!-- <waterfall class="video-list" v-if="currentNav == 3" column-gap="6" column-count="2" column-width="auto"
:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
<cell ref="cellRef" v-for="(item,index) in 10" :key="item.uid" class="goods_item" @click="gogogo(item)">
哈哈哈{{index}}
</cell>
</waterfall> -->
<!--
请前往 douyin-scrollview.nvue 文件查看
已经全部注释
这里就是引入评论插件
-->
<uni-popup type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
<view :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
<view
:style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
<!--
注意：
deleteIOSHeight
deleteAndroidHeight
这两个参数用于控制评论等的高度
-->
<douyin-scrollview
ref="comments"
:deleteIOSHeight="36"
:deleteAndroidHeight="15"
:userInfo="userInfo"
@closeScrollview="closeScrollview"
@successFul="pinlunFun"
></douyin-scrollview>
<douyin-scrollview ref="comments" :deleteIOSHeight="36" :deleteAndroidHeight="15" :userInfo="userInfo"
@closeScrollview="closeScrollview" @successFul="pinlunFun"></douyin-scrollview>
</view>
</uni-popup>
<!-- 他提到的宝贝弹窗 -->
<uni-popup type="bottom" ref="pinglunMentioned">
<view :style="'width: '+ windowWidth +'px;background-color: #F5F5F5; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
<view
:style="'width: '+ windowWidth +'px;background-color: #F5F5F5; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
<mentioned ref="mentioned" @close="closePopup" :list="moreList" :uid="authorUid"></mentioned>
</view>
</uni-popup>
@ -284,7 +315,15 @@
import douyinScrollview from '../components/douyin-scrollview/douyin-scrollview.nvue'
import mentioned from '../components/mentioned/mentioned.vue'
import authorize from '@/components/Authorize';
import { videoList, myVideoList, graphicStartApi, followAuthorApi, deletePlantApi, focusArticleLst } from '@/api/community.js';
import {
videoList,
myVideoList,
graphicStartApi,
followAuthorApi,
deletePlantApi,
focusArticleLst,
graphicLstApi
} from '@/api/community.js';
import { HTTP_REQUEST_URL } from '@/config/app.js';
import { getUserInfo } from '@/api/user.js';
export default {
@ -357,6 +396,12 @@
isSatrt: 0,
userUid: 0,
sysHeight: sysHeight,
cateGoods: [],
where: {
category_id: -1,
page: 1,
limit: 10
},
}
},
components: {
@ -379,7 +424,8 @@
this.dataList[old_k].state = 'pause'
console.log('预留第' + (old_k) + '个视频：' + this.dataList[old_k].community_id)
// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
uni.createVideoContext(this.dataList[old_k].community_id, this).pause() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
uni.createVideoContext(this.dataList[old_k].community_id, this)
.pause() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
console.log('已经暂停 --> 第' + (old_k) + '个视频～') //提示
this.dataList[new_k].state = 'play'
this.dataList[new_k].isplay = false
@ -419,9 +465,17 @@
this.get() //这一步，加载视频数据
if (this.isLogin) this.getUserInfo()
},
onReady() {
},
onReady() {},
methods: {
gogogo(item) {
this.videoID = item.community_id
this.navTap(1)
},
async getGoods() {
const { data } = await graphicLstApi(this.where)
data.list.length > 0 ? this.loadVideo = true : this.loadVideo = false
this.cateGoods = data.list
},
goBack: function() {
uni.navigateBack();
},
@ -431,7 +485,17 @@
this.k = 0;
this.page = 1;
this.dataList = [];
n == 1 ? this.get() : this.getFocusList()
switch (n) {
case 1:
this.get()
break;
case 2:
this.getFocusList()
break;
case 3:
this.getGoods()
break;
}
},
pinlunFun(e) {
this.dataList[e]['count_reply']++
@ -575,7 +639,11 @@
that.loadVideo = false
that.getVideoData(res.data.list);
}).catch(err => {
return uni.showToast({ title: err, icon: 'none', duration: 2000 });
return uni.showToast({
title: err,
icon: 'none',
duration: 2000
});
}) :
videoList({
page: that.page,
@ -597,6 +665,7 @@
page: that.page,
limit: that.limit,
}).then(res => {
that.loadVideo = false
that.getVideoData(res.data.list)
}).catch(err => {
return uni.showToast({
@ -657,7 +726,8 @@
middle = parseInt(theTime / 60);
theTime = parseInt(theTime % 60);
}
this.changeTime = `${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
this.changeTime =
`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
},
timeupdate(event, index) { //计算滑块当前位置，计算当前百分小数
if (index == this.k) {
@ -672,7 +742,8 @@
middle = parseInt(theTime / 60);
theTime = parseInt(theTime % 60);
}
this.changeTime = `${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
this.changeTime =
`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
//自动切换视频
if (this.isAutoplay) { //true,代表自动播放
if (Math.round(currenttime) == this.timeNumber - 1) {
@ -716,7 +787,8 @@
this.showManage = false;
this.isDragging = event.isDragging;
if (!event.isDragging) { //isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
var i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight + 1))//先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
var i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight +
1)) //先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
if (i !== this.k) { //这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
if (uni.getSystemInfoSync().platform == 'ios') {
this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
@ -734,7 +806,7 @@
}
},
get() {
if(!this.loadVideo) return
// if(!this.loadVideo) return
this.loadVideo = true
// 这个方法主要就是用来第一次进入视频播放时用来处理的
this.isUser ?
@ -923,6 +995,117 @@
}
</script>
<style lang="scss" scoped>
// .video-list{
// padding: 200rpx 28.07rpx 0 28.07rpx;
// display: flex;
// flex-direction: row; // 可以生效
// direction: ltr;
// flex-wrap: wrap;
// justify-content: space-between;
// .goods_item{
// height: 87.72upx;
// background-color: #999;
// }
// }
.video-list {
// margin: 0 auto;
// width: 750rpx;
padding: 200rpx 28.07rpx 0 28.07rpx;
/* #ifdef MP */
padding-top: 200rpx;
/* #endif */
background-color: #000000;
.goods_item {
width: 342.11rpx;
height: 491.23rpx;
border-radius: 8px;
overflow: hidden;
background-color: #000;
display: flex;
flex-direction: column;
padding-bottom: 10px;
.goods_img {
width: 342.11rpx;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 294.74rpx;
}
.botm {
flex: 1;
padding: 0 14.04rpx;
padding-bottom: 21.05rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #fff;
border-radius: 0 0 8px 8px;
.title {
font-size: 26.32rpx !important;
margin: 12px 0;
width: 342.11rpx;
overflow: hidden;
text-overflow: ellipsis;
lines: 2;
}
.goods_info {
display: flex;
flex-direction: row;
direction: ltr;
justify-content: space-between;
.l_info {
flex-direction: row; // 可以生效
direction: ltr;
display: flex;
align-items: center;
}
.g_img {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
.g_name {
font-size: 26.32rpx !important;
margin-left: 8.77rpx;
width: 100.63rpx;
text-overflow: ellipsis;
lines: 1;
}
.nice_box {
flex-direction: row; // 可以生效
direction: ltr;
align-items: center;
.isshow {
color: #FE3530 !important;
}
.iconfont {
font-size: 30rpx;
}
.icon-shoucang1 {
color: #F84221;
}
.collect {
font-size: 24rpx;
margin-left: 5rpx;
}
}
}
}
}
}
.noVideo {
position: fixed;
top: 400rpx;
@ -930,10 +1113,12 @@
width: 750rpx;
flex-direction: row;
justify-content: center;
.pictrue {
width: 414rpx;
height: 256rpx;
}
.tips {
text-align: center;
margin-top: 14rpx;
@ -941,6 +1126,7 @@
color: #999;
}
}
.fixed-head {
flex-direction: row;
justify-content: center;
@ -949,13 +1135,15 @@
left: 0;
top: 70rpx;
height: 86rpx;
.icon-xiangzuo {
margin-left: 10px;
width: 13px;
height: 14px;
width: 16px;
height: 16px;
color: #ffffff;
}
}
.header {
position: fixed;
z-index: 9;
@ -965,21 +1153,29 @@
justify-content: center;
align-items: center;
top: 70rpx;
.items {
margin: 0 30rpx;
.tName {
color: #ffffff;
font-size: 32rpx;
&.on {
font-size: 38rpx;
}
}
}
}
// .container {background: #000000;}
.container {
background-color: #000000;
}
.item {
position: relative;
}
.videoHover {
position: absolute;
top: 0;
@ -989,11 +1185,13 @@
justify-content: center;
align-items: center;
}
.playState {
width: 160rpx;
height: 160rpx;
opacity: 0.2;
}
.video-status {
width: 690rpx;
position: absolute;
@ -1002,25 +1200,30 @@
border-radius: 10rpx;
top: 150rpx;
padding: 30rpx;
.status-title {
flex-direction: row;
align-items: center;
.title {
margin-left: 20rpx;
color: #ffffff;
font-size: 28rpx;
}
}
.refusal {
color: #ffffff;
font-size: 22rpx;
margin: 15rpx 0 0 48rpx;
}
.image {
width: 28rpx;
height: 28rpx;
}
}
.userInfo {
position: absolute;
bottom: 30px;
@ -1028,11 +1231,13 @@
display: flex;
align-items: center;
flex-direction: column;
.pictrue {
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
// margin-bottom: 18rpx;
.guanzhu {
width: 42rpx;
@ -1046,17 +1251,20 @@
position: relative;
top: -20rpx;
left: 3rpx;
.iconfont {
font-size: 30rpx;
color: #fff;
}
}
.yiguanzhu {
width: 42rpx;
height: 42rpx;
}
}
}
.video-my {
position: relative;
align-items: center;
@ -1064,6 +1272,7 @@
flex-direction: row;
}
.video-dian {
position: relative;
width: 33px;
@ -1072,17 +1281,20 @@
justify-content: center;
flex-direction: row;
left: 3px;
.dian {
width: 7px;
height: 7px;
background-color: #fff;
border-radius: 100%;
margin-right: 3px;
&:last-child {
margin-right: 0;
}
}
}
.manage {
width: 115px;
background: #ffffff;
@ -1092,6 +1304,7 @@
bottom: 10px;
right: 60px;
border-radius: 8px;
.manage-gou {
display: flex;
width: 13px;
@ -1103,19 +1316,23 @@
right: -6px;
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
}
.items {
border-bottom: 1px solid #EEEEEE;
padding: 10px 0;
display: flex;
align-items: center;
flex-direction: row;
.text {
color: #282828;
font-size: 13px;
}
&:last-child {
border-bottom-color: transparent;
}
.image {
width: 32rpx;
height: 32rpx;
@ -1123,6 +1340,7 @@
}
}
}
.userAvatar {
border-radius: 500%;
border-style: solid;
@ -1131,38 +1349,48 @@
width: 80rpx;
height: 80rpx;
}
.info-text {
display: flex;
margin-top: 10rpx;
color: #ffffff;
font-size: 22rpx;
text-align: center;
&.likeNumActive {
color: #E93323;
}
}
.likeIco,.shareIco,.commentIco{
.likeIco,
.shareIco,
.commentIco {
width: 60rpx;
height: 60rpx;
margin-top: 15px;
}
.likeNum,.commentNum,.shareTex{
.likeNum,
.commentNum,
.shareTex {
color: #ffffff;
font-size: 30rpx;
text-align: center;
margin: 5px;
}
.mention {
width: 46px;
height: 46px;
position: relative;
.image {
width: 30px;
height: 30px;
position: absolute;
right: 8px;
}
.count {
padding: 2px 6px;
background: #fff;
@ -1177,6 +1405,7 @@
font-size: 10px;
}
}
.content {
width: 325px;
position: absolute;
@ -1186,20 +1415,25 @@
flex-direction: column;
justify-content: flex-start;
color: #ffffff;
.cart {
height: 48rpx;
flex-direction: row;
.cartName {
font-size: 24rpx;
color: #fff;
}
}
.product {
flex-direction: row;
margin-top: 27rpx;
.scroll-view {
flex-direction: row;
}
.product-item {
width: 444rpx;
height: 136rpx;
@ -1208,9 +1442,11 @@
padding: 16rpx 15rpx;
margin-right: 30rpx;
}
.swiper {
width: 500rpx !important;
height: 136rpx !important;
.swiper-count {
width: 444rpx !important;
height: 136rpx !important;
@ -1218,44 +1454,55 @@
border-radius: 12rpx;
padding: 16rpx 15rpx;
}
.swiper-item {
flex-direction: row;
}
}
.item-count {
flex-direction: row;
justify-content: space-between;
.picture {
width: 104rpx;
height: 104rpx;
border-radius: 10rpx;
.image {
width: 104rpx;
height: 104rpx;
border-radius: 10rpx;
}
}
.product-text {
width: 286rpx;
justify-content: space-between;
.name {
font-size: 24rpx;
width: 286rpx;
color: #fff;
}
.product-price {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.price {
display: flex;
flex-direction: row;
.sm,.money{
.sm,
.money {
color: #ffffff;
font-size: 24rpx;
}
}
.buy-btn {
padding: 6rpx 20rpx;
display: flex;
@ -1271,9 +1518,11 @@
}
}
}
.product_cate {
margin: 20rpx 0;
flex-direction: row;
.pro-view {
flex-direction: row;
align-items: center;
@ -1282,10 +1531,12 @@
line-height: 40rpx;
border-radius: 29rpx;
border: 1rpx solid #ffffff;
.text {
color: #ffffff;
font-size: 24rpx;
}
.icon {
font-size: 26rpx;
font-weight: bold;
@ -1294,30 +1545,37 @@
}
}
}
.timeCon {
flex-direction: row;
align-items: center;
.userName {
font-size: 30rpx;
color: #ffffff;
}
}
.words {
margin-top: 20rpx;
.close {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-right: 20rpx;
.imgClose {
width: 18rpx;
height: 10rpx;
margin-left: 10rpx;
}
}
.wordsCon {
position: relative;
.more {
position: absolute;
bottom: 0;
@ -1326,6 +1584,7 @@
color: #ffffff;
font-weight: bold;
}
.img {
width: 18rpx;
height: 10rpx;
@ -1335,16 +1594,19 @@
right: 20rpx;
}
}
.info {
color: #fff;
font-size: 28rpx;
}
.more {
font-size: 26rpx;
color: #ffffff;
font-weight: bold;
}
}
.root {
background-color: #000000;
}

2
pages/supply_chains/supply_chains.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="Circle_friends">
<view class="circle_friends_wrapper">
<zbpSwiper></zbpSwiper>
<zbpSwiper :isSelectPlace="true" @selectPlce="selectPlce"></zbpSwiper>
<view class="shop_wrapper">
<navigator class="l_yun" hover-class="none"
:url="`/pages/nongKe/supply_chain/supplier?type_id=10&street_id=${street_id}`">