Skip to content

U
uni-pdtravel
Commit 9a899114 authored by zhoucong's avatar zhoucong
Browse files
Options

vlog视频完成

parent fd416b15
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 704 additions and 346 deletions
pages/index/index.vue
View file @ 9a899114
<template> <template>
<view > <view >
<!-- #ifdef MP-ALIPAY -->
<!-- <view class="top"> <!-- <view class="top">
<view class="top-search"> <view class="top-search">
</view> </view>
...@@ -10,6 +9,7 @@ ...@@ -10,6 +9,7 @@
<image src="../../static/img/index/classify1.png"></image> <image src="../../static/img/index/classify1.png"></image>
<view>景区门票</view> <view>景区门票</view>
</navigator> </navigator>
</view> </view>
<view> <view>
<navigator url="../hotel/hotel"> <navigator url="../hotel/hotel">
...@@ -63,14 +63,11 @@ ...@@ -63,14 +63,11 @@
<view class="top-img"> <view class="top-img">
</view> </view>
</view> --> </view> -->
<!--#endif--> <!-- <text @click="getUserInfo()"> 授权获取头像昵称 </text> -->
<!-- <button @click="getUserInfo()"> 授权获取头像昵称 </button> -->
<view class="bottom"> <view class="bottom">
<navigator url="../vlog/vlogIndex/vlogIndex"> <web-view :src="outUrl"></web-view>
<button type="default">vlog</button>
</navigator>
<!-- <web-view src="https://wx.pangdly.com"></web-view> -->
</view> </view>
</view> </view>
</template> </template>
...@@ -79,11 +76,15 @@ ...@@ -79,11 +76,15 @@
export default { export default {
data() { data() {
return { return {
outUrl:"",//跳出地址
} }
}, },
onLoad() { onLoad(){
let pdOpenid=uni.getStorageSync("openid")//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync("token")
let pdCreateUserId=uni.getStorageSync("createUserId")
let pdUserId=uni.getStorageSync("userId")
this.outUrl="https://wx.pangdly.com/#/home?pdOpenid="+pdOpenid+"&pdToken="+pdToken+"&pdCreateUserId="+pdCreateUserId+"&pdUserId="+pdUserId
}, },
methods: { methods: {
getUserInfo() { // 获取用户信息 getUserInfo() { // 获取用户信息
......
pages/vlog/myVlog/myVlog.vue
View file @ 9a899114
...@@ -2,28 +2,13 @@ ...@@ -2,28 +2,13 @@
<view class="content"> <view class="content">
<view v-if="vlogList.length>0 && show===false" class="noEmpty"> <view v-if="vlogList.length>0 && show===false" class="noEmpty">
<view style="height: 20rpx;"></view> <view style="height: 20rpx;"></view>
<u-search bg-color="#434957" color="#ffffff" placeholder="景区/关键词搜索" v-model="search" :clearabled="true" @search="query" :show-action="false" ></u-search> <u-search bg-color="#434957" color="#ffffff" placeholder="景区/关键词搜索" v-model="search" :clearabled="true"
@search="query" :show-action="false"></u-search>
<view class="body"> <view class="body">
<navigator url="../vlogList/vlogList" class="item"> <view class="item" v-for="(item,index) in vlogList" :key="index" @click="navTo(item)">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image> <image :src="item.thumbImageUrl" mode="widthFix"></image>
<text>长江索道</text> <text>{{item.merchantName}}</text>
</navigator> </view>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
</view> </view>
</view> </view>
<view v-else-if="vlogList.length===0 && show===false" class="empty"> <view v-else-if="vlogList.length===0 && show===false" class="empty">
...@@ -35,7 +20,7 @@ ...@@ -35,7 +20,7 @@
<view>点击获取我的Vlog</view> <view>点击获取我的Vlog</view>
</navigator> </navigator>
</view> </view>
<view v-else ></view> <view v-else></view>
</view> </view>
</template> </template>
...@@ -43,34 +28,44 @@ ...@@ -43,34 +28,44 @@
export default { export default {
data() { data() {
return { return {
show:true,//显示默认页面 show: true, //显示默认页面
vlogList:[],//我的vlog集合 vlogList: [], //我的vlog集合
} }
}, },
onReady() { onReady() {},
}, onLoad() {
onLoad(){ this.getMyVlogList()
setTimeout(res=>{
this.vlogList=[1]//模拟请求数据
if(this.vlogList.length>0){//如果有数据
this.show=false
uni.setNavigationBarColor({//动态更改导航条颜色
frontColor: '#ffffff',
backgroundColor: '#192033',
animation: {
duration: 1,
timingFunc: 'easeIn'
}
})
uni.setBackgroundColor({backgroundColor:"#192033"});
}else{//数据为空
this.show=false
}
},1)
}, },
methods: { methods: {
query(e){ navTo(item){
this.$u.route('/pages/vlog/vlogList/vlogList?merchantId='+item.merchantId);
},
getMyVlogList(){
this.$request("wechatUser/myPage/getVlogRecord", {
openid: uni.getStorageSync("openid")
}).then(res => {
if(res.code==="00"){
this.vlogList = res.data
if (this.vlogList.length > 0) { //如果有数据
this.show = false
uni.setNavigationBarColor({ //动态更改导航条颜色
frontColor: '#ffffff',
backgroundColor: '#192033',
animation: {
duration: 1,
timingFunc: 'easeIn'
}
})
uni.setBackgroundColor({
backgroundColor: "#192033"
});
} else { //数据为空
this.show = false
}
}
})
},
query(e) {
console.log(e) console.log(e)
}, },
} }
...@@ -78,23 +73,82 @@ ...@@ -78,23 +73,82 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content{height: 100%;width: 100%;text-align: center; .content {
.noEmpty{color:#fff;height: 100%;width: 100%;background-color: #192033;padding: 0 20rpx; height: 100%;
.body{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 30rpx; width: 100%;
.item{width: 49%;height: 250rpx;margin-top: 20rpx; text-align: center;
image{width: 100%;height: 80%;border-radius: 10rpx;}
text{font-weight: bold;} .noEmpty {
color: #fff;
height: 100%;
width: 100%;
background-color: #192033;
padding: 0 20rpx;
.body {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 30rpx;
.item {
width: 49%;
height: 250rpx;
margin-top: 20rpx;
image {
width: 100%;
height: 80%;
border-radius: 10rpx;
}
text {
font-weight: bold;
}
} }
} }
} }
.empty {height: 100%;width: 100%;background-color: #fff;padding: 0 20rpx;text-align: center;padding-top: 30rpx;
.row {height: 200rpx;background: linear-gradient(90deg, #ECF5FF 0%, #CEE5FF 100%);line-height: 200rpx;border-radius: 10rpx;margin-bottom: 300rpx; .empty {
text {font-weight: bold;font-size: 32rpx;float: left;margin-left: 120rpx;} height: 100%;
image {height: 180rpx;width: 200rpx;float: right;margin-right: 50rpx;} width: 100%;
background-color: #fff;
padding: 0 20rpx;
text-align: center;
padding-top: 30rpx;
.row {
height: 200rpx;
background: linear-gradient(90deg, #ECF5FF 0%, #CEE5FF 100%);
line-height: 200rpx;
border-radius: 10rpx;
margin-bottom: 300rpx;
text {
font-weight: bold;
font-size: 32rpx;
float: left;
margin-left: 120rpx;
}
image {
height: 180rpx;
width: 200rpx;
float: right;
margin-right: 50rpx;
}
} }
.btnn {display: inline-block;font-size: 28rpx;border-radius: 40rpx;background-color: #FFE600;padding: 20rpx 40rpx;margin: 30rpx 0;font-weight: bold;
.btnn {
display: inline-block;
font-size: 28rpx;
border-radius: 40rpx;
background-color: #FFE600;
padding: 20rpx 40rpx;
margin: 30rpx 0;
font-weight: bold;
} }
} }
} }
</style> </style>
pages/vlog/scenicList/scenicList.vue
View file @ 9a899114
<template> <template>
<view class="content"> <view class="content">
<view style="padding-top: 30rpx;"> <view style="padding-top: 30rpx;">
<block v-for="(item,index) in scenic.vlogSamples" :key="index"> <block>
<view class="item"> <view class="item">
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @error="error" controls @play="playing(1)" id="d1"></video> <video class="video" :poster="scenic.coverImgUrl" :src="scenic.showVideoUrl" play-btn-position="center" @error="error" controls></video>
<view class="title"> <view class="title">
<text>[ 样片1 ]</text> <text>[ {{scenic.name || ""}} ]</text>
<button class="btnn" open-type="share"><u-icon name="share"></u-icon></button> <view>
<u-icon name="eye-fill" class="icon" color="#ffffff" size="40rpx"></u-icon><text style="color: #ffffff;">10W+</text>
</view>
</view> </view>
</view> </view>
</block> </block>
...@@ -26,7 +28,7 @@ ...@@ -26,7 +28,7 @@
export default { export default {
data() { data() {
return { return {
scenic:"",//景区详情 scenic:{},//景区详情
} }
}, },
onReady() {//代替 vue 里面的 mounted onReady() {//代替 vue 里面的 mounted
...@@ -35,6 +37,7 @@ ...@@ -35,6 +37,7 @@
let caseId=res.caseId let caseId=res.caseId
this.$request("distribution/vlog/getScenicInfo",{caseId}).then(res=>{ this.$request("distribution/vlog/getScenicInfo",{caseId}).then(res=>{
if(res.code==="00"){ if(res.code==="00"){
console.log(res);
this.scenic=res.data; this.scenic=res.data;
uni.setNavigationBarTitle({title:this.scenic.name}) uni.setNavigationBarTitle({title:this.scenic.name})
} }
...@@ -44,30 +47,17 @@ ...@@ -44,30 +47,17 @@
error(e){//视频播放出错触发函数 error(e){//视频播放出错触发函数
uni.showModal({content: e.target.errMsg,showCancel: false}) uni.showModal({content: e.target.errMsg,showCancel: false})
}, },
playing(e) {
if(e===1){uni.createVideoContext("d2").pause()}else{uni.createVideoContext("d1").pause()}
// let trailer = this.video_list;
// trailer.forEach(function(item, index) { // 获取json对象并遍历, 停止非当前视频
// if (item.videoUrl != null && item.videoUrl != "") {
// let temp = item.pgcId;
// if (temp != currentId) {
// uni.createVideoContext(temp).pause(); //暂停视频播放事件
// }
// }
// })
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content{padding: 0 20rpx;height: 100%;width: 100%;background-color: #192033; .content{padding: 0 20rpx;min-height: 100%;width: 100%;background-color: #192033;
.item{box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 0 10rpx;border-radius: 10rpx;background-color: #192033;margin-bottom:30rpx;text-align: center; .item{box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 0 10rpx;border-radius: 10rpx;background-color: #192033;margin-bottom:30rpx;text-align: center;
.video{height: 350rpx;border-radius: 10rpx;width: 100%;} .video{height: 350rpx;border-radius: 10rpx;width: 100%;}
.title{height: 60rpx;margin-top: 20rpx; .title{height: 60rpx;margin-top: 20rpx;
text{float: left;height: 60rpx;line-height: 60rpx;color: #FFE600;font-weight: bold;} text{float: left;height: 60rpx;line-height: 60rpx;color: #FFE600;font-weight: bold;}
.btnn{height: 60rpx;width: 60rpx;line-height: 60rpx;float: right;text-align: center;padding: 0;margin: 0;background-color: #192033;color: #fff; view{float: right;height: 60rpx;line-height: 60rpx;align-items: center;display: flex;}
}
} }
} }
......
pages/vlog/vlogIndex/vlogIndex.vue
View file @ 9a899114
This diff is collapsed.
pages/vlog/vlogList/vlogList.vue
View file @ 9a899114
<template> <template>
<view class="content"> <view class="content">
<view style="padding-top: 30rpx;"> <view style="padding-top: 30rpx;">
<view class="item"> <view class="item" v-for="(item,index) in myVlogList" :key="index">
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" <video class="video" :src="item.productUrl" :poster="item.thumbImageUrl" @error="error" controls
@error="error" controls @play="playing(1)" id="d1"></video> play-btn-position="center" :id="index" @play="playing(index)"></video>
<view class=""> <view class="">
<button class="btnn" open-type="share">分享下载</button> <button v-if="item.shareNumber===4" :data-productUrl="item.productUrl" :data-productId="item.productId" class="btnn"
open-type="share">分享下载</button>
<button v-else class="btnn" @click="handleDownload">下载视频</button>
<text class="price">¥<text>0</text></text> <text class="price">¥<text>0</text></text>
</view> </view>
<view style="clear: both;"> <view style="clear: both;"></view>
</view>
</view>
<view class="item">
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@error="error" controls @play="playing(2)" id="d2"></video>
<view class="">
<button class="btnn" open-type="share">下载</button>
<text class="price">¥<text>5</text></text>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -29,47 +21,88 @@ ...@@ -29,47 +21,88 @@
data() { data() {
return { return {
share1: 0, myVlogList: [], //我的视频列表
src: "" merchantId: "", //景区id
} }
}, },
onLoad(options) {}, onLoad(options) {
this.merchantId = options.merchantId
this.getMyVlogList()
},
onShow() { onShow() {
if (this.share1 === 1) {
console.log("分享了"); },
} onUnload() { //退出页面
}, },
onHide() {}, onHide() {},
onReady() {}, onReady() {},
onShareAppMessage(res) { //发送给朋友 onShareAppMessage(res) { //分享
console.log(res); let productId = res.target.dataset.productid
let productUrl= res.target.dataset.producturl
this.$request("wechatUser/myPage/updateVlogRecord", {
productId,
openid: uni.getStorageSync("openid")
}).then(res => {
if (res.code === "00") {
this.getMyVlogList()
}
})
if (res.from === "button") { if (res.from === "button") {
this.share1 = 1
return { return {
title: '胖丁旅游', title: '胖丁旅行',
type: 4, type: 4,
path: '/pages/vlog/share/share?url=https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4', path: '/pages/vlog/share/share?url='+productUrl,
} }
} }
}, },
methods: { methods: {
getMyVlogList() { //获取景区vlog列表
this.$request("wechatUser/myPage/getVlogRecord", {
openid: uni.getStorageSync("openid")
}).then(res => {
if (res.code === "00") {
res.data.forEach(item => { //获取当前景区视频列表
if (this.merchantId === item.merchantId) {
this.myVlogList = item.vlogList
}
})
}
})
},
playing(e) { //控制只播放当前video
this.myVlogList.forEach((item, index) => {
if (e !== index) {
uni.createVideoContext(index.toString()).pause()
}
})
},
handleDownload() { // 下载功能 handleDownload() { // 下载功能
uni.showLoading({title:"下载中",mask:true}) uni.showLoading({
let fileName = new Date().valueOf();//获取时间戳 title: "下载中",
uni.downloadFile({//下载文件资源到本地 mask: true
url: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4', })
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',//filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH,时间戳为文件名 let fileName = new Date().valueOf(); //获取时间戳
success: res => {//下载到本地成功 uni.downloadFile({ //下载文件资源到本地
url: 'https://idst-video-img.oss-cn-hangzhou.aliyuncs.com/414ef566a39247159965f355043b379b/minio_service/mgc-video-store/mix/2021-08-31/concat/7c4d09c044b84893959cb541e0c48d38.mp4',
filePath: wx.env.USER_DATA_PATH + '/' + fileName +
'.mp4', //filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH,时间戳为文件名
success: res => { //下载到本地成功
let filePath = res.filePath; let filePath = res.filePath;
uni.saveVideoToPhotosAlbum({//保存视频到系统相册。 uni.saveVideoToPhotosAlbum({ //保存视频到系统相册。
filePath, filePath,
success: file => {//保存成功 success: file => { //保存成功
//删除本地缓存 //删除本地缓存
let fileMgr = uni.getFileSystemManager(); let fileMgr = uni.getFileSystemManager();
fileMgr.unlink({ fileMgr.unlink({
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4', filePath: wx.env.USER_DATA_PATH + '/' + fileName +
'.mp4',
})
uni.showToast({
title: "下载成功",
icon: "success",
mask: true
}) })
uni.showToast({title:"下载成功",icon:"success",mask:true})
}, },
fail: err => { fail: err => {
uni.hideLoading(); uni.hideLoading();
...@@ -83,10 +116,21 @@ ...@@ -83,10 +116,21 @@
//打开权限设置 //打开权限设置
uni.openSetting({ uni.openSetting({
success: setting => { success: setting => {
if (setting.authSetting['scope.writePhotosAlbum']) { if (setting
uni.showModal({title: '提示',content: '获取权限成功,再次点击下载即可保存',showCancel: false,}) .authSetting[
'scope.writePhotosAlbum'
]) {
uni.showModal({
title: '提示',
content: '获取权限成功,再次点击下载即可保存',
showCancel: false,
})
} else { } else {
uni.showModal({title: '提示',ontent: '获取权限失败，将无法保存到相册哦',showCancel: false}) uni.showModal({
title: '提示',
ontent: '获取权限失败，将无法保存到相册哦',
showCancel: false
})
} }
}, },
}) })
...@@ -96,12 +140,16 @@ ...@@ -96,12 +140,16 @@
} }
}) })
}, },
fail: err => {//下载失败 fail: err => { //下载失败
uni.hideLoading(); uni.hideLoading();
if (err.errMsg == 'downloadFile:fail createDownloadTask:fail url not in domain list') { if (err.errMsg == 'downloadFile:fail createDownloadTask:fail url not in domain list') {
uni.showToast({title: '服务器错误，请联系相关管理员',icon: 'none',mask:true}) uni.showToast({
} title: '服务器错误，请联系相关管理员',
} icon: 'none',
mask: true
})
}
}
}) })
}, },
error(e) { //视频播放出错触发函数 error(e) { //视频播放出错触发函数
...@@ -110,32 +158,57 @@ ...@@ -110,32 +158,57 @@
showCancel: false showCancel: false
}) })
}, },
playing(e) {
if (e === 1) {
uni.createVideoContext("d2").pause()
} else {
uni.createVideoContext("d1").pause()
}
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content {padding: 0 20rpx;height: 100%;width: 100%;text-align: center;background-color: #192033; .content {
padding: 0 20rpx;
min-height: 100%;
width: 100%;
text-align: center;
background-color: #192033;
.item { .item {
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
padding: 0 10rpx; padding: 0 10rpx;
border-radius: 10rpx; border-radius: 10rpx;
background-color: #192033; background-color: #192033;
margin-bottom: 40rpx; padding-bottom: 40rpx;
.video {height: 350rpx;border-radius: 10rpx;width: 100%;}
view{margin: 20rpx 0; .video {
.btnn {float: left;width: 150rpx; background-color: #CCCCCA;font-weight: bold;border-radius: 30rpx;line-height: 30rpx;font-size: 24rpx;padding: 10rpx 15rpx;} height: 350rpx;
.price{float: right;color: #DE6F26;font-size: 22rpx; border-radius: 10rpx;
text{font-size: 32rpx;margin-left: 5rpx;font-weight: bold;} width: 100%;
}
view {
margin: 20rpx 0;
.btnn {
float: left;
width: 150rpx;
background-color: #FFE600;
font-weight: bold;
border-radius: 30rpx;
line-height: 30rpx;
font-size: 24rpx;
padding: 10rpx 15rpx;
}
.price {
float: right;
color: #DE6F26;
font-size: 22rpx;
text {
font-size: 32rpx;
margin-left: 5rpx;
font-weight: bold;
} }
} }
}
} }
} }
</style> </style>
pages/vlog/vlogface/vlogface.vue
View file @ 9a899114
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
</view> </view>
<image class="photo" v-show="src" :src="src"></image> <image class="photo" v-show="src" :src="src"></image>
<view class="hint"> <view class="hint">
<u-icon name="error-circle"></u-icon> <!-- <u-icon name="error-circle"></u-icon>
没有检测到人脸,请正对拍摄框拍摄哦~ 没有检测到人脸,请正对拍摄框拍摄哦~ -->
</view> </view>
<view class="hint1"> <view class="hint1">
<view class="item"> <view class="item">
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
</view> </view>
<view class="item"> <view class="item">
<view class=""> <view class="">
<image src="../../../static/img/vlog/icon/icon_isthelens.png"></image> <image src="../../../static/img/vlog/icon/icon_isthelens.png"></image>
</view> </view>
<view>正对镜头</view> <view>正对镜头</view>
</view> </view>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<view>不遮挡面部</view> <view>不遮挡面部</view>
</view> </view>
</view> </view>
<u-button type="success" size="medium" @click="scanFace" >重新拍摄</u-button> <u-button v-if="buttonShow" type="success" size="medium" @click="scanFace">开始识别</u-button>
</view> </view>
</template> </template>
...@@ -41,40 +41,88 @@ ...@@ -41,40 +41,88 @@
export default { export default {
data() { data() {
return { return {
src:"",//照片 src: "", //照片
text:3,//倒计时 text: 3, //倒计时
show:true show: false, //摄像头倒计时文本
base64: "", //照片base64
buttonShow: true
} }
}, },
onLoad(){//代替 vue 里面的 created onLoad() { //代替 vue 里面的 created
}, },
onReady() {//代替 vue 里面的 mounted onReady() { //代替 vue 里面的 mounted
this.takePhoto()
}, },
methods: { methods: {
takePhoto(){//扫脸 query() { //人脸查询
var test = setInterval(()=>{ uni.showLoading({
this.text=this.text-1; title: '人脸识别中'
if(this.text===-1){ });
let data = {
caseId: "a124Jj6IYiSzCjVV", //景区id
userId: uni.getStorageSync("openid"), //用户id
faceImgData: this.base64, //人脸图片base64编码
optimalFramesNum: 3, //最优帧数量(默认填3就行)
enableImgBeauty: true //默认填true
}
this.$request("distribution/vlog/createVlog", data).then(res => {
if (res.code == "00") {
setTimeout(() => {
this.$request("distribution/vlog/getVlogCreateInfo", {
userId: uni.getStorageSync("openid")
}).then(res => {
if (res.code == "00") {
uni.hideLoading()
uni.showToast({
title: '识别成功',
duration: 1500
});
this.$u.route("pages/vlog/myVlog/myVlog")
} else {
uni.hideLoading()
uni.showModal({
title: '提示',
content: '识别失败,请重新扫脸',
showCancel:false
});
this.buttonShow = true
}
})
}, 8000)
}
})
},
takePhoto() { //扫脸
var test = setInterval(() => {
this.text = this.text - 1;
if (this.text === -1) {
clearTimeout(test) clearTimeout(test)
this.show=false this.show = false
const ctx = uni.createCameraContext(); const ctx = uni.createCameraContext();
ctx.takePhoto({ ctx.takePhoto({
quality: 'high', quality: 'high',
success: (res) => { success: (res) => {
this.src = res.tempImagePath this.src = res.tempImagePath
} uni.getFileSystemManager().readFile({ //图片转base64
filePath: res.tempImagePath, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
this.base64 = "data:image/jpeg;base64," + res.data
this.query()
}
})
}
}); });
} }
},1000) }, 1000)
}, },
error(e) {//相机报错 error(e) { //相机报错
console.log(e.detail); console.log(e.detail);
}, },
scanFace(){//重新扫脸 scanFace() { //重新扫脸
this.src=""; this.buttonShow = false
this.text=3; this.src = "";
this.show=true; this.text = 3;
this.show = true;
this.takePhoto() this.takePhoto()
} }
} }
...@@ -82,19 +130,95 @@ ...@@ -82,19 +130,95 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content{padding: 0 20rpx;height: 100%;width: 100%;text-align: center; .content {
.d1{width: 500rpx;height: 500rpx;border-radius: 50%;background-color: #CEE5FF;position: absolute;top: 150rpx;left: 50%;transform: translate(-40%)} padding: 0 20rpx;
.d2{width: 500rpx;height: 500rpx;border-radius: 50%;background-color: #ECF5FF;position: absolute;top: 150rpx;left: 50%;transform: translate(-60%)} height: 100%;
.camera{width: 500rpx;height: 500rpx;border-radius: 50%;position: absolute;top: 150rpx;left: 50%;transform: translate(-50%)} width: 100%;
.surface{width: 500rpx;height: 500rpx;border-radius: 50%;position: absolute;top: 150rpx;left: 50%;transform: translate(-50%);text-align: center;font-size: 40rpx;color: #fff; text-align: center;
view{margin: 100rpx 0;}
text{font-size: 70rpx;} .d1 {
width: 500rpx;
height: 500rpx;
border-radius: 50%;
background-color: #CEE5FF;
position: absolute;
top: 150rpx;
left: 50%;
transform: translate(-40%)
}
.d2 {
width: 500rpx;
height: 500rpx;
border-radius: 50%;
background-color: #ECF5FF;
position: absolute;
top: 150rpx;
left: 50%;
transform: translate(-60%)
} }
.photo{width: 500rpx;height: 500rpx;border-radius: 50%;position: absolute;top: 150rpx;left: 50%;transform: translate(-50%)}
.hint{color: red;padding-top: 680rpx;} .camera {
.hint1{height: 300rpx;display: flex;justify-content: space-between;padding-top: 50rpx; width: 500rpx;
.item{width: 30%;text-align: center;} height: 500rpx;
image{height: 60rpx;width: 60rpx;} border-radius: 50%;
position: absolute;
top: 150rpx;
left: 50%;
transform: translate(-50%)
}
.surface {
width: 500rpx;
height: 500rpx;
border-radius: 50%;
position: absolute;
top: 150rpx;
left: 50%;
transform: translate(-50%);
text-align: center;
font-size: 40rpx;
color: #fff;
view {
margin: 100rpx 0;
}
text {
font-size: 70rpx;
}
}
.photo {
width: 500rpx;
height: 500rpx;
border-radius: 50%;
position: absolute;
top: 150rpx;
left: 50%;
transform: translate(-50%)
}
.hint {
color: red;
padding-top: 680rpx;
}
.hint1 {
height: 300rpx;
display: flex;
justify-content: space-between;
padding-top: 50rpx;
.item {
width: 30%;
text-align: center;
}
image {
height: 60rpx;
width: 60rpx;
}
} }
} }
</style> </style>
static/img/vlog/icon/debug.log deleted 100644 → 0
View file @ fd416b15
[0817/091631:ERROR:tcp_socket_win.cc(647)] closesocket: 应用程序没有调用 WSAStartup，或者 WSAStartup 失败。 (0x276D)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment