Skip to content

U
uni-app-ddh-shop
Commit 5562a4e9 authored by caimeng's avatar caimeng
Browse files
Options

1.0.8 更新弹框因为编译工具升级的问题；导致老版本的/deep/不能用

parent 7afd638c
Hide whitespace changes
Inline Side-by-side
Showing with 314 additions and 285 deletions
components/showModal/upgradePopup.vue
View file @ 5562a4e9
<template> <template>
<view> <view>
<!-- 遮罩滚动锁定组件 --> <!-- 遮罩滚动锁定组件 -->
<page-meta :page-style="'overflow:' + (popupShow ? 'hidden' : 'visible')"></page-meta> <page-meta
<uni-popup ref="upgradePopup" background-color="#fff" class="upgradePopup" @change="upgradePopupChange" :page-style="'overflow:' + (popupShow ? 'hidden' : 'visible')"
:mask-click="false"> ></page-meta>
<uni-popup
<view class="rocket-content"> ref="upgradePopup"
<view class="rocket-img"></view> borderRadius="10px"
@change="upgradePopupChange"
:mask-click="false"
>
<view class="upgradePopup">
<view class="rocket-content">
<view class="rocket-img"></view>
</view>
<view class="content-v-des">
<view class="content-v">V{{ appUpgeadeObj.versionName }}</view>
<view class="content-text">发现新版本</view>
<view class="title">
<!-- 更新内容 -->
<scroll-view class="info_desc_scroll" scroll-y="true">
<rich-text
v-if="appUpgeadeObj.content"
class="scroll-text"
:nodes="appUpgeadeObj.content"
></rich-text>
</scroll-view>
</view> </view>
</view>
<view class="content-v-des">
<view class="content-v">V{{ appUpgeadeObj.versionName }}</view> <view class="update-content">
<view class='content-text'>发现新版本</view> <text space="nbsp">{{ appUpgeadeObj.updateContent }}</text>
<view class="title"> </view>
<!-- 更新内容 --> <view v-if="updateButtonBoolean" class="update-button">
<scroll-view class="info_desc_scroll" scroll-y="true"> <button
<rich-text v-if="appUpgeadeObj.content" class='scroll-text' class="not-updated-button"
:nodes="appUpgeadeObj.content"></rich-text> :disabled="noUpdatedDisabled"
</scroll-view> v-show="appUpgeadeObj.forceUpdate == false"
</view> type="warn"
</view> @tap.stop="noUpdate"
>
暂不更新
<view class="update-content"> </button>
<text space="nbsp">{{ appUpgeadeObj.updateContent }}</text> <button
</view> v-show="appUpgeadeObj.type == 'ANDROID'"
<view v-if="updateButtonBoolean" class="update-button"> class="updated-button"
<button class="not-updated-button" :disabled="noUpdatedDisabled" type="warn"
v-show="appUpgeadeObj.forceUpdate == false" type="warn" @tap.stop="noUpdate">暂不更新</button> @tap.stop="upgradeNowAndroid"
<button v-show='appUpgeadeObj.type == "ANDROID"' class="updated-button" type="warn" >
@tap.stop="upgradeNowAndroid">立即升级</button> 立即升级
<button v-show='appUpgeadeObj.type == "IOS"' class="updated-button" type="warn" </button>
@tap.stop="upgradeNow">立即升级</button> <button
</view> v-show="appUpgeadeObj.type == 'IOS'"
class="updated-button"
<view v-if="progressBolean" class="progress-bar"> type="warn"
<progress border-radius="90" font-size="24" activeColor="#DB4032" backgroundColor="#f0f0f0" show-info @tap.stop="upgradeNow"
:percent="progressData.percent" stroke-width="15" /> >
</view> 立即升级
</button>
</uni-popup> </view>
<view v-if="progressBolean" class="progress-bar">
<progress
border-radius="90"
font-size="24"
activeColor="#DB4032"
backgroundColor="#f0f0f0"
show-info
:percent="progressData.percent"
stroke-width="15"
/>
</view>
</view>
</uni-popup>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
appUpgeadeObj: { appUpgeadeObj: {
type: Object, type: Object,
default: () => { default: () => {
return {} return {};
} },
} },
},
components: {
}, },
components: {},
data() { data() {
return { return {
popupShow: false, popupShow: false,
updateButtonBoolean: true, // 按钮的显示和隐藏 updateButtonBoolean: true, // 按钮的显示和隐藏
// 进度条数据 // 进度条数据
progressData: { progressData: {
percent: 0, //百分比 percent: 0, //百分比
},
}, progressBolean: false, // 进度条的显示和隐藏
progressBolean: false, // 进度条的显示和隐藏 noUpdatedDisabled: false,
noUpdatedDisabled: false, isWGT: false, // 是否wgt资源包
isWGT: false,// 是否wgt资源包 };
};
}, },
watch: { watch: {
'progressData.percent': { "progressData.percent": {
handler(newdata) { handler(newdata) {
if (newdata) { if (newdata) {
this.progressBolean = true this.progressBolean = true;
this.updateButtonBoolean = false this.updateButtonBoolean = false;
} }
if (newdata == 100) { if (newdata == 100) {
this.noUpdatedDisabled = false this.noUpdatedDisabled = false;
} }
},
immediate: true,
}, },
immediate: true,
},
}, },
beforeMount() { beforeMount() {
uni.hideTabBar() uni.hideTabBar();
}, },
mounted() { mounted() {
this.$refs.upgradePopup.open('center') this.$refs.upgradePopup.open("center");
}, },
methods: { methods: {
// 升级弹窗的change事件 // 升级弹窗的change事件
upgradePopupChange(e) { upgradePopupChange(e) {
this.popupShow = e.show this.popupShow = e.show;
}, },
// 暂不更新按钮事件 // 暂不更新按钮事件
noUpdate() { noUpdate() {
this.popupShow = false this.popupShow = false;
uni.showTabBar() uni.showTabBar();
setTimeout(() => { setTimeout(() => {
this.$emit('pause') this.$emit("pause");
}, 10) }, 10);
}, },
// 清空一些数据
delStorageSync() {
// 清空一些数据 // 清空一些数据
delStorageSync() { uni.removeStorageSync("m-header-version");
// 清空一些数据 uni.removeStorageSync("m-header-device");
uni.removeStorageSync('m-header-version') uni.removeStorageSync("m-location-info");
uni.removeStorageSync('m-header-device') uni.removeStorageSync("m-network-info");
uni.removeStorageSync('m-location-info')
uni.removeStorageSync('m-network-info') uni.removeStorageSync("m-device-info");
},
uni.removeStorageSync('m-device-info')
}, // 立即升级事件
upgradeNow() {
// 立即升级事件 this.delStorageSync();
upgradeNow() { const downloadUrl = this.appUpgeadeObj.downloadUrl;
this.delStorageSync(); plus.runtime.launchApplication(
const downloadUrl = this.appUpgeadeObj.downloadUrl {
plus.runtime.launchApplication({ action: `itms-apps://itunes.apple.com/cn/app/id6642694240`,
action: `itms-apps://itunes.apple.com/cn/app/id6642694240`, },
}, function (e) { function (e) {
console.log('Open system default browser failed: ' + e.message); console.log("Open system default browser failed: " + e.message);
return plus.runtime.openURL(downloadUrl) return plus.runtime.openURL(downloadUrl);
}) }
}, );
upgradeNowAndroid() { },
this.delStorageSync(); upgradeNowAndroid() {
let that = this this.delStorageSync();
that.noUpdatedDisabled = true let that = this;
const isAPK = that.containsApkExtension(that.appUpgeadeObj.downloadUrl) that.noUpdatedDisabled = true;
if (isAPK) { const isAPK = that.containsApkExtension(that.appUpgeadeObj.downloadUrl);
plus.runtime.getProperty(plus.runtime.appid, () => { if (isAPK) {
var downloadTask = uni.downloadFile({ plus.runtime.getProperty(plus.runtime.appid, () => {
url: that.appUpgeadeObj.downloadUrl, var downloadTask = uni.downloadFile({
success: (downloadResult) => { url: that.appUpgeadeObj.downloadUrl,
if (downloadResult.statusCode === 200) { success: (downloadResult) => {
plus.runtime.install(downloadResult.tempFilePath, { force: false }, if (downloadResult.statusCode === 200) {
function () { plus.runtime.install(
console.log('下载APK成功，还是安装成功呢') downloadResult.tempFilePath,
plus.cache.clear(); { force: false },
plus.runtime.restart(); function () {
}, console.log("下载APK成功，还是安装成功呢");
function (err) { plus.cache.clear();
console.log('err--------安装升级包失败', err) plus.runtime.restart();
uni.showToast({ },
title: '安装升级包失败', function (err) {
icon: 'none' console.log("err--------安装升级包失败", err);
}); uni.showToast({
}); title: "安装升级包失败",
} icon: "none",
}, });
}); }
downloadTask.onProgressUpdate((res) => { );
this.progressData.percent = res.progress }
}); },
}) });
} else { downloadTask.onProgressUpdate((res) => {
// 这里需要根据不同的应用市场，跳转到指定的地方 this.progressData.percent = res.progress;
let appurl = "market://details?id=io.dcloud.ddh" });
plus.runtime.openURL(appurl) });
} } else {
}, // 这里需要根据不同的应用市场，跳转到指定的地方
containsApkExtension(url) { let appurl = "market://details?id=io.dcloud.ddh";
return /\.apk$/i.test(url); plus.runtime.openURL(appurl);
} }
} },
}; containsApkExtension(url) {
</script> return /\.apk$/i.test(url);
},
<style scoped lang="scss"> },
.upgradePopup { };
z-index: 999; </script>
/deep/.uni-popup__wrapper { <style scoped lang="scss">
width: 602rpx; .upgradePopup {
background-image: url('./imgs/upgradeBackground.png'); width: 602rpx;
background-image: url("./imgs/upgradeBackground.png");
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 15rpx;
position: relative;
display: flex;
flex-direction: column;
.rocket-content {
height: 368rpx;
.rocket-img {
background-image: url("./imgs/rocket.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
border-radius: 15rpx; width: 152rpx;
// border: solid 1px red; height: 212rpx;
position: relative; position: absolute;
top: -105rpx;
left: 225rpx;
}
}
.content-v-des {
position: absolute;
left: 40rpx;
top: 30rpx;
z-index: 3;
.content-v {
font-size: 75rpx;
color: #ffffff;
}
.content-text {
padding-top: 20rpx;
font-family: PingFangSC, PingFang SC;
font-size: 42rpx;
color: #333333;
}
.title {
margin-top: 20rpx;
display: flex; display: flex;
flex-direction: column; font-family: PingFangSC, PingFang SC;
font-weight: 400;
.rocket-content { font-size: 16px;
height: 368rpx; color: #999999;
line-height: 28px;
.rocket-img { text-align: left;
background-image: url('./imgs/rocket.png'); font-style: normal;
background-repeat: no-repeat;
background-size: 100% 100%; .info_desc_scroll {
width: 152rpx; width: 450rpx;
height: 212rpx; height: 200rpx;
position: absolute; box-sizing: border-box;
top: -105rpx; line-height: 1.3;
left: 225rpx;
} .scroll-text {
} padding-bottom: 6rpx;
}
.content-v-des {
position: absolute;
left: 40rpx;
top: 30rpx;
z-index: 3;
.content-v {
font-size: 75rpx;
color: #FFFFFF;
}
.content-text {
padding-top: 20rpx;
font-family: PingFangSC, PingFang SC;
font-size: 42rpx;
color: #333333;
}
.title {
margin-top: 20rpx;
display: flex;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #999999;
line-height: 28px;
text-align: left;
font-style: normal;
.info_desc_scroll {
width: 450rpx;
height: 200rpx;
box-sizing: border-box;
line-height: 1.3;
.scroll-text {
padding-bottom: 6rpx;
}
}
}
}
.update-content {
margin-top: 44rpx;
// border: solid 1rpx red;
padding-left: 100rpx;
display: flex;
flex-direction: column;
uni-text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #989899;
margin-bottom: 8rpx;
}
} }
}
.update-button { }
// border: solid 1rpx yellow;
display: flex; .update-content {
width: 482rpx; margin-top: 44rpx;
margin: 0 auto; // border: solid 1rpx red;
margin-top: 48rpx; padding-left: 100rpx;
display: flex;
uni-button { flex-direction: column;
display: flex;
justify-content: center; uni-text {
align-items: center; font-size: 28rpx;
font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Medium, PingFang SC; font-weight: 400;
font-weight: 500; color: #989899;
color: #FFFFFF; margin-bottom: 8rpx;
margin: 0rpx; }
flex: 1; }
height: 80rpx;
margin-bottom: 80rpx; .update-button {
} // border: solid 1rpx yellow;
display: flex;
.not-updated-button { width: 482rpx;
margin-right: 40rpx; margin: 0 auto;
} margin-top: 48rpx;
}
uni-button {
.progress-bar { display: flex;
width: 538rpx; justify-content: center;
// border: solid 1px red; align-items: center;
margin: 0 auto; font-size: 28rpx;
margin-top: 96rpx; font-family: PingFangSC-Medium, PingFang SC;
margin-bottom: 102rpx; font-weight: 500;
color: #ffffff;
uni-progress { margin: 0rpx;
.uni-progress-bar { flex: 1;
border-radius: 50rpx; height: 80rpx;
margin-bottom: 80rpx;
.uni-progress-inner-bar { }
border-radius: 50rpx;
} .not-updated-button {
} margin-right: 40rpx;
} }
}
.progress-bar {
width: 538rpx;
// border: solid 1px red;
margin: 0 auto;
margin-top: 96rpx;
margin-bottom: 102rpx;
uni-progress {
.uni-progress-bar {
border-radius: 50rpx;
.uni-progress-inner-bar {
border-radius: 50rpx;
}
} }
}
} }
} }
</style> </style>
\ No newline at end of file
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment