This commit is contained in:
parent
af354773ad
commit
6ed9d77dc1
14
pages.json
14
pages.json
|
|
@ -173,7 +173,19 @@
|
|||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/code/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人二维码"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/weeklyMenu/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "一周菜谱"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
"color": "#000000",
|
||||
|
|
|
|||
|
|
@ -1,77 +1,99 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<!-- 标题 -->
|
||||
<view class="title">出示二维码支付</view>
|
||||
<view class="work-container">
|
||||
<!-- 标题 -->
|
||||
<view class="title">出示二维码支付</view>
|
||||
|
||||
<!-- 副标题 -->
|
||||
<view class="subtitle">冯武鹏</view>
|
||||
<!-- 副标题 -->
|
||||
<view class="subtitle">冯武鹏</view>
|
||||
|
||||
<!-- 二维码 -->
|
||||
<image class="qr-code" src="https://example.com/qr-code.png" mode="aspectFill"></image>
|
||||
<!-- 二维码 -->
|
||||
<image class="qr-code" src="/static/images/code.png" mode="aspectFill"></image>
|
||||
|
||||
<!-- 有效期 -->
|
||||
<view class="valid-time">有效时间15分钟</view>
|
||||
<!-- 有效期 -->
|
||||
<view class="valid-time">有效时间15分钟</view>
|
||||
|
||||
<!-- 刷新按钮 -->
|
||||
<u-button class="refresh-button" type="primary" @click="refreshQrCode">刷新二维码</u-button>
|
||||
</view>
|
||||
<!-- 刷新按钮 -->
|
||||
<!-- <u-button class="refresh-button" type="primary" @click="refreshQrCode">刷新二维码</u-button> -->
|
||||
<view class="action-btn">
|
||||
<button @click="refreshQrCode" class="login-btn cu-btn block bg-blue lg round">刷新二维码</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
qrCodeUrl: 'https://example.com/qr-code.png' // 替换为实际的二维码URL
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
refreshQrCode() {
|
||||
// 模拟刷新二维码
|
||||
this.qrCodeUrl = `https://example.com/qr-code-${Math.random()}.png`;
|
||||
}
|
||||
}
|
||||
};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
qrCodeUrl: '/static/images/code.png' // 替换为实际的二维码URL
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
refreshQrCode() {
|
||||
// 模拟刷新二维码
|
||||
this.qrCodeUrl = `/static/images/code.png`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #f0f8ff; /* 背景颜色 */
|
||||
}
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #F9FBFF;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.work-container {
|
||||
background-color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.title {
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
width: 300px; /* 二维码宽度 */
|
||||
height: 300px; /* 二维码高度 */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.valid-time {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.qr-code {
|
||||
width: 200px;
|
||||
/* 二维码宽度 */
|
||||
height: 200px;
|
||||
/* 二维码高度 */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
background-color: #e97c3d; /* 按钮背景颜色 */
|
||||
color: #fff; /* 按钮文字颜色 */
|
||||
}
|
||||
.valid-time {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 35px;
|
||||
border-radius: 25px;
|
||||
background-color: #e97c3d;
|
||||
/* 按钮背景颜色 */
|
||||
color: #fff;
|
||||
/* 按钮文字颜色 */
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
height: 35px;
|
||||
margin-left: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
background-color: #e97c3d;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,16 +6,12 @@
|
|||
</view>
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
|
||||
<swiper class="swiper-box" :current="swiperDotIndex" :autoplay="true" :interval="3000"
|
||||
@change="changeSwiper">
|
||||
<swiper-item v-for="(item, index) in data" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<u-swiper :list="bannerList" @change="handleSwiperChange" :autoplay="true" :interval="3000"></u-swiper>
|
||||
<!-- 指示器 -->
|
||||
<view class="external-indicator">
|
||||
<view v-for="(item, index) in bannerList" :key="index" class="indicator-dot"
|
||||
:class="{ 'active': index === current }"></view>
|
||||
</view>
|
||||
|
||||
<!-- 功能按钮区 -->
|
||||
<view class="function-area">
|
||||
|
|
@ -68,16 +64,17 @@
|
|||
return {
|
||||
current: 0,
|
||||
swiperDotIndex: 0,
|
||||
data: [{
|
||||
image: '/static/images/banner/banner01.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner02.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner03.jpg'
|
||||
}
|
||||
]
|
||||
bannerList: [
|
||||
'/static/images/banner/banner01.jpg',
|
||||
'/static/images/banner/banner1.jpg',
|
||||
'/static/images/banner/01.jpg',
|
||||
'/static/images/banner/banner4.jpg',
|
||||
],
|
||||
list5: [
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -102,6 +99,10 @@
|
|||
url: '/pages/code/index'
|
||||
})
|
||||
},
|
||||
handleSwiperChange(e) {
|
||||
this.current = e.current; // 更新当前活动的指示点索引
|
||||
}
|
||||
},
|
||||
goToRemainingSum() {
|
||||
// 跳转到余额/充值页面
|
||||
uni.navigateTo({
|
||||
|
|
@ -113,6 +114,31 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.external-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
/* 与轮播图之间的间距 */
|
||||
}
|
||||
|
||||
.indicator-dot {
|
||||
width: 24px;
|
||||
/* 长方形宽度 */
|
||||
height: 4px;
|
||||
/* 长方形高度 */
|
||||
background-color: rgba(15, 39, 75, 0.5);
|
||||
/* 默认颜色 */
|
||||
margin: 0 5px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
/* 添加过渡效果 */
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #0F274B;
|
||||
/* 选中时的颜色 */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
|
|
@ -147,7 +173,7 @@
|
|||
|
||||
.function-area {
|
||||
margin-top: 30rpx;
|
||||
border-radius: 12rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 0rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -228,6 +254,7 @@
|
|||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-bottom: -60rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -253,7 +280,8 @@
|
|||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-bottom: -60rpx;
|
||||
image{
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 60rpx;
|
||||
|
|
@ -272,6 +300,7 @@
|
|||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-left: -50rpx;
|
||||
|
||||
.currency {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 508 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Loading…
Reference in New Issue