iuu/cmgd-mini-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
建超
2026-01-10 20:23:59 +08:00
parent 1fc846fae3
commit 9e957d5dea
127 changed files with 3528 additions and 3421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
pages/config/goodsList.vue
View File

@@ -5,97 +5,9 @@
<view style="z-index: 10000;position: sticky;" :style="'top:0px'">
<view class="top-bar">
<nut-button type="primary" block plain @click="navigateTo('/pages/config/goodsAdd')">
新增商品
新增订单
</nut-button>
</view>
<nut-searchbar placeholder="请输入商品名称" clearable v-model="state.search_val" input-background="#eee"
@search="onSearch" @clear="onClear">
<template #rightout>
<nut-button type="primary" @click="onSearch">搜索</nut-button>
</template>
</nut-searchbar>
<nut-menu title-class="titleClass">
<!-- 价格排序 -->
<nut-menu-item :title="state.price_sort_name" ref="selectPriceSortRef">
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 12px;">
<view class="degree-inner">
<view class="degree-item" :class="{active: state.price_sort === item.value}"
v-for="(item,idx) in state.price_sort_params" :key="idx"
@click="selectPriceSort(item)">
<text>{{item.text}}</text>
</view>
</view>
</view>
</nut-menu-item>
<!-- 价格排序 -->
<!-- 机型选择 -->
<nut-menu-item :title="state.product_name" ref="selectProductRef">
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 0px;">
<view class="filter-types">
<view class="filter-type-inner" v-for="(type,idx) in state.type_params" :key="idx"
@click="selectType(type)" :class="{active: state.type_id == type.type_id}">
<text>{{type.name}}</text>
</view>
</view>
<view class="tabs-container">
<scroll-view :show-scrollbar="false" scroll-y class="tabs-inner" enable-flex>
<view class="tab-inner"
v-for="(item,idx) in state?.drop_down_options[state.type_id]?.children"
:key="idx" @click="selectBrand(item)"
:class="{'tab-inner-active':item.value == state.brand_id}">
<view class="line"></view>
<text>{{item.label}}</text>
</view>
</scroll-view>
<scroll-view scroll-y class="tab-pane-inner" enable-flex>
<view style="display: flex;flex-direction: column;width: 100%;padding: 10rpx;">
<view class="degree-inner">
<view class="degree-item" v-for="(item,idx) in productOptions" :key="idx"
:class="{active: state.product_ids.includes(item.value)}"
@click="selectProduct(item)">
<text>{{item.label}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="product-btns">
<view class="reset">
<nut-button plain @click="onResetProduct()" type="default">重置</nut-button>
</view>
<view class="confirm">
<nut-button block @click="onConfirmProduct()" type="primary">确认</nut-button>
</view>
</view>
</view>
</nut-menu-item>
<!-- 机型选择 -->
<!-- 成色选择 -->
<nut-menu-item :title="state.degree_name" ref="selectDegreeRef">
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 12px;">
<view class="degree-inner">
<view class="degree-item" :class="{active: state.degree_ids.includes(item.value)}"
v-for="(item,idx) in state.degree_params" :key="idx" @click="selectDegree(item)">
<text>{{item.text}}</text>
</view>
</view>
<view class="degree-btns">
<view class="reset">
<nut-button plain @click="onResetDegree()" type="default">重置</nut-button>
</view>
<view class="confirm">
<nut-button block @click="onConfirmDegree()" type="primary">确认</nut-button>
</view>
</view>
</view>
</nut-menu-item>
<!-- 成色选择 -->
</nut-menu>
</view>
<view class="goods-item" v-for="(item, index) in dataList" :key="index">

1461
pages/index/index.vue
View File

File diff suppressed because it is too large Load Diff

1427
pages/index/index.vue- Normal file
View File

File diff suppressed because it is too large Load Diff

717
pages/index/index.vue-bac Normal file
View File

@@ -0,0 +1,717 @@
<template>
<view class="page-content">
<z-paging ref="paging" :refresher-enabled="false" :auto-clean-list-when-reload="false"
:auto-scroll-to-top-when-reload="false" v-model="dataList" @query="queryList">
<view style="z-index: 10000;position: sticky;" :style="'top:0px'">
<view class="top-bar">
<nut-button type="primary" block plain @click="navigateTo('/pages/index/orderAdd')">
新增订单
</nut-button>
</view>
<!-- <nut-searchbar placeholder="请输入商品名称" clearable v-model="state.search_val" input-background="#eee"
@search="onSearch" @clear="onClear">
<template #rightout>
<nut-button type="primary" @click="onSearch">搜索</nut-button>
</template>
</nut-searchbar> -->
</view>
<view class="goods-item" v-for="(item, index) in dataList" :key="index">
<view class="goods-item-image">
<!-- @click="showGoodsImages(item)" -->
<image class="goods-item-image-img" :src="getImg(item)" @click="navigateTo('/pages/config/goodsDetail?id=' + item.goods_id)"
mode="scaleToFill">
</image>
</view>
<view class="goods-item-content">
<!-- @click="navigateTo('/pages/control/goods/edit?id=' + item.goods_id)" -->
<view class="goods-item-content-header">
<nut-tag custom-color="#1a1a1a">{{ item.degree.degree_name }}</nut-tag>
<view>{{item.goods_name}}</view>
</view>
<!-- @click="navigateTo('/pages/control/goods/edit?id=' + item.goods_id)" -->
<view class="goods-item-content-body">
<view class="goods-item-content-body-desc">
{{item.content}}
</view>
</view>
<view class="goods-item-content-footer">
<view style="font-size: 24rpx;color: red;">
<text>¥{{item.goods_price}}</text>
</view>
<view style="font-size: 24rpx;">
状态:<text>{{item.status.text}}</text>
</view>
<view class="goods-item-content-footer-btn">
<nut-button size="small" type="primary"
v-if="item.status.value == 10 || item.status.value == 20"
@click="navigateTo('/pages/config/goodsEdit?id=' + item.goods_id)">
编辑商品
</nut-button>
<nut-button size="small" type="primary" v-if="item.status.value == 40 "
@click="navigateTo('/pages/config/goodsEdit?id=' + item.goods_id)">
售后(重新上架)
</nut-button>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
computed
} from 'vue'
import {
onLoad,
onShow,
} from '@dcloudio/uni-app'
// import {
// fetchFilterParmas
// } from '@/api/goods';
import {
fetchFilterParmas,
fetchSysGoodsList
} from '@/api/goods';
import {
navigateTo,
// switchTab,
// goToOtherMiniProgram
} from '@/utils/helper';
// 显示商品图片
const showGoodsImages = (goods) => {
console.log(goods);
uni.previewImage({
// current: index, // 指定当前显示的图片索引
urls: goods?.image.map(e => {
return e.file_path
}),
});
}
const getImg = (goods) => {
const url = goods?.image?.[0]?.file_path
return url ? url + '?imageView2/1/w/200/h/200' : ''
}
// zp
const paging = ref(null);
// 商品列表
const dataList = ref([]);
// 价格排序
const selectPriceSortRef = ref(null);
// 成色选择
const selectDegreeRef = ref(null);
// 机型选择
const selectProductRef = ref(null)
const state = reactive({
type_params: [], // 产品类型
drop_down_options: [], // 产品类型下的品牌列表
o_drop_down_options: [],
// 价格排序
price_sort_params: [{
text: '默认排序',
value: ''
},
{
text: '价格升序',
value: 'ascend'
},
{
text: '价格降序',
value: 'descend'
}
],
// 成色所有选项
degree_params: [],
price_sort: '',
price_sort_name: "默认排序",
degree_ids: [],
degree_name: "成色",
product_name: "机型",
type_id: 1, // 产品类型id 默认 1 手机
type_name: '手机',
brand_id: 0, // 品牌id // 默认 0 全部
brand_name: '全部',
product_ids: [0], // 机型ids 默认 0 全部
search_val: '', // 搜索
});
// 搜索
const onSearch = () => {
console.log("搜索：", state.search_val);
paging.value.reload();
}
// 清空搜索框
const onClear = () => {
console.log("搜索：", state.search_val);
paging.value.reload();
}
// 机型重置
const onResetProduct = () => {
console.log("重置产品");
state.type_id = 1
state.type_name = '手机'
state.brand_id = 0
state.brand_name = '全部'
state.product_ids = [0]
state.product_name = '机型'
}
// 机型确定
const onConfirmProduct = () => {
console.log("当前产品类型", {
"type_id": state.type_id,
"type_name": state.type_name,
"brand_id": state.brand_id,
"brand_name": state.brand_name,
"product_ids": state.product_ids,
});
selectProductRef.value?.toggle(false);
// 4. 刷新数据
paging.value.reload();
}
// 选择机型
const selectProduct = (product) => {
if (product.value === 0) {
state.product_ids = [0]
} else {
state.product_ids = state.product_ids.filter(e => e != 0)
// 判断是否存在
const index = state.product_ids.indexOf(product.value);
if (index > -1) {
state.product_ids.splice(index, 1); // 存在则删除
if (state.product_ids.length === 0) {
state.product_ids = [0]
}
} else {
state.product_ids.push(product.value); // 新增
}
}
console.log(product);
}
const productOptions = computed(() => {
return state?.o_drop_down_options[state.type_id]?.children[state.brand_id].children
})
// 选择品牌
const selectBrand = (brand) => {
console.log(brand);
// 选中的品牌id
state.brand_id = brand.value;
state.brand_name = brand.label
// 品牌下的产品ids
state.product_ids = [0];
state.product_name = brand.label
}
// 选择type
const selectType = (type) => {
console.log(type);
// 选中产品类型id
state.type_id = type.type_id;
state.type_name = type.name;
// 选中的品牌id
state.brand_id = 0;
state.brand_name = '全部';
// 品牌下的产品ids
state.product_ids = [0];
}
// 选择价格排序
const selectPriceSort = (item) => {
if (state.price_sort !== item.value) {
state.price_sort = item.value
state.price_sort_name = item.text
} else {
state.price_sort_name = '默认排序'
state.price_sort = ''
}
selectPriceSortRef.value?.toggle(false);
// 4. 刷新数据
paging.value.reload();
};
// 选择成色
const selectDegree = (item) => {
const index = state.degree_ids.indexOf(item.value);
if (index > -1) {
state.degree_ids.splice(index, 1);
} else {
state.degree_ids.push(item.value);
}
if (state.degree_ids.length > 0) {
state.degree_name = '已选' + state.degree_ids.length.toString() + '项'
} else {
state.degree_name = '成色'
}
}
// 重置选择成色
const onResetDegree = () => {
state.degree_ids = [];
state.degree_name = '成色'
selectDegreeRef.value?.toggle(false);
// 4. 刷新数据
paging.value.reload();
}
// 确认选择成色
const onConfirmDegree = () => {
if (state.degree_ids.length > 0) {
state.degree_name = '已选' + state.degree_ids.length.toString() + '项'
} else {
state.degree_name = '成色'
}
selectDegreeRef.value?.toggle(false);
// 4. 刷新数据
paging.value.reload();
}
// 获取列表
const queryList = (pageNo, pageSize) => {
const params = {
pageSize,
page: pageNo,
price_sort: state.price_sort,
degree_ids: state.degree_ids,
type_id: state.type_id,
brand_id: state.brand_id,
product_ids: state.product_ids,
search: state.search_val,
}
console.log(params);
fetchSysGoodsList(params).then(res => {
console.log('res=>', res.list);
paging.value.complete(res.list);
}).catch(res => {
paging.value.complete(false);
});
};
const init = () => {
console.log('init111');
// 加载默认筛选项内容
fetchFilterParmas().then(res => {
console.log(res);
// 处理成色
let degree_params = res.degree_list;
state.degree_params = degree_params.reduce((it, cit) => {
it.push({
text: cit.degree_name,
value: cit.degree_id
});
return it;
}, state.degree_params) || [];
// 产品类型
state.type_params = res.type_list
// 产品下品牌列表
state.drop_down_options = res.drop_down_options
state.o_drop_down_options = res.o_drop_down_options
})
}
onShow(() => {
console.log("onshow---");
console.log('paging.value', paging.value);
if (paging.value) {
// paging.value.pageNo = 1;
paging.value.refresh();
// paging.value.refreshToPage(1)
// paging.value.reload();
}
});
onMounted(() => {
init();
})
</script>
<style scoped lang="scss">
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
--nut-menu-bar-box-shadow: none;
--nut-menu-item-content-padding: 20rpx;
--nut-menu-item-content-max-height: 900rpx;
// --nut-searchbar-input-padding:5px 0 5px 13px;
--nut-searchbar-input-height: 40px;
}
:deep(.titleClass) .nut-menu__title-text {
font-size: 30rpx;
font-weight: bold;
color: black;
}
.top-bar {
background: #fff;
// padding: 20rpx;
align-items: center;
text-align: center;
padding: 20rpx 60rpx;
// display: flex;
// justify-content: space-between;
// border-top: 1px solid #eee;
// position: sticky;
// bottom: 0;
// z-index: 999;
}
.goods-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20rpx;
background-color: #ffffff;
// border-radius: 20rpx;
margin-bottom: 20rpx;
gap: 20rpx;
.goods-item-image {
width: 180rpx;
height: 180rpx;
.goods-item-image-img {
width: 100%;
height: 100%;
}
}
.goods-item-content {
// width: 100%;
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
/* 首尾贴边，中间均分 */
// gap: 15px;
.goods-item-content-header {
display: flex;
align-items: center;
padding: 6rpx 0;
gap: 20rpx;
}
.goods-item-content-body {
padding: 6rpx 0;
.goods-item-content-body-desc {
color: #7c7c7c;
font-size: 26rpx;
/* 关键属性 */
display: -webkit-box;
/* 使用弹性盒子布局 */
-webkit-box-orient: vertical;
/* 垂直方向排列 */
-webkit-line-clamp: 2;
/* 限制显示两行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 超出时显示省略号 */
}
}
.goods-item-content-stock {
display: flex;
justify-content: space-between;
.goods-item-content-stock-desc {
font-size: 26rpx;
color: #999999;
}
.goods-item-content-status-desc {
font-size: 26rpx;
color: red;
}
}
.goods-item-content-footer {
padding: 6rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
// width: 100%;
// flex-direction: row;
.goods-item-content-footer-btn {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10rpx;
.share-btn {
border-radius: 50rpx;
border: 2rpx solid red;
font-size: 26rpx;
align-items: center;
height: 54rpx;
color: red;
display: flex;
justify-content: center;
}
}
}
}
}
.filter-types {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
overflow: auto;
gap: 10rpx;
padding: 10rpx;
// position: fixed;
// top: 0;
height: 60rpx;
// z-index: 9999;
background-color: #fff;
border-bottom: 2rpx solid gainsboro;
border-top: 2rpx solid gainsboro;
.filter-type-inner {
align-items: center;
background-color: rgba(0, 0, 0, .05);
border-radius: 16rpx;
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex: 0 0 auto;
font-size: 28rpx;
gap: 15rpx;
padding: 10rpx 20rpx;
// image {
// height: 22px;
// width: 22px;
// }
}
.filter-type-inner.active {
background-color: rgba(250, 44, 25, .1);
color: var(--nutui-color-primary);
}
}
.tabs-container {
display: flex;
.tab-pane-inner {
height: 600rpx;
}
.tabs-inner {
overflow-y: scroll;
height: 600rpx;
width: 160rpx;
background-color: #F5F5F5;
.tab-inner {
display: flex;
height: 60rpx;
padding: 10rpx;
font-size: 28rpx;
display: flex;
align-items: center;
background: #F5F5F5;
text {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
}
.tab-inner-active {
// background: #FFF;
background-color: rgba(250, 44, 25, .1);
color: var(--nutui-color-primary);
}
}
}
.degree-inner {
display: flex;
flex: 1;
flex-wrap: wrap;
// gap: 20rpx;
gap: 10rpx;
// padding: 11px;
width: 100%;
margin-bottom: 60rpx;
}
.degree-item {
align-items: center;
background-color: rgba(0, 0, 0, .05);
border-radius: 10rpx;
box-sizing: border-box;
display: flex;
flex: 0 0 auto;
font-size: 26rpx;
gap: 10rpx;
justify-content: center;
min-height: 80rpx;
width: calc(50% - 10rpx);
}
.degree-item.active {
background-color: rgba(250, 44, 25, .1);
color: var(--nutui-color-primary);
}
.product-btns {
display: flex;
width: 100%;
padding: 20rpx 0;
// border-bottom: 2rpx solid gainsboro;
// border-top: 2rpx solid gainsboro;
.reset {
flex: 1;
}
.confirm {
flex: 2;
}
}
.degree-btns {
display: flex;
width: 100%;
.reset {
flex: 1;
/* 重置按钮占 1 份 */
}
.confirm {
flex: 2;
/* 确认按钮占 2 份 */
}
}
.main-nav-container {
display: flex;
justify-content: space-between;
background-color: #fff;
padding: 20rpx;
}
.nav-button {
display: flex;
align-items: center;
width: 45%;
height: 160rpx;
border-radius: 20rpx;
overflow: hidden;
padding: 0 10rpx;
}
.phone-button {
background: linear-gradient(135deg, #6a5ae0, #8d7bfb);
color: white;
}
.parts-button {
background: linear-gradient(135deg, #ff6b6b, #ee5253);
color: white;
}
.nav-button-bg {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50%;
opacity: 0.2;
object-fit: cover;
}
.nav-button-icon {
width: 90rpx;
height: 90rpx;
margin-right: 20rpx;
// border-radius: 20rpx;
z-index: 2;
}
.nav-button-content {
z-index: 2;
display: flex;
flex-direction: column;
}
.nav-button-title {
font-size: 34rpx;
font-weight: bold;
margin-bottom: 8rpx;
}
.nav-button-desc {
font-size: 24rpx;
opacity: 0.85;
}
</style>

618
pages/index/orderAdd.vue Normal file
View File

@@ -0,0 +1,618 @@
<template>
<view class="page-content">
<view style=" padding: 10rpx;">
<view class="title">基础台费 </view>
<nut-form>
<!-- <nut-form-item>
<template v-slot:label>房间</template>
<template v-slot:default>
<view style="color: black;" @click="visibleRoomsPopup = true">
<text>{{form.room_name}}</text>
</view>
</template>
</nut-form-item> -->
<!-- 台费类型、套餐、支付状态 三者在同一行布局 -->
<view class="inline-form">
<!-- 台费类型选择 -->
<nut-form-item label-position="top">
<template v-slot:label>结算方式</template>
<template v-slot:default>
<view style="color: black;" @click="visibleFeeTypePopup = true">
<text>{{form.fee_type_name}}</text>
</view>
</template>
</nut-form-item>
<!-- 套餐选择 -->
<nut-form-item label-position="top" v-if="form.fee_type === 1 || form.fee_type === 2">
<template v-slot:label>选择团购</template>
<template v-slot:default>
<view style="color: black;" @click="visibleCombosPopup = true">
<text>{{form.fee_combo_name}}</text>
</view>
</template>
</nut-form-item>
<!-- 金额输入框 -->
<nut-form-item label-position="top" v-else>
<template v-slot:label>线下收款</template>
<template v-slot:default>
<nut-input v-model="form.fee_amount" placeholder="请输入金额" type="number" />
</template>
</nut-form-item>
<!-- 支付状态选择 -->
<nut-form-item label-position="top">
<template v-slot:label>支付状态</template>
<template v-slot:default>
<view style="color: black;" @click="openPayStatusPopup('fee')">
<text>{{form.fee_pay_status_txt}}</text>
</view>
</template>
</nut-form-item>
</view>
</nut-form>
<view class="title">超时收费 </view>
<nut-form>
<!-- 台费类型、套餐、支付状态 三者在同一行布局 -->
<view class="inline-form">
<!-- 台费类型选择 -->
<nut-form-item label-position="top">
<template v-slot:label>时长(小时)</template>
<template v-slot:default>
<nut-input v-model="form.often" placeholder="请输入小时" type="number" />
</template>
</nut-form-item>
<!-- 金额输入框 -->
<nut-form-item label-position="top">
<template v-slot:label>超时金额</template>
<template v-slot:default>
<nut-input v-model="form.over_amount" placeholder="请输入金额" type="number" />
</template>
</nut-form-item>
<!-- 支付状态选择 -->
<nut-form-item label-position="top">
<template v-slot:label>支付状态</template>
<template v-slot:default>
<view style="color: black;" @click="openPayStatusPopup('over')">
<text>{{form.over_pay_status_txt}}</text>
</view>
</template>
</nut-form-item>
</view>
</nut-form>
<view class="title">商品 </view>
<view class="top-bar">
<nut-button type="primary" plain size="small" @click="addGoods">新增商品</nut-button>
</view>
<nut-form>
<!-- 台费类型、套餐、支付状态 三者在同一行布局 -->
<view class="inline-goods-form" v-for="(item, index) in orderGoods" :key="index">
<view class="form-row">
<!-- 台费类型选择 -->
<nut-form-item label-position="top">
<template v-slot:label>商品</template>
<template v-slot:default>
<view style="color: black;" @click="visibleGoodsCascader = true;goodsIndex = index">
<text v-if="item.goods_type_name && item.goods_name">
{{ item.goods_type_name }} - {{ item.goods_name }}
</text>
<text v-else>请选择商品</text>
</view>
</template>
</nut-form-item>
<!-- 套餐选择 -->
<nut-form-item label-position="top">
<template v-slot:label>售价</template>
<template v-slot:default>
<view style="color: black;">
<text>{{item.goods_price}}</text>
</view>
</template>
</nut-form-item>
</view>
<view class="form-row">
<!-- 支付状态选择 -->
<nut-form-item label-position="top">
<template v-slot:label>支付状态</template>
<template v-slot:default>
<view style="color: black;" @click="openPayStatusPopup('goods',index)">
<text>{{item.goods_pay_status_txt}}</text>
</view>
</template>
</nut-form-item>
<!-- 套餐选择 -->
<nut-form-item label-position="top">
<template v-slot:label>操作</template>
<template v-slot:default>
<view>
<nut-button type="danger" size="mini" @click="removeGoods(index)">删除商品</nut-button>
</view>
</template>
</nut-form-item>
</view>
</view>
</nut-form>
<view class="title">订单优惠 </view>
<nut-form>
<nut-form-item>
<template v-slot:label>优惠金额</template>
<template v-slot:default>
<nut-input v-model="form.discount_amount" placeholder="请输入金额" type="number" />
</template>
</nut-form-item>
</nut-form>
<view style="align-items: center;text-align: center; padding: 20rpx 60rpx;">
<nut-button type="primary" block @click="submitForm">
保存订单
</nut-button>
</view>
</view>
<nut-cascader title="商品选择" v-model:visible="visibleGoodsCascader" v-model="cascaderGoodsValue"
@change="onGoodsChange" @pathChange="onGoodsPathChange" text-key="label" value-key="value"
children-key="children" :options="selectGoods" :title-ellipsis="false" @open="onOpenGoodsCascader"
@close="onCloseGoodsCascader"></nut-cascader>
<!-- v-model="popupPaymentStatusVal" -->
<nut-popup v-model:visible="visiblePaymentStatusPopup" position="bottom" safe-area-inset-bottom>
<nut-picker :columns="paymentStatuses" :field-names="{text:'label',value:'value'}" title="选择支付状态"
@confirm="onConfirmPaymentStatus" @cancel="visiblePaymentStatusPopup = false">
</nut-picker>
</nut-popup>
<nut-popup v-model:visible="visibleCombosPopup" position="bottom" safe-area-inset-bottom>
<nut-picker v-model="popupCombosVal" :columns="combos" :field-names="{text:'label',value:'value'}"
title="选择团购套餐" @confirm="onConfirmCombos" @cancel="visibleCombosPopup = false">
</nut-picker>
</nut-popup>
<!-- v-model="popupFeeTypeVal" -->
<nut-popup v-model:visible="visibleFeeTypePopup" position="bottom" safe-area-inset-bottom>
<nut-picker :columns="feeTypes" :field-names="{text:'label',value:'value'}" title="选择结算方式"
@confirm="onConfirmFeeType" @cancel="visibleFeeTypePopup = false">
</nut-picker>
</nut-popup>
<!-- <nut-popup v-model:visible="visibleRoomsPopup" position="bottom" safe-area-inset-bottom>
<nut-picker v-model="popupRoomsVal" :columns="rooms" :field-names="{text:'label',value:'value'}"
title="选择房间" @confirm="onConfirmRoom" @cancel="visibleRoomsPopup = false">
</nut-picker>
</nut-popup> -->
</view>
</template>
<script setup>
import {
computed,
onMounted,
reactive,
ref,
toValue
} from 'vue';
import {
fetchGoods,
} from '@/api/index';
// // 选择房间弹窗
// const visibleRoomsPopup = ref(false);
// // 选中的房间
// const popupRoomsVal = ref([])
// // 房间列表
// const rooms = [{
// value: 1,
// label: '房间 101'
// },
// {
// value: 2,
// label: '房间 102'
// },
// {
// value: 3,
// label: '房间 103'
// }
// ];
// // 选择房间
// const onConfirmRoom = (selectedValue) => {
// console.log(selectedValue);
// form.room_name = selectedValue.selectedOptions[0].label
// form.room_id = selectedValue.selectedOptions[0].value
// console.log(form);
// visibleRoomsPopup.value = false
// }
// 选择房间弹窗
const visibleFeeTypePopup = ref(false);
// 台费结算类型
// const popupFeeTypeVal = ref([])
// 台费类型选择列表
const feeTypes = [{
value: 1,
label: '美团'
},
{
value: 2,
label: '抖音'
},
{
value: 3,
label: '线下'
}
];
// 选择房间
const onConfirmFeeType = (selectedValue) => {
console.log(selectedValue);
form.fee_type_name = selectedValue.selectedOptions[0].label
form.fee_type = selectedValue.selectedOptions[0].value
console.log(form);
visibleFeeTypePopup.value = false
}
// 选择套餐弹窗
const visibleCombosPopup = ref(false);
// 选中的套餐
const popupCombosVal = ref([])
// 套餐列表
const combos = [{
value: 1,
label: '美团中包套餐'
},
{
value: 2,
label: '美团小包套餐'
},
{
value: 3,
label: '美团小包套餐'
},
];
// 选择套餐
const onConfirmCombos = (selectedValue) => {
console.log(selectedValue);
form.fee_combo_name = selectedValue.selectedOptions[0].label
form.fee_combo_id = selectedValue.selectedOptions[0].value
console.log(form);
visibleCombosPopup.value = false
}
// 支付状态弹窗
const visiblePaymentStatusPopup = ref(false);
// 选中的支付状态
const popupPaymentStatusVal = ref([])
// 支付类型
const popupPaymentTypeVal = ref('')
// 支付状态
const paymentStatuses = [{
value: 1,
label: '已付'
},
{
value: 2,
label: '未付'
},
{
value: 3,
label: '赠送'
}
];
const openPayStatusPopup = (type, index = -1) => {
popupPaymentTypeVal.value = type
goodsPayIndex.value = index // 只有type = goods 生效
visiblePaymentStatusPopup.value = true
console.log(type);
}
const onConfirmPaymentStatus = (selectedValue) => {
if (popupPaymentTypeVal.value == 'fee') {
form.fee_pay_status_txt = selectedValue.selectedOptions[0].label
form.payment_status = selectedValue.selectedOptions[0].value
}
if (popupPaymentTypeVal.value == 'over') {
form.over_pay_status_txt = selectedValue.selectedOptions[0].label
form.over_pay_status = selectedValue.selectedOptions[0].value
}
if (popupPaymentTypeVal.value == 'goods' && goodsPayIndex.value >= 0) {
console.log("处理商品支付状态", goodsPayIndex.value);
orderGoods.value[goodsPayIndex.value].goods_pay_status_txt = selectedValue.selectedOptions[0].label
orderGoods.value[goodsPayIndex.value].goods_pay_status = selectedValue.selectedOptions[0].value
}
console.log(form);
visiblePaymentStatusPopup.value = false
popupPaymentTypeVal.value = ''
goodsPayIndex.value = -1
}
// 订单商品列表
const orderGoods = ref([
// {
// goods_type_name: null,
// goods_type_id: null,
// goods_name: null,
// goods_id: null,
// goods_price: null,
// goods_pay_status: 0,
// goods_pay_status_txt: "请选择",
// cascader_val: []
// },
])
// 当前操作的商品
const goodsPayIndex = ref(0)
// 当前操作的商品
const goodsIndex = ref(0)
// 添加规则
const addGoods = () => {
console.log(orderGoods.value);
orderGoods.value.push({
goods_type_name: null,
goods_type_id: null,
goods_name: null,
goods_id: null,
goods_price: null,
goods_pay_status: 0,
goods_pay_status_txt: "请选择",
cascader_val: []
})
}
// 删除商品
const removeGoods = (index) => {
orderGoods.value.splice(index, 1)
}
// 显示商品选择
const visibleGoodsCascader = ref(false)
// 商品选中
const cascaderGoodsValue = computed(() => {
let cascader_val = [];
if (goodsIndex.value >= 0) {
return orderGoods.value[goodsIndex.value]?.cascader_val ?? []
} else {
return cascader_val;
}
});
const onGoodsChange = (...args) => {
console.log("onGoodsChange", args);
}
// 选择商品
const onGoodsPathChange = (args) => {
console.log("onGoodsPathChange", args);
console.log("goodsIndex", goodsIndex.value);
console.log("orderGoods.value[goodsIndex.value]", orderGoods.value[goodsIndex.value]);
orderGoods.value[goodsIndex.value].goods_type_name = null
orderGoods.value[goodsIndex.value].goods_type_id = null
orderGoods.value[goodsIndex.value].goods_name = null
orderGoods.value[goodsIndex.value].goods_id = null
orderGoods.value[goodsIndex.value].goods_price = null
if (args.length >= 1 && args[0] !== null) {
orderGoods.value[goodsIndex.value].goods_type_name = args[0].text
orderGoods.value[goodsIndex.value].goods_type_id = args[0].value
}
if (args.length >= 2 && args[1] !== null) {
orderGoods.value[goodsIndex.value].goods_name = args[1].text
orderGoods.value[goodsIndex.value].goods_id = args[1].value
orderGoods.value[goodsIndex.value].goods_price = args[1].goods_price
}
console.log("orderGoods.value[goodsIndex.value]", orderGoods.value[goodsIndex.value]);
}
const onCloseGoodsCascader = () => {
console.log("onCloseGoodsCascader");
console.log("goodsIndex.value", goodsIndex.value);
if (orderGoods.value[goodsIndex.value].goods_type_id && orderGoods.value[goodsIndex.value].goods_id) {
orderGoods.value[goodsIndex.value].cascader_val = [
orderGoods.value[goodsIndex.value].goods_type_id,
orderGoods.value[goodsIndex.value].goods_id
]
}
goodsIndex.value = 0
console.log("goodsIndex.value", goodsIndex.value);
}
const onOpenGoodsCascader = () => {
console.log("onOpenGoodsCascader");
console.log("goodsIndex.value", goodsIndex.value);
}
const form = reactive({
// room_id: 0,
// room_name: '选择房间',
fee_type: 0,
fee_type_name: '选择方式',
fee_combo_id: 0, // 套餐费用ID
fee_combo_name: '请选择', // 套餐费用名称
fee_amount: null, // 线下支付费用
fee_pay_status: 0, // 费用支付状态
fee_pay_status_txt: '请选择', // 费用支付状态
over_often: null, // 超时小时
over_amount: null, // 超时金额
over_pay_status: 0, // 超时支付状态
over_pay_status_txt: "请选择", // 超时支付状态
discount_amount: null, // 优惠金额
})
const selectGoods = ref([])
onMounted(() => {
fetchGoods().then(res => {
selectGoods.value = res;
})
})
// 提交表单
const submitForm = () => {
// const formData = {
// room: room.value,
// feeType: feeType.value,
// selectedPackage: selectedPackage.value,
// amount: amount.value,
// paymentStatus: paymentStatus.value
// };
console.log('提交的订单数据:', orderGoods.value);
};
</script>
<style lang="scss" scoped>
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
}
.title {
padding: 0 20rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
font-size: 28rpx;
// font-weight: 400;
color: #909ca4;
}
.inline-form {
display: flex;
justify-content: space-between;
gap: 10rpx;
/* 在元素之间添加间距 */
}
.top-bar {
background: #fff;
padding: 20rpx;
display: flex;
justify-content: space-between;
border-top: 1px solid #eee;
// position: sticky;
// bottom: 0;
// z-index: 999;
}
/* 每个商品项容器 */
.inline-goods-form {
// box-sizing: border-box;
}
/* 行容器 */
.form-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20rpx;
margin-bottom: 20rpx;
}
// .inline-goods-form {
// display: flex;
// justify-content: space-between;
// gap: 10rpx;
// /* 在元素之间添加间距 */
// }
// .inline-goods-form {
// display: flex;
// flex-wrap: nowrap;
// /* 防止换行 */
// align-items: flex-start;
// gap: 10rpx;
// margin-bottom: 20rpx;
// padding: 20rpx;
// background-color: #f8f9fa;
// border-radius: 16rpx;
// box-sizing: border-box;
// overflow: hidden;
// /* 防止溢出 */
// }
// /* 关键：为每个表单项设置适当的flex属性 */
// .inline-goods-form .nut-form-item {
// flex: 1; /* 平均分配空间 */
// min-width: 0; /* 重要：允许内容收缩 */
// max-width: 100%; /* 防止溢出 */
// word-break: break-word; /* 文本换行 */
// overflow: hidden; /* 隐藏溢出内容 */
// }
// /* 确保内部元素不会撑开 */
// .inline-goods-form .nut-form-item__body {
// width: 100%;
// overflow: hidden;
// }
// /* 调整按钮大小 */
// .inline-goods-form .nut-button {
// max-width: 100%;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
// .inline-goods-form {
// display: flex;
// flex-wrap: wrap; /* 确保元素在不足的宽度时换行 */
// justify-content: space-between;
// gap: 10rpx; /* 设置每个表单项之间的间距 */
// width: 100%;
// // box-sizing: border-box;
// }
// .inline-goods-form-item-50 {
// flex: 0 0 50% !important; /* 第一个表单项占 50% */
// }
// .inline-goods-form-item-25 {
// flex: 0 0 25% !important; /* 其他两个表单项各占 25% */
// }
// .inline-item {
// flex: 1;
// display: flex;
// flex-direction: column;
// }
</style>