314637581
/
flossom-miniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图片压缩

Browse Source
master
blak-kong 2 years ago
parent e097b70963
commit 7072e91622
4 changed files with 234 additions and 250 deletions
Show Stats Download Patch File Download Diff File

2
src/app.tsx
Unescape Escape View File

@ -29,7 +29,7 @@ class App extends Component<PropsWithChildren> {
// go("/pages/entry/entry"); // 介绍页
// go("/pages/userInfo/userInfo");
// go("/pages/register/register");
// go("/pages/instrument/instrument");
go("/pages/instrument/instrument");
}
onError(error) {

221
src/pages/instrument/instrument.less
Unescape Escape View File

@ -33,126 +33,129 @@ page {
background: #ffffff;
box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
color: #fff;
}
.footer .btn {
width: 690rpx;
height: 90rpx;
line-height: 90rpx;
background: #000000;
border-radius: 45rpx;
.btn {
width: 690rpx;
height: 90rpx;
line-height: 90rpx;
background: #000000;
border-radius: 45rpx;
}
}
.main {
text-align: center;
padding-bottom: 153rpx;
}
.top .top_title {
height: 45rpx;
font-size: 48rpx;
font-weight: 500;
color: #000;
line-height: 1;
/*line-height: 60rpx;*/
margin: 70rpx 0 48rpx;
}
.top .top_tips {
width: 470rpx;
font-size: 26rpx;
/*font-weight: 500;*/
color: #666666;
margin: 0 auto 18rpx;
line-height: 1;
}
.top_tips:last-child {
margin-bottom: 0;
/*margin-bottom: 60rpx;*/
}
.banner_list {
height: 460rpx;
line-height: 460rpx;
border-radius: 30rpx;
margin: 43rpx 35rpx 51rpx;
}
.banner_item {
width: 100%;
height: 100%;
border-radius: 30rpx;
}
.form {
margin: 0 33rpx;
text-align: left;
}
.form_item {
margin-bottom: 51rpx;
}
.form_item.is-instrument {
margin-bottom: 70rpx;
}
.form_item.is-inputCode {
margin-bottom: 48rpx;
}
.form_item.is-codeImg {
margin-bottom: 51rpx;
}
.form_item.is-channel {
margin-bottom: 0;
}
.form_item .label_box {
display: flex;
align-items: baseline;
justify-content: space-between;
font-size: 28rpx;
font-weight: bold;
color: #030000;
margin-bottom: 30rpx;
}
.top {
.top_title {
height: 45rpx;
font-size: 48rpx;
font-weight: 500;
color: #000;
line-height: 1;
/*line-height: 60rpx;*/
margin: 70rpx 0 48rpx;
}
.top_tips {
width: 470rpx;
font-size: 26rpx;
/*font-weight: 500;*/
color: #666666;
margin: 0 auto 18rpx;
line-height: 1;
&:last-child {
margin-bottom: 0;
/*margin-bottom: 60rpx;*/
}
}
}
.label-tips {
font-weight: normal;
}
.banner_list {
height: 460rpx;
line-height: 460rpx;
border-radius: 30rpx;
margin: 43rpx 35rpx 51rpx;
background-color: #ababab;
}
.label::after {
content: "*";
color: #eb5858;
margin-left: 10rpx;
}
.banner_item {
width: 100%;
height: 100%;
border-radius: 30rpx;
}
.label_box .text {
display: flex;
align-items: center;
font-size: 26rpx;
color: #666;
}
.form {
margin: 0 33rpx;
text-align: left;
}
.right_icon {
width: 10rpx;
height: 20rpx;
vertical-align: middle;
margin-left: 14rpx;
.form_item {
margin-bottom: 51rpx;
&.is-instrument {
margin-bottom: 70rpx;
}
&.is-inputCode {
margin-bottom: 48rpx;
}
&.is-codeImg {
margin-bottom: 51rpx;
}
&.is-channel {
margin-bottom: 0;
}
.label_box {
display: flex;
align-items: baseline;
justify-content: space-between;
font-size: 28rpx;
font-weight: bold;
color: #030000;
margin-bottom: 30rpx;
.label_text {
display: flex;
align-items: center;
font-size: 26rpx;
color: #666;
.label-tips {
font-weight: normal;
}
.label::after {
content: "*";
color: #eb5858;
margin-left: 10rpx;
}
.right_icon {
width: 10rpx;
height: 20rpx;
vertical-align: middle;
margin-left: 14rpx;
}
}
}
.photo_box {
display: flex;
justify-content: center;
align-items: center;
width: 160rpx;
height: 160rpx;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 20rpx;
}
}
}
.photo_box {
display: flex;
justify-content: center;
align-items: center;
width: 160rpx;
height: 160rpx;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 20rpx;
.instrument_list {
// border: 1px solid #fbf0de;
// .instrument_item {
// // background-color: #fbf0de;
// }
.instrument_img {
width: 100%;
height: 160rpx;
background-color: #ababab;
}
}
.add {

251
src/pages/instrument/instrument.tsx
Unescape Escape View File

@ -12,23 +12,22 @@ import {
// Button,
Video,
ScrollView,
Canvas,
} from "@tarojs/components";
import { Toast } from "@antmjs/vantui";
import {
BuyPropertyList,
InstrumentBindingAdd,
InstrumentBindingChangeSerial,
InstrumentCodeCheck,
InstrumentList,
Uploads,
UserInfo,
WCUserLogin,
} from "../../utils/Interface";
import { go, back, loading, msg, showModal } from "../../utils/traoAPI";
import { isVideo } from "../../utils/util";
import utilHtml from "../../utils/utilhtml";
const log = require("../../utils/log");
// const log = require("../../utils/log");
import { getImgInfo, contraction } from "../../utils/compressImage";
import Navbar from "../../components/navbar/navbar";
@ -42,11 +41,18 @@ export default class Instrument extends Component<any, any> {
style: "font-size: 28rpx; color: #ccc;",
succeedShow: false,
tipShow: false,
isChannelShow: false,
loading: true,
channelList: [],
channelInfo: {},
equipmentList: [],
channelInfo: {
image: "",
},
equipmentList: [
{
id: 1,
banner: "",
titile: "测试",
},
],
isVideo: false,
inputType: 1, //1.手写 2.扫码绑定
bindCode: "",
@ -112,62 +118,62 @@ export default class Instrument extends Component<any, any> {
this.setState({
bindCode,
});
this.getBindCodeInfo();
// this.getBindCodeInfo();
},
fail(err) {},
complete(res) {},
});
};
getBindCodeInfo = async () => {
const { bindCode, instrumentList, channelInfo } = this.state;
// 1.查询资料
try {
const { data } = await InstrumentCodeCheck({
code: bindCode,
});
const bindCodeInfo = { ...data.data.bindCodeInfo };
// 2.判断是否是选中的仪器, 如果不是, 直接弹出scanErrorPopup
if (channelInfo.id != bindCodeInfo.instrument_id) {
this.setState({
bindPopup: "scanErrorPopup",
});
return;
}
const match = instrumentList.find((item) => {
if (item.id == bindCodeInfo.instrument_id && item.serial) {
// 找到同一个仪器
bindCodeInfo.hadBindSame = true;
if (item.serial == bindCodeInfo.antifakeCode) {
// 找到同一个序列号
bindCodeInfo.hadBindSameCode = true;
} else {
bindCodeInfo.hadBindSameCode = false;
}
return item;
}
if (item.id == bindCodeInfo.instrument_id) {
const { channelInfo } = this.state;
if (channelInfo.id === item.id) return;
this.setState({
channelInfo: item,
isVideo: isVideo(item.bind_intro_video),
});
}
});
if (match) {
bindCodeInfo.hadBind = true;
} else {
bindCodeInfo.hadBindSame = false;
}
this.setState({
bindCodeInfo,
});
this.judgeBindCode();
} catch (e) {
this.judgeBindCode();
}
};
// getBindCodeInfo = async () => {
// const { bindCode, instrumentList, channelInfo } = this.state;
// // // 1.查询资料
// // try {
// // const { data } = await InstrumentCodeCheck({
// // code: bindCode,
// // });
// // const bindCodeInfo = { ...data.data.bindCodeInfo };
// // // 2.判断是否是选中的仪器, 如果不是, 直接弹出scanErrorPopup
// // if (channelInfo.id != bindCodeInfo.instrument_id) {
// // this.setState({
// // bindPopup: "scanErrorPopup",
// // });
// // return;
// // }
// // const match = instrumentList.find((item) => {
// // if (item.id == bindCodeInfo.instrument_id && item.serial) {
// // // 找到同一个仪器
// // bindCodeInfo.hadBindSame = true;
// // if (item.serial == bindCodeInfo.antifakeCode) {
// // // 找到同一个序列号
// // bindCodeInfo.hadBindSameCode = true;
// // } else {
// // bindCodeInfo.hadBindSameCode = false;
// // }
// // return item;
// // }
// // if (item.id == bindCodeInfo.instrument_id) {
// // const { channelInfo } = this.state;
// // if (channelInfo.id === item.id) return;
// // this.setState({
// // channelInfo: item,
// // isVideo: isVideo(item.bind_intro_video),
// // });
// // }
// // });
// // if (match) {
// // bindCodeInfo.hadBind = true;
// // } else {
// // bindCodeInfo.hadBindSame = false;
// // }
// // this.setState({
// // bindCodeInfo,
// // });
// // this.judgeBindCode();
// // } catch (e) {
// // this.judgeBindCode();
// // }
// };
judgeBindCode = () => {
const { bindCode, bindCodeInfo } = this.state;
@ -213,48 +219,24 @@ export default class Instrument extends Component<any, any> {
});
};
onChangeImg() {
async onChangeImg() {
Taro.chooseMedia({
count: 1,
mediaType: ["image"],
success: (res) => {
success: async (res) => {
const tempFilePath = res.tempFiles[0].tempFilePath;
Uploads(tempFilePath).then((result) => {
const url = result.data.link;
this.setState({ "channelInfo.image": url });
});
let img = await getImgInfo(tempFilePath);
let compressImage = await contraction(img, "compressImage");
// 压缩后文件地址
let compressTempFilePath = compressImage.tempFilePath;
let { channelInfo } = this.state;
channelInfo.image = compressTempFilePath;
this.setState({ channelInfo });
},
});
}
onChannelShow = () => {
this.setState({ isChannelShow: true });
this.getChannelList();
};
onChannelCancel = () => {
this.setState({ isChannelShow: false, loading: true });
};
onChannelConfirm = (event) => {
const { id, type_name } = event.detail.value;
this.setState({
["channelInfo.buy_id"]: id,
["channelInfo.type_name"]: type_name,
});
this.onChannelCancel();
};
getChannelList = () => {
BuyPropertyList({
type: 3,
limit: 9999,
page: 1,
}).then((res) => {
this.setState({ channelList: res.data.data.list, loading: false });
});
};
onSubmit = () => {
const that = this;
const { serial, image, buy_id, id } = this.state.channelInfo;
@ -262,18 +244,18 @@ export default class Instrument extends Component<any, any> {
if (!image) return msg("请上传序列号照片");
// if (!buy_id) return msg('请选择购买渠道');
loading("绑定中");
InstrumentBindingAdd({ serial, image, buy_id, instrument_id: id })
.then((res) => {
this.setState({ succeedShow: true });
})
.catch((err) => {
if (err.data.code != 500) {
that.setState({
errorMsg: err.data.msg,
bindPopup: "errorMsg",
});
}
});
// InstrumentBindingAdd({ serial, image, buy_id, instrument_id: id })
// .then((res) => {
// this.setState({ succeedShow: true });
// })
// .catch((err) => {
// if (err.data.code != 500) {
// that.setState({
// errorMsg: err.data.msg,
// bindPopup: "errorMsg",
// });
// }
// });
};
onSelectChange(event) {
@ -294,6 +276,7 @@ export default class Instrument extends Component<any, any> {
let { isVideo, channelInfo, inputType, style, equipmentList } = this.state;
return (
<Block>
<Canvas id="compressImage" canvasId="compressImage" type="2d"></Canvas>
<Navbar titleSlot="仪器绑定" isBack={true} />
<View></View>
<View className="main">
@ -309,10 +292,10 @@ export default class Instrument extends Component<any, any> {
<Video
className="banner_item"
autoplay
object-fit="cover"
enable-play-gesture
show-fullscreen-btn={false}
play-btn-position="center"
objectFit="cover"
enablePlayGesture
showFullscreenBtn={false}
playBtnPosition="center"
src={utilHtml.getHttpsUrl(channelInfo.bind_intro_Video)}
/>
) : (
@ -336,29 +319,28 @@ export default class Instrument extends Component<any, any> {
<ScrollView
scrollX={true}
className="instrument_list"
style="width: 100%; white-space: nowrap;"
scrollIntoView={"scroll" + channelInfo.id}
>
{equipmentList.map((item, index) => {
return (
<Block>
<View
className={classnames("cover", {
active_cover: channelInfo.id === item.id,
})}
id="{{'scroll' + item.id}}"
key={index}
data-item={item}
onClick={this.onSelectChange}
>
<Image
className="Image"
src={utilHtml.getHttpsUrl(item.banner)}
mode="aspectFill"
></Image>
<View className="desc">{item.titile}</View>
</View>
</Block>
<View
className={classnames("cover", {
active_cover: channelInfo.id === item.id,
})}
id={"scroll" + item.id}
key={index}
data-item={item}
onClick={this.onSelectChange}
>
<Image
className="instrument_img"
src={utilHtml.getHttpsUrl(item.banner)}
mode="aspectFill"
></Image>
<View className="desc">{item.titile}</View>
</View>
);
})}
</ScrollView>
@ -394,7 +376,7 @@ export default class Instrument extends Component<any, any> {
<View className="form_item is-inputCode">
<View className="label_box">
<View className="label">填写序列号</View>
<View className="Text" onClick={this.onTipShow}>
<View className="label_text" onClick={this.onTipShow}>
<Text className="label-tips">查看序列号位置</Text>
<Image
className="right_icon"
@ -404,19 +386,19 @@ export default class Instrument extends Component<any, any> {
</View>
</View>
<View className="ipt_box">
<input
<Input
className="ipt"
placeholder="例如：FR10*********1"
placeholder-style={style}
onInput={this.onSerial}
value={channelInfo.serial}
></input>
<Image
></Input>
{/* <Image
onClick={this.onScanCode}
className="icon"
src={require("../../img/welcome/scan-code.png")}
mode="widthFix"
></Image>
></Image> */}
</View>
</View>
<View className="form_item">
@ -424,10 +406,10 @@ export default class Instrument extends Component<any, any> {
<View className="label">上传序列号照片</View>
</View>
<View className="photo_box" onClick={this.onChangeImg}>
{channelInfo.Image && (
<Image src={channelInfo.Image}></Image>
{channelInfo.image && (
<Image src={channelInfo.image}></Image>
)}
{!channelInfo.Image && (
{!channelInfo.image && (
<Image
className="add"
src={require("../../img/welcome/add.png")}
@ -458,7 +440,6 @@ export default class Instrument extends Component<any, any> {
</View>
)}
</View>
<Toast />
</Block>
);
}

10
src/utils/compressImage.js
Unescape Escape View File

@ -4,7 +4,7 @@ import Taro from "@tarojs/taro";
* @param {string} tempFilePath 图片路径
* @returns 图片信息
*/
async function getImgInfo(tempFilePath) {
export async function getImgInfo(tempFilePath) {
try {
let image = await new Promise((resolve, reject) => {
Taro.getImageInfo({
@ -36,11 +36,11 @@ async function getImgInfo(tempFilePath) {
* @param {object} config 限制最大宽高
* @returns 压缩完成后的图片path
*/
async function contraction(
export async function contraction(
file,
canvasId,
config = { maxWidth: 2048, maxHeight: 1536 }
// config = { maxWidth: 1024, maxHeight: 768 }
// config = { maxWidth: 2048, maxHeight: 1536 }
config = { maxWidth: 1024, maxHeight: 768 }
) {
try {
let ctxInfo = await new Promise((resolve, reject) => {
@ -67,7 +67,7 @@ async function contraction(
}
// 获取canvas元素
const query = this.createSelectorQuery();
const query = Taro.createSelectorQuery();
let dom = query.select(`#${canvasId}`);
dom.fields({ node: true, size: true }).exec((res) => {
// Canvas 对象

Write Preview
Loading…
Cancel
Save