|
|
@@ -0,0 +1,310 @@
|
|
|
+<template>
|
|
|
+ <view class="page" :style="{'min-height':(h-th)+'px'}">
|
|
|
+ <u-navbar bgColor="transparent">
|
|
|
+ <view class="u-nav-slot" slot="left">
|
|
|
+ <text>{{name}}</text>
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ <view class="bg" :style="{'padding-top':(mt+10)+'px'}">
|
|
|
+ <view class="dataBox">
|
|
|
+ <view class="item">
|
|
|
+ <view>成交金额</view>
|
|
|
+ <view>￥<text>238</text></view>
|
|
|
+ <view>昨日¥900.78</view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view>成交订单数</view>
|
|
|
+ <view>￥<text>238</text></view>
|
|
|
+ <view>昨日8</view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view>退款金额</view>
|
|
|
+ <view>￥<text>238</text></view>
|
|
|
+ <view>昨日¥900.78</view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view>退款订单数</view>
|
|
|
+ <view>￥<text>238</text></view>
|
|
|
+ <view>昨日8</view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view>已购商品数量</view>
|
|
|
+ <view>￥<text>238</text></view>
|
|
|
+ <view>昨日78</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="numberData">
|
|
|
+ <view>
|
|
|
+ <text>0</text>
|
|
|
+ <text>待付款</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text>0</text>
|
|
|
+ <text>待使用</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text>0</text>
|
|
|
+ <text>已完成</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text>0</text>
|
|
|
+ <text>已取消</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text>0</text>
|
|
|
+ <text>退款售后</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="menus">
|
|
|
+ <view @click="toHref('/pagesHouse/home/bill')">
|
|
|
+ <image :src="icons[0]"></image>
|
|
|
+ <text>交易账单</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <image :src="icons[1]"></image>
|
|
|
+ <text>资金账单</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <image :src="icons[2]"></image>
|
|
|
+ <text>数据统计</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="tit">
|
|
|
+ <text>订单列表</text>
|
|
|
+ <text>{{new Date().Format('yyyy-MM-dd')}}</text>
|
|
|
+ <u-icon @click="more()" name="arrow-right" label="查看全部" labelPos="left" labelSize="13px" labelColor="#808080" color="#AAA"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="li first">
|
|
|
+ <text>订单信息</text>
|
|
|
+ <text>销量</text>
|
|
|
+ <text>成交金额</text>
|
|
|
+ </view>
|
|
|
+ <view class="li" v-for="(item,index) in data" :key="index">
|
|
|
+ <view class="avatar">
|
|
|
+ <image :src="emg"></image>
|
|
|
+ <text>黄山村渔家乐12客位体验渔民出海</text>
|
|
|
+ </view>
|
|
|
+ <text>897</text>
|
|
|
+ <text>￥765</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ data: [1, 2, 3, 4, 5],
|
|
|
+ name: '黄沙村渔家乐',
|
|
|
+ emg: 'https://i.ringzle.com/file/20240224/91173dde1cb44b139129e12ad4971f1d.png',
|
|
|
+ icons: ['https://i.ringzle.com/file/20240224/70ab9f9d1a144c95927dedc6e84bcce7.png',
|
|
|
+ 'https://i.ringzle.com/file/20240224/3f990c250f444ac9a5d9f334f322c98e.png',
|
|
|
+ 'https://i.ringzle.com/file/20240224/7ca1bfa6e348438e83edc5af0589f847.png'
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ toHref(url){
|
|
|
+ uni.redirectTo({
|
|
|
+ url:url
|
|
|
+ })
|
|
|
+ },
|
|
|
+ more(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:"/pagesHouse/home/orderList"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .page {
|
|
|
+ background: #F3F4F4;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ width: calc(100% - 36rpx);
|
|
|
+ margin: 20rpx auto;
|
|
|
+ padding: 0 20rpx 6rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 24rpx;
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ padding: 40rpx 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ text {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #111;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-left: 17rpx;
|
|
|
+ color: #666666;
|
|
|
+ width: 100px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .li {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 60% 20% 20%;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #333;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ image {
|
|
|
+ width: 90rpx;
|
|
|
+ min-width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ width: 100px;
|
|
|
+ word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 33rpx;
|
|
|
+ /* 这里是超出几行省略 */
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.first {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 0 18rpx;
|
|
|
+ background: url(https://i.ringzle.com/file/20240224/343febca7aa149c5aa0ee8c9365b2d3e.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .menus {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 184rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #333;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+ &>view {
|
|
|
+ image {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .numberData {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 150rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ background-color: #007A69;
|
|
|
+ color: #fff;
|
|
|
+ align-items: center;
|
|
|
+ margin: 20rpx 0;
|
|
|
+
|
|
|
+ &>view {
|
|
|
+
|
|
|
+ text {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #F0F8F6;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dataBox {
|
|
|
+ padding: ;
|
|
|
+ display: grid;
|
|
|
+ /* 宽度平均分成4份 */
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ /* 高度平均分成3份 */
|
|
|
+ grid-template-rows: repeat(2, 1fr);
|
|
|
+ gap: 12rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 230rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ padding: 24rpx 0 0 18rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: rgba(255, 255, 255, .48);
|
|
|
+ color: #777;
|
|
|
+
|
|
|
+ &>view:nth-child(2) {
|
|
|
+ color: #111;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 36rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 12rpx 0;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: -4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-nav-slot {
|
|
|
+ &>text {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
