<template>
|
<view>
|
<scroll-view
|
scroll-y
|
class="page"
|
>
|
<view class="list-container">
|
<view
|
class="list-item"
|
@click="toPage(item)"
|
:class="'bg-' + item.color"
|
:style="[
|
{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }
|
]"
|
v-for="(item, index) in elements"
|
:key="index"
|
>
|
<view class="item-icon">
|
<text :class="'cuIcon-' + item.cuIcon"></text>
|
</view>
|
<view class="item-content">
|
<view class="item-title">{{ item.title }}</view>
|
<view class="item-desc">{{ item.name }}</view>
|
</view>
|
<view class="item-arrow">
|
<text class="cuIcon-right"></text>
|
</view>
|
</view>
|
</view>
|
<view class="cu-tabbar-height"></view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
import { request } from '@/common/request.js'
|
export default {
|
data() {
|
return {
|
buttonPermissions: [],
|
elements: [
|
|
],
|
colorList: [
|
'cyan',
|
'blue',
|
'purple',
|
'mauve',
|
'pink',
|
'brown',
|
'red',
|
'orange',
|
'yellow',
|
'olive'
|
]
|
}
|
},
|
onLoad(option) {
|
this.backGroundRepeat()
|
},
|
mounted() {
|
// 获取按钮权限
|
this.buttonPermissions = uni.getStorageSync('buttonPermissions') || []
|
console.log('当前页面按钮权限:', this.buttonPermissions)
|
this.getType(this.buttonPermissions)
|
},
|
methods: {
|
async getType(type) {
|
const { code, data, msg } = await request(
|
'/orderOut/getType',
|
{
|
type
|
},
|
'post'
|
)
|
if (code === 200) {
|
data.map((item,index) => {
|
console.log(item,index)
|
this.elements.unshift({
|
title: item.label,
|
name: '',
|
color: this.colorList[index],
|
cuIcon: 'round',
|
url: `/outbound/orderOutView/orderList`,
|
id: item.value
|
})
|
})
|
} else {
|
uni.showToast({
|
title: msg,
|
icon: 'none',
|
position: 'top'
|
})
|
}
|
},
|
backGroundRepeat() {
|
let len = this.colorList.length
|
let i = 0
|
for (let k in this.elements) {
|
if (i == len) {
|
i = 0
|
}
|
this.elements[k].color = this.colorList[i]
|
i++
|
}
|
},
|
toPage(item) {
|
console.log(item)
|
uni.navigateTo({
|
url: `/pages${item.url}`,
|
success(res) {
|
res.eventChannel.emit('orderTypeId', {
|
orderTypeId: item.id
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.page {
|
height: 100vh;
|
background-color: #f5f5f5;
|
}
|
|
.list-container {
|
padding: 20rpx 30rpx;
|
}
|
|
.list-item {
|
display: flex;
|
align-items: center;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
border-radius: 16rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.item-icon {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
background-color: rgba(255, 255, 255, 0.3);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 24rpx;
|
}
|
|
.item-icon text {
|
font-size: 40rpx;
|
}
|
|
.item-content {
|
flex: 1;
|
}
|
|
.item-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
}
|
|
.item-desc {
|
font-size: 24rpx;
|
opacity: 0.8;
|
}
|
|
.item-arrow {
|
font-size: 32rpx;
|
opacity: 0.6;
|
}
|
|
.bg-red {
|
background-color: #e54d42;
|
color: #ffffff;
|
}
|
|
.bg-orange {
|
background-color: #f37b1d;
|
color: #ffffff;
|
}
|
|
.bg-yellow {
|
background-color: #fbbd08;
|
color: #333333;
|
}
|
|
.bg-olive {
|
background-color: #8dc63f;
|
color: #ffffff;
|
}
|
|
.bg-green {
|
background-color: #39b54a;
|
color: #ffffff;
|
}
|
|
.bg-cyan {
|
background-color: #1cbbb4;
|
color: #ffffff;
|
}
|
|
.bg-blue {
|
background-color: #0081ff;
|
color: #ffffff;
|
}
|
|
.bg-purple {
|
background-color: #6739b6;
|
color: #ffffff;
|
}
|
|
.bg-mauve {
|
background-color: #9c26b0;
|
color: #ffffff;
|
}
|
|
.bg-pink {
|
background-color: #e03997;
|
color: #ffffff;
|
}
|
|
.bg-brown {
|
background-color: #a5673f;
|
color: #ffffff;
|
}
|
|
.bg-grey {
|
background-color: #8799a3;
|
color: #ffffff;
|
}
|
|
.bg-gray {
|
background-color: #f0f0f0;
|
color: #333333;
|
}
|
|
.bg-black {
|
background-color: #333333;
|
color: #ffffff;
|
}
|
|
.bg-white {
|
background-color: #ffffff;
|
color: #666666;
|
}
|
</style>
|
