379 lines
10 KiB
Vue
379 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<view class="areaPic">
|
||
<image style="border-radius: 20rpx;" src="https://img2.baidu.com/it/u=1945464906,1635022113&fm=26&fmt=auto"></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="storeplace">门店交易总额：</text><text style="color: #ED1C24;">￥<text class="commissonMoney">2000</text></text></view>
|
||
<view><text class="storeplace">提成金额：</text><text style="color: #ED1C24;">￥<text class="commissonMoney">2000</text></text></view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item class="swiper-item">
|
||
<view class="orderList">
|
||
<view class="pic_of_Store">
|
||
<image src="https://img2.baidu.com/it/u=1945464906,1635022113&fm=26&fmt=auto"></image>
|
||
</view>
|
||
<view class="store">
|
||
<view><text class="storename">钱隆首府取货点</text></view>
|
||
<view><text class="storeplace">门店地址：青秀区人民中路</text></view>
|
||
<view><text class="storeplace">门店交易总额：</text><text style="color: #ED1C24;">￥<text class="commissonMoney">2000</text></text></view>
|
||
<view><text class="storeplace">提成金额：</text><text style="color: #ED1C24;">￥<text class="commissonMoney">2000</text></text></view>
|
||
</view>
|
||
</view>
|
||
<view class="orderList">
|
||
<view class="pic_of_Store">
|
||
<image src="https://img2.baidu.com/it/u=1945464906,1635022113&fm=26&fmt=auto"></image>
|
||
</view>
|
||
<view class="store">
|
||
<view><text class="storename">CC杂货铺</text></view>
|
||
<view><text class="storeplace">门店地址：</text><text class="storeplace">大学东路100号</text></view>
|
||
<view><text class="storeplace">门店交易总额：</text><text style="color: #ED1C24;">￥<text class="commissonMoney">2000</text></text></view>
|
||
<view><text class="storeplace">提成金额：</text><text style="color: #ED1C24;">￥<text class="commissonMoney">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">门店地址：大学东路100号</text></view>
|
||
<view><text class="storeplace">门店交易总额：</text><text style="color: #ED1C24;">￥<text class="commissonMoney">2000</text></text></view>
|
||
<view><text class="storeplace">提成金额：</text><text style="color: #ED1C24;">￥<text class="commissonMoney">2000</text></text></view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item class="swiper-item">
|
||
<view class="myriders">
|
||
<view class="mysender">
|
||
<view class="senderinfo">
|
||
<view class="sendername">张大强</view>
|
||
<view class="sendername2">骑手配送区域</view>
|
||
<view class="sendingAddress">北京市清华园</view>
|
||
</view>
|
||
<view class="senderinfo">
|
||
<view class="sendingAddress">已配送单数：<text class="commissonMoney">434</text></view>
|
||
<view class="sendingAddress">累计提成：<text style="color:#ED1C24">￥<text class="commissonMoney">900</text></text></view>
|
||
</view>
|
||
</view>
|
||
<view class="mysender">
|
||
<view class="senderinfo">
|
||
<view class="sendername">李牛</view>
|
||
<view class="sendername2">骑手配送区域</view>
|
||
<view class="sendingAddress">南宁西乡塘</view>
|
||
</view>
|
||
<view class="senderinfo">
|
||
<view class="sendingAddress">已配送单数：<text class="commissonMoney">123</text></view>
|
||
<view class="sendingAddress">累计提成：<text style="color:#ED1C24">￥<text class="commissonMoney">6000</text></text></view>
|
||
</view>
|
||
</view>
|
||
<view class="mysender">
|
||
<view class="senderinfo">
|
||
<view class="sendername">丁紫雷</view>
|
||
<view class="sendername2">骑手配送区域</view>
|
||
<view class="sendingAddress">重庆山城</view>
|
||
</view>
|
||
<view class="senderinfo">
|
||
<view class="sendingAddress">已配送单数：<text class="commissonMoney">323</text></view>
|
||
<view class="sendingAddress">累计提成：<text style="color:#ED1C24">￥<text class="commissonMoney">9000</text></text></view>
|
||
</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%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-item class="swiper-item">
|
||
<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: '违规记录',
|
||
|
||
},
|
||
{
|
||
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;
|
||
line-height: 60rpx;
|
||
|
||
}
|
||
.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%;
|
||
border-radius: 20px;
|
||
margin-top: 6px;
|
||
|
||
}
|
||
.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;
|
||
justify-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;
|
||
}
|
||
.myriders{
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
margin-left: 4%;}
|
||
.mysender{
|
||
width: 95%;
|
||
display: flex;
|
||
height: 80px;
|
||
background-color: #ffffff;
|
||
margin-top: 20px;
|
||
flex-direction: column;
|
||
border: solid 2px #18B566;
|
||
border-radius: 10px;
|
||
|
||
}
|
||
.senderinfo{
|
||
width: 100%;
|
||
height: 50%;
|
||
display: flex;
|
||
border-radius: 10px;
|
||
|
||
}
|
||
.sendername{
|
||
height: 100%;
|
||
width:25%;
|
||
color: #000033;
|
||
display: flex;
|
||
background-color: #ffffff;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10px;
|
||
font-size: 16px;
|
||
}
|
||
.sendername2{
|
||
height: 100%;
|
||
width:25%;
|
||
color: #000000;
|
||
display: flex;
|
||
background-color: #ffffff;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10px;
|
||
|
||
}
|
||
.sendingAddress{
|
||
height: 100%;
|
||
width: 50%;
|
||
background-color: #ffffff;
|
||
color: #000000;
|
||
align-items: center;
|
||
justify-content: center;
|
||
display: flex;
|
||
border-radius: 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{
|
||
font-size: 17px;
|
||
color: #ff0000
|
||
}
|
||
.order_num{
|
||
color: #303030;
|
||
font-size: 15px;
|
||
}
|
||
.storeplace{
|
||
color: #303030;
|
||
font-size: 15px;
|
||
}
|
||
.storeplace2{
|
||
color: #303030;
|
||
font-size: 13px;
|
||
}
|
||
.storename{
|
||
color: #333333;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
}
|
||
</style>
|