feat: 小程序
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<view class="flex-r-lr mt-24">
|
||||
<view></view>
|
||||
<text class="text-zu1 text-32">{{title}}</text>
|
||||
<image src="@/static/new/close.png" @click.stop="onCancel" class="close-img"></image>
|
||||
<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/close.png" @click.stop="onCancel" class="close-img"></image>
|
||||
</view>
|
||||
<text class="text-zu1 text-48 mt-88">{{articleTitle}}</text>
|
||||
<view class="content-text mt-48">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
>
|
||||
<view class="home-popup-view" v-if="dataObj">
|
||||
<view class="home-popup-head">
|
||||
<image src="/static/new/logo.png" class="logo-img"></image>
|
||||
<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/logo.png" class="logo-img"></image>
|
||||
<text class="text-28 text-zu" style="margin-left:14rpx">信任桥</text>
|
||||
<text class="text-28 text-fu" style="margin-left:14rpx">分享商品</text>
|
||||
</view>
|
||||
|
||||
@@ -1,245 +0,0 @@
|
||||
<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="`/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 '@/components/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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
@@ -1,170 +0,0 @@
|
||||
<!--
|
||||
转盘
|
||||
@Author: mosowe
|
||||
@Date:2023-08-10 18:01:01
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="rotary-table-component"
|
||||
:style="{
|
||||
width: props.radius * 2 + 'rpx',
|
||||
height: props.radius * 2 + 'rpx'
|
||||
}">
|
||||
<view
|
||||
class="content-table"
|
||||
:style="{
|
||||
transform: 'rotate(' + deg + 'deg)'
|
||||
}">
|
||||
<!-- <sector :radius="props.height / 2"></sector> -->
|
||||
<sector
|
||||
v-for="(item, index) in props.list"
|
||||
:key="index"
|
||||
:radius="props.radius"
|
||||
:text="item.title"
|
||||
:bgColor="item.bgColor"
|
||||
:color="item.color"
|
||||
:image="item.image"
|
||||
:size="item.size"
|
||||
:imageSize="item.imageSize"
|
||||
:angle="singleAngle"
|
||||
:index="index"></sector>
|
||||
</view>
|
||||
<view
|
||||
class="turntable_pointer"
|
||||
@click="start">
|
||||
<image
|
||||
src="./begin-btn.png"
|
||||
class="icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import sector from './sector.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
interface listItem {
|
||||
title: string; //文本
|
||||
color?: string; //文字颜色
|
||||
size?: string; // 文字字号
|
||||
bgColor?: string; //区域背景色
|
||||
image?: string; //图片
|
||||
imageSize?: string; //图片宽高
|
||||
}
|
||||
interface Props {
|
||||
list: listItem[]; // 奖项
|
||||
radius?: number; // 圆盘半径
|
||||
speed?: number; // 速度
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
radius: 300,
|
||||
speed: 20
|
||||
});
|
||||
|
||||
// emits
|
||||
interface EmitsType {
|
||||
(e: 'start'): void; // 开始抽奖
|
||||
(e: 'end'): void; // 结束
|
||||
}
|
||||
const emits = defineEmits<EmitsType>();
|
||||
|
||||
const deg = ref<number>(0);
|
||||
const singleAngle = computed(() => {
|
||||
return Number((360 / props.list.length).toFixed(2));
|
||||
});
|
||||
const isStart = ref(false);
|
||||
const timer = ref<any>(null);
|
||||
const awardNumer = ref<number>(0); // 中奖序号,0表示还没有给出，1开始算
|
||||
const endAddAngle = computed(() => {
|
||||
return 360 - ((awardNumer.value - 1) * singleAngle.value + singleAngle.value / 2); // 中奖角度
|
||||
});
|
||||
|
||||
// 点击开始抽奖
|
||||
const start = () => {
|
||||
emits('start');
|
||||
};
|
||||
// 开始转
|
||||
const begin = () => {
|
||||
if (isStart.value) return;
|
||||
isStart.value = true;
|
||||
turnRound();
|
||||
};
|
||||
|
||||
// 转动动画
|
||||
const turnRound = () => {
|
||||
let beginDeg = deg.value;
|
||||
let beginSpeed = props.speed;
|
||||
|
||||
const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360; // 随机旋转几圈再停止
|
||||
|
||||
let cAngle: any;
|
||||
beginDeg = 0;
|
||||
let waitDeg = 0; // 等待接口返回前转的角度
|
||||
|
||||
timer.value = setInterval(() => {
|
||||
if (!awardNumer.value) {
|
||||
beginDeg += beginSpeed;
|
||||
waitDeg = beginDeg;
|
||||
} else {
|
||||
if (waitDeg) {
|
||||
beginDeg = 0;
|
||||
waitDeg = 0;
|
||||
}
|
||||
if (beginDeg < rangeAngle) {
|
||||
beginDeg += beginSpeed;
|
||||
} else {
|
||||
let a = (endAddAngle.value + rangeAngle - beginDeg) / beginSpeed;
|
||||
cAngle = a > beginSpeed ? beginSpeed : a < 1 ? 1 : a;
|
||||
beginDeg += cAngle;
|
||||
|
||||
if (beginDeg >= endAddAngle.value + rangeAngle) {
|
||||
beginDeg = endAddAngle.value + rangeAngle;
|
||||
isStart.value = false;
|
||||
clearInterval(timer.value);
|
||||
emits('end');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
deg.value = beginDeg;
|
||||
}, 1000 / 60);
|
||||
};
|
||||
|
||||
// 准备停止转动
|
||||
const stop = (number: number) => {
|
||||
awardNumer.value = number;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
begin,
|
||||
stop
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rotary-table-component {
|
||||
border-radius: 50%;
|
||||
border: 1px solid #999;
|
||||
position: relative;
|
||||
background-color: lightseagreen;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.turntable_pointer {
|
||||
position: absolute;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(1deg);
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,124 +0,0 @@
|
||||
V3+ts专属版
|
||||
|
||||
非固定图片式转盘，可自定义传入奖项列表
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认 |
|
||||
| ------ | ----------- | ---------- | --- |
|
||||
| list | 奖项列表 | listItem[] | [] |
|
||||
| radius | 圆盘半径打，单位rpx | number | 300 |
|
||||
| speed | 转速 | number | 20 |
|
||||
|
||||
### listItem
|
||||
|
||||
| 属性 | 说明 | 类型 |
|
||||
| --------- | -------------- | ------ |
|
||||
| title | 奖项标题 | string |
|
||||
| color | 奖项标题颜色 | string |
|
||||
| size | 奖项标题字号大小，单位rpx | string |
|
||||
| bgColor | 奖项区背景色 | string |
|
||||
| image | 奖项图片地址 | string |
|
||||
| imageSize | 奖项图片尺寸，单位rpx | string |
|
||||
|
||||
## Events
|
||||
|
||||
| Events | 说明 |
|
||||
| ------ | -------- |
|
||||
| start | 点击中心按钮触发 |
|
||||
| end | 结束滚动 |
|
||||
|
||||
## 方法
|
||||
|
||||
通过ref调用
|
||||
|
||||
| 方法名 | 说明 |
|
||||
| ----- | -------------------- |
|
||||
| begin | 开始转动 |
|
||||
| stop | 准备停止转动，参数为中奖序号，从1开始算 |
|
||||
|
||||
## 示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="rotary-table">
|
||||
<mosowe-rotary-table
|
||||
ref="rotaryTableRef"
|
||||
:list="list"
|
||||
:radius="300"
|
||||
@start="start"
|
||||
@end="end"></mosowe-rotary-table>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const list = [
|
||||
{
|
||||
title: '一等奖',
|
||||
bgColor: '#ff0000',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '二等奖',
|
||||
bgColor: '#E6A23C',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
bgColor: '#67C23A',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg',
|
||||
imageSize: '120rpx'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '安慰奖',
|
||||
bgColor: '#409EFF',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
}
|
||||
];
|
||||
const rotaryTableRef = ref<any>(null);
|
||||
// 点击中心抽奖按钮
|
||||
const start = () => {
|
||||
rotaryTableRef.value?.begin(); // 开始转
|
||||
// ...中间请求下接口，查询中奖序号
|
||||
setTimeout(() => {
|
||||
// 准备结束转动，参数数字代表中奖项，即list列表的第几个，从1开始算
|
||||
rotaryTableRef.value?.stop(3);
|
||||
}, 1000);
|
||||
};
|
||||
// 转盘停止转动
|
||||
const end = () => {
|
||||
uni.showToast({
|
||||
title: '66666666'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
```
|
||||
@@ -1,144 +0,0 @@
|
||||
<!--
|
||||
扇形
|
||||
@Author: mosowe
|
||||
@Date:2023-08-10 15:32:28
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="sector-componnet"
|
||||
:style="{
|
||||
'--point-x': threePoint[0],
|
||||
'--point-y': threePoint[1],
|
||||
'--index-rotate': props.index * props.angle + 'deg',
|
||||
'--bg-color': props.bgColor,
|
||||
'--color': props.color,
|
||||
'--size': props.size,
|
||||
'--text-angle': props.angle / 2 - 45 + 'deg',
|
||||
'--text-origin': props.radius + 'rpx',
|
||||
'--text-translate-x-y': translateXY,
|
||||
'--radius': -props.radius + 'rpx',
|
||||
'--text-position': -(props.radius / 6) * 5 + 'rpx',
|
||||
'--image-size': props.imageSize || '30rpx'
|
||||
}">
|
||||
<view class="text-wrap">
|
||||
<view
|
||||
class="text"
|
||||
:class="{
|
||||
hasImage: props.image && props.text,
|
||||
justImage: props.image && !props.text
|
||||
}">
|
||||
<text
|
||||
class="title"
|
||||
v-if="props.text">
|
||||
{{ props.text }}
|
||||
</text>
|
||||
<image
|
||||
v-if="props.image"
|
||||
:src="props.image"
|
||||
class="image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
interface Props {
|
||||
text?: string;
|
||||
angle?: number;
|
||||
index?: number;
|
||||
bgColor?: string;
|
||||
color?: string;
|
||||
size?: string;
|
||||
radius?: number;
|
||||
image?: string;
|
||||
imageSize?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
text: '测试',
|
||||
angle: 45,
|
||||
index: 0,
|
||||
bgColor: '#ff0000',
|
||||
size: '24rpx',
|
||||
color: '#fff',
|
||||
radius: 300,
|
||||
image: '',
|
||||
imageSize: '60rpx'
|
||||
});
|
||||
|
||||
const threePoint = computed(() => {
|
||||
if (props.angle < 0 || props.angle > 180) {
|
||||
console.error('弧度值取值范围为0~180之间，当前值：' + props.angle);
|
||||
return [0, 0];
|
||||
}
|
||||
const a = (props.angle <= 90 ? props.angle : 180 - props.angle) * (Math.PI / 180); // 弧度转角度
|
||||
const r = props.radius;
|
||||
let x: string = '0%';
|
||||
let y: string = '0%';
|
||||
if (props.angle > 90) {
|
||||
y = '0%';
|
||||
x = (((r + r * Math.cos(a)) / 2 / r) * 100).toFixed(2) + '%';
|
||||
} else if (props.angle === 90) {
|
||||
x = '50%';
|
||||
y = '0%';
|
||||
} else {
|
||||
y = (((r - r * Math.sin(a)) / 2 / r) * 100).toFixed(2) + '%';
|
||||
x = (((r - r * Math.cos(a)) / 2 / r) * 100).toFixed(2) + '%';
|
||||
}
|
||||
return [x, y];
|
||||
});
|
||||
|
||||
const translateXY = computed(() => {
|
||||
return (Math.sqrt(props.radius * props.radius * 2) - props.radius - 30).toFixed(0) + 'rpx';
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sector-componnet {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
clip-path: polygon(0 0, 0 50%, 50% 50%, var(--point-x) var(--point-y));
|
||||
transform: rotate(calc(var(--index-rotate) + 90deg));
|
||||
.text-wrap {
|
||||
transform-origin: var(--text-origin) var(--text-origin);
|
||||
transform: rotate(var(--text-angle)) translateX(var(--text-translate-x-y))
|
||||
translateY(var(--text-translate-x-y));
|
||||
}
|
||||
.text {
|
||||
writing-mode: vertical-rl;
|
||||
font-size: var(--size);
|
||||
color: var(--color);
|
||||
transform: rotate(-45deg) translateX(75%);
|
||||
vertical-align: middle;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
transform: rotate(-45deg) translateX(50%);
|
||||
/* #endif */
|
||||
&.justImage {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&.hasImage {
|
||||
transform: rotate(-45deg) translateX(calc(var(--image-size) / 2));
|
||||
/* #ifdef MP-WEIXIN */
|
||||
transform: rotate(-45deg) translateX(45%);
|
||||
/* #endif */
|
||||
}
|
||||
.title {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.image {
|
||||
display: inline-block;
|
||||
width: var(--image-size);
|
||||
height: var(--image-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,9 +5,9 @@
|
||||
</view>
|
||||
<view class="shop-right-view">
|
||||
<view class="shop-top-img">
|
||||
<image src="/static/home/xyx.png" style="width: 122rpx;height: 28rpx;margin-right: 12rpx;"></image>
|
||||
<image src="/static/home/xs.png" v-if="obj.limitedTime " style="width: 52rpx;height: 28rpx;margin-right: 12rpx;"></image>
|
||||
<image src="/static/home/tg.png" v-if="obj.tag" style="width: 80rpx;height: 28rpx;"></image>
|
||||
<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/home/xyx.png" style="width: 122rpx;height: 28rpx;margin-right: 12rpx;"></image>
|
||||
<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/home/xs.png" v-if="obj.limitedTime " style="width: 52rpx;height: 28rpx;margin-right: 12rpx;"></image>
|
||||
<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/home/tg.png" v-if="obj.tag" style="width: 80rpx;height: 28rpx;"></image>
|
||||
</view>
|
||||
<view class="right-top-view text-overflow1">
|
||||
<text class="text-32 text-bold text-zu text-overflow1">{{obj.title}}</text>
|
||||
@@ -15,7 +15,7 @@
|
||||
<view class="shop-price" @ok.stop="onClick" >
|
||||
<view class="price-left"><text style="font-size: 24rpx;">¥</text>{{obj.price}}</view>
|
||||
<view class="price-center">专区立省{{ Number(obj.adPrice) - Number(obj.price) }}元</view>
|
||||
<image src="/static/home/qiang.png" style="width: 80rpx;height: 80rpx;"></image>
|
||||
<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/home/qiang.png" style="width: 80rpx;height: 80rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,211 +0,0 @@
|
||||
<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