vue实现表单数据的增删改功能
2022-04-17 11:23:48 来源：易采站长站 作者：
本文实例为大家分享了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 {sYwDnyFUKQ 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 www.easck.com.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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
暂时禁止评论
最新图文推荐
123
闽公网安备 35020302000061号
