Vant 弹出 Dialog 修改用户婚姻状态

以下是一个简单的实现思路：

1. 在页面中添加一个按钮或链接，点击后弹出一个 dialog 窗口。

2. 在 dialog 窗口中添加两个单选框，分别表示未婚和已婚。

3. 当用户点击确认按钮时，获取当前选中的单选框的值（未婚或已婚）。

4. 将获取到的值通过 Ajax 请求发送给后端，更新用户的婚姻状态。

5. 在 Ajax 请求成功后，更新页面上对应的文本或图标，表示用户的婚姻状态已经更新成功。

6. 如果请求失败，则在界面上提示用户更新失败的原因。

下面是一个简单的代码示例：

HTML 代码：

<button id='update-marital-status-btn'>修改婚姻状态</button>

<div id='update-marital-status-dialog' style='display: none;'>
  <label><input type='radio' name='marital-status' value='single'>未婚</label>
  <label><input type='radio' name='marital-status' value='married'>已婚</label>
  <button id='confirm-update-marital-status-btn'>确认</button>
</div>

<div id='user-marital-status'>未婚</div>

JavaScript 代码：

$(function() {
  // 点击按钮弹出 dialog
  $('#update-marital-status-btn').click(function() {
    $('#update-marital-status-dialog').show();
  });

  // 点击确认按钮更新婚姻状态
  $('#confirm-update-marital-status-btn').click(function() {
    var maritalStatus = $('input[name='marital-status']:checked').val();
    if (maritalStatus) {
      $.ajax({
        url: '/update-marital-status',
        type: 'POST',
        data: { maritalStatus: maritalStatus },
        success: function(response) {
          // 更新页面上的婚姻状态文本或图标
          $('#user-marital-status').text(maritalStatus === 'single' ? '未婚' : '已婚');
          // 隐藏 dialog
          $('#update-marital-status-dialog').hide();
        },
        error: function(xhr, status, error) {
          alert('更新婚姻状态失败，错误信息：' + error);
        }
      });
    } else {
      alert('请选择婚姻状态');
    }
  });
});