微信小程序2级联动

最新推荐文章于 2022-08-22 14:52:42 发布

fareast_mzh

最新推荐文章于 2022-08-22 14:52:42 发布

阅读量458

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/fareast_mzh/article/details/105371634

版权

小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

category表:

DROP TABLE IF EXISTS `category`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `category` (
  `category_id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '病例分类id',
  `name` varchar(50) NOT NULL DEFAULT '' COMMENT '分类名称',
  `parent_id` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '上级分类id',
  `image_id` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '分类图片id',
  `sort` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '排序方式(数字越小越靠前)',
  `create_time` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '创建时间',
  `update_time` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '更新时间',
  PRIMARY KEY (`category_id`)
) ENGINE=InnoDB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `category`
--

LOCK TABLES `category` WRITE;
/*!40000 ALTER TABLE `category` DISABLE KEYS */;
INSERT INTO `category` VALUES (1,'内科',0,0,1,1234,1234),(2,'外科',0,0,2,111,2222),(3,'妇产科',0,0,3,0,0),(4,'儿科',0,0,4,0,0),(5,'五官科',0,0,5,0,0),(6,'耳鼻喉科',5,0,0,1585538064,1585538064),(7,'眼科',5,0,0,0,0),(8,'口腔科',5,0,0,0,0),(11,'呼吸内科',1,0,0,0,0),(12,'消化内科',1,0,0,0,0),(14,'生殖',0,0,333,1585641766,1585641766),(15,'普通外科',2,0,201,1586254466,1586254466),(16,'神经外科',2,0,202,1586254481,1586254481),(17,'心胸外科',2,0,203,1586254495,1586254495),(18,'肛肠外科',2,0,209,1586254515,1586254515);
/*!40000 ALTER TABLE `category` ENABLE KEYS */;
UNLOCK TABLES;

Model类中关键方法:

    /**
     * @param $data array
     * @return array
     */
    public static function getTree($data) {
        $items = array();
        foreach($data as $v){
            $items[$v['category_id']] = $v;
        }
        $tree = array();
        foreach($items as $k => $item){
            if(isset($items[$item['parent_id']])){
                $items[$item['parent_id']]['children'][] = &$items[$k];
            }else{
                $tree[] = &$items[$k];
            }
        }
        return $tree;

    }

控制器:

<?php

namespace app\api\controller;


use app\common\model\Category;
use think\Request;

class Cases extends ApiController
{
    /**
     * 取得所有病例列表
     */
    public function category() {
        $a = Category::all();
        $b = array_map(function($it) {
            /** @$it app\common\model\Category */
            return [
                'category_id' => $it->category_id,
                'name' => $it->name,
                'parent_id' => $it->parent_id,
                'sort' => $it->sort
            ];
        }, $a);
        $tree = Category::getTree($b);
        return $this->renderSuccess($tree);
    }


}

后台的数据格式:

{
  "code": 0,
  "data": [
    {
      "category_id": 1,
      "name": "内科",
      "parent_id": 0,
      "sort": 1,
      "children": [
        {
          "category_id": 11,
          "name": "呼吸内科",
          "parent_id": 1,
          "sort": 0
        },
        {
          "category_id": 12,
          "name": "消化内科",
          "parent_id": 1,
          "sort": 0
        }
      ]
    },
    {
      "category_id": 2,
      "name": "外科",
      "parent_id": 0,
      "sort": 2,
      "children": [
        {
          "category_id": 15,
          "name": "普通外科",
          "parent_id": 2,
          "sort": 201
        },
        {
          "category_id": 16,
          "name": "神经外科",
          "parent_id": 2,
          "sort": 202
        },
        {
          "category_id": 17,
          "name": "心胸外科",
          "parent_id": 2,
          "sort": 203
        },
        {
          "category_id": 18,
          "name": "肛肠外科",
          "parent_id": 2,
          "sort": 209
        }
      ]
    },
    {
      "category_id": 3,
      "name": "妇产科",
      "parent_id": 0,
      "sort": 3
    },
    {
      "category_id": 4,
      "name": "儿科",
      "parent_id": 0,
      "sort": 4
    },
    {
      "category_id": 5,
      "name": "五官科",
      "parent_id": 0,
      "sort": 5,
      "children": [
        {
          "category_id": 6,
          "name": "耳鼻喉科",
          "parent_id": 5,
          "sort": 0
        },
        {
          "category_id": 7,
          "name": "眼科",
          "parent_id": 5,
          "sort": 0
        },
        {
          "category_id": 8,
          "name": "口腔科",
          "parent_id": 5,
          "sort": 0
        }
      ]
    },
    {
      "category_id": 14,
      "name": "生殖",
      "parent_id": 0,
      "sort": 333
    }
  ],
  "msg": "success"
}

* add.wxml

<!--pages/ask/add.wxml-->
<view class="container">
<form bindsubmit="formSubmit">

  <view class="form-group">
    <picker 
      name="category_id"
      mode="multiSelector"
      bindchange="bindcasecatchange"
      bindcolumnchange="bindcasecatcolumnchange"
      value="{{multiIndex}}"
      range="{{case_cat_list}}"
      range-key="{{'name'}}">
      <view class="picker">
        <label>分类</label><text class="text_right">{{cat_title}}</text>
      </view>
    </picker>
  </view>

  <view class="form-group">
    <label>性别</label>
    <radio-group name="gender" class="radio-group" bindchange="radioChange">
       <radio class="radio" value="1"></radio><text class="male">男</text>
       <radio class="radio" value="2"></radio><text>女</text>
       <radio class="radio" value="0" checked="checked"></radio><text>未知</text>
    </radio-group>
  </view>

  <view class="form-group">
    <label>年龄</label>
    <input type="number" name="age" value="" placeholder="输入年龄" />
  </view>
  
  <view class="form-group">
    <label>病史</label>
    <input type="text" name="history" placeholder="请输入病史" />
  </view>

  <view class="form-group">
   <label>附件上传（仅支持图片）</label>
    <view class="question-images clearFloat">
      <block wx:for="{{images}}" wx:key="*this">
        <view class="q-image-wrap">
          <!-- 图片缩略图  -->
          <image class="q-image" src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image>
          <!-- 移除图片的按钮  -->
          <view class="q-image-remover" data-idx="{{index}}" bindtap="removeImage">
            <icon class='iconClose'>+</icon>
          </view>
        </view>
      </block>
      <view class='uploadImgBtn' bindtap="chooseImage" wx:if="{{images.length < 3}}">
        <icon class="iconPlus">+</icon>
      </view>
    </view>
  </view>

  <view class="form-group">
    <label>临床诊断(必填)</label>
    <view class="textarea-wrp">
      <textarea name="seen" bindblur="bindTextAreaBlur" placeholder="输入临床诊断" auto-height />
    </view>
  </view>

  <view class="form-group">
    <label>送检材料部位(选填)</label>
    <view class="textarea-wrp">
      <textarea bindblur="bindTextAreaBlur" name="position" auto-height placeholder="输入送检材料部位" />
    </view>
  </view>

  <view class="btn-area">
  	<button form-type="submit" role="button" aria-disabled="false">提交</button>
  </view>

</form>

</view> <!-- /.container -->

* add.wxss

/* pages/ask/add.wxss */
.container {
  width: 100vw;
}

.container form {
  display: block;
}

.form-group {
  clear: left;
  background-color: #ffffff;
  margin-top: 20rpx;
  padding: .6rem 1rem;
}

.form-group radio-group {
  float: right;
}

.form-group radio-group text.male {
  margin-right: 20rpx;
}

.form-group input {
  text-align: right;
  float: right;
}

textarea {
  width: 100%;
  min-height: 80rpx;
  margin-top: 12rpx;
}
 
.textarea-wrp {
  background-color: #fff;
}
.clearFloat {
  clear: both;
  min-height: 150rpx;
  height: auto;
}
 
.q-image-wrap{
  width: 150rpx;
  height: 150rpx;
  border: 3px solid #f0f0f0;
  float: left;
  margin-right: 20rpx;
  position: relative;
  overflow: hidden;
}
.q-image-remover{
  width: 100rpx;
  height: 100rpx;
  border-radius: 100%;
  background: #2e82ff;
  position: absolute;
  top:-50rpx;
  right:-50rpx;
 
}
.q-image-remover icon{
  position: absolute;
  left: 16rpx;
  bottom: 8rpx;
  color: #fff;
}

.q-image-remover icon.iconClose {
  rotate: 45deg;
  font-size: 1.2rem;
  font-weight: 700;
}
 
.uploadImgBtn{
  width: 150rpx;
  height: 150rpx;
  text-align: center;
  line-height: 140rpx;
  border: 4rpx solid #e3e3e3;
  float: left;
  margin: 10rpx 0;
}
.uploadImgBtn icon{
  font-size: 80rpx;
  color: #999;
}

.q-image-wrap image {
  width: inherit;
  height: inherit;
}

.btn-area {
  margin-top: 20rpx;
}

.picker {
  padding: 0;
}

.text_right {
  text-align: right;
  float: right;
}

* add.js

// pages/ask/add.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: [],
    case_cat_list: [ [], [] ],
    multiIndex: [0, 0], // 2列下拉菜单每个index
    cat_title: '病例分类',
    case_cat_id: 0
  },

  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },

  onLoad: function() {
    this.caseCat();
  },

  caseCat: function() {
    var App = getApp();
    var page = this;
    // 读取病例分类
    App._get("cases/category", null, function (res) {
      var data = res.data;
      for (var i = 0; i < data.length; i++) {
        if (!data[i]['children']) {
          data[i]['children'] = [];
        }
      }
      var catList = [data, data[0]['children']];
      page.setData({
        case_cat_list: catList
      })

    }, function (err) {
      console.log(err);
    }, function (text) {
      console.log("病例分类加载完了");
    }, false);
  },
  // 下拉菜单改变事件处理
  bindcasecatchange: function(e) {
    console.log(e.detail.value);
    this.setData({ multiIndex: e.detail.value })    
  },
  // 联动
  bindcasecatcolumnchange: function (e) {
    var c = e.detail.column, i = e.detail.value;
    this.data.multiIndex[ c ] = i;
    console.log("column="+ c + ", index=" + i);
    this.setData({
      multiIndex: this.data.multiIndex
    });
    console.log(this.data.multiIndex);

    var d = this.data.case_cat_list[0];
    console.log(d);

    var cat_title = '', case_cat_id = 0;
    if (c == 0) {
      this.data.case_cat_list[1] = d[ this.data.multiIndex[0] ].children;
      console.log(this.data.case_cat_list[1]);
      cat_title = d[this.data.multiIndex[0]].name;
      case_cat_id = d[this.data.multiIndex[0]].category_id;
    } else if (c == 1) {
      cat_title = d[this.data.multiIndex[0]].children[this.data.multiIndex[1]].name;
      case_cat_id = d[this.data.multiIndex[0]].children[this.data.multiIndex[1]].category_id;
    }

    this.setData({
      case_cat_list: this.data.case_cat_list,
      cat_title: cat_title,
      case_cat_id: case_cat_id
    });
    
  },

  chooseImage(e) {
    wx.chooseImage({
      sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
      sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
      success: res => {
        const images = this.data.images.concat(res.tempFilePaths)
        // 限制最多只能留下3张照片
        const images1 = images.length <= 3 ? images : images.slice(0, 3)
        this.setData({
          images: images1
        })
      }
    })
  },
  removeImage(e) {
    var that = this;
    var images = that.data.images;
    // 获取要删除的第几张图片的下标
    const idx = e.currentTarget.dataset.idx
    // splice  第一个参数是下表值  第二个参数是删除的数量
    images.splice(idx, 1)
    this.setData({
      images: images
    })
  },

  handleImagePreview(e) {
    const idx = e.target.dataset.idx
    const images = this.data.images
    wx.previewImage({
      current: images[idx],  //当前预览的图片
      urls: images,  //所有要预览的图片
    })
  },
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value);
    var app = getApp();
    e.detail.value.category_id = this.data.case_cat_id;

    app._post_form("cases/add", e.detail.value, function(result) {
      console.log(result);
    }, function(err) {
      wx.showModal({
        title: '提交出错了',
        content: JSON.stringify(err),
      });
    }, () => {
      wx.hideLoading();
    });
  },
})

* app.js中封装ajax请求的2个方法

 /**
   * get请求
   */
  _get(url, data, success, fail, complete, check_login) {
    let App = this;
    wx.showNavigationBarLoading();

    // 构造请求参数
    data = Object.assign({
      wxapp_id: siteInfo.wxapp_id,
      token: wx.getStorageSync('token')
    }, data);

    // 构造get请求
    let request = () => {
      data.token = wx.getStorageSync('token');
      wx.request({
        url: App.api_root + url,
        header: {
          'content-type': 'application/json'
        },
        data,
        success(res) {
          if (res.statusCode !== 200 || typeof res.data !== 'object') {
            console.log(res);
            App.showError('网络请求出错');
            return false;
          }
          if (res.data.code === -1) {
            // 登录态失效, 重新登录
            wx.hideNavigationBarLoading();
            App.doLogin();
          } else if (res.data.code !== 0) {
            App.showError(res.data.msg);
            return false;
          } else {
            // code==0 stands for ok
            success && success(res.data);
          }
        },
        fail(res) {
          // console.log(res);
          App.showError(res.errMsg, () => {
            fail && fail(res);
          });
        },
        complete(res) {
          wx.hideNavigationBarLoading();
          complete && complete(res);
        },
      });
    };
    // 判断是否需要验证登录
    check_login ? App.doLogin(request) : request();
  },

  /**
   * post提交 本地设置不校验合法域名
   */
  _post_form(url, data, success, fail, complete) {
    wx.showNavigationBarLoading();
    let App = this;
    // 构造请求参数
    data = Object.assign({
      wxapp_id: siteInfo.wxapp_id,
      token: wx.getStorageSync('token')
    }, data);
    wx.request({
      url: App.api_root + url,
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      method: 'POST',
      data,
      success(res) {
        console.log(res);
        if (res.statusCode !== 200 || typeof res.data !== 'object') {
          App.showError('网络请求出错');
          return false;
        }
        if (res.data.code === -1) {
          // 登录态失效, 重新登录
          App.doLogin(() => {
            App._post_form(url, data, success, fail);
          });
          return false;
        } else if (res.data.code !== 0) {
          App.showError(res.data.msg, () => {
            fail && fail(res);
          });
          return false;
        }
        // 0 表示ok
        success && success(res.data);
      },
      fail(res) {
        // console.log(res);
        App.showError(res.errMsg, () => {
          fail && fail(res);
        });
      },
      complete(res) {
        wx.hideLoading();
        wx.hideNavigationBarLoading();
        complete && complete(res);
      }
    });
  },