Skip to content

S
self-support
Commit de2c5d8a authored by 李超鹏's avatar 李超鹏
Browse files
Options

type：update 

socpe:self
body:修改拍照组件的水印功能
parent ee7f6c0c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 613 additions and 620 deletions
src/components/photo/setting.vue
View file @ de2c5d8a
<template>
<view class="backView">
<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>
......@@ -9,20 +9,20 @@
<text class="itemTitle">保存原图</text>
<text class="itemNotice">拍照后另保存一张无水印的图片</text>
</view>
<switch class="itemSwitch" :checked="result['has_origin']" @change="handleOrigineChange" color="#007AFF" />
<switch class="itemSwitch" :checked="result['hasOrigin']" @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>
<text class="itemNotice">{{result['lowerLeft']['title'] || '点击可编辑更改'}}</text>
</view>
<switch class="itemSwitch" disabled :checked="result['lower_right']['title_text'] != ''"
<switch class="itemSwitch" disabled :checked="result['lowerLeft']['title'] != ''"
@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>
<text class="itemTitle">{{item['watemarkText'] || '自定义' + (ikey + 1)}}</text>
<text class="itemNotice">{{item['watemarkValue'] || '点击可编辑更改'}}</text>
</view>
<switch class="itemSwitch" :checked="item['enable']" @change="itemChange(item, ikey)" color="#007AFF" />
</view>
......@@ -33,8 +33,8 @@
<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="请输入"
<input class="leftInput" type="text" v-model="currenItem['watemarkText']"
@input="leftInput()" :disabled="currenItem.type === '备注'" placeholder="请输入"
maxlength="10" />
</view>
<view class="ph-pop-tip-view" v-if="showTipLeft">*必填项</view>
......@@ -42,7 +42,7 @@
<view class="ph-pop-mid-view">：</view>
<view>
<view class="rightInputView">
<input class="rightInput" type="text" v-model="currenItem['watemark_value']"
<input class="rightInput" type="text" v-model="currenItem['watemarkValue']"
@input="rightInput()" placeholder="请输入内容" maxlength="30" />
</view>
<view class="ph-pop-tip-view" v-if="showTipRight">*必填项</view>
......@@ -72,14 +72,14 @@
isPopShow: false,
icon_close_new: '',
result: {
has_origin: true,
lower_right: {
hasOrigin: true,
lowerLeft: {
body: []
}
},
currenItem: {
'watemark_text': '',
'watemark_value': ''
'watemarkText': '',
'watemarkValue': ''
},
editingItem: {},
showTipLeft: false,
......@@ -89,10 +89,11 @@
},
computed: {
itemList() {
if (this.result['lower_right']) {
var arr = this.result['lower_right']['body']
console.log(this.result)
if (this.result['lowerLeft']) {
var arr = this.result['lowerLeft']['body']
return arr.filter((item) => {
return item.watemark_type === '备注'
return item.watemarkType === '备注'
})
} else {
return []
......@@ -100,7 +101,7 @@
},
showTitleSwitch() {
return this.result['lower_right'].hasOwnProperty('title_text')
return this.result['lowerLeft'].hasOwnProperty('title')
},
customStyleCancel() {
return {
......@@ -122,54 +123,43 @@
getApp().trackPage('水印设置页')
const globalData = getApp().globalData
this.icon_close_new = globalData.icon_close_new
this.systemId = globalData.photo.currentItem.systemId
this.systemId = globalData.photo.currentItem.partnerCompanyId
this.getItemList()
},
methods: {
getItemList: function() {
// this.systemId = '79550af260555cc20afb34156c94b32c' // 测试数据
this.loading = true
this.$u.api.getUserWatermark({
'token': this.vuex_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: '网络异常'})
getItemList: function() {
this.loading = true
this.$u.api.getWatermark({partnerCompanyId:this.systemId}).then(res => {
if (res.code == 200) {
this.result = res.data
} else {
uni.showToast({title: res.data.message})
}
this.loading = false
})
},
saveUserWatermark: function() {
this.loading = true
this.$u.api.saveUserWatermark({
'token': this.vuex_token,
'watermark': this.result
}).then(res => {
if (res.result.code == true) {
const photo = getApp().globalData.photo
photo.waterSetting = this.result
this.$u.api.saveWatermark(this.result).then(res=>{
if(res.code === 200){
uni.showToast({title:'保存成功'})
getApp().globalData.photo.waterSetting = this.result
this.$emit("changeWatermark", this.result);
}else{
uni.showToast({title: res.result.msg})
uni.showToast({title: res.message})
}
this.loading = false
})
},
//保存原图 开关
handleOrigineChange: function(e) {
this.result['has_origin'] = !this.result['has_origin']
this.result['hasOrigin'] = !this.result['hasOrigin']
this.saveUserWatermark()
},
handleClickTitleSwitch: function(e) {
var string = this.result['lower_right']['title_text'] ? '水印标题不可关闭' : '请先编辑该自定义项'
var string = this.result['lowerLeft']['title'] ? '水印标题不可关闭' : '请先编辑该自定义项'
uni.showToast({
icon: 'none',
title: string
......@@ -178,7 +168,7 @@
//自定义 开关
itemChange: function(item, ikey) {
if (item['watemark_value']) {
if (item['watemarkValue']) {
// 修改
item['enable'] = !item['enable']
this.saveUserWatermark()
......@@ -194,9 +184,9 @@
itemClick: function(item, ikey) {
if (ikey === -1) {
this.currenItem = {
'watemark_text': '水印标题',
'watemark_value': this.result['lower_right']['title_text'],
'type': 'title_text'
'watemarkText': '水印标题',
'watemarkValue': this.result['lowerLeft']['title'],
'type': '备注'
}
} else {
this.editingItem = item
......@@ -210,7 +200,7 @@
//左侧输入框
leftInput: function(e) {
if (this.currenItem['watemark_text']) {
if (this.currenItem['watemarkText']) {
this.showTipLeft = false
}
......@@ -218,7 +208,7 @@
//右侧输入框
rightInput: function(e) {
if (this.currenItem['watemark_value']) {
if (this.currenItem['watemarkValue']) {
this.showTipRight = false
}
},
......@@ -227,8 +217,8 @@
popCancelClick: function() {
this.isPopShow = false
this.currenItem = {
'watemark_text': '',
'watemark_value': ''
'watemarkText': '',
'watemarkValue': ''
}
},
......@@ -236,27 +226,27 @@
this.showTipLeft = false,
this.showTipRight = false
},
backTake() {
this.$emit('changeType', 1)
backTake() {
this.$emit('changeType', 1)
},
//自定义弹窗 保存
popSaveClick: function() {
if (this.currenItem['watemark_text'] && this.currenItem['watemark_value']) {
if (this.currenItem['watemarkText'] && this.currenItem['watemarkValue']) {
this.isPopShow = false
if (this.currenItem.type === 'title_text') {
this.result['lower_right']['title_text'] = this.currenItem['watemark_value']
if (this.currenItem.type === '备注') {
this.result['lowerLeft']['title'] = this.currenItem['watemarkValue']
} else {
this.editingItem['watemark_text'] = this.currenItem['watemark_text']
this.editingItem['watemark_value'] = this.currenItem['watemark_value']
this.editingItem['watemarkText'] = this.currenItem['watemarkText']
this.editingItem['watemarkValue'] = this.currenItem['watemarkValue']
this.editingItem['enable'] = true
}
this.saveUserWatermark()
} else {
// 提示
if (!this.currenItem['watemark_text']) {
if (!this.currenItem['watemarkText']) {
this.showTipLeft = true
}
if (!this.currenItem['watemark_value']) {
if (!this.currenItem['watemarkValue']) {
this.showTipRight = true
}
}
......
src/components/take/index.vue
View file @ de2c5d8a
<template>
<template>
<view class="camera">
<view class="camera-container" v-if="showType === 1">
<cover-view class="header-box" :style="{'height':navHeight/2 + 'px'}">
......@@ -7,7 +7,7 @@
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 v-if="currentItem.system_id" @click="changeType(3)" class="icon" mode="aspectFit"
<cover-image v-if="currentItem.partnerCompanyId" @click="changeType(3)" class="icon" mode="aspectFit"
src="/static/photo/icon-setting.png"></cover-image>
</cover-view>
</cover-view>
......@@ -26,7 +26,7 @@
<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" v-if="standardStatus"> </cover-image>
<cover-image class='icon' src='/static/photo/icon-standard.png' @click="standardShow = true" v-if="standardStatus"> </cover-image>
<view class='icon' v-else></view>
</cover-view>
<canvas canvas-id="canvas" id="photoCanvas" class="canvas"
......@@ -37,11 +37,11 @@
<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="finish" />
<photo-setting v-if="showType === 3" @changeType="changeType" />
</view>
<photo-preview v-if="showType === 2" @changeType="changeType" @finish="finish" />
<photo-setting v-if="showType === 3" @changeType="changeType" @changeWatermark="changeWatermark"/>
</view>
</template>
</template>
<script>
let r = require("@/libs/bmap-wx.min.js");
......@@ -49,31 +49,31 @@
// ak: "rpVq5d3yxaRCoKzVwmFMo0o4iC524CAG",
ak: "iXsGdyEcm1iQONoUPyEp0hrBTLCuOaW2"
});
import standard from '@/components/photo/standard.vue'
import preview from '@/components/photo/preview.vue'
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: { // 对应的规范item
default () {
return {
_id: '', // 规格ID
system_id: '', // 系统ID
brand_id: '', // 品牌ID
classify_id: '', // 分类ID
images: [], // 拍照要求示意图
main_point: [] // 要点
}
}
}
export default {
props: {
currentItem: { // 对应的规范item
default () {
return {
_id: '', // 规格ID
system_id: '', // 系统ID
brand_id: '', // 品牌ID
classify_id: '', // 分类ID
images: [], // 拍照要求示意图
main_point: [] // 要点
}
}
}
},
components: {
'photo-standard': standard,
'photo-preview': preview,
'photo-standard': standard,
'photo-preview': preview,
'photo-setting': setting,
},
data() {
return {
return {
showType: 1,
standardShow: false,
cameraInfo: {
......@@ -102,14 +102,14 @@
ratio: 0,
cameraChange: false,
waterSetting: null,
shadowInitShow: false, // 第一次进入页面需显示弹窗
shadowInitShow: false, // 第一次进入页面需显示弹窗
standardStatus: false // 是否显示拍照要求
}
},
created(e) {
created(e) {
const photo = getApp().globalData.photo
getApp().trackPage('拍照页')
photo.allImages = []
getApp().trackPage('拍照页')
photo.allImages = []
photo.currentItemLength = 0
// this.ctx = uni.createCameraContext();
this.updateTime()
......@@ -117,21 +117,21 @@
this.getMarkPath()
this.initData()
photo.currentItem = this.currentItem
if (this.currentItem.images.length > 0) {
this.shadowInitShow = true
this.standardShow = true
this.standardStatus = true
}
photo.currentItem = this.currentItem
if (this.currentItem.images.length > 0) {
this.shadowInitShow = true
this.standardShow = true
this.standardStatus = true
}
},
computed: {
titleTxt() {
const waterSetting = this.waterSetting
let txt = ''
if (!waterSetting || !waterSetting.lower_right) {
if (!waterSetting || !waterSetting.lowerLeft) {
return ''
}
txt = waterSetting.lower_right && waterSetting.lower_right.title_text || ''
txt = waterSetting.lowerLeft && waterSetting.lowerLeft.title || ''
return txt
},
settingTxtArr() {
......@@ -144,17 +144,17 @@
let settingTxtArr = []
const typeArr = ['经度', '纬度', '地址', '时间']
const waterSetting = this.waterSetting
if (!waterSetting || !waterSetting.lower_right || !waterSetting.lower_right.body) {
if (!waterSetting || !waterSetting.lowerLeft || !waterSetting.lowerLeft.body) {
return arr
}
const settingArr = waterSetting.lower_right.body
const settingArr = waterSetting.lowerLeft.body
settingArr.map(item => {
const idx = typeArr.indexOf(item.watemark_type)
if (item.enable && (idx > -1 || (item.watemark_value && item.watemark_text))) {
const idx = typeArr.indexOf(item.watemarkType)
if (item.enable && (idx > -1 || (item.watemarkValue && item.watemarkText))) {
if (idx > -1) {
settingTxtArr.push(arr[idx])
} else {
settingTxtArr.push(item.watemark_text + '：' + item.watemark_value)
settingTxtArr.push(item.watemarkText + '：' + item.watemarkValue)
}
}
})
......@@ -179,18 +179,21 @@
this.shadowInitShow = false
this.standardShow = false
},
goBack() {
uni.showTabBar()
goBack() {
uni.showTabBar()
this.$emit('close')
},
finish() {
uni.showTabBar()
const photo = getApp().globalData.photo
this.$emit('close', photo.allImages)
},
finish() {
uni.showTabBar()
const photo = getApp().globalData.photo
this.$emit('close', photo.allImages)
},
changeType(type) {
this.showType = type
},
changeWatermark(watermark){
this.waterSetting = watermark
},
updateTime() {
this.waterInfo.date = this.getTime()
// let timer = setTimeout(() => {
......@@ -224,10 +227,10 @@
},
baiduLocation() {
// 百度sdk解析经纬度
let waterInfo = this.waterInfo
let waterInfo = this.waterInfo
const t = function() {
let t = {
success: function(res) {
success: function(res) {
let e = res.wxMarkerData[0];
let i = e.address;
waterInfo.address = i
......@@ -257,7 +260,7 @@
//获取位置
getLocation() {
let that = this
const waterInfo = this.waterInfo
const waterInfo = this.waterInfo
uni.getLocation({
type: 'gcj02',
success: function(res) {
......@@ -423,7 +426,7 @@
globalTempPath.origin = this.tempImgs.origin
globalTempPath.mixWater = res.tempFilePath
let timer = setTimeout(()=>{
//this.goPage('/pages/photo/preview')
//this.goPage('/pages/photo/preview')
this.changeType(2)
},0)
// this.saveToLocal(res.tempFilePath)
......@@ -477,21 +480,21 @@
}
}
</script>
<style scoped lang="scss">
.camera {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 999999;
<style scoped lang="scss">
.camera {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 999999;
}
.camera-container {
// padding-top:var(--status-bar-height);
min-height: 100vh;
background-color: black;
background-color: black;
}
.header-box {
......
src/pages/photo/list.vue
View file @ de2c5d8a
This diff is collapsed.
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