完成关于本机
This commit is contained in:
tangxinyue
parent
b46210a235
commit
b7e2889875
|
|
@ -6,7 +6,7 @@
|
|||
<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }">
|
||||
<slot name="statusBar"></slot>
|
||||
</view>
|
||||
<view style="width: 100%;height: 88rpx;" @click="openPopup">
|
||||
<view class="nav-box" style="width: 100%;height: 88rpx;" @click="openPopup">
|
||||
<slot>
|
||||
<uni-nav-bar backgroundColor="#00000000" class="nav-bar" :border="false" :title="title" v-bind="$attrs"
|
||||
v-on="$attrs">
|
||||
|
|
|
|||
|
|
@ -336,6 +336,14 @@
|
|||
"navigationBarTitleText": "证书",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "about-this-iphone/about-this-iphone",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "苹果关于本机",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -293,6 +293,11 @@ const otherList = [{
|
|||
name: "锦旗",
|
||||
path: "/pages/other/silkBanner/silkBanner"
|
||||
},
|
||||
{
|
||||
icon: "/static/image/index/qita/about-iphone.png",
|
||||
name: "关于本机",
|
||||
path: "/pages/other/about-this-iphone/about-this-iphone"
|
||||
},
|
||||
]
|
||||
|
||||
const data = reactive({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,326 @@
|
|||
<template>
|
||||
<view>
|
||||
<nav-bar title="关于本机" bgColor="#F2F1F6">
|
||||
<template v-slot:left>
|
||||
<image class="back-icon" src="/static/image/common/iphone-back.png" style="width: 86rpx;height: 86rpx;"
|
||||
@click="back">
|
||||
</image>
|
||||
</template>
|
||||
</nav-bar>
|
||||
|
||||
<view class="info-container">
|
||||
<block v-for="(group, groupIndex) in listData" :key="groupIndex">
|
||||
<!-- Group Header (Optional) -->
|
||||
<view v-if="group.groupTitle" class="group-header">
|
||||
<text class="header-text">{{ group.groupTitle }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Group Items -->
|
||||
<view class="info-group">
|
||||
<view class="info-item" v-for="(item, itemIndex) in group.items" :key="item.id"
|
||||
:class="{ 'no-border': itemIndex === group.items.length - 1 }"
|
||||
@click="handleEdit(groupIndex, itemIndex)">
|
||||
<text class="item-label">{{ item.label }}</text>
|
||||
<view class="item-value-box">
|
||||
<text class="item-value" v-if="item.value !== undefined">{{ item.value }}</text>
|
||||
<!-- <view class="chevron"></view> -->
|
||||
<image class="chevron" v-if="item.hasArrow"
|
||||
src="/static/image/common/about-iphone-right.png">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- Custom Modal -->
|
||||
<view class="custom-modal-mask" v-if="isModalVisible" @click="closeModal">
|
||||
<view class="custom-modal" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ modalTitle }}</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<input class="modal-input" v-model="modalInputValue" :placeholder="modalPlaceholder"
|
||||
cursor-spacing="20" />
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<view class="modal-btn cancel-btn" @click="closeModal">取消</view>
|
||||
<view class="modal-btn confirm-btn" @click="confirmModal">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { util } from '@/utils/common.js'
|
||||
|
||||
const CACHE_KEY = 'about_iphone_data';
|
||||
|
||||
const defaultData = [
|
||||
{
|
||||
groupTitle: '',
|
||||
items: [
|
||||
{ id: 'name', label: '名称', value: '胡英俊的iPhone', hasArrow: true },
|
||||
{ id: 'iosVersion', label: 'iOS版本', value: '26.4.2', hasArrow: true },
|
||||
{ id: 'modelName', label: '型号名称', value: 'iPhone 17 Pro Max', hasArrow: false },
|
||||
{ id: 'modelNumber', label: '型号', value: 'MG8W4CH/A', hasArrow: false },
|
||||
{ id: 'serialNumber', label: '序列号', value: 'J5YQ2R5F8R', hasArrow: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
groupTitle: '',
|
||||
items: [
|
||||
{ id: 'warranty', label: '有限保修', value: '到期日期：2026/12/13', hasArrow: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
groupTitle: '',
|
||||
items: [
|
||||
{ id: 'songs', label: '歌曲', value: '0', hasArrow: false },
|
||||
{ id: 'videos', label: '视频', value: '456', hasArrow: false },
|
||||
{ id: 'photos', label: '照片', value: '6,568', hasArrow: false },
|
||||
{ id: 'apps', label: '应用程序', value: '64', hasArrow: false },
|
||||
{ id: 'capacity', label: '总容量', value: '2 TB', hasArrow: false },
|
||||
{ id: 'available', label: '可用容量', value: '1.56 TB', hasArrow: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
groupTitle: '',
|
||||
items: [
|
||||
{ id: 'wifi', label: '无线局域网地址', value: '87:5F:4D:48:DF:36', hasArrow: false },
|
||||
{ id: 'bluetooth', label: '蓝牙', value: '87:5F:4D:2B:DF:68', hasArrow: false },
|
||||
{ id: 'firmware', label: '调制解调器固件', value: '1.55.25', hasArrow: false },
|
||||
{ id: 'seid', label: 'SEID', value: '', hasArrow: true },
|
||||
{ id: 'carrierLock', label: '运营商锁', value: '无SIM卡限制', hasArrow: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
groupTitle: '主号',
|
||||
items: [
|
||||
{ id: 'primaryNetwork', label: '网络', value: '中国移动全球通', hasArrow: false },
|
||||
{ id: 'primaryCarrier', label: '运营商', value: '中国移动 69.0', hasArrow: false },
|
||||
{ id: 'primaryIMEI', label: 'IMEI', value: '35 756481 6466451 3', hasArrow: false },
|
||||
{ id: 'primaryICCID', label: 'ICCID', value: '45632144856512347896', hasArrow: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
groupTitle: '个人',
|
||||
items: [
|
||||
{ id: 'personalNetwork', label: '网络', value: '中国电信', hasArrow: false },
|
||||
{ id: 'personalCarrier', label: '运营商', value: '中国电信 69.0', hasArrow: false },
|
||||
{ id: 'personalIMEI', label: 'IMEI', value: '35 756481 6466451 3', hasArrow: false },
|
||||
{ id: 'personalICCID', label: 'ICCID', value: '45632144856512347896', hasArrow: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
groupTitle: '',
|
||||
items: [
|
||||
{ id: 'trustSettings', label: '证书信任设置', value: '', hasArrow: true }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const listData = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
const cached = uni.getStorageSync(CACHE_KEY);
|
||||
if (cached) {
|
||||
try {
|
||||
listData.value = JSON.parse(cached);
|
||||
} catch (e) {
|
||||
listData.value = JSON.parse(JSON.stringify(defaultData));
|
||||
}
|
||||
} else {
|
||||
listData.value = JSON.parse(JSON.stringify(defaultData));
|
||||
}
|
||||
});
|
||||
|
||||
const back = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const isModalVisible = ref(false);
|
||||
const modalTitle = ref('');
|
||||
const modalPlaceholder = ref('');
|
||||
const modalInputValue = ref('');
|
||||
let currentEditGroupIndex = -1;
|
||||
let currentEditItemIndex = -1;
|
||||
|
||||
const handleEdit = (groupIndex, itemIndex) => {
|
||||
const item = listData.value[groupIndex].items[itemIndex];
|
||||
|
||||
currentEditGroupIndex = groupIndex;
|
||||
currentEditItemIndex = itemIndex;
|
||||
modalTitle.value = `修改${item.label}`;
|
||||
modalPlaceholder.value = `请输入新的${item.label}`;
|
||||
modalInputValue.value = item.value || '';
|
||||
isModalVisible.value = true;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
isModalVisible.value = false;
|
||||
};
|
||||
|
||||
const confirmModal = () => {
|
||||
if (currentEditGroupIndex !== -1 && currentEditItemIndex !== -1) {
|
||||
listData.value[currentEditGroupIndex].items[currentEditItemIndex].value = modalInputValue.value;
|
||||
uni.setStorageSync(CACHE_KEY, JSON.stringify(listData.value));
|
||||
}
|
||||
isModalVisible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
::v-deep .nav-box {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
::v-deep .nav-bar-title {
|
||||
font-size: 32rpx !important;
|
||||
}
|
||||
|
||||
::v-deep .uni-navbar__header {
|
||||
height: auto !important;
|
||||
padding: 10rpx 26rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx #E1E1E6;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
padding: 30rpx;
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.info-group {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 48rpx;
|
||||
margin-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
border-bottom: 0.5px solid #E4E4E4;
|
||||
line-height: 32rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.info-item.no-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 32rpx;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.item-value-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 32rpx;
|
||||
color: #8A8A8A;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.group-header {
|
||||
padding: 0 0 10rpx 30rpx;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
font-size: 28rpx;
|
||||
color: #8A8A8D;
|
||||
}
|
||||
|
||||
.custom-modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-modal {
|
||||
width: 600rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 40rpx 30rpx 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 34rpx;
|
||||
color: #1A1A1A;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0 40rpx 40rpx;
|
||||
}
|
||||
|
||||
.modal-input {
|
||||
background-color: #F2F1F6;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
border-top: 0.5px solid #E4E4E4;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
color: #8A8A8A;
|
||||
border-right: 0.5px solid #E4E4E4;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
color: #007AFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page {
|
||||
background-color: #F2F1F6;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view>
|
||||
<view :class="{ 'wait-recv-page-container': order.statusType == 'wait_recv' }">
|
||||
<nav-bar class="nav-bar" title="" :bgColor="order.statusType == 'wait_recv' ? 'transparent' : '#FFFFFF'"
|
||||
:buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton" tipLayerType="jingdong-shopping-list"
|
||||
isTipLayer tipLayerText="添加订单信息">
|
||||
|
|
@ -25,6 +25,43 @@
|
|||
</view>
|
||||
</template>
|
||||
</nav-bar>
|
||||
<view class="map-box">
|
||||
<image style="width: 100%;opacity: 0;" src="/static/image/shopping/taobao/waimai/map1.png" mode="widthFix">
|
||||
</image>
|
||||
<view class="qishou flex-align-center flex-column">
|
||||
<view class="qishou-info">
|
||||
<view class="title">骑手正在按序送货</view>
|
||||
<text class="time">前方剩余<text class="num">2单</text>，约<text>11分钟</text>送达</text>
|
||||
</view>
|
||||
<image style="width: 80rpx;height: 80rpx;" src="/static/image/shopping/taobao/waimai/qishou.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="bottom-box">
|
||||
<view class="tips-box flex-align-center">
|
||||
<image class="icon" src="/static/image/shopping/taobao/waimai/baozhang.png"></image>
|
||||
<text class="text">蜂鸟准时达·超20分钟免单·号...</text>
|
||||
<uni-icons type="right" size="14" color="#8C8C8C"></uni-icons>
|
||||
</view>
|
||||
<view class="dingdanzhushou flex">
|
||||
<image class="icon" src="/static/image/shopping/taobao/waimai/dingdanzhushou.png"></image>
|
||||
<view class="right-box">
|
||||
<view class="flex-align-center">
|
||||
<image src="/static/image/shopping/taobao/waimai/title-text.png"
|
||||
style="height: 34rpx;margin-right: 12rpx;" mode="heightFix">
|
||||
</image>
|
||||
<uni-icons type="right" size="14" color="#1A1A1A"></uni-icons>
|
||||
</view>
|
||||
<view class="flex-align-center bottom">
|
||||
<text>尊敬的用户，骑手正在按顺序送货，请您耐心等待</text>
|
||||
<view class="btn">去看看</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view v-if="order.statusType != 'wait_recv'" class="wait_pay">
|
||||
<view class="flex-align-center">
|
||||
|
|
@ -49,11 +86,16 @@
|
|||
<view v-if="order.statusType != 'closed'" class="flex"
|
||||
style="margin-top: 26rpx;justify-content: flex-start;">
|
||||
<text class="label">送至</text>
|
||||
<view class="flex-1 address-info">
|
||||
<view class="flex-1 address-info" style="max-width: 550rpx;">
|
||||
<text>金星哈哈哈哈哈哈哈和和哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 王总(女士) 12563259856</text>
|
||||
<text class="split"></text>
|
||||
<text class="edit-text">修改</text>
|
||||
<uni-icons type="right" size="12" color="#8C8C8C"></uni-icons>
|
||||
<template v-if="order.statusType != 'success'">
|
||||
<text class="split"></text>
|
||||
<text class="edit-text">修改</text>
|
||||
<uni-icons type="right" size="12" color="#8C8C8C"></uni-icons>
|
||||
</template>
|
||||
</view>
|
||||
<view class="delivery-photo" v-if="order.statusType == 'success'">
|
||||
<image style="width: 80rpx;height: 80rpx;" src=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="order.statusType == 'wait_recv'" class="flex"
|
||||
|
|
@ -94,7 +136,137 @@
|
|||
</view>
|
||||
|
||||
</view>
|
||||
<view v-if="order.statusType == 'wait_recv' || order.statusType == 'success'" class="banner-box">
|
||||
<image style="width: 100%;" src="/static/image/shopping/taobao/waimai/banner.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="product-info-box">
|
||||
<!-- 订单详情卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="shop-title-box">
|
||||
<image style="width: 56rpx; height: 26rpx; margin-right: 10rpx;"
|
||||
src="/static/image/shopping/taobao/waimai/shangou.png"></image>
|
||||
<text class="shop-name">{{ orderData.shopName }}</text>
|
||||
<uni-icons type="right" size="16" color="#8C8C8C"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="goods-collapsed flex-between" v-if="!orderData.isExpanded"
|
||||
@click="orderData.isExpanded = true">
|
||||
<view class="images flex flex-1" style="overflow: hidden;">
|
||||
<image v-for="(item, index) in orderData.goodsList.slice(0, 4)" :key="index" class="img"
|
||||
:src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="count">共{{ orderData.goodsList.length }}件</view>
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<view class="goods-item flex" v-for="(item, index) in orderData.goodsList" :key="index">
|
||||
<view class="goods-img-box">
|
||||
<image class="goods-img" :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="goods-middle flex-1 flex-column">
|
||||
<text class="title">{{ item.title }}</text>
|
||||
<text class="spec" v-if="item.spec">{{ item.spec }}</text>
|
||||
<text class="count">x {{ item.count }}</text>
|
||||
</view>
|
||||
<view class="goods-right flex-column flex-align-end">
|
||||
<view class="actual-price"><text class="label">实付</text><text
|
||||
class="symbol wx-font-medium">￥</text><text class="num wx-font-medium">{{
|
||||
item.actualPrice }}</text></view>
|
||||
<text class="ori-price wx-font-regular" v-if="item.oriPrice">￥{{ item.oriPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fee-item flex-between" v-for="(fee, index) in orderData.fees" :key="'fee-' + index">
|
||||
<view class="fee-left flex-align-center">
|
||||
<text>{{ fee.name }}</text>
|
||||
<uni-icons v-if="fee.showQuestion" type="help" size="16" color="#C6C6C6"
|
||||
style="margin-left: 8rpx;"></uni-icons>
|
||||
</view>
|
||||
<view class="fee-right flex-column flex-align-end">
|
||||
<view class="actual-price"><text class="label">实付</text><text
|
||||
class="symbol wx-font-medium">￥</text><text class="num wx-font-medium">{{
|
||||
fee.actualPrice }}</text></view>
|
||||
<text class="ori-price wx-font-regular" v-if="fee.oriPrice">￥{{ fee.oriPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fee-item flex-between" style="align-items: center;"
|
||||
v-for="(comp, index) in orderData.compensations" :key="'comp-' + index">
|
||||
<view class="fee-left flex-align-center">
|
||||
<text>{{ comp.name }}</text>
|
||||
<uni-icons v-if="comp.showQuestion" type="help" size="16" color="#C6C6C6"
|
||||
style="margin-left: 6rpx;"></uni-icons>
|
||||
</view>
|
||||
<view class="fee-right">
|
||||
<text :class="comp.isRed ? 'red-text' : ''">{{ comp.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="price-detail-title flex-between" @click="orderData.isExpanded = !orderData.isExpanded"
|
||||
:style="!orderData.isExpanded ? 'margin-bottom: 30rpx;' : ''">
|
||||
<view class="left flex-align-center">
|
||||
<text>价格明细</text>
|
||||
<uni-icons :type="orderData.isExpanded ? 'up' : 'down'" size="14" color="#8C8C8C"
|
||||
style="margin-left: 6rpx;"></uni-icons>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="total-discount">总优惠
|
||||
<text class="symbol wx-font-medium">￥
|
||||
<text style="font-size: 34rpx;">{{ orderData.priceDetail.totalDiscount }}</text>
|
||||
</text></text>
|
||||
<text class="total-actual">实付<text class="symbol wx-font-medium">￥</text><text
|
||||
class="num wx-font-medium">{{
|
||||
orderData.priceDetail.actualPay }}</text></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="price-detail-list" v-if="orderData.isExpanded">
|
||||
<view class="detail-item flex-between" v-for="(detail, index) in orderData.priceDetail.details"
|
||||
:key="'detail-' + index">
|
||||
<text class="label">{{ detail.name }}</text>
|
||||
<text class="val alipay-font" :class="{ 'bold-val': detail.isBold, 'red-val': detail.isRed }">{{
|
||||
detail.value
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="divider-line"></view>
|
||||
|
||||
<view class="order-info-area">
|
||||
<view class="order-item flex" v-for="(info, index) in orderData.orderInfo" :key="'info-' + index"
|
||||
:style="info.label === '收货信息' ? 'align-items: flex-start;' : ''">
|
||||
<text class="label" :style="info.label === '收货信息' ? 'line-height:36rpx;' : ''">{{ info.label
|
||||
}}</text>
|
||||
<view class="val flex-1 flex-align-center" style="justify-content: flex-end;">
|
||||
<text :style="info.label === '收货信息' ? 'text-align: right;line-height:36rpx;' : ''">{{ info.value
|
||||
}}</text>
|
||||
<template v-if="info.hasModify">
|
||||
<text class="split" style="margin-left: 8rpx; margin-right: 8rpx;">|</text>
|
||||
<text class="copy-btn">修改</text>
|
||||
</template>
|
||||
<template v-if="info.hasSetting">
|
||||
<text class="split" style="margin-left: 8rpx; margin-right: 8rpx;">|</text>
|
||||
<text class="copy-btn">设置</text>
|
||||
</template>
|
||||
<template v-if="info.hasArrow">
|
||||
<uni-icons type="right" size="12" color="#7C8495"></uni-icons>
|
||||
</template>
|
||||
<template v-if="info.hasCopy">
|
||||
<text class="split" style="margin-left: 8rpx; margin-right: 8rpx;">|</text>
|
||||
<text class="copy-btn">复制</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-bottom-title flex-align-center">
|
||||
<text>订单信息</text>
|
||||
<uni-icons type="down" size="14" color="#7C8495"
|
||||
style="margin-left: 8rpx;margin-top: 6rpx;"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -102,7 +274,69 @@
|
|||
import { ref, reactive } from 'vue';
|
||||
import { util } from '@/utils/common.js';
|
||||
const order = ref({
|
||||
statusType: "wait_pay"
|
||||
statusType: "wait_recv"
|
||||
})
|
||||
|
||||
const orderData = ref({
|
||||
isExpanded: false,
|
||||
shopName: '沙县小吃(光电园总店)',
|
||||
goodsList: [
|
||||
{
|
||||
image: '/static/image/shopping/taobao/waimai/leifan.png',
|
||||
title: '好吃的蒜蓉剁椒 （限1份，多点 无效）',
|
||||
count: 1,
|
||||
actualPrice: '0.06',
|
||||
oriPrice: '2',
|
||||
tag: '折'
|
||||
},
|
||||
{
|
||||
image: '/static/image/shopping/taobao/waimai/leifan.png',
|
||||
title: '~福利鸡腿~',
|
||||
count: 1,
|
||||
actualPrice: '4.5',
|
||||
oriPrice: '9.99',
|
||||
tag: '折'
|
||||
},
|
||||
{
|
||||
image: '/static/image/shopping/taobao/waimai/leifan.png',
|
||||
title: '【减脂】五香鸡腿饭 （2份时蔬+卤蛋+豆干）',
|
||||
count: 1,
|
||||
actualPrice: '14.92',
|
||||
oriPrice: '28',
|
||||
tag: '折'
|
||||
}
|
||||
],
|
||||
fees: [
|
||||
{ name: '打包费', showQuestion: true, actualPrice: '1.3', oriPrice: '2' },
|
||||
{ name: '配送费', showQuestion: false, actualPrice: '0', oriPrice: '3.4' },
|
||||
],
|
||||
compensations: [
|
||||
{ name: '超20分钟免单', showQuestion: true, value: '商家赠送', isRed: true },
|
||||
{ name: '满返红包', showQuestion: false, value: '满返￥2商家红包', isRed: true }
|
||||
],
|
||||
priceDetail: {
|
||||
totalDiscount: '24.61',
|
||||
actualPay: '20.78',
|
||||
details: [
|
||||
{ name: '总价', value: '￥45.39', isBold: true },
|
||||
{ name: '商品优惠', value: '-￥10.21', isRed: true },
|
||||
{ name: '配送费优惠', value: '-￥3.4', isRed: true },
|
||||
{ name: '红包/抵用券', value: '-￥9.0', isRed: true },
|
||||
{ name: '店铺活动/券(沙县小吃(光电园总店)专享券)', value: '-￥2.0', isRed: true }
|
||||
]
|
||||
},
|
||||
orderInfo: [
|
||||
{ label: '收货信息', value: '金星科技大厦A区金星科技大厦A区低楼4楼3A08 八条科技 罗婷(女士) 18725982563', hasModify: true },
|
||||
{ label: '联系不上时', value: '可设置暂存点放置外卖', hasSetting: true },
|
||||
{ label: '备注', value: '1份餐具' },
|
||||
{ label: '发票', value: '未添加开票信息', hasArrow: true },
|
||||
{ label: '配送方式', value: '蜂鸟准时达', hasArrow: true },
|
||||
{ label: '配送骑士', value: '赵乃炼', hasArrow: true },
|
||||
{ label: '订单号', value: '8034160313365695921', hasCopy: true },
|
||||
{ label: '送达时间', value: '03-31(周二)11:41-11:56' },
|
||||
{ label: '下单时间', value: '2026-03-31 11:11:55.220' },
|
||||
{ label: '支付方式', value: '支付宝免密支付' }
|
||||
]
|
||||
})
|
||||
|
||||
const items = [
|
||||
|
|
@ -175,6 +409,12 @@ const items = [
|
|||
padding-left: 34rpx;
|
||||
}
|
||||
|
||||
.wait-recv-page-container {
|
||||
::v-deep .placeholder-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
background-color: #ffffff;
|
||||
|
||||
|
|
@ -229,6 +469,112 @@ const items = [
|
|||
}
|
||||
}
|
||||
|
||||
.map-box {
|
||||
position: relative;
|
||||
background-image: url('/static/image/shopping/taobao/waimai/map1.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.qishou {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.qishou-info {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
color: #1A1A1A;
|
||||
line-height: 26rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #7B7E8C;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 16rpx;
|
||||
|
||||
.tips-box {
|
||||
display: inline-flex;
|
||||
background-color: #ffffff;
|
||||
height: 60rpx;
|
||||
width: auto;
|
||||
padding: 0 16rpx;
|
||||
border-radius: 30rpx;
|
||||
|
||||
.icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
color: #7B7E8C;
|
||||
line-height: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dingdanzhushou {
|
||||
margin-top: 16rpx;
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 0;
|
||||
|
||||
|
||||
.icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.bottom {
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #1A1A1A;
|
||||
line-height: 40rpx;
|
||||
margin-right: 70rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex-shrink: 0;
|
||||
padding: 0 32rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
background-color: #FB6504;
|
||||
color: #ffffff;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wait_pay {
|
||||
padding: 32rpx 16rpx;
|
||||
padding-bottom: 18rpx;
|
||||
|
|
@ -305,10 +651,30 @@ const items = [
|
|||
}
|
||||
}
|
||||
|
||||
.delivery-photo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
background-color: #F0F0F0;
|
||||
|
||||
&::before {
|
||||
content: '+1';
|
||||
background-color: #000000;
|
||||
opacity: 0.5;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 20rpx;
|
||||
padding: 6rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wait_pay-buttom {
|
||||
padding: 0 32rpx;
|
||||
padding-top: 42rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
.button {
|
||||
|
|
@ -332,6 +698,12 @@ const items = [
|
|||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
justify-content: space-around;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -363,9 +735,311 @@ const items = [
|
|||
|
||||
}
|
||||
|
||||
.banner-box {
|
||||
width: 100%;
|
||||
padding: 16rpx 0 0;
|
||||
}
|
||||
|
||||
.orange {
|
||||
color: #FE6306 !important;
|
||||
}
|
||||
|
||||
.product-info-box {
|
||||
background-color: transparent;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background-color: #FFFFFF;
|
||||
padding: 24rpx 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.shop-title-box {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.tag {
|
||||
background-color: #FE6306;
|
||||
color: #FFFFFF;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 6rpx;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 12rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
margin-right: 6rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-collapsed {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.images {
|
||||
.img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
background-color: #F5F5F5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 24rpx;
|
||||
color: #7C8495;
|
||||
flex-shrink: 0;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
margin-bottom: 40rpx;
|
||||
align-items: flex-start;
|
||||
|
||||
.goods-img-box {
|
||||
position: relative;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
.goods-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-middle {
|
||||
margin-right: 32rpx;
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
color: #1A1A1A;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.spec {
|
||||
font-size: 24rpx;
|
||||
color: #7C8495;
|
||||
line-height: 36rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 24rpx;
|
||||
color: #7C8495;
|
||||
line-height: 26rpx;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-right {
|
||||
.actual-price {
|
||||
color: #1A1A1A;
|
||||
line-height: 24rpx;
|
||||
margin-top: 4rpx;
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.ori-price {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
color: #7C8495;
|
||||
margin-top: 10rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fee-item {
|
||||
margin-bottom: 32rpx;
|
||||
line-height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
align-items: flex-start;
|
||||
|
||||
.fee-left {
|
||||
font-size: 26rpx;
|
||||
color: #7C8495;
|
||||
}
|
||||
|
||||
.fee-right {
|
||||
.actual-price {
|
||||
color: #1A1A1A;
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.ori-price {
|
||||
font-size: 24rpx;
|
||||
color: #7C8495;
|
||||
margin-top: 10rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
font-size: 26rpx;
|
||||
color: #F83D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-detail-title {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 24rpx;
|
||||
line-height: 30rpx;
|
||||
|
||||
.left {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.right {
|
||||
align-items: baseline;
|
||||
|
||||
.total-discount {
|
||||
font-size: 24rpx;
|
||||
color: #FF2020;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.symbol {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.total-actual {
|
||||
font-size: 24rpx;
|
||||
color: #1A1A1A;
|
||||
|
||||
.symbol {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-detail-list {
|
||||
background-color: #F1F5F8;
|
||||
border-radius: 12rpx;
|
||||
padding: 30rpx 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.detail-item {
|
||||
margin-bottom: 36rpx;
|
||||
line-height: 26rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #7C8495;
|
||||
}
|
||||
|
||||
.val {
|
||||
font-size: 32rpx;
|
||||
color: #1A1A1A;
|
||||
|
||||
&.red-val {
|
||||
color: #F83D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
height: 1rpx;
|
||||
background-color: #D8D8D8;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.order-info-area {
|
||||
.order-item {
|
||||
margin-bottom: 36rpx;
|
||||
line-height: 26rpx;
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #7C8495;
|
||||
width: 140rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.val {
|
||||
font-size: 24rpx;
|
||||
line-height: 26rpx;
|
||||
color: #1A1A1A;
|
||||
word-break: break-all;
|
||||
|
||||
&.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.split {
|
||||
color: #D8D8D8;
|
||||
font-size: 18rpx;
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
color: #7C8495;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-bottom-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@import "/common/main.css";
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 326 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Loading…
Reference in New Issue