181 lines
3.7 KiB
Vue
181 lines
3.7 KiB
Vue
<template>
|
||
<view class="call-box">
|
||
<view class="call-phone" v-for="(item, index) in list" :key="index">
|
||
<view class="head">
|
||
<view class="imgname">
|
||
<image src="../../static/img/fz_icon_gb/fz_icon_gb@2x.png" class="portrait"></image>
|
||
<view>{{item.title}}</view>
|
||
</view>
|
||
<view class="call">
|
||
<view class="call-btn" @click="calllPhone">
|
||
<image src="../../static/img/kf_icon_dh/kf_icon_dh.png" mode="aspectFit" class="dh-class"></image>
|
||
拨打电话
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="item" v-for="(item1, index1) in item.contact" :key="index1">
|
||
<view class="wx-qq">
|
||
<image :src="item1.image" class="wx-qq-image"></image>
|
||
<view>{{item1.qq}}</view>
|
||
</view>
|
||
<view class="copy" @click="copy">复制</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
list: [
|
||
{
|
||
title: '客户主管',
|
||
contact: [
|
||
{
|
||
qq: 'QQ：123',
|
||
image: '../../static/img/kf_icon_qq/kf_icon_qq.png'
|
||
},
|
||
{
|
||
qq: '微信：4231',
|
||
image: '../../static/img/kf_icon_wx/kf_icon_wx.png'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '客户主管',
|
||
contact: [
|
||
{
|
||
qq: 'QQ：123',
|
||
image: '../../static/img/kf_icon_qq/kf_icon_qq.png'
|
||
},
|
||
{
|
||
qq: '微信：4231',
|
||
image: '../../static/img/kf_icon_wx/kf_icon_wx.png'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '客户主管',
|
||
contact: [
|
||
{
|
||
qq: 'QQ：123',
|
||
image: '../../static/img/kf_icon_qq/kf_icon_qq.png'
|
||
},
|
||
{
|
||
qq: '微信：4231',
|
||
image: '../../static/img/kf_icon_wx/kf_icon_wx.png'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '客户主管',
|
||
contact: [
|
||
{
|
||
qq: 'QQ：123',
|
||
image: '../../static/img/kf_icon_qq/kf_icon_qq.png'
|
||
},
|
||
{
|
||
qq: '微信：4231',
|
||
image: '../../static/img/kf_icon_wx/kf_icon_wx.png'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
// 调用打电话
|
||
calllPhone () {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '18398608857' //仅为示例
|
||
});
|
||
},
|
||
// 复制
|
||
copy () {
|
||
uni.setClipboardData({
|
||
data: 'hello',
|
||
success: function () {
|
||
console.log('success');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.call-box {
|
||
margin: 30rpx 20rpx;
|
||
}
|
||
.call-phone {
|
||
margin-top: 30rpx;
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
padding-bottom: 0;
|
||
padding: 30rpx;
|
||
font-weight: 400;
|
||
background: #2B3062;
|
||
border-radius: 14rpx;
|
||
& .head {
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #576699;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
& .imgname {
|
||
display: flex;
|
||
align-items: center;
|
||
& .portrait {
|
||
margin-right: 20rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
& .call-btn {
|
||
width: 151rpx;
|
||
height: 50rpx;
|
||
background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
|
||
border-radius: 26rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0 12rpx;
|
||
& .dh-class {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
& .footer {
|
||
margin-top: 20rpx;
|
||
& .item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
& .copy {
|
||
font-size: 24rpx;
|
||
color: #FE192F;
|
||
line-height: 33rpx;
|
||
}
|
||
& .wx-qq {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
line-height: 33px;
|
||
& .wx-qq-image {
|
||
margin-right: 24rpx;
|
||
width: 28rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|