杨世雄 / chemai2 · 提交

转到一个项目

作者 李芳银
提交 04eba2e6962497b0cb0f3d0fab407ade55314112 1 个父辈 1175586a

新增弹窗

内嵌 并排对比
正在显示 6 个修改的文件 包含 466 行增加 和 314 行删除
... ... @@ -19,6 +19,10 @@ Page({
fen_di: '',
itemid: '',
wait: 0,
showModalStatus: false,
jump_img: '',
jump_url: '',
},
onLoad: function (options) {
let that = this
... ... @@ -31,14 +35,7 @@ Page({
onReady: function () {
},
onShow: function () {
wx.showToast({
title: '加载中',
icon: "loading",
duration: 1500,
mask: false
})
},
onShow: function () {},
toggleDialog() {
},
... ... @@ -58,7 +55,10 @@ Page({
that.setData({
detaillist: data,
shi: data.active.price,
itemid: data.id
itemid: data.id,
jump_img: data.active.jump_img2,
jump_url: data.active.jump_url,
})
console.log(data);
} catch (err) {
... ... @@ -180,36 +180,50 @@ Page({
that.setData({
wait: 1
})
wx.redirectTo({
url: '/pages/binding4S/binding4S',
})
console.log(that.data.jump_img);
if (that.data.jump_img != '') {
that.showModal()
} else {
wx.redirectTo({
url: '/pages/binding4S/binding4S',
})
}
},
fail(res) {
console.log(res)
}
})
} else if (data.data.type == 1) {
that.setData({
msg: data.msg,
wait: 1
})
that.popSuccessTest()
setTimeout(() => {
wx.redirectTo({
url: '/pages/binding4S/binding4S',
console.log(that.data.jump_img);
if (that.data.jump_img != '') {
that.showModal()
} else {
that.setData({
wait: 1
})
}, 1500);
a.popSuccessTest(data.msg)
setTimeout(() => {
wx.redirectTo({
url: '/pages/binding4S/binding4S',
})
}, 1500);
}
} else {
that.setData({
msg: data.msg,
wait: 1
})
that.popSuccessTest()
setTimeout(() => {
wx.redirectTo({
url: '/pages/binding4S/binding4S',
console.log(that.data.jump_img);
if (that.data.jump_img != '') {
that.showModal()
} else {
that.setData({
wait: 1
})
}, 1500);
a.popSuccessTest(data.msg)
setTimeout(() => {
wx.redirectTo({
url: '/pages/binding4S/binding4S',
})
}, 1500);
}
}
} else {
that.setData({
... ... @@ -218,10 +232,6 @@ Page({
that.popMaskTest()
}
}
} catch (err) {
console.log(err);
that.setData({
... ... @@ -230,6 +240,17 @@ Page({
that.popMaskTest()
}
},
jumpImgUrl() {
let that = this
wx.navigateTo({
url: '/pages/webview/webview?url=' + that.data.jump_url
})
that.hideModal()
},
offclose() {
this.hideModal()
},
popMaskTest() {
wx.showToast({
title: this.data.msg,
... ... @@ -246,6 +267,44 @@ Page({
duration: 2000, //停留时间
})
},
showModal() { //显示对话框
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 100)
},
hideModal() { //隐藏对话框
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this), 100)
},
})
\ No newline at end of file
... ...
page {
background-color: #f9f9f9;
}
.container {
width: 100%;
padding: 32rpx 32rpx;
box-sizing: border-box;
.contet {
width: 100%;
display: flex;
align-items: center;
background-color: #fff;
border-radius: 6rpx;
.img {
width: 270rpx;
height: 240rpx;
image {
width: 100%;
border-radius: 8rpx;
}
}
.rig {
flex: 1;
height: 240rpx;
padding: 10rpx 0 10rpx 15rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
.textws {
font-size: 28rpx;
color: #3D444C;
box-sizing: border-box;
}
.names {
margin: 10rpx 0;
width: 100%;
display: flex;
align-items: center;
.names__box {
font-size: 30rpx;
color: #3D444C;
}
.pt {
display: flex;
align-items: baseline;
.icons {
font-size: 20rpx;
color: #ff0000;
}
.icons_price {
font-size: 30rpx;
color: #ff0000;
}
}
}
}
}
.pop_box {
width: 100%;
box-sizing: border-box;
margin: 20rpx 0;
background-color: #fff;
border-radius: 6rpx;
.pub {
width: 100%;
height: 80rpx;
display: flex;
border-bottom: 1rpx solid #f5f5f5;
.labels {
width: 180rpx;
height: 80rpx;
line-height: 80rpx;
padding-left: 32rpx;
box-sizing: border-box;
font-size: 28rpx;
color: #3D444C;
}
.publics {
flex: 1;
height: 78rpx;
background-color: #fff;
text-align: left;
box-sizing: border-box;
padding-left: 20rpx;
}
.input_placeholder {
font-size: 28rpx;
color: #BDC4CE;
font-family: PingFangSC-Regular;
text-align: left;
}
}
.phones {
border-bottom: 1rpx solid #fff;
}
}
.public {
width: 100%;
padding: 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
.public_1 {
font-size: 28rpx;
line-height: 48rpx;
color: #3D444C;
}
.public_2 {
display: flex;
align-items: baseline;
.money_icon {
font-size: 20rpx;
color: #E8370F;
}
.price {
font-size: 28rpx;
color: #E8370F;
}
}
.integrate {
color: #06121E;
}
}
.total {
.integrate_money {
color: #E8370F;
}
}
.total1 {
margin-top: 20rpx;
}
.btnbuy {
width: 100%;
position: fixed;
bottom: 0;
right: 0;
padding: 20rpx 0;
box-sizing: border-box;
background-color: #fff;
z-index: 5;
.btnbuy__ {
height: 88rpx;
width: 90%;
color: #fff;
line-height: 88rpx;
padding: 0;
box-sizing: border-box;
font-weight: 400;
background-color: #E8370F;
border-radius: 8rpx;
font-size: 28rpx;
}
}
.integratea {
width: 100%;
border-radius: 6rpx;
.integrate {
margin-top: 20rpx;
width: 100%;
padding: 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
border-bottom: 1rpx solid #f5f5f5;
.integrate_che {
font-size: 28rpx;
line-height: 48rpx;
color: #3D444C;
}
.integrate_right {
font-size: 28rpx;
line-height: 48rpx;
color: #8C9198;
}
.red_imgs {
display: flex;
align-items: center;
.public_2 {
font-size: 28rpx;
line-height: 48rpx;
color: #8C9198;
}
.radios_fff {
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
.radios_red {
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
}
}
.explain {
width: 100%;
padding: 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
.explain_ {
font-size: 24rpx;
line-height: 48rpx;
color: #8C9198;
}
.r_explain {
.explain__right {
font-size: 24rpx;
line-height: 48rpx;
}
.explain__red {
font-size: 24rpx;
line-height: 48rpx;
color: #E8370F;
margin: 0 5rpx;
}
}
}
}
page {
background-color: #f9f9f9;
}
.container {
width: 100%;
padding: 32rpx 32rpx;
box-sizing: border-box;
.contet {
width: 100%;
display: flex;
align-items: center;
background-color: #fff;
border-radius: 6rpx;
.img {
width: 270rpx;
height: 240rpx;
image {
width: 100%;
border-radius: 8rpx;
}
}
.rig {
flex: 1;
height: 240rpx;
padding: 10rpx 0 10rpx 15rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
.textws {
font-size: 28rpx;
color: #3D444C;
box-sizing: border-box;
}
.names {
margin: 10rpx 0;
width: 100%;
display: flex;
align-items: center;
.names__box {
font-size: 30rpx;
color: #3D444C;
}
.pt {
display: flex;
align-items: baseline;
.icons {
font-size: 20rpx;
color: #ff0000;
}
.icons_price {
font-size: 30rpx;
color: #ff0000;
}
}
}
}
}
.pop_box {
width: 100%;
box-sizing: border-box;
margin: 20rpx 0;
background-color: #fff;
border-radius: 6rpx;
.pub {
width: 100%;
height: 80rpx;
display: flex;
border-bottom: 1rpx solid #f5f5f5;
.labels {
width: 180rpx;
height: 80rpx;
line-height: 80rpx;
padding-left: 32rpx;
box-sizing: border-box;
font-size: 28rpx;
color: #3D444C;
}
.publics {
flex: 1;
height: 78rpx;
background-color: #fff;
text-align: left;
box-sizing: border-box;
padding-left: 20rpx;
}
.input_placeholder {
font-size: 28rpx;
color: #BDC4CE;
font-family: PingFangSC-Regular;
text-align: left;
}
}
.phones {
border-bottom: 1rpx solid #fff;
}
}
.public {
width: 100%;
padding: 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
.public_1 {
font-size: 28rpx;
line-height: 48rpx;
color: #3D444C;
}
.public_2 {
display: flex;
align-items: baseline;
.money_icon {
font-size: 20rpx;
color: #E8370F;
}
.price {
font-size: 28rpx;
color: #E8370F;
}
}
.integrate {
color: #06121E;
}
}
.total {
.integrate_money {
color: #E8370F;
}
}
.total1 {
margin-top: 20rpx;
}
.btnbuy {
width: 100%;
position: fixed;
bottom: 0;
right: 0;
padding: 20rpx 0;
box-sizing: border-box;
background-color: #fff;
z-index: 5;
.btnbuy__ {
height: 88rpx;
width: 90%;
color: #fff;
line-height: 88rpx;
padding: 0;
box-sizing: border-box;
font-weight: 400;
background-color: #E8370F;
border-radius: 8rpx;
font-size: 28rpx;
}
}
.integratea {
width: 100%;
border-radius: 6rpx;
.integrate {
margin-top: 20rpx;
width: 100%;
padding: 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
border-bottom: 1rpx solid #f5f5f5;
.integrate_che {
font-size: 28rpx;
line-height: 48rpx;
color: #3D444C;
}
.integrate_right {
font-size: 28rpx;
line-height: 48rpx;
color: #8C9198;
}
.red_imgs {
display: flex;
align-items: center;
.public_2 {
font-size: 28rpx;
line-height: 48rpx;
color: #8C9198;
}
.radios_fff {
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
.radios_red {
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
}
}
.explain {
width: 100%;
padding: 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
.explain_ {
font-size: 24rpx;
line-height: 48rpx;
color: #8C9198;
}
.r_explain {
.explain__right {
font-size: 24rpx;
line-height: 48rpx;
}
.explain__red {
font-size: 24rpx;
line-height: 48rpx;
color: #E8370F;
margin: 0 5rpx;
}
}
}
}
.login {
// 弹窗
/*使屏幕变暗 */
.commodity_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 10;
}
/*对话框 */
.center__nox {
height: 40%;
width: 80%;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
background: #fff;
padding: 20rpx;
box-sizing: border-box;
border-radius: 24rpx;
// position: relative;
.jump_img {
width: 100%;
}
.jump_close {
width: 32rpx;
height: 32rpx;
position: absolute;
top: -50rpx;
right: 8rpx;
z-index: 10;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -63,4 +63,11 @@
<button class="btnbuy__" formType="submit">{{wait == 1 ? '已预约': '预约'}}</button>
</view>
</form>
<view class="login" wx:if="{{showModalStatus}}">
<view class="commodity_screen"></view>
<view class="center__nox">
<image src="{{jump_img}}" class="jump_img" mode="widthFix" catchtap="jumpImgUrl" />
<image src="../../static/img/close.png" class="jump_close" catchtap="offclose" />
</view>
</view>
</view>
\ No newline at end of file
... ...
... ... @@ -219,3 +219,42 @@ page {
color: #E8370F;
margin: 0 5rpx;
}
.container .login {
/*使屏幕变暗 */
/*对话框 */
}
.container .login .commodity_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 10;
}
.container .login .center__nox {
height: 40%;
width: 80%;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
background: #fff;
padding: 20rpx;
box-sizing: border-box;
border-radius: 24rpx;
}
.container .login .center__nox .jump_img {
width: 100%;
}
.container .login .center__nox .jump_close {
width: 32rpx;
height: 32rpx;
position: absolute;
top: -50rpx;
right: 8rpx;
z-index: 10;
}
... ...
... ... @@ -21,8 +21,9 @@
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"useMultiFrameRuntime": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
... ...