This commit is contained in:
yanran200730
2022-05-31 14:08:05 +08:00
parent 28f8385ac4
commit 9e65e9bf76
3 changed files with 63 additions and 19 deletions

View File

@@ -14,13 +14,12 @@
:style="{left: x + 'px', top: y + 'px' }" :style="{left: x + 'px', top: y + 'px' }"
@touchstart="onTouchstart" @touchstart="onTouchstart"
@touchmove="onTouchmove"> @touchmove="onTouchmove">
<component :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component> <component ref="WatermarkItem" :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
</div> </div>
</div> </div>
<div class="photo-bottom" data-html2canvas-ignore> <div class="photo-bottom" data-html2canvas-ignore>
<div class="photo-bottom__top"> <div class="photo-bottom__top">
<span @click.stop="isHide = true">取消</span> <span @click.stop="isHide = true">取消</span>
<!-- <image src="./images/clear.png" @click.stop="isHide = true, currIndex = -1" /> -->
<h2>水印</h2> <h2>水印</h2>
<span @click.stop="isHide = true">确定</span> <span @click.stop="isHide = true">确定</span>
</div> </div>
@@ -41,23 +40,31 @@
:key="item.id" :key="item.id"
@click.stop="currIndex = index"> @click.stop="currIndex = index">
<image :src="item.thum" /> <image :src="item.thum" />
<span v-show="currIndex === index" @click.stop="toEdit">编辑</span>
<image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png" /> <image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png" />
<div class="water-item__bottom">{{ item.name }}</div> <div class="water-item__bottom">{{ item.name }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="photo-tabbar" data-html2canvas-ignore> <div class="photo-tabbar" data-html2canvas-ignore>
<div class="item" @click.stop="back"> <h2>编辑图片</h2>
<image src="./images/fanhui.png" /> <div class="tabbar-wrapper">
<div>返回</div> <div class="item" @click.stop="back">
</div> <image src="./images/fanhui-black.png" />
<div class="item" @click.stop="isHide = false"> <div>返回</div>
<image src="./images/shuiyin.png" /> </div>
<div>水印</div> <div class="item" @click.stop="isHide = false">
</div> <image src="./images/shuiyin-white.png" />
<div class="item" @click.stop="save"> <div>水印</div>
<image src="./images/shangchuan.png" /> </div>
<div>上传</div> <div class="item" @click.stop="isHide = false">
<image src="./images/jiancai.png" />
<div>剪裁</div>
</div>
<div class="item" @click.stop="save">
<image src="./images/shangchuan-black.png" />
<div>上传</div>
</div>
</div> </div>
</div> </div>
<u-popup v-model="isShowAlbum" :closeable="false" border-radius="32" height="70%" mode="bottom"> <u-popup v-model="isShowAlbum" :closeable="false" border-radius="32" height="70%" mode="bottom">
@@ -210,6 +217,10 @@
} }
}, },
toEdit () {
this.$refs.WatermarkItem.linkTo('./WatermarkConfig')
},
save () { save () {
this.isHide = true this.isHide = true
this.$loading() this.$loading()
@@ -284,10 +295,11 @@
this.$http.post('/api/appdvcpconfig/apiForward', `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY&get_poi=1`).then(res => { this.$http.post('/api/appdvcpconfig/apiForward', `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY&get_poi=1`).then(res => {
if (res.code === 0) { if (res.code === 0) {
const data = res.data.result const data = res.data.result
alert(JSON.stringify(data))
uni.setStorageSync('address', { uni.setStorageSync('address', {
lat, lat,
lng, lng,
address: data.title, address: data.address,
cityCode: `${data.ad_info.adcode}` cityCode: `${data.ad_info.adcode}`
}) })
@@ -557,15 +569,31 @@
} }
.photo-tabbar { .photo-tabbar {
display: flex;
position: fixed; position: fixed;
align-items: center;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
width: 100%; width: 100%;
height: 160px; padding-bottom: 40px;
background: #1E1E21; background: #FFFFFF;
border-radius: 32px 32px 0px 0px;
border: 1px solid #DDDDDD;
overflow: hidden;
h2 {
width: 750px;
height: 96px;
line-height: 96px;
margin-bottom: 20px;
text-align: center;
color: #333333;
font-size: 28px;
}
& > div {
align-items: center;
display: flex;
}
.item { .item {
flex: 1; flex: 1;
@@ -579,7 +607,7 @@
div { div {
font-size: 28px; font-size: 28px;
color: #fff; color: #333;
} }
} }
} }
@@ -625,6 +653,22 @@
height: 200px; height: 200px;
} }
span {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 128px;
height: 56px;
line-height: 56px;
text-align: center;
background: rgba(0, 0, 0, 0.8);
border-radius: 8px;
color: #fff;
font-size: 32px;
transform: translate(-50%, -50%);
}
&:first-child { &:first-child {
flex-direction: column; flex-direction: column;
background: #E4E7EB; background: #E4E7EB;

Binary file not shown.

After

Width:  |  Height:  |  Size: 458 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB