90 lines
2.5 KiB
Vue
90 lines
2.5 KiB
Vue
<route lang="json5" type="page">
|
|
{
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
},
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<view class="bg-[#fff] h-[100vh] flex flex-col">
|
|
<Navbar safeAreaInsetTop :bordered="false" title="在线客服" leftArrow @clickLeft="handleBack">
|
|
<template #title>
|
|
<text class="text-[#1F2329] text-[36rpx] font-medium">在线客服</text>
|
|
</template>
|
|
</Navbar>
|
|
|
|
<view class="flex-1 bg-[#F8F8F8] px-[32rpx] pb-safe">
|
|
<view class="mt-[84rpx] h-[754rpx] rounded-[16rpx] bg-[#fff]">
|
|
<view class="py-[48rpx] mx-[48rpx] avatar-border flex justify-center items-center">
|
|
<image
|
|
class="min-w-[144rpx] min-h-[144rpx] w-[144rpx] h-[144rpx] rounded-full"
|
|
src="https://api.static.ycymedu.com/sub/images/customerService/avatar.jpg"
|
|
></image>
|
|
<view class="flex flex-col text-[#000] ml-[32rpx]">
|
|
<text class="mb-[12rpx] font-normal text-[28rpx]">专属客服为您服务</text>
|
|
<view class="flex items-center">
|
|
<text class="text-[44rpx] font-medium whitespace-nowrap">{{ phoneNumber }}</text>
|
|
<view
|
|
@click="makePhoneCall"
|
|
class="rounded-[8rpx] w-[88rpx] h-[44rpx] btn-border text-[#1580FF] text-[24rpx] font-normal flex items-center justify-center ml-[44rpx]"
|
|
>
|
|
拨打
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="px-[168rpx] pt-[48rpx]">
|
|
<image
|
|
class="w-[352rpx] h-[352rpx]"
|
|
src="https://api.static.ycymedu.com/images/kf.jpg"
|
|
:show-menu-by-longpress="true"
|
|
></image>
|
|
|
|
<view class="flex items-center justify-center mt-[34rpx]">
|
|
<view class="i-carbon-fingerprint-recognition text-[#E75859] text-[28rpx]"></view>
|
|
<text class="text-[24rpx] text-[#000] font-normal ml-[12rpx]">
|
|
扫码添加客服企业微信
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
|
|
|
|
const phoneNumber = '400-621-1003'
|
|
|
|
const makePhoneCall = () => {
|
|
uni
|
|
.makePhoneCall({
|
|
phoneNumber: phoneNumber,
|
|
})
|
|
.catch((err) => {
|
|
console.error(err)
|
|
})
|
|
}
|
|
|
|
const handleBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.icon-style {
|
|
font-size: 48rpx;
|
|
}
|
|
|
|
.btn-border {
|
|
border: 2rpx solid #1580ff;
|
|
}
|
|
|
|
.avatar-border {
|
|
border-bottom: 2rpx solid #ececec;
|
|
}
|
|
</style>
|