Skip to content

G
get-up-early
Commit 0e4d3a3f by baihong
Options

add:新增公共弹窗

parent 34d994b4
Showing with 121 additions and 59 deletions
components/success-popup.vue 0 → 100644
<template>
<view>
<u-popup :closeable='closeable' v-model="modalVisible" mode="center" width="673rpx" height="567rpx">
<view class="success-popup">
<image src="../static/imgs/ic_bay_01@2x.png" mode=""></image>
<p>上传成功</p>
<text>请在个人中心查看审核状态</text>
<view class="close" @click="close">知道了</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
},
closeable: {
type: Boolean,
default: false
},
},
watch: {
visible: {
handler: function(val) {
this.modalVisible = val;
},
immediate: true
}
},
data() {
return {
modalVisible: false
};
},
methods: {
close() {
this.$emit('update:visible', false);
},
}
}
</script>
<style lang="scss" scoped>
.success-popup {
display: flex;
flex-direction: column;
align-items: center;
image {
width: 108rpx;
height: 108rpx;
margin: 83rpx 0 48rpx 0;
}
p {
font-size: 36rpx;
font-family: OpenSans;
font-weight: 500;
color: #333333;
line-height: 50rpx;
}
text {
font-size: 26rpx;
font-family: OpenSans;
font-weight: 400;
color: #999999;
line-height: 37rpx;
margin: 16rpx 0 69rpx 0;
}
.close {
width: 440rpx;
height: 74rpx;
background: #FFC915;
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-family: OpenSans;
font-weight: 600;
color: #000000;
line-height: 40rpx;
}
}
</style>
pages/home/home.vue
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
</view> </view>
</view> </view>
</u-popup> </u-popup>
<u-popup v-model="showUpload" mode="bottom" border-radius="16" > <u-popup v-model="showUpload" mode="bottom" border-radius="16">
<view class="upload-popup"> <view class="upload-popup">
<view class="top">上传图片</view> <view class="top">上传图片</view>
<view class="upload-main"> <view class="upload-main">
...@@ -137,15 +137,8 @@ ...@@ -137,15 +137,8 @@
<view class="close" @click="showUpload=false">取消</view> <view class="close" @click="showUpload=false">取消</view>
</view> </view>
</u-popup> </u-popup>
<u-popup v-model="showSuccess" mode="center" width="673rpx" height="567rpx" > <success-popup :visible.sync="showSuccess" />
<view class="success-popup"> <lottery :show="showLottery" />
<image src="../../static/imgs/ic_bay_01@2x.png" mode=""></image>
<p>上传成功</p>
<text>请在个人中心查看审核状态</text>
<view class="close" @click="showSuccess=false">知道了</view>
</view>
</u-popup>
<lottery :show="showLottery"/>
<u-popup :closeable='true' v-model="showPay" mode="center" width="673rpx"> <u-popup :closeable='true' v-model="showPay" mode="center" width="673rpx">
<view class="popup"> <view class="popup">
<view class="title"> <view class="title">
...@@ -163,19 +156,21 @@ ...@@ -163,19 +156,21 @@
<script> <script>
import pageHeader from '@/components/page-header.vue'; import pageHeader from '@/components/page-header.vue';
import successPopup from '@/components/success-popup.vue';
import lottery from '@/components/lottery.vue'; import lottery from '@/components/lottery.vue';
export default { export default {
components: { components: {
pageHeader, pageHeader,
lottery lottery,
successPopup
}, },
data() { data() {
return { return {
showPay:true, showPay: false,
showLottery:false, showLottery: false,
show: false, show: false,
showUpload:false, showUpload: false,
showSuccess:false, showSuccess: true,
src: 'https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF', src: 'https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF',
number: 0, number: 0,
}; };
...@@ -219,7 +214,7 @@ ...@@ -219,7 +214,7 @@
}); });
} }
}); });
}, },
startMove() { startMove() {
// eslint-disable-next-line // eslint-disable-next-line
...@@ -240,47 +235,10 @@ ...@@ -240,47 +235,10 @@
.app { .app {
background: #f5f7f9; background: #f5f7f9;
height: 100vh; height: 100vh;
.success-popup {
display: flex; .upload-popup {
flex-direction: column;
align-items: center;
image{
width: 108rpx;
height: 108rpx;
margin: 83rpx 0 48rpx 0;
}
p {
font-size: 36rpx;
font-family: OpenSans;
font-weight: 500;
color: #333333;
line-height: 50rpx;
}
text{
font-size: 26rpx;
font-family: OpenSans;
font-weight: 400;
color: #999999;
line-height: 37rpx;
margin: 16rpx 0 69rpx 0;
}
.close {
width: 440rpx;
height: 74rpx;
background: #FFC915;
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-family: OpenSans;
font-weight: 600;
color: #000000;
line-height: 40rpx;
}
}
.upload-popup {
background-color: #F5F5F5; background-color: #F5F5F5;
.close { .close {
height: 114rpx; height: 114rpx;
background: #FFFFFF; background: #FFFFFF;
...@@ -293,6 +251,7 @@ ...@@ -293,6 +251,7 @@
line-height: 49rpx; line-height: 49rpx;
margin-top: 10rpx; margin-top: 10rpx;
} }
.top { .top {
padding: 32rpx 0 37rpx 0; padding: 32rpx 0 37rpx 0;
text-align: center; text-align: center;
...@@ -304,20 +263,23 @@ ...@@ -304,20 +263,23 @@
border-bottom: 1rpx solid #DCDCDC; border-bottom: 1rpx solid #DCDCDC;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.upload-main { .upload-main {
padding: 53rpx 181rpx 58rpx 174rpx; padding: 53rpx 181rpx 58rpx 174rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: #FFFFFF; background-color: #FFFFFF;
.item { .item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 28rpx; font-size: 28rpx;
font-family: OpenSans; font-family: OpenSans;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
image { image {
width: 54rpx; width: 54rpx;
height: 48rpx; height: 48rpx;
...@@ -326,8 +288,10 @@ ...@@ -326,8 +288,10 @@
} }
} }
} }
.popup { .popup {
padding-bottom: 80rpx; padding-bottom: 80rpx;
.pay-btn { .pay-btn {
width: 590rpx; width: 590rpx;
height: 74rpx; height: 74rpx;
...@@ -343,22 +307,26 @@ ...@@ -343,22 +307,26 @@
justify-content: center; justify-content: center;
margin: 0 auto; margin: 0 auto;
} }
.pay { .pay {
margin-top: 54rpx; margin-top: 54rpx;
margin-bottom: 65rpx; margin-bottom: 65rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
p{
p {
font-size: 70rpx; font-size: 70rpx;
font-family: OpenSans; font-family: OpenSans;
color: #333333; color: #333333;
line-height: 96rpx; line-height: 96rpx;
} }
text { text {
font-size: 26rpx; font-size: 26rpx;
} }
} }
.title { .title {
padding: 30rpx 35rpx; padding: 30rpx 35rpx;
border-bottom: 1rpx solid #DCDCDC; border-bottom: 1rpx solid #DCDCDC;
......
pages/upload/upload.vue
...@@ -101,6 +101,9 @@ ...@@ -101,6 +101,9 @@
.app { .app {
background-color: #FFFFFF; background-color: #FFFFFF;
.wrap {
padding: 40rpx;
}
.upload-popup { .upload-popup {
background-color: #F5F5F5; background-color: #F5F5F5;
......
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