Browse Source

完成在线商城订单线下订单模块UI

master
邓平艺 4 years ago
parent
commit
86fd97ab33
  1. 2
      pages.json
  2. 56
      pages/order/index/onlineorder.vue
  3. 6
      pages/user/my/center.vue

2
pages.json

@ -51,7 +51,7 @@
{ {
"path": "pages/order/index/onlineorder", "path": "pages/order/index/onlineorder",
"style": { "style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "在线商城订单",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },

56
pages/order/index/onlineorder.vue

@ -61,47 +61,24 @@
<view class="special_tab"> <view class="special_tab">
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs> <u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
</view> </view>
<view class="lf-p-30 lf-flex lf-w-100 lf-bg-white lf-m-b-30">
<u-icon name="search" class="search-icon"></u-icon>
<input class="rom-search" type="text" placeholder="请输入商品名称" />
</view>
<swiper :style="{height: autoHeight, width: '750rpx'}" :current="current" @change="swiperChange">
<swiper :style="{height: autoHeightTwo, width: '750rpx', background: '#fff'}" :current="current" @change="swiperChange">
<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex"> <swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex">
<scroll-view :style="{height: autoHeight}" class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<scroll-view :style="{height: autoHeightTwo}" class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<view v-for="(item2,index2) of tabItem.list" :key="index2" class="online-card">
<view class="lf-font-24 lf-color-777">
订单编号783974398749328
</view>
<view class="lf-m-t-30">
<text class="lf-iconfont icon-Group- lf-font-28"></text>
<text class="lf-color-black lf-font-28 lf-font-bold lf-m-l-10">精品超市</text>
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text>
<view class="item" v-for="(item, index) in 10" :key="index">
<view class="lf-row-between">
<text class="lf-font-36 lf-color-black lf-font-bold lf-color-price">-250</text>
<text class="lf-font-24 lf-color-555">线上-商城内消费</text>
</view> </view>
<view v-for="i of 5">
<view class="lf-m-t-30" style="display: flex;">
<image class="content-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
<view class="lf-m-l-15">
<view class="lf-color-333 lf-font-26 lf-line-2" style="max-width: 480rpx;">爱他美较大婴儿配方奶粉较大婴儿配方奶粉较大婴儿配方奶粉2段 900g</view>
<view class="lf-font-24 lf-color-777 lf-m-t-14 lf-row-between">
<view>1900g</view>
<view class="lf-font-32 lf-color-price">385</view>
</view>
</view>
</view>
<view class="lf-row-between lf-m-t-30 lf-m-b-50">
<view class="lf-font-24 lf-color-777">订单关闭</view>
<view class="lf-color-price lf-font-24">删除订单</view>
</view>
<view class="lf-row-between lf-m-t-20">
<text class="lf-font-24 lf-color-555">¥374.38</text>
<text class="lf-font-24 lf-color-777">2021-09-01 18:27:58</text>
</view> </view>
</view> </view>
<view class="loading-more lf-m-b-10"> <view class="loading-more lf-m-b-10">
<text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text> <text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text>
<lf-nocontent v-else></lf-nocontent> <lf-nocontent v-else></lf-nocontent>
<!-- <view>
{{tabItem.list.length}}
</view> -->
</view> </view>
@ -345,6 +322,9 @@
computed: { computed: {
autoHeight(){ autoHeight(){
return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx - 120rpx - 120rpx)`; return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx - 120rpx - 120rpx)`;
},
autoHeightTwo(){
return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx - 90rpx)`;
} }
}, },
onLoad(){ onLoad(){
@ -513,6 +493,18 @@
padding: 0 65rpx 0 65rpx; padding: 0 65rpx 0 65rpx;
} }
.item{
width: 686rpx;
height: max-content;
background: #F4F8F8;
border-radius: 10rpx;
// margin-bottom: 30rpx;
margin-top: 30rpx;
padding: 30rpx;
box-sizing: border-box;
line-height: 1;
}
/deep/.u-scroll-box { /deep/.u-scroll-box {
display: flex; display: flex;
justify-content: center; justify-content: center;

6
pages/user/my/center.vue

@ -53,12 +53,12 @@
<view class="lf-color-black lf-font-32 lf-font-bold"> <view class="lf-color-black lf-font-32 lf-font-bold">
商城订单 商城订单
</view> </view>
<view class="lf-flex">
<view class="lf-flex" @click="$url('/pages/order/index/onlineorder')">
<view class="lf-font-24 lf-color-777">全部订单</view><text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text> <view class="lf-font-24 lf-color-777">全部订单</view><text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
</view> </view>
</view> </view>
<view class="order-tag lf-flex-wrap"> <view class="order-tag lf-flex-wrap">
<view class="order-children" v-for="i of 4">
<view class="order-children" v-for="i of 4" @click="$url('/pages/order/index/onlineorder')">
<view class="function-tag"></view> <view class="function-tag"></view>
<view class="lf-color-black lf-font-28 lf-m-t-20">待付款</view> <view class="lf-color-black lf-font-28 lf-m-t-20">待付款</view>
</view> </view>
@ -120,7 +120,7 @@
},{ },{
name: '积分商城订单', name: '积分商城订单',
icon: 'icon-huiyuan', icon: 'icon-huiyuan',
path: ''
path: '/pages/point/exchangeRecord/exchangeRecord'
}] }]
} }
} }

Loading…
Cancel
Save