123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211 |
- <template>
- <view class="bg">
- <!-- <navbar backColor="#fff" :config="config"></navbar> -->
- <view class="view-alert" v-if="showHint">
- <view class="alert-text">
- 点击右上角按钮,然后在弹出的菜单中,点击在浏览器中打开,即可下载安装
- </view>
- <image class="alert-arrow" src="../static/alert-arrow.png" mode="aspectFit"></image>
- </view>
- <view class="top-box">
- <image src="/static/login/logo.png" mode="" class="logo"></image>
- </view>
- <view class="btn-row">
- <button class="btn" @click="downLoad(0)">
- <image src="/static/login/android.png" mode="aspectFit" class="logo"></image>
- 安卓下载
- </button>
- <button class="btn" @click="downLoad(1)">
- <image src="/static/login/ios.png" mode="aspectFit" class="logo"></image>
- IOS下载
- </button>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- config: {
- back: true, //false是tolbar页面 是则不写
- title: '"宜格服务"懂宜昌,更懂你!',
- color: "#1A1A1A",
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [1, "#fff"],
- statusBarFontColor: "#1A1A1A",
- },
- appInfo: null,
- showHint:false
- };
- },
- onLoad(options) {
- const ua = navigator.userAgent.toLowerCase()
- const isWeixin = ua.indexOf('micromessenger') != -1;
- this.showHint = isWeixin
- },
- methods: {
- // hintModal() {
- // const href = window.location.href
- // uni.showModal({
- // title: '提示',
- // content: '请在浏览器打开下载',
- // confirmText: "复制链接",
- // success: function(res) {
- // if (res.confirm) {
- // console.log('用户点击确定');
- // uni.setClipboardData({
- // data: href,
- // success: function() {
- // uni.showToast({
- // title: '复制成功'
- // })
- // }
- // });
- // } else if (res.cancel) {
- // console.log('用户点击取消');
- // }
- // }
- // });
- // },
- // getData(type) {
- // // #ifdef H5
- // // 需条件编译的代码
- // const ua = navigator.userAgent.toLowerCase()
- // const isWeixin = ua.indexOf('micromessenger') != -1;
- // if (isWeixin) {
- // this.hintModal()
- // } else {
- // this.$http.get("/app/version/newest", {
- // type: type
- // }).then((res) => {
- // if (res && res.data && res.code == 200) {
- // window.location.href = res.data.downloadLink
- // } else {
- // this.$mUtil.toast("暂无下载地址")
- // }
- // });
- // }
- // // #endif
- // // #ifndef H5
- // this.hintModal();
- // // #endif
- // },
-
- getData(type){
- this.$http.get("/app/version/newest", {
- type: type
- }).then((res) => {
- if (res && res.data && res.code == 200) {
- window.location.href = res.data.downloadLink
- } else {
- this.$mUtil.toast("暂无下载地址")
- }
- });
- },
- downLoad(type) {
- this.getData(type)
- // window.location.href = type == 1 ? this.appInfo.android_link : this.appInfo.ios_link;
- },
- },
- };
- </script>
- <style>
- page {
- width: 100%;
- height: 100%;
- }
- </style>
- <style lang='scss' scopd>
- .view-alert {
- position: absolute;
- left: 0;
- top: 0;
- z-index: 9;
- width: 750rpx;
- background: rgb(52, 52, 52);
- margin-left: 0px;
- margin-right: 0px;
- padding: 60rpx 30rpx 60rpx 60rpx;
- box-shadow: rgba(22, 22, 23, 0.62) 0px -10px 16px inset;
- display: flex;
- justify-content: space-between;
- align-items: stretch;
- box-sizing: border-box;
- .alert-text {
- flex: 1;
- /* width: calc(100% - 60rpx); */
- color: #7f7e7e;
- font-weight: 400 !important;
- padding-right: 60rpx;
- line-height: 1.5;
- }
- .alert-arrow {
- flex-shrink: 0;
- width: 60rpx;
- height: 60rpx;
- margin-top: -30rpx;
- }
- }
- .bg {
- width: 100%;
- height: 100%;
- background: url('../static/bg.png') no-repeat;
- background-size: 100% 100%;
- }
- .top-box {
- position: absolute;
- display: flex;
- width: 100%;
- align-items: center;
- justify-content: center;
- top: 400rpx;
- left: 50%;
- transform: translateX(-50%);
- .logo {
- width: 186rpx;
- height: 186rpx;
- }
- }
- .btn-row {
- position: fixed;
- display: flex;
- width: 100%;
- justify-content: space-around;
- flex-direction: column;
- align-items: center;
- bottom: 400rpx;
- left: 50%;
- transform: translateX(-50%);
- .btn {
- border-radius: 60rpx;
- width: 80%;
- background: #E6E6E6;
- color: #30AFB5;
- margin-top: 30rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- image {
- width: 40rpx;
- height: 40rpx;
- margin-right: 10rpx;
- }
- }
- }
- </style>
|