feat: 首次提交
This commit is contained in:
peerless_hero
111
pages/component/canvas/autograph/autograph.vue
Normal file
111
pages/component/canvas/autograph/autograph.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1407 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Autograph <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Autograph 手写签名，用于手写电子签名。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">请在下方空白处签名</view>
|
||||
<fui-autograph ref="autograph" @ready="ready"></fui-autograph>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="重签" bold :margin="['64rpx','0','24rpx']"
|
||||
@click="redraw">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="完成" bold @click="complete">
|
||||
</fui-button>
|
||||
</view>
|
||||
<view class="fui-autograph__box">
|
||||
<text class="fui-text">您的签名：</text>
|
||||
<image :src="src" v-if="src" mode="widthFix" class="fui-img" @tap="preview"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvasId: '',
|
||||
src: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
ready(e) {
|
||||
// #ifdef MP-TOUTIAO
|
||||
//仅允许边缘滑动返回
|
||||
// tt.setSwipeBackMode(2);
|
||||
// #endif
|
||||
this.canvasId = e.canvasId
|
||||
},
|
||||
redraw() {
|
||||
if (!this.canvasId) return;
|
||||
this.src = '';
|
||||
this.$refs.autograph.redraw()
|
||||
},
|
||||
complete() {
|
||||
if (!this.canvasId || this.src) return;
|
||||
this.$refs.autograph.drawComplete((res) => {
|
||||
//res为签名图片
|
||||
this.src = res;
|
||||
})
|
||||
},
|
||||
preview() {
|
||||
if (!this.src) return;
|
||||
/*百度小程序只支持打开网络路径，不支持本地临时路径*/
|
||||
// #ifndef MP-BAIDU
|
||||
uni.previewImage({
|
||||
// #ifdef MP-ALIPAY
|
||||
enablesavephoto: true,
|
||||
enableShowPhotoDownload: true,
|
||||
// #endif
|
||||
urls: [this.src]
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-autograph__box {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
padding: 64rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
font-size: 24rpx;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
|
||||
.fui-img {
|
||||
display: block;
|
||||
width: 200rpx;
|
||||
}
|
||||
</style>
|
||||
75
pages/component/canvas/barcode/barcode.vue
Normal file
75
pages/component/canvas/barcode/barcode.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 1 40 7 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Barcode <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Barcode 条形码，用于展现条形码信息。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-input__box">
|
||||
<fui-input v-model="val" maxlength="13" type="number"></fui-input>
|
||||
<view class="fui-tips">请输入13位条码信息，扫描只能识别有效的条形码。</view>
|
||||
</view>
|
||||
<fui-button type="gray" btn-size="medium" text="生成" bold :margin="['32rpx','0','64rpx']"
|
||||
@click="barcode">
|
||||
</fui-button>
|
||||
<fui-barcode ref="barcode" :value="val"></fui-barcode>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
val: '6937147252044'
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
setTimeout(() => {
|
||||
this.barcode()
|
||||
}, 50)
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
barcode() {
|
||||
//输入框如果type=number 则返回的是Number类型值
|
||||
if (String(this.val).length === 13) {
|
||||
this.$refs.barcode.draw()
|
||||
} else {
|
||||
this.fui.toast('请输入13位条形码！')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-input__box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fui-tips {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
color: #7F7F7F;
|
||||
font-weight: 400;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
434
pages/component/canvas/poster/poster.vue
Normal file
434
pages/component/canvas/poster/poster.vue
Normal file
@ -0,0 +1,434 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 140725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Poster <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Poster 分享海报 ，传入JSON数据生成海报。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基本使用" bold :margin="['24rpx']"
|
||||
@click="poster(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="生成商品海报" bold @click="poster(2)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="First UI分享海报" bold :margin="['24rpx']"
|
||||
@click="share"></fui-button>
|
||||
</view>
|
||||
<fui-poster ref="generator" :width="560" :height="980" @ready="ready"></fui-poster>
|
||||
|
||||
<!-- #ifdef MP-BAIDU-->
|
||||
<fui-animation :duration="500" :animationType="['fade']" :styles="styles" :show="show" @click="handleClick">
|
||||
<view class="fui-ani__box">
|
||||
<image class="fui-poster__img" :src="showFilePath" mode="widthFix"></image>
|
||||
<view class="fui-flex__center">
|
||||
<fui-button type="purple" btn-size="medium" radius="100rpx" @click="saveImage">保存到相册
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</fui-animation>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
//注意：头条小程序颜色值不支持简写如：#333，必须写成：#333333
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isReady: false,
|
||||
//基本使用案例数据
|
||||
basicData: {
|
||||
blocks: [{
|
||||
//背景
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 560,
|
||||
height: 980,
|
||||
backgroundColor: '#ffffff'
|
||||
}, {
|
||||
//带圆角
|
||||
x: 20,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#465CFF',
|
||||
zIndex: 2
|
||||
}, {
|
||||
//渐变背景
|
||||
x: 140,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 200,
|
||||
backgroundColor: '#FF2B2B',
|
||||
gradientColor: '#6831FF',
|
||||
zIndex: 2
|
||||
}, {
|
||||
//带边框
|
||||
x: 260,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderWidth: 1,
|
||||
borderColor: '#465CFF',
|
||||
zIndex: 2
|
||||
}, {
|
||||
//圆形
|
||||
x: 380,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 100,
|
||||
backgroundColor: '#465CFF',
|
||||
zIndex: 2
|
||||
}],
|
||||
imgs: [{
|
||||
imgResource: '/static/images/common/img_logo.png',
|
||||
x: 20,
|
||||
y: 260,
|
||||
width: 100,
|
||||
height: 100,
|
||||
zIndex: 2
|
||||
}, {
|
||||
imgResource: '/static/images/common/img_logo.png',
|
||||
x: 140,
|
||||
y: 260,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 16,
|
||||
zIndex: 2
|
||||
}, {
|
||||
imgResource: '/static/images/common/img_logo.png',
|
||||
x: 260,
|
||||
y: 260,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 100,
|
||||
zIndex: 2
|
||||
}],
|
||||
texts: [{
|
||||
text: 'First UI',
|
||||
x: 20,
|
||||
y: 420,
|
||||
fontSize: 32,
|
||||
color: '#181818',
|
||||
width: 520,
|
||||
fontWeight: 'bold',
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
|
||||
x: 20,
|
||||
y: 460,
|
||||
fontSize: 20,
|
||||
color: '#181818',
|
||||
width: 496,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
|
||||
x: 20,
|
||||
y: 520,
|
||||
fontSize: 20,
|
||||
lineHeight: 32,
|
||||
color: '#B2B2B2',
|
||||
width: 496,
|
||||
rows: 2,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: '此段文字作废',
|
||||
x: 20,
|
||||
y: 620,
|
||||
fontSize: 22,
|
||||
color: '#B2B2B2',
|
||||
width: 500,
|
||||
lineThrough: true,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: 'End!',
|
||||
x: 20,
|
||||
y: 916,
|
||||
fontSize: 44,
|
||||
color: '#465CFF',
|
||||
width: 500,
|
||||
fontWeight: 'bold',
|
||||
zIndex: 6
|
||||
}],
|
||||
lines: [{
|
||||
x: 20,
|
||||
y: 660,
|
||||
endX: 220,
|
||||
endY: 660,
|
||||
color: '#181818',
|
||||
width: 1,
|
||||
zIndex: 4
|
||||
}, {
|
||||
x: 20,
|
||||
y: 700,
|
||||
endX: 240,
|
||||
endY: 700,
|
||||
color: '#09BE4F',
|
||||
width: 4,
|
||||
zIndex: 4
|
||||
}, {
|
||||
x: 20,
|
||||
y: 740,
|
||||
endX: 240,
|
||||
endY: 780,
|
||||
color: '#6831FF',
|
||||
width: 4,
|
||||
zIndex: 4
|
||||
}, {
|
||||
x: 20,
|
||||
y: 780,
|
||||
endX: 240,
|
||||
endY: 740,
|
||||
color: '#FFB703',
|
||||
width: 4,
|
||||
zIndex: 5
|
||||
}, {
|
||||
x: 20,
|
||||
y: 820,
|
||||
endX: 520,
|
||||
endY: 820,
|
||||
color: '#465CFF',
|
||||
width: 4,
|
||||
zIndex: 5
|
||||
}]
|
||||
},
|
||||
//商品海报数据
|
||||
goodsData: {
|
||||
blocks: [{
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 560,
|
||||
height: 980,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 40
|
||||
}, {
|
||||
x: 56,
|
||||
y: 128,
|
||||
width: 448,
|
||||
height: 648,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 24,
|
||||
zIndex: 2
|
||||
}],
|
||||
imgs: [{
|
||||
imgResource: '/static/images/component/img_bg_poster.png',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 560,
|
||||
height: 800,
|
||||
zIndex: 1
|
||||
}, {
|
||||
imgResource: '/static/images/component/img_goods_3x.jpg',
|
||||
x: 56,
|
||||
y: 128,
|
||||
width: 448,
|
||||
height: 448,
|
||||
borderRadius: 24,
|
||||
zIndex: 3
|
||||
}, {
|
||||
imgResource: '/static/images/qrcode/wx_qrcode.jpg',
|
||||
x: 378,
|
||||
y: 822,
|
||||
width: 136,
|
||||
height: 136,
|
||||
zIndex: 2
|
||||
}],
|
||||
texts: [{
|
||||
text: '满赠促销 满50件送赠品',
|
||||
x: 280,
|
||||
y: 68,
|
||||
fontSize: 38,
|
||||
color: '#FFFFFF',
|
||||
width: 400,
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
zIndex: 2
|
||||
}, {
|
||||
text: '活动时间: 7月2日-7月20日',
|
||||
x: 280,
|
||||
y: 104,
|
||||
fontSize: 22,
|
||||
color: '#FFFFFF',
|
||||
width: 260,
|
||||
textAlign: 'center',
|
||||
zIndex: 2
|
||||
}, {
|
||||
text: '三奇医疗 3Q一次性医用外科口罩透气轻薄成人3层医用口罩 1袋10只',
|
||||
x: 85,
|
||||
y: 620,
|
||||
fontSize: 24,
|
||||
lineHeight: 36,
|
||||
color: '#333333',
|
||||
width: 380,
|
||||
rows: 2,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: '热销商品 每满1000减90！',
|
||||
x: 85,
|
||||
y: 696,
|
||||
fontSize: 18,
|
||||
color: '#999999',
|
||||
fontWeight: 'normal',
|
||||
width: 388,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: '￥7.00',
|
||||
x: 84,
|
||||
y: 746,
|
||||
fontSize: 32,
|
||||
color: '#FF2B2B',
|
||||
width: 200,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: '￥12.00',
|
||||
x: 84,
|
||||
y: 746,
|
||||
fontSize: 20,
|
||||
color: '#999999',
|
||||
width: 200,
|
||||
lineThrough: true,
|
||||
frontText: '￥7.00',
|
||||
frontSize: 32,
|
||||
spacing: 12,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: 'First UI 商城小程序',
|
||||
x: 50,
|
||||
y: 870,
|
||||
fontSize: 30,
|
||||
color: '#333333',
|
||||
width: 290,
|
||||
zIndex: 2
|
||||
}, {
|
||||
text: '长按识别 购好物',
|
||||
x: 50,
|
||||
y: 922,
|
||||
fontSize: 24,
|
||||
color: '#666666',
|
||||
width: 180,
|
||||
zIndex: 2
|
||||
}]
|
||||
},
|
||||
//海报绘制完成保存路径，避免重复绘制
|
||||
filePath: '',
|
||||
goodsFilePath: '',
|
||||
showFilePath: '',
|
||||
show: false,
|
||||
styles: {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
display: 'flex',
|
||||
'justify-content': 'center',
|
||||
'align-items': 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.6)'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: mapState(['status']),
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
ready() {
|
||||
this.isReady = true;
|
||||
},
|
||||
previewImage() {
|
||||
/*百度小程序只支持打开网络路径，不支持本地临时路径*/
|
||||
// #ifndef MP-BAIDU
|
||||
uni.previewImage({
|
||||
// #ifdef MP-ALIPAY
|
||||
enablesavephoto: true,
|
||||
enableShowPhotoDownload: true,
|
||||
// #endif
|
||||
urls: [this.showFilePath]
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
setTimeout(() => {
|
||||
this.show = true
|
||||
}, 50)
|
||||
// #endif
|
||||
},
|
||||
poster(type) {
|
||||
if (this.isReady) {
|
||||
//已经绘制直接使用，避免重复绘制
|
||||
// #ifdef MP-BAIDU || MP-TOUTIAO
|
||||
if (this.status == 0) {
|
||||
this.fui.toast('功能完善中~')
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
this.showFilePath = type === 1 ? this.filePath : this.goodsFilePath;
|
||||
if (this.showFilePath) {
|
||||
this.previewImage()
|
||||
} else {
|
||||
//绘制海报
|
||||
uni.showLoading({
|
||||
title: '正在生成...'
|
||||
})
|
||||
this.$refs.generator.generatePoster(type === 1 ? this.basicData : this.goodsData, (res) => {
|
||||
//海报图片res
|
||||
console.log(res)
|
||||
this.showFilePath = res;
|
||||
if (type === 1) {
|
||||
this.filePath = res;
|
||||
} else {
|
||||
this.goodsFilePath = res
|
||||
}
|
||||
this.previewImage()
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
this.fui.toast('组件尚未初始化完成！')
|
||||
}
|
||||
},
|
||||
share() {
|
||||
// #ifdef MP-BAIDU || MP-TOUTIAO
|
||||
if (this.status == 0) {
|
||||
this.fui.toast('功能完善中~')
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
this.fui.href("/pages/my/share/share")
|
||||
},
|
||||
handleClick() {
|
||||
this.show = false;
|
||||
},
|
||||
saveImage() {
|
||||
this.$refs.generator.saveImage(this.filePath)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-ani__box {
|
||||
width: 580rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.fui-poster__img {
|
||||
width: 100%;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 30rpx;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
62
pages/component/canvas/qrcode/qrcode.vue
Normal file
62
pages/component/canvas/qrcode/qrcode.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 40 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Qrcode <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Qrcode 二维码，主要用于存储网址、名片、文本信息、特定代码等信息。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-textarea__box">
|
||||
<fui-textarea v-model="val"></fui-textarea>
|
||||
</view>
|
||||
<fui-button type="gray" btn-size="medium" text="生成" bold :margin="['32rpx','0','64rpx']"
|
||||
@click="qrcode">
|
||||
</fui-button>
|
||||
<fui-qrcode :value="value" @ready="ready"></fui-qrcode>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
val: 'https://doc.firstui.cn',
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.value = this.val
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
qrcode() {
|
||||
this.value = this.val
|
||||
},
|
||||
ready(e){
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-textarea__box {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user