This commit is contained in:
parent
eb59411bda
commit
1d4fd42cbb
|
|
@ -6,7 +6,7 @@
|
||||||
<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }">
|
<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }">
|
||||||
<slot name="statusBar"></slot>
|
<slot name="statusBar"></slot>
|
||||||
</view>
|
</view>
|
||||||
<view class="nav-box" style="width: 100%;height: 88rpx;">
|
<view class="nav-box" style="width: 100%;height: 88rpx;" @click="openPopup">
|
||||||
<slot>
|
<slot>
|
||||||
<uni-nav-bar backgroundColor="#00000000" class="nav-bar" :border="false" :title="title" v-bind="$attrs"
|
<uni-nav-bar backgroundColor="#00000000" class="nav-bar" :border="false" :title="title" v-bind="$attrs"
|
||||||
v-on="$attrs">
|
v-on="$attrs">
|
||||||
|
|
@ -82,18 +82,18 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import popup from '../popup/popup.vue'
|
import popup from '../popup/popup.vue'
|
||||||
import {
|
import {
|
||||||
onMounted,
|
onMounted,
|
||||||
reactive,
|
reactive,
|
||||||
ref,
|
ref,
|
||||||
toRefs
|
toRefs
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
|
|
||||||
const topPopup = ref()
|
const topPopup = ref()
|
||||||
|
|
||||||
// 定义组件属性
|
// 定义组件属性
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
bgColor: {
|
bgColor: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#fff'
|
default: '#fff'
|
||||||
|
|
@ -150,22 +150,22 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 定义事件
|
// 定义事件
|
||||||
const emit = defineEmits(['back', 'right-click', 'button-click', 'refresh'])
|
const emit = defineEmits(['back', 'right-click', 'button-click', 'refresh'])
|
||||||
|
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
statusBarHeight: 0,
|
statusBarHeight: 0,
|
||||||
showTipLayer: true,
|
showTipLayer: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
let {
|
let {
|
||||||
showTipLayer
|
showTipLayer
|
||||||
} = toRefs(data)
|
} = toRefs(data)
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 同步获取系统信息
|
// 同步获取系统信息
|
||||||
const systemInfo = uni.getSystemInfoSync();
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
data.statusBarHeight = systemInfo.statusBarHeight || 0;
|
data.statusBarHeight = systemInfo.statusBarHeight || 0;
|
||||||
|
|
@ -176,54 +176,54 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const closeTipLayer = () => {
|
const closeTipLayer = () => {
|
||||||
showTipLayer.value = false
|
showTipLayer.value = false
|
||||||
uni.setStorageSync(props.tipLayerType, props.tipLayerType)
|
uni.setStorageSync(props.tipLayerType, props.tipLayerType)
|
||||||
emit("refresh")
|
emit("refresh")
|
||||||
}
|
}
|
||||||
|
|
||||||
const openPopup = () => {
|
const openPopup = () => {
|
||||||
if (props.buttonGroup.length > 0) {
|
if (props.buttonGroup.length > 0) {
|
||||||
topPopup.value.open()
|
topPopup.value.open()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 返回按钮点击事件
|
// 返回按钮点击事件
|
||||||
const onBack = () => {
|
const onBack = () => {
|
||||||
emit('back')
|
emit('back')
|
||||||
// 默认返回上一页
|
// 默认返回上一页
|
||||||
if (props.noBack) return
|
if (props.noBack) return
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 右侧按钮点击事件
|
// 右侧按钮点击事件
|
||||||
const onRightClick = () => {
|
const onRightClick = () => {
|
||||||
emit('right-click')
|
emit('right-click')
|
||||||
}
|
}
|
||||||
|
|
||||||
const closeTopPopup = () => {
|
const closeTopPopup = () => {
|
||||||
topPopup.value.close()
|
topPopup.value.close()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const buttonClick = (button) => {
|
const buttonClick = (button) => {
|
||||||
closeTopPopup()
|
closeTopPopup()
|
||||||
emit('button-click', button)
|
emit('button-click', button)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 暴露给父组件的方法
|
// 暴露给父组件的方法
|
||||||
defineExpose({
|
defineExpose({
|
||||||
openPopup,
|
openPopup,
|
||||||
closeTopPopup
|
closeTopPopup
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@import "/common/main.css";
|
@import "/common/main.css";
|
||||||
|
|
||||||
.nav-bar-container {
|
.nav-bar-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
|
|
@ -231,42 +231,42 @@ defineExpose({
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-bar {
|
.nav-bar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-placeholder {
|
.status-placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .uni-navbar__content {
|
::v-deep .uni-navbar__content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-bar-left {
|
.nav-bar-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-icon-back {
|
.nav-icon-back {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-icon-more {
|
.nav-icon-more {
|
||||||
width: 26px;
|
width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-bar-title {
|
.nav-bar-title {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -274,15 +274,15 @@ defineExpose({
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-bar-right {
|
.nav-bar-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-button {
|
.right-button {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -291,23 +291,23 @@ defineExpose({
|
||||||
height: 30px;
|
height: 30px;
|
||||||
min-width: 60px;
|
min-width: 60px;
|
||||||
background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
|
background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-box {
|
.button-box {
|
||||||
width: calc(50% - 8rpx);
|
width: calc(50% - 8rpx);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 16rpx;
|
margin-top: 16rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
border: 1px solid #E4E4E4;
|
border: 1px solid #E4E4E4;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
line-height: 42px;
|
line-height: 42px;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tipLayer {
|
.tipLayer {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
min-width: 200px !important;
|
min-width: 200px !important;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
|
@ -321,15 +321,15 @@ defineExpose({
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tipLayer-content {
|
.tipLayer-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-weight: 450;
|
font-weight: 450;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #268FFF;
|
color: #268FFF;
|
||||||
|
|
@ -347,29 +347,29 @@ defineExpose({
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #006ADD;
|
color: #006ADD;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.triangleImg {
|
.triangleImg {
|
||||||
width: 111px;
|
width: 111px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -23px;
|
top: -23px;
|
||||||
left: calc(50% - 111px);
|
left: calc(50% - 111px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.triangle {
|
.triangle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -57px;
|
top: -57px;
|
||||||
left: calc(50% - 40px);
|
left: calc(50% - 40px);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
right: -5px;
|
right: -5px;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
2
main.js
2
main.js
|
|
@ -29,7 +29,7 @@ export function createApp() {
|
||||||
app.config.globalProperties.$system = plus.os.name;
|
app.config.globalProperties.$system = plus.os.name;
|
||||||
// #endif
|
// #endif
|
||||||
app.config.globalProperties.$systemInfo = systemInfo
|
app.config.globalProperties.$systemInfo = systemInfo
|
||||||
uni.setStorageSync('version', '1.0.5.sp5')
|
uni.setStorageSync('version', '1.0.5.sp9')
|
||||||
app.config.globalProperties.$version = uni.getStorageSync('version')
|
app.config.globalProperties.$version = uni.getStorageSync('version')
|
||||||
app.use(globalMethods);
|
app.use(globalMethods);
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -56,7 +56,8 @@
|
||||||
<!-- 详情信息列表 -->
|
<!-- 详情信息列表 -->
|
||||||
<view class="detail-info-container">
|
<view class="detail-info-container">
|
||||||
<template v-for="item in billData.itemInfoList" :key="item.id">
|
<template v-for="item in billData.itemInfoList" :key="item.id">
|
||||||
<view class="info-item-box" v-if="item.key != 'paymentReward'">
|
<view class="info-item-box"
|
||||||
|
v-if="item.key != 'paymentReward' && (item.key != 'transferNote' || billData.merchantOption.isTransferNote)">
|
||||||
<view class="item-label" :class="{ 'switchable-label': item.key === 'createTime' }"
|
<view class="item-label" :class="{ 'switchable-label': item.key === 'createTime' }"
|
||||||
@click="toggleCreateTimeLabel(item)">
|
@click="toggleCreateTimeLabel(item)">
|
||||||
<text>{{ item.label }}</text>
|
<text>{{ item.label }}</text>
|
||||||
|
|
@ -132,7 +133,8 @@
|
||||||
<view class="switch-option-container">
|
<view class="switch-option-container">
|
||||||
<template v-for="option in data.switchOptions" :key="option.id">
|
<template v-for="option in data.switchOptions" :key="option.id">
|
||||||
<view v-if="option.showTypeIds ? option.showTypeIds.includes(billData.selectId) : true"
|
<view v-if="option.showTypeIds ? option.showTypeIds.includes(billData.selectId) : true"
|
||||||
class="border-bottom" :class="{ 'no-border-bottom': isNoBorderBottom(option) }">
|
class="border-bottom"
|
||||||
|
:class="{ 'no-border-bottom': isNoBorderBottom(option) || option.isMarginBottom, 'margin-bottom-16rpx': option.isMarginBottom }">
|
||||||
<view class="switch-option">
|
<view class="switch-option">
|
||||||
<view class="switch-option-text">{{ option.name }}</view>
|
<view class="switch-option-text">{{ option.name }}</view>
|
||||||
<switch v-if="option.isSwitch" color="#1676FE" :checked="billData.merchantOption[option.key]"
|
<switch v-if="option.isSwitch" color="#1676FE" :checked="billData.merchantOption[option.key]"
|
||||||
|
|
@ -408,46 +410,54 @@ const serviceDetailRightTextList = [{
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
// switch选项
|
// switch选项
|
||||||
const switchOptions = [{
|
const switchOptions = [
|
||||||
|
{
|
||||||
|
"id": 11,
|
||||||
|
"name": "转账备注",
|
||||||
|
"isSwitch": true,
|
||||||
|
showTypeIds: [7],
|
||||||
|
key: 'isTransferNote',
|
||||||
|
isMarginBottom: true
|
||||||
|
}, {
|
||||||
"id": 7,
|
"id": 7,
|
||||||
"name": "账单分类",
|
"name": "账单分类",
|
||||||
"isSwitch": false,
|
"isSwitch": false,
|
||||||
key: 'billClassify',
|
key: 'billClassify',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 8,
|
"id": 8,
|
||||||
"name": "标签",
|
"name": "标签",
|
||||||
"isSwitch": false,
|
"isSwitch": false,
|
||||||
key: 'tag',
|
key: 'tag',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 9,
|
"id": 9,
|
||||||
"name": "备注",
|
"name": "备注",
|
||||||
"isSwitch": false,
|
"isSwitch": false,
|
||||||
key: 'note',
|
key: 'note',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 1,
|
"id": 1,
|
||||||
"name": "服务详情",
|
"name": "服务详情",
|
||||||
"isSwitch": true,
|
"isSwitch": true,
|
||||||
showTypeIds: [3, 4, 10],
|
showTypeIds: [3, 4, 10],
|
||||||
key: 'serviceDetail',
|
key: 'serviceDetail',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 2,
|
"id": 2,
|
||||||
"name": "推荐服务",
|
"name": "推荐服务",
|
||||||
"isSwitch": true,
|
"isSwitch": true,
|
||||||
showTypeIds: [4],
|
showTypeIds: [4],
|
||||||
key: 'recommendService',
|
key: 'recommendService',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 3,
|
"id": 3,
|
||||||
"name": "服务推荐",
|
"name": "服务推荐",
|
||||||
"isSwitch": true,
|
"isSwitch": true,
|
||||||
showTypeIds: [6, 7],
|
showTypeIds: [6, 7],
|
||||||
key: 'serviceRecommend',
|
key: 'serviceRecommend',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 4,
|
"id": 4,
|
||||||
"name": "退款",
|
"name": "退款",
|
||||||
"isSwitch": true,
|
"isSwitch": true,
|
||||||
|
|
@ -462,35 +472,35 @@ const switchOptions = [{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 5,
|
"id": 5,
|
||||||
"name": "支付奖励",
|
"name": "支付奖励",
|
||||||
"isSwitch": true,
|
"isSwitch": true,
|
||||||
showTypeIds: [1, 3, 4, 13],
|
showTypeIds: [1, 3, 4, 13],
|
||||||
key: 'payReward',
|
key: 'payReward',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 6,
|
"id": 6,
|
||||||
"name": "计入收支",
|
"name": "计入收支",
|
||||||
"isSwitch": true,
|
"isSwitch": true,
|
||||||
showTypeIds: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13],
|
showTypeIds: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13],
|
||||||
key: 'countInAndOut',
|
key: 'countInAndOut',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 7,
|
"id": 7,
|
||||||
"name": "商家订单号转换条形码",
|
"name": "商家订单号转换条形码",
|
||||||
"isSwitch": true,
|
"isSwitch": true,
|
||||||
showTypeIds: [1, 2, 3],
|
showTypeIds: [1, 2, 3],
|
||||||
key: 'isShowBarcode',
|
key: 'isShowBarcode',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 10,
|
"id": 10,
|
||||||
"name": "账单分析",
|
"name": "账单分析",
|
||||||
"isSwitch": true,
|
"isSwitch": true,
|
||||||
showTypeIds: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13],
|
showTypeIds: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13],
|
||||||
key: 'isShowBillAnalysis',
|
key: 'isShowBillAnalysis',
|
||||||
}
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -542,6 +552,7 @@ const data = reactive({
|
||||||
merchantOption: {
|
merchantOption: {
|
||||||
serviceDetail: false,
|
serviceDetail: false,
|
||||||
isShowBarcode: false,
|
isShowBarcode: false,
|
||||||
|
isTransferNote: false,
|
||||||
serviceDetailInfo: {
|
serviceDetailInfo: {
|
||||||
imgUrl: '',
|
imgUrl: '',
|
||||||
rightText: 0,
|
rightText: 0,
|
||||||
|
|
@ -1400,11 +1411,11 @@ page {
|
||||||
|
|
||||||
.switch-option-container {
|
.switch-option-container {
|
||||||
margin: 16rpx 24rpx;
|
margin: 16rpx 24rpx;
|
||||||
background-color: #ffffff;
|
|
||||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||||
|
|
||||||
.border-bottom {
|
.border-bottom {
|
||||||
border-bottom: 1px solid #efefef
|
border-bottom: 1px solid #efefef;
|
||||||
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-border-bottom {
|
.no-border-bottom {
|
||||||
|
|
@ -1605,4 +1616,8 @@ page {
|
||||||
padding: 0 24rpx;
|
padding: 0 24rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.margin-bottom-16rpx {
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -42,7 +42,9 @@
|
||||||
<!-- 详情信息列表 -->
|
<!-- 详情信息列表 -->
|
||||||
<view class="detail-info-container">
|
<view class="detail-info-container">
|
||||||
<template v-for="item in visibleItemInfoList" :key="item.id">
|
<template v-for="item in visibleItemInfoList" :key="item.id">
|
||||||
<view class="info-item-box" :class="{ 'bottom-border': item.key == 'relatedRecord' }">
|
<view class="info-item-box"
|
||||||
|
v-if="item.key != 'transferNote' || billData.merchantOption.isTransferNote"
|
||||||
|
:class="{ 'bottom-border': item.key == 'relatedRecord' }">
|
||||||
<view class="item-label">
|
<view class="item-label">
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
</view>
|
</view>
|
||||||
|
|
|
||||||
|
|
@ -117,31 +117,37 @@
|
||||||
</l-painter>
|
</l-painter>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 水印 -->
|
||||||
|
<view v-if="$isVip()">
|
||||||
|
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_ranking')">
|
||||||
|
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
||||||
|
</liu-drag-button>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {
|
import {
|
||||||
ref,
|
ref,
|
||||||
reactive,
|
reactive,
|
||||||
getCurrentInstance
|
getCurrentInstance
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
import {
|
import {
|
||||||
onLoad
|
onLoad
|
||||||
} from '@dcloudio/uni-app';
|
} from '@dcloudio/uni-app';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
proxy
|
proxy
|
||||||
} = getCurrentInstance();
|
} = getCurrentInstance();
|
||||||
|
|
||||||
const type = ref("base");
|
const type = ref("base");
|
||||||
const title = ref("xx排名");
|
const title = ref("xx排名");
|
||||||
const skinBgColor = ref("#FFDFDF");
|
const skinBgColor = ref("#FFDFDF");
|
||||||
const skinHue = ref(0); // 记录色相位置
|
const skinHue = ref(0); // 记录色相位置
|
||||||
const isSnapshot = ref(false);
|
const isSnapshot = ref(false);
|
||||||
const isEdit = ref(false);
|
const isEdit = ref(false);
|
||||||
const rightButtonText = ref("编辑");
|
const rightButtonText = ref("编辑");
|
||||||
|
|
||||||
const tierList = ref([{
|
const tierList = ref([{
|
||||||
label: '夯',
|
label: '夯',
|
||||||
bgColor: '#D5171C',
|
bgColor: '#D5171C',
|
||||||
img: 'hang',
|
img: 'hang',
|
||||||
|
|
@ -149,8 +155,8 @@ const tierList = ref([{
|
||||||
hasStroke: true,
|
hasStroke: true,
|
||||||
images: [],
|
images: [],
|
||||||
width: 60,
|
width: 60,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '顶级',
|
label: '顶级',
|
||||||
bgColor: '#FF6A0B',
|
bgColor: '#FF6A0B',
|
||||||
img: 'dingji',
|
img: 'dingji',
|
||||||
|
|
@ -158,8 +164,8 @@ const tierList = ref([{
|
||||||
hasStroke: true,
|
hasStroke: true,
|
||||||
images: [],
|
images: [],
|
||||||
width: 104,
|
width: 104,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '人上人',
|
label: '人上人',
|
||||||
bgColor: '#FFF06A',
|
bgColor: '#FFF06A',
|
||||||
img: 'renshangren',
|
img: 'renshangren',
|
||||||
|
|
@ -167,8 +173,8 @@ const tierList = ref([{
|
||||||
hasStroke: true,
|
hasStroke: true,
|
||||||
images: [],
|
images: [],
|
||||||
width: 156,
|
width: 156,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'NPC',
|
label: 'NPC',
|
||||||
bgColor: '#FDF5C8',
|
bgColor: '#FDF5C8',
|
||||||
img: 'npc',
|
img: 'npc',
|
||||||
|
|
@ -176,8 +182,8 @@ const tierList = ref([{
|
||||||
hasStroke: true,
|
hasStroke: true,
|
||||||
images: [],
|
images: [],
|
||||||
width: 110,
|
width: 110,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '拉完了',
|
label: '拉完了',
|
||||||
bgColor: '#FFFFFF',
|
bgColor: '#FFFFFF',
|
||||||
img: 'lawanle',
|
img: 'lawanle',
|
||||||
|
|
@ -185,11 +191,11 @@ const tierList = ref([{
|
||||||
hasStroke: true,
|
hasStroke: true,
|
||||||
images: [],
|
images: [],
|
||||||
width: 156,
|
width: 156,
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// --- 生命周期:加载缓存 ---
|
// --- 生命周期:加载缓存 ---
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
// 进入页面埋点
|
// 进入页面埋点
|
||||||
proxy.$apiUserEvent('all', {
|
proxy.$apiUserEvent('all', {
|
||||||
type: 'click',
|
type: 'click',
|
||||||
|
|
@ -206,20 +212,20 @@ onLoad(() => {
|
||||||
if (cache.tierList) tierList.value = cache.tierList;
|
if (cache.tierList) tierList.value = cache.tierList;
|
||||||
console.log(tierList.value);
|
console.log(tierList.value);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- 拖拽排序逻辑 ---
|
// --- 拖拽排序逻辑 ---
|
||||||
const drag = reactive({
|
const drag = reactive({
|
||||||
tierIndex: -1,
|
tierIndex: -1,
|
||||||
imgIdx: -1,
|
imgIdx: -1,
|
||||||
startX: 0,
|
startX: 0,
|
||||||
startY: 0,
|
startY: 0,
|
||||||
moveX: 0,
|
moveX: 0,
|
||||||
moveY: 0
|
moveY: 0
|
||||||
});
|
});
|
||||||
|
|
||||||
// 计算拖拽样式
|
// 计算拖拽样式
|
||||||
const getDragStyle = (tIdx, iIdx) => {
|
const getDragStyle = (tIdx, iIdx) => {
|
||||||
if (drag.tierIndex === tIdx && drag.imgIdx === iIdx) {
|
if (drag.tierIndex === tIdx && drag.imgIdx === iIdx) {
|
||||||
return {
|
return {
|
||||||
transform: `translate(${drag.moveX}px, ${drag.moveY}px)`,
|
transform: `translate(${drag.moveX}px, ${drag.moveY}px)`,
|
||||||
|
|
@ -230,9 +236,9 @@ const getDragStyle = (tIdx, iIdx) => {
|
||||||
return {
|
return {
|
||||||
transition: 'transform 0.3s ease'
|
transition: 'transform 0.3s ease'
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const onTouchStart = (e, tIdx, iIdx) => {
|
const onTouchStart = (e, tIdx, iIdx) => {
|
||||||
if (!isEdit.value) return;
|
if (!isEdit.value) return;
|
||||||
const touch = e.touches[0];
|
const touch = e.touches[0];
|
||||||
drag.tierIndex = tIdx;
|
drag.tierIndex = tIdx;
|
||||||
|
|
@ -241,16 +247,16 @@ const onTouchStart = (e, tIdx, iIdx) => {
|
||||||
drag.startY = touch.clientY;
|
drag.startY = touch.clientY;
|
||||||
drag.moveX = 0;
|
drag.moveX = 0;
|
||||||
drag.moveY = 0;
|
drag.moveY = 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
const onTouchMove = (e) => {
|
const onTouchMove = (e) => {
|
||||||
if (drag.tierIndex === -1) return;
|
if (drag.tierIndex === -1) return;
|
||||||
const touch = e.touches[0];
|
const touch = e.touches[0];
|
||||||
drag.moveX = touch.clientX - drag.startX;
|
drag.moveX = touch.clientX - drag.startX;
|
||||||
drag.moveY = touch.clientY - drag.startY;
|
drag.moveY = touch.clientY - drag.startY;
|
||||||
};
|
};
|
||||||
|
|
||||||
const onTouchEnd = () => {
|
const onTouchEnd = () => {
|
||||||
if (drag.tierIndex === -1) return;
|
if (drag.tierIndex === -1) return;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
|
@ -276,10 +282,10 @@ const onTouchEnd = () => {
|
||||||
// 重置拖拽状态
|
// 重置拖拽状态
|
||||||
drag.tierIndex = -1;
|
drag.tierIndex = -1;
|
||||||
drag.imgIdx = -1;
|
drag.imgIdx = -1;
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- 其他业务逻辑 ---
|
// --- 其他业务逻辑 ---
|
||||||
const chooseImage = (index) => {
|
const chooseImage = (index) => {
|
||||||
const currentCount = tierList.value[index].images.length;
|
const currentCount = tierList.value[index].images.length;
|
||||||
uni.chooseImage({
|
uni.chooseImage({
|
||||||
count: 4 - currentCount,
|
count: 4 - currentCount,
|
||||||
|
|
@ -288,15 +294,15 @@ const chooseImage = (index) => {
|
||||||
tierList.value[index].images.push(...res.tempFilePaths);
|
tierList.value[index].images.push(...res.tempFilePaths);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const deleteImage = (tIdx, iIdx) => {
|
const deleteImage = (tIdx, iIdx) => {
|
||||||
const path = tierList.value[tIdx].images[iIdx];
|
const path = tierList.value[tIdx].images[iIdx];
|
||||||
removeLocalFile(path); // 物理删除已有文件
|
removeLocalFile(path); // 物理删除已有文件
|
||||||
tierList.value[tIdx].images.splice(iIdx, 1);
|
tierList.value[tIdx].images.splice(iIdx, 1);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onRightClick = async () => {
|
const onRightClick = async () => {
|
||||||
if (isEdit.value) {
|
if (isEdit.value) {
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '正在持久化图片...',
|
title: '正在持久化图片...',
|
||||||
|
|
@ -338,12 +344,12 @@ const onRightClick = async () => {
|
||||||
}
|
}
|
||||||
isEdit.value = !isEdit.value;
|
isEdit.value = !isEdit.value;
|
||||||
rightButtonText.value = isEdit.value ? "确定" : "编辑";
|
rightButtonText.value = isEdit.value ? "确定" : "编辑";
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 将临时图片保存到本地永久目录
|
* 将临时图片保存到本地永久目录
|
||||||
*/
|
*/
|
||||||
const saveImageToLocal = (tempFilePath) => {
|
const saveImageToLocal = (tempFilePath) => {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
// 如果已经是持久化路径,直接返回
|
// 如果已经是持久化路径,直接返回
|
||||||
if (tempFilePath.indexOf('_doc/') !== -1 || tempFilePath.indexOf('usr/') !== -1) {
|
if (tempFilePath.indexOf('_doc/') !== -1 || tempFilePath.indexOf('usr/') !== -1) {
|
||||||
|
|
@ -362,12 +368,12 @@ const saveImageToLocal = (tempFilePath) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 物理删除本地已保存的文件
|
* 物理删除本地已保存的文件
|
||||||
*/
|
*/
|
||||||
const removeLocalFile = (path) => {
|
const removeLocalFile = (path) => {
|
||||||
if (!path) return;
|
if (!path) return;
|
||||||
// 仅针对非静态资源的本地文件进行删除
|
// 仅针对非静态资源的本地文件进行删除
|
||||||
if (path.indexOf('_doc/') !== -1 || path.indexOf('usr/') !== -1) {
|
if (path.indexOf('_doc/') !== -1 || path.indexOf('usr/') !== -1) {
|
||||||
|
|
@ -377,17 +383,17 @@ const removeLocalFile = (path) => {
|
||||||
fail: (err) => console.log('文件删除失败:', err)
|
fail: (err) => console.log('文件删除失败:', err)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '生成中...',
|
title: '生成中...',
|
||||||
mask: true
|
mask: true
|
||||||
});
|
});
|
||||||
isSnapshot.value = true;
|
isSnapshot.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
const onPainterSuccess = (path) => {
|
const onPainterSuccess = (path) => {
|
||||||
const done = () => {
|
const done = () => {
|
||||||
isSnapshot.value = false;
|
isSnapshot.value = false;
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
|
|
@ -405,9 +411,9 @@ const onPainterSuccess = (path) => {
|
||||||
}),
|
}),
|
||||||
complete: done
|
complete: done
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const switchType = (val) => {
|
const switchType = (val) => {
|
||||||
type.value = val;
|
type.value = val;
|
||||||
if (val == 'skin') {
|
if (val == 'skin') {
|
||||||
tierList.value[0].bgColor = '#F3575B'
|
tierList.value[0].bgColor = '#F3575B'
|
||||||
|
|
@ -427,12 +433,12 @@ const switchType = (val) => {
|
||||||
const cache = uni.getStorageSync('ranking_config_data') || {};
|
const cache = uni.getStorageSync('ranking_config_data') || {};
|
||||||
cache.type = val;
|
cache.type = val;
|
||||||
uni.setStorageSync('ranking_config_data', cache);
|
uni.setStorageSync('ranking_config_data', cache);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 循环切换行背景色 (编辑模式下)
|
* 循环切换行背景色 (编辑模式下)
|
||||||
*/
|
*/
|
||||||
const changeRowBgColor = (index) => {
|
const changeRowBgColor = (index) => {
|
||||||
if (!isEdit.value) return;
|
if (!isEdit.value) return;
|
||||||
const colors = ['#D5171C', '#FF6A0B', '#FFF06A', '#FDF5C8', '#FFFFFF', '#1777FF', '#333333'];
|
const colors = ['#D5171C', '#FF6A0B', '#FFF06A', '#FDF5C8', '#FFFFFF', '#1777FF', '#333333'];
|
||||||
const curr = tierList.value[index].bgColor;
|
const curr = tierList.value[index].bgColor;
|
||||||
|
|
@ -443,12 +449,12 @@ const changeRowBgColor = (index) => {
|
||||||
// 自动适配文字颜色 (深色背景用白色,浅色用黑色)
|
// 自动适配文字颜色 (深色背景用白色,浅色用黑色)
|
||||||
const darkColors = ['#D5171C', '#1777FF', '#333333'];
|
const darkColors = ['#D5171C', '#1777FF', '#333333'];
|
||||||
tierList.value[index].textColor = darkColors.includes(colors[nextIdx]) ? '#FFFFFF' : '#FFFFFF';
|
tierList.value[index].textColor = darkColors.includes(colors[nextIdx]) ? '#FFFFFF' : '#FFFFFF';
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 处理色域滑动
|
* 处理色域滑动
|
||||||
*/
|
*/
|
||||||
const handleHueTouch = (e) => {
|
const handleHueTouch = (e) => {
|
||||||
const touch = e.touches[0];
|
const touch = e.touches[0];
|
||||||
uni.createSelectorQuery().select('.spectrum-picker').boundingClientRect(rect => {
|
uni.createSelectorQuery().select('.spectrum-picker').boundingClientRect(rect => {
|
||||||
if (rect) {
|
if (rect) {
|
||||||
|
|
@ -464,12 +470,12 @@ const handleHueTouch = (e) => {
|
||||||
skinBgColor.value = hslToHex(h, s, l);
|
skinBgColor.value = hslToHex(h, s, l);
|
||||||
}
|
}
|
||||||
}).exec();
|
}).exec();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* HSL 转 Hex 工具函数
|
* HSL 转 Hex 工具函数
|
||||||
*/
|
*/
|
||||||
function hslToHex(h, s, l) {
|
function hslToHex(h, s, l) {
|
||||||
l /= 100;
|
l /= 100;
|
||||||
const a = s * Math.min(l, 1 - l) / 100;
|
const a = s * Math.min(l, 1 - l) / 100;
|
||||||
const f = n => {
|
const f = n => {
|
||||||
|
|
@ -478,23 +484,23 @@ function hslToHex(h, s, l) {
|
||||||
return Math.round(255 * color).toString(16).padStart(2, '0');
|
return Math.round(255 * color).toString(16).padStart(2, '0');
|
||||||
};
|
};
|
||||||
return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
|
return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.ranking-page {
|
.ranking-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #F8F8F8;
|
background-color: #F8F8F8;
|
||||||
padding-bottom: 200rpx;
|
padding-bottom: 200rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-container {
|
.content-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 12rpx 24rpx;
|
padding: 12rpx 24rpx;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-box {
|
.table-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.watermark {
|
.watermark {
|
||||||
|
|
@ -505,14 +511,14 @@ function hslToHex(h, s, l) {
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-table {
|
.ranking-table {
|
||||||
border: 3rpx solid #333;
|
border: 3rpx solid #333;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-row {
|
.ranking-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 148rpx;
|
min-height: 148rpx;
|
||||||
border-bottom: 3rpx solid #333;
|
border-bottom: 3rpx solid #333;
|
||||||
|
|
@ -520,34 +526,34 @@ function hslToHex(h, s, l) {
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-box {
|
.label-box {
|
||||||
width: 176rpx;
|
width: 176rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-right: 3rpx solid #333;
|
border-right: 3rpx solid #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-text {
|
.label-text {
|
||||||
font-size: 48rpx;
|
font-size: 48rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
&.with-stroke {
|
&.with-stroke {
|
||||||
text-shadow: 2rpx 2rpx 0 #000, -2rpx -2rpx 0 #000, 2rpx -2rpx 0 #000, -2rpx 2rpx 0 #000;
|
text-shadow: 2rpx 2rpx 0 #000, -2rpx -2rpx 0 #000, 2rpx -2rpx 0 #000, -2rpx 2rpx 0 #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.items-box {
|
.items-box {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 14rpx 12rpx;
|
padding: 14rpx 12rpx;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-wrapper {
|
.item-wrapper {
|
||||||
width: 105rpx;
|
width: 105rpx;
|
||||||
height: 105rpx;
|
height: 105rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -560,15 +566,15 @@ function hslToHex(h, s, l) {
|
||||||
scale: 1.1;
|
scale: 1.1;
|
||||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
|
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-img {
|
.item-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 4rpx;
|
border-radius: 4rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.del-btn {
|
.del-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -12rpx;
|
top: -12rpx;
|
||||||
right: -12rpx;
|
right: -12rpx;
|
||||||
|
|
@ -582,9 +588,9 @@ function hslToHex(h, s, l) {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-btn {
|
.add-btn {
|
||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
background: #eee;
|
background: #eee;
|
||||||
|
|
@ -597,17 +603,17 @@ function hslToHex(h, s, l) {
|
||||||
width: 40rpx;
|
width: 40rpx;
|
||||||
height: 40rpx;
|
height: 40rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-btn {
|
.save-btn {
|
||||||
margin-top: 60rpx;
|
margin-top: 60rpx;
|
||||||
width: 400rpx;
|
width: 400rpx;
|
||||||
background: #1777FF;
|
background: #1777FF;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 50rpx;
|
border-radius: 50rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-tabs {
|
.bottom-tabs {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 40rpx;
|
bottom: 40rpx;
|
||||||
bottom: calc(32rpx + env(safe-area-inset-bottom));
|
bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||||||
|
|
@ -630,9 +636,9 @@ function hslToHex(h, s, l) {
|
||||||
color: #1777FF;
|
color: #1777FF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.skin-box {
|
.skin-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 120rpx 12rpx;
|
padding: 120rpx 12rpx;
|
||||||
background-color: #FFDFDF;
|
background-color: #FFDFDF;
|
||||||
|
|
@ -687,45 +693,45 @@ function hslToHex(h, s, l) {
|
||||||
bottom: 60rpx;
|
bottom: 60rpx;
|
||||||
left: 100rpx;
|
left: 100rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-action {
|
.save-action {
|
||||||
margin-top: 60rpx;
|
margin-top: 60rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-bottom: 60rpx;
|
padding-bottom: 60rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-edit-actions {
|
.bottom-edit-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-tip {
|
.edit-tip {
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #999;
|
color: #999;
|
||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-picker {
|
.color-picker {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16rpx;
|
gap: 16rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 12rpx 20rpx;
|
padding: 12rpx 20rpx;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-picker-wrapper {
|
.color-picker-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 12rpx 0;
|
margin: 12rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hex-input {
|
.hex-input {
|
||||||
width: 150rpx;
|
width: 150rpx;
|
||||||
height: 56rpx;
|
height: 56rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -735,9 +741,9 @@ function hslToHex(h, s, l) {
|
||||||
color: #333;
|
color: #333;
|
||||||
border: 1rpx solid #eee;
|
border: 1rpx solid #eee;
|
||||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.spectrum-picker {
|
.spectrum-picker {
|
||||||
width: 600rpx;
|
width: 600rpx;
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -746,9 +752,9 @@ function hslToHex(h, s, l) {
|
||||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 12rpx 0;
|
margin: 12rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-thumb {
|
.slider-thumb {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 38rpx;
|
width: 38rpx;
|
||||||
|
|
@ -759,26 +765,26 @@ function hslToHex(h, s, l) {
|
||||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
|
||||||
border: 2rpx solid #fff;
|
border: 2rpx solid #fff;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spectrum-bar {
|
.spectrum-bar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-dot {
|
.color-dot {
|
||||||
width: 32rpx;
|
width: 32rpx;
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2rpx solid #fff;
|
border: 2rpx solid #fff;
|
||||||
box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
|
box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
|
||||||
margin: 0 10rpx;
|
margin: 0 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.painter-container {
|
.painter-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: -9999rpx;
|
left: -9999rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -130,7 +130,7 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="progress-box" style="height: 192rpx;">
|
<view class="progress-box" style="height: 192rpx;">
|
||||||
<text class="text">快递运输 · 温馨提示:您的订单预计3月11日09:00- 15:53送达</text>
|
<text class="text">{{ order.trackingDesc2 }}</text>
|
||||||
<view class="upload-box">
|
<view class="upload-box">
|
||||||
<view class="info-box">
|
<view class="info-box">
|
||||||
<view class="image-box">
|
<view class="image-box">
|
||||||
|
|
|
||||||
|
|
@ -424,7 +424,8 @@ const items = [
|
||||||
{
|
{
|
||||||
image: "/static/image/shopping/taobao/waimai/cuidan.png",
|
image: "/static/image/shopping/taobao/waimai/cuidan.png",
|
||||||
text: "催单",
|
text: "催单",
|
||||||
show: () => order.value.statusType == 'wait_recv'
|
show: () => order.value.statusType == 'wait_recv',
|
||||||
|
color: "#CDCDCD"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: "/static/image/shopping/taobao/waimai/quxiaodingdan.png",
|
image: "/static/image/shopping/taobao/waimai/quxiaodingdan.png",
|
||||||
|
|
|
||||||
|
|
@ -403,6 +403,13 @@
|
||||||
"key": "payMethod",
|
"key": "payMethod",
|
||||||
"required": true
|
"required": true
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"label": "转账备注",
|
||||||
|
"value": "转账",
|
||||||
|
"type": "text",
|
||||||
|
"focus": false,
|
||||||
|
"key": "transferNote"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"label": "对方账户",
|
"label": "对方账户",
|
||||||
"value": "",
|
"value": "",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue