155 lines
3.9 KiB
Vue
155 lines
3.9 KiB
Vue
<template>
|
||
<view class="page-content">
|
||
<nut-steps :current="detail.progress">
|
||
<nut-step title="待付款">1</nut-step>
|
||
<nut-step title="待发货">2</nut-step>
|
||
<nut-step title="待收货">3</nut-step>
|
||
<nut-step title="已完成">4</nut-step>
|
||
</nut-steps>
|
||
|
||
<nut-cell-group>
|
||
<nut-cell>
|
||
<view class="address-inner" v-if="detail.address_info">
|
||
<text>{{detail.address_info.user_name}} - {{detail.address_info.tel_number}}</text>
|
||
<text>{{detail.address_info.province_name + detail.address_info.city_name + detail.address_info.county_name + detail.address_info.street_name + detail.address_info.detail_info_new}}</text>
|
||
</view>
|
||
</nut-cell>
|
||
</nut-cell-group>
|
||
|
||
|
||
<nut-cell-group>
|
||
<!-- <nut-cell is-link v-for="(goods,idx) in detail.goods" :key="idx"
|
||
@click="navigateTo('/pages/mall/item/index?id=' + goods.goods_id)">
|
||
<template #title>
|
||
<view class="detail">
|
||
<view class="name">
|
||
<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
|
||
<text>{{goods.goods_name}}</text>
|
||
</view>
|
||
<view class="sku">{{goods.content}}</view>
|
||
</view>
|
||
</template>
|
||
</nut-cell> -->
|
||
|
||
<nut-cell v-for="(goods,index) in detail.goods" :key="index" center
|
||
@click="navigateTo('/pages/mall/item/index?id=' + goods.goods_id)">
|
||
<template #title>
|
||
<view class="goods-info-row">
|
||
<view class="left-text">
|
||
<view class="goods-name">
|
||
<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
|
||
<text style="margin-left: 10rpx;">{{goods.goods_name}}</text>
|
||
</view>
|
||
<text class="goods-no">串号：{{goods.goods_no}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template #link>
|
||
<nut-price :price="goods.goods_price" size="small" :need-symbol="true" />
|
||
</template>
|
||
</nut-cell>
|
||
</nut-cell-group>
|
||
|
||
|
||
|
||
<nut-cell-group>
|
||
<nut-cell>
|
||
<view class="total-price-inner">
|
||
<text>商品总额</text>
|
||
<nut-price :price="detail.pay_price" size="normal" :need-symbol="true" />
|
||
</view>
|
||
</nut-cell>
|
||
<!-- <nut-cell>
|
||
<view class="total-price-inner">
|
||
<view>
|
||
<text>邮费</text>
|
||
</view>
|
||
<view>
|
||
<nut-price :price="0" size="normal" :need-symbol="true" />
|
||
</view>
|
||
</view>
|
||
</nut-cell> -->
|
||
</nut-cell-group>
|
||
|
||
<nut-cell-group>
|
||
<nut-cell title="订单编号" :desc="detail.order_no" />
|
||
<nut-cell title="下单时间" :desc="detail.create_time" />
|
||
</nut-cell-group>
|
||
|
||
<nut-cell-group v-if="detail.progress >= 3">
|
||
<nut-cell title="物流公司" :desc="detail.express_company" />
|
||
<nut-cell title="物流单号" :desc="detail.express_no" />
|
||
</nut-cell-group>
|
||
|
||
|
||
<view v-if="detail.progress === 1" class="wechat-img-inner" style="margin-top: 60rpx; padding: 0rpx 80rpx;">
|
||
<nut-button type="primary" block @click="showPayImgs()">
|
||
点我付款
|
||
</nut-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.page-content {
|
||
min-height: 100vh;
|
||
background-color: #f2f3f5;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.address-inner {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.total-price-inner {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
// flex-direction: row;
|
||
view:nth-child(2) {
|
||
color: #fa2c19;
|
||
}
|
||
}
|
||
.wechat-img-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
// gap: 5px;
|
||
}
|
||
</style>
|
||
|
||
<script setup>
|
||
import {
|
||
onLoad,
|
||
onShow
|
||
} from '@dcloudio/uni-app'
|
||
import {
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
import {
|
||
fetchOrderDetail
|
||
} from '../../../api/order';
|
||
import {
|
||
navigateTo,
|
||
showPayImgs
|
||
// showWechatImg,
|
||
// showWechatPayImg
|
||
} from '../../../utils/helper';
|
||
const id = ref(0)
|
||
onLoad((options) => {
|
||
id.value = options.id
|
||
})
|
||
const detail = reactive({})
|
||
onShow(() => {
|
||
fetchOrderDetail(id.value).then(res => {
|
||
Object.assign(detail, res)
|
||
})
|
||
})
|
||
</script> |