头像剪裁

相关介绍

基于 WeCropper， 相关资料请见 : https://we-plugin.github.io/we-cropper/#/

兼容平台

演示代码

证件上传

图片素材

为了确保图片能够在所有平台打开，请下载图片到本地或者部署到您的云，并替换演示代码中的2个身份证默认图片！ 图片下载地址 : https://img-cdn-tc.dcloud.net.cn/uploads/article/20210107/e53bf48607dcf795ab78e419dc5cf432.png https://img-cdn-tc.dcloud.net.cn/uploads/article/20210107/dac9c5c703b2a0bcd254a919d0da5632.png

兼容平台

模板代码

会员排行模板

组件介绍

带有“背景大图”的排行榜界面，请跟据项目实际情况进行修改；

页面配置

兼容平台

演示代码

手写签名界面

界面介绍

基于画布 + 手指触屏事件;非组件模式，更自由的应用及二次开发;签名完成自动产生临时文件便于后续开发;

注意事项

兼容平台

界面源码

商品列表

组件介绍

gui-product-list 组件用于以列表形式展示商品（一行2列），包含图片、价格、购买人数数据展示；

组件名称

gui-product-list : /graceUI/组件目录/gui-product-list

兼容平台

组件属性

组件事件

gotoInfo(index, item) : 点击商品时触发，携带参数 : 数据索引, 对应商品数据

相关说明

组件宽度 = （375 - 间距 * 2）, 产品列表外层不用有左右间距；组件所需的数据格式 :

[{

“name”: “vivo iQOO旗舰新品”,

“img”: “http://gju2.alicdn.com/tps/i3/O1CN0147JEEe23ooz3rBDAX_!!1-juitemmedia.gif”,

“priceMarket”: “2999”,

“price”: “2888”,

“selledNum”: “3815”

},… ]

改进建议

如果组件不能满足您的项目要求 ( 或者数据格式与您的后端不一样 )， 请按照下面的步骤改进组件 :

1. 复制一份 gui-product-list.vue 命名为自己的组件；

2. 改进组件，添加元素及样式；

3. 在页面上使用自己的自定义组件；

演示代码

商品详情

模板介绍

提供基础的商品详情布局(轮播图、详情介绍内容、分享按钮等);提供了详情和评论切换功能;提供商品购买前的属性、数量相关功能;

兼容平台

模板代码

订单中心模板

模板介绍

实现订单展示功能 ；全屏选项卡数据绑定、切换 ；全屏选项卡的加载更多及下拉刷新；

兼容平台

模板代码

购物车模板

模板介绍

以商铺为基本展示单位;支持勾选形式结算;动态价格计算功能;

兼容平台

模板代码

排序与筛选

模板介绍

吸顶式的多条件筛选、排序等功能，常用于商城列表顶部。 已经完成基础布局及逻辑，请根据项目需求自行改进;

兼容平台

模板代码

地址列表

模板介绍

基于列表布局实现常用地址布局，请跟据项目需要自行改进；

兼容平台

模板代码

添加地址

模板介绍

完成页面布局及表单元素布局工作；完成表单验证及表单数据收集工作；请跟据自己的项目需要进行进一步开发；

兼容平台

演示代码

抽奖模板

兼容平台

模板代码

优惠券组件

组件介绍

通用优惠券列表展示布局组件，您可以跟据项目实际需要复制本组件命名为自己的然后改进调用。

组件名称

gui-coupons : /graceUI/组件目录/gui-coupons

兼容平台

组件属性

页面背景颜色设置

演示代码

即时通讯消息列表组件

组件介绍

gui-im-message 消息展示组件用于展示及时通讯消息，支持文本、图片、语音三种格式，带有图片预览，语音播放等功能；

组件名称

gui-im-message : /graceUI/组件目录/gui-im-message

兼容平台

组件属性

消息格式

演示代码

即时通讯消息输入组件

组件介绍

gui-im-input 用于即时通讯的消息输入环节，提供了文本提交、图片选择、语音录制等功能；

组件名称

gui-im-input : /graceUI/组件目录/gui-im-input

兼容平台

组件事件

演示代码

消息列表

模板介绍

基于滑动列表组件实现的即时通讯消息列表功能。

兼容平台

皮肤样式

注意事项

演示代码

二维码生成

模板介绍

基于 QRCode 的二维码创建模板，相关配置见代码注释。

兼容平台

模板代码

条形码生成

组件介绍

利用 barcode.js 实现的条形码生成模板，详见模板代码

兼容平台

模板代码

海报模板

模板流程

实现画布初始化算法；使用 drawText 文本绘制函数进行文本绘制, 参数见代码注释；使用 drawBGIMG 图片绘制函数，注意 : 图片绘制会先进行图片的下载，这样就会产生一个异步行为，请在下载成功后完成后续的图片绘制操作及其他后续步骤操作;画布转图片 ( 代码演示了在完成画布绘制后如何将画布转换为一个图片 ) ;

05 长按保存 ( 有了图片，就可以实现长按图片并保存到相册的功能 )，至此整个流程完毕。

兼容平台

模板代码