112 lines
3.0 KiB
Vue
112 lines
3.0 KiB
Vue
<template>
|
||
<view>
|
||
<view class="top">
|
||
<view class="top_top">
|
||
<view class="upText">收益（元）</view>
|
||
<view class="boldText">520.00</view>
|
||
</view>
|
||
<view class="top_bottom">
|
||
<view class="bottomText2">
|
||
<view class="upText">收款（元）</view>
|
||
<view class="downText">520.00</view>
|
||
</view>
|
||
<view class="bottomText2">
|
||
<view class="upText">退款（元）</view>
|
||
<view class="downText">0.00</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center">
|
||
<view class="top_bottom">
|
||
<view class="bottomText2">
|
||
<view class="centerText">收款订单</view>
|
||
<view class="downText">520<text class="bi">笔</text></view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="bottomText2">
|
||
<view class="centerText">退款订单</view>
|
||
<view class="downText">0<text class="bi">笔</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-for="(item, index) in orderList" :key="index">
|
||
<view class="bottom">
|
||
<view class="numStyle">订单编号：{{item.bianhao}}</view>
|
||
<view class="divv">
|
||
<text>收益金额</text>
|
||
<view class="divView">
|
||
<view style="margin-bottom: 15rpx;font-size: 30rpx;">￥{{item.jine}}</view>
|
||
<view>{{item.shijian}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="div">
|
||
<text>消费门店</text>
|
||
<view>{{item.mendian}}</view>
|
||
</view>
|
||
<view class="div">
|
||
<text>支付方式</text>
|
||
<img src="https://img0.baidu.com/it/u=1471529724,2678837426&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
|
||
alt="图标" />
|
||
<view>{{item.fangshi}}</view>
|
||
</view>
|
||
<view class="div">
|
||
<text>支付状态</text>
|
||
<view>{{item.zhuangtai}}</view>
|
||
</view>
|
||
<view class="div">
|
||
<text>创建时间</text>
|
||
<view>{{item.shijian}}</view>
|
||
</view>
|
||
<view class="line2"></view>
|
||
<view class="top_bottom">
|
||
<view class="bottomText2" @click="remark(item.bianhao)">
|
||
<view style="margin: 20rpx 0;">备注</view>
|
||
</view>
|
||
<view class="line3"></view>
|
||
<view class="bottomText2" @click="refund(item.bianhao)">
|
||
<view style="margin-top: 20rpx;">退款</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderList: [{
|
||
bianhao: '1234567891011',
|
||
jine: 65.1,
|
||
mendian: '真彩图文',
|
||
tubiao: 'https://img0.baidu.com/it/u=1471529724,2678837426&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||
fangshi: '微信支付',
|
||
zhuangtai: '已支付',
|
||
shijian: '2025-06-06 18:10:08'
|
||
}, {
|
||
bianhao: '1110987654321',
|
||
jine: 66.0,
|
||
mendian: '真彩图文',
|
||
tubiao: 'https://img0.baidu.com/it/u=1471529724,2678837426&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||
fangshi: '微信支付',
|
||
zhuangtai: '已退款',
|
||
shijian: '2025-06-06 18:10:08'
|
||
}]
|
||
}
|
||
},
|
||
|
||
methods:{
|
||
remark(id){
|
||
console.log('-----' + id + '备注')
|
||
},
|
||
refund(id){
|
||
console.log('-----' + id + '退款')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |