支付宝小程序编辑某一元素信息并提交

一、背景

测试机列表有很多条测试机的数据，要求能够编辑任一一条数据的某个元素的值，例如列表里显示了测试A的机型、编号、系统版本号，要求可以编辑系统版本号

二、方案选型

方案1、仿照支付宝

如下图

但不知道怎么实现的，看样子是微应用，不是小程序，所以放弃啦

方案2 使用my.prompt

my.prompt 是弹出一个对话框，让用户在对话框内输入文本的 API。官方的介绍，感觉蛮合适的
my.canIUse(‘prompt’)，发现钉钉小程序并不支持这个api

方案3 使用modal对话框

https://opendocs.alipay.com/mini/component-ext/modal
官方文档里面modal的使用感觉有点复杂，都进行了封装，对于在她封装的基础上修改比较困难，对此我自己整理了一下modal怎么使用
1、在页面某处点击触发modalA（modalA状态变为了true）

<list-item arrow="horizontal" index="tips" onClick="modalOpenedEdit" data-mobileNo="{{mobileNo}}" data-url="system/index" key="items-tips">
      <view class="row">
        <view class="row-title">系统版本号</view>
        <view class="row-extra">{{mobileDetail.sysInfo}}</view>
      </view>
    </list-item>

此中的onClick触发了modal，弹出下面的div弹框

2、触发的modal里面有段div（可自定义你需要的样式）

<modal data-mobileNo="{{mobileNo}}" show="{{modalOpenedEdit}}" >
 <form onSubmit="onSubmit" onReset="onReset">
<view class="form-row-content">
          <input name="input" class="input" value="{{mobileDetail.sysInfo}}" />
        </view>
        <view class="buttons">
        <view class="page-section-btns">
        <view><button  style="float:left;margin-left:50px;background-color:#ffffff;border:none;color:#4b96f3" size="mini" onTap="cancel">取消</button></view>
        <view><button  style="float:right;margin-right:50px;background-color:#ffffff;border:none;color:#4b96f3 " size="mini" formType="submit">确定</button></view>
        </view>
      </form>
</modal>

div为一个输入框，输入框下有确定和取消按钮

3、div中的某个按钮被触发，关闭modalA(modalA状态变为了false)
例如cancel事件关闭了该弹框，则只需要些取消事件的js即可

cancel(){
    this.setData({
      modalOpenedEdit: false,
    });
  }