bk-shop/src/subpages/member/index.js

714 lines
23 KiB
JavaScript
Executable File

import Taro, {
useDidShow,
useShareAppMessage,
getCurrentPages,
getCurrentInstance
} from '@tarojs/taro'
import { useState, useEffect, useCallback, useRef } from 'react'
import { updateUserInfo, fetchUserFavs, updateCheckChief } from '@/store/slices/user'
import { View, ScrollView, Text, Image, Button } from '@tarojs/components'
import { SG_APP_CONFIG, MERCHANT_TOKEN, SG_TOKEN } from '@/consts'
import { useSelector, useDispatch } from 'react-redux'
import { useImmer } from 'use-immer'
import {
SpLogin,
SpImage,
SpPrice,
CouponModal,
SpModal,
SpPrivacyModal,
SpTabbar,
SpPage,
SpButton
} from '@/components'
import api from '@/api'
import {
navigateTo,
getThemeStyle,
styleNames,
classNames,
showToast,
showModal,
isWeixin,
normalizeQuerys,
log,
VERSION_PLATFORM,
VERSION_STANDARD
} from '@/utils'
import { useLogin } from '@/hooks'
import CompVipCard from './comps/comp-vipcard'
import CompBanner from './comps/comp-banner'
import CompPanel from './comps/comp-panel'
import CompMenu from './comps/comp-menu'
import CompHelpCenter from './comps/comp-helpcenter'
import './index.scss'
import S from '@/spx'
import { AtButton } from 'taro-ui'
const initialConfigState = {
banner: {
isShow: false,
loginBanner: '',
noLoginBanner: '',
pageUrl: '',
urlOpen: false,
appId: null
},
menu: {
pointMenu: false, // 积分菜单
activity: false, // 活动预约
offline_order: false, // 线下订单
boost_activity: false, // 助力活动
boost_order: false, // 助力订单
complaint: false, // 投诉记录
community_order: false, // 社区团购
ext_info: false,
group: false, // 我的拼团
member_code: false, // 会员二维码
recharge: false, // 储值
ziti_order: false, // 自提
share_enable: false, // 分享
memberinfo_enable: false, // 个人信息
tenants: true, //商家入驻
purchase: true, // 员工内购
dianwu: false, // 店务,
community: false // 社区
},
infoAppId: '',
infoPage: '',
infoUrlIsOpen: true,
pointAppId: '',
pointPage: '',
pointUrlIsOpen: true,
memberConfig: {
// defaultImg: null,
vipImg: null
},
}
const initialState = {
favCount: 0,
point: 0,
couponCount: 0,
username: '',
avatar: '',
mobile: '',
waitPayNum: 0,
waitSendNum: 0,
waitRecevieNum: 0,
waitEvaluateNum: 0,
afterSalesNum: 0,
zitiNum: 0,
deposit: 0,
isOpen: false
}
function MemberIndex (props) {
// console.log('===>getCurrentPages==>', getCurrentPages(), getCurrentInstance())
const $instance = getCurrentInstance()
const { isLogin, isNewUser, login, getUserInfoAuth } = useLogin({
autoLogin: true,
// policyUpdateHook: (isUpdate) => {
// // isUpdate && setPolicyModal(true)
// if (isUpdate) {
// RefLogin.current._setPolicyModal()
// }
// }
})
const [config, setConfig] = useImmer(initialConfigState)
const [state, setState] = useImmer(initialState)
const [policyModal, setPolicyModal] = useState(false)
const { userInfo = {}, vipInfo = {} } = useSelector((state) => state.user)
const { pointName } = useSelector((state) => state.sys)
// log.debug(`store userInfo: ${JSON.stringify(userInfo)}`)
const dispatch = useDispatch()
Taro.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#ffffff',
})
useEffect(() => {
if (isLogin) {
getMemberCenterData()
setMemberBackground()
const { redirect } = $instance.router.params
if (redirect) {
Taro.redirectTo({ url: decodeURIComponent(redirect) })
}
}
}, [isLogin])
useEffect(() => {
getMemberCenterConfig()
// 白名单
getSettings()
}, [])
useDidShow(() => {
if (isLogin) {
getMemberCenterData()
} else {
// setState((draft) => {
// draft.isOpen = true
// })
}
})
// useDidShow(() => {
// if (isLogin) {
// getMemberCenterData()
// setMemberBackground()
// }
// // if (S.get(MERCHANT_TOKEN, true)) {
// // S.delete(MERCHANT_TOKEN, true)
// // }
// // if (S.get(SG_TOKEN)) {
// // setHeaderBlock()
// // }
// })
async function getSettings () {
const { whitelist_status = false } = await api.shop.homeSetting()
// 白名单配置
Taro.setStorageSync(SG_APP_CONFIG, {
whitelist_status
})
}
// 分享
useShareAppMessage(async (res) => {
const { share_title, share_pic_wechatapp } = await api.member.getMemberShareConfig()
const { logo } = await api.distribution.getDistributorInfo({
distributor_id: 0
})
return {
title: share_title,
imageUrl: share_pic_wechatapp || logo,
path: '/pages/index'
}
})
const setHeaderBlock = async () => {
const resAssets = await api.member.memberAssets()
const { discount_total_count, fav_total_count, point_total_count } = resAssets
setState((draft) => {
draft.favCount = fav_total_count
draft.point = point_total_count
draft.couponCount = discount_total_count
})
}
const getMemberCenterConfig = async () => {
const [bannerRes, menuRes, redirectRes, pointShopRes] = await Promise.all([
// 会员中心banner
await api.shop.getPageParamsConfig({
page_name: 'member_center_setting'
}),
// 菜单自定义
await api.shop.getPageParamsConfig({
page_name: 'member_center_menu_setting'
}),
// 积分跳转配置
await api.shop.getPageParamsConfig({
page_name: 'member_center_redirect_setting'
}),
// 积分商城
await api.pointitem.getPointitemSetting()
])
let banner,
menu,
redirectInfo = {}
if (bannerRes.list.length > 0) {
const { app_id, is_show, login_banner, no_login_banner, page, url_is_open } =
bannerRes.list[0].params.data
banner = {
isShow: is_show,
loginBanner: login_banner,
noLoginBanner: no_login_banner,
pageUrl: page,
urlOpen: url_is_open,
appId: app_id
}
}
if (menuRes.list.length > 0) {
menu = { ...menuRes.list[0].params.data, purchase: true }
}
if (S.getAuthToken() && (VERSION_PLATFORM || VERSION_STANDARD)) {
const { result, status } = await api.member.is_admin()
console.log('env:result', result)
console.log('env:status', status)
S.set('DIANWU_CONFIG', result, status)
menu = {
...menu,
dianwu: status
}
}
if (redirectRes.list.length > 0) {
const {
info_app_id,
info_page,
info_url_is_open,
point_app_id,
point_page,
point_url_is_open
} = redirectRes.list[0].params.data
redirectInfo = {
infoAppId: info_app_id,
infoPage: info_page,
infoUrlIsOpen: info_url_is_open,
pointAppId: point_app_id,
pointPage: point_page,
pointUrlIsOpen: point_url_is_open
}
}
setConfig((draft) => {
draft.banner = banner
draft.menu = {
...menu,
pointMenu: pointShopRes.entrance.mobile_openstatus
}
draft.infoAppId = redirectInfo.info_app_id
draft.infoPage = redirectInfo.info_page
draft.infoUrlIsOpen = redirectInfo.info_url_is_open
draft.pointAppId = redirectInfo.point_app_id
draft.pointPage = redirectInfo.point_page
draft.pointUrlIsOpen = redirectInfo.point_url_is_open
})
}
const setMemberBackground = async () => {
let memberRes = await api.member.memberInfo()
setConfig((draft) => {
draft.memberConfig = {
// defaultImg: memberRes?.cardInfo?.background_pic_url,
vipImg: memberRes?.vipgrade?.background_pic_url,
backgroundImg: memberRes?.memberInfo?.gradeInfo?.background_pic_url
}
})
setState((draft) => {
draft.deposit = memberRes.deposit / 100
})
dispatch(updateUserInfo(memberRes))
}
const getMemberCenterData = async () => {
// const resSales = await api.member.getSalesperson()
const resTrade = await api.trade.getCount()
// const resVip = await api.vip.getList()
// 大转盘
// const resTurntable = await api.wheel.getTurntableconfig()
const resAssets = await api.member.memberAssets()
const { discount_total_count, fav_total_count, point_total_count } = resAssets
const {
aftersales, // 待处理售后
normal_notpay_notdelivery, // 未付款未发货
normal_payed_daifahuo, // 待发货
normal_payed_daishouhuo, // 待收货
normal_payed_daiziti, // 待自提订单
normal_not_rate // 待评论
} = resTrade
setState((draft) => {
draft.favCount = fav_total_count
draft.point = point_total_count
draft.couponCount = discount_total_count
draft.waitPayNum = normal_notpay_notdelivery
draft.waitSendNum = normal_payed_daifahuo
draft.waitRecevieNum = normal_payed_daishouhuo
draft.afterSalesNum = aftersales
draft.zitiNum = normal_payed_daiziti
draft.waitEvaluateNum = normal_not_rate
})
}
const handleClickLink = async (link) => {
// await getUserInfoAuth()
Taro.navigateTo({ url: link })
}
const handleClickPoint = () => {
const { pointAppId, pointPage, pointUrlIsOpen } = config
if (pointUrlIsOpen) {
Taro.navigateToMiniProgram({
appId: pointAppId,
path: pointPage
})
}
}
const handleClickService = async (item) => {
const { link, key } = item
// await getUserInfoAuth(key !== 'tenants')
// 分销推广
if (key == 'popularize') {
// 已经是分销员
if (userInfo.isPromoter) {
Taro.navigateTo({ url: link })
} else {
const { confirm } = await Taro.showModal({
title: '邀请推广',
content: '确定申请成为推广员?',
showCancel: true,
cancel: '取消',
confirmText: '确认',
confirmColor: '#0b4137'
})
if (!confirm) return
const { status } = await api.distribution.become()
if (status) {
Taro.showModal({
title: '恭喜',
content: '已成为推广员',
showCancel: false,
confirmText: '好'
})
}
}
return
}
if (key == 'useinfo') {
const { infoAppId, infoPage, infoUrlIsOpen } = config
if (infoUrlIsOpen) {
Taro.navigateToMiniProgram({
appId: infoAppId,
path: infoPage
})
}
}
if (key == 'community') {
const res = await api.community.checkChief()
dispatch(updateCheckChief(res))
if (res.status) {
Taro.navigateTo({ url: link })
} else {
Taro.navigateTo({ url: `/subpages/community/order` })
}
}
if (link) {
Taro.navigateTo({ url: link })
}
}
const VipGradeDom = () => {
if (isLogin) {
return (
<View className='user-grade-name'>
<View className='username'>
{(userInfo && (userInfo.username || userInfo.mobile)) || '获取昵称'}
</View>
{/* <View
className='gradename'
onClick={() => {
Taro.navigateTo({ url: '/subpages/member/member-level' })
}}
>
{
{
true: vipInfo.grade_name || '会员',
false: userInfo?.gradeInfo?.grade_name || ''
}[vipInfo.isVip]
}
</View> */}
</View>
)
} else {
return (
<SpLogin newUser={isNewUser}>
<View className='box'>
<Text className='join-us-txt'>立即登录</Text>
<View className="ws_info">
<Image className="img" src={require('@/assets/ziliao-light.png')}></Image>
<Text style={{ marginLeft: "12rpx", marginRight: "16rpx" }}>完善个人资料</Text>
{/* <Image style={{ width: "22rpx", height: "22rpx" }} src={require('@/assets/you-light.png')}></Image> */}
<Text className='iconfont icon-qianwang-01' style={{ fontWeight: "bold", fontSize: "24rpx" }}></Text>
</View>
</View>
</SpLogin>
)
}
}
if (!config) {
return null
}
// console.log(`member page:`, state, config);
const { memberConfig } = config
console.log('====config===', config.menu)
return (
<SpPage className='pages-member-index has-navbar' renderFooter={<SpTabbar />} isTop>
<View
className='header-block'
style={styleNames({
'background-image': `url(${`${process.env.APP_IMAGE_CDN_NEW}/member/bg.png`})`,
// marginTop: `calc(var(--nav-height) + var(--status-bar-height))`,
})}
// onClick={() => setState((draft) => { draft.isOpen = true })}
>
<View className='header-hd'>
<View className='header-hd__header' onClick={isLogin && handleClickLink.bind(this, '/subpages/member/user-info')}>
<SpLogin newUser={isNewUser}>
<SpImage
className='usericon'
src={(userInfo && userInfo.avatar) || `${process.env.APP_IMAGE_CDN_NEW}/member/user-icon.png`}
width='114'
/>
</SpLogin>
</View>
<View className='header-hd__body' onClick={isLogin && handleClickLink.bind(this, '/subpages/member/user-info')}>
<View className='username-wrap'>
<View className='join-us'>{VipGradeDom()}</View>
</View>
</View>
{/* <View className='header-hd__footer'>
{config.menu.member_code && (
<SpLogin onChange={handleClickLink.bind(this, '/marketing/pages/member/member-code')}>
<Text className='iconfont icon-erweima-01'></Text>
</SpLogin>
)}
<SpLogin className='user-info__link' onChange={handleClickLink.bind(this, '/subpages/member/user-info')}>
<Text className='iconfont icon-qianwang-01'></Text>
</SpLogin>
</View> */}
</View>
{false && <View className='header-bd'>
<SpLogin
className='bd-item'
onChange={handleClickLink.bind(this, '/subpages/marketing/coupon')}
>
<View className='bd-item-label'>优惠券()</View>
<View className='bd-item-value'>{state.couponCount}</View>
</SpLogin>
<SpLogin
className='bd-item'
onChange={handleClickLink.bind(this, '/subpages/member/point-detail')}
>
<View className='bd-item-label'>{`${pointName}`}</View>
<View className='bd-item-value'>{state.point}</View>
</SpLogin>
{process.env.NODE_ENV === 'development' && (
<View className='bd-item deposit-item'>
<View className='bd-item-label'>储值(¥)</View>
<View className='bd-item-value'>
<SpPrice noSymbol value={state.deposit} />
</View>
</View>
)}
<SpLogin
className='bd-item'
onChange={handleClickLink.bind(this, '/pages/member/item-fav')}
>
<View className='bd-item-label'>收藏()</View>
<View className='bd-item-value'>{state.favCount}</View>
</SpLogin>
</View>}
{vipInfo.isOpen && <View className='header-ft'>
{/* 会员卡等级 */}
{vipInfo.isOpen && (
<SpLogin onChange={handleClickLink.bind(this, '/subpage/pages/vip/vipgrades')}>
<CompVipCard info={vipInfo} userInfo={userInfo} memberConfig={memberConfig} />
</SpLogin>
)}
</View>}
{isLogin && <View className="header-code">
<Text className="" onClick={() => {
Taro.navigateTo({ url: '/subpages/member/member-level' })
}}>{
{
true: vipInfo.grade_name || '会员',
false: userInfo?.gradeInfo?.grade_name || ''
}[vipInfo.isVip]
}</Text>
<SpImage onClick={handleClickLink.bind(this, '/marketing/pages/member/member-code')} src='member/qr-code.png' height={30} width={30} isNew />
</View>}
</View>
<View className='body-block'>
{config.banner?.isShow && (
<CompBanner
info={config.banner}
src={isLogin ? config.banner.loginBanner : config.banner.noLoginBanner}
/>
)}
<CompPanel
title='我的订单'
extra={
<SpLogin onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=0')}>
<View style={{ display: "flex", alignItems: "center", fontSize: "24rpx", color: "#505050" }}>全部订单
</View>
</SpLogin>
}
>
{config.menu.ziti_order && (
<SpLogin
onChange={handleClickLink.bind(this, '/subpage/pages/trade/customer-pickup-list')}
>
<View className='ziti-order'>
<View className='ziti-order-info'>
<View className='title'>自提订单</View>
<View className='ziti-txt'>
您有<Text className='ziti-num'>{state.zitiNum}</Text>
个等待自提的订单
</View>
</View>
<Text className='iconfont icon-qianwang-01'></Text>
</View>
</SpLogin>
)}
<View className='order-con'>
<SpLogin
className='order-item'
onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=5')}
>
<View className='order-item-view'>
<SpImage src='member/daifukuan.png' className='icon-style' isNew />
{state.waitPayNum > 0 && (
<View className='order-bradge'>
<Text>{state.waitPayNum}</Text>
</View>
)}
<Text className='order-txt'>待付款</Text>
</View>
</SpLogin>
<SpLogin
className='order-item'
onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=6')}
>
<View className='order-item-view'>
<SpImage src='member/daifahuo.png' className='icon-style' isNew />
{state.waitRecevieNum + state.waitSendNum > 0 && (
<View className='order-bradge'>
<Text>{state.waitRecevieNum + state.waitSendNum}</Text>
</View>
)}
<Text className='order-txt'>待发货</Text>
</View>
</SpLogin>
<SpLogin
className='order-item'
onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=1')}
>
<View className='order-item-view'>
<SpImage src='member/daishouhuo.png' className='icon-style' isNew />
{state.waitEvaluateNum > 0 && (
<View className='order-bradge'>
<Text>{state.waitEvaluateNum}</Text>
</View>
)}
<Text className='order-txt'>待收货</Text>
</View>
</SpLogin>
<SpLogin
className='order-item'
onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=7')}
>
<View className='order-item-view'>
<SpImage src='member/yiwancheng.png' className='icon-style' isNew />
{state.afterSalesNum > 0 && (
<View className='order-bradge'>
<Text>{state.afterSalesNum}</Text>
</View>
)}
<Text className='order-txt'>已完成</Text>
</View>
</SpLogin>
<SpLogin
className='order-item'
// /subpage/pages/trade/after-sale
onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=7')}
>
<View className='order-item-view'>
<SpImage src='member/pingjia.png' className='icon-style' mode='aspectFit' height={42} isNew />
{state.afterSalesNum > 0 && (
<View className='order-bradge'>
<Text>{state.afterSalesNum}</Text>
</View>
)}
<Text className='order-txt'>评价</Text>
</View>
</SpLogin>
</View>
</CompPanel>
{/* <CompPanel>
<CompMenu
accessMenu={{
...config.menu,
popularize: userInfo ? userInfo.popularize : false
}}
isPromoter={userInfo ? userInfo.isPromoter : false}
onLink={handleClickService}
/>
</CompPanel> */}
{/* <CompPanel>
<CompHelpCenter onLink={handleClickService} />
</CompPanel> */}
</View>
{/* <View className="dibiao-block">
<SpImage className="dibiao-image" src="dibiao.png" />
</View> */}
{/* 隐私政策 */}
{/* <SpPrivacyModal
open={policyModal}
onCancel={() => {
setPolicyModal(false)
}}
onConfirm={() => {
login()
RefLogin._setPolicyModal()
setPolicyModal(false)
}}
/> */}
<View className="member-block">
<View className="member_tit">会员服务</View>
<View className="member_con">
<View className="member_con_left">
{/* /subpages/pointshop/list */}
<View className="member_con_item" onClick={isLogin && handleClickLink.bind(this, '/subpages/marketing/coupon-center')}>
<SpImage className="member_con_item_img" src="member/jifen.png" height={290} mode='aspectFill' isNew />
<View className="member_con_item_txt">积分兑换</View>
</View>
<View className="member_con_item" onClick={isLogin && handleClickLink.bind(this, '/pages/member/item-fav')}>
<SpImage className="member_con_item_img" src="member/shoucang.png" height={290} mode='aspectFill' isNew />
<View className="member_con_item_txt">个人收藏</View>
</View>
</View>
<View className='gap'></View>
<View className="member_con_right">
<View className="member_con_item" onClick={isLogin && handleClickLink.bind(this, '/subpages/member/user-info')}>
<SpImage className="member_con_item_img" src="member/geren.png" height={190} mode='aspectFill' isNew />
<View className="member_con_item_txt">个人信息</View>
</View>
<View className="member_con_item" onClick={handleClickLink.bind(this, '/marketing/pages/member/address')}>
<SpImage className="member_con_item_img" src="member/dizhi.png" height={190} mode='aspectFill' isNew />
<View className="member_con_item_txt">地址管理</View>
</View>
<View className="member_con_item" onClick={isLogin && handleClickLink.bind(this, '/subpage/pages/trade/invoice-list')}>
<SpImage className="member_con_item_img" src="member/fapiao.png" height={190} mode='aspectFill' isNew />
<View className="member_con_item_txt">发票管理</View>
</View>
</View>
</View>
</View>
</SpPage>
)
}
export default MemberIndex