first commit
This commit is contained in:
@@ -0,0 +1,511 @@
|
||||
<template>
|
||||
<!-- 骨架屏 -->
|
||||
<view v-if="loading" class="skeleton-container">
|
||||
<!-- 余额区域骨架屏 -->
|
||||
<view class="skeleton-balance-section">
|
||||
<div class="skeleton-balance-label"></div>
|
||||
<div class="skeleton-balance-amount"></div>
|
||||
<div class="skeleton-balance-current"></div>
|
||||
</view>
|
||||
|
||||
<!-- 账户选择区域骨架屏 -->
|
||||
<view class="skeleton-account-section">
|
||||
<div class="skeleton-section-title"></div>
|
||||
<div class="skeleton-account-item">
|
||||
<div class="skeleton-account-icon"></div>
|
||||
<div class="skeleton-account-name"></div>
|
||||
<div class="skeleton-account-radio"></div>
|
||||
</div>
|
||||
<div class="skeleton-account-item">
|
||||
<div class="skeleton-account-icon"></div>
|
||||
<div class="skeleton-account-name"></div>
|
||||
<div class="skeleton-account-radio"></div>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息骨架屏 -->
|
||||
<view class="skeleton-tip-section">
|
||||
<div class="skeleton-tip-icon"></div>
|
||||
<div class="skeleton-tip-content">
|
||||
<div class="skeleton-tip-line"></div>
|
||||
<div class="skeleton-tip-line-small"></div>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<!-- 确认按钮骨架屏 -->
|
||||
<view class="skeleton-confirm-section">
|
||||
<div class="skeleton-confirm-button"></div>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 真实内容 -->
|
||||
<view v-else class="withdraw-container">
|
||||
<!-- 可提现金额 -->
|
||||
<view class="balance-section">
|
||||
<text class="balance-label">可提现金额</text>
|
||||
<text class="balance-amount">¥86.50</text>
|
||||
<text class="current-balance">当前钱包余额</text>
|
||||
</view>
|
||||
|
||||
<!-- 提现账户选择 -->
|
||||
<view class="account-section">
|
||||
<text class="section-title">提现账户</text>
|
||||
<view class=""
|
||||
style="display: flex;align-items: center; border-bottom: 4rpx solid #e2e2e2;padding-bottom: 10px; margin-bottom: 10px;">
|
||||
<up-icon name="zhifubao-circle-fill" size="30" color="#1890ff"></up-icon>
|
||||
<view style="flex: 1; margin-left: 30rpx; " class="">
|
||||
支付宝
|
||||
</view>
|
||||
<view @click="changePay(0)" class="">
|
||||
<view v-if="current==0" class="radio-circle">
|
||||
<view class="radio-inner"></view>
|
||||
</view>
|
||||
<view v-else class="radio-no-circle">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="display: flex;align-items: center;">
|
||||
<up-icon name="weixin-circle-fill" size="30" color="#28C445"></up-icon>
|
||||
<view style="flex: 1; margin-left: 30rpx; " class="">
|
||||
微信
|
||||
</view>
|
||||
<view @click="changePay(1)" class="">
|
||||
<view v-if="current==1" class="radio-circle">
|
||||
<view class="radio-inner"></view>
|
||||
</view>
|
||||
<view v-else class="radio-no-circle">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<view class="tip-section">
|
||||
<up-icon name="clock" size="18" color="#1890ff"></up-icon>
|
||||
<view class="" style="margin-left: 10rpx;">
|
||||
<view class="tip-text">预计 T+1 工作日到账</view>
|
||||
<view class="tip-text" style="color: #666666; font-size: 24rpx; margin-top: 10rpx; ">无手续费</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 确认按钮 -->
|
||||
<view class="confirm-section">
|
||||
<button class="confirm-button" @click="confirmWithdraw">确认提现 ¥86.50</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { ref } from 'vue';
|
||||
|
||||
let current = ref(null)
|
||||
let loading=ref(true)
|
||||
|
||||
onLoad(() => {
|
||||
setTimeout(()=>{
|
||||
loading.value=false
|
||||
},1000)
|
||||
})
|
||||
|
||||
const changePay = (item : any) => {
|
||||
current.value = item
|
||||
}
|
||||
|
||||
// 确认提现
|
||||
const confirmWithdraw = () => {
|
||||
// 这里可以添加提现逻辑
|
||||
uni.showToast({
|
||||
title: '提现申请已提交',
|
||||
icon: 'success'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.withdraw-container {
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 选择 */
|
||||
|
||||
.radio-circle {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 2rpx solid var(--nav-mian);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.radio-inner {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background-color: var(--nav-mian);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.radio-no-circle {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 2rpx solid #dadada;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
/* 余额显示区域 */
|
||||
.balance-section {
|
||||
background-color: #fff;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.balance-label {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.balance-amount {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
color: #ff4757;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.current-balance {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 账户选择区域 */
|
||||
.account-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 25rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.account-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.account-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #1677ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
border: 2rpx solid #000;
|
||||
}
|
||||
|
||||
.account-icon.wechat {
|
||||
background-color: #07c160;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 提示信息区域 */
|
||||
.tip-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color: #e6f7ff;
|
||||
padding: 20rpx 30rpx;
|
||||
margin: 0 30rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 28rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 确认按钮区域 */
|
||||
.confirm-section {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 45rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.confirm-button:active {
|
||||
background-color: #0958d9;
|
||||
}
|
||||
/* 骨架屏样式 */
|
||||
.skeleton-container {
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 骨架屏动画 */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 骨架屏通用样式 */
|
||||
.skeleton-balance-section,
|
||||
.skeleton-account-section,
|
||||
.skeleton-tip-section {
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 余额区域骨架屏 */
|
||||
.skeleton-balance-section {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.skeleton-balance-label {
|
||||
width: 30%;
|
||||
height: 32rpx;
|
||||
background-color: #e6e6e6;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 4rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
.skeleton-balance-amount {
|
||||
width: 40%;
|
||||
height: 60rpx;
|
||||
background-color: #e6e6e6;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 4rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
.skeleton-balance-current {
|
||||
width: 25%;
|
||||
height: 28rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 4rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
/* 账户选择区域骨架屏 */
|
||||
.skeleton-account-section {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.skeleton-section-title {
|
||||
width: 25%;
|
||||
height: 32rpx;
|
||||
background-color: #e6e6e6;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 4rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
.skeleton-account-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 4rpx solid #e2e2e2;
|
||||
}
|
||||
|
||||
.skeleton-account-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.skeleton-account-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 20rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
.skeleton-account-name {
|
||||
flex: 1;
|
||||
height: 32rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 20rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
.skeleton-account-radio {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 50%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
/* 提示信息骨架屏 */
|
||||
.skeleton-tip-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color: #e6f7ff;
|
||||
padding: 20rpx 30rpx;
|
||||
margin: 0 30rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.skeleton-tip-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 50%;
|
||||
margin-right: 15rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
.skeleton-tip-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.skeleton-tip-line {
|
||||
width: 70%;
|
||||
height: 28rpx;
|
||||
background-color: #e6e6e6;
|
||||
margin-bottom: 15rpx;
|
||||
border-radius: 4rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
.skeleton-tip-line-small {
|
||||
width: 50%;
|
||||
height: 24rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 4rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
/* 确认按钮骨架屏 */
|
||||
.skeleton-confirm-section {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.skeleton-confirm-button {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 45rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<view class="review-management-page">
|
||||
<!-- 全新方案：纯 CSS 手动构建的骨架屏 -->
|
||||
<view v-if="loading" class="skeleton-wrapper">
|
||||
<view class="skeleton-card" style="height: 150rpx;"></view>
|
||||
<view class="skeleton-tabs">
|
||||
<view class="skeleton-item skeleton-text" style="width: 100%; height: 44rpx;"></view>
|
||||
</view>
|
||||
<view v-for="i in 3" :key="i" class="skeleton-card">
|
||||
<view class="skeleton-item skeleton-text" style="width: 100%; height: 300rpx;"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面实际内容 -->
|
||||
<view v-else class="page-content" >
|
||||
|
||||
<!-- 1. 数据看板 -->
|
||||
<view class="summary-card">
|
||||
<view class="data-item">
|
||||
<view class="value"><text class="score">{{ satisfaction }}%</text><up-icon name="star-fill"
|
||||
color="#ff9900" size="20"></up-icon></view>
|
||||
<text class="label">满意度</text>
|
||||
</view>
|
||||
<view class="data-item">
|
||||
<text class="value">{{total}}</text>
|
||||
<text class="label">总评价数</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2. Tabs 切换 -->
|
||||
<view class="sticky-tabs-wrapper">
|
||||
<up-tabs :list="reviewTabs" :current="currentTab" @change="onTabChange" lineColor="#fa6400"
|
||||
:activeStyle="{ color: '#fa6400', fontWeight: 'bold' }" :inactiveStyle="{ color: '#666' }">
|
||||
</up-tabs>
|
||||
</view>
|
||||
|
||||
<view class="review-list">
|
||||
<view class="review-card" v-for="review in reviewList" :key="review">
|
||||
<view class="reviewer-info">
|
||||
<text class="name" style="font-weight: bold;" >{{ review.nick }}</text>
|
||||
<up-rate v-model="review.source" readonly activeColor="#ff9900" size="16"></up-rate>
|
||||
<text class="time">{{ Service.formatDate(review.addTime,1) }}</text>
|
||||
</view>
|
||||
<text class="review-text">{{ review.sign }}</text>
|
||||
</view>
|
||||
|
||||
<up-loadmore status="nomore" nomoreText="没有更多评价了"></up-loadmore>
|
||||
<view class="" style="width: 100%; height: 20rpx;" >
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app';
|
||||
import { Service } from "@/Service/Service";
|
||||
import { CNRiderDataService } from '@/Service/CN/CNRiderDataService'
|
||||
|
||||
|
||||
const loading = ref<boolean>(true);
|
||||
const currentTab = ref<number>(0);
|
||||
|
||||
|
||||
let satisfaction = ref(0)
|
||||
let status = ref('nomore')
|
||||
let page = ref(1)
|
||||
|
||||
|
||||
let review = ref('')
|
||||
|
||||
let storeInfo = ref<any>()
|
||||
let total = ref(0)
|
||||
|
||||
const reviewTabs = ref([
|
||||
{ name: '全部' }, { name: '好评' }, { name: '差评' }
|
||||
]);
|
||||
|
||||
const reviewList = ref<Array<any>>([]);
|
||||
|
||||
let currentId = ref('')
|
||||
|
||||
onLoad(() => {
|
||||
getData()
|
||||
});
|
||||
onShow(() => { });
|
||||
|
||||
onReachBottom(()=>{
|
||||
getList()
|
||||
})
|
||||
|
||||
// 获取数据
|
||||
const getData = () => {
|
||||
status.value = 'loadmore'
|
||||
page.value = 1
|
||||
reviewList.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
|
||||
const getList = () => {
|
||||
if (status.value == 'loading' || status.value == 'nomore') {
|
||||
return
|
||||
}
|
||||
status.value = 'loading'
|
||||
CNRiderDataService.GetRiderEvaluate(currentTab.value, page.value).then(res => {
|
||||
loading.value = false
|
||||
if (res.data) {
|
||||
satisfaction.value = res.data.satisfaction
|
||||
total.value=res.data.total
|
||||
reviewList.value = [...reviewList.value, ...res.data.evaluateList]
|
||||
page.value++
|
||||
status.value = res.data.evaluateList == 10 ? 'loadmore' : 'nomore'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const onTabChange = (e : { index : number }) => {
|
||||
currentTab.value = e.index;
|
||||
getData()
|
||||
};
|
||||
|
||||
const replyTo = () => {
|
||||
|
||||
if (review.value == '') {
|
||||
return
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
page{
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
@keyframes skeleton-blink {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-blink 1.5s infinite linear;
|
||||
}
|
||||
|
||||
.skeleton-rect {
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.skeleton-wrapper {
|
||||
padding: 24rpx;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
.skeleton-tabs {
|
||||
padding: 20rpx 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.review-management-page {
|
||||
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
background-color: #fff8f5;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin: 24rpx;
|
||||
|
||||
.data-item {
|
||||
.value {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #fa5151;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-tabs-wrapper {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
|
||||
:deep(.up-tabs__wrapper__nav__item) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:deep(.up-tabs__wrapper__nav) {
|
||||
position: relative;
|
||||
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
right: 20rpx;
|
||||
background-color: #fa5151;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.review-list {
|
||||
padding: 24rpx;
|
||||
|
||||
.review-card {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&.bad-review {
|
||||
border: 1rpx solid #fef0f0;
|
||||
}
|
||||
|
||||
.reviewer-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.review-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin: 20rpx 0;
|
||||
display: block;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.review-images {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
.image-placeholder {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.merchant-reply {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.reply-label {
|
||||
color: #fa6400;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.reply-text {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-action {
|
||||
text-align: right;
|
||||
margin-top: 20rpx;
|
||||
|
||||
text {
|
||||
display: inline-block;
|
||||
border: 1rpx solid #fa6400;
|
||||
color: #fa6400;
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user