<template>
<view>
<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">编辑资料</block>
</cu-custom> -->
<view>
<camera :device-position="device" :flash="flash" @error="error"
:style="{ width: '100%', position: 'relative', height: getHeight + 'px' }">
<cover-view class="topBox">
<cover-view class="topItem text-bold text-xl">你的美丽你知道！</cover-view>
<cover-view class="topItem">{{ nowTime2 }}</cover-view>
<cover-view class="topItem">{{ nowTime }}</cover-view>
<cover-view class="topItem">{{ address }}</cover-view>
</cover-view>
<cover-image @click="xzBtn" class="xzImg" src="https://cdn.zhoukaiwen.com/xz.png"></cover-image>
<cover-image @click="sgdBtn" class="sgdImg" :src="sgdUrl"></cover-image>
<cover-view class="cameraBtn" @click="takePhoto">
<cover-view class="cameraBtn2"></cover-view>
</cover-view>
<cover-view class="bottomBtn" v-if="imgList.length < 1">
<cover-view @click="history" class="btn">历史</cover-view>
<cover-view class="btn" @click="goBack">取消</cover-view>
</cover-view>
<cover-view class="bottomBg" v-if="imgList.length > 0">
<cover-view>
<cover-view @click="ViewImage(index)" class="imgBox" v-for="(item, index) in imgList"
:key="index">
<cover-image class="imgItem" :src="item.src" mode="aspectFill"></cover-image>
<cover-view class="cu-tag" @tap.stop="DelImg" :data-index="index">
<cover-image class="iconClose" src="https://cdn.zhoukaiwen.com/icon_close.png"
mode="aspectFill"></cover-image>
</cover-view>
</cover-view>
</cover-view>
<cover-view @click="reportBtn" class="report">上报（{{ imgList.length }}）</cover-view>
</cover-view>
<cover-view v-if="rreportShow" class="reportBox animation-slide-bottom">
<cover-view class="text-lg margin-left-sm margin-bottom-sm"
style="height:78rpx;line-height: 78rpx;">请选择照片备注内容</cover-view>
<cover-view class="listBox">
<cover-view class="item active">韩系淡妆</cover-view>
<cover-view class="item">幼态短中庭</cover-view>
<cover-view class="item">淡颜减龄</cover-view>
<cover-view class="item">证件照装</cover-view>
<cover-view class="item">国泰民安</cover-view>
<cover-view class="item">阳光青梅</cover-view>
<cover-view class="item">韩系女主</cover-view>
<cover-view class="item">贵气中国风</cover-view>
</cover-view>
<cover-view @click="endBtn" class="repBtn">上传</cover-view>
</cover-view>
</camera>
<view style="position: absolute;top: -999999px;">
<view><canvas :style="{ width: w, height: h }" canvas-id="firstCanvas"></canvas></view>
</view>
</view>
</view>
</template>
<script>
import QQMapWX from "../../common/qqmap-wx-jssdk.js";
export default {
data() {
return {
getHeight: '200',
device: 'back', //前置或后置摄像头，值为front, back
flash: 'off', //闪光灯，值为auto, on, off
nowTime: '', //日期
nowTime2: '', //时间
address: '', //当前地址信息
sgdUrl: 'https://cdn.zhoukaiwen.com/sgd.png',
imgList: [
// {
// src: "https://cdn.zhoukaiwen.com/angular.jpg"
// }
],
imgListData: '',
rreportShow: false, //选择照片备注内容弹窗
src: '',
w: '',
h: ''
}
},
onLoad() {
const that = this;
var qqmapsdk;
uni.getSystemInfo({
success: function (res) {
that.getHeight = res.windowHeight;
}
});
uni.showModal({
title: '你的美丽你知道！',
content: '留下你的美🌹，世界因你而美丽！🌍',
showCancel: false,
confirmText: '最美不过我自己，🌺！',
confirmColor: '#3056F6',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
});
this.getTime();
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
qqmapsdk = new QQMapWX({
key: "HMUBZ-PQLEG-6I3QM-Q67MV-7FXK3-FTF6H" //自己申请的key
});
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success(addressRes) {
console.log(addressRes)
that.address = addressRes.result.formatted_addresses.standard_address;
console.log('当前位置的详细地址：' + addressRes.result.formatted_addresses.standard_address);
},
fail(res) { }
});
}
});
},
methods: {
// 上报：最终上报
endBtn() {
this.rreportShow = false;
this.imgList = [];
},
// 上报：选择类型
reportBtn() {
this.rreportShow = true;
var str = this.imgListData;
var newImgData = this.imgListData.substr(0, this.imgListData.length - 1);
console.log(newImgData,'上报的图片')
},
xzBtn() {
if (this.device == 'front') {
this.device = 'back'
} else {
this.device = 'front'
}
},
sgdBtn() {
if (this.flash == 'off') {
this.flash = 'on'
this.sgdUrl = 'https://cdn.zhoukaiwen.com/sgd_on.png'
} else {
this.flash = 'off'
this.sgdUrl = 'https://cdn.zhoukaiwen.com/sgd.png'
}
},
DelImg(e) {
uni.showModal({
// title: '异常照片',
content: '确定要删除这张照片吗？',
cancelText: '取消',
confirmText: '确认',
success: res => {
if (res.confirm) {
console.log(e)
this.imgList.splice(e.currentTarget.dataset.index, 1)
console.log(this.imgList)
var arr = this.imgList;
var str = '';
for (var i = 0; i < arr.length; i++) {
str += arr[i].src + ",";
}
this.imgListData = str;
console.log(this.imgListData)
}
}
})
},
// 查看照片
ViewImage(index) {
const imgList = [this.imgList[index].src];
console.log(imgList,'拍的照片查看')
uni.previewImage({
urls: imgList
});
},
// 点击拍照
takePhoto() {
var that = this;
if (this.imgList.length < 1) {
const ctx = uni.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: (res) => {
var tempImagePath = res.tempImagePath;
// 获取图片信息
uni.getImageInfo({
src: res.tempImagePath,
success: ress => {
that.w = ress.width / 3 + 'px';
that.h = ress.height / 3.01 + 'px';
let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */
//将图片src放到cancas内，宽高为图片大小
ctx.drawImage(res.tempImagePath, 0, 0, ress.width / 3, ress.height / 3);
ctx.setFontSize(12);
ctx.setFillStyle('#FFFFFF');
// ctx.rotate(30 * Math.PI / 180);
let textToWidth = (ress.width / 3) * 0.03;
let textToHeight = (ress.height / 3) * 0.9;
ctx.fillText('最美我自己！🌹', textToWidth, textToHeight);
ctx.setFontSize(10);
let textToHeight2 = (ress.height / 3) * 0.94;
ctx.fillText(that.nowTime + ' ' + that.nowTime2, textToWidth, textToHeight2);
let textToHeight3 = (ress.height / 3) * 0.98;
ctx.fillText(that.address, textToWidth, textToHeight3);
ctx.draw(false, () => {
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: res1 => {
tempImagePath = res1.tempFilePath;
console.log('----------', tempImagePath);
this.imgList.push({
src: tempImagePath
})
console.log(this.imgList,'拍的图片数组');
var arr = this.imgList
var str = '';
for (var i = 0; i < arr.length; i++) {
str += arr[i].src + ",";
}
this.imgListData = str;
console.log(this.imgListData,"拍的图片")
}
});
}, 1000);
});
}
});
}
});
} else {
uni.showToast({
title: '最大上传1张照片',
duration: 2000,
icon: 'none'
});
}
},
error(e) {
console.log(e.detail);
},
getTime: function () {
var date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
month >= 1 && month <= 9 ? (month = "0" + month) : "";
day >= 0 && day <= 9 ? (day = "0" + day) : "";
var timer = year + '年' + month + '月' + day + '日';
var timer2 = hour + ':' + minute + ':' + second;
this.nowTime = timer;
this.nowTime2 = timer2;
console.log(this.nowTime);
console.log(this.nowTime2);
},
goBack() {
uni.navigateBack({
delta: 1
});
},
history() {
uni.navigateTo({
url: 'timeline'
})
}
}
}
</script>
<style lang="scss">
.topBox {
width: 750rpx;
box-sizing: border-box;
padding: 30rpx;
color: #EEEEEE;
font-size: 34rpx;
.topItem {
width: 100%;
white-space: pre-wrap;
margin-bottom: 15rpx;
}
}
.cameraBtn {
width: 120rpx;
height: 120rpx;
line-height: 120rpx;
border: 6rpx #FFFFFF solid;
border-radius: 50%;
padding: 8rpx;
position: absolute;
left: calc(50% - 60rpx);
bottom: 210rpx;
}
.cameraBtn2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #FFFFFF;
text-align: center;
color: #007AFF;
}
.xzImg {
width: 52rpx;
height: auto;
position: absolute;
right: 44rpx;
bottom: 580rpx;
}
.sgdImg {
width: 40rpx;
height: auto;
position: absolute;
right: 50rpx;
bottom: 450rpx;
}
.bottomBtn {
width: 100%;
height: 150rpx;
padding-bottom: 15rpx;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
display: flex;
justify-content: space-between;
.btn {
width: 30%;
height: 150rpx;
font-size: 34rpx;
color: #FFFFFF;
line-height: 150rpx;
}
}
.bottomBg {
width: 100%;
height: 170rpx;
box-sizing: border-box;
padding: 20rpx 30rpx 40rpx;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .8);
display: flex;
justify-content: space-between;
align-items: center;
.imgBox {
width: 110rpx;
height: 110rpx;
float: left;
margin-right: 40rpx;
position: relative;
.cu-tag {
position: absolute;
right: 0;
top: 0;
border-bottom-left-radius: 2px;
padding: 3px 5px;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
font-size: 10px;
vertical-align: middle;
font-family: Helvetica Neue, Helvetica, sans-serif;
white-space: nowrap;
color: #ffffff;
}
}
.imgItem {
width: 110rpx;
height: 110rpx;
}
}
.report {
height: 68rpx;
line-height: 68rpx;
text-align: center;
color: #FFFFFF;
box-sizing: border-box;
padding: 0rpx 20rpx;
border-radius: 10rpx;
background-color: #2157FF;
}
.iconClose {
width: 20rpx;
height: 20rpx;
}
.reportBox {
width: 750rpx;
height: auto;
box-sizing: border-box;
padding: 10rpx 20rpx;
background-color: #FFFFFF;
position: absolute;
bottom: 0;
}
.listBox {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item {
width: 160rpx;
height: 68rpx;
line-height: 68rpx;
text-align: center;
background: #F7F7F9;
margin-bottom: 40rpx;
color: #888888;
}
.active {
background-color: #F1F7FF;
color: #025ADD;
}
.repBtn {
width: 680rpx;
height: 78rpx;
line-height: 78rpx;
background-color: #025ADD;
color: #FFFFFF;
font-size: 33rpx;
text-align: center;
border-radius: 10rpx;
margin: 5rpx auto 20rpx;
}
</style>
上述组件中首先我用到了定位，大家可以在腾讯地图控制台中配置相关所需，具体配置的大家可以查看我往期的文档我都有编写，这里只是给大家分享一个组件，具体的功能还得大家自己实现、