down - 副本.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <view class="bg">
  3. <!-- <navbar backColor="#fff" :config="config"></navbar> -->
  4. <view class="view-alert" v-if="showHint">
  5. <view class="alert-text">
  6. 点击右上角按钮,然后在弹出的菜单中,点击在浏览器中打开,即可下载安装
  7. </view>
  8. <image class="alert-arrow" src="../static/alert-arrow.png" mode="aspectFit"></image>
  9. </view>
  10. <view class="top-box">
  11. <image src="/static/login/logo.png" mode="" class="logo"></image>
  12. </view>
  13. <view class="btn-row">
  14. <button class="btn" @click="downLoad(0)">
  15. <image src="/static/login/android.png" mode="aspectFit" class="logo"></image>
  16. 安卓下载
  17. </button>
  18. <button class="btn" @click="downLoad(1)">
  19. <image src="/static/login/ios.png" mode="aspectFit" class="logo"></image>
  20. IOS下载
  21. </button>
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. config: {
  30. back: true, //false是tolbar页面 是则不写
  31. title: '"宜格服务"懂宜昌,更懂你!',
  32. color: "#1A1A1A",
  33. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  34. backgroundColor: [1, "#fff"],
  35. statusBarFontColor: "#1A1A1A",
  36. },
  37. appInfo: null,
  38. showHint:false
  39. };
  40. },
  41. onLoad(options) {
  42. const ua = navigator.userAgent.toLowerCase()
  43. const isWeixin = ua.indexOf('micromessenger') != -1;
  44. this.showHint = isWeixin
  45. },
  46. methods: {
  47. // hintModal() {
  48. // const href = window.location.href
  49. // uni.showModal({
  50. // title: '提示',
  51. // content: '请在浏览器打开下载',
  52. // confirmText: "复制链接",
  53. // success: function(res) {
  54. // if (res.confirm) {
  55. // console.log('用户点击确定');
  56. // uni.setClipboardData({
  57. // data: href,
  58. // success: function() {
  59. // uni.showToast({
  60. // title: '复制成功'
  61. // })
  62. // }
  63. // });
  64. // } else if (res.cancel) {
  65. // console.log('用户点击取消');
  66. // }
  67. // }
  68. // });
  69. // },
  70. // getData(type) {
  71. // // #ifdef H5
  72. // // 需条件编译的代码
  73. // const ua = navigator.userAgent.toLowerCase()
  74. // const isWeixin = ua.indexOf('micromessenger') != -1;
  75. // if (isWeixin) {
  76. // this.hintModal()
  77. // } else {
  78. // this.$http.get("/app/version/newest", {
  79. // type: type
  80. // }).then((res) => {
  81. // if (res && res.data && res.code == 200) {
  82. // window.location.href = res.data.downloadLink
  83. // } else {
  84. // this.$mUtil.toast("暂无下载地址")
  85. // }
  86. // });
  87. // }
  88. // // #endif
  89. // // #ifndef H5
  90. // this.hintModal();
  91. // // #endif
  92. // },
  93. getData(type){
  94. this.$http.get("/app/version/newest", {
  95. type: type
  96. }).then((res) => {
  97. if (res && res.data && res.code == 200) {
  98. window.location.href = res.data.downloadLink
  99. } else {
  100. this.$mUtil.toast("暂无下载地址")
  101. }
  102. });
  103. },
  104. downLoad(type) {
  105. this.getData(type)
  106. // window.location.href = type == 1 ? this.appInfo.android_link : this.appInfo.ios_link;
  107. },
  108. },
  109. };
  110. </script>
  111. <style>
  112. page {
  113. width: 100%;
  114. height: 100%;
  115. }
  116. </style>
  117. <style lang='scss' scopd>
  118. .view-alert {
  119. position: absolute;
  120. left: 0;
  121. top: 0;
  122. z-index: 9;
  123. width: 750rpx;
  124. background: rgb(52, 52, 52);
  125. margin-left: 0px;
  126. margin-right: 0px;
  127. padding: 60rpx 30rpx 60rpx 60rpx;
  128. box-shadow: rgba(22, 22, 23, 0.62) 0px -10px 16px inset;
  129. display: flex;
  130. justify-content: space-between;
  131. align-items: stretch;
  132. box-sizing: border-box;
  133. .alert-text {
  134. flex: 1;
  135. /* width: calc(100% - 60rpx); */
  136. color: #7f7e7e;
  137. font-weight: 400 !important;
  138. padding-right: 60rpx;
  139. line-height: 1.5;
  140. }
  141. .alert-arrow {
  142. flex-shrink: 0;
  143. width: 60rpx;
  144. height: 60rpx;
  145. margin-top: -30rpx;
  146. }
  147. }
  148. .bg {
  149. width: 100%;
  150. height: 100%;
  151. background: url('../static/bg.png') no-repeat;
  152. background-size: 100% 100%;
  153. }
  154. .top-box {
  155. position: absolute;
  156. display: flex;
  157. width: 100%;
  158. align-items: center;
  159. justify-content: center;
  160. top: 400rpx;
  161. left: 50%;
  162. transform: translateX(-50%);
  163. .logo {
  164. width: 186rpx;
  165. height: 186rpx;
  166. }
  167. }
  168. .btn-row {
  169. position: fixed;
  170. display: flex;
  171. width: 100%;
  172. justify-content: space-around;
  173. flex-direction: column;
  174. align-items: center;
  175. bottom: 400rpx;
  176. left: 50%;
  177. transform: translateX(-50%);
  178. .btn {
  179. border-radius: 60rpx;
  180. width: 80%;
  181. background: #E6E6E6;
  182. color: #30AFB5;
  183. margin-top: 30rpx;
  184. display: flex;
  185. align-items: center;
  186. justify-content: center;
  187. image {
  188. width: 40rpx;
  189. height: 40rpx;
  190. margin-right: 10rpx;
  191. }
  192. }
  193. }
  194. </style>