czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
YeMingfei666
2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
pageReserveSeat/index/components/add-rule-desc.vue Normal file
View File

@@ -0,0 +1,127 @@
<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>
</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="close">
<view class="color-999">取消</view>
</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() {
type='add'
$item={}
Object.assign(form, {
...$form
})
}
const model = ref(null)
let type='add'
let $item={}
function open(item) {
if(item!==undefined){
form.remark=item.data||''
type='edit'
$item=item
}
model.value.open()
}
function close() {
model.value.close()
}
const emits = defineEmits(['confirm'])
function confirm() {
const {
remark
} = form
if (remark.replace(/\s*/g,'') === '') {
return uni.showToast({
title: '请输入规则内容',
icon: 'none'
})
}
emits('confirm', {...$item,data:remark,type})
close()
}
defineExpose({
open,
close
})
</script>
<style lang="scss">
</style>

189
pageReserveSeat/index/components/add-unpredictable-date.vue Normal file
View File

@@ -0,0 +1,189 @@
<template>
<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
<template #desc>
<view class="u-p-30 u-text-left">
<view>
<view>开始日期</view>
<view class="u-m-t-24 u-flex border">
<image src="/pageReserveSeat/static/images/icon-calender.svg" class="icon-default-size u-m-r-32"
mode="">
</image>
<view class="u-flex u-flex-1" @tap="startDateToggle">
<view class="color-666" v-if="form.start===''">请选择开始日期</view>
<view v-else>
<uni-dateformat format="yyyy-MM-dd" :date="form.start"></uni-dateformat>
</view>
</view>
</view>
</view>
<view class="u-m-t-32">
<view>结束日期</view>
<view class="u-m-t-24 u-flex border">
<image src="/pageReserveSeat/static/images/icon-calender.svg" class="icon-default-size u-m-r-32"
mode="">
</image>
<view class="u-flex-1 u-flex" @tap="endDateToggle">
<view class="color-666" v-if="form.end===''">请选择结束日期</view>
<view v-else>
<uni-dateformat format="yyyy-MM-dd" :date="form.end"></uni-dateformat>
</view>
</view>
</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="close">取消</my-button>
</view>
</view>
</template>
</my-model>
<!-- 开始时间 -->
<my-date-pickerview @confirm="startDateConfirm" :selTime="form.start"
:isArea="false" mode="date" ref="startDatePicker"></my-date-pickerview>
<!-- 结束时间 -->
<my-date-pickerview @confirm="endDateConfirm" :selTime="form.end"
:isArea="false" mode="date" ref="endDatePicker"></my-date-pickerview>
</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 myDatePickerview from '@/components/my-components/my-date-pickerview'
const props = defineProps({
title: {
type: String,
default: ''
}
})
const startDatePicker=ref(null)
const endDatePicker=ref(null)
function startDateToggle() {
startDatePicker.value.toggle()
}
function endDateToggle() {
endDatePicker.value.toggle()
}
function startDateConfirm(e) {
form.start=e
}
function endDateConfirm(e) {
form.end=e
}
function changeCauses(item) {
let prve = form.remark.length ? ',' : ''
form.remark += prve + item.name
}
function setForm(key, val) {
form[key] = val
}
const $form = {
start: '',
end: ''
}
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 {
start,end
} = form
if(start===''){
return uni.showToast({
icon:'none',
title:'请选择开始日期'
})
}
if(end===''){
return uni.showToast({
icon:'none',
title:'请选择结束日期'
})
}
close()
emits('confirm',{start,end})
}
defineExpose({
open,
close
})
</script>
<style lang="scss">
.border {
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 22rpx;
}
.lh34 {
line-height: 34rpx;
}
.hover-class {
background-color: #E5E5E5;
}
.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>

476
pageReserveSeat/index/components/function-settings.vue Normal file
View File

@@ -0,0 +1,476 @@
<template>
<view>
<view class="bg-fff u-flex u-row-between default-box-padding border-r-12 u-flex">
<view>开启预约</view>
<my-switch v-model="form.openYuyue"></my-switch>
</view>
<view class="bg-fff u-flex u-m-t-32 u-row-between default-box-padding border-r-12 u-flex">
<view>自动通过预约</view>
<my-switch v-model="form.autoPass"></my-switch>
</view>
<view class="bg-fff u-m-t-32 default-box-padding border-r-12">
<view class=" u-flex u-row-between ">
<view>可预约日期范围</view>
<view class="color-main u-flex" @tap="refTimeOpen">
<view>{{dateArea.selItem.name}}</view>
<view class="u-flex u-m-l-12">
<uni-icons type="right" :color="color.ColorMain" size="16"></uni-icons>
</view>
</view>
</view>
<view class="u-m-t-12" v-if="dateArea.selItem.name==='自定义'">
<uni-easyinput :inputBorder="false" padding-none v-model="dateArea.days"
placeholder="请输入天数"></uni-easyinput>
</view>
</view>
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 ">
<view class="u-flex u-row-between">
<view>每周不可预约时间</view>
<my-switch v-model="form.openWeeks"></my-switch>
</view>
<view class="u-flex weeks u-flex-wrap u-m-t-32" v-if="form.openWeeks">
<view class="item" @tap="changeWeeksChecked(item)" :class="{active:item.checked}"
v-for="(item,index) in weeks.list" :key="index">
{{item.name}}
</view>
</view>
</view>
<view class="bg-fff u-flex u-m-t-32 u-row-between default-box-padding border-r-12 u-flex">
<view>当天不可预约</view>
<my-switch v-model="form.autoPass"></my-switch>
</view>
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 ">
<view class="u-flex u-row-between">
<view>不可预约日期</view>
<my-switch v-model="form.openDisabledTimes"></my-switch>
</view>
<template v-if="form.openDisabledTimes">
<view class="u-flex u-m-t-38 border-bottom u-p-b-24" v-for="(item,index) in form.unpredictableDates"
:key="index">
<uni-icons @tap="delUnpredictableDate(index)" type="minus-filled" size="20"
:color="color.ColorRed"></uni-icons>
<view class="u-m-l-24">
<uni-dateformat format="yyyy-MM-dd" :date="item.start"></uni-dateformat>
<text class="u-p-l-10 u-p-r-10">至</text>
<uni-dateformat format="yyyy-MM-dd" :date="item.end"></uni-dateformat>
</view>
</view>
<view class="u-flex u-m-t-24" @tap="refNoUseDateOpen">
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
<view class="u-m-l-24">添加日期</view>
</view>
</template>
</view>
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 ">
<view class="u-flex u-row-between">
<view>可选其他需求</view>
</view>
<view class="u-m-t-38 u-flex u-flex-wrap u-col-top otherRequirements">
<view class="item u-flex u-row-center u-relative" v-for="(item,index) in form.otherRequirements"
:key="index">
<text>{{item}}</text>
<view class="u-absolute close" @tap="delOtherRequirement(index)">
<uni-icons type="clear" color="#999" size="16"></uni-icons>
</view>
</view>
<view class="add-btn ">
<template v-if="form.otherRequirementsIsEdit">
<view class="u-flex h-100 u-p-l-20 u-p-r-20 u-col-center">
<uni-easyinput @blur="otherRequirementsIsBlur" @confirm="otherRequirementsIsConfirm"
:focus="form.otherRequirementsIsEdit" :inputBorder="false" padding-none
placeholder=" "></uni-easyinput>
</view>
</template>
<template v-else>
<view class="u-flex h-100 u-col-center u-row-center" @tap="toggleOtherRequirementsIsEdit">
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
<view class="u-m-l-24 color-main">添加</view>
</view>
</template>
</view>
</view>
</view>
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 ">
<view class="u-flex u-row-between">
<view>规则说明</view>
</view>
<view class="u-flex u-m-t-38 border-bottom u-p-b-24 u-col-center u-row-between"
@tap="rulesDescsEdit(item,index)"
v-for="(item,index) in form.rulesDescs"
:key="index">
<view class="u-flex">
<view class="u-flex" @tap.stop="delRulesDescs(index)" >
<uni-icons type="minus-filled" size="20"
:color="color.ColorRed"></uni-icons>
</view>
<view class="u-line-1 u-p-l-30" style="width:518rpx;">
{{item}}
</view>
</view>
<view class="u-flex">
<uni-icons type="right" color="#999" size="16"></uni-icons>
</view>
</view>
<view class="u-flex u-m-t-24" @tap="refRuleDescOpen">
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
<view class="u-m-l-24">添加</view>
</view>
</view>
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 ">
<view class="u-flex u-row-between">
<view>初始设置</view>
</view>
<view class="u-flex u-p-24 u-m-t-26 tips">
<view class="u-flex">
<uni-icons type="info-filled" color="#FF9F2E" size="20"></uni-icons>
</view>
<view class="u-m-l-16 u-flex-1">
设置定金后，除用户到店核销或商家取消预约，其他
情况定金不退。
</view>
</view>
<view class="u-flex u-flex-wrap initSetups">
<view class="item"
v-for="(item,index) in form.initSetups"
@tap="changeInitSetupsActive(index)"
:class="{active:form.initSetupsActive==index}"
:key="index">
1-2人
</view>
<view class="u-flex item add-btn h-100 u-col-center u-row-center" @tap="toAddYuyueTime">
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
<view class="u-m-l-24 color-main">添加</view>
</view>
</view>
<view class="bg-gray default-box-padding u-m-t-32">
<view class="u-flex ">
<view class="u-flex-1">时间</view>
<view class="u-flex-1">可预约数</view>
<view class="u-flex-1">定金设置(元)</view>
</view>
<view class="u-m-t-24">
<view class="u-flex u-font-24 color-666 u-row-between u-m-b-16" v-for="(item,index) in 2" :key="index">
<view class="u-flex-1">17:00-21:00</view>
<view class="u-flex-1">100</view>
<view class="u-flex-1">0.00</view>
</view>
</view>
</view>
<view class="u-flex u-m-t-24 u-row-right">
<my-button shape="circle" width="140" height="56" type="cancel"><view class="color-999">删除</view></my-button>
<view class="u-m-l-20">
<my-button shape="circle" width="140" height="56" type="primary">编辑</my-button>
</view>
</view>
</view>
<view class="bg-fff u-m-t-32 default-box-padding border-r-12 " @tap="toAddSpeYuyueTime">
<view class="u-flex u-row-between" >
<view>特殊日期设置</view>
</view>
<view class="u-flex u-m-t-24" @tap="refRuleDescOpen">
<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
<view class="u-m-l-24">添加</view>
</view>
</view>
<view class="" style="height: 200rpx;">
</view>
</view>
<view class="u-fix bottom">
<my-button shape="circle" type="primary" @tap="save">保存</my-button>
</view>
<!-- 可预约日期范围选择 -->
<my-pickerview :list="dateArea.list" :defaultIndex="dateArea.active" rangeKey="name" ref="refTime"
:showTitle="false" @confirm="refTimeConfirm"></my-pickerview>
<!-- 添加不可预约日期 -->
<add-unpredictable-date @confirm="refNoUseDateConfirm" title="添加不可预约日期" ref="refNoUseDate"></add-unpredictable-date>
<!-- 添加编辑规则说明 -->
<add-rule-desc title="规则说明" @confirm="refRuleDescConfirm" ref="refRuleDesc"></add-rule-desc>
</template>
<script setup>
import {
reactive,
ref
} from 'vue';
import myButton from '@/components/my-components/my-button'
import color from '@/commons/color.js'
import mySwitch from '@/components/my-components/my-switch'
import myPickerview from '@/components/my-components/my-pickerview'
import addUnpredictableDate from './add-unpredictable-date'
import addRuleDesc from './add-rule-desc'
import go from '@/commons/utils/go.js'
import {
$weeks
} from '@/commons/week.js'
function toAddYuyueTime(){
go.to('PAGES_RESERVE_SEAT_ADD_APPOINT_TIME')
}
function toAddSpeYuyueTime(){
go.to('PAGES_RESERVE_SEAT_ADD_SPE_APPOINT_TIME')
}
function delUnpredictableDate(index) {
uni.showModal({
title: '提示',
content: '确认删除此时间点',
success: function(res) {
if (res.confirm) {
form.unpredictableDates.splice(index, 1)
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
const refNoUseDate = ref(null)
function refNoUseDateOpen() {
refNoUseDate.value.open()
}
function refNoUseDateConfirm(e) {
console.log(e);
form.unpredictableDates.push(e)
}
const weeks = reactive({
list: $weeks.map(v => {
return {
name: v,
checked: false
}
})
})
function changeWeeksChecked(item) {
item.checked = !item.checked
}
const unpredictableDate = {
start: '',
end: ''
}
const form = reactive({
openYuyue: true,
autoPass: false,
openWeeks: false,
openDisabledTimes: false,
unpredictableDates: [],
otherRequirements: [],
rulesDescs:['1.支付定金订座成功后，不可取消；'],
otherRequirementsIsEdit: false,
initSetups:[1,2,3,4],
initSetupsActive:0
})
function changeInitSetupsActive(index){
form.initSetupsActive=index
}
//添加规则说明弹窗
const refRuleDesc=ref(null)
function refRuleDescOpen(){
refRuleDesc.value.open()
}
function refRuleDescConfirm(e){
if(e.type==='add'){
form.rulesDescs.push(e.data)
}else{
form.rulesDescs[e.index]=e.data
}
}
function rulesDescsEdit(item,index){
refRuleDesc.value.open({data:item,index})
}
//删除规则说明
function delRulesDescs(index){
form.rulesDescs.splice(index,1)
}
function delOtherRequirement(index) {
form.otherRequirements.splice(index, 1)
}
function toggleOtherRequirementsIsEdit() {
form.otherRequirementsIsEdit = !form.otherRequirementsIsEdit
}
function otherRequirementsIsBlur(e) {
form.otherRequirementsIsEdit = false
const val = e.detail.value.replace(/\s*/g, '')
if (val !== '') {
form.otherRequirements.push(val)
}
}
function otherRequirementsIsConfirm(e) {
console.log(e);
form.otherRequirementsIsEdit = false
}
const dateAreaList = [{
name: '7天内',
value: 0
},
{
name: '15天内',
value: 1
},
{
name: '30天内',
value: 2
},
{
name: '自定义',
value: 3
}
]
const dateArea = reactive({
list: dateAreaList,
active: [1],
selItem: dateAreaList[1],
days: 100
})
const refTime = ref(null)
function refTimeOpen() {
refTime.value.open()
}
function refTimeConfirm(e) {
dateArea.selItem = e[0]
console.log(dateArea.selItem);
}
function save() {
}
</script>
<style lang="scss">
.h-100 {
height: 100%;
}
.initSetups{
.item{
padding: 8rpx 48rpx;
border-radius: 8rpx;
margin-right: 32rpx;
margin-top: 24rpx;
border: 1px solid transparent;
background: #F7F7FA;
color: #666;
}
.active{
color: $my-main-color;
background: #E6F0FF;
border-color: $my-main-color;
}
.add-btn{
background-color: #fff;
border-color: $my-main-color;
color: $my-main-color;
padding: 8rpx 24rpx;
}
}
.otherRequirements {
.item {
padding: 10rpx 60rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 1px solid #E5E5E5;
margin-right: 24rpx;
margin-bottom: 24rpx;
word-break: break-all;
}
.close {
right: -8px;
top: -8px;
}
.add-btn {
width: 180rpx;
height: 60rpx;
overflow: hidden;
box-sizing: border-box;
// padding: 10rpx 60rpx;
border: 1px solid $my-main-color;
border-radius: 8rpx;
}
}
.bottom {
bottom: calc(env(safe-area-inset-bottom) + 32rpx);
left: 110rpx;
right: 110rpx;
}
.weeks {
.item {
padding: 10rpx 62rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 1px solid #E5E5E5;
color: #333;
margin-right: 38rpx;
margin-bottom: 24rpx;
transition: all .2s ease;
}
.active {
background-color: #E6F0FF;
color: $my-main-color;
border-color: $my-main-color;
}
.item:nth-of-type(3n) {
margin-right: 0;
}
}
.tips{
background: #FCF2E6;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 1px solid #FF9F2E;
color: #FF9F2E;
font-size: 24rpx;
}
</style>

168
pageReserveSeat/index/components/list-item.vue Normal file
View File

@@ -0,0 +1,168 @@
<template>
<view>
<view class="font-bold color-333">2024-07-24 14:23:09</view>
<view class="item bg-fff border-r-12 u-m-t-20">
<view class="u-flex u-text-left border-bottom u-p-b-30">
<view class="">手动出库</view>
<view class="u-m-l-10 u-m-r-10">|</view>
<view class="">东风</view>
</view>
<view class="u-flex u-text-left u-row-left u-m-t-30">
<view class="name">名称</view>
<view class="category u-flex u-m-l-10">
<view class="tag">分类</view>
</view>
<view class="id color-999 u-font-24 bg-gray u-m-l-10">
ID:1234
</view>
</view>
<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between">
<view class="u-text-right">
<view class="u-flex">
<view class="title-min-width">使用量</view>
<text class="u-m-l-10 color-red">12</text>
</view>
<view class="u-m-t-10 u-flex">
<view class="title-min-width">成本</view>
<text class="u-m-l-10">1.00元</text>
</view>
<!-- <view class="u-m-t-10 u-relative">
<text>库存</text>
<text class="u-m-l-10">2</text>
<view class="u-absolute u-flex addNumber" >
<uni-icons type="arrow-right" :color="color.ColorMain" size="16"></uni-icons>
<text class="color-main u-m-l-10">3</text>
</view>
</view> -->
<view class="u-m-t-10 u-flex">
<view class="title-min-width">剩余库存</view>
<text class="u-m-l-10 color-main">2</text>
</view>
</view>
<view class="u-flex-1 u-flex u-row-right">
<view>
<!-- <view class="color-main font-bold">+22</view> -->
<!-- <view class="u-m-t-10">剩余库存</view> -->
</view>
</view>
</view>
<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between" v-if="state.showRemark">
<view class="u-flex u-text-right">
<view class="title-min-width">出库备注</view>
<text class="u-m-l-10 color-999">2</text>
</view>
</view>
<view class="u-flex u-m-t-24 u-row-center" >
<view class="u-flex" @tap="toggleRemark">
<view class="u-m-r-10 color-666">手动出库明细</view>
<view class="icon-down tranistion-1" :class="{'icon-up':state.showRemark}">
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
</view>
<view class="u-flex u-row-right u-m-t-20">
<view class="u-flex u-m-r-30">
<my-button shape="circle" height="70" type="default" @tap="retract">
撤回操作
</my-button>
</view>
<!-- <view class="u-flex">
<my-button shape="circle" height="70" plain type="primary" @tap="more">更多操作</my-button>
</view> -->
</view>
</view>
</view>
</template>
<script setup>
import myButton from '@/components/my-components/my-button';
import go from '@/commons/utils/go.js'
import color from '@/commons/color.js'
import {
reactive
} from 'vue';
function retract() {
console.log('retract');
uni.showModal({
title: '提示',
content: '确定撤回此该出库?撤回后，将恢复改动前的数量',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
const props = defineProps({
index: {
type: Number
},
data: {
type: Object,
default: () => {
return {}
}
}
})
const emits = defineEmits(['more'])
function more() {
emits('more', props.index)
}
let state = reactive({
showRemark:false
})
function toggleRemark(){
state.showRemark=!state.showRemark
}
</script>
<style lang="scss">
.item {
padding: 32rpx 32rpx 28rpx 28rpx;
.title-min-width {
min-width: 132rpx;
}
.tag {
color: $my-main-color;
background-color: rgb(234, 244, 255);
border-radius: 8rpx;
padding: 2rpx 10rpx;
font-size: 24rpx;
}
.id {
padding: 2rpx 10rpx;
border-radius: 8rpx;
}
.info {}
}
.addNumber {
position: absolute;
left: 100%;
top: 50%;
padding-left: 20rpx;
transform: translateY(-50%);
}
.icon-down {
transform: rotate(90deg);
}
.icon-up{
transform: rotate(-90deg);
}
</style>