pet-front/otherPages/binding/components/y-card.vue

<template>
	<view class="card-item flex-colc" :style="{'background-image':`url(${data.bgUrl})`}">
		<!-- 		<view class="num">
			{{data.methodNum}}
		</view> -->
		<view class="size-30 fw700 mb30" :style="{'color':data.titleColour}">
			{{data.title}}
		</view>
		<view class="color-aea size-22">
			{{data.des}}
		</view>
		<view class="y-input flex-rowc" :style="{background:data.inputBg}" v-if="data.copy">
			<input class="codeInput" type="text" v-model="data.code" />
			<view class="copy flex-rowc size-30" @click="copyHandle(data)">
				复制
			</view>
		</view>
		<view class="btn flex-rowc mt16 " @click="goToShare" v-else>
			保存海报
		</view>
	</view>
</template>

<script setup>
	import tab from '../../../plugins/tab';
	const {
		data
	} = defineProps({
		data: {
			type: Object,
			default: () => {}
		}
	})

	const emit = defineEmits(['emitCopy', 'savePoster']);

	const copyHandle = (data) => {
		uni.setClipboardData({
			data: data.code,
			success: () => {
				uni.showToast({
					title: "复制成功"
				})
			},
			fail: () => {
				uni.showToast({
					title: "复制失败",
					icon: "none"
				})
			}
		})
	}

	const goToShare = () => {
		emit("savePoster")
		// tab.navigateTo("/otherPages/binding/share/index")
	}
</script>

<style scoped lang="scss">
	.card-item {
		width: 684rpx;
		padding: 106rpx 0 26rpx;
		position: relative;
		border-radius: 16rpx;
		// background-color: #eee;
		margin-bottom: 10rpx;
		background-repeat: no-repeat;
		background-size: 685rpx;

		.num {
			position: absolute;
			left: 0;
			top: 0;
			color: #FE8165;
			background-color: #FFC6B9;
			padding: 0 12rpx;
			border-radius: 16rpx 0 16rpx 0;
		}

		.y-input {
			width: 570rpx;
			height: 90rpx;
			background-color: #FDD6CE;
			margin-top: 24rpx;
			border-radius: 16rpx;

			.codeInput {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.copy {
				width: 109rpx;
				height: 58rpx;
				border-radius: 58rpx;
				border: 2rpx solid #C4867A;
				color: #C4867A;
			}
		}

		.btn {
			width: 570rpx;
			height: 90rpx;
			border: 2rpx solid #587CA1;
			color: #587CA1;
			border-radius: 90rpx;
		}
	}
</style>