129 lines
4.7 KiB
Vue
129 lines
4.7 KiB
Vue
<template>
|
|
<view class="mb-8">
|
|
<view class="flex justify-between items-center mb-4">
|
|
<view class="flex items-center">
|
|
<text class="text-2xl font-bold text-primary">红娘推荐</text>
|
|
<view class="ml-2 px-2 py-1 bg-primary/10 rounded-full">
|
|
<text class="text-xs text-primary font-medium">专业认证</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex items-center">
|
|
<text class="i-carbon-task-complete text-base text-primary"></text>
|
|
</view>
|
|
</view>
|
|
<view class="relative">
|
|
<view
|
|
class="p-5 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"
|
|
>
|
|
<view class="flex items-start">
|
|
<view class="relative">
|
|
<image
|
|
:src="matchmakerInfo.avatar"
|
|
mode="aspectFill"
|
|
class="w-24 h-24 rounded-full border-2 border-primary/20 shadow-md"
|
|
/>
|
|
<view
|
|
class="absolute -bottom-1 -right-1 w-7 h-7 bg-gradient-to-r from-primary to-primary/80 rounded-full flex items-center justify-center shadow-md"
|
|
>
|
|
<text class="i-carbon-task-complete text-xs text-white"></text>
|
|
</view>
|
|
</view>
|
|
<view class="ml-5 flex-1">
|
|
<view class="flex items-center mb-3">
|
|
<text class="text-xl font-bold text-gray-800 mr-3">{{ matchmakerInfo.name }}</text>
|
|
<view class="px-3 py-1 bg-gradient-to-r from-primary/10 to-primary/5 rounded-full">
|
|
<text class="text-sm text-primary font-medium">金牌红娘</text>
|
|
</view>
|
|
</view>
|
|
<view class="space-y-2.5">
|
|
<view class="flex items-center">
|
|
<text class="i-carbon-logo-wechat text-lg text-gray-500 mr-2"></text>
|
|
<text class="text-sm text-gray-600">微信: {{ matchmakerInfo.wechat }}</text>
|
|
</view>
|
|
<view class="flex items-center">
|
|
<text class="i-carbon-phone text-lg text-gray-500 mr-2"></text>
|
|
<text class="text-sm text-gray-600">电话: {{ matchmakerInfo.phone }}</text>
|
|
</view>
|
|
<view class="flex items-center text-sm">
|
|
<text class="i-carbon-star-filled text-lg text-yellow-400 mr-2"></text>
|
|
<text class="text-gray-600">
|
|
成功率:
|
|
<text class="font-medium text-primary">{{ matchmakerInfo.successRate }}%</text>
|
|
</text>
|
|
<text class="mx-3 text-gray-300">|</text>
|
|
<text class="text-gray-600">
|
|
服务人数:
|
|
<text class="font-medium text-primary">{{ matchmakerInfo.serviceCount }}+</text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mt-5 pt-4 border-t border-gray-100">
|
|
<view class="flex justify-between items-center">
|
|
<view class="flex items-center">
|
|
<text class="i-carbon-chat text-lg text-gray-500 mr-2"></text>
|
|
<text class="text-sm text-gray-600">在线咨询</text>
|
|
</view>
|
|
<button
|
|
class="flex items-center px-5 py-2.5 bg-gradient-to-r from-[#FF6B6B] to-[#FF8E8E] text-white rounded-full text-sm font-medium shadow-md hover:shadow-lg hover:from-[#FF8E8E] hover:to-[#FF6B6B] transition-all duration-300 active:scale-95 active:shadow-inner"
|
|
@click="contactMatchmaker"
|
|
>
|
|
<text class="font-semibold">立即联系</text>
|
|
<text class="i-carbon-arrow-right text-xs ml-1"></text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
|
|
interface MatchmakerInfo {
|
|
name: string
|
|
avatar: string
|
|
wechat: string
|
|
phone: string
|
|
successRate: number
|
|
serviceCount: number
|
|
}
|
|
|
|
// 红娘信息
|
|
const matchmakerInfo = ref<MatchmakerInfo>({
|
|
name: '王红娘',
|
|
avatar:
|
|
'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg',
|
|
wechat: 'matchmaker123',
|
|
phone: '13800138000',
|
|
successRate: 98,
|
|
serviceCount: 1000,
|
|
})
|
|
|
|
// 联系红娘方法
|
|
const contactMatchmaker = () => {
|
|
uni.showActionSheet({
|
|
itemList: ['复制微信号', '拨打电话'],
|
|
success: (res) => {
|
|
if (res.tapIndex === 0) {
|
|
uni.setClipboardData({
|
|
data: matchmakerInfo.value.wechat,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '微信号已复制',
|
|
icon: 'success',
|
|
})
|
|
},
|
|
})
|
|
} else if (res.tapIndex === 1) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: matchmakerInfo.value.phone,
|
|
})
|
|
}
|
|
},
|
|
})
|
|
}
|
|
</script>
|