init
This commit is contained in:
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<view class="deposit-container">
|
||||
<!-- 押金金额卡片 -->
|
||||
<view class="deposit-card">
|
||||
<view class="title">押金余额</view>
|
||||
<view class="amount">¥{{ depositAmount }}</view>
|
||||
<button class="withdraw-btn" @click="handleWithdraw">提现</button>
|
||||
</view>
|
||||
|
||||
<!-- 提现说明 -->
|
||||
<view class="notice-card">
|
||||
<view class="notice-title">
|
||||
<view class="dot"></view>
|
||||
<text>提现说明</text>
|
||||
</view>
|
||||
<view class="notice-content">
|
||||
<view class="notice-item">1. 提现金额将原路退回支付账户</view>
|
||||
<view class="notice-item">2. 提现申请提交后预计0-7个工作日到账</view>
|
||||
<view class="notice-item">3. 如超时未收到，请联系客服处理</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 押金记录 -->
|
||||
<view class="record-card">
|
||||
<view class="record-title">押金记录</view>
|
||||
<view class="record-list">
|
||||
<view class="record-item" v-for="(item, index) in records" :key="index">
|
||||
<view class="record-info">
|
||||
<text class="record-type">{{ item.type }}</text>
|
||||
<text class="record-time">{{ item.time }}</text>
|
||||
</view>
|
||||
<text class="record-amount" :class="item.type === '退还' ? 'refund' : ''">
|
||||
{{ item.type === '退还' ? '+' : '-' }}¥{{ item.amount }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
depositAmount: '99.00',
|
||||
records: [
|
||||
{ type: '支付', time: '2024-03-20 15:30', amount: '99.00' },
|
||||
{ type: '退还', time: '2024-03-19 12:00', amount: '99.00' },
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleWithdraw() {
|
||||
uni.showModal({
|
||||
title: '确认提现',
|
||||
content: '押金将原路退回，预计0-7个工作日到账',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '提现申请已提交',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.deposit-container {
|
||||
min-height: 100vh;
|
||||
background: #f8f8f8;
|
||||
padding: 30rpx;
|
||||
|
||||
.deposit-card {
|
||||
background: linear-gradient(135deg, #1976D2, #64B5F6);
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
box-shadow: 0 4rpx 20rpx rgba(25,118,210,0.2);
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 72rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.withdraw-btn {
|
||||
background: #fff;
|
||||
color: #1976D2;
|
||||
width: 80%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
margin: 0 auto;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
margin-top: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
|
||||
.notice-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #1976D2;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
.notice-item {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
padding-left: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record-card {
|
||||
margin-top: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
|
||||
.record-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
border-left: 8rpx solid #1976D2;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
.record-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
.record-type {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 6rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.record-amount {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
|
||||
&.refund {
|
||||
color: #4CAF50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<view class="feedback-container">
|
||||
<!-- 问题类型选择 -->
|
||||
<view class="type-section">
|
||||
<view class="section-title">问题类型</view>
|
||||
<view class="type-grid">
|
||||
<view
|
||||
v-for="(type, index) in types"
|
||||
:key="index"
|
||||
class="type-item"
|
||||
:class="{ active: selectedType === index }"
|
||||
@click="selectType(index)"
|
||||
>
|
||||
{{ type }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题描述 -->
|
||||
<view class="description-section">
|
||||
<view class="section-title">问题描述</view>
|
||||
<textarea
|
||||
class="description-input"
|
||||
v-model="description"
|
||||
placeholder="请详细描述您遇到的问题，以便我们更好地为您解决"
|
||||
maxlength="500"
|
||||
/>
|
||||
<view class="word-count">{{ description.length }}/500</view>
|
||||
</view>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<view class="upload-section">
|
||||
<view class="section-title">图片上传（选填）</view>
|
||||
<view class="upload-grid">
|
||||
<view
|
||||
class="upload-item"
|
||||
v-for="(img, index) in images"
|
||||
:key="index"
|
||||
>
|
||||
<image :src="img" mode="aspectFill" />
|
||||
<view class="delete-btn" @click="deleteImage(index)">×</view>
|
||||
</view>
|
||||
<view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
|
||||
<text class="plus">+</text>
|
||||
<text class="tip">上传图片</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<view class="contact-section">
|
||||
<view class="section-title">联系方式</view>
|
||||
<input
|
||||
class="contact-input"
|
||||
v-model="contact"
|
||||
placeholder="请留下您的手机号，方便我们联系您"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="submit-section">
|
||||
<button class="submit-btn" @click="submitFeedback">提交反馈</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
types: ['设备故障', '收费问题', '使用建议', '其他'],
|
||||
selectedType: -1,
|
||||
description: '',
|
||||
images: [],
|
||||
contact: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectType(index) {
|
||||
this.selectedType = index
|
||||
},
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 3 - this.images.length,
|
||||
success: (res) => {
|
||||
this.images = [...this.images, ...res.tempFilePaths]
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteImage(index) {
|
||||
this.images.splice(index, 1)
|
||||
},
|
||||
submitFeedback() {
|
||||
if (this.selectedType === -1) {
|
||||
uni.showToast({
|
||||
title: '请选择问题类型',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.description.trim()) {
|
||||
uni.showToast({
|
||||
title: '请描述您的问题',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.contact) {
|
||||
uni.showToast({
|
||||
title: '请留下联系方式',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: 提交反馈
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.feedback-container {
|
||||
min-height: 100vh;
|
||||
background: #f8f8f8;
|
||||
padding: 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.type-section {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.type-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -10rpx;
|
||||
|
||||
.type-item {
|
||||
width: calc(50% - 20rpx);
|
||||
margin: 10rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
background: #E3F2FD;
|
||||
color: #1976D2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description-section {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.description-input {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.word-count {
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.upload-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.upload-item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
|
||||
.plus {
|
||||
font-size: 60rpx;
|
||||
line-height: 1;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.contact-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 10rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
padding: 0 40rpx;
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: #1976D2;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view class="help-container">
|
||||
<!-- 常见问题 -->
|
||||
<view class="faq-list">
|
||||
<view
|
||||
class="faq-item"
|
||||
v-for="(item, index) in faqList"
|
||||
:key="index"
|
||||
@click="toggleFaq(index)"
|
||||
>
|
||||
<view class="faq-header">
|
||||
<text class="question">{{ item.question }}</text>
|
||||
<view class="arrow" :class="{ open: item.isOpen }"></view>
|
||||
</view>
|
||||
<view class="answer" v-show="item.isOpen">
|
||||
{{ item.answer }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系客服 -->
|
||||
<view class="contact-card">
|
||||
<view class="contact-title">联系客服</view>
|
||||
<view class="contact-content">
|
||||
<view class="contact-item">
|
||||
<text class="label">客服电话</text>
|
||||
<text class="value" @click="makePhoneCall">{{ contactInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="contact-item">
|
||||
<text class="label">服务时间</text>
|
||||
<text class="value">{{ contactInfo.serviceTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { helpConfig } from '@/config/help'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
faqList: helpConfig.faqList.map(item => ({
|
||||
...item,
|
||||
isOpen: false
|
||||
})),
|
||||
contactInfo: helpConfig.contactInfo
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleFaq(index) {
|
||||
this.faqList[index].isOpen = !this.faqList[index].isOpen
|
||||
},
|
||||
makePhoneCall() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.contactInfo.phone
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.help-container {
|
||||
min-height: 100vh;
|
||||
background: #f8f8f8;
|
||||
padding: 30rpx;
|
||||
|
||||
.faq-list {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
|
||||
.faq-item {
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 20rpx;
|
||||
|
||||
.question {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-right: 4rpx solid #999;
|
||||
border-bottom: 4rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
transition: all 0.3s;
|
||||
|
||||
&.open {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.answer {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
padding: 0 20rpx 30rpx;
|
||||
background: #f9f9f9;
|
||||
border-radius: 10rpx;
|
||||
margin: 0 20rpx 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
|
||||
.contact-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20rpx;
|
||||
border-left: 8rpx solid #1976D2;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
.contact-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 宣传图片区域 -->
|
||||
<view class="banner">
|
||||
<view class="temp-banner">
|
||||
<text class="banner-text">共享风扇</text>
|
||||
<text class="banner-subtitle">让清凉随身携带</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能按钮区域 -->
|
||||
<view class="function-area">
|
||||
<view class="function-btn rent" @click="goToRent">
|
||||
<text class="btn-text">扫码租借</text>
|
||||
<text class="btn-desc">快速租借风扇</text>
|
||||
</view>
|
||||
|
||||
<view class="function-btn return" @click="goToReturn">
|
||||
<text class="btn-text">扫码归还</text>
|
||||
<text class="btn-desc">轻松完成归还</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 使用提示区域 -->
|
||||
<view class="tips-section">
|
||||
<view class="tips-title">使用小贴士</view>
|
||||
<view class="tips-list">
|
||||
<view class="tip-item">
|
||||
<view class="tip-dot"></view>
|
||||
<text>租借时间：每次最长可租借12小时</text>
|
||||
</view>
|
||||
<view class="tip-item">
|
||||
<view class="tip-dot"></view>
|
||||
<text>押金说明：租借需支付99元押金，归还后自动退还</text>
|
||||
</view>
|
||||
<view class="tip-item">
|
||||
<view class="tip-dot"></view>
|
||||
<text>收费标准：2元/小时，不足1小时按1小时计算</text>
|
||||
</view>
|
||||
<view class="tip-item">
|
||||
<view class="tip-dot"></view>
|
||||
<text>爱护提示：请勿将设备带离指定区域，保持设备清洁</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goToRent() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/rent/index'
|
||||
})
|
||||
},
|
||||
goToReturn() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/return/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background: #f8f8f8;
|
||||
padding-bottom: 40rpx;
|
||||
|
||||
.banner {
|
||||
padding: 20rpx;
|
||||
|
||||
.temp-banner {
|
||||
height: 320rpx;
|
||||
background: linear-gradient(135deg, #1976D2, #64B5F6);
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
box-shadow: 0 4rpx 20rpx rgba(25, 118, 210, 0.2);
|
||||
|
||||
.banner-text {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.function-area {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.function-btn {
|
||||
width: 320rpx;
|
||||
height: 180rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.btn-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.rent {
|
||||
background: linear-gradient(135deg, #4CAF50, #81C784);
|
||||
.btn-text, .btn-desc {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.return {
|
||||
background: linear-gradient(135deg, #FF9800, #FFB74D);
|
||||
.btn-text, .btn-desc {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
margin: 30rpx;
|
||||
padding: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
|
||||
.tips-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 24rpx;
|
||||
color: #333;
|
||||
padding-left: 20rpx;
|
||||
border-left: 8rpx solid #1976D2;
|
||||
}
|
||||
|
||||
.tips-list {
|
||||
.tip-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 0 10rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tip-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: #1976D2;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view class="my-container">
|
||||
<!-- 用户信息区域 -->
|
||||
<view class="user-info">
|
||||
<view class="avatar-wrap">
|
||||
<image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="info-content">
|
||||
<text class="nickname">{{ userInfo.nickName || '未登录' }}</text>
|
||||
<text class="phone">{{ userInfo.phone || '点击登录' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 押金卡片 -->
|
||||
<view class="balance-card" @click="navigateTo('/pages/deposit/index')">
|
||||
<view class="balance-content">
|
||||
<text class="label">押金余额</text>
|
||||
<text class="amount">¥{{ deposit }}</text>
|
||||
</view>
|
||||
<view class="withdraw-btn">
|
||||
提现
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能模块 -->
|
||||
<view class="function-list">
|
||||
<!-- 订单 -->
|
||||
<view class="function-item" @click="navigateTo('/pages/order/index')">
|
||||
<view class="item-left">
|
||||
<view class="icon-wrap order">
|
||||
<view class="icon-placeholder"></view>
|
||||
</view>
|
||||
<text class="title">租借记录</text>
|
||||
</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
|
||||
<!-- 押金 -->
|
||||
<view class="function-item" @click="navigateTo('/pages/deposit/index')">
|
||||
<view class="item-left">
|
||||
<view class="icon-wrap deposit">
|
||||
<view class="icon-placeholder"></view>
|
||||
</view>
|
||||
<text class="title">押金管理</text>
|
||||
</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
|
||||
<!-- 投诉建议 -->
|
||||
<view class="function-item" @click="navigateTo('/pages/feedback/index')">
|
||||
<view class="item-left">
|
||||
<view class="icon-wrap feedback">
|
||||
<view class="icon-placeholder"></view>
|
||||
</view>
|
||||
<text class="title">投诉与建议</text>
|
||||
</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
|
||||
<!-- 帮助中心 -->
|
||||
<view class="function-item" @click="navigateTo('/pages/help/index')">
|
||||
<view class="item-left">
|
||||
<view class="icon-wrap help">
|
||||
<view class="icon-placeholder"></view>
|
||||
</view>
|
||||
<text class="title">帮助中心</text>
|
||||
</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: {},
|
||||
deposit: '0.00'
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getUserInfo()
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
if (userInfo) {
|
||||
this.userInfo = userInfo
|
||||
}
|
||||
},
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-container {
|
||||
min-height: 100vh;
|
||||
background: #f8f8f8;
|
||||
padding-bottom: 40rpx;
|
||||
|
||||
.user-info {
|
||||
background: linear-gradient(135deg, #1976D2, #64B5F6);
|
||||
padding: 40rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -20%;
|
||||
bottom: -30%;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
margin-right: 30rpx;
|
||||
border: 4rpx solid rgba(255,255,255,0.3);
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.nickname {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
margin: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background: linear-gradient(135deg, transparent, rgba(25,118,210,0.1));
|
||||
border-radius: 0 0 0 200rpx;
|
||||
}
|
||||
|
||||
.balance-content {
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 48rpx;
|
||||
color: #1976D2;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.withdraw-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
background: #1976D2;
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.arrow {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-top: 3rpx solid #fff;
|
||||
border-right: 3rpx solid #fff;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.function-list {
|
||||
margin: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 10rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-wrap {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.order {
|
||||
background: #E3F2FD;
|
||||
color: #1976D2;
|
||||
}
|
||||
|
||||
&.deposit {
|
||||
background: #FFF3E0;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
&.feedback {
|
||||
background: #E8F5E9;
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
&.help {
|
||||
background: #F3E5F5;
|
||||
color: #9C27B0;
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: currentColor;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 4rpx solid #999;
|
||||
border-right: 4rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<view class="order-container">
|
||||
<!-- 状态切换 -->
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === index }"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
{{ tab }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list">
|
||||
<view class="order-item" v-for="(order, index) in orderList" :key="index">
|
||||
<view class="order-header">
|
||||
<text class="order-no">订单号：{{ order.orderNo }}</text>
|
||||
<text class="order-status" :class="order.status">{{ order.statusText }}</text>
|
||||
</view>
|
||||
<view class="order-content">
|
||||
<view class="device-info">
|
||||
<text class="device-name">共享风扇</text>
|
||||
<text class="device-id">设备号：{{ order.deviceId }}</text>
|
||||
</view>
|
||||
<view class="time-info">
|
||||
<view class="time-item">
|
||||
<text class="label">开始时间：</text>
|
||||
<text class="value">{{ order.startTime }}</text>
|
||||
</view>
|
||||
<view class="time-item">
|
||||
<text class="label">结束时间：</text>
|
||||
<text class="value">{{ order.endTime || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-info">
|
||||
<text class="amount">￥{{ order.amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<view class="empty-tip" v-if="orderList.length === 0">
|
||||
<view class="empty-icon"></view>
|
||||
<text>暂无订单记录</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0,
|
||||
tabs: ['全部', '使用中', '已完成'],
|
||||
orderList: [
|
||||
{
|
||||
orderNo: 'ORDER202403200001',
|
||||
status: 'using',
|
||||
statusText: '使用中',
|
||||
deviceId: 'FAN001',
|
||||
startTime: '2024-03-20 15:30',
|
||||
endTime: '',
|
||||
amount: '2.00'
|
||||
},
|
||||
{
|
||||
orderNo: 'ORDER202403190001',
|
||||
status: 'finished',
|
||||
statusText: '已完成',
|
||||
deviceId: 'FAN002',
|
||||
startTime: '2024-03-19 13:00',
|
||||
endTime: '2024-03-19 15:00',
|
||||
amount: '4.00'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.currentTab = index
|
||||
// TODO: 根据状态获取订单列表
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-container {
|
||||
min-height: 100vh;
|
||||
background: #f8f8f8;
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 20rpx 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
padding: 20rpx 0;
|
||||
|
||||
&.active {
|
||||
color: #1976D2;
|
||||
font-weight: 500;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: #1976D2;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
padding: 20rpx;
|
||||
|
||||
.order-item {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.order-no {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 26rpx;
|
||||
|
||||
&.using {
|
||||
color: #1976D2;
|
||||
}
|
||||
|
||||
&.finished {
|
||||
color: #4CAF50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-content {
|
||||
padding-top: 20rpx;
|
||||
|
||||
.device-info {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.device-name {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.device-id {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.time-info {
|
||||
.time-item {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.label {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-info {
|
||||
text-align: right;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.amount {
|
||||
font-size: 36rpx;
|
||||
color: #FF9800;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
padding: 100rpx 0;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
|
||||
.empty-icon {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<view class="rent-container">
|
||||
<view class="scan-area">
|
||||
<view class="tips">请扫描风扇上的二维码</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLoad() {
|
||||
// 直接启动扫码
|
||||
this.scanCode()
|
||||
},
|
||||
methods: {
|
||||
scanCode() {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
console.log('扫码结果：', res.result)
|
||||
// TODO: 处理扫码结果，调用租借API
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '扫码失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rent-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
|
||||
.scan-area {
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
|
||||
.tips {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<view class="return-container">
|
||||
<view class="scan-area">
|
||||
<view class="tips">请扫描归还点的二维码</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLoad() {
|
||||
// 直接启动扫码
|
||||
this.scanCode()
|
||||
},
|
||||
methods: {
|
||||
scanCode() {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
console.log('扫码结果：', res.result)
|
||||
// TODO: 处理扫码结果，调用归还API
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '扫码失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.return-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
|
||||
.scan-area {
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
|
||||
.tips {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user