10 changed files with 342 additions and 7 deletions
-
84src/components/order_list/stored_value_card/stored_value_card.vue
-
3src/components/order_list/value_card/value_card.vue
-
3src/js/api.js
-
6src/pages.json
-
8src/pages/index/index.vue
-
20src/pages/order_list/order_list.vue
-
1src/store/index.js
-
2src/subpackage/order/js/api.js
-
215src/subpackage/order/pages/stored_value_card/detail/detail.vue
-
7src/subpackage/order/pages/value_card/detail/detail.vue
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<view class="value-card-container" @click="toInfo"> |
|||
<a-header :source="orderInfo.stadium_name || '-'" :status="getStatus(orderInfo.pay_status)"></a-header> |
|||
<view class="vcc-info"> |
|||
<a-line :value="orderInfo.order_no || '-'"> |
|||
<block slot="name">订单号：</block> |
|||
</a-line> |
|||
<a-line :value="orderInfo.card_name || '-'"> |
|||
<block slot="name">储值卡名称：</block> |
|||
</a-line> |
|||
<a-line :value="orderInfo.mobile || '-'"> |
|||
<block slot="name">手机号码：</block> |
|||
</a-line> |
|||
<a-line :value="orderInfo.pay_time || '-'"> |
|||
<block slot="name">支付时间：</block> |
|||
</a-line> |
|||
<a-line :value="orderWay(orderInfo.order_way)"> |
|||
<block slot="name">途径：</block> |
|||
</a-line> |
|||
<view class="svc-total"><text class="st-txt">支付金额：</text>￥{{ orderInfo.pay_amount || 0 }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../utils/util'; |
|||
import a_header from '../a_header/a_header.vue'; |
|||
import a_line from '../a_line/a_line.vue'; |
|||
export default { |
|||
components: { |
|||
'a-header': a_header, |
|||
'a-line': a_line, |
|||
}, |
|||
props: { |
|||
orderInfo: { |
|||
default: {}, |
|||
type: Object, |
|||
} |
|||
}, |
|||
methods: { |
|||
orderWay(wayType){ |
|||
if(wayType == 0)return '购买'; |
|||
if(wayType == 1)return '升级'; |
|||
if(wayType == 2)return '充值'; |
|||
return '-'; |
|||
}, |
|||
getStatus(status){ |
|||
let _obj = { |
|||
1: '已付款', |
|||
4: '已退款', |
|||
} |
|||
return _obj[status] || '-' |
|||
}, |
|||
toInfo(){ |
|||
let { orderInfo } = this; |
|||
util.routeTo(`/subpackage/order/pages/stored_value_card/detail/detail?order_no=${orderInfo.order_no}`, 'nT'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.value-card-container{ |
|||
background-color: #fff; |
|||
padding: 0 20upx; |
|||
border-radius: 10upx; |
|||
.vcc-info{ |
|||
padding: 20upx 0; |
|||
} |
|||
} |
|||
.svc-total{ |
|||
line-height: 40upx; |
|||
text-align: right; |
|||
font-size: 28upx; |
|||
font-weight: 500; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
.st-txt{ |
|||
font-weight: 400; |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,215 @@ |
|||
<template> |
|||
<view class="stored-value-card"> |
|||
<view class="svc-box svc-header"> |
|||
<view class="sh-stadium"> |
|||
<image mode="aspectFit" :src="stadiumInfo.stadium_logo"></image> |
|||
<view>{{ stadiumInfo.stadium_name || '-' }}</view> |
|||
</view> |
|||
|
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>订单编号：</text>{{ orderInfo.order_no || '-' }}</view> |
|||
<view class="sl-status">{{ payStatus(orderInfo.pay_status) }}</view> |
|||
</view> |
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>创建时间：</text>{{ orderInfo.created_at || '-' }}</view> |
|||
</view> |
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>手机号码：</text>{{ orderInfo.mobile || '-' }}</view> |
|||
</view> |
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>用户昵称：</text>{{ orderInfo.nickname || '-' }}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="svc-box svc-card-info"> |
|||
<view class="sci-tit">储值卡信息</view> |
|||
|
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>储值卡名称：</text>{{ cardInfo.card_name || '-' }}</view> |
|||
</view> |
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>储值卡卡号：</text>{{ cardInfo.card_no || '-' }}</view> |
|||
</view> |
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>储值卡类型：</text>{{ cardType(cardInfo.card_kind) }}</view> |
|||
</view> |
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>赠金金额：</text>￥{{ cardInfo.gift_amount.amount || '0' }}</view> |
|||
</view> |
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>途径：</text>{{ orderWay(orderInfo.order_way) }}</view> |
|||
</view> |
|||
<view class="sci-pay-info"> |
|||
<s-line :keyname="'金额小计'" :value="'￥' + (orderInfo.amount || '0')"></s-line> |
|||
<s-line :keyname="'积分抵扣'" :value="'￥' + (orderInfo.deduction_amount|| '0')"></s-line> |
|||
<s-line :keyname="'折扣金额'" :value="'￥' + (orderInfo.discount_amount || '0')"></s-line> |
|||
<s-line :keyname="'优惠券优惠'" :value="'￥' + (orderInfo.coupons_amount || '0')"></s-line> |
|||
<view class="spi-total"><text>合计支付：</text>￥{{ orderInfo.pay_amount || 0 }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="svc-box"> |
|||
<view class="svc-line"> |
|||
<view class="sl-txt" style="margin-bottom: 20rpx;"><text>支付信息</text></view> |
|||
</view> |
|||
|
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>支付方式：</text>{{ payType(orderInfo.pay_type) }}</view> |
|||
</view> |
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>支付时间：</text>{{ orderInfo.pay_time || '-' }}</view> |
|||
</view> |
|||
<view class="svc-line"> |
|||
<view class="sl-txt"><text>微信交易号：</text>{{ orderInfo.trade_no || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import s_line from '../../../components/s_line/s_line.vue'; |
|||
import { ORDER_API } from '../../../js/api'; |
|||
import server from '../../../js/server'; |
|||
import util from '../../../../../utils/util'; |
|||
export default { |
|||
components: { |
|||
's-line': s_line, |
|||
}, |
|||
computed: { |
|||
cardInfo(){ |
|||
let { orderInfo } = this; |
|||
if(orderInfo.card_info)return orderInfo.card_info || {}; |
|||
return {}; |
|||
}, |
|||
stadiumInfo(){ |
|||
let { orderInfo } = this; |
|||
if(orderInfo.stadium)return orderInfo.stadium || {}; |
|||
return {}; |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
orderInfo: {}, |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
this.getOrderInfo({ order_no: options.order_no }); |
|||
}, |
|||
methods: { |
|||
payStatus(status){ |
|||
if(status == 1)return '已付款'; |
|||
if(status == 4)return '已退款'; |
|||
return '-'; |
|||
}, |
|||
orderWay(wayType){ |
|||
if(wayType == 0)return '购买'; |
|||
if(wayType == 1)return '升级'; |
|||
if(wayType == 2)return '充值'; |
|||
return '-'; |
|||
}, |
|||
cardType(type){ |
|||
if(type == 1)return '个人卡'; |
|||
if(type == 2 || type == 3)return '团体卡'; |
|||
return '-' |
|||
}, |
|||
payType: util.order_pay_type_txt, |
|||
getOrderInfo({ order_no }){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: ORDER_API.userValueOrderGet, |
|||
data: { order_no }, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
this.orderInfo = res || {}; |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.stored-value-card{ |
|||
|
|||
} |
|||
|
|||
.svc-box{ |
|||
margin-bottom: 24upx; |
|||
padding: 30upx 24upx; |
|||
background-color: #fff; |
|||
} |
|||
.svc-line{ |
|||
@include centerFlex(space-between); |
|||
.sl-txt{ |
|||
flex-grow: 1; |
|||
line-height: 48upx; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
>text{ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
.sl-status{ |
|||
margin-left: 24upx; |
|||
flex-shrink: 0; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: $themeColor; |
|||
} |
|||
|
|||
} |
|||
.svc-header{ |
|||
.sh-stadium{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
margin-bottom: 23upx; |
|||
padding-bottom: 24upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
>image { |
|||
margin-right: 14upx; |
|||
flex-shrink: 0; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
>view{ |
|||
flex-grow: 1; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
font-weight: 500; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
.svc-card-info{ |
|||
.sci-tit{ |
|||
margin-bottom: 14upx; |
|||
line-height: 44upx; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
} |
|||
.sci-pay-info{ |
|||
margin-top: 32upx; |
|||
padding-top: 29upx; |
|||
border-top: 2upx solid #D8D8D8; |
|||
.spi-total{ |
|||
text-align: right; |
|||
font-size: 36upx; |
|||
font-weight: 500; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
>text{ |
|||
font-weight: 400; |
|||
font-size: 28upx; |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue