davy/zdtap-uniapp-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化活动列表页面，移除位置过滤和状态过滤，修复登录弹窗逻辑

Browse Source
This commit is contained in:
davy 2025-04-03 20:14:11 +08:00
parent e912e413f1
commit ec92a8b7ce
5 changed files with 204 additions and 494 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/loginPopup.vue
View File

@ -3,6 +3,7 @@
<view v-if="!showPhoneLogin" class="container">
<text class="title">登录并认证后体验完整功能</text>
<button class="cu-btn wx-btn text-white" @click="toLogin">
<image src="/static/icons/wechat-white.png" mode="aspectFit" class="wx-icon"></image>
微信一键登录</button>
<button class="cu-btn phone-btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
手机号快捷登录</button>
@ -235,6 +236,27 @@
url: '/pages/index/userAgreement'
})
},
async handleLogin() {
try {
const result = await this.$http.post('/api/login', {
code: this.code,
userInfo: this.userInfo
})
// 保存登录信息，替换临时token
uni.setStorageSync('token', result.data.token)
uni.setStorageSync('userInfo', result.data.userInfo)
this.$emit('login-success', result.data)
this.close()
} catch (error) {
console.error('登录失败：', error)
uni.showToast({
title: '登录失败，请重试',
icon: 'none'
})
}
}
}
}
@ -251,7 +273,7 @@
align-items: center;
padding: 80rpx 32rpx;
border-radius: 24rpx 24rpx 0rpx 0rpx;
.title {
font-family: Roboto;
font-size: 28rpx;
@ -259,7 +281,7 @@
color: #030303;
margin-bottom: 92rpx;
}
.wx-btn {
width: 100%;
height: 88rpx;
@ -268,11 +290,16 @@
display: flex;
justify-content: center;
align-items: center;
// color: #0B0E26;
color: #fff;
font-size: 28rpx;
font-weight: 500;
margin-bottom: 46rpx;
.wx-icon {
width: 40rpx;
height: 40rpx;
margin-right: 16rpx;
}
}
.phone-btn {

204
pages/activityList/activityList.vue
View File

@ -35,13 +35,18 @@
<view class="left flex flex-col justify-between align-center">
<image :src="it.brandLogo" style="width: 140rpx;height: 140rpx;"></image>
<text>活动状态</text>
<view v-if="it.stage == 0">未开始</view>
<view v-if="it.stage == 2">已结束</view>
<view v-if="it.stage == 3">已结束</view>
<view v-if="it.stage == 4">活动停止</view>
<view v-if="it.stage == 1" class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募即将结束</view>
<view v-if="it.stage == 1">
<text style="font-size: 72rpx; color: #DE3C4B;">{{it.remainingDays}}</text>天
<view v-if="it.audit_status == 0" style="color: #9E9E9E;font-size: 24rpx;">待审核</view>
<view v-if="it.audit_status == 2" style="color: #DE3C4B;font-size: 24rpx;">未通过</view>
<view v-if="it.audit_status == 1">
<block v-if="it.activity_status == 1">
<view class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募进行中</view>
<view>
<text style="font-size: 72rpx; color: #DE3C4B;">{{it.remainingDays}}</text>天
</view>
</block>
<block v-else>
<view style="color: #9E9E9E;font-size: 24rpx;">活动已结束</view>
</block>
</view>
</view>
<view class="right">
@ -49,8 +54,8 @@
<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{it.duration}}天内</text></view>
<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget}}桶</view>
<scroll-view v-if="it.beers" scroll-x="true" class="scroll-img">
<view class="beer-box" v-for="(it, index) in it.beers" :key="index" @click="toReview(it)">
<image v-if="it.cover" :src="it.cover" class="cover"></image>
<view class="beer-box" v-for="(beer, beerIndex) in it.beers" :key="beerIndex" @click="toReview(beer)">
<image v-if="beer.cover" :src="beer.cover" class="cover"></image>
</view>
</scroll-view>
<view class="flex align-center">
@ -94,61 +99,75 @@
},
total: 0,
isFilterActive: false,
userLocation: null,
isLocationReady: false, // 位置信息是否已获取
originalList: [], // 存储未经位置筛选的列表
selectedBrand: null, // 选中的品牌ID
};
},
onLoad() {
// 先获取活动列表
// 获取活动列表
this.getActivitiesFun();
// 同时异步获取位置信息
this.getUserLocation();
},
methods: {
// 获取用户位置
getUserLocation() {
uni.getLocation({
type: 'gcj02',
success: (res) => {
this.userLocation = {
latitude: res.latitude,
longitude: res.longitude
};
this.isLocationReady = true;
// 位置信息获取成功后，重新筛选列表
this.filterListByLocation();
},
fail: (err) => {
console.error('获取位置失败：', err);
this.isLocationReady = true;
uni.showToast({
title: '未获取到位置信息，将显示所有活动',
icon: 'none',
duration: 2000
// 获取活动列表
getActivitiesFun() {
this.loading = true;
const params = {
pageNum: this.queryForm.pageNum,
pageSize: this.queryForm.pageSize
};
// 添加品牌筛选
if (this.selectedBrand) {
params.breweryId = this.selectedBrand;
} else {
// 只有在没有品牌筛选时，才应用排序
params.orderBy = this.queryForm.orderType === 'latest' ? 'start_date' : 'popularity';
params.order = 'desc';
}
getActivities(params).then(res => {
console.log('获取到的原始数据：', res);
this.total = res.total;
if(res.rows && res.rows.length > 0) {
let arr = res.rows.map(it => {
it.remainingDays = this.getRemainingDays(it.endDate);
return it;
});
console.log('处理后的数据：', arr);
// 如果有品牌筛选，确保只显示选中品牌的活动
if (this.selectedBrand) {
arr = arr.filter(item => item.breweryId === this.selectedBrand);
}
console.log('最终显示的数据：', arr);
// 更新显示列表
if (this.queryForm.pageNum === 1) {
this.activeList = arr;
} else {
this.activeList = [...this.activeList, ...arr];
}
} else {
if (this.queryForm.pageNum === 1) {
this.activeList = [];
}
}
this.loading = false;
}).catch(err => {
console.error('获取活动列表失败：', err);
this.loading = false;
});
},
// 根据位置信息筛选列表
filterListByLocation() {
if (this.originalList.length > 0) {
this.activeList = this.originalList.filter(item => this.isActivityInUserCity(item.city));
}
},
// 检查活动是否在用户所在城市
isActivityInUserCity(activityCity) {
if (!this.userLocation) return false;
try {
const cityList = JSON.parse(activityCity);
// 这里需要和获取到的用户城市信息进行比对
return true; // 临时返回true，需要实际实现
} catch (e) {
return false;
}
// 计算剩余天数
getRemainingDays(date) {
const targetDate = new Date(date);
const currentDate = new Date();
const timeDiff = targetDate.getTime() - currentDate.getTime();
const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
return remainingDays;
},
// 切换排序
@ -184,92 +203,27 @@
// 跳转酒评
toReview(it) {
const token = uni.getStorageSync('token')
if (!token) {
this.$refs.loginRef.show()
return
}
uni.navigateTo({
url: "/pages/index/review?beerId=" + it.id
});
},
// 获取活动列表
getActivitiesFun() {
this.loading = true;
const params = {
pageNum: this.queryForm.pageNum,
pageSize: this.queryForm.pageSize
};
// 添加品牌筛选
if (this.selectedBrand) {
params.breweryId = this.selectedBrand;
} else {
// 只有在没有品牌筛选时，才应用排序
params.orderBy = this.queryForm.orderType === 'latest' ? 'start_date' : 'popularity';
params.order = 'desc';
}
getActivities(params).then(res => {
this.total = res.total;
if(res.rows && res.rows.length > 0) {
let arr = res.rows.map(it => {
it.remainingDays = this.getRemainingDays(it.endDate);
return it;
});
// 过滤活动状态：不显示已结束(2,3)、活动停止(4)、未开始(0)的活动
arr = arr.filter(item => item.stage === 1);
// 如果有品牌筛选，确保只显示选中品牌的活动
if (this.selectedBrand) {
arr = arr.filter(item => item.breweryId === this.selectedBrand);
}
// 保存未经位置筛选的列表
this.originalList = arr;
// 如果位置信息已准备好，进行位置筛选
if (this.isLocationReady && this.userLocation) {
arr = arr.filter(item => this.isActivityInUserCity(item.city));
}
// 更新显示列表
if (this.queryForm.pageNum === 1) {
this.activeList = arr;
} else {
this.activeList = [...this.activeList, ...arr];
}
} else {
if (this.queryForm.pageNum === 1) {
this.activeList = [];
this.originalList = [];
}
}
this.loading = false;
}).catch(err => {
console.error('获取活动列表失败：', err);
this.loading = false;
});
},
// 计算剩余天数
getRemainingDays(date) {
const targetDate = new Date(date);
const currentDate = new Date();
const timeDiff = targetDate.getTime() - currentDate.getTime();
const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
return remainingDays;
},
// 显示品牌筛选
showBrandFilter() {
// 如果还没有数据，先获取数据
if (!this.originalList || this.originalList.length === 0) {
if (!this.activeList || this.activeList.length === 0) {
this.queryForm.pageNum = 1;
this.getActivitiesFun().then(() => {
this.$refs.brandFilterRef.extractBrandsFromList(this.originalList);
this.$refs.brandFilterRef.extractBrandsFromList(this.activeList);
this.$refs.brandFilterRef.open();
});
} else {
this.$refs.brandFilterRef.extractBrandsFromList(this.originalList);
this.$refs.brandFilterRef.extractBrandsFromList(this.activeList);
this.$refs.brandFilterRef.open();
}
},

100
pages/index/my.vue
View File

@ -12,17 +12,18 @@
<text class="text-sm" style="color:#A0A5BA">店铺ID：{{ barInfo.barNumber || '-' }}</text>
</view>
</view>
<view v-else class="user-box flex align-center justify-start" :style="{'padding-top': statusBaeHeight + 60 + 'px'}" @click="$refs.loginRef.open()">
<view v-else class="user-box flex align-center justify-start" :style="{'padding-top': statusBaeHeight + 60 + 'px'}" @click="handleUserBoxClick">
<view class="avatar-placeholder flex align-center justify-center">
<image src="/static/default-avatar.svg" class="default-avatar"></image>
</view>
<view class="login-text flex align-center">
<text style="color: #333333; font-size: 36rpx; margin-right: 12rpx;">登录/认证</text>
<text style="color: #333333; font-size: 36rpx; margin-right: 12rpx;">{{loginText}}</text>
<text class="cuIcon-right" style="color: #999999; font-size: 32rpx;"></text>
</view>
</view>
<view v-if="barInfo" class="scan-box">
<view v-if="barInfo.authState == 0 || !barInfo.authEndTime" class="exprieTime">未认证</view>
<view v-if="barInfo.authState == 0" class="exprieTime">未认证</view>
<view v-else-if="barInfo.authState == 1" class="exprieTime">认证中</view>
<view v-else class="exprieTime">{{ barInfo.authEndTime }}认证到期</view>
<text>本月累计扫码酒款数量</text>
<view class="margin-top">
@ -117,6 +118,28 @@
statusBaeHeight: 40
};
},
computed: {
// 用户状态
userStatus() {
if (!this.isLoggedIn) return 'guest' // 游客
if (!this.barInfo || this.barInfo.authState === 0) return 'unverified' // 未认证
if (this.barInfo.authState === 1) return 'verifying' // 认证中
return 'verified' // 认证通过
},
// 登录/认证文字
loginText() {
switch (this.userStatus) {
case 'guest':
return '登录/认证'
case 'unverified':
return '您的门店还未认证，请点击认证门店信息'
case 'verifying':
return '您的门店正在认证中，请耐心等待'
default:
return '登录/认证'
}
}
},
onLoad() {
this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
},
@ -128,12 +151,33 @@
}
},
methods: {
// 生成临时token
generateTempToken() {
const tempToken = 'temp_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now()
return tempToken
},
// 检查登录状态
checkLoginStatus() {
const token = uni.getStorageSync('token')
const userInfo = uni.getStorageSync('userInfo')
this.isLoggedIn = !!(token && userInfo)
this.userInfo = userInfo
if (!token) {
// 如果没有token，生成临时token
const tempToken = this.generateTempToken()
uni.setStorageSync('token', tempToken)
this.isLoggedIn = false
this.userInfo = null
} else if (token.startsWith('temp_')) {
// 如果是临时token，说明是游客
this.isLoggedIn = false
this.userInfo = null
} else {
// 正式token，说明已登录
this.isLoggedIn = true
this.userInfo = userInfo
}
this.loading = false
},
loginSuccess() {
@ -171,6 +215,27 @@
})
})
},
// 处理用户信息区域点击
handleUserBoxClick() {
switch (this.userStatus) {
case 'guest':
this.$refs.loginRef.open()
break
case 'unverified':
uni.navigateTo({
url: '/pages/index/registration'
})
break
case 'verifying':
uni.showToast({
title: '您的门店正在认证中，请耐心等待',
icon: 'none'
})
break
default:
break
}
},
// 页面跳转
toPage(index) {
// 添加枝点小助手不需要登录
@ -187,7 +252,30 @@
return
}
// 已登录状态，执行对应操作
// 检查认证状态
if (this.userStatus === 'unverified') {
uni.navigateTo({
url: '/pages/index/registration'
})
return
}
// 认证中状态只能查看部分功能
if (this.userStatus === 'verifying') {
if (index === 6) { // 意见反馈
uni.navigateTo({
url: '/pagesMy/feedback'
})
return
}
uni.showToast({
title: '您的门店正在认证中，请耐心等待',
icon: 'none'
})
return
}
// 已认证状态可以访问所有功能
switch (index) {
case 1: // 我参与的
uni.switchTab({

2
pages/index/registration.vue
View File

@ -168,7 +168,7 @@
:disabled="!isFormValid"
@click="submitForm"
>
提交入驻
提交认证
</button>
</view>
</view>

359
pages/index/registrationOld.vue
View File

@ -1,359 +0,0 @@
<template>
<view class="page-content padding">
<!-- 上传logo -->
<view class="flex justify-center">
<image v-if="form.barLogo" :src="form.barLogo" style="width: 260rpx;height: 260rpx;border-radius: 50%;">
</image>
<view v-else class="bg-zd flex align-center justify-center"
style="width: 260rpx;height: 260rpx;border-radius: 50%;" @click="handleUpload('barLogo')">
上传logo
</view>
</view>
<view class="flex-col">
<view class="label">您的昵称</view>
<input v-model="form.nickName" placeholder="昵称" class="zd-input"></input>
</view>
<view class="flex-col">
<view class="label">联系电话</view>
<input v-model="form.phone" placeholder="联系电话" class="zd-input"></input>
</view>
<view class="flex-col">
<view class="label">门店名称</view>
<input v-model="form.barName" placeholder="门店名称" class="zd-input"></input>
</view>
<view class="flex-col">
<view class="label">门店地址</view>
<view class="flex justify-between align-center zd-address" @click="getMyLocation">
<input v-model="form.address" placeholder="门店地址" class="flex-1"></input>
<view style="height: 96rpx;line-height: 96rpx;width: 60rpx;">
<text class="cuIcon-locationfill" style="font-size: 42rpx;"></text>
</view>
</view>
</view>
<view class="flex-col">
<view class="label">您的营业执照</view>
<view class="zd-img-box flex align-center justify-between">
<view>
<image v-if="form.businessLicense" :src="form.businessLicense" style="width: 200rpx;height:94rpx">
</image>
</view>
<text class="upload-text" @click="handleUpload('businessLicense')">上传营业执照</text>
</view>
</view>
<view class="flex-col">
<view class="label">您的门头照</view>
<view class="zd-img-box flex align-center justify-between">
<view>
<image v-if="form.storefrontPhoto" :src="form.storefrontPhoto" style="width: 200rpx;height: 94rpx">
</image>
</view>
<text class="upload-text" @click="handleUpload('storefrontPhoto')">上传门头照</text>
</view>
</view>
<view class="flex-col">
<view class="label">您的店内职务</view>
<input v-model="form.position" placeholder="店内职务" class="zd-input"></input>
</view>
<button class="cu-btn bg-zd btn" @click="submitForm">提交入驻</button>
<uni-popup ref="successRef" type="center" border-radius="6px 6px 6px 6px" :is-mask-click="false">
<view class="bg-white flex flex-col align-center justify-center"
style="width: 676rpx;height: 596rpx;border-radius: 12rpx;">
<image src="@/static/cg.png" style="width: 376rpx;height: 262rpx;"></image>
<view class="margin-tb-xl" style="font-size: 28rpx;">提交成功，等待审核</view>
<button class="cu-btn bg-zd sucbtn" @click="toHome">进入首页</button>
</view>
</uni-popup>
</view>
</template>
<script>
// import QQMapSdk from '@/common/qqmap-wx-jssdk.min.js'
import {
barRegister
} from '@/api/login.js'
import {
base_url
} from '@/api/config.js'
export default {
data() {
return {
form: {
barLogo: '',
nickName: '',
phone: '',
barName: '',
address: '',
businessLicense: '', // 营业执照
storefrontPhoto: '', // 门头照
position: '', // 职务
openId: '',
},
userInfo: {},
QQMap: null,
};
},
onLoad({
openId
}) {
this.form.openId = openId
// this.QQMap = new QQMapSdk({
// key: "YQCBZ-SQZ6A-P6EKD-CAUGZ-L7IWO-JMFMJ"//密钥
// });
},
methods: {
// 提交
submitForm() {
if (!this.form.barLogo) {
uni.showToast({
title: '请上传logo',
icon: 'none',
mask: true
})
return
}
if (!this.form.nickName) {
uni.showToast({
title: '请输入昵称',
icon: 'none',
mask: true
})
return
}
if (!this.form.phone) {
uni.showToast({
title: '请输入联系电话',
icon: 'none',
mask: true
})
return
}
if (!this.form.barName) {
uni.showToast({
title: '请输入门店名称',
icon: 'none',
mask: true
})
return
}
if (!this.form.address) {
uni.showToast({
title: '请输入门店地址',
icon: 'none',
mask: true
})
return
}
if (!this.form.businessLicense) {
uni.showToast({
title: '请上传营业执照',
icon: 'none',
mask: true
})
return
}
if (!this.form.storefrontPhoto) {
uni.showToast({
title: '请上传门头照',
icon: 'none',
mask: true
})
return
}
if (!this.form.position) {
uni.showToast({
title: '请输入店内职务',
icon: 'none',
mask: true
})
return
}
if(!this.form.latitude || !this.form.longitude) {
uni.showToast({
title: '请通过定位获取位置',
icon: 'none',
mask: true,
})
return
}
uni.showLoading({
title: '提交中',
mask: true
})
barRegister(this.form).then(res => {
if (res.code == 200) {
this.userInfo = res.data.register // 暂存用户信息
uni.setStorageSync('token', res.data.token)
uni.hideLoading()
this.$refs.successRef.open()
}
}).catch(() => {
// uni.hideLoading()
})
},
toHome() {
uni.setStorageSync('userInfo', this.userInfo)
uni.reLaunch({
url: '/pages/index/index'
})
},
// 上传事件
handleUpload(key) {
uni.chooseImage({
count: 1,
success: (res) => {
uni.uploadFile({
url: base_url + '/bar/common/upload', //仅为示例，非真实的接口地址
filePath: res.tempFilePaths[0],
name: 'file',
formData: {
type: 'image'
},
success: (uploadFileRes) => {
this.form[key] = JSON.parse(uploadFileRes.data).url
}
});
}
})
},
// 获取位置
getMyLocation() {
uni.getSetting({
success: (res) => {
console.log(res)
if (!res.authSetting['scope.userLocation']) {
uni.authorize({
scope: 'scope.userLocation',
success: (res) => {
this.handleGetLocation()
},
fail: (err) => {
uni.showModal({
title: '提示',
content: '请先授权获取您的位置信息',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
if (res.authSetting['scope.userLocation']) {
this.handleGetLocation()
}
}
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
}else {
this.handleGetLocation()
}
},
})
},
handleGetLocation() {
uni.getLocation({
type: "gcj02",
success: (res) => {
console.log(res)
uni.chooseLocation({
complete: (res) => {
console.log(res)
if (res.errMsg == 'chooseLocation:ok') {
this.form.address = res.address
this.form.latitude = res.latitude
this.form.longitude = res.longitude
}
}
})
},
fail: (err) => {
console.log(err)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.page-content {
padding: 48rpx;
background-color: #FDFDFD;
min-height: 100vh;
.label {
color: #000;
margin-bottom: 26rpx;
font-size: 24rpx;
font-weight: 500;
}
.zd-input {
width: 654rpx;
height: 96rpx;
border-radius: 16rpx;
background-color: #FFF;
padding: 0 30rpx;
box-sizing: border-box;
color: #000;
margin-bottom: 56rpx;
border: 1px solid #C8C8C8;
}
.zd-address {
width: 654rpx;
height: 96rpx;
border-radius: 16rpx;
background-color: #FFF;
padding: 0 0 0 30rpx;
box-sizing: border-box;
color: #000;
margin-bottom: 56rpx;
border: 1px solid #C8C8C8;
}
.zd-img-box {
width: 654rpx;
min-height: 96rpx;
;
max-height: 200rpx;
border-radius: 16rpx;
background-color: #FFF;
padding: 0 30rpx;
box-sizing: border-box;
color: #000;
margin-bottom: 56rpx;
border: 1px solid #C8C8C8;
.upload-text {
font-size: 28rpx;
line-height: normal;
color: #FEE034;
}
}
}
.btn {
width: 654rpx;
height: 104rpx;
border-radius: 24rpx;
margin: 30rpx auto;
// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
font-weight: 500;
color: #0B0E26;
font-size: 32rpx;
}
.sucbtn {
width: 314rpx;
height: 76rpx;
}
</style>