Browse Source
# Conflicts: # src/views/Enjoyableservices/index.vue # src/views/activity/detail.vuedev
15 changed files with 214 additions and 59 deletions
@ -0,0 +1,81 @@ |
|||||
|
<template> |
||||
|
<div class="footer" v-if="mobileModel!=='Phone'"> |
||||
|
<div class="flex flex-x flex-end " style="width: 150px;"> |
||||
|
<van-icon name="arrow-left" @click="goToPreviousPage()"/> |
||||
|
<!-- <div class="" @click="goToPreviousPage()"><</div> --> |
||||
|
<!-- <div class="AAA" @click="goToNextPage()">></div> --> |
||||
|
<van-icon name="arrow" @click="goToNextPage()" /> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
name: 'Android', |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
mobileModel:null |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getMobileModel() |
||||
|
}, |
||||
|
methods: { |
||||
|
goToPreviousPage() { |
||||
|
history.back(); |
||||
|
}, |
||||
|
goToNextPage() { |
||||
|
history.forward(); |
||||
|
}, |
||||
|
getMobileModel() { |
||||
|
var userAgent = navigator.userAgent || navigator.vendor || window.opera; |
||||
|
// 使用正则表达式匹配常见的移动设备型号 |
||||
|
var androidMatch = userAgent.match(/Android\s([0-9\.]+)[\s\/;]*[^\s]+/i); |
||||
|
var iosMatch = userAgent.match(/\((iPhone|iPad|iPod)[^;]+;[\s\S]+?OS\s([0-9_]+)/i); |
||||
|
this.mobileModel = "未知设备"; |
||||
|
if (androidMatch) { |
||||
|
this.mobileModel = "Android " + androidMatch[1]; |
||||
|
} else if (iosMatch) { |
||||
|
mobileModel = iosMatch[1] + " iOS " + iosMatch[2].replace(/_/g, '.'); |
||||
|
} else { |
||||
|
// 可以根据需要添加更多的匹配规则来识别更多设备 |
||||
|
var otherMatch = userAgent.match(/(Mobile|Tablet|Phone)/i); |
||||
|
if (otherMatch) { |
||||
|
this.mobileModel = otherMatch[0]; |
||||
|
} |
||||
|
} |
||||
|
console.log("用户的手机型号是:" + this.mobileModel); |
||||
|
this.$emit('send-number', this.mobileModel) |
||||
|
return this.mobileModel; |
||||
|
|
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.footer{ |
||||
|
background-color: white; |
||||
|
width: 375px; |
||||
|
height: 8vh; |
||||
|
display: flex; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
text-align: center; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 25px; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
|
|
Loading…
Reference in new issue