wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 Commits
6 Branches
0 Tags
16 MiB
 
 
 
 
 
 
Tag: Branch: Tree: 775dc191c8
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '775dc191c8'
${ noResults }
yanzong_qianduan/pages/order/detail.vue

982 lines
19 KiB
Raw Blame History

<template>
<view class="detail">
<view >
<u-navbar title="订单详情" back-icon-color="#fff" :border-bottom="false" title-color="#333" :background="background"></u-navbar>
</view>
<view class="send">
<image src="/static/order/car.png" mode="" class="car"></image>
<view class="sendInfo">
<view class="shopInfo">
<text v-if="sendType">商家已接单，正在安排出库</text>
<text v-if="!sendType">商家已发货，正在通知快递取件</text>
</view>
<view class="sendTime">
2023-12-19 16:10:58
</view>
</view>
<image src="/static/order/left.png" mode="" class="sendIcon"></image>
</view>
<view class="consignee">
<view class="conLeft">
<view class="thr">
<view class="peo">提货人</view>
<view class="name">AGGI</view>
</view>
<view class="thr">
<view class="peo">手机号</view>
<view class="name">1868888888</view>
</view>
<view class="thr">
<view class="peo">预计到店时间</view>
<view class="name">2023-12-20 09:15</view>
</view>
</view>
<view class="conRight" @click="openCode">
<view class="code">
核销码
</view>
<view class="codeNum">
<image src="/static/user/code.png" mode=""></image>
</view>
<view class="openCode">
点击放大核销码
</view>
</view>
</view>
<view class="sendHome">
<view class="fline">
<view class="leftInfo">
<image src="/static/order/am.png" mode="" class="am"></image>
<view class="gp">
<text>张三</text>
18655555555
</view>
</view>
<view class="up">
修改
</view>
</view>
<view class="sl">
浙江省金华市金东区人民西路31号新苑小区25幢
</view>
<view class="fline">
<view class="leftInfo">
<image src="/static/order/cd.png" mode="" class="am"></image>
<view class="gp">
<text>收货方式：</text>
送货上门
</view>
</view>
<view class="up">
我要催单
</view>
</view>
</view>
<view class="goodsDetail">
<view class="goodsType">
<image src="/static/order/bag.png" mode="" class="bag"></image>
<text>大白兔家电</text>
<image src="/static/order/left.png" mode="" class="leftIcon"></image>
</view>
<view class="goods">
<view class="goodsImg">
<image src="/static/home/goodsDemo.png" mode=""></image>
</view>
<view class="goodsInfo">
<view class="goodsName">
iphone13 绿色 128GB
</view>
<view class="goodsPrice">
￥ <text>7599</text>
</view>
</view>
<view class="goodsNum">
x1
</view>
</view>
<view class="serve">
<view class="serveTitle">
服务
</view>
<view class="chose">
选择增值服务
<image src="../../static/order/left.png" mode=""></image>
</view>
</view>
<view class="line">
</view>
<view class="cancel">
取消订单
</view>
</view>
<view class="orderTips">
<view class="orderTitle">
<view class="total">
订单编号:
</view>
<view class="price">
2393990490490
</view>
<view class="copy">
复制
</view>
</view>
<view class="orderTitle">
<view class="total">
支付方式：
</view>
<view class="price">
微信支付
</view>
</view>
<view class="orderTitle">
<view class="total">
商品快照：
</view>
<view class="price">
核对交易细节时，可作为判断依据
</view>
<view class="copy">
查看
</view>
</view>
<view class="orderTitle">
<view class="total">
物流公司：
</view>
<view class="price">
到店自提
</view>
</view>
<view class="orderTitle">
<view class="total">
下单时间：
</view>
<view class="price">
2023-12-20 13:09:20
</view>
</view>
<view class="orderTitle">
<view class="total">
支付时间：
</view>
<view class="price">
2023-12-20 13:09:20
</view>
</view>
<view class="orderTitle">
<view class="total">
期待配送时间：
</view>
<view class="price">
2023-12-20 13:09:20
</view>
</view>
<view class="line">
</view>
<view class="amount">
<view class="share">
<image src="/static/order/share.png" mode=""></image>
分享
</view>
<view class="sp">
</view>
<view class="callShop">
<image src="/static/order/share.png" mode=""></image>
联系商家
</view>
</view>
</view>
<view class="pickedUp">
<view class="orderTitle">
<view class="total">
提货状态:
</view>
<view class="price">
已提货
</view>
</view>
<view class="orderTitle">
<view class="total">
提货日期：
</view>
<view class="price">
2023-12-21
</view>
</view>
<view class="orderTitle">
<view class="total">
提货照片：
</view>
<view class="price">
<image src="/static/home/goodsDemo.png" mode="" class="goodsImag"></image>
<image src="/static/home/goodsDemo.png" mode="" class="goodsImag"></image>
</view>
</view>
</view>
<view class="footer">
<view class="meetPrice">
更多
</view>
<view class="fooRight">
<view class="buyAgain">
再次购买
</view>
<view class="btn">
提交订单
</view>
</view>
</view>
<!-- 催单弹框 -->
<view class="dia" v-if="cdDia">
<view class="diaMain">
<image src="/static/order/ld.png" mode="" class="ld"></image>
<view class="cdTitle">
催单成功
</view>
<view class="cdInfo">
商家已收到您的催单提醒，您精心挑选的商品正在配送中，属于正常配送时效内，请您耐心等待，谢谢！
</view>
<view class="iKnow">
我知道了
</view>
</view>
</view>
<view class="bigCode">
<view class="cm">
<view class="cm_text">
核销码
</view>
<view class="txm">
<image src="" mode="" class="codeImg"></image>
</view>
<view class="cline">
<u-line border-style="dashed" color="#D0D0D0" />
</view>
<view class="sm">
可前往门店扫码完成操作
</view>
</view>
</view>
</view>
</template>
<script>
import img from "@/static/home/top.png"
export default {
data() {
return {
background: {
background: 'url('+ img+') center top no-repeat',
backgroundSize: '100% auto',
},
buyType: false,
sendType:false,
cdDia:false,
}
},
methods:{
openCode(){
// 打开核销码
},
}
}
</script>
<style lang="scss" scoped>
.detail {
width: 750rpx;
padding-bottom: 120rpx;
background-image: url('../../static/home/homeback.png');
background-size: 100% 100%;
}
.leftText {
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #F21A1C;
line-height: 28rpx;
}
.address {
margin-left: 26rpx;
background-image: url('../../static/order/map.png');
width: 694rpx;
height: 154rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 52rpx 0 32rpx;
.addAddress {
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F32E2E;
}
.leftImg {
width: 18rpx;
height: 18rpx;
image {
width: 100%;
height: 100%;
}
}
}
.send {
width: 694rpx;
height: 154rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 12rpx 0 0 26rpx;
display: flex;
padding: 32rpx 46rpx 32rpx 38rpx;
.car {
width: 42rpx;
height: 35rpx;
margin-right: 40rpx;
margin-top: 20rpx;
}
.sendInfo {
.shopInfo {
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 40rpx;
}
.sendTime {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #606060;
line-height: 34rpx;
margin-top: 16rpx;
}
}
.sendIcon {
width: 18rpx;
height: 18rpx;
margin: 40rpx 0 0 150rpx;
}
}
.sendHome{
width: 694rpx;
height: 218rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 14rpx 0 0 26rpx;
padding: 18rpx 16rpx 16rpx 34rpx;
.fline{
width: 100%;
display: flex;
justify-content: space-between;
.leftInfo{
display: flex;
}
.am{
width:40rpx;
height: 40rpx;
margin-right: 24rpx;
}
.gp{
height: 28rpx;
font-size: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #838383;
line-height: 28rpx;
text{
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
margin-right: 8rpx;
}
}
.up{
width: 114rpx;
height: 50rpx;
background: #FFFFFF;
border-radius: 88rpx 88rpx 88rpx 88rpx;
opacity: 1;
border: 1rpx solid #D9D9D9;
text-align: center;
line-height: 50rpx;
font-size: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #676767;
}
}
.sl{
width: 474rpx;
height: 68rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #838383;
line-height: 28rpx;
margin-top: 6rpx;
margin-left: 60rpx;
}
}
.consignee {
width: 694rpx;
height: 200rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 12rpx 0 0 26rpx;
display: flex;
justify-content: space-between;
padding: 24rpx 36rpx 6rpx 32rpx;
.conLeft {
.thr {
display: flex;
width: 474rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #838383;
line-height: 34rpx;
margin-bottom: 20rpx;
.peo {
width: 160rpx;
}
.name {
color: #333333;
}
}
}
.conRight {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F21A1C;
display: flex;
flex-direction: column;
align-items: center;
.code {
height: 34rpx;
font-size: 24rpx;
line-height: 34rpx;
margin-bottom: 8rpx;
}
.codeNum {
width: 80rpx;
height:78rpx;
image{
width: 100%;
height: 100%;
}
}
.openCode{
height: 28rpx;
font-size: 20rpx;
font-weight: 400;
color: #848484;
line-height: 23rpx;
margin-top: 4rpx;
}
}
}
.goodsDetail {
width: 694rpx;
height: 400rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 12rpx 0 0 26rpx;
padding: 32rpx 24rpx 24rpx 38rpx;
.goodsType {
display: flex;
align-items: center;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #333333;
.bag {
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
.leftIcon {
width: 18rpx;
height: 18rpx;
margin-left: 20rpx;
}
}
.goods {
display: flex;
align-items: center;
margin-top: 28rpx;
.goodsImg {
width: 162rpx;
height: 148rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
image {
width: 100%;
height: 100%;
}
}
.goodsInfo {
margin-left: 20rpx;
.goodsName {
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
line-height: 40rpx;
margin-bottom: 4rpx;
}
.goodsPrice {
height: 50rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F21A1C;
line-height: 50rpx;
text {
font-size: 36rpx;
}
}
}
.goodsNum {
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #1E1E1E;
margin-left: 100rpx;
}
}
.serve {
display: flex;
justify-content: space-between;
.serveTitle {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
line-height: 34rpx;
}
.chose {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #9E9E9E;
line-height: 34rpx;
image {
width: 18rpx;
height: 18rpx;
}
}
}
.line {
width: 100%;
height: 0rpx;
opacity: 1;
border: 2rpx solid #F4F4F4;
margin: 32rpx 0 20rpx 0;
}
.cancel {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
line-height: 34rpx;
text-align: center;
}
}
.orderTips {
width: 694rpx;
height: 522rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 12rpx 0 0 26rpx;
padding: 22rpx 36rpx 50rpx 24rpx;
.orderTitle {
position: relative;
margin-bottom: 24rpx;
display: flex;
height: 34rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #2D2D2D;
line-height: 34rpx;
.total {
font-size: 24rpx;
color: #7E7E7E;
}
.price {
.couponNum {
font-size: 28rpx;
color: #F42B17;
}
font-size: 28rpx;
image {
width: 18rpx;
height: 18rpx;
margin-left: 18rpx;
}
}
.copy {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #F63016;
line-height: 34rpx;
position: absolute;
right: 0;
}
}
.amount {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 20rpx;
margin-bottom: 30rpx;
.share{
image{
width: 26rpx;
height: 26rpx;
margin-right: 14rpx;
}
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
line-height: 34rpx;
}
.sp{
width: 0rpx;
height: 38rpx;
opacity: 1;
border: 2rpx solid #ECECEC;
}
.callShop{
image{
width: 26rpx;
height: 26rpx;
margin-right: 14rpx;
}
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
line-height: 34rpx;
}
}
}
.line {
width: 100%;
height: 0rpx;
opacity: 1;
border: 2rpx solid #F1F1F1;
}
.pickedUp{
width: 694rpx;
height: 310rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 14rpx 0 0 26rpx;
padding: 32rpx 50rpx 0 42rpx;
.orderTitle {
position: relative;
margin-bottom: 24rpx;
display: flex;
height: 34rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #2D2D2D;
line-height: 34rpx;
.total {
font-size: 24rpx;
color: #7E7E7E;
margin-right: 10rpx;
}
.price {
.couponNum {
font-size: 28rpx;
color: #F42B17;
}
font-size: 28rpx;
image {
width: 18rpx;
height: 18rpx;
margin-left: 18rpx;
}
.goodsImag{
width: 144rpx;
height: 132rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
margin-right: 26rpx;
}
}
.copy {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #F63016;
line-height: 34rpx;
position: absolute;
right: 0;
}
}
}
.footer {
width: 100%;
height: 120rpx;
position: fixed;
background-color: #FFF;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
.meetPrice {
margin-left: 26rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
.type {
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #F42B17;
margin-left: 12rpx;
}
.price {
font-size: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F42B17;
}
}
.fooRight{
display: flex;
align-items: center;
}
.buyAgain{
width: 146rpx;
height: 68rpx;
background: #FFFFFF;
border-radius: 76rpx 76rpx 76rpx 76rpx;
opacity: 1;
border: 2rpx solid #D9D9D9;
text-align: center;
line-height: 68rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #828282;
margin-right: 14rpx;
}
.btn {
width: 214rpx;
height: 74rpx;
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
opacity: 1;
text-align: center;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 74rpx;
margin-right: 20rpx;
}
}
.dia{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
.diaMain{
width: 560rpx;
height: 432rpx;
background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
border-radius: 12rpx 12rpx 12rpx 12rpx;
opacity: 1;
position: relative;
.ld{
width: 100rpx;
height: 100rpx;
position: absolute;
top: -50rpx;
left: 230rpx;
}
.cdTitle{
width: 128rpx;
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 44rpx;
margin: 80rpx 0 0 216rpx;
}
.cdInfo{
width: 498rpx;
height: 120rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #727272;
line-height: 33rpx;
margin-left: 48rpx;
margin-top: 28rpx;
}
.iKnow{
width: 412rpx;
height: 72rpx;
background: #F55349;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 72rpx;
margin: 36rpx 0 0 74rpx;
text-align: center;
}
}
}
.bigCode{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(65,65,65,0.46);
display: flex;
align-items: center;
justify-content: center;
.cm{
width: 560rpx;
height: 714rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
padding-top: 44rpx;
.cm_text{
width: 100%;
height: 42rpx;
font-size: 30rpx;
font-weight: 500;
color: #424242;
line-height: 42rpx;
text-align: center;
}
.txm{
.codeImg{
width: 394rpx;
height: 458rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
}
}
.cline{
padding: 0 34rpx;
margin: 46rpx 0 30rpx 0;
}
.sm{
width: 100%;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #979797;
line-height: 28rpx;
text-align: center;
}
}
}
</style>