家政维修平台实战13动态显示价格

现在我们已经搭建好了详情页，除了显示基本信息外，页面还要显示不同的规格。在选择规格组合的时候价格会有变化，本篇我们介绍这种需要动态切换功能的开发过程。

1 创建变量

首先我们需要创建一个内置数据表查询来根据当前的服务项目去找到我们的服务规格信息

在代码区点击点击新建

选择新建内置数据表查询

选择服务规格表，触发方式选择入参变化时自动执行

查询条件设置为服务项目ID等于我们的URL参数

排序方式设置为规格类型升序、规格值升序

每页大小我们设置为200，页码设置为1

2 搭建布局

变量定义好之后，就需要搭建布局，像这种可以进行切换选择的我们通常使用标签选择组件来搭建

先在价格下边添加普通容器，里边添加两个标签选择组件

选中第一个标签选择，修改选择方式为单选

点击选项旁边的fx，我们来绑定一下数据

我们利用Set去重，只保留不相同的内容，表达式如下

Array.from(new Set(($w.guige.data.records.map(item=>item.gglx)))).map(item=>({
    label:item,
    value:item
}))

然后关闭显示标题

按照同样的方法配置第二个标签选择

3 动态显示价格

规格搭建好了之后，接下来就需要根据不同的规格来显示价格，我们创建两个变量用来显示原价和现价

在我们原来的价格的文本组件，修改一下内容，使用短路运算符来添加现价的显示

"¥"+($w.page.dataset.state.currentPrice||$w.dataView1.record.price)+$w.dataView1.record.unit

在现价的旁边再添加一个文本组件，用来显示原价

设置样式，布局设置为横向排列，垂直居中

新添加的文本组件绑定我们的原价的变量

绑定条件展示

这样只有在有原价的情况下这个文本组件才显示，通常我们这种原价是要有一条中划线，点击CSS添加具体的样式

:root {
  font-size: 16px;
  line-height: 18px;
  color: #999;
  text-decoration: line-through;
}

4 设置值改变事件

我们的价格字段设置好之后，在选择不同的组合的时候就需要显示不同的价格，在代码区新建一个javascript方法

输入如下的代码

export default function({event, data}) {

  const selectedType = $w.tagSelect1.value;
const selectedItem = $w.tagSelect2.value;

const foundCombination = $w.guige.data.records.find(combination => {
  // 回调函数接收当前数组元素（这里是combination对象）
  // 检查当前元素的 'gglx' 是否等于用户选择的 'selectedType'
  // 并且当前元素的 'ggz' 是否等于用户选择的 'selectedItem'
  return combination.gglx === selectedType && combination.ggz === selectedItem;
});

if (foundCombination) {
  $w.page.dataset.state.orginPrice = foundCombination.yj
  $w.page.dataset.state.currentPrice = foundCombination.xj
  // 可以在这里更新你的界面上显示的原价和现价
} else {
  console.log("未找到匹配的规格组合");
  // 可以显示默认值或错误信息
}

}

配置好了之后，给标签选择设置值改变事件，选择我们的自定义方法

最终的效果

默认显示的时候是没有原价的

当选中了一个组合后，就会显示原价和现价

总结

本节我们介绍了价格动态切换的功能，这种场景在电商小程序里非常常见，核心的思路还是使用常见的数据结构，比如数组和Set，通过自带的API来实现我们需要的效果。