526 lines
11 KiB
Vue
526 lines
11 KiB
Vue
<template>
|
||
<view class="container safe-area-inset-bottom">
|
||
<MessageNotification />
|
||
<!-- 待付款 -->
|
||
<view class="p_state">
|
||
<view class="state">
|
||
<text>全部</text>
|
||
<text>待付款</text>
|
||
<text>待付款</text>
|
||
<text>待付款</text>
|
||
<text>待付款</text>
|
||
|
||
<text class="notice">请在{{orderDetailList.cancel_time| dateFormat}}内支付,逾期订单将自动取消</text>
|
||
</view>
|
||
<text class="iconfont icon-daifahuo"></text>
|
||
</view>
|
||
|
||
<!-- 收货地址 已添加地址 -->
|
||
<view class="head" v-if="isshow">
|
||
<view class="state">
|
||
<text>收货地址</text>
|
||
</view>
|
||
<view class="name">{{orderDetailList.express_name}} {{orderDetailList.express_mobile_tm || orderDetailList.express_mobile}}</view>
|
||
<view class="choose_area">{{orderDetailList.express_region}}{{orderDetailList.express_address}}</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="card">
|
||
<!-- 门店 -->
|
||
<view class="store"><text class="iconfont icon-mendian"></text>萧康诊所门店</view>
|
||
|
||
<!-- 商品 -->
|
||
<view class="list">
|
||
<view class="img">
|
||
<image :src="orderDetailList.items[0].drug_image" mode=""></image>
|
||
</view>
|
||
<view class="it">
|
||
<view class="it_name">{{orderDetailList.items[0].drug_name}}</view>
|
||
<view class="it_info">{{orderDetailList.items[0].small_info}}</view>
|
||
<view class="it_price">
|
||
<text>￥{{orderDetailList.items[0].price}}</text>
|
||
<view class="it_num">
|
||
x{{orderDetailList.items[0].number}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 数量 -->
|
||
<view class="goods">
|
||
<view class="good_">
|
||
<text>商品总价</text>
|
||
<text class="price">￥{{orderDetailList.items_price}}</text>
|
||
</view>
|
||
<view class="good_">
|
||
<text>快递费</text>
|
||
<text class="price">￥{{orderDetailList.trans_expenses}}</text>
|
||
</view>
|
||
<view class="good_">
|
||
<text>共{{orderDetailList.items[0].number}}件</text>
|
||
<view class="total">
|
||
合计:
|
||
<text class="price">￥{{orderDetailList.total_pay_price}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="infos">
|
||
<view class="title">
|
||
订单信息
|
||
</view>
|
||
|
||
<view class="_info">
|
||
<text>订单号码</text>
|
||
<text class="info">{{orderDetailList.order_no}}</text>
|
||
</view>
|
||
<view class="_info">
|
||
<text>下单时间</text>
|
||
<text class="info">{{orderDetailList.updated_at| dateFormat}}</text>
|
||
</view>
|
||
<view class="_info">
|
||
<text>支付方式</text>
|
||
<text class="info">微信</text>
|
||
</view>
|
||
<view class="_info">
|
||
<text>配送方式</text>
|
||
<text class="info">快递配送</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提醒 申请退款 -->
|
||
<view class="umode">
|
||
<u-modal v-model="show" :content="content" @confirm="confirm" @cancel="cancel"
|
||
:content-style="{color:'#1E293B',fontWeight: '500',fontSize: '34rpx'}" :show-cancel-button="true"
|
||
confirm-text="确认退款" cancel-text="取消" cancel-color="#FC3636" confirm-color="#1777FF" :show-title="false">
|
||
</u-modal>
|
||
<text>退款后，订单将被取消</text>
|
||
</view>
|
||
|
||
<!-- 底部 取消订单 -->
|
||
<view class="footer">
|
||
<view class="to_cancle" @click="tosales">申请售后</view>
|
||
<view class="to_cancle" @click="tolook">查看物流</view>
|
||
<view class="to_pay">立即支付</view>
|
||
<!-- <view class="to_agin">再次购买</view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// getOrdDetail
|
||
import {
|
||
getOrdDetail,getRefundBase
|
||
} from '../../request/api/api'
|
||
export default {
|
||
data() {
|
||
return {
|
||
isshow: true,
|
||
show: false,
|
||
content: '是否确认退款',
|
||
order_no:'',
|
||
orderDetailList:{},//订单详情信息,
|
||
order_id:''
|
||
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
|
||
this.order_id=op.id
|
||
console.log(this.order_no);
|
||
this.getOrderDetailList()
|
||
},
|
||
//时间戳过滤器
|
||
filters: {
|
||
//过滤器 用于格式化时间
|
||
dateFormat: function(value) {
|
||
var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
||
var year = date.getFullYear();
|
||
var month = ("0" + (date.getMonth() + 1)).slice(-2);
|
||
var sdate = ("0" + date.getDate()).slice(-2);
|
||
var hour = ("0" + date.getHours()).slice(-2);
|
||
var minute = ("0" + date.getMinutes()).slice(-2);
|
||
var second = ("0" + date.getSeconds()).slice(-2);
|
||
// 拼接
|
||
var result = year + "-" + month + "-" + sdate + ' ' + hour + ':' + minute + ':' + second
|
||
// 返回
|
||
return result;
|
||
},
|
||
},
|
||
methods: {
|
||
// 添加地址
|
||
toArea() {
|
||
uni.navigateTo({
|
||
url: '/subPackages/setup/area-list'
|
||
})
|
||
},
|
||
// 支付
|
||
toPay() {
|
||
uni.navigateTo({
|
||
url: '/subPackages/shop/paied?id='
|
||
})
|
||
},
|
||
// 售后
|
||
tosales() {
|
||
uni.navigateTo({
|
||
url: '/subPackages/shop/after-sales?id='+this.order_id
|
||
})
|
||
},
|
||
// 查看物流
|
||
tolook() {
|
||
uni.navigateTo({
|
||
url: '/subPackages/shop/logistics?id='+this.order_id
|
||
})
|
||
},
|
||
// 取消预约
|
||
cancel() {
|
||
this.show = false
|
||
},
|
||
// 暂不取消
|
||
confirm() {
|
||
this.show = false;
|
||
},
|
||
//获取订单详情列表
|
||
getOrderDetailList() {
|
||
getOrdDetail({
|
||
method: "post",
|
||
data: {
|
||
store_id:uni.getStorageSync('store_id') || '11001',
|
||
order_id:this.order_id
|
||
}
|
||
}).then((res) => {
|
||
// console.log(res, 'list');
|
||
if (res.data.code == 0){
|
||
// this.drugDetailsList=res.data.data
|
||
console.log(res.data.data)
|
||
this.orderDetailList=res.data.data
|
||
}
|
||
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
width: 750rpx;
|
||
max-height: 100%;
|
||
min-height: 100vh;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
background: #F5F5F5;
|
||
|
||
.umode {
|
||
font-size: 36rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
text-align: center;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.p_state {
|
||
width: 750rpx;
|
||
height: 160rpx;
|
||
background: #1777FF;
|
||
margin: 20rpx auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 40rpx;
|
||
|
||
.state {
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
text {
|
||
font-size: 36rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.notice {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 52rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.head {
|
||
width: 750rpx;
|
||
height: 168rpx;
|
||
margin: 20rpx auto;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 40rpx;
|
||
|
||
.state {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
line-height: 0rpx;
|
||
|
||
text {
|
||
display: inline-block;
|
||
width: 116rpx;
|
||
height: 38rpx;
|
||
line-height: 38rpx;
|
||
text-align: center;
|
||
background: #1777FF;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
margin-right: 14rpx;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
margin: 10rpx 0;
|
||
}
|
||
|
||
.choose_area {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
}
|
||
}
|
||
|
||
.card {
|
||
width: 750rpx;
|
||
margin: 0 auto;
|
||
padding: 20rpx 12rpx 20rpx 20rpx;
|
||
background: #FFFFFF;
|
||
|
||
.store {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 500;
|
||
color: #232323;
|
||
margin-left: 20rpx;
|
||
|
||
.iconfont {
|
||
font-size: 39rpx;
|
||
color: #666666;
|
||
vertical-align: middle;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 100%;
|
||
height: 254rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.checkbox {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
background: #1777FF;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.img {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-right: 10rpx;
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.it {
|
||
flex: 1;
|
||
padding: 16rpx 10rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
|
||
.it_name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
|
||
.it_info {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin: 20rpx 0 48rpx 10rpx;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.it_price {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods {
|
||
margin-top: 20rpx;
|
||
padding: 0 30rpx;
|
||
|
||
.good_ {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 88rpx;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
|
||
.total {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
|
||
.price {
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.price {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.infos {
|
||
width: 750rpx;
|
||
margin: 20rpx auto 160rpx;
|
||
padding: 20rpx 32rpx;
|
||
background: #FFFFFF;
|
||
|
||
|
||
.title {
|
||
height: 44rpx;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
._info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 18rpx 0;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.info {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
width: 750rpx;
|
||
height: 104rpx;
|
||
background: #fff;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: env(safe-area-inset-bottom);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
|
||
|
||
.to_cancle {
|
||
width: 196rpx;
|
||
height: 64rpx;
|
||
text-align: center;
|
||
line-height: 64rpx;
|
||
color: #1777FF;
|
||
background: #E7F1FF;
|
||
border-radius: 50rpx 50rpx 50rpx 50rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.to_pay {
|
||
width: 196rpx;
|
||
height: 64rpx;
|
||
text-align: center;
|
||
line-height: 64rpx;
|
||
color: #fff;
|
||
background: #1777FF;
|
||
border-radius: 50rpx 50rpx 50rpx 50rpx;
|
||
}
|
||
|
||
.to_agin {
|
||
width: 196rpx;
|
||
height: 64rpx;
|
||
text-align: center;
|
||
line-height: 64rpx;
|
||
border-radius: 50rpx 50rpx 50rpx 50rpx;
|
||
border: 2rpx solid #999999;
|
||
color: #999999;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|