Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
18 Commits
1 Branch
0 Tags
5.0 MiB
 
 
 
 
 
Tree: 6bdc17b9f7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6bdc17b9f7'
${ noResults }
ec.uniapp-master/pages/order/index/onlineorder.vue

558 lines
17 KiB
Raw Blame History

<template>
<view>
<lf-nav :spreadOut="true" :showIcon="true" bgColor="white" title="在线商城订单"></lf-nav>
<view class="lf-row-between lf-bg-white">
<view class="online-tab" :class="online_tab==0?'online-active':''" @click="online_tab = 0">线上订单</view>
<view class="online-tab" :class="online_tab==1?'online-active':''" @click="online_tab = 1">线下订单</view>
</view>
<view v-if="online_tab == 0">
线上订单
</view>
<view v-else>
<view class="special_tab">
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
</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: '1200rpx', width: '750rpx'}" :current="current" @change="swiperChange">
<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex">
<scroll-view 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>
<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>1件；900g</view>
<view class="lf-font-32 lf-color-price">￥385</view>
</view>
</view>
</view>
<view class="lf-row-between lf-m-t-30">
<view class="lf-font-24 lf-color-777">订单关闭</view>
<view class="lf-color-price lf-font-24">删除订单</view>
</view>
</view>
</view>
<view class="loading-more lf-m-b-10">
<text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text>
<lf-nocontent v-else></lf-nocontent>
<!-- <view>
{{tabItem.list.length}}
</view> -->
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
online_tab: 1,
tab_list: [
{
id: 1,
name: '综合',
list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
],
isRefresher: false,
loadingClass: false,
loadingText: '正在加载中',
page: 1,
isPage: true
},
{
id: 2,
name: '销量',
list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
],
isRefresher: false,
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
},
{
id: 3,
name: '上新',
list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
],
isRefresher: false,
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
},
{
id: 4,
name: '价格',
list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
],
isRefresher: false,
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
}
],
current: 0,
windowHeight: 0,
loadingClass: false,
loadingText: '没有更多数据啦~'
}
},
methods: {
tabChange(index){
this.current = index;
this.clearTabItem();
this.getData();
},
getData() {
let tab_item = this.tab_list[this.current];
let isPage = false;
tab_item.isPage = isPage;
if(!isPage){
tab_item.loadingClass = false;
tab_item.loadingText = '没有更多数据啦~';
}
tab_item.isRefresher = false;
},
// 滑块下标值变化
swiperChange(event){
this.current = event.detail.current;
if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
},
// 页面触底，加载下一页
onScrolltolower(){
let tab_item = this.tab_list[this.current];
if(tab_item.isPage){
tab_item.page = tab_item.page + 1;
this.getData();
}
},
// scroll-view 下拉刷新
onRefresherrefresh(){
this.$u.throttle(() => {
this.clearTabItem();
this.getData();
}, 200);
},
clearTabItem(){
let tab_item = this.tab_list[this.current];
tab_item.page = 1;
tab_item.isPage = true;
tab_item.isRefresher = true;
tab_item.loadingClass = true;
tab_item.loadingText = '正在加载中';
tab_item.list = [];
this.$set(this.tab_list, this.current, tab_item);
// this.$refs.uWaterfallFather[this.current].clear();
}
},
onShow(){
this.windowHeight = getApp().globalData.windowHeight;
}
}
</script>
<style>
page {
background-color: #F8F8F8;
}
</style>
<style scoped lang="scss">
.content-img {
width: 130rpx;
height: 130rpx;
border-radius: 5rpx;
}
.online-card {
width: 686rpx;
height: auto;
background: #FFFFFF;
border-radius: 20rpx;
margin-bottom: 30rpx;
padding: 30rpx;
}
.online-tab {
width: 375rpx;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
color: #555555;
font-size: 32rpx;
}
.online-active {
background: #15716E;
color: #FFFFFF;
border-radius: 45rpx 45rpx 0rpx 0rpx;
}
//tab相关
.search-icon {
position: relative;
bottom: 0;
left: 54rpx;
}
/deep/.input-placeholder{
color: #777;
font-size: 28rpx;
}
.rom-search {
width: 686rpx;
height: 60rpx;
background: #F4F8F8;
border-radius: 30rpx;
padding-left: 74rpx;
font-size: 28rpx;
}
.goods-rom {
border-radius: 20rpx;
width: 333rpx;
height: 497rpx;
background-color: white;
box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
&:nth-child(2n) {
margin-right: 0;
}
&:nth-child(n + 3) {
margin-top: 20rpx;
}
}
.introduct {
padding: 0 0 30rpx 32rpx;
}
.com{
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0rpx 28rpx;
}
.shop-head {
width: 100%;
height: 400rpx;
position: relative;
}
.shop-flex {
display: flex;
padding: 30rpx;
}
.shop-title {
width: 686rpx;
height: 274rpx;
border-radius: 20rpx;
background-color: white;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
margin: 0 auto;
position: relative;
top: -32rpx;
}
.shop-img {
width: 90rpx;
height: 90rpx;
margin-right: 15rpx;
}
.shop-function {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
font-size: 40rpx;
}
.function-total {
display: flex;
justify-content: space-between;
padding: 0 65rpx 0 65rpx;
}
/deep/.u-scroll-box {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
background-color: #15716E!important;
width: 80rpx!important;
position: absolute;
height: 10rpx;
left: 0;
border-radius: 8rpx 8rpx 0px 0px!important;
bottom: -12rpx;
}
/deep/ .u-tab-item {
font-size: 28rpx!important;
}
//价格筛选伪类
// /deep/.special_tab .u-tab-item:nth-child(4n) ::after{
// font-size: 48rpx!important;
// content: '';
// color: red;
// }
// loading加载
.loading-more {
align-items: center;
justify-content: center;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: 28rpx;
color: #999;
}
.loading-more-text::before {
content: '';
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
background-size: 100%;
}
@keyframes weuiLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
.list-warter {
border-radius: 20rpx;
margin: 10px 5px;
margin-top: 0px;
background-color: #ffffff;
// padding: 8px;
position: relative;
overflow: hidden;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
}
.u-close {
position: absolute;
top: 32rpx;
right: 32rpx;
}
.list-image {
width: 100%;
border-radius: 4px;
}
.list-title {
font-size: 28rpx;
font-weight: bold;
color: $u-main-color;
}
.list-label{
position: absolute;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
width: 140rpx;
height: 48rpx;
border-radius: 20rpx 0rpx 0rpx 0rpx;
font-size: 22rpx;
color: #FFFFFF;
line-height: 48rpx;
text-align: center;
}
.list-tag {
display: flex;
margin-top: 5px;
}
.list-tag-owner {
background-color: $u-type-error;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.list-tag-text {
border: 1px solid $u-type-primary;
color: $u-type-primary;
margin-left: 10px;
border-radius: 50rpx;
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
border-radius: 50rpx;
font-size: 20rpx;
}
.list-price {
font-size: 30rpx;
color: $u-type-error;
margin-top: 5px;
display: flex;
align-items: center;
}
</style>