|
|
@@ -0,0 +1,374 @@
|
|
|
+<template>
|
|
|
+ <mobile-frame>
|
|
|
+ <view class="main">
|
|
|
+ <view class="zero">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view">
|
|
|
+ <view class="list-scroll-view">
|
|
|
+ <view class="one">
|
|
|
+ <view class="one_1">
|
|
|
+ <text class="iconfont icon-dingweixiao"></text>
|
|
|
+ </view>
|
|
|
+ <view class="one_2">
|
|
|
+ <view class="name">
|
|
|
+ <text>{{info.address.name}}</text>
|
|
|
+ <text>{{info.address.phone}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="address">
|
|
|
+ <text>{{info.address.province}}</text>
|
|
|
+ <text>{{info.address.city}}</text>
|
|
|
+ <text>{{info.address.area}}</text>
|
|
|
+ <text>{{info.address.address}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="two">
|
|
|
+ <view class="two_0">
|
|
|
+ <text>{{info.status=='0'?'待付款':info.status=='1'?'已支付':info.status=='-1'?'取消订单':info.status=='2'?'发货中':info.status=='-2'?'已退款':info.status=='3'?'已收货':info.status=='-3'?'申请售后':info.status=='-4'?'正在售后中':info.status=='-5'?'售后已结束':'未识别'}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="two_1" v-if="info.status=='0'">
|
|
|
+ <view class="list" v-for="(item,index) in info.goods" :key="index">
|
|
|
+ <view class="list_1">
|
|
|
+ <text class="iconfont icon-shangdian"></text>
|
|
|
+ <text>{{item.shop_name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list_2">
|
|
|
+ <view class="goods" v-for="(tag,indexs) in item.goods" :key="indexs">
|
|
|
+ <view class="url">
|
|
|
+ <image class="image" :src="tag.goods.file&&tag.goods.file.length>0?tag.goods.file[0].url:''" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="goodsname">
|
|
|
+ {{tag.name}}
|
|
|
+ </view>
|
|
|
+ <view class="goodsother">
|
|
|
+ <view class="price">
|
|
|
+ ¥{{tag.sell_money}}
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ ×{{tag.buy_num}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="two_2" v-else>
|
|
|
+ <view class="list_1">
|
|
|
+ <text class="iconfont icon-shangdian"></text>
|
|
|
+ <text>{{info.shop.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list_2">
|
|
|
+ <view class="goods" v-for="(item,index) in info.goods" :key="index">
|
|
|
+ <view class="url">
|
|
|
+ <image class="image" :src="item.goods.file&&item.goods.file.length>0?item.goods.file[0].url:''" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="goodsname">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="goodsother">
|
|
|
+ <view class="price">
|
|
|
+ ¥{{item.sell_money}}
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ ×{{item.buy_num}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="thr">
|
|
|
+ <view class="thr_1">
|
|
|
+ <text>商品金额</text>
|
|
|
+ <text>¥{{info.total_detail.goods_total}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="thr_1">
|
|
|
+ <text>运费</text>
|
|
|
+ <text>¥{{info.total_detail.freight_total}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="thr_1">
|
|
|
+ <text>实付金额</text>
|
|
|
+ <text>¥{{info.total_detail.freight_total+info.total_detail.goods_total}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="four">
|
|
|
+ <view class="four_1">
|
|
|
+ <text>订单号</text>
|
|
|
+ <text>{{info.no}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="four_1">
|
|
|
+ <text>订单状态</text>
|
|
|
+ <text>{{info.status=='0'?'待付款':info.status=='1'?'已支付':info.status=='-1'?'取消订单':info.status=='2'?'发货中':info.status=='-2'?'已退款':info.status=='3'?'已收货':info.status=='-3'?'申请售后':info.status=='-4'?'正在售后中':info.status=='-5'?'售后已结束':'未识别'}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="four_1">
|
|
|
+ <text>下单时间</text>
|
|
|
+ <text>{{info.buy_time}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="four_1">
|
|
|
+ <text>订单备注</text>
|
|
|
+ <text>{{info.remarks}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="zero_1">
|
|
|
+ <text>合计</text>
|
|
|
+ <text>¥{{info.total_detail.freight_total+info.total_detail.goods_total}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </mobile-frame>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ status: '',
|
|
|
+ info: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad: function(e) {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `id`, e.id);
|
|
|
+ that.$set(that, `status`, e.status);
|
|
|
+ that.search()
|
|
|
+ },
|
|
|
+ onShow: function() {},
|
|
|
+ methods: {
|
|
|
+ // 查询详情
|
|
|
+ async search() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ const that = this;
|
|
|
+ let res;
|
|
|
+ // 待付款
|
|
|
+ if (that.id && that.status == '0') {
|
|
|
+ res = await that.$api(`/order/${that.id}`);
|
|
|
+ } else {
|
|
|
+ res = await that.$api(`/orderDetail/${that.id}`);
|
|
|
+ }
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ that.$set(that, `info`, res.data);
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+
|
|
|
+ .zero {
|
|
|
+ position: relative;
|
|
|
+ flex-grow: 1;
|
|
|
+
|
|
|
+ .one {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 2vw;
|
|
|
+ border-bottom: 2px dashed #ff0000;
|
|
|
+
|
|
|
+ .one_1 {
|
|
|
+ width: 8vw;
|
|
|
+ text-align: center;
|
|
|
+ padding: 3vw 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_2 {
|
|
|
+ width: 86vw;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 0 0 0 2vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #858585;
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 0 0 0 2vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ padding: 2vw;
|
|
|
+
|
|
|
+ .two_0 {
|
|
|
+ text-align: right;
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+
|
|
|
+ .list_1 {
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ padding: 0 0 0 2vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .goods {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px dashed #f1f1f1;
|
|
|
+ padding: 2vw 0;
|
|
|
+
|
|
|
+ .url {
|
|
|
+ width: 20vw;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 20vw;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodsname {
|
|
|
+ width: 60vw;
|
|
|
+ padding: 0 2vw;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodsother {
|
|
|
+ width: 15vw;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_2 {
|
|
|
+ .list_1 {
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ padding: 0 0 0 2vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .goods {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px dashed #f1f1f1;
|
|
|
+ padding: 2vw 0;
|
|
|
+
|
|
|
+ .url {
|
|
|
+ width: 20vw;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 20vw;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodsname {
|
|
|
+ width: 60vw;
|
|
|
+ padding: 0 2vw;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodsother {
|
|
|
+ width: 15vw;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .thr {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ padding: 0 2vw;
|
|
|
+
|
|
|
+ .thr_1 {
|
|
|
+ margin: 2vw 0;
|
|
|
+ font-size: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thr_1:last-child {
|
|
|
+ text:last-child {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .four {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ padding: 0 2vw;
|
|
|
+
|
|
|
+ .four_1 {
|
|
|
+ margin: 2vw 0;
|
|
|
+ font-size: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zero_1 {
|
|
|
+ background-color: white;
|
|
|
+ width: 96vw;
|
|
|
+ padding: 4vw 2vw;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ color: #ff0000;
|
|
|
+ padding: 0 0 0 2vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ .list-scroll-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
