填写表单

pages/add/config.js

@@ -0,0 +1,131 @@
+const value = [
+  // 车辆和贷款信息
+  [
+    { name: "vmodel", title: "车型", value: '' },
+    { name: "invioce", title: "车辆发票金额", type: 'number', _type: "number", value: '' },
+    { style: 1, title: "附加品金额 （如有必填）" },
+    { name: "ptax", norequire: true, title: "购置税", type: 'number', _type: "number", value: '' },
+    { name: "insurance", norequire: true, title: "保险", type: 'number', _type: "number", value: '' },
+    { name: "boutique", norequire: true, title: "精品", type: 'number', _type: "number", value: '' },
+    { name: "wextension", norequire: true, title: "延保", type: 'number', _type: "number", value: '' },
+    { name: "upkeep", norequire: true, title: "保养", type: 'number', _type: "number", value: '', },
+    { name: "dpratio", disabled: true, title: "首付比例", type: 'number', _type: "digit", reg: /^\d{0,2}\.\d{1,}$/, value: '' },
+    { name: "lamount", title: "申请贷款金额", type: 'number', _type: "number", value: '' },
+    { name: "maturity", title: "申请贷款期限", disabled: true, type: "number", value: '' },
+    { name: "laompany", title: "申请贷款产品", value: '' }
+  ],
+  // 申请人基本信息
+  [
+    { name: "name", title: "姓名", value: '' },
+    // 0女 1男 
+    { name: "sex", type: "switch", title: "性别", value: '' },
+    //yyyy-mm-dd
+    { name: "bdate", type: "picker", title: "出生日期", reg: /^\d{4}-\d{2}-\d{2}$/, value: '1900-01-01' },
+    // 0本地户口 1 外地户口
+    { name: "rpr", title: "户口", type: 'switch', value: '' },
+    //0中国大陆（内地）1中国香港 2中国台湾 3中国澳门 4外国籍
+    { name: "nationality", title: "国籍/地区", type: 'switch', value: '' },
+    //0身份证 1护照 2军官证 3户口 4临时身份证 5港澳台通行证
+    { name: "itype", title: "身份证件类型", type: 'switch', value: '' },
+    { name: "inumber", title: "身份证件号码", _type: "idcard", reg: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, value: '' },
+    // 0未婚 1已婚 2离异 3丧偶 4其他
+    { name: "mstatus", title: "婚姻状况", type: 'switch', value: '' },
+    //0高中以下 1高中 2专科 3学士 4硕士 5博士
+    { name: "elevel", title: "教育程度", type: 'switch', value: "" },
+    { name: "naddress", title: "现居住地址", _title: "x省x市/县详细地址门牌号", reg: /^.+省.+(市|县).+(区|镇).+\d+$/, value: "" },
+    // 0按揭商品房 1单位房产 2全款自购商品房 3直系亲属房产 4自建房 5租赁房 6其他
+    { name: "hptype", title: "现居住房产类型", type: 'switch', value: "" },
+    // 0同居住地址 1同单位地址
+    { name: "maddress", title: "邮寄地址", type: 'switch', value: "" },
+    { name: "email", title: "电子邮箱", reg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, value: "" },
+    { name: "wx", title: "微信号", reg: /^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}$/, value: "" },
+    { name: "phone", title: "住宅固定电话", reg: /^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$/, value: "" },
+    { name: "tel", title: "手机号", reg: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, type: 'number', _type: "number", value: "" },
+    { name: "wname", title: "现工作单位名称", value: "" },
+    { name: "wphone", title: "单位电话", reg: /^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$/, value: "" },
+    { name: "waddress", title: "现工作单位地址", reg: /^.+省.+(市|县).+(区|镇).+\d+$/, value: "" },
+    // 0农林牧鱼 1制造业 2批发零售 3信息传输/软件/信息技术服务 4房地产 5建筑业 6住宿/餐饮 7卫生/社会工作 8科研/技术服务 9公共管理/社会保障/社会组织 10采矿业 11文化/体育/娱乐业 12居民服务/修理/其他服务业 13租赁/商务服务业 14交通运输/仓储/邮政业 15教育 16金融 17国际组织 18电热力/燃气/水生产供应业 19水利/环境/公共设施管理 20其他
+    { name: "itype", title: "行业类型", type: "switch", value: "" },
+    // 0个体工商户 1私/民营企业 2公务员（政府机关正式员工）3国有企业/事业单位 4外资企业 5专业技术人员 6现代金融关联企业 7其他
+    { name: "otype", title: "职业类型", type: "switch", value: "" },
+    { name: "position", title: "职位", value: "" },
+    // 0是 1否
+    { name: "wbst", title: "是否挂靠", type: "switch", value: "" },
+    { name: "bstname", for: 'wbst', title: "挂靠公司名称", value: "" },
+    { name: "bstcode", for: 'wbst', title: "挂靠公司组织机构代码", value: "" },
+    { name: "bsttel", for: 'wbst', title: "挂靠公司电话", reg: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, value: "" },
+    { name: "bstaddress", for: 'wbst', title: "挂靠公司地址", value: "" }
+  ],
+
+  // 紧急联系人信息
+  [
+    { name: "cname", title: "联系人1名称", value: "" },
+    { name: "ctel", title: "联系人1手机号", reg: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, value: "" },
+    { name: "relation", title: "与借款人关系", type: 'switch', value: "" },
+    { name: "caddress", title: "现居住地址", _title: "x省x市/县详细地址门牌号", reg: /^.+省.+(市|县).+(区|镇).+\d+$/, value: "" },
+    { name: "ctname", title: "联系人2姓名", value: "" },
+    { name: "cttel", title: "联系人2手机号", reg: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, value: "" },
+    // 是否有共同借款人 0没有 1有
+    { name: "thesame", title: "是否有共同借款人", type: "switch", value: 0 }
+  ],
+
+  // 共同借款人信息
+  [{ name: "tsname", title: "姓名", _title: "共同借款人姓名", value: "" },
+  { name: "tsbdate", type: "picker", title: "出生日期", _title: "共同借款人出生日期", reg: /^\d{4}-\d{2}-\d{2}$/, value: '1900-01-01' },
+  //0身份证 1护照 2军官证 3户口 4临时身份证 5港澳台通行证
+  { name: "tsitype", title: "身份证件类型", _title: "共同借款人身份证件类型", type: 'switch', value: '' },
+  { name: "tsinumber", title: "身份证件号码", _title: "共同借款人身份证件号码", _type: "idcard", reg: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, value: '' },
+  { name: "tstel", title: "手机号", _title: "共同借款人手机号", reg: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, type: 'number', _type: "number", value: "" },
+  { name: "tsrelation", title: "与借款人关系", _title: "共同借款人与借款人关系", type: 'switch', value: "" },
+  { name: "tsnaddress", title: "现居住地址", _title: "x省x市/县详细地址门牌号", reg: /^.+省.+(市|县).+(区|镇).+\d+$/, value: "" },
+  // 0同居住地址 1同单位地址
+  { name: "tsmaddress", title: "邮寄地址", _title: "共同借款人邮寄地址", type: 'switch', value: "" },
+  { name: "tsemail", title: "电子邮箱", _title: "共同借款人电子邮箱", reg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, value: "" },
+  { name: "tswx", title: "微信号", _title: "共同借款人微信号", reg: /^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}$/, value: "" },
+  { name: "tswname", title: "现工作单位名称", _title: "共同借款人现工作单位名称", value: "" },
+  { name: "tswphone", title: "单位电话", _title: "共同借款人单位电话", reg: /^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$/, value: "" },
+  { name: "tswaddress", title: "现工作单位地址", _title: "共同借款人现工作单位地址", reg: /^.+省.+(市|县).+(区|镇).+\d+$/, value: "" },
+  { name: "tsmincome", title: "税后月收入", _title: "共同借款人税后月收入", type: 'number', _type: "number", value: "" }
+  ]
+];
+
+// switch
+const switchs = {
+  // 性别
+  sex: ["女", "男"],
+  // 户口
+  rpr: ["本地户口", "外地户口"],
+  // 行业
+  itype: ["农林牧鱼", "制造业", "批发零售", "信息传输/软件/信息技术服务", "房地产", "建筑业", "住宿/餐饮", "卫生/社会工作", "科研/技术服务", "公共管理/社会保障/社会组织", "采矿业", "文化/体育/娱乐业", "居民服务/修理/其他服务业", "租赁/商务服务业", "交通运输/仓储/邮政业", "教育", "金融", "国际组织", "电热力/燃气/水生产供应业 19水利/环境/公共设施管理", "其他"],
+  // 国籍地区
+  nationality: ["中国大陆（内地）", "中国香港", "中国台湾", "中国澳门", "外国籍"],
+  // 身份证类型
+  itype: ["身份证", "护照", "军官证", "户口", "临时身份证", "港澳台通行证"],
+  // 婚姻状况
+  mstatus: ["未婚", "已婚", "离异", "丧偶", "其他"],
+  // 教育程度
+  elevel: ["高中以下", "高中", "专科", "学士", "硕士", "博士"],
+  // 居住房产类型
+  hptype: ["按揭商品房", "单位房产", "全款自购商品房", "直系亲属房产", "自建房", "租赁房", "其他"],
+  // 邮寄地址
+  maddress: ["同居住地址", "同单位地址"],
+  // 职业类型
+  otype: ["个体工商户", "私/民营企业", "公务员（政府机关正式员工）", "国有企业/事业单位", "外资企业", "专业技术人员", "现代金融关联企业", "其他"],
+  // 是否挂靠
+  wbst: ["是", "否"],
+  // 是否有共同借款人 
+  thesame: ["没有", "有"],
+  // 共同借款人身份证件类型
+  tsitype: ["身份证", "护照", "军官证", "户口", "临时身份证", "港澳台通行证"],
+  // 共同借款人邮寄地址
+  tsmaddress: ["同居住地址", "同单位地址"],
+};
+// 当前时间
+const date = () => {
+  var date = new Date();
+  return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+}
+
+module.exports = {
+  value, switchs, date
+};

pages/add/index.js

@@ -1,18 +1,69 @@
+import { value, switchs, date } from "./config"
 const app = getApp();
 Page({
   data: {
     CustomBar: app.globalData.CustomBar,
-    value: [
-      { name: "vmodel", require, value: '', msg: "成型不能为空" },
-    ]
+    value,
+    active: '',
+    activeObject: {},
+    activeIndex: [],
+    switchB: false,
+    endDate: date(),
+    switchs,
   },
   // 提交
   submitFunc () {
-    const query = wx.createSelectorQuery();
-    query.select('.form').boundingClientRect();
-    query.exec(res => {
-      console.log(res)
+    let { value } = this.data, msgs = [], data = {};
+    value = value[2][6]['value'] == 0 ? [...value[0], ...value[1], ...value[2]] : [...value[0], ...value[1], ...value[2], ...value[3]];
+    console.log(value)
+    value.forEach(item => {
+      // 判断是否为空
+      if (!item.value) { msgs.push(`${item.title}不能为空！`); return false; };
+      // 数字类型
+      if (item.type == 'number' && !/^\d+.?\d*$/.test(item.value)) { msgs.push(`${item.title}必须是数字！`); return false; }
+      // 正则判断
+      console.log(item)
+      if (item.reg && item.reg.test(item.value)) { msgs.push(`${item.title}格式不正确！`); return false; };
+      data[item.name] = item.value;
     })
+    console.log(data);
+    console.log(msgs);
+
+  },
+  // 输入
+  inputFunc (e) {
+    let { value } = this.data, { index } = e.currentTarget.dataset;
+    value[index[0]][index[1]]['value'] = e.detail.value;
+    this.setData({ value })
+  },
+
+  // switch 
+  switchFunc (e) {
+    let { value, switchs } = this.data, { index } = e.currentTarget.dataset;
+    let { name } = value[index[0]][index[1]];
+    if (switchs.hasOwnProperty(name)) {
+      this.setData({ switchB: true, active: name, activeIndex: index })
+    } else {
+      let obj = Object.fromEntries([[`${name}Show`, true]])
+      this.setData({ ...obj });
+    }
+  },
+
+  // 隐藏单选框 
+  hideModal () { this.setData({ switchB: false }) },
+
+  // 单选框赋值
+  changeFunc (e) {
+    let { activeIndex, value } = this.data;
+    let _value = e.detail.value * 1;
+    value[activeIndex[0]][activeIndex[1]]['value'] = _value;
+    this.setData({ value })
+  },
+  // 日期
+  DateChange (e) {
+    let { value } = this.data, { index } = e.currentTarget.dataset;
+    value[index[0]][index[1]]['value'] = e.detail.value;
+    this.setData({ value })
   },
   onLoad: function (options) {
 

pages/add/index.wxml

@@ -2,52 +2,174 @@
   <view slot="content">新增填报</view>
 </cu-custom>
 <view class="section">
-  <form class="form">
-    <view class="cu-bar bg-white solid-bottom">
-      <view class="action">
-        <text class="cuIcon-title text-orange "></text>
-        <view>
-          <view class="text-xl text-black"><text>车辆和贷款信息</text> <text class="text-red">（必填）</text></view>
-          <view class="text-sm">机动车及与车辆相关的物理附属设备、服务、水费等 </view>
-        </view>
+  <view class="cu-bar bg-white solid-bottom">
+    <view class="action">
+      <text class="cuIcon-title text-orange "></text>
+      <view>
+        <view class="text-xl text-black"><text>车辆和贷款信息</text> <text class="text-red">（必填）</text></view>
+        <view class="text-sm">机动车及与车辆相关的物理附属设备、服务、水费等 </view>
       </view>
     </view>
-
-    <view class="cu-form-group">
-      <view class="title">车型</view>
-      <input name="car" placeholder="请输入车型"></input>
-    </view>
-
-    <view class="cu-bar bg-white solid-bottom">
-      <view class="action">
-        <text class="cuIcon-title text-orange "></text>
-        <view>
-          <view class="text-xl text-black"><text>申请人基本信息</text> <text class="text-red">（必填）</text></view>
+  </view>
+  <!--form框类型奇特  特殊处理 除开发人员或者经验娴熟的人，其余不建议修改-->
+  <view wx:for="{{value[0]}}" wx:key="index" data-index="{{[0,index]}}" class="cu-form-group"
+    bindtap="{{item.type=='switch' ? 'switchFunc' : ''}}">
+    <!-- 没有输入意义的行 -->
+    <view wx:if="{{item.style}}" class="title">{{item.title}}</view>
+    <!-- 输入行 -->
+    <block wx:elif="{{item.type=='picker'}}">
+      <view class="title">{{item.title}}</view>
+      <picker class="picker" style="height:100rpx;line-height: 100rpx;" mode="date" value="{{item.value}}"
+        data-index="{{[0,index]}}" start="1900-01-01" end="{{endDate}}" bindchange="DateChange">
+        <view class="picker">
+          {{item.value}}
         </view>
+      </picker>
+    </block>
+    <block wx:else>
+      <view class="title {{item.norequire ? 'text-blue' : ''}}" style="">{{item.title}}</view>
+      <input data-index="{{[0,index]}}" data-value="{{item.value}}" id="{{item.name}}"
+        type="{{item._type ? item._type : 'text'}}"
+        value="{{item.type == 'switch' ? switchs[item.name][item.value] : item.value}}" bindinput="inputFunc"
+        style="z-index: 0;height: 60rpx;transform: translateY(-3rpx);"
+        disabled="{{item.disabled || item.type=='switch'}}"
+        placeholder="{{(item.disabled || item.type=='switch') ? '' : item._title ? '请输入' +item._title : '请输入' + item.title}}"></input>
+      <!-- switch 特殊处理 -->
+      <view wx:if="{{item.type=='switch'}}" class="cuIcon-right"></view>
+    </block>
+  </view>
+
+  <view class="cu-bar bg-white solid-bottom solid-top">
+    <view class="action">
+      <text class="cuIcon-title text-orange "></text>
+      <view>
+        <view class="text-xl text-black"><text>申请人基本信息</text> <text class="text-red">（必填）</text></view>
       </view>
     </view>
+  </view>
 
-    <view class="cu-bar bg-white solid-bottom">
-      <view class="action">
-        <text class="cuIcon-title text-orange "></text>
-        <view>
-          <view class="text-xl text-black"><text>紧急联系人信息</text> <text class="text-red">（必填）</text></view>
+  <!--form框类型奇特  特殊处理 除开发人员或者经验娴熟的人，其余不建议修改-->
+  <view wx:for="{{value[1]}}" wx:key="index" data-index="{{[1,index]}}" class="cu-form-group"
+    bindtap="{{item.type=='switch' ? 'switchFunc' : ''}}">
+    <!-- 没有输入意义的行 -->
+    <view wx:if="{{item.style}}" class="title">{{item.title}}</view>
+    <!-- 输入行 -->
+    <block wx:elif="{{item.type=='picker'}}">
+      <view class="title">{{item.title}}</view>
+      <picker class="picker" style="height:100rpx;line-height: 100rpx;" mode="date" value="{{item.value}}"
+        data-index="{{[1,index]}}" start="1900-01-01" end="{{endDate}}" bindchange="DateChange">
+        <view class="picker">
+          {{item.value}}
         </view>
+      </picker>
+    </block>
+    <block wx:else>
+      <view class="title {{item.norequire ? 'text-blue' : ''}}" style="">{{item.title}}</view>
+      <input data-index="{{[1,index]}}" data-value="{{item.value}}" id="{{item.name}}"
+        type="{{item._type ? item._type : 'text'}}"
+        value="{{item.type == 'switch' ? switchs[item.name][item.value] : item.value}}" bindinput="inputFunc"
+        style="z-index: 0;height: 60rpx;transform: translateY(-3rpx);"
+        disabled="{{item.disabled || item.type=='switch'}}"
+        placeholder="{{(item.disabled || item.type=='switch') ? '' : item._title ? '请输入' +item._title : '请输入' + item.title}}"></input>
+      <!-- switch 特殊处理 -->
+      <view wx:if="{{item.type=='switch'}}" class="cuIcon-right"></view>
+    </block>
+  </view>
+
+  <view class="cu-bar bg-white solid-bottom solid-top">
+    <view class="action">
+      <text class="cuIcon-title text-orange "></text>
+      <view>
+        <view class="text-xl text-black"><text>紧急联系人信息</text> <text class="text-red">（必填）</text></view>
       </view>
     </view>
+  </view>
 
-    <view class="cu-bar bg-white solid-bottom">
-      <view class="action">
-        <text class="cuIcon-title text-orange "></text>
-        <view>
-          <view class="text-xl text-black"><text>共同借款人信息</text> <text class="text-red">（必填）</text></view>
+  <!--form框类型奇特  特殊处理 除开发人员或者经验娴熟的人，其余不建议修改-->
+  <view wx:for="{{value[2]}}" wx:key="index" data-index="{{[2,index]}}" class="cu-form-group"
+    bindtap="{{item.type=='switch' ? 'switchFunc' : ''}}">
+    <!-- 没有输入意义的行 -->
+    <view wx:if="{{item.style}}" class="title">{{item.title}}</view>
+    <!-- 输入行 -->
+    <block wx:elif="{{item.type=='picker'}}">
+      <view class="title">{{item.title}}</view>
+      <picker class="picker" style="height:100rpx;line-height: 100rpx;" mode="date" value="{{item.value}}"
+        data-index="{{[2,index]}}" start="1900-01-01" end="{{endDate}}" bindchange="DateChange">
+        <view class="picker">
+          {{item.value}}
         </view>
+      </picker>
+    </block>
+    <block wx:else>
+      <view class="title {{item.norequire ? 'text-blue' : ''}}" style="">{{item.title}}</view>
+      <input data-index="{{[2,index]}}" data-value="{{item.value}}" id="{{item.name}}"
+        type="{{item._type ? item._type : 'text'}}"
+        value="{{item.type == 'switch' ? switchs[item.name][item.value] : item.value}}" bindinput="inputFunc"
+        style="z-index: 0;height: 60rpx;transform: translateY(-3rpx);"
+        disabled="{{item.disabled || item.type=='switch'}}"
+        placeholder="{{(item.disabled || item.type=='switch') ? '' : item._title ? '请输入' +item._title : '请输入' + item.title}}"></input>
+      <!-- switch 特殊处理 -->
+      <view wx:if="{{item.type=='switch'}}" class="cuIcon-right"></view>
+    </block>
+  </view>
+
+  <view wx:if="{{value[2][6]['value']==1}}" class="cu-bar bg-white solid-bottom solid-top">
+    <view class="action">
+      <text class="cuIcon-title text-orange "></text>
+      <view>
+        <view class="text-xl text-black"><text>共同借款人信息</text> <text class="text-red">（必填）</text></view>
       </view>
     </view>
-  </form>
+  </view>
+  <!--form框类型奇特  特殊处理 除开发人员或者经验娴熟的人，其余不建议修改-->
+  <view wx:if="{{value[2][6]['value']==1}}" wx:for="{{value[3]}}" wx:key="index" data-index="{{[3,index]}}"
+    class="cu-form-group" bindtap="{{item.type=='switch' ? 'switchFunc' : ''}}">
+    <!-- 没有输入意义的行 -->
+    <view wx:if="{{item.style}}" class="title">{{item.title}}</view>
+    <!-- 输入行 -->
+    <block wx:elif="{{item.type=='picker'}}">
+      <view class="title">{{item.title}}</view>
+      <picker class="picker" style="height:100rpx;line-height: 100rpx;" mode="date" value="{{item.value}}"
+        data-index="{{[3,index]}}" start="1900-01-01" end="{{endDate}}" bindchange="DateChange">
+        <view class="picker">
+          {{item.value}}
+        </view>
+      </picker>
+    </block>
+    <block wx:else>
+      <view class="title {{item.norequire ? 'text-blue' : ''}}" style="">{{item.title}}</view>
+      <input data-index="{{[3,index]}}" data-value="{{item.value}}" id="{{item.name}}"
+        type="{{item._type ? item._type : 'text'}}"
+        value="{{item.type == 'switch' ? switchs[item.name][item.value] : item.value}}" bindinput="inputFunc"
+        style="z-index: 0;height: 60rpx;transform: translateY(-3rpx);"
+        disabled="{{item.disabled || item.type=='switch'}}"
+        placeholder="{{(item.disabled || item.type=='switch') ? '' : item._title ? '请输入' +item._title : '请输入' + item.title}}"></input>
+      <!-- switch 特殊处理 -->
+      <view wx:if="{{item.type=='switch'}}" class="cuIcon-right"></view>
+    </block>
+  </view>
 </view>
 <!-- 功能栏 -->
 <van-goods-action>
   <van-goods-action-button type="warning" bind:click="saveFunc" text="保存" />
   <van-goods-action-button bind:click="submitFunc" text="提交" />
-</van-goods-action>
+</van-goods-action>
+
+<!-- 单选 -->
+<view class="cu-modal {{switchB ?'show':''}}" bindtap="hideModal">
+  <view class="cu-dialog" catchtap>
+    <view class="bg-white padding solid-bottom">{{value[activeIndex[0]][activeIndex[1]]['title']}}</view>
+    <scroll-view scroll-y style="max-height: 50vh;">
+      <radio-group bindchange="changeFunc" class="block">
+        <view class="cu-list menu text-left">
+          <view class="cu-item" wx:for="{{switchs[active]}}" wx:key="index">
+            <label class="flex justify-between align-center flex-sub">
+              <view class="flex-sub">{{item}}</view>
+              <radio value="{{index}}" class="round"></radio>
+            </label>
+          </view>
+        </view>
+      </radio-group>
+    </scroll-view>
+  </view>
+</view>

pages/add/index.wxss

@@ -5,4 +5,26 @@
   line-height: 60rpx;
   font-size: 32rpx;
   background-color: #fff;
+}
+.section{
+  margin-bottom: 50px;
+}
+.section picker::after{
+  font-family: "cuIcon";
+    display: block;
+    content: "\e6a3";
+    position: absolute;
+    font-size: 34rpx;
+    color: var(--grey);
+    line-height: 100rpx;
+    width: 60rpx;
+    text-align: center;
+    top: 0;
+    bottom: 0;
+    right: -20rpx;
+    margin: auto;
+    margin-top: auto;
+    margin-right: auto;
+    margin-bottom: auto;
+    margin-left: auto;
 }