小程序随心笔记

L824627453

已于 2024-11-15 16:41:03 修改

阅读量300

点赞数

文章标签：小程序 javascript 前端

于 2022-02-18 17:20:34 首次发布

本文链接：https://blog.csdn.net/L824627453/article/details/123006245

版权

页面wxml：

<!-- 栏目 -->
    <view class="tap-view">
      <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">激活</view>  
      <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">关闭</view>  
    </view>
    <!-- 内容区域 -->
    <swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" mode="widthFix">
      <!-- 激活 -->
      <swiper-item class="RaiseDetailAct" catchtouchmove="stopTouchMove"> 
        <scroll-view scroll-y="{{true}}" style="height: 100%;" bindscroll="scroll" bindscrolltolower="reactBottom" scroll-with-animation scroll-top="0rpx" bindscrolltolower="scrollbot">
          <!-- 点击进去认购详情 -->
          <view class="customNews" bindtap="partRaise" wx:for="{{raiseDetails_list}}" wx:key="{{item}}" >
            <view class="customTitle">{{item.project_info.project_name+" "+item.room_info.room_building+" "+item.room_info.room_unit+" "+item.room_info.room_number}}</view>  
            <view class="customName">
              <view class="customNameDec">客户姓名 :</view>
              <view class="customName_value">{{item.project_client.client_name}}</view>
            </view> 
            <view class="counselorName">
              <view class="counselorNameDec">置业顾问姓名 :</view>
              <view class="counselorName_value">{{item.user_info.truename}}</view>
            </view> 
            <view class="price">
              <view class="priceName">协议总价 :</view>
              <view class="priceNum">{{item.x_total_price}}</view> 
            </view>
            <view class="setTime">
              <view class="setTimeName">创建时间 :</view>
              <view class="setTimeFirst">{{item.create_time}}</view>
            </view>
          </view> 
        </scroll-view>
      </swiper-item>  
      <!-- 关闭 -->
      <swiper-item class="RaiseDetailClose" catchtouchmove="stopTouchMove">  
        <scroll-view scroll-y="{{true}}" style="height: 100%;" bindscroll="scroll" bindscrolltolower="reactBottom" scroll-with-animation scroll-top="0rpx" bindscrolltolower="scrollbot">
          <view class="customNews" bindtap="partRaise" wx:for="{{raiseDetailsCloseList}}" wx:key="{{item}}" >
            <view class="customTitle">{{item.project_info.project_name+" "+item.room_info.room_building+" "+item.room_info.room_unit+" "+item.room_info.room_number}}</view>  
            <view class="customName">
              <view class="customNameDec">客户姓名 :</view>
              <view class="customName_value">{{item.project_client.client_name}}</view>
            </view> 
            <view class="counselorName">
              <view class="counselorNameDec">置业顾问姓名 :</view>
              <view class="counselorName_value">{{item.user_info.truename}}</view>
            </view> 
            <view class="price">
              <view class="priceName">协议总价 :</view>
              <view class="priceNum">{{item.x_total_price}}</view> 
            </view>
            <view class="setTime">
              <view class="setTimeName">创建时间 :</view>
              <view class="setTimeFirst">{{item.create_time}}</view>
            </view>
          </view> 
        </scroll-view>
      </swiper-item>   
    </swiper>

//页面js

//跳转页面
 partRaise:function(){
      wx.navigateTo({
        url: '../detailChild/detailChild',
      })
    } 

//跳转页面2.0写法
<view class="" bindTap="aa" data-type="2">

</view>
//js文件
Page({

    /**
     * 页面的初始数据
     */
data: {
      businessType:0,
    },
onLoad: function (options) {
      console.log(options);
        _this.businessType = options.businessType
}
//更改接口传值
 app.wxPost("/api/getTeamRoom",{project_id:project_id,type:_this.businessType,close:close},


aa:function(e){
    let _this = this;
    let _type = e.target.dataset.type  //type是一个可以随意命名的名字，type改了data-type也要改
    wx.navigateTo({
        url: '../detailChild/detailChild?type='+_type,
      })
}

swiper-item由于微信自带150px剪切，需要添加滚动条组件加载过长的内容

//swiper滚动条
    swiperchange: function(e) {
      var _this = this 
      console.log(e.detail.current) 
      that.setData({
        'currentTab': e.detail.current
      })
    },
// swiper-item禁止滑动
<swiper-item class="RaiseDetailAct" catchtouchmove="stopTouchMove"> 
        <scroll-view scroll-y="{{true}}" style="height: 100%;" bindscroll="scroll" bindscrolltolower="reactBottom" scroll-with-animation scroll-top="0rpx" bindscrolltolower="scrollbot">
内容内容
        </scroll-view>
</swiper-item>

如果swiper-item需要绑定数据，需要获得它的currentTab（切换的索引值）

 // 内容区域
    bindChange:function(e) {
      //滑动切换tab
      var _this = this;  
      _this.setData( { currentTab: e.detail.current }); 
    },
    swichNav:function( e ) {  
      //点击tab切换数据
      var _this = this;  
      console.log("swiper-item-activeIndex:"+this.data.currentTab);
      if(this.data.currentTab == 1){
        let project_id = wx.getStorageSync("project_id");
        project_id=9;
        console.log("roomRaiseDetail--id:"+project_id)
        let close=0;
        // console.log(project_id)
        // app.wxPost("api/getRoomSale",{room_id:this.data.room_id},
        app.wxPost("/api/getTeamRoom",{project_id:project_id,type:app.businessType,close:close},
        function (res) {
            console.log(res)
            if(res.code == 0){
              console.log(res.message)
              _this.setData({
                raiseDetails_list:res.data,
              })
              console.log("res-data:"+res.data);
            }
            else if(res.code > 0){
              alert(res.message)
            }
        })
      }else{
        let project_id = wx.getStorageSync("project_id");
        project_id=9;
        let close=1;
        // console.log(project_id)
        app.wxPost("/api/getTeamRoom",{project_id:project_id,type:app.businessType,close:close},
        function (res) {
            console.log(res)
            if(res.code == 0){
              console.log(res.message)
              _this.setData({
                raiseDetailsCloseList:res.data,
              })
            }
            else if(res.code > 0){
              alert(res.message)
            }
        })
      }
      //点击Tab滑动更改Tab内容
      if( this.data.currentTab === e.target.dataset.current ) {
        return false;  
      } else {  
        _this.setData( {  
          currentTab: e.target.dataset.current,
        })  
      }  
    },

页面第一次加载的时候是有数据的，因此在js之中show那里应该加载一次，点击切换之后需要重新加载一次，如果有两个item就是需要加载1+2次（写三遍）（前提是页面是变化的，并且需要渲染的页面是一个需要循环的列表，根据后端接口来写）

 onShow: function () {
      let _this=this;
      // 栏目内容
      wx.getSystemInfo( {  
        success: function( res ) {  
          let windowHeight = res.windowHeight
          _this.setData( {  
           //winWidth: res.windowWidth,  
            winHeight: res.windowHeight  
          });  
           //接口
          let project_id = wx.getStorageSync("project_id");
           // project_id是变化的测试时设置为9
          project_id=9;
          let close=0;
        
          app.wxPost("/api/getTeamRoom",{project_id:project_id,type:app.businessType,close:close},
          function (res) {
              console.log(res)
              if(res.code == 0){
                //成功获取数据
                console.log(res.message)
                _this.setData({
                  raiseDetails_list:res.data,
                })
                console.log("res-data:"+res.data);
              }
              else if(res.code > 0){
                // code>0 时返回数据失败，弹出message
                alert(res.message)
              }
          })
        }  
      });
     

    },

小程序开发之弹出框 - 狗尾草的博客 - 博客园小程序开发过程中，很多地方为了便利我们多采用小程序自带弹出框来实现交互效果。这也够大多数开发使用，下面我给大家详细介绍下小程序弹出框官方api传送门：https://developers.weixihttps://www.cnblogs.com/bgwhite/p/9335648.html

wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
        success: function(res) {
          if (res.confirm) 
          {
          console.log('用户点击确定')
          _this.data.newPopMsg.push(_data) 
          console.log(_this.data.newPopMsg);
              _this.setData({
                newPopMsg:_this.data.newPopMsg,
                closePopWindow:true //关闭弹窗
              });
          }
          else if (res.cancel) {
              _this.setData({
                closePopWindow:false //打开弹窗
              });
          }
        }
      })

微信小程序的事件绑定https://www.cnblogs.com/edwardwzw/p/12344739.html

//小程序配置绑定

全局配置 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

//配置npm 使用组件库

//project.config.json
"packNpmManually": true,
        "packNpmRelationList": [
            {
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./TEST/"
              }
        ],

在配置npm 首先安装npm

npm init

npm install

安装组件库的命令，例如：npm i @vant/weapp -S --production

// 小程序之中的函数传值的e是页面传过来的索引值，可以自己定义。

// this是js页面之中的data，写表单判断是否为空的时候，判断在接口外面写。接口之中传值需要把自己页面上的值传到接口指定的值之中

//小程序之中获取input的下标（需求：能够后台修改传过来的值并且再次提交，提交的数据格式是数组）

  <view class="lianxi" wx:for="{{lianxilist}}" wx:key="item" data-id="{{item.id}}">

    <input type="number" maxlength="11" placeholder="请输入联系电话" class="customPhone3 pos-ab" id="customPhone{{index}}" value="{{lianxiPhone2}}"  bindinput="tijiao_lianxiPhone2"/>

  </view>

//在表单循环的前提下， input id下面的可以使动态的值，用于当做索引值（下标）


  tijiao_lianxiName:function(e){
        let _this = this;
        _this.setData({
            lianxiName2: e.detail.value
         })
         console.log(e)
         let sub =  e.target.id.substring(10); //删除下标值以外的字符
         _this.data.lianxiList[sub].name = e.detail.value; //把input里面对应的值赋值过去
       
    },

//自定义导航优化版

手把手教你怎么实现微信小程序自定义底部导航栏 - 鸿网互联

//小程序与h5之间的通讯

（疑难杂症1：接收不到参数，更换更高版本解决了）

<view class="container" style="height: {{scrollHeight+'px'}};">
    <!-- <web-view src="https://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fcgi-bin%2Fhome%3Ft%3Dhome%2Findex%26lang%3Dzh_CN%26token%3D163494604" bindmessage="receiveMessage" class="page_index"></web-view> -->
    <!-- <web-view src="https://wx.whyimingkeji.com/wx/wxtest01/20230411loushu/index.html?url=2" bindmessage="receiveMessage" class="page_index"></web-view> -->

    <web-view src="{{link_url}}" bindmessage="receiveMessage" class="page_index"></web-view>

</view>

  receiveMessage:function(e){
    //接收H5传过来的数据
    let data = e.detail;
    console.log(data,"h5h5h5");
    // wx.navigateTo({
    //   url: '../my_duihuan/my_duihuan',
    // })
  },

h5 H5[网页向小程序postlessage 时，会在特定时机(小程序后退、组件销毁、分享) 触发并收到消息]

<script type="text/javascript">

wx.miniprogram.navigateBack((delta: 11)

wx.miniprogram.postMessage({ data:获取成功)

</script>

//微信封装共用组件

微信小程序学习之template模板的使用_微信小程序 template data_井底的蜗牛的博客-CSDN博客

商店

templete文件夹
<template name="userItem">
    <view class="nav_top">
        <view class="head_div ">
            <image src="{{head_img}}" class="head_img" />
        </view>
        <view class="user_info_txt">
            <view class="u1">
                <view class="user_name_txt"> {{nickname}} </view>
                <view class="user_id_txt"> （{{id}}） </view>
            </view>
            <view class="u2" wx:if="{{user_auth == true}}">
                <view class="user_num_txt"> 积分: {{integral}} </view>
                <view class="user_num_txt"> 免费次数: {{free_num}} </view>
                <view class="user_date_txt"> 会员截止日期: {{expiration_time}} </view>
            </view>
        </view>
        <view class="daka_view">
            <image src="https://taluo.whyimingkeji.com/resources/static/images/daka_icon.png?v=1.3" class="daka_img" />
            <text>每日打卡</text>
        </view>
    </view>
</template>

//wxml
<template is="userItem" data="{{...userInfo}}"/> 
//写法2
<template is="title_view" data="{{title:'每日疗愈',type:1,daka_img_bg:daka_img_bg}}"/>
//写法3
<view wx:for="{{studentList}}">
    <template is="{{flag?'list':'text_list'}}" data="{{...item}}"></template>
</view>
//js 文件是需要在使用模板内的js文件之中使用的，wxss也需要引用

//小程序左侧导航栏

微信小程序---点餐小程序左侧滑动菜单实现_chihaihai的博客-CSDN博客

//下拉刷新

<scroll-view scroll-y="true" bindscrolltolower="bindDownLoad" wx:if="{{menuArr.shops.length > 0}}"    scroll-with-animation="true" bindscroll="rightScroll" scroll-into-view="{{rightId}}"
     class="menuRight_list">
        <view class="goods">
        <!-- 列表内容 -->
        <view wx:for="{{menuArr.shops}}" wx:key="*this" wx:for-item="goods" class="goodsContent" data-id="{{goods.id}}">
          <view class="orderDishes marTop20 disF">
            <image src="{{goods.images}}" class="border-radius-20"></image>
            <view class="goodsInfo_view disF">
              <view class="goodsInfo font_size_32">
                 {{goods.title}}
              </view>
              <!-- <view class="goodsInfo">规格：{{goods.unit}}</view> -->
              <view class="goodsInfo goodsInfoPrice font_size_24">
                ￥<span class="font_size_32">{{goods.discount_price}}</span>元
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 2222 -->
      <view class="pz_list_txt marTop20" wx:if="{{menuArr.shops.length > 0}}">
            亲，没有更多数据了哦~
        </view>
        <view wx:if="{{ !isLoading && !menuArr.shops.length}}" class="pz_list_txt marTop20" >
            <image src="{{nomore}}" alt=""/>
            <text class="cont marTop60">亲, 没有相关内容</text>
        </view>
    </scroll-view>



//js

data({
    select_type: 0, // page：当前页--
           l_page: 0,
        no_more: false, 
        isLoading: true, 
        list_page: 1, 
        limit:10,
        last_page:1,

})
//数据列表
 getShopList:function(page = 1,limit = 10,pid,class_id,select_type){
    let that = this;
    that.data.list_page = page
    $get_api.shopChildList({ 
        pid:pid,
        page:page,
        limit:limit,
        class_id:class_id,
        select_type:select_type
    }).then(r => { 
        let data = r.data.data;
        console.log(data,"获取右侧分类成功");
        that.data.menuArr.shops = [];
        that.data.menuArr.shops = data.info;
        that.data.last_page = Math.ceil(data.count / that.data.limit); // 当前数据条数/当前的页数，向上去整
        that.setData({
            'menuArr.shops':that.data.menuArr.shops,
        })
    })
  },

//滚动刷新方法
  bindDownLoad() {
    let that = this;
    if (that.data.list_page >= that.data.last_page) {
      that.setData({
        no_more: true
      });
      return false;
    }
    this.getGoodsList(true, ++that.data.list_page,that.data.limit);
  },

 //下拉刷新
  getGoodsList(isPage, list_page, limit ) {
    let _this = this;
    $get_api.shopChildList({ 
        page: list_page || 1,
        limit:limit,
    }).then(r => { 
        let resList = r.data.data;
        let dataList = _this.data.menuArr.shops;
        let arr = resList.info;
        console.log(arr,"arr"); //检查数据是否追加成功
        if (isPage == true) {
        _this.setData({
            'menuArr.shops': dataList.concat(arr),
            isLoading: false,
        });
        } else {
        _this.setData({
            'menuArr.shops': resList.list,
            isLoading: false,
            
        });
        }
        if (_this.data.list_page >= _this.data.last_page) {
        this.setData({
            no_more: true
        });
        }
    })
  },


/*
wxss样式*/




.menuRight {
    height: 100vh;
    width: 75%;
  }
  .menuRight_list {
    width: 100%;
    height: 90vh;
  }
  
  .menuRight_list .goods{
    padding: 10rpx;
  }
  
  
  
  .menuRight_list .goods .goodsContent .orderDishes image{
    width: 220rpx;
    height: 225rpx;
  }
  
  
  .menuRight_list .goods .goodsContent text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .orderDishes{
    padding-top: 20rpx;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .add{
    margin-left: 40rpx;
    margin-top: 10rpx;
    width: 120rpx;
    font-size: 40rpx;
    font-weight: 600;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    background-color: rgb(219, 80, 55);
    border-radius: 20rpx;
    color: rgb(255, 255, 255);
  }
  .goodsInfo_view {
      width: 300rpx;
      height: 225rpx;
      flex-wrap: wrap;
      overflow: hidden;
  }
  .goodsInfo_view .goodsInfo{
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgb(0, 0, 0);
  }
  .goodsInfoPrice {
      margin-right: 20rpx;
      text-align: right;
  }
  .goodsInfoPrice span{
    color: rgb(247, 36, 36);
    font-weight: bold;
  }
  /* 右侧标签 */
  .sx_content_view {
    border: 1rpx solid #b7b7b7;
    width: 108rpx;
    text-align: center;
    padding: 2rpx 5rpx;
    margin-right: 20rpx;
    justify-content: center;
    color: #000;
}
.swiper-tab {
    justify-content: start !important;
}
.pz_list_txt image {
    display: block;
    width: 100%;
    height: 335rpx;
}
.cont {
    width: 100%;
    display: block;
    text-align: center;
}

//单选框神坑----- 修改数据时，注意radio绑定的value必须是value的值，且value必须是一个字符串，数字是选不上的在view循环的时候wx：key要绑定item。value

 <view class="user_address disF border-radius-20 marTop20" wx:for="{{user_info_list}}" wx:key="index">
        <!-- 单选框 -->
        <radio-group bindchange="radioChange">
            <label class="weui-cell weui-check__label" wx:key="{{item.value}}">
            <view class="weui-cell__hd">
                <radio value="{{item.value}}" checked="{{item.checked}}" />
            </view>
            </label>
        </radio-group>
        
    </view>

data: {
        user_info_list:[
            {name: "包邮体验",phone:13765893270,address:'湖北省 武汉市 汉阳区 晴川街道 龟北路汉阳造48栋',checked: true,icon:app.imgUrl + page_name + "icon4.png" + app.version,value:'CHN',checked: 'true'},
            {name: "付邮费体验",phone:13765893271,address:'湖北省 武汉市 汉阳区 晴川街道 龟北路汉阳造48栋',icon:app.imgUrl + page_name + "icon4.png" + app.version,value:'BRA'}
        ],
    },


radioChange:function(e){
        let that = this;
        console.log('radio发生change事件，携带value值为：', e.detail.value)
        let e_value = e.detail.value;
        const items = this.data.user_info_list;
        for (let i = 0, len = items.length; i < len; ++i) {
            items[i].checked = items[i].value === e_value
        }
        that.setData({
            user_info_list:items,
        })
    },

//微信小程序动态添加表单模块

点击添加请假按钮，就会新增一个请假信息表单；点击左上角红色删除按钮，删除当前表单；

<!--pages/users/adduser.wxml-->
<view class="title">
  <view class="title-row">
    <label>学校名称：</label>
    <label>大同第三中学</label>
  </view>
  <view class="title-row">
    <label>班级名称：</label>
    <label>2023级3班</label>
  </view>
  <view class="title-row">
    <label>用餐餐厅：</label>
    <label>第三餐厅</label>
  </view>
  <view class="title-row">
    <label> 班  主  任：</label>
    <label>张晓慧</label>
  </view>
</view>
  

<view >
  <view class="content" wx:for="{{info}}" wx:key="key" wx:for-index="idx" wx:for-item="Leave">
    <view class="first">
      <view  class="chancel"><t-icon name="close" size="larger" bind:tap="deleteLeave" data-idx="{{idx}}"></t-icon></view>
      
      <t-input label="请假人:" name="userName" value="{{Leave.userName}}" data-idx="{{idx}}" bindchange="setUserName"></t-input>
    </view>
    <view >
      <t-cell title="请假日期：" hover
          note="{{Leave.leavDate}}"
          arrow
          data-mode="date"
          bindtap="showPicker"
          data-idx="{{idx}}" 
      />

        <!-- 年月日 -->
      <t-date-time-picker
        title="选择日期"
        visible="{{dateVisible}}"
        mode="date"
        defaultValue="{{date}}"
        format="YYYY-MM-DD"
        bindchange="onConfirm"
        bindpick="onColumnChange"
        bindcancel="hidePicker"
        start="{{start}}"
        end="{{end}}"
        data-idx="{{idx}}" 
      />
    </view>
    <t-checkbox-group t-class="box" name="meals" 
    defaultValue="{{Leave.meals}}"
    bind:change="onCheckAllChange" data-idx="{{idx}}" >
      <t-checkbox value="1" label="早餐"></t-checkbox>
      <t-checkbox value="2" label="午餐"></t-checkbox>
      <t-checkbox value="3" label="晚餐"></t-checkbox>
    </t-checkbox-group>
  </view>
</view>
<view style="display: flex; align-items: center;">
<t-button theme="primary" icon="add" bind:tap="addLeave">新增请假</t-button>
</view>

//js

// pages/users/adduser.js

function Leave(userName, leavDate,meals) {
  this.userName = userName;
  this.leavDate=leavDate;
  this.meals = meals;
} 

Page({

    /**
     * 页面的初始数据
     */
    data: {
      info: [],
      mode: '',
      dateVisible: false,
      date: new Date().getTime(), // 支持时间戳传入
      dateText: '',
      // 指定选择区间起始值
      start: '2023-09-01 00:00:00',
      end: '2030-09-09 12:12:12',
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // var leave1 = new Leave('xueqi','2023-09-01',['2','3']);
      // var data = [];
      // data.push(leave1);
      // this.setData({
      //   info: data
      // })
    },


    addLeave:function(){
      var oldInfo = this.data.info;
      oldInfo.push(new Leave());
      this.setData({
        info: oldInfo
      })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    onCheckAllChange(event) {
      //console.log('checkbox', event.detail.value);
      var index = parseInt(event.currentTarget.dataset.idx);
      let data = this.data.info;
      data[index].meals = event.detail.value;
      //console.log(data);
      this.setData({
        info: data
      });
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },
    showPicker(e) {
      const { mode } = e.currentTarget.dataset;
      this.setData({
        mode,
        [`${mode}Visible`]: true,
      });
    },
    hidePicker() {
      const { mode } = this.data;
      this.setData({
        [`${mode}Visible`]: false,
      });
    },
    onConfirm(e) {
      const { value } = e.detail;
      const { mode } = this.data;
      let index = parseInt(e.currentTarget.dataset.idx);
      let data = this.data.info;
      data[index].leavDate = value;
      //console.log('confirm', value);
  
      this.setData({
        [mode]: value,
        [`${mode}Text`]: value,
        info: data
      });
  
      this.hidePicker();
    },
    deleteLeave(e){
      let index = parseInt(e.currentTarget.dataset.idx);
      let data = this.data.info;
      data.splice(index,1);
      //console.log(data);
      this.setData({
        info: data
      })
    },
    setUserName(e){
      let index = parseInt(e.currentTarget.dataset.idx);
      let data = this.data.info;
      data[index].userName = e.detail.value;
      //console.log(data);
      this.setData({
        info: data
      })
    },

    onColumnChange(e) {
      //console.log('pick', e.detail.value);
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

//wxss

/* pages/users/adduser.wxss */
page {
  background-color: rgb(237, 237, 243);
}
.title{
  background-color: white;
  border-radius: 5px;
  margin: 5px;
}
.title-row{
  padding: 0.3rem 0.3rem;
  border-bottom: 1px solid rgb(240, 240, 240);
}
.title-row label{
  font-size: larger;
}

.content{
  border: 0.1rem dotted forestgreen;
  margin: 5px;
  border-radius: 5px;
}

.content .first{
  display: flex;
  text-align: center;
  align-items: center;
  background-color: white;
}

.chancel{
  display: flex;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color:rgb(233, 46, 46);
  align-items: center;
  justify-content: center;
}

.box {
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}

.panel-item {
  margin-bottom: 32rpx;
}

.panel-item::after {
  border: 0;
}