1277 lines
30 KiB
Vue
1277 lines
30 KiB
Vue
|
<template>
|
|||
|
|
<view class="pages">
|
|||
|
|
<u-navbar title="订单投诉" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" height='44'></u-navbar>
|
|||
|
|
<image class="topbj" src="https://api.ccttiot.com/smartmeter/img/static/uxpj08dsLpZAnuQXy3md" mode=""></image>
|
|||
|
|
<view class="tslb" @click="btnts">
|
|||
|
|
投诉列表 〉
|
|||
|
|
</view>
|
|||
|
|
<!-- 投诉类型选择 -->
|
|||
|
|
<view class="complaint-section">
|
|||
|
|
<view class="section-title">
|
|||
|
|
选择投诉类型 <text class="required">✲</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="complaint-tags">
|
|||
|
|
<view
|
|||
|
|
class="tag-item"
|
|||
|
|
:class="{ active: selectedType === item.name }"
|
|||
|
|
v-for="item in complaintTypes"
|
|||
|
|
:key="item.id"
|
|||
|
|
@click="selectComplaintType(item.name)"
|
|||
|
|
>
|
|||
|
|
{{ item.name }}
|
|||
|
|
<view class="check-icon" v-if="selectedType === item.name">✓</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 问题描述 -->
|
|||
|
|
<view class="problem-section">
|
|||
|
|
<view class="section-title">
|
|||
|
|
问题描述 <text class="required">✲</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="input-container">
|
|||
|
|
<textarea
|
|||
|
|
class="custom-textarea"
|
|||
|
|
v-model="textValue"
|
|||
|
|
placeholder="输入问题描述"
|
|||
|
|
:maxlength="500"
|
|||
|
|
@input="updateWordCount"
|
|||
|
|
></textarea>
|
|||
|
|
<text class="word-count">{{ currentCount }}/500</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 图片上传 -->
|
|||
|
|
<view class="upload-section">
|
|||
|
|
<view class="upload-grid">
|
|||
|
|
<view
|
|||
|
|
class="upload-item"
|
|||
|
|
v-for="(item, index) in imglist"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<image :src="item" mode="aspectFill" class="uploaded-img"></image>
|
|||
|
|
<view class="delete-btn" @click="deleteImage(index)">×</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="upload-btn"
|
|||
|
|
v-if="imglist.length < 4"
|
|||
|
|
@click="chooseImage"
|
|||
|
|
>
|
|||
|
|
<image class="sc" src="https://api.ccttiot.com/smartmeter/img/static/udgL6KzisrZlMrk9AZb2" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="upload-tip">最多上传4张,上传问题截图可以让问题快速解决哦!</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 订单选择 -->
|
|||
|
|
<view class="order-section">
|
|||
|
|
<view class="section-title">选择要投诉的订单</view>
|
|||
|
|
<view class="order-selector" @click="selectOrder">
|
|||
|
|
<view class="order-info-display" v-if="selectedOrder">
|
|||
|
|
<text class="order-no-display">{{ getOrderNo(selectedOrder) }}</text>
|
|||
|
|
<!-- <text class="order-amount-display">{{ getOrderAmount(selectedOrder) }}元</text> -->
|
|||
|
|
</view>
|
|||
|
|
<text class="order-text" v-else>请选择订单</text>
|
|||
|
|
<text class="arrow">〉</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 退款选择 -->
|
|||
|
|
<view class="refund-section">
|
|||
|
|
<view class="refund-row">
|
|||
|
|
<view class="section-title">选择退款</view>
|
|||
|
|
<view class="radio-group">
|
|||
|
|
<view
|
|||
|
|
class="radio-item"
|
|||
|
|
:class="{ active: refundChoice === 'yes' }"
|
|||
|
|
@click="refundChoice = 'yes'"
|
|||
|
|
>
|
|||
|
|
<view class="radio-circle">
|
|||
|
|
<view class="radio-dot" v-if="refundChoice === 'yes'"></view>
|
|||
|
|
</view>
|
|||
|
|
<text>是</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="radio-item"
|
|||
|
|
:class="{ active: refundChoice === 'no' }"
|
|||
|
|
@click="refundChoice = 'no'"
|
|||
|
|
>
|
|||
|
|
<view class="radio-circle">
|
|||
|
|
<view class="radio-dot" v-if="refundChoice === 'no'"></view>
|
|||
|
|
</view>
|
|||
|
|
<text>否</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 退款金额输入 -->
|
|||
|
|
<view class="refund-row" v-if="refundChoice === 'yes'">
|
|||
|
|
<view class="section-title">退款金额</view>
|
|||
|
|
<view class="refund-input-container">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
v-model="refundAmount"
|
|||
|
|
placeholder="请输入数值"
|
|||
|
|
class="refund-input"
|
|||
|
|
/>
|
|||
|
|
<text class="currency-unit">元</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 联系方式 -->
|
|||
|
|
<view class="contact-section">
|
|||
|
|
<view class="section-title">联系方式</view>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
v-model="contact"
|
|||
|
|
placeholder="请输入手机号以便我们回复您"
|
|||
|
|
class="contact-input"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 提交按钮 -->
|
|||
|
|
<view class="submit-btn" @click="sub()">确定提交</view>
|
|||
|
|
|
|||
|
|
<!-- 订单选择弹窗 -->
|
|||
|
|
<view class="order-modal" v-if="showOrderModal" @click="closeOrderModal">
|
|||
|
|
<view class="modal-content" @click.stop>
|
|||
|
|
<view class="modal-header">
|
|||
|
|
<text class="modal-title">选择订单</text>
|
|||
|
|
<text class="close-btn" @click="closeOrderModal">×</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="order-list" @scroll="onOrderListScroll">
|
|||
|
|
<view
|
|||
|
|
class="order-item"
|
|||
|
|
:class="{ selected: tempSelectedOrder && tempSelectedOrder.billId === order.billId }"
|
|||
|
|
v-for="order in orderList"
|
|||
|
|
:key="order.billId"
|
|||
|
|
@click="selectOrderItem(order)"
|
|||
|
|
>
|
|||
|
|
<view class="order-info">
|
|||
|
|
<text class="order-no">订单号：{{ getOrderNo(order) }}</text>
|
|||
|
|
<!-- <text class="order-amount">金额：{{ getOrderAmount(order) }}元</text> -->
|
|||
|
|
<text class="order-time">{{ order.createTime }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="order-status" :class="order.statusClass">
|
|||
|
|
{{ order.statusText }}
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载更多提示 -->
|
|||
|
|
<view class="load-more" v-if="orderList.length > 0">
|
|||
|
|
<view v-if="loading" class="loading-text">
|
|||
|
|
<text>加载中...</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-else-if="!hasMore" class="no-more-text">
|
|||
|
|
<text>没有更多订单了</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="load-more-btn" @click="loadMoreOrders">
|
|||
|
|
<text>点击加载更多</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<view class="empty-state" v-if="orderList.length === 0 && !loading">
|
|||
|
|
<text>暂无订单数据</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-footer">
|
|||
|
|
<view class="cancel-btn" @click="closeOrderModal">取消</view>
|
|||
|
|
<view class="confirm-btn" @click="confirmOrderSelection">确定</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: " ",
|
|||
|
|
},
|
|||
|
|
textValue: '',
|
|||
|
|
currentCount: 0,
|
|||
|
|
imglist: [],
|
|||
|
|
contact: '',
|
|||
|
|
selectedType: '', // 选中的投诉类型（单选，存储文字）
|
|||
|
|
complaintTypes: [
|
|||
|
|
{ id: 1, name: '订单金额不对' },
|
|||
|
|
{ id: 2, name: '订单结束不了' },
|
|||
|
|
{ id: 3, name: '订单异常结束' }
|
|||
|
|
],
|
|||
|
|
selectedOrder: null,
|
|||
|
|
refundChoice: 'no', // yes 或 no
|
|||
|
|
refundAmount: '', // 退款金额
|
|||
|
|
orderobj: {},
|
|||
|
|
showOrderModal: false, // 是否显示订单选择弹窗
|
|||
|
|
orderList: [], // 订单列表
|
|||
|
|
tempSelectedOrder: null, // 临时选中的订单
|
|||
|
|
currentPage: 1, // 当前页码
|
|||
|
|
pageSize: 10, // 每页显示数量
|
|||
|
|
totalPages: 1, // 总页数
|
|||
|
|
loading: false, // 是否正在加载
|
|||
|
|
hasMore: true, // 是否还有更多数据
|
|||
|
|
searchKeyword: '', // 搜索关键词
|
|||
|
|
searchTimer: null ,// 搜索防抖定时器
|
|||
|
|
token:'',
|
|||
|
|
flag:true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
if (option.obj) {
|
|||
|
|
console.log('传入的订单数据:', JSON.parse(option.obj));
|
|||
|
|
this.selectedOrder = JSON.parse(option.obj)
|
|||
|
|
}
|
|||
|
|
this.getqiniuyun()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取订单号（兼容多种字段名）
|
|||
|
|
getOrderNo(order) {
|
|||
|
|
// 优先使用原始的 no 字段，如果没有再使用其他字段
|
|||
|
|
return order.no || order.billNo || order.orderNo || order.orderNumber || order.id || '未知订单号'
|
|||
|
|
},
|
|||
|
|
// 获取订单金额（兼容多种字段名）
|
|||
|
|
getOrderAmount(order) {
|
|||
|
|
return order.amount || order.money || order.totalAmount || '0.00'
|
|||
|
|
},
|
|||
|
|
// 获取订单ID（兼容多种字段名）
|
|||
|
|
getOrderId(order) {
|
|||
|
|
return order.billId || order.id || order.orderId || this.orderobj.billId || ''
|
|||
|
|
},
|
|||
|
|
// 点击跳转到投诉列表
|
|||
|
|
btnts(){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/page_fenbao/tousu/yhlist'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取七牛云上传token
|
|||
|
|
getqiniuyun(){
|
|||
|
|
this.$u.get("/common/qiniuToken").then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.token = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 选择投诉类型（单选）
|
|||
|
|
selectComplaintType(name) {
|
|||
|
|
this.selectedType = name
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 更新字数统计
|
|||
|
|
updateWordCount() {
|
|||
|
|
this.currentCount = this.textValue.length
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选择图片
|
|||
|
|
chooseImage() {
|
|||
|
|
let _this = this
|
|||
|
|
let math = 'static/' + _this.$u.guid(20)
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: 4 - this.imglist.length,
|
|||
|
|
sizeType: ['compressed'],
|
|||
|
|
sourceType: ['album', 'camera'],
|
|||
|
|
success(res) {
|
|||
|
|
const tempFilePaths = res.tempFilePaths[0]
|
|||
|
|
wx.uploadFile({
|
|||
|
|
url: 'https://up-z2.qiniup.com',
|
|||
|
|
name: 'file',
|
|||
|
|
filePath: tempFilePaths,
|
|||
|
|
formData: {
|
|||
|
|
token: _this.token, //后端返回的token
|
|||
|
|
key: 'smartmeter/img/' + math
|
|||
|
|
},
|
|||
|
|
success: function(res) {
|
|||
|
|
console.log(res, 'resres');
|
|||
|
|
let str = JSON.parse(res.data)
|
|||
|
|
let tempFilePaths = 'https://api.ccttiot.com/' + str.key
|
|||
|
|
_this.imglist.push(tempFilePaths)
|
|||
|
|
console.log(_this.imglist);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 删除图片
|
|||
|
|
deleteImage(index) {
|
|||
|
|
this.imglist.splice(index, 1)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选择订单
|
|||
|
|
selectOrder() {
|
|||
|
|
this.loadOrderList()
|
|||
|
|
this.showOrderModal = true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载订单列表
|
|||
|
|
loadOrderList() {
|
|||
|
|
this.loading = true
|
|||
|
|
this.currentPage = 1
|
|||
|
|
|
|||
|
|
// 调用真实API获取订单列表
|
|||
|
|
this.$u.get("/app/order/mineList?pageNum=1&pageSize=10&suitType=1&status=&isAsc=desc&orderByColumn=createTime", {
|
|||
|
|
pageNum: this.currentPage,
|
|||
|
|
pageSize: this.pageSize
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
// 调试API返回的原始数据
|
|||
|
|
console.log('API返回数据:', res)
|
|||
|
|
|
|||
|
|
// 处理订单数据
|
|||
|
|
this.orderList = this.formatOrderData(res.rows || [])
|
|||
|
|
this.totalPages = Math.ceil((res.total || 0) / this.pageSize)
|
|||
|
|
this.hasMore = this.currentPage < this.totalPages
|
|||
|
|
|
|||
|
|
// 调试信息
|
|||
|
|
console.log('订单数据:', {
|
|||
|
|
总订单数: res.total,
|
|||
|
|
当前页: this.currentPage,
|
|||
|
|
每页数量: this.pageSize,
|
|||
|
|
总页数: this.totalPages,
|
|||
|
|
是否有更多: this.hasMore,
|
|||
|
|
当前订单数: this.orderList.length
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || '获取订单失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.loading = false
|
|||
|
|
}).catch((err) => {
|
|||
|
|
console.error('获取订单失败:', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '获取订单失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载更多订单
|
|||
|
|
loadMoreOrders() {
|
|||
|
|
if (this.loading || !this.hasMore) return
|
|||
|
|
|
|||
|
|
this.loading = true
|
|||
|
|
this.currentPage++
|
|||
|
|
|
|||
|
|
// 调用真实API获取更多订单
|
|||
|
|
this.$u.get("/app/order/mineList?pageNum=1&pageSize=10&suitType=1&status=&isAsc=desc&orderByColumn=createTime", {
|
|||
|
|
pageNum: this.currentPage,
|
|||
|
|
pageSize: this.pageSize
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
// 处理订单数据并追加到现有列表
|
|||
|
|
const newOrders = this.formatOrderData(res.rows || [])
|
|||
|
|
this.orderList = [...this.orderList, ...newOrders]
|
|||
|
|
// 更新总页数（以防后端返回的数据有变化）
|
|||
|
|
this.totalPages = Math.ceil((res.total || 0) / this.pageSize)
|
|||
|
|
this.hasMore = this.currentPage < this.totalPages
|
|||
|
|
|
|||
|
|
// 调试信息
|
|||
|
|
console.log('加载更多订单:', {
|
|||
|
|
总订单数: res.total,
|
|||
|
|
当前页: this.currentPage,
|
|||
|
|
每页数量: this.pageSize,
|
|||
|
|
总页数: this.totalPages,
|
|||
|
|
是否有更多: this.hasMore,
|
|||
|
|
新增订单数: newOrders.length,
|
|||
|
|
总订单数: this.orderList.length
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || '获取更多订单失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.loading = false
|
|||
|
|
}).catch((err) => {
|
|||
|
|
console.error('获取更多订单失败:', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '获取更多订单失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化订单数据
|
|||
|
|
formatOrderData(orderList) {
|
|||
|
|
return orderList.map((order, index) => {
|
|||
|
|
const derived = this.computeStatus(order)
|
|||
|
|
return {
|
|||
|
|
billId: order.billId || order.id || (this.currentPage * this.pageSize + index),
|
|||
|
|
billNo: order.billNo || order.orderNo || order.orderNumber || order.no || `订单${order.id || index + 1}`,
|
|||
|
|
amount: order.amount || order.money || order.totalAmount || '0.00',
|
|||
|
|
createTime: order.createTime || order.createDate || order.orderTime || new Date().toLocaleString('zh-CN'),
|
|||
|
|
statusClass: derived.status,
|
|||
|
|
statusText: derived.statusText,
|
|||
|
|
// 保留原始字段，用于显示
|
|||
|
|
no: order.no,
|
|||
|
|
orderNo: order.orderNo,
|
|||
|
|
orderNumber: order.orderNumber
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 根据后端状态与是否完成计算前端展示状态
|
|||
|
|
computeStatus(order) {
|
|||
|
|
const status = String(order.status ?? order.orderStatus ?? '')
|
|||
|
|
const isFinished = !!(order.isFinished)
|
|||
|
|
// 规则：
|
|||
|
|
// 2 + !isFinished => 已支付
|
|||
|
|
// 2 + isFinished => 已完成
|
|||
|
|
// 1 => 未支付
|
|||
|
|
// 3 => 已退款
|
|||
|
|
// 4 => 已取消(用户)
|
|||
|
|
// 5 => 已取消(系统)
|
|||
|
|
// 6 => 支付中
|
|||
|
|
// 7 => 退款中
|
|||
|
|
if (status === '2') {
|
|||
|
|
return isFinished ? { statusClass: 'completed', statusText: '已完成' } : { statusClass: 'paid', statusText: '已支付' }
|
|||
|
|
}
|
|||
|
|
const map = {
|
|||
|
|
'1': { statusClass: 'unpaid', statusText: '未支付' },
|
|||
|
|
'3': { statusClass: 'refunded', statusText: '已退款' },
|
|||
|
|
'4': { statusClass: 'cancelled-user', statusText: '已取消(用户)' },
|
|||
|
|
'5': { statusClass: 'cancelled-system', statusText: '已取消(系统)' },
|
|||
|
|
'6': { statusClass: 'paying', statusText: '支付中' },
|
|||
|
|
'7': { statusClass: 'refunding', statusText: '退款中' }
|
|||
|
|
}
|
|||
|
|
return map[status] || { statusClass: 'processing', statusText: '处理中' }
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选择订单项
|
|||
|
|
selectOrderItem(order) {
|
|||
|
|
this.tempSelectedOrder = order
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 确认订单选择
|
|||
|
|
confirmOrderSelection() {
|
|||
|
|
if (this.tempSelectedOrder) {
|
|||
|
|
this.selectedOrder = this.tempSelectedOrder
|
|||
|
|
console.log(this.selectedOrder);
|
|||
|
|
this.closeOrderModal()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '订单选择成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择订单',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 关闭订单选择弹窗
|
|||
|
|
closeOrderModal() {
|
|||
|
|
this.showOrderModal = false
|
|||
|
|
this.tempSelectedOrder = null
|
|||
|
|
// 重置分页状态
|
|||
|
|
this.currentPage = 1
|
|||
|
|
this.orderList = []
|
|||
|
|
this.hasMore = true
|
|||
|
|
this.loading = false
|
|||
|
|
// 重置搜索状态
|
|||
|
|
this.searchKeyword = ''
|
|||
|
|
if (this.searchTimer) {
|
|||
|
|
clearTimeout(this.searchTimer)
|
|||
|
|
this.searchTimer = null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取订单状态文本
|
|||
|
|
getStatusText(status) {
|
|||
|
|
const statusMap = {
|
|||
|
|
'completed': '已完成',
|
|||
|
|
'processing': '处理中',
|
|||
|
|
'cancelled': '已取消'
|
|||
|
|
}
|
|||
|
|
return statusMap[status] || '未知状态'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 订单列表滚动事件
|
|||
|
|
onOrderListScroll(e) {
|
|||
|
|
const { scrollTop, scrollHeight, clientHeight } = e.target
|
|||
|
|
// 当滚动到底部时自动加载更多
|
|||
|
|
if (scrollHeight - scrollTop - clientHeight < 50 && this.hasMore && !this.loading) {
|
|||
|
|
this.loadMoreOrders()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 搜索输入事件
|
|||
|
|
onSearchInput() {
|
|||
|
|
// 清除之前的定时器
|
|||
|
|
if (this.searchTimer) {
|
|||
|
|
clearTimeout(this.searchTimer)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置防抖定时器
|
|||
|
|
this.searchTimer = setTimeout(() => {
|
|||
|
|
this.searchOrders()
|
|||
|
|
}, 500)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 搜索订单
|
|||
|
|
searchOrders() {
|
|||
|
|
if (!this.searchKeyword.trim()) {
|
|||
|
|
// 如果搜索框为空，重新加载所有订单
|
|||
|
|
this.loadOrderList()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.loading = true
|
|||
|
|
this.currentPage = 1
|
|||
|
|
|
|||
|
|
// 调用搜索API（如果您的API支持搜索参数）
|
|||
|
|
// 如果API不支持搜索，可以在前端过滤
|
|||
|
|
this.$u.get("/app/order/mineList?pageNum=1&pageSize=10&suitType=1&status=&isAsc=desc&orderByColumn=createTime", {
|
|||
|
|
pageNum: this.currentPage,
|
|||
|
|
pageSize: this.pageSize,
|
|||
|
|
keyword: this.searchKeyword.trim() // 如果API支持搜索参数
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
let orderList = this.formatOrderData(res.rows || [])
|
|||
|
|
|
|||
|
|
// 如果API不支持搜索参数，在前端过滤
|
|||
|
|
if (!res.rows || res.rows.length === 0) {
|
|||
|
|
// 重新获取所有订单并在前端过滤
|
|||
|
|
this.$u.get("/app/order/mineList?pageNum=1&pageSize=10&suitType=1&status=&isAsc=desc&orderByColumn=createTime", {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 100 // 获取更多数据进行搜索
|
|||
|
|
}).then((allRes) => {
|
|||
|
|
if (allRes.code == 200) {
|
|||
|
|
const allOrders = this.formatOrderData(allRes.rows || [])
|
|||
|
|
orderList = allOrders.filter(order =>
|
|||
|
|
(order.billNo || order.orderNo || order.orderNumber || '').toLowerCase().includes(this.searchKeyword.toLowerCase())
|
|||
|
|
)
|
|||
|
|
this.orderList = orderList
|
|||
|
|
this.hasMore = false // 搜索时不分页
|
|||
|
|
}
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.orderList = orderList
|
|||
|
|
this.hasMore = orderList.length === this.pageSize
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || '搜索失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
}).catch((err) => {
|
|||
|
|
console.error('搜索失败:', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '搜索失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 提交
|
|||
|
|
sub() {
|
|||
|
|
if (!this.selectedType || this.selectedType.trim() === '') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择投诉类型',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.selectedOrder) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择要投诉的订单',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.textValue.trim() === '') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入问题描述',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.contact.trim() === '') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入联系方式',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证退款金额
|
|||
|
|
if (this.refundChoice === 'yes' && (!this.refundAmount || this.refundAmount.trim() === '')) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入退款金额',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if(this.flag == true){
|
|||
|
|
this.flag = false
|
|||
|
|
let img = this.imglist.join(',')
|
|||
|
|
// 构建提交数据
|
|||
|
|
let data = {
|
|||
|
|
title: this.selectedType,
|
|||
|
|
content: this.textValue,
|
|||
|
|
contact: this.contact,
|
|||
|
|
needRefund: this.refundChoice == 'yes' ? true : false,
|
|||
|
|
needRefundAmount: this.refundChoice == 'yes' ? this.refundAmount : '',
|
|||
|
|
picture: img,
|
|||
|
|
orderId: this.getOrderId(this.selectedOrder)
|
|||
|
|
}
|
|||
|
|
// 提交请求
|
|||
|
|
this.$u.post("/app/complaint/add", data).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '提交成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.flag = true
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1500)
|
|||
|
|
} else {
|
|||
|
|
this.flag = true
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.topbj {
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 484rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: -1;
|
|||
|
|
filter: hue-rotate(430deg);
|
|||
|
|
}
|
|||
|
|
.tslb{
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 210rpx;
|
|||
|
|
text-align: right;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
page {
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pages {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
padding-bottom: 300rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 通用样式
|
|||
|
|
.section-title {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 45rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.required {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: red;
|
|||
|
|
vertical-align: top;
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 投诉类型选择
|
|||
|
|
.complaint-section {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
.complaint-tags {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
|
|||
|
|
.tag-item {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 12rpx 20rpx;
|
|||
|
|
border: 1rpx solid #E0E0E0;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
background: #FAFAFA;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
border-color: #4C97E7;
|
|||
|
|
background: #F8F8F8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
border-color: #4C97E7;
|
|||
|
|
color: #4C97E7;
|
|||
|
|
background: #F0F8F0;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(72, 137, 59, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.check-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -1rpx;
|
|||
|
|
right: -1rpx;
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
background: #4C97E7;
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 16rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 问题描述
|
|||
|
|
.problem-section {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
|
|||
|
|
|
|||
|
|
.input-container {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 160rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border: 1rpx solid #E0E0E0;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.custom-textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 16rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.word-count {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 16rpx;
|
|||
|
|
bottom: 16rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-section {
|
|||
|
|
.upload-grid {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
.sc{
|
|||
|
|
width: 142rpx;
|
|||
|
|
height: 142rpx;
|
|||
|
|
}
|
|||
|
|
.upload-item {
|
|||
|
|
position: relative;
|
|||
|
|
width: 144rpx;
|
|||
|
|
height: 144rpx;
|
|||
|
|
|
|||
|
|
.uploaded-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -6rpx;
|
|||
|
|
right: -6rpx;
|
|||
|
|
width: 28rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
background: rgba(0,0,0,0.6);
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 18rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-btn {
|
|||
|
|
// width: 120rpx;
|
|||
|
|
// height: 120rpx;
|
|||
|
|
// border: 2rpx dashed #D0D0D0;
|
|||
|
|
// border-radius: 8rpx;
|
|||
|
|
// display: flex;
|
|||
|
|
// align-items: center;
|
|||
|
|
// justify-content: center;
|
|||
|
|
// background: #FAFAFA;
|
|||
|
|
|
|||
|
|
.upload-icon {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-tip {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #999;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 订单选择
|
|||
|
|
.order-section {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
|
|||
|
|
|
|||
|
|
.order-selector {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16rpx 0;
|
|||
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|||
|
|
|
|||
|
|
.order-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-info-display {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 4rpx;
|
|||
|
|
|
|||
|
|
.order-no-display {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-amount-display {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.arrow {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 退款选择
|
|||
|
|
.refund-section {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
|
|||
|
|
|
|||
|
|
.refund-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16rpx 0;
|
|||
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.radio-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 60rpx;
|
|||
|
|
|
|||
|
|
.radio-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
|
|||
|
|
.radio-circle {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
border: 2rpx solid #E0E0E0;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
|
|||
|
|
.radio-dot {
|
|||
|
|
width: 18rpx;
|
|||
|
|
height: 18rpx;
|
|||
|
|
background: #4C97E7;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active .radio-circle {
|
|||
|
|
border-color: #4C97E7;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refund-input-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
|
|||
|
|
.refund-input {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border: 1rpx solid #E0E0E0;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 0 16rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.currency-unit {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 联系方式
|
|||
|
|
.contact-section {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
|
|||
|
|
|
|||
|
|
.contact-input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 68rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border: 1rpx solid #E0E0E0;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交按钮
|
|||
|
|
.submit-btn {
|
|||
|
|
width: 600rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background: #4C97E7;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 88rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
bottom: 60rpx;
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(72, 137, 59, 0.3);
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 订单选择弹窗
|
|||
|
|
.order-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
z-index: 1000;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.modal-content {
|
|||
|
|
width: 90%;
|
|||
|
|
max-height: 80%;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.modal-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|||
|
|
|
|||
|
|
.modal-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-btn {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #999;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-section {
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|||
|
|
|
|||
|
|
.search-input-container {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.search-input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 72rpx;
|
|||
|
|
background: #F8F8F8;
|
|||
|
|
border: 1rpx solid #E0E0E0;
|
|||
|
|
border-radius: 36rpx;
|
|||
|
|
padding: 0 60rpx 0 24rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 24rpx;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-list {
|
|||
|
|
max-height: 600rpx;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
|
|||
|
|
.load-more {
|
|||
|
|
padding: 32rpx 0;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.loading-text {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-more-text {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.load-more-btn {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 16rpx 32rpx;
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
color: #666;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background: #E0E0E0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
padding: 80rpx 0;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background-color 0.2s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: #F8F8F8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.selected {
|
|||
|
|
background: #F0F8F0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
|
|||
|
|
.order-no {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-amount {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-time {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-status {
|
|||
|
|
padding: 8rpx 16rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
|
|||
|
|
&.completed {
|
|||
|
|
background: #E8F5E8;
|
|||
|
|
color: #4C97E7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.paid {
|
|||
|
|
background: #E6F4FF;
|
|||
|
|
color: #1E88E5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.unpaid {
|
|||
|
|
background: #FFF3E0;
|
|||
|
|
color: #FB8C00;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.refunded {
|
|||
|
|
background: #E3F2FD;
|
|||
|
|
color: #1976D2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.cancelled-user {
|
|||
|
|
background: #FCE4EC;
|
|||
|
|
color: #C2185B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.cancelled-system {
|
|||
|
|
background: #F3E5F5;
|
|||
|
|
color: #7B1FA2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.paying {
|
|||
|
|
background: #E0F2F1;
|
|||
|
|
color: #00796B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.refunding {
|
|||
|
|
background: #FFFDE7;
|
|||
|
|
color: #FBC02D;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.processing {
|
|||
|
|
background: #FFF3E0;
|
|||
|
|
color: #FF9800;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-footer {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
border-top: 1rpx solid #F0F0F0;
|
|||
|
|
|
|||
|
|
.cancel-btn, .confirm-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel-btn {
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.confirm-btn {
|
|||
|
|
background: #4C97E7;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|