tangzheng/prepare_food_admin_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成茶株游戏

Browse Source
This commit is contained in:
闵宪瑞 2024-11-18 15:26:46 +08:00
parent 39aeedad6c
commit 6407f772e0
4 changed files with 397 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/router/modules/marketing.js
View File

@ -38,17 +38,6 @@ const marketingRouter = {
hidden: true,
component: () => import('@/views/marketing/coupon/list/creatCoupon')
},
{
path: 'list/saveTree/:id?',
name: 'treeAdd',
meta: {
title: '茶树添加',
noCache: true,
activeMenu: `/marketing/coupon/list`
},
hidden: true,
component: () => import('@/views/marketing/coupon/list/createTree')
},
{
path: 'list',
component: () => import('@/views/marketing/coupon/list/index'),
@ -78,6 +67,20 @@ const marketingRouter = {
]
},
{
path: 'raffle',
component: () => import('@/views/marketing/raffle/config/index'),
name: 'raffle',
meta: { title: '抽奖管理', icon: '' },
children: [
{
path: 'config',
component: () => import('@/views/marketing/raffle/config/index'),
name: 'config',
meta: { title: '抽奖配置', icon: '' }
},
]
},
{
path: 'bargain',
component: () => import('@/views/marketing/bargain/index'),
@ -187,7 +190,7 @@ const marketingRouter = {
path: 'activity',
component: () => import('@/views/marketing/activity/index'),
name: 'activity',
meta: { title: '预约', icon: '' },
meta: { title: '预约管理', icon: '' },
children: [
{
path: 'activityList',
@ -201,9 +204,6 @@ const marketingRouter = {
name: 'VenueReservation',
meta: { title: '场地预约', icon: '' }
},
]
},
]

71
src/views/marketing/lottery/config/index.vue
View File

@ -7,9 +7,15 @@
<div class="clearfix">
<div class="container">
<el-form :model="specsData.rule" label-width="120px" class="stage-form">
<!-- <el-form-item label="ID" prop="id">-->
<!-- <el-input v-model="specsData.rule.id" disabled></el-input>-->
<!-- </el-form-item>-->
<el-form-item label="认领背景图片" prop="id">
<div class="upLoadPicBox" @click="modalPicTap('1','pi6')">
<div v-if="specsData.image" class="pictrue">
<img :src="specsData.image"></div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont"/>
</div>
</div>
</el-form-item>
<el-form-item label="小苗阶段" prop="smallStage">
<el-input v-model="specsData.rule.smallStage" placeholder="请输入小苗阶段"></el-input>
</el-form-item>
@ -25,7 +31,7 @@
<el-form-item label="每次施肥量" prop="everyManure">
<el-input-number v-model="specsData.rule.everyManure" :min="0"></el-input-number>
</el-form-item>
<!-- <el-input-number v-model="specsData.rule.everySunlight" :min="0"></el-input-number>-->
<!-- <el-input-number v-model="specsData.rule.everySunlight" :min="0"></el-input-number>-->
<el-form-item label="光照阶梯" prop="everySunlight">
<div class="input-row">
阳光值小于：
@ -34,12 +40,14 @@
<el-input v-model="min.sunlight" placeholder="请输入内容" class="input-item"/>
</div>
<div class="input-row">
阳光值区间：<el-input disabled :value="`${min.end}-${max.begin}`" placeholder="请输入内容" class="input-item"/>
阳光值区间：
<el-input disabled :value="`${min.end}-${max.begin}`" placeholder="请输入内容" class="input-item"/>
<span>以下，每次消耗：</span>
<el-input v-model="center.sunlight" placeholder="请输入内容" class="input-item"/>
</div>
<div class="input-row">
阳光值大于：<el-input
阳光值大于：
<el-input
@input="maxInput"
v-model="max.begin"
placeholder="请输入内容"
@ -53,9 +61,7 @@
/>
</div>
</el-form-item>
<el-form-item label="每次光照阶梯" prop="everySunlightStair">
<!-- 动态光照阶梯 -->
</el-form-item>
<el-form-item label="总浇水量" prop="waterTotal">
<el-input-number v-model="specsData.rule.waterTotal" :min="0"></el-input-number>
</el-form-item>
@ -208,7 +214,7 @@
<div class="mt20"></div>
<el-button type="primary" @click="submit()">提交修改</el-button>
<el-dialog
title="提示"
title="添加茶树"
:visible.sync="visible"
width="80%"
>
@ -320,9 +326,12 @@
<el-form-item label="内容" prop="content">
<Tinymce v-model="teaPlants.content"></Tinymce>
</el-form-item>
<!-- <el-form-item label="热门标识" prop="isHot">-->
<!-- <el-input v-model="teaPlants.isHot" placeholder="请输入热门标识"></el-input>-->
<!-- </el-form-item>-->
<el-form-item label="热门显示天数" prop="hotDay">
<el-input-number v-model="teaPlants.hotDay" :min="0" :max="30"
placeholder="请输入热门显示天数"></el-input-number>
<el-input-number v-model="teaPlants.hotDay" :min="0" :max="365" placeholder="请输入热门显示天数"></el-input-number>
</el-form-item>
<el-form-item>
<el-button v-hasPermi="['admin:game:update']" type="primary" @click="submitForm">提交</el-button>
@ -336,14 +345,15 @@
import Tinymce from '@/components/Tinymce/index'
import {bargainDeleteApi, marketingGameInfoListApi, marketingGameListApi} from "@/api/marketing";
import {gamesUpdateApi} from "@/api/games";
export default {
components: {Tinymce },
components: {Tinymce},
// everySunlightStair
data() {
return {
min:{begin:0,end:40,sunlight:2},
center:{begin:41,end:69,sunlight:4},
max:{begin:70,end:9999,sunlight:5},
min: {begin: 0, end: 40, sunlight: 2},
center: {begin: 41, end: 69, sunlight: 4},
max: {begin: 70, end: 9999, sunlight: 5},
visible: false,
gameFrom: {},
specsData: {},
@ -393,34 +403,34 @@ export default {
this.getDataList()
},
methods: {
minInput(value){
minInput(value) {
//最小值不能大于最大值
if (value >= this.max.begin){
if (value >= this.max.begin) {
this.$message.error('阳光最小值不能大于或等于最大值！');
this.min.end = this.specsData.rule.everySunlightStair[0].end
return
}
//中间区间等于+1
this.center.begin = this.min.end +1
this.center.begin = this.min.end + 1
},
maxInput(value){
maxInput(value) {
//最大值不能小于最大值
if (value <= this.min.end){
if (value <= this.min.end) {
this.max.begin = this.specsData.rule.everySunlightStair[3].begin
this.$message.error('阳光最大值不能小于或等于最小值！');
return
}
//中间区间等于+1
this.center.end = this.max.begin -1
this.center.end = this.max.begin - 1
},
submitForm() {
this.$refs.formRef.validate((valid) => {
if (valid) {
if (this.teaPlants.id === undefined){
if (this.teaPlants.id === undefined) {
this.specsData.items.push(this.teaPlants)
}else {
} else {
this.gameFrom[this.teaPlants.index] = this.teaPlants
delete this.teaPlants.index
}
@ -434,9 +444,9 @@ export default {
this.teaPlants.index = index
this.visible = true
},
//添加茶株
add() {
this.$modal.confirm('确定添加吗？添加不能移除，请谨慎！').then(function() {
this.$modal.confirm('确定添加吗？添加不能移除，请谨慎！').then(function () {
bargainDeleteApi({id: id}).then(() => {
this.teaPlants = {
title: '',
@ -458,7 +468,8 @@ export default {
}
this.visible = true
})
}).catch(() => {});
}).catch(() => {
});
},
//最终提交
submit() {
@ -475,9 +486,8 @@ export default {
this.gameFrom.cid = this.specsData.cid
this.gameFrom.id = this.specsData.id
//todo
this.gameFrom.image = "茶株游戏不需要图片"
this.gameFrom.image = this.specsData.image
this.gameFrom.name = "茶株游戏"
gamesUpdateApi(this.gameFrom).then(() => {
this.$message.success('操作成功');
})
@ -500,6 +510,9 @@ export default {
case 'pi4':
_this.teaPlants.hotImage = img[0].sattDir;
break;
case 'pi6':
_this.specsData.image = img[0].sattDir;
break;
case 'pi5':
_this.teaPlants.productImage = img[0].sattDir;
break;

306
src/views/marketing/raffle/config/index.vue Normal file
View File

@ -0,0 +1,306 @@
<template>
<div class="divBox">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>规则</span>
</div>
<div class="clearfix">
<div class="container">
<el-form :model="specsData" label-width="120px" class="stage-form">
<el-form-item label="活动名称" prop="name">
<el-input v-model="specsData.name"></el-input>
</el-form-item>
<el-form-item label="活动开始时间" prop="beginTime">
<el-date-picker
v-model="specsData.beginTime"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="活动结束时间" prop="endTime">
<el-date-picker
v-model="specsData.endTime"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</div>
</el-card>
<div class="mt20"></div>
<el-table
:data="specsData.items"
style="width: 100%;">
<el-table-column
width="150"
prop="productImage"
header-align="center"
align="center"
label="图片">
<template slot-scope="scope">
<div class="demo-image__preview">
<el-image
style="width: 36px; height: 36px"
:src="scope.row.productImage"
:preview-src-list="[scope.row.productImage]"
/>
</div>
</template>
</el-table-column>
<el-table-column
width="150"
prop="productName"
header-align="center"
align="center"
label="名称">
</el-table-column>
<el-table-column
prop="productType"
header-align="center"
align="center"
label="奖品">
<template slot-scope="scope">
{{ intToString(scope.row.productType)}}
</template>
</el-table-column>
<el-table-column
prop="message"
header-align="center"
align="center"
label="提示语">
</el-table-column>
<el-table-column
prop="allNum"
header-align="center"
align="center"
label="数量">
</el-table-column>
<el-table-column
prop="lotteryRate"
header-align="center"
align="center"
label="奖品概率">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" class="mr10" @click="update(scope.$index,scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
<div class="mt20"></div>
<el-button type="primary" @click="submit()">提交修改</el-button>
<el-dialog
title="添加奖品"
:visible.sync="visible"
width="50%"
>
<el-form :model="teaPlants" :rules="rules" ref="formRef" label-width="120px" class="game-form">
<el-form-item label="奖品图片">
<div class="upLoadPicBox" @click="modalPicTap('1','pi3')">
<div v-if="teaPlants.productImage " class="pictrue"><img :src="teaPlants.productImage "></div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont"/>
</div>
</div>
</el-form-item>
<el-form-item label="奖品名称">
<el-input v-model="teaPlants.productName"/>
</el-form-item>
<el-form-item label="提示语">
<el-input v-model="teaPlants.message"/>
</el-form-item>
<el-form-item label="奖品数量">
<el-input type="number" v-model="teaPlants.allNum"/>
</el-form-item>
<el-form-item label="奖品概率">
<el-input type="number" v-model="teaPlants.lotteryRate"/>
</el-form-item>
<el-form-item>
<el-button v-hasPermi="['admin:game:update']" type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import Tinymce from '@/components/Tinymce/index.vue'
import {bargainDeleteApi, marketingGameInfoListApi, marketingGameListApi} from "@/api/marketing";
import {gamesUpdateApi} from "@/api/games";
export default {
components: {Tinymce},
// everySunlightStair
data() {
return {
visible: false,
gameFrom: {},
specsData: {},
teaPlants: {},
typeOptions: [
{ value: 0, label: '优惠券' },
{ value: 1, label: '水滴' },
{ value: 2, label: '阳光值' },
{ value: 3, label: '肥料' },
{ value: 4, label: '积分' },
{ value: 5, label: '谢谢惠顾' },
],
rules: {
title: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
productId: [
{required: true, message: '请输入商品编号', trigger: 'blur'},
{type: 'number', message: '商品编号必须是数字', trigger: 'blur'},
],
productName: [{required: true, message: '请输入商品名称', trigger: 'blur'}],
productImage: [{required: true, message: '请输入商品图链接', trigger: 'blur'}],
productPrice: [
{required: true, message: '请输入商品价值', trigger: 'blur'},
{type: 'number', message: '商品价值必须是数字', trigger: 'blur'},
],
allNum: [
{required: true, message: '请输入总共数量', trigger: 'blur'},
{type: 'number', message: '总共数量必须是数字', trigger: 'blur'},
],
outNum: [
{required: true, message: '请输入支出数量', trigger: 'blur'},
{type: 'number', message: '支出数量必须是数字', trigger: 'blur'},
],
fruitNum: [
{required: true, message: '请输入果实数', trigger: 'blur'},
{type: 'number', message: '果实数必须是数字', trigger: 'blur'},
],
treePlace: [{required: true, message: '请输入种植地点', trigger: 'blur'}],
gardener: [{required: true, message: '请输入养护人', trigger: 'blur'}],
soil: [{required: true, message: '请输入土壤类型', trigger: 'blur'}],
humidity: [{required: true, message: '请输入温度', trigger: 'blur'}],
content: [{required: true, message: '请输入活动内容', trigger: 'blur'}],
smallImage: [{required: true, message: '请输入小苗阶段图链接', trigger: 'blur'}],
growImage: [{required: true, message: '请输入成长阶段图链接', trigger: 'blur'}],
bigImage: [{required: true, message: '请输入成熟阶段图链接', trigger: 'blur'}],
hotImage: [{required: true, message: '请输入热门新品图链接', trigger: 'blur'}],
hotDay: [
{required: true, message: '请输入热门新品显示天数', trigger: 'blur'},
{type: 'number', message: '热门新品显示天数必须是数字', trigger: 'blur'},
],
status: [{required: true, message: '请选择状态', trigger: 'change'}],
},
}
},
mounted() {
this.getDataList()
},
methods: {
intToString(value) {
const mappings = {
0: '优惠券',
1: '水滴',
2: '阳光值',
3: '肥料',
4: '积分',
5: '谢谢惠顾',
};
return mappings[value] || '未知类型'; // 如果找不到匹配值，返回默认值
},
submitForm() {
this.$refs.formRef.validate((valid) => {
if (valid) {
if (this.teaPlants.id === undefined) {
this.specsData.items.push(this.teaPlants)
} else {
this.gameFrom[this.teaPlants.index] = this.teaPlants
delete this.teaPlants.index
}
this.visible = false
}
});
},
//修改茶株
update(index, row) {
this.teaPlants = row
this.teaPlants.index = index
this.visible = true
},
//最终提交
submit() {
//把items和rule改成str
this.gameFrom.items = JSON.stringify(this.specsData.items)
this.gameFrom.rule = JSON.stringify(this.specsData.rule)
this.gameFrom.cid = this.specsData.cid
this.gameFrom.id = this.specsData.id
//todo
this.gameFrom.image = "茶株游戏不需要图片"
this.gameFrom.name = this.specsData.name
gamesUpdateApi(this.gameFrom).then(() => {
this.$message.success('操作成功');
})
},
modalPicTap(tit, num) {
const _this = this;
this.$modalUpload(function (img) {
console.log(img)
if (tit === '1') {
switch (num) {
case 'pi1':
_this.teaPlants.smallImage = img[0].sattDir;
break;
case 'pi2':
_this.teaPlants.growImage = img[0].sattDir;
break;
case 'pi3':
_this.teaPlants.productImage = img[0].sattDir;
break;
case 'pi4':
_this.teaPlants.hotImage = img[0].sattDir;
break;
case 'pi5':
_this.teaPlants.productImage = img[0].sattDir;
break;
}
}
}, tit, 'content');
},
// 列表
getDataList() {
marketingGameListApi({cid: 747}).then(res => {
this.getInfo(res.list[0].id)
})
},
getInfo(id) {
marketingGameInfoListApi({id: id}).then(res => {
this.specsData = res
if (this.specsData.rule.everySunlightStair === null) {
this.specsData.rule.everySunlightStair = []
}
})
},
}
}
</script>
<style scoped>
.input-row {
display: flex; /* 使用 Flex 布局 */
align-items: center; /* 垂直居中 */
gap: 5px; /* 控制子元素之间的间距 */
}
.input-item {
flex: 1; /* 控制输入框的宽度，如果需要调整大小比例可以设置 flex 属性 */
}
</style>

15
src/views/marketing/raffle/index.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div>
<router-view />
</div>
</template>
<script>
export default {
}
</script>
<style lang="sass" scoped>
</style>