parent
a69192c80e
commit
12b69adf6b
2 changed files with 199 additions and 6 deletions
@ -0,0 +1,158 @@ |
||||
<script setup> |
||||
import {ref, watch} from 'vue' |
||||
import {ElMessageBox} from "element-plus"; |
||||
|
||||
// 定义props |
||||
const props = defineProps(['type']) |
||||
|
||||
// 定义emits |
||||
const emits = defineEmits(["getSaleType", "getPriceType"]) |
||||
|
||||
// 定义选择项 |
||||
const selectSaleType = props.type === 'goods' ? ref('goods') : ref('ticket') |
||||
const selectPriceType = ref("cinema_price") |
||||
const ticketPrice = ref('20.00') |
||||
const haveServiceFee = ref(true) |
||||
const ticketQuanCheck = ref(false) |
||||
const ticketQuanNum = ref('0') |
||||
const ticketQuanValue = ref('0.00') |
||||
const goodsQuanCheck = ref(false) |
||||
const goodsQuanNum = ref('0') |
||||
const goodsQuanValue = ref('0.00') |
||||
|
||||
const containTicket = ["ticket", "all"] |
||||
const containGoods = ["goods", "all"] |
||||
|
||||
|
||||
// 检查售卖类型的变化 |
||||
watch(() => selectSaleType.value, () => { |
||||
emits("getSaleType", selectSaleType.value) |
||||
}) |
||||
|
||||
watch(() => ticketQuanCheck.value, () => { |
||||
if (ticketQuanCheck.value) { |
||||
console.log("ticketQuanCheck.value", ticketQuanCheck.value, ticketQuanNum.value, ticketQuanValue.value) |
||||
if (ticketQuanNum.value === 0 || ticketQuanValue.value === 0) { |
||||
ElMessageBox.alert('请设置影票券数量和面值！', "影票券", { |
||||
confirmButtonText: '知道了', |
||||
callback: () => { |
||||
ticketQuanCheck.value = false |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
|
||||
watch(() => goodsQuanCheck.value, () => { |
||||
if (goodsQuanCheck.value) { |
||||
console.log("goodsQuanCheck.value", goodsQuanCheck.value, goodsQuanNum.value, goodsQuanValue.value) |
||||
if (goodsQuanNum.value === 0 || goodsQuanValue.value === 0) { |
||||
ElMessageBox.alert('请设置卖品券数量和面值！', "卖品券", { |
||||
confirmButtonText: '知道了', |
||||
callback: () => { |
||||
goodsQuanCheck.value = false |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// 检查检查定价方式的变化 |
||||
watch(() => [selectPriceType.value, ticketPrice.value, ticketPrice.value, ticketQuanCheck.value, ticketQuanNum.value, ticketQuanValue.value, goodsQuanCheck.value, goodsQuanNum.value, goodsQuanValue.value], () => { |
||||
emits("getPriceType", { |
||||
select_price_type: selectPriceType.value, |
||||
ticket_info: { |
||||
ticket_price: ticketPrice.value, |
||||
have_service_fee: haveServiceFee.value, |
||||
}, |
||||
ticketQuanCheck: ticketQuanCheck.value, |
||||
ticket_quan: { |
||||
ticket_quan_num: ticketQuanNum.value, |
||||
ticket_quan_value: ticketQuanValue.value, |
||||
}, |
||||
goodsQuanCheck: goodsQuanCheck.value, |
||||
goods_quan: { |
||||
goods_quan_num: goodsQuanNum.value, |
||||
goods_quan_value: goodsQuanValue.value, |
||||
} |
||||
}) |
||||
}) |
||||
|
||||
</script> |
||||
|
||||
<template> |
||||
<el-row type="flex" justify="start" align="middle" style="margin: 20px 0 10px 20px"> |
||||
<el-col :span="1" style="font-size: 14px; font-weight: bold; color: #919399;" class="col-right">售卖类型</el-col> |
||||
<el-col :span="6" class="col-left"> |
||||
<el-radio-group v-model="selectSaleType"> |
||||
<el-radio label="ticket" v-if="props['type'] === 'ticket'">单影票</el-radio> |
||||
<el-radio label="goods" v-if="props['type'] === 'goods'">单卖品</el-radio> |
||||
<el-radio label="all" v-if="props['type'] === 'ticket'">影票加卖品</el-radio> |
||||
</el-radio-group> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="start" align="middle" style="margin: 0 0 10px 20px"> |
||||
<el-col :span="1" style="font-size: 14px; font-weight: bold; color: #919399;" class="col-right">定价方式</el-col> |
||||
<el-col :span="7" class="col-left"> |
||||
<el-radio-group v-model="selectPriceType"> |
||||
<el-radio label="cinema_price">影院定价</el-radio> |
||||
<el-radio label="third_price">三方定价</el-radio> |
||||
</el-radio-group> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row v-if="selectPriceType === 'third_price'" type="flex" justify="start" align="middle" style="margin: 0 0 0 20px"> |
||||
<el-col :span="1" style="font-size: 14px; font-weight: bold; color: #919399;" class="col-right">三方定价</el-col> |
||||
|
||||
<el-col :span="8" class="col-left"> |
||||
<span style="font-size: 14px">单张影票结算价：</span> |
||||
<el-input-number v-model="ticketPrice" :min="0.01" :max="99999.99" :step="0.01" |
||||
controls-position="right" size="small"></el-input-number> |
||||
<el-checkbox v-model="haveServiceFee" style="margin-left: 20px">是否包含服务费</el-checkbox> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row v-if="selectPriceType === 'third_price' && containTicket.includes(selectSaleType)" type="flex" justify="start" align="middle" style="margin: 0 0 0 20px"> |
||||
<el-col :span="1" style="font-size: 14px; font-weight: bold; color: #919399;" class="col-right"></el-col> |
||||
<el-col :span="10" class="col-left"> |
||||
<span>影票券：</span> |
||||
<el-input-number v-model="ticketQuanNum" :min="0" :max="10" :step="1" |
||||
controls-position="right" size="small"></el-input-number> |
||||
<span> 张，抵值 </span> |
||||
<el-input-number v-model="ticketQuanValue" :min="0.00" :max="99999.99" :step="0.01" |
||||
controls-position="right" size="small"></el-input-number> |
||||
<span> 元</span> |
||||
<el-checkbox v-model="ticketQuanCheck" style="margin-left: 20px">使用影票券</el-checkbox> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row v-if="selectPriceType === 'third_price' && containGoods.includes(selectSaleType)" type="flex" justify="start" align="middle" style="margin: 0 0 30px 20px"> |
||||
<el-col :span="1" style="font-size: 14px; font-weight: bold; color: #919399;" class="col-right"></el-col> |
||||
<el-col :span="10" class="col-left"> |
||||
<span>卖品券：</span> |
||||
<el-input-number v-model="goodsQuanNum" :min="0" :max="10" :step="1" |
||||
controls-position="right" size="small"></el-input-number> |
||||
<span> 张，抵值 </span> |
||||
<el-input-number v-model="goodsQuanValue" :min="0.00" :max="99999.99" :step="0.01" |
||||
controls-position="right" size="small"></el-input-number> |
||||
<span> 元</span> |
||||
<el-checkbox v-model="goodsQuanCheck" style="margin-left: 20px">使用卖品券</el-checkbox> |
||||
</el-col> |
||||
</el-row> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.col-right { |
||||
display: flex; |
||||
justify-content: end; |
||||
align-items: center; |
||||
height: 100%; |
||||
} |
||||
|
||||
.col-left { |
||||
display: flex; |
||||
justify-content: start; |
||||
align-items: center; |
||||
height: 100%; |
||||
margin-left: 20px; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue