ltred/pages/applic/other.vue

<template>
	<view class="content">
		<view class="top flex">
			<image src="../../static/img/002.png" mode="aspectFill"></image>
			<view class="font">
				<view class="china-font">罗田县红十字会</view>
				<view class="english-font">Red Cross Society of China Luo Tian Branch</view>
			</view>
		</view>

		<view class="cross">社会捐款通道</view>

		<view class="box">
			<view class="title" style="margin-top: 0;">1.银行转账</view>
			<view class="detail" v-for="item in list" :key="item.id">
				<view class="detail-item">
					开户名：{{ item.name }}
					<view class="copy" @click="copy(item.name)">复制开户名</view>
				</view>
				<view class="detail-item">
					银行账户：{{ item.number }}
					<view class="copy" @click="copy(item.number)">复制账号</view>
				</view>
				<view class="detail-spe">
					开户行：{{ item.count }}
					<view class="copyband" @click="copy(item.count)">复制开户行</view>
				</view>
			</view>
			<!-- <view class="image">
				<image src="../../static/images/other.png" mode=""></image>
			</view> -->
			<view class="title">2.捐赠二维码</view>
			<!-- <view class="zfb">支付宝扫码捐款</view>
			<view class="erweima"><image src="../../static/img/zfb.jpg" mode="widthFix"></image></view>
			<view class="weixin">微信扫码捐款</view>
			<view class="erweima" ><image src="../../static/img/weixin.png" mode="widthFix"></image></view> -->
			<view class="zfb" style="color: #ff0000;">
				爱心捐款通道
			</view>
			<view class="erweima"><image src="../../static/img/lovetongdao.png" mode="widthFix"></image></view>
			<view class="title">3.现金捐款/捐物</view>
			<view class="detail">
				<view class="detail-item">单位：罗田县红十字会</view>
				<view class="detail-item">地点：湖北省黄冈市罗田县凤山镇东岳庙街1号</view>
				<view class="detail-item">联系方式：左申宏 18972710279 0713-5056528</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniCopy from '../../components/js_sdk/xb-copy/uni-copy.js';
export default {
	data() {
		return {
			list: [
				{
					id: 0,
					spread_url: 11,
					name: '罗田县红十字会',
					count: '工行罗田支行',
					number: '1814074109044004055'
				}
			]
		};
	},

	methods: {
		tocontrilist() {
			uni.navigateTo({
				url: '/pages/applic/tocontrilist'
			});
		},
		copy(value) {
			let obj = this;
			let content = value; //需要复制的内容
			console.log('复制的内容:', content);
			// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
			const result = uniCopy(content);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		}
	}
};
</script>

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

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

	.top {
		align-items: center;
		width: 100%;
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
		}
		.font {
			margin-left: 20rpx;
			.china-font {
				font-size: 27rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #101010;
			}
			.english-font {
				margin-top: 6rpx;
				font-size: 12rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #101010;
			}
		}
	}

	.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;

		.title {
			margin-top: 60rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #101010;
		}

		.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;
					background-color: #f1f1f1;
					border-radius: 10rpx;
					line-height: 34rpx;
					font-size: 24rpx;
					color: #333;
					// 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: #000;
				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;
				}
			}

			.phone {
				margin-left: 138rpx;
				height: 40rpx;
				color: #000;
			}
		}

		.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;
		}
	}
}
</style>