123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834 |
- <template>
- <view class="page">
- <!-- <nav-bar type="transparentFixed"></nav-bar> -->
- <swiper class="video_swiper" vertical circular :skip-hidden-item-layout="true" duration="300"
- @change="onSwiperChange">
- <swiper-item v-for="(item,index) of videoObj" :key="index" :data-index="index">
- <short-video :play="swiperIndex == index" :src="item.video_url" :index="index" :progress="progress"
- :progressValue="progressValue"></short-video>
- <!-- <view class="content_bottom_box">
- <view class="content_goods_info">
- </view>
- <text class="content_user_name">@{{item.video_title}}</text>
- <text class="content_description">{{item.video_desc}}~</text>
- </view> -->
- <view class="sheet-conent">
- <block v-if="item.close">
- <view v-if="item.jump_state==1">
- <view style=" flex-direction: row;align-items: center;" v-if="item.jump_type==1"
- :style="'width:'+jump_width+'px'+';'+'height:'+jump_height+'px'"
- @click="href(item.jump_web)"
- class="flex-y-center flex-row sheet-conent-ad sheet-conent-ad-home">
- <image class="sheet-conent-ad-icon"
- :style="'width:'+icon_width+'px'+';'+'height:'+icon_width+'px'"
- :src="URL+item.jump_img" mode=""></image>
- <image @click.stop="del(index)" class="del" src="../../static/images/shanchu.png"
- mode=""></image>
- <view class="sheet-conent-ad-text" :style="'width:'+text_width+'px'">
- <view class="text-1" style="display: block;">
- {{item.jump_title}}
- </view>
- <view class="sheet-conent-ad-desc text-2" style="display: block;">
- {{item.jump_cont}}
- </view>
- </view>
- </view>
- <view v-else class="sheet-conent-ad sheet-conent-ad-home">
- <view v-html="item.wxOpenTags">
- </view>
- <image @click.stop="del(index)" class="del" src="../../static/images/shanchu.png"
- mode=""></image>
- </view>
- </view>
- </block>
- <block v-if="item.video_state==1">
- <view class="sheet-conent-title text-1" style="display: block;">
- {{item.video_title?'@':''}}{{item.video_title}}
- </view>
- <view class="sheet-conent-desc text-2" style="display: block;">
- {{item.video_desc}}
- </view>
- </block>
- </view>
- <view class="right_suspended">
- <!-- <image class="sheet-avatar" :src="video_face" mode=""></image> -->
- <view class="suspended_features_item" v-if="item.video_zan">
- <text class="iconfont animate red iconxihuan"></text>
- <text class="suspended_features_text">{{item.video_zan}}</text>
- <!-- <text class="suspended_features_dot">{{item.video_zan}}</text> -->
- </view>
- <view class="suspended_features_item" v-if="item.video_tel" @click="phone(item.video_tel)">
- <text class="iconfont iconlianxi"></text>
- <text class="suspended_features_text">{{item.video_ping}}</text>
- </view>
- <view class="suspended_features_item" v-if="item.video_zan" @click="share(index,item.card_num)">
- <text class="iconfont iconzhuanfa"></text>
- <text class="suspended_features_text">分享</text>
- </view>
- </view>
- </swiper-item>
- </swiper>
- <view class="model" @click="close_share" v-if="isdown">
- <view class="model-home">
- <image class="model-img" src="/static/images/jt.png" />
- <view>1.请点击右上角
- <block>选择分享好友</block>
- </view>
- </view>
- <view class="model-close">
- 2.点击关闭遮盖层
- </view>
- </view>
- <view class="progress_drag" @touchstart="onTouchstart" @touchmove="onTouchmove" @touchcancel="onTouchcancel"
- @touchend="onTouchend"></view>
- <view class="model_s flex-center" v-if="hj_state" @click="closehj">
- <view class="">
- <view class="wave ripple danger">
- <view class="circle"></view>
- <view class="circle"></view>
- <view class="circle"></view>
- <view class="circle"></view>
- <view class="circle"></view>
- <view class="circle"></view>
- <view class="model_s_pa flex-center">
- <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
- </view>
- </view>
- <view class="model_s_text flex-center" style="text-align: center;">
- 开始播放
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import shortVideo from "@/components/module/short_video.vue";
- // #ifdef H5
- import getWXSign from "@/static/js/config.js";
- // #endif
- export default {
- components: {
- shortVideo,
- },
- data() {
- return {
- swiperIndex: -1,
- progress: 10000,
- progressValue: 0,
- shareShow: false,
- videoObj: [],
- page: 1,
- URL: getApp().globalData.URL,
- close: true,
- wxOpenTags: "",
- jump_width: "",
- jump_height: "",
- isdown: false,
- icon_width: "",
- // icon_height:"",
- text_width: "",
- hj_state: true,
- card_num: '',
- };
- },
- onReachBottom() {
- console.log("到底了")
- this.http();
- },
- //第一次加载
- onLoad(e) {
- // 隐藏原生的tabbar
- // uni.hideTabBar();
- let systemInfo = uni.getSystemInfoSync();
- this.screenWidth = systemInfo.screenWidth;
- var windowWidth = uni.getSystemInfoSync().windowWidth, // 获取当前窗口的宽度
- windowHeight = uni.getSystemInfoSync().windowHeight; // 获取当前窗口的高度
- this.jump_width = windowWidth / 1.4;
- this.jump_height = (windowWidth / 1.4) / 3.1;
- this.icon_width = this.jump_height - 20;
- this.text_width = this.jump_width - this.icon_width - 16
- // #ifdef H5
- getWXSign().then(res => {
- console.log(res)
- })
- // #endif
- function getUrlParam(paraName) {
- let url = window.location.href;
- var arrObj = url.split("?");
- if (arrObj.length > 1) {
- var arr;
- for (var i = 0; i < arrObj.length; i++) {
- arr = arrObj[i].split("=");
- console.log(arr)
- if (arr != null && arr[0] == paraName) {
- return arr[1];
- }
- }
- return "";
- } else {
- return "";
- }
- }
- // #ifdef H5
- this.card_num = getUrlParam('card_num') || "";
- // #endif
- this.http();
- },
- //页面显示
- onShow() {
- // 隐藏原生的tabbar
- // uni.hideTabBar();
- // #ifdef APP-PLUS
- uni.showModal({
- title: "提示",
- content: "APP体验效果不好,暂没做兼容",
- showCancel: false
- });
- // #endif
- },
- //方法
- methods: {
- closehj(e) {
- this.hj_state = false;
- this.swiperIndex = 0;
- },
- href(jump_web) {
- location.href = jump_web;
- },
- share(index, code) {
- this.isdown = true;
- // #ifdef H5
- this.videoObj[index]
- let desc = {
- wx_title: this.videoObj[index].wx_title,
- wx_desc: this.videoObj[index].wx_desc,
- wx_img_url: this.videoObj[index].wximg_url,
- }
- console.log(desc, code, "desc")
- this.share_desc(desc, code);
- // #endif
- },
-
- close_share() {
- this.isdown = false;
- },
- del(index) {
- this.videoObj[index].close = false;
- // this.close = false;
- },
- phone(video_tel) {
- uni.makePhoneCall({
- phoneNumber: video_tel //仅为示例
- });
- },
- http() {
- this.request({
- url: "Videofuneng/videolist",
- data: {
- token: uni.getStorageSync("token"),
- page: this.page,
- limit: 20,
- card_num: this.card_num,
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- for (let i of res.data) {
- i.close = true;
- if (i.jump_type == 2) {
- let jump_title = i.jump_title,
- jump_img = this.URL + i.jump_img,
- jump_cont = i.jump_cont,
- xcx_original_id = i.xcx_original_id,
- xcx_link = i.xcx_link;
- console.log("xcx_original_id", xcx_original_id)
- var jump_width = this.jump_width;
- var jump_height = this.jump_height;
- var icon_width = this.icon_width;
- var text_width = this.text_width;
- // setTimeout(() => {
- i.wxOpenTags =
- `<wx-open-launch-weapp id="launch-wxapp" username="${xcx_original_id}" path="${xcx_link}" >
- <template>
- <style>
- .flex-y-center {
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- -ms-grid-row-align: center;
- align-items: center;
- }
-
- .sheet-conent-add {
- width: ${jump_width-10}px;
- height:${jump_height}px;
- }
-
- .sheet-conent-ad-home {
- position: relative;
- }
-
- .sheet-conent-ad-icon {
- width: ${icon_width}px;
- height: ${icon_width}px;
- min-width: 60px;
- margin: 0 10px;
- }
- .sheet-conent-ad-text {
- width: ${text_width-10}px;
- }
- .sheet-conent-ad-desc {
- font-size: 12px;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #666666;
- margin-top:5px;
- min-height: 31px;
- }
- .text-1{
- overflow: hidden;
- text-overflow:ellipsis;
- white-space: nowrap;
- }
- </style>
- <div class="flex-y-center sheet-conent-add">
- <img class="sheet-conent-ad-icon" src="${jump_img}" mode=""></img>
- <div class="sheet-conent-ad-text">
- <div class="text-1">
- ${jump_title}
- </div>
- <div class="sheet-conent-ad-desc text-2">
- ${jump_cont}
- </div>
- </div>
- </div>
- </template>
- </wx-open-launch-weapp>`;
- // }, 500);
- }
- }
- this.page = this.page + 1;
- this.videoObj = this.videoObj.concat(res.data);
- let desc = {
- wx_title: "欢迎来到视频交流区",
- wx_desc: "记录美好生活的视频平台",
- wx_img_url: getApp().globalData.URL + "/forward/icon_2.png",
- }
- // #ifdef H5
- this.share_desc(desc, "");
- // #endif
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- },
- share_desc(desc, code) {
- let card_num = code ? code : "";
- let siteroot = this.URL;
- getWXSign().then(r => {
- var imgUrl = desc.wx_img_url;
- console.log(imgUrl, "imgUrl")
- if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
- this.$wx.updateAppMessageShareData({
- title: desc.wx_title, // 分享标题
- desc: desc.wx_desc, // 分享描述
- link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
- imgUrl: imgUrl, // 分享图标
- success: (res) => {
- // 设置成功
- console.log("设置成功", res)
- }
- })
- this.$wx.updateTimelineShareData({
- title: desc.wx_title, // 分享标题
- link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
- imgUrl: imgUrl, // 分享图标
- success: (res) => {
- // 设置成功
- console.log("设置成功", res)
- }
- })
- } else {
- this.$wx.onMenuShareTimeline({
- title: desc.wx_title, // 分享标题
- desc: desc.wx_desc, // 分享描述
- link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
- imgUrl: imgUrl, // 分享图标
- success: (res) => {
- // 设置成功
- console.log("设置成功", res)
- }
- })
- this.$wx.onMenuShareAppMessage({
- title: desc.wx_title, // 分享标题
- desc: desc.wx_desc, // 分享描述
- link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
- imgUrl: imgUrl, // 分享图标
- success: (res) => {
- // 设置成功
- console.log("设置成功", res)
- }
- })
- }
- })
- },
- onPageJump(url) {
- uni.navigateTo({
- url: url
- });
- },
- onSwiperChange(e) {
- this.swiperIndex = e.detail.current;
- console.log(this.swiperIndex)
- if (this.swiperIndex == this.videoObj.length - 1) {
- this.http();
- }
- },
- onTouchstart(e) {
- this.progress = 0;
- },
- // 手指触摸后移动
- onTouchmove(e) {
- //手指当前坐标
- // #ifdef APP-NVUE
- const clientX = e.changedTouches[0].screenX;
- // #endif
- // #ifndef APP-NVUE
- const clientX = e.changedTouches[0].clientX;
- // #endif
- this.progress = parseInt((clientX / this.screenWidth) * 100);
- },
- // 手指触摸动作被打断,如来电提醒,弹窗
- onTouchcancel(e) {
- // #ifdef APP-NVUE
- this.progressValue = parseInt((e.changedTouches[0].screenX / this.screenWidth) * 100);
- // #endif
- // #ifndef APP-NVUE
- this.progressValue = parseInt((e.changedTouches[0].clientX / this.screenWidth) * 100);
- // #endif
- },
- // 手指触摸动作结束
- onTouchend(e) {
- // #ifdef APP-NVUE
- this.progressValue = parseInt((e.changedTouches[0].screenX / this.screenWidth) * 100);
- // #endif
- // #ifndef APP-NVUE
- this.progressValue = parseInt((e.changedTouches[0].clientX / this.screenWidth) * 100);
- // #endif
- }
- },
- //页面隐藏
- onHide() {},
- //页面卸载
- onUnload() {},
- //页面下来刷新
- onPullDownRefresh() {},
- //页面上拉触底
- onReachBottom() {},
- //用户点击分享
- onShareAppMessage(e) {
- return this.wxShare();
- }
- };
- </script>
- <style lang="scss">
- .page {
- background-color: #1a1b20;
- width: 100%;
- position: relative;
- }
- .iconfont {
- font-size: 50rpx;
- }
- .sheet-conent {
- position: absolute;
- z-index: 999;
- left: 50rpx;
- bottom: 100rpx;
- width: 600rpx;
- }
- .sheet-conent-ad {
- width: 530rpx;
- /* 270px */
- height: 168rpx;
- /* 168rpx */
- background: #ffffff;
- border-radius: 8rpx;
- box-shadow: 0px 4rpx 12rpx 0px rgba(208, 208, 208, 0.16);
- margin-bottom: 24rpx;
- padding-right: 20rpx;
- }
- .sheet-conent-ad-home {
- position: relative;
- }
- .sheet-conent-ad-text {
- width: 350rpx;
- }
- .sheet-conent-ad .sheet-conent-ad-icon {
- width: 120rpx;
- height: 140rpx;
- min-width: 120rpx;
- margin: 0 8px;
- }
- .sheet-conent-ad-desc {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #666666;
- margin-top: 10rpx;
- min-height: 62rpx;
- }
- .sheet-conent-title {
- font-size: 36rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- color: #ffffff;
- margin-bottom: 24rpx;
- }
- .sheet-conent-desc {
- font-size: 30rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- color: #ffffff;
- }
- .del {
- position: absolute;
- right: 20rpx;
- top: 8rpx;
- width: 30rpx;
- height: 30rpx;
- /* background: #cbcbcb; */
- border-radius: 1rpx;
- }
- .progress_drag {
- position: absolute;
- bottom: 0rpx;
- left: 0;
- width: 100%;
- padding: 15rpx 0;
- z-index: 5;
- }
- .video_swiper {
- width: 100%;
- height: calc(100vh - var(--window-bottom));
- }
- .video_file {
- width: 100%;
- height: 100%;
- }
- .content_bottom_box {
- position: absolute;
- bottom: 0rpx;
- width: 100%;
- padding: 0 0rpx 40rpx 0rpx;
- background-image: linear-gradient(to, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
- // align-items: flex-start;
- z-index: 1;
- }
- .content_goods_info {
- height: 49rpx;
- // flex-direction: row;
- align-items: center;
- background-color: rgba($color: #000000, $alpha: 0.4);
- padding: 0 12rpx;
- margin: 0 182rpx 0 40rpx;
- }
- .content_goods_info_image {
- width: 24rpx;
- height: 24rpx;
- }
- .content_goods_info_text {
- font-size: 24rpx;
- color: #ffffff;
- margin-left: 12rpx;
- }
- .content_user_name {
- font-size: 36rpx;
- color: #ffffff;
- font-weight: bold;
- margin: 70rpx 182rpx 0 40rpx;
- }
- .content_description {
- font-size: 28rpx;
- color: #ffffff;
- margin: 30rpx 182rpx 0 40rpx;
- }
- .right_suspended {
- position: fixed;
- right: 30rpx;
- bottom: 280rpx;
- align-items: center;
- z-index: 999
- }
- .suspended_user_info {
- position: relative;
- }
- .suspended_user_info_image {
- width: 120rpx;
- height: 120rpx;
- border: solid 2rpx #ffffff;
- border-radius: 50%;
- }
- .suspended_user_info_icon {
- width: 40rpx;
- height: 40rpx;
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%) translateY(50%);
- }
- .suspended_features_item {
- align-items: center;
- position: relative;
- margin-top: 60rpx;
- color: #FFFFFF;
- }
- .suspended_features_icon {
- width: 48rpx;
- height: 48rpx;
- }
- .suspended_features_text {
- margin-top: 12rpx;
- font-size: 28rpx;
- color: #ffffff;
- }
- .suspended_features_dot {
- font-size: 20rpx;
- color: #ffffff;
- position: absolute;
- top: -10rpx;
- right: 0;
- transform: translateX(50%);
- height: 24rpx;
- background-color: #ff3682;
- border-radius: 12rpx;
- line-height: 24rpx;
- padding: 0 9rpx;
- }
- .model {
- position: fixed;
- width: 100%;
- height: 100%;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- margin: auto;
- z-index: 9999;
- background: rgba(0, 0, 0, 0.5);
- font-size: 18px;
- }
- .model-home {
- width: 135px;
- height: 100px;
- position: fixed;
- right: 24px;
- top: 32px;
- text-align: center;
- color: #FFFFFF;
- }
- .model-close {
- width: 100%;
- height: 100px;
- position: fixed;
- right: 24px;
- top: 200px;
- text-align: right;
- color: #FFFFFF;
- }
- .model-img {
- width: 50px;
- height: 50px;
- }
- .model_s {
- height: 100%;
- width: 100%;
- position: fixed;
- z-index: 999;
- left: 0;
- top: 0;
- background: rgba(0, 0, 0, 0.5);
- }
- .model_s_pa {
- position: absolute;
- width: 300rpx;
- height: 300rpx;
- }
- .model_s_sz {
- width: 160rpx;
- height: 160rpx;
- // margin-top: 52rpx;
- // margin-left: 24rpx;
- margin: 0 auto;
- margin-top: 72rpx;
- margin-left: 86rpx;
- }
- .model_s_text {
- font-size: 40rpx;
- color: #FFFFFF;
- }
- .container_title {
- font-size: 48rpx;
- font-family: Source Han Sans CN, Source Han Sans CN-Medium;
- margin-top: 90rpx;
- padding: 0 20rpx;
- }
- /************以下为具体实现************/
- .wave {
- position: relative;
- width: 300rpx;
- height: 300rpx;
- text-align: center;
- font-size: 28rpx;
- margin: 0 auto;
- }
- .wave .circle {
- position: absolute;
- border-radius: 50%;
- opacity: 0;
- }
- /* 波纹效果 */
- .wave.ripple .circle {
- width: calc(100% - 6px);
- /* 减去边框的大小 */
- height: calc(100% - 6px);
- /* 减去边框的大小 */
- border: 3px solid #fff;
- }
- .wave.ripple .circle:first-child {
- animation: circle-opacity 2s infinite;
- }
- .wave.ripple .circle:nth-child(2) {
- animation: circle-opacity 2s infinite;
- animation-delay: 0.3s;
- }
- .wave.ripple .circle:nth-child(3) {
- animation: circle-opacity 2s infinite;
- animation-delay: 0.6s;
- }
- .wave.ripple .circle:nth-child(4) {
- animation: circle-opacity 2s infinite;
- animation-delay: 0.8s;
- }
- .wave.ripple .circle:nth-child(5) {
- animation: circle-opacity 2s infinite;
- animation-delay: 1s;
- }
- .wave.ripple .circle:nth-child(6) {
- animation: circle-opacity 2s infinite;
- animation-delay: 1.2s;
- }
- .wave.ripple.danger {
- color: #FFFFFF;
- }
- .wave.ripple.danger .circle {
- border-color: #FFFFFF;
- }
- .wave.ripple.warning {
- color: orange;
- }
- .wave.ripple.warning .circle {
- border-color: orange;
- }
- @keyframes circle-opacity {
- from {
- opacity: 1;
- transform: scale(0);
- }
- to {
- opacity: 0;
- transform: scale(1);
- }
- }
- </style>
|