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' } from '@/api/api.js'
import { getGeocoder } from '@/api/store.js'; import { getGeocoder } from '@/api/store.js';
import { import { mapGetters } from 'vuex'
mapGetters
} from 'vuex'
export default { export default {
props: { props: {
isSelectPlace: { isSelectPlace: {
@ -149,7 +147,8 @@
console.log(res) console.log(res)
this.detaile_address = res.data.address; this.detaile_address = res.data.address;
this.location_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 => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err, title: err,

36
config/app.js
View File

@ -8,26 +8,26 @@ let httpApiTwo
let httpApiThree let httpApiThree
// 网络接口修改此字符 小程序域名要求https // 网络接口修改此字符 小程序域名要求https
// let httpApi = 'http://192.168.31.110:8324' //测试 // 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 = 'https://shop.lihaink.cn' //生产
// httpApi = 'http://192.168.0.222:8324' //生产
httpApiTwo = 'https://nk.lihaink.cn' //生产 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 // 聊天接口修改此字符 小程序聊天要求wss 例如：wss://mer.crmeb.net
// let wsApi = 'ws://192.168.3.20:8324' // let wsApi = 'ws://192.168.3.20:8324'

59
pages/home/index.vue
View File

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

5
pages/plant_release/index.vue
View File

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

2
pages/supply_chains/supply_chains.vue
View File

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