更新记录

1.0.4（2024-08-12） 下载此版本

更新使用说明

1.0.3（2024-08-12） 下载此版本

更新使用说明

1.0.2（2024-08-12） 下载此版本

更新使用说明

平台兼容性

uni-app

其他

dw-goods-card-1

搜索“大王模板”查看全部页面模板

使用说明

可以直接下载示例代码，里面有完整的示例

1. pages.json 中配置 easycom

   {
   "easycom": {
   "^dw-(.*)": "dw-$1/components/dw-$1/dw-$1.vue"
   }
   }

2. 页面中引用

   // template
   <dw-goods-card-1
   @click="actionClicked(goodsData)"
   :data="goodsData"
   ></dw-goods-card-1>
   goodsData = {
   goodsName: '商品名称',
   goodsTag: [ '标签一' ]
   btnStr: '去购买', // 为空时不展示按钮
   goodsImage: '商品图片地址'
   }
   function actionClicked (goodsData) {
   uni.showToast({
     title: '点击了商品卡片' + goodsData.goodsName,
     icon: 'none'
   })
   }

3. 注意事项（非常重要）

   • 为了适应更多用户场景，所以商品卡片默认没有设置 padding，大家可以根据实际情况自行调整

字段说明

goodsData = {
  goodsName: '商品名称',
  goodsTag: [
    '标签一',
    {
      label: '标签二',
      color: '#318ff5'
    }
  ]
  btnStr: '去购买', // 为空时不展示按钮
  buttons: [ // 多按钮时使用 buttons，当buttons 存在时，btnStr 失效
    {
      label: '加入购物车',
      eventName: 'customEvent' // 监听事件，<dw-goods-card-1 @customEvent="..." />
    }
  ],
  goodsImage: '商品图片地址', // 默认为 148rpx * 148rpx，也可以使用对象形式如下
  goodsImage: {
    url: '商品图片地址',
    size: '240rpx' // 将设置图片高宽为 240rpx
  }
}

事件说明