商户检查信息登记，检查历史

app.json

@@ -9,6 +9,7 @@
     "pages/merchant/index",
     "pages/merchant/detail",
     "pages/merchant/seat",
+    "pages/merchant/inspect",
     "pages/inspect/index",
     "pages/password/index",
     "pages/market/index",

icon/icon.wxss

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont";
   /* Project id 3094003 */
-  src: url('//at.alicdn.com/t/font_3094003_4ko0jkq0zdj.woff2?t=1640857019614') format('woff2'),
-    url('//at.alicdn.com/t/font_3094003_4ko0jkq0zdj.woff?t=1640857019614') format('woff'),
-    url('//at.alicdn.com/t/font_3094003_4ko0jkq0zdj.ttf?t=1640857019614') format('truetype');
+  src: url('//at.alicdn.com/t/font_3094003_iaeveopxqtg.woff2?t=1640915562236') format('woff2'),
+    url('//at.alicdn.com/t/font_3094003_iaeveopxqtg.woff?t=1640915562236') format('woff'),
+    url('//at.alicdn.com/t/font_3094003_iaeveopxqtg.ttf?t=1640915562236') format('truetype');
 }
 
 .iconfont {
@@ -14,6 +14,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shijian:before {
+  content: "\e665";
+}
+
+.icon-dengji:before {
+  content: "\e6ab";
+}
+
+.icon-neirong2:before {
+  content: "\e889";
+}
+
 .icon-name:before {
   content: "\e6b4";
 }

pages/inspect/index.js

@@ -1,5 +1,4 @@
 // pages/login/login.js
-import WxValidate from '../../utils/wxValidate'
 const app = getApp()
 Page({
 
@@ -10,16 +9,60 @@ Page({
     frameStyle: { useTop: true, name: '检查历史', leftArrow: true, useBar: false },
     // 主体高度
     infoHeight: '',
+    // 查询
+    shoopingtext: '',
+    // 区县人员
+    list: [],
+    // 弹框
+    dialog: { title: '详细信息', show: false, type: '1' },
+    // 详细信息
+    info: { id: '1', merchant_name: '测试商户', grade: '一级', user_name: '办案人员', inspect_date: '2021-12-31', content: '检查内容' },
   },
   back: function () {
     wx.navigateBack({ url: '/pages/home/index' })
   },
+  // 添加人员
+  toAdd: function () {
+    wx.navigateTo({ url: `/pages/county/detail` })
+  },
+  // 详细信息
+  toView: function (e) {
+    const { id } = e.currentTarget.dataset;
+    console.log(id);
+    // this.setData({ info: {} })
+    this.setData({ dialog: { title: '详细信息', show: true, type: '1' } })
+  },
+
+
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
     // 计算高度
-    this.searchHeight()
+    this.searchHeight();
+    // 查询数据
+    this.search();
+  },
+  // 查詢數據
+  search: function () {
+    let merchant_name = this.data.shoopingtext;
+    if (merchant_name) {
+      console.log(merchant_name);
+    }
+    let data = [
+      { id: '1', merchant_name: '测试商户', grade: '一级', user_name: '办案人员', inspect_date: '2021-12-31', content: '检查内容' },
+      { id: '2', merchant_name: '测试商户', grade: '一级', user_name: '办案人员', inspect_date: '2021-12-31', content: '检查内容' },
+      { id: '2', merchant_name: '测试商户', grade: '一级', user_name: '办案人员', inspect_date: '2021-12-31', content: '检查内容' },
+      { id: '2', merchant_name: '测试商户', grade: '一级', user_name: '办案人员', inspect_date: '2021-12-31', content: '检查内容' },
+      { id: '2', merchant_name: '测试商户', grade: '一级', user_name: '办案人员', inspect_date: '2021-12-31', content: '检查内容' },
+      { id: '2', merchant_name: '测试商户', grade: '一级', user_name: '办案人员', inspect_date: '2021-12-31', content: '检查内容' },
+      { id: '2', merchant_name: '测试商户', grade: '一级', user_name: '办案人员', inspect_date: '2021-12-31', content: '检查内容' },
+
+    ];
+    this.setData({ list: data });
+  },
+  shoppinginput: function (e) {
+    this.setData({ shoopingtext: e.detail.value })
   },
   // 计算高度
   searchHeight: function () {

pages/inspect/index.wxml

@@ -1,5 +1,49 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:back="back">
   <view slot="info" class="main" style="height:{{infoHeight}}px;">
-    模板
+    <view class="one">
+      <!-- <button type="primary" size="mini" bindtap="toAdd">添加人员</button> -->
+      <input value="{{shoopingtext}}" bindinput="shoppinginput" placeholder="请输入商户名称"></input>
+      <text bindtap="search">搜索</text>
+    </view>
+    <view class="two">
+      <view class="list" wx:key="item" wx:for="{{list}}">
+        <view class="name">{{item.merchant_name}}</view>
+        <view class="other">
+          <view class="otherInfo">办案人员：<text>{{item.user_name||'暂无' }}</text></view>
+          <view class="otherInfo textOver">检查时间：<text>{{item.inspect_date||'暂无' }}</text></view>
+        </view>
+        <view class="btn">
+          <button type="info" size="mini" bindtap="toView" data-id="{{item.id}}">详细信息</button>
+        </view>
+      </view>
+    </view>
   </view>
-</mobile-main>
+</mobile-main>
+<van-dialog use-slot title="{{dialog.title}}" show="{{ dialog.show }}" confirmButtonText="返回">
+  <view class="dialog">
+    <view wx:if="{{dialog.type=='1'}}" class="dialog_1">
+      <form>
+        <view class="content">
+          <view class="left"><text>检查商户：</text></view>
+          <view class="right"><input name="name" value="{{info.merchant_name}}" disabled></input></view>
+        </view>
+        <view class="content">
+          <view class="left"><text>违规等级：</text></view>
+          <view class="right"><input name="name" value="{{info.grade}}" disabled></input></view>
+        </view>
+        <view class="content">
+          <view class="left"><text>办案人员：</text></view>
+          <view class="right"><input name="name" value="{{info.user_name}}" disabled></input></view>
+        </view>
+        <view class="content">
+          <view class="left"><text>检查时间：</text></view>
+          <view class="right"><input name="name" value="{{info.inspect_date}}" disabled></input></view>
+        </view>
+        <view class="content">
+          <view class="left"><text>检查内容：</text></view>
+          <view class="right"><input name="name" value="{{info.content}}" disabled></input></view>
+        </view>
+      </form>
+    </view>
+  </view>
+</van-dialog>

pages/inspect/index.wxss

@@ -1,4 +1,102 @@
 .main {
   position: relative;
   width: 100%;
+}
+
+.main .one {
+  position: relative;
+  padding: 0 8px;
+  height: 40px;
+  overflow: hidden;
+  border-bottom: 1px dashed #000000;
+}
+
+.main .one input {
+  float: left;
+  width: 85%;
+  padding: 2px 5px;
+  margin: 5px 0;
+  border-radius: 5px;
+  border: 1px solid #cccccc;
+  background-color: #ffffff;
+}
+
+.main .one text {
+  position: relative;
+  left: 10px;
+  top: 6px;
+  font-size: 17px;
+}
+
+.main .two {
+  position: relative;
+  padding: 10px;
+}
+
+.main .two .list {
+  float: left;
+  width: 100%;
+  margin: 0 0 8px 0;
+  background-color: #f9f9f9;
+  border-radius: 5px;
+  padding: 8px 0;
+}
+
+.main .two .list .name {
+  font-size: 16px;
+  margin: 0 0 5px 0;
+  padding: 0 10px;
+}
+
+.main .two .list .other .otherInfo {
+  margin: 0 0 5px 0;
+  font-size: 14px;
+  color: #666666;
+  padding: 0 10px;
+}
+
+.main .two .list .other .otherInfo text {
+  color: #000000;
+}
+
+.main .two .list .btn {
+  text-align: center;
+}
+
+.main .two .list .btn button {
+  margin: 0 5px;
+}
+
+.dialog {
+  min-height: 30px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 0 8px;
+}
+
+.dialog .dialog_1 .content {
+  position: relative;
+  padding: 8px 0;
+  border-radius: 6px;
+  margin: 0 0 5px 0;
+  background-color: #f1f1f1;
+}
+
+.dialog .dialog_1 .content .left {
+  float: left;
+  margin: 0 10px;
+}
+
+.dialog .dialog_1 .content .left text {
+  font-size: 14px;
+  color: #666666;
+}
+
+.dialog .dialog_1 .content .right input {
+  font-size: 12px;
+}
+
+.van-dialog__header {
+  padding-top: 0 !important;
+  padding: 10px 0 !important;
 }

pages/merchant/index.js

@@ -42,7 +42,21 @@ Page({
   toCheck: function (e) {
     const { id } = e.currentTarget.dataset;
     console.log(id);
-    wx.showToast({ title: `县区登记审批`, icon: 'success', duration: 2000 })
+    wx.showModal({
+      title: '登记审批',
+      content: '是否同意登记的商户进驻系统？',
+      cancelText: '不同意',
+      confirmText: '同意',
+      success: (res) => {
+        if (res.confirm) {
+          wx.showToast({ title: `县区登记审批`, icon: 'success', duration: 2000 })
+        }
+        else if (res.cancel) {
+          wx.showToast({ title: `县区登记审批`, icon: 'success', duration: 2000 })
+        }
+      }
+    })
+
   },
   // 位置信息登记
   toSeat: function (e) {
@@ -53,7 +67,7 @@ Page({
   toInspect: function (e) {
     const { id } = e.currentTarget.dataset;
     console.log(id);
-    wx.showToast({ title: `检查信息登记`, icon: 'success', duration: 2000 })
+    wx.navigateTo({ url: `/pages/merchant/inspect?id=${id}` })
   },
   // 账号注销
   toCancel: function (e) {

pages/merchant/inspect.js

@@ -0,0 +1,145 @@
+// pages/login/login.js
+import WxValidate from '../../utils/wxValidate'
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    frameStyle: { useTop: true, name: '检查信息登记', leftArrow: true, useBar: false },
+    // 主体高度
+    infoHeight: '',
+    form: {},
+    // 违规等级
+    gradeList: [
+      { name: '一级' },
+      { name: '二级' },
+      { name: '三级' },
+    ],
+    // 办案人员
+    userList: [
+      { id: '1', name: '办案人员1' },
+      { id: '2', name: '办案人员2' },
+    ]
+  },
+  initValidate() {
+    const rules = { grade: { required: true, }, user_name: { required: true, }, inspect_date: { required: true, }, content: { required: true, } }
+    // 验证字段的提示信息，若不传则调用默认的信息
+    const messages = { grade: { required: '请选择违规等级', }, user_name: { required: '请选择办案人员', }, inspect_date: { required: '请选择检查时间', }, content: { required: '请输入检查内容', } };
+    this.WxValidate = new WxValidate(rules, messages)
+  },
+  back: function () {
+    wx.navigateBack({ url: '/pages/merchant/index' })
+  },
+  // 选择违规等级
+  gradeChange: function (e) {
+    let { value } = e.detail;
+    let data = this.data.gradeList[value];
+    this.setData({ 'form.grade': data.name })
+  },
+  // 选择办案人员
+  userChange: function (e) {
+    let { value } = e.detail;
+    let data = this.data.userList[value];
+    this.setData({ 'form.user_id': data.id })
+    this.setData({ 'form.user_name': data.name })
+  },
+  // 选择检查时间
+  inspectdateChange: function (e) {
+    let { value } = e.detail;
+    this.setData({ 'form.inspect_date': value })
+  },
+  // 取消保存
+  onReset: function (e) {
+    this.back()
+  },
+  // 提交保存
+  onSubmit: function (e) {
+    const params = e.detail.value;
+    if (!this.WxValidate.checkForm(params)) {
+      const error = this.WxValidate.errorList[0];
+      wx.showToast({ title: `${error.msg}`, icon: 'error', duration: 2000 })
+      return false
+    } else {
+      console.log(params);
+      wx.showToast({ title: `创建信息成功`, icon: 'success', duration: 2000 })
+    }
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    //验证规则函数
+    this.initValidate()
+    const { id } = options;
+    // 查询信息
+    if (id) this.search(id);
+    // 计算高度
+    this.searchHeight()
+  },
+  // 查询信息
+  search: function (id) {
+    let data = { merchant_id: id, merchant_name: '测试商户', }
+    this.setData({ form: data })
+  },
+  // 计算高度
+  searchHeight: function () {
+    let frameStyle = this.data.frameStyle;
+    let client = app.globalData.client;
+    // 减去状态栏
+    let infoHeight = client.windowHeight - (client.statusBarHeight + client.getMenu.height + (client.getMenu.top - client.statusBarHeight) * 2);
+    // 是否减去底部菜单
+    if (frameStyle.useBar) infoHeight = infoHeight - 50;
+    if (infoHeight) this.setData({ infoHeight: infoHeight })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/merchant/inspect.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mobile-main": "/commpents/mobile-frame/mobile-main"
+  }
+}

pages/merchant/inspect.wxml

@@ -0,0 +1,74 @@
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+  <view slot="info" class="main" style="height:{{infoHeight}}px;">
+    <view class="one">
+      <form bindsubmit="onSubmit" catchreset="onReset">
+        <view class="content" style="display: none;">
+          <view class="left">
+            <text class="icon iconfont icon-shanghuguanli"></text>
+          </view>
+          <view class="right">
+            <input name="merchant_id" value="{{form.merchant_id}}" disabled></input>
+          </view>
+        </view>
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-shanghuguanli"></text>
+          </view>
+          <view class="right">
+            <input name="merchant_name" value="{{form.merchant_name}}" disabled></input>
+          </view>
+        </view>
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-dengji"></text>
+          </view>
+          <view class="right">
+            <picker class="picker" bindchange="gradeChange" name="grade" value="{{form.grade}}" range="{{gradeList}}" range-key="name">
+              <view>{{form.grade||'选择违规等级'}}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="content" style="display: none;">
+          <view class="left">
+            <text class="icon iconfont icon-xingming"></text>
+          </view>
+          <view class="right">
+            <input name="user_id" value="{{form.user_id}}" disabled></input>
+          </view>
+        </view>
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-xingming"></text>
+          </view>
+          <view class="right">
+            <picker class="picker" bindchange="userChange" name="user_name" value="{{form.user_name}}" range="{{userList}}" range-key="name">
+              <view>{{form.user_name||'选择办案人员'}}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-shijian"></text>
+          </view>
+          <view class="right">
+            <picker mode="date" name="inspect_date" bindchange="inspectdateChange" value="{{form.inspect_date}}">
+              <view>{{form.inspect_date||'选择检查时间'}}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-neirong2"></text>
+          </view>
+          <view class="right">
+            <input name="content" value="{{form.content}}" placeholder='请输入检查内容' placeholder-class="placeholder"></input>
+          </view>
+        </view>
+        <view class="save">
+          <button type="warn" size="mini" formType="reset">取消保存</button>
+          <button type="primary" size="mini" formType="submit">提交保存</button>
+        </view>
+      </form>
+    </view>
+  </view>
+</mobile-main>

pages/merchant/inspect.wxss

@@ -0,0 +1,38 @@
+.main {
+  position: relative;
+  width: 100%;
+}
+
+.main .one {
+  position: relative;
+  padding: 10px;
+}
+
+.main .one .content {
+  position: relative;
+  padding: 10px 0;
+  box-shadow: 0 0 5px #000000;
+  margin: 0 0 10px 0;
+  border-radius: 5px;
+}
+
+.main .one .content .left {
+  float: left;
+  margin: 0 10px;
+}
+
+.main .one .content .left .icon {
+  color: #000000;
+}
+
+.main .one .content .right input {
+  color: #000000;
+}
+
+.main .one .save {
+  text-align: center;
+}
+
+.main .one .save button {
+  margin: 10px;
+}