123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <template>
- <view class="content">
- <image class="logo" src="/static/logo.png"></image>
- <view class="text-area">
- <text class="title">{{title}}</text>
- </view>
- <view class="pages-bt" @click.stop="onMuLocation">
- 获取定位
- </view>
- <view class="">{{Position}}</view>
- <view class="pages-bt" style="margin-top: 50px;" @click.stop="showRecorder ? recStop():recReq()">
- {{showRecorder ? '停止录音':'开始录音'}}
- </view>
- {{audioUrl}}
- <audio :src="audioUrl" controls></audio>
- <mumu-getlocation ref='muLocation'></mumu-getlocation>
- </view>
- </template>
- <script>
- import mumuGetlocation from '@/uni_modules/mumu-getlocation/components/mumu-getlocation/mumu-getlocation.vue'
- import H5Recorder from "@/pages/task/components/H5Recorder.js"
- export default {
- mixins: [H5Recorder],
- components: { mumuGetlocation },
- data() {
- return {
- title: 'Hello',
- Position: "",
- showRecorder: false,
- audioUrl: "",
- }
- },
- onLoad() {
- },
- methods: {
- onMuLocation() {
- uni.showLoading({
- title: '获取定位中...',
- mask: true
- })
- // 初始化组件,并且检测是否开启与授权定位
- this.$refs.muLocation.__init().then(location => {
- // 用户授权了和开启了定位,把定位对象保存到 data 中
- // this.locationRef = location
- // 调用 getLocation 方法获取精准定位
- location.getLocation().then(res => {
- console.log('location', res);
- try {
- const { province, city, district, addr } = res || {}
- this.Position = `${province}${city}${district}${addr}`;
- } catch (e) {
- //TODO handle the exception
- }
- // res 就是返回的数据
- // uni.showModal({
- // content: JSON.stringify(res, null, 4)
- // })
- })
- uni.hideLoading()
- }, err => {
- // 用户拒绝了定位请求,获取系统没有开启定位功能
- uni.hideLoading()
- if (err.code === 1) {
- uni.showModal({
- title: '获取定位权限失败',
- content: '你拒绝了位置授权服务。请允许当前页面获取定位授权,后刷新页面。'
- })
- } else {
- uni.showModal({
- title: '获取定位权限失败',
- content: '请确定手机定位已打开,并且当前浏览器允许获取定位,都开启后请刷新页面。'
- })
- }
- })
- }
- }
- }
- </script>
- <style>
- .content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- .logo {
- height: 200rpx;
- width: 200rpx;
- margin-top: 200rpx;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 50rpx;
- }
- .text-area {
- display: flex;
- justify-content: center;
- }
- .title {
- font-size: 36rpx;
- color: #8f8f94;
- }
- .pages-bt {
- background-color: #ccc;
- }
- </style>
|