Commit 0ae767a6 authored by wangxuelai's avatar wangxuelai

''

parent a77f0c1d
import {
wxChooseImage,
wxUploadFile
} from '../../../utilities/wxApi.js';
import {
bOssAccess
} from '../../../service/business/common.js';
import {
goodsAdd,
goodsUpdate,
goodsShow
} from '../../../service/business/integral.js';
import {
getRandomFilename,
imagify,
} from '../../../utilities/index.js';
var app = getApp();
Page({
......@@ -5,18 +21,64 @@ Page({
* 页面的初始数据
*/
data: {
showCropper: false,
imageRoot: app.globalData.imageRoot,
imageVersion: app.globalData.imageVersion,
localImageRoot: '../../../images/',
sid: 0,
gid: 0, // goodsid卡券id
params: {
cover: '',
banner:[],
title: '',
type: 2,
status: 1,
price: 100,
inventory: 100,
remark: ''
},
cropperOpt: {
limit_move: true,
disable_rotate: true,
width: 300, // 画布宽度
height: 300, // 画布高度
},
swiperIndex: 0,
uploadType: 'mainImg', // mainImg主图 swiperImg 轮播图
cropperSrc: '',
containerheight: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const {sid, gid} = options;
this.setData({
sid,
gid
})
this.goodsShow();
//开始裁剪
// this.setData({
// src:"https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-05-23/33bffe1d32862648b4341d0ac90d554a.png",
// });
},
cropperload(e){
console.log("cropper初始化完成");
},
cancelcropper () {
this.setData({
showCropper: false,
cropperSrc: '',
containerheight: ''
})
},
surecropper () {
this.cropper = this.selectComponent("#image-cropper");
this.cropper._click();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
......@@ -64,5 +126,271 @@ Page({
*/
onShareAppMessage: function () {
},
goodsShow () {
if (this.data.gid == 0) {
return;
}
goodsShow({
school_id: this.data.sid,
id: this.data.gid
}).then((res) => {
const {code, data} = res;
if (code == 200) {
this.setData({
params: {
cover: data.cover,
banner: JSON.parse(data.banner),
title: data.title,
type: 1,
status: data.status,
price: data.price,
inventory: data.inventory,
remark: data.remark,
},
})
}
})
},
goPre () {
if (this.data.swiperIndex == (this.data.params.banner.length - 1)) {
return
}
let swiperIndex = this.data.swiperIndex + 1;
this.setData({
swiperIndex
})
},
goBack () {
if (this.data.swiperIndex == 0) {
return;
}
let swiperIndex = this.data.swiperIndex - 1;
this.setData({
swiperIndex
})
},
clickcut (e) {
let filepath = e.detail.url;
this.setData({
showCropper: false,
cropperSrc: '',
containerheight: ''
})
let filename = '';
bOssAccess({
school_id: this.data.sid
}).then((acc) => {
return acc.data;
}).then((access) => {
filename = `${access.dir}${getRandomFilename(filepath)}`;
wx.showLoading({
title: '图片上传中'
})
return wxUploadFile({
url: access.host,
formData: {
key: filename,
policy: access.policy,
OSSAccessKeyId: access.accessid,
signature: access.signature,
callback: access.callback,
success_action_status: '200'
},
filePath: filepath,
name: 'file',
})
}).then((res) => {
const {data} = res;
if (data == '{"status":"ok"}') {
wx.showToast({
title: '上传成功'
})
this.setData({
showCropper: false,
})
this.mycropper = null;
this.setData({
'params.cover': filename,
})
} else {
wx.hideLoading();
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
this.setData({
containerheight: ''
})
}
}).catch((err) => {
this.setData({
containerheight: ''
})
})
},
getCropperImage () {
this.mycropper.getCropperImage((filepath) => {
})
},
loadimage(){
},
proMainImgUpload (e) {
let access = {};
let filename = '';
const {type} = e.currentTarget.dataset;
bOssAccess({
school_id: this.data.sid
}).then((acc) => {
access = acc.data;
return wxChooseImage({})
}).then((res) => {
const {tempFiles} = res;
filename = `${access.dir}${getRandomFilename(tempFiles[0].path)}`;
return wxUploadFile({
url: access.host,
formData: {
key: filename,
policy: access.policy,
OSSAccessKeyId: access.accessid,
signature: access.signature,
callback: access.callback,
success_action_status: '200'
},
filePath: tempFiles[0].path,
name: 'file',
})
}).then((res) => {
const {data} = res;
if (data == '{"status":"ok"}') {
this.setData({
'uploadType': type,
cropperSrc: imagify(filename, 'image/resize,w_1280/format,jpg'),
'cropperOpt.width': 300,
'cropperOpt.height': 300,
showCropper: true,
containerheight: '100vh'
})
} else {
wx.hideLoading();
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
this.setData({
containerheight: ''
})
}
}).catch((err) => {
this.setData({
containerheight: ''
})
});
},
titleInput(e) {
const {
value
} = e.detail;
this.setData({
'params.title': value.length > 25 ? value.substr(0, 25) : value
})
},
remarkInput(e) {
const {
value
} = e.detail;
this.setData({
'params.remark': value.length > 100 ? value.substr(0, 100) : value
})
},
priceInput (e) {
const {
value
} = e.detail;
this.setData({
'params.price': value
})
},
inventoryInput (e) {
const {
value
} = e.detail;
this.setData({
'params.inventory': value
})
},
publish () {
if (this.data.params.cover == '') {
wx.showToast({
title: '请上传卡券封面',
icon: 'none'
})
return
}
if (this.data.params.title == '') {
wx.showToast({
title: '卡券标题不能为空',
icon: 'none'
})
return
}
if (this.data.params.price === '' || this.data.params.price === 0) {
wx.showToast({
title: '兑换卡券所需积分不能为空',
icon: 'none'
})
return
}
if (this.data.params.price === 0) {
wx.showToast({
title: '兑换卡券所需积分不能为0',
icon: 'none'
})
return
}
if (this.data.params.inventory === '') {
wx.showToast({
title: '卡券库存不能为空',
icon: 'none'
})
return
}
if (this.data.params.remark.trim() == '') {
wx.showToast({
title: '请输入卡券说明',
icon: 'none'
})
return
}
let ajax = null;
if (this.data.gid != 0) {
ajax = goodsUpdate(Object.assign({}, this.data.params, {
banner: JSON.stringify(this.data.params.banner),
school_id: this.data.sid,
id: this.data.gid,
}))
} else {
ajax = goodsAdd(Object.assign({}, this.data.params, {
banner: JSON.stringify(this.data.params.banner),
school_id: this.data.sid
}))
}
ajax.then((res) => {
const {code, data} = res;
if (code == 200) {
wx.showToast({
title: '保存成功'
})
}
}).catch(() => {
wx.showToast({
title: '保存失败',
icon: 'none'
})
})
}
})
\ No newline at end of file
{
"navigationBarTitleText": "添加卡券",
"usingComponents": {}
"usingComponents": {
"imagecropper": "../../../components/imagecropper"
}
}
\ No newline at end of file
<view class="container">
<import src="../../../wecropper/we-cropper.wxml"/>
<wxs src="../../../filter/index.wxs" module="filter" />
<view class="container" style="height: {{containerheight}}; overflow: hidden;">
<view class="cropperdialog" hover-class="none" hover-stop-propagation="false" wx:if="{{showCropper}}">
<imagecropper
id="image-cropper"
limit_move="{{cropperOpt.limit_move}}"
disable_rotate="{{cropperOpt.disable_rotate}}"
width="{{cropperOpt.width}}"
height="{{cropperOpt.height}}"
imgSrc="{{cropperSrc}}"
bindload="cropperload"
bindimageload="loadimage"
bindtapcut="clickcut"
></imagecropper>
<view class="cropperoperate" hover-class="none" hover-stop-propagation="false">
<view class="" hover-class="none" hover-stop-propagation="false" bindtap="cancelcropper">取消</view>
<view class="" hover-class="none" hover-stop-propagation="false" bindtap="surecropper">确认</view>
</view>
</view>
<view class="scoreedit-container" hover-class="none" hover-stop-propagation="false">
<view class="title" hover-class="none" hover-stop-propagation="false">商品封面</view>
<!-- <view class="title" hover-class="none" hover-stop-propagation="false">卡券封面</view> -->
<view class="uploadcontent" hover-class="none" hover-stop-propagation="false">
<view class="uploadbox" hover-class="none" hover-stop-propagation="false">
<image class="mainimg" src="https://wx.qlogo.cn/mmopen/vi_32/GY0ZvN3sdDsic3MyuFVfmnu9buGSH0EfMhjD8wsH9QwtcQQYQCkAew6xwgPqsmmEbc0456rY7o5gPiah5rrL4ySA/132" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
<view class="uploadiconbox" hover-class="none" hover-stop-propagation="false">
<image class="uploadicon" src="{{localImageRoot}}2b/scoremgt/uploadicon.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
<image class="mainimg" wx:if="{{params.cover != ''}}" src="{{filter.imagify(params.cover)}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
<view class="uploadiconbox" hover-class="none" hover-stop-propagation="false" bindtap="proMainImgUpload" data-type="mainImg">
<image class="uploadicon" src="{{localImageRoot}}2b/scoremgt/uploadicon.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
<text class="addimgtext" selectable="false" space="false" decode="false">添加图片</text>
</view>
<image class="del-icon" src="{{imageRoot}}2b/common/reddelicon.png?{{imageVersion}}" lazy-load="false" binderror="" bindload=""></image>
</view>
<view class="uploadtext" hover-class="none" hover-stop-propagation="false">建议尺寸:310*270 最多上传1张</view>
</view>
<view class="title" hover-class="none" hover-stop-propagation="false">奖品标题</view>
<view class="title" hover-class="none" hover-stop-propagation="false">卡券标题</view>
<view class="prizetitle" hover-class="none" hover-stop-propagation="false">
<textarea placeholder="请输入奖品标题"></textarea>
<view class="textcount" hover-class="none" hover-stop-propagation="false">1/25</view>
<textarea placeholder="请输入奖品标题" value="{{params.title}}" bindinput="titleInput"></textarea>
<view class="textcount" hover-class="none" hover-stop-propagation="false">{{params.title.length}}/25</view>
</view>
<view class="title" hover-class="none" hover-stop-propagation="false">积分价格</view>
<view class="prostatic" hover-class="none" hover-stop-propagation="false">
<text class="text" selectable="false" space="false" decode="false">兑换该商品需要</text>
<input type="number" class="staticinput" value="2000" />
<text class="text" selectable="false" space="false" decode="false">兑换该卡券需要</text>
<input type="number" class="staticinput" value="{{params.price}}" bindinput="priceInput"/>
<text class="text" selectable="false" space="false" decode="false">积分</text>
</view>
<view class="title" hover-class="none" hover-stop-propagation="false">库存</view>
<view class="prostatic" hover-class="none" hover-stop-propagation="false">
<text class="text" selectable="false" space="false" decode="false">该奖品数量</text>
<input type="number" class="staticinput" value="2000"/>
<text class="text" selectable="false" space="false" decode="false">该卡券数量</text>
<input type="number" class="staticinput" value="{{params.inventory}}" bindinput="inventoryInput"/>
<text class="text" selectable="false" space="false" decode="false">件</text>
</view>
<view class="title" hover-class="none" hover-stop-propagation="false">其他说明</view>
<view class="prizetitle prizedesc" hover-class="none" hover-stop-propagation="false">
<textarea auto-height placeholder="说明一些特殊情况:例如 兑奖规则,奖品情况等"></textarea>
<textarea auto-height placeholder="说明一些特殊情况:例如 兑奖规则,奖品情况等" bindinput="remarkInput" value="{{params.remark}}"></textarea>
<view class="textcount" hover-class="none" hover-stop-propagation="false">1/100</view>
</view>
</view>
<view class="submitbtn" hover-class="none" hover-stop-propagation="false">上架</view>
<view class="submitbtn" hover-class="none" hover-stop-propagation="false" bindtap="publish">上架</view>
</view>
\ No newline at end of file
......@@ -17,7 +17,7 @@
}
.uploadbox {
width: 200rpx;
height: 174rpx;
height: 200rpx;
border-radius: 10rpx;
background-color: #F7F7F9;
overflow: hidden;
......@@ -30,7 +30,7 @@
}
.mainimg {
width: 200rpx;
height: 174rpx;
height: 200rpx;
position: relative;
z-index: 2;
}
......@@ -58,14 +58,14 @@
line-height: 1;
}
.del-icon {
box-sizing: content-box;
padding: 0 0 20rpx 20rpx;
width: 40rpx;
height: 40rpx;
position: absolute;
z-index: 3;
z-index: 10;
top: 0;
right: 0;
box-sizing: content-box;
padding: 0 0 20rpx 20rpx;
}
.prizetitle {
margin-bottom: 70rpx;
......@@ -124,4 +124,81 @@
/* padding: 0 70rpx; */
width: 256rpx;
margin: 220rpx auto 30rpx;
}
.proimages {
margin-bottom: 24rpx;
position: relative;
}
.proimages .proswiperimg{
width: 100%;
height: 290rpx;
}
.swiperpagination {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 36rpx;
}
.swiperpagination .dot {
width: 10rpx;
height: 10rpx;
border-radius: 5rpx;
background-color: #CDCDCD;
margin: 0 7rpx;
transition: width 0.1s;
}
.swiperpagination .dot.active {
width: 22rpx;
background-color: #65B8F4;
}
.advicesize {
color: #fff;
margin-top: 50rpx;
}
.proimages .uploadiconbox {
background-color:rgba(0,0,0,0.5);
}
.proimages .uploadiconbox .addimgtext {
color: #fff;
}
.arrowcircleleftbox {
position: absolute;
left: 0;
top: 0;
z-index: 5;
display: flex;
align-items: center;
padding: 0 26rpx;
height: 100%;
}
.arrowcirclerightbox {
position: absolute;
right: 0;
top: 0;
z-index: 5;
display: flex;
align-items: center;
padding: 0 26rpx;
height: 100%;
}
.arrowcircleleft {
width: 45rpx;
height: 45rpx;
}
.arrowcircleright {
width: 45rpx;
height: 45rpx;
}
.cropperoperate {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
z-index: 400;
bottom: 0;
left: 0;
width: 100%;
color: #fff;
height: 200rpx;
}
\ No newline at end of file
import {
wxChooseImage,
wxUploadFile
} from '../../../utilities/wxApi.js';
import {
bOssAccess
} from '../../../service/business/common.js';
import {
goodsAdd,
goodsUpdate,
goodsShow
} from '../../../service/business/integral.js';
import {
getRandomFilename,
imagify,
} from '../../../utilities/index.js';
var app = getApp();
Page({
......@@ -5,18 +21,64 @@ Page({
* 页面的初始数据
*/
data: {
showCropper: false,
imageRoot: app.globalData.imageRoot,
imageVersion: app.globalData.imageVersion,
localImageRoot: '../../../images/',
sid: 0,
gid: 0, // goodsid商品id
params: {
cover: '',
banner:[],
title: '',
type: 1,
status: 1,
price: 100,
inventory: 100,
remark: ''
},
cropperOpt: {
limit_move: true,
disable_rotate: true,
width: 310, // 画布宽度
height: 270, // 画布高度
},
swiperIndex: 0,
uploadType: 'mainImg', // mainImg主图 swiperImg 轮播图
cropperSrc: '',
containerheight: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const {sid, gid} = options;
this.setData({
sid,
gid
})
this.goodsShow();
//开始裁剪
// this.setData({
// src:"https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-05-23/33bffe1d32862648b4341d0ac90d554a.png",
// });
},
cropperload(e){
console.log("cropper初始化完成");
},
cancelcropper () {
this.setData({
showCropper: false,
cropperSrc: '',
containerheight: ''
})
},
surecropper () {
this.cropper = this.selectComponent("#image-cropper");
this.cropper._click();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
......@@ -64,5 +126,297 @@ Page({
*/
onShareAppMessage: function () {
},
goodsShow () {
if (this.data.gid == 0) {
return;
}
goodsShow({
school_id: this.data.sid,
id: this.data.gid
}).then((res) => {
const {code, data} = res;
if (code == 200) {
this.setData({
params: {
cover: data.cover,
banner: JSON.parse(data.banner),
title: data.title,
type: 1,
status: data.status,
price: data.price,
inventory: data.inventory,
remark: data.remark,
},
})
}
})
},
goPre () {
if (this.data.swiperIndex == (this.data.params.banner.length - 1)) {
return
}
let swiperIndex = this.data.swiperIndex + 1;
this.setData({
swiperIndex
})
},
goBack () {
if (this.data.swiperIndex == 0) {
return;
}
let swiperIndex = this.data.swiperIndex - 1;
this.setData({
swiperIndex
})
},
clickcut (e) {
let filepath = e.detail.url;
this.setData({
showCropper: false,
cropperSrc: '',
containerheight: ''
})
let filename = '';
bOssAccess({
school_id: this.data.sid
}).then((acc) => {
return acc.data;
}).then((access) => {
filename = `${access.dir}${getRandomFilename(filepath)}`;
wx.showLoading({
title: '图片上传中'
})
return wxUploadFile({
url: access.host,
formData: {
key: filename,
policy: access.policy,
OSSAccessKeyId: access.accessid,
signature: access.signature,
callback: access.callback,
success_action_status: '200'
},
filePath: filepath,
name: 'file',
})
}).then((res) => {
const {data} = res;
if (data == '{"status":"ok"}') {
wx.showToast({
title: '上传成功'
})
this.setData({
showCropper: false,
})
this.mycropper = null;
if (this.data.uploadType == 'mainImg') {
this.setData({
'params.cover': filename,
})
} else if (this.data.uploadType == 'swiperImg') {
let banner = this.data.params.banner;
banner.push(filename);
this.setData({
'params.banner': banner
})
}
} else {
wx.hideLoading();
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
this.setData({
containerheight: ''
})
}
}).catch((err) => {
this.setData({
containerheight: ''
})
})
},
getCropperImage () {
this.mycropper.getCropperImage((filepath) => {
})
},
loadimage(){
},
proMainImgUpload (e) {
let access = {};
let filename = '';
const {type} = e.currentTarget.dataset;
bOssAccess({
school_id: this.data.sid
}).then((acc) => {
access = acc.data;
return wxChooseImage({})
}).then((res) => {
const {tempFiles} = res;
filename = `${access.dir}${getRandomFilename(tempFiles[0].path)}`;
return wxUploadFile({
url: access.host,
formData: {
key: filename,
policy: access.policy,
OSSAccessKeyId: access.accessid,
signature: access.signature,
callback: access.callback,
success_action_status: '200'
},
filePath: tempFiles[0].path,
name: 'file',
})
}).then((res) => {
const {data} = res;
if (data == '{"status":"ok"}') {
if (type == 'mainImg') {
this.setData({
'uploadType': type,
cropperSrc: imagify(filename, 'image/resize,w_1280/format,jpg'),
'cropperOpt.width': 310,
'cropperOpt.height': 270,
showCropper: true,
containerheight: '100vh'
})
} else if (type == 'swiperImg') {
this.setData({
'uploadType': type,
cropperSrc: imagify(filename, 'image/resize,w_1280/format,jpg'),
'cropperOpt.width': 333,
'cropperOpt.height': 138,
showCropper: true,
containerheight: '100vh'
})
}
} else {
wx.hideLoading();
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
this.setData({
containerheight: ''
})
}
}).catch((err) => {
this.setData({
containerheight: ''
})
});
},
titleInput(e) {
const {
value
} = e.detail;
this.setData({
'params.title': value.length > 25 ? value.substr(0, 25) : value
})
},
remarkInput(e) {
const {
value
} = e.detail;
this.setData({
'params.remark': value.length > 100 ? value.substr(0, 100) : value
})
},
priceInput (e) {
const {
value
} = e.detail;
this.setData({
'params.price': value
})
},
inventoryInput (e) {
const {
value
} = e.detail;
this.setData({
'params.inventory': value
})
},
publish () {
if (this.data.params.cover == '') {
wx.showToast({
title: '请上传商品封面',
icon: 'none'
})
return
}
if (this.data.params.banner.length == 0) {
wx.showToast({
title: '请上传商品详情图',
icon: 'none'
})
return
}
if (this.data.params.title == '') {
wx.showToast({
title: '商品标题不能为空',
icon: 'none'
})
return
}
if (this.data.params.price === '' || this.data.params.price === 0) {
wx.showToast({
title: '兑换商品所需积分不能为空',
icon: 'none'
})
return
}
if (this.data.params.price === 0) {
wx.showToast({
title: '兑换商品所需积分不能为0',
icon: 'none'
})
return
}
if (this.data.params.inventory === '') {
wx.showToast({
title: '商品库存不能为空',
icon: 'none'
})
return
}
if (this.data.params.remark.trim() == '') {
wx.showToast({
title: '请输入商品说明',
icon: 'none'
})
return
}
let ajax = null;
if (this.data.gid != 0) {
ajax = goodsUpdate(Object.assign({}, this.data.params, {
banner: JSON.stringify(this.data.params.banner),
school_id: this.data.sid,
id: this.data.gid,
}))
} else {
ajax = goodsAdd(Object.assign({}, this.data.params, {
banner: JSON.stringify(this.data.params.banner),
school_id: this.data.sid
}))
}
ajax.then((res) => {
const {code, data} = res;
if (code == 200) {
wx.showToast({
title: '保存成功'
})
}
}).catch(() => {
wx.showToast({
title: '保存失败',
icon: 'none'
})
})
}
})
\ No newline at end of file
{
"navigationBarTitleText": "添加商品",
"usingComponents": {}
"usingComponents": {
"imagecropper": "../../../components/imagecropper"
}
}
\ No newline at end of file
<view class="container">
<import src="../../../wecropper/we-cropper.wxml"/>
<wxs src="../../../filter/index.wxs" module="filter" />
<view class="container" style="height: {{containerheight}}; overflow: hidden;">
<view class="cropperdialog" hover-class="none" hover-stop-propagation="false" wx:if="{{showCropper}}">
<imagecropper
id="image-cropper"
limit_move="{{cropperOpt.limit_move}}"
disable_rotate="{{cropperOpt.disable_rotate}}"
width="{{cropperOpt.width}}"
height="{{cropperOpt.height}}"
imgSrc="{{cropperSrc}}"
bindload="cropperload"
bindimageload="loadimage"
bindtapcut="clickcut"
></imagecropper>
<view class="cropperoperate" hover-class="none" hover-stop-propagation="false">
<view class="" hover-class="none" hover-stop-propagation="false" bindtap="cancelcropper">取消</view>
<view class="" hover-class="none" hover-stop-propagation="false" bindtap="surecropper">确认</view>
</view>
</view>
<view class="scoreedit-container" hover-class="none" hover-stop-propagation="false">
<view class="title" hover-class="none" hover-stop-propagation="false">商品封面</view>
<view class="uploadcontent" hover-class="none" hover-stop-propagation="false">
<view class="uploadbox" hover-class="none" hover-stop-propagation="false">
<image class="mainimg" src="https://wx.qlogo.cn/mmopen/vi_32/GY0ZvN3sdDsic3MyuFVfmnu9buGSH0EfMhjD8wsH9QwtcQQYQCkAew6xwgPqsmmEbc0456rY7o5gPiah5rrL4ySA/132" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
<view class="uploadiconbox" hover-class="none" hover-stop-propagation="false">
<image class="mainimg" wx:if="{{params.cover != ''}}" src="{{filter.imagify(params.cover)}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
<view class="uploadiconbox" hover-class="none" hover-stop-propagation="false" bindtap="proMainImgUpload" data-type="mainImg">
<image class="uploadicon" src="{{localImageRoot}}2b/scoremgt/uploadicon.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
<text class="addimgtext" selectable="false" space="false" decode="false">添加图片</text>
</view>
......@@ -14,27 +33,21 @@
</view>
<view class="title" hover-class="none" hover-stop-propagation="false">商品详情图</view>
<view class="proimages" hover-class="none" hover-stop-propagation="false">
<swiper style="height: 145px">
<swiper-item>
<image class="proswiperimg" src="https://wx.qlogo.cn/mmopen/vi_32/GY0ZvN3sdDsic3MyuFVfmnu9buGSH0EfMhjD8wsH9QwtcQQYQCkAew6xwgPqsmmEbc0456rY7o5gPiah5rrL4ySA/132" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
</swiper-item>
<swiper-item>
<image class="proswiperimg" src="https://wx.qlogo.cn/mmopen/vi_32/GY0ZvN3sdDsic3MyuFVfmnu9buGSH0EfMhjD8wsH9QwtcQQYQCkAew6xwgPqsmmEbc0456rY7o5gPiah5rrL4ySA/132" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
</swiper-item>
<swiper-item>
<image class="proswiperimg" src="https://wx.qlogo.cn/mmopen/vi_32/GY0ZvN3sdDsic3MyuFVfmnu9buGSH0EfMhjD8wsH9QwtcQQYQCkAew6xwgPqsmmEbc0456rY7o5gPiah5rrL4ySA/132" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
</swiper-item>
<swiper-item>
<image class="proswiperimg" src="https://wx.qlogo.cn/mmopen/vi_32/GY0ZvN3sdDsic3MyuFVfmnu9buGSH0EfMhjD8wsH9QwtcQQYQCkAew6xwgPqsmmEbc0456rY7o5gPiah5rrL4ySA/132" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
<swiper
style="height: 145px"
current="{{swiperIndex}}"
>
<swiper-item wx:for="{{params.banner}}" wx:key="{{index}}">
<image class="proswiperimg" src="{{filter.imagify(item)}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
</swiper-item>
</swiper>
<view class="arrowcircleleftbox" hover-class="none" hover-stop-propagation="false">
<view class="arrowcircleleftbox" bindtap="goBack" wx:if="{{params.banner.length > 0 && swiperIndex != 0}}" hover-class="none" hover-stop-propagation="false">
<image class="arrowcircleleft" src="{{localImageRoot}}2b/scoremgt/arrowcircleleft.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
</view>
<view class="arrowcirclerightbox" hover-class="none" hover-stop-propagation="false">
<view class="arrowcirclerightbox" bindtap="goPre" wx:if="{{params.banner.length > 0 && swiperIndex != (params.banner.length - 1)}}" hover-class="none" hover-stop-propagation="false">
<image class="arrowcircleright" src="{{localImageRoot}}2b/scoremgt/arrowcircleright.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
</view>
<view class="uploadiconbox" hover-class="none" hover-stop-propagation="false">
<view class="uploadiconbox" hover-class="none" hover-stop-propagation="false" bindtap="proMainImgUpload" data-type="swiperImg">
<image class="uploadicon" src="{{localImageRoot}}2b/scoremgt/uploadiconwhite.png?{{imageVersion}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
<text class="addimgtext" selectable="false" space="false" decode="false">添加图片</text>
<text class="advicesize" selectable="false" space="false" decode="false">建议尺寸:750*310 3/4</text>
......@@ -49,26 +62,26 @@
</view>
<view class="title" hover-class="none" hover-stop-propagation="false">奖品标题</view>
<view class="prizetitle" hover-class="none" hover-stop-propagation="false">
<textarea placeholder="请输入奖品标题"></textarea>
<view class="textcount" hover-class="none" hover-stop-propagation="false">1/25</view>
<textarea placeholder="请输入奖品标题" value="{{params.title}}" bindinput="titleInput"></textarea>
<view class="textcount" hover-class="none" hover-stop-propagation="false">{{params.title.length}}/25</view>
</view>
<view class="title" hover-class="none" hover-stop-propagation="false">积分价格</view>
<view class="prostatic" hover-class="none" hover-stop-propagation="false">
<text class="text" selectable="false" space="false" decode="false">兑换该商品需要</text>
<input type="number" class="staticinput" value="2000" />
<input type="number" class="staticinput" value="{{params.price}}" bindinput="priceInput"/>
<text class="text" selectable="false" space="false" decode="false">积分</text>
</view>
<view class="title" hover-class="none" hover-stop-propagation="false">库存</view>
<view class="prostatic" hover-class="none" hover-stop-propagation="false">
<text class="text" selectable="false" space="false" decode="false">该奖品数量</text>
<input type="number" class="staticinput" value="2000"/>
<input type="number" class="staticinput" value="{{params.inventory}}" bindinput="inventoryInput"/>
<text class="text" selectable="false" space="false" decode="false">件</text>
</view>
<view class="title" hover-class="none" hover-stop-propagation="false">其他说明</view>
<view class="prizetitle prizedesc" hover-class="none" hover-stop-propagation="false">
<textarea auto-height placeholder="说明一些特殊情况:例如 兑奖规则,奖品情况等"></textarea>
<textarea auto-height placeholder="说明一些特殊情况:例如 兑奖规则,奖品情况等" bindinput="remarkInput" value="{{params.remark}}"></textarea>
<view class="textcount" hover-class="none" hover-stop-propagation="false">1/100</view>
</view>
</view>
<view class="submitbtn" hover-class="none" hover-stop-propagation="false">上架</view>
<view class="submitbtn" hover-class="none" hover-stop-propagation="false" bindtap="publish">上架</view>
</view>
......@@ -189,4 +189,16 @@
.arrowcircleright {
width: 45rpx;
height: 45rpx;
}
.cropperoperate {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
z-index: 400;
bottom: 0;
left: 0;
width: 100%;
color: #fff;
height: 200rpx;
}
\ No newline at end of file
Component({
properties: {
/**
* 图片路径
*/
'imgSrc': {
type: String
},
/**
* 裁剪框高度
*/
'height': {
type: Number,
value: 200
},
/**
* 裁剪框宽度
*/
'width': {
type: Number,
value: 200
},
/**
* 裁剪框最小尺寸
*/
'min_width': {
type: Number,
value: 100
},
'min_height': {
type: Number,
value: 100
},
/**
* 裁剪框最大尺寸
*/
'max_width': {
type: Number,
value: 300
},
'max_height': {
type: Number,
value: 300
},
/**
* 裁剪框禁止拖动
*/
'disable_width': {
type: Boolean,
value: false
},
'disable_height': {
type: Boolean,
value: false
},
/**
* 锁定裁剪框比例
*/
'disable_ratio':{
type: Boolean,
value: false
},
/**
* 生成的图片尺寸相对剪裁框的比例
*/
'export_scale': {
type: Number,
value: 3
},
/**
* 生成的图片质量0-1
*/
'quality': {
type: Number,
value: 1
},
'cut_top': {
type: Number,
value: null
},
'cut_left': {
type: Number,
value: null
},
/**
* canvas上边距(不设置默认不显示)
*/
'canvas_top': {
type: Number,
value: null
},
/**
* canvas左边距(不设置默认不显示)
*/
'canvas_left': {
type: Number,
value: null
},
/**
* 图片宽度
*/
'img_width': {
type: null,
value: null
},
/**
* 图片高度
*/
'img_height': {
type: null,
value: null
},
/**
* 图片缩放比
*/
'scale': {
type: Number,
value: 1
},
/**
* 图片旋转角度
*/
'angle': {
type: Number,
value: 0
},
/**
* 最小缩放比
*/
'min_scale': {
type: Number,
value: 0.5
},
/**
* 最大缩放比
*/
'max_scale': {
type: Number,
value: 2
},
/**
* 是否禁用旋转
*/
'disable_rotate': {
type: Boolean,
value: false
},
/**
* 是否限制移动范围(剪裁框只能在图片内)
*/
'limit_move':{
type: Boolean,
value: false
}
},
data: {
el: 'image-cropper', //暂时无用
info: wx.getSystemInfoSync(),
MOVE_THROTTLE:null,//触摸移动节流settimeout
MOVE_THROTTLE_FLAG: true,//节流标识
INIT_IMGWIDTH: 0, //图片设置尺寸,此值不变(记录最初设定的尺寸)
INIT_IMGHEIGHT: 0, //图片设置尺寸,此值不变(记录最初设定的尺寸)
TIME_BG: null,//背景变暗延时函数
TIME_CUT_CENTER:null,
_touch_img_relative: [{
x: 0,
y: 0
}], //鼠标和图片中心的相对位置
_flag_cut_touch:false,//是否是拖动裁剪框
_hypotenuse_length: 0, //双指触摸时斜边长度
_flag_img_endtouch: false, //是否结束触摸
_flag_bright: true, //背景是否亮
_canvas_overflow:true,//canvas缩略图是否在屏幕外面
_canvas_width:200,
_canvas_height:200,
origin_x: 0.5, //图片旋转中心
origin_y: 0.5, //图片旋转中心
_cut_animation: false,//是否开启图片和裁剪框过渡
_img_top: wx.getSystemInfoSync().windowHeight / 2, //图片上边距
_img_left: wx.getSystemInfoSync().windowWidth / 2, //图片左边距
watch: {
//监听截取框宽高变化
width(value, that) {
if (value < that.data.min_width){
that.setData({
width: that.data.min_width
});
}
that._computeCutSize();
},
height(value, that) {
if (value < that.data.min_height) {
that.setData({
height: that.data.min_height
});
}
that._computeCutSize();
},
angle(value, that){
//停止居中裁剪框,继续修改图片位置
that._moveStop();
if(that.data.limit_move){
if (that.data.angle % 90) {
that.setData({
angle: Math.round(that.data.angle / 90) * 90
});
return;
}
}
},
_cut_animation(value, that){
//开启过渡300毫秒之后自动关闭
clearTimeout(that.data._cut_animation_time);
if (value){
that.data._cut_animation_time = setTimeout(()=>{
that.setData({
_cut_animation:false
});
},300)
}
},
limit_move(value, that){
if (value) {
if (that.data.angle%90){
that.setData({
angle: Math.round(that.data.angle / 90)*90
});
}
that._imgMarginDetectionScale();
!that.data._canvas_overflow && that._draw();
}
},
canvas_top(value, that){
that._canvasDetectionPosition();
},
canvas_left(value, that){
that._canvasDetectionPosition();
},
imgSrc(value, that){
that.pushImg();
},
cut_top(value, that) {
that._cutDetectionPosition();
if (that.data.limit_move) {
!that.data._canvas_overflow && that._draw();
}
},
cut_left(value, that) {
that._cutDetectionPosition();
if (that.data.limit_move) {
!that.data._canvas_overflow && that._draw();
}
}
}
},
attached() {
this.data.info = wx.getSystemInfoSync();
//启用数据监听
this._watcher();
this.data.INIT_IMGWIDTH = this.data.img_width;
this.data.INIT_IMGHEIGHT = this.data.img_height;
this.setData({
_canvas_height: this.data.height,
_canvas_width: this.data.width,
});
this._initCanvas();
this.data.imgSrc && (this.data.imgSrc = this.data.imgSrc);
//根据开发者设置的图片目标尺寸计算实际尺寸
this._initImageSize();
//设置裁剪框大小>设置图片尺寸>绘制canvas
this._computeCutSize();
//检查裁剪框是否在范围内
this._cutDetectionPosition();
//检查canvas是否在范围内
this._canvasDetectionPosition();
//初始化完成
this.triggerEvent('load', {
cropper: this
});
},
methods: {
/**
* 上传图片
*/
upload() {
let that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
const tempFilePaths = res.tempFilePaths[0];
that.pushImg(tempFilePaths);
wx.showLoading({
title: '加载中...'
})
}
})
},
/**
* 返回图片信息
*/
getImg(getCallback) {
this._draw(()=>{
wx.canvasToTempFilePath({
width: this.data.width * this.data.export_scale,
height: Math.round(this.data.height * this.data.export_scale),
destWidth: this.data.width * this.data.export_scale,
destHeight: Math.round(this.data.height) * this.data.export_scale,
fileType: 'png',
quality: this.data.quality,
canvasId: this.data.el,
success: (res) => {
getCallback({
url: res.tempFilePath,
width: this.data.width * this.data.export_scale,
height: this.data.height * this.data.export_scale
});
}
}, this)
});
},
/**
* 设置图片动画
* {
* x:10,//图片在原有基础上向下移动10px
* y:10,//图片在原有基础上向右移动10px
* angle:10,//图片在原有基础上旋转10deg
* scale:0.5,//图片在原有基础上增加0.5倍
* }
*/
setTransform(transform) {
if (!transform) return;
if (!this.data.disable_rotate){
this.setData({
angle: transform.angle ? this.data.angle + transform.angle : this.data.angle
});
}
var scale = this.data.scale;
if (transform.scale) {
scale = this.data.scale + transform.scale;
scale = scale <= this.data.min_scale ? this.data.min_scale : scale;
scale = scale >= this.data.max_scale ? this.data.max_scale : scale;
}
this.data.scale = scale;
let cutX = this.data.cut_left;
let cutY = this.data.cut_top;
if (transform.cutX){
this.setData({
cut_left: cutX + transform.cutX
});
this.data.watch.cut_left(null, this);
}
if (transform.cutY){
this.setData({
cut_top: cutY + transform.cutY
});
this.data.watch.cut_top(null, this);
}
this.data._img_top = transform.y ? this.data._img_top + transform.y : this.data._img_top;
this.data._img_left = transform.x ? this.data._img_left + transform.x : this.data._img_left;
//图像边缘检测,防止截取到空白
this._imgMarginDetectionScale();
//停止居中裁剪框,继续修改图片位置
this._moveDuring();
this.setData({
scale: this.data.scale,
_img_top: this.data._img_top,
_img_left: this.data._img_left
});
!this.data._canvas_overflow && this._draw();
//可以居中裁剪框了
this._moveStop();//结束操作
},
/**
* 设置剪裁框位置
*/
setCutXY(x,y){
this.setData({
cut_top: y,
cut_left:x
});
},
/**
* 设置剪裁框尺寸
*/
setCutSize(w,h){
this.setData({
width: w,
height:h
});
this._computeCutSize();
},
/**
* 设置剪裁框和图片居中
*/
setCutCenter() {
let cut_top = (this.data.info.windowHeight - this.data.height) * 0.5;
let cut_left = (this.data.info.windowWidth - this.data.width) * 0.5;
//顺序不能变
this.setData({
_img_top: this.data._img_top - this.data.cut_top + cut_top,
cut_top: cut_top, //截取的框上边距
_img_left: this.data._img_left - this.data.cut_left + cut_left,
cut_left: cut_left, //截取的框左边距
});
},
_setCutCenter(){
let cut_top = (this.data.info.windowHeight - this.data.height) * 0.5;
let cut_left = (this.data.info.windowWidth - this.data.width) * 0.5;
this.setData({
cut_top: cut_top, //截取的框上边距
cut_left: cut_left, //截取的框左边距
});
},
/**
* 设置剪裁框宽度-即将废弃
*/
setWidth(width) {
this.setData({
width: width
});
this._computeCutSize();
},
/**
* 设置剪裁框高度-即将废弃
*/
setHeight(height) {
this.setData({
height: height
});
this._computeCutSize();
},
/**
* 是否锁定旋转
*/
setDisableRotate(value){
this.data.disable_rotate = value;
},
/**
* 是否限制移动
*/
setLimitMove(value){
this.setData({
_cut_animation: true,
limit_move: !!value
});
},
/**
* 初始化图片,包括位置、大小、旋转角度
*/
imgReset() {
this.setData({
scale: 1,
angle: 0,
_img_top: wx.getSystemInfoSync().windowHeight / 2,
_img_left: wx.getSystemInfoSync().windowWidth / 2,
})
},
/**
* 加载(更换)图片
*/
pushImg(src) {
if (src) {
this.setData({
imgSrc: src
});
//发现是手动赋值直接返回,交给watch处理
return;
}
wx.getImageInfo({
src: this.data.imgSrc,
success: (res) => {
this.data.imageObject = res;
//图片非本地路径需要换成本地路径
if (this.data.imgSrc.search(/tmp/) == -1){
this.setData({
imgSrc: res.path
});
}
//计算最后图片尺寸
this._imgComputeSize();
if (this.data.limit_move) {
//限制移动,不留空白处理
this._imgMarginDetectionScale();
}
this._draw();
},
fail: (err) => {
this.setData({
imgSrc: ''
});
}
});
},
imageLoad(e){
setTimeout(()=>{
this.triggerEvent('imageload', this.data.imageObject);
},1000)
},
/**
* 设置图片放大缩小
*/
setScale(scale) {
if (!scale) return;
this.setData({
scale: scale
});
!this.data._canvas_overflow && this._draw();
},
/**
* 设置图片旋转角度
*/
setAngle(angle) {
if (!angle) return;
this.setData({
_cut_animation: true,
angle: angle
});
this._imgMarginDetectionScale();
!this.data._canvas_overflow && this._draw();
},
_initCanvas() {
//初始化canvas
if (!this.data.ctx){
this.data.ctx = wx.createCanvasContext("image-cropper", this);
}
},
/**
* 根据开发者设置的图片目标尺寸计算实际尺寸
*/
_initImageSize(){
//处理宽高特殊单位 %>px
if (this.data.INIT_IMGWIDTH && typeof this.data.INIT_IMGWIDTH == "string" && this.data.INIT_IMGWIDTH.indexOf("%") != -1) {
let width = this.data.INIT_IMGWIDTH.replace("%", "");
this.data.INIT_IMGWIDTH = this.data.img_width = this.data.info.windowWidth / 100 * width;
}
if (this.data.INIT_IMGHEIGHT && typeof this.data.INIT_IMGHEIGHT == "string" && this.data.INIT_IMGHEIGHT.indexOf("%") != -1) {
let height = this.data.img_height.replace("%", "");
this.data.INIT_IMGHEIGHT = this.data.img_height = this.data.info.windowHeight / 100 * height;
}
},
/**
* 检测剪裁框位置是否在允许的范围内(屏幕内)
*/
_cutDetectionPosition(){
let _cutDetectionPositionTop = () => {
//检测上边距是否在范围内
if (this.data.cut_top < 0) {
this.setData({
cut_top: 0
});
}
if (this.data.cut_top > this.data.info.windowHeight - this.data.height) {
this.setData({
cut_top: this.data.info.windowHeight - this.data.height
});
}
}, _cutDetectionPositionLeft = () => {
//检测左边距是否在范围内
if (this.data.cut_left < 0) {
this.setData({
cut_left: 0
});
}
if (this.data.cut_left > this.data.info.windowWidth - this.data.width) {
this.setData({
cut_left: this.data.info.windowWidth - this.data.width
});
}
};
//裁剪框坐标处理(如果只写一个参数则另一个默认为0,都不写默认居中)
if (this.data.cut_top == null && this.data.cut_left == null) {
this._setCutCenter();
} else if (this.data.cut_top != null && this.data.cut_left != null){
_cutDetectionPositionTop();
_cutDetectionPositionLeft();
} else if (this.data.cut_top != null && this.data.cut_left == null) {
_cutDetectionPositionTop();
this.setData({
cut_left: (this.data.info.windowWidth - this.data.width) / 2
});
} else if (this.data.cut_top == null && this.data.cut_left != null) {
_cutDetectionPositionLeft();
this.setData({
cut_top: (this.data.info.windowHeight - this.data.height) / 2
});
}
},
/**
* 检测canvas位置是否在允许的范围内(屏幕内)如果在屏幕外则不开启实时渲染
* 如果只写一个参数则另一个默认为0,都不写默认超出屏幕外
*/
_canvasDetectionPosition(){
if(this.data.canvas_top == null && this.data.canvas_left == null) {
this.data._canvas_overflow = false;
this.setData({
canvas_top: -5000,
canvas_left: -5000
});
}else if(this.data.canvas_top != null && this.data.canvas_left != null) {
if (this.data.canvas_top < - this.data.height || this.data.canvas_top > this.data.info.windowHeight) {
this.data._canvas_overflow = true;
} else {
this.data._canvas_overflow = false;
}
}else if(this.data.canvas_top != null && this.data.canvas_left == null) {
this.setData({
canvas_left: 0
});
} else if (this.data.canvas_top == null && this.data.canvas_left != null) {
this.setData({
canvas_top: 0
});
if (this.data.canvas_left < -this.data.width || this.data.canvas_left > this.data.info.windowWidth) {
this.data._canvas_overflow = true;
} else {
this.data._canvas_overflow = false;
}
}
},
/**
* 图片边缘检测-位置
*/
_imgMarginDetectionPosition(scale) {
if (!this.data.limit_move) return;
let left = this.data._img_left;
let top = this.data._img_top;
var scale = scale || this.data.scale;
let img_width = this.data.img_width;
let img_height = this.data.img_height;
if (this.data.angle / 90 % 2) {
img_width = this.data.img_height;
img_height = this.data.img_width;
}
left = this.data.cut_left + img_width * scale / 2 >= left ? left : this.data.cut_left + img_width * scale / 2;
left = this.data.cut_left + this.data.width - img_width * scale / 2 <= left ? left : this.data.cut_left + this.data.width - img_width * scale / 2;
top = this.data.cut_top + img_height * scale / 2 >= top ? top : this.data.cut_top + img_height * scale / 2;
top = this.data.cut_top + this.data.height - img_height * scale / 2 <= top ? top : this.data.cut_top + this.data.height - img_height * scale / 2;
this.setData({
_img_left: left,
_img_top: top,
scale: scale
})
},
/**
* 图片边缘检测-缩放
*/
_imgMarginDetectionScale(){
if (!this.data.limit_move)return;
let scale = this.data.scale;
let img_width = this.data.img_width;
let img_height = this.data.img_height;
if (this.data.angle / 90 % 2) {
img_width = this.data.img_height;
img_height = this.data.img_width;
}
if (img_width * scale < this.data.width){
scale = this.data.width / img_width;
}
if (img_height * scale < this.data.height) {
scale = Math.max(scale,this.data.height / img_height);
}
this._imgMarginDetectionPosition(scale);
},
_setData(obj) {
let data = {};
for (var key in obj) {
if (this.data[key] != obj[key]){
data[key] = obj[key];
}
}
this.setData(data);
return data;
},
/**
* 计算图片尺寸
*/
_imgComputeSize() {
let img_width = this.data.img_width,
img_height = this.data.img_height;
if (!this.data.INIT_IMGHEIGHT && !this.data.INIT_IMGWIDTH) {
//默认按图片最小边 = 对应裁剪框尺寸
img_width = this.data.imageObject.width;
img_height = this.data.imageObject.height;
if (img_width / img_height > this.data.width / this.data.height){
img_height = this.data.height;
img_width = this.data.imageObject.width / this.data.imageObject.height * img_height;
}else{
img_width = this.data.width;
img_height = this.data.imageObject.height / this.data.imageObject.width * img_width;
}
} else if (this.data.INIT_IMGHEIGHT && !this.data.INIT_IMGWIDTH) {
img_width = this.data.imageObject.width / this.data.imageObject.height * this.data.INIT_IMGHEIGHT;
} else if (!this.data.INIT_IMGHEIGHT && this.data.INIT_IMGWIDTH) {
img_height = this.data.imageObject.height / this.data.imageObject.width * this.data.INIT_IMGWIDTH;
}
this.setData({
img_width: img_width,
img_height: img_height
});
},
//改变截取框大小
_computeCutSize() {
if (this.data.width > this.data.info.windowWidth) {
this.setData({
width: this.data.info.windowWidth,
});
} else if (this.data.width + this.data.cut_left > this.data.info.windowWidth){
this.setData({
cut_left: this.data.info.windowWidth - this.data.cut_left,
});
};
if (this.data.height > this.data.info.windowHeight) {
this.setData({
height: this.data.info.windowHeight,
});
} else if (this.data.height + this.data.cut_top > this.data.info.windowHeight){
this.setData({
cut_top: this.data.info.windowHeight - this.data.cut_top,
});
}
!this.data._canvas_overflow && this._draw();
},
//开始触摸
_start(event) {
this.data._flag_img_endtouch = false;
if (event.touches.length == 1) {
//单指拖动
this.data._touch_img_relative[0] = {
x: (event.touches[0].clientX - this.data._img_left),
y: (event.touches[0].clientY - this.data._img_top)
}
} else {
//双指放大
let width = Math.abs(event.touches[0].clientX - event.touches[1].clientX);
let height = Math.abs(event.touches[0].clientY - event.touches[1].clientY);
this.data._touch_img_relative = [{
x: (event.touches[0].clientX - this.data._img_left),
y: (event.touches[0].clientY - this.data._img_top)
}, {
x: (event.touches[1].clientX - this.data._img_left),
y: (event.touches[1].clientY - this.data._img_top)
}];
this.data._hypotenuse_length = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
}
!this.data._canvas_overflow && this._draw();
},
_move_throttle(){
//安卓需要节流
if (this.data.info.platform =='android'){
clearTimeout(this.data.MOVE_THROTTLE);
this.data.MOVE_THROTTLE = setTimeout(() => {
this.data.MOVE_THROTTLE_FLAG = true;
}, 1000 / 40)
return this.data.MOVE_THROTTLE_FLAG;
}else{
this.data.MOVE_THROTTLE_FLAG = true;
}
},
_move(event) {
if (this.data._flag_img_endtouch || !this.data.MOVE_THROTTLE_FLAG) return;
this.data.MOVE_THROTTLE_FLAG = false;
this._move_throttle();
this._moveDuring();
if (event.touches.length == 1) {
//单指拖动
let left = (event.touches[0].clientX - this.data._touch_img_relative[0].x),
top = (event.touches[0].clientY - this.data._touch_img_relative[0].y);
//图像边缘检测,防止截取到空白
this.data._img_left = left;
this.data._img_top = top;
this._imgMarginDetectionPosition();
this.setData({
_img_left: this.data._img_left,
_img_top: this.data._img_top
});
} else {
//双指放大
let width = (Math.abs(event.touches[0].clientX - event.touches[1].clientX)),
height = (Math.abs(event.touches[0].clientY - event.touches[1].clientY)),
hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
scale = this.data.scale * (hypotenuse / this.data._hypotenuse_length),
current_deg = 0;
scale = scale <= this.data.min_scale ? this.data.min_scale : scale;
scale = scale >= this.data.max_scale ? this.data.max_scale : scale;
//图像边缘检测,防止截取到空白
this.data.scale = scale;
this._imgMarginDetectionScale();
//双指旋转(如果没禁用旋转)
let _touch_img_relative = [{
x: (event.touches[0].clientX - this.data._img_left),
y: (event.touches[0].clientY - this.data._img_top)
}, {
x: (event.touches[1].clientX - this.data._img_left),
y: (event.touches[1].clientY - this.data._img_top)
}];
if (!this.data.disable_rotate){
let first_atan = 180 / Math.PI * Math.atan2(_touch_img_relative[0].y, _touch_img_relative[0].x);
let first_atan_old = 180 / Math.PI * Math.atan2(this.data._touch_img_relative[0].y, this.data._touch_img_relative[0].x);
let second_atan = 180 / Math.PI * Math.atan2(_touch_img_relative[1].y, _touch_img_relative[1].x);
let second_atan_old = 180 / Math.PI * Math.atan2(this.data._touch_img_relative[1].y, this.data._touch_img_relative[1].x);
//当前旋转的角度
let first_deg = first_atan - first_atan_old,
second_deg = second_atan - second_atan_old;
if (first_deg != 0) {
current_deg = first_deg;
} else if (second_deg != 0) {
current_deg = second_deg;
}
}
this.data._touch_img_relative = _touch_img_relative;
this.data._hypotenuse_length = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
//更新视图
this.setData({
angle: this.data.angle + current_deg,
scale: this.data.scale
});
}
!this.data._canvas_overflow && this._draw();
},
//结束操作
_end(event) {
this.data._flag_img_endtouch = true;
this._moveStop();
},
//点击中间剪裁框处理
_click(event) {
console.log('sssssssssss')
if (!this.data.imgSrc) {
//调起上传
this.upload();
return;
}
this._draw(()=>{
// let x = event.detail ? event.detail.x : event.touches[0].clientX;
// let y = event.detail ? event.detail.y : event.touches[0].clientY;
// if ((x >= this.data.cut_left && x <= (this.data.cut_left + this.data.width)) && (y >= this.data.cut_top && y <= (this.data.cut_top + this.data.height))) {
//生成图片并回调
wx.canvasToTempFilePath({
width: this.data.width * this.data.export_scale,
height: Math.round(this.data.height * this.data.export_scale),
destWidth: this.data.width * this.data.export_scale,
destHeight: Math.round(this.data.height) * this.data.export_scale,
fileType: 'png',
quality: this.data.quality,
canvasId: this.data.el,
success: (res) => {
this.triggerEvent('tapcut', {
url: res.tempFilePath,
width: this.data.width * this.data.export_scale,
height: this.data.height * this.data.export_scale
});
}
}, this)
// }
});
},
//渲染
_draw(callback) {
if (!this.data.imgSrc) return;
let draw = () => {
//图片实际大小
let img_width = this.data.img_width * this.data.scale * this.data.export_scale;
let img_height = this.data.img_height * this.data.scale * this.data.export_scale;
//canvas和图片的相对距离
var xpos = this.data._img_left - this.data.cut_left;
var ypos = this.data._img_top - this.data.cut_top;
//旋转画布
this.data.ctx.translate(xpos * this.data.export_scale, ypos * this.data.export_scale);
this.data.ctx.rotate(this.data.angle * Math.PI / 180);
this.data.ctx.drawImage(this.data.imgSrc, -img_width / 2, -img_height / 2, img_width, img_height);
this.data.ctx.draw(false, () => {
callback && callback();
});
}
if (this.data.ctx.width != this.data.width || this.data.ctx.height != this.data.height){
//优化拖动裁剪框,所以必须把宽高设置放在离用户触发渲染最近的地方
this.setData({
_canvas_height: this.data.height,
_canvas_width: this.data.width,
},()=>{
//延迟20毫秒防止点击过快出现拉伸或裁剪过多
setTimeout(() => {
draw();
}, 20);
});
}else{
draw();
}
},
//裁剪框处理
_cutTouchMove(e) {
if (this.data._flag_cut_touch && this.data.MOVE_THROTTLE_FLAG) {
if (this.data.disable_ratio && (this.data.disable_width || this.data.disable_height)) return;
//节流
this.data.MOVE_THROTTLE_FLAG = false;
this._move_throttle();
let width = this.data.width,
height = this.data.height,
cut_top = this.data.cut_top,
cut_left = this.data.cut_left,
size_correct = () => {
width = width <= this.data.max_width ? width >= this.data.min_width ? width : this.data.min_width : this.data.max_width;
height = height <= this.data.max_height ? height >= this.data.min_height ? height : this.data.min_height : this.data.max_height;
},
size_inspect = () => {
if ((width > this.data.max_width || width < this.data.min_width || height > this.data.max_height || height < this.data.min_height) && this.data.disable_ratio) {
size_correct();
return false;
} else {
size_correct();
return true;
}
};
height = this.data.CUT_START.height + ((this.data.CUT_START.corner > 1 && this.data.CUT_START.corner < 4 ? 1 : -1) * (this.data.CUT_START.y - e.touches[0].clientY));
switch (this.data.CUT_START.corner) {
case 1:
width = this.data.CUT_START.width + this.data.CUT_START.x - e.touches[0].clientX;
if (this.data.disable_ratio) {
height = width / (this.data.width / this.data.height)
}
if (!size_inspect()) return;
cut_left = this.data.CUT_START.cut_left - (width - this.data.CUT_START.width);
break
case 2:
width = this.data.CUT_START.width + this.data.CUT_START.x - e.touches[0].clientX;
if (this.data.disable_ratio) {
height = width / (this.data.width / this.data.height)
}
if (!size_inspect()) return;
cut_top = this.data.CUT_START.cut_top - (height - this.data.CUT_START.height)
cut_left = this.data.CUT_START.cut_left - (width - this.data.CUT_START.width)
break
case 3:
width = this.data.CUT_START.width - this.data.CUT_START.x + e.touches[0].clientX;
if (this.data.disable_ratio) {
height = width / (this.data.width / this.data.height)
}
if (!size_inspect()) return;
cut_top = this.data.CUT_START.cut_top - (height - this.data.CUT_START.height);
break
case 4:
width = this.data.CUT_START.width - this.data.CUT_START.x + e.touches[0].clientX;
if (this.data.disable_ratio) {
height = width / (this.data.width / this.data.height)
}
if (!size_inspect()) return;
break
}
if (!this.data.disable_width && !this.data.disable_height) {
this.setData({
width: width,
cut_left: cut_left,
height: height,
cut_top: cut_top,
})
} else if (!this.data.disable_width) {
this.setData({
width: width,
cut_left: cut_left
})
} else if (!this.data.disable_height) {
this.setData({
height: height,
cut_top: cut_top
})
}
this._imgMarginDetectionScale();
}
},
_cutTouchStart(e) {
let currentX = e.touches[0].clientX;
let currentY = e.touches[0].clientY;
let cutbox_top4 = this.data.cut_top + this.data.height - 30;
let cutbox_bottom4 = this.data.cut_top + this.data.height + 20;
let cutbox_left4 = this.data.cut_left + this.data.width - 30;
let cutbox_right4 = this.data.cut_left + this.data.width + 30;
let cutbox_top3 = this.data.cut_top - 30;
let cutbox_bottom3 = this.data.cut_top + 30;
let cutbox_left3 = this.data.cut_left + this.data.width - 30;
let cutbox_right3 = this.data.cut_left + this.data.width + 30;
let cutbox_top2 = this.data.cut_top - 30;
let cutbox_bottom2 = this.data.cut_top + 30;
let cutbox_left2 = this.data.cut_left - 30;
let cutbox_right2 = this.data.cut_left + 30;
let cutbox_top1 = this.data.cut_top + this.data.height - 30;
let cutbox_bottom1 = this.data.cut_top + this.data.height + 30;
let cutbox_left1 = this.data.cut_left - 30;
let cutbox_right1 = this.data.cut_left + 30;
if (currentX > cutbox_left4 && currentX < cutbox_right4 && currentY > cutbox_top4 && currentY < cutbox_bottom4) {
this._moveDuring();
this.data._flag_cut_touch = true;
this.data._flag_img_endtouch = true;
this.data.CUT_START = {
width: this.data.width,
height: this.data.height,
x: currentX,
y: currentY,
corner: 4
}
} else if (currentX > cutbox_left3 && currentX < cutbox_right3 && currentY > cutbox_top3 && currentY < cutbox_bottom3) {
this._moveDuring();
this.data._flag_cut_touch = true;
this.data._flag_img_endtouch = true;
this.data.CUT_START = {
width: this.data.width,
height: this.data.height,
x: currentX,
y: currentY,
cut_top: this.data.cut_top,
cut_left: this.data.cut_left,
corner: 3
}
} else if (currentX > cutbox_left2 && currentX < cutbox_right2 && currentY > cutbox_top2 && currentY < cutbox_bottom2) {
this._moveDuring();
this.data._flag_cut_touch = true;
this.data._flag_img_endtouch = true;
this.data.CUT_START = {
width: this.data.width,
height: this.data.height,
cut_top: this.data.cut_top,
cut_left: this.data.cut_left,
x: currentX,
y: currentY,
corner: 2
}
} else if (currentX > cutbox_left1 && currentX < cutbox_right1 && currentY > cutbox_top1 && currentY < cutbox_bottom1) {
this._moveDuring();
this.data._flag_cut_touch = true;
this.data._flag_img_endtouch = true;
this.data.CUT_START = {
width: this.data.width,
height: this.data.height,
cut_top: this.data.cut_top,
cut_left: this.data.cut_left,
x: currentX,
y: currentY,
corner: 1
}
}
},
_cutTouchEnd(e) {
this._moveStop();
this.data._flag_cut_touch = false;
},
//停止移动时需要做的操作
_moveStop() {
//清空之前的自动居中延迟函数并添加最新的
clearTimeout(this.data.TIME_CUT_CENTER);
this.data.TIME_CUT_CENTER = setTimeout(() => {
//动画启动
if (!this.data._cut_animation) {
this.setData({
_cut_animation: true
});
}
this.setCutCenter();
}, 1000)
//清空之前的背景变化延迟函数并添加最新的
clearTimeout(this.data.TIME_BG);
this.data.TIME_BG = setTimeout(() => {
if (this.data._flag_bright) {
this.setData({
_flag_bright: false
});
}
}, 2000)
},
//移动中
_moveDuring() {
//清空之前的自动居中延迟函数
clearTimeout(this.data.TIME_CUT_CENTER);
//清空之前的背景变化延迟函数
clearTimeout(this.data.TIME_BG);
//高亮背景
if (!this.data._flag_bright) {
this.setData({
_flag_bright: true
});
}
},
//监听器
_watcher() {
Object.keys(this.data).forEach(v => {
this._observe(this.data, v, this.data.watch[v]);
})
},
_observe(obj, key, watchFun) {
var val = obj[key];
Object.defineProperty(obj, key, {
configurable: true,
enumerable: true,
set:(value) => {
val = value;
watchFun && watchFun(val, this);
},
get() {
if (val && '_img_top|img_left||width|height|min_width|max_width|min_height|max_height|export_scale|cut_top|cut_left|canvas_top|canvas_left|img_width|img_height|scale|angle|min_scale|max_scale'.indexOf(key)!=-1){
let ret = parseFloat(parseFloat(val).toFixed(3));
if (typeof val == "string" && val.indexOf("%") != -1){
ret+='%';
}
return ret;
}
return val;
}
})
}
},
_preventTouchMove() {
}
})
{
"component": true
}
\ No newline at end of file
<view class='image-cropper'>
<view class='main' bindtouchend="_cutTouchEnd" bindtouchstart="_cutTouchStart" bindtouchmove="_cutTouchMove" bindtap="_click">
<view class='content'>
<view class='content_top bg_gray {{_flag_bright?"":"bg_black"}}' style="height:{{cut_top}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
<view class='content_middle' style="height:{{height}}px;">
<view class='content_middle_left bg_gray {{_flag_bright?"":"bg_black"}}' style="width:{{cut_left}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
<view class='content_middle_middle' style="width:{{width}}px;height:{{height}}px;transition-duration: .3s;transition-property:{{_cut_animation?'':'background'}};">
<view class="border border-top-left"></view>
<view class="border border-top-right"></view>
<view class="border border-right-top"></view>
<view class="border border-right-bottom"></view>
<view class="border border-bottom-right"></view>
<view class="border border-bottom-left"></view>
<view class="border border-left-bottom"></view>
<view class="border border-left-top"></view>
</view>
<view class='content_middle_right bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
</view>
<view class='content_bottom bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
</view>
<image bindload="imageLoad" bindtouchstart="_start" bindtouchmove="_move" bindtouchend="_end" style="width:{{img_width ? img_width + 'px' : 'auto'}};height:{{img_height ? img_height + 'px' : 'auto'}};transform:translate3d({{_img_left-img_width/2}}px,{{_img_top-img_height/2}}px,0) scale({{scale}}) rotate({{angle}}deg);transition-duration:{{_cut_animation?.4:0}}s;" class='img' src='{{imgSrc}}'></image>
</view>
<canvas canvas-id='image-cropper' disable-scroll="true" style="width:{{_canvas_width * export_scale}}px;height:{{_canvas_height * export_scale}}px;left:{{canvas_left}}px;top:{{canvas_top}}px" class='image-cropper-canvas'></canvas>
</view>
.image-cropper{
background:rgba(14, 13, 13,.8);
position: fixed;
top:0;
left:0;
width:100vw;
height:100vh;
z-index: 300;
}
.main{
position: absolute;
width:100vw;
height:100vh;
overflow: hidden;
}
.content{
z-index: 9;
position: absolute;
width:100vw;
height:100vh;
display: flex;
flex-direction:column;
pointer-events:none;
}
.bg_black{
background: rgba(0, 0, 0, 0.8)!important;
}
.bg_gray{
background: rgba(0, 0, 0, 0.45);
transition-duration: .35s;
}
.content>.content_top{
pointer-events:none;
}
.content>.content_middle{
display: flex;
height: 200px;
width:100%;
}
.content_middle_middle{
width:200px;
box-sizing:border-box;
position: relative;
transition-duration: .3s;
}
.content_middle_right{
flex: auto;
}
.content>.content_bottom{
flex: auto;
}
.image-cropper .img{
z-index: 2;
top:0;
left:0;
position: absolute;
border:none;
width:100%;
backface-visibility: hidden;
transform-origin:center;
}
.image-cropper-canvas{
position: fixed;
background: white;
width:150px;
height:150px;
z-index: 10;
top:-200%;
pointer-events:none;
}
.border{
background: white;
pointer-events:auto;
position:absolute;
}
.border-top-left{
left:-2.5px;
top:-2.5px;
height:2.5px;
width:33rpx;
}
.border-top-right{
right:-2.5px;
top:-2.5px;
height:2.5px;
width:33rpx;
}
.border-right-top{
top:-1px;
width:2.5px;
height:30rpx;
right:-2.5px;
}
.border-right-bottom{
width:2.5px;
height:30rpx;
right:-2.5px;
bottom:-1px;
}
.border-bottom-left{
height:2.5px;
width:33rpx;
bottom:-2.5px;
left:-2.5px;
}
.border-bottom-right{
height:2.5px;
width:33rpx;
bottom:-2.5px;
right:-2.5px;
}
.border-left-top{
top:-1px;
width:2.5px;
height:30rpx;
left:-2.5px;
}
.border-left-bottom{
width:2.5px;
height:30rpx;
left:-2.5px;
bottom:-1px;
}
\ No newline at end of file
......@@ -137,7 +137,10 @@ const apis = {
integral: {
integralRulesAdd: `${api}member/integral_rules/store`,
integralRulesShow: `${api}member/integral_rules/show`,
integralRulesUpdate: `${api}member/integral_rules/update`
integralRulesUpdate: `${api}member/integral_rules/update`,
goodsAdd: `${api}member/integral_goods/store`,
goodsUpdate: `${api}member/integral_goods/update`,
goodsShow: `${api}member/integral_goods/show`
},
teachermgt: {
teachersList: `${api}member/teachers`,
......
images/2b/circleindex/assignment.png

5.03 KB | W: | H:

images/2b/circleindex/assignment.png

1.74 KB | W: | H:

images/2b/circleindex/assignment.png
images/2b/circleindex/assignment.png
images/2b/circleindex/assignment.png
images/2b/circleindex/assignment.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/circleindex/rili.png

5.74 KB | W: | H:

images/2b/circleindex/rili.png

1.49 KB | W: | H:

images/2b/circleindex/rili.png
images/2b/circleindex/rili.png
images/2b/circleindex/rili.png
images/2b/circleindex/rili.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/circleindex/unlock.png

4.13 KB | W: | H:

images/2b/circleindex/unlock.png

1.27 KB | W: | H:

images/2b/circleindex/unlock.png
images/2b/circleindex/unlock.png
images/2b/circleindex/unlock.png
images/2b/circleindex/unlock.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/circleindex/unlockclock.png

15.6 KB | W: | H:

images/2b/circleindex/unlockclock.png

4.61 KB | W: | H:

images/2b/circleindex/unlockclock.png
images/2b/circleindex/unlockclock.png
images/2b/circleindex/unlockclock.png
images/2b/circleindex/unlockclock.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/classhour/edit.png

1.31 KB | W: | H:

images/2b/classhour/edit.png

606 Bytes | W: | H:

images/2b/classhour/edit.png
images/2b/classhour/edit.png
images/2b/classhour/edit.png
images/2b/classhour/edit.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/classhour/unlock_n.png

676 Bytes | W: | H:

images/2b/classhour/unlock_n.png

320 Bytes | W: | H:

images/2b/classhour/unlock_n.png
images/2b/classhour/unlock_n.png
images/2b/classhour/unlock_n.png
images/2b/classhour/unlock_n.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/classhour/unlock_y.png

810 Bytes | W: | H:

images/2b/classhour/unlock_y.png

359 Bytes | W: | H:

images/2b/classhour/unlock_y.png
images/2b/classhour/unlock_y.png
images/2b/classhour/unlock_y.png
images/2b/classhour/unlock_y.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/scoremgt/addprize.png

6.89 KB | W: | H:

images/2b/scoremgt/addprize.png

2.73 KB | W: | H:

images/2b/scoremgt/addprize.png
images/2b/scoremgt/addprize.png
images/2b/scoremgt/addprize.png
images/2b/scoremgt/addprize.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/scoremgt/arrowcircleleft.png

4.71 KB | W: | H:

images/2b/scoremgt/arrowcircleleft.png

1.84 KB | W: | H:

images/2b/scoremgt/arrowcircleleft.png
images/2b/scoremgt/arrowcircleleft.png
images/2b/scoremgt/arrowcircleleft.png
images/2b/scoremgt/arrowcircleleft.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/scoremgt/arrowcircleright.png

4.79 KB | W: | H:

images/2b/scoremgt/arrowcircleright.png

1.84 KB | W: | H:

images/2b/scoremgt/arrowcircleright.png
images/2b/scoremgt/arrowcircleright.png
images/2b/scoremgt/arrowcircleright.png
images/2b/scoremgt/arrowcircleright.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/scoremgt/exchangeprize.png

8.9 KB | W: | H:

images/2b/scoremgt/exchangeprize.png

3.55 KB | W: | H:

images/2b/scoremgt/exchangeprize.png
images/2b/scoremgt/exchangeprize.png
images/2b/scoremgt/exchangeprize.png
images/2b/scoremgt/exchangeprize.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/scoremgt/scan.png

9.89 KB | W: | H:

images/2b/scoremgt/scan.png

2.79 KB | W: | H:

images/2b/scoremgt/scan.png
images/2b/scoremgt/scan.png
images/2b/scoremgt/scan.png
images/2b/scoremgt/scan.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/scoremgt/scoresetting.png

8.18 KB | W: | H:

images/2b/scoremgt/scoresetting.png

3.89 KB | W: | H:

images/2b/scoremgt/scoresetting.png
images/2b/scoremgt/scoresetting.png
images/2b/scoremgt/scoresetting.png
images/2b/scoremgt/scoresetting.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/scoremgt/uploadicon.png

2.5 KB | W: | H:

images/2b/scoremgt/uploadicon.png

896 Bytes | W: | H:

images/2b/scoremgt/uploadicon.png
images/2b/scoremgt/uploadicon.png
images/2b/scoremgt/uploadicon.png
images/2b/scoremgt/uploadicon.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/scoremgt/uploadiconwhite.png

1.92 KB | W: | H:

images/2b/scoremgt/uploadiconwhite.png

1016 Bytes | W: | H:

images/2b/scoremgt/uploadiconwhite.png
images/2b/scoremgt/uploadiconwhite.png
images/2b/scoremgt/uploadiconwhite.png
images/2b/scoremgt/uploadiconwhite.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/themeeditor/editicon.png

3.75 KB | W: | H:

images/2b/themeeditor/editicon.png

1.19 KB | W: | H:

images/2b/themeeditor/editicon.png
images/2b/themeeditor/editicon.png
images/2b/themeeditor/editicon.png
images/2b/themeeditor/editicon.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/themeeditor/stepactive.png

1.65 KB | W: | H:

images/2b/themeeditor/stepactive.png

605 Bytes | W: | H:

images/2b/themeeditor/stepactive.png
images/2b/themeeditor/stepactive.png
images/2b/themeeditor/stepactive.png
images/2b/themeeditor/stepactive.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/themeeditor/stepactiveb.png

1.66 KB | W: | H:

images/2b/themeeditor/stepactiveb.png

658 Bytes | W: | H:

images/2b/themeeditor/stepactiveb.png
images/2b/themeeditor/stepactiveb.png
images/2b/themeeditor/stepactiveb.png
images/2b/themeeditor/stepactiveb.png
  • 2-up
  • Swipe
  • Onion skin
images/2b/themeeditor/stepnotative.png

1.3 KB | W: | H:

images/2b/themeeditor/stepnotative.png

528 Bytes | W: | H:

images/2b/themeeditor/stepnotative.png
images/2b/themeeditor/stepnotative.png
images/2b/themeeditor/stepnotative.png
images/2b/themeeditor/stepnotative.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/circleindex/assignment.png

5.06 KB | W: | H:

images/2c/circleindex/assignment.png

1.8 KB | W: | H:

images/2c/circleindex/assignment.png
images/2c/circleindex/assignment.png
images/2c/circleindex/assignment.png
images/2c/circleindex/assignment.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/circleindex/isclock.png

666 Bytes | W: | H:

images/2c/circleindex/isclock.png

343 Bytes | W: | H:

images/2c/circleindex/isclock.png
images/2c/circleindex/isclock.png
images/2c/circleindex/isclock.png
images/2c/circleindex/isclock.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/circleindex/rili.png

6 KB | W: | H:

images/2c/circleindex/rili.png

1.78 KB | W: | H:

images/2c/circleindex/rili.png
images/2c/circleindex/rili.png
images/2c/circleindex/rili.png
images/2c/circleindex/rili.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/circleindex/unlock.png

4.1 KB | W: | H:

images/2c/circleindex/unlock.png

1.3 KB | W: | H:

images/2c/circleindex/unlock.png
images/2c/circleindex/unlock.png
images/2c/circleindex/unlock.png
images/2c/circleindex/unlock.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/mall/cardbgblue.png

101 KB | W: | H:

images/2c/mall/cardbgblue.png

30.4 KB | W: | H:

images/2c/mall/cardbgblue.png
images/2c/mall/cardbgblue.png
images/2c/mall/cardbgblue.png
images/2c/mall/cardbgblue.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/mall/cardbgred.png

143 KB | W: | H:

images/2c/mall/cardbgred.png

39.5 KB | W: | H:

images/2c/mall/cardbgred.png
images/2c/mall/cardbgred.png
images/2c/mall/cardbgred.png
images/2c/mall/cardbgred.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/mall/cardicon.png

2.4 KB | W: | H:

images/2c/mall/cardicon.png

1.47 KB | W: | H:

images/2c/mall/cardicon.png
images/2c/mall/cardicon.png
images/2c/mall/cardicon.png
images/2c/mall/cardicon.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/mall/couponbg.png

102 KB | W: | H:

images/2c/mall/couponbg.png

27.7 KB | W: | H:

images/2c/mall/couponbg.png
images/2c/mall/couponbg.png
images/2c/mall/couponbg.png
images/2c/mall/couponbg.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/mall/earnscore.png

2.21 KB | W: | H:

images/2c/mall/earnscore.png

1.01 KB | W: | H:

images/2c/mall/earnscore.png
images/2c/mall/earnscore.png
images/2c/mall/earnscore.png
images/2c/mall/earnscore.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/mall/exchangerecord.png

1.72 KB | W: | H:

images/2c/mall/exchangerecord.png

807 Bytes | W: | H:

images/2c/mall/exchangerecord.png
images/2c/mall/exchangerecord.png
images/2c/mall/exchangerecord.png
images/2c/mall/exchangerecord.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/mall/gifticon.png

3.81 KB | W: | H:

images/2c/mall/gifticon.png

2.4 KB | W: | H:

images/2c/mall/gifticon.png
images/2c/mall/gifticon.png
images/2c/mall/gifticon.png
images/2c/mall/gifticon.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/mall/star.png

3.04 KB | W: | H:

images/2c/mall/star.png

1.31 KB | W: | H:

images/2c/mall/star.png
images/2c/mall/star.png
images/2c/mall/star.png
images/2c/mall/star.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/myscoreindex/arrowright.png

347 Bytes | W: | H:

images/2c/myscoreindex/arrowright.png

257 Bytes | W: | H:

images/2c/myscoreindex/arrowright.png
images/2c/myscoreindex/arrowright.png
images/2c/myscoreindex/arrowright.png
images/2c/myscoreindex/arrowright.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/myscoreindex/bg.png

38.6 KB | W: | H:

images/2c/myscoreindex/bg.png

9.7 KB | W: | H:

images/2c/myscoreindex/bg.png
images/2c/myscoreindex/bg.png
images/2c/myscoreindex/bg.png
images/2c/myscoreindex/bg.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/myscoreindex/circlebar.png

8.4 KB | W: | H:

images/2c/myscoreindex/circlebar.png

2.28 KB | W: | H:

images/2c/myscoreindex/circlebar.png
images/2c/myscoreindex/circlebar.png
images/2c/myscoreindex/circlebar.png
images/2c/myscoreindex/circlebar.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/myscoreindex/circleright.png

1.33 KB | W: | H:

images/2c/myscoreindex/circleright.png

715 Bytes | W: | H:

images/2c/myscoreindex/circleright.png
images/2c/myscoreindex/circleright.png
images/2c/myscoreindex/circleright.png
images/2c/myscoreindex/circleright.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/myscoreindex/completeimg.png

20.9 KB | W: | H:

images/2c/myscoreindex/completeimg.png

6.42 KB | W: | H:

images/2c/myscoreindex/completeimg.png
images/2c/myscoreindex/completeimg.png
images/2c/myscoreindex/completeimg.png
images/2c/myscoreindex/completeimg.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/myscoreindex/mallbg.png

133 KB | W: | H:

images/2c/myscoreindex/mallbg.png

34.6 KB | W: | H:

images/2c/myscoreindex/mallbg.png
images/2c/myscoreindex/mallbg.png
images/2c/myscoreindex/mallbg.png
images/2c/myscoreindex/mallbg.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/myscoreindex/rankbg.png

146 KB | W: | H:

images/2c/myscoreindex/rankbg.png

33 KB | W: | H:

images/2c/myscoreindex/rankbg.png
images/2c/myscoreindex/rankbg.png
images/2c/myscoreindex/rankbg.png
images/2c/myscoreindex/rankbg.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/myscoreindex/scoreicon.png

813 Bytes | W: | H:

images/2c/myscoreindex/scoreicon.png

467 Bytes | W: | H:

images/2c/myscoreindex/scoreicon.png
images/2c/myscoreindex/scoreicon.png
images/2c/myscoreindex/scoreicon.png
images/2c/myscoreindex/scoreicon.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/myscoreindex/smallbg.png

95.7 KB | W: | H:

images/2c/myscoreindex/smallbg.png

21.7 KB | W: | H:

images/2c/myscoreindex/smallbg.png
images/2c/myscoreindex/smallbg.png
images/2c/myscoreindex/smallbg.png
images/2c/myscoreindex/smallbg.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/pointsrule/clock.png

1.4 KB | W: | H:

images/2c/pointsrule/clock.png

1.23 KB | W: | H:

images/2c/pointsrule/clock.png
images/2c/pointsrule/clock.png
images/2c/pointsrule/clock.png
images/2c/pointsrule/clock.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/pointsrule/evaluate.png

1.11 KB | W: | H:

images/2c/pointsrule/evaluate.png

815 Bytes | W: | H:

images/2c/pointsrule/evaluate.png
images/2c/pointsrule/evaluate.png
images/2c/pointsrule/evaluate.png
images/2c/pointsrule/evaluate.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/pointsrule/hudong.png

1.35 KB | W: | H:

images/2c/pointsrule/hudong.png

1.08 KB | W: | H:

images/2c/pointsrule/hudong.png
images/2c/pointsrule/hudong.png
images/2c/pointsrule/hudong.png
images/2c/pointsrule/hudong.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/pointsrule/rule_bg.png

27.6 KB | W: | H:

images/2c/pointsrule/rule_bg.png

7.03 KB | W: | H:

images/2c/pointsrule/rule_bg.png
images/2c/pointsrule/rule_bg.png
images/2c/pointsrule/rule_bg.png
images/2c/pointsrule/rule_bg.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/ucenter/mall.png

7.8 KB | W: | H:

images/2c/ucenter/mall.png

3.29 KB | W: | H:

images/2c/ucenter/mall.png
images/2c/ucenter/mall.png
images/2c/ucenter/mall.png
images/2c/ucenter/mall.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/ucenter/rank.png

6.4 KB | W: | H:

images/2c/ucenter/rank.png

2.04 KB | W: | H:

images/2c/ucenter/rank.png
images/2c/ucenter/rank.png
images/2c/ucenter/rank.png
images/2c/ucenter/rank.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/ucenter/score.png

9.05 KB | W: | H:

images/2c/ucenter/score.png

3.62 KB | W: | H:

images/2c/ucenter/score.png
images/2c/ucenter/score.png
images/2c/ucenter/score.png
images/2c/ucenter/score.png
  • 2-up
  • Swipe
  • Onion skin
images/2c/ucenter/setting.png

2.44 KB | W: | H:

images/2c/ucenter/setting.png

986 Bytes | W: | H:

images/2c/ucenter/setting.png
images/2c/ucenter/setting.png
images/2c/ucenter/setting.png
images/2c/ucenter/setting.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -32,8 +32,38 @@ function integralRulesUpdate (data) {
errorresolve: 1,
})
}
function goodsAdd (data) {
return wxRequest({
role: '2b',
url: apis.business.integral.goodsAdd,
data,
method: 'POST',
errorresolve: 1,
})
}
function goodsUpdate (data) {
return wxRequest({
role: '2b',
url: apis.business.integral.goodsUpdate + '/' + data.id,
data,
method: 'PUT',
errorresolve: 1,
})
}
function goodsShow (data) {
return wxRequest({
role: '2b',
url: apis.business.integral.goodsShow,
data,
method: 'GET',
errorresolve: 1,
})
}
export {
integralRulesAdd,
integralRulesShow,
integralRulesUpdate
integralRulesUpdate,
goodsAdd,
goodsUpdate,
goodsShow
}
\ No newline at end of file
/**
* we-cropper v1.3.7
* (c) 2019 dlhandsome
* @license MIT
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.WeCropper=e()}(this,function(){"use strict";var t=void 0,e=["touchstarted","touchmoved","touchended"];function r(n){for(var o=[],t=arguments.length-1;0<t--;)o[t]=arguments[t+1];e.forEach(function(t,e){void 0!==o[e]&&(n[t]=o[e])})}function n(){return t||(t=wx.getSystemInfoSync()),t}var o={},a={id:{default:"cropper",get:function(){return o.id},set:function(t){"string"!=typeof t&&console.error("id\uff1a"+t+" is invalid"),o.id=t}},width:{default:750,get:function(){return o.width},set:function(t){"number"!=typeof t&&console.error("width\uff1a"+t+" is invalid"),o.width=t}},height:{default:750,get:function(){return o.height},set:function(t){"number"!=typeof t&&console.error("height\uff1a"+t+" is invalid"),o.height=t}},pixelRatio:{default:n().pixelRatio,get:function(){return o.pixelRatio},set:function(t){"number"!=typeof t&&console.error("pixelRatio\uff1a"+t+" is invalid"),o.pixelRatio=t}},scale:{default:2.5,get:function(){return o.scale},set:function(t){"number"!=typeof t&&console.error("scale\uff1a"+t+" is invalid"),o.scale=t}},zoom:{default:5,get:function(){return o.zoom},set:function(t){"number"!=typeof t?console.error("zoom\uff1a"+t+" is invalid"):(t<0||10<t)&&console.error("zoom should be ranged in 0 ~ 10"),o.zoom=t}},src:{default:"",get:function(){return o.src},set:function(t){"string"!=typeof t&&console.error("src\uff1a"+t+" is invalid"),o.src=t}},cut:{default:{},get:function(){return o.cut},set:function(t){"object"!=typeof t&&console.error("cut\uff1a"+t+" is invalid"),o.cut=t}},boundStyle:{default:{},get:function(){return o.boundStyle},set:function(t){"object"!=typeof t&&console.error("boundStyle\uff1a"+t+" is invalid"),o.boundStyle=t}},onReady:{default:null,get:function(){return o.ready},set:function(t){o.ready=t}},onBeforeImageLoad:{default:null,get:function(){return o.beforeImageLoad},set:function(t){o.beforeImageLoad=t}},onImageLoad:{default:null,get:function(){return o.imageLoad},set:function(t){o.imageLoad=t}},onBeforeDraw:{default:null,get:function(){return o.beforeDraw},set:function(t){o.beforeDraw=t}}},i=n().windowWidth;var f="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function c(t,e){return t(e={exports:{}},e.exports),e.exports}var u=c(function(t,e){e.isStr=function(t){return"string"==typeof t},e.isNum=function(t){return"number"==typeof t},e.isArr=Array.isArray,e.isUndef=function(t){return void 0===t},e.isTrue=function(t){return!0===t},e.isFalse=function(t){return!1===t},e.isFunc=function(t){return"function"==typeof t},e.isObj=e.isObject=function(t){return null!==t&&"object"==typeof t};var n=Object.prototype.toString;e.isPlainObject=function(t){return"[object Object]"===n.call(t)};var o=Object.prototype.hasOwnProperty;e.hasOwn=function(t,e){return o.call(t,e)},e.noop=function(t,e,n){},e.isValidArrayIndex=function(t){var e=parseFloat(String(t));return 0<=e&&Math.floor(e)===e&&isFinite(t)}}),l=u.isFunc,p=u.isPlainObject,s=["ready","beforeImageLoad","beforeDraw","imageLoad"];function d(r){return function(t){for(var o=[],e=arguments.length-1;0<e--;)o[e]=arguments[e+1];return void 0===t&&(t={}),new Promise(function(e,n){t.success=function(t){e(t)},t.fail=function(t){n(t)},r.apply(void 0,[t].concat(o))})}}var g=d(wx.getImageInfo),v=d(wx.canvasToTempFilePath),h=c(function(u,h){!function(t){var e=h,n=u&&u.exports==e&&u,o="object"==typeof f&&f;o.global!==o&&o.window!==o||(t=o);var r=function(t){this.message=t};(r.prototype=new Error).name="InvalidCharacterError";var s=function(t){throw new r(t)},d="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",c=/[\t\n\f\r ]/g,a={encode:function(t){t=String(t),/[^\0-\xFF]/.test(t)&&s("The string to be encoded contains characters outside of the Latin1 range.");for(var e,n,o,r,a=t.length%3,i="",c=-1,u=t.length-a;++c<u;)e=t.charCodeAt(c)<<16,n=t.charCodeAt(++c)<<8,o=t.charCodeAt(++c),i+=d.charAt((r=e+n+o)>>18&63)+d.charAt(r>>12&63)+d.charAt(r>>6&63)+d.charAt(63&r);return 2==a?(e=t.charCodeAt(c)<<8,n=t.charCodeAt(++c),i+=d.charAt((r=e+n)>>10)+d.charAt(r>>4&63)+d.charAt(r<<2&63)+"="):1==a&&(r=t.charCodeAt(c),i+=d.charAt(r>>2)+d.charAt(r<<4&63)+"=="),i},decode:function(t){var e=(t=String(t).replace(c,"")).length;e%4==0&&(e=(t=t.replace(/==?$/,"")).length),(e%4==1||/[^+a-zA-Z0-9/]/.test(t))&&s("Invalid character: the string to be decoded is not correctly encoded.");for(var n,o,r=0,a="",i=-1;++i<e;)o=d.indexOf(t.charAt(i)),n=r%4?64*n+o:o,r++%4&&(a+=String.fromCharCode(255&n>>(-2*r&6)));return a},version:"0.1.0"};if(e&&!e.nodeType)if(n)n.exports=a;else for(var i in a)a.hasOwnProperty(i)&&(e[i]=a[i]);else t.base64=a}(f)});function x(t){var e="";if("string"==typeof t)e=t;else for(var n=0;n<t.length;n++)e+=String.fromCharCode(t[n]);return h.encode(e)}function y(t,e,n,o,r,a,i){var c,u,s,d,h,f;void 0===i&&(i=function(){}),void 0===a&&(a="png"),a="image/"+a.toLowerCase().replace(/jpg/i,"jpeg").match(/png|jpeg|bmp|gif/)[0],/bmp/.test(a)?(c=t,u=e,s=n,d=o,h=r,f=function(t,e){var n=function(t){var e=t.width,n=t.height,o=e*n*3,r=o+54,a=[66,77,255&r,r>>8&255,r>>16&255,r>>24&255,0,0,0,0,54,0,0,0],i=[40,0,0,0,255&e,e>>8&255,e>>16&255,e>>24&255,255&n,n>>8&255,n>>16&255,n>>24&255,1,0,24,0,0,0,0,0,255&o,o>>8&255,o>>16&255,o>>24&255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],c=(4-3*e%4)%4,u=t.data,s="",d=e<<2,h=n,f=String.fromCharCode;do{for(var l=d*(h-1),p="",g=0;g<e;g++){var v=g<<2;p+=f(u[l+v+2])+f(u[l+v+1])+f(u[l+v])}for(var y=0;y<c;y++)p+=String.fromCharCode(0);s+=p}while(--h);return x(a.concat(i))+x(s)}(t);l(i)&&i("data:"+("image/"+a)+";base64,"+n,e)},wx.canvasGetImageData({canvasId:c,x:u,y:s,width:d,height:h,success:function(t){f(t,null)},fail:function(t){f(null,t)}})):console.error("\u6682\u4e0d\u652f\u6301\u751f\u6210'"+a+"'\u7c7b\u578b\u7684base64\u56fe\u7247")}var m=function(t,e){return void 0===t&&(t={}),void 0===e&&(e=function(){}),y(t.canvasId,t.x,t.y,t.width,t.height,"bmp",e)};var b={touchStart:function(t){var e=t.touches,n=e[0],o=e[1];this.src&&(r(this,!0,null,null),this.__oneTouchStart(n),2<=t.touches.length&&this.__twoTouchStart(n,o))},touchMove:function(t){var e=t.touches,n=e[0],o=e[1];this.src&&(r(this,null,!0),1===t.touches.length&&this.__oneTouchMove(n),2<=t.touches.length&&this.__twoTouchMove(n,o))},touchEnd:function(t){this.src&&(r(this,!1,!1,!0),this.__xtouchEnd())}};var w=function(t){var e,n,o=this,r={};return e=o,n=a,Object.defineProperties(e,n),Object.keys(a).forEach(function(t){r[t]=a[t].default}),Object.assign(o,r,t),o.prepare(),o.attachPage(),o.createCtx(),o.observer(),o.cutt(),o.methods(),o.init(),o.update(),o};return w.prototype.init=function(){var t=this,e=t.src;return t.version="1.3.7","function"==typeof t.onReady&&t.onReady(t.ctx,t),e?t.pushOrign(e):t.updateCanvas(),r(t,!1,!1,!1),t.oldScale=1,t.newScale=1,t},Object.assign(w.prototype,b),w.prototype.prepare=function(){var n=this;n.attachPage=function(){var t=getCurrentPages(),e=t[t.length-1];Object.defineProperty(e,"wecropper",{get:function(){return console.warn("Instance will not be automatically bound to the page after v1.4.0\n\nPlease use a custom instance name instead\n\nExample: \nthis.mycropper = new WeCropper(options)\n\n// ...\nthis.mycropper.getCropperImage()"),n}})},n.createCtx=function(){var t=n.id,e=n.targetId;t?(n.ctx=n.ctx||wx.createCanvasContext(t),n.targetCtx=n.targetCtx||wx.createCanvasContext(e)):console.error("constructor: create canvas context failed, 'id' must be valuable")},n.deviceRadio=i/750},w.prototype.observer=function(){var o=this;o.on=function(t,e){var n;return-1<s.indexOf(t)?l(e)&&("ready"===t?e(o):o["on"+(n=t,n.charAt(0).toUpperCase()+n.slice(1))]=e):console.error("event: "+t+" is invalid"),o}},w.prototype.methods=function(){var a=this,t=a.width,e=a.height,i=a.id,c=a.targetId,u=a.pixelRatio,n=a.cut,s=n.x;void 0===s&&(s=0);var d=n.y;void 0===d&&(d=0);var h=n.width;void 0===h&&(h=t);var f=n.height;void 0===f&&(f=e),a.updateCanvas=function(t){return a.croperTarget&&a.ctx.drawImage(a.croperTarget,a.imgLeft,a.imgTop,a.scaleWidth,a.scaleHeight),l(a.onBeforeDraw)&&a.onBeforeDraw(a.ctx,a),a.setBoundStyle(a.boundStyle),a.ctx.draw(!1,t),a},a.pushOrign=function(t){return a.src=t,l(a.onBeforeImageLoad)&&a.onBeforeImageLoad(a.ctx,a),g({src:t}).then(function(t){var e=t.width/t.height,n=h/f;return a.croperTarget=t.path,e<n?(a.rectX=s,a.baseWidth=h,a.baseHeight=h/e,a.rectY=d-Math.abs((f-a.baseHeight)/2)):(a.rectY=d,a.baseWidth=f*e,a.baseHeight=f,a.rectX=s-Math.abs((h-a.baseWidth)/2)),a.imgLeft=a.rectX,a.imgTop=a.rectY,a.scaleWidth=a.baseWidth,a.scaleHeight=a.baseHeight,a.update(),new Promise(function(t){a.updateCanvas(t)})}).then(function(){l(a.onImageLoad)&&a.onImageLoad(a.ctx,a)})},a.getCropperBase64=function(t){void 0===t&&(t=function(){}),m({canvasId:i,x:s,y:d,width:h,height:f},t)},a.getCropperImage=function(t,n){var e=t,o={canvasId:i,x:s,y:d,width:h,height:f},r=function(){return Promise.resolve()};return p(e)&&e.original&&(r=function(){return a.targetCtx.drawImage(a.croperTarget,a.imgLeft*u,a.imgTop*u,a.scaleWidth*u,a.scaleHeight*u),o={canvasId:c,x:s*u,y:d*u,width:h*u,height:f*u},e=a.targetCtx,void 0===n&&(n=!1),new Promise(function(t){e.draw(n,t)});var e,n}),r().then(function(){p(e)&&(o=Object.assign({},o,e)),l(e)&&(n=e);var t=o.componentContext?[o,o.componentContext]:[o];return v.apply(null,t)}).then(function(t){var e=t.tempFilePath;return l(n)?n.call(a,e,null):e}).catch(function(t){if(!l(n))throw t;n.call(a,null,t)})}},w.prototype.cutt=function(){var a=this,i=a.width,c=a.height,t=a.cut,u=t.x;void 0===u&&(u=0);var s=t.y;void 0===s&&(s=0);var d=t.width;void 0===d&&(d=i);var h=t.height;void 0===h&&(h=c),a.outsideBound=function(t,e){a.imgLeft=u<=t?u:a.scaleWidth+t-u<=d?u+d-a.scaleWidth:t,a.imgTop=s<=e?s:a.scaleHeight+e-s<=h?s+h-a.scaleHeight:e},a.setBoundStyle=function(t){void 0===t&&(t={});var e=t.color;void 0===e&&(e="#04b00f");var n=t.mask;void 0===n&&(n="rgba(0, 0, 0, 0.3)");var o=t.lineWidth;void 0===o&&(o=1);var r=[{start:{x:u-o,y:s+10-o},step1:{x:u-o,y:s-o},step2:{x:u+10-o,y:s-o}},{start:{x:u-o,y:s+h-10+o},step1:{x:u-o,y:s+h+o},step2:{x:u+10-o,y:s+h+o}},{start:{x:u+d-10+o,y:s-o},step1:{x:u+d+o,y:s-o},step2:{x:u+d+o,y:s+10-o}},{start:{x:u+d+o,y:s+h-10+o},step1:{x:u+d+o,y:s+h+o},step2:{x:u+d-10+o,y:s+h+o}}];a.ctx.beginPath(),a.ctx.setFillStyle(n),a.ctx.fillRect(0,0,u,c),a.ctx.fillRect(u,0,d,s),a.ctx.fillRect(u,s+h,d,c-s-h),a.ctx.fillRect(u+d,0,i-u-d,c),a.ctx.fill(),r.forEach(function(t){a.ctx.beginPath(),a.ctx.setStrokeStyle(e),a.ctx.setLineWidth(o),a.ctx.moveTo(t.start.x,t.start.y),a.ctx.lineTo(t.step1.x,t.step1.y),a.ctx.lineTo(t.step2.x,t.step2.y),a.ctx.stroke()})}},w.prototype.update=function(){var g=this;g.src&&(g.__oneTouchStart=function(t){g.touchX0=Math.round(t.x),g.touchY0=Math.round(t.y)},g.__oneTouchMove=function(t){var e,n;if(g.touchended)return g.updateCanvas();e=Math.round(t.x-g.touchX0),n=Math.round(t.y-g.touchY0);var o=Math.round(g.rectX+e),r=Math.round(g.rectY+n);g.outsideBound(o,r),g.updateCanvas()},g.__twoTouchStart=function(t,e){var n,o,r;g.touchX1=Math.round(g.rectX+g.scaleWidth/2),g.touchY1=Math.round(g.rectY+g.scaleHeight/2),n=Math.round(e.x-t.x),o=Math.round(e.y-t.y),r=Math.round(Math.sqrt(n*n+o*o)),g.oldDistance=r},g.__twoTouchMove=function(t,e){var n,o,r,a,i,c,u,s=g.oldScale,d=g.oldDistance,h=g.scale,f=g.zoom;g.newScale=(n=s,o=d,r=f,a=t,i=e,c=Math.round(i.x-a.x),u=Math.round(i.y-a.y),n+.001*r*(Math.round(Math.sqrt(c*c+u*u))-o)),g.newScale<=1&&(g.newScale=1),g.newScale>=h&&(g.newScale=h),g.scaleWidth=Math.round(g.newScale*g.baseWidth),g.scaleHeight=Math.round(g.newScale*g.baseHeight);var l=Math.round(g.touchX1-g.scaleWidth/2),p=Math.round(g.touchY1-g.scaleHeight/2);g.outsideBound(l,p),g.updateCanvas()},g.__xtouchEnd=function(){g.oldScale=g.newScale,g.rectX=g.imgLeft,g.rectY=g.imgTop})},w});
\ No newline at end of file
<template name="we-cropper">
<canvas
class="cropper"
disable-scroll="true"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd"
style="width:{{width}}px;height:{{height}}px;background-color: rgba(0, 0, 0, 0.8)"
canvas-id="{{id}}">
</canvas>
<canvas
class="cropper"
disable-scroll="true"
style="position: fixed; top: -{{width * pixelRatio}}px; left: -{{height * pixelRatio}}px; width:{{width * pixelRatio}}px;height:{{height * pixelRatio}}px;"
canvas-id="{{targetId}}">
</canvas>
</template>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment