|
@@ -0,0 +1,141 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <uni-popup ref="addFollow" type="center" class="center_popup" :mask-click="false">
|
|
|
+ <view class="add_follow">
|
|
|
+ <view class="close_area">
|
|
|
+ <!-- <button class="close_btn" @click="closeAddFollow()">关闭</button> -->
|
|
|
+ </view>
|
|
|
+ <view class="info_alter">长按识别二维码添加客服</view>
|
|
|
+ <view class="qr_code_area">
|
|
|
+ <image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress></image>
|
|
|
+ </view>
|
|
|
+ <button class="save_btn" @click="saveImage()">保存图片添加客服</button>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ followQrcode:"",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.openAddFollow();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 客服显示
|
|
|
+ openAddFollow(){
|
|
|
+ // 返回结果
|
|
|
+ this.followQrcode = this.$checkAccess.getFollowQrcode();
|
|
|
+ // 有图才展示
|
|
|
+ if( this.followQrcode ) this.$refs.addFollow.open('center');
|
|
|
+ },
|
|
|
+ closeAddFollow(){
|
|
|
+ this.$refs.addFollow.close();
|
|
|
+ },
|
|
|
+ // 保存图片
|
|
|
+ saveImage(){
|
|
|
+ var that = this;
|
|
|
+ // 下载远程图片后保存到相册
|
|
|
+ uni.downloadFile({
|
|
|
+ url: this.followQrcode,
|
|
|
+ success:function(res) {
|
|
|
+ if(res.statusCode == 200){
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ success:function(res) {
|
|
|
+ uni.showToast({title:"保存成功",icon:'none'});
|
|
|
+ that.$refs.addFollow.close();
|
|
|
+ },
|
|
|
+ fail:function(err){
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+// 添加客服
|
|
|
+ .center_popup{
|
|
|
+ .add_follow{
|
|
|
+ display: block;
|
|
|
+ color: #FFFFFF;
|
|
|
+ width: 700rpx;
|
|
|
+ height: 1100rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 26rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
|
|
|
+ .close_area{
|
|
|
+ height: 100rpx;
|
|
|
+ display: block;
|
|
|
+ line-height: 100rpx;
|
|
|
+ .close_btn{
|
|
|
+ color: #FFFFFF;
|
|
|
+ float: right;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100rpx;
|
|
|
+ padding: 0rpx 0rpx;
|
|
|
+ border: 0rpx solid transparent;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .close_btn::after{
|
|
|
+ border: 0rpx solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info_alter{
|
|
|
+ display: block;
|
|
|
+ height: 100rpx;
|
|
|
+ font-size: 42rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100rpx;
|
|
|
+ }
|
|
|
+ .qr_code_area{
|
|
|
+ display: block;
|
|
|
+ width: 300rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ margin: 60rpx auto;
|
|
|
+ .qr_code{
|
|
|
+ float: left;
|
|
|
+ width: 300rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .save_btn{
|
|
|
+ color: #333333;
|
|
|
+ display: block;
|
|
|
+ width: 260rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ padding: 0rpx 0rpx;
|
|
|
+ margin: 40rpx auto;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border: 0rpx solid transparent;
|
|
|
+ }
|
|
|
+ .rule_info{
|
|
|
+ width: 600rpx;
|
|
|
+ display: block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|