diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json new file mode 100644 index 0000000..81b430e --- /dev/null +++ b/.hbuilderx/launch.json @@ -0,0 +1,13 @@ +{ + "version" : "1.0", + "configurations" : [ + { + "playground" : "custom", + "type" : "uni-app:app-ios" + }, + { + "playground" : "custom", + "type" : "uni-app:app-android" + } + ] +} diff --git a/components/balance-list/balance-list.vue b/components/balance-list/balance-list.vue index 804a907..fe410ec 100644 --- a/components/balance-list/balance-list.vue +++ b/components/balance-list/balance-list.vue @@ -24,8 +24,8 @@ 已全额退款 余额 {{ - Number(item.balance).toFixed(2) - }}元 + Number(item.balance).toFixed(2) + }}元 @@ -35,110 +35,108 @@ \ No newline at end of file diff --git a/components/nav-bar/nav-bar.vue b/components/nav-bar/nav-bar.vue index ea066cf..73a5333 100644 --- a/components/nav-bar/nav-bar.vue +++ b/components/nav-bar/nav-bar.vue @@ -46,8 +46,6 @@ + + \ No newline at end of file diff --git a/static/image/common/hot-icon/1688.png b/static/image/common/hot-icon/1688.png new file mode 100644 index 0000000..a957d7a Binary files /dev/null and b/static/image/common/hot-icon/1688.png differ diff --git a/static/image/common/hot-icon/711.png b/static/image/common/hot-icon/711.png new file mode 100644 index 0000000..2bbf58f Binary files /dev/null and b/static/image/common/hot-icon/711.png differ diff --git a/static/image/common/hot-icon/add.png b/static/image/common/hot-icon/add.png new file mode 100644 index 0000000..6ec73db Binary files /dev/null and b/static/image/common/hot-icon/add.png differ diff --git a/static/image/common/hot-icon/aiqiyi.png b/static/image/common/hot-icon/aiqiyi.png new file mode 100644 index 0000000..cb71aee Binary files /dev/null and b/static/image/common/hot-icon/aiqiyi.png differ diff --git a/static/image/common/hot-icon/baiguoyuan.png b/static/image/common/hot-icon/baiguoyuan.png new file mode 100644 index 0000000..a29585c Binary files /dev/null and b/static/image/common/hot-icon/baiguoyuan.png differ diff --git a/static/image/common/hot-icon/bilibili.png b/static/image/common/hot-icon/bilibili.png new file mode 100644 index 0000000..8b93310 Binary files /dev/null and b/static/image/common/hot-icon/bilibili.png differ diff --git a/static/image/common/hot-icon/bishengke.png b/static/image/common/hot-icon/bishengke.png new file mode 100644 index 0000000..9d277c7 Binary files /dev/null and b/static/image/common/hot-icon/bishengke.png differ diff --git a/static/image/common/hot-icon/chabaidao.png b/static/image/common/hot-icon/chabaidao.png new file mode 100644 index 0000000..58cad2e Binary files /dev/null and b/static/image/common/hot-icon/chabaidao.png differ diff --git a/static/image/common/hot-icon/chuxvyinhang.png b/static/image/common/hot-icon/chuxvyinhang.png new file mode 100644 index 0000000..9a209c5 Binary files /dev/null and b/static/image/common/hot-icon/chuxvyinhang.png differ diff --git a/static/image/common/hot-icon/dazhongdianping.png b/static/image/common/hot-icon/dazhongdianping.png new file mode 100644 index 0000000..a5ec9e8 Binary files /dev/null and b/static/image/common/hot-icon/dazhongdianping.png differ diff --git a/static/image/common/hot-icon/dianjingwangba.png b/static/image/common/hot-icon/dianjingwangba.png new file mode 100644 index 0000000..c63a69d Binary files /dev/null and b/static/image/common/hot-icon/dianjingwangba.png differ diff --git a/static/image/common/hot-icon/didichuxing.png b/static/image/common/hot-icon/didichuxing.png new file mode 100644 index 0000000..c0ffbe0 Binary files /dev/null and b/static/image/common/hot-icon/didichuxing.png differ diff --git a/static/image/common/hot-icon/dingdongmaicai.png b/static/image/common/hot-icon/dingdongmaicai.png new file mode 100644 index 0000000..4548025 Binary files /dev/null and b/static/image/common/hot-icon/dingdongmaicai.png differ diff --git a/static/image/common/hot-icon/douyin.png b/static/image/common/hot-icon/douyin.png new file mode 100644 index 0000000..ffe1b9e Binary files /dev/null and b/static/image/common/hot-icon/douyin.png differ diff --git a/static/image/common/hot-icon/douyinshangcheng.png b/static/image/common/hot-icon/douyinshangcheng.png new file mode 100644 index 0000000..137368a Binary files /dev/null and b/static/image/common/hot-icon/douyinshangcheng.png differ diff --git a/static/image/common/hot-icon/eleme.png b/static/image/common/hot-icon/eleme.png new file mode 100644 index 0000000..86e52b8 Binary files /dev/null and b/static/image/common/hot-icon/eleme.png differ diff --git a/static/image/common/hot-icon/gaodeditu.png b/static/image/common/hot-icon/gaodeditu.png new file mode 100644 index 0000000..d9d591e Binary files /dev/null and b/static/image/common/hot-icon/gaodeditu.png differ diff --git a/static/image/common/hot-icon/gongshangyinhang.png b/static/image/common/hot-icon/gongshangyinhang.png new file mode 100644 index 0000000..72471c8 Binary files /dev/null and b/static/image/common/hot-icon/gongshangyinhang.png differ diff --git a/static/image/common/hot-icon/guming.png b/static/image/common/hot-icon/guming.png new file mode 100644 index 0000000..ce899c3 Binary files /dev/null and b/static/image/common/hot-icon/guming.png differ diff --git a/static/image/common/hot-icon/haidilao.png b/static/image/common/hot-icon/haidilao.png new file mode 100644 index 0000000..315a2d9 Binary files /dev/null and b/static/image/common/hot-icon/haidilao.png differ diff --git a/static/image/common/hot-icon/haluo.png b/static/image/common/hot-icon/haluo.png new file mode 100644 index 0000000..87e940c Binary files /dev/null and b/static/image/common/hot-icon/haluo.png differ diff --git a/static/image/common/hot-icon/hanbaowang.png b/static/image/common/hot-icon/hanbaowang.png new file mode 100644 index 0000000..f2c8ca4 Binary files /dev/null and b/static/image/common/hot-icon/hanbaowang.png differ diff --git a/static/image/common/hot-icon/hemaxiansheng.png b/static/image/common/hot-icon/hemaxiansheng.png new file mode 100644 index 0000000..b103c76 Binary files /dev/null and b/static/image/common/hot-icon/hemaxiansheng.png differ diff --git a/static/image/common/hot-icon/hepinjinyin.png b/static/image/common/hot-icon/hepinjinyin.png new file mode 100644 index 0000000..c72e246 Binary files /dev/null and b/static/image/common/hot-icon/hepinjinyin.png differ diff --git a/static/image/common/hot-icon/hualaishi.png b/static/image/common/hot-icon/hualaishi.png new file mode 100644 index 0000000..f6abcff Binary files /dev/null and b/static/image/common/hot-icon/hualaishi.png differ diff --git a/static/image/common/hot-icon/huaxiaozhu.png b/static/image/common/hot-icon/huaxiaozhu.png new file mode 100644 index 0000000..b500de2 Binary files /dev/null and b/static/image/common/hot-icon/huaxiaozhu.png differ diff --git a/static/image/common/hot-icon/huyazhibo.png b/static/image/common/hot-icon/huyazhibo.png new file mode 100644 index 0000000..b8b0f88 Binary files /dev/null and b/static/image/common/hot-icon/huyazhibo.png differ diff --git a/static/image/common/hot-icon/jianbingdao.png b/static/image/common/hot-icon/jianbingdao.png new file mode 100644 index 0000000..bf30d71 Binary files /dev/null and b/static/image/common/hot-icon/jianbingdao.png differ diff --git a/static/image/common/hot-icon/jiansheyinhang.png b/static/image/common/hot-icon/jiansheyinhang.png new file mode 100644 index 0000000..cac0eef Binary files /dev/null and b/static/image/common/hot-icon/jiansheyinhang.png differ diff --git a/static/image/common/hot-icon/jiaotongyinhang.png b/static/image/common/hot-icon/jiaotongyinhang.png new file mode 100644 index 0000000..d2bc2a5 Binary files /dev/null and b/static/image/common/hot-icon/jiaotongyinhang.png differ diff --git a/static/image/common/hot-icon/jinchanchan.png b/static/image/common/hot-icon/jinchanchan.png new file mode 100644 index 0000000..2ad0b1f Binary files /dev/null and b/static/image/common/hot-icon/jinchanchan.png differ diff --git a/static/image/common/hot-icon/jingdong.png b/static/image/common/hot-icon/jingdong.png new file mode 100644 index 0000000..24b70a5 Binary files /dev/null and b/static/image/common/hot-icon/jingdong.png differ diff --git a/static/image/common/hot-icon/kendeji.png b/static/image/common/hot-icon/kendeji.png new file mode 100644 index 0000000..915d0aa Binary files /dev/null and b/static/image/common/hot-icon/kendeji.png differ diff --git a/static/image/common/hot-icon/luosen.png b/static/image/common/hot-icon/luosen.png new file mode 100644 index 0000000..cedc32a Binary files /dev/null and b/static/image/common/hot-icon/luosen.png differ diff --git a/static/image/common/hot-icon/maidanglao.png b/static/image/common/hot-icon/maidanglao.png new file mode 100644 index 0000000..272711a Binary files /dev/null and b/static/image/common/hot-icon/maidanglao.png differ diff --git a/static/image/common/hot-icon/maidelong.png b/static/image/common/hot-icon/maidelong.png new file mode 100644 index 0000000..2f5f55c Binary files /dev/null and b/static/image/common/hot-icon/maidelong.png differ diff --git a/static/image/common/hot-icon/mangguoTV.png b/static/image/common/hot-icon/mangguoTV.png new file mode 100644 index 0000000..0038798 Binary files /dev/null and b/static/image/common/hot-icon/mangguoTV.png differ diff --git a/static/image/common/hot-icon/maoyandianying.png b/static/image/common/hot-icon/maoyandianying.png new file mode 100644 index 0000000..2be16cd Binary files /dev/null and b/static/image/common/hot-icon/maoyandianying.png differ diff --git a/static/image/common/hot-icon/meituan.png b/static/image/common/hot-icon/meituan.png new file mode 100644 index 0000000..8042e39 Binary files /dev/null and b/static/image/common/hot-icon/meituan.png differ diff --git a/static/image/common/hot-icon/meituanwaimai.png b/static/image/common/hot-icon/meituanwaimai.png new file mode 100644 index 0000000..46df740 Binary files /dev/null and b/static/image/common/hot-icon/meituanwaimai.png differ diff --git a/static/image/common/hot-icon/micunbanfan.png b/static/image/common/hot-icon/micunbanfan.png new file mode 100644 index 0000000..ec051c2 Binary files /dev/null and b/static/image/common/hot-icon/micunbanfan.png differ diff --git a/static/image/common/hot-icon/mixuebingcheng.png b/static/image/common/hot-icon/mixuebingcheng.png new file mode 100644 index 0000000..a79af75 Binary files /dev/null and b/static/image/common/hot-icon/mixuebingcheng.png differ diff --git a/static/image/common/hot-icon/naixuedecha.png b/static/image/common/hot-icon/naixuedecha.png new file mode 100644 index 0000000..8d23616 Binary files /dev/null and b/static/image/common/hot-icon/naixuedecha.png differ diff --git a/static/image/common/hot-icon/nongyeyinhang.png b/static/image/common/hot-icon/nongyeyinhang.png new file mode 100644 index 0000000..fdc0750 Binary files /dev/null and b/static/image/common/hot-icon/nongyeyinhang.png differ diff --git a/static/image/common/hot-icon/pinduoduo.png b/static/image/common/hot-icon/pinduoduo.png new file mode 100644 index 0000000..b203db7 Binary files /dev/null and b/static/image/common/hot-icon/pinduoduo.png differ diff --git a/static/image/common/hot-icon/pufayinhang.png b/static/image/common/hot-icon/pufayinhang.png new file mode 100644 index 0000000..3c92725 Binary files /dev/null and b/static/image/common/hot-icon/pufayinhang.png differ diff --git a/static/image/common/hot-icon/ruixingkafei.png b/static/image/common/hot-icon/ruixingkafei.png new file mode 100644 index 0000000..7fcb384 Binary files /dev/null and b/static/image/common/hot-icon/ruixingkafei.png differ diff --git a/static/image/common/hot-icon/sanjiaozhou.png b/static/image/common/hot-icon/sanjiaozhou.png new file mode 100644 index 0000000..236d5e3 Binary files /dev/null and b/static/image/common/hot-icon/sanjiaozhou.png differ diff --git a/static/image/common/hot-icon/shanmuchaoshi.png b/static/image/common/hot-icon/shanmuchaoshi.png new file mode 100644 index 0000000..974a0bd Binary files /dev/null and b/static/image/common/hot-icon/shanmuchaoshi.png differ diff --git a/static/image/common/hot-icon/shaxianxiaochi.png b/static/image/common/hot-icon/shaxianxiaochi.png new file mode 100644 index 0000000..756fb37 Binary files /dev/null and b/static/image/common/hot-icon/shaxianxiaochi.png differ diff --git a/static/image/common/hot-icon/taobao.png b/static/image/common/hot-icon/taobao.png new file mode 100644 index 0000000..5d44031 Binary files /dev/null and b/static/image/common/hot-icon/taobao.png differ diff --git a/static/image/common/hot-icon/taopiaopiao.png b/static/image/common/hot-icon/taopiaopiao.png new file mode 100644 index 0000000..778b4d6 Binary files /dev/null and b/static/image/common/hot-icon/taopiaopiao.png differ diff --git a/static/image/common/hot-icon/tasiting.png b/static/image/common/hot-icon/tasiting.png new file mode 100644 index 0000000..1c2b799 Binary files /dev/null and b/static/image/common/hot-icon/tasiting.png differ diff --git a/static/image/common/hot-icon/tengxunshipin.png b/static/image/common/hot-icon/tengxunshipin.png new file mode 100644 index 0000000..ea5a9b5 Binary files /dev/null and b/static/image/common/hot-icon/tengxunshipin.png differ diff --git a/static/image/common/hot-icon/tianmao.png b/static/image/common/hot-icon/tianmao.png new file mode 100644 index 0000000..2d7f106 Binary files /dev/null and b/static/image/common/hot-icon/tianmao.png differ diff --git a/static/image/common/hot-icon/wangzherongyao.png b/static/image/common/hot-icon/wangzherongyao.png new file mode 100644 index 0000000..f068f55 Binary files /dev/null and b/static/image/common/hot-icon/wangzherongyao.png differ diff --git a/static/image/common/hot-icon/weipinhui.png b/static/image/common/hot-icon/weipinhui.png new file mode 100644 index 0000000..c603764 Binary files /dev/null and b/static/image/common/hot-icon/weipinhui.png differ diff --git a/static/image/common/hot-icon/wuweiqiyue.png b/static/image/common/hot-icon/wuweiqiyue.png new file mode 100644 index 0000000..176af42 Binary files /dev/null and b/static/image/common/hot-icon/wuweiqiyue.png differ diff --git a/static/image/common/hot-icon/xianyu.png b/static/image/common/hot-icon/xianyu.png new file mode 100644 index 0000000..b878f19 Binary files /dev/null and b/static/image/common/hot-icon/xianyu.png differ diff --git a/static/image/common/hot-icon/xingbake.png b/static/image/common/hot-icon/xingbake.png new file mode 100644 index 0000000..0cd5a86 Binary files /dev/null and b/static/image/common/hot-icon/xingbake.png differ diff --git a/static/image/common/hot-icon/yanyunshiliusheng.png b/static/image/common/hot-icon/yanyunshiliusheng.png new file mode 100644 index 0000000..a1f082f Binary files /dev/null and b/static/image/common/hot-icon/yanyunshiliusheng.png differ diff --git a/static/image/common/hot-icon/yidiandian.png b/static/image/common/hot-icon/yidiandian.png new file mode 100644 index 0000000..b7a4261 Binary files /dev/null and b/static/image/common/hot-icon/yidiandian.png differ diff --git a/static/image/common/hot-icon/yonghuichaoshi.png b/static/image/common/hot-icon/yonghuichaoshi.png new file mode 100644 index 0000000..68b275a Binary files /dev/null and b/static/image/common/hot-icon/yonghuichaoshi.png differ diff --git a/static/image/common/hot-icon/youku.png b/static/image/common/hot-icon/youku.png new file mode 100644 index 0000000..a3ddcc9 Binary files /dev/null and b/static/image/common/hot-icon/youku.png differ diff --git a/static/image/common/hot-icon/yuanshen.png b/static/image/common/hot-icon/yuanshen.png new file mode 100644 index 0000000..3c1176c Binary files /dev/null and b/static/image/common/hot-icon/yuanshen.png differ diff --git a/static/image/common/hot-icon/yunshangguizhou.png b/static/image/common/hot-icon/yunshangguizhou.png new file mode 100644 index 0000000..4dffc7b Binary files /dev/null and b/static/image/common/hot-icon/yunshangguizhou.png differ diff --git a/static/image/common/hot-icon/zhaoshangyinhang.png b/static/image/common/hot-icon/zhaoshangyinhang.png new file mode 100644 index 0000000..9bad8e4 Binary files /dev/null and b/static/image/common/hot-icon/zhaoshangyinhang.png differ diff --git a/static/image/common/hot-icon/zhengxinjipai.png b/static/image/common/hot-icon/zhengxinjipai.png new file mode 100644 index 0000000..5166c4a Binary files /dev/null and b/static/image/common/hot-icon/zhengxinjipai.png differ diff --git a/static/image/common/hot-icon/zhongguoyinhang.png b/static/image/common/hot-icon/zhongguoyinhang.png new file mode 100644 index 0000000..1adf1cf Binary files /dev/null and b/static/image/common/hot-icon/zhongguoyinhang.png differ diff --git a/static/image/common/hot-icon/zhouheiya.png b/static/image/common/hot-icon/zhouheiya.png new file mode 100644 index 0000000..49e08e8 Binary files /dev/null and b/static/image/common/hot-icon/zhouheiya.png differ diff --git a/static/image/common/hot-icon/zhuanzhuan.png b/static/image/common/hot-icon/zhuanzhuan.png new file mode 100644 index 0000000..54228b8 Binary files /dev/null and b/static/image/common/hot-icon/zhuanzhuan.png differ diff --git a/static/json/hot-icon.json b/static/json/hot-icon.json new file mode 100644 index 0000000..e089862 --- /dev/null +++ b/static/json/hot-icon.json @@ -0,0 +1,413 @@ +{ + "moneyHotIcon": [ + { + "name": "本地上传", + "label": "add", + "isUpLoad": true, + "classify": "自定义" + }, + { + "name": "默认", + "label": "default", + "classify": "系统图标" + }, + { + "name": "商品", + "label": "shangpin", + "classify": "系统图标" + }, + { + "name": "花呗", + "label": "huabei", + "classify": "系统图标" + }, + { + "name": "余额宝", + "label": "yuebao", + "classify": "系统图标" + }, + { + "name": "退款", + "label": "tuikuan", + "classify": "系统图标" + }, + { + "name": "燃气费", + "label": "ranqifei", + "classify": "系统图标" + }, + { + "name": "电费", + "label": "dianfei", + "classify": "系统图标" + }, + { + "name": "水费", + "label": "shuifei", + "classify": "系统图标" + }, + { + "name": "古茗", + "label": "guming", + "classify": "奶茶饮品" + }, + { + "name": "一点点", + "label": "yidiandian", + "classify": "奶茶饮品" + }, + { + "name": "蜜雪冰城", + "label": "mixuebingcheng", + "classify": "奶茶饮品" + }, + { + "name": "茶百道", + "label": "chabaidao", + "classify": "奶茶饮品" + }, + { + "name": "星巴克", + "label": "xingbake", + "classify": "奶茶饮品" + }, + { + "name": "瑞幸咖啡", + "label": "ruixingkafei", + "classify": "奶茶饮品" + }, + { + "name": "奈雪的茶", + "label": "naixuedecha", + "classify": "奶茶饮品" + }, + { + "name": "麦当劳", + "label": "maidanglao", + "classify": "美食" + }, + { + "name": "塔斯汀", + "label": "tasiting", + "classify": "美食" + }, + { + "name": "肯德基", + "label": "kendeji", + "classify": "美食" + }, + { + "name": "华莱士", + "label": "hualaishi", + "classify": "美食" + }, + { + "name": "必胜客", + "label": "bishengke", + "classify": "美食" + }, + { + "name": "汉堡王", + "label": "hanbaowang", + "classify": "美食" + }, + { + "name": "海底捞", + "label": "haidilao", + "classify": "美食" + }, + { + "name": "正新鸡排", + "label": "zhengxinjipai", + "classify": "美食" + }, + { + "name": "米村拌饭", + "label": "micunbanfan", + "classify": "美食" + }, + { + "name": "煎饼道", + "label": "jianbingdao", + "classify": "美食" + }, + { + "name": "周黑鸭", + "label": "zhouheiya", + "classify": "美食" + }, + { + "name": "沙县小吃", + "label": "shaxianxiaochi", + "classify": "美食" + }, + { + "name": "淘宝", + "label": "taobao", + "classify": "购物" + }, + { + "name": "抖音商城", + "label": "douyinshangcheng", + "classify": "购物" + }, + { + "name": "拼多多", + "label": "pinduoduo", + "classify": "购物" + }, + { + "name": "京东", + "label": "jingdong", + "classify": "购物" + }, + { + "name": "饿了么", + "label": "eleme", + "classify": "购物" + }, + { + "name": "闲鱼", + "label": "xianyu", + "classify": "购物" + }, + { + "name": "转转", + "label": "zhuanzhuan", + "classify": "购物" + }, + { + "name": "阿里巴巴", + "label": "1688", + "classify": "购物" + }, + { + "name": "美团", + "label": "meituan", + "classify": "购物" + }, + { + "name": "美团外卖", + "label": "meituanwaimai", + "classify": "购物" + }, + { + "name": "大众点评", + "label": "dazhongdianping", + "classify": "购物" + }, + { + "name": "唯品会", + "label": "weipinhui", + "classify": "购物" + }, + { + "name": "天猫", + "label": "tianmao", + "classify": "购物" + }, + { + "name": "盒马鲜生", + "label": "hemaxiansheng", + "classify": "购物" + }, + { + "name": "百果园", + "label": "baiguoyuan", + "classify": "购物" + }, + { + "name": "711", + "label": "711", + "classify": "购物" + }, + { + "name": "罗森", + "label": "luosen", + "classify": "购物" + }, + { + "name": "卖德龙", + "label": "maidelong", + "classify": "购物" + }, + { + "name": "永辉超市", + "label": "yonghuichaoshi", + "classify": "购物" + }, + { + "name": "叮咚买菜", + "label": "dingdongmaicai", + "classify": "购物" + }, + { + "name": "山姆超市", + "label": "shanmuchaoshi", + "classify": "购物" + }, + { + "name": "高德地图", + "label": "gaodeditu", + "classify": "出行" + }, + { + "name": "哈啰", + "label": "haluo", + "classify": "出行" + }, + { + "name": "滴滴出行", + "label": "didichuxing", + "classify": "出行" + }, + { + "name": "花小猪", + "label": "huaxiaozhu", + "classify": "出行" + }, + { + "name": "猫眼电影", + "label": "maoyandianying", + "classify": "娱乐" + }, + { + "name": "淘票票", + "label": "taopiaopiao", + "classify": "娱乐" + }, + { + "name": "电竞网吧", + "label": "dianjingwangba", + "classify": "娱乐" + }, + { + "name": "虎牙直播", + "label": "huyazhibo", + "classify": "娱乐" + }, + { + "name": "王者荣耀", + "label": "wangzherongyao", + "classify": "游戏" + }, + { + "name": "金铲铲", + "label": "jinchanchan", + "classify": "游戏" + }, + { + "name": "原神", + "label": "yuanshen", + "classify": "游戏" + }, + { + "name": "燕云十六声", + "label": "yanyunshiliusheng", + "classify": "游戏" + }, + { + "name": "无畏契约", + "label": "wuweiqiyue", + "classify": "游戏" + }, + { + "name": "三角洲行动", + "label": "sanjiaozhou", + "classify": "游戏" + }, + { + "name": "哔哩哔哩", + "label": "bilibili", + "classify": "娱乐" + }, + { + "name": "腾讯视频", + "label": "tengxunshipin", + "classify": "娱乐" + }, + { + "name": "爱奇艺", + "label": "aiqiyi", + "classify": "娱乐" + }, + { + "name": "优酷", + "label": "youku", + "classify": "娱乐" + }, + { + "name": "芒果TV", + "label": "mangguoTV", + "classify": "娱乐" + }, + { + "name": "抖音", + "label": "douyin", + "classify": "娱乐" + }, + { + "name": "招商银行", + "label": "zhaoshangyinhang", + "classify": "银行卡" + }, + { + "name": "建设银行", + "label": "jiansheyinhang", + "classify": "银行卡" + }, + { + "name": "工商银行", + "label": "gongshangyinhang", + "classify": "银行卡" + }, + { + "name": "农业银行", + "label": "nongyeyinhang", + "classify": "银行卡" + }, + { + "name": "储蓄银行", + "label": "chuxvyinhang", + "classify": "银行卡" + }, + { + "name": "交通银行", + "label": "jiaotongyinhang", + "classify": "银行卡" + }, + { + "name": "中国银行", + "label": "zhongguoyinhang", + "classify": "银行卡" + }, + { + "name": "浦发银行", + "label": "pufayinhang", + "classify": "银行卡" + }, + { + "name": "云上贵州", + "label": "yunshangguizhou", + "classify": "其它" + } + ], + "IncomeBillItem": [ + { + "name": "微信红包", + "label": "hongbao" + }, + { + "name": "退款", + "label": "tuikuan" + }, + { + "name": "二维码收款", + "label": "qianbao" + }, + { + "name": "转账", + "label": "zhuanzhang" + } + ] +} \ No newline at end of file diff --git a/uni_modules/qf-image-cropper/changelog.md b/uni_modules/qf-image-cropper/changelog.md new file mode 100644 index 0000000..0fa6898 --- /dev/null +++ b/uni_modules/qf-image-cropper/changelog.md @@ -0,0 +1,72 @@ +## 2.2.5（2024-07-30） +* 修复 当 checkRange=true 时，拖动四个伸缩角放大图片时还可能会超出或未到边界的问题 +* 修复 当 checkRange=false 时，图片旋转时会放大图片适应裁剪尺寸的问题 +* 修复 当 checkRange=true 时，图片旋转 90° 或 270° 进行缩放可能会无法拖动图片的问题 +## 2.2.4（2024-06-21） +* 新增 reverseRotatable 属性，是否支持逆向翻转 +* 修复 `2.1.7` 版本导致旋转后图片没有自动适配裁剪框的问题 + +## 2.2.3（2024-06-21） +* 新增 gpu 属性，是否开启硬件加速，图片缩放过程中如果出现元素的“留影”或“重影”效果，可通过该方式解决或减轻这一问题 +* 修复 组件使用 `v-if` 并设置 `src` 属性时可能会出现图片渲染位置存在偏差的问题 + +## 2.2.2（2024-06-21） +* 优化 组件实例 chooseImage 方法支持传参 +* 修复 组件使用 `v-if` 时组件无非正常渲染的问题 + +## 2.2.1（2024-06-15） +* 修复 H5平台不支持手势拖动图片的问题 + +## 2.2.0（2024-05-31） +* 修复 APP平台 `vue2` 项目因 `2.1.9` 版本修复 `vue3` 项目bug而引发的问题 + +## 2.1.9（2024-05-29） +* 修复 APP平台 `vue3` 项目因 uniapp `renderjs` 中未支持条件编译，导致运行了H5平台代码报错的问题 + +## 2.1.8（2024-05-29） +* 新增 zIndex 属性，调整组件层级 +* 新增 组件内容插槽 +* 优化 微信小程序平台动态修改元素style时的多余内容 + +## 2.1.7（2024-05-28） +* 新增 checkRange 属性，当 checkRange=false 时允许图片位置超出裁剪边界 +* 新增 minScale 属性，图片最小缩放倍数，当 minScale<0 时可使图片宽高不再受裁剪区域宽高限制 +* 新增 backgroundColor 属性，生成图片背景色，如果裁剪区域没有完全包含在图片中时，不设置该属性生成图片存在一定的透明块 +* 优化 动态修改图片宽高但没有传入src时，尺寸适应问题 +* 修复 APP平台通过 `this.$ownerInstance` 获取组件实例时机过早，其值为 `undefined` 导致报错界面没有正常渲染的问题 + +## 2.1.6（2023-04-16） +* 修复 组件使用 v-show 指令会导致选择图片后初始位置严重偏位的问题 + +## 2.1.5（2023-04-15） +* 新增 兼容APP平台 + +## 2.1.4（2023-03-13） +* 新增 fileType 属性，用于指定生成文件的类型，只支持 'jpg' 或 'png'，默认为 'png' +* 新增 delay 属性，微信小程序平台使用 `Canvas 2D` 绘制时控制图片从绘制到生成所需时间 +* 优化 当生成图片的尺寸宽/高超过 Canvas 2D 最大限制（1365*1365）则将画布尺寸缩放在限制范围内绘制完成后输出目标尺寸 +* 优化 旋转图标指示方向与实际旋转方向不符 + +## 2.1.3（2023-02-06） +* 优化 vue3支持 + +## 2.1.2（2023-02-03） +* 新增 navigation 属性，H5平台当 showAngle 为 true 时，使用插件的页面在 `page.json` 中配置了 "navigationStyle": "custom" 时，必须将此值设为 false ，否则四个可拉伸角的触发位置会有偏差 +* 修复 H5平台部分设备（已知iPhone11以下机型）拍照的图片缩放时会闪动的问题 + +## 2.1.1（2022-12-06） +* 修复 横屏适配问题 + +## 2.1.0（2022-12-06） +* 新增 兼容H5平台，使用 renderjs 响应手势事件 + +## 2.0.0（2022-12-05） +* 重构 插件，使用 WXS 响应手势事件 +* 新增 图片翻转 +* 新增 拉伸裁剪框放大图片 +* 新增 监听PC鼠标滚轮触发缩放 +* 新增 圆形、圆角矩形的图片裁剪 +* 优化 图片缩放，移动端以双指触摸中心点为缩放中心点，PC端以鼠标所在点为缩放中心点 +* 优化 裁剪框样式 +* 优化 图片位置拖动 支持边界回弹效果（滑动时可滑出边界，释放时回弹到边界） +* 优化 生成图片使用新版 Canvas 2D 接口 diff --git a/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.render.js b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.render.js new file mode 100644 index 0000000..becac19 --- /dev/null +++ b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.render.js @@ -0,0 +1,855 @@ +/** + * 图片编辑器-手势监听 + * 1. 支持编译到app-vue（uni-app 2.5.5及以上版本）、H5上 + */ +/** 图片偏移量 */ +var offset = { x: 0, y: 0 }; +/** 图片缩放比例 */ +var scale = 1; +/** 图片最小缩放比例 */ +var minScale = 1; +/** 图片旋转角度 */ +var rotate = 0; +/** 触摸点 */ +var touches = []; +/** 图片布局信息 */ +var img = {}; +/** 系统信息 */ +var sys = {}; +/** 裁剪区域布局信息 */ +var area = {}; +/** 触摸行为类型 */ +var touchType = ''; +/** 操作角的位置 */ +var activeAngle = 0; +/** 裁剪区域布局信息偏移量 */ +var areaOffset = { left: 0, right: 0, top: 0, bottom: 0 }; +/** 元素ID */ +var elIds = { + 'imageStyles': 'crop-image', + 'maskStylesList': 'crop-mask-block', + 'borderStyles': 'crop-border', + 'circleBoxStyles': 'crop-circle-box', + 'circleStyles': 'crop-circle', + 'gridStylesList': 'crop-grid', + 'angleStylesList': 'crop-angle', +} +/** 记录上次初始化时间戳，排除APP重复更新 */ +var timestamp = 0; +/** vue3 renderjs 条件编译无效，以此方式区别 APP 和 H5 */ +// #ifdef H5 +var platform = 'H5'; +// #endif +// #ifdef APP +var platform = 'APP'; +// #endif +/** 容错值 */ +var fault = 0.000001; +/** + * 获取a、b两数中的最小正数 + * @param a + * @param b + */ +function minimum(a, b) { + if (a > 0 && b < 0) return a; + if (a < 0 && b > 0) return b; + if (a > 0 && b > 0) return Math.min(a, b); + return 0; +} +/** + * 在容错访问内获取n近似值 + * @param n + */ +function num(n) { + var m = parseFloat((n).toFixed(6)); + return m === fault || m === -fault ? 0 : m; +} +/** + * 比较a值在容错值范围内是否等于b值 + * @param a + * @param b + */ +function equalsByFault(a, b) { + return Math.abs(a - b) <= fault; +} +/** + * 比较a值在容错值范围内是否小于b值 + * @param a + * @param b + */ +function lessThanByFault(a, b) { + var c = a - b; + return c < 0 ? c < -fault : c < fault; +} +/** + * 验证并获取有效最大值 + * @param v + * @param max + * @param isInclude + * @param x + * @param y + * @param rate + * @returns + */ +function validMax(v, max, isInclude, x, y, rate) { + if(typeof max === 'number') { + if(isInclude && equalsByFault(max, y)) { // 宽高不等时，x轴用y轴值要做等比例转换 + var n = num(max * rate); + if (n <= x) return n; // 转化后值在x轴最大值范围内 + return x; // 转化后值超出x轴最大值范围则用最大值 + } + return max; + } + return v; +} +/** + * 样式对象转字符串 + * @param {Object} style 样式对象 + */ +function styleToString(style) { + if(typeof style === 'string') return style; + var str = ''; + for (let k in style) { + str += k + ':' + style[k] + ';'; + } + return str; +} +/** + * + * @param {Object} instance 页面实例对象 + * @param {Object} key 要修改样式的key + * @param {Object|Array} style 样式 + */ +function setStyle(instance, key, style) { + // console.log('setStyle', instance, key, JSON.stringify(style)) + // #ifdef APP-PLUS + if(platform === 'APP') { + if(Object.prototype.toString.call(style) === '[object Array]') { + for (var i = 0, len = style.length; i < len; i++) { + var el = window.document.getElementById(elIds[key] + '-' + (i + 1)); + el && (el.style = styleToString(style[i])); + } + } else { + var el = window.document.getElementById(elIds[key]); + el && (el.style = styleToString(style)); + } + } + // #endif + // #ifdef H5 + if(platform === 'H5') instance[key] = style; + // #endif +} +/** + * 触发页面实例指定方法 + * @param {Object} instance 页面实例对象 + * @param {Object} name 方法名称 + * @param {Object} obj 传递参数 + */ +function callMethod(instance, name, obj) { + // #ifdef APP-PLUS + if(platform === 'APP') instance.callMethod(name, obj); + // #endif + // #ifdef H5 + if(platform === 'H5') instance[name](obj); + // #endif +} +/** + * 计算两点间距 + * @param {Object} touches 触摸点信息 + */ +function getDistanceByTouches(touches) { + // 根据勾股定理求两点间距离 + var a = touches[1].pageX - touches[0].pageX; + var b = touches[1].pageY - touches[0].pageY; + var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); + // 求两点间的中点坐标 + // 1. a、b可能为负值 + // 2. 在求a、b时，如用touches[1]减touches[0]，则求中点坐标也得用touches[1]减a/2、b/2 + // 3. 同理，在求a、b时，也可用touches[0]减touches[1]，则求中点坐标也得用touches[0]减a/2、b/2 + var x = touches[1].pageX - a / 2; + var y = touches[1].pageY - b / 2; + return { c, x, y }; +}; + +/** + * 修正取值 + * @param {Object} a + * @param {Object} b + * @param {Object} c + * @param {Object} reverse 是否反向 + */ +function correctValue(a, b, c, reverse) { + return num(reverse ? Math.max(Math.min(a, b), c) : Math.min(Math.max(a, b), c)); +} + +/** + * 旋转90°或270°时检查边界：限制 x、y 拖动范围，禁止滑出边界 + * @param {Object} e 点坐标 + * @param {Object} xReverse x是否反向 + * @param {Object} yReverse y是否反向 + */ +function checkRotateRange(e, xReverse, yReverse) { + var o = num((img.height - img.width) / 2); // 宽高差值一半 + return { + x: correctValue(e.x, -img.height + o + area.width + area.left, area.left + o, xReverse), + y: correctValue(e.y, -img.width - o + area.height + area.top, area.top - o, yReverse) + }; +} + +/** + * 检查边界：限制 x、y 拖动范围，禁止滑出边界 + * @param {Object} e 点坐标 + */ +function checkRange(e) { + var r = rotate / 90 % 2; + if(r === 1) { // 因图片宽高可能不等，翻转 90° 或 270° 后图片宽高需反着计算，且左右和上下边界要根据差值做偏移 + if (area.width === area.height) { + return checkRotateRange(e, img.height < area.height, img.width < area.width); + } + var isInclude = img.height < area.width && img.width < area.height; // 图片是否包含在裁剪区域内 + if (img.width < area.height || img.height < area.width) { + if (area.width < area.height && img.width < img.height) { + return isInclude + ? checkRotateRange(e, area.width < area.height, area.width < area.height) + : checkRotateRange(e, false, true); + } + if (area.height < area.width && img.height < img.width) { + return isInclude + ? checkRotateRange(e, area.height < area.width, area.height < area.width) + : checkRotateRange(e, true, false); + } + } + if (img.height >= area.width && img.width >= area.height) { + return checkRotateRange(e, false, false); + } + if (isInclude) { + return area.height < area.width + ? checkRotateRange(e, true, true) + : checkRotateRange(e, area.width < area.height, area.width < area.height); + } + if (img.height < area.width && !img.width < area.height) { + return checkRotateRange(e, true, false); + } + if (!img.height < area.width && img.width < area.height) { + return checkRotateRange(e, false, true); + } + return checkRotateRange(e, img.height < area.height, img.width < area.width); + } + return { + x: correctValue(e.x, -img.width + area.width + area.left, area.left, img.width < area.width), + y: correctValue(e.y, -img.height + area.height + area.top, area.top, img.height < area.height) + } +}; +/** + * 变更图片布局信息 + * @param {Object} e 布局信息 + */ +function changeImageRect(e) { + // console.log('changeImageRect', e) + offset.x += e.x || 0; + offset.y += e.y || 0; + if(e.check && area.checkRange) { // 检查边界 + var point = checkRange(offset); + if(offset.x !== point.x || offset.y !== point.y) { + offset = point; + } + } + + // 因频繁修改 width/height 会造成大量的内存消耗，改为scale + // e.instance.imageStyles = { + // width: img.width + 'px', + // height: img.height + 'px', + // transform: 'translate(' + (offset.x + ox) + 'px, ' + (offset.y + ox) + 'px) rotate(' + rotate +'deg)' + // }; + var ox = (img.width - img.oldWidth) / 2; + var oy = (img.height - img.oldHeight) / 2; + // e.instance.imageStyles = { + // width: img.oldWidth + 'px', + // height: img.oldHeight + 'px', + // transform: 'translate(' + (offset.x + ox) + 'px, ' + (offset.y + oy) + 'px) rotate(' + rotate +'deg) scale(' + scale + ')' + // }; + setStyle(e.instance, 'imageStyles', { + width: img.oldWidth + 'px', + height: img.oldHeight + 'px', + transform: (img.gpu ? 'translateZ(0) ' : '') + 'translate(' + (offset.x + ox) + 'px, ' + (offset.y + oy) + 'px' + ') rotate(' + rotate +'deg) scale(' + scale + ')' + }); + callMethod(e.instance, 'dataChange', { + width: img.width, + height: img.height, + x: offset.x, + y: offset.y, + rotate: rotate + }); +}; +/** + * 变更裁剪区域布局信息 + * @param {Object} e 布局信息 + */ +function changeAreaRect(e) { + // console.log('changeAreaRect', e) + // 变更蒙版样式 + setStyle(e.instance, 'maskStylesList', [ + { + left: 0, + width: (area.left + areaOffset.left) + 'px', + top: 0, + bottom: 0, + 'z-index': area.zIndex + 2 + }, + { + left: (area.right + areaOffset.right) + 'px', + right: 0, + top: 0, + bottom: 0, + 'z-index': area.zIndex + 2 + }, + { + left: (area.left + areaOffset.left) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + top: 0, + height: (area.top + areaOffset.top) + 'px', + 'z-index': area.zIndex + 2 + }, + { + left: (area.left + areaOffset.left) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + top: (area.bottom + areaOffset.bottom) + 'px', + // height: (area.top - areaOffset.bottom + sys.offsetBottom) + 'px', + bottom: 0, + 'z-index': area.zIndex + 2 + } + ]); + // 变更边框样式 + if(area.showBorder) { + setStyle(e.instance, 'borderStyles', { + left: (area.left + areaOffset.left) + 'px', + top: (area.top + areaOffset.top) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + }); + } + + // 变更参考线样式 + if(area.showGrid) { + setStyle(e.instance, 'gridStylesList', [ + { + 'border-width': '1px 0 0 0', + left: (area.left + areaOffset.left) + 'px', + right: (area.right + areaOffset.right) + 'px', + top: (area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) / 3 - 0.5) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '1px 0 0 0', + left: (area.left + areaOffset.left) + 'px', + right: (area.right + areaOffset.right) + 'px', + top: (area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) * 2 / 3 - 0.5) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 1px 0 0', + top: (area.top + areaOffset.top) + 'px', + bottom: (area.bottom + areaOffset.bottom) + 'px', + left: (area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) / 3 - 0.5) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 1px 0 0', + top: (area.top + areaOffset.top) + 'px', + bottom: (area.bottom + areaOffset.bottom) + 'px', + left: (area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) * 2 / 3 - 0.5) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + } + ]); + } + + // 变更四个伸缩角样式 + if(area.showAngle) { + setStyle(e.instance, 'angleStylesList', [ + { + 'border-width': area.angleBorderWidth + 'px 0 0 ' + area.angleBorderWidth + 'px', + left: (area.left + areaOffset.left - area.angleBorderWidth) + 'px', + top: (area.top + areaOffset.top - area.angleBorderWidth) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px 0 0', + left: (area.right + areaOffset.right - area.angleSize) + 'px', + top: (area.top + areaOffset.top - area.angleBorderWidth) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 0 ' + area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px', + left: (area.left + areaOffset.left - area.angleBorderWidth) + 'px', + top: (area.bottom + areaOffset.bottom - area.angleSize) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 ' + area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px 0', + left: (area.right + areaOffset.right - area.angleSize) + 'px', + top: (area.bottom + areaOffset.bottom - area.angleSize) + 'px', + 'z-index': area.zIndex + 3 + } + ]); + } + + // 变更圆角样式 + if(area.radius > 0) { + var radius = area.radius; + if(area.width === area.height && area.radius >= area.width / 2) { // 圆形 + radius = (area.width / 2); + } else { // 圆角矩形 + if(area.width !== area.height) { // 限制圆角半径不能超过短边的一半 + radius = Math.min(area.width / 2, area.height / 2, radius); + } + } + setStyle(e.instance, 'circleBoxStyles', { + left: (area.left + areaOffset.left) + 'px', + top: (area.top + areaOffset.top) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 2 + }); + setStyle(e.instance, 'circleStyles', { + 'box-shadow': '0 0 0 ' + Math.max(area.width, area.height) + 'px rgba(51, 51, 51, 0.8)', + 'border-radius': radius + 'px' + }); + } +}; +/** + * 缩放图片 + * @param {Object} e 布局信息 + */ +function scaleImage(e) { + // console.log('scaleImage', e) + var last = scale; + scale = Math.min(Math.max(e.scale + scale, minScale), img.maxScale); + if(last !== scale) { + img.width = num(img.oldWidth * scale); + img.height = num(img.oldHeight * scale); + // 参考问题：有一个长4000px、宽4000px的四方形ABCD，A点的坐标固定在(-2000,-2000)， + // 该四边形上有一个点E，坐标为(-100,-300)，将该四方形复制一份并缩小到90%后， + // 新四边形的A点坐标为多少时可使新四边形的E点与原四边形的E点重合？ + // 预期效果：从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变 + // 计算方法：以相同起点先计算缩放前后两点间的距离，再加上原图像偏移量即可 + e.x = num((e.x - offset.x) * (1 - scale / last)); + e.y = num((e.y - offset.y) * (1 - scale / last)); + changeImageRect(e); + return true; + } + return false; +}; +/** + * 获取触摸点在哪个角 + * @param {number} x 触摸点x轴坐标 + * @param {number} y 触摸点y轴坐标 + * @return {number} 角的位置：0=无；1=左上；2=右上；3=左下；4=右下； + */ +function getToucheAngle(x, y) { + // console.log('getToucheAngle', x, y, JSON.stringify(area)) + var o = area.angleBorderWidth; // 需扩大触发范围则把 o 值加大即可 + var oy = sys.navigation ? 0 : sys.windowTop; + if(y >= area.top - o + oy && y <= area.top + area.angleSize + o + oy) { + if(x >= area.left - o && x <= area.left + area.angleSize + o) { + return 1; // 左上角 + } else if(x >= area.right - area.angleSize - o && x <= area.right + o) { + return 2; // 右上角 + } + } else if(y >= area.bottom - area.angleSize - o + oy && y <= area.bottom + o + oy) { + if(x >= area.left - o && x <= area.left + area.angleSize + o) { + return 3; // 左下角 + } else if(x >= area.right - area.angleSize - o && x <= area.right + o) { + return 4; // 右下角 + } + } + return 0; // 无触摸到角 +}; +/** + * 重置数据 + */ +function resetData() { + offset = { x: 0, y: 0 }; + scale = 1; + minScale = img.minScale; + rotate = 0; +}; +function getTouchs(touches) { + var result = []; + var len = touches ? touches.length : 0 + for (var i = 0; i < len; i++) { + result[i] = { + pageX: touches[i].pageX, + // h5无标题栏时，窗口顶部距离仍为标题栏高度，且触摸点y轴坐标还是有标题栏的值，即减去标题栏高度的值 + pageY: touches[i].pageY + sys.windowTop + }; + } + return result; +}; +var mouseEvent = false; +export default { + data() { + return { + imageStyles: {}, + maskStylesList: [{}, {}, {}, {}], + borderStyles: {}, + gridStylesList: [{}, {}, {}, {}], + angleStylesList: [{}, {}, {}, {}], + circleBoxStyles: {}, + circleStyles: {} + } + }, + created() { + // 监听 PC 端鼠标滚轮 + // #ifdef H5 + platform === 'H5' && window.addEventListener('mousewheel', async (e) => { + var touchs = getTouchs([e]) + img.src && scaleImage({ + instance: await this.getInstance(), + check: true, + // 鼠标向上滚动时，deltaY 固定 -100，鼠标向下滚动时，deltaY 固定 100 + scale: e.deltaY > 0 ? -0.05 : 0.05, + x: touchs[0].pageX, + y: touchs[0].pageY + }); + }); + // #endif + }, + // #ifdef H5 + mounted() { + platform === 'H5' && this.initH5Events(); + }, + // #endif + setPlatform(p) { + platform = p; + }, + methods: { + // #ifdef H5 + getTouchEvent(e) { + e.touches = [ + { pageX: e.pageX, pageY: e.pageY } + ]; + return e; + }, + initH5Events() { + const preview = document.getElementById('pic-preview'); + preview?.addEventListener('mousedown', (e, ev) => { + mouseEvent = true; + this.touchstart(this.getTouchEvent(e)); + }); + preview?.addEventListener('mousemove', (e) => { + if (!mouseEvent) return; + this.touchmove(this.getTouchEvent(e)); + }); + preview?.addEventListener('mouseup', (e) => { + mouseEvent = false; + this.touchend(this.getTouchEvent(e)) + }); + preview?.addEventListener('mouseleave', (e) => { + mouseEvent = false; + this.touchend(this.getTouchEvent(e)) + }); + }, + // #endif + async getInstance() { + // #ifdef APP-PLUS + if(platform === 'APP') + return this.$ownerInstance + ? Promise.resolve(this.$ownerInstance) + : new Promise((resolve) => { + setTimeout(async () => { + resolve(await this.getInstance()); + }); + }); + // #endif + // #ifdef H5 + if(platform === 'H5') + return Promise.resolve(this); + // #endif + }, + /** + * 初始化：观察数据变更 + * @param {Object} newVal 新数据 + * @param {Object} oldVal 旧数据 + * @param {Object} o 组件实例对象 + */ + initObserver: async function(newVal, oldVal, o, i) { + // console.log('initObserver', newVal, oldVal, o, i) + if(newVal && (!img.src || timestamp !== newVal.timestamp)) { + timestamp = newVal.timestamp; + img = newVal.img; + sys = newVal.sys; + area = newVal.area; + minScale = img.minScale; + resetData(); + const instance = await this.getInstance() + img.src && changeImageRect({ + instance, + x: (sys.windowWidth - img.width) / 2, + y: (sys.windowHeight + sys.windowTop - sys.offsetBottom - img.height) / 2 + }); + changeAreaRect({ + instance + }); + } + }, + /** + * 鼠标滚轮滚动 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + mousewheel: function(e, o) { + // h5平台 wheel 事件无法判断滚轮滑动方向，需使用 mousewheel + }, + /** + * 触摸开始 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchstart: function(e, o) { + if(!img.src) return; + touches = getTouchs(e.touches); + activeAngle = area.showAngle ? getToucheAngle(touches[0].pageX, touches[0].pageY) : 0; + if(touches.length === 1 && activeAngle !== 0) { + touchType = 'stretch'; // 伸缩裁剪区域 + } else { + touchType = ''; + } + // console.log('touchstart', e, activeAngle) + }, + /** + * 触摸移动 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchmove: async function(e, o) { + if(!img.src) return; + // console.log('touchmove', e, o) + e.touches = getTouchs(e.touches); + if(touchType === 'stretch') { // 触摸四个角进行拉伸 + var point = e.touches[0]; + var start = touches[0]; + var x = point.pageX - start.pageX; + var y = point.pageY - start.pageY; + if(x !== 0 || y !== 0) { + var maxX = num(area.width * (1 - area.minScale)); + var maxY = num(area.height * (1 - area.minScale)); + // console.log(x, y, maxX, maxY, offset, area) + touches[0] = point; + var r = rotate / 90 % 2; + var m = r === 1 ? num((img.height - img.width) / 2) : 0; // 宽高差值一半 + var xCompare = r === 1 ? lessThanByFault(img.height, area.width) : lessThanByFault(img.width, area.width); + var yCompare = r === 1 ? lessThanByFault(img.width, area.height) : lessThanByFault(img.height, area.height) + var isInclude = xCompare && yCompare; + var isIntersect = area.checkRange && (xCompare || yCompare); // 图片是否包含在裁剪区域内 + var isReverse = !isInclude || num((offset.x - area.left) / area.width) <= num((offset.y - area.top) / area.height) || (area.width > area.height && img.width < img.height && r === 1); + switch(activeAngle) { + case 1: // 左上角 + x = num(x + areaOffset.left); + y = num(y + areaOffset.top); + if(x >= 0 && y >= 0) { // 有效滑动 + var t = num(offset.y + m - area.top); + var l = num(offset.x - m - area.left); + // && (offset.x + img.width < area.right || offset.y + img.height < area.bottom) + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(x > y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(x > maxX) x = maxX; + y = num(x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(y > maxY) y = maxY; + x = num(y * area.width / area.height); + } + areaOffset.left = x; + areaOffset.top = y; + } + break; + case 2: // 右上角 + x = num(x + areaOffset.right); + y = num(y + areaOffset.top); + if(x <= 0 && y >= 0) { // 有效滑动 + var w = (r === 1 ? img.height : img.width); + var t = num(offset.y + m - area.top); + var l = num(area.right + m - offset.x - w); + var max = isIntersect && ((t >= 0) || (l >= 0)) + ? minimum(t, l) + : false; + if(-x > y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(-x > maxX) x = -maxX; + y = num(-x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(y > maxY) y = maxY; + x = num(-y * area.width / area.height); + } + areaOffset.right = x; + areaOffset.top = y; + } + break; + case 3: // 左下角 + x += num(x + areaOffset.left); + y += num(y + areaOffset.bottom); + if(x >= 0 && y <= 0) { // 有效滑动 + var w = (r === 1 ? img.width : img.height); + var t = num(area.bottom - m - offset.y - w); + var l = num(offset.x - m - area.left); + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(x > -y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(x > maxX) x = maxX; + y = num(-x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(-y > maxY) y = -maxY; + x = num(-y * area.width / area.height); + } + areaOffset.left = x; + areaOffset.bottom = y; + } + break; + case 4: // 右下角 + x = num(x + areaOffset.right); + y = num(y + areaOffset.bottom); + if(x <= 0 && y <= 0) { // 有效滑动 + var w = (r === 1 ? img.height : img.width); + var h = (r === 1 ? img.width : img.height); + var t = num(area.bottom - offset.y - h - m); + var l = num(area.right + m - offset.x - w); + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(-x > -y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(-x > maxX) x = -maxX; + y = num(x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(-y > maxY) y = -maxY; + x = num(y * area.width / area.height); + } + areaOffset.right = x; + areaOffset.bottom = y; + } + break; + } + // console.log(x, y, JSON.stringify(areaOffset)) + changeAreaRect({ + instance: await this.getInstance(), + }); + // this.draw(); + } + } else if (e.touches.length == 2) { // 双点触摸缩放 + var start = getDistanceByTouches(touches); + var end = getDistanceByTouches(e.touches); + scaleImage({ + instance: await this.getInstance(), + check: !area.bounce, + scale: (end.c - start.c) / 100, + x: end.x, + y: end.y + }); + touchType = 'scale'; + } else if(touchType === 'scale') {// 从双点触摸变成单点触摸 / 从缩放变成拖动 + touchType = 'move'; + } else { + changeImageRect({ + instance: await this.getInstance(), + check: !area.bounce, + x: e.touches[0].pageX - touches[0].pageX, + y: e.touches[0].pageY - touches[0].pageY + }); + touchType = 'move'; + } + touches = e.touches; + }, + /** + * 触摸结束 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchend: async function(e, o) { + if(!img.src) return; + if(touchType === 'stretch') { // 拉伸裁剪区域的四个角缩放 + // 裁剪区域宽度被缩放到多少 + var left = areaOffset.left; + var right = areaOffset.right; + var top = areaOffset.top; + var bottom = areaOffset.bottom; + var w = area.width + right - left; + var h = area.height + bottom - top; + // 图像放大倍数 + var p = scale * (area.width / w) - scale; + // 复原裁剪区域 + areaOffset = { left: 0, right: 0, top: 0, bottom: 0 }; + changeAreaRect({ + instance: await this.getInstance(), + }); + scaleImage({ + instance: await this.getInstance(), + scale: p, + x: area.left + left + (1 === activeAngle || 3 === activeAngle ? w : 0), + y: area.top + top + (1 === activeAngle || 2 === activeAngle ? h : 0) + }); + } else if (area.bounce) { // 检查边界并矫正，实现拖动到边界时有回弹效果 + changeImageRect({ + instance: await this.getInstance(), + check: true + }); + } + }, + /** + * 顺时针翻转图片90° + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + rotateImage: async function(r) { + rotate = (rotate + (r || 90)) % 360; + + if(img.minScale >= 1 && area.checkRange) { + // 因图片宽高可能不等，翻转后图片宽高需足够填满裁剪区域 + minScale = 1; + if(img.width < area.height) { + minScale = area.height / img.oldWidth; + } else if(img.height < area.width) { + minScale = area.width / img.oldHeight; + } + if(minScale !== 1) { + scaleImage({ + instance: await this.getInstance(), + scale: minScale - scale, + x: sys.windowWidth / 2, + y: (sys.windowHeight - sys.offsetBottom) / 2 + }); + } + } + + // 由于拖动画布后会导致图片位置偏移，翻转时的旋转中心点需是图片区域+偏移区域的中心点 + // 翻转x轴中心点 = (超出裁剪区域右侧的图片宽度 - 超出裁剪区域左侧的图片宽度) / 2 + // 翻转y轴中心点 = (超出裁剪区域下方的图片宽度 - 超出裁剪区域上方的图片宽度) / 2 + var ox = ((offset.x + img.width - area.right) - (area.left - offset.x)) / 2; + var oy = ((offset.y + img.height - area.bottom) - (area.top - offset.y)) / 2; + changeImageRect({ + instance: await this.getInstance(), + check: true, + x: -ox - oy, + y: -oy + ox + }); + }, + rotateImage90: function() { + this.rotateImage(90) + }, + rotateImage270: function() { + this.rotateImage(270) + }, + } +} \ No newline at end of file diff --git a/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue new file mode 100644 index 0000000..bfb34fb --- /dev/null +++ b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue @@ -0,0 +1,743 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.wxs b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.wxs new file mode 100644 index 0000000..98a5116 --- /dev/null +++ b/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.wxs @@ -0,0 +1,727 @@ +/** + * 图片编辑器-手势监听 + * 1. wxs 暂不支持 es6 语法 + * 2. 支持编译到微信小程序、QQ小程序、app-vue、H5上（uni-app 2.2.5及以上版本） + */ +/** 图片偏移量 */ +var offset = { x: 0, y: 0 }; +/** 图片缩放比例 */ +var scale = 1; +/** 图片最小缩放比例 */ +var minScale = 1; +/** 图片旋转角度 */ +var rotate = 0; +/** 触摸点 */ +var touches = []; +/** 图片布局信息 */ +var img = {}; +/** 系统信息 */ +var sys = {}; +/** 裁剪区域布局信息 */ +var area = {}; +/** 触摸行为类型 */ +var touchType = ''; +/** 操作角的位置 */ +var activeAngle = 0; +/** 裁剪区域布局信息偏移量 */ +var areaOffset = { left: 0, right: 0, top: 0, bottom: 0 }; +/** 容错值 */ +var fault = 0.000001; +/** + * 获取a、b两数中的最小正数 + * @param a + * @param b + */ +function minimum(a, b) { + if (a > 0 && b < 0) return a; + if (a < 0 && b > 0) return b; + if (a > 0 && b > 0) return Math.min(a, b); + return 0; +} +/** + * 在容错访问内获取n近似值 + * @param n + */ +function num(n) { + var m = parseFloat((n).toFixed(6)); + return m === fault || m === -fault ? 0 : m; +} +/** + * 比较a值在容错值范围内是否等于b值 + * @param a + * @param b + */ +function equalsByFault(a, b) { + return Math.abs(a - b) <= fault; +} +/** + * 比较a值在容错值范围内是否小于b值 + * @param a + * @param b + */ +function lessThanByFault(a, b) { + var c = a - b; + return c < 0 ? c < -fault : c < fault; +} +/** + * 验证并获取有效最大值 + * @param v + * @param max + * @param isInclude + * @param x + * @param y + * @param rate + * @returns + */ +function validMax(v, max, isInclude, x, y, rate) { + if(typeof max === 'number') { + if(isInclude && equalsByFault(max, y)) { // 宽高不等时，x轴用y轴值要做等比例转换 + var n = num(max * rate); + if (n <= x) return n; // 转化后值在x轴最大值范围内 + return x; // 转化后值超出x轴最大值范围则用最大值 + } + return max; + } + return v; +} +/** + * 计算两点间距 + * @param {Object} touches 触摸点信息 + */ +function getDistanceByTouches(touches) { + // 根据勾股定理求两点间距离 + var a = touches[1].pageX - touches[0].pageX; + var b = touches[1].pageY - touches[0].pageY; + var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); + // 求两点间的中点坐标 + // 1. a、b可能为负值 + // 2. 在求a、b时，如用touches[1]减touches[0]，则求中点坐标也得用touches[1]减a/2、b/2 + // 3. 同理，在求a、b时，也可用touches[0]减touches[1]，则求中点坐标也得用touches[0]减a/2、b/2 + var x = touches[1].pageX - a / 2; + var y = touches[1].pageY - b / 2; + return { c, x, y }; +}; +/** + * 修正取值 + * @param {Object} a + * @param {Object} b + * @param {Object} c + * @param {Object} reverse 是否反向 + */ +function correctValue(a, b, c, reverse) { + return num(reverse ? Math.max(Math.min(a, b), c) : Math.min(Math.max(a, b), c)); +} + +/** + * 旋转90°或270°时检查边界：限制 x、y 拖动范围，禁止滑出边界 + * @param {Object} e 点坐标 + * @param {Object} xReverse x是否反向 + * @param {Object} yReverse y是否反向 + */ +function checkRotateRange(e, xReverse, yReverse) { + var o = num((img.height - img.width) / 2); // 宽高差值一半 + return { + x: correctValue(e.x, -img.height + o + area.width + area.left, area.left + o, xReverse), + y: correctValue(e.y, -img.width - o + area.height + area.top, area.top - o, yReverse) + }; +} + +/** + * 检查边界：限制 x、y 拖动范围，禁止滑出边界 + * @param {Object} e 点坐标 + */ +function checkRange(e) { + var r = rotate / 90 % 2; + if(r === 1) { // 因图片宽高可能不等，翻转 90° 或 270° 后图片宽高需反着计算，且左右和上下边界要根据差值做偏移 + if (area.width === area.height) { + return checkRotateRange(e, img.height < area.height, img.width < area.width); + } + var isInclude = img.height < area.width && img.width < area.height; // 图片是否包含在裁剪区域内 + if (img.width < area.height || img.height < area.width) { + if (area.width < area.height && img.width < img.height) { + return isInclude + ? checkRotateRange(e, area.width < area.height, area.width < area.height) + : checkRotateRange(e, false, true); + } + if (area.height < area.width && img.height < img.width) { + return isInclude + ? checkRotateRange(e, area.height < area.width, area.height < area.width) + : checkRotateRange(e, true, false); + } + } + if (img.height >= area.width && img.width >= area.height) { + return checkRotateRange(e, false, false); + } + if (isInclude) { + return area.height < area.width + ? checkRotateRange(e, true, true) + : checkRotateRange(e, area.width < area.height, area.width < area.height); + } + if (img.height < area.width && !img.width < area.height) { + return checkRotateRange(e, true, false); + } + if (!img.height < area.width && img.width < area.height) { + return checkRotateRange(e, false, true); + } + return checkRotateRange(e, img.height < area.height, img.width < area.width); + } + return { + x: correctValue(e.x, -img.width + area.width + area.left, area.left, img.width < area.width), + y: correctValue(e.y, -img.height + area.height + area.top, area.top, img.height < area.height) + }; +}; +/** + * 变更图片布局信息 + * @param {Object} e 布局信息 + */ +function changeImageRect(e) { + offset.x += e.x || 0; + offset.y += e.y || 0; + var image = e.instance.selectComponent('.crop-image'); + if(e.check && area.checkRange) { // 检查边界 + var point = checkRange(offset); + if(offset.x !== point.x || offset.y !== point.y) { + offset = point; + } + } + // image.setStyle({ + // width: img.width + 'px', + // height: img.height + 'px', + // transform: 'translate(' + offset.x + 'px, ' + offset.y + 'px) rotate(' + rotate +'deg)' + // }); + var ox = (img.width - img.oldWidth) / 2; + var oy = (img.height - img.oldHeight) / 2; + image.setStyle({ + width: img.oldWidth + 'px', + height: img.oldHeight + 'px', + transform: (img.gpu ? 'translateZ(0) ' : '') + 'translate(' + (offset.x + ox) + 'px, ' + (offset.y + oy) + 'px) rotate(' + rotate +'deg) scale(' + scale + ')' + }); + + e.instance.callMethod('dataChange', { + width: img.width, + height: img.height, + x: offset.x, + y: offset.y, + rotate: rotate + }); +}; +/** + * 变更裁剪区域布局信息 + * @param {Object} e 布局信息 + */ +function changeAreaRect(e) { + // 变更蒙版样式 + var masks = e.instance.selectAllComponents('.crop-mask-block'); + var maskStyles = [ + { + left: 0, + width: (area.left + areaOffset.left) + 'px', + top: 0, + bottom: 0, + 'z-index': area.zIndex + 2 + }, + { + left: (area.right + areaOffset.right) + 'px', + right: 0, + top: 0, + bottom: 0, + 'z-index': area.zIndex + 2 + }, + { + left: (area.left + areaOffset.left) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + top: 0, + height: (area.top + areaOffset.top) + 'px', + 'z-index': area.zIndex + 2 + }, + { + left: (area.left + areaOffset.left) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + top: (area.bottom + areaOffset.bottom) + 'px', + // height: (area.top - areaOffset.bottom + sys.offsetBottom) + 'px', + bottom: 0, + 'z-index': area.zIndex + 2 + } + ]; + var len = masks.length; + for (var i = 0; i < len; i++) { + masks[i].setStyle(maskStyles[i]); + } + + // 变更边框样式 + if(area.showBorder) { + var border = e.instance.selectComponent('.crop-border'); + border.setStyle({ + left: (area.left + areaOffset.left) + 'px', + top: (area.top + areaOffset.top) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + }); + } + + // 变更参考线样式 + if(area.showGrid) { + var grids = e.instance.selectAllComponents('.crop-grid'); + var gridStyles = [ + { + 'border-width': '1px 0 0 0', + left: (area.left + areaOffset.left) + 'px', + right: (area.right + areaOffset.right) + 'px', + top: (area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) / 3 - 0.5) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '1px 0 0 0', + left: (area.left + areaOffset.left) + 'px', + right: (area.right + areaOffset.right) + 'px', + top: (area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) * 2 / 3 - 0.5) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 1px 0 0', + top: (area.top + areaOffset.top) + 'px', + bottom: (area.bottom + areaOffset.bottom) + 'px', + left: (area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) / 3 - 0.5) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 1px 0 0', + top: (area.top + areaOffset.top) + 'px', + bottom: (area.bottom + areaOffset.bottom) + 'px', + left: (area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) * 2 / 3 - 0.5) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 3 + } + ]; + var len = grids.length; + for (var i = 0; i < len; i++) { + grids[i].setStyle(gridStyles[i]); + } + } + + // 变更四个伸缩角样式 + if(area.showAngle) { + var angles = e.instance.selectAllComponents('.crop-angle'); + var angleStyles = [ + { + 'border-width': area.angleBorderWidth + 'px 0 0 ' + area.angleBorderWidth + 'px', + left: (area.left + areaOffset.left - area.angleBorderWidth) + 'px', + top: (area.top + areaOffset.top - area.angleBorderWidth) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px 0 0', + left: (area.right + areaOffset.right - area.angleSize) + 'px', + top: (area.top + areaOffset.top - area.angleBorderWidth) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 0 ' + area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px', + left: (area.left + areaOffset.left - area.angleBorderWidth) + 'px', + top: (area.bottom + areaOffset.bottom - area.angleSize) + 'px', + 'z-index': area.zIndex + 3 + }, + { + 'border-width': '0 ' + area.angleBorderWidth + 'px ' + area.angleBorderWidth + 'px 0', + left: (area.right + areaOffset.right - area.angleSize) + 'px', + top: (area.bottom + areaOffset.bottom - area.angleSize) + 'px', + 'z-index': area.zIndex + 3 + } + ]; + var len = angles.length; + for (var i = 0; i < len; i++) { + angles[i].setStyle(angleStyles[i]); + } + } + + // 变更圆角样式 + if(area.radius > 0) { + var circleBox = e.instance.selectComponent('.crop-circle-box'); + var circle = e.instance.selectComponent('.crop-circle'); + var radius = area.radius; + if(area.width === area.height && area.radius >= area.width / 2) { // 圆形 + radius = (area.width / 2); + } else { // 圆角矩形 + if(area.width !== area.height) { // 限制圆角半径不能超过短边的一半 + radius = Math.min(area.width / 2, area.height / 2, radius); + } + } + circleBox.setStyle({ + left: (area.left + areaOffset.left) + 'px', + top: (area.top + areaOffset.top) + 'px', + width: (area.width + areaOffset.right - areaOffset.left) + 'px', + height: (area.height + areaOffset.bottom - areaOffset.top) + 'px', + 'z-index': area.zIndex + 2 + }); + circle.setStyle({ + 'box-shadow': '0 0 0 ' + Math.max(area.width, area.height) + 'px rgba(51, 51, 51, 0.8)', + 'border-radius': radius + 'px' + }); + } +}; +/** + * 缩放图片 + * @param {Object} e 布局信息 + */ +function scaleImage(e) { + var last = scale; + scale = Math.min(Math.max(e.scale + scale, minScale), img.maxScale); + if(last !== scale) { + img.width = num(img.oldWidth * scale); + img.height = num(img.oldHeight * scale); + // 参考问题：有一个长4000px、宽4000px的四方形ABCD，A点的坐标固定在(-2000,-2000)， + // 该四边形上有一个点E，坐标为(-100,-300)，将该四方形复制一份并缩小到90%后， + // 新四边形的A点坐标为多少时可使新四边形的E点与原四边形的E点重合？ + // 预期效果：从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变 + // 计算方法：以相同起点先计算缩放前后两点间的距离，再加上原图像偏移量即可 + e.x = num((e.x - offset.x) * (1 - scale / last)); + e.y = num((e.y - offset.y) * (1 - scale / last)); + changeImageRect(e); + return true; + } + return false; +}; +/** + * 获取触摸点在哪个角 + * @param {number} x 触摸点x轴坐标 + * @param {number} y 触摸点y轴坐标 + * @return {number} 角的位置：0=无；1=左上；2=右上；3=左下；4=右下； + */ +function getToucheAngle(x, y) { + // console.log('getToucheAngle', x, y, JSON.stringify(area)) + var o = area.angleBorderWidth; // 需扩大触发范围则把 o 值加大即可 + if(y >= area.top - o && y <= area.top + area.angleSize + o) { + if(x >= area.left - o && x <= area.left + area.angleSize + o) { + return 1; // 左上角 + } else if(x >= area.right - area.angleSize - o && x <= area.right + o) { + return 2; // 右上角 + } + } else if(y >= area.bottom - area.angleSize - o && y <= area.bottom + o) { + if(x >= area.left - o && x <= area.left + area.angleSize + o) { + return 3; // 左下角 + } else if(x >= area.right - area.angleSize - o && x <= area.right + o) { + return 4; // 右下角 + } + } + return 0; // 无触摸到角 +}; +/** + * 重置数据 + */ +function resetData() { + offset = { x: 0, y: 0 }; + scale = 1; + minScale = img.minScale; + rotate = 0; +}; +/** +* 顺时针翻转图片90° +* @param {Object} e 事件对象 +* @param {Object} o 组件实例对象 +*/ +function rotateImage(e, o, r) { + rotate = (rotate + r) % 360; + if(img.minScale >= 1 && area.checkRange) { + // 因图片宽高可能不等，翻转后图片宽高需足够填满裁剪区域 + minScale = 1; + if(img.width < area.height) { + minScale = area.height / img.oldWidth; + } else if(img.height < area.width) { + minScale = area.width / img.oldHeight; + } + if(minScale !== 1) { + scaleImage({ + instance: o, + scale: minScale - scale, + x: sys.windowWidth / 2, + y: (sys.windowHeight - sys.offsetBottom) / 2 + }); + } + } + + // 由于拖动画布后会导致图片位置偏移，翻转时的旋转中心点需是图片区域+偏移区域的中心点 + // 翻转x轴中心点 = (超出裁剪区域右侧的图片宽度 - 超出裁剪区域左侧的图片宽度) / 2 + // 翻转y轴中心点 = (超出裁剪区域下方的图片宽度 - 超出裁剪区域上方的图片宽度) / 2 + var ox = ((offset.x + img.width - area.right) - (area.left - offset.x)) / 2; + var oy = ((offset.y + img.height - area.bottom) - (area.top - offset.y)) / 2; + changeImageRect({ + instance: o, + check: true, + x: -ox - oy, + y: -oy + ox + }); +}; +module.exports = { + /** + * 初始化：观察数据变更 + * @param {Object} newVal 新数据 + * @param {Object} oldVal 旧数据 + * @param {Object} o 组件实例对象 + */ + initObserver: function(newVal, oldVal, o, i) { + if(newVal) { + img = newVal.img; + sys = newVal.sys; + area = newVal.area; + minScale = img.minScale; + resetData(); + img.src && changeImageRect({ + instance: o, + x: (sys.windowWidth - img.width) / 2, + y: (sys.windowHeight - sys.offsetBottom - img.height) / 2 + }); + changeAreaRect({ + instance: o + }); + // console.log('initRect', JSON.stringify(newVal)) + } + }, + /** + * 鼠标滚轮滚动 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + mousewheel: function(e, o) { + if(!img.src) return; + scaleImage({ + instance: o, + check: true, + // 鼠标向上滚动时，deltaY 固定 -100，鼠标向下滚动时，deltaY 固定 100 + scale: e.detail.deltaY > 0 ? -0.05 : 0.05, + x: e.touches[0].pageX, + y: e.touches[0].pageY + }); + }, + /** + * 触摸开始 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchstart: function(e, o) { + if(!img.src) return; + touches = e.touches; + activeAngle = area.showAngle ? getToucheAngle(touches[0].pageX, touches[0].pageY) : 0; + if(touches.length === 1 && activeAngle !== 0) { + touchType = 'stretch'; // 伸缩裁剪区域 + } else { + touchType = ''; + } + // console.log('touchstart', JSON.stringify(e), activeAngle) + }, + /** + * 触摸移动 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchmove: function(e, o) { + if(!img.src) return; + // console.log('touchmove', JSON.stringify(e), JSON.stringify(o)) + if(touchType === 'stretch') { // 触摸四个角进行拉伸 + var point = e.touches[0]; + var start = touches[0]; + var x = point.pageX - start.pageX; + var y = point.pageY - start.pageY; + if(x !== 0 || y !== 0) { + var maxX = num(area.width * (1 - area.minScale)); + var maxY = num(area.height * (1 - area.minScale)); + // console.log(x, y, maxX, maxY, offset, area) + touches[0] = point; + var r = rotate / 90 % 2; + var m = r === 1 ? num((img.height - img.width) / 2) : 0; // 宽高差值一半 + var xCompare = r === 1 ? lessThanByFault(img.height, area.width) : lessThanByFault(img.width, area.width); + var yCompare = r === 1 ? lessThanByFault(img.width, area.height) : lessThanByFault(img.height, area.height) + var isInclude = xCompare && yCompare; + var isIntersect = area.checkRange && (xCompare || yCompare); // 图片是否包含在裁剪区域内 + var isReverse = !isInclude || num((offset.x - area.left) / area.width) <= num((offset.y - area.top) / area.height) || (area.width > area.height && img.width < img.height && r === 1); + switch(activeAngle) { + case 1: // 左上角 + x = num(x + areaOffset.left); + y = num(y + areaOffset.top); + if(x >= 0 && y >= 0) { // 有效滑动 + var t = num(offset.y + m - area.top); + var l = num(offset.x - m - area.left); + // && (offset.x + img.width < area.right || offset.y + img.height < area.bottom) + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(x > y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(x > maxX) x = maxX; + y = num(x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(y > maxY) y = maxY; + x = num(y * area.width / area.height); + } + areaOffset.left = x; + areaOffset.top = y; + } + break; + case 2: // 右上角 + x = num(x + areaOffset.right); + y = num(y + areaOffset.top); + if(x <= 0 && y >= 0) { // 有效滑动 + var w = (r === 1 ? img.height : img.width); + var t = num(offset.y + m - area.top); + var l = num(area.right + m - offset.x - w); + var max = isIntersect && ((t >= 0) || (l >= 0)) + ? minimum(t, l) + : false; + // var max = isInclude && ((offset.x > 0 && offset.x + img.width <= area.right) || (offset.y > 0 && offset.y >= area.top)) + // ? minimum(offset.y - area.top, area.right - offset.x - img.width) + // : false; + // console.log(offset.x, offset.y, img.width, img.height, area.top, area.right, m, max) + // console.log(offset.y + m - area.top, area.right + m - offset.x - w) + if(-x > y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(-x > maxX) x = -maxX; + y = num(-x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(y > maxY) y = maxY; + x = num(-y * area.width / area.height); + } + areaOffset.right = x; + areaOffset.top = y; + } + break; + case 3: // 左下角 + x += num(x + areaOffset.left); + y += num(y + areaOffset.bottom); + if(x >= 0 && y <= 0) { // 有效滑动 + var w = (r === 1 ? img.width : img.height); + var t = num(area.bottom - m - offset.y - w); + var l = num(offset.x - m - area.left); + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(x > -y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(x > maxX) x = maxX; + y = num(-x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(-y > maxY) y = -maxY; + x = num(-y * area.width / area.height); + } + areaOffset.left = x; + areaOffset.bottom = y; + } + break; + case 4: // 右下角 + x = num(x + areaOffset.right); + y = num(y + areaOffset.bottom); + if(x <= 0 && y <= 0) { // 有效滑动 + var w = (r === 1 ? img.height : img.width); + var h = (r === 1 ? img.width : img.height); + var t = num(area.bottom - offset.y - h - m); + var l = num(area.right + m - offset.x - w); + var max = isIntersect && ((l >= 0) || (t >= 0)) + ? minimum(t, l) + : false; + if(-x > -y && isReverse) { // 以x轴滑动距离为缩放基准 + maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height); + if(-x > maxX) x = -maxX; + y = num(x * area.height / area.width); + } else { // 以y轴滑动距离为缩放基准 + maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width); + if(-y > maxY) y = -maxY; + x = num(y * area.width / area.height); + } + areaOffset.right = x; + areaOffset.bottom = y; + } + break; + } + // console.log(x, y, JSON.stringify(areaOffset)) + changeAreaRect({ + instance: o, + }); + // this.draw(); + } + } else if (e.touches.length == 2) { // 双点触摸缩放 + var start = getDistanceByTouches(touches); + var end = getDistanceByTouches(e.touches); + scaleImage({ + instance: o, + check: !area.bounce, + scale: (end.c - start.c) / 100, + x: end.x, + y: end.y + }); + touchType = 'scale'; + } else if(touchType === 'scale') {// 从双点触摸变成单点触摸 / 从缩放变成拖动 + touchType = 'move'; + } else { + changeImageRect({ + instance: o, + check: !area.bounce, + x: e.touches[0].pageX - touches[0].pageX, + y: e.touches[0].pageY - touches[0].pageY + }); + touchType = 'move'; + } + touches = e.touches; + }, + /** + * 触摸结束 + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + touchend: function(e, o) { + if(!img.src) return; + if(touchType === 'stretch') { // 拉伸裁剪区域的四个角缩放 + // 裁剪区域宽度被缩放到多少 + var left = areaOffset.left; + var right = areaOffset.right; + var top = areaOffset.top; + var bottom = areaOffset.bottom; + var w = area.width + right - left; + var h = area.height + bottom - top; + // 图像放大倍数 + var p = scale * (area.width / w) - scale; + // 复原裁剪区域 + areaOffset = { left: 0, right: 0, top: 0, bottom: 0 }; + changeAreaRect({ + instance: o, + }); + scaleImage({ + instance: o, + scale: p, + x: area.left + left + (1 === activeAngle || 3 === activeAngle ? w : 0), + y: area.top + top + (1 === activeAngle || 2 === activeAngle ? h : 0) + }); + } else if (area.bounce) { // 检查边界并矫正，实现拖动到边界时有回弹效果 + changeImageRect({ + instance: o, + check: true + }); + } + }, + /** + * 顺时针翻转图片90° + * @param {Object} e 事件对象 + * @param {Object} o 组件实例对象 + */ + rotateImage: function(e, o) { + rotateImage(e, o, 90); + }, + rotateImage90: function(e, o) { + rotateImage(e, o, 90) + }, + rotateImage270: function(e, o) { + rotateImage(e, o, 270) + }, + // 此处只用于对齐其他平台端的样式参数，防止异常，无作用 + imageStyles: '', + maskStylesList: ['', '', '', ''], + borderStyles: '', + gridStylesList: ['', '', '', ''], + angleStylesList: ['', '', '', ''], + circleBoxStyles: '', + circleStyles: '', +} \ No newline at end of file diff --git a/uni_modules/qf-image-cropper/package.json b/uni_modules/qf-image-cropper/package.json new file mode 100644 index 0000000..f101c5b --- /dev/null +++ b/uni_modules/qf-image-cropper/package.json @@ -0,0 +1,81 @@ +{ + "id": "qf-image-cropper", + "displayName": "图片裁剪插件", + "version": "2.2.5", + "description": "图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式，功能多性能高体验好注释全。", + "keywords": [ + "qf-image-cropper", + "图片裁剪", + "图片编辑", + "头像裁剪", + "小程序" +], + "repository": "", + "engines": { + "HBuilderX": "^3.1.0" + }, +"dcloudext": { + "type": "component-vue", + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "无", + "data": "插件不采集任何数据", + "permissions": "无" + }, + "npmurl": "" + }, + "uni_modules": { + "dependencies": [], + "encrypt": [], + "platforms": { + "client": { + "Vue": { + "vue2": "y", + "vue3": "y" + }, + "App": { + "app-vue": "y", + "app-nvue": "n" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "y", + "微信浏览器(Android)": "y", + "QQ浏览器(Android)": "u" + }, + "H5-pc": { + "Chrome": "u", + "IE": "u", + "Edge": "u", + "Firefox": "u", + "Safari": "u" + }, + "小程序": { + "微信": "y", + "阿里": "n", + "百度": "n", + "字节跳动": "n", + "QQ": "u", + "钉钉": "n", + "快手": "n", + "飞书": "n", + "京东": "n" + }, + "快应用": { + "华为": "n", + "联盟": "n" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/qf-image-cropper/readme.md b/uni_modules/qf-image-cropper/readme.md new file mode 100644 index 0000000..f39f645 --- /dev/null +++ b/uni_modules/qf-image-cropper/readme.md @@ -0,0 +1,97 @@ +# qf-image-cropper +## 图片裁剪插件 +uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式，功能多性能高体验好注释全。 + +### 平台支持： +1. 支持微信小程序：移动端、PC端、开发者工具 +2. 支持H5平台（2.1.0版本起） +3. 支持APP平台（2.1.5版本起）：Android、IOS +4. 其他平台暂未测试兼容性未知 + +### 支持功能： +1. 自定义裁剪尺寸 +2. 定点等比例缩放：移动端以双指触摸中心点为缩放中心点，PC端以鼠标所在点为缩放中心点 +3. 自由拖动：支持限制滑出边界，也支持回弹效果（滑动时可滑出边界，释放时回弹到边界） +4. 图片翻转：在裁剪尺寸非 1:1 的情况下，翻转时宽高无法铺满裁剪区域时，图片会自动放大到合适尺寸 +5. 裁剪生成新图片 +6. 本地选择图片 +7. 可定制样式：可自由选择是否渲染裁剪边框、可伸缩裁剪顶角、参考线 +8. 裁剪圆角图片：圆形、圆角矩形 + +### 属性说明 +| 属性名 | 类型 | 默认值 | 说明 | +|:---|:---|:---|:---| +| src | String | | 图片资源地址 | +| width | Number | 300 | 裁剪宽度 | +| height | Number | 300 | 裁剪高度 | +| showBorder | Boolean | true | 是否绘制裁剪区域边框 | +| showGrid | Boolean | true | 是否绘制裁剪区域网格参考线 | +| showAngle | Boolean | true | 是否展示四个支持伸缩的角 | +| areaScale | Number | 0.3 | 裁剪区域最小缩放倍数 | +| minScale | Number | 1 | 图片最小缩放倍数 | +| maxScale | Number | 5 | 图片最大缩放倍数 | +| checkRange | Boolean | true | 检查图片位置是否超出裁剪边界，如果超出则会矫正位置 | +| backgroundColor | String | | 生成图片背景色：如果裁剪区域没有完全包含在图片中时，不设置该属性则生成图片存在一定的透明块 | +| bounce | Boolean | true | 是否有回弹效果：当 checkRange 为 true 时有效，拖动时可以拖出边界，释放时会弹回边界 | +| rotatable | Boolean | true | 是否支持翻转 | +| reverseRotatable | Boolean | false | 是否支持逆向翻转 | +| choosable | Boolean | true | 是否支持从本地选择素材 | +| gpu | Boolean | false | 是否开启硬件加速，图片缩放过程中如果出现元素的“留影”或“重影”效果，可通过该方式解决或减轻这一问题 | +| angleSize | Number | 20 | 四个角尺寸，单位px | +| angleBorderWidth | Number | 2 | 四个角边框宽度，单位px | +| zIndex | Number/String | | 调整组件层级 | +| radius | Number | | 裁剪图片圆角半径，单位px | +| fileType | String | png | 生成文件的类型，只支持 'jpg' 或 'png'。默认为 'png' | +| delay | Number | 1000 | 图片从绘制到生成所需时间，单位ms
微信小程序平台使用 `Canvas 2D` 绘制时有效
如绘制大图或出现裁剪图片空白等情况应适当调大该值，因 `Canvas 2d` 采用同步绘制，需自己把控绘制完成时间 | +| navigation | Boolean | true | 页面是否是原生标题栏：
H5平台当 showAngle 为 true 时，使用插件的页面在 `page.json` 中配置了 `"navigationStyle": "custom"` 时，必须将此值设为 false ，否则四个可拉伸角的触发位置会有偏差。
注：因H5平台的窗口高度是包含标题栏的，而屏幕触摸点的坐标是不包含的 | +| @crop | EventHandle | | 剪裁完成后触发，event = { tempFilePath }。在H5平台下，tempFilePath 为 base64 | + +### 基本用法 +``` + + + +``` +通过ref组件实例可在进入页面后直接打开相册选择图片 +``` +mounted() { + this.$refs.qfImageCropper.chooseImage({ sourceType: ['album'] }); +} +``` +### 使用说明 +1.建议在`pages.json`中将引用插件的页面添加一下配置禁止下拉刷新和禁止页面滑动，防止出现性能或页面抖动等问题。 +``` +{ + "enablePullDownRefresh": false, + "disableScroll": true +} +``` +2.建议使用本插件不要设置过大宽高的目标图片尺寸，建议1365x1365以内，否则可能会导致如下问题： +``` +1.界面卡顿，内存占用过高 +2.生成图片失真（模糊） +3.确定裁剪后一直显示 `裁剪中...`，该问题是由 `uni.canvasToTempFilePath` 无法回调导致，不同平台不同设备限制可能有所不同。 +``` +3.如裁剪后的图片存在偏移的问题，请检查是否受自己项目中父组件或全局样式影响。 +4.src属性设置网络图片时，图片资源必须是能触发 `getImageInfo` API 的 success 回调才可用于插件裁剪。因此小程序平台获取网络图片信息需先配置download域名白名单才能生效。 +5.如果组件无法正常渲染且使用了 `v-if` 时，可尝试将 `v-if` 替换为 `v-show` +6.如果App端导入组件后无法正常渲染，请尝试重新运行 \ No newline at end of file diff --git a/utils/common.js b/utils/common.js index 8759614..53619a9 100644 --- a/utils/common.js +++ b/utils/common.js @@ -403,12 +403,38 @@ export const randomUtil = { * @returns {string} 格式化后的时间 */ randomTime(startTime, endTime, format = 'YYYY-MM-DD HH:mm:ss') { - const start = new Date(startTime).getTime(); - const end = new Date(endTime).getTime(); + let end; + if (endTime) { + end = new Date(endTime).getTime(); + } else { + end = Date.now(); + } + + let start; + if (startTime) { + start = new Date(startTime).getTime(); + } else { + // 默认为结束时间往前推3个月 + const date = new Date(end); + date.setMonth(date.getMonth() - 3); + start = date.getTime(); + } + const randomTimestamp = Math.floor(Math.random() * (end - start + 1)) + start; return dateUtil.format(randomTimestamp, format); }, + /** + * 生成随机金额 + * @param {number} min - 最小值 + * @param {number} max - 最大值 + * @returns {string} 随机金额 + */ + randomMoney(min = 0, max = 5000) { + const num = Math.random() * (max - min) + min; + return num.toFixed(2); + }, + /** * 随机生成指定位数订单号 * @param {number} length - 订单号位数