短信优化地区可修改
|
|
@ -0,0 +1,148 @@
|
||||||
|
<template>
|
||||||
|
<view class="auto-width-input-container" :class="{ 'is-textarea': type === 'textarea' }">
|
||||||
|
<!-- 测量层:用于计算宽度的影藏文本,必须保持与 input 相同的字体样式 -->
|
||||||
|
<text v-if="type !== 'textarea'" class="measure-text" :style="[inputStyle, { visibility: 'hidden', position: 'absolute', whiteSpace: 'nowrap' }]">
|
||||||
|
{{ modelValue || placeholder }}
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- 输入层 -->
|
||||||
|
<template v-if="type !== 'textarea'">
|
||||||
|
<input class="auto-input" :type="type" :value="modelValue" :placeholder="placeholder" :placeholder-style="placeholderStyle"
|
||||||
|
:style="[inputStyle, { width: inputWidth }]" @input="onInput" :maxlength="maxlength" />
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<textarea class="auto-textarea" :value="modelValue" :placeholder="placeholder" :placeholder-style="placeholderStyle"
|
||||||
|
:style="[inputStyle]" @input="onInput" :maxlength="maxlength" auto-height />
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, watch, nextTick, getCurrentInstance, onMounted } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'text' // 支持所有原生类型如 'number', 'tel', 'digit' 或 'textarea'
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '请输入'
|
||||||
|
},
|
||||||
|
placeholderStyle: {
|
||||||
|
type: String,
|
||||||
|
default: 'color: #999;'
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
type: String,
|
||||||
|
default: '28rpx'
|
||||||
|
},
|
||||||
|
fontWeight: {
|
||||||
|
type: String,
|
||||||
|
default: 'normal'
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#1A1A1A'
|
||||||
|
},
|
||||||
|
maxlength: {
|
||||||
|
type: Number,
|
||||||
|
default: 140
|
||||||
|
},
|
||||||
|
minWidth: {
|
||||||
|
type: String,
|
||||||
|
default: '20rpx'
|
||||||
|
},
|
||||||
|
extraWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 10 // 额外的缓冲像素,防止文字抖动
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'change']);
|
||||||
|
const instance = getCurrentInstance();
|
||||||
|
const inputWidth = ref(props.minWidth);
|
||||||
|
|
||||||
|
const inputStyle = computed(() => ({
|
||||||
|
fontSize: props.fontSize,
|
||||||
|
fontWeight: props.fontWeight,
|
||||||
|
color: props.color,
|
||||||
|
fontFamily: 'inherit'
|
||||||
|
}));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 核心逻辑:测量隐藏文本的物理宽度
|
||||||
|
*/
|
||||||
|
const updateWidth = () => {
|
||||||
|
if (props.type === 'textarea') return;
|
||||||
|
nextTick(() => {
|
||||||
|
const query = uni.createSelectorQuery().in(instance.proxy);
|
||||||
|
query.select('.measure-text').boundingClientRect(data => {
|
||||||
|
if (data && data.width) {
|
||||||
|
heatWidth(data.width);
|
||||||
|
}
|
||||||
|
}).exec();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const heatWidth = (width) => {
|
||||||
|
// 加上一点额外的空间,避免在某些平台上因为小数点或字体渲染导致的文字换行
|
||||||
|
inputWidth.value = (width + props.extraWidth) + 'px';
|
||||||
|
};
|
||||||
|
|
||||||
|
const onInput = (e) => {
|
||||||
|
const val = e.detail.value;
|
||||||
|
emit('update:modelValue', val);
|
||||||
|
emit('change', val);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听值的变化实时更新宽度
|
||||||
|
watch(() => props.modelValue, () => {
|
||||||
|
updateWidth();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(() => {
|
||||||
|
updateWidth();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.auto-width-input-container {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
&.is-textarea {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.measure-text {
|
||||||
|
left: -9999rpx;
|
||||||
|
top: -9999rpx;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auto-input {
|
||||||
|
min-width: v-bind('props.minWidth');
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-align: inherit; // 继承父级的对齐方式
|
||||||
|
height: 1.4em; // 自动适应行高
|
||||||
|
line-height: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auto-textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 1.4em;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.4em;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
:src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
|
:src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
|
||||||
</image>
|
</image>
|
||||||
<text v-if="phone != 'iphone'" class="title">{{ chatInfo.title }}</text>
|
<text v-if="phone != 'iphone'" class="title">{{ chatInfo.title }}</text>
|
||||||
<text v-if="phone == 'oppo'" class="second-text">重庆</text>
|
<text v-if="phone == 'oppo' && chatInfo.area" class="second-text">{{ chatInfo.area }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="right flex-align-center">
|
<view class="right flex-align-center">
|
||||||
<image v-if="phone == 'mi'" class="img shrink-0"
|
<image v-if="phone == 'mi'" class="img shrink-0"
|
||||||
|
|
|
||||||
|
|
@ -63,8 +63,8 @@
|
||||||
<view class="product-info">
|
<view class="product-info">
|
||||||
<text class="product-title">{{ item.products[0].title }}</text>
|
<text class="product-title">{{ item.products[0].title }}</text>
|
||||||
<text class="product-desc" v-if="item.products[0].desc">{{ item.products[0].desc }}</text>
|
<text class="product-desc" v-if="item.products[0].desc">{{ item.products[0].desc }}</text>
|
||||||
<view class="product-tags" v-if="item.products[0].tags && item.products[0].tags.length">
|
<view class="product-tags" v-if="item.products[0].service">
|
||||||
<text class="tag" v-for="(tag, index) in item.products[0].tags" :key="index">{{ tag }}</text>
|
<text class="tag">{{ item.products[0].service }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -120,7 +120,7 @@
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.promoType === 'text'">
|
<template v-else-if="item.promoType === 'text'">
|
||||||
<text class="promo-text text-basic">本单可享 <text class="highlight">{{ item.promoHighlight
|
<text class="promo-text text-basic">本单可享 <text class="highlight">{{ item.promoHighlight
|
||||||
}}</text>,快去支付吧~</text>
|
}}</text>,快去支付吧~</text>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<text class="promo-text text-basic">当笔订单返现成功到账,<text style="color: #E31700;">点击领取</text></text>
|
<text class="promo-text text-basic">当笔订单返现成功到账,<text style="color: #E31700;">点击领取</text></text>
|
||||||
|
|
|
||||||
2
main.js
|
|
@ -27,7 +27,7 @@ export function createApp() {
|
||||||
const systemInfo = uni.getStorageSync('systemInfo') || {}
|
const systemInfo = uni.getStorageSync('systemInfo') || {}
|
||||||
app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
|
app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
|
||||||
app.config.globalProperties.$systemInfo = systemInfo
|
app.config.globalProperties.$systemInfo = systemInfo
|
||||||
uni.setStorageSync('version', '1.0.3.sp17')
|
uni.setStorageSync('version', '1.0.4.sp2')
|
||||||
app.config.globalProperties.$version = uni.getStorageSync('version')
|
app.config.globalProperties.$version = uni.getStorageSync('version')
|
||||||
app.use(globalMethods);
|
app.use(globalMethods);
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,10 @@
|
||||||
<text class="add-label required">联系人</text>
|
<text class="add-label required">联系人</text>
|
||||||
<input class="add-input" v-model="addForm.title" placeholder="请输入名称或号码" />
|
<input class="add-input" v-model="addForm.title" placeholder="请输入名称或号码" />
|
||||||
</view>
|
</view>
|
||||||
|
<view class="add-row" v-if="data.phone == 'oppo'">
|
||||||
|
<text class="add-label">地区</text>
|
||||||
|
<input class="add-input" v-model="addForm.area" placeholder="请输入地区" />
|
||||||
|
</view>
|
||||||
<view class="add-row between" v-if="data.phone == 'iphone'">
|
<view class="add-row between" v-if="data.phone == 'iphone'">
|
||||||
<text class="add-label">取消通知</text>
|
<text class="add-label">取消通知</text>
|
||||||
<switch :checked="addForm.noNotice" @change="addForm.noNotice = !addForm.noNotice" />
|
<switch :checked="addForm.noNotice" @change="addForm.noNotice = !addForm.noNotice" />
|
||||||
|
|
@ -313,6 +317,7 @@ const openAddPopup = () => {
|
||||||
addForm.title = ''
|
addForm.title = ''
|
||||||
addForm.img = ''
|
addForm.img = ''
|
||||||
addForm.content = ''
|
addForm.content = ''
|
||||||
|
addForm.area = ''
|
||||||
addForm.unRead = false
|
addForm.unRead = false
|
||||||
addForm.unReadNumber = 1
|
addForm.unReadNumber = 1
|
||||||
addForm.noNotice = false
|
addForm.noNotice = false
|
||||||
|
|
@ -347,6 +352,7 @@ const editItem = (item) => {
|
||||||
addForm.img = item.img || ''
|
addForm.img = item.img || ''
|
||||||
addForm.imgShape = item.imgShape || 'circle'
|
addForm.imgShape = item.imgShape || 'circle'
|
||||||
addForm.content = ''
|
addForm.content = ''
|
||||||
|
addForm.area = item.area || ''
|
||||||
addForm.unRead = !!item.unRead
|
addForm.unRead = !!item.unRead
|
||||||
addForm.unReadNumber = item.unReadNumber || 0
|
addForm.unReadNumber = item.unReadNumber || 0
|
||||||
addForm.noNotice = item.noNotice || false
|
addForm.noNotice = item.noNotice || false
|
||||||
|
|
@ -387,6 +393,7 @@ const confirmAdd = async () => {
|
||||||
defaultList.value[idx].unReadNumber = addForm.unReadNumber
|
defaultList.value[idx].unReadNumber = addForm.unReadNumber
|
||||||
defaultList.value[idx].noNotice = addForm.noNotice
|
defaultList.value[idx].noNotice = addForm.noNotice
|
||||||
defaultList.value[idx].imgShape = addForm.imgShape
|
defaultList.value[idx].imgShape = addForm.imgShape
|
||||||
|
defaultList.value[idx].area = addForm.area
|
||||||
defaultList.value[idx].time = time
|
defaultList.value[idx].time = time
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -399,6 +406,7 @@ const confirmAdd = async () => {
|
||||||
img: finalImgPath,
|
img: finalImgPath,
|
||||||
title: addForm.title.trim(),
|
title: addForm.title.trim(),
|
||||||
imgShape: addForm.imgShape,
|
imgShape: addForm.imgShape,
|
||||||
|
area: addForm.area,
|
||||||
chatList: addForm.content.trim() ? [
|
chatList: addForm.content.trim() ? [
|
||||||
{
|
{
|
||||||
id: stringUtil.uuid(),
|
id: stringUtil.uuid(),
|
||||||
|
|
|
||||||
|
|
@ -9,21 +9,25 @@
|
||||||
:style="type == 'skin' ? { backgroundColor: skinBgColor } : {}">
|
:style="type == 'skin' ? { backgroundColor: skinBgColor } : {}">
|
||||||
<template v-if="type == 'skin'">
|
<template v-if="type == 'skin'">
|
||||||
<view v-if="!isEdit" class="title">{{ title }}</view>
|
<view v-if="!isEdit" class="title">{{ title }}</view>
|
||||||
<input v-else class="title title-input" v-model="title" placeholder="请输入排名标题" />
|
<input v-else class="title title-input" v-model="title" maxlength="12" placeholder="请输入排名标题" />
|
||||||
<image class="img happy" src="/static/image/other/ranking/happy.png"></image>
|
<image class="img happy" src="/static/image/other/ranking/happy.png"></image>
|
||||||
<image class="img sad" src="/static/image/other/ranking/sad.png"></image>
|
<image class="img sad" src="/static/image/other/ranking/sad.png"></image>
|
||||||
</template>
|
</template>
|
||||||
<image class="watermark" :class="{}" src="/static/image/other/card/shuiyin2.png" mode="heightFix">
|
<image v-if="$isVip()" class="watermark" :class="{}" src="/static/image/other/card/shuiyin2.png"
|
||||||
|
mode="heightFix">
|
||||||
</image>
|
</image>
|
||||||
|
|
||||||
<view class="ranking-table">
|
<view class="ranking-table">
|
||||||
<view v-for="(item, index) in tierList" :key="index" class="ranking-row">
|
<view v-for="(item, index) in tierList" :key="index" class="ranking-row">
|
||||||
<view class="label-box" :style="{ backgroundColor: item.bgColor }"
|
<view class="label-box" :style="{ backgroundColor: item.bgColor }"
|
||||||
@click="changeRowBgColor(index)">
|
@click="changeRowBgColor(index)">
|
||||||
<text class="label-text" :class="{ 'with-stroke': item.hasStroke }"
|
<!-- <text class="label-text" :class="{ 'with-stroke': item.hasStroke }"
|
||||||
:style="{ color: item.textColor }">
|
:style="{ color: item.textColor }">
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
</text>
|
</text> -->
|
||||||
|
<image :style="`height:60rpx;width:160rpx;`"
|
||||||
|
:src="`/static/image/other/ranking/${type == 'skin' ? item.img + '_skin' : item.img}.png`">
|
||||||
|
</image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="items-box ranking-item-list" :id="'row-' + index">
|
<view class="items-box ranking-item-list" :id="'row-' + index">
|
||||||
|
|
@ -88,17 +92,21 @@
|
||||||
:css="`display: flex; min-height: 148rpx; border-bottom: ${index === tierList.length - 1 ? 'none' : '3rpx solid #333'};`">
|
:css="`display: flex; min-height: 148rpx; border-bottom: ${index === tierList.length - 1 ? 'none' : '3rpx solid #333'};`">
|
||||||
<l-painter-view
|
<l-painter-view
|
||||||
:css="`width: 176rpx; min-height: 148rpx; background-color: ${item.bgColor}; display: flex; align-items: center; justify-content: center; border-right: 3rpx solid #333;`">
|
:css="`width: 176rpx; min-height: 148rpx; background-color: ${item.bgColor}; display: flex; align-items: center; justify-content: center; border-right: 3rpx solid #333;`">
|
||||||
<l-painter-text :text="item.label"
|
<!-- <l-painter-text :text="item.label"
|
||||||
:css="`font-size: 52rpx; font-weight: bold; color: ${item.textColor}; ${item.hasStroke ? 'text-shadow: 2rpx 2rpx 0 #000, -2rpx -2rpx 0 #000, 2rpx -2rpx 0 #000, -2rpx 2rpx 0 #000, 0 2rpx 0 #000, 0 -2rpx 0 #000, 2rpx 0 0 #000, -2rpx 0 0 #000;' : ''}`" />
|
:css="`font-size: 52rpx; font-weight: bold; color: ${item.textColor}; ${item.hasStroke ? 'text-shadow: 2rpx 2rpx 0 #000, -2rpx -2rpx 0 #000, 2rpx -2rpx 0 #000, -2rpx 2rpx 0 #000, 0 2rpx 0 #000, 0 -2rpx 0 #000, 2rpx 0 0 #000, -2rpx 0 0 #000;' : ''}`" /> -->
|
||||||
|
<l-painter-image
|
||||||
|
:src="`/static/image/other/ranking/${type == 'skin' ? item.img + '_skin' : item.img}.png`"
|
||||||
|
:css="`height: 60rpx; width: 160rpx;`" mode="heightFix" />
|
||||||
</l-painter-view>
|
</l-painter-view>
|
||||||
<l-painter-view :css="`flex: 1; padding: 14rpx 16rpx; display: flex; align-items: center;`">
|
<l-painter-view
|
||||||
|
:css="`flex: 1; display: flex; align-items: center;height: 148rpx;width:490rpx;padding:0 12rpx;`">
|
||||||
<l-painter-image v-for="(img, imgIdx) in item.images" :key="imgIdx" :src="img"
|
<l-painter-image v-for="(img, imgIdx) in item.images" :key="imgIdx" :src="img"
|
||||||
css="width: 110rpx; height: 110rpx; margin: 0 6rpx; object-fit: cover;"
|
css="width: 105rpx; height: 105rpx; margin: 0 8rpx; object-fit: cover;"
|
||||||
mode="aspectFill" />
|
mode="aspectFill" />
|
||||||
</l-painter-view>
|
</l-painter-view>
|
||||||
</l-painter-view>
|
</l-painter-view>
|
||||||
</l-painter-view>
|
</l-painter-view>
|
||||||
<l-painter-view
|
<l-painter-view v-if="$isVip()"
|
||||||
:css="type == 'skin' ? `position: absolute;bottom: 32rpx;right: 14rpx;` : `position: absolute;top: 50%;right: 50%;transform: translate(50%, -50%);`">
|
:css="type == 'skin' ? `position: absolute;bottom: 32rpx;right: 14rpx;` : `position: absolute;top: 50%;right: 50%;transform: translate(50%, -50%);`">
|
||||||
<l-painter-image src="/static/image/other/card/shuiyin2.png"
|
<l-painter-image src="/static/image/other/card/shuiyin2.png"
|
||||||
css="width: 194rpx;height: 56rpx;" />
|
css="width: 194rpx;height: 56rpx;" />
|
||||||
|
|
@ -112,8 +120,18 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive } from 'vue';
|
import {
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
ref,
|
||||||
|
reactive,
|
||||||
|
getCurrentInstance
|
||||||
|
} from 'vue';
|
||||||
|
import {
|
||||||
|
onLoad
|
||||||
|
} from '@dcloudio/uni-app';
|
||||||
|
|
||||||
|
const {
|
||||||
|
proxy
|
||||||
|
} = getCurrentInstance();
|
||||||
|
|
||||||
const type = ref("base");
|
const type = ref("base");
|
||||||
const title = ref("xx排名");
|
const title = ref("xx排名");
|
||||||
|
|
@ -123,16 +141,62 @@ 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: '夯', bgColor: '#D5171C', textColor: '#FFFFFF', hasStroke: true, images: [] },
|
label: '夯',
|
||||||
{ label: '顶级', bgColor: '#FF6A0B', textColor: '#FFFFFF', hasStroke: true, images: [] },
|
bgColor: '#D5171C',
|
||||||
{ label: '人上人', bgColor: '#FFF06A', textColor: '#FFFFFF', hasStroke: true, images: [] },
|
img: 'hang',
|
||||||
{ label: 'NPC', bgColor: '#FDF5C8', textColor: '#FFFFFF', hasStroke: true, images: [] },
|
textColor: '#FFFFFF',
|
||||||
{ label: '拉完了', bgColor: '#FFFFFF', textColor: '#FFFFFF', hasStroke: true, images: [] }
|
hasStroke: true,
|
||||||
|
images: [],
|
||||||
|
width: 60,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '顶级',
|
||||||
|
bgColor: '#FF6A0B',
|
||||||
|
img: 'dingji',
|
||||||
|
textColor: '#FFFFFF',
|
||||||
|
hasStroke: true,
|
||||||
|
images: [],
|
||||||
|
width: 104,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '人上人',
|
||||||
|
bgColor: '#FFF06A',
|
||||||
|
img: 'renshangren',
|
||||||
|
textColor: '#FFFFFF',
|
||||||
|
hasStroke: true,
|
||||||
|
images: [],
|
||||||
|
width: 156,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'NPC',
|
||||||
|
bgColor: '#FDF5C8',
|
||||||
|
img: 'npc',
|
||||||
|
textColor: '#FFFFFF',
|
||||||
|
hasStroke: true,
|
||||||
|
images: [],
|
||||||
|
width: 110,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '拉完了',
|
||||||
|
bgColor: '#FFFFFF',
|
||||||
|
img: 'lawanle',
|
||||||
|
textColor: '#FFFFFF',
|
||||||
|
hasStroke: true,
|
||||||
|
images: [],
|
||||||
|
width: 156,
|
||||||
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// --- 生命周期:加载缓存 ---
|
// --- 生命周期:加载缓存 ---
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
|
// 进入页面埋点
|
||||||
|
proxy.$apiUserEvent('all', {
|
||||||
|
type: 'click',
|
||||||
|
key: 'ranking',
|
||||||
|
value: "从夯倒拉排名"
|
||||||
|
})
|
||||||
|
// 获取缓存数据
|
||||||
const cache = uni.getStorageSync('ranking_config_data');
|
const cache = uni.getStorageSync('ranking_config_data');
|
||||||
if (cache) {
|
if (cache) {
|
||||||
title.value = cache.title || title.value;
|
title.value = cache.title || title.value;
|
||||||
|
|
@ -163,7 +227,9 @@ const getDragStyle = (tIdx, iIdx) => {
|
||||||
transition: 'none'
|
transition: 'none'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return { transition: 'transform 0.3s ease' };
|
return {
|
||||||
|
transition: 'transform 0.3s ease'
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const onTouchStart = (e, tIdx, iIdx) => {
|
const onTouchStart = (e, tIdx, iIdx) => {
|
||||||
|
|
@ -187,7 +253,11 @@ const onTouchMove = (e) => {
|
||||||
const onTouchEnd = () => {
|
const onTouchEnd = () => {
|
||||||
if (drag.tierIndex === -1) return;
|
if (drag.tierIndex === -1) return;
|
||||||
|
|
||||||
const { tierIndex, imgIdx, moveX } = drag;
|
const {
|
||||||
|
tierIndex,
|
||||||
|
imgIdx,
|
||||||
|
moveX
|
||||||
|
} = drag;
|
||||||
const rowData = tierList.value[tierIndex].images;
|
const rowData = tierList.value[tierIndex].images;
|
||||||
|
|
||||||
// 估算单个item跨度 (100rpx宽度 + 12rpx间距 ≈ 56px,建议根据真机微调)
|
// 估算单个item跨度 (100rpx宽度 + 12rpx间距 ≈ 56px,建议根据真机微调)
|
||||||
|
|
@ -228,7 +298,10 @@ const deleteImage = (tIdx, iIdx) => {
|
||||||
|
|
||||||
const onRightClick = async () => {
|
const onRightClick = async () => {
|
||||||
if (isEdit.value) {
|
if (isEdit.value) {
|
||||||
uni.showLoading({ title: '正在持久化图片...', mask: true });
|
uni.showLoading({
|
||||||
|
title: '正在持久化图片...',
|
||||||
|
mask: true
|
||||||
|
});
|
||||||
// 1. 深度遍历并持久化所有临时图片
|
// 1. 深度遍历并持久化所有临时图片
|
||||||
for (let tierIdx = 0; tierIdx < tierList.value.length; tierIdx++) {
|
for (let tierIdx = 0; tierIdx < tierList.value.length; tierIdx++) {
|
||||||
const tier = tierList.value[tierIdx];
|
const tier = tierList.value[tierIdx];
|
||||||
|
|
@ -258,7 +331,10 @@ const onRightClick = async () => {
|
||||||
tierList: tierList.value
|
tierList: tierList.value
|
||||||
});
|
});
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
uni.showToast({ title: '已保存', icon: 'none' });
|
uni.showToast({
|
||||||
|
title: '已保存',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
isEdit.value = !isEdit.value;
|
isEdit.value = !isEdit.value;
|
||||||
rightButtonText.value = isEdit.value ? "确定" : "编辑";
|
rightButtonText.value = isEdit.value ? "确定" : "编辑";
|
||||||
|
|
@ -304,7 +380,10 @@ const removeLocalFile = (path) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
uni.showLoading({ title: '生成中...', mask: true });
|
uni.showLoading({
|
||||||
|
title: '生成中...',
|
||||||
|
mask: true
|
||||||
|
});
|
||||||
isSnapshot.value = true;
|
isSnapshot.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -317,8 +396,13 @@ const onPainterSuccess = (path) => {
|
||||||
|
|
||||||
uni.saveImageToPhotosAlbum({
|
uni.saveImageToPhotosAlbum({
|
||||||
filePath: path,
|
filePath: path,
|
||||||
success: () => uni.showToast({ title: '保存成功' }),
|
success: () => uni.showToast({
|
||||||
fail: () => uni.showToast({ title: '保存失败', icon: 'none' }),
|
title: '保存成功'
|
||||||
|
}),
|
||||||
|
fail: () => uni.showToast({
|
||||||
|
title: '保存失败',
|
||||||
|
icon: 'none'
|
||||||
|
}),
|
||||||
complete: done
|
complete: done
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
@ -358,7 +442,7 @@ const changeRowBgColor = (index) => {
|
||||||
|
|
||||||
// 自动适配文字颜色 (深色背景用白色,浅色用黑色)
|
// 自动适配文字颜色 (深色背景用白色,浅色用黑色)
|
||||||
const darkColors = ['#D5171C', '#1777FF', '#333333'];
|
const darkColors = ['#D5171C', '#1777FF', '#333333'];
|
||||||
tierList.value[index].textColor = darkColors.includes(colors[nextIdx]) ? '#FFFFFF' : '#333333';
|
tierList.value[index].textColor = darkColors.includes(colors[nextIdx]) ? '#FFFFFF' : '#FFFFFF';
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -459,13 +543,13 @@ function hslToHex(h, s, l) {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 14rpx 8rpx;
|
padding: 14rpx 12rpx;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-wrapper {
|
.item-wrapper {
|
||||||
width: 100rpx;
|
width: 105rpx;
|
||||||
height: 100rpx;
|
height: 105rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 6rpx;
|
margin: 0 6rpx;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
|
|
@ -526,6 +610,8 @@ function hslToHex(h, s, l) {
|
||||||
.bottom-tabs {
|
.bottom-tabs {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 40rpx;
|
bottom: 40rpx;
|
||||||
|
bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||||||
|
bottom: calc(32rpx + constant(safe-area-inset-bottom));
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -559,6 +645,7 @@ function hslToHex(h, s, l) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
width: 260px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30rpx;
|
top: 30rpx;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
@ -570,10 +657,10 @@ function hslToHex(h, s, l) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-input {
|
.title-input {
|
||||||
|
min-width: 260px;
|
||||||
background: rgba(255, 255, 255, 0.5);
|
background: rgba(255, 255, 255, 0.5);
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
padding: 4rpx 12rpx;
|
padding: 4rpx 12rpx;
|
||||||
width: 300rpx;
|
|
||||||
border: 1rpx dashed #1777FF;
|
border: 1rpx dashed #1777FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,27 +7,334 @@
|
||||||
<text>{{ item.label }}</text>
|
<text>{{ item.label }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 等待付款 -->
|
||||||
|
<template v-if="activeTab == 'dengdaifukuan'">
|
||||||
|
<view class="tip-box">
|
||||||
|
<picker mode="multiSelector" :range="timeRange" :value="timeValue" @change="handleTimeChange">
|
||||||
|
<text>还剩
|
||||||
|
<text style="color: #DD223F;font-weight: 500; margin-left: 10rpx;">{{ order.statusDesc }}</text>
|
||||||
|
<image class="edit-icon" src="/static/image/common/edit.png"></image>
|
||||||
|
订单自动取消
|
||||||
|
</text>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="address-info">
|
||||||
|
<view class="flex-1">
|
||||||
|
<view>
|
||||||
|
<image class="location" src="/static/image/shopping/jingdong/detail/location.png"></image>
|
||||||
|
<view class="name-box animate-scale">
|
||||||
|
<auto-width-input v-model="order.consignee" fontSize="30rpx" fontWeight="500"
|
||||||
|
placeholder="姓名" />
|
||||||
|
<image class="edit-icon" src="/static/image/common/edit.png"></image>
|
||||||
|
</view>
|
||||||
|
<view class="number-box animate-scale">
|
||||||
|
<auto-width-input v-model="order.phone" fontSize="26rpx" placeholder="电话" color="#8C8C8C" />
|
||||||
|
<image class="edit-icon" src="/static/image/common/edit.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="address-box animate-scale">
|
||||||
|
<auto-width-input v-model="order.fullAddress" type="textarea" fontSize="26rpx" placeholder="地址"
|
||||||
|
color="#8C8C8C" />
|
||||||
|
<image class="edit-icon" src="/static/image/common/edit.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="edit-btn">
|
||||||
|
<text>修改</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 正在出库 -->
|
||||||
|
<template v-if="activeTab == 'zhengzaichuku'">
|
||||||
|
<view class="outbound-info">
|
||||||
|
<image class="outbound-icon" src="/static/image/shopping/jingdong/detail/xiadan.png" mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
<view class="outbound-info-content">
|
||||||
|
<view class="title-info">
|
||||||
|
<view>
|
||||||
|
<text>已下单 </text>
|
||||||
|
<text>预计明天 09:00-15:00送达</text>
|
||||||
|
</view>
|
||||||
|
<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<text class="desc">快递运输 · 温馨提示:您的订单预计3月11日09:00- 15:53送达</text>
|
||||||
|
<view class="address-box">
|
||||||
|
<view class="top">
|
||||||
|
<text class="address">华哈哈哈哈哈哈哈哈哈2栋 22-1</text>
|
||||||
|
<view class="edit-btn">修改</view>
|
||||||
|
</view>
|
||||||
|
<view class="phone">肖战123****1234</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 已取消 -->
|
||||||
|
<template v-if="activeTab == 'yiquxiao'">
|
||||||
|
<view class="cancel-progress-box">
|
||||||
|
<view class="cancel-content">
|
||||||
|
<view class="title-row">
|
||||||
|
<view class="left">
|
||||||
|
<image class="icon" src="/static/image/shopping/jingdong/detail/tuikuan.png"
|
||||||
|
mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
<text class="title">取消/退款进度</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<text class="desc">您的订单已取消,请查看取消进度详情。</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="order-status-box">
|
||||||
|
<view class="status-main">
|
||||||
|
<image class="status-icon" src="/static/image/shopping/jingdong/detail/xiadan.png" mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
<view class="status-content">
|
||||||
|
<view class="title-row">
|
||||||
|
<text class="title">已下单</text>
|
||||||
|
<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="progress-box">
|
||||||
|
<text class="desc">您提交了订单,请等待系统确认</text>
|
||||||
|
</view>
|
||||||
|
<view class="bottom-box">
|
||||||
|
<view class="dot"></view>
|
||||||
|
<view>
|
||||||
|
<text class="desc">华哈哈哈哈哈哈哈哈哈2栋 22-1</text>
|
||||||
|
<view class="name">肖战123****1234</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 签收 -->
|
||||||
|
<template v-if="activeTab == 'yiqianshou'">
|
||||||
|
<view class="order-status-box">
|
||||||
|
<view class="status-main">
|
||||||
|
<image class="status-icon" src="/static/image/shopping/jingdong/detail/qianshou.png"
|
||||||
|
mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
<view class="status-content">
|
||||||
|
<view class="title-row">
|
||||||
|
<text class="title" style="color: #1A1A1A;">已签收</text>
|
||||||
|
<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="progress-box" style="height: 192rpx;">
|
||||||
|
<text class="text">快递运输 · 温馨提示:您的订单预计3月11日09:00- 15:53送达</text>
|
||||||
|
<view class="upload-box">
|
||||||
|
<view class="info-box">
|
||||||
|
<view class="image-box">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<text class="name">肖战</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="btn grey">联系Ta</view>
|
||||||
|
<view class="btn red">打赏Ta</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bottom-box">
|
||||||
|
<view class="dot"></view>
|
||||||
|
<view>
|
||||||
|
<text class="desc">华哈哈哈哈哈哈哈哈哈2栋 22-1</text>
|
||||||
|
<view class="name">肖战123****1234</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 商品卡片 -->
|
||||||
|
<view class="product-card">
|
||||||
|
<view class="title-box">
|
||||||
|
<view class="left-box">
|
||||||
|
<image class="img" src="/static/image/shopping/jingdong/detail/ziyin.png"></image>
|
||||||
|
<view class="title flex animate-scale">
|
||||||
|
<auto-width-input v-model="order.products[0].name" fontSize="26rpx" fontWeight="700"
|
||||||
|
placeholder="请输入店铺名称" color="#1A1A1A" />
|
||||||
|
<image class="edit-icon" src="/static/image/common/edit.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<uni-icons class="right-icon" size="14" color="#1A1A1A" type="right"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="product-info">
|
||||||
|
<view class="image-box" @click="chooseImage">
|
||||||
|
<view v-if="!order.products[0].image" class="w100 h100 flex flex-center"
|
||||||
|
style="background-color: #eeeeee;">
|
||||||
|
<image style="width: 60rpx;height: 60rpx;" src="/static/image/common/add.png"></image>
|
||||||
|
</view>
|
||||||
|
<image v-else class="w100 h100" :src="order.products[0].image"></image>
|
||||||
|
</view>
|
||||||
|
<view class="info-box">
|
||||||
|
<view class="name flex animate-scale">
|
||||||
|
<auto-width-input class="name" v-model="order.products[0].title" fontSize="26rpx"
|
||||||
|
fontWeight="700" placeholder="商品标题名称" color="#1A1A1A" />
|
||||||
|
<image class="edit-icon" src="/static/image/common/edit.png"></image>
|
||||||
|
</view>
|
||||||
|
<view class="flex flex-align-center animate-scale">
|
||||||
|
<auto-width-input class="desc" v-model="order.products[0].desc" type="textarea" fontSize="22rpx"
|
||||||
|
placeholder="商品描述" color="#87868E" />
|
||||||
|
<image class="edit-icon" src="/static/image/common/edit.png"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex flex-align-center animate-scale">
|
||||||
|
<auto-width-input class="desc" v-model="order.products[0].service" type="textarea"
|
||||||
|
fontSize="22rpx" placeholder="请输入服务" color="#A96F24" />
|
||||||
|
<image class="edit-icon" src="/static/image/common/edit.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="price-box">
|
||||||
|
<view class="price wx-font-medium flex-align-center animate-scale">¥<text
|
||||||
|
style="font-size: 36rpx;">{{ order.totalPrice }}</text>
|
||||||
|
<!-- <auto-width-input style="min-width: 20px;" class="price" v-model="order.products[0].price"
|
||||||
|
type="number" fontSize="36rpx" placeholder="价格" color="#1A1A1A" fontWeight="500" />
|
||||||
|
<image class="edit-icon" style="margin-left: 0;" src="/static/image/common/edit.png"></image> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="activeTab == 'dengdaifukuan' || activeTab == 'yiquxiao'" class="btn-box flex"
|
||||||
|
style="margin-top: 60rpx;">
|
||||||
|
<view class="left flex-1 flex-center " style="border-right : 1rpx solid #D8D8D8;">
|
||||||
|
<image class="img" src="/static/image/shopping/jingdong/detail/dianpukefu.png"></image>
|
||||||
|
<view class="name flex-column flex-align-center">
|
||||||
|
<text>店铺客服</text>
|
||||||
|
<text v-if="activeTab == 'dengdaifukuan'" class="text">商品/活动</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="right flex-1 flex-center ">
|
||||||
|
<image class="img" src="/static/image/shopping/jingdong/detail/jingdongkefu.png"></image>
|
||||||
|
<view class="name flex-column flex-align-center">
|
||||||
|
<text>京东客服</text>
|
||||||
|
<text v-if="activeTab == 'dengdaifukuan'" class="text">物流/平台</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="btn-box">
|
||||||
|
<view class="btn" :class="{ red: btn == '送朋友' }" v-for="btn in btnList">
|
||||||
|
<image v-if="btn == '送朋友'" class="icon" src="/static/image/shopping/jingdong/detail/gift.png">
|
||||||
|
</image>
|
||||||
|
{{ btn }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品总价 -->
|
||||||
|
<view v-if="activeTab == 'dengdaifukuan' || activeTab == 'yiquxiao'" class="product-price">
|
||||||
|
<view class="title flex-justify-between">
|
||||||
|
<text>商品总价</text>
|
||||||
|
<view class="wx-font-medium flex flex-align-center"><text
|
||||||
|
style="font-size: 32rpx;font-weight: 500;">¥</text>
|
||||||
|
<auto-width-input class="wx-font-medium" v-model="order.totalPrice" fontSize="32rpx"
|
||||||
|
placeholder="商品总价" color="#1A1A1A" fontWeight="500" type="number" />
|
||||||
|
<image class="edit-icon" src="/static/image/common/edit.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item flex-justify-between">
|
||||||
|
<text class="label">运费</text>
|
||||||
|
<view class="wx-font-medium flex flex-align-center">¥
|
||||||
|
<auto-width-input class="wx-font-medium" v-model="order.carriage" fontSize="32rpx" placeholder="运费"
|
||||||
|
color="#1A1A1A" fontWeight="500" type="number" />
|
||||||
|
<image class="edit-icon" src="/static/image/common/edit.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="price">需付款 <text class="number wx-font-medium">¥{{ (Number(order.totalPrice) +
|
||||||
|
Number(order.carriage))
|
||||||
|
}}</text></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onLoad } from "@dcloudio/uni-app";
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
import { ref } from "vue";
|
import { ref, computed } from "vue";
|
||||||
|
|
||||||
import { shoppingType } from "../json/order.json"
|
import { shoppingType, shoppingClassfiy } from "../json/order.json";
|
||||||
|
import AutoWidthInput from "@/components/common/auto-width-input.vue";
|
||||||
|
|
||||||
const activeTab = ref("dengdaifukuan");
|
const activeTab = ref("dengdaifukuan");
|
||||||
const navTitle = ref("新增订单");
|
const navTitle = ref("新增订单");
|
||||||
|
const order = ref(shoppingClassfiy[activeTab.value]);
|
||||||
|
|
||||||
|
// 初始化默认地址信息,防止渲染时为空
|
||||||
|
if (order.value) {
|
||||||
|
order.value.consignee = order.value.consignee || "肖战";
|
||||||
|
order.value.phone = order.value.phone || "152633221112";
|
||||||
|
order.value.fullAddress = order.value.fullAddress || "上海市浦东新区世纪大道123号";
|
||||||
|
}
|
||||||
|
|
||||||
|
// 时间选择器数据
|
||||||
|
const timeRange = ref([
|
||||||
|
Array.from({ length: 24 }, (_, i) => (i < 10 ? '0' + i : i + '')), // 时
|
||||||
|
Array.from({ length: 60 }, (_, i) => (i < 10 ? '0' + i : i + '')), // 分
|
||||||
|
Array.from({ length: 60 }, (_, i) => (i < 10 ? '0' + i : i + '')) // 秒
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 当前选择器索引
|
||||||
|
const timeValue = computed(() => {
|
||||||
|
if (!order.value || !order.value.statusDesc) return [0, 0, 0];
|
||||||
|
const parts = order.value.statusDesc.split(' : ');
|
||||||
|
if (parts.length !== 3) return [0, 0, 0];
|
||||||
|
return [
|
||||||
|
parseInt(parts[0]) || 0,
|
||||||
|
parseInt(parts[1]) || 0,
|
||||||
|
parseInt(parts[2]) || 0
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改倒计时时间
|
||||||
|
*/
|
||||||
|
const handleTimeChange = (e) => {
|
||||||
|
const val = e.detail.value;
|
||||||
|
const h = timeRange.value[0][val[0]];
|
||||||
|
const m = timeRange.value[1][val[1]];
|
||||||
|
const s = timeRange.value[2][val[2]];
|
||||||
|
order.value.statusDesc = `${h} : ${m} : ${s}`;
|
||||||
|
};
|
||||||
|
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择图片
|
||||||
|
*/
|
||||||
|
const chooseImage = () => {
|
||||||
|
uni.chooseImage({
|
||||||
|
count: 1,
|
||||||
|
sizeType: ['original', 'compressed'],
|
||||||
|
sourceType: ['album', 'camera'],
|
||||||
|
success: (res) => {
|
||||||
|
order.value.products[0].image = res.tempFilePaths[0];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换tab
|
||||||
|
* @param item
|
||||||
|
*/
|
||||||
const switchTab = (item) => {
|
const switchTab = (item) => {
|
||||||
activeTab.value = item.key;
|
activeTab.value = item.key;
|
||||||
|
order.value = shoppingClassfiy[activeTab.value];
|
||||||
|
if (order.value) {
|
||||||
|
order.value.consignee = order.value.consignee || "肖战";
|
||||||
|
order.value.phone = order.value.phone || "152633221112";
|
||||||
|
order.value.fullAddress = order.value.fullAddress || "上海市浦东新区世纪大道123号";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less" scoped>
|
||||||
.tab-box {
|
.tab-box {
|
||||||
padding: 22rpx 24rpx;
|
padding: 22rpx 24rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -58,4 +365,623 @@ const switchTab = (item) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.wait-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-box {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-box {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx 22rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
margin: 0 16rpx;
|
||||||
|
|
||||||
|
.location {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
margin-right: 14rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-box,
|
||||||
|
.number-box {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #8C8C8C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address {
|
||||||
|
color: #8C8C8C;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-btn {
|
||||||
|
|
||||||
|
height: 54rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border: 1rpx solid #C5C5C5;
|
||||||
|
padding: 0 52rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 52rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
margin-left: 28rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.outbound-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
margin: 10rpx 16rpx;
|
||||||
|
padding: 22rpx 22rpx 30rpx;
|
||||||
|
|
||||||
|
.outbound-icon {
|
||||||
|
width: 46rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outbound-info-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.title-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 46rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1A1A1A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
margin-top: 4rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #8C8C8C;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-box {
|
||||||
|
margin-top: 18rpx;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.edit-btn {
|
||||||
|
width: 116rpx;
|
||||||
|
height: 54rpx;
|
||||||
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||||
|
border: 1rpx solid #C5C5C5;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.address {
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #8C8C8C;
|
||||||
|
line-height: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-progress-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
margin: 10rpx 16rpx;
|
||||||
|
padding: 26rpx 22rpx 30rpx;
|
||||||
|
|
||||||
|
.cancel-icon {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-content {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.title-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 46rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1A1A1A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
margin-top: 4rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #8C8C8C;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status-box {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
margin: 16rpx;
|
||||||
|
padding: 22rpx 22rpx 30rpx;
|
||||||
|
|
||||||
|
.status-main {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.status-icon {
|
||||||
|
width: 46rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-content {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.title-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #E40C24;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
margin-top: 4rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #8C8C8C;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-box {
|
||||||
|
margin-left: 22rpx;
|
||||||
|
border-left: 0.5px solid #F83021;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
padding-left: 40rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #8C8C8C;
|
||||||
|
height: 62rpx;
|
||||||
|
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #8C8C8C;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #F7F8FC;
|
||||||
|
margin-top: 18rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 6rpx;
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin-left: 16rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
line-height: 42rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 46rpx;
|
||||||
|
padding: 0 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey {
|
||||||
|
border: 0.5px solid #C5C5C5;
|
||||||
|
color: #1A1A1A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
border: 0.5px solid #ED1C04;
|
||||||
|
color: #ED1C04;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-box {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
background: #CBCEDA;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 14rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #3D3D3D;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-box {
|
||||||
|
display: flex;
|
||||||
|
padding-left: 16rpx;
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 14rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
background: #F83021;
|
||||||
|
opacity: 0.5;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 32rpx;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #8C8C8C;
|
||||||
|
line-height: 26rpx;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-timeline {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding-left: 76rpx;
|
||||||
|
|
||||||
|
.line {
|
||||||
|
position: absolute;
|
||||||
|
left: 29rpx;
|
||||||
|
top: -40rpx;
|
||||||
|
bottom: 30rpx;
|
||||||
|
width: 2rpx;
|
||||||
|
background-color: #F8D3D7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
position: absolute;
|
||||||
|
left: 21rpx;
|
||||||
|
bottom: 40rpx;
|
||||||
|
width: 18rpx;
|
||||||
|
height: 18rpx;
|
||||||
|
background-image: radial-gradient(circle, #F8A7AD 100%, transparent);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.address {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
margin-top: 4rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #8C8C8C;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card {
|
||||||
|
padding: 28rpx 22rpx;
|
||||||
|
margin: 16rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
|
||||||
|
.title-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.left-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
width: 200px;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 26rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.right-icon {
|
||||||
|
margin-left: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 14rpx;
|
||||||
|
|
||||||
|
.image-box {
|
||||||
|
width: 152rpx;
|
||||||
|
height: 152rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 44rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 26rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
margin-top: 16rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #87868E;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #A96F24;
|
||||||
|
margin-top: 18rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-box {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 26rpx;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 144rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 22rpx;
|
||||||
|
line-height: 22rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 58rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border: 1rpx solid #C7C7C7;
|
||||||
|
color: #1A1A1A;
|
||||||
|
margin-left: 22rpx;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
color: #F10F1A;
|
||||||
|
border: 0.5px solid #F10F1A;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 14rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #87868E;
|
||||||
|
line-height: 24rpx;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-price {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 38rpx 22rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
margin: 16rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 32rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-top: 36rpx;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #87868E;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 32rpx;
|
||||||
|
line-height: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 32rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ED1C04;
|
||||||
|
line-height: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
.number {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-left: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
/* 直接在页面导入公共样式 */
|
||||||
|
@import '/common/main.css';
|
||||||
|
|
||||||
|
.edit-icon {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
margin-left: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -5,15 +5,19 @@
|
||||||
"shopType": "self",
|
"shopType": "self",
|
||||||
"shopName": "安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦",
|
"shopName": "安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦",
|
||||||
"status": "等待付款",
|
"status": "等待付款",
|
||||||
"statusDesc": "20小时11分钟",
|
"statusDesc": "18 : 25 : 46",
|
||||||
|
"consignee": "肖战",
|
||||||
|
"phone": "152633221112",
|
||||||
|
"fullAddress": "上海市浦东新区世纪大道123号",
|
||||||
|
"totalPrice": "69.00",
|
||||||
|
"carriage": "0.00",
|
||||||
"products": [
|
"products": [
|
||||||
{
|
{
|
||||||
"image": "/static/image/shopping/jingdong/product1.png",
|
"image": "",
|
||||||
"title": "安野哈哈哈哈哈哈哈哈哈哈哈哈好好",
|
"name": "哈哈哈哈哈",
|
||||||
|
"title": "安野屋(AARYE)红红火火恍恍惚惚哈哈哈哈哈好",
|
||||||
"desc": "联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦",
|
"desc": "联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦",
|
||||||
"tags": [
|
"service": "无理由退货政策",
|
||||||
"无理由退货政策"
|
|
||||||
],
|
|
||||||
"price": "69.00",
|
"price": "69.00",
|
||||||
"count": "1"
|
"count": "1"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="top-fixed">
|
<view class="top-fixed">
|
||||||
<nav-bar title="京东" bgColor="#F0F4F9">
|
<nav-bar title="京东" bgColor="#F0F4F9" :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton">
|
||||||
<template v-slot:center>
|
<template v-slot:center>
|
||||||
<view class="search-box">
|
<view class="search-box">
|
||||||
<image class="search-icon" src="/static/image/shopping/jingdong/search-icon.png" mode="aspectFit">
|
<image class="search-icon" src="/static/image/shopping/jingdong/search-icon.png" mode="aspectFit">
|
||||||
</image>
|
</image>
|
||||||
<input class="input" type="text" placeholder="搜索我的订单" disabled />
|
<input class="input" type="text" placeholder="搜索我的订单" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:right>
|
<template v-slot:right>
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
<view class="action-menu-bubble" :style="{ left: actionMenuState.x + 'px', top: actionMenuState.y + 'px' }"
|
<view class="action-menu-bubble" :style="{ left: actionMenuState.x + 'px', top: actionMenuState.y + 'px' }"
|
||||||
@click.stop>
|
@click.stop>
|
||||||
<view class="menu-item" @click.stop="editOrder">修改</view>
|
<view class="menu-item" @click.stop="editOrder">修改</view>
|
||||||
<view class="bubble-arrow"></view>
|
<view class="menu-line"></view>
|
||||||
<view class="menu-item" @click.stop="handleDeleteOrder">删除</view>
|
<view class="menu-item" @click.stop="handleDeleteOrder">删除</view>
|
||||||
<view class="bubble-arrow"></view>
|
<view class="bubble-arrow"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -79,33 +79,85 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, getCurrentInstance } from 'vue';
|
import { ref, computed, onMounted, getCurrentInstance } from 'vue';
|
||||||
import ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';
|
import ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';
|
||||||
|
import { util } from '@/utils/common.js';
|
||||||
|
|
||||||
const showActionMenu = ref(false);
|
const showActionMenu = ref(false);
|
||||||
const actionMenuState = ref({ x: 0, y: 0, item: null });
|
const actionMenuState = ref({ x: 0, y: 0, item: null });
|
||||||
|
|
||||||
|
//导航栏菜单按钮
|
||||||
|
const buttonGroup = [
|
||||||
|
{
|
||||||
|
name: "新增购物",
|
||||||
|
click: () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shopping/jingdong/add-order/add-order'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
/**
|
||||||
|
* 长按弹出气泡菜单
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
const handleLongPress = (data) => {
|
const handleLongPress = (data) => {
|
||||||
let touch = data.event.touches[0];
|
console.log("长按", data);
|
||||||
if (!touch && data.event.changedTouches) touch = data.event.changedTouches[0];
|
const event = data.event;
|
||||||
if (touch) {
|
let x = 0;
|
||||||
|
let y = 0;
|
||||||
|
|
||||||
|
// 兼容不同平台的坐标获取
|
||||||
|
if (event.touches && event.touches.length > 0) {
|
||||||
|
x = event.touches[0].clientX;
|
||||||
|
y = event.touches[0].clientY;
|
||||||
|
} else if (event.changedTouches && event.changedTouches.length > 0) {
|
||||||
|
x = event.changedTouches[0].clientX;
|
||||||
|
y = event.changedTouches[0].clientY;
|
||||||
|
} else {
|
||||||
|
// 兜底处理 (如模拟器点击或 detail 携带)
|
||||||
|
x = event.clientX || (event.detail && event.detail.x) || 0;
|
||||||
|
y = event.clientY || (event.detail && event.detail.y) || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (x || y) {
|
||||||
actionMenuState.value = {
|
actionMenuState.value = {
|
||||||
x: touch.clientX,
|
x: x,
|
||||||
y: touch.clientY,
|
y: y,
|
||||||
item: data.item
|
item: data.item
|
||||||
};
|
};
|
||||||
showActionMenu.value = true;
|
showActionMenu.value = true;
|
||||||
|
} else {
|
||||||
|
console.warn("无法获取长按坐标");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改订单
|
||||||
|
*/
|
||||||
|
const editOrder = () => {
|
||||||
|
const item = actionMenuState.value.item;
|
||||||
|
if (!item) return;
|
||||||
|
showActionMenu.value = false;
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shopping/jingdong/add-order/add-order?id=' + item.id + '&type=' + item.shopType
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 点击订单卡片
|
||||||
|
* @param item 订单项
|
||||||
|
*/
|
||||||
const handleCardClick = (item) => {
|
const handleCardClick = (item) => {
|
||||||
if (item.shopType !== "waimai") {
|
if (item.shopType !== "waimai") {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/shopping/jingdong/order-detail/order-detail?id=' + item.id
|
url: '/pages/shopping/jingdong/order-detail/order-detail?id=' + item.id
|
||||||
});
|
});
|
||||||
}
|
} else {
|
||||||
|
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 删除订单
|
* 删除订单
|
||||||
*/
|
*/
|
||||||
|
|
@ -229,7 +281,7 @@ const mockOrderList = ref([
|
||||||
image: '/static/image/shopping/jingdong/product1.png',
|
image: '/static/image/shopping/jingdong/product1.png',
|
||||||
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好一人份',
|
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好一人份',
|
||||||
desc: '不支持7天无理由退货',
|
desc: '不支持7天无理由退货',
|
||||||
tags: [],
|
service: "",
|
||||||
price: '69.00',
|
price: '69.00',
|
||||||
count: 1,
|
count: 1,
|
||||||
}
|
}
|
||||||
|
|
@ -250,6 +302,7 @@ const mockOrderList = ref([
|
||||||
image: '/static/image/shopping/jingdong/product1.png',
|
image: '/static/image/shopping/jingdong/product1.png',
|
||||||
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
|
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
|
||||||
desc: '不支持7天无理由退货',
|
desc: '不支持7天无理由退货',
|
||||||
|
service: "",
|
||||||
tags: [],
|
tags: [],
|
||||||
price: '69.00',
|
price: '69.00',
|
||||||
count: 1,
|
count: 1,
|
||||||
|
|
@ -269,6 +322,7 @@ const mockOrderList = ref([
|
||||||
image: '/static/image/shopping/jingdong/product1.png',
|
image: '/static/image/shopping/jingdong/product1.png',
|
||||||
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
|
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
|
||||||
desc: '不支持7天无理由退货',
|
desc: '不支持7天无理由退货',
|
||||||
|
service: "",
|
||||||
tags: [],
|
tags: [],
|
||||||
price: '69.00',
|
price: '69.00',
|
||||||
count: 1,
|
count: 1,
|
||||||
|
|
@ -286,6 +340,7 @@ const mockOrderList = ref([
|
||||||
image: '/static/image/shopping/jingdong/product1.png',
|
image: '/static/image/shopping/jingdong/product1.png',
|
||||||
title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
||||||
desc: '不支持7天无理由退货',
|
desc: '不支持7天无理由退货',
|
||||||
|
service: "",
|
||||||
tags: [],
|
tags: [],
|
||||||
price: '69.00',
|
price: '69.00',
|
||||||
count: 1,
|
count: 1,
|
||||||
|
|
@ -327,6 +382,7 @@ const mockOrderList = ref([
|
||||||
title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
||||||
desc: '不支持7天无理由退货',
|
desc: '不支持7天无理由退货',
|
||||||
tags: [],
|
tags: [],
|
||||||
|
service: "",
|
||||||
price: '69.00',
|
price: '69.00',
|
||||||
count: 1,
|
count: 1,
|
||||||
}
|
}
|
||||||
|
|
@ -344,6 +400,7 @@ const mockOrderList = ref([
|
||||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
tags: ['无理由退货政策'],
|
tags: ['无理由退货政策'],
|
||||||
|
service: "无理由退货政策",
|
||||||
price: '69.00',
|
price: '69.00',
|
||||||
count: 1,
|
count: 1,
|
||||||
}
|
}
|
||||||
|
|
@ -365,6 +422,7 @@ const mockOrderList = ref([
|
||||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
tags: ['无理由退货政策'],
|
tags: ['无理由退货政策'],
|
||||||
|
service: "无理由退货政策",
|
||||||
price: '69.00',
|
price: '69.00',
|
||||||
count: 1,
|
count: 1,
|
||||||
}
|
}
|
||||||
|
|
@ -387,6 +445,7 @@ const mockOrderList = ref([
|
||||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
tags: ['无理由退货政策'],
|
tags: ['无理由退货政策'],
|
||||||
|
service: "无理由退货政策",
|
||||||
price: '69.00',
|
price: '69.00',
|
||||||
count: 1,
|
count: 1,
|
||||||
}
|
}
|
||||||
|
|
@ -407,6 +466,7 @@ const mockOrderList = ref([
|
||||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
tags: ['无理由退货政策'],
|
tags: ['无理由退货政策'],
|
||||||
|
service: "无理由退货政策",
|
||||||
price: '1669.00',
|
price: '1669.00',
|
||||||
count: 1,
|
count: 1,
|
||||||
}
|
}
|
||||||
|
|
@ -425,6 +485,7 @@ const mockOrderList = ref([
|
||||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
tags: ['无理由退货政策'],
|
tags: ['无理由退货政策'],
|
||||||
|
service: "无理由退货政策",
|
||||||
price: '1669.00',
|
price: '1669.00',
|
||||||
count: 1,
|
count: 1,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 4.1 KiB |