zhangkai/dyqc_hdapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改二维码和部分协议，首页轮播自定义圆点

Browse Source
This commit is contained in:
张凯 2025-05-07 14:44:23 +08:00
parent 7b88406ada
commit ba9fc0aa4f
7 changed files with 122 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
App.vue
View File

@ -1,14 +1,22 @@
<script> <script>
export default { export default {
onLaunch: function() { onLaunch: function() {
// #ifndef MP-WEIXIN // #ifndef MP-WEIXIN
uni.hideTabBar() uni.hideTabBar()
// #endif // #endif
// #ifdef MP-TOUTIAO
// uni.hideTabBar()
// #endif
this.updateManager(); this.updateManager();
}, },
onShow: function() { onShow: function() {
console.log('App Show') console.log('App Show')
// #ifndef MP-WEIXIN
wx.loadFontFace({ wx.loadFontFace({
global: true, global: true,
family: 'YouSheBiaoTiHei', family: 'YouSheBiaoTiHei',
@ -18,6 +26,8 @@
console.log(res); console.log(res);
} }
}) })
// #endif
}, },
onHide: function() { onHide: function() {
console.log('App Hide') console.log('App Hide')
@ -77,33 +87,4 @@
// src: url('https://naweigetetest2.hschool.com.cn/dyqc/YouSheBiaoTiHei.ttf') format('truetype'); // src: url('https://naweigetetest2.hschool.com.cn/dyqc/YouSheBiaoTiHei.ttf') format('truetype');
// } // }
// #endif // #endif
.swiper_s{
.uni-swiper-dots{
bottom: 40rpx;
}
.uni-swiper-dot{
background-color: #ffffff ;
width: 30rpx;
height: 8rpx;
border-radius: 0;
}
.uni-swiper-dot-active{
background-color: #0DAE11;
}
//微信小程序
// #ifdef MP-WEIXIN
.wx-swiper-dots{
bottom: 50rpx;
}
.wx-swiper-dot{
background-color: #ffffff ;
width: 30rpx;
height: 8rpx;
border-radius: 0;
}
.wx-swiper-dot-active{
background-color: #0DAE11;
}
// #endif
}
</style> </style>

101
components/fuyu-MixSwiper/fuyu-MixSwiper.vue
View File

@ -1,43 +1,54 @@
<template> <template>
<swiper class="swiper_s" :autoplay="autoplaySwiper" indicator-active-color="#0DAE11" indicator-color="#ffffff" :indicator-dots="true" :current="swiperCurrent" @change="swiperChange"> <view class="swiper_s">
<swiper-item v-for="(item,index) in list" :key="index"> <swiper class="swiper_s" :autoplay="autoplaySwiper" indicator-active-color="#0DAE11" indicator-color="#ffffff" :indicator-dots="false" :current="swiperCurrent" @change="swiperChange">
<span class="fnon_tit"><span class="text">{{ item.title?item.title:'' }}</span></span> <swiper-item v-for="(item,index) in list" :key="index">
<!-- @click="click(item.url)" 跳转活动链接 --> <span class="fnon_tit"><span class="text">{{ item.title?item.title:'' }}</span></span>
<image class="swiper-image" v-if="isImageUrl(item.image)" :src="item.image" mode="scaleToFill" lazy-load /> <!-- @click="click(item.url)" 跳转活动链接 -->
<div style="height: 100%;width: 100%;position: relative;" v-else> <image class="swiper-image" v-if="isImageUrl(item.image)" :src="item.image" mode="scaleToFill" lazy-load />
<div style="height: 100%;width: 100%;position: relative;" v-else>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<MyVideo :item="item" :isPlay="!isShow && videoId == item.id" @onEnded="endVideo(item.id)" /> <MyVideo :item="item" :isPlay="!isShow && videoId == item.id" @onEnded="endVideo(item.id)" />
<view v-if="isShow" <view v-if="isShow"
style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;"> style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
<image @click.stop="plays(item.id,index)" src="@/static/bofang.png" <image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
style="width: 40px;height: 40px;"></image> style="width: 40px;height: 40px;"></image>
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<video class="swiper-video" :id="`Video${item.id}`" :src="item.image" :autoplay="true" <video class="swiper-video" :id="`Video${item.id}`" :src="item.image" :autoplay="true"
:controls="true" :show-center-play-btn="false" :enable-progress-gesture="false" :controls="true" :show-center-play-btn="false" :enable-progress-gesture="false"
@ended="endVideo(item.id)" @loadedmetadata="loadVideo(item.id)" /> @ended="endVideo(item.id)" @loadedmetadata="loadVideo(item.id)" />
<cover-view v-if="isShow" <cover-view v-if="isShow"
style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;"> style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
<cover-image @click.stop="plays(item.id,index)" src="@/static/bofang.png" <cover-image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
style="width: 40px;height: 40px;"></cover-image> style="width: 40px;height: 40px;"></cover-image>
</cover-view> </cover-view>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<video class="swiper-video" :id="`Video${item.id}`" :src="item.image" :autoplay="true" :controls="false" <video class="swiper-video" :id="`Video${item.id}`" :src="item.image" :autoplay="true" :controls="false"
:show-center-play-btn="false" :enable-progress-gesture="false" @ended="endVideo(item.id)" /> :show-center-play-btn="false" :enable-progress-gesture="false" @ended="endVideo(item.id)" />
<view v-if="isShow" <view v-if="isShow"
style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;"> style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
<image @click.stop="plays(item.id,index)" src="@/static/bofang.png" <image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
style="width: 40px;height: 40px;"></image> style="width: 40px;height: 40px;"></image>
</view> </view>
<!-- #endif --> <!-- #endif -->
</div> </div>
</swiper-item> </swiper-item>
</swiper>
</swiper>
<!-- 自定义指示器 -->
<view class="dots">
<text
v-for="(dot, idx) in list.length"
:key="idx"
:class="['dot', { active: swiperCurrent === idx }]"
/>
</view>
</view>
</template> </template>
<script> <script>
@ -213,5 +224,23 @@
pointer-events: none; /* 确保模糊效果不会干扰点击事件 */ pointer-events: none; /* 确保模糊效果不会干扰点击事件 */
border-radius: 36rpx; border-radius: 36rpx;
} }
.dots {
position: absolute;
bottom: 50rpx;
width: 100%;
display: flex;
justify-content: center;
.dot {
background-color: #ffffff ;
width: 30rpx;
height: 6rpx;
border-radius: 0;
margin-right: 10rpx;
&.active {
background: #0DAE11;
// transform: scale(0.9);
}
}
}
</style> </style>

151
packageA/my/pendinPayDetail.vue
View File

@ -50,17 +50,17 @@
</span> </span>
</view> </view>
<view class="third-center"> <view class="third-center">
<!-- <qrcode-swiper :images="qrimages"> </qrcode-swiper> --> <qrcode-swiper :images="qrimages" @onSwiperChanges="onSwiperChanges"> </qrcode-swiper>
<l-painter v-for="qrcodesurl in detailAny.ordercode"> <!-- <l-painter v-for="qrcodesurl in detailAny.ordercode">
<l-painter-view css="margin-top: 20rpx;margin-bottom: 20rpx;"> <l-painter-view css="margin-top: 20rpx;margin-bottom: 20rpx;">
<l-painter-qrcode css="width: 200rpx; height: 200rpx;margin:0 auto;" :text="qrcodesurl.miniurl"></l-painter-qrcode> <l-painter-qrcode css="width: 200rpx; height: 200rpx;margin:0 auto;" :text="qrcodesurl.miniurl"></l-painter-qrcode>
</l-painter-view> </l-painter-view>
</l-painter> </l-painter> -->
<!-- <view wx:for="{{qrList}}" wx:key="index" style="display:none;"> <view class="bottom">
<canvas canvas-id="qrcode_{{index}}" /> <span>左右滑动二维码核销（{{qrindex}}/{{detailAny.num}}）张</span>
<image src="{{item.imgPath}}" style="width: 200px; height: 200px;" /> </view>
</view> -->
</view> </view>
</view> </view>
<view class="third flex flex-column" style="justify-content: flex-start;"> <view class="third flex flex-column" style="justify-content: flex-start;">
@ -215,7 +215,6 @@
<script> <script>
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import qrcodeSwiper from '@/packageA/qrcodeSwiper.vue' import qrcodeSwiper from '@/packageA/qrcodeSwiper.vue'
import uQRCode from '@/utils/uqrcode.js'
import { import {
dateWeek dateWeek
} from '../../utils/dateFormat' } from '../../utils/dateFormat'
@ -257,7 +256,7 @@
img: 'width: 100%' img: 'width: 100%'
}, },
value_slide:0, qrindex:1,
scrollTop: 0, scrollTop: 0,
overlay: false, overlay: false,
userInfo: {}, userInfo: {},
@ -296,9 +295,9 @@
titleStyle: { titleStyle: {
color: '#FFFFFF' color: '#FFFFFF'
}, },
qrList:[],//二维码地址列表 // qrList:[],//二维码地址列表
//二维码图片列表 //二维码图片列表
// qrimages:[] qrimages:[]
}; };
}, },
@ -325,12 +324,11 @@
this.order_no = options.order_no this.order_no = options.order_no
console.log(options.id) console.log(options.id)
this.getDetail() this.getDetail()
// this.getPeople()
// this.getTime()
this.getShare() this.getShare()
}, },
methods: { methods: {
// 批量生成二维码 // 批量生成二维码
// generateAllQRCodes() { // generateAllQRCodes() {
// this.qrList.forEach((item, index) => { // this.qrList.forEach((item, index) => {
@ -364,6 +362,7 @@
// } // }
// }); // });
// }, // },
//星期 //星期
dateWeeks(timestamp) { dateWeeks(timestamp) {
return dateWeek(timestamp) return dateWeek(timestamp)
@ -372,7 +371,9 @@
formattime(e){ formattime(e){
return dayjs(e*1000).format('YYYY-MM-DD HH:mm:ss') return dayjs(e*1000).format('YYYY-MM-DD HH:mm:ss')
}, },
onSwiperChanges(e){
this.qrindex = e + 1
},
overlayShow() { overlayShow() {
const token = uni.getStorageSync('token') const token = uni.getStorageSync('token')
if (token) { if (token) {
@ -438,68 +439,6 @@
// this.$refs.poster.showCanvas() // this.$refs.poster.showCanvas()
// }, // },
// 获取课时规格
getTime() {
uni.$u.http.get('/api/school/classes/spec', {
params: {
id: this.id,
}
}).then(res => {
if (res.code == 1) {
this.timeList = res.data.spec;
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
uni.showToast({
title: '请求失败，请稍后再试',
icon: 'none',
duration: 2000
});
});
},
// 获取报名详情
getPeople() {
const that = this
uni.$u.http.get('/api/school/classes/people', {
params: {
id: that.id,
}
}).then(res => {
if (res.code == 1) {
that.processPeopleData(res.data).then(processedData => {
that.people = processedData;
console.log('that.people', that.people)
});
} else {
that.showErrorToast(res.msg);
}
}).catch(error => {
that.showErrorToast('请求失败，请稍后再试');
});
},
// 数据转换
processPeopleData(data) {
return new Promise((resolve) => {
const paidUserData = data.paid_user_data.map(item => {
item.createTime = this.timeago(item.time);
return item;
}).reverse();
const unpaidUserData = data.unpaid_user_data
const processedData = {
unpaid_user_data: unpaidUserData,
paid_user_data: paidUserData
}
resolve(processedData);
});
},
// 提示 // 提示
showErrorToast(msg) { showErrorToast(msg) {
uni.showToast({ uni.showToast({
@ -517,7 +456,9 @@
}).then(res => { }).then(res => {
if (res.code == 1) { if (res.code == 1) {
this.detail = res.data.detail.detail; this.detail = res.data.detail.detail;
this.qrList = res.data.detail.ordercode;
// this.qrList = res.data.detail.ordercode;
this.qrimages = res.data.detail.ordercode.map(item => item.codeimage);
this.detailAny = res.data.detail; this.detailAny = res.data.detail;
this.generateAllQRCodes() this.generateAllQRCodes()
} else { } else {
@ -1076,6 +1017,17 @@
font-size: 26rpx; font-size: 26rpx;
color: #7A7A7A; color: #7A7A7A;
} }
.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;
}
} }
@ -1485,48 +1437,3 @@
} }
} }
</style> </style>
<style lang="scss">
.value_slide{
width: 50%;
::v-deep .uni-slider-handle-wrapper{
height: 10rpx;
}
::v-deep .uni-slider-handle{
background: url('@/static/detail/qiu.png') !important;
border-radius: 0;
background-size: 36rpx 36rpx !important;
width: 36rpx;
height: 36rpx;
top: 14rpx;
margin-left: -18rpx !important;
}
::v-deep .uni-slider-value{
color: #323232;
&::after{
content: '%';
}
}
// #ifdef MP-WEIXIN
.wx-slider-handle-wrapper{
height: 8rpx;
}
.wx-slider-handle{
background: url('@/static/detail/qiu.png') !important;
border-radius: 0;
background-size: 28rpx 28rpx !important;
width: 28rpx;
height: 28rpx;
top: 18rpx;
margin-left: -14rpx !important;
}
.wx-slider-value{
display: flex;
width: 30rpx;
color: #323232;
&::after{
content: '%';
}
}
// #endif
}
</style>

10
packageA/qrcodeSwiper.vue
View File

@ -8,7 +8,7 @@
circular circular
> >
<swiper-item v-for="(item, index) in images" :key="index" class="swiper-item"> <swiper-item v-for="(item, index) in images" :key="index" class="swiper-item">
<image :src="item" class="swiper-image" mode="aspectFill" /> <image :src="item" class="swiper-image" mode="" />
</swiper-item> </swiper-item>
</swiper> </swiper>
@ -47,6 +47,7 @@
// 滑动切换回调 // 滑动切换回调
onSwiperChange(e) { onSwiperChange(e) {
this.currentIndex = e.detail.current; this.currentIndex = e.detail.current;
this.$emit('onSwiperChanges', e.detail.current);
}, },
// 按钮切换逻辑 // 按钮切换逻辑
switchSlide(step) { switchSlide(step) {
@ -77,9 +78,10 @@
justify-content: center; justify-content: center;
} }
.swiper-image { .swiper-image {
width: 200rpx; width: 280rpx;
height: 200rpx; height: 280rpx;
border-radius: 16rpx; border-radius: 8rpx;
border: 1rpx solid #9C9C9C;
} }
.nav-buttons { .nav-buttons {

4
pages.json
View File

@ -310,10 +310,10 @@
"custom": true, "custom": true,
"color": "#888888", "color": "#888888",
"selectedColor": "#181818", "selectedColor": "#181818",
"list": [{ "list": [
{
"pagePath": "pages/index/index", "pagePath": "pages/index/index",
"text": "首页" "text": "首页"
}, },
{ {
"pagePath": "pages/center/index", // 更新为与 pages 数组一致 "pagePath": "pages/center/index", // 更新为与 pages 数组一致

12
pages/index/index.vue
View File

@ -17,7 +17,7 @@
<image <image
src="/static/index/logo1.png" src="/static/index/logo1.png"
mode="" mode=""
style="width: 430rpx; height: 80rpx;margin-top: 65rpx;" class="logo_css"
></image> ></image>
</view> </view>
<!-- 搜索 --> <!-- 搜索 -->
@ -615,7 +615,13 @@ export default {
.box { .box {
width: 690rpx; width: 690rpx;
margin-top: 30rpx; margin-top: 30rpx;
.logo_css{
width: 430rpx;
height: 80rpx;
// #ifdef MP-WEIXIN
margin-top: 65rpx;
// #endif
}
.serch_top { .serch_top {
margin-top: 10rpx; margin-top: 10rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
@ -960,7 +966,7 @@ export default {
display: flex; display: flex;
overflow-y: scroll; overflow-y: scroll;
flex-wrap: wrap; flex-wrap: wrap;
height: 620rpx; height: 440rpx;
width: 692rpx; width: 692rpx;
margin-top:20rpx ; margin-top:20rpx ;
} }

2
pages/my/index.vue
View File

@ -156,7 +156,7 @@
<u-popup :show="showPopup" mode="center" round="20" :customStyle="{ 'width': '640rpx', 'height': '630rpx'}" <u-popup :show="showPopup" mode="center" round="20" :customStyle="{ 'width': '640rpx', 'height': '630rpx'}"
:closeable="true" @close="close"> :closeable="true" @close="close">
<!-- 隐私协议 --> <!-- 隐私协议 -->
<lsl-protocol-popup title="用户协议和隐私政策提示" predesc="感谢您使用洛阳青年夜校。为保护您的个人信息安全，在您洛阳青年夜校的服务前，请务必仔细阅读" <lsl-protocol-popup title="用户协议和隐私政策提示" predesc="感谢您使用洛阳多样青春搭+。为保护您的个人信息安全，在您洛阳多样青春搭+的服务前，请务必仔细阅读"
subdesc='以了解详细内容。如您同意，请点击“同意并继续”并开始使用我们的服务。' subdesc='以了解详细内容。如您同意，请点击“同意并继续”并开始使用我们的服务。'
top_img='https://naweigetetest2.hschool.com.cn/dyqc/dyqclogo.png' top_img='https://naweigetetest2.hschool.com.cn/dyqc/dyqclogo.png'
color="#C9935C" hideTabBar="true" :onNeed='false' @agree="getList" :other="other" color="#C9935C" hideTabBar="true" :onNeed='false' @agree="getList" :other="other"