lucky_shop/components/ns-contact/ns-contact.vue

<template>
    <view class="contact-wrap">
        <slot></slot>
        <!-- #ifdef MP-ALIPAY -->
        <view class="contact-button" @click="contactServicer">
            <contact-button :tnt-inst-id="config.instid" :scene="config.scene" size="1000rpx"
                v-if="config.type == 'aliapp'" />
        </view>
        <!-- #endif -->

        <!-- #ifdef MP-WEIXIN -->
        <!-- 微信小程序官方客服按钮 -->
        <button v-if="useOfficialService" type="default" hover-class="none" open-type="contact" 
            class="contact-button" sessionFrom="weapp" showMessageCard="true"
            :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath"
            :send-message-img="sendMessageImg"></button>
        
        <!-- 微信小程序自定义客服按钮 -->
        <button v-else type="default" hover-class="none" class="contact-button" @click="contactServicer"></button>
        <!-- #endif -->
        
        <!-- #ifndef MP-WEIXIN && MP-ALIPAY -->
        <!-- 其他平台保持原逻辑 -->
        <button type="default" hover-class="none" :open-type="openType" class="contact-button" @click="contactServicer"
            :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath"
            :send-message-img="sendMessageImg" :show-message-card="true"></button>
        <!-- #endif -->

        <uni-popup ref="servicePopup" type="center">
            <view class="service-popup-wrap">
                <view class="head-wrap" @click="$refs.servicePopup.close()">
                    <text>联系客服</text>
                    <text class="iconfont icon-close"></text>
                </view>
                <view class="body-wrap">{{ siteInfo.site_tel ? '请联系客服，客服电话是' + siteInfo.site_tel : '抱歉，商家暂无客服，请线下联系' }}
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<!-- 客服组件 -->
<script>
import { createCustomerService } from '@/common/js/customer-service.js';

export default {
    name: 'ns-contact',
    props: {
        niushop: {
            type: Object,
            default: function () {
                return {};
            }
        },
        sendMessageTitle: {
            type: String,
            default: ''
        },
        sendMessagePath: {
            type: String,
            default: ''
        },
        sendMessageImg: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            customerService: null,
            buttonConfig: null
        };
    },
    computed: {
        /**
         * 是否使用官方客服
         */
        useOfficialService() {
            if (!this.buttonConfig) return true;
            
            // #ifdef MP-WEIXIN
            // 如果是微信小程序，检查配置
            if (this.buttonConfig.type === 'weapp') {
                // 默认使用官方客服，除非明确设置为false
                return this.buttonConfig.useOfficial !== false;
            }
            // #endif
            
            return false;
        },
        
        /**
         * 客服配置
         */
        config() {
            return this.customerService?.getPlatformConfig() || {};
        },
        
        /**
         * 打开类型
         */
        openType() {
            return this.buttonConfig?.openType || '';
        }
    },
    created() {
        // 初始化客服服务
        this.customerService = createCustomerService(this);
        this.buttonConfig = this.customerService.getButtonConfig();
    },
    methods: {
        /**
         * 联系客服
         */
        contactServicer() {
            // 如果是微信/支付宝小程序客服，由系统自动处理
            if (this.buttonConfig.openType === 'contact') {
                return;
            }

            // 使用统一客服处理
            this.customerService.handleCustomerClick({
                niushop: this.niushop,
                sendMessageTitle: this.sendMessageTitle,
                sendMessagePath: this.sendMessagePath,
                sendMessageImg: this.sendMessageImg
            });
        }
    }
};
</script>

<style lang="scss">
.contact-wrap {
    width: 100%;
    height: 100%;
    position: relative;

    .contact-button {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 5;
        padding: 0;
        margin: 0;
        opacity: 0;
        overflow: hidden;
    }
}

.service-popup-wrap {
    width: 600rpx;

    .head-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx;
        height: 90rpx;
    }

    .body-wrap {
        text-align: center;
        padding: 30rpx;
        height: 100rpx;
    }
}
</style>