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('请选择婚姻状态');
    }
  });
});
``