vue 的首次使用 记录

最新推荐文章于 2023-02-03 17:39:27 发布
最新推荐文章于 2023-02-03 17:39:27 发布
阅读量130 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kxukai/article/details/103528100
版权 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>代理商管理-代理商列表 </title>
    <link rel="stylesheet" href="__STATIC__/css/element.index.css">
    <link rel="stylesheet" href="__STATIC__/sagent/layui/css/layui.css">
    <link rel="stylesheet" href="__STATIC__/sagent/layui/css/admin.css">
    <style>
        .el-select {
            width: 30%;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }

        .left_Line {
            height: 24px;
            line-height: 24px;
            padding-left: 5px;
            border-left: 2px solid #409eff;
            margin-bottom: 20px;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>

<body>
<div id="page">
    <div class="layui-fluid">
        <div id="eletest" element-loading-text="拼命执行中" element-loading-spinner="el-icon-loading">
            <div class="el-card is-always-shadow">
                <!---->
                <input type="hidden" name="id" value="{$id}">
                <div class="el-card__body">

                    {if condition="!empty($id)"}
                    <div class="left_Line">编辑代理商</div>
                    {else/}
                    <div class="left_Line">添加代理商</div>
                    {/if}

                    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" style="width: 75%;">
                        <el-form-item label="代理商名称" prop="name">
                            <el-input v-model="form.name" style="width: 380px;" placeholder="请输入代理商名称"></el-input>
                        </el-form-item>
                        <el-form-item label="是否签约" prop="sign">
                            <el-select v-model="form.sign" placeholder="是否签约">
                                <el-option label="待签约" value="2"></el-option>
                                <el-option label="已签约" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="合作类型" prop="type">
                            <el-select v-model="form.type" placeholder="请选择合作类型">
                                <el-option label="间连" value="1"></el-option>
                                <el-option label="直连" value="2"></el-option>
                                <el-option label="间直连" value="3"></el-option>
                            </el-select>
                            <!--                            <el-select v-model="form.hezuo.zhi" placeholder="请选择支付通道">-->
                            <!--                                <el-option label="全部" value="quanbu"></el-option>-->
                            <!--                                <el-option label="新大陆" value="xindal"></el-option>-->
                            <!--                                <el-option label="云闪付" value="yunshanfu"></el-option>-->
                            <!--                            </el-select>-->

                        </el-form-item>

                        <!---->
                        <!---->
                        <el-form-item label="微信费率" prop="wxpay">
                            <el-input type="number" v-model="form.wxpay" style="width: 380px;"
                                      placeholder="百分比0.2~0.6之间"></el-input>
                            <span style="color: red; margin-left: 5px;">%</span>
                        </el-form-item>
                        <el-form-item label="支付宝费率" prop="alipay">
                            <el-input v-model="form.alipay" style="width: 380px;"
                                      placeholder="百分比0.2~0.6之间"></el-input>
                            <span style="color: red; margin-left: 5px;">%</span>
                        </el-form-item>
                        <el-form-item label="联系人名称" prop="real_name">
                            <el-input v-model="form.real_name" style="width: 380px;" placeholder="请输入联系人名称"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话" prop="phone">
                            <el-input type="number" v-model="form.phone" style="width: 380px;"
                                      placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" prop="district_name" prop="city_name" prop="province_name">
                            <el-select @change="changecity" v-model="form.province_name" placeholder="请选择经营省份">
                                <el-option
                                        v-for="v in form.province"
                                        :label="v.city_name"
                                        :value="v.cityid"></el-option>
                            </el-select>
                            <el-select @change="changeprovince_name" v-model="form.city_name" placeholder="请选择市">
                                <el-option
                                        v-for="v in form.city"
                                        :label="v.city_name"
                                        :value="v.cityid"></el-option>
                            </el-select>
                            <el-select v-model="form.district_name" placeholder="请选择经营县/区">
                                <el-option v-for="v in form.district"
                                           :label="v.city_name"
                                           :value="v.cityid"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="address">
                            <el-input v-model="form.address" style="width: 380px;"
                                      placeholder="请输入详细地址"></el-input>
                        </el-form-item>
                        <el-form-item label="永久有效" prop="iseffective">
                            <el-switch v-model="form.iseffective"
                                       :active-value='1'
                                       :inactive-value='2'
                            ></el-switch>
                        </el-form-item>

                        <el-form-item v-if="form.iseffective==1" hidden label="有效期">
                            <el-date-picker style="width: 380px;" v-model="form.begin_end" type="daterange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item prop="begin_end" v-else label="有效期">
                            <el-date-picker style="width: 380px;" v-model="form.begin_end" type="daterange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>


                        <el-form-item label="提现银行" prop="bank">
                            <el-select v-model="form.bank" placeholder="请选择提现银行">
                                <el-option
                                        v-for="v in form.banklist"
                                        :label="v.bank_name"
                                        :value="v.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="持卡人" prop="bank_name">
                            <el-input v-model="form.bank_name" style="width: 380px;" placeholder="请输入持卡人"></el-input>
                        </el-form-item>
                        <el-form-item label="银行卡号" prop="bankcard">
                            <el-input type="number" v-model="form.bankcard" style="width: 380px;"
                                      placeholder="请输入银行卡号"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号码" prop="id_card">
                            <el-input type="number" v-model="form.id_card" style="width: 380px;"
                                      placeholder="请输入身份证号码"></el-input>
                        </el-form-item>
                        <div class="el-input">
                            <!----><input type="hidden" autocomplete="off" class="el-input__inner">
                            <!---->
                            <!---->
                            <!---->
                            <!---->
                        </div>
                        <div class="el-form-item el-form-item--medium">
                            <!---->
                            <div class="el-form-item__content" style="margin-left: 115px;">
                                <button @click="add('ruleForm')" type="button"
                                        class="el-button el-button--primary el-button--small"><!---->
                                    <!----><span>确定</span></button>
                                <button type="button" class="el-button el-button--default el-button--small"
                                        data-url="{:url('index')}"><!----><!----><span>取消</span></button>
                                <!---->
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="__STATIC__/sagent/js/public/vue.js"></script>
<script src="__STATIC__/sagent/js/public/element.index.js"></script>
<script src="__STATIC__/sagent/js/public/jquery.min.js"></script>
<script src="__STATIC__/sagent/js/public/pub.js"></script>
<script src="__STATIC__/sagent/layui/lay/modules/layer.js"></script>
<script>
    new Vue({
        el: '#page',
        data: function () {
            var wx = (rule, value, callback) => {
                if (value >= 0.2 && value <= 0.6) {
                    callback();
                } else {
                    callback(new Error('百分比0.2 ~ 0.6 之间'));
                }
            };

            var phone = (rule, value, callback) => {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('请输入正确的手机号'));
                }


            };
            return {
                form: {
                    name: '',
                    sign: '',
                    type: '',
                    wxpay: '',
                    alipay: '',
                    real_name: '',
                    phone: '',
                    province_name: '',
                    city_name: '',
                    district_name: '',
                    province: '',
                    city: '',
                    district: '',
                    address: '',
                    iseffective: '',
                    begintime: '',
                    endtime: '',
                    banklist: '',
                    bank: '',
                    bank_name: '',
                    bankcard: '',
                    id_card: '',
                },

                rules: {
                    name: [
                        {required: true, message: '请输入代理商名称', trigger: 'blur'}
                    ],
                    sign:
                        [
                            {required: true, message: '请选择是否签约', trigger: 'blur'}
                        ],
                    type:
                        [
                            {required: true, message: '请选择合作类型', trigger: 'blur'}
                        ],
                    wxpay:
                        [
                            {validator: wx, trigger: 'blur'},
                            {required: true, message: '请输入微信费率', trigger: 'blur'},
                        ],
                    alipay:
                        [
                            {validator: wx, trigger: 'blur'},
                            {required: true, message: '请输入支付宝费率', trigger: 'blur'},
                        ],
                    real_name:
                        [
                            {required: true, message: '请输入联系人名称', trigger: 'blur'}
                        ],
                    phone:
                        [
                            {validator: phone, trigger: 'blur'},
                            {required: true, message: '请输入联系电话', trigger: 'blur'}
                        ],
                    province_name: [
                        {required: true, message: '请输入地址', trigger: 'blur'}
                    ],
                    city_name: [
                        {required: true, message: '请输入地址', trigger: 'blur'}
                    ],
                    district_name: [
                        {required: true, message: '请输入地址', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'}
                    ],
                    iseffective: [
                        {required: true, message: '请选择有效期限', trigger: 'blur'}
                    ],
                    begin_end: [
                        {required: true, message: '请选择时间', trigger: 'change'}
                    ],
                    bank: [
                        {required: true, message: '请选择提现银行', trigger: 'blur'}
                    ],
                    bank_name: [
                        {required: true, message: '请选择持卡人', trigger: 'blur'}
                    ],
                    bankcard: [
                        {required: true, message: '请选择银行卡号', trigger: 'blur'}
                    ],
                    id_card: [
                        {required: true, message: '请选择身份证号码', trigger: 'blur'}
                    ],
                }
            }
        },
        //页面加载时触发的函数
        mounted: function () {
            this.adddata();
            this.banklist();
            this.editdata();
        },
        methods: {
            adddata: function () {
                var that = this;
                $.ajax({
                    type: "post",
                    data: {cityid: ''},
                    url: "{:url('agent/adddata')}",
                    success: function (data) {
                        that.form.province = data;
                    },
                });
            },

            changecity: function () {
                var that = this;
                $.ajax({
                    type: "post",
                    data: {cityid: that.form.province_name},
                    url: "{:url('agent/adddata')}",
                    success: function (data) {
                        that.form.city = data;
                        that.form.city_name = '';
                    },
                });
            },

            changeprovince_name: function () {
                var that = this;
                $.ajax({
                    type: "post",
                    data: {cityid: that.form.city_name},
                    url: "{:url('agent/adddata')}",
                    success: function (data) {
                        that.form.district = data;
                        that.form.district_name = '';
                    },
                });
            },

            banklist: function () {
                var that = this;
                $.ajax({
                    type: "post",
                    url: "{:url('agent/bank')}",
                    success: function (data) {
                        that.form.banklist = data;
                    },
                });
            },

            add: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //验证通过
                        // console.log(this.form);
                        //
                        if (this.form.iseffective === 2) {
                            d = this.form.begin_end[0];
                            d1 = this.form.begin_end[1];

                            function timeAdd0(num) {
                                str = num.toString();
                                if (str.length <= 1) {
                                    str = '0' + str;
                                }
                                return str
                            }

                                console.log(this.form.begin_end);
                            if (this.form.begin_end[0] === undefined ||this.form.begin_end[1] === undefined ) {
                                return layer.alert('请输入时间');
                            }

                            time = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + timeAdd0(d.getDate()) + ' ';
                            time1 = d1.getFullYear() + '-' + (d1.getMonth() + 1) + '-' + timeAdd0(d.getDate()) + ' ';
                            var begin_end = time + time1;
                        } else {
                            var begin_end = this.form.begin_end;
                        }

                        $.ajax({
                            type: "post",
                            url: "{:url('agent/doadd')}",
                            data: {
                                // form:this.form
                                id: $("input[name='id']").val(),
                                name: this.form.name,
                                sign: this.form.sign,
                                type: this.form.type,
                                wxpay: this.form.wxpay,
                                alipay: this.form.alipay,
                                real_name: this.form.real_name,
                                phone: this.form.phone,
                                province_name: this.form.province_name,
                                city_name: this.form.city_name,
                                district_name: this.form.district_name,
                                address: this.form.address,
                                iseffective: this.form.iseffective,
                                begin_end: begin_end,
                                bank: this.form.bank,
                                bank_name: this.form.bank_name,
                                bankcard: this.form.bankcard,
                                id_card: this.form.id_card,
                            },
                            success: function (data) {
                                if (data.code) {
                                    layer.alert(data.msg, function () {
                                        window.location.href = 'index';

                                    });
                                } else {
                                    layer.alert(data.msg);
                                }
                            },
                        });
                    } else {
                        //验证未通过
                        return false;
                    }
                })

            },
            editdata: function () {
                var id = $("input[name='id']").val();
                var that = this;
                that.$options.methods.adddata();
                $.ajax({
                    type: "post",
                    data: {
                        id: id
                    },
                    url: "{:url('agent/editdata')}",
                    success: function (data) {
                        data['begin_end'] = [that.parserDate(data['begintime']), that.parserDate(data['endtime'])];
                        that.form = data;
                    },
                });
            },
            parserDate: function (date) {

                var t = Date.parse(date)
                if (!isNaN(t)) {
                    return new Date(Date.parse(date.replace(/-/g, '/')))
                }
            }
        }
    })
</script>
</html>
kxukai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue初次使用
zheng_li_dong的博客
05-25 324
Vue.js第一次使用 什么是框架？什么是库？ 框架是有一套自己的生态系统的 库是没有自己的生态系统的， 它就是一个工具 jsx( javascript + xml ) 总结vue.js第一次使用 使用script标签引入Vue.js 实例化全局暴露的变量Vue构造器函数得到一个实例 配置Vue构造器函数中的配置项，一个配置项一个功能 el -...
学习记录——vue基本使用
sakura_zr的博客
12-25 171
Vue：渐进式javascript框架 官网：https://cn.vuejs.org/ 通过模板语法来实现dom的渲染 操作的是虚拟dom 数据驱动视图 （数据改变 试图就跟着改变） 摒弃了原始的dom操作 双向绑定 Vue的基本使用步骤： 1. 需要提供标签用于填充数据 2. 引入vue.js库文件 3.可以使用vue的语法做功能了 4. 把vue提供的数据填充到标签里面（指的是第一步提供的标签） <div id='app'> {{msg}} </div> { { } }插值表达
vue实现用户获取浏览记录功能
Hoodps的专栏
09-25 6430
在路由配置文件设置一个属性用来判断当前路由是否需要记录，如要记录当前路由设置为ture memoryRouter: false //是否记忆当前路由为常用工具 { path: '/helloWorld', name: 'HelloWorld', component: HelloWorld, meta: { ...
elementui//el-card全局去阴影
weixin_37877794的博客
09-12 3050
src/styles/index.scss .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{ box-shadow: none; }
Vuejs 记忆细点
圣人男的博客
03-15 271
1.冒号前缀 export default { data(){ return { item: { src: 'xxxxx' } } } } <img :src='item.src'> 说明 img标签的src属性是动态的，根据你的data里...
el-card取消阴影样式；element卡片取消鼠标滑过的阴影样式
qq_45349764的博客
09-02 2039
el-card取消阴影样式；element卡片取消鼠标滑过的阴影样式
28个Vue知识点，必会!!!
liushihao_的博客
07-31 1065
1.Vue的优点? vue的缺点? 优点:渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开缺点:单页面不利于seo，不支持IE8以下，首屏加载时间长 2.为什么说Vue是一个渐进式框架? 渐进式:通俗点讲就是，你想用啥你就用啥，咱也不强求你。你想用component就用，不用也行，你想用vuex就用，不用也可以 3. Vue跟React的异同点? 相同点: 1.都使用了虚拟dom 2.组件化开发 3.都是单向数据流(父子组件之间，不建议子修改父传下来的数据) 4.都支持服务端
ant design vue 锚点使用 Anchor 踩坑记录.pdf
12-16
首先，要使用`Anchor`组件，我们需要在Vue项目中引入Ant Design Vue库，并确保已经正确配置。在`main.js`或相应的配置文件中添加以下代码： ```javascript import Vue from 'vue'; import Antd from 'ant-design-...
vue系列 —— vue-route详细使用方法
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
在vue项目创建的后初始化首次使用stylus安装方法分享
08-28
当提及在Vue项目创建后的初始化阶段，通常指的是在使用Vue CLI（Vue的官方命令行工具）创建项目骨架之后的初次配置。这个阶段包括安装必要的依赖、配置必要的加载器和插件，以及可能进行的项目结构调整。 2. Vue ...
vue3 路由的使用
最新发布
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
初次使用webstrom简单创建vue项目的一些报错记录
lamuleimu的博客
07-15 1141
webstrom使用webpack报错记录，包括打包和loader的一些坑，含具体解决方法和部分解析.........
element ui --- 修改样式
唯心所现，唯识所变
08-06 1890
我使用的是按钮选项，然后需要修改成卡片式的样式 修改后如下： <el-radio-group @change="changeComponent" v-model="tabSelected" style="margin-bottom: 30px;" > <el-radio-button label="all"> <div class="cardTe
element-ui element-plus card - 分析
huxianc的博客
12-10 2323
源代码地址 version:element-plus 1.0.1-beta.0 <template> <div> <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'"> <!-- header 插槽 --> <!-- 这里具名插槽优先级高于属性方式 --> <div v.
Element-UI 使用心得之el-card
热门推荐
圣人男的博客
03-15 7万+
el-card 是Element-UI 内置的卡片组件，使用起来很方便，但是对Vuejs和html 不是精通的话，根据自己的要求布局，会出现自己的小困惑，必须添加垂直居中，按照CSS 布局设置，总是 不起作用，与其费力搜寻办法，不如自己简单白痴的去设置一下 1.鼠标放上去有一个动画效果： .el-card { min-width: 380px; margin-rig...
element card源码
weixin_30352645的博客
05-24 265
<template> <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'"> <div class="el-card__header" v-if="$slots.header || header"> <s...
Vue组件介绍
Isshadowmu的博客
02-22 266
@Vue组件 1:使用Vue.component定义组件 a: 组件名称需要小写 b: data数据后面接函数 里面返回一个对象 做为组件的数据源 c:template表示页面要显示的内容 里面可以使用data中的属性绑定数据 也可以使用外部传入的数据 接受外部传入的数据使用props 可以的属性也可以是对象 props:[“外部传入的数据名称”] Vue.component(“myname...
vue兼容IE11浏览器空白页等一系列问题之踩坑全过程
deciduous_leaves的博客
03-31 4689
兼容IE对于一个菜鸡前端来说，简直是噩梦般的存在。我先哭为敬！😭😭😭 好了，话不多说，摸索中解决问题之路即将开启，我们准备出发～👊（建议将文章全部看完之后再进行尝试，因为中间有很多尝试没有成功） 重要提醒： 1、改完代码记得清浏览器缓存，再去看结果，尤其是在坚信自己写得没错的时候，不行就把浏览器关了再打开（好几次都是清完缓存没反应，关了重新打开就好了，就很迷） 2、安装依赖时能用npm就别用cnpm，别问我为什么🙄️ 问题产生原因及解决思路：IE浏览器不能显示vue页面，主要原因是IE无法读取es
element表单验证中的 手机号和身份证 验证
Embrace924的博客
10-16 2万+
手机号和身份证 正则表达式： <el-form-item label="电话" prop="customerTel"> <el-input v-model.number="orderMessage.customerTel"></el-input&gt...
Vue3.0入门教程：微信支付与Git操作
"Vue3.0笔记包含了对Vue3的新特性和使用方法的记录，特别是关注于`setup`函数和响应式系统的变化。此外，还提及了Git操作和微信支付的相关辅助工具。" Vue3.0是Vue.js框架的一个重大更新，引入了许多新特性和改进。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值