Skip to content

U
uni-pdtravel
Commit fb70dcd0 authored by renjie's avatar renjie
Browse files
Options

首页、扫脸等

parent d2fb3be5
Hide whitespace changes
Inline Side-by-side
Showing with 884 additions and 23 deletions
pages.json
View file @ fb70dcd0
......@@ -201,7 +201,8 @@
"style" :
{
"navigationBarTitleText": "相册首页",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
......@@ -209,7 +210,8 @@
"style" :
{
"navigationBarTitleText": "景区喜好",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
......@@ -217,7 +219,8 @@
"style" :
{
"navigationBarTitleText": "获取人像",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
,{
......
pages/album/chooseFavorite.vue
View file @ fb70dcd0
<template>
<view class="content">
选择喜欢的景区
<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}">
<view class="nav-bar" :style="{'height': navHeight + 'px'}">
<picker mode="selector" @change="companyChage" :value="index" :range="companyArr" range-key="name">
<view class="company">{{companyArr[index] ? companyArr[index].name : '请选择公司'}}</view>
</picker>
<u-icon name="arrow-down"></u-icon>
</view>
<view class="outer-container">
<view class="inner-container">
<view class="icon">
<image class="favorite" src="../../static/img/album/favorite.png"></image>
<image class="start" src="../../static/img/album/star.png"></image>
</view>
<view class="img-box">
<view class="item" @click="imageChange(item)" v-for="(item, index) in imgArr" :key="item.id">
<image class="img" :src="item.url" mode="aspectFill"></image>
<u-checkbox class="checkbox" v-model="item.value" shape="circle"></u-checkbox>
</view>
</view>
<button class="btn" @click="saveClick">提交</button>
</view>
</view>
</view>
</template>
<script>
import UCheckbox from '@/uview-ui/components/u-checkbox/u-checkbox.vue'
export default {
components: {
UCheckbox,
},
data() {
return {
statusBarHeight: 0,
capsule: 0,
navHeight: 0,
index: 0,// 选中的公司索引-默认选中第一个
companyArr: [],// 公司枚举
imgArr: [],//图片
value: true,
location: {},//位置信息
selected: ''
}
},
methods: {
saveClick() {//---提交
const selectedPic = this.imgArr.filter(item => item.value)
const data = {
id: selectedPic[0].id,// 图片id
merchantId: selectedPic[0].merchantId
}
uni.setStorageSync('merchantId', data.merchantId)
this.$request('scenic/V2merchant/submitChoose', data).then(res => {//创建任务
if (res.code === '00') {
uni.showToast({
title: '提交成功',
icon: 'success'
})
uni.navigateTo({
url: './index?tip=true'
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
companyChage(e) {//---公司变化
this.index = Number(e.detail.value)
const merchantId = this.companyArr[this.index].id
this.getPic(merchantId)
},
imageChange(item) {//---图片选择
this.imgArr.forEach(item => item.value = false)
item.value = true
},
recordDeviceInfo() {//---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
},
getCompany(nearbyId) {//---获取景区列表
this.$request('scenic/newMerchant/findAllMerchant').then(res => {//创建任务
if (res.code === '00') {
if(!res.data.length) return
const index = res.data.findIndex(item => item.id === nearbyId)
this.companyArr = res.data
this.index = index === -1 ? 0 : index
this.getPic(this.companyArr[this.index].id)
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
getPic(merchantId) {//---获取景区图片
this.$request('scenic/V2merchant/getImgList',{ merchantId }).then(res => {//创建任务
if (res.code === '00') {
res.data.forEach(item => item.value = false)
this.imgArr = res.data
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
getNearByCompany() {//---获取最近的景区
const data = {
merchantType: 1,
userlatitude: this.location.latitude,//纬度
userlongitude: this.location.longitude//经度
}
this.$request('scenic/newMerchant/findAllMerchant', data).then(res => {//创建任务
if (res.code === '00') {
if(!res.data.length) {
this.getCompany()
return uni.showToast({
title: '获取最近景点失败',
icon: 'none'
})
}
this.getCompany(res.data[0].id)
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
}
},
onLoad() {
uni.getLocation({
type: 'wgs84',
success: res => {
this.location = res
uni.setStorageSync('location', JSON.stringify(res))
this.getNearByCompany()
},
fail() {
uni.showToast({
title: '获取经纬度失败',
icon: 'none'
})
}
})
this.recordDeviceInfo()
}
}
</script>
<style>
<style lang="scss" scoped>
.big-box {
display: flex;
flex-direction: column;
height: 100%;
background-color: #3688FF;
color: #fff;
}
.nav-bar {
display: flex;
align-items: center;
picker {
max-width: 50%;
}
.company {
margin: 0 12rpx 0 24rpx;
font-size: 36rpx;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.outer-container {
flex: 1;
margin: 16rpx 16rpx 24rpx 16rpx;
border-radius: 96rpx;
background: url('@/static/img/album/dash-bg.png');
background-size: 100% 100%;
padding: 16rpx;
overflow: hidden;
.inner-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: #3041D7;
border-radius: 96rpx;
}
.img-box {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
overflow-y: auto;
flex: 1;
margin: 42rpx 20rpx;
padding: 24rpx 16rpx;
background-color: #fff;
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
border-radius: 16rpx;
.item {
width: 49%;
height: 236rpx;
border-radius: 16rpx;
margin-bottom: 16rpx;
position: relative;
overflow: hidden;
&:nth-child(2n-1) {
margin-right: 2%;
}
.img {
width: 100%;
heigit: 100%;
}
.checkbox {
display: flex;
position: absolute;
right: 12rpx;
top: 12rpx;
width: 36rpx;
height: 36rpx;
}
.u-checkbox__label {
margin: 0;
}
/deep/.u-checkbox__icon-wrap {
border: 1px solid #fff;
}
/deep/.u-checkbox__icon-wrap--checked {
border: 1px solid #2979ff;
}
}
}
.icon {
display: flex;
justify-content: center;
align-items: center;
margin-top: 78rpx;
.favorite {
width: 318rpx;
height: 94rpx;
}
.start {
width: 180rpx;
height: 118rpx
}
}
.btn {
display: flex;
justify-content: center;
align-items: center;
width: 440rpx;
height: 80rpx;
margin-bottom: 24rpx;
background: linear-gradient(90deg, #3688FF 0%, #539FFF 100%);
border-radius: 40rpx 40rpx 40rpx 40rpx;
font-size: 32rpx;
}
}
</style>
\ No newline at end of file
pages/album/favoriteChoose.vue deleted 100644 → 0
View file @ d2fb3be5
<template>
<view class="content">
选择喜欢的景区
</view>
</template>
<script>
</script>
<style>
</style>
\ No newline at end of file
pages/album/getPortrait.vue
View file @ fb70dcd0
<template>
<view class="content">
获取人像
<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}">
<view class="nav-bar" :style="{'height': navHeight + 'px'}"></view>
<text class="title">扫脸获取您的照片</text>
<view class="scan">
<camera class="circle" device-position="front" flash="off" @error="error"></camera>
<view class="surface" v-if="show">
<view class="camera-tip">请正对镜头</view>
<text>{{text}}</text>
</view>
<image class="photo" v-show="src" :src="src"></image>
</view>
<view class="icon-box">
<view class="item">
<image src="../../static/img/album/will-lit.png"></image>
<text>保持光线充足</text>
</view>
<view class="item">
<image src="../../static/img/album/face-screen.png"></image>
<text>请面对屏幕</text>
</view>
<view class="item">
<image src="../../static/img/album/no-shelter.png"></image>
<text>不得遮挡面部</text>
</view>
</view>
<text class="tip">获取照片需先在拍摄点摄影</text>
<u-mask :show="maskShow" @click="maskShow = false">
<view class="mask">
<text class="countdown">{{maskCount}}s</text>
<view class="tip">
<view>未找到您的照片</view>
<view class="small">请在拍摄点拍摄后重试</view>
</view>
<u-button type="info" size="mini" shape="circle" @click="maskShow = false">返回</u-button>
</view>
</u-mask>
</view>
</template>
<script>
import UMask from '@/uview-ui/components/u-mask/u-mask.vue'
export default {
components: {
UMask
},
data() {
return {
statusBarHeight: 0,
capsule: 0,
navHeight: 0,
src: '', //照片
text: 3, //倒计时
show: false, //摄像头倒计时文本
base64: '', //照片base64
maskShow: false,//弹窗显示
maskCount: 3,//弹窗倒计时
}
},
methods: {
recordDeviceInfo() {//---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
},
openCamera() { //---用户首次进入打开权限
uni.authorize({ //摄像头
scope: 'scope.camera',
success: (res) => {
console.log('已打开摄像头权限')
this.takePhoto()
},
fail: (res) => {
uni.showModal({
content: '检测到您没打开摄像头权限，是否去设置打开？',
confirmText: '确认',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
console.log(res)
this.takePhoto()
},
fail: (err) => {
console.log(err)
}
})
} else {
uni.navigateBack({
delta: 1
})
}
}
})
}
})
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: (res) => {
console.log('已打开保存到相册权限')
},
fail: (res) => {
uni.showModal({
content: '检测到您没打开相册权限，是否去设置打开？',
confirmText: '确认',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
console.log('已打开保存到相册权限')
},
fail: (err) => {
console.log('保存到相册权限打开失败' + err)
}
})
} else {
uni.navigateBack({
delta: 1
})
}
}
})
}
})
},
query() { //人脸查询
uni.showLoading({
title: '人脸识别中'
})
let data = {
openid: uni.getStorageSync('openid'), //openid
bucketName: 'a124Jj6IYiSzCjVV', //
dbName: uni.getStorageSync('openid'), //
uri: this.base64, //人脸图片base64编码
}
this.$request('wechatUser/aliFace/faceSearch',data).then(res => {//创建任务
if (res.code === '00') {
uni.navigateTo({
url: './myPhotoAlbum/myPhotoAlbum'
})
uni.showModal({
title: '提示',
content: '视频合成中,请在1~2分钟后在我的VLOG视频集中查看',
showCancel:false,
success() {
// uni.navigateTo({
// url:'../vlogIndex/vlogIndex'
// })
}
})
}else{
this.maskShow = true
var loop = setInterval(() => {
this.maskCount -= 1
if(this.maskCount <= -1) {
this.maskShow = false
this.src = ''
clearInterval(loop)
uni.navigateBack({
delta: 1
})
}
},1000)
// uni.showModal({
// title: '提示',
// content: '请先在打卡点录制素材',
// showCancel:false,
// success() {
// // uni.navigateTo({
// // url:'../vlogIndex/vlogIndex'
// // })
// }
// })
}
})
},
takePhoto() { //扫脸
this.src = ''
this.text = 3
this.show = true
var test = setInterval(() => {
this.text = this.text - 1
if (this.text === 0) {
clearInterval(test)
this.show = false
const ctx = uni.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
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)
},
initdone(){//相机初始化完成自动开始拍照
this.takePhoto()
},
error(e) { //相机报错
uni.showModal({
title: '提示',
content: e.detail,
showCancel: false
})
},
},
onLoad() {
this.recordDeviceInfo()
uni.setScreenBrightness({
value: 1, //屏幕亮度值，范围 0~1，0 最暗，1 最亮
success: function() {
console.log('ScreenBrightness success')
}
})
this.openCamera()
}
}
</script>
<style>
<style lang="scss" scope>
.big-box {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
background-color: #fff;
.title {
font-size: 32rpx;
margin: 30rpx 0 62rpx 0;
}
.scan {
position: relative;
width: 468rpx;
height: 468rpx;
margin-bottom: 20%;
z-index: 1;
.circle,
.surface,
.photo {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.circle {
border: 1px dashed #999;
box-sizing: border-box;
background-color: #fff;
// z-index: 100;
}
.surface {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 48rpx;
z-index: 200;
.camera-tip {
margin-bottom: 48rpx;
}
}
.photo {
z-index: 200;
}
&::before,
&::after {
position: absolute;
left: -12rpx;
top: 0;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #ECF5FF;
z-index: -1;
}
&::after {
left: 12rpx;
background-color: #CEE5FF;
}
}
.icon-box {
display: flex;
justify-content: space-evenly;
align-self: stretch;
margin-bottom: 20%;
.item {
display: flex;
flex-direction: column;
align-items: center;
text {
font-size: 24rpx;
font-weight: 700;
color: #191919;
}
}
image {
width: 88rpx;
height: 88rpx;
margin-bottom: 20rpx;
}
}
.tip {
font-size: 32rpx;
font-weight: 700;
color: #3688FF;
}
/deep/.u-mask {
display: flex;
justify-content: center;
align-items: center;
}
}
.mask {
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
padding: 16rpx;
border-radius: 16rpx;
background-color: #fff;
.countdown {
align-self: flex-end;
}
.tip {
font-size: 36rpx;
color: #3688FF;
margin: 32rpx 0 24rpx 0;
text-align: center;
.small {
font-size: 28rpx;
color: #333;
}
}
}
</style>
\ No newline at end of file
pages/album/index.vue
View file @ fb70dcd0
<template>
<view class="content">
相册首页
<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}">
<view class="nav-bar" :style="{'top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
摄影/旅拍
</view>
<view class="body">
<view class="scroll-view" >
<view class="item" @click="jumpToScanFaceClick">
<image class="img" src="../../static/img/coupon/coupon.jpg"></image>
<text class="title">我的相片</text>
</view>
<view class="item">
<image class="img" src="../../static/img/coupon/coupon.jpg"></image>
<text class="title">影像DIY</text>
</view>
<view class="item">
<image class="img" src="../../static/img/coupon/coupon.jpg"></image>
<text class="title">旅拍定制</text>
</view>
<view class="item">
<image class="img" src="../../static/img/coupon/coupon.jpg"></image>
<text class="title">我的Vlog</text>
</view>
</view>
<view class="private-custom">
<view class="title">私人定制</view>
<u-waterfall v-model="list" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="left demo-water" v-for="(item, index) in leftList" :key="index">
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<view class="info-box" :style="{'background-color': item.color}">
<view class="item-title">{{item.title}}</view>
<view class="slogan">一句宣传语</view>
<view class="bottom">
<view class="img-btn">
点击定制
<u-icon name="arrow-right"></u-icon>
</view>
<text class="count">{{item.count}}</text>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="demo-water" v-for="(item, index) in rightList" :key="index">
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<view class="info-box" :style="{'background-color': item.color}">
<view class="item-title">{{item.title}}</view>
<view class="slogan">一句宣传语</view>
<view class="bottom">
<view class="img-btn">
点击定制
<u-icon name="arrow-right"></u-icon>
</view>
<text class="count">{{item.count}}</text>
</view>
</view>
</view>
</template>
</u-waterfall>
</view>
</view>
</view>
</template>
<script>
import UWaterfall from '@/uview-ui/components/u-waterfall/u-waterfall.vue'
import ULazyLoad from '@/uview-ui/components/u-lazy-load/u-lazy-load.vue'
export default {
components: {
UWaterfall,
ULazyLoad
},
data() {
return {
statusBarHeight: 0,
capsule: 0,
navHeight: 0,
tabList: [
{id: 1, url: '../../static/img/coupon/coupon.jpg'},
],
activeList: [],
flowList: [],
list: [
{
title: '精彩瞬间',
count: '10W+',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
color: '#037EFF'
},
{
title: '网红旅拍',
count: '8W+',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
color: '#826847'
},
{
title: '抱枕DIY',
count: '4W+',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
color: '#1175B4'
},
{
title: '影像公仔',
count: '10W+',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
color: '#3478DC'
},
{
title: '8D魔方',
count: '10W+',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
color: '#1A9B45'
},
{
title: 'T桖DIY',
count: '10W+',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
color: '#D48D46'
},
{
title: '旅行台历',
count: '10W+',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
color: '#037EFF'
},
{
title: '定制相册',
count: '10W+',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
color: '#037EFF'
},
]
}
},
methods: {
jumpToScanFaceClick() {
uni.navigateTo({
url:'./getPortrait'
})
},
recordDeviceInfo() {//---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
}
},
onLoad(option) {
console.log(option)
this.recordDeviceInfo()
}
}
</script>
<style>
<style lang="scss" scoped>
.big-box {
position: relative;
padding: 0 24rpx;
background: linear-gradient(to right bottom, #c778f350, #66ddad50, #68d6de50);
z-index: 0;
&::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
background: linear-gradient(to top, #f7f7f7, #f7f7f7 80%, transparent 100%);
}
}
.nav-bar {
font-size: 36rpx;
font-weight: 700;
z-index: 9;
}
.scroll-view {
display: flex;
width: calc(100% + 24rpx);
overflow-x: auto;
padding-top: 46rpx;
margin-bottom: 48rpx;
&::-webkit-scrollbar {
display: none;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 24rpx;
}
.img {
width: 200rpx;
height: 136rpx;
border-radius: 16rpx;
padding: 10rpx 12rpx 8rpx 12rpx;
margin-bottom: 16rpx;
background: #F2ECDF;
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.12);
overflow: hidden;
}
.item:nth-child(2) .img {
background: #fff;
}
.item:nth-child(3) .img,
.item:nth-child(4) .img{
background: #d9d9d9;
}
.title {
font-size: 28rpx;
font-weight: 700;
}
}
.private-custom {
.title {
position: relative;
margin-bottom: 24rpx;
font-size: 32rpx;
font-weight: 700;
&::after {
content: '';
width: 128rpx;
height: 44rpx;
position: absolute;
left: -8rpx;
bottom: -24rpx;
background: url('@/static/img/album/private-custom.png') no-repeat;
}
}
.demo-water {
// margin-bottom: 16rpx;
/deep/.u-wrap,
/deep/.u-lazy-item {
broder-radius: 16rpx 16rpx 0 0 !important;
}
}
.left.demo-water {
margin-right: 14rpx;
}
.info-box {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 170rpx;
position: relative;
top: -16rpx;
padding: 16rpx;
box-sizing: border-box;
border-radius: 0 0 16rpx 16rpx;
color: #fff;
.item-title {
font-size: 28rpx;
font-weight: 700;
}
.slogan {
font-size: 24rpx;
}
.img-btn {
display: flex;
justify-content: center;
align-items: center;
width: 160rpx;
height: 40rpx;
border-radius: 20rpx;
background-color: #E1E1D9;
color: #333;
font-size: 22rpx;
}
.bottom {
display: flex;
justify-content: space-between;
.count {
font-size: 28rpx;
color: #ececec;
}
}
}
}
</style>
\ No newline at end of file
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