appUpdatePop.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. <template>
  2. <view>
  3. <u-popup v-model="show" mode="center" :closeable="!appInfo.status" border-radius="20"
  4. :mask-close-able="!appInfo.status" @close="close">
  5. <view class="popBox">
  6. <view class="imgBox">
  7. <!-- <image src="/static/logo-icon.png" mode="widthFix"></image> -->
  8. <!-- <image src="../logo.png" mode=""></image> -->
  9. <view class="imgBox_name">宜格服务</view>
  10. <text class="imgBox_ver">{{appInfo.version}}</text>
  11. </view>
  12. <view class="title">更新描述:</view>
  13. <view class="txt">{{appInfo.description||'无'}}</view>
  14. <view class="btnBox">
  15. <view v-if="startProgress" class="smallTitle">
  16. <view>下载进度:{{ downloadProgress }}%</view>
  17. <u-line-progress active-color="#3EBCD0" :show-percent="false" :percent="downloadProgress">
  18. </u-line-progress>
  19. </view>
  20. <view class="btn" v-else @click="handleUpdate()">立即更新</view>
  21. </view>
  22. </view>
  23. </u-popup>
  24. </view>
  25. </template>
  26. <script>
  27. import {
  28. versionNewest
  29. } from "@/api/government.js"
  30. export default {
  31. data() {
  32. return {
  33. show: false,
  34. appInfo: {},
  35. startProgress: false, // 下载进行 - 标记
  36. downloadProgress: 0,
  37. type: null
  38. }
  39. },
  40. onLoad(options) {
  41. if (options.type) {
  42. this.type = options.type
  43. }
  44. this.getAppInfo()
  45. },
  46. methods: {
  47. // // 获取更新信息
  48. getAppInfo() {
  49. // let type=1
  50. // let platform=uni.getSystemInfoSync().platform;
  51. // if(platform=='ios'){
  52. // type=0
  53. // }else if(platform=='android'){
  54. // type=1
  55. // }
  56. // this.$http.get('/app/version/newest',{type:type}).then(res => {
  57. // if (res && res.code == 200) {
  58. // this.appInfo = res.data || {};
  59. // // #ifdef APP-PLUS
  60. // plus.runtime.getProperty(plus.runtime.appid, (info) => {
  61. // this.versionCode = info.versionCode;
  62. // if (this.appInfo.version*1 > info.versionCode) {
  63. // this.show = true
  64. // }
  65. // })
  66. // // #endif
  67. // }
  68. // })
  69. const systemInfo = uni.getSystemInfoSync();
  70. let version_number = systemInfo.appVersion;
  71. let platform = uni.getSystemInfoSync().platform;
  72. let type = 0
  73. if (platform == 'ios') {
  74. type = 1
  75. } else if (platform == 'android') {
  76. type = 0
  77. }
  78. versionNewest({
  79. type: type
  80. }).then(res => {
  81. this.appInfo = res.data;
  82. if (version_number < this.appInfo.version) {
  83. this.show = true
  84. }
  85. })
  86. },
  87. close() {
  88. if (this.type == 1) {
  89. uni.navigateBack()
  90. }
  91. this.show = false;
  92. // this.$emit("closeAppUpdate")
  93. },
  94. // 开始下载任务
  95. createTask(downloadLink) {
  96. console.log("下载链接" + downloadLink)
  97. this.downloadProgress = 0;
  98. this.startProgress = true;
  99. // 创建下载任务对象
  100. this.downloadTask = uni.downloadFile({
  101. url: downloadLink,
  102. success: res => {
  103. if (res.statusCode === 200) {
  104. // 保存下载的安装包
  105. uni.saveFile({
  106. tempFilePath: res.tempFilePath,
  107. success: res => {
  108. this.packgePath = res.savedFilePath;
  109. // 进行安装
  110. this.installPackge();
  111. // 任务完成,关闭下载任务
  112. this.closeTask();
  113. }
  114. });
  115. }
  116. }
  117. });
  118. this.downloadTask.onProgressUpdate(res => {
  119. this.downloadProgress = res.progress;
  120. this.$forceUpdate()
  121. console.log(res.progress)
  122. });
  123. },
  124. // 关闭下载任务
  125. closeTask() {
  126. this.downloadTask.abort();
  127. this.downloadTask = null;
  128. this.startProgress = false;
  129. },
  130. installPackge() {
  131. // 安装更新
  132. plus.runtime.install(this.packgePath, {
  133. force: true
  134. });
  135. this.installed = true;
  136. // 保存更新记录到stroage,方便下次启动app时删除安装包
  137. uni.setStorage({
  138. key: 'updated',
  139. data: {
  140. completed: true,
  141. packgePath: this.packgePath
  142. },
  143. success: res => {
  144. console.log('成功保存更新记录');
  145. // console.log(res.data)
  146. }
  147. });
  148. // 判断是否为热更新(判断文件名中是否含有.wgt)
  149. if (this.packgePath.match(RegExp(/.wgt/))) {
  150. console.log("9999999999999")
  151. this.installed = false;
  152. uni.showModal({
  153. title: '提示',
  154. content: '应用将重启以完成更新',
  155. showCancel: false,
  156. complete: () => {
  157. plus.runtime.restart();
  158. }
  159. });
  160. }
  161. },
  162. // 取得最新版本及其所有信息
  163. // async getLatest() {
  164. // console.log("gengxinyemian")
  165. // this.info = '正在加载'; // 主标题显示版本号
  166. // this.Minfo = '未知'; // 副标题显示版本类型
  167. // this.updateInfo = '无'; // 更新摘要
  168. // this.buttonLoading = true;
  169. // this.verInfo = null;
  170. // let res = await this.$http.get('/app/config/info');
  171. // if (res.code == 200) {
  172. // this.buttonLoading = false;
  173. // console.log("gengxinxixi"+JSON.stringify(res.data))
  174. // this.info = res.data.name;
  175. // this.Minfo = res.data.ver;
  176. // this.updateInfo = res.data.info;
  177. // this.packgeSize = res.data.packge_size + 'MB';
  178. // this.verInfo = res.data;
  179. // if (this.verInfo) {
  180. // this.checkLatest(this.verInfo);
  181. // }
  182. // }
  183. // },
  184. handleUpdate() {
  185. // 判断系统类型
  186. if (plus.os.name.toLowerCase() === 'android') {
  187. if (this.appInfo.downloadLink && this.appInfo.downloadLink !== '#') {
  188. this.createTask(this.appInfo.downloadLink);
  189. } else {
  190. this.showToast('未找到下载地址');
  191. }
  192. } else {
  193. if (this.appInfo.downloadLink && this.appInfo.downloadLink !== '#') {
  194. // 我这里默认#也是没有地址,请根据业务自行修改
  195. // 苹果(A):进行热更新(如果iosUrl是wgt更新包的下载地址)判断文件名中是否含有.wgt
  196. if (this.appInfo.downloadLink.match(RegExp(/.wgt/))) {
  197. this.createTask(this.appInfo.downloadLink);
  198. } else {
  199. // 苹果(B):打开商店链接(如果iosUrl是苹果商店的地址)
  200. plus.runtime.openURL(this.appInfo.downloadLink);
  201. }
  202. } else {
  203. this.showToast('未找到ios商店地址');
  204. }
  205. }
  206. }
  207. }
  208. }
  209. </script>
  210. <style lang="scss">
  211. .popBox {
  212. width: 590rpx;
  213. height: 773rpx;
  214. padding: 50rpx 30rpx 80rpx;
  215. position: relative;
  216. background: url("../static/czd/updateBg.png");
  217. background-size: 590rpx 773rpx;
  218. .imgBox {
  219. font-size: 28rpx;
  220. color: #666666;
  221. margin-left: 40rpx;
  222. .imgBox_name {
  223. font-size: 60rpx;
  224. font-weight: 700;
  225. color: #fff;
  226. }
  227. .imgBox_ver {
  228. font-size: 44rpx;
  229. color: #fff;
  230. font-weight: 700;
  231. min-height: 58rpx;
  232. display: inline-block;
  233. }
  234. // image {
  235. // display: block;
  236. // width: 100rpx;
  237. // height: 100rpx;
  238. // margin: 10rpx auto;
  239. // }
  240. }
  241. .title {
  242. margin-bottom: 10rpx;
  243. margin: 180rpx 40rpx 10rpx;
  244. font-size: 36rpx;
  245. color: #333333;
  246. font-weight: 700;
  247. }
  248. .txt {
  249. color: #808080;
  250. font-size: 26rpx;
  251. // overflow: hidden;
  252. // text-overflow: ellipsis;
  253. // display: -webkit-box;
  254. // -webkit-line-clamp: 3;
  255. // -webkit-box-orient: vertical;
  256. max-height: 160rpx;
  257. overflow-y: auto;
  258. padding: 0 40rpx;
  259. }
  260. .btnBox {
  261. width: 100%;
  262. position: absolute;
  263. bottom: 70rpx;
  264. left: 0;
  265. .smallTitle {
  266. padding: 0 50rpx;
  267. text-align: center;
  268. }
  269. .btn {
  270. width: 428rpx;
  271. height: 80rpx;
  272. font-size: 30rpx;
  273. color: #FFFFFF;
  274. background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
  275. border-radius: 10rpx;
  276. text-align: center;
  277. line-height: 80rpx;
  278. font-weight: 700;
  279. margin: auto;
  280. }
  281. }
  282. }
  283. </style>