办卡+用户列表

app.json

@@ -1,7 +1,8 @@
 {
   "pages": [
-    "pages/card/card",
+    "pages/user/user",
     "pages/home/home",
+    "pages/card/card",
     "pages/login/login",
     "pages/perssonal/perssonal",
     "pages/setting/setting",
@@ -14,7 +15,6 @@
     "pages/exchange/exchange",
     "pages/car/car",
     "pages/shareholder/shareholder",
-    "pages/user/user",
     "pages/index/index",
     "pages/logs/logs",
     "pages/test/test"

pages/card/card.js

@@ -5,23 +5,56 @@ const app = getApp()
 Page({
   data: {
     form: {
-      phone: '17319450324',
-      password: '17319450324',
-      phone: '17319450324',
-      phone: '17319450324',
-      phone: '17319450324',
-      phone: '17319450324',
-      name: '顾红伟',
-      card: '220182199603257019',
-      zfb: 'zhifubao',
-      create_time: '2020-12-12',
       tjr: '推荐人',
-      tjrPhone: '17319450324',
-    }
+      tjrPhone: '17319450324'
+    },
+    // 省份
+    provinceList: [
+      { name: '吉林省' },
+      { name: '黑龙江省' },
+      { name: '辽宁省' },
+    ],
+    // 市区
+    cityList: [
+      { name: '长春市' },
+      { name: '榆树市' },
+      { name: '吉林市' },
+    ],
+    // 套餐列表
+    mealList: [
+      { name: '169套餐' },
+      { name: '129套餐' },
+    ],
+    // 类型列表
+    typeList: [
+      { name: '余额' },
+      { name: '花呗' },
+      { name: '微信' },
+    ],
+  },
+  // 选择省份
+  provinceChange: function (e) {
+    this.setData({ "form.province": this.data.provinceList[e.detail.value].name })
+  },
+  // 选择市区
+  cityChange: function (e) {
+    this.setData({ "form.city": this.data.cityList[e.detail.value].name })
+  },
+  // 选择套餐
+  mealChange: function (e) {
+    this.setData({ "form.meal": this.data.mealList[e.detail.value].name })
+  },
+  // 选择类型
+  typeChange: function (e) {
+    this.setData({ "form.type": this.data.typeList[e.detail.value].name })
+  },
+  // 选择时间
+  dateChange: function (e) {
+    this.setData({ "form.create_time": e.detail.value })
   },
   //事件处理函数
   formSubmit: function (e) {
-    console.log(e);
+    console.log(e.detail.value);
   },
   onLoad: function () {
   },

pages/card/card.wxml

@@ -13,21 +13,37 @@
         <input type='text' name="password" value="{{form.password}}" placeholder='请输入密码' password></input>
         <text class="tip"> 密码必须是8-16位的数字，字母的组合（不能是纯数字）</text>
       </view>
-      <view class="forminput">
+      <view class="formData">
         <text class="label">号码归属省</text>
-        <input type='number' name="phone" value="{{form.phone}}" placeholder='请输入新办理号码'></input>
+        <picker class="createTime" bindchange="provinceChange" name="province" value="{{form.province}}"
+          range="{{provinceList}}" range-key="{{'name'}}">
+          <view class="picker">{{form.province||'选择省份'}}
+          </view>
+        </picker>
       </view>
-      <view class="forminput">
+      <view class="formData">
         <text class="label">号码归属市</text>
-        <input type='number' name="phone" value="{{form.phone}}" placeholder='请输入新办理号码'></input>
+        <picker class="createTime" bindchange="cityChange" name="city" value="{{form.city}}" range="{{cityList}}"
+          range-key="{{'name'}}">
+          <view class="picker">{{form.city||'选择市区'}}
+          </view>
+        </picker>
       </view>
-      <view class="forminput">
+      <view class="formData">
         <text class="label">套餐</text>
-        <input type='number' name="phone" value="{{form.phone}}" placeholder='请输入新办理号码'></input>
+        <picker class="createTime" bindchange="mealChange" name="meal" value="{{form.meal}}" range="{{mealList}}"
+          range-key="{{'name'}}">
+          <view class="picker">{{form.meal||'选择套餐'}}
+          </view>
+        </picker>
       </view>
-      <view class="forminput">
+      <view class="formData">
         <text class="label">类型</text>
-        <input type='number' name="phone" value="{{form.phone}}" placeholder='请输入新办理号码'></input>
+        <picker class="createTime" bindchange="typeChange" name="type" value="{{form.type}}" range="{{typeList}}"
+          range-key="{{'name'}}">
+          <view class="picker">{{form.type||'选择类型'}}
+          </view>
+        </picker>
       </view>
       <view class="forminput">
         <text class="label">姓名</text>
@@ -41,9 +57,11 @@
         <text class="label">支付宝账号</text>
         <input type='text' name="zfb" value="{{form.zfb}}" placeholder='支付宝账号'></input>
       </view>
-      <view class="forminput">
+      <view class="formData">
         <text class="label">办卡时间</text>
-        <input type='date' name="create_time" value="{{form.create_time}}" placeholder='办卡时间'></input>
+        <picker class="createTime" mode="date" name="create_time" value="{{form.create_time}}" bindchange="dateChange">
+          <view class="picker">{{form.create_time||'选择办卡时间'}}</view>
+        </picker>
       </view>
       <view class="forminput">
         <text class="label">推荐人</text>

pages/card/card.wxss

@@ -37,8 +37,6 @@
   line-height: 80rpx;
 }
 
-
-
 .main .two .forminput input {
   float: left;
   width: 70%;
@@ -54,6 +52,31 @@
   color: #ff0000;
 }
 
+.main .two .formData {
+  float: left;
+  width: 94%;
+  margin: 0 20rpx;
+  border-bottom: 1px solid #ccc;
+}
+
+.main .two .formData .label {
+  float: left;
+  width: 30%;
+  font-size: 30rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+}
+
+.main .two .formData .createTime {
+  float: right;
+  width: 70%;
+  text-align: right;
+  font-size: 30rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  color: #666;
+}
+
 .main .two .save {
   float: left;
   width: 94%;

pages/user/user.js

@@ -4,14 +4,24 @@ const app = getApp()
 
 Page({
   data: {
-
-  },
-  //事件处理函数
-  bindViewTap: function () {
-    wx.navigateTo({
-      url: '../index/index'
-    })
+    userList: []
   },
   onLoad: function () {
+    let data = [
+      {
+        name: '顾红伟',
+        phone: '17319450324',
+        create_time: '2020-12-12'
+      },
+      {
+        name: '你猜呢',
+        phone: '17319450324',
+        create_time: '2020-12-12'
+      },
+    ];
+    for (const val of data) {
+      val.danName = val.name.split("")[0]
+    }
+    this.setData({ userList: data })
   },
 })

pages/user/user.wxml

@@ -3,6 +3,21 @@
     用户列表
   </view>
   <view class="two">
-    内容
+    <view class="list" wx:key="unique" wx:for="{{userList}}" wx:for-item="item">
+      <view data-item="{{item}}">
+        <view class="name">
+          <text>{{item.danName}}</text>
+        </view>
+        <view class="message">
+          <view class="messageTop">
+            <text>{{item.name}}</text>
+            <text>{{item.phone}}</text>
+          </view>
+          <view class="messageDown">
+            {{item.create_time}}
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </view>

pages/user/user.wxss

@@ -1,6 +1,8 @@
 .main {
   float: left;
   width: 100%;
+  height: 100%;
+  background-color: #f6f6f6;
 }
 
 .main .one {
@@ -17,6 +19,65 @@
 .main .two {
   position: absolute;
   top: 80rpx;
+  width: 94%;
+  padding: 20rpx;
+  background-color: #f6f6f6;
+}
+
+.main .two .list {
+  float: left;
+  width: 98%;
+  background-color: #ffffff;
+  padding: 20rpx 10rpx;
+  margin: 0 0 15rpx 0;
+  border-radius: 10rpx;
+}
+
+.main .two .list .name {
+  float: left;
+  width: 18%;
+}
+
+.main .two .list .name text {
+  float: left;
+  background-color: red;
+  border-radius: 360rpx;
+  width: 100rpx;
+  height: 100rpx;
+  text-align: center;
+  line-height: 100rpx;
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.main .two .list .message {
+  float: left;
+  width: 82%;
+}
+
+.main .two .list .message .messageTop {
+  float: left;
+  width: 100%;
+}
+
+.main .two .list .message .messageTop text:nth-child(1) {
+  font-weight: bold;
+  margin: 0 20rpx 0 0;
+}
+
+.main .two .list .message .messageTop text:nth-child(2) {
+  border: 1px solid #ff0000;
+  color: #ff0000;
+  padding: 0 10rpx;
+  border-radius: 10rpx;
+  font-size: 30rpx;
+}
+
+.main .two .list .message .messageDown {
+  float: left;
   width: 100%;
-  height: 15000px;
+  font-size: 30rpx;
+  color: #666;
+  margin: 20rpx 0 0 0;
 }