85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<template>
|
|
<!-- 二维码弹窗模式 -->
|
|
<view class="cs-mask" v-if="mode === 'qrcode'" @click="$emit('close')">
|
|
<view class="cs-popup" @click.stop>
|
|
<text class="cs-popup__title">扫码添加客服微信</text>
|
|
<image class="cs-popup__img" :src="qrcodeUrl || '/static/logo.png'" mode="aspectFit" />
|
|
<view class="cs-popup__close" @click="$emit('close')">关闭</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 小程序客服按钮模式 -->
|
|
<button v-else class="cs-btn" open-type="contact">
|
|
<text>联系客服</text>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { get } from '../utils/request'
|
|
|
|
defineProps<{
|
|
mode: 'qrcode' | 'contact'
|
|
}>()
|
|
|
|
defineEmits<{
|
|
close: []
|
|
}>()
|
|
|
|
const qrcodeUrl = ref('')
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const data: any = await get('/api/config/customer_service_qrcode')
|
|
if (data) qrcodeUrl.value = data
|
|
} catch { /* fallback to logo */ }
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cs-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 999;
|
|
}
|
|
.cs-popup {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 40rpx;
|
|
text-align: center;
|
|
width: 500rpx;
|
|
}
|
|
.cs-popup__title {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.cs-popup__img {
|
|
width: 360rpx;
|
|
height: 360rpx;
|
|
}
|
|
.cs-popup__close {
|
|
margin-top: 24rpx;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
.cs-btn {
|
|
background: #e4393c;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
border: none;
|
|
padding: 16rpx 32rpx;
|
|
border-radius: 44rpx;
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|