当前位置：首页 > ds >正文

uniapp-商城-56-后台新增商品（弹窗属性继续分析）

ds 2025/5/14 5:34:36

1、概述

前面我们讲了布局和相应商品属性的页面布局。属性是一个弹窗，它是一个cell的组件的实现属性。点击该cell就会调用uni-popup 进行弹窗。基本的页面布局如下：

属性显示其实是个一嵌套的数据显示。

2 页面显示商品属性点击添加属性

2.1 代码如下：

			<uni-forms-item label="商品属性" ><u-cell :title="skuTitle" isLink :border="false" @click="clickSelect"></u-cell><view class="skuList"><view class="item" v-for="item in goodsFormData.sku_select" @click="clickSelect"><view class="left">{{item.skuName}}:</view><view class="right">{{skuChildName(item.children)}}</view></view></view></uni-forms-item>

2.2 代码解读

cell ：

该组件就是cell单元格。一般用于一组列表的情况，比如个人中心页，设置页等，默认有一个边框，且整个可以被点击。

title是组件显示的名称；

isLink 就是显示一个右侧的箭头；

border：不用显示默认的边框；注意使用加v-band（也就是加：）

<uni-forms-item label="商品属性" >

// label 显示在界面上的文本就是商品属性
<u-cell :title="skuTitle" isLink :border="false" @click="clickSelect"></u-cell>

// cell 实现点击的组件 title 就是该如何显示？-----见2.3

// clickSelect 是一个函数 ----见 2.4

                //下面是显示选中后效果，后面还会继续分析
                <view class="skuList">
                    <view class="item" v-for="item in goodsFormData.sku_select" @click="clickSelect">
                        <view class="left">{{item.skuName}}:</view>
                        <view class="right">{{skuChildName(item.children)}}</view>
                    </view>
                </view>
            </uni-forms-item>

2.3 title的计算

默认就是显示的点击添加属性，如果已经添加了属性就会进行显示，把数据传递给this.goodsFormData.sku_select

如果数据有，那就是数据库有，数据库的值也是来自于一开始选中的，后面再来分析这个选择接口。

computed: {
            skuTitle() {
                if (this.goodsFormData.sku_select.length) {
                    let arr = this.goodsFormData.sku_select.map(item => {
                        return item.skuName
                    })
                    return arr.join("/")
                } else {
                    return "点击添加属性"
                }
            }
        },

2.4 对cell 的点击clickSelect

//点击选择属性
            clickSelect() {
                this.$refs.attrWrapPop.open(); //使用open方法弹出来
                if (this.skuArr.length) return;
                this.getSkuData(); },

查看全文

http://www.xdnf.cn/news/5905.html