订单信息完成退单页面
This commit is contained in:
魏啾
parent
b42588ca1c
commit
8c42d09f38
|
|
@ -91,8 +91,8 @@
|
||||||
<router-link to="/" style="width: 45%;">
|
<router-link to="/" style="width: 45%;">
|
||||||
<el-button style="width: 100%;" type="primary">打票</el-button>
|
<el-button style="width: 100%;" type="primary">打票</el-button>
|
||||||
</router-link>
|
</router-link>
|
||||||
<el-button style="width: 45%;" type="danger" @click="payreturnOrderclick">退单</el-button>
|
<el-button style="width: 45%;" type="danger" @click="recharge = true">退单</el-button>
|
||||||
<!-- @click="recharge = true" -->
|
<!--payreturnOrderclick @click="recharge = true" -->
|
||||||
</div>
|
</div>
|
||||||
<!-- <el-button style="width: 100%; margin-top: 10px;" type="primary" @click="onSubmit">结算</el-button> -->
|
<!-- <el-button style="width: 100%; margin-top: 10px;" type="primary" @click="onSubmit">结算</el-button> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -135,7 +135,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</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">
|
||||||
<div class="recharge_footer_item">
|
<div class="recharge_footer_item">
|
||||||
<el-input v-model="textarea" style="width: 100%" :rows="2" type="textarea"
|
<el-input v-model="textarea" style="width: 100%" :rows="2" type="textarea"
|
||||||
|
|
@ -143,11 +143,65 @@
|
||||||
<div class="recharge_footer_items">
|
<div class="recharge_footer_items">
|
||||||
<div>顾客取消</div>
|
<div>顾客取消</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>
|
||||||
<div class="recharge_footer_itemright">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog> -->
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -403,157 +457,137 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.recharge_footer {
|
.recharge_footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
// display: flex;
|
|
||||||
// justify-content: space-between;
|
|
||||||
.recharge_footer_item {
|
.recharge_footer_item {
|
||||||
background: #f2f2f2;
|
background: #f2f2f2;
|
||||||
width: 60%;
|
width: 40%;
|
||||||
background: #f2f2f2;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
flex-flow: wrap;
|
flex-flow: wrap;
|
||||||
|
|
||||||
.recharge_footer_items {
|
.recharge_footer_items {
|
||||||
|
margin-left: 10px;
|
||||||
// background: #187ead;
|
// background: #187ead;
|
||||||
border: 1px solid #187ead;
|
border: 1px solid #187ead;
|
||||||
padding: 16px 22px;
|
padding: 10px 22px;
|
||||||
width: 30%;
|
|
||||||
color: #187ead;
|
color: #187ead;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10px;
|
border-radius: 6px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.recharge_footer_itemright {
|
.recharge_footer_itemright {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
width: 100%;
|
width: 60%;
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
.recharge_footer_itemright_input {
|
.recharge_footer_itemright_top {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #333333;
|
padding: 6px 10px;
|
||||||
|
background: #f2f2f2;
|
||||||
border-radius: 10px;
|
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;
|
display: flex;
|
||||||
height: 60px;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
div:nth-child(1) {
|
.recharge_footer_itemright_botton_boxone {
|
||||||
color: #56792e;
|
width: 60%;
|
||||||
font-size: 16px;
|
height: 60px;
|
||||||
}
|
|
||||||
|
|
||||||
div:nth-child(2) {
|
|
||||||
color: #88937c;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard {
|
|
||||||
width: 100%;
|
|
||||||
height: 40vh;
|
|
||||||
background: #FFFFFF;
|
|
||||||
|
|
||||||
.key-row {
|
|
||||||
display: flex;
|
|
||||||
display: -webkit-flex;
|
|
||||||
position: relative;
|
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;
|
display: flex;
|
||||||
justify-content: center;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 66.66%;
|
.recharge_footer_itemright_botton_boxoneabsolute {
|
||||||
font-size: 30px;
|
position: absolute;
|
||||||
text-align: center;
|
top: 0;
|
||||||
height: 100%;
|
left: 0;
|
||||||
|
color: #c0c0c0;
|
||||||
|
}
|
||||||
|
.recharge_footer_itemright_botton_boxonetext{
|
||||||
|
font-size:26px;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.point {
|
.recharge_footer_itemright_botton_boxtow {
|
||||||
display: flex;
|
width: 40%;
|
||||||
justify-content: center;
|
height: 60px;
|
||||||
align-items: center;
|
|
||||||
width: 33.33%;
|
|
||||||
font-size: 30px;
|
|
||||||
text-align: center;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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