app-govern/pages/home/service.vue

<template>
    <Cn-page :loading='loading'>
        <view slot='body'>
            <view class='index'>
                <!-- 客服页面 显示微信和电话 -->
                <view class="content">
                    <view class="content-item">
                        <view class="content-item-left">
                            <image src="/static/phone.png" style="height: 40rpx;width: 40rpx" />
                        </view>
                        <view class="content-item-right">
                            <view class="content-item-right-title">电话</view>
                            <view class="content-item-right-des">10086</view>
                        </view>
                        <view class="content-item-operation" @click="call">拨打</view>
                    </view>
                    <view class="content-item mt60">
                        <view class="content-item-left">
                            <image src="/static/wechat.png" style="height: 40rpx;width: 40rpx" />
                        </view>
                        <view class="content-item-right">
                            <view class="content-item-right-title">微信</view>
                            <view class="content-item-right-des">10086</view>
                        </view>
                        <view class="content-item-operation" @click="copy">复制</view>
                    </view>
                </view>
            </view>
        </view>
    </Cn-page>
</template>
<script>
export default {
    data () {
        return {
            loading: false
        }
    },
    methods: {
        call () {
            uni.makePhoneCall({
                phoneNumber: '10086'
            })
        },
        copy () {
            uni.setClipboardData({
                data: '10086',
                success: () => {
                    this.$util.toast('复制成功')
                }
            })
        }
    }
}
</script>
<style lang='scss'>
.index {
    padding: 34rpx;

    .content {
        margin-bottom: 20rpx;
        padding: 34rpx;
        background: $uni-theme-white;
        border-radius: 12rpx;

        .content-item {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .content-item-left {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 80rpx;
                height: 80rpx;
                border-radius: 12rpx;
            }

            .content-item-right {
                flex: 1;
                margin-left: 20rpx;

                .content-item-right-title {
                    font-size: 32rpx;
                    margin-bottom: 10rpx;
                }

                .content-item-right-des {
                    font-size: 28rpx;
                }
            }

            .content-item-operation {
                padding: 8rpx 20rpx;
                margin-left: 20rpx;
                font-size: 24rpx;
                color: #fff;
                background: $uni-theme-color;
                border-radius: 4rpx;
            }
        }
    }
}
</style>