230 lines
6.8 KiB
Vue
230 lines
6.8 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="orderData">
|
|
<view class="While">
|
|
<view class="orderData-cont-label">
|
|
<image class="orderData-cont-img" src="/static/icon/orderIcon_01.png" mode="aspectFill"></image>
|
|
<view class="orderData-cont-text">
|
|
<view class="orderData-cont-name">订单编号</view>
|
|
<view class="orderData-cont-copy">
|
|
<text class="nowrap">57843657846357834</text>
|
|
<view bindtap="copyUrl">复制</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="orderData-cont-label">
|
|
<image class="orderData-cont-img" src="/static/icon/orderIcon_00.png" mode="aspectFill"></image>
|
|
<view class="orderData-cont-text">
|
|
<view class="orderData-cont-name">慢慢悠 <text>1800000000</text></view>
|
|
<view class="orderData-cont-copy">
|
|
汗水里156高
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="While reserveCont">
|
|
<view class="reserveCont-title">订单信息</view>
|
|
<view class="reserve-label">
|
|
<view class="reserve-name">商品</view>
|
|
<view class="reserve-text">乐心血压仪</view>
|
|
</view>
|
|
<view class="reserve-label">
|
|
<view class="reserve-name">金额</view>
|
|
<view class="reserve-text reserve-red">￥399</view>
|
|
</view>
|
|
<view class="reserve-label">
|
|
<view class="reserve-name">交易时间</view>
|
|
<view class="reserve-text">2022-09-23 15:00</view>
|
|
</view>
|
|
<view class="reserve-label">
|
|
<view class="reserve-name">运费金额</view>
|
|
<view class="reserve-text">免邮</view>
|
|
</view>
|
|
<view class="reserve-label">
|
|
<view class="reserve-name">交易状态</view>
|
|
<view class="reserve-text green">待发货</view>
|
|
</view>
|
|
</view>
|
|
<view class="While reserveCont">
|
|
<view class="reserveCont-title">物流信息</view>
|
|
<view class="reserve-label">
|
|
<view class="reserve-name">物流公司</view>
|
|
<view class="reserve-text">顺丰速递</view>
|
|
</view>
|
|
<view class="reserve-label">
|
|
<view class="reserve-name">收货姓名</view>
|
|
<view class="reserve-text green">慢悠悠</view>
|
|
</view>
|
|
<view class="reserve-label">
|
|
<view class="reserve-name">收货电话</view>
|
|
<view class="reserve-text green">15000000000</view>
|
|
</view>
|
|
<view class="reserve-label">
|
|
<view class="reserve-name">物流单号</view>
|
|
<view class="reserve-text">6546546546546<view class="reserve-copy" bindtap="copyUrl">复制</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="order-data-footer">
|
|
<navigator hover-class="none" class="order-btn" open-type="navigateBack">返回订单</navigator>
|
|
<view class="order-btn" bindtap="signClick">签收订单</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { } from '@/apis/interfaces/draw'
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
onShow() {
|
|
// 存储环境-用户抽奖活动
|
|
getApp().globalData.envType = 'drawEnv'
|
|
},
|
|
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.orderData {
|
|
border-bottom: 70rpx transparent solid;
|
|
}
|
|
|
|
.While {
|
|
border-radius: 10rpx;
|
|
margin-bottom: 30rpx;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
|
|
}
|
|
|
|
/* 订单 */
|
|
.orderData-cont-label {
|
|
padding: 40rpx 30rpx;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
border-bottom: #f2f2f2 2rpx solid;
|
|
.orderData-cont-img {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.orderData-cont-text {
|
|
width: calc(100% - 68rpx);
|
|
margin-left: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.orderData-cont-name {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.orderData-cont-name text {
|
|
color: #999;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.orderData-cont-copy {
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.orderData-cont-copy text {
|
|
flex: 1;
|
|
display: inline-block;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.orderData-cont-copy view {
|
|
color: #e31828;
|
|
}
|
|
}
|
|
|
|
/* 规格 */
|
|
.reserveCont-title {
|
|
font-weight: 600;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.reserve-label {
|
|
display: flex;
|
|
padding: 0 30rpx 30rpx;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.reserve-name {
|
|
flex: 1;
|
|
width: 200rpx;
|
|
margin-right: 20rpx;
|
|
color: #7e7e7e;
|
|
}
|
|
|
|
.reserve-text {
|
|
width: calc(100% - 240rpx);
|
|
text-align: right;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.reserve-copy {
|
|
color: #fa8524;
|
|
border: #fa8524 2rpx solid;
|
|
display: inline-block;
|
|
height: 34rpx;
|
|
line-height: 34rpx;
|
|
font-size: 26rpx;
|
|
padding: 0 10rpx;
|
|
border-radius: 4rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.reserve-red {
|
|
font-weight: 600;
|
|
color: #e31828;
|
|
}
|
|
|
|
/* 底部菜单 */
|
|
.order-data-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-top: solid 1rpx #f2f2f2;
|
|
padding-top: 17rpx;
|
|
padding-right: 30rpx;
|
|
padding-left: 30rpx;
|
|
height: 83rpx;
|
|
background: white;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row-reverse;
|
|
z-index: 9;
|
|
}
|
|
|
|
.order-btn {
|
|
margin-left: 20rpx;
|
|
height: 58rpx;
|
|
line-height: 58rpx;
|
|
box-sizing: border-box;
|
|
border: solid 1rpx #747788;
|
|
padding: 0 20rpx;
|
|
font-size: 26rpx;
|
|
border-radius: 10rpx;
|
|
margin-top: 5rpx;
|
|
}
|
|
</style>
|