完成茶株游戏
This commit is contained in:
闵宪瑞
parent
974dbf6f92
commit
39aeedad6c
@ -7,9 +7,9 @@
|
||||
<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="ID" prop="id">-->
|
||||
<!-- <el-input v-model="specsData.rule.id" disabled></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="小苗阶段" prop="smallStage">
|
||||
<el-input v-model="specsData.rule.smallStage" placeholder="请输入小苗阶段"></el-input>
|
||||
</el-form-item>
|
||||
@ -25,29 +25,47 @@
|
||||
<el-form-item label="每次施肥量" prop="everyManure">
|
||||
<el-input-number v-model="specsData.rule.everyManure" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="每次施肥阶梯" prop="everyManureStair">-->
|
||||
<!-- <el-input v-model="specsData.rule.everyManureStair" placeholder="请输入每次施肥阶梯"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="每次光照" prop="everySunlight">
|
||||
<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">
|
||||
阳光值小于：
|
||||
<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 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>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<div class="mt20"></div>
|
||||
<div slot="header" class="clearfix">
|
||||
<router-link :to=" { path: '/marketing/coupon/list/saveTree' } ">
|
||||
<el-button size="small" type="primary" >添加茶株</el-button>
|
||||
</router-link>
|
||||
<el-button size="small" type="primary" @click="add()">添加茶株</el-button>
|
||||
</div>
|
||||
<div class="mt20">
|
||||
<!-- <cards-data :cardLists="cardLists" v-if="checkPermi(['admin:order:list:data'])"></cards-data> -->
|
||||
@ -55,13 +73,7 @@
|
||||
<el-table
|
||||
:data="specsData.items"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
width="80"
|
||||
prop="gameId"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="茶株编号">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
width="150"
|
||||
prop="productName"
|
||||
@ -114,7 +126,7 @@
|
||||
prop="humidity"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="湿度">
|
||||
label="温度">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="smallImage"
|
||||
@ -168,12 +180,7 @@
|
||||
align="center"
|
||||
label="领养总数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="allNum"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="已领养数量">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="fruitNum"
|
||||
header-align="center"
|
||||
@ -186,12 +193,6 @@
|
||||
align="center"
|
||||
label="种植地点">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bigImage"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="成熟图">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
@ -226,7 +227,8 @@
|
||||
<el-col :span="8">
|
||||
<el-form-item label="茶株图" prop="productImage">
|
||||
<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">
|
||||
<i class="el-icon-camera cameraIconfont"/>
|
||||
</div>
|
||||
@ -237,7 +239,8 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<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-col>
|
||||
<el-col :span="6">
|
||||
@ -250,7 +253,9 @@
|
||||
<el-input-number v-model="teaPlants.fruitNum" :min="0" placeholder="请输入果实数"></el-input-number>
|
||||
</el-form-item>
|
||||
</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 :gutter="20">
|
||||
@ -265,11 +270,13 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="湿度" prop="humidity">
|
||||
<el-input v-model="teaPlants.humidity" placeholder="请输入湿度"></el-input>
|
||||
<el-form-item label="温度" prop="humidity">
|
||||
<el-input v-model="teaPlants.humidity" placeholder="请输入温度"></el-input>
|
||||
</el-form-item>
|
||||
</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 :gutter="20">
|
||||
@ -304,24 +311,18 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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-row>
|
||||
<el-form-item label="种植位置" prop="treePlace">
|
||||
<el-input v-model="teaPlants.treePlace" placeholder="请输入种植位置"></el-input>
|
||||
</el-form-item>
|
||||
<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 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-button v-hasPermi="['admin:game:update']" type="primary" @click="submitForm">提交</el-button>
|
||||
@ -332,113 +333,175 @@
|
||||
</template>
|
||||
|
||||
<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";
|
||||
export default {
|
||||
components: {Tinymce },
|
||||
// everySunlightStair
|
||||
data() {
|
||||
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: {},
|
||||
specsData: {},
|
||||
teaPlants:{},
|
||||
teaPlants: {},
|
||||
rules: {
|
||||
title: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }],
|
||||
title: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
|
||||
productId: [
|
||||
{ required: true, message: '请输入商品编号', trigger: 'blur' },
|
||||
{ type: 'number', message: '商品编号必须是数字', trigger: 'blur' },
|
||||
{required: true, message: '请输入商品编号', trigger: 'blur'},
|
||||
{type: 'number', message: '商品编号必须是数字', trigger: 'blur'},
|
||||
],
|
||||
productName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
|
||||
productImage: [{ required: true, 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' },
|
||||
{required: true, message: '请输入商品价值', trigger: 'blur'},
|
||||
{type: 'number', message: '商品价值必须是数字', trigger: 'blur'},
|
||||
],
|
||||
allNum: [
|
||||
{ required: true, message: '请输入总共数量', trigger: 'blur' },
|
||||
{ type: 'number', message: '总共数量必须是数字', trigger: 'blur' },
|
||||
{required: true, message: '请输入总共数量', trigger: 'blur'},
|
||||
{type: 'number', message: '总共数量必须是数字', trigger: 'blur'},
|
||||
],
|
||||
outNum: [
|
||||
{ required: true, message: '请输入支出数量', trigger: 'blur' },
|
||||
{ type: 'number', message: '支出数量必须是数字', trigger: 'blur' },
|
||||
{required: true, message: '请输入支出数量', trigger: 'blur'},
|
||||
{type: 'number', message: '支出数量必须是数字', trigger: 'blur'},
|
||||
],
|
||||
fruitNum: [
|
||||
{ required: true, message: '请输入果实数', trigger: 'blur' },
|
||||
{ type: 'number', message: '果实数必须是数字', trigger: 'blur' },
|
||||
{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' }],
|
||||
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' },
|
||||
{required: true, message: '请输入热门新品显示天数', trigger: 'blur'},
|
||||
{type: 'number', message: '热门新品显示天数必须是数字', trigger: 'blur'},
|
||||
],
|
||||
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
|
||||
status: [{required: true, message: '请选择状态', trigger: 'change'}],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
},
|
||||
|
||||
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() {
|
||||
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){
|
||||
update(index, row) {
|
||||
this.teaPlants = row
|
||||
this.teaPlants.index = index
|
||||
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)
|
||||
|
||||
//把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 ="123"
|
||||
this.gameFrom.name ="茶株游戏"
|
||||
this.gameFrom.image = "茶株游戏不需要图片"
|
||||
this.gameFrom.name = "茶株游戏"
|
||||
|
||||
gamesUpdateApi(this.gameFrom).then(res =>{
|
||||
console.log(res)
|
||||
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.form.smallImage = img[0].sattDir;
|
||||
_this.teaPlants.smallImage = img[0].sattDir;
|
||||
break;
|
||||
case 'pi2':
|
||||
_this.form.growImage = img[0].sattDir;
|
||||
_this.teaPlants.growImage = img[0].sattDir;
|
||||
break;
|
||||
case 'pi3':
|
||||
_this.form.bigImage = img[0].sattDir;
|
||||
_this.teaPlants.bigImage = img[0].sattDir;
|
||||
break;
|
||||
case 'pi4':
|
||||
_this.form.hotImage = img[0].sattDir;
|
||||
_this.teaPlants.hotImage = img[0].sattDir;
|
||||
break;
|
||||
case 'pi5':
|
||||
_this.form.productImage = img[0].sattDir;
|
||||
_this.teaPlants.productImage = img[0].sattDir;
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -453,6 +516,22 @@ export default {
|
||||
getInfo(id) {
|
||||
marketingGameInfoListApi({id: id}).then(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) {
|
||||
this.specsData.rule.everySunlightStair = []
|
||||
}
|
||||
@ -463,6 +542,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.input-row {
|
||||
display: flex; /* 使用 Flex 布局 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
gap: 5px; /* 控制子元素之间的间距 */
|
||||
}
|
||||
|
||||
.input-item {
|
||||
flex: 1; /* 控制输入框的宽度，如果需要调整大小比例可以设置 flex 属性 */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user