Augcl
/
recycle-front
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

1

v1
前端-胡立永 4 months ago
parent
5748886a3d
commit
6f172bf62e
3 changed files with 236 additions and 193 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      App.vue
  2. +4
    -1
      config.js
  3. +230
    -190
      pages/subcomponent/promo-qrcode.vue

+ 2
- 2
App.vue View File

@ -166,8 +166,8 @@
uni.getImageInfo({
src: `${config.baseUrl}/recycle-admin/applet/promotion/getInviteCode?token=${uni.getStorageSync('token')}`,
success: res => {
getApp().globalData.configData.qr_path = res.path
console.log(getApp().globalData.configData.qr_path, 'qr_path')
getApp().globalData.qr_path = res.path
console.log(getApp().globalData.qr_path, 'qr_path')
this.updateProgress()
resolve()
},


+ 4
- 1
config.js View File

@ -1,7 +1,10 @@
// config.js
const type = 'dev'
const type = 'local'
const config = {
local: {
baseUrl: 'http://127.0.0.1:8002',
},
dev: {
baseUrl: 'http://h5.xzaiyp.top',
},


+ 230
- 190
pages/subcomponent/promo-qrcode.vue View File

@ -1,197 +1,237 @@
<template>
<view class="promo-modal-page">
<!-- 顶部导航栏 -->
<view class="nav-bar" :style="{height: navBarTotalHeight + 'px', paddingTop: statusBarHeight + 'px'}">
<view class="nav-bar-inner">
<view class="back-icon" @tap="navigateBack">
<uni-icons type="left" size="22" color="#222" />
</view>
<view class="nav-bar-title">推广链接</view>
<view class="nav-bar-right">
<uni-icons type="more-filled" size="22" color="#222" />
</view>
</view>
</view>
<!-- 用户信息 -->
<view class="user-info-modal" :style="{ marginTop: navBarTotalHeight + 'px' }">
<view class="avatar-frame">
<image class="avatar-img" :src="userInfo.avatar" mode="aspectFill" />
</view>
<view class="nickname">{{userInfo.name}}</view>
</view>
<!-- 二维码区 -->
<view class="qrcode-modal-section">
<image class="qrcode-img" :src="qrcodeUrl" mode="aspectFit" />
<!-- <view class="invite-code">邀请码：{{inviteCode}}</view> -->
</view>
<!-- 底部按钮 -->
<view class="bottom-btns-modal">
<button class="btn gray">分享给好友</button>
<button class="btn green">保存到本地</button>
</view>
</view>
<view class="promo-modal-page">
<!-- 顶部导航栏 -->
<view class="nav-bar" :style="{height: navBarTotalHeight + 'px', paddingTop: statusBarHeight + 'px'}">
<view class="nav-bar-inner">
<view class="back-icon" @tap="navigateBack">
<uni-icons type="left" size="22" color="#222" />
</view>
<view class="nav-bar-title">推广链接</view>
<view class="nav-bar-right">
<uni-icons type="more-filled" size="22" color="#222" />
</view>
</view>
</view>
<!-- 用户信息 -->
<view class="user-info-modal" :style="{ marginTop: navBarTotalHeight + 'px' }">
<view class="avatar-frame">
<image class="avatar-img" :src="userInfo.avatar" mode="aspectFill" />
</view>
<view class="nickname">{{userInfo.name}}</view>
</view>
<!-- 二维码区 -->
<view class="qrcode-modal-section">
<image class="qrcode-img" :src="qrcodeUrl" mode="widthFix" />
<!-- <view class="invite-code">邀请码：{{inviteCode}}</view> -->
</view>
<!-- 底部按钮 -->
<view class="bottom-btns-modal">
<button class="btn gray">分享给好友</button>
<button class="btn green">保存到本地</button>
</view>
</view>
</template>
<script>
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
export default {
mixins: [pullRefreshMixin],
data() {
return {
statusBarHeight: 0,
navBarHeight: 44,
navBarTotalHeight: 44,
userInfo: {
avatar: '/static/avatar.png',
name: '战斗世界',
},
qrcodeUrl: '/static/qrcode.png',
inviteCode: '888888',
}
},
onLoad() {
const sysInfo = uni.getSystemInfoSync()
this.statusBarHeight = sysInfo.statusBarHeight
this.navBarHeight = 44
this.navBarTotalHeight = this.statusBarHeight + this.navBarHeight
// 可能要等待获取到数据
this.qrcodeUrl = getApp().globalData.configData.qr_path
},
methods: {
async onRefresh() {
// 模拟刷新数据
await new Promise(resolve => setTimeout(resolve, 1000))
uni.stopPullRefresh()
},
navigateBack() {
uni.navigateBack()
},
}
}
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
export default {
mixins: [pullRefreshMixin],
data() {
return {
statusBarHeight: 0,
navBarHeight: 44,
navBarTotalHeight: 44,
userInfo: {
avatar: '/static/avatar.png',
name: '战斗世界',
},
qrcodeUrl: '/static/qrcode.png',
inviteCode: '888888',
}
},
onLoad() {
const sysInfo = uni.getSystemInfoSync()
this.statusBarHeight = sysInfo.statusBarHeight
this.navBarHeight = 44
this.navBarTotalHeight = this.statusBarHeight + this.navBarHeight
// 可能要等待获取到数据
this.getQrcode()
},
methods: {
async onRefresh() {
// 模拟刷新数据
await new Promise(resolve => setTimeout(resolve, 1000))
uni.stopPullRefresh()
},
navigateBack() {
uni.navigateBack()
},
getQrcode(){
// 获取全局二维码路径
if (getApp().globalData.qr_path) {
console.log('获取到二维码路径', getApp().globalData.qr_path)
this.qrcodeUrl = getApp().globalData.qr_path
} else {
console.log('全局二维码路径不存在')
uni.getImageInfo({
src: `${config.baseUrl}/recycle-admin/applet/promotion/getInviteCode?token=${uni.getStorageSync('token')}`,
success: res => {
getApp().globalData.qr_path = res.path
console.log(getApp().globalData.qr_path, 'qr_path')
this.qrcodeUrl = getApp().globalData.qr_path
},
fail: err => {
console.log('QR code load failed:', err)
}
})
}
},
}
}
</script>
<style lang="scss" scoped>
.promo-modal-page {
min-height: 100vh;
background: linear-gradient(to bottom, #f6fff2 0%, #fff 100%);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
width: 100vw;
background: linear-gradient(to right, #b2f08d 0%, #39e9d2 100%);
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.03);
.nav-bar-inner {
display: flex;
align-items: center;
height: 44px;
width: 100vw;
position: relative;
}
.back-icon, .nav-bar-right {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
}
.back-icon { left: 0; }
.nav-bar-right { right: 0; }
.nav-bar-title {
flex: 1;
text-align: center;
font-size: 36rpx;
font-weight: bold;
color: #222;
letter-spacing: 2rpx;
line-height: 44px;
}
}
.user-info-modal {
display: flex;
flex-direction: column;
align-items: center;
.avatar-frame {
width: 104rpx;
height: 104rpx;
border-radius: 10rpx;
overflow: hidden;
background: #f2f2f2;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.10);
.avatar-img {
width: 104rpx;
height: 104rpx;
object-fit: cover;
display: block;
}
}
.nickname {
margin-top: 24rpx;
font-size: 32rpx;
font-weight: bold;
color: #222;
text-align: center;
}
}
.qrcode-modal-section {
margin-top: 48rpx;
width: 120vw;
display: flex;
flex-direction: column;
align-items: center;
.qrcode-img {
width: 100%;
height: 100%;
max-width: 480rpx;
max-height: 480rpx;
background: #fff;
border-radius: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.invite-code {
margin-top: 32rpx;
font-size: 30rpx;
color: #222;
font-weight: bold;
text-align: center;
}
}
.bottom-btns-modal {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
padding: 24rpx 32rpx calc(env(safe-area-inset-bottom) + 24rpx) 32rpx;
background: #fff;
z-index: 100;
.btn {
flex: 1;
height: 88rpx;
border-radius: 44rpx;
font-size: 32rpx;
font-weight: bold;
margin: 0 12rpx;
border: none;
&.gray {
background: linear-gradient(90deg, #f7f7f7, #f2f2f2);
color: #888;
}
&.green {
background: linear-gradient(90deg, #b2f08d, #39e9d2);
color: #fff;
}
}
}
}
</style>
.promo-modal-page {
min-height: 100vh;
background: linear-gradient(to bottom, #f6fff2 0%, #fff 100%);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
width: 100vw;
background: linear-gradient(to right, #b2f08d 0%, #39e9d2 100%);
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
.nav-bar-inner {
display: flex;
align-items: center;
height: 44px;
width: 100vw;
position: relative;
}
.back-icon,
.nav-bar-right {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
}
.back-icon {
left: 0;
}
.nav-bar-right {
right: 0;
}
.nav-bar-title {
flex: 1;
text-align: center;
font-size: 36rpx;
font-weight: bold;
color: #222;
letter-spacing: 2rpx;
line-height: 44px;
}
}
.user-info-modal {
display: flex;
flex-direction: column;
align-items: center;
.avatar-frame {
width: 104rpx;
height: 104rpx;
border-radius: 10rpx;
overflow: hidden;
background: #f2f2f2;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.10);
.avatar-img {
width: 104rpx;
height: 104rpx;
object-fit: cover;
display: block;
}
}
.nickname {
margin-top: 24rpx;
font-size: 32rpx;
font-weight: bold;
color: #222;
text-align: center;
}
}
.qrcode-modal-section {
margin-top: 48rpx;
width: 300rpx;
display: flex;
flex-direction: column;
align-items: center;
.qrcode-img {
width: 100%;
height: 100%;
background: #fff;
border-radius: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.invite-code {
margin-top: 32rpx;
font-size: 30rpx;
color: #222;
font-weight: bold;
text-align: center;
}
}
.bottom-btns-modal {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
padding: 24rpx 32rpx calc(env(safe-area-inset-bottom) + 24rpx) 32rpx;
background: #fff;
z-index: 100;
.btn {
flex: 1;
height: 88rpx;
border-radius: 44rpx;
font-size: 32rpx;
font-weight: bold;
margin: 0 12rpx;
border: none;
&.gray {
background: linear-gradient(90deg, #f7f7f7, #f2f2f2);
color: #888;
}
&.green {
background: linear-gradient(90deg, #b2f08d, #39e9d2);
color: #fff;
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save