首先是判断安卓/ios/pc,根据不同的设备展示不同的按钮
<template>
<div class="download">
<div class="download-body">
<div v-if="type===2">
<a type="button" href="javascript:void(0)" class="android-download downloadBtn" @click="showQRCodeDialog(0)">
<img src="../../assets/images/android.png" alt="">Android版本下载
</a>
<a type="button" href="javascript:void(0)" class="ios-download downloadBtn" @click="showQRCodeDialog(1)">
<img src="../../assets/images/ios.png" alt="">ios版本下载
</a>
</div>
<div style="margin-bottom:100px" v-else-if="type===1">
<a type="button" href="javascript:void(0)" class="ios-download downloadBtn" @click="download">
<img src="../../assets/images/ios.png" alt="">ios版本下载
</a>
</div>
<div style="margin-bottom:100px" v-else>
<a type="button" href="javascript:void(0)" class="android-download downloadBtn" @click="download">
<img src="../../assets/images/android.png" alt="">Android版本下载
</a>
</div>
</div>
<div class="dialog">
<div class="dialog-shade" :class="{on: showQRCode}" @click="showQRCode = false"></div>
<div class="dialog-content" :class="{on: showQRCode}">
<div class="QRCode-dialog-text">
<div id="qrcode"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
components: {},
data() {
return {
type: 0, //Android:0;ios:1;pc:2
showQRCode: false
};
},
computed: {
},
methods: {
...mapActions(["getAction", "postAction"]),
created() {
//判断设备
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
this.type = 1;
} else if (/(Android)/i.test(navigator.userAgent)) {
//判断Android
this.type = 0;
} else {
//pc
this.type = 2;
}
},
mounted() {
},
updated() {},
watch: {}
};
</script>