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 e25ee0a..5f8b68d 100644 Binary files a/images/ic_mine_title_bg.png and b/images/ic_mine_title_bg.png differ diff --git a/packagecard/cardDetail/cardDetail.js b/packagecard/cardDetail/cardDetail.js index 4530719..ca674b0 100644 --- a/packagecard/cardDetail/cardDetail.js +++ b/packagecard/cardDetail/cardDetail.js @@ -38,7 +38,9 @@ Page({ "iconPath": "/images/ic_mine_normal.png", "selectedIconPath": "/images/ic_mine_sel.png", } - ] + ], + imgTempSrc: '', + currentIndex: 0 }, tabChange(e) { this.setData({ @@ -145,56 +147,56 @@ Page({ choosePhoto: function (e) { var self = this var cur = e.currentTarget.dataset.cur + var item = e.currentTarget.dataset.item + console.log(cur) + self.setData({ + currentIndex: cur + }) + //宽高比 + var scale = item.templateAreaWidth / item.templateAreaHeight wx.chooseImage({ count: 1, sourceType: ['album', 'camera'], success: function (res) { - wx.showLoading({ - title: '上传中...', + wx.navigateTo({ + url: '/packagecard/common/corpperimg/cropperimg?imgSrc=' + res.tempFiles[0].path + '&scale=' + scale, }) - app.http.upload(app.urls.doUploadImg, { - path: res.tempFiles[0].path, - name: 'image', - header: { - token: app.globalData.token - } - }).then(res => { - 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