订单信息完成退单页面
This commit is contained in:
魏啾
parent
b42588ca1c
commit
8c42d09f38
|
|
@ -91,8 +91,8 @@
|
|||
<router-link to="/" style="width: 45%;">
|
||||
<el-button style="width: 100%;" type="primary">打票</el-button>
|
||||
</router-link>
|
||||
<el-button style="width: 45%;" type="danger" @click="payreturnOrderclick">退单</el-button>
|
||||
<!-- @click="recharge = true" -->
|
||||
<el-button style="width: 45%;" type="danger" @click="recharge = true">退单</el-button>
|
||||
<!--payreturnOrderclick @click="recharge = true" -->
|
||||
</div>
|
||||
<!-- <el-button style="width: 100%; margin-top: 10px;" type="primary" @click="onSubmit">结算</el-button> -->
|
||||
</div>
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <el-dialog v-model="recharge" title="退单" width="800" :before-close="handlerecharge">
|
||||
<el-dialog v-model="recharge" title="退单" width="800" :before-close="handlerecharge">
|
||||
<div class="recharge_footer">
|
||||
<div class="recharge_footer_item">
|
||||
<el-input v-model="textarea" style="width: 100%" :rows="2" type="textarea"
|
||||
|
|
@ -143,11 +143,65 @@
|
|||
<div class="recharge_footer_items">
|
||||
<div>顾客取消</div>
|
||||
</div>
|
||||
<div class="recharge_footer_items">
|
||||
<div>等待时间长</div>
|
||||
</div>
|
||||
<div class="recharge_footer_items">
|
||||
<div>支付错误</div>
|
||||
</div>
|
||||
<div class="recharge_footer_items">
|
||||
<div>商品不满意</div>
|
||||
</div>
|
||||
<div class="recharge_footer_items">
|
||||
<div>服务态度不满意</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recharge_footer_itemright">
|
||||
<div class="recharge_footer_itemright_top">
|
||||
<div>
|
||||
单号：2525
|
||||
</div>
|
||||
<div>
|
||||
下单时间：2024-02-01 11:49:06
|
||||
</div>
|
||||
<div>
|
||||
<span>金额：￥14.00</span>
|
||||
<span>优惠：￥0.00</span>
|
||||
<span>包装费：￥14.00</span>
|
||||
<span>可退款：￥14.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="recharge_footer_itemright_botton">
|
||||
<div class="recharge_footer_itemright_botton_top">
|
||||
<el-checkbox v-model="checked1" size="large" /><span
|
||||
style="margin-left: 10px;">全选，共10项目</span>
|
||||
</div>
|
||||
<div class="recharge_footer_itemright_botton_item" v-for="item in 10" :key="item">
|
||||
<div class="recharge_footer_itemright_botton_itemone">
|
||||
<el-checkbox v-model="checked1" size="large" />
|
||||
<span style="margin-left: 10px;">葡萄汁</span>
|
||||
</div>
|
||||
<div class="recharge_footer_itemright_botton_itemtow">
|
||||
8
|
||||
</div>
|
||||
<div class="recharge_footer_itemright_botton_itemthere">
|
||||
￥8
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recharge_footer_itemright_botton_box">
|
||||
<div class="recharge_footer_itemright_botton_boxone">
|
||||
<div class="recharge_footer_itemright_botton_boxoneabsolute">退单金额：</div>
|
||||
<div class="recharge_footer_itemright_botton_boxonetext">￥100</div>
|
||||
</div>
|
||||
<div class="recharge_footer_itemright_botton_boxtow">
|
||||
<el-button type="primary" style="width: 100%; height: 100%;">支付退回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog> -->
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -403,157 +457,137 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.recharge_footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
.recharge_footer_item {
|
||||
background: #f2f2f2;
|
||||
width: 60%;
|
||||
background: #f2f2f2;
|
||||
width: 40%;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: wrap;
|
||||
|
||||
.recharge_footer_items {
|
||||
margin-left: 10px;
|
||||
// background: #187ead;
|
||||
border: 1px solid #187ead;
|
||||
padding: 16px 22px;
|
||||
width: 30%;
|
||||
padding: 10px 22px;
|
||||
color: #187ead;
|
||||
height: fit-content;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
border-radius: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.recharge_footer_itemright {
|
||||
padding-left: 20px;
|
||||
width: 100%;
|
||||
width: 60%;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.recharge_footer_itemright_input {
|
||||
.recharge_footer_itemright_top {
|
||||
width: 100%;
|
||||
background: #333333;
|
||||
padding: 6px 10px;
|
||||
background: #f2f2f2;
|
||||
border-radius: 10px;
|
||||
padding: 0 6px;
|
||||
|
||||
div:nth-child(1) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
span:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: red;
|
||||
}
|
||||
|
||||
span:nth-child(4) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.recharge_footer_itemright_botton {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
|
||||
.recharge_footer_itemright_botton_top {
|
||||
margin-top: 10px;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.recharge_footer_itemright_botton_item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
.recharge_footer_itemright_botton_itemone {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.recharge_footer_itemright_botton_itemtow {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.recharge_footer_itemright_botton_itemthere {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recharge_footer_itemright_botton_box {
|
||||
border-top: 1px solid #ccc;
|
||||
padding: calc(var(--el-dialog-padding-primary) + 10px) 12px 0 12px;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
div:nth-child(1) {
|
||||
color: #56792e;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
color: #88937c;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
background: #FFFFFF;
|
||||
|
||||
.key-row {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
.recharge_footer_itemright_botton_boxone {
|
||||
width: 60%;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
height: 10vh;
|
||||
line-height: 10vh;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.keyboard .key-cell {
|
||||
flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyboard .key-confirm {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
height: 30vh;
|
||||
width: 25%;
|
||||
line-height: 30vh;
|
||||
color: #FFFFFF;
|
||||
z-index: 5;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyboard .key-confirm2 {
|
||||
position: absolute;
|
||||
height: 10vh;
|
||||
width: 25%;
|
||||
line-height: 10vh;
|
||||
z-index: 9999;
|
||||
right: 0;
|
||||
top: 60px;
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.key-zero-and-point {
|
||||
display: flex;
|
||||
height: 10vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 75%;
|
||||
font-size: 30px;
|
||||
|
||||
.zero {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 66.66%;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
.recharge_footer_itemright_botton_boxoneabsolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #c0c0c0;
|
||||
}
|
||||
.recharge_footer_itemright_botton_boxonetext{
|
||||
font-size:26px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.point {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 33.33%;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
.recharge_footer_itemright_botton_boxtow {
|
||||
width: 40%;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.key-cell:active {
|
||||
color: white;
|
||||
background: black; //黑色
|
||||
opacity: 0.1; //这里重要，就是通过这个透明度来设置
|
||||
}
|
||||
|
||||
.a:active,
|
||||
.key-confirm2:active {
|
||||
color: white;
|
||||
background: black; //黑色
|
||||
opacity: 0.1; //这里重要，就是通过这个透明度来设置
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue