105 lines
3.1 KiB
Vue
105 lines
3.1 KiB
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> |