129 lines
3.9 KiB
Vue
129 lines
3.9 KiB
Vue
<template>
|
||
<u-popup v-model="show" mode="bottom" border-radius="16" height="auto" :closeable="true" @close="onClose">
|
||
<view class="popup">
|
||
<view class="title">整单调价</view>
|
||
<view v-if="currentLabel" class="hint">当前浮动：{{ currentLabel }}</view>
|
||
|
||
<view class="row">
|
||
<text class="label">价格比例（100=原价）</text>
|
||
<input class="input" type="digit" v-model="discountInput" placeholder="如 90=九折，120=涨20%" />
|
||
</view>
|
||
|
||
<view v-if="discountQuickOptions.length" class="quick-row">
|
||
<text class="quick-label">快捷打折</text>
|
||
<view class="quick-wrap">
|
||
<text
|
||
v-for="opt in discountQuickOptions"
|
||
:key="'d-' + opt.value"
|
||
class="quick"
|
||
@click="discountInput = String(opt.value)"
|
||
>{{ opt.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="markupQuickOptions.length" class="quick-row">
|
||
<text class="quick-label">快捷涨价</text>
|
||
<view class="quick-wrap">
|
||
<text
|
||
v-for="opt in markupQuickOptions"
|
||
:key="'m-' + opt.value"
|
||
class="quick markup"
|
||
@click="discountInput = String(opt.value)"
|
||
>{{ opt.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="actions">
|
||
<button class="btn cancel" @click="onClose">取消</button>
|
||
<button class="btn ghost" @click="discountInput = '100'">清除浮动</button>
|
||
<button class="btn confirm" :loading="submitting" @click="onConfirm">确定</button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import { formatPriceDiscountLabel } from '@/subPackages/sub_business_shared/common/pricePercentAdjust.js'
|
||
|
||
export default {
|
||
name: 'OrderPricePercentAdjustPopup',
|
||
props: {
|
||
visible: { type: Boolean, default: false },
|
||
currentDiscount: { type: [Number, String], default: 100 },
|
||
quickOptions: { type: Array, default: () => [] },
|
||
submitting: { type: Boolean, default: false },
|
||
},
|
||
data() {
|
||
return {
|
||
show: false,
|
||
discountInput: '100',
|
||
}
|
||
},
|
||
computed: {
|
||
currentLabel() {
|
||
return formatPriceDiscountLabel(Number(this.currentDiscount) || 100)
|
||
},
|
||
discountQuickOptions() {
|
||
return (this.quickOptions || []).filter((o) => Number(o.value) < 100)
|
||
},
|
||
markupQuickOptions() {
|
||
return (this.quickOptions || []).filter((o) => Number(o.value) > 100)
|
||
},
|
||
},
|
||
watch: {
|
||
visible: {
|
||
immediate: true,
|
||
handler(v) {
|
||
this.show = v
|
||
if (v) {
|
||
this.syncDiscountInput()
|
||
}
|
||
},
|
||
},
|
||
currentDiscount(v) {
|
||
if (this.show) {
|
||
this.syncDiscountInput(v)
|
||
}
|
||
},
|
||
show(v) {
|
||
if (!v) this.$emit('close')
|
||
},
|
||
},
|
||
methods: {
|
||
syncDiscountInput(discount) {
|
||
const d = Number(discount ?? this.currentDiscount) || 100
|
||
this.discountInput = String(d)
|
||
},
|
||
onClose() {
|
||
this.show = false
|
||
},
|
||
onConfirm() {
|
||
const priceDiscount = parseInt(String(this.discountInput).trim(), 10)
|
||
if (!priceDiscount || priceDiscount <= 0) {
|
||
uni.showToast({ title: '请输入有效比例', icon: 'none' })
|
||
return
|
||
}
|
||
this.$emit('confirm', { priceDiscount })
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.popup { padding: 32rpx 32rpx 48rpx; }
|
||
.title { font-size: 32rpx; font-weight: 600; text-align: center; }
|
||
.hint { font-size: 26rpx; color: #666; text-align: center; margin-top: 12rpx; }
|
||
.row { margin-top: 28rpx; }
|
||
.label, .quick-label { font-size: 26rpx; color: #666; display: block; margin-bottom: 12rpx; }
|
||
.input { background: #f5f5f5; border-radius: 12rpx; padding: 20rpx; font-size: 28rpx; }
|
||
.quick-row { margin-top: 20rpx; }
|
||
.quick-wrap { display: flex; flex-wrap: wrap; gap: 16rpx; }
|
||
.quick { padding: 10rpx 24rpx; background: #eef9f6; color: #6acdbb; border-radius: 20rpx; font-size: 24rpx; }
|
||
.quick.markup { background: #fff7e6; color: #fa8c16; }
|
||
.actions { display: flex; gap: 16rpx; margin-top: 36rpx; }
|
||
.btn { flex: 1; font-size: 28rpx; border-radius: 12rpx; }
|
||
.cancel { background: #f5f5f5; color: #666; }
|
||
.ghost { background: #fff; color: #6acdbb; border: 1rpx solid #6acdbb; }
|
||
.confirm { background: #6acdbb; color: #fff; }
|
||
</style>
|