1、待核销订单限制一下发布活动者名称的长度,超出用点点点

2、其他状态下的订单页面限制一下发布活动者名称的长度,超出用点点点
3、添加报名人,底部添加报名人按钮 在页面固定
4、待核销订单页面的二维码会逐渐偏移
This commit is contained in:
wangzimeng 2025-07-25 16:03:24 +08:00
parent 3643bbbe9b
commit 2bae7fdec8
4 changed files with 227 additions and 68 deletions

View File

@ -14,7 +14,8 @@
<view class="first-image flex align-items" style="margin-top: 25rpx;">
<image :src="detailAny.user.avatar" mode=""
style="width: 36rpx;height: 36rpx;border-radius:50%;"></image>
<text style="color:#9C9C9C;margin-left: 10rpx;">{{ detailAny.user.nickname }}</text>
<text class="white-space"
style="color:#9C9C9C;margin-left: 10rpx;width: 210rpx;">{{ detailAny.user.nickname }}</text>
<text style="color:#9C9C9C;margin-left: 20rpx;">/</text>
<text style="color:#9C9C9C;margin-left: 20rpx;">{{ detailAny.join_info.people_number
}}人玩过</text>
@ -52,7 +53,7 @@
<image class="icons" src="/static/detail/xiangqing.png"></image>
</view>
</view>
<view class="third-center">
<view class="thirdCrode-center">
<qrcode-swiper :images="qrimages" @onSwiperChanges="onSwiperChanges"> </qrcode-swiper>
<!-- <l-painter v-for="qrcodesurl in detailAny.ordercode">
<l-painter-view css="margin-top: 20rpx;margin-bottom: 20rpx;">
@ -92,7 +93,7 @@
<view class="flex w-100 space-between hui align-items" style="margin-top: 40rpx;">
<text>付款时间</text>
<text style="color: #323232;">{{ formattime(detailAny.paytime) }}</text>
</view>
</view>
</view>
@ -493,7 +494,7 @@
// this.qrList = res.data.detail.ordercode;
this.qrimages = res.data.detail.ordercode;
this.detailAny = res.data.detail;
console.log('{{detailAny.status}}',detailAny.status,detailAny);
console.log('{{detailAny.status}}', detailAny.status, detailAny);
this.generateAllQRCodes()
} else {
uni.showToast({
@ -607,7 +608,7 @@
}
});
},
close() {
this.type = 0
@ -1042,6 +1043,33 @@
}
}
.thirdCrode-center {
/* 其他样式保持不变 */
min-height: 400rpx;
/* 确保有足够空间 */
position: relative;
.swiper-box {
width: 100%;
height: 350rpx;
/* 与组件内高度一致 */
}
.bottom {
width: 100%;
margin-bottom: 10rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #9C9C9C;
text-align: center;
font-style: normal;
text-transform: none;
}
}
.third-center {
padding: 30rpx;
position: relative;
@ -1125,7 +1153,8 @@
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 44rpx;
padding-bottom: 30rpx;
padding-bottom: 30rpx;
.pop-header {
width: 100%;

View File

@ -18,7 +18,7 @@
<view class="first-image flex align-items white-space" style="margin-top: 25rpx;">
<image :src="detailAny.user.avatar" mode=""
style="width: 36rpx;height: 36rpx;border-radius: 50%;"></image>
<span style="color:#9C9C9C;margin-left: 10rpx;">{{ detailAny.user.nickname }}</span>
<span class="white-space" style="color:#9C9C9C;margin-left: 10rpx;width: 210rpx;">{{ detailAny.user.nickname }}</span>
<text style="color:#9C9C9C;margin-left: 20rpx;">/</text>
<span
style="color:#9C9C9C;margin-left: 20rpx;">{{ detailAny.join_info.people_number }}人玩过</span>

View File

@ -1,15 +1,19 @@
<template>
<view class="carousel-container">
<!-- 轮播主体 -->
<swiper class="swiper-box" :current="currentIndex" @change="onSwiperChange" circular>
<swiper class="swiper-box" :current="currentIndex" @change="onSwiperChange" circular
:style="{height: swiperHeight + 'rpx'}">
<swiper-item v-for="(item, index) in images" :key="index" class="swiper-item">
<view style="border: 1px solid #9C9C9C;width: 280rpx;height: 280rpx;margin: 0 auto;border-radius: 8rpx;">
<image :src="item.codeimage" class="swiper-image" mode="aspectFill" />
<view
style="border: 1px solid #9C9C9C;width: 280rpx;height: 280rpx;margin: 0 auto;border-radius: 8rpx;">
<image :src="item.codeimage" class="swiper-image" mode="widthFix" @load="onImageLoad"/>
</view>
<view v-if="item.status==6" style="border: 1px solid #9C9C9C;width: 280rpx;height: 284rpx;margin: 0 auto;border-radius: 8rpx; position: absolute;top: 0;left: 0;right: 0;">
<image src="/static/qrcode_yes.png" class="swiper-image" mode="aspectFill" />
<view v-if="item.status==6"
style="border: 1px solid #9C9C9C;width: 280rpx;height: 284rpx;margin: 0 auto;border-radius: 8rpx; position: absolute;top: 0;left: 0;right: 0;">
<image src="/static/qrcode_yes.png" class="swiper-image" mode="widthFix" />
</view>
<view style="text-align: center;font-size: 28rpx;margin-top: 15rpx;font-weight: 600;">{{item.name}}
</view>
<view style="text-align: center;font-size: 28rpx;margin-top: 15rpx;font-weight: 600;">{{item.name}}</view>
</swiper-item>
</swiper>
@ -44,7 +48,8 @@
},
data() {
return {
currentIndex: 0
currentIndex: 0,
swiperHeight: 350 //
};
},
methods: {
@ -62,74 +67,180 @@
else if (newIndex >= total) newIndex = 0; //
this.currentIndex = newIndex;
},
onImageLoad(e) {
//
const {
width,
height
} = e.detail;
const ratio = height / width;
const calculatedHeight = 280 * ratio; // 280rpx
if (calculatedHeight > this.swiperHeight) {
this.swiperHeight = calculatedHeight + 60; // 60rpx
}
}
}
};
</script>
<style lang="scss" scoped>
.carousel-container {
position: relative;
height: 350rpx;
position: relative;
width: 100%;
margin: 0 auto;
}
.swiper-box {
width: 100%;
height: 100%;
width: 100%;
}
.swiper-item {
text-align: center;
padding: 3rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
box-sizing: border-box;
padding: 20rpx 0;
}
.qrcode-container {
position: relative;
width: 280rpx;
height: 280rpx;
border: 1px solid #9C9C9C;
border-radius: 8rpx;
margin: 0 auto;
overflow: hidden;
}
.swiper-image {
width: 100%;
height: 100%;
border-radius: 8rpx;
/* 内边距为边框宽度 */
box-sizing: border-box;
/* 内边距和边框计入总尺寸 */
width: 100%;
height: 100%;
display: block;
}
.used-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
image {
width: 80%;
height: 80%;
}
}
.qrcode-name {
text-align: center;
font-size: 28rpx;
margin-top: 15rpx;
font-weight: 600;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-buttons {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
.btn {
width: 60rpx;
height: 60rpx;
// border-radius: 50%;
// background: rgba(0,0,0,0.3);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none; //
.btn {
pointer-events: auto;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
image {
width: 50rpx;
height: 50rpx;
}
}
}
// .carousel-container {
// position: relative;
// height: 350rpx;
// }
.dots {
position: absolute;
bottom: 20rpx;
width: 100%;
display: flex;
justify-content: center;
// .swiper-box {
// width: 100%;
// height: 100%;
// }
.dot {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
margin: 0 8rpx;
// .swiper-item {
// display: block;
// text-align: center;
// align-items: center;
// justify-content: center;
// padding: 3rpx;
// }
&.active {
background: #007AFF;
transform: scale(1.2);
}
}
}
// .swiper-image {
// width: 100%;
// height: 100%;
// border-radius: 8rpx;
// /* */
// box-sizing: border-box;
// /* */
// }
// .nav-buttons {
// position: absolute;
// top: 50%;
// transform: translateY(-50%);
// width: 100%;
// display: flex;
// justify-content: space-between;
// .btn {
// width: 60rpx;
// height: 60rpx;
// // border-radius: 50%;
// // background: rgba(0,0,0,0.3);
// color: white;
// display: flex;
// align-items: center;
// justify-content: center;
// }
// }
// .dots {
// position: absolute;
// bottom: 20rpx;
// width: 100%;
// display: flex;
// justify-content: center;
// .dot {
// width: 12rpx;
// height: 12rpx;
// border-radius: 50%;
// background: rgba(255, 255, 255, 0.5);
// margin: 0 8rpx;
// &.active {
// background: #007AFF;
// transform: scale(1.2);
// }
// }
// }
</style>

View File

@ -16,8 +16,9 @@
</view>
<view style="height: 1px;background-color: #F0F0F0;width: 100%;margin: 30rpx 0px;"></view>
</view>
<view style="padding: 30rpx;">
<view class="btn_1" @click="show = true;isAdd = 1;">
<view style="width: 100%;height: 200rpx;"></view>
<view style="padding: 30rpx;position: fixed;bottom: 0rpx;left: 0;width: 92%;z-index: 10;background-color: #ffffff;">
<view class="btn_2" @click="show = true;isAdd = 1;">
<view>
<u-icon name="plus" color="#BBFC5B" size="15"></u-icon>
</view>
@ -206,6 +207,24 @@ export default {
padding-top: 20rpx;
}
.btn_2 {
width: 95%;
height: 90rpx;
background: #323232;
border-radius: 198rpx 198rpx 198rpx 198rpx;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
font-weight: 400;
font-size: 32rpx;
color: #BBFC5B;
line-height: 90rpx;
text-align: center;
margin: 0 auto;
margin-top: 30rpx;
display: flex;
align-items: center;
justify-content: center;
}
.btn_1 {
width: 95%;
height: 90rpx;