![9e33d9101b3c788190327abcf58a7b70.png](https://img-blog.csdnimg.cn/img_convert/9e33d9101b3c788190327abcf58a7b70.png)
目标:
搭建商城的商品详情页(静态图),并可以从商品列表页点击跳转进来;
开发环境:
白码低代码开发平台的新自定义页功能(使用vue框架)
无代码 | 低代码开发平台介绍-白码www.bnocode.com![1aad2e35d81a4108b0b0ea03e8cd0ec4.png](https://img-blog.csdnimg.cn/img_convert/1aad2e35d81a4108b0b0ea03e8cd0ec4.png)
前期准备:
上次已经建好了商品数据表,以及商品列表数据集,这次商品详情页就需要创建商品的对象数据集,对象数据集是指只包含一条数据的数据集;
商品详情页设计图如下(设计图上传到蓝湖,可直接复制样式代码)
![01f3102542191f1422c2dde5690918d7.png](https://img-blog.csdnimg.cn/img_convert/01f3102542191f1422c2dde5690918d7.png)
根据设计图,可以看出由六部分组成:
①顶部的导航栏
![f6d58750b611d28d2fcfed3954aa103c.png](https://img-blog.csdnimg.cn/img_convert/f6d58750b611d28d2fcfed3954aa103c.png)
②商品基础信息:图片、名称、价格、规格、销量等信息
![9db273ee81668885e6373a03a043492f.png](https://img-blog.csdnimg.cn/img_convert/9db273ee81668885e6373a03a043492f.png)
③商家信息
![bfe52375655d587671713302e1e7d370.png](https://img-blog.csdnimg.cn/img_convert/bfe52375655d587671713302e1e7d370.png)
④商品评价信息
![4e1dc67683a68ccdad54c39ddc6f9fce.png](https://img-blog.csdnimg.cn/img_convert/4e1dc67683a68ccdad54c39ddc6f9fce.png)
⑤商品详情,详情内容是富文本
![3297cdd7d5ce7032a6ecfa26439fdb32.png](https://img-blog.csdnimg.cn/img_convert/3297cdd7d5ce7032a6ecfa26439fdb32.png)
⑥底部的导航
![a5c82ef7af6d04f09848e00be7a4bdf4.png](https://img-blog.csdnimg.cn/img_convert/a5c82ef7af6d04f09848e00be7a4bdf4.png)
实现步骤:
在白码工作台的自定义页新增一个页面,命名为“商品详情”;
![72c6ad98afd46dc422a4aa555949f284.png](https://img-blog.csdnimg.cn/img_convert/72c6ad98afd46dc422a4aa555949f284.png)
编辑页面,切换到移动端
![66a0ce4f51bbde5f76d8511d228e077c.png](https://img-blog.csdnimg.cn/img_convert/66a0ce4f51bbde5f76d8511d228e077c.png)
打开图片库,将页面所需图片素材上传到图片库;
![b7cf1ed458cc99d7538404c26edb7bb5.png](https://img-blog.csdnimg.cn/img_convert/b7cf1ed458cc99d7538404c26edb7bb5.png)
①顶部导航栏
1.打开组件库,添加容器类型的块组件,这里的块组件将作为页面顶部的导航栏
![2ac771dfea49b28a948b495b201aef18.png](https://img-blog.csdnimg.cn/img_convert/2ac771dfea49b28a948b495b201aef18.png)
1.1组件高度和背景颜色等样式都可以从蓝湖设计图这里找到并复制;
![f650673e65446df5b66584ce56c0588f.png](https://img-blog.csdnimg.cn/img_convert/f650673e65446df5b66584ce56c0588f.png)
1.2添加图片组件,放到这个块组件里,作为返回按钮;
![548e0847e7a5b5f2dd0167d66f8002af.png](https://img-blog.csdnimg.cn/img_convert/548e0847e7a5b5f2dd0167d66f8002af.png)
通过编辑css属性调整样式;
![28e2b039985ddd5c61a0e1d636f2a825.png](https://img-blog.csdnimg.cn/img_convert/28e2b039985ddd5c61a0e1d636f2a825.png)
1.3再添加一个文本组件,用于显示商品名称,同样的,可以从蓝湖复制css属性过来直接调整样式;
![e989290fee55cb354abb77e6c4cff161.png](https://img-blog.csdnimg.cn/img_convert/e989290fee55cb354abb77e6c4cff161.png)
此时需要对接数据,先在块组件中对接数据源,选择提前创建好的商品对象数据集;
![4968463b7d3f55daeb0b3277df98b073.png](https://img-blog.csdnimg.cn/img_convert/4968463b7d3f55daeb0b3277df98b073.png)
再添加一个属性,对应的是数据源的名称字段,该属性用于文本组件显示商品名称;
![773217632bcb685466075da07d209045.png](https://img-blog.csdnimg.cn/img_convert/773217632bcb685466075da07d209045.png)
回到刚才的文本组件,设置其文本属性为父级组件的“商品名称”属性(上一步创建的属性);
![0d1df598ab8d8d2d91740256094faec0.png](https://img-blog.csdnimg.cn/img_convert/0d1df598ab8d8d2d91740256094faec0.png)
此时就可以看到页面显示商品名称了
![45acb26435eb4cd861167783d81f73e1.png](https://img-blog.csdnimg.cn/img_convert/45acb26435eb4cd861167783d81f73e1.png)
1.4同理,添加图片组件作为分享按钮,这里就不再重复演示了;
![8901a156277ef51bb4a5a93e16050293.png](https://img-blog.csdnimg.cn/img_convert/8901a156277ef51bb4a5a93e16050293.png)
②中间商品信息
2.添加一个块组件,用于放置商品信息,命名为“商品信息块”,这个块也需要选择数据源为商品对象,并添加需要显示的属性(商品名称、图片、价格、规格、销量商品详情);
![1ca34948f1ffb3ed1ddc35d5da1c599a.png](https://img-blog.csdnimg.cn/img_convert/1ca34948f1ffb3ed1ddc35d5da1c599a.png)
2.1再添加一个块组件,放到“商品信息块”中,用于放置商品的图片、名称、价格、规格和销量,命名为“商品基础信息块”,再把商品信息块的属性对接下来;
![b8f5a2fb16a4d37a79071cb917d835c9.png](https://img-blog.csdnimg.cn/img_convert/b8f5a2fb16a4d37a79071cb917d835c9.png)
2.2添加1个图片组件、4个文本组件都放到“商品基础信息块”中,分别用于显示商品图片和商品名称、价格、规格、销量,并复制蓝湖的css属性进行调整;
![823a48727913d687d4794841e83ef672.png](https://img-blog.csdnimg.cn/img_convert/823a48727913d687d4794841e83ef672.png)
2.3添加四个块,分别用于显示“商家配送”、微信认证、商品评价和商品详情,操作同理;
![1296414ff2a7d113b8dc7ffd33cbe4be.png](https://img-blog.csdnimg.cn/img_convert/1296414ff2a7d113b8dc7ffd33cbe4be.png)
③底部导航
3.底部导航栏的做法其实和顶部导航栏的做法类似,只需要把定位改成“固定底部”;
![26c1068a8affa07bad21ff57c6d80468.png](https://img-blog.csdnimg.cn/img_convert/26c1068a8affa07bad21ff57c6d80468.png)
④从商品列表页跳转至商品详情页
4.上次已经做好了商品列表页,现在需要做跳转的交互,首先需要先在商品详情页添加一个页面属性作为商品id,因为同一个页面要显示不同的商品,这里使用路由类型的页面属性;
![f922789fcb3ca58cd240c4bc1532892e.png](https://img-blog.csdnimg.cn/img_convert/f922789fcb3ca58cd240c4bc1532892e.png)
4.1回到“商品信息块”,设定数据来源的筛选条件,筛选数据源的”_id” 等于页面属性的商品id,这样设定后,每次跳转过来时都会根据不同的商品id筛选到不同的商品并显示对应商品的数据;
![6d681b1cc6a689fc03b897e6260df9b8.png](https://img-blog.csdnimg.cn/img_convert/6d681b1cc6a689fc03b897e6260df9b8.png)
4.1回到之前做好的商品列表页,设置商品列表组件下商品块的点击事件
![a13040d83bd288936e03a08e1b471bdd.png](https://img-blog.csdnimg.cn/img_convert/a13040d83bd288936e03a08e1b471bdd.png)
![fc180ed04f6299d795183ee376e4df0d.png](https://img-blog.csdnimg.cn/img_convert/fc180ed04f6299d795183ee376e4df0d.png)
根据官方的开发文档,代码如下:
![179a2b7528db4b448f2cf19a619c163f.png](https://img-blog.csdnimg.cn/img_convert/179a2b7528db4b448f2cf19a619c163f.png)
function runViewAction(key,value,$ctx = ctx){
let goodsid = $ctx.$$bpView["view_9"].$$bvData["$data"][$ctx.view.index]._id;
$ctx.cmd({
type:"redirect",
value:{
url:"/app/"+vue.$$util.oidTo64.encode(vue.$$pid)+"/5fd9bc22fd43ef5b37a6b225?query="+JSON.stringify({
goodsid
})
}
});
}
测试效果:
![0cfad58e7e674bcb60cc67b0075da93f.gif](https://img-blog.csdnimg.cn/img_convert/0cfad58e7e674bcb60cc67b0075da93f.gif)