名片部分页面。地图定位。国家下拉搜索回收站

2025-03-25 13:12:24 +08:00
parent f7ff9d65a5
commit e3abe0bf18
18 changed files with 747 additions and 606 deletions
@@ -0,0 +1,152 @@
+<template>
+	<view>
+		<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000"
+			backgroundColor="#fff" :statusBar="true"  :title="$t('navbar.businesscard')"></uni-nav-bar>
+		<view class="card">
+			<view class="img_top" ref="poster" id="poster">
+			    <view class="name">
+			        <view>刘亦菲</view>
+			        <view>业务经理</view>
+			        <view>13838225452</view>
+			    </view>
+			    <!-- <view class="code" :class=" activeImg === share_one ? 'code_one' : activeImg === share_two ? 'code_two' : activeImg === share_three ? 'code_three' : 'code_one'">
+			        <qrcode-vue :value="codeUrl" :size="70"></qrcode-vue>
+			    </view> -->
+			</view>
+			
+		</view>
+		<view class="foot">
+			<button class="btn"  @click="goDown">{{$t('submit')}}</button>
+		</view>	
+	</view>
+</template>
+
+<script>
+	import { request,showToast } from '@/api/apiT.js'
+	import html2canvas from 'html2canvas';
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			saveImgFile(baseImg){
+				const bitmap = new plus.nativeObj.Bitmap('test')
+				bitmap.loadBase64Data(
+				    baseImg,
+				    function () {
+				        const url = '_doc/' + new Date().getTime() + '.png' // url为时间戳命名方式
+				        bitmap.save(
+				            url,
+				            {
+				                overwrite: true // 是否覆盖
+				            },
+				            i => {
+				                plus.gallery.save(
+				                    i.target,
+				                    function () {
+										uni.showToast({
+											title: '图片保存至相册成功',
+											icon: 'none'
+										});
+				                        bitmap.clear()
+				                    },
+				                    function (e) {
+										uni.showToast({
+											title: '图片保存至相册失败',
+											icon: 'none'
+										});
+				                        // console.log('图片保存至相册失败:' + JSON.stringify(e))
+				                        bitmap.clear()
+				                    }
+				                )
+				            },
+				            e => {
+								uni.showToast({
+									title: '图片保存失败1',
+									icon: 'none'
+								});
+				                bitmap.clear()
+				            }
+				        )
+				    },
+				    e => {
+				        uni.showToast({
+				        	title: '图片保存失败2',
+				        	icon: 'none'
+				        });
+				        bitmap.clear()
+				    }
+				)
+			},
+			downloadImage(url, filename) {
+				// 创建一个隐藏的 <a> 标签
+				const link = document.createElement('a');
+				link.href = url;
+				link.download = filename;
+				// 触发点击事件
+				link.click();
+			},
+			goDown(){
+				const element = document.getElementById('poster');
+				var that= this
+				html2canvas(element, {
+				    backgroundColor: '#f5f5f5', //海报的背景颜色
+				    useCORS: true // 允许跨域
+				}).then(canvas => {
+				    // canvas 其实就是我们所讲的res 的意思 返回报文的意思
+				    let baseImg = canvas.toDataURL('image/png')
+					uni.showModal({
+						title: '下载名片',
+						content: '确定下载当前名片图至相册嘛',
+						success: function (res) {
+							if (res.confirm) {
+								that.downloadImage(baseImg, 'screenshot.png');
+							} else if (res.cancel) {
+								console.log('用户点击取消');
+							}
+						}
+					});
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.card{
+		padding: 15px;
+	}
+	.img_top{
+		background-image: url('/static/image/mine/cardbg.png');
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		text-align: center;
+		position: relative;
+		width:690rpx;
+		height:1060rpx;
+		border-radius: 15px;
+		.name{
+			position: absolute;
+			top: 20%;
+			left: 10%;
+		}
+	}
+	.foot{
+		position: fixed;
+		bottom: 0px;
+		width: 100%;
+		height: 90px;
+		background: #FFFFFF;
+		z-index: 1;
+	}
+	.btn{
+		background: linear-gradient(to right, #3471FF, #6776FF);
+		color: white;
+		border-radius: 50px;
+		width: 92%;
+		margin-bottom: 40px;
+		margin: 15px 4%;
+	}
+</style>