fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit da2a56033f12f2640b00096b04ebe6408d5ec8ec 1 parent 960413dd

订单类表

Inline Side-by-side
Showing 5 changed files with 188 additions and 173 deletions
<template>
<div class="order-detail-wrapper">
<div class="content">
<!-- 状态信息 -->
<detail-header />
<!-- 物流信息 -->
<router-link
v-if="lastExpressInfo"
:to="{ name: 'orderLogisticsInfo', params: $route.params }"
>
<div class="logistics-info item-wrapper">
<div class="content">
<i class="logistics-icon"></i>
<div class="info">
<p>{{ lastExpressInfo.acceptRemark }}</p>
<p>{{ lastExpressInfo.createTimeStr }}</p>
<layout-app>
<div class="order-detail-wrapper">
<div class="content">
<!-- 状态信息 -->
<detail-header />
<!-- 物流信息 -->
<router-link
v-if="lastExpressInfo"
:to="{ name: 'orderLogisticsInfo', params: $route.params }"
>
<div class="logistics-info item-wrapper">
<div class="content">
<i class="logistics-icon"></i>
<div class="info">
<p>{{ lastExpressInfo.acceptRemark }}</p>
<p>{{ lastExpressInfo.createTimeStr }}</p>
</div>
</div>
<i class="right-icon"></i>
</div>
<i class="right-icon"></i>
</router-link>
<!-- 地址信息 -->
<address-info class="item-wrapper" />
<!-- 商品信息 -->
<order-item-info class="item-wrapper" />
<!-- 价格信息 -->
<div class="price-info item-wrapper">
<p>
<span class="label">商品金额:</span>
<span>¥{{ priceInfo.goodPrice }}</span>
</p>
<p class="delivery-fee">
<span class="label">运费:</span>
<span>¥{{ priceInfo.feePrice }}</span>
</p>
<p>
<span class="label">实际金额:</span>
<span class="pay-price">¥{{ priceInfo.realPayPrice }}</span>
</p>
</div>
</router-link>
<!-- 地址信息 -->
<address-info class="item-wrapper" />
<!-- 商品信息 -->
<order-item-info class="item-wrapper" />
<!-- 价格信息 -->
<div class="price-info item-wrapper">
<p>
<span class="label">商品金额:</span>
<span>¥{{ priceInfo.goodPrice }}</span>
</p>
<p class="delivery-fee">
<span class="label">运费:</span>
<span>¥{{ priceInfo.feePrice }}</span>
</p>
<p>
<span class="label">实际金额:</span>
<span class="pay-price">¥{{ priceInfo.realPayPrice }}</span>
</p>
</div>
<!-- 交易信息 -->
<div class="trade-info item-wrapper">
<p>
<span class="label">创建时间:</span>
<span>{{ orderDetail.createTime }}</span>
</p>
<p>
<span class="label">订单编号:</span>
<span>{{ orderDetail.orderCode }}</span>
</p>
<p v-if="orderDetail.paymentStr">
<span class="label">支付方式:</span>
<span>{{ orderDetail.paymentStr }}</span>
</p>
</div>
</div>
<!-- 操作 -->
<detail-footer>
<template #tip="{orderDetail, statusDetail}">
<div v-if="statusDetail.status === 0">
<p class="real-pay-price">
¥{{ orderDetail.priceInfo.realPayPrice }}
<!-- 交易信息 -->
<div class="trade-info item-wrapper">
<p>
<span class="label">创建时间:</span>
<span>{{ orderDetail.createTime }}</span>
</p>
<p>
<span class="label">订单编号:</span>
<span>{{ orderDetail.orderCode }}</span>
</p>
<p v-if="orderDetail.paymentStr">
<span class="label">支付方式:</span>
<span>{{ orderDetail.paymentStr }}</span>
</p>
<p>实付金额</p>
</div>
</template>
</detail-footer>
</div>
</div>
<!-- 操作 -->
<detail-footer>
<template #tip="{orderDetail, statusDetail}">
<div v-if="statusDetail.status === 0">
<p class="real-pay-price">
¥{{ orderDetail.priceInfo.realPayPrice }}
</p>
<p>实付金额</p>
</div>
</template>
</detail-footer>
</div>
</layout-app>
</template>
<script>
... ...
<template>
<div class="order-detail-wrapper">
<div class="content">
<!-- 状态信息 -->
<detail-header />
<!-- 物流信息 -->
<router-link
v-if="lastExpressInfo"
:to="{ name: 'orderLogisticsInfo', params: $route.params }"
>
<div class="logistics-info item-wrapper">
<div class="content">
<i class="logistics-icon"></i>
<div class="info">
<p>{{ lastExpressInfo.acceptRemark }}</p>
<p>{{ lastExpressInfo.createTimeStr }}</p>
<layout-app>
<div class="order-detail-wrapper">
<div class="content">
<!-- 状态信息 -->
<detail-header />
<!-- 物流信息 -->
<router-link
v-if="lastExpressInfo"
:to="{ name: 'orderLogisticsInfo', params: $route.params }"
>
<div class="logistics-info item-wrapper">
<div class="content">
<i class="logistics-icon"></i>
<div class="info">
<p>{{ lastExpressInfo.acceptRemark }}</p>
<p>{{ lastExpressInfo.createTimeStr }}</p>
</div>
</div>
<i class="right-icon"></i>
</div>
<i class="right-icon"></i>
</router-link>
<!-- 地址信息 -->
<address-info class="item-wrapper" />
<!-- 商品信息 -->
<order-item-info class="item-wrapper" />
<!-- 价格信息 -->
<div class="price-info item-wrapper">
<p>
<span class="label">平台费用:</span>
<span>{{ platformFee.amount }}</span>
</p>
<p class="delivery-fee">
<span class="label"
>银行转账费({{
parseInt(platformFee.payChannelPercentage)
}}%):</span
>
<span>{{ orderDetail.bankTransferFee }}</span>
</p>
<p>
<span class="label">实际收入:</span>
<span class="pay-price">{{ orderDetail.income }}</span>
</p>
</div>
<!-- 交易信息 -->
<div class="trade-info item-wrapper">
<p>
<span class="label">创建时间:</span>
<span>{{ orderDetail.createTime }}</span>
</p>
<p>
<span class="label">订单编号:</span>
<span>{{ orderDetail.orderCode }}</span>
</p>
<p v-if="orderDetail.paymentStr">
<span class="label">支付方式:</span>
<span>{{ orderDetail.paymentStr }}</span>
</p>
<p v-if="orderDetail.earnestMoneyStr">
<span class="label">保证金:</span>
<span class="earnest-price">{{ orderDetail.earnestMoneyStr }}</span>
</p>
<p v-if="statusDetail.paymentTips">
<span class="payment-tip">{{ statusDetail.paymentTips }}</span>
</p>
</div>
</router-link>
<!-- 地址信息 -->
<address-info class="item-wrapper" />
<!-- 商品信息 -->
<order-item-info class="item-wrapper" />
<!-- 价格信息 -->
<div class="price-info item-wrapper">
<p>
<span class="label">平台费用:</span>
<span>{{ orderDetail.platformFee.amount }}</span>
</p>
<p class="delivery-fee">
<span class="label"
>银行转账费({{
parseInt(orderDetail.platformFee.payChannelPercentage)
}}%):</span
>
<span>{{ orderDetail.bankTransferFee }}</span>
</p>
<p>
<span class="label">实际收入:</span>
<span class="pay-price">{{ orderDetail.income }}</span>
</p>
</div>
<!-- 交易信息 -->
<div class="trade-info item-wrapper">
<p>
<span class="label">创建时间:</span>
<span>{{ orderDetail.createTime }}</span>
</p>
<p>
<span class="label">订单编号:</span>
<span>{{ orderDetail.orderCode }}</span>
</p>
<p v-if="orderDetail.paymentStr">
<span class="label">支付方式:</span>
<span>{{ orderDetail.paymentStr }}</span>
</p>
<p v-if="orderDetail.earnestMoneyStr">
<span class="label">保证金:</span>
<span class="earnest-price">{{ orderDetail.earnestMoneyStr }}</span>
</p>
<p v-if="statusDetail.paymentTips">
<span class="payment-tip">{{ statusDetail.paymentTips }}</span>
</p>
</div>
<!-- 操作 -->
<detail-footer>
<template #tip="{orderDetail, statusDetail}">
<div v-if="statusDetail.status === 0">
<p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p>
<p>{{ statusDetail.statuStr }}</p>
</div>
</template>
</detail-footer>
</div>
<!-- 操作 -->
<detail-footer>
<template #tip="{orderDetail, statusDetail}">
<div v-if="statusDetail.status === 0">
<p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p>
<p>{{ statusDetail.statuStr }}</p>
</div>
</template>
</detail-footer>
</div>
</layout-app>
</template>
<script>
... ... @@ -105,7 +107,12 @@ export default {
},
computed: {
...mapState(["orderDetail"]),
...mapGetters(["lastExpressInfo", "priceInfo", "statusDetail"])
...mapGetters([
"lastExpressInfo",
"priceInfo",
"statusDetail",
"platformFee"
])
},
methods: {
...mapActions(["fetchOrderDetail"])
... ...
<template>
<div class="content-wrapper">
<scroll
@pulling-up="fetchData"
:options="options"
:data="orderList"
class="order-list-scroll-wrap"
v-show="!isShowEmpty"
>
<ul class="list-wrapper">
<li v-for="order in orderList" :key="order.orderCode">
<order-info :order="order" />
<order-list-item :order="order" />
<!-- 订单操作 -->
<order-item-footer :order="order" />
</li>
</ul>
</scroll>
<empty-list v-show="isShowEmpty" />
</div>
<layout-app>
<div class="content-wrapper">
<scroll
@pulling-up="fetchData"
:options="options"
:data="orderList"
class="order-list-scroll-wrap"
v-show="!isShowEmpty"
>
<ul class="list-wrapper">
<li v-for="order in orderList" :key="order.orderCode">
<order-info :order="order" />
<order-list-item :order="order" />
<!-- 订单操作 -->
<order-item-footer :order="order" />
</li>
</ul>
</scroll>
<empty-list v-show="isShowEmpty" />
</div>
</layout-app>
</template>
<script>
... ...
<template>
<div class="content-wrapper">
<status-nav />
<layout-app>
<div class="content-wrapper">
<status-nav />
<scroll
@pulling-up="fetchMore"
:options="options"
:data="orderList"
class="order-list-scroll-wrap"
v-show="!isShowEmpty"
>
<ul class="list-wrapper">
<li v-for="order in orderList" :key="order.orderCode">
<order-info :order="order" />
<order-list-item :order="order" />
<!-- 订单操作 -->
<order-item-footer :order="order" />
</li>
</ul>
</scroll>
<scroll
@pulling-up="fetchMore"
:options="options"
:data="orderList"
class="order-list-scroll-wrap"
v-show="!isShowEmpty"
>
<ul class="list-wrapper">
<li v-for="order in orderList" :key="order.orderCode">
<order-info :order="order" />
<order-list-item :order="order" />
<!-- 订单操作 -->
<order-item-footer :order="order" />
</li>
</ul>
</scroll>
<empty-list v-show="isShowEmpty" />
</div>
<empty-list v-show="isShowEmpty" />
</div>
</layout-app>
</template>
<script>
... ...
... ... @@ -16,6 +16,8 @@ export default function() {
goodsInfo: state => state.orderDetail.goodsInfo || {}, // 商品信息
priceInfo: state => state.orderDetail.priceInfo || {}, // 价格信息
actionList: state => state.orderDetail.buttons || {}, // 允许操作
// 卖家订单价格字段
platformFee: state => state.orderDetail.platformFee || {},
},
actions: {
/**
... ...