- uniapp 编译小程序 video 组件层级过高无法控制问题如何解决?
<template> <view class="content"> <!-- 运费 --> <u-popup :show="show" :round="18" mode="center"> <calcCost ref="costRef" :obj="obj" @closeBtn="closeBtn" @shut="shut"></calcCost> </u-popup> <view class="main" :style="{height:`calc(100vh - ${paddingBottomHeight+statusBarHeight+140}rpx)`,marginTop:statusBarHeight+'rpx'}"> <view class="top"> <scroll-view scroll-y="true" @scrolltolower="refresh()"> <template v-if="role == 1"> <view class="video-back" v-if="!obj.video && list.length == 0"> <view style="width: 100%;" @click="openUpload('PUT')"> <view class="tip" style="width: 100%;text-align: center;margin-top: 100rpx;"> 拍摄或上传视频(非必选) </view> <image class="capture" src="https://car-auction.oss-cn-shanghai.aliyuncs.com/source/fault/capture.png"> </image> </view> </view> <view class="video-back" v-else> <view v-if="!playFlag"> <view class="img-item"> <video v-if="obj.video" class="img-one" :src="imgUrl + obj.video" :controls="false" :show-progress="false" :show-center-play-btn="false" object-fit="cover" @click="player(obj,-1)"> </video> <image v-else class="img-one" src="https://car-auction.oss-cn-shanghai.aliyuncs.com/source/fault/capture.png" @click="openUpload('PUT')"></image> </view> <view class="video-item" v-for="(video, i) in list" :key="i"> <view class="video-one"> <video class="video-real" :src="imgUrl+video.path" :controls="false" :show-progress="false" :show-center-play-btn="false" object-fit="cover" @click="player(video, i)"> </video> <text class="cnt">{{video.cnt}}</text> </view> </view> </view> <view class="playVideo" v-else> <video :x5-playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" playsinline="true" :src.sync="imgUrl + param.path" :show-loading="true" :custom-cache="false" class="playOne" id="myvideo" autoplay="autoplay" :controls="false" :show-progress="false" :show-center-play-btn="false" object-fit="contain" loop> <cover-view class="watermark"> <text>已选择</text> </cover-view> <cover-view class="ctn">{{obj.videoCnt }}</cover-view> </video> <cover-view class="videoCloseBut" :style="{top:top+'rpx'}"> <cover-image @click="videoClose()" class="coverImg" src="https://car-auction.oss-cn-shanghai.aliyuncs.com/source/fault/video_close.png"> </cover-image> </cover-view> </view> </view> </template> <template v-if="role == 2"> <view v-if="!obj.video" class="nv"> <image mode="aspectFill" class="car-logo" :src="imgUrl+obj.icon"></image> </view> <video v-else :custom-cache="false" class="video-img" id="myvideo" objectFit="cover" autoplay="autoplay" :controls="false" :show-progress="false" :show-center-play-btn="false" :src.sync="imgUrl+obj.video" loop> <text class="ctn">{{obj.videoCnt }}</text> </video> </template> </scroll-view> </view> <view class="center"> <view class="title"> <text>车辆信息</text> </view> <view class="col"> <view class="label">车型:</view> <view class="cont">{{category ||'无'}}</view> </view> <view class="row"> <view class="left"> <view class="label">初登日期:</view> <view class="cont"> <text class="">{{format(obj.recordDate || '') || '无'}}</text> </view> </view> <view class="right"> <view class="label">所有人性质:</view> <view class="cont"> <text>{{obj.ownerNature || '无'}}</text> </view> </view> </view> <view class="row"> <view class="left"> <view class="label">使用性质:</view> <view class="cont"> <text>{{obj.carNature || '无'}}</text> </view> </view> <view class="right"> <view class="label">停放地点:</view> <view class="cont"> <text> {{address || '无'}}</text> </view> </view> </view> <view class="row"> <view class="left"> <view class="label">过户保证金:</view> <view class="cont"> {{obj.deposit || '无'}} </view> </view> <view class="right"> <view class="label">销售价:</view> <view class="cont price">{{obj.sellPrice ? obj.sellPrice+'.xx万': '---'}}</view> </view> </view> <view class="col"> <view class="label">备注:</view> <view class="cont">{{obj.remark || '无'}}</view> </view> </view> <view class="bot"> <view class="title"> <text>详细图片</text> <!-- <button @click="lookOut">点击查看</button> --> </view> <view class="img-box" v-for="(itm,inx) in imgList" :key="inx"> <view class="type">{{itm.name}}</view> <view class="img-row"> <template v-if="itm.list.length > 0"> <view class="box" v-for="(v,i) in itm.list" :key="i"> <image class="img other" mode="aspectFill" :src="imgUrl+v" @click="review(itm.list,i)"> </image> </view> </template> <template v-else> <view class="none"> <text>无</text> </view> </template> </view> </view> </view> </view> <tabBar :first="{name:'计算运费',img:'cyan',bool:false}" @getInx="cost"></tabBar> </view> </template> <script setup> const app = getApp(); import { onMounted, reactive, toRefs, ref, computed } from 'vue'; import { request, uploadVideo, debounce } from '@/utils/index.js'; import { onLoad } from '@dcloudio/uni-app'; import calcCost from './children/cost.vue'; const costRef = ref(null); onLoad((e) => { console.log(pageData.role); getID(); init(e.id); }); const format = (i) => { if (!i) return '---'; let time = new Date(i), year = time.getFullYear(), month = time.getMonth() + 1, day = time.getDate(); month = month > 9 ? month : ('0' + month); day = day > 9 ? day : ('0' + day); return year + '-' + month + '-' + day; } const review = (e, i) => { uni.previewImage({ current: i, urls: e.map(v => pageData.imgUrl + v) }); } const player = (v, i) => { if (i == -1) { pageData.param.isSelf = true; pageData.param.path = v.video; pageData.params.ids = v.videoId; } else { pageData.param.isSelf = false; pageData.param.path = v.path; pageData.param.ids = v.id; } pageData.playFlag = true; } const cost = (i) => { if (i == 0) { pageData.show = true; costRef.value.init(); } if (i == 3 && pageData.role == 1) { let { isSelf, path } = pageData.param; if (!isSelf && path != '') { modify('POST'); } } } const init = (id) => { pageData.param.id = id; request('/app/fc/detail', 'GET', { carId: id, openId: uni.getStorageSync("sale_openId") }).then(res => { if (res.code == '200') { let v = res.data; pageData.obj = v; if (v.sellPrice) v.sellPrice = Math.floor(v.sellPrice / 10000); pageData.category = v.brandName + v.seriesName + v.modelName + v.liter; pageData.address = v.province + v.city + v.area; if (v.video) { pageData.param.path = v.video; pageData.playFlag = true; pageData.param.isSelf = true; increase(v.videoId); } for (let key in v.image) { if (key == 'angle') { pageData.imgList[0].list = v.image[key].length > 0 ? v.image[key].map(v => v.path) : []; } else if (key == 'left') { pageData.imgList[1].list = v.image[key].length > 0 ? v.image[key].map(v => v.path) : []; } else if (key == 'front') { pageData.imgList[2].list = v.image[key].length > 0 ? v.image[key].map(v => v.path) : []; } else if (key == 'right') { pageData.imgList[3].list = v.image[key].length > 0 ? v.image[key].map(v => v.path) : []; } else if (key == 'back') { pageData.imgList[4].list = v.image[key].length > 0 ? v.image[key].map(v => v.path) : []; } else if (key == 'below') { pageData.imgList[5].list = v.image[key].length > 0 ? v.image[key].map(v => v.path) : []; } else if (key == 'identity') { pageData.imgList[6].list = v.image[key].length > 0 ? v.image[key].map(v => v.path) : []; } else { pageData.imgList[7].list = v.image[key].length > 0 ? v.image[key].map(v => v.path) : []; } } } }); if (pageData.role == 1) { request('/app/fc/video/list', 'GET', { id: id }).then(res => { if (res.code == '200') { pageData.list = res.data; } }); } } const getID = () => { request('/app/fc/car/id', 'GET', null).then(res => { if (res.code == '200') pageData.ID = res.data; pageData.obj.id = res.data; }); } const pageData = reactive({ show: false, paddingBottomHeight: app.globalData.paddingBottomHeight, context: null, top: app.globalData.systemParams.statusBarHeight > 30 ? app.globalData.systemParams.statusBarHeight * 2 : app.globalData.systemParams.statusBarHeight * 4, param: { id: '', //车id ids: '', //视频id path: '', isSelf: false, // 是否是自己的视频 }, playFlag: false, address: '', category: '', role: app.globalData.userInfo.role, // role: 2, list: [], imgList: [{ name: '#45', type: 'A', limit: 4, list: [] }, { name: '左侧', type: 'B', limit: 12, list: [] }, { name: '前部', type: 'C', limit: 12, list: [] }, { name: '右侧', type: 'D', limit: 12, list: [] }, { name: '后部', type: 'E', limit: 12, list: [] }, { name: '底部', type: 'F', limit: 12, list: [] }, { name: '铭牌', type: 'G', limit: 4, list: [] }, { name: '优势', type: 'H', limit: 8, list: [] } ], ID: 0, statusBarHeight: app.globalData.systemParams.statusBarHeight * 2, tabBarHeight: 0, list: [], mainTop: 0, imgUrl: app.globalData.imgUrl, obj: { id: '', openId: uni.getStorageSync("sale_openId"), companyId: app.globalData.userInfo.companyId, recordDate: null, // brandId: '', // gearbox: '', // liter: '', damageCause: '', // brandName: '', // seriesName: '', // modelName: '', ownerNature: '', carNature: '', province: '', city: '', area: '', remark: '', deposit: null, // sellPriceW: 0, // memberPriceW: 0, // innerPriceW: 0, video: '' } }); const { show, context, top, param, role, playFlag, list, imgList, url, category, imgUrl, mainTop, paddingBottomHeight, tabBarHeight, statusBarHeight, address, obj } = toRefs(pageData); const closeBtn = () => { pageData.show = false; } const shut = () => { pageData.show = false; } const openUpload = (str, i) => { let phone = uni.getStorageSync("sale_phone"); uploadVideo("card/" + pageData.ID + "/video/" + phone + "/").then(res => { pageData.param.path = res; modify(str); }); } const increase = (id) => { request('/app/fc/video/record', 'POST', { id: id }); } const modify = (i) => { let { id, ids, path } = pageData.param, data = i == 'PUT' ? { openId: uni.getStorageSync('sale_openId'), carId: id, path: path } : i == 'POST' ? { carId: id, videoId: ids, openId: uni.getStorageSync('sale_openId'), path: path } : { id: ids } request('/app/fc/video', i, data).then(res => { // if(i != 'POST') init(id); if (i == 'PUT') init(id); if (i == 'DELETE') openUpload('PUT'); }); } const videoClose = () => { pageData.context = uni.createVideoContext("myvideo"); pageData.context.stop(); if (pageData.param.isSelf) { uni.showModal({ title: '提示', content: '是否删除当前视频,重新上传?', success: (res) => { if (res.confirm) { pageData.obj.video = null; pageData.playFlag = false; pageData.param.ids = pageData.obj.videoId; modify('DELETE'); } else if (res.cancel) { pageData.context.play(); } } }); } else { pageData.playFlag = false; } } </script> <style lang="scss" scoped> .main { width: 100%; padding: 0 1%; overflow-y: scroll; .top { height: 416rpx; width: 99%; margin-bottom: 6rpx; position: relative; border: 4rpx solid #808080; border-radius: 10rpx; background-color: #FFFFFF; overflow: auto; box-sizing: content-box; .video-back { height: 416rpx; // margin: 10rpx 30rpx; // margin-top: 36rpx; display: flex; justify-content: flex-start; flex-wrap: wrap; align-content: flex-start; position: relative; box-sizing: border-box; .capture { width: 100rpx; height: 100rpx; position: absolute; left: calc(50% - 50rpx); top: calc(50% - 50rpx); z-index: 100; } .video-item { display: flex; margin-top: 10rpx; width: 25%; display: flex; justify-content: center; align-items: center; .video-one { display: flex; justify-content: space-between; align-items: center; position: relative; width: 150rpx; height: 150rpx; margin: 10rpx 0 0 10rpx; .video-real { height: 100%; border-radius: 8rpx; } image { width: 100%; height: 100%; } .cnt { position: absolute; right: 15rpx; bottom: 8rpx; color: #fc7700; font-size: 26rpx; } } } .img-item { display: flex; margin-top: 10rpx; width: 25%; display: flex; justify-content: center; align-items: center; position: relative; .video-self { width: 100%; height: 100%; } .img-one { display: flex; justify-content: center; align-items: center; width: 150rpx; height: 150rpx; margin: 10rpx 0 0 10rpx; position: relative; image { width: 100%; height: 100%; } } .cnt { position: absolute; right: 15rpx; bottom: 8rpx; color: #fc7700; font-size: 26rpx; } } } .playVideo { width: 100%; height: 418rpx; display: block; clear: both; overflow-y: auto; position: relative; box-sizing: border-box; .videoCloseBut { position: absolute; right: 12rpx; top: 90rpx; .coverImg { width: 48rpx; height: 48rpx; z-index: 999; opacity: 0.6; } } .playOne { width: 100%; height: 416rpx; // position: relative; // display:block; // clear:both; z-index: 0; .watermark { margin: 50rpx 12rpx 12rpx 10rpx; width: 116rpx; color: #fff; opacity: 0.8; z-index: 999; } .ctn { position: absolute; right: 36rpx; bottom: 36rpx; color: #fc7700; font-size: 26rpx; z-index: 999; } } } .nv { width: 100%; height: 416rpx; text-align: center; display: flex; justify-content: center; align-items: center; background-color: #fff; .car-logo { width: 106rpx; height: 106rpx; } } .video-img { height: 416rpx; width: 100%; } .tip { text-align: center; margin-top: 80rpx; font-size: 32rpx; z-index: 101; } .capture { width: 100rpx; height: 100rpx; position: absolute; left: calc(50% - 50rpx); top: calc(50% - 50rpx); z-index: 100; } .video-play { width: 100%; height: 100%; z-index: 200; .coverImg { width: 48rpx; height: 48rpx; position: absolute; top: 112rpx; right: 16rpx; color: #4CD964; z-index: 999; } } } .center { width: 100%; height: auto; padding: 4% 2%; margin-bottom: 6rpx; border: 4rpx solid #808080; border-radius: 10rpx; background-color: #FFFFFF; .cont { font-size: 28rpx; } .price { font-size: 34rpx; color: #ff0000; } .underline { color: #0070c0; text-decoration: underline; } .input-placeholder { color: #0070c0; text-decoration: underline; } .label { white-space: nowrap; color: #828282; font-size: 28rpx; } .row { padding: 0 2%; margin-bottom: 16rpx; display: flex; justify-content: space-between; .left { min-width: 36%; } .left, .right { display: flex; } } .col { padding: 0 2%; display: flex; margin-bottom: 16rpx; .cont { height: auto; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; } } } .bot { width: 100%; height: auto; padding: 3% 2%; margin-bottom: 6rpx; border: 4rpx solid #808080; border-radius: 10rpx; background-color: #FFFFFF; .img-box { width: auto; height: auto; padding: 0 2%; margin-bottom: 12rpx; .type { margin-bottom: 12rpx; color: #828282; font-size: 28rpx; } .img-row { display: flex; flex-wrap: wrap; .box { width: 25%; height: 160rpx; display: flex; justify-content: center; align-items: center; .img { width: 150rpx; height: 150rpx; border-radius: 12rpx; } } .none { color: #828282; font-size: 28rpx; } } } } .title { width: 100%; height: 48rpx; margin: 16rpx 0 36rpx 0; line-height: 48rpx; text-align: center; font-size: 32rpx; } } .botBtn { width: 100%; height: 90rpx; position: fixed; left: 0; bottom: 0; background-color: #fff; z-index: 99; display: flex; .btn { width: 47%; height: 70rpx; line-height: 70rpx; color: #fff; border-radius: 10rpx; } .left { background-color: #0070c0; } .right { background-color: #a6a6a6; } } .dialog { // width: 100%; height: auto; padding: 16rpx; font-size: 32rpx; .title { margin: 16rpx 0; font-size: 32rpx; text-align: center; font-weight: 700; } .wx-row { margin-top: 36rpx; display: flex; padding: 0 36rpx; position: relative; .bot-tip { height: auto; width: 100%; position: absolute; bottom: -48rpx; right: 36rpx; text-align: right; color: #888888; } .label { width: auto; height: 36rpx; // white-space: nowrap; } .scroll { height: 160rpx; flex: 1; border: 2rpx solid #888888; border-radius: 12rpx; overflow-y: scroll; } .col { flex: 1; .customInput { border: none; text-align: center; border-bottom: 2rpx solid; } .textarea { width: 100%; display: block; clear: both; position: relative; } .sufix { margin-left: auto; } } .row { display: flex; } } .footer { width: 100%; height: 70rpx; .cus-btn { width: 180rpx; height: 70rpx; line-height: 70rpx; text-align: center; font-size: 32rpx; border-radius: 10rpx; color: #FFFFFF; background-color: #0071C1; box-shadow: 5rpx 5rpx 5rpx 5rpx #afafaf; } } } </style> [视频]
2023-07-06 - wx.getSystemInfo 在真机上和开发工具上返回的数据不一致怎么解决?
[图片][图片] 第一张是真机返回的数据,第二张是开发工具返回的数据,由于有些值没有,真机直接报错直至卡死
2023-07-04 - 华为手机加载视频时间过长且黑屏问题如何解决?
[视频]
2023-06-29 - qqmapsdk.reverseGeocoder 报错? fail url not in domai
qqmapsdk.reverseGeocoder 添加了域名但是还是报错 fail url not in domain list ,请求大佬指教
2022-04-12 - 支付验证签名失败
[图片]
2022-02-25