|
|
@@ -0,0 +1,526 @@
|
|
|
+<template>
|
|
|
+ <view class="page-container">
|
|
|
+ <u-navbar title="新建团餐" :autoBack="true" :placeholder="true"></u-navbar>
|
|
|
+
|
|
|
+ <view class="form-card">
|
|
|
+ <view class="section-title">基础信息</view>
|
|
|
+ <u-form :model="form" ref="uForm" :rules="rules"
|
|
|
+ labelPosition="left" labelWidth="auto"
|
|
|
+ :error-type="['toast', 'border-bottom']"
|
|
|
+ >
|
|
|
+ <u-form-item prop="category" label="商品分类" required borderBottom @click="show = true">
|
|
|
+ <u-input v-model="form.categoryName" class="form-input" disabled placeholder="去设置" height="41" inputAlign="right"></u-input>
|
|
|
+ <u-icon slot="right" name="arrow-right" color="#C7C6CA"></u-icon>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item prop="name" label="商品名称" required borderBottom>
|
|
|
+ <u-input v-model="form.name" placeholder="请输入商品名称" height="41" inputAlign="right"></u-input>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item prop="specialCategoryId" label="特色分类" required borderBottom @click="showSpecial = true">
|
|
|
+ <u-input v-model="form.specialCategoryName" class="form-input" disabled placeholder="去设置" height="41" inputAlign="right"></u-input>
|
|
|
+ <u-icon slot="right" name="arrow-right" color="#C7C6CA"></u-icon>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item prop="productImage" label="商品封面图" required labelPosition="top">
|
|
|
+ <view class="upload-content">
|
|
|
+ <view class="upload-tip">支持jpg、png格式，建议尺寸为750px*750px，上传1-4张</view>
|
|
|
+ <u-upload
|
|
|
+ :action="uploadAction"
|
|
|
+ :file-list="fileList.cover"
|
|
|
+ :form-data="uploadFormData"
|
|
|
+ :max-count="4"
|
|
|
+ :multiple="true"
|
|
|
+ width="140"
|
|
|
+ height="140"
|
|
|
+ preview-full-image
|
|
|
+ @on-success="onCoverSuccess"
|
|
|
+ @on-remove="onCoverRemove"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item prop="detailImages" label="商品详情图" required borderBottom labelPosition="top">
|
|
|
+ <view class="upload-content">
|
|
|
+ <view class="upload-tip">支持jpg、png格式，最多20张</view>
|
|
|
+ <u-upload
|
|
|
+ :action="uploadAction"
|
|
|
+ :file-list="fileList.detail"
|
|
|
+ :form-data="uploadFormData"
|
|
|
+ :max-count="20"
|
|
|
+ :multiple="true"
|
|
|
+ width="140"
|
|
|
+ height="140"
|
|
|
+ preview-full-image
|
|
|
+ @on-success="onDetailSuccess"
|
|
|
+ @on-remove="onDetailRemove"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item prop="price" label="团餐价" required borderBottom>
|
|
|
+ <u-input type="digit" height="41" :clearable="false"
|
|
|
+ inputAlign="right"
|
|
|
+ placeholder="请输入团餐价"
|
|
|
+ v-model.number="form.price"
|
|
|
+ @input="onInput($event, 'price')"
|
|
|
+ ></u-input>
|
|
|
+ <text slot="right" class="input-suffix">元</text>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item prop="sellingPrice" label="售价" required :borderBottom="true">
|
|
|
+ <u-input type="digit" height="41" :clearable="false"
|
|
|
+ inputAlign="right" placeholder="请输入商品售价"
|
|
|
+ v-model.number="form.sellingPrice"
|
|
|
+ @input="onInput($event, 'sellingPrice')"
|
|
|
+ ></u-input>
|
|
|
+ <text slot="right" class="input-suffix">元</text>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item prop="dailyStock" label="库存" required :borderBottom="true">
|
|
|
+ <u-input type="number" height="41" :clearable="false"
|
|
|
+ inputAlign="right" placeholder="请输入每日库存"
|
|
|
+ v-model="form.dailyStock"
|
|
|
+ ></u-input>
|
|
|
+ <text slot="right" class="input-suffix">份</text>
|
|
|
+ </u-form-item>
|
|
|
+ <view class="tips">每日库存最大量的设置，当天售完后关闭该团餐</view>
|
|
|
+ </u-form>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="footer-bar">
|
|
|
+ <u-button type="primary" @click="goNextStep">下一步</u-button>
|
|
|
+ </view>
|
|
|
+ <!-- 商品分类选择 -->
|
|
|
+ <u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
|
|
|
+ <!-- 特色分类 -->
|
|
|
+ <u-action-sheet :list="categoryList" v-model="showSpecial" @click="specialCategoryCallback"></u-action-sheet>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Upload from '@/components/upload/index.vue';
|
|
|
+import configService from '@/common/service/config.service';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Upload,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ showSpecial: false,
|
|
|
+ uploadAction: configService.apiUrl + '/sys/common/upload',
|
|
|
+ imageHttp: configService.apiUrl + '/',
|
|
|
+ uploadFormData: { biz: 'temp' },
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ category: '',
|
|
|
+ categoryName: '',
|
|
|
+ specialCategoryId: '',
|
|
|
+ specialCategoryName: '',
|
|
|
+ productImage: '',
|
|
|
+ detailImages: '',
|
|
|
+ price: '',
|
|
|
+ sellingPrice: '',
|
|
|
+ dailyStock:null,
|
|
|
+ saleDays:''
|
|
|
+ },
|
|
|
+ categoryList:[],
|
|
|
+ query: {},
|
|
|
+ fileList: {
|
|
|
+ cover: [],
|
|
|
+ detail: [],
|
|
|
+ },
|
|
|
+ actionSheetList: [
|
|
|
+ {
|
|
|
+ text: '早餐',
|
|
|
+ value: '1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '午餐',
|
|
|
+ value: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '晚餐',
|
|
|
+ value: '3'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入名称',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ category: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择商品分类',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ specialCategoryId: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择特色分类',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ price: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ type: 'number',
|
|
|
+ message: '请输入团餐价格',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ asyncValidator: (rule, value, callback) => {
|
|
|
+ if (this.form.sellingPrice && value > this.form.sellingPrice) {
|
|
|
+ callback(new Error('团餐价格不能大于商品售价'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ sellingPrice: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ type: 'number',
|
|
|
+ message: '请输入商品售价',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ asyncValidator: (rule, value, callback) => {
|
|
|
+ if (this.form.price && value < this.form.price) {
|
|
|
+ callback(new Error('商品售价不能小于团餐价格'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ productImage: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请上传商品封面图',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ detailImages: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请上传商品详情图片',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dailyStock:[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ type: 'number',
|
|
|
+ message: '请填写库存',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async onLoad(query) {
|
|
|
+
|
|
|
+ if (query.id) {
|
|
|
+ this.query = query;
|
|
|
+ await this.getData();
|
|
|
+ }
|
|
|
+ // 清除
|
|
|
+ uni.removeStorageSync('gm_goods');
|
|
|
+ // 获取餐品分类
|
|
|
+ this.getClassData();
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getCategoryList()
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onCoverSuccess(res, index, lists) {
|
|
|
+ this.fileList.cover = lists;
|
|
|
+ this.processImageList(lists, 'productImage');
|
|
|
+ },
|
|
|
+ onCoverRemove(index, lists) {
|
|
|
+ this.fileList.cover = lists;
|
|
|
+ this.processImageList(lists, 'productImage');
|
|
|
+ },
|
|
|
+ onDetailSuccess(res, index, lists) {
|
|
|
+ this.fileList.detail = lists;
|
|
|
+ this.processImageList(lists, 'detailImages');
|
|
|
+ },
|
|
|
+ onDetailRemove(index, lists) {
|
|
|
+ this.fileList.detail = lists;
|
|
|
+ this.processImageList(lists, 'detailImages');
|
|
|
+ },
|
|
|
+ processImageList(lists, formKey) {
|
|
|
+ const urls = lists.map(item => {
|
|
|
+ if (item.response && item.response.message) {
|
|
|
+ return this.imageHttp + item.response.message;
|
|
|
+ }
|
|
|
+ if (item.url) {
|
|
|
+ return item.url;
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+ }).filter(Boolean);
|
|
|
+ this.form[formKey] = urls.join(',');
|
|
|
+ console.log(this.form)
|
|
|
+ },
|
|
|
+ //获取特色分类
|
|
|
+ getCategoryList(){
|
|
|
+ this.$http.get('/groupmeal/gmSpecialCategory/listAll').then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.data.code === 200 && res.data.result) {
|
|
|
+ this.categoryList = res.data.result.map(item => {
|
|
|
+ return {
|
|
|
+ text: item.categoryName,
|
|
|
+ value: item.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 编辑数据
|
|
|
+ getData() {
|
|
|
+ this.$http.get('/groupmeal/gmCustomerPackage/queryById', { params: { id: this.query.id } }).then(res => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ let data = res.data.result;
|
|
|
+ // 查找商品分类名称
|
|
|
+ const categoryItem = this.actionSheetList.find(item => item.value == data.category);
|
|
|
+ // 查找特色分类名称
|
|
|
+ const specialCategoryItem = this.categoryList.find(item => item.value == data.specialCategoryId);
|
|
|
+ console.log(specialCategoryItem)
|
|
|
+ this.form = {
|
|
|
+ ...data,
|
|
|
+ categoryName: categoryItem ? categoryItem.text : '',
|
|
|
+ specialCategoryId: data.specialCategoryId+'',
|
|
|
+ specialCategoryName: specialCategoryItem ? specialCategoryItem.text : ''
|
|
|
+ };
|
|
|
+ this.fileList = {
|
|
|
+ cover: data.productImage.split(',').map(item => {
|
|
|
+ return {
|
|
|
+ url: item
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ detail: data.detailImages.split(',').map(item => {
|
|
|
+ return {
|
|
|
+ url: item
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 餐品分类
|
|
|
+ getClassData() {
|
|
|
+ this.$http.get('/groupmeal/gmMerchantPackage/getGroupMealCategory', {}).then(res => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.actionSheetList = res.data.result.map(item => {
|
|
|
+ return {
|
|
|
+ text: item.name,
|
|
|
+ value: item.code
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 商品分类选择回调
|
|
|
+ actionSheetCallback(e) {
|
|
|
+ this.form.category = e.value;
|
|
|
+ this.form.categoryName = e.text;
|
|
|
+ },
|
|
|
+ // 特色分类选择回调
|
|
|
+ specialCategoryCallback(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.form.specialCategoryId = e.value;
|
|
|
+ this.form.specialCategoryName = e.text;
|
|
|
+ },
|
|
|
+ // 价格数值处理
|
|
|
+ onInput(value, key) {
|
|
|
+ // 过滤所有非数字和非小数点的字符
|
|
|
+ let filtered = value.replace(/[^\d.]/g, '');
|
|
|
+
|
|
|
+ // 处理多个小数点（只保留第一个）
|
|
|
+ filtered = filtered.replace(/^\./g, ''); // 移除开头的小数点（避免 ".123" 情况）
|
|
|
+ filtered = filtered.replace(/\.{2,}/g, '.'); // 多个小数点只保留第一个
|
|
|
+
|
|
|
+ // 分割整数和小数部分，限制小数最多两位
|
|
|
+ const parts = filtered.split('.');
|
|
|
+ if (parts.length > 1) {
|
|
|
+ // 小数部分只保留前两位
|
|
|
+ filtered = parts[0] + '.' + (parts[1].slice(0, 2) || '');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理特殊情况（如 "000" 转为 "0"，但价格允许 "0.00"）
|
|
|
+ // 若需要严格限制整数部分首位不为0（非必须，根据业务决定）：
|
|
|
+ // if (parts.length === 1 && filtered.length > 1 && filtered[0] === '0') {
|
|
|
+ // filtered = filtered.replace(/^0+/, '0');
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 更新绑定值
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form[key] = !filtered ? filtered : filtered - 0;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 图片处理
|
|
|
+ onUpload(event, type) {
|
|
|
+ this.fileList[type] = event;
|
|
|
+ this.form[type == 'cover' ? 'productImage' : 'detailImages'] = this.fileList[type].map(f => f.url).join();
|
|
|
+ },
|
|
|
+ // 下一步
|
|
|
+ goNextStep() {
|
|
|
+ // 表单校验
|
|
|
+ this.$refs.uForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ const { categoryName, specialCategoryName, ...form } = this.form;
|
|
|
+ uni.setStorageSync('gm_goods', form);
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/groupMeal/goods/form-day'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log('验证失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+$uni-text-color: #303133;
|
|
|
+$uni-color-primary: #2979ff;
|
|
|
+
|
|
|
+.page-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ .section-title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-card {
|
|
|
+ margin: 24rpx;
|
|
|
+ padding: 16rpx 16rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ ::v-deep .u-form-item {
|
|
|
+ padding: 16rpx 0;
|
|
|
+ line-height: 1;
|
|
|
+ .u-form-item--left__content {
|
|
|
+ flex: none;
|
|
|
+ .u-form-item--left__content__label {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .u-form-item--left__content--required {
|
|
|
+ color: #fa3534;
|
|
|
+ left: auto;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-input {
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ ::v-deep .uni-input-input:disabled {
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-suffix {
|
|
|
+ color: #232832;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .upload-tip {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+::v-deep .u-add-tips {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tips{
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 66rpx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+// 底部按钮
|
|
|
+.footer-bar {
|
|
|
+ ::v-deep .u-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 76rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #449AFF;
|
|
|
+ border-radius: 54rpx;
|
|
|
+ border: 1rpx solid #449AFF;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 分类选择弹窗样式
|
|
|
+.category-popup {
|
|
|
+ padding: 30rpx;
|
|
|
+
|
|
|
+ .popup-title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $uni-text-color;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-list {
|
|
|
+ max-height: 600rpx; // 限制高度，可滚动
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-item {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $uni-text-color;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ color: $uni-color-primary;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-footer {
|
|
|
+ padding-top: 30rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
