第一次提交
This commit is contained in:
gxwebsoft
289
package/MyArea/MyArea.vue
Normal file
289
package/MyArea/MyArea.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user