rrys121/pages/user/index.vue

<template>
	<!-- 个人中心模块 -->
	<view class="user-page" :style="colorStyle">
		<template v-if="userInfo && isObjectData(diyData)">
			<user-member :userInfo="userInfo" :memberData="diyData.member" :orderAdminData="orderAdminData"
				:balanceStatus="balanceStatus" :isScrolling="isScrolling"></user-member>
			<view class="num-wrapper"
				:class="[member_style==3?'unNum-wrapper':member_style==2?'Tnum-wrapper':'',((vip_type==2 && stu) || (vip_type==1 && memberStatus))?'':'height']"
				v-if="userInfo.uid">
				<!-- <view class="num-item" v-show="userInfo.balance_func_status"
					@click="goMenuPage('/pages/users/user_money/index')">
					<text class="num">{{userInfo.now_money || 0}}</text>
					<view class="txt">余额</view>
				</view> -->
				<view class="num-item" @click="goMenuPage('/pages/users/user_integral/greed')">
					<text class="num">{{userInfo.green_integral || 0}}</text>
					<view class="txt">绿积分</view>
				</view>
				<!-- <view class="num-item" @click="goMenuPage('/pages/users/user_integral/integral')"> -->
				<view class="num-item">
					<text class="num">{{userInfo.award_range || 0}}</text>
					<view class="txt">分红额度</view>
				</view>
				<!-- <view class="num-item" @click="goMenuPage('/pages/users/user_integral/integral')">
					<text class="num">{{userInfo.static_integral || 0}}</text>
					<view class="txt">消费分</view>
				</view> -->
			</view>
			<user-order :orderMenu="orderMenu" :orderAdminData="orderAdminData" :userInfo="userInfo"
				:memberData="diyData.member" :orderData="diyData.order"></user-order>
			<user-order-static v-if="isObjectData(orderAdminData) && orderAdminData.order.user_order"
				:orderAdminData="orderAdminData.order" :orderStaticData="diyData.orderStatic"></user-order-static>
			<user-poster :posterData="diyData.poster"></user-poster>
			<user-menu :menuData="diyData.menu"></user-menu>
			<user-mer-menu v-if="diyData.merMenu.list.length" :merMenuData="diyData.merMenu"></user-mer-menu>
			<user-store-menu v-if="diyData.storeMenu.list.length" :storeMenuData="diyData.storeMenu"></user-store-menu>
			<view class="copy_right pb-20">
				<template v-if="copyRightText">
					<image :src="copyRightImg" mode="aspectFill" class="copyRightImg"></image>
					<view class="copyRightText">
						{{ copyRightText }}
					</view>
				</template>
				<image v-else :src="copyRightImg" mode="aspectFill" class="support"></image>
			</view>
		</template>
		<!-- 店员推广码 extension-->
		<view class="fixed-ct w-620 h-690 bg--w111-fff rd-24rpx ml-f310 mt-f400 z-1000" v-show="isextension"
			@touchmove.stop.prevent>
			<view class="fs-32 text-#333 fw-500 mt-48 mb-48 text-center">店员推广码</view>
			<view class="acea-row row-center-wrapper">
				<!-- #ifdef MP -->
				<image :src="extension.code" class="w-380 h-380" @click="downloadCode"></image>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<view class="acea-row row-center-wrapper" @click="downloadCode">
					<w-qrcode id="hah" :options="extension" @generate="hello"></w-qrcode>
				</view>
				<!-- #endif -->
				<view class="fs-26 text--w111-999 mt-40 w-312 text-center">如遇到扫码失败，</view>
				<view class="fs-26 text--w111-999 mt-10 w-312 text-center">请将屏幕调至最亮重新扫码</view>
			</view>
			<view class="iconfont icon-ic_close1 text--w111-fff absolute fs-50 bottom-f100rpx left-50 ml-f25"
				@click="closeCode"></view>
		</view>
		<view class="fixed-lt bg-w111-000-s111-80 w-full h-full z-999" v-show="isextension" @touchmove.stop.prevent>
		</view>
		<pageFooter :style="colorStyle"></pageFooter>
		<ewcomerPop v-if="isComerGift" :comerGift="comerGift" @comerPop="comerPop"></ewcomerPop>
		<!-- #ifdef MP -->
		<editUserModal :isShow="editModal" @closeEdit="closeEdit" @editSuccess="editSuccess"></editUserModal>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		storeCardApi
	} from '@/api/store.js';
	import {
		newcomerGift
	} from '@/api/activity.js';
	import {
		copyRight
	} from '@/api/api.js';
	import {
		getMenuList,
		getUserInfo,
		setVisit,
		updateUserInfo,
		getRandCode,
		updateWechatInfo,
		getMenuData
	} from '@/api/user.js';
	import {
		wechatAuthV2,
		silenceAuth
	} from '@/api/public.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapState,
		mapGetters
	} from 'vuex';
	// #ifdef H5
	import Auth from '@/libs/wechat';
	// #endif
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	const app = getApp();
	import ewcomerPop from '@/components/ewcomerPop/index.vue';
	import pageFooter from '@/components/pageFooter/index.vue';
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import Routine from '@/libs/routine';
	import colors from '@/mixins/color';
	// #ifdef MP
	import editUserModal from '@/components/eidtUserModal/index.vue';
	// #endif
	import userMember from './components/member/index.vue';
	import userOrder from './components/order/index.vue';
	import userOrderStatic from './components/order_static/index.vue';
	import userMenu from './components/menus/index.vue';
	import userMerMenu from './components/merMenus/index.vue';
	import userStoreMenu from './components/storeMenus/index.vue';
	import userPoster from './components/poster/index.vue';

	export default {
		components: {
			userMember,
			userOrder,
			userOrderStatic,
			userMenu,
			userMerMenu,
			userStoreMenu,
			userPoster,
			pageFooter,
			ewcomerPop,
			// #ifdef MP
			editUserModal
			// #endif
		},
		computed: {
			...mapGetters({
				cartNum: 'cartNum',
				isLogin: 'isLogin'
			})
		},
		filters: {},
		mixins: [colors],
		provide() {
			return {
				tapQrCode: this.tapQrCode,
				bindPhone: this.bindPhone,
				intoPage: this.intoPage,
				goMenuPage: this.goMenuPage,
				getMenuData: this.getMenuData,
				goEdit: this.goEdit
			};
		},
		data() {
			return {
				diyData: {},
				orderAdminData: {},
				// #ifdef MP
				getHeight: this.$util.getWXStatusHeight(),
				// #endif
				vipStatus: 0,
				stu: false,
				orderMenu: [{
						icon: '',
						title: '待付款',
						url: '/pages/goods/order_list/index?status=0'
					},
					{
						icon: '',
						title: '待发货',
						url: '/pages/goods/order_list/index?status=1'
					},
					{
						icon: '',
						title: '待收货',
						url: '/pages/goods/order_list/index?status=2'
					},
					{
						icon: '',
						title: '待评价',
						url: '/pages/goods/order_list/index?status=3'
					},
					{
						icon: '',
						title: '售后/退款',
						url: '/pages/users/user_return_list/index'
					}
				],
				imgUrls: [],
				orderStatusNum: {},
				userInfo: '',
				showStatus: 1,
				// #ifdef H5 || MP
				pageHeight: '100%',
				routineContact: 0,
				// #endif
				// #ifdef APP-PLUS
				pageHeight: app.globalData.windowHeight,
				// #endif
				// #ifdef H5
				isWeixin: Auth.isWeixin(),
				//#endif
				footerSee: false,
				member_style: 1,
				my_banner_status: 1,
				menu_status: 1,
				service_status: 1,
				newcomer_status: 1,
				isextension: false,
				extension: {
					code: '',
					size: 380, // 二维码大小
					level: 3, //等级 0～4
					bgColor: '#FFFFFF', //二维码背景色 默认白色
					color: ['#333', '#333'] //边框颜色支持渐变色
				},
				imgHost: HTTP_REQUEST_URL,
				copyRightText: '',
				copyRightImg: '',
				giftPic: '',
				vip_type: 1,
				newcomer_style: 1,
				newList: [],
				newBg: '',
				comerGift: {},
				isComerGift: false,
				memberStatus: 0,
				balanceStatus: 0, // 余额是否展示
				editModal: false, // 编辑头像信息
				isScrolling: false,
				orderStyle: {
					1: ['icon-ic_daifukuan12', 'icon-ic_daifahuo11', 'icon-ic_daishouhuo1', 'icon-ic_daipingjia1',
						'icon-ic_daituikuan1'
					],
					2: ['icon-ic_daifukuan2', 'icon-ic_daifahuo2', 'icon-ic_daishouhuo2', 'icon-ic_daipingji2',
						'icon-ic_daituikuan2'
					],
					3: ['icon-ic_daifukuan', 'icon-ic_daifahuo', 'icon-ic_daishouhuo', 'icon-ic_daipingjia',
						'icon-ic_daituikuan'
					]
				},
				codeImg: ''
			};
		},
		created() {
			let that = this;
			// #ifdef MP
			// 小程序静默授权
			if (!this.$store.getters.isLogin) {
				// Routine.getCode()
				//   .then(code => {
				//     Routine.silenceAuth(code).then(res => {
				//       this.onLoadFun();
				//     })
				//   })
				//   .catch(res => {
				//     uni.hideLoading();
				//   });
			}
			// #endif
			// #ifdef APP-PLUS
			that.$set(that, 'pageHeight', app.globalData.windowHeight);
			// #endif
		},
		async onLoad(option) {
			if (this.isLogin) {
				// this.getNewcomerGift();
			}
			// #ifdef H5
			if (this.isLogin && Auth.isWeixin() && option.code) {
				try {
					let res = await updateWechatInfo({
						code: option.code
					});
					this.userInfo.nickname = res.data.nickname;
					this.userInfo.avatar = res.data.avatar;
					this.userInfo.is_complete = 1;
				} catch (e) {}
			}
			// #endif
			this.colorData();
		},
		onReady() {},
		onShow() {
			if (!this.isLogin) {
				this.userInfo = '';
				toLogin();
				return;
			}
			if (this.cartNum > 0) {
				uni.setTabBarBadge({
					index: 3,
					text: this.cartNum > 99 ? '99+' : this.cartNum + ''
				});
			} else {
				uni.hideTabBarRedDot({
					index: 3
				});
			}
			this.copyRightText = uni.getStorageSync('copyNameInfo');
			this.copyRightImg = uni.getStorageSync('copyImageInfo');
			uni.removeStorageSync('form_type_cart');
			if (!this.copyRightText) {
				this.getCopyRight();
			}
			let that = this;
			// #ifdef APP-PLUS
			uni.getSystemInfo({
				success: function(res) {
					that.pageHeight = res.windowHeight + 'px';
				}
			});
			// #endif
			if (that.isLogin) {
				this.getUserInfo();
				this.getMyMenus();
				this.setVisit();
				this.getMenuData();
			}
		},
		// #ifdef MP || APP-PLUS
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.isScrolling = true;
			} else if (e.scrollTop < 50) {
				this.isScrolling = false;
			}
		},
		// #endif
		methods: {
			hello(res) {
				this.codeImg = res.img.tempFilePath;
			},
			downloadCode() {
				let that = this
				// #ifdef H5
				var canvas = document.getElementById("hah").getElementsByTagName("canvas")
				var imgURL = canvas[0].toDataURL("image/png")
				var dlLink = document.createElement('a');
				dlLink.download = "店员推广码";
				dlLink.href = imgURL;
				dlLink.dataset.downloadurl = ["image/png", dlLink.download, dlLink.href].join(':');
				document.body.appendChild(dlLink);
				dlLink.click();
				document.body.removeChild(dlLink);
				// #endif
				// #ifdef MP
				uni.downloadFile({
					url: that.extension.code, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function(res) {
									that.$util.Tips({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: function(res) {
									console.log(res)
									that.$util.Tips({
										title: '保存失败'
									});
								}
							});
						}
					}
				});
				// #endif
				// #ifdef APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: that.codeImg,
					success: function(res) {
						that.$util.Tips({
							title: '保存成功',
							icon: 'success'
						});
					},
					fail: function(res) {
						that.$util.Tips({
							title: '保存失败'
						});
					}
				});
				// #endif
			},
			closeCode() {
				this.isextension = false
			},
			isObjectData(obj) {
				return Object.keys(obj).length !== 0;
			},
			// #ifdef MP
			editSuccess() {
				this.editModal = false;
				this.getUserInfo();
			},
			closeEdit() {
				this.editModal = false;
			},
			// #endif
			getCopyRight() {
				copyRight()
					.then((res) => {
						let data = res.data;
						if (!data.copyrightContext && !data.copyrightImage) {
							data.copyrightImage = '/static/images/support.png';
						}
						uni.setStorageSync('copyNameInfo', data.copyrightContext);
						uni.setStorageSync('copyImageInfo', data.copyrightImage);
						this.copyRightText = data.copyrightContext;
						this.copyRightImg = data.copyrightImage;
					})
					.catch((err) => {
						return this.$util.Tips({
							title: err.msg
						});
					});
			},
			// 查看订单
			intoPage(url) {
				if (this.isLogin) {
					if (['/pages/users/user_vip/index', '/pages/annex/vip_grade_active/index'].includes(url) && !this
						.userInfo.member_func_status) {
						this.$util.Tips({
							title: '会员卡功能暂未开启'
						});
					} else {
						this.$util.JumpPath(url);
					}
				} else {
					toLogin();
				}
			},
			// 编辑页面
			goEdit() {
				if (this.isLogin == false || !this.userInfo.uid) {
					toLogin();
				} else {
					// #ifdef MP
					if (this.userInfo.is_default_avatar) {
						this.editModal = true;
						return;
					}
					// #endif
					uni.navigateTo({
						url: '/pages/users/user_set/index'
					});
				}
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.id}&fromPage='newVip'`
				});
			},
			comerPop() {
				this.isComerGift = false;
			},
			getNewcomerGift() {
				if (uni.getStorageSync('newcomerGift')) {
					return (this.isComerGift = false);
				}
				newcomerGift()
					.then((res) => {
						this.comerGift = res.data;
						if (Object.prototype.toString.call(this.comerGift) == '[object Object]') {
							if (res.data.coupon_count || res.data.product_count || res.data.register_give_money || res
								.data.first_order_discount || res.data.register_give_integral) {
								uni.setStorageSync('newcomerGift', true);
								this.isComerGift = true;
							}
						}
					})
					.catch((err) => {
						return this.$util.Tips({
							title: err
						});
					});
			},
			tapQrCode() {
				uni.navigateTo({
					url: '/pages/users/user_member_code/index'
				});
			},
			getRoutineUserInfo(e) {
				updateUserInfo({
						userInfo: e.detail.userInfo
					})
					.then((res) => {
						this.getUserInfo();
						return this.$util.Tips('更新用户信息成功');
					})
					.catch((err) => {
						return this.$util.Tips(err);
					});
			},
			// 记录会员访问
			setVisit() {
				setVisit({
					url: '/pages/user/index'
				}).then((res) => {});
			},
			// 打开授权
			openAuto() {
				toLogin();
			},
			// 授权回调
			onLoadFun(e) {
				this.getUserInfo(e);
				this.getMyMenus();
				this.setVisit();
			},
			// 绑定手机
			bindPhone() {
				uni.navigateTo({
					url: '/pages/users/user_phone/index'
				});
			},
			// 获取行销数据
			getMenuData() {
				getMenuData().then((res) => {
					this.orderAdminData = res.data;
				});
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo() {
				let that = this;
				getUserInfo().then((res) => {
					that.userInfo = res.data;
					that.stu = res.data.svip_open;
					that.balanceStatus = res.data.balance_func_status;
					that.memberStatus = parseInt(res.data.member_func_status);
					that.vipStatus = res.data.vip_status;
					that.$store.commit('SETUID', res.data.uid);
					that.$store.commit('UPDATE_USERINFO', res.data);
					that.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '待付款':
								this.$set(item, 'num', res.data.orderStatusNum.unpaid_count);
								break;
							case '待发货':
								this.$set(item, 'num', res.data.orderStatusNum.unshipped_count);
								break;
							case '待收货':
								this.$set(item, 'num', res.data.orderStatusNum.received_count);
								break;
							case '待评价':
								this.$set(item, 'num', res.data.orderStatusNum.evaluated_count);
								break;
							case '售后/退款':
								this.$set(item, 'num', res.data.orderStatusNum.refunding_count);
								break;
						}
					});
				});
			},
			getMyMenus: function() {
				let that = this;
				getMenuList().then((res) => {
					this.diyData = res.data.diy_data;
					this.switchTab(this.diyData.order.style);
					this.my_banner_status = res.data.diy_data.my_banner_status;
					this.menu_status = res.data.diy_data.menu_status;
					this.service_status = res.data.diy_data.service_status;
					this.vip_type = res.data.diy_data.vip_type;
					this.newcomer_style = res.data.diy_data.newcomer_style;
					this.newcomer_status = res.data.diy_data.newcomer_status;
					this.imgUrls = res.data.routine_my_banner;
					this.routineContact = Number(res.data.routine_contact_type);
				});
			},
			switchTab(style) {
				this.orderMenu.forEach((item, index) => {
					item.icon = this.orderStyle[style][index];
				});
			},
			goMenuPage(url, name) {
				console.log(url);
				if (this.isLogin) {
					let arr = url.split('@APPID=');
					if (arr.length > 1) {
						//#ifdef MP
						uni.navigateToMiniProgram({
							appId: arr[arr.length - 1], // 此为生活缴费appid
							path: arr[0], // 此为生活缴费首页路径
							envVersion: 'release',
							success: (res) => {
								console.log('打开成功', res);
							},
							fail: (err) => {
								console.log('sgdhgf', err);
							}
						});
						//#endif
						//#ifndef MP
						this.Tips({
							title: 'h5与app端不支持跳转外部小程序'
						});
						//#endif
					} else {
						if (url == '/pages/extension/customer_list/chat' || url == 'https://chat.crmeb.net/chat/mobile') {
							this.$util.getCustomer(this.userInfo);
						} else {
							if (url.indexOf('http') === -1) {
								// #ifdef H5
								if (name && name === '订单核销') {
									return (window.location.href = `${location.origin}${url}`);
								}
								// #endif
								// #ifdef MP
								if (url != '#' && url == '/pages/users/user_set/index') {
									uni.openSetting({
										success: function(res) {}
									});
								}
								// #endif
								if (url == '/pages/store_spread/index') {
									storeCardApi()
										.then((res) => {
											this.isextension = true;
											this.$nextTick(function() {
												this.extension.code = res.data.url;
											});
										})
										.catch((err) => {
											uni.hideLoading();
											this.$util.Tips({
												title: err
											});
										});
								}
								if (
									['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
										'/pages/user/index', '/pages/store_cate/store_cate', '/pages/index/index'
									].indexOf(url) == -1
								) {
									uni.navigateTo({
										url: url
									});
								} else {
									uni.reLaunch({
										url: url
									});
								}
							} else {
								// #ifdef H5
								this.$util.JumpPath(url);
								// #endif
								// #ifndef H5
								uni.navigateTo({
									url: `/pages/annex/web_view/index?url=${url}`
								});
								// #endif
							}
						}
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.footer-placeholder {
		height: calc(98rpx+ constant(safe-area-inset-bottom));
		height: calc(98rpx + env(safe-area-inset-bottom));
		height: 98rpx;
	}

	.user-page {
		padding-bottom: calc(100rpx+ constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		padding-bottom: 100rpx;
	}

	.copy_right {
		text-align: center;
		color: #ccc;
		font-size: 22rpx;
		margin-top: 40rpx;

		.copyRightImg {
			width: 219rpx;
			height: 74rpx;
			margin: 16rpx auto;
			display: block;
		}

		.support {
			width: 219rpx;
			height: 74rpx;
			margin: 54rpx auto;
			display: block;
		}

		.copyRightText {
			margin-top: 0rpx;
			color: #ccc;
			font-size: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.num-wrapper {
		background-color: #fff;
		z-index: 29;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 22rpx;
		color: #333;
		margin: 20rpx 20rpx 20rpx 20rpx;
		border-radius: 16rpx;
		height: 160rpx;

		&.on {
			height: 128rpx;
			margin-top: -68rpx;

			.gift {
				color: var(--view-theme);
				margin-left: 10rpx;
				font-weight: bold;
			}
		}

		.img {
			margin-left: 38rpx;
			width: 76rpx;
			height: 68rpx;
		}

		.text {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			margin-left: -60rpx;
		}

		.btn-login {
			width: 144rpx;
			height: 56rpx;
			// background: linear-gradient(270deg, #FF7931 0%, #E93323 100%);
			background-color: var(--view-theme);
			border-radius: 28rpx;
			text-align: center;
			line-height: 56rpx;
			margin-right: 32rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;

		}

		.num-item {
			width: 33.33%;
			text-align: center;
			flex-grow: 1;

			&~.num-item {
				position: relative;

				&:before {
					content: '';
					position: absolute;
					width: 1rpx;
					height: 28rpx;
					top: 50%;
					margin-top: -14rpx;
					background-color: rgba(255, 255, 255, 0.4);
					left: 0;
				}
			}

			.num {
				font-size: 36rpx;
				font-weight: bold;
			}

			.txt {
				margin-top: 8rpx;
				font-size: 26rpx;
				color: #555;
			}
		}
	}
</style>