Skip to content

肖康 / H5_2.0

Go to a project
Commit 33e596ec by 肖康
Options

下单页面弹窗

parent 7936e972
Inline Side-by-side
Showing with 335 additions and 3 deletions
assets/css/confirm/confirm.scss
......@@ -378,6 +378,180 @@
}
/**优惠券弹窗**/
.yhqpop{
background: #f5f5f5;
.title{
width: 100%;
height: 88rpx;
background: linear-gradient(180deg, #F0F6FF 0%, #FFFFFF 100%);
border-radius: 10rpx 10rpx 0rpx 0rpx;
view{width:710rpx;color:$uni-color333;font-size: 24rpx;font-weight: 600;text-align: center;padding-left: 24rpx;box-sizing: border-box;}
text{font-size: 40rpx;color:#c2c4cc;margin-right: 24rpx;}
}
.nav{
background: #fff;
height:60rpx;
.navitem{
width:50%;
text-align: center;
height:60rpx;
line-height: 60rpx;
color:$uni-color666;font-size: 28rpx;
text{color:$uni-color999;font-size: 24rpx;font-weight: normal;margin-left: 8rpx;}
position: relative;
&.act{
font-weight: 600;
color:$uni-color333;
text{color:$uni-color999;font-size: 24rpx;font-weight: normal;}
&::after{
content:"";
width: 53rpx;
height: 7rpx;
background: $uni-coloract;
border-radius: 4rpx;
position: absolute;
bottom:0rpx;
left:50%;
margin-left: -36rpx;
}
}
}
}
.yhcons{
padding:20rpx 24rpx;
max-height: 800rpx;
overflow-y: auto;
.item{
margin-bottom: 16rpx;
background: #fff;
padding-right:24rpx;
.left{
.bsri{
width: 230rpx;
height: 176rpx;
background: url('https://img.ichunt.com/images/ichunt/202305/19/e8f03900544551d09436a542ee7d0ea0.png') no-repeat center;
background-size: cover;
margin-right: 24rpx;
.p1 {
margin-bottom: 8rpx;
.t1 {
font-size: 22rpx;
color: #ffffff;
}
.t2 {
margin-left: 10rpx;
font-size: 60rpx;
color: #ffffff;
}
}
.p2 {
font-size: 20rpx;
color: #ffffff;
}
}
.textbox{
padding-top: 28rpx;
view{
width:374rpx;
height: 30rpx;
font-size: 22rpx;
font-weight: 400;
color:$uni-color666;
line-height: 30rpx;
margin-bottom: 20rpx;
}
text{
height: 30rpx;
font-size: 22rpx;
font-weight: 400;
color:$uni-color999;
line-height: 30rpx;
}
}
}
.icon-xzs{
color:$uni-color999;
}
.noxz{
width:32rpx;
height:32rpx;
box-sizing: border-box;
border-radius: 32rpx;
border:1rpx solid #c2c4cc;
}
.icon-xzs{
color:$uni-coloract;
display: none;
}
&.act{
.icon-xzs{
display: flex;
}
.noxz{
display: none;
}
}
}
.notitem{
height:88rpx;
padding:0 24rpx;
.nqsj{
font-size: 26rpx;
font-weight: 600;
color:$uni-color666;
}
}
}
.subyhq{
height: 88rpx;
background: #FFFFFF;
text{
width: 702rpx;
height: 68rpx;
background: $uni-coloract;
border-radius: 10rpx;
color:#fff;
font-size: 28rpx;
}
}
.nouse{
.yhcons{
.item{
.left{
.bsri{
background: url("https://img.ichunt.com/images/ichunt/202305/19/ebf691eb49a2a3dffe612baea352a7b6.png") no-repeat;
width: 230rpx;
height: 176rpx;
background-size: cover;
}
}
.noxz{
display: flex!important;
background: #f5f5f7;
border:1rpx solid #f5f5f7;
}
}
}
}
.noyhq{
padding-top: 100rpx;
image{display: block;margin:0 auto;width:356rpx;height:356rpx;}
view{font-size: 28rpx; color:$uni-color333;margin-top: 32rpx;}
padding-bottom: 300rpx;
}
}
/**自提信息弹窗**/
.layer-box8{
background: #fff;
padding-bottom: 24rpx;
......@@ -431,7 +605,7 @@
}
/**运费弹窗**/
.poppbox{
.cons{
width:100%;
......
assets/css/confirm/confirmSuccess.scss 0 → 100644
.confirmsuccesspage{
}
\ No newline at end of file
pages.json
......@@ -53,6 +53,12 @@
"navigationBarTitleText": "提交订单"
}
},
{
"path": "pages/confirm/confirmSuccess",
"style": {
"navigationBarTitleText": "提交订单成功"
}
},
{
"path": "pages/mine/login",
"style": {
......
pages/confirm/confirm.vue
......@@ -137,7 +137,7 @@
</view>
<view class="priceinfo">
<view class="row rowitem bothSide verCenter fisbox">
<view class="row rowitem bothSide verCenter fisbox" @click="openyyq()">
<text>优惠券</text>
<text class="pris">￥0.00<text class="icon iconfont icon-jt"></text></text>
</view>
......@@ -161,6 +161,113 @@
<view class="btnh">提交订单</view>
</view>
<!--优惠券信息弹窗-->
<uni-popup ref="popupyyq" type="bottom">
<view class="yhqpop">
<view class="title row bothSide verCenter">
<view>优惠券</view>
<text class="icon iconfont icon-xxx" @click="closeyyq()"></text>
</view>
<view class="nav row">
<view class="navitem act">可用优惠券<text>(4)</text></view>
<view class="navitem">不可用优惠券<text>(4)</text></view>
</view>
<view class="contenty " >
<view class="useyhqdata">
<view class="yhcons">
<view class="row item bothSide verCenter act">
<view class="left row ">
<view class="bsri column rowCenter verCenter">
<view class="p1">
<text class="t1">￥</text>
<text class="t2">10</text>
</view>
<view class="p2">满￥200可用</view>
</view>
<view class="textbox">
<view class="elep">新人528元优惠券</view>
<text>2023.02.27-2023.04.0</text>
</view>
</view>
<text class="noxz"></text>
<text class="icon iconfont icon-xzs"></text>
</view>
<view class="row item bothSide verCenter ">
<view class="left row ">
<view class="bsri column rowCenter verCenter">
<view class="p1">
<text class="t1">￥</text>
<text class="t2">10</text>
</view>
<view class="p2">满￥200可用</view>
</view>
<view class="textbox">
<view class="elep">新人528元优惠券</view>
<text>2023.02.27-2023.04.0</text>
</view>
</view>
<text class="noxz"></text>
<text class="icon iconfont icon-xzs"></text>
</view>
<view class="row item bothSide verCenter ">
<view class="left row ">
<view class="bsri column rowCenter verCenter">
<view class="p1">
<text class="t1">￥</text>
<text class="t2">10</text>
</view>
<view class="p2">满￥200可用</view>
</view>
<view class="textbox">
<view class="elep">新人528元优惠券</view>
<text>2023.02.27-2023.04.0</text>
</view>
</view>
<text class="noxz"></text>
<text class="icon iconfont icon-xzs"></text>
</view>
<view class="row item verCenter bothSide notitem">
<view class="nqsj">不使用优惠券</view>
<text class="noxz"></text>
<text class="icon iconfont icon-xzs"></text>
</view>
</view>
<view class="subyhq row verCenter rowCenter"><text class="row rowCenter verCenter">确定</text></view>
</view>
<view class="noyhq" style="display:none;">
<image src="../../static/nodate.png"></image>
<view class="row rowCenter">暂时优惠券数据</view>
</view>
</view>
<view class="contenty nouse" style="display:none">
<view class="yhcons">
<view class="row item bothSide verCenter act">
<view class="left row ">
<view class="bsri column rowCenter verCenter">
<view class="p1">
<text class="t1">￥</text>
<text class="t2">10</text>
</view>
<view class="p2">满￥200可用</view>
</view>
<view class="textbox">
<view class="elep">新人528元优惠券</view>
<text>2023.02.27-2023.04.0</text>
</view>
</view>
<text class="noxz"></text>
</view>
</view>
<view class="noyhq" style="display:none;">
<image src="../../static/nodate.png"></image>
<view class="row rowCenter">暂时优惠券数据</view>
</view>
</view>
</view>
</uni-popup>
<!--自提人信息弹窗-->
<uni-popup ref="popupztinfo" type="bottom">
<view class="layer-box8">
......@@ -226,7 +333,13 @@
},
closeyf() {
this.$refs.yfpopup.close();
}
},
openyyq() {
this.$refs.popupyyq.open('bottom');
},
closeyyq() {
this.$refs.popupyyq.close();
},
}
}
</script>
......
pages/confirm/confirmSuccess.vue 0 → 100644
<template>
<view class="confirmsuccesspage">
<view class="chead row verCenter">
<text v-back class="icon iconfont icon-arrleft"></text>
<view class="titlesi">订单确认</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
@import '../../assets/css/confirm/confirmSuccess.scss';
</style>
router/index.js
......@@ -79,6 +79,13 @@ const router = new Router({
title: '确认订单'
}
},
{
path: '/pages/confirm/confirmSuccess',
aliasPath: '/order/success',
meta: {
title: '提交订单成功'
}
},
{
path: '/pages/mine/login',
aliasPath: '/login',
......
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 sign in to comment