boying/pages/index/male.vue

<template>
	<view class="content">
		<view class="box">
			<view class="title" style="margin-top: 0;">{{ $t('foo.yhzzyz') }}</view>
			<view class="detail">
				<view class="detail-spe">{{ $t('foo.zsxm') }}：{{ name }}</view>
				<view class="detail-spe">
					{{ $t('foo.yhylsjh') }}：{{ phone }}
					<view class="copyband" @click="copy(yhylsjh)">{{ $t('foo.fzsjh') }}</view>
				</view>
				<view class="detail-item">
					{{ $t('foo.yhzh') }}：{{ bank_card_no }}
					<view class="copy" @click="copy(bank_card_no)">{{ $t('foo.fzzh') }}</view>
				</view>
				<view class="detail-spe">
					{{ $t('foo.khh') }}：{{ bank_of_deposit }}
					<view class="copyband" @click="copy(bank_of_deposit)">{{ $t('foo.fzkhh') }}</view>
				</view>
			</view>
			<view v-if="ali != ''">
				<view class="title">{{ $t('foo.zfbsmyz') }}</view>
				<view class="erweima" @click="open(1)"><image :src="ali" mode="widthFix"></image></view>
				<view class="btn" @click="down(1)">{{ $t('foo.xzewm') }}</view>
			</view>
			<view v-if="wechat != ''">
				<view class="title">{{ $t('foo.wxsmyz') }}</view>
				<view class="erweima" @click="open(2)"><image :src="wechat" mode="widthFix"></image></view>
				<view class="btn" @click="down(2)">{{ $t('foo.xzewm') }}</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<movable-area class="popup-box">
				<movable-view class="popup-item" :scale="true" direction="all"><image :src="img" mode=""></image></movable-view>
			</movable-area>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		uniPopup
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	data(){
		return {
			img:'',
			ali:'',
			wechat:'',
			bank_card_no:'',
			bank_of_deposit:'',
			name:'',
			phone:'',
			downing: false
		}
	},
	onLoad(option) {
		console.log(option)
		if(option.ali != ''){
			this.ali = option.ali
		}
		if(option.wei != ''){
			this.wechat = option.wei
		}
		if(option.bank != ''){
			this.bank_of_deposit = option.bank
		}
		if(option.info != ''){
			this.bank_card_no = option.info
		}
		if(option.name != ''){
			this.name = option.name
		}
		if(option.phone != ''){
			this.phone = option.phone
		}
		uni.setNavigationBarTitle({
			title:this.$t('foo.xq')
		})
	},
	methods: {
		copy(text) {
			uni.setClipboardData({
				data: text,
				success: e => {
					uni.showToast({
						title: this.$t('foo.fzcg')
					});
				},
				fail(e) {
					uni.showToast({
						title: this.$t('foo.fzcg.fzsb'),
						icon: false
					});
					console.log(e);
				}
			});
		},
		open(type){
			if(type == 1){
				this.img = this.ali
			}else {
				this.img = this.wechat
			}
			this.$refs.popup.open();
		},
		down(type){
			if(type == 1){
				this.img = this.ali
			}else {
				this.img = this.wechat
			}
			if(this.downing){
				return
			}
			this.downing = true
			uni.downloadFile({
				url: this.img,
				success: res => {
					if (res.statusCode === 200){
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(e) {
							console.log(e,'保存路径')
							uni.showToast({
								title: "保存成功",
								icon: true
							});
							this.downing = false
							},
							fail: function() {
								uni.showToast({
									title: "保存失败",
									icon: false
								});
								this.downing = false
							}
						});
					}
					this.downing = false
				},
				fail(e) {
					uni.showToast({
						title: '复制失败',
						icon: false
					});
					this.downing = false
					console.log(e);
				}
			});
		}
	}
};
</script>

<style lang="scss">
body,
page {
	height: 100%;
	background-color: #000;
}

.content {
	background-color: #000;
	line-height: 1;
	padding-top: 25rpx;
	padding: 24rpx 24rpx 90rpx;

	.cross {
		margin-left: 6rpx;
		height: 76rpx;
		line-height: 76rpx;
		color: #444444;
		border-bottom: 1rpx solid #cccccc;
	}

	.image {
		margin-top: 44rpx;
		margin-bottom: 48rpx;
		height: 404rpx;
		width: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		padding: 20rpx 0 24rpx;
		color: #fff;
		.title {
			margin-top: 60rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
		}

		.detail {
			padding-top: 10rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			.detail-spe {
				margin-top: 10rpx;
				line-height: 46rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box; //必须结合的属性，将对象作为弹性伸缩盒子模型显示
				-webkit-line-clamp: 2; //控制文本的行数
				-webkit-box-orient: vertical; //必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

				.copyband {
					display: flex;
					float: right;
					// float: right;
					justify-content: center;
					border-radius: 10rpx;
					line-height: 34rpx;
					font-size: 24rpx;
					color: #fff;
					// padding: 0 24rpx;
					width: 168rpx;
					height: 34rpx;
					margin-top: 8rpx;
				}
			}

			.detail-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				// height: 40rpx;
				line-height: 46rpx;
				color: #fff;
				margin-top: 10rpx;

				.copy {
					width: 168rpx;
					display: flex;
					justify-content: center;
					background-color: #f1f1f1;
					border-radius: 10rpx;
					line-height: 34rpx;
					font-size: 24rpx;
					color: #333;
					padding: 0 24rpx;
					// width: 144rpx;
					height: 34rpx;
				}
			}
		}

		.erweima {
			width: 362rpx;
			margin: 26rpx auto;
			image {
				width: 100%;
			}
		}
		.zfb {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0b9edd;
			margin-top: 36rpx;
			text-align: center;
		}
		.weixin {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #02974a;
			margin-top: 36rpx;
			text-align: center;
		}
	}
}
.popup-box {
	width: 522rpx;
	height: 605rpx;
	border-radius: 20rpx;
	position: relative;
	.popup-item {
		width: 100%;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.btn {
	margin: 50rpx auto 0;
	width: 500rpx;
	height: 60rpx;
	background: linear-gradient(-74deg, #ce9c6d, #ffecd6);
	border-image: linear-gradient(115deg, #feebd5, #ffffff, #e1ad7d) 1 1;
	border-radius: 30px;
	line-height: 60rpx;
	text-align: center;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #643912;
}
</style>