步骤五：开发调查问卷提交成功页面

创建调查问卷提交成功页面。

在应用设计器的左侧导航栏中，选择“界面”，单击页面后的“+”，进入添加标准页面。

设置页面的标签和名称，单击“添加”，即可创建一个标准页面。

图1 添加标准页面

表1 新建标准页面参数说明
参数	说明	示例
标签	输入标准页面的标签名，用于在页面显示，创建后可修改。取值范围：1~64个字符。	提交成功
名称	输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下：长度不能超过64个字符，包括前缀命名空间的长度。名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。	questionnaire_submitPage

设置页面属性。
鼠标单击页面空白处，在“属性 > 样式 > 布局”中设置上内边距为“100”，下内边距为“100”，打开“高级设置”在样式源码中，添加“text-align: center;”，目的是为了让组件居中显示。

图2 设置页面属性

添加图标。
1. 从“基本组件 > 基本”中，拖拽“图标”组件至页面设计区。
  图3 添加图标组件
2. 选中图标组件，设置图标大小为“70”，单击图标选择框，在“其他”中搜索“circ”，选择“checkmark-circled”，单击“确认”，颜色设置为“#4A90E2”。
  图4 设置图标基本属性
  
  图5 选择图标
添加标题。
1. 从“基本组件 > 基本”中，拖拽“标题”组件到图标组件下方。
  图6 添加标题组件
2. 选中标题组件，设置标题内容为“提交成功”，在“样式 > 布局”中设置内边距上、右、下、左分别为“10”、“20”、“10”和“20”，字体大小设置为“26px”。
  图7 设置标题组件
添加继续提交按钮。
1. 从“基本组件 > 基本”中，拖拽“按钮”组件至页面工作区到标题组件下方。
  图8 添加继续提交按钮
2. 单击按钮左侧的空白区域，选中容器组件，在“属性 > 基本属性”中设置水平对齐方式为“中”。
  图9 设置容器组件
3. 选中按钮组件，设置文本内容为“继续提交”，类型选择“默认按钮”，大小选择“默认”。
  图10 设置按钮组件
4. 在“事件”页签，单击“点击”后的“+”，进入添加动作页面。
5. 在“自定义动作”中，输入自定义JS代码，单击“创建”。
```
/**
 * 获取URL的路径参数和查询参数
 * 
 * 示例URL：/{pageId}/{itemId}?demo=demo
 */
let pageName = context.$page.params.page;
let recordId = context.$page.params.recordId
context.$page.loadStdPage(pageName)
```
添加查看详情按钮。
1. 从“基本组件 > 基本”中，拖拽“按钮”组件到继续提交按钮后方。
  图11 添加查看详情按钮
2. 选中按钮组件，设置文本内容为“查看详情”，类型选择“默认按钮”，大小选择“默认”。
  图12 设置按钮基本属性
3. 在“事件”页签中，单击“点击”后的“+”，进入添加动作页面。
4. 在“自定义动作”中，输入自定义JS代码，单击“创建”。
```
let pageName = context.$page.params.page;
let recordId = context.$page.params.recordId
let queryString="recordId="+recordId;
context.$page.openStdPage(pageName,queryString)
```
返回步骤四：开发调查问卷页面页面，更新14.d中的调查问卷提交脚本。
在原先脚本中，添加如下代码。其中，“命名空间__questionnaire_submitPage”为问卷提交成功页面的名称。
```
context.$page.loadStdPage("命名空间__questionnaire_submitPage", queryParam);
```

设置页面加载事件。

单击页面空白处，在“事件”页签中，单击“加载”后的“+”，进入添加动作页面。

在“自定义动作”中，输入如下代码，单击“创建”。

function parseJSON(str) {
    var flag = false;
    try {
        JSON.parse(str);
        flag = true
    } catch (err) {
        flag = false;
    }
    return flag;
}
var recordId = context.$page.params.recordId;
if (recordId) {
    // 获取Object对象
    var _object = context.object('命名空间__questionaireRecord__CST');
    // 查询满足条件数据
    var _condition = { conjunction: 'AND', conditions: [{ field: 'id', operator: 'eq', value: recordId }] };
    _object.query(_condition).then(function (res) {
        if (res.resCode == 0) {
            var result = res.result;
            if (result && result.length > 0) {
                var data = result[0];
                try {
                    for (var item in data) {
                        if (data[item] && parseJSON(data[item])) {
                            data[item] = JSON.parse(data[item]);
                        }
                    }
                } catch (err) {
                    console.log(err)
                }
                $model.ref("formData").setData(data);
                $model.ref("editFlag").setData(true);
            }
        }
    });
}

其中，“命名空间__questionaireRecord__CST”为步骤三：添加调查表记录对象中创建对象的名称。

验证页面是否能正常跳转。
1. 返回“调查问卷”页面，单击，进入调查问卷预览页面。
2. 在调查问卷预览页面，填写问卷，单击“提交”，成功跳转到图13中页面，说明页面跳转正常。
  在提交成功页面，单击“继续提交”按钮时，同样能正常跳转到“调查问卷应用”填写页面。
  
  思考：单击“查看详情”按钮时，正常跳转到“调查问卷应用”页面，但是发现该页面是可以编辑内容的，这与查看详情功能不符，接下来我们将继续完善该功能。
  图13 进入提交成功页面