第一次上传
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"id": "qf-image-cropper",
|
||||
"displayName": "图片裁剪插件",
|
||||
"version": "2.2.5",
|
||||
"description": "图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式，功能多性能高体验好注释全。",
|
||||
"keywords": [
|
||||
"qf-image-cropper",
|
||||
"图片裁剪",
|
||||
"图片编辑",
|
||||
"头像裁剪",
|
||||
"小程序"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "n",
|
||||
"百度": "n",
|
||||
"字节跳动": "n",
|
||||
"QQ": "u",
|
||||
"钉钉": "n",
|
||||
"快手": "n",
|
||||
"飞书": "n",
|
||||
"京东": "n"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
|
||||
<!-- 设置列表 -->
|
||||
<view class="settings-list">
|
||||
<!-- 账户安全 -->
|
||||
<!-- <view class="settings-section">
|
||||
<view class="section-title">账户安全</view>
|
||||
<view @click="Service.GoPage(accountItem.path)" v-for="(accountItem,accountIndex) in account" :key="accountIndex" class="section-item">
|
||||
<view class="" style="display: flex; align-items: center;">
|
||||
<view class="icon" style=" ">
|
||||
<img class="icon-img" :src="Service.GetIconImg(accountItem.icon)" alt="" />
|
||||
</view>
|
||||
<text style="margin-left: 14rpx; font-weight: 500; ">{{accountItem.name}}</text>
|
||||
</view>
|
||||
<view class="" style="display: flex; align-items: baseline; font-size: 24rpx; color: #9CA3AF; ">
|
||||
<text v-if="accountItem.name=='实名认证'" style="margin-right: 10rpx;">未认证</text>
|
||||
<up-icon name="arrow-right" size="12"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 支持与帮助 -->
|
||||
<view class="settings-section">
|
||||
<view class="section-title">支持与帮助</view>
|
||||
<view v-for="(helpItem,helpIndex) in help" :key="helpIndex" class="section-item">
|
||||
<view class="" style="display: flex; align-items: center;">
|
||||
<view class="icon" style=" ">
|
||||
<img class="icon-img" :src="Service.GetIconImg(helpItem.icon)" alt="" />
|
||||
</view>
|
||||
<text style="margin-left: 14rpx; font-weight: 500; ">{{helpItem.name}}</text>
|
||||
</view>
|
||||
<view class="" style="display: flex; align-items: baseline; font-size: 24rpx; color: #9CA3AF; ">
|
||||
<up-icon name="arrow-right" size="12"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Service } from '@/Service/Service'
|
||||
|
||||
|
||||
|
||||
|
||||
const account = ref([
|
||||
{
|
||||
name: '绑定手机号',
|
||||
icon: '/static/userFunc/set/security.png',
|
||||
path:'/pages/userFunc/bind'
|
||||
}, {
|
||||
name: '修改支付密码',
|
||||
icon: '/static/userFunc/set/password.png',
|
||||
path:'/pages/userFunc/password'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
const help = ref([
|
||||
{
|
||||
name: '用户协议',
|
||||
icon: '/static/userFunc/set/agreement.png'
|
||||
},
|
||||
{
|
||||
name: '隐私政策',
|
||||
icon: '/static/userFunc/set/privacy.png'
|
||||
},
|
||||
{
|
||||
name: '联系客服',
|
||||
icon: '/static/userFunc/set/service.png'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page {
|
||||
background-color: #f5f5f5;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
// 图标
|
||||
.icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #FFEDD5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
/* 用户信息卡片 */
|
||||
.user-card {
|
||||
margin: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(to right, #F97316, #FB923C);
|
||||
padding: 40rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
background-color: #FFFFFF;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-left: 30rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-level {
|
||||
width: fit-content;
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
padding: 4rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
/* 设置列表 */
|
||||
.settings-list {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
overflow: hidden;
|
||||
padding: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
color: #6B7280;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #e2e2e2;
|
||||
|
||||
// &:last-child{
|
||||
// border-bottom: none;
|
||||
// }
|
||||
}
|
||||
|
||||
.u-cell {
|
||||
height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
--u-cell-value-color: #999999;
|
||||
--u-cell-title-color: #333333;
|
||||
--u-cell-arrow-size: 40rpx;
|
||||
}
|
||||
|
||||
/* 版本信息 */
|
||||
.version-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
.version-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.version-number {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.check-update {
|
||||
font-size: 24rpx;
|
||||
color: #FF6600;
|
||||
background-color: #FFF7ED;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
/* 退出登录按钮 */
|
||||
.logout-btn {
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,585 @@
|
||||
<template>
|
||||
<view class="settings-page">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<view v-if="!isZFB" class="status-bar"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view v-if="!isZFB" class="nav-bar">
|
||||
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
||||
<text class="nav-title">设置</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="content">
|
||||
<!-- 个人信息卡片 -->
|
||||
<view class="profile-card">
|
||||
<view class="card-title">
|
||||
<text class="ri-user-line title-icon"></text>
|
||||
<text class="title-text">个人信息</text>
|
||||
</view>
|
||||
|
||||
<!-- 头像 -->
|
||||
<view class="setting-item" @click="uploadFImg(140,140,'Avatar','headimg')">
|
||||
<view class="item-left">
|
||||
<text class="item-label">头像</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<image class="avatar-preview" :src="Service.GetMateUrlByImg(userInfo.headImg)"
|
||||
mode="aspectFill" />
|
||||
<text class="ri-arrow-right-s-line item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 昵称 -->
|
||||
<view class="setting-item" @click="changeNickname">
|
||||
<view class="item-left">
|
||||
<text class="item-label">昵称</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="item-value">{{ userInfo.nick }}</text>
|
||||
<text class="ri-arrow-right-s-line item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 手机号 -->
|
||||
<view class="setting-item">
|
||||
<view class="item-left">
|
||||
<text class="item-label">手机号</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="item-value">{{ userInfo.phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 会员ID -->
|
||||
<view class="setting-item">
|
||||
<view class="item-left">
|
||||
<text class="item-label">会员ID</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="item-value">{{ userInfo.userNo }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 其他设置 -->
|
||||
<!-- <view class="other-settings-card">
|
||||
<view class="card-title">
|
||||
<text class="ri-settings-4-line title-icon"></text>
|
||||
<text class="title-text">其他设置</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @click="clearCache">
|
||||
<view class="item-left">
|
||||
<text class="item-label">清除缓存</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="item-value">23.5MB</text>
|
||||
<text class="ri-arrow-right-s-line item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="setting-item" @click="checkUpdate">
|
||||
<view class="item-left">
|
||||
<text class="item-label">检查更新</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="item-value">当前版本 v1.0.0</text>
|
||||
<text class="ri-arrow-right-s-line item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @click="viewPrivacy">
|
||||
<view class="item-left">
|
||||
<text class="item-label">隐私政策</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="ri-arrow-right-s-line item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="setting-item" @click="viewAgreement">
|
||||
<view class="item-left">
|
||||
<text class="item-label">用户协议</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="ri-arrow-right-s-line item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="logout-section">
|
||||
<button class="logout-btn" @click="save()">
|
||||
<text class="btn-text">保存信息</text>
|
||||
</button>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 修改昵称弹窗 -->
|
||||
<view v-if="showNicknameModal" class="modal-overlay" @click="closeNicknameModal">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">修改昵称</text>
|
||||
<text class="ri-close-line modal-close" @click="closeNicknameModal"></text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<input class="nickname-input" v-model="tempNickname" placeholder="请输入新昵称" maxlength="20" />
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<button class="modal-btn cancel" @click.stop="closeNicknameModal">取消</button>
|
||||
<button class="modal-btn confirm" @click.stop="saveNickname">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import { Service } from '@/Service/Service';
|
||||
import { ref } from "vue";
|
||||
import { vpUserService } from '@/Service/vp/vpUserService';
|
||||
import ImageCropperFunc from "@/components/ImageCropper";
|
||||
import {
|
||||
inject
|
||||
} from 'vue';
|
||||
const isZFB = inject('isZFB');
|
||||
|
||||
const userInfo = ref<any>({
|
||||
nick: '',
|
||||
sex: '',
|
||||
phone: '',
|
||||
headImg: ''
|
||||
})
|
||||
|
||||
// 临时昵称
|
||||
const tempNickname = ref('')
|
||||
|
||||
|
||||
|
||||
onLoad(() => {
|
||||
getUserinfo()
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
|
||||
});
|
||||
|
||||
|
||||
const getUserinfo = () => {
|
||||
vpUserService.GetUserInfo().then(res => {
|
||||
userInfo.value = res.data.userInfo
|
||||
})
|
||||
}
|
||||
const uploadFImg = (width : any, height : any, Type : any, Name : any) => {
|
||||
uni.chooseImage({
|
||||
count: 1, // 最多选择3张图片
|
||||
sizeType: ['original', 'compressed'], // 支持原图和压缩图
|
||||
sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
|
||||
success: function (res) {
|
||||
let path = res.tempFiles[0].path
|
||||
let arr = path.split('.')
|
||||
let name = arr[arr.length - 1]
|
||||
Service.uploadH5(path, 'Avatar', (data) => {
|
||||
userInfo.value.headImg = data
|
||||
vpUserService.UpdateUser(userInfo.value.headImg, userInfo.value.nick, userInfo.value.sex, '').then(res => {
|
||||
if (res.code == 0) {
|
||||
Service.Msg('修改成功!')
|
||||
getUserinfo()
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
fail: function (err) {
|
||||
console.error('选择失败:', err.errMsg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 修改昵称
|
||||
const changeNickname = () => {
|
||||
tempNickname.value = userInfo.value.nick
|
||||
showNicknameModal.value = true
|
||||
}
|
||||
|
||||
// 关闭昵称弹窗
|
||||
const closeNicknameModal = () => {
|
||||
showNicknameModal.value = false
|
||||
}
|
||||
|
||||
|
||||
// 保存昵称
|
||||
const saveNickname = () => {
|
||||
if (!tempNickname.value.trim()) {
|
||||
uni.showToast({
|
||||
title: '昵称不能为空',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
vpUserService.UpdateUser(userInfo.value.headImg, tempNickname.value, userInfo.value.sex, '').then(res => {
|
||||
if (res.code == 0) {
|
||||
Service.Msg('修改成功!')
|
||||
showNicknameModal.value = false
|
||||
userInfo.value.nick = tempNickname.value
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 用户信息
|
||||
const user = ref({
|
||||
nickname: '美食达人',
|
||||
avatar: 'https://picsum.photos/200/200?random=100',
|
||||
phone: '138****8888',
|
||||
memberId: '8888888'
|
||||
})
|
||||
|
||||
// 显示昵称弹窗
|
||||
const showNicknameModal = ref(false)
|
||||
|
||||
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
|
||||
// 修改头像
|
||||
const changeAvatar = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
// 这里应该上传到服务器，现在暂时直接使用本地路径
|
||||
user.value.avatar = res.tempFilePaths[0]
|
||||
uni.showToast({
|
||||
title: '头像已更新',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 清除缓存
|
||||
const clearCache = () => {
|
||||
uni.showModal({
|
||||
title: '清除缓存',
|
||||
content: '确定要清除缓存吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '清除中...'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '缓存已清除',
|
||||
icon: 'success'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 检查更新
|
||||
const checkUpdate = () => {
|
||||
uni.showLoading({
|
||||
title: '检查中...'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '已是最新版本',
|
||||
icon: 'success'
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
// 查看隐私政策
|
||||
const viewPrivacy = () => {
|
||||
uni.showToast({
|
||||
title: '隐私政策页面',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 查看用户协议
|
||||
const viewAgreement = () => {
|
||||
uni.showToast({
|
||||
title: '用户协议页面',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
const logout = () => {
|
||||
uni.showModal({
|
||||
title: '退出登录',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '退出中...'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '已退出登录',
|
||||
icon: 'success'
|
||||
})
|
||||
// 这里可以跳转到登录页面
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.settings-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 60rpx 24rpx 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 32rpx 24rpx;
|
||||
}
|
||||
|
||||
/* 卡片通用样式 */
|
||||
.profile-card,
|
||||
.other-settings-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 2rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 32rpx;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
/* 设置项 */
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
font-size: 28rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
/* 退出登录按钮 */
|
||||
.logout-section {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #F44336;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 560rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
font-size: 40rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modal-btn.cancel {
|
||||
background: #F5F5F5;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.modal-btn.confirm {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<view class="coupon-page">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
||||
<text class="nav-title">优惠券</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- Tab 切换 - 简约文字Tab -->
|
||||
<view class="tab-bar">
|
||||
<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }"
|
||||
@click="switchTab(index)">
|
||||
<text class="tab-text">{{ tab.label }}</text>
|
||||
<text v-if="tab.count > 0" class="tab-count">({{ tab.count }})</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券列表 - 简约卡片 -->
|
||||
<view class="coupon-list">
|
||||
<view v-for="coupon in coupons" :key="coupon.id" class="coupon-card" :class="`coupon-${coupon.status}`">
|
||||
<!-- 左侧金额 -->
|
||||
<view class="coupon-left">
|
||||
<!-- <view v-if="coupon.code === 'discount'" class="coupon-amount">
|
||||
<text class="amount-number">{{ coupon.deductMoney }}</text>
|
||||
<text class="amount-unit">折</text>
|
||||
</view> -->
|
||||
<view v-if="coupon.code === 'Special'" class="coupon-amount">
|
||||
<text class="amount-symbol">¥</text>
|
||||
<text class="amount-number">{{ coupon.deductMoney }}</text>
|
||||
</view>
|
||||
<view v-else class="coupon-amount">
|
||||
<text class="amount-gift">礼品</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="coupon-divider">
|
||||
<view class="divider-circle top"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="divider-circle bottom"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧信息 -->
|
||||
<view class="coupon-right">
|
||||
<view class="coupon-title">{{ coupon.code=='Special'?'满减券':'' }}</view>
|
||||
<view class="coupon-condition">
|
||||
<text v-if="coupon.needMoney > 0">满{{ coupon.needMoney }}元可用</text>
|
||||
<text v-else>无门槛</text>
|
||||
</view>
|
||||
<view class="coupon-expire">有效期至 {{ coupon.endTime }}</view>
|
||||
|
||||
<!-- 状态标识 -->
|
||||
<view v-if="coupon.status === 1" class="coupon-status used">
|
||||
<text>已使用</text>
|
||||
</view>
|
||||
<view v-else-if="coupon.status === 2" class="coupon-status expired">
|
||||
<text>已过期</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-if="coupons.length === 0" class="empty">
|
||||
<text class="empty-text">{{ emptyText }}</text>
|
||||
</view>
|
||||
<view v-else class="empty">
|
||||
<up-loadmore :status="status" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { Service } from "@/Service/Service"
|
||||
import { ref, computed } from "vue";
|
||||
import { vpDiscountService } from "@/Service/vp/vpDiscountService"
|
||||
|
||||
|
||||
let coupons = ref<Array<any>>([])
|
||||
let status = ref<string>('loadmore')
|
||||
let pageNo = ref<number>(1)
|
||||
|
||||
// 数据
|
||||
const currentTab = ref(0)
|
||||
|
||||
const tabs = ref([
|
||||
{ label: '未使用', value: 'unused', count: 0 ,type:1 },
|
||||
{ label: '已使用', value: 'used', count: 0 , type:2 },
|
||||
{ label: '已过期', value: 'expired', count: 0 ,type:3}
|
||||
])
|
||||
|
||||
// 空状态文本
|
||||
const emptyText = computed(() => {
|
||||
const textMap = ['暂无可用优惠券', '暂无已使用的优惠券', '暂无已过期的优惠券']
|
||||
return textMap[currentTab.value]
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
getList()
|
||||
});
|
||||
|
||||
|
||||
const getData = () => {
|
||||
coupons.value = []
|
||||
status.value = 'loadmore'
|
||||
pageNo.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
|
||||
const getList = () => {
|
||||
if (status.value == 'nomore' || status.value == 'loading') {
|
||||
return
|
||||
}
|
||||
|
||||
status.value = 'loading'
|
||||
|
||||
vpDiscountService.GetUserDiscountList( tabs.value[currentTab.value].type, pageNo.value).then(res => {
|
||||
if (res.code == 0) {
|
||||
coupons.value = [...coupons.value, ...res.data.list]
|
||||
status.value = 10 == res.data.list.length ? 'loadmore' : 'nomore'
|
||||
tabs.value[0].count =res.data.wsy
|
||||
tabs.value[1].count =res.data.ysy
|
||||
tabs.value[2].count =res.data.ygq
|
||||
pageNo.value++
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 切换Tab
|
||||
const switchTab = (index : number) => {
|
||||
currentTab.value = index
|
||||
getData()
|
||||
}
|
||||
|
||||
// 返回我的页面
|
||||
const goBack = () => {
|
||||
Service.GoPageBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-page {
|
||||
min-height: 100vh;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 60rpx 24rpx 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* Tab栏 - 简约文字Tab */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
padding: 20rpx 20rpx 0;
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-item.active .tab-text {
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 32rpx;
|
||||
height: 4rpx;
|
||||
background: #FF6B00;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tab-count {
|
||||
font-size: 24rpx;
|
||||
color: inherit;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
/* 优惠券列表 */
|
||||
.coupon-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 未使用 - 橙色边框 */
|
||||
.coupon-unused {
|
||||
border: 2rpx solid #FF6B00;
|
||||
}
|
||||
|
||||
/* 已使用 - 灰色 */
|
||||
.coupon-used {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 已过期 - 灰色 */
|
||||
.coupon-expired {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 左侧金额区 */
|
||||
.coupon-left {
|
||||
flex-shrink: 0;
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #FFF4E6, #FFE0B2);
|
||||
padding: 32rpx 20rpx;
|
||||
}
|
||||
|
||||
.coupon-amount {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.amount-symbol {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.amount-number {
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
color: #FF6B00;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.amount-unit {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #FF6B00;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.amount-gift {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.coupon-divider {
|
||||
position: relative;
|
||||
width: 4rpx;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.divider-circle {
|
||||
position: absolute;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.divider-circle.top {
|
||||
top: -10rpx;
|
||||
}
|
||||
|
||||
.divider-circle.bottom {
|
||||
bottom: -10rpx;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
bottom: 10rpx;
|
||||
left: 50%;
|
||||
width: 2rpx;
|
||||
background: repeating-linear-gradient(to bottom,
|
||||
#F5F5F5 0rpx,
|
||||
#F5F5F5 6rpx,
|
||||
transparent 6rpx,
|
||||
transparent 12rpx);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 右侧信息 */
|
||||
.coupon-right {
|
||||
flex: 1;
|
||||
padding: 24rpx 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.coupon-condition {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.coupon-expire {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 状态标识 */
|
||||
.coupon-status {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.coupon-status text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.coupon-status.used text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.coupon-status.expired text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
{
|
||||
"id": "t-cropper",
|
||||
"displayName": "t-cropper图片裁剪插件",
|
||||
"version": "1.0.8",
|
||||
"description": "vue3图片裁剪插件，头像裁剪、支持自定义尺寸、等比例缩放、拖动、图片翻转、剪切圆形/圆角图片，高性能裁剪图片插件",
|
||||
"keywords": [
|
||||
"图片裁剪",
|
||||
",头像裁剪,缩放,旋转,拖动",
|
||||
""
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0",
|
||||
"uni-app": "^3.1.0",
|
||||
"uni-app-x": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "",
|
||||
"darkmode": "-",
|
||||
"i18n": "-",
|
||||
"widescreen": "-"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "√",
|
||||
"aliyun": "√",
|
||||
"alipay": "x"
|
||||
},
|
||||
"client": {
|
||||
"uni-app": {
|
||||
"vue": {
|
||||
"vue2": "-",
|
||||
"vue3": "-"
|
||||
},
|
||||
"web": {
|
||||
"safari": "-",
|
||||
"chrome": "-"
|
||||
},
|
||||
"app": {
|
||||
"vue": "-",
|
||||
"nvue": "-",
|
||||
"android": "-",
|
||||
"ios": "-",
|
||||
"harmony": "-"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "-",
|
||||
"alipay": "-",
|
||||
"toutiao": "-",
|
||||
"baidu": "-",
|
||||
"kuaishou": "-",
|
||||
"jd": "-",
|
||||
"harmony": "-",
|
||||
"qq": "-",
|
||||
"lark": "-"
|
||||
},
|
||||
"quickapp": {
|
||||
"huawei": "-",
|
||||
"union": "-"
|
||||
}
|
||||
},
|
||||
"uni-app-x": {
|
||||
"web": {
|
||||
"safari": "-",
|
||||
"chrome": "-"
|
||||
},
|
||||
"app": {
|
||||
"android": "-",
|
||||
"ios": "-",
|
||||
"harmony": "-"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "-"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 328 B |
Reference in New Issue
Block a user