修改二维码和部分协议，首页轮播自定义圆点
This commit is contained in:
parent
7b88406ada
commit
ba9fc0aa4f
39
App.vue
39
App.vue
@ -1,14 +1,22 @@
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.hideTabBar()
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-TOUTIAO
|
||||
// uni.hideTabBar()
|
||||
// #endif
|
||||
|
||||
this.updateManager();
|
||||
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
wx.loadFontFace({
|
||||
global: true,
|
||||
family: 'YouSheBiaoTiHei',
|
||||
@ -18,6 +26,8 @@
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
@ -77,33 +87,4 @@
|
||||
// src: url('https://naweigetetest2.hschool.com.cn/dyqc/YouSheBiaoTiHei.ttf') format('truetype');
|
||||
// }
|
||||
// #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>
|
||||
@ -1,43 +1,54 @@
|
||||
<template>
|
||||
<swiper class="swiper_s" :autoplay="autoplaySwiper" indicator-active-color="#0DAE11" indicator-color="#ffffff" :indicator-dots="true" :current="swiperCurrent" @change="swiperChange">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<span class="fnon_tit"><span class="text">{{ item.title?item.title:'' }}</span></span>
|
||||
<!-- @click="click(item.url)" 跳转活动链接 -->
|
||||
<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>
|
||||
<view class="swiper_s">
|
||||
<swiper class="swiper_s" :autoplay="autoplaySwiper" indicator-active-color="#0DAE11" indicator-color="#ffffff" :indicator-dots="false" :current="swiperCurrent" @change="swiperChange">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<span class="fnon_tit"><span class="text">{{ item.title?item.title:'' }}</span></span>
|
||||
<!-- @click="click(item.url)" 跳转活动链接 -->
|
||||
<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 -->
|
||||
<MyVideo :item="item" :isPlay="!isShow && videoId == item.id" @onEnded="endVideo(item.id)" />
|
||||
<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;">
|
||||
<image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
|
||||
style="width: 40px;height: 40px;"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<MyVideo :item="item" :isPlay="!isShow && videoId == item.id" @onEnded="endVideo(item.id)" />
|
||||
<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;">
|
||||
<image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
|
||||
style="width: 40px;height: 40px;"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<video class="swiper-video" :id="`Video${item.id}`" :src="item.image" :autoplay="true"
|
||||
:controls="true" :show-center-play-btn="false" :enable-progress-gesture="false"
|
||||
@ended="endVideo(item.id)" @loadedmetadata="loadVideo(item.id)" />
|
||||
<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;">
|
||||
<cover-image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
|
||||
style="width: 40px;height: 40px;"></cover-image>
|
||||
</cover-view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<video class="swiper-video" :id="`Video${item.id}`" :src="item.image" :autoplay="true"
|
||||
:controls="true" :show-center-play-btn="false" :enable-progress-gesture="false"
|
||||
@ended="endVideo(item.id)" @loadedmetadata="loadVideo(item.id)" />
|
||||
<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;">
|
||||
<cover-image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
|
||||
style="width: 40px;height: 40px;"></cover-image>
|
||||
</cover-view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<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)" />
|
||||
<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;">
|
||||
<image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
|
||||
style="width: 40px;height: 40px;"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</div>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- #ifdef H5 -->
|
||||
<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)" />
|
||||
<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;">
|
||||
<image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
|
||||
style="width: 40px;height: 40px;"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</div>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
<!-- 自定义指示器 -->
|
||||
<view class="dots">
|
||||
<text
|
||||
v-for="(dot, idx) in list.length"
|
||||
:key="idx"
|
||||
:class="['dot', { active: swiperCurrent === idx }]"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -213,5 +224,23 @@
|
||||
pointer-events: none; /* 确保模糊效果不会干扰点击事件 */
|
||||
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>
|
||||
@ -50,17 +50,17 @@
|
||||
</span>
|
||||
</view>
|
||||
<view class="third-center">
|
||||
<!-- <qrcode-swiper :images="qrimages"> </qrcode-swiper> -->
|
||||
<l-painter v-for="qrcodesurl in detailAny.ordercode">
|
||||
<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;">
|
||||
<l-painter-qrcode css="width: 200rpx; height: 200rpx;margin:0 auto;" :text="qrcodesurl.miniurl"></l-painter-qrcode>
|
||||
</l-painter-view>
|
||||
</l-painter>
|
||||
<!-- <view wx:for="{{qrList}}" wx:key="index" style="display:none;">
|
||||
<canvas canvas-id="qrcode_{{index}}" />
|
||||
<image src="{{item.imgPath}}" style="width: 200px; height: 200px;" />
|
||||
</view> -->
|
||||
</l-painter> -->
|
||||
<view class="bottom">
|
||||
<span>左右滑动二维码核销（{{qrindex}}/{{detailAny.num}}）张</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="third flex flex-column" style="justify-content: flex-start;">
|
||||
@ -215,7 +215,6 @@
|
||||
<script>
|
||||
import dayjs from 'dayjs';
|
||||
import qrcodeSwiper from '@/packageA/qrcodeSwiper.vue'
|
||||
import uQRCode from '@/utils/uqrcode.js'
|
||||
import {
|
||||
dateWeek
|
||||
} from '../../utils/dateFormat'
|
||||
@ -257,7 +256,7 @@
|
||||
img: 'width: 100%'
|
||||
|
||||
},
|
||||
value_slide:0,
|
||||
qrindex:1,
|
||||
scrollTop: 0,
|
||||
overlay: false,
|
||||
userInfo: {},
|
||||
@ -296,9 +295,9 @@
|
||||
titleStyle: {
|
||||
color: '#FFFFFF'
|
||||
},
|
||||
qrList:[],//二维码地址列表
|
||||
// qrList:[],//二维码地址列表
|
||||
//二维码图片列表
|
||||
// qrimages:[]
|
||||
qrimages:[]
|
||||
};
|
||||
},
|
||||
|
||||
@ -325,12 +324,11 @@
|
||||
this.order_no = options.order_no
|
||||
console.log(options.id)
|
||||
this.getDetail()
|
||||
// this.getPeople()
|
||||
// this.getTime()
|
||||
this.getShare()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 批量生成二维码
|
||||
// generateAllQRCodes() {
|
||||
// this.qrList.forEach((item, index) => {
|
||||
@ -364,6 +362,7 @@
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
|
||||
//星期
|
||||
dateWeeks(timestamp) {
|
||||
return dateWeek(timestamp)
|
||||
@ -372,7 +371,9 @@
|
||||
formattime(e){
|
||||
return dayjs(e*1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
|
||||
onSwiperChanges(e){
|
||||
this.qrindex = e + 1
|
||||
},
|
||||
overlayShow() {
|
||||
const token = uni.getStorageSync('token')
|
||||
if (token) {
|
||||
@ -438,68 +439,6 @@
|
||||
// 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) {
|
||||
uni.showToast({
|
||||
@ -517,7 +456,9 @@
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
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.generateAllQRCodes()
|
||||
} else {
|
||||
@ -1076,6 +1017,17 @@
|
||||
font-size: 26rpx;
|
||||
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 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>
|
||||
@ -8,7 +8,7 @@
|
||||
circular
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
// 滑动切换回调
|
||||
onSwiperChange(e) {
|
||||
this.currentIndex = e.detail.current;
|
||||
this.$emit('onSwiperChanges', e.detail.current);
|
||||
},
|
||||
// 按钮切换逻辑
|
||||
switchSlide(step) {
|
||||
@ -77,9 +78,10 @@
|
||||
justify-content: center;
|
||||
}
|
||||
.swiper-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #9C9C9C;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
|
||||
@ -310,10 +310,10 @@
|
||||
"custom": true,
|
||||
"color": "#888888",
|
||||
"selectedColor": "#181818",
|
||||
"list": [{
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页"
|
||||
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/center/index", // 更新为与 pages 数组一致
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<image
|
||||
src="/static/index/logo1.png"
|
||||
mode=""
|
||||
style="width: 430rpx; height: 80rpx;margin-top: 65rpx;"
|
||||
class="logo_css"
|
||||
></image>
|
||||
</view>
|
||||
<!-- 搜索 -->
|
||||
@ -615,7 +615,13 @@ export default {
|
||||
.box {
|
||||
width: 690rpx;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.logo_css{
|
||||
width: 430rpx;
|
||||
height: 80rpx;
|
||||
// #ifdef MP-WEIXIN
|
||||
margin-top: 65rpx;
|
||||
// #endif
|
||||
}
|
||||
.serch_top {
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
@ -960,7 +966,7 @@ export default {
|
||||
display: flex;
|
||||
overflow-y: scroll;
|
||||
flex-wrap: wrap;
|
||||
height: 620rpx;
|
||||
height: 440rpx;
|
||||
width: 692rpx;
|
||||
margin-top:20rpx ;
|
||||
}
|
||||
|
||||
@ -156,7 +156,7 @@
|
||||
<u-popup :show="showPopup" mode="center" round="20" :customStyle="{ 'width': '640rpx', 'height': '630rpx'}"
|
||||
:closeable="true" @close="close">
|
||||
<!-- 隐私协议 -->
|
||||
<lsl-protocol-popup title="用户协议和隐私政策提示" predesc="感谢您使用洛阳青年夜校。为保护您的个人信息安全，在您洛阳青年夜校的服务前，请务必仔细阅读"
|
||||
<lsl-protocol-popup title="用户协议和隐私政策提示" predesc="感谢您使用洛阳多样青春搭+。为保护您的个人信息安全，在您洛阳多样青春搭+的服务前，请务必仔细阅读"
|
||||
subdesc='以了解详细内容。如您同意，请点击“同意并继续”并开始使用我们的服务。'
|
||||
top_img='https://naweigetetest2.hschool.com.cn/dyqc/dyqclogo.png'
|
||||
color="#C9935C" hideTabBar="true" :onNeed='false' @agree="getList" :other="other"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user