feat: 小程序
This commit is contained in:
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<up-popup
|
||||
:show="show"
|
||||
:round="24"
|
||||
:closeOnClickOverlay="false"
|
||||
>
|
||||
<view class="share-popup-view">
|
||||
<view class="share-head">
|
||||
<text class="text-28 text-zu1">分享信任桥</text>
|
||||
</view>
|
||||
<view class="share-btn-view">
|
||||
<view class="share-box" @click="onBtn(index)" v-for="(item,index) in btnList" :key="index">
|
||||
<image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${index}.png`" class="share-img"></image>
|
||||
<text class="text-24 text-zu1">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="share-line" style="margin-top:40rpx;"></view>
|
||||
<view class="qr-view" v-if="qrvalue">
|
||||
<tki-qrcode ref="qrcode" :val="qrvalue" :size="252" />
|
||||
</view>
|
||||
<view class="share-line" style="min-height:16rpx;height:16rpx">
|
||||
</view>
|
||||
<view class="share-bottom" @click="onClose">
|
||||
<text class="text-32 text-fu1">取消</text>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="share-top-image-view">
|
||||
<image :src="tu" class="tu-img"></image>
|
||||
<view class="image-view-bottom">
|
||||
<view class="image-view-bottom-left">
|
||||
<text class="text-24 text-zu1 text-overflow1">{{text}}</text>
|
||||
</view>
|
||||
<view class="image-view-bottom-right">
|
||||
<text class="text-24 text-zi">￥{{price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Func from '/utils/func'
|
||||
import tkiQrcode from './tki-qrcode/tki-qrcode.vue'
|
||||
import {SHARE_URL} from '@/utils/config.js'
|
||||
export default {
|
||||
components:{tkiQrcode},
|
||||
data() {
|
||||
return {
|
||||
btnList:['微信','朋友圈','复制链接','保存图片','QQ'],
|
||||
qrvalue:''
|
||||
}
|
||||
},
|
||||
props:{
|
||||
show:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
id:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
tu:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
price:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
text:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
|
||||
},
|
||||
mounted(){
|
||||
this.qrvalue = `${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id}`
|
||||
this.$nextTick(()=>{
|
||||
if(this.qrvalue){
|
||||
this.creatQrcode();
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
creatQrcode() {
|
||||
this.$refs.qrcode._makeCode();
|
||||
},
|
||||
onBtn(index){
|
||||
if(index == 2){
|
||||
let tmp = `【信任桥】消费共享数字化权益 ${this.qrvalue} ${this.text}`;
|
||||
// #ifdef APP-PLUS
|
||||
uni.setClipboardData({
|
||||
data:tmp,
|
||||
success:function(res){
|
||||
uni.getClipboardData({
|
||||
success:function(res){
|
||||
Func.myToast('复制成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.$copyText(tmp).then(res=>{
|
||||
console.log('resresresres',res)
|
||||
Func.myToast('复制成功')
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
this.$emit('share',index)
|
||||
|
||||
},
|
||||
onClose(){
|
||||
this.$emit('close');
|
||||
},
|
||||
onOk(){
|
||||
Func.debounce(this.dOk())
|
||||
},
|
||||
dOk(){
|
||||
this.$emit('ok');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.share-top-image-view{
|
||||
width:400rpx;
|
||||
min-height:496rpx;
|
||||
height:496rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top:-638rpx;
|
||||
.image-view-bottom{
|
||||
width:100%;
|
||||
flex:1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top:20rpx;
|
||||
.image-view-bottom-left{
|
||||
height:72rpx;
|
||||
min-height:72rpx;
|
||||
border-right: 2rpx solid #EBEBEB;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 10rpx;
|
||||
|
||||
}
|
||||
.image-view-bottom-right{
|
||||
// min-width:130rpx;
|
||||
margin-left:10rpx;
|
||||
height:72rpx;
|
||||
min-height:72rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.tu-img{
|
||||
width:100%;
|
||||
height:344rpx;
|
||||
}
|
||||
}
|
||||
.share-popup-view{
|
||||
width:100%;
|
||||
height:796rpx;
|
||||
min-height:796rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
position: relative;
|
||||
.share-head{
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.share-bottom{
|
||||
width:100%;
|
||||
height:92rpx;
|
||||
min-height:92rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.share-line{
|
||||
display: flex;
|
||||
width:100%;
|
||||
height:2rpx;
|
||||
min-height:2rpx;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.qr-view{
|
||||
width:100%;
|
||||
height:332rpx;
|
||||
min-height:332rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.share-btn-view{
|
||||
width:100%;
|
||||
height:124rpx;
|
||||
min-height:124rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// padding: 0 36rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top:36rpx;
|
||||
.share-box{
|
||||
flex:1;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.share-img{
|
||||
width:80rpx;
|
||||
height:80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,211 @@
|
||||
<template xlang="wxml" minapp="mpvue">
|
||||
<view class="tki-qrcode">
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" />
|
||||
<!-- #endif -->
|
||||
<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from "./qrcode.js"
|
||||
let qrcode
|
||||
export default {
|
||||
name: "tki-qrcode",
|
||||
props: {
|
||||
cid: {
|
||||
type: String,
|
||||
default: 'tki-qrcode-canvas'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'upx'
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
val: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
foreground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
pdground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
lv: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
onval: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadMake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
usingComponents: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '二维码生成中'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_makeCode() {
|
||||
let that = this
|
||||
if (!this._empty(this.val)) {
|
||||
qrcode = new QRCode({
|
||||
context: that, // 上下文环境
|
||||
canvasId:that.cid, // canvas-id
|
||||
usingComponents: that.usingComponents, // 是否是自定义组件
|
||||
showLoading: that.showLoading, // 是否显示loading
|
||||
loadingText: that.loadingText, // loading文字
|
||||
text: that.val, // 生成内容
|
||||
size: that.cpSize, // 二维码大小
|
||||
background: that.background, // 背景色
|
||||
foreground: that.foreground, // 前景色
|
||||
pdground: that.pdground, // 定位角点颜色
|
||||
correctLevel: that.lv, // 容错级别
|
||||
image: that.icon, // 二维码图标
|
||||
imageSize: that.iconSize,// 二维码图标大小
|
||||
cbResult: function (res) { // 生成二维码的回调
|
||||
that._result(res)
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '二维码内容不能为空',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
_clearCode() {
|
||||
this._result('')
|
||||
qrcode.clear()
|
||||
},
|
||||
_saveCode() {
|
||||
let that = this;
|
||||
if (this.result != "") {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.result,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '二维码保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
_result(res) {
|
||||
this.result = res;
|
||||
this.$emit('result', res)
|
||||
},
|
||||
_empty(v) {
|
||||
let tp = typeof v,
|
||||
rt = false;
|
||||
if (tp == "number" && String(v) == "") {
|
||||
rt = true
|
||||
} else if (tp == "undefined") {
|
||||
rt = true
|
||||
} else if (tp == "object") {
|
||||
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
|
||||
} else if (tp == "string") {
|
||||
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
|
||||
} else if (tp == "function") {
|
||||
rt = false
|
||||
}
|
||||
return rt
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
size: function (n, o) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
this.cSize = n
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
},
|
||||
val: function (n, o) {
|
||||
if (this.onval) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cpSize() {
|
||||
if(this.unit == "upx"){
|
||||
return uni.upx2px(this.size)
|
||||
}else{
|
||||
return this.size
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.loadMake) {
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.tki-qrcode {
|
||||
position: relative;
|
||||
}
|
||||
.tki-qrcode-canvas {
|
||||
position: fixed;
|
||||
top: -99999upx;
|
||||
left: -99999upx;
|
||||
z-index: -99999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user