140 lines
2.9 KiB
Vue
140 lines
2.9 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="top-block"></view>
|
|
<textarea class="ms-input" :placeholder="tip" maxlength="-1" v-model="text">
|
|
<button class="ms-share" open-type="share"></button>
|
|
</textarea>
|
|
<text class="ms-output" @longtap="copyOutCode()">{{outcode?outcode:"可长按复制"}}</text>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
const app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
outcode: '',
|
|
text: "",
|
|
tip: `输入内容自动识别 编码：支持字母、数字、空格 解码：支持.-\\`,
|
|
}
|
|
},
|
|
watch: {
|
|
text(value){
|
|
const that = this;
|
|
// 获取到input的值
|
|
value += ' .';
|
|
var operate = 'encode';
|
|
if (value.indexOf('-') >= 0) {
|
|
operate = 'decode';
|
|
}
|
|
uni.request({
|
|
url: app.globalData.website + '/tools/mosidianma.php?type=' + operate + '&text=' + value,
|
|
method: 'POST',
|
|
success(res) {
|
|
// console.log(res);
|
|
that.outcode = res.data;
|
|
},
|
|
fail(res) {
|
|
console.log("请求失败", res);
|
|
uni.showToast({
|
|
content: '请求失败',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
copyOutCode() {
|
|
const that = this;
|
|
if(that.outcode=='')return;
|
|
//提示模板
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: that.outcode, //模板中提示的内容
|
|
confirmText: '复制内容',
|
|
success: (res) => { //点击复制内容的后调函数
|
|
if (res.confirm) {
|
|
//uni.setClipboardData方法就是讲内容复制到粘贴板
|
|
uni.setClipboardData({
|
|
data: that.outcode, //要被复制的内容
|
|
success: () => { //复制成功的回调函数
|
|
uni.showToast({ //提示
|
|
title: '复制成功'
|
|
})
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '摩斯电码',
|
|
imageUrl: app.globalData.website + '/image/swiper/image_swiper_mosidianma.jpg'
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
height: 100vh;
|
|
width: 100%;
|
|
background-color: #54a0ff;
|
|
margin: 0;
|
|
}
|
|
|
|
.top-block {
|
|
height: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.ms-input,
|
|
.ms-output {
|
|
width: 86%;
|
|
height: 200px;
|
|
border-radius: 20px;
|
|
font-size: 20px;
|
|
margin: 0 auto 20px auto;
|
|
padding: 15px;
|
|
background-color: #f6f7f9;
|
|
}
|
|
|
|
.ms-input {
|
|
position: relative;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
}
|
|
|
|
.ms-output {
|
|
height: auto;
|
|
max-height: 200px;
|
|
display: block;
|
|
color: #262626;
|
|
margin: 0 auto 20px auto;
|
|
overflow: scroll;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.ms-share {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background-image: url('../../../static/icons/icon_share.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-color: rgba(84, 160, 255, .2);
|
|
background-size: 60% 60%;
|
|
z-index: 10;
|
|
}
|
|
</style>
|