Skip to content

U
uniapp_vedio
Commit 7d089bb1 authored by mengcuiguang's avatar mengcuiguang
Browse files
Options

添加在线客服

parent 49d321a0
Hide whitespace changes
Inline Side-by-side
Showing with 178 additions and 47 deletions
vedio/components/home/my.vue
View file @ 7d089bb1
<template> <template>
<view class="body"> <view class="body">
<view v-if="showMask" class="show-mask flex-v" @click="showMask=false"> <view v-if="showMask" class="show-mask flex-v" @click="showMask=false">
<view class="mt-30" style="width: 90%;text-align: right;"> <view class="mt-30" style="width: 90%;text-align: right;">
<image style="width: 30rpx;height: 30rpx;padding:6rpx; <image style="width: 30rpx;height: 30rpx;padding:6rpx;
border-radius: 40rpx;border: 2px solid darkgray;" src="@/static/index/ic_quit_white.png" /> border-radius: 40rpx;border: 2px solid darkgray;" src="@/static/index/ic_quit_white.png" />
</view> </view>
<text class="mt-10" style="font-size: 46rpx;">如何继续使用?</text> <text class="mt-10" style="font-size: 46rpx;">如何继续使用?</text>
<text class="m-10">找到“寻觅短剧”小程序</text> <text class="m-10">找到“寻觅短剧”小程序</text>
<image class="mt-30" mode="widthFix" :src="maskImage1"></image> <image class="mt-30" mode="widthFix" :src="maskImage1"></image>
<image :src="maskImage2" mode="widthFix"></image> <image :src="maskImage2" mode="widthFix"></image>
</view> </view>
<z-paging style="height: 100%;background-color: #f0f8ff;"> <z-paging style="height: 100%;background-color: #f0f8ff;">
<view style="width: 100%;height: 340rpx; <view style="width: 100%;height: 340rpx;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
...@@ -109,10 +109,10 @@ ...@@ -109,10 +109,10 @@
<view class="item arrow" @click="handleWatchRecord"> <view class="item arrow" @click="handleWatchRecord">
观看记录 观看记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view> <view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view> </view>
<view class="item arrow" @click="handleFind"> <view class="item arrow" @click="handleFind">
如何找到我 如何找到我
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view> <view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view> </view>
<view class="item arrow" @click="handlePhone"> <view class="item arrow" @click="handlePhone">
联系客服 联系客服
...@@ -120,6 +120,8 @@ ...@@ -120,6 +120,8 @@
</view> </view>
</view> </view>
</z-paging> </z-paging>
<kefu-popup :show="showKefuPop" @close="showKefuPop = false" />
</view> </view>
</template> </template>
<script> <script>
...@@ -130,16 +132,22 @@ ...@@ -130,16 +132,22 @@
loading loading
} from '@/utils/fun.js'; } from '@/utils/fun.js';
import kefuPopup from '@/components/kefu-popup/kefu-popup.vue';
const app = getApp(); const app = getApp();
export default { export default {
name: 'index', name: 'index',
mixins: [common], mixins: [common],
components: {
kefuPopup
},
data() { data() {
return { return {
userBean: {}, userBean: {},
showMask: false, showMask: false,
maskImage1: 'https://mints-web.oss-cn-beijing.aliyuncs.com/images/bg_find1.png', showKefuPop: false,
maskImage1: 'https://mints-web.oss-cn-beijing.aliyuncs.com/images/bg_find1.png',
maskImage2: 'https://mints-web.oss-cn-beijing.aliyuncs.com/images/bg_find2.png' maskImage2: 'https://mints-web.oss-cn-beijing.aliyuncs.com/images/bg_find2.png'
}; };
}, },
...@@ -181,20 +189,12 @@ ...@@ -181,20 +189,12 @@
}, },
handleCoinPay() { handleCoinPay() {
navigateTo(`/pagesA/vipPay/vipPay`) navigateTo(`/pagesA/vipPay/vipPay`)
}, },
handleFind(){ handleFind() {
this.showMask = true this.showMask = true
}, },
handlePhone() { handlePhone() {
wx.makePhoneCall({ this.showKefuPop = true
phoneNumber: '4000969950',
success: function(res) {
console.log('拨打电话成功！');
},
fail: function(res) {
console.log('拨打电话失败！');
}
})
}, },
paySuccess(largeType) { paySuccess(largeType) {
// largeType=vip 开通vip // largeType=vip 开通vip
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
<style lang="scss"> <style lang="scss">
@import '@/scss/uni.scss'; @import '@/scss/uni.scss';
.body { .body {
height: 100%; height: 100%;
background-color: #f0f8ff; background-color: #f0f8ff;
} }
...@@ -255,19 +255,19 @@ ...@@ -255,19 +255,19 @@
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
//box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
} }
.show-mask { .show-mask {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
position: absolute; position: absolute;
z-index: 999; z-index: 999;
color: white; color: white;
align-items: center; align-items: center;
image { image {
width: 90%; width: 90%;
} }
} }
</style> </style>
\ No newline at end of file
vedio/components/kefu-popup/kefu-popup.vue 0 → 100644
View file @ 7d089bb1
<template>
<view>
<uni-popup type="bottom" ref="kefuPop" :maskClick="false" :isMaskClick="false">
<view class="container">
<image @click="onClose" style="width: 50rpx; height: 50rpx;margin-left:auto;margin-right: 30rpx;
margin-bottom: 30rpx;" src="https://mints-web.oss-cn-beijing.aliyuncs.com/images/ic_close_white.png"></image>
<view class="content">
<text class="button1" @click="handleBtn1">客服电话</text>
<button class="button2" open-type="im" data-im-id="58428734699">客服在线</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {
EXPRESS_ID
} from "@/utils/adConstant.js"
export default {
name: 'kefuPopup',
props: {
show: {
type: Boolean,
default: false,
}
},
data() {
return {
imId: "58428734699"
};
},
methods: {
handleShow() {
this.$refs.kefuPop.open('bottom');
},
onClose() {
this.$refs.kefuPop.close('bottom');
this.$emit('close');
},
handleBtn1() {
wx.makePhoneCall({
phoneNumber: '4000969950',
success: function(res) {
console.log('拨打电话成功！');
},
fail: function(res) {
console.log('拨打电话失败！');
}
})
this.onClose()
},
imCallback(e) {
console.log("跳转IM客服成功", e.detail);
this.onClose()
},
onimError(e) {
console.log("拉起IM客服失败", e.detail);
this.onClose()
}
},
watch: {
show: {
handler: function(newVal, oldVal) {
if (newVal) {
this.handleShow();
} else {
this.$refs.kefuPop.close('bottom');
}
},
immediate: true
}
}
};
</script>
<style lang="scss">
.container {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
.content {
border-radius: 20rpx;
background-color: white;
display: flex;
width: 100%;
padding: 30rpx 0;
flex-direction: column;
align-items: center;
.title {
color: black;
font-size: 40rpx;
font-weight: bold;
margin-bottom: 30rpx;
}
.button1 {
width: 600rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
margin: 20rpx 20rpx;
border-radius: 10rpx;
background-color: orange;
color: white;
font-size: 36rpx;
box-shadow: 0 0 2px 0px rgba(255, 255, 255, 0.1);
}
.button2 {
width: 600rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
margin: 20rpx 20rpx;
border-radius: 10rpx;
background-color: white;
border: 1px orange solid;
color: orange;
font-size: 36rpx;
box-shadow: 0 0 2px 0px rgba(255, 255, 255, 0.1);
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment