wxDownload.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <template>
  2. <view class="wx_download">
  3. <view class="content">
  4. <view>
  5. <view class="download-box" style="padding-top: 66upx;">
  6. <u-image width="80%" mode="widthFix" :src="download_src.img1"></u-image>
  7. </view>
  8. <view class="download-box" style="padding: 28upx 0;">
  9. <u-image width="48%" mode="widthFix" :src="download_src.img2"></u-image>
  10. </view>
  11. <view class="download-box" style="padding: 66upx 0 40upx;">
  12. <u-button type="primary" shape="circle" class="download-btn" @click="apkDownload">{{ $i18n.locale == 'zh' ? '下载能联全球APP' : 'Download' }}</u-button>
  13. </view>
  14. <view class="download-box">
  15. <easy-select ref="easySelect" size="medium" :value="languageSelect" :options="languageList" @selectOne="selectExportType"></easy-select>
  16. </view>
  17. </view>
  18. </view>
  19. <view v-if="is_wx" class="mask">
  20. <view class="warp">
  21. <u-image mode="widthFix" :src="is_wx_src.img1" style="width: 90%"></u-image>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import easySelect from '@/components/easy-select/easy-select';
  28. export default {
  29. components: {easySelect},
  30. data() {
  31. return {
  32. is_wx: false,
  33. platform: "",
  34. download_src: {
  35. img1: require("../../static/img/public/wxDownload/shan.png"),
  36. img2: require("../../static/img/public/wxDownload/icon.png")
  37. },
  38. is_wx_src: {
  39. img1: require("../../static/img/public/wxDownload/browser.png")
  40. },
  41. languageSelect:this.$i18n.locale=='zh'?'中文(简体)':'English',
  42. languageList:[
  43. {
  44. value: 'zh',
  45. label: '中文(简体)'
  46. }, {
  47. value: 'en',
  48. label: 'English'
  49. },
  50. ]
  51. };
  52. },
  53. onLoad() {
  54. this.init()
  55. },
  56. methods: {
  57. init() {
  58. this.getPlatform()
  59. if (this.is_weixin()) {
  60. this.is_wx = true;
  61. } else {
  62. this.is_wx = false;
  63. }
  64. },
  65. is_weixin() {
  66. let ua = navigator.userAgent.toLowerCase();
  67. if (ua.match(/MicroMessenger/i) == "micromessenger") {
  68. return true;
  69. } else {
  70. return false;
  71. }
  72. },
  73. getPlatform() {
  74. this.platform = uni.getSystemInfoSync().platform;
  75. },
  76. apkDownload() {
  77. if(this.platform=='android'){
  78. window.location.href = 'https://www.geidcp.com/api/file/pub/app/apk/SN.apk'
  79. }
  80. if(this.platform=='ios'){
  81. window.location.href = 'https://apps.apple.com/us/app/id1543854564'
  82. }
  83. },
  84. selectExportType(data){
  85. this.languageSelect = data.label;
  86. this.$i18n.locale = data.value;
  87. },
  88. }
  89. }
  90. </script>
  91. <style scoped lang="scss">
  92. uni-page-body {
  93. padding-top: 0;
  94. }
  95. page {
  96. height: 100%;
  97. }
  98. .wx_download {
  99. position: relative;
  100. width: 100%;
  101. height: 100%;
  102. }
  103. .content{
  104. position: absolute;
  105. top: 0;
  106. left: 0;
  107. width: 100%;
  108. height: 100%;
  109. }
  110. .mask{
  111. position: absolute;
  112. width: 100%;
  113. height: 100%;
  114. top: 0;
  115. left: 0;
  116. background: rgba(60,60,60,0.6);
  117. z-index: 9999;
  118. }
  119. .download-box {
  120. display: flex;
  121. justify-content: center;
  122. .download-btn {
  123. height: 60upx;
  124. display: inline-block;
  125. line-height: 60upx;
  126. padding: 0 30upx;
  127. }
  128. .u-btn--primary{
  129. background-color: linear-gradient(to right, #38BCEE, #333DDC);
  130. }
  131. /deep/ .easy-select{
  132. border: none;
  133. width: 200upx!important;
  134. .uni-input-input{
  135. font-size: 20upx;
  136. }
  137. .easy-select-options-item{
  138. font-size: 20upx;
  139. }
  140. }
  141. }
  142. .warp {
  143. display: flex;
  144. justify-content: center;
  145. width: 100%;
  146. height: 100%;
  147. //background: #3c3c3c;
  148. }
  149. </style>