Skip to content

C
CFFP-HB
Commit 0e7872c2 by kyle
Options

订单确认页面

parent 8306be9e
Showing with 240 additions and 8 deletions
App.vue
......@@ -50,4 +50,8 @@
.richTextContent img{
width: 100% !important;
}
.popupContainer .uni-popup .uni-popup__wrapper{
width: 80%;
border-radius: 20rpx;
}
</style>
pages/orderConfirm/orderConfirm.vue
......@@ -25,30 +25,30 @@
<h4>价格明细</h4>
<view><text>现价</text><text>￥{{courseInfoItem.coursePrice}}</text></view>
<view>
<text>积分抵扣<i class="iconfont icon-31tishi"></i></text>
<text class="integralBox">未选积分，可抵扣XXX<i class="iconfont icon-youjiantou"></i></text>
<text @click="toggle(1,'bottom')">积分抵扣<i class="iconfont icon-31tishi"></i></text>
<text class="integralBox" @click="toggle(2,'bottom')">未选积分，可抵扣XXX<i class="iconfont icon-youjiantou"></i></text>
</view>
<view><text>合计</text><text>￥{{courseInfoItem.coursePrice}}</text></view>
</view>
<!-- 支付方式 -->
<view class="paymentMethodContent">
<h4>选择支付方式</h4>
<view class="paymentItem">
<view class="paymentItem" @click="selectPaymentMethod(1)">
<view>
<i class="iconfont icon-zhifubao"></i>
<text>支付宝支付</text>
</view>
<view class="selectRadio actived">
<view class="selectRadio" :class="{'actived':paymentMethod===1}">
<i class="iconfont icon-duihao"></i>
</view>
</view>
<view class="paymentItem">
<view class="paymentItem" @click="selectPaymentMethod(2)">
<view>
<i class="iconfont icon-py_weixinzhifu"></i>
<text>微信支付</text>
</view>
<view class="selectRadio">
<view class="selectRadio" :class="{'actived':paymentMethod===2}">
<i class="iconfont icon-duihao"></i>
</view>
</view>
......@@ -61,6 +61,70 @@
</view>
<view class="confirmOrder">提交订单</view>
</view>
<!-- 普通弹窗 -->
<uni-popup ref="popup" background-color="#fff">
<view class="popup-content">
<view class="title">
<text></text>
<h3>{{popupTitle}}</h3>
<i class="iconfont icon-guanbi" @click="closePopup(1)"></i>
</view>
<view v-if="popupType===1"><text>1积分=1元,积分抵扣如同现金,所有课程均可使用.</text></view>
<view v-if="popupType===2">
<view class="deductionInfoItem" :class="{'actived':isDeduction}" @click="selectDeduction(true)">
<view style="display: flex;">
<text>可抵扣</text>
<view class="integralInfoBox">
<text class="deductionCount">￥500</text>
<text>需5000积分兑换</text>
</view>
</view>
<view class="selectRadio">
<i class="iconfont icon-duihao"></i>
</view>
</view>
<view class="deductionInfoItem" :class="{'actived':!isDeduction}" @click="selectDeduction(false)">
<view>
<text>不使用积分抵扣</text>
</view>
<view class="selectRadio">
<i class="iconfont icon-duihao"></i>
</view>
</view>
<view class="confirmBtn" @click="closePopup(1);toggle(3,'center')">
确认
</view>
</view>
</view>
</uni-popup>
<view class="popupContainer">
<uni-popup ref="popup1" background-color="#fff">
<view class="popup1-content">
<view class="title">
<text></text>
<h3>{{popupTitle}}</h3>
<i class="iconfont icon-guanbi" @click="closePopup(1)"></i>
</view>
<view class="integralDeductionContent">
<view class="intergralItem">
<text>可兑换积分:</text>
<text>XXX积分</text>
</view>
<view class="intergralItem">
<text>本次兑换消耗积分:</text>
<text>XXX积分</text>
</view>
<view class="intergralItem">
<text>剩余可兑换积分:</text>
<text>XXX积分</text>
</view>
<view class="confirmBtn" @click="closePopup(2)">
确认兑换
</view>
</view>
</view>
</uni-popup>
</view>
</view>
</template>
......@@ -70,7 +134,11 @@
data() {
return {
courseInfoItem:{},
fileId:null
fileId:null,
paymentMethod:1,
popupTitle:'积分抵扣规则',
popupType:1,
isDeduction:true
}
},
methods: {
......@@ -83,6 +151,44 @@
}
})
},
// 选择支付方式
selectPaymentMethod(value){
this.paymentMethod = value;
},
// 从下往上弹出
toggle(val,type) {
// type 1为积分抵扣规则，2为优惠详情
this.popupType = val;
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
if(this.popupType===3){
this.$refs.popup1.open(type);
}else{
this.$refs.popup.open(type);
}
if(this.popupType===1){
this.popupTitle = '积分抵扣规则'
}else if(this.popupType===2){
this.popupTitle = '优惠详情'
}else if(this.popupType===3){
this.popupTitle = '积分兑换'
}
},
// 关闭弹出层
closePopup(val){
if(val===1){
this.$refs.popup.close()
}else{
this.$refs.popup1.close()
}
},
// 选择是否抵扣
selectDeduction(type){
this.isDeduction = type;
},
// 确认积分兑换
confirmIntergralDeduction(){
}
},
onLoad(option){
console.log(option)
......@@ -99,6 +205,127 @@
.container{
position: relative;
height: 100%;
.popup-content{
.title{
display: flex;
justify-content: space-between;
align-items: baseline;
h3{
text-align: center;
color: #333;
font-size: 32rpx;
margin-bottom: 30rpx;
}
.iconfont{
color: #999;
}
}
text{
color: #666;
font-size: 30rpx;
}
.deductionInfoItem{
display: flex;
justify-content: space-between;
align-items: center;
color: #333;
font-size: 30rpx;
padding: 10rpx 30rpx;
background-color: #F5f5f5;
border-radius: 20rpx;
min-height: 90rpx;
margin-top: 30rpx;
.integralInfoBox{
display: flex;
flex-direction: column;
margin-left: 10rpx;
text{
font-size: 30rpx;
color: #333333;
}
.deductionCount{
font-size: 36rpx;
color: #F15A1F;
}
}
.selectRadio{
color: transparent;
width: 40rpx;
height: 40rpx;
border: 1px solid #D8D8D8;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
&.actived{
border: 3rpx solid #20269B;
background-color: #fff;
.selectRadio{
background-color: #20269B;
color: #fff;
}
}
}
.integralDeductionContent{
.intergralItem{
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
}
}
.confirmBtn{
border-radius: 80rpx;
height: 80rpx;
width: 60%;
background-color: #20269B;
color: #fff;
margin: 64rpx auto 0;
display: flex;
justify-content: center;
align-items: center;
}
}
.popup1-content{
padding: 30rpx 34rpx 20rpx 42rpx;
border-radius: 20rpx;
.title{
display: flex;
justify-content: space-between;
align-items: baseline;
h3{
text-align: center;
color: #333;
font-size: 32rpx;
margin-bottom: 30rpx;
}
.iconfont{
color: #999;
}
}
.integralDeductionContent{
.intergralItem{
display: flex;
justify-content: space-between;
color: #333;
font-size: 30rpx;
margin-bottom: 10rpx;
}
}
.confirmBtn{
border-radius: 80rpx;
height: 80rpx;
width: 60%;
background-color: #20269B;
color: #fff;
margin: 64rpx auto 0;
display: flex;
justify-content: center;
align-items: center;
}
}
.courseInfoContent{
display: flex;
align-items: center;
......@@ -252,6 +479,7 @@
border-radius: 80rpx;
}
}
}
</style>
util/request.ts
import {interceptor} from "./interceptor";
// 全局请求封装
export default (url, method, params) => {
export default (url:string, method:any, params:any) => {
interceptor();
return new Promise((resolve, reject) => {
uni.request({
......
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