From c2ed1e14f20b0a314257fb5ac4a6fe39e25189b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AB=98=E5=81=A5?= Date: Fri, 6 Aug 2021 09:42:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=A3=81=E5=89=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 54 +- class/main.wxss | 2 +- images/ic_mine_title_bg.png | Bin 7916 -> 5104 bytes packagecard/cardDetail/cardDetail.js | 93 +- packagecard/cardDetail/cardDetail.wxml | 2 +- packagecard/cardList/cardList.js | 8 +- packagecard/cardList/cardList.wxml | 2 +- packagecard/common/corpperimg/cropperimg.js | 50 + packagecard/common/corpperimg/cropperimg.json | 5 + packagecard/common/corpperimg/cropperimg.wxml | 5 + packagecard/common/corpperimg/cropperimg.wxss | 1 + pages/index/index.wxml | 2 +- pages/mine/myCard/myCard.js | 4 +- pages/mine/myCard/myCard.wxml | 8 +- pages/mine/otherCard/othercarddetail.js | 24 +- pages/mine/otherCard/othercarddetail.wxml | 651 +++++---- pages/mine/otherCard/othercarddetail.wxss | 1236 ++++++++++------- vant/dist/cropper/index.js | 381 +++++ vant/dist/cropper/index.json | 3 + vant/dist/cropper/index.wxml | 44 + vant/dist/cropper/index.wxss | 296 ++++ 21 files changed, 1988 insertions(+), 883 deletions(-) create mode 100644 packagecard/common/corpperimg/cropperimg.js create mode 100644 packagecard/common/corpperimg/cropperimg.json create mode 100644 packagecard/common/corpperimg/cropperimg.wxml create mode 100644 packagecard/common/corpperimg/cropperimg.wxss create mode 100644 vant/dist/cropper/index.js create mode 100644 vant/dist/cropper/index.json create mode 100644 vant/dist/cropper/index.wxml create mode 100644 vant/dist/cropper/index.wxss diff --git a/app.json b/app.json index a425048..03def57 100644 --- a/app.json +++ b/app.json @@ -37,30 +37,33 @@ "pages/mine/product/coupon/editcoupon", "pages/mine/product/coupon/choosegoods" ], - "subPackages": [{ - "root": "packagecard", - "pages": [ - "cardList/cardList", - "cardDetail/cardDetail", - "moments/publish/momentpublish", - "moments/edit/momentedit", - "moments/list/momentslist", - "moments/publish/momentpublishline", - "sharePage/sharePage", - "moments/list/momentsshowlist", - "moments/momentsdetail/momentsdetail", - "moments/showlist/showlist", - "shop/catalog/bannerlist/bannerlist", - "shop/catalog/column/column", - "shop/catalog/list/list", - "shop/shopingcart/cart", - "shop/product/product", - "shop/bespeak/bespeak", - "shop/product/goodsdetail", - "shop/product/affirmorder", - "shop/catalog/bannerlist/goodscataloglist" - ] - }], + "subPackages": [ + { + "root": "packagecard", + "pages": [ + "cardList/cardList", + "cardDetail/cardDetail", + "moments/publish/momentpublish", + "moments/edit/momentedit", + "moments/list/momentslist", + "moments/publish/momentpublishline", + "sharePage/sharePage", + "moments/list/momentsshowlist", + "moments/momentsdetail/momentsdetail", + "moments/showlist/showlist", + "shop/catalog/bannerlist/bannerlist", + "shop/catalog/column/column", + "shop/catalog/list/list", + "shop/shopingcart/cart", + "shop/product/product", + "shop/bespeak/bespeak", + "shop/product/goodsdetail", + "shop/product/affirmorder", + "shop/catalog/bannerlist/goodscataloglist", + "common/corpperimg/cropperimg" + ] + } + ], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#fff", @@ -72,7 +75,8 @@ "color": "#000000", "selectedColor": "#000000", "borderStyle": "black", - "list": [{ + "list": [ + { "text": "首页", "pagePath": "pages/index/index", "iconPath": "images/ic_card_normal.png", diff --git a/class/main.wxss b/class/main.wxss index 3d5a9f4..1c29392 100644 --- a/class/main.wxss +++ b/class/main.wxss @@ -3615,7 +3615,7 @@ scroll-view.cu-steps .cu-item { } .bg-blue { - background-color: var(--blue); + background-color: var(--yellowLight); color: var(--white); } diff --git a/images/ic_mine_title_bg.png b/images/ic_mine_title_bg.png index e25ee0a54a9fc9079419bd47268f21c2ef3c36f0..5f8b68d2f05096c7dcd2224105f8596ea7273b71 100644 GIT binary patch literal 5104 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 Oz;#2DE96U#LH`4eeI0!O literal 7916 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 { - wx.hideLoading({}) - res = JSON.parse(res) - console.log(res) - var change = 'areaList[' + cur + '].templateAreaFile' - self.setData({ - [change]: res.data - }) - wx.showToast({ - title: '上传成功', - duration: 1500 - }) - }).catch(res => { - - }) - // app.restAjax.file(app.restAjax.path('{cardUrl}app/file/uploadimage', [app.tradeUrl]), res.tempFiles[0].path, 'image', { - // headers: { - // token: app.globalData.token - // } - // }, function (code, data) { - // console.log(data) - // data = JSON.parse(data) - // wx.hideLoading({}) - // var change = 'areaList[' + cur + '].templateAreaTitle' - // self.setData({ - // [change]: data.data - // }) - // wx.showToast({ - // title: '上传成功', - // duration: 1500 - // }) - // }, function (code, data) { - // app.dialog.msg(data.msg); - // }); } }) }, + doUploadImg(path) { + var _self = this + wx.showLoading({ + title: '上传中...', + }) + app.http.upload(app.urls.doUploadImg, { + path: path, + name: 'image', + header: { + token: app.globalData.token + } + }).then(res => { + wx.hideLoading({}) + res = JSON.parse(res) + var change = 'areaList[' + _self.data.currentIndex + '].templateAreaFile' + _self.setData({ + [change]: res.data + }) + wx.showToast({ + title: '上传成功', + duration: 1500 + }) + _self.setData({ + imgTempSrc: '', + currentIndex: 0 + }) + }).catch(res => { + _self.setData({ + imgTempSrc: '', + currentIndex: 0 + }) + }) + }, getPhoneNumber: function (e) { console.log(e.detail.errMsg) console.log(e.detail.iv) @@ -442,7 +444,10 @@ Page({ * 生命周期函数--监听页面显示 */ onShow: function () { - + console.log(this.data.imgTempSrc) + if (this.data.imgTempSrc != '') { + this.doUploadImg(this.data.imgTempSrc) + } }, /** diff --git a/packagecard/cardDetail/cardDetail.wxml b/packagecard/cardDetail/cardDetail.wxml index e5267f7..d83e298 100644 --- a/packagecard/cardDetail/cardDetail.wxml +++ b/packagecard/cardDetail/cardDetail.wxml @@ -50,7 +50,7 @@ {{item.templateAreaName}}: - + diff --git a/packagecard/cardList/cardList.js b/packagecard/cardList/cardList.js index c0bbd55..ec17709 100644 --- a/packagecard/cardList/cardList.js +++ b/packagecard/cardList/cardList.js @@ -6,17 +6,20 @@ Page({ * 页面的初始数据 */ data: { - cardUrl: app.cardUrl, + imgUrl: app.urls.baseImgUrl, cardList: [] }, getList: function () { var self = this - wx.showNavigationBarLoading() + wx.showLoading({ + title: '加载中...', + }) app.http.get(app.urls.getCardList, { header: { token: app.globalData.token } }).then(res => { + wx.hideLoading({}) self.setData({ cardList: res.data }) @@ -24,6 +27,7 @@ Page({ wx.stopPullDownRefresh() //停止下拉刷新 }) .catch(err => { + wx.hideLoading({}) wx.hideNavigationBarLoading() //完成停止加载 wx.stopPullDownRefresh() //停止下拉刷新 }) diff --git a/packagecard/cardList/cardList.wxml b/packagecard/cardList/cardList.wxml index f29c04c..75a9b7c 100644 --- a/packagecard/cardList/cardList.wxml +++ b/packagecard/cardList/cardList.wxml @@ -4,7 +4,7 @@ - + {{item.picturesTemplateTitle}} diff --git a/packagecard/common/corpperimg/cropperimg.js b/packagecard/common/corpperimg/cropperimg.js new file mode 100644 index 0000000..9d6640a --- /dev/null +++ b/packagecard/common/corpperimg/cropperimg.js @@ -0,0 +1,50 @@ +// packagecard/common/corpperimg/cropperimg.js +const app = getApp() +Page({ + + /** + * 页面的初始数据 + */ + data: { + imgSrc: '', + scale: 1 + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function (options) { + this.setData({ + imgSrc: options.imgSrc, + scale: options.scale + }) + console.log(this.data.scale) + }, + cropperDone(e) { + const { + src, + cropperData + } = e.detail; + let arr = getCurrentPages() + let lastPage = (arr.length >= 2) ? arr[arr.length - 2] : undefined + lastPage.setData({ + imgTempSrc: src + }) + }, + + cropperCancel() { + wx.navigateBack({}) + }, + + cropperFail(e) { + const err = e.detail; + console.log(e); + wx.showToast({ + title: '裁剪失败,请重试', + icon: 'none', + success() { + wx.navigateBack({}) + } + }) + } +}) \ No newline at end of file diff --git a/packagecard/common/corpperimg/cropperimg.json b/packagecard/common/corpperimg/cropperimg.json new file mode 100644 index 0000000..2b8ed20 --- /dev/null +++ b/packagecard/common/corpperimg/cropperimg.json @@ -0,0 +1,5 @@ +{ + "usingComponents": { + "cropper": "/vant/dist/cropper/index" + } +} \ No newline at end of file diff --git a/packagecard/common/corpperimg/cropperimg.wxml b/packagecard/common/corpperimg/cropperimg.wxml new file mode 100644 index 0000000..6d35643 --- /dev/null +++ b/packagecard/common/corpperimg/cropperimg.wxml @@ -0,0 +1,5 @@ + + 图片裁剪 + + \ No newline at end of file diff --git a/packagecard/common/corpperimg/cropperimg.wxss b/packagecard/common/corpperimg/cropperimg.wxss new file mode 100644 index 0000000..bd3e9ed --- /dev/null +++ b/packagecard/common/corpperimg/cropperimg.wxss @@ -0,0 +1 @@ +/* packagecard/common/corpperimg/cropperimg.wxss */ \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 49e6d62..1f4d8b9 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -87,7 +87,7 @@ - + diff --git a/pages/mine/myCard/myCard.js b/pages/mine/myCard/myCard.js index e1293c0..661525a 100644 --- a/pages/mine/myCard/myCard.js +++ b/pages/mine/myCard/myCard.js @@ -6,7 +6,7 @@ Page({ * 页面的初始数据 */ data: { - cardUrl: app.urls.baseImgUrl, + imgUrl: app.urls.baseImgUrl, cardList: [], otherCardList: [], historyList: [], @@ -211,7 +211,7 @@ Page({ this.getOtherCard() } else if (this.data.tab == '2') { this.setData({ - otherCardList: [], + historyList: [], page: { rows: 10, page: 1 diff --git a/pages/mine/myCard/myCard.wxml b/pages/mine/myCard/myCard.wxml index d170b52..e23a40b 100644 --- a/pages/mine/myCard/myCard.wxml +++ b/pages/mine/myCard/myCard.wxml @@ -15,7 +15,7 @@ style="padding-bottom:{{(list.cardTemplateUseHeight / list.cardTemplateUseWidth) *100 +'%'}};"> 主名片 - + {{list.cardTemplateUseTitle}} @@ -35,7 +35,7 @@ style="padding-bottom:{{(list.cardTemplateUseDTO.cardTemplateUseHeight / list.cardTemplateUseDTO.cardTemplateUseWidth) *100 +'%'}};"> 置顶 - + @@ -61,12 +61,12 @@ style="padding-bottom:{{(list.cardTemplateUseDTO.cardTemplateUseHeight / list.cardTemplateUseDTO.cardTemplateUseWidth) *100 +'%'}};"> 置顶 - + - + {{list.creatorName}} diff --git a/pages/mine/otherCard/othercarddetail.js b/pages/mine/otherCard/othercarddetail.js index 6f15803..5c181bc 100644 --- a/pages/mine/otherCard/othercarddetail.js +++ b/pages/mine/otherCard/othercarddetail.js @@ -8,8 +8,6 @@ Page({ speedStep: 5, //快进快退秒数 waitFlag: false, avatarUrl: app.globalData.userInfo.avatarUrl, - haveCard: false, - bgImg: '', areaList: [], cardHeight: '', cardInfo: {}, @@ -17,17 +15,25 @@ Page({ personIntro: {}, companyIntro: {}, shareImg: '', - phoneTxt: '', - emailTxt: '', - wechateTxt: '', - addressTxt: '', + phoneTxt: '未录入', + emailTxt: '未录入', + wechateTxt: '未录入', + addressTxt: '未录入', viewInfo: {}, forwardCount: '', imgUrl: app.urls.baseImgUrl, - personId: '', shareRecordId: '', isShowBarCode: false, - browUserList: [] + browUserList: [], + shareImgUrl: '', + tempUserId: '', //当前名片用户的ID + cardTemplateDispatchId: '', //用来标记是否是分享过来的 + cardTemplateUseId: '', //分享过来的名片id + isShowCard: false, //用来显示我浏览过的名片 + otherCardList: [], //卡包名片 + isPlayAudio: false, //标识当前是否在播放音乐 + audioId: '', + count: 3, }, onLoad(options) { var self = this @@ -676,7 +682,7 @@ Page({ var postId = self.buildId() self.shareRecord(postId) - var param = '/pages/sharePage/sharePage?cardTemplateDispatchId=' + postId; + var param = '/pages/index/index?cardTemplateDispatchId=' + postId; return { title: '我的名片', path: param diff --git a/pages/mine/otherCard/othercarddetail.wxml b/pages/mine/otherCard/othercarddetail.wxml index f3ea226..1f4d8b9 100644 --- a/pages/mine/otherCard/othercarddetail.wxml +++ b/pages/mine/otherCard/othercarddetail.wxml @@ -1,263 +1,404 @@ - - {{nameTxt}} - - - - - - - - - - {{item.templateAreaFontValue}} - - - - - - - - - - - - 加入卡包 - - - - 名片码 - - - - - - - 电话 - {{phoneTxt}} - - - - - - 微信 - {{wechateTxt}} - - - - - - 邮箱 - {{emailTxt}} - - - - - - 地址 - {{addressTxt}} - - - - - - - - - - - - - - {{cardInfo.cardTemplateUseScansNumber}} - - - - + + + + {{nameTxt}} + - - - - - - - - - - {{item.name}} - - - - - - - - - - - - - - {{child.comment}} - - - - - - {{child.value}} - - - - - - - - - {{child.comment}} - - - - - - - - - - - - - - - {{child.comment}} - - - - - - - - - - - - - - - - - - - - {{child.comment}} - - - - - - - - - {{audio.curDurationStr}} - - {{audio.totalDurationStr}} - - - - - - - - - - - - - - - - - {{child.comment}} - - - - - - - - - - - - - - - - - - - - {{child.comment}} - - - - - - {{child.value}} - - - - - - - + + + + + + + + + + + {{item.templateAreaFontValue}} + + + + + + + + + + + + + 02/ + + + 加入卡包 + + + + 03/ + + + 名片码 + + + + + + + 拨打电话 + + {{phoneTxt}} + + + + + 添加微信 + + {{wechateTxt}} + + + + + 邮箱 + + {{emailTxt}} + + + + + 地址 + + {{addressTxt}} + + + + + + + + + + + + + {{cardInfo.cardTemplateUseScansNumber >999? '999+' : + cardInfo.cardTemplateUseScansNumber}} + + + + {{cardInfo.cardTemplateUseDispatchNumber>999 ? + '999+':cardInfo.cardTemplateUseDispatchNumber}} + + + + + + + + + + + + + + + {{item.name}} + + + + 更多 + + + + + + + + + + + + + + + {{child.value}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{child.value}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{audio.curDurationStr}} + + {{audio.totalDurationStr}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   {{child.value}} + + + + + + + + + + {{child.comment}}:{{child.selValue}} + + + + + + + + + {{child.comment}} + + + + + {{ss.dataName}} + + + + + + + + + + + + - + + + + + + + + 一段话 - \ No newline at end of file + + 有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。 + + + + + + + + + + + 我的 + + + + + + + {{item.name}} + + + + 电话:{{item.phone}} + + + 公司:{{item.department}} + + + 地址:{{item.address}} + + + + + + + \ No newline at end of file diff --git a/pages/mine/otherCard/othercarddetail.wxss b/pages/mine/otherCard/othercarddetail.wxss index 1510169..32f3cdb 100644 --- a/pages/mine/otherCard/othercarddetail.wxss +++ b/pages/mine/otherCard/othercarddetail.wxss @@ -1,539 +1,699 @@ page { - background: #f7f7f7; - } - - .card-container { - height: 0; - box-sizing: border-box; - } - - .share-btn { - background: #eee; - } - - .card { - width: 100%; - height: 0; - box-sizing: border-box; - background: #fff; - position: relative; - overflow: hidden; - /* text-align: center; */ - } - - .area-box { - white-space: nowrap; - word-break: break-all; - } - - .card-bgImg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - .person { - padding: 20rpx; - } - - .dynamic-container { - margin-top: -50rpx; - position: relative; - background-color: #fff; - padding: 20rpx; - border-radius: 20rpx; - } - - .dynamic-title image { - width: 30rpx; - height: 30rpx; - vertical-align: middle; - margin-top: -4rpx; - } - - .catelog-title { - display: flex; - position: relative; - align-items: center; - justify-content: space-between; - } - - .catelog-title .action { - display: flex; - align-items: center; - justify-content: center; - max-width: 100%; - padding-right: 30rpx; - } - - .title { - font-size: 32rpx; - position: relative; - color: #fff; - border-top-right-radius: 20rpx; - border-top-left-radius: 20rpx; - padding-left: 15rpx; - background: #0054bd; - display: inline-block; - padding: 25rpx 35rpx 20rpx; - } - - .intro-title image { - width: 28rpx; - height: 30rpx; - vertical-align: middle; - margin-top: -4px; - } - - .serve-title image { - width: 28rpx; - height: 30rpx; - vertical-align: middle; - margin-top: -4px; - } - - .person-content { - padding: 20rpx; - border-radius: 20rpx; - background: #fff; - margin-top: -30rpx; - font-size: 30rpx; - color: #000; - line-height: 40rpx; - word-break: break-all; - line-height: 40rpx; - letter-spacing: 2rpx; - position: relative; - } - - .company-title { - display: flex; - justify-content: space-between; - border-bottom: 1px solid #ddd; - } - - .company-title image { - width: 140rpx; - height: 140rpx; - } - - .company-name { - width: 520rpx; - height: 140rpx; - display: flex; - align-items: center; - font-size: 34rpx; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .company-content { - background: #fff; - border-radius: 20rpx; - padding: 20rpx; - margin-top: -30rpx; - position: relative; - } - - .company-content image { - width: 100%; - height: 300rpx; - border-radius: 20rpx; - } - - .company .person-content { - margin-top: 0; - } - - .dynamic-title { - width: 710rpx; - margin: 0 auto; - display: block; - } - - .dynamic-box { - margin-bottom: 20rpx; - background: #fff; - border-radius: 20rpx; - overflow: hidden; - position: relative; - height: 400rpx; - } - - .dynamic-box image { - width: 100%; - height: 400rpx; - } - - .dynamic-text { - position: absolute; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.6); - line-height: 60rpx; - color: #fff; - padding: 0 10rpx; - font-size: 30rpx; - } - - .person-info { - display: flex; - justify-content: space-between; - padding-bottom: 20rpx; - border-bottom: 1px solid #EEE; - } - - .avatar { - width: 120rpx; - height: 120rpx; - border-radius: 50%; - overflow: hidden; - } - - .avatar image { - width: 100%; - height: 100%; - } - - .person-name { - width: 530rpx; - } - - .name { - font-size: 32rpx; - margin: 15rpx 0 10rpx; - color: #000; - } - - .time { - color: #b2b2b2; - } - - .dynamic-content { - margin: 20rpx 0; - } - - .dynamic-img { - position: relative; - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - - .dynamic-img image { - width: 32%; - margin-right: 2%; - height: 160rpx; - margin-bottom: 10rpx; - } - - .dynamic-img image:nth-child(3n) { - margin-right: 0; - } - - .dynamic-img-text { - position: absolute; - left: 0; - right: 0; - bottom: 3rpx; - padding: 0 20rpx; - background: rgba(0, 0, 0, 0.6); - color: #fff; - font-size: 32rpx; - line-height: 70rpx; - } - - .dynamic-good { - margin: 10rpx 0; - display: flex; - justify-content: space-between; - } - - .good-count { - color: #333; - font-size: 28rpx; - } - - .good-btn image { - width: 40rpx; - height: 40rpx; - vertical-align: top; - } - - .dynamic-reply { - background: #eee; - padding: 15rpx; - margin-top: 15rpx; - } - - .reply { - font-size: 32rpx; - color: #000; - margin-bottom: 5rpx; - } - - .reply-name { - font-weight: bold; - display: inline; - } - - .dynamic-reply-input { - margin-top: 10rpx; - } - - .dynamic-reply-input input { - width: 100%; - height: 60rpx; - border-bottom: 1px solid #eee; - } - - .creat-card { - position: fixed; - right: 20rpx; - bottom: 20rpx; - padding: 20rpx; - background: #0054bd; - border-radius: 50%; - box-sizing: border-box; - align-items: center; - justify-content: center; - flex-direction: column; - width: 140rpx; - height: 140rpx; - } - - .creat-card image { - width: 80rpx; - height: 60rpx; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - .share-save { - text-align: center; - display: flex; - justify-content: space-between; - } - - .share-btn { - border: 1px solid #1296db; - background: none; - color: #1296db; - font-weight: normal; - } - - .save-btn { - border: 1px solid #1296db; - background: #1296db; - color: #fff; - font-weight: normal; - } - - .bottom-btn { - margin-top: 20rpx; - padding: 0 20rpx; - width: 100%; - white-space: nowrap; - } - - .phone-box .icon { - width: 30rpx; - height: 30rpx; - vertical-align: top; - } - - .wechate-box .icon { - width: 35rpx; - height: 30rpx; - vertical-align: top; - } - - .email-box .icon { - width: 30rpx; - height: 30rpx; - vertical-align: top; - } - - .bottom-btn-box { - display: inline-block; - min-width: 32%; - line-height: 30rpx; - padding: 20rpx; - box-sizing: border-box; - border: 1px solid #DDD; - border-radius: 10rpx; - margin-right: 10rpx; - } - - .bottom-text { - margin-top: 10rpx; - } - - .top-box { - padding-bottom: 20rpx; - background: linear-gradient(to bottom, #eee, #fff) - } - - .good { - display: flex; - justify-content: space-between; - padding: 0 40rpx; - } - - .good-avatar, - .good-click { - line-height: 45rpx; - color: #333; - } - - .good-click { - display: flex; - } - - .view-count { - margin-right: 30rpx; - padding-right: 30rpx; - border-right: 1px solid #808080; - color: #808080; - } - - .good-avatar image { - width: 100%; - height: 100%; - } - - .good-click image { - width: 45rpx; - height: 45rpx; - vertical-align: top; - } - - .view-count image { - height: 43rpx; - } - - .avatar-list { - width: 45rpx; - height: 45rpx; - margin-right: 10rpx; - vertical-align: top; - display: inline-block; - } - - .mid { - display: flex; - background: #0054bd; - /* border-top-left-radius: 80rpx; */ - /* border-top-right-radius: 80rpx; */ - padding: 40rpx 0 80rpx; - /* margin-top: -20rpx; */ - position: relative; - } - - .mid-box { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - border-right: 1px solid #2f82ea; - background: none; - font-weight: normal; - width: auto !important; - padding: 0 !important; - } - - .mid-box:last-child { - border: none; - } - - .mid-box image { - width: 60rpx; - height: 60rpx; - margin-bottom: 20rpx; - } - - .mid-box-text { - font-size: 30rpx; - color: #fff; - } - - .mid-btn { - position: relative; - margin-top: -60rpx; - display: flex; - padding: 30rpx; - background: #fff; - border-top-left-radius: 20rpx; - border-top-right-radius: 20rpx; - flex-wrap: wrap; - justify-content: space-between; - } - - .mid-btn-box { - flex-shrink: 0; - width: 49%; - margin-bottom: 20rpx; - padding: 15rpx; - border-radius: 20rpx; - background: #eee; - display: flex; - justify-content: space-between; - box-sizing: border-box; - } - - .mid-btn-box:nth-child(3), - .mid-btn-box:nth-child(4) { - margin-bottom: 0; - } - - .mid-btn-box image { - width: 80rpx; - height: 80rpx; - } - - .mid-btn-text { - width: 200rpx; - } - - .text-top { - line-height: 45rpx; - font-size: 30rpx; - color: #333; - } - - .text-bottom { - font-size: 26rpx; - color: #808080; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .bar-code { - position: fixed; - top: 0; - bottom: 0; - right: 0; - left: 0; - background: rgba(0, 0, 0, 0.6); - } - - .bar-code image { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-width: 96%; - background: #fff; - width: 500rpx; - height: 500rpx; - border-radius: 10rpx; - padding: 10rpx; - } \ No newline at end of file + background: #F7F7F7; +} + +.card-container { + height: 0; + box-sizing: border-box; +} + +.share-btn { + background: #eee; +} + +.card { + width: 100%; + height: 0; + box-sizing: border-box; + background: #fff; + position: relative; + overflow: hidden; + /* text-align: center; */ +} + +.area-box { + white-space: nowrap; + word-break: break-all; + z-index: 111; +} + +.card-bgImg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.person { + padding: 20rpx; +} + +.dynamic-container { + margin-top: -50rpx; + position: relative; + background-color: #fff; + padding: 20rpx; + border-radius: 20rpx; +} + +.dynamic-title image { + width: 30rpx; + height: 30rpx; + vertical-align: middle; + margin-top: -4rpx; +} + +.catelog-title { + display: flex; + position: relative; + align-items: center; + justify-content: space-between; +} + +.catelog-title .action { + display: flex; + align-items: center; + justify-content: center; + max-width: 100%; + padding-right: 30rpx; +} + +.title { + font-size: 30rpx; + position: relative; + color: #000; + display: inline-block; +} + +.title text { + margin-left: 20rpx; +} + +.column-box { + display: flex; + flex-direction: column; + background-color: #fff; + width: 100%; +} + +.column-box-row { + display: flex; + flex-direction: row; + align-items: center; + background-color: #fff; + width: 100%; +} + +.column-content { + display: flex; + flex-direction: column; + padding: 10rpx 20rpx 20rpx; + background-color: #fff; + border-radius: 10rpx; + width: 100%; + margin-top: 20rpx; + box-shadow: 0px 2px 2px #f0f0f0; + z-index: 2; +} + +.intro-title image { + width: 28rpx; + height: 30rpx; + vertical-align: middle; + margin-top: -4px; +} + +.serve-title image { + width: 28rpx; + height: 30rpx; + vertical-align: middle; + margin-top: -4px; +} + +.person-content { + padding: 20rpx; + border-radius: 20rpx; + background: #fff; + margin-top: -30rpx; + font-size: 30rpx; + color: #000; + line-height: 40rpx; + word-break: break-all; + line-height: 40rpx; + letter-spacing: 2rpx; + position: relative; +} + +.company-title { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #ddd; +} + +.company-title image { + width: 140rpx; + height: 140rpx; +} + +.company-name { + width: 520rpx; + height: 140rpx; + display: flex; + align-items: center; + font-size: 34rpx; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.company-content { + background: #fff; + border-radius: 20rpx; + padding: 20rpx; + margin-top: -30rpx; + position: relative; +} + +.company-content image { + width: 100%; + height: 300rpx; + border-radius: 20rpx; +} + +.company .person-content { + margin-top: 0; +} + +.dynamic-title { + width: 710rpx; + margin: 0 auto; + display: block; +} + +.dynamic-box { + margin-bottom: 20rpx; + background: #fff; + border-radius: 20rpx; + overflow: hidden; + position: relative; + height: 400rpx; +} + +.dynamic-box image { + width: 100%; + height: 400rpx; +} + +.dynamic-text { + position: absolute; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); + line-height: 60rpx; + color: #fff; + padding: 0 10rpx; + font-size: 30rpx; +} + +.person-info { + display: flex; + justify-content: space-between; + padding-bottom: 20rpx; + border-bottom: 1px solid #EEE; +} + +.avatar { + width: 120rpx; + height: 120rpx; + border-radius: 50%; + overflow: hidden; +} + +.avatar image { + width: 100%; + height: 100%; +} + +.person-name { + width: 530rpx; +} + +.name { + font-size: 32rpx; + margin: 15rpx 0 10rpx; + color: #000; +} + +.time { + color: #b2b2b2; +} + +.dynamic-content { + margin: 20rpx 0; +} + +.dynamic-img { + position: relative; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.dynamic-img image { + width: 32%; + margin-right: 2%; + height: 160rpx; + margin-bottom: 10rpx; +} + +.dynamic-img image:nth-child(3n) { + margin-right: 0; +} + +.dynamic-img-text { + position: absolute; + left: 0; + right: 0; + bottom: 3rpx; + padding: 0 20rpx; + background: rgba(0, 0, 0, 0.6); + color: #fff; + font-size: 32rpx; + line-height: 70rpx; +} + +.dynamic-good { + margin: 10rpx 0; + display: flex; + justify-content: space-between; +} + +.good-count { + color: #333; + font-size: 28rpx; +} + +.good-btn image { + width: 40rpx; + height: 40rpx; + vertical-align: top; +} + +.dynamic-reply { + background: #eee; + padding: 15rpx; + margin-top: 15rpx; +} + +.reply { + font-size: 32rpx; + color: #000; + margin-bottom: 5rpx; +} + +.reply-name { + font-weight: bold; + display: inline; +} + +.dynamic-reply-input { + margin-top: 10rpx; +} + +.dynamic-reply-input input { + width: 100%; + height: 60rpx; + border-bottom: 1px solid #eee; +} + +.creat-card { + position: fixed; + right: 20rpx; + bottom: 20rpx; + padding: 20rpx; + background: #E6B980; + border-radius: 50%; + box-sizing: border-box; + align-items: center; + justify-content: center; + flex-direction: column; + width: 140rpx; + height: 140rpx; + z-index: 100; +} + +.creat-card image { + width: 80rpx; + height: 60rpx; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.share-save { + text-align: center; + display: flex; + justify-content: space-between; +} + +.share-btn { + border: 1px solid #E6B980; + background: none; + color: #1296db; + font-weight: normal; +} + +.save-btn { + border: 1px solid #1296db; + background: #1296db; + color: #fff; + font-weight: normal; +} + +.bottom-btn { + margin-top: 20rpx; + padding: 0 20rpx; + width: 100%; + white-space: nowrap; +} + +.phone-box .icon { + width: 30rpx; + height: 30rpx; + vertical-align: top; +} + +.wechate-box .icon { + width: 35rpx; + height: 30rpx; + vertical-align: top; +} + +.email-box .icon { + width: 30rpx; + height: 30rpx; + vertical-align: top; +} + +.bottom-btn-box { + display: inline-block; + min-width: 32%; + line-height: 30rpx; + padding: 20rpx; + box-sizing: border-box; + border: 1px solid #DDD; + border-radius: 10rpx; + margin-right: 10rpx; +} + +.bottom-text { + margin-top: 10rpx; +} + +.top-box { + padding-bottom: 20rpx; + background-color: #F7F7F7; +} + +.good { + display: flex; + justify-content: space-between; + padding-left: 40rpx; + width: 100%; + margin-top: 40rpx; + padding-top: 40rpx; + padding-bottom: 30rpx; + background-color: #fff; +} + +.good-avatar, +.good-click { + line-height: 45rpx; + color: #333; +} + +.good-click { + display: flex; +} + +.view-count { + margin-right: 30rpx; + padding-right: 30rpx; + border-right: 1px solid #808080; + color: #808080; + display: flex; + flex-direction: row; + font-size: 36rpx; +} + +.view-count-no { + margin-right: 30rpx; + padding-right: 30rpx; + color: #808080; + display: flex; + flex-direction: row; + align-items: center; + font-size: 36rpx; +} + +.good-avatar image { + width: 100%; + height: 100%; +} + +.good-click image { + width: 38rpx; + height: 38rpx; +} + +.view-count image { + width: 32rpx; + height: 32rpx; +} + +.view-count-no image { + width: 32rpx; + height: 32rpx; +} + +.movie-item { + height: 280rpx; + width: 100%; + padding-bottom: 0px; +} + +.image-32 { + width: 64rpx; + height: 64rpx; +} + +.image-64 { + width: 128rpx; + height: 128rpx; +} + +.avatar-list { + width: 45rpx; + height: 45rpx; + margin-right: 10rpx; + vertical-align: top; + display: inline-block; +} + +.mid { + display: flex; + width: 95%; + background: white; + position: relative; + margin-top: 5rpx; + padding-top: 20rpx; +} + +.mid-box { + flex: 1; + width: 100%; + display: flex; + flex-direction: column; + align-items: left; + justify-content: left; + border: 2rpx solid #EAC390; + border-radius: 10rpx; + background-color: white; + font-weight: normal; + padding: 10rpx; +} + +/* .mid-box:nth-child(1) { + +} */ + +.mid-box:nth-child(2) { + margin-left: 20rpx; +} + +.mid-box:last-child { + border: none; + margin-left: 20rpx; + border-radius: 10rpx; +} + +.mid-box image { + width: 48rpx; + height: 48rpx; +} + +.mid-box-text { + font-size: 28rpx; + color: #000; + text-align: left; +} + +.mid-box-text-white { + font-size: 28rpx; + color: #FFF; + text-align: left; +} + +.mid-btn { + position: relative; + margin-top: 20rpx; + display: flex; + padding: 10rpx; + width: 95%; + border: 1rpx solid rgb(235, 235, 235); + border-radius: 15rpx; + background: #fff; + box-shadow: 10rpx 10rpx 20rpx 20rpx #e4e4e426; + flex-wrap: nowrap; + flex-direction: column; + justify-content: center; +} + +.mid-btn-box { + flex-shrink: 0; + padding: 15rpx; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + box-sizing: border-box; +} + +.mid-btn-title { + display: flex; + flex-direction: row; + justify-content: flex-start; + flex: 3; + align-items: center; +} + +.mid-btn-title .image { + width: 48rpx; + height: 48rpx; +} + +.mid-btn-title text { + margin-left: 20rpx; + font-size: 28rpx; + color: #333333; +} + +.mid-btn-box:nth-child(3), +.mid-btn-box:nth-child(4) { + margin-bottom: 0; +} + +.mid-btn-box image { + width: 80rpx; + height: 80rpx; +} + +.mid-btn-text { + width: 200rpx; +} + +.text-top { + line-height: 45rpx; + font-size: 30rpx; + color: #000; +} + +.text-bottom { + font-size: 26rpx; + color: #898989; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.bar-code { + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 999; +} + +.bar-code .content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-width: 96%; + background: #fff; + /* width: 500rpx; + height: 500rpx; */ + border-radius: 10rpx; + padding: 20rpx; + min-width: 80%; + min-height: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} + +.code-title { + font-size: 32rpx; + font-weight: bold; + color: #000; +} + +.code-txt { + font-size: 32rpx; + color: #000; +} + +.bar-code image { + width: 300rpx; + height: 300rpx; +} + +.func-box { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin-top: 10rpx; +} + +.func-items { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-top: 10rpx; +} + +.func-item { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + flex: 1; +} + +.func-item image { + width: 48rpx; + height: 48rpx; +} + +.func-item text { + margin-left: 10rpx; +} \ No newline at end of file diff --git a/vant/dist/cropper/index.js b/vant/dist/cropper/index.js new file mode 100644 index 0000000..9a80a7a --- /dev/null +++ b/vant/dist/cropper/index.js @@ -0,0 +1,381 @@ +const defaultData = { + isShowCropper:false, + // 初始化的宽高 + cropperInitW: 750, + cropperInitH: 750, + // 动态的宽高 + cropperW: 750, + cropperH: 750, + // 动态的left top值 + cropperL: 0, + cropperT: 0, + + transL: 0, + transT: 0, + + // 图片缩放值 + scaleP: 0, + imageW: 0, + imageH: 0, + + // 裁剪框 宽高 + cutL: 0, + cutT: 0, + cutB: 0, + cutR: 0, + + qualityWidth: '', + innerAspectRadio: 750 / wx.getSystemInfoSync().windowWidth, + + C_CONSTANTS:{ + SCREEN_WIDTH : 750, + PAGE_X:0, // 手按下的x位置 + PAGE_Y:0, // 手按下y的位置 + PR : wx.getSystemInfoSync().pixelRatio, // dpi + T_PAGE_X:{}, // 手移动的时候x的位置 + T_PAGE_Y:{}, // 手移动的时候Y的位置 + CUT_L:0, // 初始化拖拽元素的left值 + CUT_T:0, // 初始化拖拽元素的top值 + CUT_R:0, // 初始化拖拽元素的 + CUT_B:0, // 初始化拖拽元素的 + CUT_W:0, // 初始化拖拽元素的宽度 + CUT_H:0, // 初始化拖拽元素的高度 + IMG_RATIO:0, // 图片比例 + IMG_REAL_W:0, // 图片实际的宽度 + IMG_REAL_H:0, // 图片实际的高度 + IMG_TYPE:'',//图片的格式 + DRAFG_MOVE_RATIO : 750 / wx.getSystemInfoSync().windowWidth //移动时候的比例 + } +}; +let data = {}; + +try{ + data = JSON.parse(JSON.stringify(defaultData)); +}catch(e){console.log(e)}; + +Component({ + properties: { + imageSrc:{ + type:String, + value:'', + observer(newVal, oldVal) { + if(newVal !== oldVal){ + this.setData({ + isShowCropper:true + },() => { + this.loadImage(); + }) + } + + } + }, + isCircleCrop:{ + type:Boolean, + value:false + }, + enableScale:{ + type:Boolean, + value:false + }, + ratio:{ + type:Number, + value:1 + } + }, + data, + ready(){ + if(this.data.isCircleCrop){ + //圆形裁剪 强制比例为1 + this.setData({ + ratio:1 + }) + } + }, + methods: { + loadImage() { + let {ratio,imageSrc} = this.data; + let {IMG_REAL_W,IMG_REAL_H,IMG_RATIO,SCREEN_WIDTH,IMG_TYPE} = this.data.C_CONSTANTS; + wx.getImageInfo({ + src: imageSrc, + success: res => { + IMG_REAL_W = res.width; + IMG_REAL_H = res.height; + IMG_RATIO = IMG_REAL_W / IMG_REAL_H; + IMG_TYPE = res.type === 'png' ? 'png' : 'jpg'; + // 根据图片的宽高显示不同的效果 保证图片可以正常显示 + let temp = {}; + let cropperData = {}; + if (IMG_RATIO >= 1) { + cropperData = { + cropperW: SCREEN_WIDTH, + cropperH: SCREEN_WIDTH / IMG_RATIO, + // 初始化left right + cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2), + cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2) + } + if(ratio > 1){ + temp = { + cutL: (SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2, + cutT: (SCREEN_WIDTH / IMG_RATIO - SCREEN_WIDTH / IMG_RATIO / ratio ) / 2, + cutR: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2 - SCREEN_WIDTH / IMG_RATIO, + cutB: SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - SCREEN_WIDTH / IMG_RATIO / ratio ) / 2 - SCREEN_WIDTH / IMG_RATIO / ratio + } + }else{ + temp = { + cutT:0, + cutB:0, + cutL:(SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO * ratio) / 2, + cutR: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO * ratio) / 2 - SCREEN_WIDTH / IMG_RATIO * ratio + } + } + } else { + cropperData = { + cropperW: SCREEN_WIDTH * IMG_RATIO, + cropperH: SCREEN_WIDTH, + // 初始化left right + cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2), + cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2) + } + if(ratio > 1){ + temp = { + cutL:0, + cutR:0, + cutT: (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO / ratio) / 2, + cutB: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO / ratio) / 2 - SCREEN_WIDTH * IMG_RATIO / ratio + } + }else{ + temp = { + cutL: (SCREEN_WIDTH * IMG_RATIO - SCREEN_WIDTH * IMG_RATIO * ratio) / 2, + cutR: SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO - SCREEN_WIDTH * IMG_RATIO * ratio) / 2 - SCREEN_WIDTH * IMG_RATIO * ratio, + cutT: (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2, + cutB: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2 - SCREEN_WIDTH * IMG_RATIO + } + + } + } + this.setData({ + C_CONSTANTS:Object.assign({},this.data.C_CONSTANTS,{ + IMG_REAL_W, + IMG_REAL_H, + IMG_RATIO, + IMG_TYPE + }), + isShowCropper: true, + // 图片缩放值 + scaleP: IMG_REAL_W / SCREEN_WIDTH, + qualityWidth: IMG_REAL_W, + innerAspectRadio: IMG_RATIO, + ...temp, + ...cropperData + }) + } + }); + + }, + contentStartMove(e) { + this.setData({ + 'C_CONSTANTS.PAGE_X':e.touches[0].pageX, + 'C_CONSTANTS.PAGE_Y':e.touches[0].pageY + }) + }, + // 拖动时候触发的touchMove事件 + contentMoveing(e) { + let {PAGE_X,PAGE_Y,DRAFG_MOVE_RATIO} = this.data.C_CONSTANTS; + let {cutL,cutR,cutT,cutB} = this.data; + let dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO + let dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO + // 左移 + if (dragLengthX > 0) { + if (cutL - dragLengthX < 0) dragLengthX = cutL + } else { + if (cutR + dragLengthX < 0) dragLengthX = -cutR + } + + if (dragLengthY > 0) { + if (cutT - dragLengthY < 0) dragLengthY = cutT + } else { + if (cutB + dragLengthY < 0) dragLengthY = -cutB + } + this.setData({ + cutL: cutL - dragLengthX, + cutT: cutT - dragLengthY, + cutR: cutR + dragLengthX, + cutB: cutB + dragLengthY, + 'C_CONSTANTS.PAGE_X':e.touches[0].pageX, + 'C_CONSTANTS.PAGE_Y':e.touches[0].pageY + }); + }, + // 设置大小的时候触发的touchStart事件 + dragStart(e) { + let {cutL,cutR,cutT,cutB} = this.data; + this.setData({ + C_CONSTANTS:Object.assign({},this.data.C_CONSTANTS,{ + T_PAGE_X : e.touches[0].pageX, + T_PAGE_Y : e.touches[0].pageY, + CUT_L : cutL, + CUT_R : cutR, + CUT_B : cutB, + CUT_T : cutT + }) + }) + + }, + // 设置大小的时候触发的touchMove事件 + dragMove(e) { + let dragType = e.target.dataset.drag + let {ratio,cropperW,cropperH,cutL,cutT,cutR,cutB,enableScale} = this.data; + let {CUT_R,CUT_L,CUT_T,CUT_B,T_PAGE_X,T_PAGE_Y,DRAFG_MOVE_RATIO} = this.data.C_CONSTANTS; + let dragLength; + switch (dragType) { + case 'right': + dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO + if (CUT_R + dragLength < 0) dragLength = -CUT_R + cutR = CUT_R + dragLength; + if(enableScale){ + cutT = CUT_T + dragLength / ratio; + } + if(cutR < 0 || cutT < 0 || cutT > cropperH || cutR > cropperW) return; + break; + case 'left': + dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO + if (CUT_L - dragLength < 0) dragLength = CUT_L + if ((CUT_L - dragLength) > (this.data.cropperW - this.data.cutR)) dragLength = CUT_L - (this.data.cropperW - this.data.cutR) + cutL = CUT_L - dragLength; + if(enableScale){ + cutT = CUT_T - dragLength / ratio; + } + if(cutL < 0 || cutT < 0 || cutT > cropperH || cutL > cropperW) return; + break; + case 'top': + dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO + if (CUT_T - dragLength < 0) dragLength = CUT_T + if ((CUT_T - dragLength) > (this.data.cropperH - this.data.cutB)) dragLength = CUT_T - (this.data.cropperH - this.data.cutB) + cutT = CUT_T - dragLength; + if(enableScale){ + cutR = CUT_R - dragLength * ratio; + } + break; + case 'bottom': + dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO + if (CUT_B + dragLength < 0) dragLength = -CUT_B + cutB = CUT_B + dragLength; + if(enableScale){ + cutR = CUT_R + dragLength * ratio; + } + if(cutR < 0 || cutT < 0 || cutT > cropperH || cutR > cropperW) return; + break; + default:''; + } + this.setData({ + cutL, + cutT, + cutR, + cutB + }); + }, + contentTouchEnd(){}, + // 获取图片 + confirmCropper() { + const {isCircleCrop} = this.data;; + if(isCircleCrop){ + this.circleCrop() + }else{ + this.normalCropper(); + } + }, + + normalCropper(){ + let {imageSrc,cropperW,cropperH,cutL,cutT,cutR,cutB} = this.data; + let {IMG_REAL_W,IMG_REAL_H,IMG_TYPE} = this.data.C_CONSTANTS; + // 将图片写入画布 + const ctx = wx.createCanvasContext('cropper',this) + ctx.drawImage(imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H); + ctx.draw(true, () => { + // 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 canvasT = (_this.data.cutT / _this.data.cropperH) * (_this.data.imageH / pixelRatio) + let canvasW = ((cropperW - cutL - cutR) / cropperW) * IMG_REAL_W + let canvasH = ((cropperH - cutT - cutB) / cropperH) * IMG_REAL_H + let canvasL = (cutL / cropperW) * IMG_REAL_W + let canvasT = (cutT / cropperH) * IMG_REAL_H + wx.canvasToTempFilePath({ + x: canvasL, + y: canvasT, + width: canvasW, + height: canvasH, + destWidth: canvasW, + destHeight: canvasH, + fileType:IMG_TYPE || 'jpg', + canvasId: 'cropper', + success: (res) => { + //图片裁剪成功 + this.cancelCropper(); + this.triggerEvent('cropperDone', { + src:res.tempFilePath, + cropperData:{ + x: canvasL, + y: canvasT, + width: canvasW, + height: canvasH + } + }) + }, + fail:err =>{ + this.triggerEvent('cropperFail',err) + } + },this); + }) + }, + + circleCrop(){ + let {imageSrc,cropperW,cropperH,cutL,cutT,cutR,cutB} = this.data; + let {IMG_REAL_W,IMG_REAL_H,IMG_TYPE} = this.data.C_CONSTANTS; + // 将图片写入画布 + const ctx = wx.createCanvasContext('cropper',this) + let canvasW = ((cropperW - cutL - cutR) / cropperW) * IMG_REAL_W + let canvasL = (cutL / cropperW) * IMG_REAL_W + let canvasT = (cutT / cropperH) * IMG_REAL_H + + this.setData({ + canvasW:canvasW, + canvasH:canvasW + },() => { + ctx.arc(canvasW / 2,canvasW / 2,canvasW / 2,0,2 * Math.PI); + ctx.clip(); + ctx.drawImage(imageSrc, canvasL, canvasT, canvasW, canvasW,0,0,canvasW,canvasW); + ctx.draw(true, () => { + wx.canvasToTempFilePath({ + fileType:IMG_TYPE || 'jpg', + canvasId: 'cropper', + success: (res) => { + //图片裁剪成功 + this.cancelCropper(); + this.triggerEvent('cropperDone', { + src:res.tempFilePath, + cropperData:{ + x: canvasL, + y: canvasT, + width: canvasW, + height: canvasW + } + }) + }, + fail:err =>{ + this.triggerEvent('cropperFail',err) + } + },this); + }) + }) + }, + + cancelCropper(){ + let originData = {} + try{ + originData = JSON.parse(JSON.stringify(defaultData)) + }catch(e){}; + + this.setData({ + ...originData + }); + this.triggerEvent('cropperCancel') + } + } +}) \ No newline at end of file diff --git a/vant/dist/cropper/index.json b/vant/dist/cropper/index.json new file mode 100644 index 0000000..fba482a --- /dev/null +++ b/vant/dist/cropper/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/vant/dist/cropper/index.wxml b/vant/dist/cropper/index.wxml new file mode 100644 index 0000000..373095b --- /dev/null +++ b/vant/dist/cropper/index.wxml @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vant/dist/cropper/index.wxss b/vant/dist/cropper/index.wxss new file mode 100644 index 0000000..08aa641 --- /dev/null +++ b/vant/dist/cropper/index.wxss @@ -0,0 +1,296 @@ +/* pages/wx-cropper/index.wxss */ +.wx-cropper-info { + position: fixed; + top: 140rpx; + left: 0; + right: 0; + bottom: 0; + display: block; + z-index: 10000; + align-items: center; + flex-direction: column; + height: 100%; + background: #000; +} + +.cropper-config { + display: flex; + position: fixed; + width: 100%; + bottom: 20rpx; +} + +.cropper-config .btn { + min-width: 300rpx; +} + +.cropper-config .cropper-confirm { + background: #fac208; +} + +.cropper-content { + min-height: 750rpx; + width: 100%; + height: 100%; +} + +.wx-corpper { + position: relative; + overflow: hidden; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + box-sizing: border-box; +} + +.wx-corpper-content { + position: relative; +} + +.wx-corpper-content .img { + display: block; + width: 100%; + min-width: 0 !important; + max-width: none !important; + height: 100%; + min-height: 0 !important; + max-height: none !important; + image-orientation: 0deg !important; + margin: 0 auto; +} + +/* 移动图片效果 */ +.wx-cropper-drag-box { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + cursor: move; + background: rgba(0, 0, 0, 0.6); + z-index: 1; +} + +/* 内部的信息 */ +.wx-corpper-crop-box { + position: absolute; + background: rgba(255, 255, 255, 0.3); + z-index: 2; +} + +.wx-corpper-crop-box .wx-cropper-view-box { + position: relative; + display: block; + width: 100%; + height: 100%; + overflow: visible; + outline: 1px solid #69f; + outline-color: rgba(102, 153, 255, .75) +} + +/* 横向虚线 */ +.wx-cropper-dashed-h { + position: absolute; + top: 33.33333333%; + left: 0; + width: 100%; + height: 33.33333333%; + border-top: 1px dashed rgba(255, 255, 255, 0.5); + border-bottom: 1px dashed rgba(255, 255, 255, 0.5); +} + +/* 纵向虚线 */ +.wx-cropper-dashed-v { + position: absolute; + left: 33.33333333%; + top: 0; + width: 33.33333333%; + height: 100%; + border-left: 1px dashed rgba(255, 255, 255, 0.5); + border-right: 1px dashed rgba(255, 255, 255, 0.5); +} + +/* 四个方向的线 为了之后的拖动事件*/ +.wx-cropper-line-t { + position: absolute; + display: block; + width: 100%; + background-color: #69f; + top: 0; + left: 0; + height: 1px; + opacity: 0.1; + cursor: n-resize; +} + +.wx-cropper-line-t::before { + content: ''; + position: absolute; + top: 50%; + right: 0rpx; + width: 100%; + -webkit-transform: translate3d(0, -50%, 0); + transform: translate3d(0, -50%, 0); + bottom: 0; + height: 41rpx; + background: transparent; + z-index: 11; +} + +.wx-cropper-line-r { + position: absolute; + display: block; + background-color: #69f; + top: 0; + right: 0px; + width: 1px; + opacity: 0.1; + height: 100%; + cursor: e-resize; +} + +.wx-cropper-line-r::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + width: 41rpx; + -webkit-transform: translate3d(-50%, 0, 0); + transform: translate3d(-50%, 0, 0); + bottom: 0; + height: 100%; + background: transparent; + z-index: 11; +} + +.wx-cropper-line-b { + position: absolute; + display: block; + width: 100%; + background-color: #69f; + bottom: 0; + left: 0; + height: 1px; + opacity: 0.1; + cursor: s-resize; +} + +.wx-cropper-line-b::before { + content: ''; + position: absolute; + top: 50%; + right: 0rpx; + width: 100%; + -webkit-transform: translate3d(0, -50%, 0); + transform: translate3d(0, -50%, 0); + bottom: 0; + height: 41rpx; + background: transparent; + z-index: 11; +} + +.wx-cropper-line-l { + position: absolute; + display: block; + background-color: #69f; + top: 0; + left: 0; + width: 1px; + opacity: 0.1; + height: 100%; + cursor: w-resize; +} + +.wx-cropper-line-l::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + width: 41rpx; + -webkit-transform: translate3d(-50%, 0, 0); + transform: translate3d(-50%, 0, 0); + bottom: 0; + height: 100%; + background: transparent; + z-index: 11; +} + +.wx-cropper-point { + width: 5px; + height: 5px; + background-color: #69f; + opacity: .75; + position: absolute; + z-index: 3; +} + +.point-t { + top: -3px; + left: 50%; + margin-left: -3px; + cursor: n-resize; +} + +.point-tr { + top: -3px; + left: 100%; + margin-left: -3px; + cursor: n-resize; +} + +.point-r { + top: 50%; + left: 100%; + margin-left: -3px; + margin-top: -3px; + cursor: n-resize; +} + +.point-rb { + left: 100%; + top: 100%; + -webkit-transform: translate3d(-50%, -50%, 0); + transform: translate3d(-50%, -50%, 0); + cursor: n-resize; + /* width: 24rpx; */ + /* height: 24rpx; */ + background-color: #69f; + position: absolute; + z-index: 1112; + opacity: 1; +} + +.point-b { + left: 50%; + top: 100%; + margin-left: -3px; + margin-top: -3px; + cursor: n-resize; +} + +.point-bl { + left: 0%; + top: 100%; + margin-left: -3px; + margin-top: -3px; + cursor: n-resize; +} + +.point-l { + left: 0%; + top: 50%; + margin-left: -3px; + margin-top: -3px; + cursor: n-resize; +} + +.point-lt { + left: 0%; + top: 0%; + margin-left: -3px; + margin-top: -3px; + cursor: n-resize; +} \ No newline at end of file