完成茶株游戏

This commit is contained in:
闵宪瑞 2024-11-18 13:38:36 +08:00
parent 974dbf6f92
commit 39aeedad6c

View File

@ -4,12 +4,12 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>规则</span> <span>规则</span>
</div> </div>
<div class="clearfix"> <div class="clearfix">
<div class="container"> <div class="container">
<el-form :model="specsData.rule" label-width="120px" class="stage-form"> <el-form :model="specsData.rule" label-width="120px" class="stage-form">
<!-- <el-form-item label="ID" prop="id">--> <!-- <el-form-item label="ID" prop="id">-->
<!-- <el-input v-model="specsData.rule.id" disabled></el-input>--> <!-- <el-input v-model="specsData.rule.id" disabled></el-input>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item label="小苗阶段" prop="smallStage"> <el-form-item label="小苗阶段" prop="smallStage">
<el-input v-model="specsData.rule.smallStage" placeholder="请输入小苗阶段"></el-input> <el-input v-model="specsData.rule.smallStage" placeholder="请输入小苗阶段"></el-input>
</el-form-item> </el-form-item>
@ -25,29 +25,47 @@
<el-form-item label="每次施肥量" prop="everyManure"> <el-form-item label="每次施肥量" prop="everyManure">
<el-input-number v-model="specsData.rule.everyManure" :min="0"></el-input-number> <el-input-number v-model="specsData.rule.everyManure" :min="0"></el-input-number>
</el-form-item> </el-form-item>
<!-- <el-form-item label="每次施肥阶梯" prop="everyManureStair">--> <!-- <el-input-number v-model="specsData.rule.everySunlight" :min="0"></el-input-number>-->
<!-- <el-input v-model="specsData.rule.everyManureStair" placeholder="请输入每次施肥阶梯"></el-input>--> <el-form-item label="光照阶梯" prop="everySunlight">
<!-- </el-form-item>--> <div class="input-row">
<el-form-item label="每次光照" prop="everySunlight"> 阳光值小于
<el-input-number v-model="specsData.rule.everySunlight" :min="0"></el-input-number> <el-input @input="minInput" v-model="min.end" placeholder="请输入内容" class="input-item"/>
<span>以下每次消耗</span>
<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"/>
<span>以下每次消耗</span>
<el-input v-model="center.sunlight" placeholder="请输入内容" class="input-item"/>
</div>
<div class="input-row">
阳光值大于<el-input
@input="maxInput"
v-model="max.begin"
placeholder="请输入内容"
class="input-item"
/>
<span>以上每次消耗</span>
<el-input
v-model="max.sunlight"
placeholder="请输入内容"
class="input-item"
/>
</div>
</el-form-item> </el-form-item>
<el-form-item label="每次光照阶梯" prop="everySunlightStair"> <el-form-item label="每次光照阶梯" prop="everySunlightStair">
<!-- 动态光照阶梯 --> <!-- 动态光照阶梯 -->
</el-form-item> </el-form-item>
<el-form-item label="总浇水量" prop="waterTotal"> <el-form-item label="总浇水量" prop="waterTotal">
<el-input-number v-model="specsData.rule.waterTotal" :min="0"></el-input-number> <el-input-number v-model="specsData.rule.waterTotal" :min="0"></el-input-number>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div> </div>
</el-card> </el-card>
<div class="mt20"></div> <div class="mt20"></div>
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<router-link :to=" { path: '/marketing/coupon/list/saveTree' } "> <el-button size="small" type="primary" @click="add()">添加茶株</el-button>
<el-button size="small" type="primary" >添加茶株</el-button>
</router-link>
</div> </div>
<div class="mt20"> <div class="mt20">
<!-- <cards-data :cardLists="cardLists" v-if="checkPermi(['admin:order:list:data'])"></cards-data> --> <!-- <cards-data :cardLists="cardLists" v-if="checkPermi(['admin:order:list:data'])"></cards-data> -->
@ -55,20 +73,14 @@
<el-table <el-table
:data="specsData.items" :data="specsData.items"
style="width: 100%;"> style="width: 100%;">
<el-table-column <el-table-column
width="80" width="150"
prop="gameId" prop="productName"
header-align="center" header-align="center"
align="center" align="center"
label="茶株编号"> label="认领标题">
</el-table-column> </el-table-column>
<el-table-column
width="150"
prop="productName"
header-align="center"
align="center"
label="认领标题">
</el-table-column>
<el-table-column <el-table-column
width="150" width="150"
prop="title" prop="title"
@ -114,7 +126,7 @@
prop="humidity" prop="humidity"
header-align="center" header-align="center"
align="center" align="center"
label="湿度"> label="度">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="smallImage" prop="smallImage"
@ -168,12 +180,7 @@
align="center" align="center"
label="领养总数"> label="领养总数">
</el-table-column> </el-table-column>
<el-table-column
prop="allNum"
header-align="center"
align="center"
label="已领养数量">
</el-table-column>
<el-table-column <el-table-column
prop="fruitNum" prop="fruitNum"
header-align="center" header-align="center"
@ -186,12 +193,6 @@
align="center" align="center"
label="种植地点"> label="种植地点">
</el-table-column> </el-table-column>
<el-table-column
prop="bigImage"
header-align="center"
align="center"
label="成熟图">
</el-table-column>
<el-table-column <el-table-column
fixed="right" fixed="right"
@ -200,7 +201,7 @@
width="150" width="150"
label="操作"> label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" class="mr10" @click="update(scope.$index,scope.row)">修改</el-button> <el-button type="text" size="small" class="mr10" @click="update(scope.$index,scope.row)">修改</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -226,7 +227,8 @@
<el-col :span="8"> <el-col :span="8">
<el-form-item label="茶株图" prop="productImage"> <el-form-item label="茶株图" prop="productImage">
<div class="upLoadPicBox" @click="modalPicTap('1','pi5')"> <div class="upLoadPicBox" @click="modalPicTap('1','pi5')">
<div v-if="teaPlants.productImage" class="pictrue"><img :src="teaPlants.productImage"></div> <div v-if="teaPlants.productImage" class="pictrue">
<img :src="teaPlants.productImage"></div>
<div v-else class="upLoad"> <div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont"/> <i class="el-icon-camera cameraIconfont"/>
</div> </div>
@ -237,7 +239,8 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6">
<el-form-item label="茶株价格" prop="productPrice"> <el-form-item label="茶株价格" prop="productPrice">
<el-input-number v-model="teaPlants.productPrice" :min="0" :precision="2" placeholder="请输入茶株价格"></el-input-number> <el-input-number v-model="teaPlants.productPrice" :min="0" :precision="2"
placeholder="请输入茶株价格"></el-input-number>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@ -250,7 +253,9 @@
<el-input-number v-model="teaPlants.fruitNum" :min="0" placeholder="请输入果实数"></el-input-number> <el-input-number v-model="teaPlants.fruitNum" :min="0" placeholder="请输入果实数"></el-input-number>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6">
<div class="grid-content bg-purple"></div>
</el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
@ -265,11 +270,13 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="湿度" prop="humidity"> <el-form-item label="度" prop="humidity">
<el-input v-model="teaPlants.humidity" placeholder="请输入湿度"></el-input> <el-input v-model="teaPlants.humidity" placeholder="请输入度"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6">
<div class="grid-content bg-purple"></div>
</el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
@ -304,24 +311,18 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="热门新品图" prop="hotImage">
<div class="upLoadPicBox" @click="modalPicTap('1','pi4')">
<div v-if="teaPlants.hotImage" class="pictrue"><img :src="teaPlants.hotImage"></div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont"/>
</div>
</div>
</el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-form-item label="种植位置" prop="treePlace"> <el-form-item label="种植位置" prop="treePlace">
<el-input v-model="teaPlants.treePlace" placeholder="请输入种植位置"></el-input> <el-input v-model="teaPlants.treePlace" placeholder="请输入种植位置"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="内容" prop="content"> <el-form-item label="内容" prop="content">
<el-input type="textarea" v-model="teaPlants.content" placeholder="请输入内容"></el-input> <Tinymce v-model="teaPlants.content"></Tinymce>
</el-form-item> </el-form-item>
<el-form-item label="热门显示天数" prop="hotDay"> <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="30"
placeholder="请输入热门显示天数"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button v-hasPermi="['admin:game:update']" type="primary" @click="submitForm">提交</el-button> <el-button v-hasPermi="['admin:game:update']" type="primary" @click="submitForm">提交</el-button>
@ -332,113 +333,175 @@
</template> </template>
<script> <script>
import {marketingGameInfoListApi, marketingGameListApi} from "@/api/marketing"; import Tinymce from '@/components/Tinymce/index'
import {bargainDeleteApi, marketingGameInfoListApi, marketingGameListApi} from "@/api/marketing";
import {gamesUpdateApi} from "@/api/games"; import {gamesUpdateApi} from "@/api/games";
export default { export default {
components: {Tinymce },
// everySunlightStair
data() { data() {
return { return {
visible:false, min:{begin:0,end:40,sunlight:2},
center:{begin:41,end:69,sunlight:4},
max:{begin:70,end:9999,sunlight:5},
visible: false,
gameFrom: {}, gameFrom: {},
specsData: {}, specsData: {},
teaPlants:{}, teaPlants: {},
rules: { rules: {
title: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }], title: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
productId: [ productId: [
{ required: true, message: '请输入商品编号', trigger: 'blur' }, {required: true, message: '请输入商品编号', trigger: 'blur'},
{ type: 'number', message: '商品编号必须是数字', trigger: 'blur' }, {type: 'number', message: '商品编号必须是数字', trigger: 'blur'},
], ],
productName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }], productName: [{required: true, message: '请输入商品名称', trigger: 'blur'}],
productImage: [{ required: true, message: '请输入商品图链接', trigger: 'blur' }], productImage: [{required: true, message: '请输入商品图链接', trigger: 'blur'}],
productPrice: [ productPrice: [
{ required: true, message: '请输入商品价值', trigger: 'blur' }, {required: true, message: '请输入商品价值', trigger: 'blur'},
{ type: 'number', message: '商品价值必须是数字', trigger: 'blur' }, {type: 'number', message: '商品价值必须是数字', trigger: 'blur'},
], ],
allNum: [ allNum: [
{ required: true, message: '请输入总共数量', trigger: 'blur' }, {required: true, message: '请输入总共数量', trigger: 'blur'},
{ type: 'number', message: '总共数量必须是数字', trigger: 'blur' }, {type: 'number', message: '总共数量必须是数字', trigger: 'blur'},
], ],
outNum: [ outNum: [
{ required: true, message: '请输入支出数量', trigger: 'blur' }, {required: true, message: '请输入支出数量', trigger: 'blur'},
{ type: 'number', message: '支出数量必须是数字', trigger: 'blur' }, {type: 'number', message: '支出数量必须是数字', trigger: 'blur'},
], ],
fruitNum: [ fruitNum: [
{ required: true, message: '请输入果实数', trigger: 'blur' }, {required: true, message: '请输入果实数', trigger: 'blur'},
{ type: 'number', message: '果实数必须是数字', trigger: 'blur' }, {type: 'number', message: '果实数必须是数字', trigger: 'blur'},
], ],
treePlace: [{ required: true, message: '请输入种植地点', trigger: 'blur' }], treePlace: [{required: true, message: '请输入种植地点', trigger: 'blur'}],
gardener: [{ required: true, message: '请输入养护人', trigger: 'blur' }], gardener: [{required: true, message: '请输入养护人', trigger: 'blur'}],
soil: [{ required: true, message: '请输入土壤类型', trigger: 'blur' }], soil: [{required: true, message: '请输入土壤类型', trigger: 'blur'}],
humidity: [{ required: true, message: '请输入湿度', trigger: 'blur' }], humidity: [{required: true, message: '请输入度', trigger: 'blur'}],
content: [{ required: true, message: '请输入活动内容', trigger: 'blur' }], content: [{required: true, message: '请输入活动内容', trigger: 'blur'}],
smallImage: [{ required: true, message: '请输入小苗阶段图链接', trigger: 'blur' }], smallImage: [{required: true, message: '请输入小苗阶段图链接', trigger: 'blur'}],
growImage: [{ required: true, message: '请输入成长阶段图链接', trigger: 'blur' }], growImage: [{required: true, message: '请输入成长阶段图链接', trigger: 'blur'}],
bigImage: [{ required: true, message: '请输入成熟阶段图链接', trigger: 'blur' }], bigImage: [{required: true, message: '请输入成熟阶段图链接', trigger: 'blur'}],
hotImage: [{ required: true, message: '请输入热门新品图链接', trigger: 'blur' }], hotImage: [{required: true, message: '请输入热门新品图链接', trigger: 'blur'}],
hotDay: [ hotDay: [
{ required: true, message: '请输入热门新品显示天数', trigger: 'blur' }, {required: true, message: '请输入热门新品显示天数', trigger: 'blur'},
{ type: 'number', message: '热门新品显示天数必须是数字', trigger: 'blur' }, {type: 'number', message: '热门新品显示天数必须是数字', trigger: 'blur'},
], ],
status: [{ required: true, message: '请选择状态', trigger: 'change' }], status: [{required: true, message: '请选择状态', trigger: 'change'}],
}, },
} }
}, },
mounted() { mounted() {
this.getDataList() this.getDataList()
}, },
methods: { methods: {
minInput(value){
//
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
},
maxInput(value){
//
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
},
submitForm() { submitForm() {
this.$refs.formRef.validate((valid) => { this.$refs.formRef.validate((valid) => {
if (valid) { if (valid) {
this.gameFrom[this.teaPlants.index] = this.teaPlants if (this.teaPlants.id === undefined){
delete this.teaPlants.index this.specsData.items.push(this.teaPlants)
}else {
this.gameFrom[this.teaPlants.index] = this.teaPlants
delete this.teaPlants.index
}
this.visible = false this.visible = false
} }
}); });
}, },
// //
update(index,row){ update(index, row) {
this.teaPlants = row this.teaPlants = row
this.teaPlants.index = index this.teaPlants.index = index
this.visible = true this.visible = true
}, },
add() {
this.$modal.confirm('确定添加吗?添加不能移除,请谨慎!').then(function() {
bargainDeleteApi({id: id}).then(() => {
this.teaPlants = {
title: '',
productName: '',
productImage: '',
productPrice: 0.00,
allNum: 0,
fruitNum: 0,
treePlace: '',
gardener: '',
soil: '',
humidity: '',
content: '',
smallImage: '',
growImage: '',
bigImage: '',
hotImage: '',
hotDay: 0,
}
this.visible = true
})
}).catch(() => {});
},
// //
submit(){ submit() {
//
let everySunlightStair = []
everySunlightStair.push(this.min)
everySunlightStair.push(this.center)
everySunlightStair.push(this.max)
this.specsData.rule.everySunlightStair = JSON.stringify(everySunlightStair)
//itemsrulestr //itemsrulestr
this.gameFrom.items = JSON.stringify(this.specsData.items) this.gameFrom.items = JSON.stringify(this.specsData.items)
this.gameFrom.rule = JSON.stringify(this.specsData.rule) this.gameFrom.rule = JSON.stringify(this.specsData.rule)
this.gameFrom.cid = this.specsData.cid this.gameFrom.cid = this.specsData.cid
this.gameFrom.id = this.specsData.id this.gameFrom.id = this.specsData.id
//todo //todo
this.gameFrom.image ="123" this.gameFrom.image = "茶株游戏不需要图片"
this.gameFrom.name ="茶株游戏" this.gameFrom.name = "茶株游戏"
gamesUpdateApi(this.gameFrom).then(res =>{ gamesUpdateApi(this.gameFrom).then(() => {
console.log(res) this.$message.success('操作成功');
}) })
}, },
modalPicTap(tit, num) { modalPicTap(tit, num) {
const _this = this; const _this = this;
this.$modalUpload(function (img) { this.$modalUpload(function (img) {
console.log(img)
if (tit === '1') { if (tit === '1') {
switch (num) { switch (num) {
case 'pi1': case 'pi1':
_this.form.smallImage = img[0].sattDir; _this.teaPlants.smallImage = img[0].sattDir;
break; break;
case 'pi2': case 'pi2':
_this.form.growImage = img[0].sattDir; _this.teaPlants.growImage = img[0].sattDir;
break; break;
case 'pi3': case 'pi3':
_this.form.bigImage = img[0].sattDir; _this.teaPlants.bigImage = img[0].sattDir;
break; break;
case 'pi4': case 'pi4':
_this.form.hotImage = img[0].sattDir; _this.teaPlants.hotImage = img[0].sattDir;
break; break;
case 'pi5': case 'pi5':
_this.form.productImage = img[0].sattDir; _this.teaPlants.productImage = img[0].sattDir;
break; break;
} }
} }
@ -453,6 +516,22 @@ export default {
getInfo(id) { getInfo(id) {
marketingGameInfoListApi({id: id}).then(res => { marketingGameInfoListApi({id: id}).then(res => {
this.specsData = res this.specsData = res
//
this.specsData.rule.everySunlightStair = JSON.parse(this.specsData.rule.everySunlightStair)
this.min.begin = this.specsData.rule.everySunlightStair[0].begin
this.min.end = this.specsData.rule.everySunlightStair[0].end
this.min.sunlight = this.specsData.rule.everySunlightStair[0].sunlight
this.center.begin = this.specsData.rule.everySunlightStair[1].begin
this.center.end = this.specsData.rule.everySunlightStair[1].end
this.center.sunlight = this.specsData.rule.everySunlightStair[1].sunlight
this.max.begin = this.specsData.rule.everySunlightStair[2].begin
this.max.end = this.specsData.rule.everySunlightStair[2].end
this.max.sunlight = this.specsData.rule.everySunlightStair[2].sunlight
if (this.specsData.rule.everySunlightStair === null) { if (this.specsData.rule.everySunlightStair === null) {
this.specsData.rule.everySunlightStair = [] this.specsData.rule.everySunlightStair = []
} }
@ -463,6 +542,14 @@ export default {
</script> </script>
<style scoped> <style scoped>
.input-row {
display: flex; /* 使用 Flex 布局 */
align-items: center; /* 垂直居中 */
gap: 5px; /* 控制子元素之间的间距 */
}
.input-item {
flex: 1; /* 控制输入框的宽度,如果需要调整大小比例可以设置 flex 属性 */
}
</style> </style>