vue实现表单数据的增删改功能
本文实例为大家分享了vue实现表单数据增删改功能的具体代码，供大家参考，具体内容如下
图示如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>会员等级优惠</title>
<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//rem适配的js 750的设计图 真实用7.5rem表示
(function () {
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
doc = document.documentElement;
function changeFontSize() {
let clientWidth = doc.offsetWidth,
scale = clientWidth / 750;
doc.style.fontSize = scale * 100 + 'px';
}
//监听窗口变化或横屏时
window.addEventListener(resizeEvt, changeFontSize);
//加载页面触发
document.addEventListener('DOMContentLoaded', changeFontSize);
})();
</script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
font-size: 0.32rem;
background: #f0eff5;
}
input {
border: none;
outline: none;
}
.del {
width: 1rem;
line-height: 0.55rem;
background: rgba(0, 153, 255, 1);
color: #fff;
text-align: center;
border: none;
border-radius: 0.1rem;
margin-left: 0.2rem;
}
/* 顶部信息 */
.top {
/* width: 100%; */
/* height:1.78rem; */
background: rgba(224, 242, 255, 1);
padding: 0.2rem;
font-size: 0.3rem;
color: #0099FF;
}
.top p {
margin-bottom: 0.14rem;
}
/* 切换栏 */
.nav_box {
line-height: 0.86rem;
display: flex;
flex-wrap: nowrap;
background: #fff;
margin-bottom: 0.02rem;
}
.nav_box li {
flex: 1;
text-align: center;
}
.nav_box li.active {
background: rgba(0, 153, 255, 1);
color: #fff;
}
/* 第一项 */
.nav1 {}
.nav1 .bottom_btn {
line-height: 0.77rem;
background: rgba(0, 153, 255, 1);
color: #fff;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
/* 第一项的第一个盒子 */
.nav1 .concent .box1 {
display: flex;
flex-wrap: wrap;
background: #fff;
padding: 0.2rem 0 0 0.2rem;
margin-bottom: 0.2rem;
}
.nav1 .concent .box1 .list {
width: 1.68rem;
line-height: 0.74rem;
text-align: center;
background: rgba(243, 243, 243, 1);
border-radius: 0.1rem;
margin-right: 0.12rem;
margin-bottom: 0.2rem;
}
.nav1 .concent .box1 .list.active {
background: rgba(0, 153, 255, 1);
color: #fff;
}
.nav1 .concent .box1 .list:nth-of-type(4n) {
margin-right: 0;
}
.nav1 .concent .box1 .addmembers {
font-size: 0.26rem;
color: rgba(160, 214, 255, 1);
}
.nav1 .concent .box1 .addmembers .add_ico {
/* margin-right: 0.007rem; */
}
.nav1 .concent .box2 {}
.nav1 .concent .box2 .titele {
padding-left: 0.2rem;
line-height: 0.7rem;
background: #fff;
border-bottom: 1px solid rgba(205, 205, 205, 1);
}
.nav1 .concent .box2 .info .chi_info {
background: #fff;
padding: 0.14rem 0.2rem;
margin-bottom: 0.1rem;
}
.nav1 .concent .box2 .info .chi_info .bold_text {
font-weight: bold;
color: rgba(51, 51, 51, 1);
margin-bottom: 0.22rem;
}
.nav1 .concent .box2 .info .chi_info1 {
padding-bottom: 0.3rem;
}
.nav1 .concent .box2 .info .chi_info1 .li_box {
font-size: 0.28rem;
}
.nav1 .concent .box2 .info .chi_info1 .li_box .li {
display: flex;
flex-wrap: nowrap;
margin-bottom: 0.2rem;
}
.nav1 .concent .box2 .info .chi_info1 .li_box .li .count1 {
box-sizing: border-box;
width: 1.2rem;
height: 0.56rem;
border: 1px solid rgba(0, 153, 255, 1);
margin: 0 0.2rem;
padding-left: 0.1rem;
}
.nav1 .concent .box2 .info .chi_info1 .addconditions {
text-align: center;
color: rgba(0, 153, 255, 1);
font-size: 0.28rem;
margin-top: 0.28rem;
}
.nav1 .concent .box2 .info .chi_info1 .addconditions .add_ico {
/* margin: 0.05rem; */
}
.nav1 .concent .box2 .info .chi_info1 .firm_btn {
display: flex;
justify-content: flex-end;
}
.nav1 .concent .box2 .info .chi_info1 .firm_btn .btn {
width: 1.2rem;
line-height: 0.66rem;
text-align: center;
background: rgba(0, 153, 255, 1);
color: #fff;
border-radius: 0.33rem;
}
.nav1 .concent .box2 .info .chi_info2 {}
.nav1 .concent .box2 .info .chi_info2 .iscount {}
.nav1 .concent .box2 .info .chi_info2 .iscount .count1 {
box-sizing: border-box;
width: 1.2rem;
height: 0.56rem;
border: 1px solid rgba(0, 153, 255, 1);
margin: 0 0.2rem;
padding-left: 0.1rem;
}
.nav2 .info {
padding: 0.2rem;
background: #fff;
}
.nav2 .info .topbox .li {
display: flex;
flex-wrap: nowrap;
margin-bottom: 0.38rem;
font-size: 0.28rem;
}
.nav2 .info .topbox .lastlist {
font-size: 0.3rem;
font-weight: bold;
}
.nav2 .info .topbox .lastlist .left {
flex: 1;
}
.nav2 .info .topbox .lastlist .right {
flex: 1;
}
.nav2 .info .topbox .li .left {}
.nav2 .info .topbox .li .right {
width: auto;
}
.nav2 .info .topbox .li .input1 {
box-sizing: border-box;
padding-left: 0.1rem;
width: 1.6rem;
height: 0.56rem;
border: 1px solid rgba(0, 153, 255, 1);
margin: 0 0.2rem;
}
.nav2 .info .topbox .li .input2 {
box-sizing: border-box;
padding-left: 0.1rem;
width: 1.27rem;
height: 0.56rem;
border: 1px solid rgba(0, 153, 255, 1);
margin: 0 0.2rem;
}
.nav2 .info .addconditions {
text-align: center;
color: rgba(0, 153, 255, 1);
font-size: 0.28rem;
margin-top: 0.28rem;
}
.nav2 .info .addconditions .add_ico {
/* margin: 0.05rem; */
}
.nav2 .info .firm_btn {
display: flex;
justify-content: flex-end;
}
.nav2 .info .firm_btn .btn {
width: 1.2rem;
line-height: 0.66rem;
text-align: center;
background: rgba(0, 153, 255, 1);
color: #fff;
border-radius: 0.33rem;
}
/* 弹框 */
.mask {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
}
.model {
position: fixed;
width: 5.06rem;
height: 3rem;
top: 50%;
left: 50%;
border-radius: 20px;
transform: translate(-50%, -50%);
background: #fff;
}
</style>
</head>
<body>
<div id="app">
<div class="page">
<div class="top">
<p>会员等级优惠</p>
<p>1.商户可根据不同等级会员设置相应的充值、购买优惠；</p>
<p> 2.会员等级优惠生效设备：娃娃机、兑币机、售货机。</p>
</div>
<div class="nav_box">
<li :class="nav_index==0?'active':''" @click="tab(0)">选择会员等级</li>
<li :class="nav_index==1?'active':''" @click="tab(1)">添加会员等级</li>
</div>
<div class="nav1" v-show='nav_index==0'>
<div class="concent">
<div class="box1">
<li class="list" :class="default_levelIndex==index?'active':''"
v-for="(item,index) in level_members" :key='index' @click="choose(index,item.userLevelId)">
{{item.userLevelName}}</li>
<li class="list addmembers" @click="tab(1)">
<span class="add_ico">+</span>
<span>会员等级</span>
</li>
</div>
<div class="box2">
<p class="titele">优惠设置</p>
<div class="info">
<div class="chi_info chi_info1">
<p class="bold_text">兑币机/娃娃机</p>
<div class="li_box">
<li class="li" v-for="(item,index) in preferential" :key='index'>
单笔充值满
<input class="count1" type="text" name="" id=""
oninput="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
v-model="item.userLevelPayMoney">
元再送
<input class="count1" type="text" name="" id=""
oninput="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
v-model="item.userLevelGivingMoney">
币
<button class="del"
@click="delConditions(index,item.userLevelDiscountId)">删除</button>
</li>
</div>
<div class="addconditions" @click="addconditions()">
<span class="add_ico">+</span>
<span>添加优惠条件</span>
</div>
<!-- <div class="firm_btn">
<div class="btn">确定</div>
</div> -->
</div>
<div class="chi_info chi_info2">
<p class="bold_text">售货机</p>
<div class="iscount">
购买优惠折扣
<input class="count1" type="number" name="" id="" v-model="discount" min='1'
max='9.9' step="0.01">
折
</div>
</div>
</div>
</div>
</div>
<div class="kong" style="height: 0.77rem;width:100%"></div>
<div class="bottom_btn" @click="save()">保存设置</div>
</div>
<div class="nav2" v-show='nav_index==1'>
<div class="info">
<div class="topbox">
<li class="li lastlist">
<div class="left">会员等级名称 </div>
<div class="right">达到条件</div>
</li>
<li class="li" v-for="(item,index) in add_level_members" :key='index'>
<div class="left">
<input class="input1" type="text" v-model="item.userLevelName"></div>
<div class="right">
累计消费
<input class="input2" type="text" name="" id="" v-model="item.userLevelMoney"
value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')>
元达到
<button class="del" @click="delLevelMembers(nav_index)"
v-show="!item.userLevelId">删除</button>
</div>
</li>
</div>
<div class="addconditions" @click="addLevelMembers()">
<span class="add_ico">+</span>
<span>添加会员等级</span>
</div>
<div class="firm_btn">
<div class="btn" @click="addLevel()">确定</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
nav_index: 0, //默认的nav切换
level_members: [], //可选择的数组 {userLevelId: 1, userLevelName: "普通", userLevelMoney: 20}
default_levelIndex: 0, //默认的会员等级第一个
userLevelId: 0, //默认的会员id
preferential: [], //优惠数组
discount: '', //设置的折扣 0-9.9
add_level_members: [], //添加会员等级数组
model_userLevelDiscountId: '',
model_userLevelIndex: 0,
model_IsShow: false,
},
mounted() {
this.getinfo();
// this.getinfo1();
},
methods: {
//切换tab
tab(index) {
let that = this;
that.nav_index = index;
that.getinfo() //重置会员数组
},
//选择会员等级显示不同的套餐
choose(index, userLevelId) {
let that = this;
that.default_levelIndex = index;
that.userLevelId = userLevelId;
console.log(userLevelId);
that.getinfo1(userLevelId);
},
//添加套餐
addconditions() {
let that = this;
//根据后台需要的值往数组里添加空数据
that.preferential.push({
userId: 80,
userLevelId: that.userLevelId, //会员等级id
userLevelPayMoney: '',
userLevelGivingMoney: '',
userLevelBuyDiscount: ''
});
},
//删除套餐
delConditions(index, userLevelDiscountId) {
let that = this;
that.model_userLevelDiscountId = userLevelDiscountId;
that.model_userLevelIndex = index;
$.ajax({
type: 'POST',
url: '/delectDiscount',
data: {
userLevelDiscountId: that.model_userLevelDiscountId
},
success: function (data) {
if (data.code == "100") {
console.log('删除成功')
that.preferential.splice(that.model_userLevelIndex, 1)
}
}
});
},
//添加会员
addLevelMembers() {
let that = this;
that.add_level_members.push({
userLevelName: '',
userLevelMoney: '',
userLevelBuyDiscount: ''
});
},
//删除会员
delLevelMembers(index) {
let that = this;
that.add_level_members.splice(index, 1)
},
//获取信息
getinfo() {
let that = this;
$.ajax({
type: 'GET',
url: '/getUserLevelList',
success: function (data) {
if (data.code == "100") {
that.level_members = data.extend.list;
that.add_level_members = data.extend.list;
that.userLevelId = data.extend.list[0].userLevelId;
that.getinfo1(data.extend.list[0].userLevelId)
}
}
});
},
getinfo1(userLevelId) {
let that = this;
$.ajax({
type: 'POST',
headers: {
"Content-Type": "application/json"
},
url: '/getUserLevelByLevelId',
data: JSON.stringify({
userId: "80",
userLevelId: userLevelId
}),
success: function (data) {
if (data.code == "100") {
that.preferential = data.extend.data; //优惠数组
that.discount = data.extend.data[0].userLevelBuyDiscount //折扣价格
}
}
});
},
//新增一个会员
addLevel() {
let that = this;
console.log(that.add_level_members);
for (let i = 0; i < that.add_level_members.length; i++) {
if (that.add_level_members[i].userLevelMoney === '' || that.add_level_members[i]
.userLevelName === '') {
console.log('不能输入空值')
return false;
}
}
$.ajax({
type: 'POST',
headers: {
"Content-Type": "application/json"
},
url: '/insertUserLevelList',
data: JSON.stringify(that.add_level_members),
success: function (data) {
if (data.code == "100") {
console.log(data);
}
}
});
},
//保存设置按钮
save() {
let that = this;
console.log(that.preferential)
for (let i = 0; i < that.preferential.length; i++) {
that.preferential[i].userLevelBuyDiscount = that.discount; //添加折扣字段
if (that.preferential[i].userLevelGivingMoney === '' || that.preferential[i]
.userLevelPayMoney === '' || that.preferential[i].userLevelBuyDiscount === '') {
console.log('不能输入空值')
return false;
}
}
$.ajax({
type: 'POST',
headers: {
"Content-Type": "application/json"
},
url: '/updateDiscounts', //updateDiscountList
data: JSON.stringify(that.preferential),
success: function (data) {
if (data.code == "100") {
console.log(data);
}
}
});
}
}
})
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
赞 (0)
相关推荐
-
vue2 中如何实现动态表单增删改查实例
最近项目中遇到的需求是要操作大量的表单,之前的项目中有做过这方的研究,只不过是用jquery来操作. 项目A 先简单说说以前项目A中的应用场景,可能有小伙伴儿也遇到相同的需求.A项目是公司的OA系统中有的项目,是用java的jsp渲染的页面,需求是要改成:嵌入APP中显示,前后端分离, 后端返回的内容,还不能修改, 只是后端同事做了下接口处理,返回给前端的是一大堆的表单数据. 每个表单都有多个字段表示它的属性: 是否可编辑 表单类型 (text, textarea, select, radio,
-
vue实现表单数据的增删改功能
本文实例为大家分享了vue实现表单数据增删改功能的具体代码,供大家参考,具体内容如下 图示如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu
-
Vue element商品列表的增删改功能实现
目录 介绍 基本信息 上传主图 商品信息vue富文本编辑器的配置 最后提交数据 介绍 整体和用户列表 类似 功能步骤有: 面包屑导航 外部是大的卡片组件 搜索商品 添加商品 表格渲染数据 作用域插槽用于 操作按钮 分页器组件的使用 不一样的点:之前编辑信息 新增信息是 弹出对话框编辑 但商品信息内容较多 我们跳转到一个组件.并且进行商品编辑的时候要进行路由传参 来渲染初始数据 点击添加商品按钮时跳转到新增商品组件对应路径: addGoods(){ this.$router.push('/good
-
VUE饿了么树形控件添加增删改功能的示例代码
本文介绍了VUE饿了么树形控件添加增删改功能的示例代码,分享给大家,具体如下: element-ui树形控件:地址 在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件. 写个开发的步骤,所以文章比较长emmm 大致效果如图: 1.省市API 在网上复制了个省市的list,有两个属性是新增的 isEdit :控制编辑状态 maxexpandId :为现下id的最大值 export default{
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
在上篇文章给大家介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一),接下来我们添加分页相关的依赖,时间紧张,直接上代码了,贴上我的pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
环境搭建 spring boot的简介 以往我们开发时用到spring总是避免不了繁琐的配置,例如我们要配置一个数据库连接,可能需要以下几步: 1.编写jdbc.properties配置文件: 2.创建spring的配置文件,加入spring配置文件前缀.配置数据库连接信息以及sqlsessionFactory等等: 3.还要在web.xml文件中加入spring的监听. springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置),让我们专注于应用功能的开发,而不是
-
vue实现节点增删改功能
本文实例为大家分享了vue实现节点增删改功能的具体代码,供大家参考,具体内容如下 效果: 增删改功能 tree.vue组件代码: <template> <div> <div class="all-div" v-if="model.name"> <div class="itemRow" :style="{ marginLeft:model.level*20+'px' }"> <
-
VUE v-model表单数据双向绑定完整示例
本文实例讲述了VUE v-model表单数据双向绑定.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue v-model双向绑定</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></s
-
vue实现表单数据验证的实例代码
为el-form表单添加:rules 在data中定义规则 将定义的规则绑定在el-form-item 代码如下: <!--登录表单区域--> <el-form :model="loginForm" label-width="0px" class="login_form" :rules="loginFormRules"> <!--用户名--> <el-form-item prop=&q
-
SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例
目录 一.开发工具 二.项目结构 三.编写项目 四.运行项目 由于是初学Vue.Axios,可能在界面和功能上存在着一些问题,但这些并不妨碍使用.如果有对编程感兴趣的朋友,可以试着做一做.这个由于是第一次做,不太熟练.在后续的过程中会不断的完善. 一.开发工具 IntelliJ IDEA Ultimate 2021.1 apache-maven-3.5.4 MySQL5.7 JDK 1.8.0_281 二.项目结构 三.编写项目 1.创建数据库 SET NAMES utf8mb4; SET FO
-
Vue 收集表单数据方法详情
表单收集数据代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue初识</title> <script type="text/javascript" src="./js/vue.js"></script> </head>