Skip to content

S
self-support
Commit c4bb6193 authored by Damon's avatar Damon
Browse files
Options

公共组件-相机

parent eb807255
Hide whitespace changes
Inline Side-by-side
Showing with 1946 additions and 32 deletions
src/App.vue
View file @ c4bb6193
......@@ -46,14 +46,37 @@ export default {
// 授权用户信息
authUserInfo: "",
// 用户入驻信息
settledInfo: {},
settledInfo: {},
navHeight: 0, //导航栏高度
rpxScreenHeight: 0,// 照相视框高度
safeHeight:0, // 安全高度
//拍照相关数据
photo: {
product: {
brandId: '', // 品牌id
brandName: '', // 品牌名称
classifyId: '', // 分类id
systemId: '', // 系统id
},
topIndex:0,
itemIndex:0,
currentItemLength: 0,//已拍摄照片张数
productList: [],
currentItem: null, // 选择的某一项
setting: null, //自定义设置
waterSetting: null, // 水印设置
tempPath: {
origin: '', // 缓存拍照图片
mixWater: '' // 缓存水印拍照图片
}
},
},
onLaunch: function () {
// 应用初始化（全局只触发一次）
AnalysysAgent.registerSuperProperty("platform", "self-support");
this.getSystemInfo()
// 版本更新
this.updateApp();
},
......@@ -64,7 +87,22 @@ export default {
onHide: function () {
// 应用从前台进入后台
},
methods: {
methods: {
getSystemInfo() {
try {
let a = wx.getSystemInfoSync();
// this.globalData.platform = systemInfo.platform, this.globalData.pixelRatio = a.pixelRatio,
// this.globalData.statusBarHeight = a.statusBarHeight, this.globalData.navHeight = a.statusBarHeight / a.screenWidth * 750 + 90,
// this.globalData.rpxScreenHeight = a.screenHeight / a.screenWidth * 750, this.globalData.screenWidth = a.screenWidth,
// this.globalData.screenHeight = a.screenHeight;
this.globalData.navHeight = a.statusBarHeight / a.screenWidth * 750 + 90
this.globalData.rpxScreenHeight = a.screenHeight / a.screenWidth * 750
this.globalData.screenHeight = a.screenHeight
this.globalData.safeHeight = a.safeArea.bottom
} catch (a) {
}
},
async getBaseInfo(vm, callBack) {
uni.showLoading({
title: "加载中……",
......
src/common/api/common.js
View file @ c4bb6193
let commonApiFun = function(vm){
let loginWxByUser = async (params = {}) => await vm.$u.get('/wxh-support-rest/rest/ssoinfo/v3/getUsersByCode', params);
let loginWxByPhone = async (params = {}) => await vm.$u.post('/wxh-support-rest/rest/ssoinfo/v3/findByMobile', params,{'content-type': 'application/x-www-form-urlencoded'});
let loginWechatAuth = async (params = {}) => await vm.$u.post('/wxh-support-rest/rest/ssoinfo/wxapp/unify/authorization', params, {'content-type': 'application/x-www-form-urlencoded'});
let loginWechatAuth = async (params = {}) => await vm.$u.post('/wxh-support-rest/rest/ssoinfo/wxapp/unify/authorization', params, {'content-type': 'application/x-www-form-urlencoded'});
// 水印-查询用户自定义设置
let getUserWatermark = async (params = {}) => await vm.$u.post('http://apidoc.banshouhui.com:3000/mock/89/getUserWatermark', params);
// 水印-保存用户自定义设置
let saveUserWatermark = async (params = {}) => await vm.$u.post('http://apidoc.banshouhui.com:3000/mock/89/saveUserWatermark', params);
// 保存图片
let saveImage = async (params = {}) => await vm.$u.post('http://apidoc.banshouhui.com:3000/mock/89/saveImage', params);
const commonApi = {
loginWxByUser,
loginWxByPhone,
loginWechatAuth,
loginWechatAuth,
getUserWatermark,
saveUserWatermark,
saveImage
}
return commonApi
}
......
src/components/photo/preview.vue 0 → 100644
View file @ c4bb6193
<template>
<view>
<view class="contentView">
<!-- <u-image class="pic" :src="files[0]" bg-color="transparent" @click="showPreviewFn"></u-image> -->
<image class="pic" :src="files[0]" v-lazy mode="aspectFit" @click="showPreviewFn"></image>
</view>
<view class="bottomView">
<image class="btn" :src="btn_remake" @click="$u.throttle(remakePhoto, 3000)"></image>
<image class="btn" :src="btn_continue" @click="$u.throttle(continuePhoto, 3000)"></image>
</view>
<image class="btn finish" src="/static/photo/finish.png" @click="$u.throttle(finishPhoto, 3000)"></image>
</view>
</template>
<script>
import qiniup from '@/components/upload/qiniup';
const app = getApp()
export default {
props: {},
mixins: [qiniup],
data() {
return {
protocolContent: '',
btn_remake: 'https://qn-static.banshouhui.com/take_order/photo/remake.png',
btn_continue: '/static/photo/continue.png',
standardId: '',
images: [],
files: [],
fileMaps: [],
keys: [],
token: '',
product: '',
}
},
created(e) {
// 获取照片选项对象
console.log(getApp().globalData.photo.currentItem)
const product = app.globalData.photo.product
this.product = `?brandId=${product.brandId}&brand=${product.brandName}&classifyId=${product.classifyId}&systemId=${product.systemId}`
// if(app.globalData.photo.currentItem) {
// // 获取规格Id
// this.standardId = app.globalData.photo.currentItem._id
// }
getApp().trackPage('照片预览页')
const globalTempPath = getApp().globalData.photo.tempPath
if(globalTempPath && globalTempPath.mixWater){
this.files = [globalTempPath.mixWater]
}
// if(e.standardId) {
// this.standardId = e.standardId
// }
console.log(this.files)
this.token = getApp().globalData.token
},
methods: {
// 保存照片到本地
async saveTempToLocal(tempImagePath) {
//has_origin //是否保存原图
let that = this
const photo = getApp().globalData.photo
if(!photo.tempPath){
return
}
let path = ''
if(photo.tempPath.origin && photo.waterSetting && photo.waterSetting.has_origin){
// 保存原图到本地
path = photo.tempPath.origin
let result = await this.saveLocal(path)
if(result){
uni.showToast({
icon: 'none',
title: '已将照片原图保存到本地相册'
})
}
}
if(photo.currentItem){
photo.currentItem.imageList.unshift(photo.tempPath.mixWater)
}
// if(photo.productList && photo.productList[photo.topIndex]){
// const topArr = photo.productList[photo.topIndex]
// if(topArr[photo.itemIndex]){
// topArr[photo.itemIndex].imageList.push(photo.tempPath.mixWater)
// }
// }
// photo.
if(photo.tempPath.mixWater){
// 保存水印处理图片到本地
path = photo.tempPath.mixWater
let result1 = await this.saveLocal(path)
if(result1){
uni.showToast({
icon: 'none',
title: '已将水印图片保存到本地相册'
})
}
}
},
saveLocal(path){
return new Promise((resolve,reject)=>{
uni.saveImageToPhotosAlbum({
filePath: path,
success() {
resolve(true)
},
fail() {
reject('保存失败')
}
})
})
},
showPreviewFn(img) {
uni.previewImage({
current: 0,
urls: this.files
});
},
// 重拍图片
remakePhoto() {
this.$emit('changeType', 1)
},
finishPhoto(){
const photo = getApp().globalData.photo
photo.currentItemLength = 10
this.continuePhoto()
// 完成本项
this.$emit('finish')
},
// 确认图片
continuePhoto() {
const photo = getApp().globalData.photo
let self = this
uni.showLoading({
title:'图片保存中…'
})
self.saveTempToLocal()
self.confirmUpload(true)
},
submitFile() {
let self = this
if(self.keys.length) {
for (let s of self.keys) {
self.$u.api.saveImage({
"token": self.token,
"standardId": self.standardId,
"url": s,
}).then(async res =>{
console.log(res, "云服务保存图片");
if(res.result.code) {
// TODO 参数是否要来回传递
const photo = getApp().globalData.photo
photo.currentItemLength = photo.currentItemLength + 1
uni.hideLoading()
// 当前项的图片显示
// 拍照项张数目增加 等于10张
if(photo.currentItemLength<10){
this.$emit('changeType', 1)
}else{
this.$emit('finish')
}
} else {
uni.showToast({
title:'图片上传失败 '+ res.result.msg
})
}
})
}
}
},
downloadImages() {
let self = this;
for (let url of this.images) {
uni.downloadFile({
url: url, //仅为示例，并非真实的资源
success(res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
self.files.push(res.tempFilePath)
}
},
fail(e) {
debugger
}
})
}
},
}
}
</script>
<style lang="scss">
.contentView {
background-color: #333333;
/* padding-top: 120rpx; */
padding-bottom:228rpx;
height: 100vh;
display: flex;
flex-direction: column;
}
/deep/ .u-image{
height:100%!important;
}
/deep/ .u-image__loading{
background-color: transparent!important;
}
/deep/ .u-image__error{
background-color: transparent!important;
}
.pic {
flex:1;
width: 100%;
/* height:auto */
/* height: 760rpx; */
}
.bottomView {
box-shadow: 0 0 1rpx 6rpx rgba(255,255,255,0.05);
background-color: #333333;
width: 100%;
padding:70rpx 0;
position: fixed;
bottom: 0;
display: flex;
justify-content: space-around;
align-items: center;
.btn{
display: block;
width: 200rpx;
height: 88rpx;
}
}
.btn{
display: block;
width: 232rpx;
height: 80rpx;
&.finish{
position: fixed;
top:180rpx;
right:30rpx;
}
}
</style>
src/components/photo/setting.vue 0 → 100644
View file @ c4bb6193
<template>
<view class="backView">
<u-navbar title="设置" :title-size="26" title-color="#000" :custom-back="backTake"></u-navbar>
<view class="shadowBackView" style="background-color: transparent;z-index: 1" v-if="loading">
<u-loading style="position: fixed;top: 50%;" :show="loading" size="36" mode="flower"></u-loading>
</view>
<view class="itemView firstItem">
<view class="itemTitleView">
<text class="itemTitle">保存原图</text>
<text class="itemNotice">拍照后另保存一张无水印的图片</text>
</view>
<switch class="itemSwitch" :checked="result['has_origin']" @change="handleOrigineChange" color="#007AFF" />
</view>
<view class="itemView" v-if="showTitleSwitch">
<view class="itemTitleView" @click="itemClick({},-1)">
<text class="itemTitle">水印标题</text>
<text class="itemNotice">{{result['lower_right']['title_text'] || '点击可编辑更改'}}</text>
</view>
<switch class="itemSwitch" disabled :checked="result['lower_right']['title_text'] != ''"
@click="handleClickTitleSwitch" color="#007AFF" />
</view>
<view class="itemView" v-for="(item,ikey) in itemList" :key="ikey">
<view class="itemTitleView" @click="itemClick(item,ikey)">
<text class="itemTitle">{{item['watemark_text'] || '自定义' + (ikey + 1)}}</text>
<text class="itemNotice">{{item['watemark_value'] || '点击可编辑更改'}}</text>
</view>
<switch class="itemSwitch" :checked="item['enable']" @change="itemChange(item, ikey)" color="#007AFF" />
</view>
<u-popup border-radius="10" v-model="isPopShow" safe-area-inset-bottom :mask-close-able="false" mode="center"
width="690rpx" height="600rpx" @close="handlePopClose">
<view class="popCenterView">
<text class="popTitle">设置自定义项</text>
<view class="inputBackView">
<view class="ph-pop-left-view">
<view class="leftInputView">
<input class="leftInput" type="text" v-model="currenItem['watemark_text']"
@input="leftInput()" :disabled="currenItem.type === 'title_text'" placeholder="请输入"
maxlength="10" />
</view>
<view class="ph-pop-tip-view" v-if="showTipLeft">*必填项</view>
</view>
<view class="ph-pop-mid-view">：</view>
<view>
<view class="rightInputView">
<input class="rightInput" type="text" v-model="currenItem['watemark_value']"
@input="rightInput()" placeholder="请输入内容" maxlength="30" />
</view>
<view class="ph-pop-tip-view" v-if="showTipRight">*必填项</view>
</view>
</view>
<text class="popNoticeText u-m-t-20">示例：</text>
<text class="popNoticeText">工程队名称：蓝天工程队</text>
<view class="popBtnView">
<u-button :custom-style="customStyleCancel" hover-class="none" shape="circle" type="primary" @click="popCancelClick()">
取消
</u-button>
<u-button :custom-style="customStyleSave" shape="circle" type="primary" @click="popSaveClick()">
保存
</u-button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
systemId: '',
isSaveOrigine: true,
isPopShow: false,
icon_close_new: '',
result: {
has_origin: true,
lower_right: {
body: []
}
},
currenItem: {
'watemark_text': '',
'watemark_value': ''
},
editingItem: {},
showTipLeft: false,
showTipRight: false,
loading: true
}
},
computed: {
itemList() {
if (this.result['lower_right']) {
var arr = this.result['lower_right']['body']
return arr.filter((item) => {
return item.watemark_type === '备注'
})
} else {
return []
}
},
showTitleSwitch() {
return this.result['lower_right'].hasOwnProperty('title_text')
},
customStyleCancel() {
return {
'background-color': '#D1D4D4',
'width': '280rpx',
'height': '96rpx'
}
},
customStyleSave() {
return {
'background-color': '##2272FF',
'width': '280rpx',
'height': '96rpx',
'margin-left': '50rpx'
}
}
},
created(e) {
getApp().trackPage('水印设置页')
const globalData = getApp().globalData
this.icon_close_new = globalData.icon_close_new
this.systemId = globalData.photo.product.systemId
this.getItemList()
},
methods: {
getItemList: function() {
// this.systemId = '79550af260555cc20afb34156c94b32c' // 测试数据
this.loading = true
this.$u.api.getUserWatermark({
'token': getApp().globalData.token,
'system_id': this.systemId
}).then(res => {
if (res && res.result) {
if(res.result.error_code){
uni.showToast({title: res.result.error_msg})
}else{
this.result = res.result
}
}else{
uni.showToast({title: '网络异常'})
}
this.loading = false
})
},
saveUserWatermark: function() {
this.loading = true
this.$u.api.saveUserWatermark({
'token': getApp().globalData.token,
'watermark': this.result
}).then(res => {
if (res.result.code == true) {
const photo = getApp().globalData.photo
photo.waterSetting = this.result
}else{
uni.showToast({title: res.result.msg})
}
this.loading = false
})
},
//保存原图 开关
handleOrigineChange: function(e) {
this.result['has_origin'] = !this.result['has_origin']
this.saveUserWatermark()
},
handleClickTitleSwitch: function(e) {
var string = this.result['lower_right']['title_text'] ? '水印标题不可关闭' : '请先编辑该自定义项'
uni.showToast({
icon: 'none',
title: string
})
},
//自定义 开关
itemChange: function(item, ikey) {
if (item['watemark_value']) {
// 修改
item['enable'] = !item['enable']
this.saveUserWatermark()
} else {
uni.showToast({
icon: 'none',
title: '请先编辑该自定义项'
})
}
},
//自定义 点击
itemClick: function(item, ikey) {
if (ikey === -1) {
this.currenItem = {
'watemark_text': '水印标题',
'watemark_value': this.result['lower_right']['title_text'],
'type': 'title_text'
}
} else {
this.editingItem = item
this.currenItem = {
...item
}
}
this.isPopShow = true
},
//左侧输入框
leftInput: function(e) {
if (this.currenItem['watemark_text']) {
this.showTipLeft = false
}
},
//右侧输入框
rightInput: function(e) {
if (this.currenItem['watemark_value']) {
this.showTipRight = false
}
},
//自定义弹窗 关闭
popCancelClick: function() {
this.isPopShow = false
this.currenItem = {
'watemark_text': '',
'watemark_value': ''
}
},
handlePopClose() {
this.showTipLeft = false,
this.showTipRight = false
},
backTake() {
this.$emit('changeType', 1)
},
//自定义弹窗 保存
popSaveClick: function() {
if (this.currenItem['watemark_text'] && this.currenItem['watemark_value']) {
this.isPopShow = false
if (this.currenItem.type === 'title_text') {
this.result['lower_right']['title_text'] = this.currenItem['watemark_value']
} else {
this.editingItem['watemark_text'] = this.currenItem['watemark_text']
this.editingItem['watemark_value'] = this.currenItem['watemark_value']
this.editingItem['enable'] = true
}
this.saveUserWatermark()
} else {
// 提示
if (!this.currenItem['watemark_text']) {
this.showTipLeft = true
}
if (!this.currenItem['watemark_value']) {
this.showTipRight = true
}
}
}
}
}
</script>
<style>
.backView {
background-color: #FAFAFA;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/*
.firstItemView{
background-color: #FFFFFF;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-top: 80rpx;
padding-bottom: 80rpx;
border-bottom: 2rpx solid #F4F5F7;
} */
.itemView {
background-color: #FFFFFF;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-top: 54rpx;
padding-bottom: 54rpx;
}
.itemView.firstItem {
border-bottom: 2rpx solid #F4F5F7;
}
.itemTitleView {
background-color: #FFFFFF;
width: 80%;
display: flex;
flex-direction: column;
padding-left: 30rpx;
}
.itemTitle {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
.itemNotice {
font-size: 26rpx;
color: #666666;
margin-top: 4rpx;
}
.itemSwitch {
margin-right: 30rpx;
transform: scale(0.78, 0.75);
}
.shadowBackView {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.popCenterView {
background-color: #FFFFFF;
display: flex;
flex-direction: column;
}
.popTitle {
font-size: 36rpx;
font-weight: bold;
margin-top: 50rpx;
padding-left: 30rpx;
}
.inputBackView {
margin-top: 52rpx;
width: 100%;
height: 90rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
display: flex;
align-items: flex-start;
}
.leftInputView {
width: 220rpx;
height: 72rpx;
border: 2rpx solid #666666;
display: flex;
align-items: center;
justify-content: center;
}
.leftInput {
width: 180rpx;
height: 32rpx;
}
.ph-pop-left-view {
margin-left: 30rpx;
}
.ph-pop-tip-view {
color: #F56C6C;
}
.ph-pop-mid-view {
margin-top: 20rpx;
}
.rightInputView {
width: 360rpx;
height: 72rpx;
border: 2rpx solid #666666;
margin-right: 30rpx;
display: flex;
align-items: center;
justify-content: center;
}
.rightInput {
width: 320rpx;
height: 32rpx;
}
.popNoticeText {
font-size: 26rpx;
color: #666666;
padding-left: 30rpx;
}
.popBtnView {
margin-top: 110rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* .popCancelBtn {
background-color: #D1D4D4;
width: 280rpx;
height: 96rpx;
border-radius: 48rpx;
margin-left: 40rpx;
display: flex;
align-items: center;
justify-content: center;
} */
/* .popSaveBtn {
background-color: #2272FF;
width: 280rpx;
height: 96rpx;
border-radius: 48rpx;
margin-right: 40rpx;
display: flex;
align-items: center;
justify-content: center;
} */
/* .popBtnText {
font-size: 32rpx;
color: #FFFFFF;
font-weight: 600;
} */
</style>
src/components/photo/standard - 副本.vue 0 → 100644
View file @ c4bb6193
<!-- 拍照规范弹窗 -->
<template>
<view class="standard-box">
<swiper class="swiper-box" :current="swiperCurrent" @change="changeTab" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item" key="swiper1">
<view class="title">
拍照要求
</view>
<view class="txt-box" >
<view class="txt" v-for="(txt,index) in currentItem.main_point" :key="index">
{{index+1}}. {{txt}}
</view>
<view class="txt tips">
注意：{{currentItem.note}}
</view>
</view>
</swiper-item>
<swiper-item class="swiper-item" v-for="(src, index) in swiperList" :key="index">
<image @click="previewImage(index)" class="icon" mode="aspectFit" :src="src"></image>
</swiper-item>
</swiper>
<view class="tab-box">
<u-tabs-swiper bg-color="transparent" inactive-color="#999"
ref="uTabs" :list="tabList" :current="current"
@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
</view>
</view>
</template>
<script>
export default {
name:"photo-standard",
props:{
currentItem:{
type: Object,
default () {
return {
images: [],
}
}
},
},
data() {
return {
tabList: [{
name: '十年'
}, {
name: '青春'
}, {
name: '之约'
}],
swiperList:[],
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
height:0,
}
},
watch:{
"currentItem.images"(val){
if(val.length>0){
this.changeList(val)
// let swiperList = JSON.parse(JSON.stringify(val))
// let len = tabs.length
// let tabList = [{name:'拍照要求'}].concat(Array.from({name:'示意图'},len))
// console.log(tabList,'tabList')
}
},
},
created() {
// getApp().trackPage('照片预览页')
// console.log(e, 'e')
// if (e.img) {
// this.images = [e.img]
// }
// console.log(this.images, 'this.images')
},
mounted(){
this.changeList(this.currentItem.images)
this.getSwiperHeight()
},
methods: {
changeList(list){
let swiperList = JSON.parse(JSON.stringify(list))
let len = list.length
let tabList = []
for(let i=0;i<len;i++){
let item = {
name:'示意图' + (i + 1)
}
tabList.push(item)
}
tabList = [{name:'拍照要求'}].concat(tabList)
this.swiperList = swiperList
this.tabList = tabList
},
getSwiperHeight(){
const globalData = getApp().globalData
this.height = globalData.screenHeight*2 - globalData.navHeight - 200
},
previewImage(index){
uni.previewImage({
current:index,
urls:this.swiperList,
})
},
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index;
},
// swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) {
// console.log(e.detail,'e.detail-transition')
// let dx = e.detail.dx;
// this.$refs.uTabs.setDx(dx);
},
changeTab(){
this.current = this.swiperCurrent
},
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
// console.log(e.detail,'e.detail-animationfinish')
// let current = e.detail.current;
// this.$refs.uTabs.setFinishCurrent(current);
// this.swiperCurrent = current;
// this.current = current;
},
// scroll-view到底部加载更多
onreachBottom() {
}
}
}
</script>
<style lang="scss">
.standard-box{
position: absolute;
left:0;right:0;
/* height: calc(100vh - 240rpx); */
z-index: 100;
bottom:240rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color:#fff;
}
.swiper-box{
width: 690rpx;
min-height: 690rpx;
margin-bottom: 150rpx;
border-radius: 12rpx;
background-color: #fff;
}
.tab-box{
position: absolute;
bottom:0;
left:30rpx;
right:30rpx;
}
.swiper-item{
box-sizing: border-box;
// width:690rpx;
padding:30rpx;
.title{
margin-top:20rpx;
font-weight: bold;
line-height: 50rpx;
color:#333;
font-size: 36rpx;
}
&>image{
width:630rpx;
min-height: 630rpx;
}
.txt-box{
max-height: 560rpx;
overflow: auto;
}
.txt{
white-space: normal;
padding-top:26rpx;
line-height: 34rpx;
color:#666;
font-size: 28rpx;
&.tips{
padding-bottom:26rpx;
color:#D73400
}
}
}
/* .pic {
display: block;
width: 100%;
height: auto;
}
.scroll-view_H {
white-space: nowrap;
width: 750rpx;
height: 300rpx;
}
.view-content {
display: flex;
} */
</style>
src/components/photo/standard.vue 0 → 100644
View file @ c4bb6193
<template>
<view>
<view class="wrap">
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
@animationfinish="animationfinish">
<swiper-item class="swiper-item">
<view class="inner txt-inner" :style="{'background-image':'url(/static/photo/shadow-bg.png)'}">
<view class="title">
拍照要求
</view>
<view class="txt-box" >
<view class="txt" v-for="(txt,index) in currentItem.main_point" :key="index">
{{index+1}}. {{txt}}
</view>
<view class="txt tips" v-if="currentItem.note">
注意：{{currentItem.note}}
</view>
</view>
</view>
</swiper-item>
<swiper-item class="swiper-item" v-for="(src, index) in swiperList" :key="index">
<view class="inner pic">
<image @click="previewImage(index)" class="icon" mode="aspectFit" :src="src"></image>
</view>
</swiper-item>
</swiper>
<view class="u-tabs-box">
<u-tabs-swiper bg-color="transparent" inactive-color="#999" activeColor="#2272FF" ref="tabs"
:list="tabList" :current="current" @change="change" :is-scroll="false" swiperWidth="750">
</u-tabs-swiper>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
currentItem: {
type: Object,
default () {
return {
images: [],
}
}
},
},
data() {
return {
current: 0,
swiperCurrent: 0,
dx: 0,
};
},
onLoad() {},
computed: {
swiperList() {
let list = this.currentItem.images || []
return list
},
tabList() {
let list = this.currentItem.images || []
let swiperList = JSON.parse(JSON.stringify(list))
let len = list.length
let tabList = []
for (let i = 0; i < len; i++) {
let item = {
name: '示意图' + (i + 1)
}
tabList.push(item)
}
tabList = [{
name: '拍照要求'
}].concat(tabList)
return tabList
},
},
methods: {
previewImage(index){
uni.previewImage({
current:index,
urls:this.swiperList,
})
},
// tab栏切换
change(index) {
this.swiperCurrent = index;
// this.getOrderList(index);
},
transition({
detail: {
dx
}
}) {
this.$refs.tabs.setDx(dx);
},
animationfinish({
detail: {
current
}
}) {
this.$refs.tabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
}
}
};
</script>
<style>
/* #ifndef H5 */
page {
height: 100%;
background-color: #f2f2f2;
}
/* #endif */
</style>
<style lang="scss" scoped>
.wrap {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top) - 200rpx);
padding-top:100rpx;
width: 100%;
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);;
}
.swiper-box {
flex: 1;
}
.swiper-item {
display: flex;
align-items: center;
height: 100%;
padding: 0 30rpx;
box-sizing: border-box;
}
.swiper-item .inner {
padding: 30rpx;
background-color: #fff;
width:690rpx;
height: 690rpx;
overflow: hidden;
&.txt-inner{
background-position: bottom right;
background-size: 340rpx 380rpx;
background-repeat: no-repeat;
}
.title {
margin-top: 20rpx;
font-weight: bold;
line-height: 50rpx;
color: #333;
font-size: 36rpx;
}
&.pic{
padding:0;
background-color: transparent;
}
&>image {
width: 690rpx;
min-height: 690rpx;
}
.txt-box {
// max-height: 560rpx;
overflow: auto;
width:100%;
height: 560rpx;
}
.txt {
white-space: normal;
padding-top: 26rpx;
line-height: 34rpx;
color: #666;
font-size: 28rpx;
&.tips {
padding-bottom: 26rpx;
color: #D73400
}
}
}
</style>
src/components/take/index.vue 0 → 100644
View file @ c4bb6193
<template>
<view>
<view class="camera-container" v-if="showType === 1">
<cover-view class="header-box" :style="{'height':navHeight/2 + 'px'}">
<cover-view class="inner">
<cover-image @click="setCameraInfo('devicePosition')" class="icon" mode="aspectFit"
src="/static/photo/icon-switch.png"></cover-image>
<cover-image @click="setCameraInfo('flash')" class="icon" mode="aspectFit"
:src="'/static/photo/icon-light-' + cameraInfo.flash +'.png'"></cover-image>
<cover-image @click="changeType(3)" class="icon" mode="aspectFit"
src="/static/photo/icon-setting.png"></cover-image>
</cover-view>
</cover-view>
<camera class="camera-box" v-if="cameraChange&&!standardShow" :device-position="cameraInfo.devicePosition"
:flash="cameraInfo.flash" :style="{'height':cameraHeight/2 + 'px','top':parseInt(navHeight/2) + 'px'}"
@error="cameraError">
<cover-view class="mark-box">
<cover-view class="txt big" v-if="titleTxt">{{titleTxt}}</cover-view>
<cover-view class="txt" v-for="(txt,index) in settingTxtArr" :key="index">{{txt || '获取中'}}</cover-view>
<!-- <cover-view class="txt u-m-t-10">维度：{{waterInfo.latitude || '正在获取中...'}}</cover-view>
<cover-view class="txt u-m-t-10">地址：{{waterInfo.address || '正在获取中...'}}</cover-view>
<cover-view class="txt u-m-t-10">时间：{{waterInfo.date || '正在获取中...'}}</cover-view> -->
</cover-view>
<cover-image class="mark-water" mode="aspectFit" :src="waterInfo.markImage"></cover-image>
</camera>
<cover-view class="bottom-box" v-if="!standardShow">
<cover-image class="icon" src='/static/photo/icon-back.png' mode="" @click="goBack"></cover-image>
<cover-image class='icon-take icon' src='/static/photo/icon-take.png' @click="$u.debounce(takePhoto, 500)"> </cover-image>
<cover-image class='icon' src='/static/photo/icon-standard.png' @click="standardShow = true"> </cover-image>
</cover-view>
<canvas canvas-id="canvas" id="photoCanvas" class="canvas"
:style="{'width':750 + 'rpx','height': cameraHeight + 'rpx'}"></canvas>
<view v-show="standardShow" class="page-mask" :z-index="10000">
<photo-standard :currentItem="currentItem" />
<view class="btn-close">
<image @click="closeShadow" class="icon icon-close" mode="aspectFit" src="/static/photo/icon-close.png">
</image>
</view>
</view>
</view>
<photo-preview v-if="showType === 2" @changeType="changeType" @finish="goBack" />
<photo-setting v-if="showType === 3" @changeType="changeType" />
</view>
</template>
// 加载该组件需要在当前页面隐藏顶部导航栏，然后加上自定义导航栏，通过状态切换显示隐藏
<!-- <u-navbar v-if="!takeStatus" :is-back="false" :title-size="26" title-color="#000" title="我的"></u-navbar> -->
<script>
let r = require("@/libs/bmap-wx.min.js");
let h = new r.BMapWX({
// ak: "rpVq5d3yxaRCoKzVwmFMo0o4iC524CAG",
ak: "iXsGdyEcm1iQONoUPyEp0hrBTLCuOaW2"
});
import standard from '@/components/photo/standard.vue'
import preview from '@/components/photo/preview.vue'
import setting from '@/components/photo/setting.vue'
export default {
props: {
currentItem: { // 拍照要求，示意图，system_id， standardId
type: Object,
default () {
return {
images: [
'https://qn-static.banshouhui.com/live_mark.png',
'https://qn-static.banshouhui.com/live_mark.png',
'https://qn-static.banshouhui.com/live_mark.png'
],
main_point: []
}
}
}
},
components: {
'photo-standard': standard,
'photo-preview': preview,
'photo-setting': setting,
},
data() {
return {
showType: 1,
standardShow: true,
cameraInfo: {
devicePosition: 'back',
flash: 'auto'
},
waterInfo: {
longitude: '', // 经度
latitude: '', // 维度
address: '', //地址
date: '', //日期
markImage: 'https://qn-static.banshouhui.com/live_mark.png'
},
tempImgs: {
'markImage': '', // 拍照水印
'origin': '', // 无水印照片
'mixWater': '', // 有水印照片
},
authSetting: {
camera: false, // 相机授权
location: false, // 位置授权
},
navHeight: 130,
cameraWidth: 750,
cameraHeight: 1000, // (4 / 3 * 750) 图片比例4：3
ratio: 0,
cameraChange: false,
waterSetting: null,
shadowInitShow: true, // 第一次进入页面需显示弹窗
}
},
created(e) {
const photo = getApp().globalData.photo
getApp().trackPage('拍照页')
// this.ctx = uni.createCameraContext();
this.updateTime()
this.getLocation()
this.getMarkPath()
this.initData()
//this.currentItem = photo.currentItem
},
computed: {
titleTxt() {
const waterSetting = this.waterSetting
let txt = ''
if (!waterSetting || !waterSetting.lower_right) {
return ''
}
txt = waterSetting.lower_right && waterSetting.lower_right.title_text || ''
return txt
},
settingTxtArr() {
let arr = []
// 包含经纬度
const waterInfo = this.waterInfo
arr = ['经度：' + waterInfo.longitude, '纬度：' + waterInfo.latitude, '地址：' + waterInfo.address, '时间：' +
waterInfo.date
]
let settingTxtArr = []
const typeArr = ['经度', '纬度', '地址', '时间']
const waterSetting = this.waterSetting
if (!waterSetting || !waterSetting.lower_right || !waterSetting.lower_right.body) {
return arr
}
const settingArr = waterSetting.lower_right.body
settingArr.map(item => {
const idx = typeArr.indexOf(item.watemark_type)
if (item.enable && (idx > -1 || (item.watemark_value && item.watemark_text))) {
if (idx > -1) {
settingTxtArr.push(arr[idx])
} else {
settingTxtArr.push(item.watemark_text + '：' + item.watemark_value)
}
}
})
return settingTxtArr
}
},
watch: {},
mounted() {
// 默认开启弹窗
const photo = getApp().globalData.photo
this.waterSetting = photo.waterSetting
this.standardShow = this.shadowInitShow
this.cameraChange = true
// this.initData()
},
destroyed(){
this.cameraChange = false
},
methods: {
closeShadow() {
this.shadowInitShow = false
this.standardShow = false
},
goBack() {
uni.showTabBar()
this.$emit('close')
},
changeType(type) {
this.showType = type
},
updateTime() {
this.waterInfo.date = this.getTime()
// let timer = setTimeout(() => {
// clearTimeout(timer);
// this.updateTime()
// }, 1000)
},
setCameraInfo(type) {
// 设置相机前置后置、闪关灯等
const cameraInfo = this.cameraInfo
let val = cameraInfo[type]
switch (type) {
case 'devicePosition':
val = val === 'back' ? 'front' : 'back'
break;
case 'flash':
val = val === 'auto' ? 'on' : (val === 'on' ? 'off' : 'auto')
break;
defalut:
break;
}
this.cameraInfo[type] = val
},
initData() {
const globalData = getApp().globalData
this.navHeight = globalData.navHeight
this.cameraHeight = parseInt(globalData.safeHeight*2 - globalData.navHeight - 200)
this.ratio = globalData.screenHeight / globalData.rpxScreenHeight
this.waterSetting = globalData.photo.waterSetting
},
baiduLocation() {
// 百度sdk解析经纬度
let waterInfo = this.waterInfo
const t = function() {
let t = {
success: function(res) {
let e = res.wxMarkerData[0];
let i = e.address;
waterInfo.address = i
},
fail: function(err) {
//console.log(err, 'err')
}
};
if (waterInfo.latitude && waterInfo.longitude) {
let e = waterInfo.latitude + "," + waterInfo.longitude;
t.location = e;
}
h.regeocoding(t);
};
t()
},
cameraError(e) {
const {
errMsg
} = e.detail
// console.log(e.detail, 'e.detail')
if (errMsg !== 'insertCamera:fail auth deny') {
return
}
this.showSettingModal('camera')
},
//获取位置
getLocation() {
let that = this
const waterInfo = this.waterInfo
uni.getLocation({
type: 'gcj02',
success: function(res) {
waterInfo.longitude = parseFloat(res.longitude).toFixed(4)
waterInfo.latitude = parseFloat(res.latitude).toFixed(3)
that.baiduLocation()
},
fail(err) {
that.showSettingModal('location')
// that.showLocationAuthModal('')
}
});
},
showSettingModal(type) {
type = type || 'camera'
const self = this
let authSetting = {
'camera': {
content: '将无法进行拍照',
method: ''
},
'location': {
content: '将无法定位当前位置',
method: ''
},
'writePhotosAlbum': {
content: '将无法保存图片到本地',
method: ''
}
}
let content = authSetting[type].content
uni.showModal({
content: '拒绝授权' + content + '，是否去设置打开？',
confirmText: "确认",
cancelText: '取消',
success(res) {
if (res.confirm) {
self.openSetting()
}
},
fail() {}
})
},
openSetting() {
// 打开设置
let self = this
this.cameraChange = false
wx.openSetting({
success(res) {
const authSetting = res.authSetting
self.cameraChange = true
if (authSetting['scope.userLocation']) {
// 位置授权成功
self.authSetting.location = true
self.getLocation()
}
if (res.authSetting['scope.camera']) {
self.authSetting.camera = true
}
if (res.authSetting['scope.writePhotosAlbum']) {
self.authSetting.writePhotosAlbum = true
}
}
})
},
//获取 水印 本地缓存路径
getMarkPath: function() {
uni.downloadFile({
url: this.waterInfo.markImage, //仅为示例，并非真实的资源
success: (res) => {
if (res.statusCode === 200) {
this.tempImgs.markImage = res.tempFilePath
}
},
fail() {
console.log('水印图片 下载失败')
}
})
},
/* ---------------------- 拍照流程 ---------------------- */
// 第一步：拍照
takePhoto() {
wx.createCameraContext().takePhoto({
quality: "high"
}).then(res => {
this.tempImgs.origin = res.tempImagePath
this.drawCanvas(res.tempImagePath)
})
},
// 第二步：绘制画布
drawCanvas: function(tempPath) {
uni.showLoading({
title: '数据处理中...',
icon: 'loading'
})
const waterSetting = this.waterSetting
const globalTempPath = getApp().globalData.photo.tempPath
const ratio = this.ratio
console.log(this.ratio,'this.ratio')
// const ratio = 0.5
let canvasWidth = this.cameraWidth * ratio
let canvasHeight = this.cameraHeight * ratio
const waterInfo = this.waterInfo
this.showImage = true
const settingTxtArr = this.settingTxtArr
//将原图画到canvas上面
let canvas = uni.createCanvasContext("canvas", this)
canvas.rect(0, 0, canvasWidth, canvasHeight)
canvas.drawImage(tempPath, 0, 0, canvasWidth, canvasHeight)
// this.canvas.draw()
let txtHeight = 18
let h = 1
//加入 水印文字
for (let i = settingTxtArr.length - 1; i >= 0; i--) {
txtHeight = 20
canvas.setFontSize(15)
canvas.setFillStyle('#f2f2f2')
let txt = settingTxtArr[i]
if(txt.indexOf('时间')>=0){
canvas.fillText(txt, 10, canvasHeight - txtHeight * h++);
}else{
if(txt.length>22){
canvas.fillText(txt.substr(22,22), 10, canvasHeight - txtHeight * h++);
canvas.fillText(txt.substr(0,22), 10, canvasHeight - txtHeight * h++);
}else{
canvas.fillText(txt, 10, canvasHeight - txtHeight * h++);
}
}
// canvas.fillText(txt, 10, canvasHeight - txtHeight * h++);
}
const title = this.titleTxt
if (title) {
canvas.save()
let titleHeight = title.length > 14 ? 60 : 30
let rectWidth = title.length > 14 ? 215 : title.length*10
canvas.setFillStyle('rgba(34, 114, 255, 0.6)')
canvas.fillRect(10, canvasHeight - txtHeight * h - titleHeight, 215, titleHeight)
canvas.restore()
canvas.setFontSize(20)
canvas.setFillStyle('#f2f2f2')
// canvas.setTextAlign('center')
if (title.length > 14) {
canvas.fillText(title.substr(14, 14), 10, canvasHeight - txtHeight * h++ + 20);
}
canvas.fillText(title.substr(0, 14), 10, canvasHeight - txtHeight * h++ - titleHeight / 2 + 10);
}
if (this.waterSetting && this.waterSetting.mid_text) {
//加入 水印图片
canvas.drawImage(this.tempImgs.markImage, canvasWidth / 2 - 100, canvasHeight / 2 - 25, 200, 50)
}
// canvas.drawImage(this.tempImgs.markImage, canvasWidth / 2 - 100, canvasHeight / 2 - 25, 200, 50)
canvas.draw(false,
setTimeout(() => {
uni.canvasToTempFilePath({
width: canvasWidth,
height: canvasHeight,
canvasId: 'canvas',
success: (res) => {
this.tempImgs.mixWater = res.tempFilePath
globalTempPath.origin = this.tempImgs.origin
globalTempPath.mixWater = res.tempFilePath
let timer = setTimeout(()=>{
//this.goPage('/pages/photo/preview')
this.changeType(2)
},0)
// this.saveToLocal(res.tempFilePath)
},
fail: (res) => {
console.log(res);
},
complete: () => {
uni.hideLoading();
}
}, this);
}, 50))
},
// 第三步：保存到本地
saveToLocal(tempImagePath) {
//has_origin //是否保存原图
let that = this
uni.saveImageToPhotosAlbum({
filePath: tempImagePath,
success() {
uni.showToast({
icon: 'none',
title: '已将照片保存到本地相册'
})
},
fail() {}
})
},
showPreviewFn(img) {
uni.previewImage({
current: 0,
urls: [img]
});
},
//获取当前时间
getTime: function() {
let d = new Date();
let year = d.getFullYear();
let month = d.getMonth() + 1;
let date = d.getDate();
let days = new Array("日", "一", "二", "三", "四", "五", "六");
let day = d.getDay();
let hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
let min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
let sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds();
let now = year + "年" + month + "月" + date + "日 " + hour + ":" + min + ":" + sec;
return now
},
}
}
</script>
<style scoped lang="scss">
.camera-container {
// padding-top:var(--status-bar-height);
min-height: 100vh;
background-color: black;
}
.header-box {
// padding:10rpx 20rpx;
position: relative;
.inner {
display: flex;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.icon {
margin: 20rpx;
display: block;
width: 44rpx;
height: 44rpx;
}
}
.camera-box {
position: absolute;
left:0;
width: 100%;
// height: 100vh;
z-index: 1;
}
.mark-water {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 360rpx;
height: 90rpx;
z-index: 6;
}
.mark-box {
position: absolute;
left: 0;
bottom: 0;
padding: 20rpx;
.txt {
max-width: 500rpx;
max-height: 80rpx;
overflow: hidden;
margin-top: 5rpx;
line-height: 40rpx;
white-space: normal;
font-size: 28rpx;
color: #fff;
&.big {
padding: 10rpx;
margin-bottom: 10rpx;
width: 430rpx;
line-height: 40rpx;
font-size: 32rpx;
background-color: rgba(34, 114, 255, 0.6);
}
}
}
.bottom-box {
position: absolute;
left: 0;
right: 0;
bottom:0;
// bottom: constant(safe-area-inset-bottom);
// bottom: env(safe-area-inset-bottom);
z-index: 5;
box-sizing: border-box;
height: 200rpx;
display: flex;
justify-content: space-between;
padding: 20rpx 78rpx;
align-items: center;
background-color: black;
.txt {
white-space: nowrap;
line-height: 60rpx;
color: #fff;
}
.icon {
display: block;
width: 92rpx;
height: 92rpx;
&.icon-take {
width: 144rpx;
height: 144rpx;
}
}
}
.canvas {
position: fixed;
left: -750rpx;
top: 0;
}
// 拍照规范
.page-mask {
position: fixed;
bottom: 0;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
z-index: 1000;
width: 750rpx;
height: 100vh;
// padding: 0 30rpx;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.8);
.icon {
width: 92rpx;
height: 92rpx;
}
.btn-close {
position: absolute;
bottom: 0;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
left: 0;
right: 0;
height: 200rpx;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
src/components/upload - 副本/qiniup.js
View file @ c4bb6193
import qiniuUploader from '@/include/libs/qiniuUploader.js';
const globalUrl = process.uniEnv || {}'
const globalUrl = process.uniEnv || {}
export default {
name: 'qiniup',
components: {},
......
src/components/upload/qiniup.js 0 → 100644
View file @ c4bb6193
import qiniuUploader from '@/include/libs/qiniuUploader.js';
const globalUrl = process.uniEnv || {}
export default {
name: 'qiniup',
components: {},
data() {
return {
domain: 'http://upload.qiniup.com', // 七牛上传域名地址
uptokenURL: globalUrl.ucenterUrl.apiUrl + '/v1/tokens', // 上传token地址
files:[], // 上传文件
fileMaps:[], // 上传文件返回对象
keys:[], // 七牛返回key
uploadToken: '', // 上传token
maximum:999, // 最大上传数量
qiniuOptions: {}, // 七牛上传配置
};
},
created() {
this.initQiniu()
},
methods: {
initQiniu: function() {
var defaulfs = {
// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
region: 'ECN',
bucket: 'fa-cms',
qiniuBucketURLPrefix: 'uploads',
// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
// 由其他程序生成七牛云uptoken，然后直接写入uptoken
uptoken: '',
// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
uptokenURL: this.uptokenURL,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
uptokenFunc: function() {
},
// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain: this.domain,
// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
// 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
shouldUseQiniuFileName: true
};
let options = {}
if(Object.keys(this.qiniuOptions).length) {
Object.assign(options, defaulfs, this.qiniuOptions);
} else {
options = defaulfs;
}
// 将七牛云相关配置初始化进本sdk
qiniuUploader.init(options);
},
getUrlKey(file) {
let index = file.lastIndexOf('/');
let len = file.length
let name = file.substring(index + 1, len)
return name;
},
/**
* 确认上传
* @param {boolean} submit
*/
confirmUpload(submit = false) {
let self = this
const fileList = self.files
if (self.maximum - fileList.length <= 0) {
uni.showToast({
title: '图片数量不能大于' + self.maximum,
icon: 'none'
})
return
}
for (let file of fileList) {
let name = self.getUrlKey(file)
// 交给七牛上传
let item = {
src: '',
id: '',
key:'',
// filesize: '',
progress: 0
}
const params = {
name:name,
file:file,
}
qiniuUploader.upload(params, (res) => {
console.log(res,'res')
let inLen = self.maximum - fileList.length
if (inLen > 0) {
item.src = file
item.key = res.key || res.src
self.fileMaps.push(item);
self.keys.push(item.key)
if(submit) {
self.submitFile()
}
} else {
uni.showToast({
title: '图片数量不能大于9'
})
}
}, (error) => {
console.log('error: ' + error);
}, null, (res) => {
item.progress = res.progress
}, () => {
// 取消上传
}, () => {
// `before` 上传前执行的操作
}, (err) => {
// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
});
}
}
}
}
src/pages.json
View file @ c4bb6193
......@@ -41,7 +41,8 @@
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的"
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
},
{
......@@ -260,8 +261,8 @@
"query": "" //启动参数，在页面的onLoad函数里面得到
},
{
"name": "入驻提示", //模式名称
"path": "pages/settle/prompt", //启动页面，必选
"name": "完工配置", //模式名称
"path": "pages/order/complete", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
},
{
......
src/pages/mine/index.vue
View file @ c4bb6193
<template>
<view>
<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
<view class="u-m-r-10">
<u-avatar :src="pic" size="140"></u-avatar>
<u-navbar v-if="!takeStatus" :is-back="false" :title-size="26" title-color="#000" title="我的"></u-navbar>
<view v-if="!takeStatus">
<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
<view class="u-m-r-10">
<u-avatar :src="pic" size="140"></u-avatar>
</view>
<view class="u-flex-1">
<view class="u-font-18 u-p-b-20">uView ui</view>
<view class="u-font-14 u-tips-color">微信号:helang_uView</view>
</view>
</view>
<view class="u-flex-1">
<view class="u-font-18 u-p-b-20">uView ui</view>
<view class="u-font-14 u-tips-color">微信号:helang_uView</view>
<view class="u-m-t-20">
<u-cell-group>
<u-cell-item v-for="(item, index) in items" :title="item.title" :value="item.value" :key="index">
<u-icon slot="icon" size="32" name="search"></u-icon>
</u-cell-item>
</u-cell-group>
</view>
<view class="u-m-t-20">
<u-cell-group>
<u-cell-item icon="setting" title="设置"></u-cell-item>
</u-cell-group>
</view>
<view class="u-m-t-20" @click="take">
<u-cell-group>
<u-cell-item icon="setting" title="相机组件测试"></u-cell-item>
</u-cell-group>
</view>
</view>
<view class="u-m-t-20">
<u-cell-group>
<u-cell-item v-for="(item, index) in items" :title="item.title" :value="item.value" :key="index">
<u-icon slot="icon" size="32" name="search"></u-icon>
</u-cell-item>
</u-cell-group>
</view>
<view class="u-m-t-20">
<u-cell-group>
<u-cell-item icon="setting" title="设置"></u-cell-item>
</u-cell-group>
</view>
<take-photo type="test" v-if="takeStatus" @close="closeTake"></take-photo>
</view>
</template>
<script>
import takePhoto from '@/components/take/index.vue'
export default {
components: {
'take-photo': takePhoto
},
data() {
return {
pic:'https://uviewui.com/common/logo.png',
show:true
show:true,
takeStatus: false
}
},
computed: {
......@@ -50,7 +64,13 @@
},
methods: {
take() {
uni.hideTabBar()
this.takeStatus = true
},
closeTake() {
this.takeStatus = false
}
}
}
</script>
......
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