修改我的推广店铺页面和制作我的店铺列表页面

This commit is contained in:
wangxiaowei 2024-08-19 17:42:59 +08:00
parent 16f3e8b229
commit d894e439d6
5 changed files with 372 additions and 13 deletions

@ -369,3 +369,7 @@ export function makeMyWxImage() {
export function localBalance(data) {
return request.post('pay/localBalance', data)
}
export function newShops(params) {
return request.get('user/newShops', {params})
}

@ -0,0 +1,302 @@
<template>
<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="downOption"
@down="downCallback">
<view class="user-fans">
<view class="header">
<view class="flex row-center bg-white filter-date">
<view>
<input type="text" v-model="startDate" placeholder="起止时间" @click="showStartTime = true" :disabled="true">
</view>
<view class="line"></view>
<view>
<input type="text" v-model="endDate" placeholder="截止时间" @click="showEndTime = true" :disabled="true">
</view>
</view>
<view class="top-bar flex bg-white md">
<view class="bar-item flex row-center" :class="{'item-active': active == 'all'}" @tap="changeTab('all')">全部粉丝
</view>
<view class="bar-item flex row-center" :class="{'item-active': active == 'first'}" @tap="changeTab('first')">
一级粉丝</view>
<view class="bar-item flex row-center" :class="{'item-active': active == 'second'}" @tap="changeTab('second')">
二级粉丝</view>
</view>
<view class="sort-bar flex bg-white">
<view class="sort-bar-item flex row-center" @tap="sortChange(0)">
<view :class="sortType == 0 ? 'item-active' : ''">团队排序</view>
<view class="arrow-icon flex-col col-center row-center">
<u-icon name="arrow-up-fill"
:color="fansSort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
<u-icon name="arrow-down-fill"
:color="fansSort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
</view>
</view>
<view class="sort-bar-item flex row-center" @tap="sortChange(1)">
<view :class="sortType == 1 ? 'item-active' : ''">金额排序</view>
<view class="arrow-icon flex-col col-center row-center">
<u-icon name="arrow-up-fill"
:color="moneySort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
<u-icon name="arrow-down-fill"
:color="moneySort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
</view>
</view>
<view class="sort-bar-item flex row-center" @tap="sortChange(2)">
<view :class="sortType == 2 ? 'item-active' : ''">订单排序</view>
<view class="arrow-icon flex-col col-center row-center">
<u-icon name="arrow-up-fill"
:color="orderSort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
<u-icon name="arrow-down-fill"
:color="orderSort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
</view>
</view>
</view>
</view>
<view class="content">
<view class="card-box p-t-20">
<view v-for="(item, index) in fansList" :key="index" class="card-item flex row-between bg-white p-20">
<view class="flex">
<u-image :src="item.avatar" border-radius="50%" width="100rpx" height="100rpx" />
<view class="fans-info m-l-20">
<view class="fans-name bold line-1">{{item.nickname}}</view>
<view class="flex lighter m-t-20">
<view v-if="item.mobile" class="m-r-20">{{item.mobile}}</view>
<view>{{item.create_time}}</view>
</view>
</view>
</view>
<view class="flex-col xs flex-none m-l-20">
<view class="msg"><span class="primary">{{item.fans_team}} </span>人</view>
<view class="m-t-5 msg"><span>{{item.fans_order}} </span>单</view>
<view class="m-t-5 msg"><span>{{item.fans_money}} </span>元</view>
</view>
</view>
</view>
</view>
</view>
<u-picker mode="time" v-model="showStartTime" @confirm="startTimeChange"></u-picker>
<u-picker mode="time" v-model="showEndTime" @confirm="endTimeChange"></u-picker>
</mescroll-body>
</template>
<script>
import {
sortType,
} from '@/utils/type';
import {
getUserFans
} from '@/api/user';
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
data() {
return {
upOption: {
empty: {
icon: 'https://zjeloong.oss-cn-hangzhou.aliyuncs.com/uniapp/order_null.png',
tip: '暂无相关数据', // 提示
}
},
active: 'all',
sortType: -1,
keyword: "",
fansSort: sortType.NONE,
moneySort: sortType.NONE,
orderSort: sortType.NONE,
fansList: [],
startDate: '',
endDate: '',
showStartTime: false,
showEndTime: false
};
},
methods: {
onRefresh() {
this.fansList = []
this.mescroll.resetUpScroll();
},
// 上拉加载
upCallback(page) {
const {
fansSort,
moneySort,
orderSort,
active,
keyword,
} = this;
const params = {
type: active,
keyword,
fans: fansSort,
money: moneySort,
order: orderSort,
page_size: page.size,
page_no: page.num,
};
getUserFans(params).then(({
data
}) => {
if (page.num == 1) this.fansList = [];
const curPageData = data.list;
const curPageLen = curPageData.length;
const hasNext = !!data.more;
this.fansList = this.fansList.concat(curPageData);
this.mescroll.endSuccess(curPageLen, hasNext);
}).catch(() => {
this.mescroll.endErr()
})
},
changeTab(val) {
this.active = val
this.onRefresh()
},
// 排序状态变化
sortChange(type) {
let {
fansSort,
moneySort,
orderSort
} = this;
this.sortType = parseInt(type)
switch (this.sortType) {
case 0:
// 团队排序
if (fansSort == sortType.DESC || fansSort == sortType.NONE) {
this.fansSort = sortType.ASC;
this.moneySort = sortType.NONE
this.orderSort = sortType.NONE
} else if (fansSort == sortType.ASC) {
this.fansSort = sortType.DESC;
this.moneySort = sortType.NONE;
this.orderSort = sortType.NONE;
}
break;
case 1:
// 金额排序
if (moneySort == sortType.DESC || moneySort == sortType.NONE) {
this.moneySort = sortType.ASC;
this.fansSort = sortType.NONE;
this.orderSort = sortType.NONE
} else if (moneySort == sortType.ASC) {
this.moneySort = sortType.DESC;
this.fansSort = sortType.NONE;
this.orderSort = sortType.NONE;
}
break;
case 2:
// 订单排序
if (orderSort == sortType.DESC || orderSort == sortType.NONE) {
this.orderSort = sortType.ASC;
this.moneySort = sortType.NONE;
this.fansSort = sortType.NONE;
} else if (orderSort == sortType.ASC) {
this.orderSort = sortType.DESC;
this.moneySort = sortType.NONE;
this.fansSort = sortType.NONE;
}
break;
}
this.onRefresh()
},
startTimeChange(info) {
this.startDate = info["year"]+"-"+info["month"]+"-"+info["day"]
},
endTimeChange(info) {
if (!this.startDate) {
return this.$toast({
title: '请选择开始时间'
});
}
this.endDate = info["year"]+"-"+info["month"]+"-"+info["day"]
}
}
};
</script>
<style lang="scss">
.user-fans {
.header {
.top-bar {
padding: 18rpx 50rpx;
height: 100rpx;
.bar-item {
flex: 1;
padding: 0 30rpx;
height: 58rpx;
&:not(:last-of-type) {
margin-right: 54rpx;
}
}
.item-active {
color: white;
background-color: $-color-primary;
border-radius: 100rpx;
}
}
.sort-bar {
height: 80rpx;
.sort-bar-item {
flex: 1;
.arrow-icon {
transform: scale(0.36);
}
.item-active {
color: $-color-primary;
}
}
}
}
}
.content {
.card-box {
.card-item {
.fans-name {
width: 500rpx;
}
&:not(:last-of-type) {
border-bottom: $-solid-border;
}
}
}
}
.filter-date {
padding: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
view {
width: 100%;
input {
text-align: center;
border-radius: 10rpx;
padding: 10rpx 0;
}
}
.line {
width: 6%;
margin: 0 10rpx;
border-bottom: 1px solid #000000;
}
}
</style>

@ -27,10 +27,16 @@
</view> -->
<view class="sort-bar flex bg-white">
<view class="sort-bar-item flex row-center" @click="onChangType(1)">
<view :class="active == 1 ? 'item-active' : ''">企业入驻</view>
<view class="item-num">
<view :class="active == 1 ? 'item-active' : ''">企业入驻</view>
<view class="num" v-if="localStoreNum > 0">{{companyNum}}</view>
</view>
</view>
<view class="sort-bar-item flex row-center" @click="onChangType(2)">
<view :class="active == 2 ? 'item-active' : ''">本地生活商家</view>
<view class="item-num">
<view :class="active == 2 ? 'item-active' : ''">本地生活商家</view>
<view class="num" v-if="localStoreNum > 0">{{localStoreNum}}</view>
</view>
</view>
</view>
</view>
@ -40,18 +46,18 @@
<view class="flex">
<u-image :src="item.avatar" border-radius="50%" width="100rpx" height="100rpx" />
<view class="fans-info m-l-20">
<view class="fans-name bold line-1">{{item.nickname}}</view>
<view class="flex lighter m-t-20">
<view v-if="item.mobile" class="m-r-20">{{item.mobile}}</view>
<view>{{item.create_time}}</view>
</view>
<view class="fans-name bold line-1">{{item.name}}</view>
<!-- <view class="flex lighter m-t-20"> -->
<!-- <view v-if="item.mobile" class="m-r-20">{{item.mobile}}</view> -->
<!-- <view>{{item.create_time}}</view> -->
<!-- </view> -->
</view>
</view>
<view class="flex-col xs flex-none m-l-20">
<!-- <view class="flex-col xs flex-none m-l-20">
<view class="msg"><span class="primary">{{item.fans_team}} </span>人</view>
<view class="m-t-5 msg"><span>{{item.fans_order}} </span>单</view>
<view class="m-t-5 msg"><span>{{item.fans_money}} </span>元</view>
</view>
</view> -->
</view>
</view>
</view>
@ -64,7 +70,8 @@
sortType,
} from '@/utils/type';
import {
getSpreadStore
getSpreadStore,
newShops
} from '@/api/user';
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
@ -82,7 +89,9 @@
keyword: "",
moneySort: sortType.NONE,
orderSort: sortType.NONE,
fansList: []
fansList: [],
companyNum: 0,
localStoreNum: 0
};
},
methods: {
@ -107,7 +116,7 @@
page_size: page.size,
page_no: page.num,
};
getSpreadStore(params).then(({
newShops(params).then(({
data
}) => {
if (page.num == 1) this.fansList = [];
@ -119,6 +128,19 @@
}).catch(() => {
this.mescroll.endErr()
})
// getSpreadStore(params).then(({
// data
// }) => {
// if (page.num == 1) this.fansList = [];
// const curPageData = data.list;
// const curPageLen = curPageData.length;
// const hasNext = !!data.more;
// this.fansList = this.fansList.concat(curPageData);
// this.mescroll.endSuccess(curPageLen, hasNext);
// }).catch(() => {
// this.mescroll.endErr()
// })
},
@ -225,4 +247,26 @@
}
}
}
.item-num {
position: relative;
&:first-child {
padding-right: 50rpx;
font-weight: bold;
}
.num {
position: absolute;
top: 0;
right: 0;
font-size: 24rpx;
border: 1rpx solid #FF2C3C;
border-radius: 10rpx;
height: 28rpx;
line-height: 28rpx;
padding: 0 4rpx;
color: #FF2C3C;
}
}
</style>

@ -17,7 +17,7 @@ const IS_H5 = false
/** S API BaseURL **/
const baseURLMap = {
// 开发环境
development: 'https://dlh.hainings.com',
development: 'https://dlh.stnav.com',
// 生产环境
production: IS_H5 ? location.origin : 'https://dlh.hainings.com',

@ -596,6 +596,15 @@
"navigationBarTitleText": "我的推广店铺"
}
},
{
"path": "pages/user_spread_store/order",
"meta": {
"auth": true
},
"style": {
"navigationBarTitleText": "商家订单"
}
},
{
"path": "pages/monthly_bill/monthly_bill",
"meta": {