gaojian/card-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图片裁剪

Browse Source
This commit is contained in:
高健 2021-08-06 09:42:15 +08:00
parent e64ce03615
commit c2ed1e14f2
21 changed files with 1988 additions and 883 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app.json
View File

@ -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",

2
class/main.wxss
View File

@ -3615,7 +3615,7 @@ scroll-view.cu-steps .cu-item {
}
.bg-blue {
background-color: var(--blue);
background-color: var(--yellowLight);
color: var(--white);
}

BIN
images/ic_mine_title_bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

93
packagecard/cardDetail/cardDetail.js
View File

@ -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)
}
},
/**

2
packagecard/cardDetail/cardDetail.wxml
View File

@ -50,7 +50,7 @@
<view class="row" wx:for="{{areaList}}" wx:key="index"
wx:if="{{item.templateAreaServerLink == '2' && item.templateAreaType != '1'}}">
<view class="item-title">{{item.templateAreaName}}:</view>
<view bindtap="choosePhoto" data-cur="{{index}}" class="card-img-box">
<view bindtap="choosePhoto" data-cur="{{index}}" data-item="{{item}}" class="card-img-box">
<image src="{{cardUrl}}{{item.templateAreaFile}}" mode="widthFix"></image>
<text class="cuIcon-cameraadd"></text>
</view>

8
packagecard/cardList/cardList.js
View File

@ -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() //停止下拉刷新
})

2
packagecard/cardList/cardList.wxml
View File

@ -4,7 +4,7 @@
<view class="list">
<view class="card" bindtap="goDetail" wx:for="{{cardList}}" data-id="{{item.cardTemplateId}}" wx:key="index">
<view class="card-img">
<image src="{{item.picturesTemplatePicture}}"></image>
<image src="{{imgUrl+item.picturesTemplatePictureUrl}}"></image>
</view>
<view class="card-name">{{item.picturesTemplateTitle}}</view>
</view>

50
packagecard/common/corpperimg/cropperimg.js Normal file
View File

@ -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({})
}
})
}
})

5
packagecard/common/corpperimg/cropperimg.json Normal file
View File

@ -0,0 +1,5 @@
{
"usingComponents": {
"cropper": "/vant/dist/cropper/index"
}
}

5
packagecard/common/corpperimg/cropperimg.wxml Normal file
View File

@ -0,0 +1,5 @@
<cu-custom isCustom="{{false}}" isBack="{{true}}">
<view slot="content">图片裁剪</view>
</cu-custom>
<cropper imageSrc="{{imgSrc}}" enableScale="{{true}}" ratio="{{scale}}" bind:cropperDone="cropperDone"
bind:cropperCancel="cropperCancel" bind:cropperFail="cropperFail"></cropper>

1
packagecard/common/corpperimg/cropperimg.wxss Normal file
View File

@ -0,0 +1 @@
/* packagecard/common/corpperimg/cropperimg.wxss */

2
pages/index/index.wxml
View File

@ -87,7 +87,7 @@
<view class="good">
<view class="good-avatar">
<view class="avatar-list" wx:for="{{browUserList}}" wx:key="index" wx:for-item="user">
<image src="{{imgUrl}}{{user.creatorIcon}}" wx:if="{{user.creatorIcon}}"></image>
<image src="{{user.creatorIcon}}" wx:if="{{user.creatorIcon}}"></image>
<image src="/images/ic_user_default.png" wx:if="{{!user.creatorIcon}}"></image>
</view>
</view>

4
pages/mine/myCard/myCard.js
View File

@ -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

8
pages/mine/myCard/myCard.wxml
View File

@ -15,7 +15,7 @@
style="padding-bottom:{{(list.cardTemplateUseHeight / list.cardTemplateUseWidth) *100 +'%'}};">
<view class="card-img">
<view class="main" wx:if="{{list.cardTemplateUseDefault == '1'}}">主名片</view>
<image src="{{list.cardTemplateUsePhoto}}" style="width: 100%"></image>
<image src="{{list.picturesTemplatePictureUrl}}" style="width: 100%"></image>
</view>
</view>
<view class="card-name">{{list.cardTemplateUseTitle}}</view>
@ -35,7 +35,7 @@
style="padding-bottom:{{(list.cardTemplateUseDTO.cardTemplateUseHeight / list.cardTemplateUseDTO.cardTemplateUseWidth) *100 +'%'}};">
<view class="card-img">
<view class="main" wx:if="{{list.cardTemplateUseTop == '1'}}">置顶</view>
<image src="{{list.cardTemplateUseDTO.cardTemplateUsePhoto}}" style="width: 100%"></image>
<image src="{{list.cardTemplateUseDTO.picturesTemplatePictureUrl}}" style="width: 100%"></image>
</view>
</view>
<view class="card-name other-card">
@ -61,12 +61,12 @@
style="padding-bottom:{{(list.cardTemplateUseDTO.cardTemplateUseHeight / list.cardTemplateUseDTO.cardTemplateUseWidth) *100 +'%'}};">
<view class="card-img">
<view class="main" wx:if="{{list.cardTemplateUseTop == '1'}}">置顶</view>
<image src="{{list.cardTemplateUseDTO.cardTemplateUsePhoto}}" style="width: 100%"></image>
<image src="{{list.cardTemplateUseDTO.picturesTemplatePictureUrl}}" style="width: 100%"></image>
</view>
</view>
<view class="card-name-sm other-card">
<view style="display:flex;flex-direction:row;">
<image src="{{cardUrl+list.creatorIcon}}" style="width:64rpx;height:64rpx;border-radius:50%;"></image>
<image src="{{list.creatorIcon}}" style="width:64rpx;height:64rpx;border-radius:50%;"></image>
<text style="margin-left:10rpx;">{{list.creatorName}}</text>
</view>
<view>

24
pages/mine/otherCard/othercarddetail.js
View File

@ -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

651
pages/mine/otherCard/othercarddetail.wxml
View File

@ -1,263 +1,404 @@
<cu-custom id="head" isCustom="{{false}}" isBack="{{true}}" isIndex="{{false}}">
<view slot="content">{{nameTxt}}</view>
</cu-custom>
<view>
<view class="top-box">
<!-- 名片 -->
<view class="card-container"
style="padding-bottom:{{(cardInfo.cardTemplateUseHeight / cardInfo.cardTemplateUseWidth) *100 +'%'}};">
<view class="card"
style="padding-bottom:{{(cardInfo.cardTemplateUseHeight / cardInfo.cardTemplateUseWidth) *100 +'%'}};">
<!-- 背景图 -->
<image src="{{cardUrl}}{{cardInfo.cardTemplateUseBackgroundImage}}" alt="" class="card-bgImg"
wx:if="{{cardInfo.cardTemplateUseBackgroundImage}}"></image>
<!-- 文字 -->
<view class="area-box" wx:for="{{areaList}}" wx:key="index"
style="position:absolute;top: {{(item.templateAreaTop / cardInfo.cardTemplateUseHeight) * 100 + '%'}};left:{{(item.templateAreaLeft / cardInfo.cardTemplateUseWidth) * 100 + '%'}};color:{{item.templateAreaFontColor}};width:{{(item.templateAreaWidth / cardInfo.cardTemplateUseWidth) * 100 + '%'}};height:{{(item.templateAreaHeight / cardInfo.cardTemplateUseHeight) * 100 + '%'}};font-size:{{item.templateAreaFontSize}};font-style:{{item.templateAreaFontStyle}};font-weight:{{item.templateAreaFontBold}};text-align:{{item.templateAreaFontCenter}}"
wx:if="{{item.templateAreaServerLink == '1'}}">{{item.templateAreaFontValue}}</view>
<!-- 图片 -->
<view wx:for="{{areaList}}" data-cur="{{index}}" wx:key="index"
style="position:absolute;top: {{(item.templateAreaTop / cardInfo.cardTemplateUseHeight) * 100 + '%'}};left:{{(item.templateAreaLeft / cardInfo.cardTemplateUseWidth) * 100 + '%'}};color:{{item.templateAreaFontColor}};width:{{(item.templateAreaWidth / cardInfo.cardTemplateUseWidth) * 100 + '%'}};height:{{(item.templateAreaHeight / cardInfo.cardTemplateUseHeight) * 100 + '%'}}"
wx:if="{{item.templateAreaType != '1'}}">
<image src="{{cardUrl}}{{item.templateAreaFile}}" style="width: 100%;height:100%">
</image>
</view>
</view>
</view>
<view class="mid">
<button open-type="share" class="mid-box">
<image src="/images/share-icon.png"></image>
<view class="mid-box-text">分享名片</view>
</button>
<view class="mid-box" bindtap="includedCard">
<image src="/images/contact-icon.png"></image>
<view class="mid-box-text">加入卡包</view>
</view>
<view class="mid-box" bindtap="showBarCode">
<image src="/images/code-icon.png"></image>
<view class="mid-box-text">名片码</view>
</view>
</view>
<view class="mid-btn">
<view class="mid-btn-box" bindtap="makeCall">
<image src="/images/mid-btn-1.png"></image>
<view class="mid-btn-text">
<view class="text-top">电话</view>
<view class="text-bottom">{{phoneTxt}}</view>
</view>
</view>
<view class="mid-btn-box" bindtap="copyText" data-text="{{wechateTxt}}">
<image src="/images/mid-btn-2.png"></image>
<view class="mid-btn-text">
<view class="text-top">微信</view>
<view class="text-bottom">{{wechateTxt}}</view>
</view>
</view>
<view class="mid-btn-box" bindtap="copyText" data-text="{{emailTxt}}">
<image src="/images/mid-btn-3.png"></image>
<view class="mid-btn-text">
<view class="text-top">邮箱</view>
<view class="text-bottom">{{emailTxt}}</view>
</view>
</view>
<view class="mid-btn-box" bindtap="copyText" data-text="{{addressTxt}}">
<image src="/images/mid-btn-4.png"></image>
<view class="mid-btn-text">
<view class="text-top">地址</view>
<view class="text-bottom">{{addressTxt}}</view>
</view>
</view>
</view>
<view class="good">
<view class="good-avatar">
<view class="avatar-list" wx:for="{{browUserList}}" wx:key="index" wx:for-item="user"
style='transform:translateX({{-index*20}}rpx)'>
<image src="{{imgUrl}}{{user.creatorIcon}}" wx:if="{{user.creatorIcon}}"></image>
<image src="/images/ic_user_default.png" wx:if="{{!user.creatorIcon}}"></image>
</view>
</view>
<view class="good-click">
<view class="view-count">
<image src="/images/view-count.png"></image>
{{cardInfo.cardTemplateUseScansNumber}}
</view>
<view class="share-count">
<image src="/images/share-count.png"></image>
{{cardInfo.cardTemplateUseDispatchNumber}}
</view>
</view>
</view>
<cu-custom id="head" isCustom="{{false}}" isBack="{{false}}" isIndex="{{true}}" bind:show="showCardHistory">
<view slot="content">
<view>
{{nameTxt}}
<text class="cuIcon-triangledownfill"></text>
</view>
<view wx:if="{{dataList.length>0}}">
<!-- 栏目组 -->
<view wx:for="{{dataList}}" wx:key="index">
<view class="flex flex-direction margin-sm">
<!-- 栏目 -->
<view class="catelog-title" data-item="{{item}}" bindtap="showMore">
<view class="action">
<view class="title intro-title">
<text class="cuIcon-vipcard"></text>
<text> {{item.name}}</text>
</view>
</view>
<view class="action">
</view>
</view>
<view wx:for="{{item.list}}" wx:for-index="idx" wx:key="idx" wx:for-item="it"
class="padding-lef-sm padding-right-sm bg-white radius flex flex-direction" style="width:100%;">
<!-- 栏目数据 -->
<view wx:for="{{it.list}}" wx:for-index="i" wx:for-item="child" wx:key="i">
<!-- 具体数据 -->
<!-- 文本 -->
<view wx:if="{{child.dataType=='1'}}" class="align-center">
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
</view>
</view>
<view class="bg-white">
<view class="cu-form-group">
<view id="content"
class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
style="line-height:40rpx;">
{{child.value}}
</view>
</view>
</view>
</view>
<!-- 图片 -->
<view wx:if="{{child.dataType=='2'}}">
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
</view>
</view>
<view class="cu-form-group padding-sm">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" wx:for="{{child.valueList}}" wx:key="d" wx:for-item="photo"
catchtap="viewImg" data-url="{{photo.path}}">
<image src='{{photo.path}}' mode='scaleToFill'></image>
</view>
</view>
</view>
</view>
<!-- 视频 -->
<view wx:if="{{child.dataType=='4'}}">
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
</view>
</view>
<view class="cu-form-group margin-top-sm padding-sm"
style="border:1rpx solid #f9f9f9;border-radius:10rpx;">
<view class="grid col-{{count>3 ? count : 1}} grid-square flex-sub">
<view class="bg-img" wx:for="{{child.valueList}}" wx:for-index="d" wx:key="d"
wx:for-item="video" catchtap="viewVideo"
style="{{count > 3 ? '' :'height:280rpx;width:100%;padding-bottom:0px;'}}"
data-url="{{video.path}}">
<image style="width:100%;height:100%;" src='{{video.imgPath}}'
mode='scaleToFill'></image>
<view class="{{count > 3 ? 'play-box-arrow-pos':'play-box-arrow-flex'}}">
<image src="/images/ic_video_play.png" mode="scaleToFill"
style="{{count > 3 ? 'width:32px;height:32px':'height:64px;width:64px;'}}">
</image>
</view>
</view>
</view>
</view>
</view>
<!-- 音频 -->
<view wx:if="{{child.dataType=='3'}}" style="width:100%;">
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
</view>
</view>
<view class="cu-form-group padding-sm">
<view class="flex align-center shadow-box margin-top-xs" style="width:100%;"
wx:for="{{child.valueList}}" wx:for-index="a" wx:key="a" wx:for-item="audio">
<image src="/images/ic_user_default.png" mode="scaleToFill"
style="width:80rpx;height:80rpx;">
</image>
<view class="play-box">
<view class="flex justify-between align-center" style="width:80%;">
<text>{{audio.curDurationStr}}</text>
<slider class="flex-sub" bindchange="slider4change" min="{{0}}"
max="{{audio.duration}}" value="{{audio.curDuration}}"
backgroundColor="#cacaca" activeColor="#1296db" data-index="{{index}}"
data-idx="{{idx}}" data-i="{{i}}" data-item="{{audio}}" data-a="{{a}}"
block-size="14" block-color="#1296db" />
<text>{{audio.totalDurationStr}}</text>
</view>
<view class="flex justify-between" style="width:80%;">
<image src="/images/ic_audio_rewind.png" mode="scaleToFill"
data-index="{{index}}" data-idx="{{idx}}" data-a="{{a}}" data-i="{{i}}"
data-item="{{audio}}" catchtap="rewind">
</image>
<image
src="{{audio.isPlay ? '/images/ic_audio_playing.png':'/images/ic_audio_play.png'}}"
mode="scaleToFill" catchtap="play" data-index="{{index}}" data-i="{{i}}"
data-idx="{{idx}}" data-a="{{a}}" data-item="{{audio}}"></image>
<image src="/images/ic_audio_speed.png" mode="scaleToFill" catchtap="speed"
data-index="{{index}}" data-a="{{a}}" data-idx="{{idx}}" data-i="{{i}}"
data-item="{{audio}}"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 地图定位 -->
<view wx:if="{{child.dataType=='6'}}">
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
</view>
</view>
<view class="padding-sm">
<view wx:for="{{child.valueList}}" wx:key="mindex" wx:for-index="mindex" wx:for-item="m"
style="width:100%;" class="margin-top-xs">
<view class="flex justify-between">
<view>
</view>
<view></view>
</view>
<view style="border-radius:10rpx;overflow:hidden;margin-top:10rpx;">
<map style="width:100%;height:300rpx;" longitude="{{m.longitude}}"
latitude="{{m.latitude}}" scale="12" enable-scroll="{{false}}"
enable-zoom="{{false}}" enable-rotate="{{false}}" enable-traffic="{{false}}"
markers="{{[{latitude:m.latitude,longitude:m.longitude}]}}"></map>
</view>
</view>
</view>
</view>
<!-- 文本域 -->
<view wx:if="{{child.dataType == '7'}}">
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
</view>
</view>
<view class="bg-white">
<view class="cu-form-group">
<view id="content"
class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
style="line-height:40rpx;">
{{child.value}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</cu-custom>
<view style="background-color:#F7F7F7;">
<view class="top-box">
<!-- 名片 -->
<view class="card-container"
style="padding-bottom:{{(cardInfo.cardTemplateUseHeight / cardInfo.cardTemplateUseWidth) *100 +'%'}};">
<view class="card"
style="padding-bottom:{{(cardInfo.cardTemplateUseHeight / cardInfo.cardTemplateUseWidth) *100 +'%'}};">
<!-- 背景图 -->
<image src="{{cardUrl}}{{cardInfo.cardTemplateUseBackgroundImage}}" alt="" class="card-bgImg" mode="widthFix"
wx:if="{{cardInfo.cardTemplateUseBackgroundImage}}"></image>
<!-- 文字 -->
<view class="area-box" wx:for="{{areaList}}" wx:key="index"
style="position:absolute;top: {{(item.templateAreaTop / cardInfo.cardTemplateUseHeight) * 100 + '%'}};left:{{(item.templateAreaLeft / cardInfo.cardTemplateUseWidth) * 100 + '%'}};color:{{item.templateAreaFontColor}};width:{{(item.templateAreaWidth / cardInfo.cardTemplateUseWidth) * 100 + '%'}};height:{{(item.templateAreaHeight / cardInfo.cardTemplateUseHeight) * 100 + '%'}};font-size:{{item.templateAreaFontSize}};font-style:{{item.templateAreaFontStyle}};font-weight:{{item.templateAreaFontBold}};text-align:{{item.templateAreaFontCenter}}"
wx:if="{{item.templateAreaServerLink == '1'}}">{{item.templateAreaFontValue}}</view>
<!-- 图片 -->
<view wx:for="{{areaList}}" data-cur="{{index}}" wx:key="index"
style="position:absolute;top: {{(item.templateAreaTop / cardInfo.cardTemplateUseHeight) * 100 + '%'}};left:{{(item.templateAreaLeft / cardInfo.cardTemplateUseWidth) * 100 + '%'}};color:{{item.templateAreaFontColor}};width:{{(item.templateAreaWidth / cardInfo.cardTemplateUseWidth) * 100 + '%'}};height:{{(item.templateAreaHeight / cardInfo.cardTemplateUseHeight) * 100 + '%'}}"
wx:if="{{item.templateAreaServerLink != '1'}}">
<image src="{{cardUrl}}{{item.templateAreaFile}}" style="width: 100%;height:100%" mode="widthFix">
</image>
</view>
</view>
</view>
<!-- 功能区 -->
<view class="flex flex-direction justify-center align-center bg-white" style="width:100%;">
<view class="mid">
<button open-type="share" class="mid-box">
<view class="flex justify-between align-center" style="width:100%;">
<text style="text-align:center;line-height:30rpx;height:30rpx;font-size:28rpx;color:#CCC;">01/</text>
<image src="/images/ic_share_icon.png"></image>
</view>
<view class="mid-box-text margin-top-xs">分享名片</view>
</button>
<view class="mid-box" bindtap="includedCard">
<view class="flex justify-between align-center" style="width:100%;">
<text style="text-align:center;line-height:30rpx;height:30rpx;font-size:28rpx;color:#CCC;">02/</text>
<image src="/images/ic_phone_icon.png"></image>
</view>
<view class="mid-box-text margin-top-xs">加入卡包</view>
</view>
<view class="mid-box bg-yellow-yellow" bindtap="showBarCode">
<view class="flex justify-between align-center" style="width:100%;">
<text style="text-align:center;line-height:30rpx;height:30rpx;font-size:28rpx;">03/</text>
<image src="/images/ic_code_icon.png"></image>
</view>
<view class="mid-box-text-white margin-top-xs">名片码</view>
</view>
</view>
<view class="mid-btn">
<view class="mid-btn-box" bindtap="makeCall">
<view class="mid-btn-title">
<image class="image" src="/images/ic_call_phone_icon.png"></image>
<text>拨打电话</text>
</view>
<view style="flex:7;text-align: right;">{{phoneTxt}}</view>
</view>
<view class="mid-btn-box" bindtap="copyText" data-text="{{wechateTxt}}">
<view class="mid-btn-title">
<image class="image" src="/images/ic_wechart_icon.png"></image>
<text>添加微信</text>
</view>
<view style="flex:7;text-align: right;">{{wechateTxt}}</view>
</view>
<view class="mid-btn-box" bindtap="copyText" data-text="{{emailTxt}}">
<view class="mid-btn-title">
<image class="image" src="/images/ic_email_icon.png"></image>
<text>邮箱</text>
</view>
<view style="flex:7;text-align: right;">{{emailTxt}}</view>
</view>
<view class="mid-btn-box" bindtap="copyText" data-text="{{addressTxt}}">
<view class="mid-btn-title">
<image class="image" src="/images/ic_address_icon.png"></image>
<text>地址</text>
</view>
<view style="flex:7;text-align: right;">{{addressTxt}}</view>
</view>
</view>
<view class="good">
<view class="good-avatar">
<view class="avatar-list" wx:for="{{browUserList}}" wx:key="index" wx:for-item="user">
<image src="{{user.creatorIcon}}" wx:if="{{user.creatorIcon}}"></image>
<image src="/images/ic_user_default.png" wx:if="{{!user.creatorIcon}}"></image>
</view>
</view>
<view class="good-click">
<view class="view-count">
<image src="/images/view-count.png" mode="scaleToFill"></image>
<text class="margin-left-sm text-center"> {{cardInfo.cardTemplateUseScansNumber >999? '999+' :
cardInfo.cardTemplateUseScansNumber}}</text>
</view>
<view class="view-count-no">
<image src="/images/share_count.png" mode="scaleToFill"></image>
<text class="margin-left-sm text-center">{{cardInfo.cardTemplateUseDispatchNumber>999 ?
'999+':cardInfo.cardTemplateUseDispatchNumber}}</text>
</view>
</view>
</view>
</view>
<!-- 栏目数据 -->
<view wx:if="{{dataList.length>0}}" style="background-color:#F7F7F7;">
<!-- 栏目组 -->
<view wx:for="{{dataList}}" wx:key="index">
<view class="flex flex-direction margin-sm">
<!-- 栏目 -->
<view class="catelog-title margin-top-xs" data-item="{{item}}" data-idx="{{index}}"
data-userid="{{tempUserId}}" bindtap="showMore">
<view class="action">
<view class="title intro-title">
<image src="/images/ic_column_icon.png" mode="scaleToFill" style="width:32rpx;height:32rpx;"></image>
<text>{{item.name}}</text>
</view>
</view>
<view class="action text-gray" style="color:#999999;" wx:if="{{item.mode=='2'}}">
更多<text class="cuIcon-add"></text>
</view>
</view>
<view class="column-content">
<!-- 栏目样式用来展示音频 -->
<view wx:if="{{item.type=='dbc15b23-a1a3-4cb6-b7fa-9b01c9416454'}}" class="flex flex-direction"
style="width:100%;">
<view wx:for="{{item.list}}" wx:for-index="idx" wx:key="idx" wx:for-item="it" class="column-box-row">
<view wx:for="{{it.list}}" wx:for-index="i" wx:for-item="child" wx:key="i" bindtap="showDetail"
data-ctype="{{item.type}}" data-cid="{{item.cId}}" data-id="{{it.uid}}">
<!-- 文本 -->
<view wx:if="{{child.dataType=='1' && child.displayList}}" class="align-center">
<view class="bg-white">
<view class="cu-form-group">
<view id="content" class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
style="line-height:40rpx;">
<text class="cuIcon-title">
</text>
<text style="color:#333333;">{{child.value}}</text>
</view>
</view>
</view>
</view>
<!-- 音频 -->
<view wx:if="{{child.dataType=='3' && child.displayList}}" style="width:100%;">
<view class="cu-form-group padding-sm">
<view class="flex align-center margin-left-sm" style="width:100%;" wx:for="{{child.valueList}}"
wx:for-index="a" wx:key="a" wx:for-item="audio">
<image src="{{audio.isPlay? '/images/ic_pause_icon.png': '/images/ic_play_icon.png'}}"
mode="scaleToFill" style="width:64rpx;height:64rpx;margin-left:5rpx;" data-index="{{index}}"
data-i="{{i}}" data-idx="{{idx}}" data-a="{{a}}" data-item="{{audio}}" catchtap="play">
</image>
</view>
</view>
</view>
</view>
</view>
</view>
<view wx:else>
<view wx:for="{{item.list}}" wx:for-index="idx" wx:key="idx" wx:for-item="it" class="column-box">
<!-- 栏目数据 -->
<view wx:for="{{it.list}}" wx:for-index="i" wx:for-item="child" wx:key="i" bindtap="showDetail"
data-ctype="{{item.type}}" data-cid="{{item.cId}}" data-id="{{it.uid}}">
<!-- 栏目样式1或3 -->
<view>
<!-- 具体数据 -->
<!-- 文本 -->
<view wx:if="{{child.dataType=='1' && child.displayList}}" class="align-center">
<view class="bg-white">
<view class="cu-form-group">
<view id="content" class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
style="line-height:40rpx;">
<text class="{{item.type=='dda5007c-5fb7-48f2-8537-3cb8ea298242' ? 'cuIcon-title' : ''}}">
</text>
<text style="color:#333333;">{{child.value}}</text>
</view>
</view>
</view>
</view>
<!-- 图片 -->
<view wx:if="{{child.dataType=='2' && child.displayList}}">
<!-- 九宫格 -->
<view wx:if="{{child.dataMode == '95bef6e2-0ab8-442f-b53d-b1f18130bae1'}}"
class="cu-form-group padding-sm">
<view class="grid col-3 grid-square flex-sub">
<view class="bg-img" wx:for="{{child.valueList}}" wx:key="d" wx:for-item="photo"
catchtap="viewImg" data-url="{{photo.path}}">
<image src='{{photo.path}}' mode='scaleToFill'></image>
</view>
</view>
</view>
<!-- 左右滑动 -->
<view
wx:elif="{{child.dataMode=='bae3d6c1-8f6e-4e27-bba2-e42860758db7' || child.dataMode=='179441e3-5ad1-485b-b5af-421bdc383b5e'}}">
<swiper style="width:100%;height:400rpx;margin-top:20rpx;" indicator-dots="{{true}}"
autoplay="{{child.dataMode=='179441e3-5ad1-485b-b5af-421bdc383b5e'}}">
<block wx:for="{{child.valueList}}" wx:key="pIndex" wx:for-index="pIndex" wx:for-item="photo">
<swiper-item style="width:100%;">
<image style="width:100%;border-radius:20rpx;height:400rpx;" src="{{photo.path}}"
mode="scaleToFill">
</image>
</swiper-item>
</block>
</swiper>
</view>
<!-- 上下 -->
<view wx:elif="{{child.dataMode=='121133b0-3596-46f4-a35f-7aaae79cf47a'}}">
<block wx:for="{{child.valueList}}" wx:key="pIndex" wx:for-index="pIndex" wx:for-item="photo">
<image style="width:100%;border-radius:20rpx;margin-top:20rpx;" src="{{photo.path}}"
mode="widthFix">
</image>
</block>
</view>
</view>
<!-- 视频 -->
<view wx:if="{{child.dataType=='4' && child.displayList}}">
<view class="cu-form-group margin-top-sm padding-sm"
style="border:1rpx solid #f9f9f9;border-radius:10rpx;">
<view class="grid col-{{count>3 ? count : 1}} grid-square flex-sub">
<view class="{{count >3 ?'' : 'movie-item'}} bg-img" wx:for="{{child.valueList}}"
wx:for-index="d" wx:key="d" wx:for-item="video" catchtap="viewVideo"
data-url="{{video.path}}">
<image style="width:100%;height:100%;" src='{{video.imgPath}}' mode='scaleToFill'></image>
<view class="{{count > 3 ? 'play-box-arrow-pos':'play-box-arrow-flex'}}">
<image src="/images/ic_video_play.png" mode="scaleToFill"
class="{{count>3? 'image-32' :'image-64'}}"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 音频 -->
<view wx:if="{{child.dataType=='3' && child.displayList}}" style="width:100%;">
<view class="cu-form-group padding-sm">
<view class="flex align-center shadow-box margin-top-xs" style="width:100%;"
wx:for="{{child.valueList}}" wx:for-index="a" wx:key="a" wx:for-item="audio">
<image src="/images/ic_user_default.png" mode="scaleToFill" style="width:80rpx;height:80rpx;">
</image>
<view class="play-box">
<view class="flex justify-between align-center" style="width:80%;">
<text>{{audio.curDurationStr}}</text>
<slider class="flex-sub" bindchange="slider4change" min="{{0}}" max="{{audio.duration}}"
value="{{audio.curDuration}}" backgroundColor="#cacaca" activeColor="#1296db"
data-index="{{index}}" data-idx="{{idx}}" data-i="{{i}}" data-item="{{audio}}"
data-a="{{a}}" block-size="14" block-color="#1296db" />
<text>{{audio.totalDurationStr}}</text>
</view>
<view class="flex justify-between" style="width:80%;">
<image src="/images/ic_audio_rewind.png" mode="scaleToFill" data-index="{{index}}"
data-idx="{{idx}}" data-a="{{a}}" data-i="{{i}}" data-item="{{audio}}"
catchtap="rewind">
</image>
<image src="{{audio.isPlay ? '/images/ic_audio_playing.png':'/images/ic_audio_play.png'}}"
mode="scaleToFill" catchtap="play" data-index="{{index}}" data-i="{{i}}"
data-idx="{{idx}}" data-a="{{a}}" data-item="{{audio}}"></image>
<image src="/images/ic_audio_speed.png" mode="scaleToFill" catchtap="speed"
data-index="{{index}}" data-a="{{a}}" data-idx="{{idx}}" data-i="{{i}}"
data-item="{{audio}}"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 地图定位 -->
<view wx:if="{{child.dataType=='6' && child.displayList}}">
<view class="padding-sm">
<view wx:for="{{child.valueList}}" wx:key="mindex" wx:for-index="mindex" wx:for-item="m"
style="width:100%;" class="margin-top-xs">
<view class="flex justify-between">
<view>
</view>
<view></view>
</view>
<view style="border-radius:10rpx;overflow:hidden;margin-top:10rpx;">
<map style="width:100%;height:300rpx;" longitude="{{m.longitude}}" latitude="{{m.latitude}}"
scale="12" enable-scroll="{{false}}" enable-zoom="{{false}}" enable-rotate="{{false}}"
enable-traffic="{{false}}"
markers="{{[{latitude:m.latitude,longitude:m.longitude}]}}"></map>
</view>
</view>
</view>
</view>
<!-- 文本域 -->
<view wx:if="{{child.dataType == '7' && child.displayList}}">
<view class="bg-white">
<view class="cu-form-group">
<view id="content" class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
style="line-height:40rpx;color:#333333">
<text space="emsp" decode="true">&emsp;&emsp;{{child.value}}</text>
</view>
</view>
</view>
</view>
<!-- 单选 -->
<view wx:if="{{child.dataType == '8' && child.displayList}}">
<view class="flex" style="flex-direction:row;">
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-vipcard"></text> <text class="text-black">{{child.comment}}:</text><text
class="margin-left-sm">{{child.selValue}}</text>
</view>
</view>
</view>
</view>
<!-- 多选 -->
<view wx:if="{{child.dataType == '9' && child.displayList}}">
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
</view>
</view>
<view class="cu-capsule radius" wx:for="{{child.dictionariesList}}" wx:key="ids"
wx:for-index="ids" wx:for-item="ss">
<view wx:if="{{ss.isSel}}" class="cu-tag bg-blue radius padding-left-sm padding-right-sm">
{{ss.dataName}}
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 评论 收藏 点赞 -->
<!-- <view class="func-box">
<view class="line-gray-ssm">
</view>
<view class="func-items">
<view class="func-item">
<image src="/images/share_count.png" mode="scaleToFill"></image>
<text>转发</text>
</view>
<view class="func-item">
<image src="/images/ic_collect_icon.png" mode="scaleToFill"></image>
<text>收藏</text>
</view>
<view class="func-item">
<image src="/images/ic_comment_icon.png" mode="scaleToFill"></image>
<text>10</text>
</view>
<view class="func-item">
<image src="/images/ic_unfavour.png" mode="scaleToFill"></image>
<text>12</text>
</view>
</view>
</view> -->
</view>
</view>
</view>
</view>
</view>
<view wx:else style="margin-top:200rpx;width:100%;">
<van-empty description="暂无数据" image="/images/ic_empty_data.png" />
<van-empty description="暂无数据" />
</view>
</view>
<!-- 创建名片 -->
<view class="creat-card" bindtap="goList">
<image src="/images/create-btn.png"></image>
</view>
</view>
<view class="bar-code" wx:if="{{isShowBarCode}}" bindtap="hideBarCode">
<view class="content">
<view class="code-title">一段话</view>
<image src="{{cardUrl}}{{cardInfo.cardTemplateUseBarcode}}"></image>
</view>
<view class="code-txt">
有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
</view>
</view>
</view>
<!-- 选择展示的名片 -->
<van-action-sheet show="{{ isShowCard }}" title="请选择" bind:close="onHide" style="padding-bottom:180rpx;">
<view class="flex flex-direction align-center" style="margin-top:10rpx;padding-bottom:30rpx;">
<scroll-view style="height:320rpx;max-height:320rpx;padding:0rpx 20rpx;align-items:center;" scroll-y>
<!-- 我的 -->
<view style="width:100%;flex-direction:center;" class="flex align-center" bindtap="changeCard">
<view class="flex align-center justify-center bg-yellow-yellow"
style="width:100%;height:160rpx;border-radius:10rpx;margin-right:10rpx;margin-left:10rpx;">
<text style="font-size:32rpx;color:#FFFFFF;">我的</text>
</view>
</view>
<!-- 浏览历史 -->
<view wx:for="{{otherCardList}}" wx:key="index" wx:for-item="item" class="cu-list menu-avatar solid"
style="margin-left:10rpx;margin-right:10rpx;margin-top:20rpx;" data-item="{{item}}" bindtap="changeCard">
<view class="cu-item bg-yellow-yellow" style="width:100%;height:160rpx;border-radius:10rpx;">
<view class="cu-avatar radius xl round bg-yellow-yellow">
<text style="font-size:14px;">{{item.name}}</text>
</view>
<view class="content" style="width:100%;">
<view class="text-depblack">
<text class="text-cut text-white">电话:{{item.phone}}</text>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut text-white">公司:{{item.department}}</text>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut text-white">地址:{{item.address}}</text>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</van-action-sheet>

1236
pages/mine/otherCard/othercarddetail.wxss
View File

File diff suppressed because it is too large Load Diff

381
vant/dist/cropper/index.js vendored Normal file
View File

@ -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')
}
}
})

3
vant/dist/cropper/index.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"component": true
}

44
vant/dist/cropper/index.wxml vendored Normal file
View File

@ -0,0 +1,44 @@
<view class="wx-cropper-info" wx:if="{{isShowCropper}}">
<view class='cropper-content'>
<!-- {{cropperInitH}}rpx -->
<view class="wx-corpper" style="width:{{cropperInitW}}rpx;height:85%;background:#000;display: flex;justify-content: center;align-items: center;">
<!-- left:{{cropperL}}rpx;top:{{cropperT}}rpx -->
<view class="wx-corpper-content" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;">
<image class="img" src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
<view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing"
bindtouchend="contentTouchEnd" style="left:{{cutL}}rpx;top:{{cutT}}rpx;right:{{cutR}}rpx;bottom:{{cutB}}rpx">
<view class="wx-cropper-view-box">
<view class="wx-cropper-dashed-h"></view>
<view class="wx-cropper-dashed-v"></view>
<view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-tr" data-drag="topTight"></view>
<view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart"
catchtouchmove="dragMove" catchtouchend="dragEnd"></view>
<view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
</view>
</view>
</view>
</view>
</view>
<view class='cropper-config'>
<button type="primary reverse" class="btn" bindtap="cancelCropper" style='margin-top: 30rpx;'> 取消 </button>
<button type="primary" class="cropper-confirm btn" bindtap="confirmCropper" style='margin-top: 30rpx;'> 确认 </button>
</view>
<canvas wx:if="{{!isCircleCrop}}" canvas-id="cropper" style="position:absolute;border: 1px solid red; width:{{qualityWidth}}px;height:{{qualityWidth/innerAspectRadio}}px;top:-9999px;left:-9999px;"></canvas>
<canvas wx:else canvas-id="cropper" style="position:absolute;border: 1px solid red; width:{{canvasW}}px;height:{{canvasH}}px;top:-9999px;left:-9999px;"></canvas>
</view>

296
vant/dist/cropper/index.wxss vendored Normal file
View File

@ -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;
}