APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add tid1523 refund modal styly

tid1731
刘嘉炜 1 year ago
parent
f775a537d3
commit
91064262d6
3 changed files with 165 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 161
      src/components/order_refund_modal/index.vue
  2. 2
      src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
  3. 3
      src/subpackage/device/pages/order_details/order_details.vue

161
src/components/order_refund_modal/index.vue
View File

@ -0,0 +1,161 @@
<template>
<view class="order-refund-modal">
<view class="orm-mask">
<view class="om-content">
<image class="oc-close" mode="aspectFit" src="../../static/images/icon/x_close.png"></image>
<view class="oc-title">退款</view>
<view class="oc-section">
<view class="os-info">
<view class="oi-name">欧轩智能羽毛球馆（永泰店）</view>
<view class="oi-line">订单编号：20195171564566</view>
<view class="oi-line">手机号码：218316553478</view>
<view class="os-ipts">
<view class="oi-item">
<view class="oi-name">
<text class="on-txt">*</text>
退款金额
</view>
<view class="oi-right">
<input class="or-ipt" type="number" />
<view class="or-tip">可退240元</view>
</view>
</view>
<view class="oi-item">
<view class="oi-name">
<text class="on-txt">*</text>
退款积分
</view>
<view class="oi-right">
<input class="or-ipt" type="number" />
<view class="or-tip">可退2积分</view>
</view>
</view>
</view>
</view>
</view>
<view class="oc-btns">
<view class="ob-item" @click="cancelBtn">取消</view>
<view class="ob-item" @click="confirmBtn">确认</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShow: false
}
},
methods: {
cancelBtn() {
this.$emit('click:cancel');
},
confirmBtn() {
this.$emit('click:confirm');
}
}
}
</script>
<style lang="scss">
.order-refund-modal{}
.orm-mask{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
z-index: 10;
}
.om-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-bottom: 80upx;
width: 620upx;
border-radius: 10px;
background: #fff;
.oc-close{
position: absolute;
top: 30upx;
right: 30upx;
width: 34upx;
height: 34upx;
}
.oc-title{
padding-top: 78upx;
text-align: center;
@include flcw(32upx, 44upx, #333, 500);
}
.oc-section{
padding: 30upx 30upx 0;
@include ctf(center);
.os-info{
.oi-name{
@include flcw(28upx, 48upx, #333);
}
.oi-line{
@include flcw(28upx, 48upx, #9C9C9F);
}
.os-ipts{
padding-top: 34upx;
.oi-item{
display: flex;
align-items: flex-start;
.oi-name{
@include flcw(28upx, 56upx, #333333);
.on-txt{
color: #EA5061;
}
}
.oi-right{
margin-left: 16upx;
flex-shrink: 0;
width: 312upx;
.or-ipt{
display: block;
box-sizing: border-box;
padding: 0 20upx;
width: 100%;
height: 56upx;
border-radius: 10upx;
border: 2upx solid #D8D8D8;
@include flcw(28upx, 48upx, #9C9C9F);
}
.or-tip{
padding-left: 8upx;
@include flcw(24upx, 48upx, #EA5061);
@include tHide;
}
}
}
}
}
}
.oc-btns{
margin-top: 32upx;
padding: 0 54upx;
@include ctf(space-between);
.ob-item{
width: 240upx;
height: 88upx;
text-align: center;
border: 2upx solid $mColor;
border-radius: 10upx;
@include flcw(32upx, 84upx, $mColor, 500);
&+.ob-item{
background: $mColor;
color: #fff;
}
}
}
}
</style>

2
src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
View File

@ -136,7 +136,7 @@
</view>
<!-- 2022/01/04 PM: 禁用退款功能 -->
<!-- <view class="rs-btn" @click="refunndBtn" v-if="orderInfo.pay_status == 1 || orderInfo.pay_status == 2">退款</view> -->
<view class="rs-btn" @click="refunndBtn" v-if="orderInfo.pay_status == 1 || orderInfo.pay_status == 2">退款</view>
</view>
</template>

3
src/subpackage/device/pages/order_details/order_details.vue
View File

@ -38,6 +38,7 @@
ref="ticketCheckModal"
@confirm="verifyConfirm"
></ticket-check>
<order-refund-modal></order-refund-modal>
</view>
</template>
@ -47,6 +48,7 @@
import reservationPeopleDetail from '../../components/order/reservation_people_detail/reservation_people_detail.vue';
import organizeDetail from '../../components/order/organize_detail/organize_detail.vue';
import ticket_check from '../../../../components/order_list/modal/ticket_check.vue';
import orderRefundModal from '../../../../components/order_refund_modal/index.vue';
import util from '../../../../utils/util';
import deviceServer from '../../js/device_server';
import deviceApi from '../../js/device_api';
@ -58,6 +60,7 @@
'reservation-people-detail': reservationPeopleDetail,
'organize-detail': organizeDetail,
'ticket-check': ticket_check,
'order-refund-modal': orderRefundModal,
},
computed:{
titleName(){

Write Preview
Loading…
Cancel
Save