shop-applet/components/barcode.vue

122 lines
2.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="component text-center">
<view class="component-title">{{name}}</view>
<view class="component-code">
<tki-barcode ref="barcode" onval :val="code" :load-make="true" :opations="barOpations" />
</view>
<view class="example">{{code}}</view>
<!-- <view class="component-qr">
<tki-qrcode
ref="qrcode"
onval
:val="code"
:size="250"
:load-make="true"
:show-loading="false"/>
</view> -->
<!-- <view class="coupon-no-view">
<text>编号</text>
<text class="coupon-no">{{ code }}</text>
</view> -->
</view>
</template>
<script>
import tkiBarcode from '@/components/tki-barcode/tki-barcode'
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode'
export default {
components: {
tkiBarcode,
tkiQrcode
},
data() {
return {
name: '',
code: '',
barOpations: {
height: 150,
displayValue: false
}
}
},
methods: {
init(val) {
this.name = val.name;
this.code = val.code // 生成一维码和二维码
// setTimeout(() => {
// this.code = '0987654321' // 5 秒后刷新一维码和二维码
// }, 5000)
}
}
}
</script>
<style lang="scss" scoped>
.component {
border-radius: 16rpx;
overflow: hidden;
display: flex;
flex-direction: column;
background: #FFFFFF;
flex: 1;
margin: 32rpx;
padding: 64rpx 32rpx;
&-title {
max-height: 112rpx;
font-size: 40rpx;
font-weight: 600;
line-height: 56rpx;
overflow: hidden;
}
&-code {
height: 150rpx;
margin: 32rpx 32rpx 0;
}
&-qr {
height: 250rpx;
margin-top: 36rpx;
}
.coupon-no-view {
margin: 0 18rpx;
height: 76rpx;
border-radius: 8rpx;
border: 2px solid #F5F5F5;
display: flex;
align-items: center;
padding: 0 24rpx;
margin-top: 36rpx;
text {
font-size: 24rpx;
font-weight: 400;
&:first-child {
color: #999999;
}
}
.coupon-no {
flex: 1;
text-align: left;
}
}
}
.component-title {
text-align: center;
font-size: 34rpx;
}
.example {
text-align: center;
letter-spacing: 12rpx;
/* 设置字符间距 */
font-weight: bold;
font-size: 32rpx;
}
</style>