You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.1 KiB
111 lines
2.1 KiB
<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>
|