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/entry/entry"); // 介绍页
// go("/pages/userInfo/userInfo"); // go("/pages/userInfo/userInfo");
// go("/pages/register/register"); // go("/pages/register/register");
// go("/pages/instrument/instrument"); go("/pages/instrument/instrument");
} }
onError(error) { onError(error) {

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save