6.30 版本提交
This commit is contained in:
尚政杰
204
components/codeImg/codeImg.vue
Normal file
204
components/codeImg/codeImg.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<view>
|
||||
<image v-if="img" class="img" :src="img" mode="aspectFit"></image>
|
||||
<canvas v-else type='2d' id="scanvas" canvas-id="scanvas" :style="'width:'+props.contentWidth+'px;'+'height:'+props.contentHeight+'px;'" @click="reDrawPic()"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, onMounted,ref,watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
codeStr:{
|
||||
type:String,
|
||||
default:'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
|
||||
},
|
||||
fontSizeMin:{
|
||||
type:Number,
|
||||
default:25
|
||||
},
|
||||
fontSizeMin:{
|
||||
type:Number,
|
||||
default:25
|
||||
},
|
||||
fontSizeMax:{
|
||||
type:Number,
|
||||
default:35
|
||||
},
|
||||
backgroundColorMin:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
backgroundColorMax:{
|
||||
type:Number,
|
||||
default:255
|
||||
},
|
||||
colorMin:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
colorMax:{
|
||||
type:Number,
|
||||
default:160
|
||||
},
|
||||
lineColorMin:{
|
||||
type:Number,
|
||||
default:40
|
||||
},
|
||||
lineColorMax:{
|
||||
type:Number,
|
||||
default:180
|
||||
},
|
||||
dotColorMin:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
dotColorMax:{
|
||||
type:Number,
|
||||
default:255
|
||||
},
|
||||
contentWidth:{
|
||||
type:Number,
|
||||
default:112
|
||||
},
|
||||
contentHeight:{
|
||||
type:Number,
|
||||
default:30
|
||||
},
|
||||
})
|
||||
const context = ref(null)
|
||||
const img = ref('')
|
||||
|
||||
const emit = defineEmits(['updateValue'])
|
||||
|
||||
const randomNum = (min,max) => {
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
}
|
||||
|
||||
const randomColor = (min,max,a) => {
|
||||
let r = randomNum(min,max)
|
||||
let g = randomNum(min,max)
|
||||
let b = randomNum(min,max)
|
||||
return 'rgba('+ r +','+ g +','+ b +','+a+')'
|
||||
}
|
||||
const drawLine = (ctx) =>{
|
||||
for (var i = 0; i < 5; i++) {
|
||||
ctx.strokeStyle = randomColor(props.lineColorMin,props.lineColorMax,1)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(randomNum(0,props.contentWidth),randomNum(0,props.contentHeight))
|
||||
ctx.lineTo(randomNum(0,props.contentWidth),randomNum(0,props.contentHeight))
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
|
||||
const makeCode = () =>{
|
||||
let codeStr = ''
|
||||
let codeSet = props.codeStr
|
||||
for (let i = 0; i < 4; i++) {
|
||||
codeStr += codeSet[randomNum(0,codeSet.length)]
|
||||
}
|
||||
return codeStr
|
||||
}
|
||||
|
||||
const drawText = (ctx, txt, i) =>{
|
||||
ctx.fillStyle = '#333'
|
||||
ctx.font = randomNum(props.fontSizeMin,props.fontSizeMax)+'px SimHei'
|
||||
let x = (i+1) * (props.contentWidth / 5)
|
||||
let y = randomNum(props.fontSizeMax,props.contentHeight-5)
|
||||
var deg = randomNum(-45,45)
|
||||
ctx.translate(x,y)
|
||||
ctx.rotate((deg * Math.PI) / 180)
|
||||
ctx.fillText(txt,0,0)
|
||||
ctx.rotate((-deg * Math.PI) / 180)
|
||||
ctx.translate(-x,-y)
|
||||
}
|
||||
const drawDot = (ctx) =>{
|
||||
for (var i = 0; i < 80; i++) {
|
||||
ctx.fillStyle = randomColor(0,255)
|
||||
ctx.beginPath()
|
||||
ctx.arc(randomNum(0,props.contentWidth),randomNum(0,props.contentHeight),1,0,2 * Math.PI)
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
|
||||
const drawPic = () =>{
|
||||
const query = uni.createSelectorQuery().in(getCurrentInstance().proxy)
|
||||
query.select('#scanvas').fields({ node: true, size: true }).exec((res) => {
|
||||
console.log(res)
|
||||
const canvas = res[0].node
|
||||
const ctx = canvas.getContext('2d')
|
||||
console.log(ctx)
|
||||
const dpr = wx.getSystemInfoSync().pixelRatio
|
||||
canvas.width = res[0].width * dpr
|
||||
canvas.height = res[0].height * dpr
|
||||
ctx.scale(dpr, dpr)
|
||||
ctx.clearRect(0,0,props.contentWidth,props.contentHeight)
|
||||
ctx.textBaseline = 'bottom'
|
||||
ctx.fillStyle = randomColor(props.backgroundColorMin,props.backgroundColorMax,.2)
|
||||
ctx.fillRect(0,0,props.contentWidth,props.contentHeight)
|
||||
|
||||
let str = makeCode()
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
drawText(ctx,str[i],i)
|
||||
}
|
||||
emit('updateValue',str)
|
||||
drawLine(ctx)
|
||||
// drawDot(ctx)
|
||||
// ctx.draw()
|
||||
context.value = ctx
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId:'scanvas',
|
||||
success(res) {
|
||||
console.log(res)
|
||||
img.value = res.tempFilePath
|
||||
},
|
||||
fail(error) {
|
||||
console.log(error)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// let ctx = uni.createCanvasContext('scanvas',getCurrentInstance())
|
||||
|
||||
}
|
||||
|
||||
const reDrawPic = () =>{
|
||||
img.value = ''
|
||||
let ctx = context.value
|
||||
ctx.clearRect(0,0,props.contentWidth,props.contentHeight)
|
||||
ctx.textBaseline = 'bottom'
|
||||
ctx.fillStyle = randomColor(props.backgroundColorMin,props.backgroundColorMax,.2)
|
||||
ctx.fillRect(0,0,props.contentWidth,props.contentHeight)
|
||||
|
||||
let str = makeCode()
|
||||
emit('updateValue',str)
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
drawText(ctx,str[i],i)
|
||||
}
|
||||
drawLine(ctx)
|
||||
// drawDot(ctx)
|
||||
// ctx.draw()
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId:'scanvas',
|
||||
success(res) {
|
||||
console.log(res)
|
||||
img.value = res.tempFilePath
|
||||
},
|
||||
fail(error) {
|
||||
console.log(error)
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(()=>{
|
||||
drawPic()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.img
|
||||
{
|
||||
width: 112px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
189
components/navBar/navBar.vue
Normal file
189
components/navBar/navBar.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<view class="nav flex fixed" :style="navBarStyle">
|
||||
<image class="bg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||
<view class="backC relative flex" :style="backTitleStyle" @click="clickBack">
|
||||
<image v-if="!hideBack&&!backBlack" class="icon" src="/static/icon/back.png" mode="widthFix"></image>
|
||||
<image v-if="!hideBack&&backBlack" class="icon" src="/static/icon/backBlack.png" mode="widthFix"></image>
|
||||
<text class="title">{{leftText}}</text>
|
||||
</view>
|
||||
<view class="titleC relative" :style="navTitleStyle">
|
||||
{{navTitle}}
|
||||
<view v-if="num>0" class="peopleNum absolute">
|
||||
<view class="num">{{num}}人</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue'
|
||||
const app = getApp()
|
||||
|
||||
export default {
|
||||
name: "navBar",
|
||||
data() {
|
||||
return {
|
||||
// #ifdef MP-WEIXIN
|
||||
navH: inject('navHeight'),
|
||||
menuH: inject('menuHeight'),
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
navH: app.globalData.navHeight,
|
||||
menuH: app.globalData.menuHeight,
|
||||
// #endif
|
||||
navBarStyle:'',
|
||||
backTitleStyle:'',
|
||||
navTitleStyle:'',
|
||||
titleColor:this.navTitleColor,
|
||||
bgColor:this.navBgColor,
|
||||
num:this.peopleNum
|
||||
};
|
||||
},
|
||||
props: {
|
||||
leftText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
backBlack:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
navTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
navBgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
navTitleColor: {
|
||||
type: String,
|
||||
default: 'white'
|
||||
},
|
||||
hideBack: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hideNavBg: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
backLevel: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
peopleNum: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let navHeight = this.navH;
|
||||
// #ifdef MP-WEIXIN
|
||||
let menuHeight = inject('menuHeight');
|
||||
let menuTop = inject('menuTop');
|
||||
// #endif
|
||||
if (this.hideNavBg) {
|
||||
this.bgColor = 'transparent'
|
||||
}
|
||||
let navBarStyle = `background-color:${this.bgColor};height:${navHeight}px;`
|
||||
let backTitleStyle = `height:${menuHeight}px;margin-top:${menuTop}px;color:${this.titleColor}`
|
||||
let navTitleStyle = `height:${menuHeight}px;line-height:${menuHeight}px;top:${menuTop}px;color:${this.titleColor}`
|
||||
this.navBarStyle = navBarStyle
|
||||
this.backTitleStyle = backTitleStyle
|
||||
this.navTitleStyle = navTitleStyle
|
||||
},
|
||||
watch:{
|
||||
navTitleColor:{
|
||||
handler(newVal, oldVal)
|
||||
{
|
||||
this.titleColor = newVal
|
||||
}
|
||||
},
|
||||
navBgColor:{
|
||||
handler(newVal, oldVal)
|
||||
{
|
||||
this.bgColor = newVal
|
||||
}
|
||||
},
|
||||
peopleNum:{
|
||||
handler(newVal, oldVal)
|
||||
{
|
||||
this.num = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
clickBack()
|
||||
{
|
||||
uni.navigateBack({
|
||||
fail() {
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.nav
|
||||
{
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
overflow: hidden;
|
||||
.bg
|
||||
{
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.backC
|
||||
{
|
||||
padding: 0 25rpx;
|
||||
.icon
|
||||
{
|
||||
margin-right: 12rpx;
|
||||
width: 32rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.title
|
||||
{
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.titleC
|
||||
{
|
||||
position: absolute;
|
||||
left: calc((100% - 400rpx)/2);
|
||||
width: 400rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
.peopleNum
|
||||
{
|
||||
background-color: #3B9174;
|
||||
top: -15rpx;
|
||||
left: 270rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 15px 15px 15px 0px;
|
||||
line-height: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: white;
|
||||
.num
|
||||
{
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
138
components/tabbar/tabbar.vue
Normal file
138
components/tabbar/tabbar.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="tab-bar">
|
||||
<view v-for="(item,index) in list" :key="index" :class="'tab-bar-item '+(item.bulge?'bulge':'')" @click="item.jump=='nav'?navigateTo(item.pagePath,index):switchTab(item.pagePath,index)">
|
||||
<image class="image" :src="selected == index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
|
||||
<view v-if="item.text" class="tab-bar-view" :style="'color: '+(selected==index?selectedColor:color)+';'">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"tabbar",
|
||||
data() {
|
||||
return {
|
||||
color: "#504E4E",
|
||||
selected:0,
|
||||
selectedColor: "#504E4E",
|
||||
list: [
|
||||
{
|
||||
pagePath: "/pages/index/index",
|
||||
text: "首页",
|
||||
iconPath: "/static/icon/tabbar/home.png",
|
||||
selectedIconPath: "/static/icon/tabbar/home.png"
|
||||
},
|
||||
{
|
||||
pagePath: "/pages/classify/classify",
|
||||
text: "分类",
|
||||
iconPath: "/static/icon/tabbar/classify.png",
|
||||
selectedIconPath: "/static/icon/tabbar/classify.png"
|
||||
},
|
||||
// {
|
||||
// pagePath: "/pages/shoppingCart/shoppingCart",
|
||||
// text: "购物车",
|
||||
// iconPath: "/static/icon/tabbar/shoppingCart.png",
|
||||
// selectedIconPath: "/static/icon/tabbar/shoppingCart.png"
|
||||
// },
|
||||
// {
|
||||
// pagePath: "/pages/sharedRespository/sharedRespository",
|
||||
// text: "共享仓",
|
||||
// iconPath: "/static/icon/tabbar/sharedRespository.png",
|
||||
// selectedIconPath: "/static/icon/tabbar/sharedRespository.png"
|
||||
// },
|
||||
{
|
||||
pagePath: "/pages/mine/mine",
|
||||
text: "我的",
|
||||
iconPath: "/static/icon/tabbar/mine.png",
|
||||
selectedIconPath: "/static/icon/tabbar/mine.png"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
props:{
|
||||
current:Number
|
||||
},
|
||||
methods:{
|
||||
switchTab(url,index) {
|
||||
if(index==2||index==4)
|
||||
{
|
||||
//如果是购物车和我的，需要登录
|
||||
let token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
uni.switchTab({url})
|
||||
},
|
||||
navigateTo(url,index) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.tab-bar {
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: content-box;
|
||||
box-shadow: 0 0 5rpx 0 rgba(145,145,145,0.53);
|
||||
z-index: 99;
|
||||
.tab-bar-item
|
||||
{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.image {
|
||||
margin: 16rpx 0 8rpx 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bulge
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
.bulge .image
|
||||
{
|
||||
position: absolute;
|
||||
top: -47rpx;
|
||||
width: 94rpx;
|
||||
height: 94rpx;
|
||||
}
|
||||
.bulge .tab-bar-view
|
||||
{
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
.tab-bar-item .tab-bar-view {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.tab-bar .bg
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user