新增营销系统、分销系统、会员功能、门店、提现功能
This commit is contained in:
Shaw
307
views/distribution/center/index.vue
Normal file
307
views/distribution/center/index.vue
Normal file
@ -0,0 +1,307 @@
|
||||
<!--
|
||||
@name: index
|
||||
@author: kahu4
|
||||
@date: 2024-01-17 11:12
|
||||
@description：分销中心
|
||||
@update: 2024-01-17 11:12
|
||||
-->
|
||||
<script setup>
|
||||
import Header from "@/components/Header/index.vue";
|
||||
import { useScroll } from "@/hooks/useScroll";
|
||||
import { onLoad, onPageScroll, onShareAppMessage, onShareTimeline, onShow } from "@dcloudio/uni-app";
|
||||
import { useMainStore } from "@/store/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { computed, ref } from "vue";
|
||||
import { distributionCenterCardList, distributionCenterInfoList } from "@/views/distribution/center/index.data";
|
||||
import DistributionShare from '@/components/Share/Distribution.vue'
|
||||
import DistributionPoster from '@/components/Poster/Distribution.vue'
|
||||
import { checkIsDistribution } from "@/api/distribution";
|
||||
import { useJump } from "@/hooks/useJump";
|
||||
import { SharePathKey, useShare } from "@/hooks/useShare";
|
||||
import { useRouter } from "@/hooks/useRouter";
|
||||
|
||||
// ========================= hooks =========================
|
||||
const {scrollTop} = useScroll();
|
||||
const {getParams} = useRouter();
|
||||
const {goDistributionApplyFor} = useJump();
|
||||
const {distributionShare, shareAppMessage, shareTimeline, shareH5} = useShare();
|
||||
onShareAppMessage(shareAppMessage)
|
||||
onShareTimeline(shareTimeline)
|
||||
onPageScroll(() => {
|
||||
})
|
||||
|
||||
const mainStore = useMainStore();
|
||||
const {user} = storeToRefs(mainStore);
|
||||
const phoneEncrypt = computed(() => {
|
||||
if (!user.value || !user.value.mobile) return '-'
|
||||
const truePhone = user.value.mobile
|
||||
return `${ truePhone.slice(0, 3) }****${ truePhone.slice(-4) }`
|
||||
})
|
||||
|
||||
const distributionShareRef = ref()
|
||||
const distributionPosterRef = ref()
|
||||
|
||||
/**
|
||||
* 确认分享
|
||||
* @param shareItem
|
||||
*/
|
||||
function shareConfirm(shareItem) {
|
||||
// 调用share方法
|
||||
const shareInfo = distributionShare(userDistributionInfo.value.id);
|
||||
if (shareItem.value === 'photo') {
|
||||
distributionPosterRef.value.open(shareInfo, userDistributionInfo.value)
|
||||
} else {
|
||||
// 邀请好友 处理h5 微信的邀请逻辑已经在share组件内部做了
|
||||
shareH5()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 点击了卡片选项
|
||||
* @param cardItem
|
||||
*/
|
||||
function clickCardItem(cardItem) {
|
||||
if (cardItem.path === 'share') {
|
||||
distributionShareRef.value.open()
|
||||
return
|
||||
}
|
||||
if (typeof cardItem.path === 'function') {
|
||||
cardItem.path(userDistributionInfo.value)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 经销商详情
|
||||
const userDistributionInfo = ref({
|
||||
id: '',
|
||||
status: -1,
|
||||
refuse: '',
|
||||
realName: '',
|
||||
levelName: '',
|
||||
superiorName: '',
|
||||
addUpWages: 0,
|
||||
refuseAmount: 0,
|
||||
amount: 0
|
||||
})
|
||||
// 是否展示当前页面
|
||||
const showPage = ref(false)
|
||||
|
||||
/**
|
||||
* 检查当前用户是否是分销商
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async function doCheckIsDistribution() {
|
||||
userDistributionInfo.value = await checkIsDistribution();
|
||||
// 使用一个flag避免页面山东问题
|
||||
if (userDistributionInfo.value.status !== 1) {
|
||||
// status不等于2不是经销商，跳转申请页面
|
||||
goDistributionApplyFor({id: shareId.value}, true)
|
||||
// showPage.value = true
|
||||
} else {
|
||||
// 否则展示
|
||||
showPage.value = true
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
doCheckIsDistribution()
|
||||
})
|
||||
|
||||
const shareId = ref(undefined)
|
||||
|
||||
onLoad((options) => {
|
||||
const params = getParams(options);
|
||||
// 处理是否是扫码跳转过来的，扫码跳转过来的会携带上级ID，赋值给shareId并且传递给申请页面处理
|
||||
if (Reflect.ownKeys(params).length > 0 && params.t && params.t === SharePathKey.DISTRIBUTION_USER) {
|
||||
shareId.value = params.id
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header
|
||||
:scroll-top="scrollTop"
|
||||
system-bar-area-bg="#fff"
|
||||
header-area-bg="#fff">
|
||||
分销中心
|
||||
</Header>
|
||||
<view
|
||||
class="distribution-center"
|
||||
v-if="showPage">
|
||||
|
||||
<!-- userinfo -->
|
||||
<view
|
||||
class="userinfo-box flex flex-jc__start"
|
||||
v-if="user">
|
||||
<image
|
||||
class="user-header"
|
||||
:src="user.avatar" />
|
||||
<view class="userinfo flex flex-column flex-jc__sb">
|
||||
<view class="phone"> {{ phoneEncrypt }}</view>
|
||||
<view class="tag-list flex flex-jc__start flex-ai__center flex-wrap">
|
||||
<view class="tag-item primary-color">
|
||||
{{ userDistributionInfo.superiorName }} 推荐
|
||||
</view>
|
||||
<view class="tag-item">
|
||||
分销等级 {{ userDistributionInfo.levelName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分销信息 -->
|
||||
<view class="distribution-card">
|
||||
<view class="info-row flex flex-ai__center flex-jc__sa">
|
||||
<view
|
||||
class="item"
|
||||
v-for="infoItem in distributionCenterInfoList"
|
||||
:key="infoItem.field">
|
||||
<span class="data"> {{ userDistributionInfo[infoItem.field] || '0.00' }} </span>
|
||||
<span class="title">{{ infoItem.label }}</span>
|
||||
</view>
|
||||
</view>
|
||||
<!-- grid -->
|
||||
<view class="grid-row">
|
||||
<view
|
||||
class="item"
|
||||
v-for="cardItem in distributionCenterCardList"
|
||||
:key="cardItem.label"
|
||||
@click="clickCardItem(cardItem)">
|
||||
<image :src="cardItem.icon" />
|
||||
<text>{{ cardItem.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<DistributionShare
|
||||
ref="distributionShareRef"
|
||||
@share="shareConfirm" />
|
||||
<DistributionPoster ref="distributionPosterRef" />
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: $page-bg-color;
|
||||
}
|
||||
</style>
|
||||
<style
|
||||
scoped
|
||||
lang="scss">
|
||||
.distribution-center {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(to bottom, #fdfdfd, $page-bg-color);
|
||||
@include usePadding(30, 30);
|
||||
|
||||
.userinfo-box {
|
||||
width: 100%;
|
||||
|
||||
.user-header, .userinfo {
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.user-header {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
margin-left: 24rpx;
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
max-width: 80%;
|
||||
|
||||
.tag-list {
|
||||
margin-top: 5rpx;
|
||||
gap: 10rpx;
|
||||
|
||||
.tag-item {
|
||||
font-size: 20rpx;
|
||||
flex-shrink: 0;
|
||||
@include usePadding(16, 5);
|
||||
border-radius: 50rpx;
|
||||
border: 1rpx solid #697591;
|
||||
color: #697591;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.distribution-card {
|
||||
margin-top: 30rpx;
|
||||
width: 100%;
|
||||
background: #333333;
|
||||
color: #fff;
|
||||
border-radius: 15rpx;
|
||||
|
||||
.info-row {
|
||||
@include usePadding(0, 30);
|
||||
|
||||
.item {
|
||||
@include useFlex(center, center, column);
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
flex: 1 0 auto;
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
color: $tips-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 2rpx;
|
||||
border-radius: 2rpx;
|
||||
height: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
@include usePadding(0, 48);
|
||||
background: #fff;
|
||||
color: #2B2B2B;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
row-gap: 32rpx;
|
||||
border-radius: 15rpx;
|
||||
|
||||
.item {
|
||||
@include useFlex(center, center, column);
|
||||
transition: all .3s;
|
||||
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: #fbfbfb;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&:active {
|
||||
scale: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.primary-color {
|
||||
border-color: $primary-color !important;
|
||||
color: $primary-color !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user