set...........
作者：互联网
<template>
<div class="one">
<el-card>
<el-form ref="demoForm" :model="infoa" :rules="rules" class="dadada">
<el-form-item label="商品图片:" prop="img">
<el-upload
class="tu"
ref="$qiniu_img"
:action="'https://heyue.qqtuan.net/alioss-upload'"
name="file"
:on-success="handleSuccess"
:limit="1"
list-type="picture-card"
v-model="infoa.img"
:on-exceed="onExceed"
accept="image/*"
>
<i class="el-icon-plus"></i>
</el-upload>
<img
width="150px"
height="150px"
v-if="infoa.img"
:src="infoa.img"
alt=""
class="tt"
/>
</el-form-item>
<el-form-item label="商品名称:" prop="need_score">
<el-input
v-model="infoa.name"
placeholder="请输入所需预约积分"
clearable
/>
</el-form-item>
<el-form-item label="收益商品单价:" prop="need_score">
<el-input
v-model="infoa.price"
placeholder="请输入所需预约积分"
clearable
/>
</el-form-item>
<!-- @input="aaaa(d.start_money)" -->
<el-form-item label="收益商品规则">
<div v-for="(d, index) in upinof" :key="index">
<el-input
@input="aaaa(d.start_money)"
style=" width: 150px;"
v-model="d.start_money"
placeholder="请输入起始金额"
clearable
/>
<span style="padding: 10px;">-</span>
<el-input
@input="aaaas(d.end_money)"
style=" width: 150px;"
v-model="d.end_money"
placeholder="请输入结束金额"
clearable
/>
<span style="padding: 10px;">-</span>
<el-input
@input="aaaaaa(d.num)"
style=" width: 150px;"
v-model="d.num"
placeholder="请输入商品数量"
clearable
/>
<el-button type="primary" style="margin:10px" @click="sc(d, index)"
>删除</el-button
>
</div>
</el-form-item>
<el-button type="info" @click="addasdasdasdas" class="tj1"
>新增</el-button
>
<!-- <el-form-item v-for="(domain, index) in adasdad" :key="index">
<el-input v-model="domain.start_money"></el-input>
<el-input v-model="domain.end_money"></el-input>
<el-input v-model="domain.num"></el-input>
</el-form-item> -->
<!-- <el-form-item label="收益商品规则数量:" prop="need_score">
<el-input
v-model="form.need_score"
placeholder="请输入商品数量"
clearable
/>
</el-form-item> -->
<!-- 提交 -->
<el-form-item>
<el-button type="primary" @click="submit" class="tj">
提交
</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import axios from "axios";
export default {
component: {
upimage2: function() {
return this.isUpdate ? [{ url: this.data.img_url }] : [];
}
},
watch: {
// data() {
// if (this.data) {
// this.form = Object.assign({}, this.data);
// this.isUpdate = true;
// } else {
// this.form = {};
// this.form.slide_sort = 0;
// this.isUpdate = false;
// }
// }
aaaaaaaa: {
handler(a, b) {
console.log(a);
this.aaaaaaaa = a;
}
},
aasdasdasda: {
handler(a, b) {
console.log(a);
this.aasdasdasda = a;
}
},
asdasdajdklklwa: {
handler(a, b) {
console.log(a);
this.asdasdajdklklwa = a;
}
}
},
data() {
return {
info: -1,
infoa: {
rule: []
},
upinof: [],
quertlistall: {},
// 表单数据
form: Object.assign({}, this.data),
// 表单验证规则
rules: {
qr_img: [{ required: true, message: "请上传图片", trigger: "change" }]
},
// 提交状态
loading: false,
// 是否是修改
isUpdate: false,
adasdad: [],
aaaaaaaa: "",
aasdasdasda: "",
asdasdajdklklwa: ""
};
},
comments: {
aaaawwdww() {}
},
methods: {
// 删除
sc(d, indexs) {
this.upinof = this.upinof.filter((item, indexs) => {
return this.upinof[indexs] != d;
});
console.log(this.upinof);
},
aaaa(e) {
this.aaaaaaaa = e;
},
aaaas(e) {
this.aasdasdasda = e;
},
aaaaaa(e) {
this.asdasdajdklklwa = e;
},
// 数组新增
addasdasdasdas() {
this.upinof.push({
start_money: "",
end_money: "",
num: ""
});
//set 不经过data 更新
this.$set(this.upinof, this.info, {
start_money: "",
end_money: "",
num: ""
});
if (this.info != -1) {
++this.info;
this.infoa[`rule[${this.info}][start_money]`] = this.aaaaaaaa;
this.infoa[`rule[${this.info}][end_money]`] = this.aasdasdasda;
this.infoa[`rule[${this.info}][num]`] = this.asdasdajdklklwa;
console.log(this.infoa);
}
},
onExceed() {},
// 七流云上传后的钩子
handleSuccess(res) {
this.infoa.img = res.path;
},
/* 提交this.upinof.length */
submit() {
if (this.info == -1) {
console.log(1111);
this.upinof.forEach((element, index) => {
this.infoa[`rule[${index}][start_money]`] = element.start_money;
this.infoa[`rule[${index}][end_money]`] = element.end_money;
this.infoa[`rule[${index}][num]`] = element.num;
});
// return;
}
let formData = new FormData();
for (let key in this.infoa) {
if (this.infoa[key] !== null && this.infoa[key] !== undefined) {
formData.append(key, this.infoa[key]);
}
}
this.$http.post("admin-api/goods-config/update", formData).then(res => {
this.loading = false;
this.info = -1;
if (res.data.status == 1) {
this.$message({ type: "success", message: "成功" });
} else {
this.$message.error(res.data.error);
}
});
},
/* 关闭当前页面 */
closeThis() {
this.$store
.dispatch("user/tabRemove", this.$route.fullPath)
.then(({ lastPath }) => {
this.$router.push(lastPath || "/");
});
},
// 查询信息
queryinfo() {
this.$http.get("admin-api/goods-config/get", {}).then(res => {
if (res.data.status === 1) {
console.log(res);
if (res.data.result[0]) {
this.infoa = res.data.result[0];
this.upinof = JSON.parse(res.data.result[0].rule);
}
// this.infoa.rule = JSON.parse(res.data.result[0].rule);
}
});
}
},
created() {
this.queryinfo();
}
};
</script>
<style scoped>
.asdaswww {
display: flex;
flex-direction: row-reverse;
}
.asdaswww > div:nth-child(2) {
margin-left: 32px;
}
.el-form-item {
display: flex;
flex-direction: row;
font-size: 20px;
padding-top: 10px;
margin-left: 15px;
}
/* .dadada {
width: 700px;
height: 550px;
background-color: #fff;
border-radius: 5px;
} */
.one {
margin-top: 20px;
margin-left: 20px;
}
.tu {
margin-left: 30px;
}
.line {
padding-left: 20px;
}
.tj {
width: 600px;
}
.tj1 {
width: 600px;
margin-left: 15px;
}
.tt {
margin-left: 30px;
}
</style>
标签：set,infoa,money,rule,res,...........,upinof,data 来源： https://blog.csdn.net/qq_54896898/article/details/120844346