595 lines
12 KiB
Vue
595 lines
12 KiB
Vue
<template>
|
||
<view class="OrderInfo" v-if="loaded">
|
||
<!-- 订单状态 -->
|
||
<view class="order-status">
|
||
<view class="info">
|
||
{{info.state_text}}
|
||
<span>您的快递正在坐着火箭朝您飞来</span>
|
||
</view>
|
||
<image src="/static/imgs/fire.png" mode="widthFix"></image>
|
||
</view>
|
||
<!-- 收货人 -->
|
||
<view class="acceptInfo" v-if="type === '1'">
|
||
<block>
|
||
<view class="name">{{address.name}} <span>{{address.mobile}}</span> </view>
|
||
<view class="address">
|
||
<u-icon name="map" color="red"></u-icon>
|
||
<span>{{address.full_address}}</span>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<view class="goods-info1">
|
||
<view class="top">
|
||
<view class="company">
|
||
<view class="company-logo">
|
||
<image :src="info.shop.cover" mode="aspectFill" />
|
||
<view class="name ellipsis">{{info.shop.name}}</view>
|
||
</view>
|
||
<view class="flexrow">
|
||
<view class="no ellipsis">发货单号： {{info.shipment_no}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="goods-info">
|
||
<image class="goods-img" :src="info.goods_sku.cover" mode="aspectFill" />
|
||
<view class="goods">
|
||
<view class="name">
|
||
<view class="name1 ellipsis-2">{{info.goods_sku.goods_name}}</view>
|
||
<!-- <span>￥16.80</span> -->
|
||
</view>
|
||
<view class="sku">权证个数 <span>x {{info.qty}}</span> </view>
|
||
</view>
|
||
</view>
|
||
<navigator class="total" hover-class="none" :url='"/pages/goods/details?id="+info.goods_sku.goods_id'>
|
||
<view class="total-btn">再次购买</view>
|
||
</navigator>
|
||
<view class="goods-type">使用时间 <span>{{info.created_at}}</span></view>
|
||
<view class="goods-type">使用数量 <span> x {{info.qty}}</span></view>
|
||
<view class="goods-type">使用方式<span>门店使用</span>
|
||
</view>
|
||
<view class="goods-type-1" v-if="type === '2'">
|
||
提货门店
|
||
<view class="goods-type-address">
|
||
<view class="list-top1">
|
||
<image :src="info.store.cover.showpath" @click="map(info.store)" mode="aspectFill"
|
||
class="list-top1-img" />
|
||
<view class="shop-info shop-info1">
|
||
<view class="title ellipsis">{{info.store.name}}</view>
|
||
<view class="des" style="padding-top: 16rpx;">营业时间：{{info.store.start_time}}</view>
|
||
<view class="des" style="padding-top: 4rpx;" @click="call(info.store.mobile)">
|
||
联系电话：{{info.store.mobile}}</view>
|
||
<view class="des" style="padding-top: 4rpx;" @click="map(info.store)">
|
||
门店地址：{{info.store.address}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <u-toast ref="uToast" /> -->
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mallShipmentsInfo
|
||
} from '@/apis/interfaces/numberWeight'
|
||
export default {
|
||
name: 'OrderInfo',
|
||
data() {
|
||
return {
|
||
info: {},
|
||
list: [{
|
||
name: '快递',
|
||
disabled: true,
|
||
id: '1'
|
||
},
|
||
{
|
||
name: '自提',
|
||
disabled: false,
|
||
id: '2'
|
||
}
|
||
],
|
||
address: {},
|
||
type: '1', //提货类型：2 自提 1 邮寄
|
||
showStoreList: false, // 默认false不显示优惠券弹窗列表
|
||
store_id: '', // 默认没有选择任何一个优惠券
|
||
store_Name: '', // 门店名称
|
||
qty: 1,
|
||
loaded: false,
|
||
shipment_no: '', // 提货单no
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
console.log(e)
|
||
this.shipment_no = e.no
|
||
this.getInfo(e.no)
|
||
console.log(this.shipment_no)
|
||
// this.getInfo('2021081817410747800300000004')
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync('refresh')) {
|
||
this.getInfo(this.shipment_no)
|
||
}
|
||
},
|
||
methods: {
|
||
getInfo(shipment_no) {
|
||
mallShipmentsInfo(shipment_no).then(res => {
|
||
this.info = res
|
||
this.address = res.express
|
||
this.type = res.type + ''
|
||
this.loaded = true
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
})
|
||
},
|
||
call(e) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: e
|
||
})
|
||
},
|
||
map(info) {
|
||
console.log(info.latitude, info.longitude)
|
||
uni.openLocation({
|
||
latitude: Number(info.latitude),
|
||
longitude: Number(info.longitude),
|
||
success: function() {
|
||
console.log('success');
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.OrderInfo {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
background-color: #F7F7F7;
|
||
padding-bottom: 80rpx;
|
||
|
||
.order-status {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
background-image: linear-gradient(to bottom, $main-color, $main-color-light);
|
||
color: #Fff;
|
||
font-size: 36rpx;
|
||
padding: 30rpx 50rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
|
||
.info {
|
||
font-size: 36rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
|
||
span {
|
||
font-size: 28rpx;
|
||
padding-top: 30rpx;
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 200rpx;
|
||
}
|
||
}
|
||
|
||
.acceptInfo {
|
||
margin: 0 30rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 0 14rpx 4rpx rgba($color: $main-color, $alpha: 0.2);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
position: relative;
|
||
top: -30rpx;
|
||
|
||
.name {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
|
||
span {
|
||
padding-left: 20rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.address {
|
||
padding-top: 20rpx;
|
||
font-size: 28rpx;
|
||
|
||
span {
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-info1 {
|
||
padding: 20rpx 40rpx;
|
||
background-color: #fff;
|
||
|
||
.goods-type {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
}
|
||
|
||
.goods-type-1 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
}
|
||
|
||
.goods-type-address {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
|
||
u-icon {
|
||
padding-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
// 顶部信息
|
||
.top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
border-bottom: solid 1rpx #EFF4F2;
|
||
|
||
.company-logo {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.name {
|
||
width: 600rpx;
|
||
font-size: 30rpx;
|
||
color: #484848;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
|
||
.no {
|
||
margin-top: 16rpx;
|
||
font-size: $title-size*0.8;
|
||
color: #999;
|
||
// width: 500rpx;
|
||
}
|
||
|
||
.status {
|
||
color: #999;
|
||
font-size: $title-size;
|
||
}
|
||
}
|
||
|
||
// 商品信息
|
||
.goods-info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
margin-top: 40rpx;
|
||
|
||
.goods-img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.goods {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
|
||
|
||
.name {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
font-size: 30rpx;
|
||
// font-weight: bold;
|
||
|
||
.name1 {
|
||
width: 500rpx;
|
||
}
|
||
|
||
span {
|
||
font-size: 34rpx;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.sku {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
margin-top: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 合计信息
|
||
.total {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
font-size: 26rpx;
|
||
color: $main-color;
|
||
flex: 1;
|
||
text-align: right;
|
||
margin-top: 20rpx;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.total-btn {
|
||
border: solid 1rpx $main-color;
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
// 操作信息
|
||
.actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
background-color: #fff;
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
padding: 20rpx 50rpx 30rpx 50rpx;
|
||
color: #fff;
|
||
|
||
.nowPay {
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
// background-color: $main-color;
|
||
color: #999;
|
||
border: solid 1rpx #cacaca;
|
||
}
|
||
|
||
.cancelOrder {
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
background-color: #DD524D;
|
||
}
|
||
|
||
.logistics {
|
||
background-color: $main-color;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.sign {
|
||
background-color: #DD524D;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.evaluate {
|
||
background-color: $main-color;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.flexrow {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
|
||
.copy {
|
||
color: $main-color;
|
||
font-size: $title-size*0.8;
|
||
font-weight: 400;
|
||
padding: 0 30rpx;
|
||
}
|
||
}
|
||
|
||
.no-address {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// 优惠券弹窗
|
||
.scrollView {
|
||
// padding: 40rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
// 标题
|
||
.coupon-title {
|
||
padding: 40rpx;
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
}
|
||
|
||
// 优惠券样式
|
||
.coupon-list-item {
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
width: 100%;
|
||
|
||
.coupon-list-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba($color: #000, $alpha: 0);
|
||
z-index: 10001;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-top1 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
font-size: $title-size*0.94;
|
||
width: 100%;
|
||
margin-left: 0 !important;
|
||
margin-top: 30rpx;
|
||
|
||
.shop-info {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.list-top1-img {
|
||
width: 170rpx;
|
||
height: 170rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.des {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.list-top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
font-size: $title-size*0.94;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
width: 600rpx;
|
||
margin-left: 30rpx;
|
||
|
||
.list-top-left {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
|
||
.shop-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.title {
|
||
width: 380rpx;
|
||
font-size: $title-size*1;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.urate {
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
.des {
|
||
// padding-top: $padding*0.8;
|
||
font-size: $title-size * 0.8;
|
||
color: #999;
|
||
|
||
span {
|
||
color: #666;
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
|
||
.list-banner {
|
||
width: 120rpx;
|
||
margin-right: $margin*1.5;
|
||
height: 120rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
|
||
.list-top-right {
|
||
border: solid 1rpx $main-color;
|
||
color: $main-color;
|
||
display: inline-block;
|
||
padding: 8rpx 16rpx;
|
||
font-size: $title-size *0.8;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
</style>
|