290 lines
8.3 KiB
Vue
290 lines
8.3 KiB
Vue
<template>
|
||
<view>
|
||
<!-- <u-navbar title-color="#fff" back-icon-color="#ffffff"
|
||
:is-back="true"
|
||
:background="background"
|
||
:back-text-style="{color: '#fff'}"
|
||
:title="title"
|
||
:back-icon-name="backIconName"
|
||
:back-text="backText">
|
||
</u-navbar> -->
|
||
<!-- <view class="areaPic">
|
||
<image style="border-radius: 20rpx;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F10998212738%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638439546&t=37da2d714ac7228094c6f4179783b9e0"></image>
|
||
</view> -->
|
||
<view class="wrap">
|
||
<view class="u-tabs-box">
|
||
<u-tabs-swiper activeColor="#00aa00" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
|
||
</view>
|
||
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
|
||
<swiper-item class="swiper-item">
|
||
<view class="orderList">
|
||
<view class="pic_of_Store">
|
||
<image src="https://i6.mifile.cn/b2c-men/oms/5/64/59ccc2b175c7f.jpg"></image>
|
||
</view>
|
||
<view class="store">
|
||
<view><text class="storename">好和家园菜鸟驿站</text></view>
|
||
<view><text class="storeplace">门店地址：大学东路100号</text></view>
|
||
<view><text class="order_num">门店总订单数：99单</text></view>
|
||
<view>门店交易总额：<text class="commissonMoney">￥<text style="font-size: 18px;">2000</text></text></view>
|
||
<view>提成金额：<text class="commissonMoney">￥<text style="font-size: 18px;">2000</text></text></view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item class="swiper-item">
|
||
<view class="orderList">
|
||
<view class="pic_of_Store">
|
||
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.kybimg.com%2Fforum%2F202006%2F12%2F090943mlvyeifcrrphznvr.jpeg&refer=http%3A%2F%2Fimg2.kybimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638439490&t=a9de43b4c243c4710b0a9815bd4a4ea4"></image>
|
||
</view>
|
||
<view class="store">
|
||
<view><text class="storename">清华大学门店</text></view>
|
||
<view><text class="storeplace">门店地址：大学东路100号</text></view>
|
||
<view>门店交易总额：<text class="commissonMoney">￥<text style="font-size: 18px;">2000</text></text></view>
|
||
<view>提成金额：<text class="commissonMoney">￥<text style="font-size: 18px;">2000</text></text></view>
|
||
</view>
|
||
</view>
|
||
<view class="orderList">
|
||
<view class="pic_of_Store">
|
||
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1101%252F5e420da5j00r1w6fz002wc000hs00b9m.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638439282&t=ef66cdd4c5bdf63bce1fadf1368df4ed"></image>
|
||
</view>
|
||
<view class="store">
|
||
<view><text class="storename">CC杂货铺</text></view>
|
||
<view><text class="storeplace">门店地址：大学东路100号</text></view>
|
||
<view>门店交易总额：<text class="commissonMoney">￥<text style="font-size: 18px;">2000</text></text></view>
|
||
<view>提成金额：<text class="commissonMoney">￥<text style="font-size: 18px;">2000</text></text></view>
|
||
</view>
|
||
</view>
|
||
<view class="orderList">
|
||
<view class="pic_of_Store">
|
||
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.zp365.com%2Fzygw%2Flpgl%2F107836404607330.jpg&refer=http%3A%2F%2Fimage.zp365.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638091983&t=ef8474b167d75feb66208684f63461a4"></image>
|
||
</view>
|
||
<view class="store">
|
||
<view><text class="storename">钱隆首府取货点</text></view>
|
||
<view><text class="storeplace">门店地址：青秀区人民中路</text></view>
|
||
<view>门店交易总额：<text class="commissonMoney">￥<text style="font-size: 18px;">2000</text></text></view>
|
||
<view>提成金额：<text class="commissonMoney">￥<text style="font-size: 18px;">2000</text></text></view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item class="swiper-item">
|
||
<view>
|
||
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item class="swiper-item">
|
||
<view class="orderList">
|
||
<view class="pic_of_Store">
|
||
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.zp365.com%2Fzygw%2Flpgl%2F107836404607330.jpg&refer=http%3A%2F%2Fimage.zp365.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638091983&t=ef8474b167d75feb66208684f63461a4"></image>
|
||
</view>
|
||
<view class="store2">
|
||
<view><text class="storename">违规类型：偷吃店内食品</text></view>
|
||
<view><text class="storeplace">违规内容：</text>
|
||
</view>
|
||
<view><text class="storeplace2">当你发现时间是贼了，他早已偷光你的选择。爱情更像是一场高烧，思念是紧跟着都好不了的咳。</text>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: '我的地区',
|
||
backText: '返回',
|
||
backIconName: 'nav-back',
|
||
isBack: true,
|
||
background: {
|
||
backgroundImage: 'linear-gradient(to right, #146930 , #77b633)',
|
||
|
||
},
|
||
orderList: [[], [], [], []],
|
||
list: [
|
||
{
|
||
name: '我的地区'
|
||
},
|
||
{
|
||
name: '订单统计'
|
||
},
|
||
{
|
||
name: '提现明细'
|
||
},
|
||
{
|
||
name: '违规记录',
|
||
|
||
}
|
||
],
|
||
current: 0,
|
||
swiperCurrent: 0,
|
||
tabsHeight: 0,
|
||
dx: 0,
|
||
loadStatus: ['loadmore','loadmore','loadmore','loadmore'],
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getOrderList(0);
|
||
this.getOrderList(1);
|
||
this.getOrderList(3);
|
||
},
|
||
methods: {
|
||
reachBottom() {
|
||
// 此tab为空数据
|
||
if(this.current != 2) {
|
||
this.loadStatus.splice(this.current,1,"loading")
|
||
setTimeout(() => {
|
||
this.getOrderList(this.current);
|
||
}, 1200);
|
||
}
|
||
},
|
||
// 页面数据
|
||
getOrderList(idx) {
|
||
for(let i = 0; i < 5; i++) {
|
||
let index = this.$u.random(0, this.dataList.length - 1);
|
||
let data = JSON.parse(JSON.stringify(this.dataList[index]));
|
||
data.id = this.$u.guid();
|
||
this.orderList[idx].push(data);
|
||
}
|
||
this.loadStatus.splice(this.current,1,"loadmore")
|
||
},
|
||
// tab栏切换
|
||
change(index) {
|
||
this.swiperCurrent = index;
|
||
this.getOrderList(index);
|
||
},
|
||
transition({ detail: { dx } }) {
|
||
this.$refs.tabs.setDx(dx);
|
||
},
|
||
animationfinish({ detail: { current } }) {
|
||
this.$refs.tabs.setFinishCurrent(current);
|
||
this.swiperCurrent = current;
|
||
this.current = current;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
/* #ifndef H5 */
|
||
page {
|
||
height: 100%;
|
||
background-color: #f2f2f2;
|
||
}
|
||
/* #endif */
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.orderList{
|
||
display: flex;
|
||
background-color: #f3f3f3;
|
||
width: 92%;
|
||
height: 120px;
|
||
border-radius: 20px;
|
||
margin-top: 20px;
|
||
margin-left: 4%;
|
||
box-shadow: 2px 2px #DCDFE6;
|
||
|
||
}
|
||
.addressAndDealsituation{
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.pic_of_Store{
|
||
width: 40%;
|
||
display: flex;
|
||
height: 100%;
|
||
justify-content: center;
|
||
|
||
}
|
||
.pic_of_Store image{
|
||
width: 95%;
|
||
height: 90%;
|
||
margin-top: 6px;
|
||
border-radius: 20px;
|
||
|
||
}
|
||
.store{
|
||
display: flex;
|
||
width: 60%;
|
||
height: 100%;
|
||
flex-direction: column;
|
||
line-height: 20px;
|
||
justify-content: center;
|
||
margin-left: 5px;
|
||
}
|
||
.store2{
|
||
display: flex;
|
||
width: 60%;
|
||
height: 100%;
|
||
flex-direction: column;
|
||
line-height: 20px;
|
||
margin-left: 5px;
|
||
margin-top: 10rpx;
|
||
align-content: center;
|
||
margin-left: 15rpx
|
||
}
|
||
.TransactionAmount{
|
||
margin: 10px;
|
||
display: flex;
|
||
height: 28px;
|
||
width:100%;
|
||
position:absolute;
|
||
top: 150px;
|
||
}
|
||
.right{
|
||
margin: 10px;
|
||
margin-top: 20px;
|
||
color: #F0AD4E;
|
||
}
|
||
.pickUpadress{
|
||
margin-top: 20px;
|
||
margin-left: 10px;
|
||
}
|
||
.areaPic{
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
.areaPic image{
|
||
width: 100%;
|
||
margin: 5%;
|
||
height: 200px;
|
||
}
|
||
.wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: calc(100vh - var(--window-top));
|
||
width: 100%;
|
||
}
|
||
.swiper-box {
|
||
flex: 1;
|
||
}
|
||
.swiper-item {
|
||
height: 100%;
|
||
}
|
||
.commissonMoney{
|
||
|
||
color: #ff0000
|
||
}
|
||
.order_num{
|
||
color: #303030;
|
||
font-size: 15px;
|
||
}
|
||
.storeplace{
|
||
color: #303030;
|
||
font-size: 15px;
|
||
}
|
||
.storeplace2{
|
||
color: #303030;
|
||
font-size: 13px;
|
||
}
|
||
.storename{
|
||
color: #303030;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
}
|
||
</style>
|