yb5.0 init

mixin/index.js

@@ -57,7 +57,8 @@ module.exports = {
   data() {
     return {
       globalImgUrls:globalImgUrls,// 图片资源
-      globalBgMusic:uni.getBackgroundAudioManager()
+      globalBgMusic:uni.getBackgroundAudioManager(),
+      globalRecorder:uni.getRecorderManager()
     };
   },
   onLoad(options) {

pages-applyPermission/applyPermission.vue

@@ -78,7 +78,7 @@ export default {
                 tel: '',
                 permission: '',
             },
-            source:"",//来源 1-我的 2-活动 3-图库
+            source:"",//来源 1-我的 2-活动 3-图库 4-问答
             from_page:''
         }
     },

pages-question/answerDetail.vue

@@ -0,0 +1,115 @@
+<template>
+    <view class="answerdetail-page">
+        <view class="detail-title">
+            <text>{{ questionItem.text }}</text>
+            <text>{{ questionItem.time }}</text>
+        </view>
+        <view class="recode">
+            麦克风
+            {{audioTime}}
+        </view>
+        <view class="recode-btn">
+            <view @click="handleAudio(1)">开始录音</view>
+            <view @click="handleAudio(2)">暂停录音</view>
+            <view @click="handleAudio(3)">停止录音</view>
+            <view @click="handleAudio(4)">播放录音</view>
+        </view>
+    </view>
+</template>
+
+<script>
+const moment=require('@/utils/moment-with-locales.min')
+moment.locale('zh-cn');
+export default {
+    data() {
+        return {
+            questionItem: {
+                id: 1,
+                text: '疫情下全球苯乙烯市场有什么动荡和影响',
+                time: '2022.5.23 14:40',
+                source: 'xxx.mp3',
+                isAnswer: 1,//1未回答,2已回答
+                status: 1,//1:未录音;2:正在录音;3:已暂停;4:完成录音
+            },
+            innerAudio: null,//该页面的音频
+            audioCount:0,
+            audioTime:'00:00',
+            timer:null
+        };
+    },
+    onLoad() {
+		this.initAudio()
+	},
+	ononUnload(){
+		this.destoryAudio()
+	},
+    methods: {
+        //初始化audio
+		initAudio() {
+			this.innerAudio = uni.createInnerAudioContext()
+			this.handleAudioFun()
+            this.handleRecorderFun()
+		},
+		//销毁audio
+		destoryAudio() {
+			if (this.innerAudio) {
+				this.innerAudio.destory()
+			}
+		},
+        handleAudioFun(){
+            this.innerAudio.onPlay(()=>{
+                console.log('播放录音了')
+            })
+        },
+        handleRecorderFun(){
+            this.globalRecorder.onStart(()=>{
+                console.log('开始录音')
+            })
+            this.globalRecorder.onPause(()=>{
+                console.log('暂停录音')
+                this.cleanTime()
+            })
+            this.globalRecorder.onStop((res)=>{
+                console.log('录音完成')
+                console.log('res',JSON.stringify(res))
+                this.innerAudio.src = res.tempFilePath
+                this.cleanTime()
+            })
+            /* this.globalRecorder.onFrameRecorded((res)=>{
+                console.log('?',res)
+            }) */
+        },
+        handleAudio(type) {
+            //根据questionItem.status
+            if (type === 1) {
+                this.globalRecorder.start({ duration: 180000,frameSize:'1' })
+                this.clockTime()
+            } else if (type === 2) {
+                this.globalRecorder.pause()
+            } else if (type === 3) {
+                this.globalRecorder.stop()
+                this.cleanTime()
+            }else{
+                this.innerAudio.play()
+            }
+
+        },
+        clockTime(){
+            console.log('开始计时')
+            this.timer = setInterval(()=>{
+                if(this.timer){
+                    this.audioCount++
+                    this.audioTime = moment(this.audioCount*1000).format('mm:ss')
+                }
+            },1000)
+        },
+        cleanTime(){
+            this.timer = null
+            this.audioTime = moment(this.audioCount*1000).format('mm:ss')
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+</style>

pages-question/answerList.vue

@@ -0,0 +1,43 @@
+<template>
+    <view class="answer-page">
+        <view class="answer-bar">
+            <view>待回答</view>
+            <view>已回答</view>
+            <view>全部</view>
+        </view>
+        <view class="answer-list">
+            <view class="answer-item" v-for="item in questionList" :key="item.id">
+                <text class="item-title">{{item.text}}</text>
+                <view>
+                    <text class="item-time">
+                        提问时间:{{item.time}}
+                    </text>
+                    <view class="item-type" @click="toDetail(item)">
+                        {{item.type===1?'去回答':'查看'}}
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+    export default{
+        data(){
+            return{
+                questionList:[
+                    {
+                        id:1,//问题id
+                        text:'疫情下全球苯乙烯市场有什么动荡和影响?',//问题描述
+                        time:'2022.5.23 14:40',//提问时间
+                        type:1,//问题状态:1待回答,2已回答
+                    }
+                ]
+            }
+        },
+        methods:{
+            toDetail(item){
+                uni.navigateTo({url:'/pages-question/answerDetail'})
+            }
+        }
+    }
+</script>

pages-question/hasQuestion.vue

@@ -0,0 +1,22 @@
+<template>
+  <view>
+      我要提问
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

pages.json

@@ -35,6 +35,12 @@
 				"navigationBarTitleText": "我的"
 			}
 		},
+		{
+			"path": "pages/question/question",
+			"style": {
+				"navigationBarTitleText": "问答社区"
+			}
+		},
 		{
 			"path":"pages/login",
 			"style":{
@@ -194,6 +200,30 @@
 					"path": "ficcService"
 				}
 			]
+		},
+		// 问答模块
+		{
+			"root": "pages-question",
+			"pages": [
+				{
+					"path": "answerList",
+					"style":{
+						"navigationBarTitleText": "问答列表"
+					}
+				},
+				{
+					"path": "answerDetail",
+					"style":{
+						"navigationBarTitleText": "问答详情"
+					}
+				},
+				{
+					"path": "hasQuestion",
+					"style":{
+						"navigationBarTitleText": "我要提问"
+					}
+				}
+			]
 		}
 	],
 		

pages/question/mock.js

@@ -0,0 +1,195 @@
+const moment=require('@/utils/moment-with-locales.min')
+moment.locale('zh-cn');
+const varietyData = [{
+        title: '宏观经济',
+        btnList: [{
+                name: '宏观',
+            },
+            {
+                name: '利率债'
+            }
+        ]
+    },
+    {
+        title: '化工',
+        btnList: [{
+                name: '原油'
+            },
+            {
+                name: '沥青'
+            },
+            {
+                name: 'PTA'
+            },
+            {
+                name: 'MEG'
+            },
+            {
+                name: '聚酯'
+            },
+            {
+                name: '织造终端'
+            },
+            {
+                name: '纯苯+苯乙烯'
+            },
+            {
+                name: '甲醇'
+            },
+            {
+                name: '聚烯烃'
+            },
+            {
+                name: '橡胶'
+            },
+            {
+                name: 'PVC'
+            }
+        ]
+    },
+    {
+        title: '黑色',
+        btnList: [{
+                name: '钢材'
+            },
+            {
+                name: '铁矿'
+            },
+            {
+                name: '双焦(焦煤、焦炭)'
+            },
+            {
+                name: '玻璃纯碱'
+            }
+        ]
+    },
+    {
+        title: '有色',
+        btnList: [{
+                name: '有色(铜、铝)'
+            },
+            {
+                name: '有色(锌、铅)'
+            },
+            {
+                name: '镍+不锈钢'
+            },
+            {
+                name: '钴锂'
+            }
+        ]
+    }
+]
+const questionData = [
+    {
+        id: 1,
+        question: {//提问者
+            text: '疫情下全球苯乙烯市场有什么动荡和影响?',//提问内容
+            time: '2022.5.23 14:40',//提问时间
+        },
+        answer: {//回答者
+            img: 'xxx.png',//头像
+            name: '林秋馨',
+            group: '能化组',// ->弘则能化组研究员
+            source: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',// 回答音频
+            time: '2022.5.23 15:40',//回答时间
+            audioTime:moment(21*1000).format('mm:ss'),//音频长度,单位秒
+            isplay: false,
+            ispause:false,
+        },
+        label: '苯乙烯',// 问题分类
+    },
+    {
+        id: 2,
+        question: {//提问者
+            text: '疫情下全球苯乙烯市场有什么动荡和影响?',//提问内容
+            time: '2022.5.23 14:40',//提问时间
+        },
+        answer: {//回答者
+            img: 'xxx.png',//头像
+            name: '林秋馨',
+            group: '能化组',// ->弘则能化组研究员
+            source: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',// 回答音频
+            time: '2022.5.23 15:40',//回答时间
+            audioTime:moment(21*1000).format('mm:ss'),//音频长度,单位秒
+            isplay: false,
+            ispause:false,
+        },
+        label: '苯乙烯',// 问题分类
+    },
+    {
+        id: 3,
+        question: {//提问者
+            text: '疫情下全球苯乙烯市场有什么动荡和影响3?',//提问内容
+            time: '2022.5.23 14:40',//提问时间
+        },
+        answer: {//回答者
+            img: 'xxx.png',//头像
+            name: '林秋馨',
+            group: '能化组',// ->弘则能化组研究员
+            source: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',// 回答音频
+            time: '2022.5.23 15:40',//回答时间
+            audioTime:moment(21*1000).format('mm:ss'),//音频长度,单位秒
+            isplay: false,
+            ispause:false,
+        },
+        label: '苯乙烯',// 问题分类
+    },
+    {
+        id: 4,
+        question: {//提问者
+            text: '疫情下全球苯乙烯市场有什么动荡和影响4?',//提问内容
+            time: '2022.5.23 14:40',//提问时间
+        },
+        answer: {//回答者
+            img: 'xxx.png',//头像
+            name: '林秋馨',
+            group: '能化组',// ->弘则能化组研究员
+            source: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',// 回答音频
+            time: '2022.5.23 15:40',//回答时间
+            audioTime:moment(21*1000).format('mm:ss'),//音频长度,单位秒
+            isplay: false,
+            ispause:false,
+        },
+        label: '苯乙烯',// 问题分类
+    },
+    {
+        id: 5,
+        question: {//提问者
+            text: '疫情下全球苯乙烯市场有什么动荡和影响?5',//提问内容
+            time: '2022.5.23 14:40',//提问时间
+        },
+        answer: {//回答者
+            img: 'xxx.png',//头像
+            name: '林秋馨',
+            group: '能化组',// ->弘则能化组研究员
+            source: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',// 回答音频
+            time: '2022.5.23 15:40',//回答时间
+            audioTime:moment(21*1000).format('mm:ss'),//音频长度,单位秒
+            isplay: false,
+            ispause:false,
+        },
+        label: '苯乙烯',// 问题分类
+    },
+    {
+        id: 6,
+        question: {//提问者
+            text: '疫情下全球苯乙烯市场有什么动荡和影响?6',//提问内容
+            time: '2022.5.23 14:40',//提问时间
+        },
+        answer: {//回答者
+            img: 'xxx.png',//头像
+            name: '林秋馨',
+            group: '能化组',// ->弘则能化组研究员
+            source: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',// 回答音频
+            time: '2022.5.23 15:40',//回答时间
+            audioTime:moment(21*1000).format('mm:ss'),//音频长度,单位秒
+            isplay: false,
+            ispause:false,
+        },
+        label: '苯乙烯',// 问题分类
+    }
+]
+export {
+    varietyData,questionData
+}

pages/question/question.vue

@@ -0,0 +1,423 @@
+<template>
+	<view class="question-wrap">
+		<view class="question-top">
+			<text>热门问答</text>
+			<van-checkbox class="auth-box" shape="square" v-if="vistor.premission.seeAuth" :value="onlySeeAuth"
+				@change="handleAuthChange" checked-color="#D5AD79" icon-size="16px">
+				<view class="text">只看我的{{ vistor.type === 1 ? '回答' : '提问' }}</view>
+			</van-checkbox>
+			<image src="../../static/chart/menu.png" mode="widthFix" class="menu-icon" v-if="vistor.premission.option"
+				@click="showPopup" />
+			<van-popup :show="isPopupShow" position="bottom" closeable :close-on-click-overlay="true"
+				@close="isPopupShow = false" :style="{ height: '30%' }">
+				<view class="pop-title">全部筛选</view>
+				<view class="pop-option-list">
+					<van-collapse :value="activeNames" @change="changeSelecOption">
+						<van-collapse-item :title="item.title" :name="index" v-for="(item, index) in optionList"
+							:key="index">
+							<view class="option-btn-wrap">
+								<view class="option-btn" v-for="(i, _index) in item.btnList" :key="_index">
+									{{ i.name }}
+								</view>
+							</view>
+
+						</van-collapse-item>
+					</van-collapse>
+				</view>
+			</van-popup>
+		</view>
+		<view class="question-list">
+			<view class="question-item" v-for="item in quesionList" :key="item.id">
+				<text class="item-title">{{ item.question.text }}</text>
+				<text class="item-time">提问时间:{{ item.question.time }}</text>
+				<view class="item-answer">
+					<view class="answer-img"></view>
+					<view class="answer-other">
+						<view class="answer-info">
+							<text class="name">{{ item.answer.name }}</text>
+							<text class="group">弘则{{ item.answer.group }}组研究员</text>
+							<text class="label">#{{ item.label }}</text>
+						</view>
+						<view class="answer" @click="handleAudio(item)">
+							{{ item.answer.isplay ? '暂停' : '播放' }}
+							<template v-if="item.answer.isplay || item.answer.ispause">
+								{{ currentAudioMsg.audioCurrentTime }}/{{ item.answer.audioTime }}
+							</template>
+							<template v-else>
+								{{ item.answer.audioTime }}
+							</template>
+
+						</view>
+					</view>
+				</view>
+				<text class="item-time">回答时间:{{ item.answer.time }}</text>
+			</view>
+		</view>
+		<view class="topage-btn" @click="toPage(vistor)">
+			{{ vistor.type === 1 ? '待回答' : '我要提问' }}
+		</view>
+		<!-- 弹窗 -->
+		<van-popup :show="pupData.show" @close="pupData.show = false" closeable :close-on-click-overlay="false">
+			<view class="global-pup">
+				<view class="content">
+					<rich-text :nodes="pupData.content"></rich-text>
+				</view>
+				<view class="flex bot" v-if="pupData.type == 'contact'">
+					<view @click="handleCallPhone(pupData.mobile)">拨号</view>
+				</view>
+				<view class="flex bot" v-else-if="pupData.type == 'apply'">
+					<view @click="handleApply">立即申请</view>
+				</view>
+			</view>
+		</van-popup>
+	</view>
+</template>
+
+<script>
+import { varietyData, questionData } from './mock.js'
+import { apiApplyPermission, apiUserInfo } from '@/api/user'
+const moment = require('@/utils/moment-with-locales.min')
+moment.locale('zh-cn');
+export default {
+	data() {
+		return {
+			onlySeeAuth: false,//只看我的
+			quesionList: questionData,
+			isPopupShow: false,//弹出层是否展示
+			optionList: varietyData,
+			activeNames: [],//collapse
+			innerAudio: null,//该页面的音频
+			vistor: {//用户信息
+				type: 1,//1研究员,2客户
+				status: '潜在',//type为2的时候才判断
+				premission: {
+					seeAuth: true,//只看我的筛选框
+					option: true,//弹窗筛选框
+					isApply: false,//之前是否提交过申请
+					canPlay: false,//是否能够播放音频
+				}
+			},
+			currentAudioMsg: {
+				id: '',
+				audioCurrentTime: 0,//音频播放实时时间
+				audioTime: 0,//当前音频时间
+				audioCurrentUrl: '',//当前音频地址
+			},//当前正在播放音频的一些信息
+			pupData: {
+				show: false,
+				content: '',//弹窗html字符串
+				type: '',
+				mobile: "",
+				customer_info:{}
+			},
+		}
+	},
+	onLoad() {
+		this.initAudio()
+		this.getVistor()
+	},
+	ononUnload() {
+		this.destoryAudio()
+	},
+	methods: {
+		//初始化audio
+		initAudio() {
+			this.innerAudio = uni.createInnerAudioContext()
+			this.handleAudioFun()
+		},
+		//销毁audio
+		destoryAudio() {
+			if (this.innerAudio) {
+				this.innerAudio.destory()
+			}
+		},
+		//获取访客信息:研究员/客户
+		getVistor() {
+			this.vistor = {
+				type: 2,
+				status: '冻结',
+				premission: {
+					seeAuth: false,//只看我的筛选框
+					option: false,//弹窗筛选框
+					isApply: false,//之前是否提交过申请
+					canPlay: false,//是否能够播放音频
+				}
+			}
+		},
+		//audio事件
+		handleAudioFun() {
+			this.innerAudio.onPlay(() => {
+				console.log('开始了')
+			})
+			this.innerAudio.onTimeUpdate(() => {
+				//console.log('时间更新')
+				this.currentAudioMsg.audioCurrentTime = moment(this.innerAudio.currentTime * 1000).format('mm:ss')
+				//console.log('duration',this.innerAudio.duration)
+			})
+			this.innerAudio.onEnded(() => {
+				console.log('音频播放完毕')
+				const { id } = this.currentAudioMsg
+				this.quesionList.map(i => {
+					if (i.id === id) {
+						i.answer.isplay = false
+						i.answer.ispause = false
+					}
+				})
+				this.changeCurrentAudio({ id: '', answer: { source: '', audioTime: 0 } })
+			})
+		},
+		//初始化无权限弹窗
+		initPupData() {
+			let str = '<p>您暂无权限查看语音回复</p>'
+			const { status} = this.vistor
+			if (['潜在', '流失'].includes(status)) {
+				this.pupData.type = 'apply'
+				str += '<p>若想查看可以申请开通</p>'
+			}
+			if (['冻结', '暂停试用'].includes(status)) {
+				this.pupData.mobile = 123456
+				this.pupData.type = 'contact'
+				str += '<p>若想查看可以联系对口销售</p>'
+			}
+			this.pupData.customer_info.status = status
+			this.pupData.customer_info.has_apply = this.vistor.premission.isApply
+			this.pupData.content = str
+			this.pupData.show = true
+		},
+		//拨号
+		handleCallPhone(mobile) {
+
+		},
+		//申请
+		async handleApply() {
+			if (this.pupData.customer_info.has_apply) {//已经申请过
+				this.pupData.content = `<p>您已提交过申请，请耐心等待</p>`
+				this.pupData.type = ''
+			} else {
+				if (!this.pupData.customer_info.status || this.pupData.customer_info.status != '流失') {
+					uni.navigateTo({
+						url: "/pages-applyPermission/applyPermission?source=4"
+					})
+				} else {//主动调一次申请权限接口 
+					/*  const res=await apiApplyPermission({
+						 company_name:this.pupData.customer_info.company_name,
+						 real_name:this.pupData.customer_info.name,
+						 source:2,
+						 from_page:'活动列表'
+					 })
+					 if(res.code===200){} */
+					this.pupData.content = `<p>申请已提交</p><p>请等待销售人员与您联系</p>`
+					this.pupData.type = ''
+
+				}
+			}
+		},
+		//播放音频
+		handleAudioPlay() {
+			this.innerAudio.onCanplay(() => {
+				this.innerAudio.play()
+				//console.log('音频长度:', this.innerAudio)
+				//this.currentAudioMsg.audioTime = this.innerAudio.duration
+			})
+		},
+		//切换当前播放音频
+		changeCurrentAudio(item) {
+			const { id } = item
+			const { source, audioTime } = item.answer
+			this.currentAudioMsg = {
+				id: id,
+				audioCurrentTime: 0,
+				audioTime: audioTime,
+				audioCurrentUrl: source
+			}
+		},
+		//点击'只看我的
+		handleAuthChange(e) {
+			this.onlySeeAuth = e.detail
+			console.log('ok')
+		},
+		//点击筛选
+		showPopup() {
+			console.log('a')
+			this.isPopupShow = true
+		},
+		changeBtnShow() {
+		},
+		changeSelecOption(e) {
+			this.activeNames = e.detail
+		},
+		//点击某条音频
+		handleAudio(item) {
+			//如果没有权限,弹窗并return
+			if (!this.vistor.premission.canPlay) {
+				this.initPupData()
+				return
+			}
+			const { source, isplay } = item.answer
+			if (isplay) {
+				//说明是播放->暂停
+				this.innerAudio.pause()
+			} else if (item.id === this.currentAudioMsg.id) {
+				//说明是暂停->播放
+				this.innerAudio.play()
+			} else {
+				console.log('aaa', source, this.innerAudio.src)
+				//说明是第一次播放或点击其他播放项
+				this.changeCurrentAudio(item)
+				this.innerAudio.stop()
+				this.innerAudio.src = source
+				/* this.innerAudio.play() */
+				this.handleAudioPlay()
+
+			}
+			this.quesionList.map((i) => {
+				if (i.id === item.id) {
+					if (i.answer.isplay) {
+						i.answer.ispause = true
+					}
+					i.answer.isplay = !i.answer.isplay
+				} else {
+					i.answer.isplay = false
+					i.answer.ispause = false
+				}
+			})
+		},
+		//点击'我要提问'/'待回答'
+		toPage(item) {
+			const { type } = item
+			if (type === 1) {
+				uni.navigateTo({ url: '/pages-question/answerList' })
+			} else {
+				uni.navigateTo({ url: '/pages-question/hasQuestion' })
+			}
+		}
+	}
+
+}
+</script>
+
+<style lang="scss">
+.question-wrap {
+
+	/deep/ .van-cell__title,
+	.van-cell__value {
+		flex: none !important;
+	}
+}
+
+page {
+	padding-bottom: env(safe-area-inset-bottom);
+}
+</style>
+<style lang="scss" scoped>
+.question-wrap {
+	padding: 0 30rpx;
+
+	.question-top {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 100rpx;
+		border-bottom: 1rpx solid black;
+		background-color: white;
+		position: sticky;
+		top: 0;
+		left: 0;
+		z-index: 99;
+
+		.auth-box {
+			flex: 1;
+		}
+
+		.menu-icon {
+			width: 40rpx;
+		}
+
+		.pop-title {
+			text-align: center;
+		}
+
+		.pop-option-list {
+			.option-btn-wrap {
+				display: flex;
+				flex-wrap: wrap;
+
+				.option-btn {
+					min-width: 100rpx;
+					text-align: center;
+					color: black;
+					background-color: gray;
+					border-radius: 5rpx;
+					margin: 10rpx 10rpx 0 0;
+				}
+			}
+		}
+	}
+
+	.question-list {
+		.question-item {
+			margin-bottom: 20rpx;
+
+			.item-title {
+				display: block;
+			}
+
+			.item-time {
+				color: gray;
+			}
+
+			.item-answer {
+				display: flex;
+
+				.answer-img {
+					width: 75rpx;
+					height: 75rpx;
+					border: 1rpx solid black;
+					border-radius: 50%;
+					margin-right: 50rpx;
+				}
+
+				.answer-other {
+					display: flex;
+					flex-direction: column;
+
+					.answer-info {
+						.name {
+							color: black;
+						}
+
+						.group {
+							color: grey;
+						}
+
+						.label {
+							color: orange;
+						}
+					}
+				}
+
+				.answer {
+					width: 420rpx;
+					height: 50rpx;
+					border-radius: 10rpx;
+					border: 1rpx solid black;
+				}
+			}
+		}
+	}
+
+	.topage-btn {
+		position: fixed;
+		width: 220rpx;
+		height: 64rpx;
+		text-align: center;
+		line-height: 64rpx;
+		left: 50%;
+		margin-left: -110rpx;
+		bottom: 220rpx;
+		background-color: orange;
+		color: white;
+
+	}
+}
+</style>

pages/report/report.vue

@@ -66,6 +66,16 @@
           </view>    
       </view>
     </van-popup>
+
+    <!-- 问答社区入口 -->
+    <movable-area v-if="x!==0" :style="{height:movableStyle.height,top:movableStyle.top}">
+        <movable-view direction="all" :x="x" :y="y" @touchend="handleTouchEnd">
+          <view class="quesion-btn" @click="goQuesion">
+            问答社区
+          </view>
+        </movable-view>
+      </movable-area>
+    
   </view>
 </template>
 
@@ -86,7 +96,13 @@ export default {
         paddingTop:40+'px',
         paddingBottom:'4px'
       },
-
+      movableStyle:{
+        height:0,
+        top:0,
+        stickyHeight:0
+      },
+      x:0,
+      y:245,
       authData:{
         show:false,
         isBuy:false,//是否为已购客户
@@ -120,6 +136,9 @@ export default {
 			},
 		})
   },
+  onReady() {
+    this.initMovableArea()
+  },
   onPullDownRefresh() {
     this.getTopAuthList()
     setTimeout(() => {
@@ -145,7 +164,40 @@ export default {
         paddingBottom:'4px'
       }
     },
-
+    //初始化movable
+    initMovableArea(){
+      //确定movable-area的区域和movable-view的初始位置
+      const {windowWidth,safeAreaInsets,windowHeight} = uni.getSystemInfoSync()
+      this.x = windowWidth - 20
+      console.log('sys',uni.getSystemInfoSync())
+      const query = uni.createSelectorQuery().in(this);
+      setTimeout(()=>{
+        query.select('.top-sticky').boundingClientRect(data => {
+          console.log("得到布局位置信息" + JSON.stringify(data));
+          //49是tab-bar的高
+          this.movableStyle = {
+            top:data.height+'px',
+            height:(windowHeight - Number(data.height) - safeAreaInsets.bottom - 49)+'px',
+            stickyHeight:Number(data.height)
+          }
+        }).exec();
+      },200)
+    },
+    handleTouchEnd(e){
+      console.log('end',e)
+      /* const {clientX} */
+      const query = uni.createSelectorQuery().in(this);
+      const {windowWidth} = uni.getSystemInfoSync()
+      query.select('.quesion-btn').boundingClientRect(data => {
+          console.log("得到布局位置信息2" + JSON.stringify(data));
+          if(data.left<=windowWidth/2-25){
+            this.x = 1
+          }else{
+            this.x = windowWidth - 20
+          }
+          this.y = Number(data.top) - this.movableStyle.stickyHeight
+        }).exec();
+    },
     //顶部权限数据
     async getTopAuthList(){
       const res=await apiReportIndexPageAuthList()
@@ -248,6 +300,11 @@ export default {
       }
     },
 
+    //跳转问答社区
+    goQuesion(){
+      uni.navigateTo({url:`/pages/question/question`})
+    },
+
     // 拨打电话
     handleCallPhone(tel){
       uni.makePhoneCall({
@@ -291,6 +348,20 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+movable-area{
+  position: fixed;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: calc(50% - 100rpx);
+  pointer-events: none;
+  z-index: 3;
+  movable-view{
+    width:fit-content;
+    height:fit-content;
+    pointer-events: auto;
+  }
+}
 .top-sticky{
   position: sticky;
   top: 0;
@@ -438,5 +509,12 @@ export default {
     }
   }
 }
+.quesion-btn{
+  width:100rpx;
+  height:100rpx;
+  background-color: red;
+  border-radius: 50%;
+  z-index: 50;
+}
 
 </style>