<template>
<view class="bg-content">
<z-paging ref="paging1" v-model="dataList" @query="queryList">
<view slot="top">
<view class="tablesChange">
<view class="tables">
<u-tabs :list="tabsList4" @click="clickTabFn" :scrollable="true" lineColor="#FF6400"
:activeStyle="{color: '#303133',fontWeight: 600,transform: 'scale(1.05)',fontSize: '31rpx'}"
:inactiveStyle="{color: '#606266',fontWeight:500,transform: 'scale(1)',fontSize: '31rpx'}"
itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 80rpx;">
</u-tabs>
</view>
</view>
</view>
<!-- <view class="my-evaluate f-jcsb f-a-i" @click="navMyevaluateFn" v-if="actTab==3">
<view class="f-a-i">
<u-icon type="eye" size="20" color="#fff"></u-icon>
<u-icon name="chat" color="#999" size="18"></u-icon>
我的评价
</view>
<view>
<u-icon name="arrow-right" color="#999" size="18"></u-icon>
</view>
</view> -->
<view>
<view @click="jump()" class="list-cont" v-for="(item,index) in dataList" :key="index" >
<canvas style="width:220rpx;height:86rpx;" canvas-id="colorCanvas"></canvas>
<view class="top-flex">
<text class="grayfont">2025-7-10 11:29:15</text>
<text style="font-weight: 500;">待支付</text>
</view>
<view class="main">
<image src="/static/images/tabbar/showroom_active.png" mode=""></image>
<view class="main-msg">
<text class="font">东风风行E702022款500超享版</text>
<view class="car-money">
<text class="blue-font">￥<text style="padding-right: 10rpx;">210000</text>元</text>
</view>
<view class="profit-estimate">
<text class="profit-label">预估可赚</text>
<text class="profit-value">30000元</text>
</view>
</view>
</view>
<view class="main-bto">
<text>车辆年限:1年内</text>
<text>公里数:1.78万公里</text>
<text>使用性质:非营运</text>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<script>
import {
tabsList4
} from "@/data/tabsData2.js"
export default {
data() {
return {
tabsList4,
actTab: -1,
dataList: [],
buttStyle: {
width: '160rpx',
height: '56rpx',
marginLeft: '16rpx'
},
imageUrl: 'https://cbl.diyouzhijia.com/static/images/ygctzmp/home/backgroundHeader.png',
dominantColor: '',
topUpTypeShow: false,
topUpType: 'ye',
payPrice: 0,
payData: {
from: "",
orderNo: "",
payChannel: "yue",
payType: "yue",
scene: 0
}
};
},
onLoad(){
this.getImageColor()
},
methods: {
// 加载图片时获取背景？
async getImageColor() {
try {
// 1. 确保使用正确的Canvas上下文
const canvasId = 'colorCanvas';
const ctx = uni.createCanvasContext(canvasId, this);
// 2. 等待图片加载完成
await new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = this.imageUrl;
});
// 3. 绘制图片（使用明确尺寸）
ctx.drawImage(this.imageUrl, 0, 0, 100, 100);
// 4. 必须使用 draw(true) 同步绘制
await new Promise(resolve => ctx.draw(true, resolve));
// 5. 获取像素数据
const res = await new Promise((resolve, reject) => {
uni.canvasGetImageData({
canvasId,
x: 0,
y: 0,
width: 1,
height: 1,
success: resolve,
fail: reject
});
});
// 6. 提取颜色（注意微信小程序返回的data是Uint8ClampedArray）
const pixelData = res.data || [];
const [r, g, b] = pixelData.slice(0, 3);
this.dominantColor = `rgb(${r}, ${g}, ${b})`;
console.log('成功获取主色调:', this.dominantColor);
} catch (err) {
console.error('颜色分析失败:', err);
this.dominantColor = 'rgb(255,255,255)'; // 默认白色
}
},
jump(){
uni.navigateTo({
url:'/pagesB/home/publish'
})
},
topUpTypeClose() {
this.topUpTypeShow = false
},
// 去支付
//详情
navParticularFn(item) {
uni.navigateTo({
url:'/pagesA/showroom/newPayOrder/detalorder?orderId='+item.id
})
},
clickTabFn(tab) {
this.actTab = tab.value
this.$refs.paging1.refresh();
},
//订单列表
queryList(pageNo, pageSize) {
// 此处请求仅为演示，请替换为自己项目中的请求
let obj = {
page: pageNo,
limit: pageSize,
type: this.actTab
}
let arr=[
{
name:'1',
value:'2'
},
{
name:'2',
value:'3'
}
]
this.$refs.paging1.complete(arr);
// getInformationOrderList(obj).then(res => {
// this.$refs.paging.complete(res.data.list);
// })
},
},
onShow() {
if (this.$refs.paging1) {
this.$refs.paging1.refresh();
}
}
}
</script>
<style lang="scss" scoped>
.bg-content {
min-height: 100vh;
background: #F6F7FB;
}
.order-list-butt {
width: 100%;
padding: 0 24rpx;
.order-list-butt-go {
width: 120rpx;
font-size: 24rpx;
font-weight: 400;
color: #999999;
image {
width: 48rpx;
height: 48rpx;
}
}
.order-list-butt-refund {
padding: 16rpx 24rpx;
font-size: 24rpx;
font-weight: 400;
color: #111111;
background: #F5F5F5;
margin-top: 16rpx;
}
}
.user-data {
padding: 24rpx 24rpx 0 24rpx;
.user-data-image {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #f5f5f5;
image {
width: 100%;
height: 100%;
}
}
.user-data-name {
font-size: 28rpx;
font-weight: 400;
color: #000000;
margin-left: 16rpx;
}
.user-data-state {
font-size: 24rpx;
font-weight: bold;
color: #FF6400;
}
}
.car-rental {
width: calc(100% - 48rpx);
margin: 24rpx 24rpx 0 24rpx;
padding-bottom: 24rpx;
border-bottom: 1rpx solid #eee;
.car-rental-cont {
height: 150rpx;
width: calc(100% - 218rpx);
margin-left: 16rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
.car-rental-cont-name {
font-size: 32rpx;
font-weight: 400;
color: #111111;
}
.car-rental-cont-price {
font-size: 32rpx;
font-weight: bold;
color: #111111;
}
.car-rental-cont-total-payment {
font-size: 24rpx;
font-weight: 400;
color: #666666;
}
}
image {
width: 202rpx;
height: 150rpx;
}
}
.list-cont {
// width: calc(100% - 30rpx);
margin: 24rpx;
background: #fff;
border-radius: 8rpx;
padding-bottom: 24rpx;
// border: 1px solid red;
padding: 30rpx;
.top-flex{
display: flex;
width: 100%;
padding-bottom: 26rpx;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #DBDBDB;
text{
font-size: 28rpx;
color: #2F74FA;
font-weight: 500;
}
.grayfont{
color: #666666;
font-size: 28rpx;
}
}
.main-bto{
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
color: #666666;
font-size: 24rpx;
text{
padding-top: 30rpx;
}
}
.main{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #DBDBDB;
padding-bottom: 30rpx;
margin-top: 30rpx;
image{
width: 259rpx;
height: 180rpx;
border-radius: 10rpx;
}
.main-msg{
flex: 1;
height: 100%;
margin-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.car-money{
margin-top: 10rpx;
.blue-font{
color: #FF6400;
font-size: 24rpx;
text{
font-size: 36rpx;
}
}
}
// .bg-money{
// width: 100%;
// height: 44rpx;
// margin-top: 10rpx;
// font-size: 24rpx;
// font-weight: 500;
// color: white;
// line-height: 44rpx;
// // border: 1px solid #3E80F5;
// background: url('https://cbl.diyouzhijia.com/static/images/ygcmp/home/yugu.png') no-repeat;
// background-size: 100% 100%;
// }
.profit-estimate {
display: flex;
align-items: center;
width: 100%;
height: 48rpx;
margin-top: 10rpx;
// margin-bottom: 30rpx;
color: white;
background: url('https://cbl.diyouzhijia.com/static/images/ygcmp/home/yugu.png') no-repeat;
background-size: 100% 100%;
.profit-label {
color: #ffffff;
font-weight: 700;
font-size: 24rpx;
margin: 0 31rpx 0 13rpx;
}
.profit-value {
flex: 1;
text-align: center;
font-weight: 700;
color: #2f74fa;
font-size: 32rpx;
}
}
.font{
color: #333333;
font-size: 28rpx;
// margin-top: 10rpx;
font-weight: 500;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制显示的行数 */
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.tab-list {
background: #fff;
overflow: auto;
view {
width: 88rpx;
padding-bottom: 12rpx;
border-bottom: 6rpx solid transparent;
font-size: 29rpx;
font-weight: bold;
display: inline-block;
color: #555555;
text-align: center;
}
.act-tab {
border-bottom: 6rpx solid #000;
font-size: 29rpx;
font-weight: bold;
color: #222222;
}
}
.act-flaf {
width: calc(100% - 56rpx);
margin-left: 24rpx;
}
.circle {
width: 30rpx;
height: 30rpx;
border-radius: 50%;
border: 2rpx solid #D7D7D7;
}
.my-evaluate {
background: #fff;
padding: 16rpx 24rpx;
width: calc(100% - 48rpx);
margin: 24rpx;
border-radius: 8rpx;
}
.tablesChange{
// padding: 0px 30rpx;
.tables{
background-color: white;
// border-radius: ;
border-radius: 20rpx 20rpx 0px 0px;
padding: 30rpx 20rpx;
padding-bottom: 0px;
}
}
</style>上面代码中颜色分析失败: ReferenceError: Image is not defined报错；帮我写出完整可以用的getImageColor函数里的方法
最新发布
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
