228 lines
5.3 KiB
Vue
228 lines
5.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 01. 电话区 -->
|
|
<view class="use-item" @click="goCall(phone)">
|
|
<view class="use-item-left">
|
|
<image src="/static/unielepystatic/img/kefu/bg-customer-service.png" class="img_left"></image>
|
|
<text class="use-item-text-left">电话客服</text>
|
|
</view>
|
|
<view class="use-item-right">
|
|
<text class="use-item-text-right">{{phone}}</text>
|
|
<image src="/static/unielepystatic/img/kefu/back.png" class="img_right"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 01. 微信客服区 -->
|
|
<view class="use-item2">
|
|
<view class="use-item2-left">
|
|
<image src="/static/unielepystatic/img/kefu/wechat-kefu.png" class="img_left"></image>
|
|
<text class="use-item-text-left">微信客服</text>
|
|
</view>
|
|
<view class="ewm-inner">
|
|
<image :show-menu-by-longpress="true" :src="qrcode" class="img"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import common from "@/api/common.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
phone: '400-88888888',
|
|
qrcode: '/static/unielepystatic/img/kefu/icon-defalutqrcode.png',
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
// const res = uni.getSystemInfoSync()
|
|
// console.log(res)
|
|
},
|
|
methods: {
|
|
//获取数据(请根据实际情况配置客服信息的接口，以下只是示例)
|
|
getData() {
|
|
getRotationimgs(params).then(res=>{
|
|
if(res.code == 2000) {
|
|
let data = res.data.data
|
|
console.log(data)
|
|
this.swiperDatas = data
|
|
}
|
|
// else {
|
|
// uni.showToast({
|
|
// icon:'none',
|
|
// mask:true,
|
|
// title:res.msg || '请求失败'
|
|
// })
|
|
// }
|
|
})
|
|
},
|
|
//拨打电话
|
|
goCall(phone){
|
|
const res = uni.getSystemInfoSync()
|
|
//安卓手机要设置一个showActionSheet
|
|
uni.showActionSheet({
|
|
title: phone,
|
|
itemList: ['呼叫'],
|
|
itemColor:'#4f9cff',
|
|
success: function (res) {
|
|
// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
|
|
if(res.tapIndex+1==1){
|
|
uni.makePhoneCall({
|
|
phoneNumber:phone,
|
|
success: (res) => {
|
|
console.log("调用电话成功")
|
|
},
|
|
fail: (res) => {
|
|
console.log("调用电话失败")
|
|
}
|
|
})
|
|
}
|
|
},
|
|
fail: function (res) {
|
|
console.log(res.errMsg);
|
|
}
|
|
});
|
|
//ios系统默认有个弹窗
|
|
// if(res.platform=='ios'){
|
|
// //#ifdef H5 || MP-WEIXIN
|
|
// uni.makePhoneCall({
|
|
// phoneNumber:phone,
|
|
// success: (res) => {
|
|
// console.log("调用电话成功")
|
|
// },
|
|
// fail: (res) => {
|
|
// console.log("调用电话失败")
|
|
// }
|
|
// })
|
|
// //#endif
|
|
// //#ifdef APP-PLUS
|
|
// plus.device.dial(phone, true);
|
|
// //#endif
|
|
|
|
// }else{
|
|
// //#ifdef H5 || MP-WEIXIN
|
|
// //安卓手机要设置一个showActionSheet
|
|
// uni.showActionSheet({
|
|
// title: phone,
|
|
// itemList: ['呼叫'],
|
|
// itemColor:'#4f9cff',
|
|
// success: function (res) {
|
|
// // console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
|
|
// if(res.tapIndex+1==1){
|
|
// uni.makePhoneCall({
|
|
// phoneNumber:phone,
|
|
// success: (res) => {
|
|
// console.log("调用电话成功")
|
|
// },
|
|
// fail: (res) => {
|
|
// console.log("调用电话失败")
|
|
// }
|
|
// })
|
|
// }
|
|
// },
|
|
// fail: function (res) {
|
|
// console.log(res.errMsg);
|
|
// }
|
|
// });
|
|
// //#endif
|
|
// //#ifdef APP-PLUS
|
|
// plus.device.dial(phone, true);
|
|
// //#endif
|
|
// }
|
|
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container{
|
|
padding-top: 20rpx;
|
|
}
|
|
.margin-top {
|
|
margin-top: 20rpx;
|
|
}
|
|
.margin-lr {
|
|
margin-left: 20rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.use-item{
|
|
display:flex;
|
|
align-items: center;// 垂直居中
|
|
height: 110rpx;
|
|
background: #FFFFFF;
|
|
justify-content: space-between;
|
|
.use-item-text-left{
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin-left: 23rpx;
|
|
}
|
|
.use-item-text-right{
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
.img_left{
|
|
margin-left: 30rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
cursor: pointer;
|
|
}
|
|
.img_right{
|
|
width: 12rpx;
|
|
height: 20rpx;
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
.use-item-left{
|
|
display:flex;
|
|
align-items: center;// 垂直居中
|
|
}
|
|
.use-item-right{
|
|
display:flex;
|
|
align-items: center;// 垂直居中
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.use-item2{
|
|
margin-top: 20rpx;
|
|
background: #FFFFFF;
|
|
.img_center{
|
|
width: 218rpx;
|
|
height: 218rpx;
|
|
padding-left: 220rpx;
|
|
padding-top: 55rpx;
|
|
}
|
|
}
|
|
.use-item2-left{
|
|
display:flex;
|
|
align-items: center;// 垂直居中
|
|
padding-top: 30rpx;
|
|
.use-item-text-left{
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin-left: 23rpx;
|
|
}
|
|
.img_left{
|
|
margin-left: 30rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.ewm-inner{
|
|
display: flex;
|
|
align-items: center;// 垂直居中
|
|
justify-content: center;//水平居中
|
|
padding:3rem;
|
|
.img{
|
|
width: 218rpx;
|
|
height: 218rpx;
|
|
}
|
|
}
|
|
</style>
|