first
This commit is contained in:
258
pagesCreateOrder/confirm-order/components/discount.vue
Normal file
258
pagesCreateOrder/confirm-order/components/discount.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
|
||||
<template #desc>
|
||||
<view class="u-m-t-48 tab">
|
||||
<my-tabs :list="tabs" @change="tabsChange"></my-tabs>
|
||||
</view>
|
||||
<view class="u-text-left u-p-30 ">
|
||||
<template v-if="!current">
|
||||
<view>
|
||||
<view class="u-m-t-24 border discount u-relative u-flex input-box">
|
||||
<view class="u-flex-1">
|
||||
<input @input="discountInput" v-model="form.discount" type="digit"
|
||||
placeholder-class="placeholder-class" placeholder="打八折请输入80" />
|
||||
|
||||
</view>
|
||||
<view class="color-999 u-p-l-48 u-p-r-48 u-flex u-row-center u-col-center">
|
||||
<view>%</view>
|
||||
</view>
|
||||
<view class="color-999 u-p-l-48 u-p-r-48 bg1 u-absolute u-flex u-row-center u-col-center">
|
||||
<view>%</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-24">
|
||||
<view class="u-flex" v-for="(item,index) in discounts" :key="index">
|
||||
<button @tap="setForm('discount',item)" class="tag u-m-r-20"
|
||||
hover-class="hover-class">{{item}}%</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view>
|
||||
<view class="u-m-t-24 border discount u-relative u-flex input-box">
|
||||
<view class="u-flex-1">
|
||||
<input @input="discountMoneyInput" v-model="form.discountMoney" type="digit"
|
||||
placeholder-class="placeholder-class" placeholder="减8.55元请输入8.55" />
|
||||
|
||||
</view>
|
||||
<view class="color-999 u-p-l-48 u-p-r-48 u-flex u-row-center u-col-center">
|
||||
<view>元</view>
|
||||
</view>
|
||||
<view class="color-999 u-p-l-48 u-p-r-48 bg1 u-absolute u-flex u-row-center u-col-center">
|
||||
<view>元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-m-t-48">
|
||||
<view class="u-font-24">
|
||||
<text class="color-999">打折原因</text>
|
||||
<text class="color-red">*</text>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-24">
|
||||
<view class="u-flex" v-for="(item,index) in causes" :key="index">
|
||||
<button @tap="changeCauses(item)" class="tag u-m-r-20"
|
||||
:class="{active:item.checked}">{{item.name}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-32 u-flex ">
|
||||
<uni-easyinput type="textarea" v-model="value" placeholder="自定义内容"></uni-easyinput>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="u-p-30">
|
||||
<view class="u-m-t-10">
|
||||
<my-button @tap="confirm" shape="circle" showShadow>确认</my-button>
|
||||
<my-button type="cancel" bgColor="#fff" @tap="confirm">取消</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import myModel from '@/components/my-components/my-model.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import myTabs from '@/components/my-components/my-tabs.vue'
|
||||
const props = defineProps({
|
||||
price: {
|
||||
type: [Number,String],
|
||||
default: 0
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
function changeCauses(item) {
|
||||
item.checked = !item.checked
|
||||
}
|
||||
|
||||
const discounts = [95, 90, 85, 80]
|
||||
const causes = reactive([{
|
||||
name: '顾客投诉质量问题',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
name: '友情打折',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
name: '临时活动',
|
||||
checked: false
|
||||
}
|
||||
])
|
||||
|
||||
function discountInput(e) {
|
||||
if (e.detail.value >= 100) {
|
||||
nextTick(() => {
|
||||
form.discount = 100
|
||||
})
|
||||
}
|
||||
}
|
||||
function discountMoneyInput(e) {
|
||||
const max=100
|
||||
if (e.detail.value >= max) {
|
||||
nextTick(() => {
|
||||
form.discountMoney = 100
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function setForm(key, val) {
|
||||
form[key] = val
|
||||
}
|
||||
|
||||
|
||||
const tabs = ['打折', '减免']
|
||||
let current = ref(0)
|
||||
|
||||
function tabsChange(i) {
|
||||
console.log(i);
|
||||
current.value = i
|
||||
}
|
||||
|
||||
const $form = {
|
||||
discountMoney: '',
|
||||
discount: '',
|
||||
name: '',
|
||||
price: ''
|
||||
}
|
||||
const form = reactive({
|
||||
...$form
|
||||
})
|
||||
watch(()=>props.price,(newval)=>{
|
||||
console.log(newval);
|
||||
form.price=newval
|
||||
form.currentPrice=newval
|
||||
})
|
||||
function resetForm() {
|
||||
Object.assign(form, {
|
||||
...$form
|
||||
})
|
||||
}
|
||||
|
||||
const model = ref(null)
|
||||
|
||||
function open() {
|
||||
model.value.open()
|
||||
}
|
||||
|
||||
function close() {
|
||||
model.value.close()
|
||||
}
|
||||
const emits = defineEmits(['confirm'])
|
||||
|
||||
function confirm() {
|
||||
const {
|
||||
discount,discountMoney
|
||||
} = form
|
||||
if (current.value===0&& discount==='') {
|
||||
return uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入有效折扣！'
|
||||
})
|
||||
}
|
||||
if (current.value===1&& discountMoney==='') {
|
||||
return uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入有效减免价格！'
|
||||
})
|
||||
}
|
||||
close()
|
||||
emits('confirm', form)
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tag {
|
||||
background-color: #fff;
|
||||
border: 1px solid #E5E5E5;
|
||||
line-height: inherit;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&.active {
|
||||
border-color: #E6F0FF;
|
||||
color: $my-main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-class {
|
||||
background-color: #E5E5E5;
|
||||
}
|
||||
|
||||
.discount {
|
||||
.u-absolute {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bg1 {
|
||||
background: #F7F7FA;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0 80rpx;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
padding: 22rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user