|
|
@@ -2,6 +2,7 @@
|
|
|
无原单退款确认页
|
|
|
用途：选花材后确认金额，并选择退款方式 / 退货方式 / 是否返充余额，提交生成无关联销售单的售后单。
|
|
|
谁用：admin/billing/freeRefund → 本页 → forwardResult。
|
|
|
+ 样式：对齐 admin/billing/affirm.vue（商品区、表单行、底部栏）。
|
|
|
-->
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
@@ -17,15 +18,16 @@
|
|
|
<view class="info-line">
|
|
|
<text class="item-name">{{ item.name || '' }}</text>
|
|
|
<text class="item-price">
|
|
|
- <text class="price">¥{{ getUnitPrice(item) }}</text>
|
|
|
+ <text class="unit">¥</text>
|
|
|
+ <text class="price">{{ getLineAmount(item) }}</text>
|
|
|
</text>
|
|
|
</view>
|
|
|
- <view class="info-line">
|
|
|
+ <view class="info-sub">
|
|
|
+ <text class="unit-price">¥{{ getUnitPrice(item) }}</text>
|
|
|
<text class="item-type">
|
|
|
<text v-if="item.bigCount > 0">{{ item.bigCount }}{{ item.bigUnit }}</text>
|
|
|
<text v-if="item.smallCount > 0">{{ item.smallCount }}{{ item.smallUnit }}</text>
|
|
|
</text>
|
|
|
- <text class="item-count">小计 ¥{{ getLineAmount(item) }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -36,7 +38,12 @@
|
|
|
<text class="iconfont icongouwuche"></text>
|
|
|
返回修改
|
|
|
</view>
|
|
|
- <view class="describe-view">共{{ selectList.length }}种 · ¥{{ allPrice }}</view>
|
|
|
+ <view class="describe-view">
|
|
|
+ <text>合计 ¥{{ allPrice }}</text>
|
|
|
+ <text>，{{ selectList.length }}种</text>
|
|
|
+ <text v-if="Number(totalItemNum.big) > 0">，{{ parseFloat(totalItemNum.big) }}扎</text>
|
|
|
+ <text v-if="Number(totalItemNum.small) > 0">，{{ parseFloat(totalItemNum.small) }}支</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -44,58 +51,56 @@
|
|
|
<view class="module-com input-line-wrap">
|
|
|
<tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
<view class="tui-title">客户</view>
|
|
|
- <text class="cell-value">{{ form.customName || '-' }}</text>
|
|
|
+ <view class="tui-input">{{ form.customName || '-' }}</view>
|
|
|
</tui-list-cell>
|
|
|
<tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
<view class="tui-title">退款金额</view>
|
|
|
- <input type="digit" v-model="form.price" placeholder="必填" />
|
|
|
+ <input class="tui-input" type="digit" v-model="form.price" placeholder="必填" placeholder-class="tui-placeholder" />
|
|
|
</tui-list-cell>
|
|
|
<tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
<view class="tui-title">备注</view>
|
|
|
- <input type="text" v-model="form.remark" placeholder="选填" />
|
|
|
+ <input class="tui-input" type="text" v-model="form.remark" placeholder="选填" placeholder-class="tui-placeholder" />
|
|
|
</tui-list-cell>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 退款方式 / 退货方式 / 返充到余额（对齐业务确认图） -->
|
|
|
- <view class="module-com option-module">
|
|
|
- <view class="option-block">
|
|
|
- <view class="option-title">退款方式</view>
|
|
|
- <view class="option-row">
|
|
|
- <view
|
|
|
+ <!-- 三组选项：交互对齐 affirm 收款方式按钮行 -->
|
|
|
+ <view class="module-com input-line-wrap option-module">
|
|
|
+ <tui-list-cell class="line-cell option-cell" :hover="false" :arrow="false">
|
|
|
+ <view class="tui-title">退款方式</view>
|
|
|
+ <view class="option-btns">
|
|
|
+ <button
|
|
|
v-for="item in payWayList"
|
|
|
:key="'pay-' + item.id"
|
|
|
- class="option-btn"
|
|
|
- :class="{ active: form.payWay === item.id }"
|
|
|
+ class="admin-button-com big pay-way-btn"
|
|
|
+ :class="form.payWay === item.id ? 'blue' : 'default'"
|
|
|
@click="form.payWay = item.id"
|
|
|
- >{{ item.name }}</view>
|
|
|
+ >{{ item.name }}</button>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="option-block">
|
|
|
- <view class="option-title">退货方式</view>
|
|
|
- <view class="option-row">
|
|
|
- <view
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell option-cell" :hover="false" :arrow="false">
|
|
|
+ <view class="tui-title">退货方式</view>
|
|
|
+ <view class="option-btns">
|
|
|
+ <button
|
|
|
v-for="item in returnWayList"
|
|
|
:key="'ret-' + item.id"
|
|
|
- class="option-btn"
|
|
|
- :class="{ active: form.returnWay === item.id }"
|
|
|
+ class="admin-button-com big pay-way-btn"
|
|
|
+ :class="form.returnWay === item.id ? 'blue' : 'default'"
|
|
|
@click="form.returnWay = item.id"
|
|
|
- >{{ item.name }}</view>
|
|
|
+ >{{ item.name }}</button>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="option-block">
|
|
|
- <view class="option-title">返充到余额</view>
|
|
|
- <view class="option-row">
|
|
|
- <view
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell option-cell" :hover="false" :arrow="false">
|
|
|
+ <view class="tui-title">返充余额</view>
|
|
|
+ <view class="option-btns">
|
|
|
+ <button
|
|
|
v-for="item in toBalanceList"
|
|
|
:key="'bal-' + item.id"
|
|
|
- class="option-btn"
|
|
|
- :class="{ active: form.toBalance === item.id }"
|
|
|
+ class="admin-button-com big pay-way-btn"
|
|
|
+ :class="form.toBalance === item.id ? 'blue' : 'default'"
|
|
|
@click="form.toBalance = item.id"
|
|
|
- >{{ item.name }}</view>
|
|
|
+ >{{ item.name }}</button>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </tui-list-cell>
|
|
|
</view>
|
|
|
|
|
|
<view class="tip-box">
|
|
|
@@ -104,8 +109,11 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="under-bar">
|
|
|
- <view class="price-view">¥{{ form.price || '0' }}</view>
|
|
|
- <button class="admin-button-com blue big" style="width:220upx;" @click="onSubmitTap">确认退款</button>
|
|
|
+ <view class="price-view">
|
|
|
+ <text class="price-title"></text>
|
|
|
+ <text class="price-number"><text class="large">¥{{ form.price || '0' }}</text></text>
|
|
|
+ </view>
|
|
|
+ <button class="admin-button-com blue big" @click="onSubmitTap">确认退款</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -152,6 +160,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ /** 汇总扎/支数量，摘要栏展示用（对齐 affirm） */
|
|
|
+ totalItemNum() {
|
|
|
+ let big = 0
|
|
|
+ let small = 0
|
|
|
+ if (this.selectList) {
|
|
|
+ this.selectList.forEach((item) => {
|
|
|
+ big += Number(item.bigCount) || 0
|
|
|
+ small += Number(item.smallCount) || 0
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return { big, small }
|
|
|
+ }
|
|
|
+ },
|
|
|
onLoad(option) {
|
|
|
this.selectJobType = 'freeRefund'
|
|
|
if (option.customId) {
|
|
|
@@ -296,142 +318,178 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+/* 布局/商品区/底部栏对齐 billing/affirm.vue */
|
|
|
+.pay-way-btn {
|
|
|
+ margin-right: 12upx;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+ min-width: 140upx;
|
|
|
+ width: auto;
|
|
|
+ padding-left: 16upx;
|
|
|
+ padding-right: 16upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
.affirm-page {
|
|
|
+ position: relative;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- background: #f5f5f5;
|
|
|
-}
|
|
|
-.affirm-view {
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
- padding-bottom: 140upx;
|
|
|
-}
|
|
|
-.module-com {
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 20upx;
|
|
|
-}
|
|
|
-.commodity-item {
|
|
|
- display: flex;
|
|
|
- padding: 24upx 30upx;
|
|
|
- border-bottom: 1upx solid #f0f0f0;
|
|
|
-}
|
|
|
-.item-icon {
|
|
|
- width: 100upx;
|
|
|
- height: 100upx;
|
|
|
- border-radius: 8upx;
|
|
|
- margin-right: 20upx;
|
|
|
- flex-shrink: 0;
|
|
|
-}
|
|
|
-.item-info {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-.info-line {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 8upx;
|
|
|
-}
|
|
|
-.item-name {
|
|
|
- font-size: 28upx;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-.item-price,
|
|
|
-.item-count {
|
|
|
- font-size: 26upx;
|
|
|
- color: #3385ff;
|
|
|
-}
|
|
|
-.item-type {
|
|
|
- font-size: 24upx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-.summary-bar {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 20upx 30upx;
|
|
|
-}
|
|
|
-.operate-view {
|
|
|
- color: #3385ff;
|
|
|
- font-size: 26upx;
|
|
|
-}
|
|
|
-.describe-view {
|
|
|
- font-size: 26upx;
|
|
|
- color: #666;
|
|
|
-}
|
|
|
-.input-line-wrap {
|
|
|
- padding: 0 10upx;
|
|
|
-}
|
|
|
-.tui-title {
|
|
|
- width: 160upx;
|
|
|
- font-size: 28upx;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-.cell-value {
|
|
|
- font-size: 28upx;
|
|
|
- color: #333;
|
|
|
+
|
|
|
+ .affirm-view {
|
|
|
+ flex: 1;
|
|
|
+ margin-bottom: 90upx;
|
|
|
+ padding: 20upx;
|
|
|
+ background-color: #f0f2f6;
|
|
|
+
|
|
|
+ .commodity-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .commodity-list {
|
|
|
+ padding: 20upx;
|
|
|
+ .commodity-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ .item-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 140upx;
|
|
|
+ height: 140upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ }
|
|
|
+ .item-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 20upx;
|
|
|
+ .info-line {
|
|
|
+ margin-bottom: 16upx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+ .item-name {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 16upx;
|
|
|
+ }
|
|
|
+ .item-price {
|
|
|
+ color: #333;
|
|
|
+ font-size: 22upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ .price {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-sub {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .unit-price {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #3385ff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .item-type {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #868686;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .summary-bar {
|
|
|
+ padding: 0 20upx;
|
|
|
+ height: 90upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-top: 1upx solid #eeeeee;
|
|
|
+ .operate-view {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #3385ff;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 8upx;
|
|
|
+ font-size: 40upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .describe-view {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-end;
|
|
|
+ color: #333;
|
|
|
+ font-size: 26upx;
|
|
|
+ font-weight: bold;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 16upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .module-com {
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ border-radius: 10upx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .under-bar {
|
|
|
+ z-index: 99999;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10upx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 100upx;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ .price-view {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24upx;
|
|
|
+ .price-title {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .price-number {
|
|
|
+ margin: 0 8upx;
|
|
|
+ color: #ff2842;
|
|
|
+ .large {
|
|
|
+ font-size: 34upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .admin-button-com {
|
|
|
+ width: 200upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.option-module {
|
|
|
- padding: 24upx 30upx 10upx;
|
|
|
-}
|
|
|
-.option-block {
|
|
|
- margin-bottom: 28upx;
|
|
|
-}
|
|
|
-.option-title {
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 16upx;
|
|
|
-}
|
|
|
-.option-row {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-.option-btn {
|
|
|
- min-width: 140upx;
|
|
|
- height: 64upx;
|
|
|
- line-height: 64upx;
|
|
|
- padding: 0 24upx;
|
|
|
- margin-right: 16upx;
|
|
|
- margin-bottom: 16upx;
|
|
|
- text-align: center;
|
|
|
- font-size: 26upx;
|
|
|
- color: #333;
|
|
|
- background: #fff;
|
|
|
- border: 1upx solid #cccccc;
|
|
|
- border-radius: 8upx;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.option-btn.active {
|
|
|
- color: #fff;
|
|
|
- background: #3385ff;
|
|
|
- border-color: #3385ff;
|
|
|
+ .option-cell {
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+ .option-btns {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex: 1;
|
|
|
+ padding-top: 4upx;
|
|
|
+ }
|
|
|
}
|
|
|
.tip-box {
|
|
|
- margin: 10upx 30upx 20upx;
|
|
|
+ margin: 0 10upx 20upx;
|
|
|
font-size: 24upx;
|
|
|
color: #999;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
-.under-bar {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- height: 110upx;
|
|
|
- background: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 30upx;
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
- box-shadow: 0 -2upx 10upx rgba(0, 0, 0, 0.06);
|
|
|
-}
|
|
|
-.price-view {
|
|
|
- font-size: 36upx;
|
|
|
- color: #ff2842;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
</style>
|
