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>
|
||||
197
pagesCreateOrder/confirm-order/components/give-food.vue
Normal file
197
pagesCreateOrder/confirm-order/components/give-food.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
|
||||
<template #desc>
|
||||
<view class="u-text-left u-p-30 ">
|
||||
<view style="transform: scale(1.5);transform-origin:left;">
|
||||
<uni-number-box :min="1" :max="1" :value="form.number" @change="changeValue" :width="300" />
|
||||
</view>
|
||||
<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
|
||||
} 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({
|
||||
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 = {
|
||||
number:1
|
||||
}
|
||||
function changeValue(e){
|
||||
form.number=e
|
||||
}
|
||||
const form = reactive({
|
||||
...$form
|
||||
})
|
||||
|
||||
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 {number
|
||||
} = form
|
||||
close()
|
||||
emits('confirm', {
|
||||
name,
|
||||
price
|
||||
})
|
||||
}
|
||||
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>
|
||||
168
pagesCreateOrder/confirm-order/components/remark.vue
Normal file
168
pagesCreateOrder/confirm-order/components/remark.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
|
||||
<template #desc>
|
||||
<view class="u-text-left u-p-30 ">
|
||||
<view class="u-m-t-32 u-flex ">
|
||||
<uni-easyinput type="textarea" v-model="form.remark" placeholder="自定义内容"></uni-easyinput>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-24">
|
||||
<view class="u-flex u-flex-wrap u-m-r-20 u-m-b-20 lh34" v-for="(item,index) in causes" :key="index">
|
||||
<button @tap="changeCauses(item)" class="tag ">{{item.name}}</button>
|
||||
</view>
|
||||
</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
|
||||
} 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({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function changeCauses(item) {
|
||||
let prve=form.remark.length?',':''
|
||||
form.remark +=prve+item.name
|
||||
}
|
||||
|
||||
const causes = reactive([{
|
||||
name: '免葱',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
name: '免香菜',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
name: '不要辣',
|
||||
checked: false
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
function setForm(key, val) {
|
||||
form[key] = val
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const $form = {
|
||||
remark:''
|
||||
}
|
||||
const form = reactive({
|
||||
...$form
|
||||
})
|
||||
|
||||
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 {remark
|
||||
} = form
|
||||
close()
|
||||
emits('confirm', {
|
||||
name,
|
||||
price
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.lh34{
|
||||
line-height: 34rpx;
|
||||
}
|
||||
.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>
|
||||
528
pagesCreateOrder/confirm-order/confirm-order.vue
Normal file
528
pagesCreateOrder/confirm-order/confirm-order.vue
Normal file
@@ -0,0 +1,528 @@
|
||||
<template>
|
||||
<view class="page-gray color-333 u-font-28">
|
||||
<view class="block">
|
||||
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
||||
<view>选择用户</view>
|
||||
<view class="u-m-t-24 u-flex u-row-between " @tap="chooseUser">
|
||||
<view v-if="!user">选择用户</view>
|
||||
<view class="u-flex" v-else>
|
||||
<view class="headeimg">
|
||||
<image class="img" :src="user.headImg" mode=""></image>
|
||||
</view>
|
||||
<view class="u-m-l-20">{{user.nickName}}</view>
|
||||
<view class="color-main u-m-l-10 u-font-24">{{user.isVip?'会员':'' }}</view>
|
||||
<view class="u-font-24 u-m-l-30"><text>余额:</text><text class="color-main">{{user.amount}}</text>
|
||||
</view>
|
||||
<view class="u-font-24 u-m-l-30"><text>积分:</text><text
|
||||
class="color-main">{{user.totalScore}}</text></view>
|
||||
</view>
|
||||
<uni-icons type="right" color="#999" size="22"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
||||
<view>就餐类型</view>
|
||||
<view class="u-m-t-24 u-flex ">
|
||||
<view class="u-flex color-666">
|
||||
<radio-group @change="radioGroupChange">
|
||||
<label class="radio u-m-r-60" v-for="(item,index) in eatTypes.list" :key="index">
|
||||
<radio :value="''+index" :checked="index === eatTypes.active" class="scale7 " />
|
||||
<text>{{item.label}}</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-b-24 u-m-b-24 border-bottom" @tap="chooseTable">
|
||||
<view>选择桌码</view>
|
||||
<view class="u-m-t-24 u-flex u-row-between ">
|
||||
<view>
|
||||
<text v-if="table">{{table.name}}</text>
|
||||
<text v-else>不选择桌台</text>
|
||||
</view>
|
||||
<uni-icons type="right" color="#999" size="22"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="block">
|
||||
<template v-if="!user">
|
||||
<view class="u-p-b-24 u-m-b-24 border-bottom">
|
||||
<view>用餐人数(人)</view>
|
||||
<picker @change="userNumberChange" :value="userNumbers.defaultCateIndex" :range="userNumbers.list">
|
||||
<view class="u-m-t-24 u-flex u-row-between ">
|
||||
<view class="color-333">{{userNumbers.defaultCateIndex||''}}</view>
|
||||
<uni-icons type="right" color="#999" size="22"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view>
|
||||
<view class="u-flex border-bottom u-p-b-24">
|
||||
<image class="headeimg" src="@/static/uni.png" mode=""></image>
|
||||
<view class="u-m-l-32">
|
||||
<view class="">{{user.name}}</view>
|
||||
<view class="color-main u-font-24">{{user.isVip?'永久会员':'' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-24 u-row-between u-font-24 color-999">
|
||||
<view class="u-flex">
|
||||
<view>余额</view>
|
||||
<view class="color-333 u-m-l-10"> 0.00</view>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<view>积分</view>
|
||||
<view class="color-333 u-m-l-10"> 0</view>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<view>已消费</view>
|
||||
<view class="color-333 u-m-l-10"> 0.00</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view class="block">
|
||||
<view class="u-p-b-24 ">
|
||||
<view class="font-bold">订单备注</view>
|
||||
<view class="u-m-t-32 u-flex ">
|
||||
<uni-easyinput type="textarea" v-model="note" placeholder="请输入备注"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="block">
|
||||
<view class="u-flex">
|
||||
<view>共</view>
|
||||
<view class="fen font-bold">{{goodsNumber}}</view>
|
||||
<view>份菜品</view>
|
||||
</view>
|
||||
|
||||
<view class="goods u-m-t-32">
|
||||
<view class="item u-m-b-40" @click="changeGoodsSel(index)" v-for="(item,index) in goods.list"
|
||||
:key="index">
|
||||
<view class="u-flex u-row-between">
|
||||
<view class="u-flex">
|
||||
<image class="img" :src="item.coverImg" mode=""></image>
|
||||
<view class="u-m-l-32">
|
||||
<view class="u-flex">
|
||||
<view class="u-flex u-m-r-20" v-if="item.isWait">
|
||||
<uni-tag text="等叫"
|
||||
custom-style="background-color: #FFF0DF; border-color: #FFF0DF; color: #FF9F2E;">
|
||||
</uni-tag>
|
||||
</view>
|
||||
<view class="u-m-r-20 u-flex" v-if="item.isGift">
|
||||
<uni-tag text="赠送"
|
||||
custom-style="background-color: #FFF0DF; border-color: #FFF0DF; color: #FF9F2E;">
|
||||
</uni-tag>
|
||||
</view>
|
||||
<view class="u-m-r-20 u-flex" v-if="item.isPack">
|
||||
<uni-tag
|
||||
custom-style="background-color: #E6F0FF; border-color: #E6F0FF; color: #318AFE;"
|
||||
size="small" text="打包" inverted type="success" />
|
||||
</view>
|
||||
<view>
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-font-24 color-999 u-m-t-10">{{item.specSnap||' '}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="font-bold">
|
||||
<text>¥</text>
|
||||
<text v-if="item.isGift">0</text>
|
||||
<text v-else>{{formatPrice(item.salePrice*item.number) }}</text>
|
||||
</view>
|
||||
<view class="color-999 u-text-right u-font-24 u-m-t-12">×{{item.number}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-x="true" v-if="index==goods.sel">
|
||||
<view class="u-m-t-32 u-flex no-wrap">
|
||||
<view class="u-flex u-m-r-20 u-m-b-20">
|
||||
<button class="tag" hover-class="hover-class" @tap="showModel('discount')">单品打折</button>
|
||||
</view>
|
||||
<view class="u-flex u-m-r-20 u-m-b-20">
|
||||
<!-- <button class="tag" hover-class="hover-class" @tap="showModel('giveFood')">赠菜</button> -->
|
||||
<button class="tag" hover-class="hover-class"
|
||||
@tap="toggleGoodsItemKey(item,index,'isGift')">{{item.isGift?'取消赠送':'赠送'}}</button>
|
||||
</view>
|
||||
<view class="u-flex u-m-r-20 u-m-b-20">
|
||||
<button class="tag" hover-class="hover-class"
|
||||
@tap="toggleGoodsItemKey(item,index,'isPack')">{{item.isPack?'取消打包':'打包'}}</button>
|
||||
</view>
|
||||
<!-- <view class="u-flex u-m-r-20 u-m-b-20">
|
||||
<button class="tag" hover-class="hover-class"
|
||||
@tap="toggleWait(item)">{{item.isWait?'取消等叫':'等叫'}}</button>
|
||||
</view> -->
|
||||
<view class="u-flex u-m-r-20 u-m-b-20">
|
||||
<button class="tag" hover-class="hover-class" @tap="showModel('remark')">单品备注</button>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-between u-m-t-30 u-p-b-34 border-bottom">
|
||||
<view>
|
||||
<text v-if="eatTypes.active==1">包装费</text>
|
||||
<text v-else>桌位费</text>
|
||||
</view>
|
||||
<view>¥0.00</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-right u-m-t-38">
|
||||
<view class="color-main" @tap="showModel('editMoney')">修改</view>
|
||||
<view class="u-flex price u-m-l-32">
|
||||
<view class="">实收金额</view>
|
||||
<view class="font-bold u-font-32">¥{{formatPrice(allPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view style="height: 300rpx;"></view>
|
||||
<view class="safe-bottom fixed">
|
||||
<view>
|
||||
<label class="radio">
|
||||
<radio value="" class="scale7" /><text>打印预结算</text>
|
||||
</label>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-48 btn">
|
||||
<my-button shape="circle" @click="createOrder">提交</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<model-discount title="菜品打折/减免" :ref="setModel" name="discount" :price="allPrice"></model-discount>
|
||||
<give-food title="赠菜" :ref="setModel" name="giveFood"></give-food>
|
||||
<my-remark title="单品备注" :ref="setModel" name="remark"></my-remark>
|
||||
<edit-discount title="优惠金额" :ref="setModel" name="editMoney" :price="allPrice"></edit-discount>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad,onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
ref,
|
||||
onBeforeUnmount,
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
import myButton from '@/components/my-components/my-button'
|
||||
import modelDiscount from './components/discount'
|
||||
import giveFood from './components/give-food'
|
||||
import myRemark from './components/remark'
|
||||
import editDiscount from '@/pagesCreateOrder/components/edit-discount.vue'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
returnBoolean
|
||||
} from '@/commons/utils/format.js';
|
||||
import color from '@/commons/color.js';
|
||||
import * as Api from '@/http/yskApi/Instead.js'
|
||||
const models = new Map();
|
||||
//备注
|
||||
let note=ref('')
|
||||
function setModel(el) {
|
||||
if (el && el.$attrs['name']) {
|
||||
models.set(el.$attrs['name'], el);
|
||||
}
|
||||
}
|
||||
|
||||
function showModel(key) {
|
||||
const model = models.get(key)
|
||||
model && model.open()
|
||||
}
|
||||
|
||||
function formatPrice(n) {
|
||||
return Number(n).toFixed(2)
|
||||
}
|
||||
|
||||
|
||||
|
||||
//用餐人数
|
||||
const userNumbers = reactive({
|
||||
list: new Array(100).fill(1).map((v, index) => {
|
||||
return index === 0 ? '无' : index + '人'
|
||||
}),
|
||||
defaultCateIndex: 1,
|
||||
})
|
||||
|
||||
function userNumberChange(e) {
|
||||
userNumbers.defaultCateIndex = e.detail.value
|
||||
}
|
||||
|
||||
const form = reactive({})
|
||||
//切换商品状态
|
||||
async function toggleGoodsItemKey(item, index, key) {
|
||||
const {
|
||||
productId,
|
||||
skuId,
|
||||
id,
|
||||
number
|
||||
} = item
|
||||
const par = {
|
||||
masterId: option.masterId,
|
||||
tableId: option.tableId,
|
||||
productId,
|
||||
num: number,
|
||||
skuId
|
||||
}
|
||||
par[key] = !item[key]
|
||||
const res = await Api.addCart(par)
|
||||
goods.list[index][key] = returnBoolean(res[key])
|
||||
}
|
||||
//等叫
|
||||
function toggleWait(item) {
|
||||
item.isWait = !item.isWait
|
||||
}
|
||||
|
||||
|
||||
|
||||
const eatTypes = reactive({
|
||||
list: [{
|
||||
label: '堂食',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '自取',
|
||||
value: '2'
|
||||
},
|
||||
],
|
||||
active: 1
|
||||
})
|
||||
|
||||
function radioGroupChange(e) {
|
||||
eatTypes.active = e.detail.value
|
||||
console.log(eatTypes.active);
|
||||
}
|
||||
|
||||
|
||||
function chooseUser() {
|
||||
go.to('PAGES_CHOOSE_USER')
|
||||
}
|
||||
|
||||
function chooseTable() {
|
||||
go.to('PAGES_CHOOSE_TABLE',{
|
||||
...table.value
|
||||
})
|
||||
}
|
||||
|
||||
// 监听选择用户事件
|
||||
let user = ref(null)
|
||||
|
||||
function watchChooseuser() {
|
||||
uni.$off('choose-user')
|
||||
uni.$on('choose-user', (data) => {
|
||||
console.log(data);
|
||||
user.value = data
|
||||
})
|
||||
}
|
||||
let table = ref(null)
|
||||
|
||||
function watchChooseTable() {
|
||||
uni.$off('choose-table')
|
||||
uni.$on('choose-table', (data) => {
|
||||
table.value = data
|
||||
console.log(table.value);
|
||||
})
|
||||
}
|
||||
|
||||
const option = reactive({
|
||||
masterId: '',
|
||||
tableId: ""
|
||||
})
|
||||
const goods = reactive({
|
||||
list: [],
|
||||
sel: 0
|
||||
})
|
||||
const goodsNumber = computed(() => {
|
||||
let result = 0
|
||||
result = goods.list.reduce((prve, cur) => {
|
||||
return prve + cur.number
|
||||
}, 0)
|
||||
return result
|
||||
})
|
||||
const allPrice = computed(() => {
|
||||
return goods.list.reduce((prve, cur) => {
|
||||
return prve + cur.salePrice * cur.number * (cur.isGift ? 0 : 1)
|
||||
}, 0).toFixed(2)
|
||||
})
|
||||
|
||||
function setGoodsItem(key, val) {
|
||||
item[key] = val
|
||||
}
|
||||
|
||||
function changeGoodsSel(index) {
|
||||
goods.sel = index
|
||||
}
|
||||
//获取购物车数据
|
||||
async function getCart(par = {
|
||||
page: 0,
|
||||
size: 300,
|
||||
masterId: option.masterId,
|
||||
tableId: option.tableId
|
||||
}) {
|
||||
const res = await Api.getCart(par)
|
||||
goods.list = res.records.map(item => {
|
||||
return {
|
||||
...item,
|
||||
isPack: returnBoolean(item.isPack),
|
||||
isGift: returnBoolean(item.isGift)
|
||||
}
|
||||
})
|
||||
console.log(goods.list);
|
||||
}
|
||||
|
||||
// 创建订单
|
||||
async function createOrder(par = {
|
||||
masterId: option.masterId,
|
||||
vipUserId:user.value?user.value.id:'',
|
||||
note:note.value,
|
||||
postPay:true,
|
||||
orderId:'',
|
||||
tableId: option.tableId
|
||||
}) {
|
||||
const res = await Api.$createOrder(par)
|
||||
uni.showToast({
|
||||
title:'提交成功',
|
||||
icon:'none'
|
||||
})
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack({delta:2})
|
||||
},500)
|
||||
}
|
||||
|
||||
onLoad((opt) => {
|
||||
console.log(opt);
|
||||
Object.assign(option, opt)
|
||||
if(opt){
|
||||
table.value={
|
||||
tableId:opt.tableId,
|
||||
name:opt.tableName
|
||||
}
|
||||
}
|
||||
getCart()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
})
|
||||
onShow(()=>{
|
||||
watchChooseuser()
|
||||
watchChooseTable()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fen {
|
||||
color: #FF9F2E;
|
||||
}
|
||||
|
||||
.page-gray {
|
||||
padding: 32rpx 28rpx;
|
||||
}
|
||||
|
||||
.headeimg {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
}
|
||||
|
||||
.block {
|
||||
background-color: #fff;
|
||||
padding: 32rpx 24rpx;
|
||||
border-radius: 18rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
padding: 32rpx 0 32rpx 24rpx;
|
||||
border: 1px solid #999999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods {
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1px dashed #E5E5E5;
|
||||
|
||||
.item {
|
||||
.img {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headeimg {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
background-color: #eee;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #EB4F4F;
|
||||
}
|
||||
|
||||
.opacity0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.safe-bottom {
|
||||
padding: 34rpx 28rpx;
|
||||
background-color: #fff;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
|
||||
.btn {
|
||||
padding: 0 88rpx 56rpx 88rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: #fff;
|
||||
border: 1px solid #E5E5E5;
|
||||
line-height: inherit;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.hover-class {
|
||||
background-color: #E5E5E5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user