uniapp-ZHSQ/pages/user/index.vue

546 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="conatiner" :style="{ paddingTop: top + 'px' }">
<view class="header" @click="toLogin">
<view class="avatar-container">
<image class="avatar" :src="userInfo.userPic || 'https://static.hshuishang.com/person/Group_309.png'"
mode="" />
</view>
<view class="avatar_right">
<view class="avatar_title">
<view class="login-btn">{{ userInfo.nick_name ? userInfo.nick_name : '登录/注册' }}</view>
<view class="avatar_setting">
<view class="avatar_setting_box">
<image src="https://static.hshuishang.com/property-img-file/page_user_Vector13.png" mode=""
@click.stop="headerRefreshClick" />
</view>
<!-- <button class="login-btn" open-type="getPhoneNumber" style="display: none;"
@click="headerLoginClick" @getphonenumber="getPhoneNumber" id="hiddenLoginBtn"></button> -->
<view class="avatar_setting_box">
<image src="https://static.hshuishang.com/property-img-file/page_user_Vector14.png" mode=""
@click.stop="headerSettingsClick" />
</view>
</view>
</view>
<view class="avater_mobile">{{ userInfo.mobile }}</view>
</view>
</view>
<view class="section section1">
<view class="section_label" @click="goWallet(1, userInfo)">
<view>{{ userInfo.points }}</view>
<view>积分</view>
</view>
<view class="section_label">
<view>0.00</view>
<view>通宝</view>
</view>
<view class="section_label" @click="goWallet(2, userInfo)">
<view>{{ userInfo.property_housing_fund }}</view>
<view>岁银</view>
</view>
<view class="section_label" @click="goRedPacket()">
<view>{{ redPacketMoney }}</view>
<view>红包中心</view>
</view>
</view>
<view class="center">
<view class="gold_container" @click="headerGoldClick">
<view class="gold_title">
<span class="gold">商票</span> <span class="monenyt">0</span> | <span class="price">价值0.00</span>
<u-icon size="30" name="arrow-right" />
</view>
<image class="gold_pic"
src="https://static.hshuishang.com/property-img-file/page_user_Group_1556.png" />
</view>
<view class="main main1">
<view class="main_title">物业服务</view>
<view class="item1">
<view class="item_device" @click="handleCommunityClick">
<image class="icon-community icon-img"
src="https://static.hshuishang.com/property-img-file/page_user_Group_1382.png">
</image>
<text class="community-title title-item">我的房产</text>
</view>
<view class="item_device" @click="handleApplyOwnerClick">
<image class="icon-img"
src="https://static.hshuishang.com/property-img-file/page_user_Group_1559.png" />
<text class="owner-title title-item">物业账单</text>
</view>
<view class="item_device" @click="handleFacilityClick">
<image class="icon-img"
src="https://static.hshuishang.com/property-img-file/page_user_Group_1557.png" />
<text class="device-title title-item">我的工单</text>
</view>
<!--view class="item_device" @click="handleMeApplyClick">
<image class="icon-img"
src="https://static.hshuishang.com/property-img-file/page_user_Group_1558.png" />
<text class="device-title title-item">我的管家</text>
</view-->
</view>
</view>
</view>
<view class="main margin20">
<view class="main_title">电商服务</view>
<view class="item1 padding_bottom0">
<u-grid col="4" :border="false">
<u-grid-item @click="headerOrderClick(item)" v-for="(item, index) in networkList" :key="index">
<image class="nav_icon" :src="item.image" mode=""></image>
<text class="grid-text">{{ item.name }}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="main margin20">
<view class="main_title">到家服务</view>
<view class="item1 padding_bottom0">
<u-grid col="4" :border="false">
<u-grid-item @click="headerOrderClick(item)" v-for="(item, index) in visitList" :key="index">
<image class="nav_icon" :src="item.image" mode=""></image>
<text class="grid-text">{{ item.name }}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="main margin20">
<view class="main_title">门店服务</view>
<view class="item1 padding_bottom0">
<u-grid col="4" :border="false">
<u-grid-item @click="headerOrderClick(item)" v-for="(item, index) in shopList" :key="index">
<image class="nav_icon" :src="item.image" mode=""></image>
<text class="grid-text">{{ item.name }}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="main margin20">
<view class="main_title">商家服务</view>
<view class="item1 padding_bottom0">
<u-grid col="4" :border="false">
<u-grid-item @click="headerOrderClick(item)" v-for="(item, index) in merchantList" :key="index">
<image class="nav_icon" :src="item.image" mode=""></image>
<text class="grid-text">{{ item.name }}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="main margin20" v-if="shopManagementList.some(item => item.isShow)">
<view class="main_title">功能服务</view>
<view class="item1 padding_bottom0">
<u-grid col="4" :border="false">
<u-grid-item @click="headerOrderClick(item)"
v-for="(item, index) in shopManagementList.filter(item => item.isShow)" :key="index">
<view class="item2">
<image class="nav_icon" :src="item.image" mode=""></image>
<text class="grid-text">{{ item.name }}</text>
</view>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="main margin20">
<view class="main_title">智慧停车</view>
<view class="item1 padding_bottom0">
<u-grid col="4" :border="false">
<u-grid-item @click="headerOrderClick(item)" v-for="(item, index) in parkList" :key="index">
<image class="nav_icon" :src="item.image" mode=""></image>
<text class="grid-text">{{ item.name }}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<!-- <view class="customer" @click="headerCustomerClick">
<image src="https://static.hshuishang.com/property-img-file/page_user_Vector16.png"
mode="" />
<view>客服</view>
</view> -->
<view style="padding-top: 174rpx;"></view>
<nav-footer :current="4" />
</view>
</template>
<script>
import { apiArr } from '../../api/login';
import { apiArr as apiArr2 } from '../../api/v2User';
import { apiArr as apiArr3 } from '../../api/user';
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../utils/index';
export default {
data() {
return {
top: 0,
redPacketMoney: '0.00',
networkList: [{
image: "https://static.hshuishang.com/property-img-file/page_user_Group_1568.png",
name: "我的订单",
url: "/packages/myOrders/index/index",
},
{
image: "https://static.hshuishang.com/property-img-file/page_user_Group_1567.png",
name: "团购订单",
url: "/packages/myOrders/groupOrders/index",
},
// {
// image: "https://static.hshuishang.com/property-img-file/page_user_Group_1565.png",
// name: "我的收藏",
// url: "",
// },
// {
// image: "https://static.hshuishang.com/property-img-file/page_user_Group_1566.png",
// name: "售后服务",
// url: "",
// },
{
image: "https://static.hshuishang.com/property-img-file/page_user_Group_1563.png",
name: "收货地址",
url: "/packages/shop/address/index",
},
{
image: "https://static.hshuishang.com/property-img-file/page_user_Group_1564.png",
name: "购物车",
url: "/packages/shopCar/index/index",
},
],
visitList: [{
image: "https://static.hshuishang.com/property-img-file/page_user_Group_1572.png",
name: "服务订单",
url: "/packages/homeService/myOrders/index",
},
{
image: "https://static.hshuishang.com/property-img-file/page_user_Group_1573.png",
name: "月账单",
url: "/packages/homeService/myMonthlyBills/index",
},
{
image: "https://static.hshuishang.com/property-img-file/page_user_Group_1574.png",
name: "家政合同",
url: "/packages/homeService/myContracts/index",
}
],
shopList: [{
image: "https://static.hshuishang.com/property-img-file/page_user_Group_1580.png",
name: "附近门店",
url: "/packages/localLife/index/index",
},
// {
// image: "https://static.hshuishang.com/property-img-file/page_user_Group_1581.png",
// name: "服务券",
// url: "",
// },
{
image: "https://static.hshuishang.com/property-img-file/page_user_Group_1582.png",
name: "支付记录",
url: "/packages/localLife/payInfo/index",
}
],
// 商家服务好店入驻logo 从设计稿源码所用 vant 图标字体中提取的「shop-collect-o」真实字形轮廓
merchantList: [{
image: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSI3NCAxNzMgODc2IDkzMyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEwMjQpIHNjYWxlKDEgLTEpIj48cGF0aCBkPSJNNzk2IDI3MFE4MjcgMjcwIDg1My4wIDI1NS4wUTg3OSAyNDAgODk0LjUgMjEzLjVROTEwIDE4NyA5MTAgMTU2TDkwOSAxNTFROTA5IDEzNSA5MDIgMTE3VjExNVE4OTkgMTA4IDg5MyA5OEw4OTYgMTAyTDg5NSAxMDFRODk1IDEwMSA4OTQgMTAwTDg4NCA4M1E4NjUgNTUgODMxIDI0UTgxMCA1IDc4NSAtMTVMNzYxIC0zM1E3NTggLTM2IDc2MCAtMzRRNzQ5IC00MiA3MzQuNSAtNDIuMFE3MjAgLTQyIDcwOSAtMzRRNzEwIC0zNiA2ODYgLTE3UTY1OSAzIDYzOCAyNFE2MDMgNTYgNTg0IDg1UTU3NCA5OCA1NjkgMTExTDU2OCAxMTJRNTYwIDEzMyA1NjAgMTUxVjE1NlE1NjAgMTg3IDU3NS4wIDIxMy41UTU5MCAyNDAgNjE2LjAgMjU1LjBRNjQyIDI3MCA2NzMgMjcwUTcwNiAyNzAgNzM1IDI1MlE3NjMgMjcwIDc5NiAyNzBaTTc5MSA3MDBRODEwIDcwMCA4MjUuMCA2ODguMFE4NDAgNjc2IDg0NSA2NTdMODgwIDUxN1E4OTQgNDg3IDg5NCA0NTNRODk0IDQxMiA4NzMuNSAzNzcuMFE4NTMgMzQyIDgxOC41IDMyMS41UTc4NCAzMDEgNzQzIDMwMVE3MDcgMzAxIDY3NS41IDMxNy4wUTY0NCAzMzMgNjIzIDM2MFE2MDIgMzMzIDU3MS4wIDMxNy4wUTU0MCAzMDEgNTA0LjAgMzAxLjBRNDY4IDMwMSA0MzcuMCAzMTcuMFE0MDYgMzMzIDM4NCAzNjBRMzYzIDMzMyAzMzIuMCAzMTcuMFEzMDEgMzAxIDI2NSAzMDFRMjQ1IDMwMSAyMjUgMzA3VjMxSDUzMlE1NDMgMzEgNTUxLjUgMjIuNVE1NjAgMTQgNTYwLjAgMi41UTU2MCAtOSA1NTEuNSAtMTcuMFE1NDMgLTI1IDUzMiAtMjVIMjExUTE5NCAtMjUgMTgxLjUgLTEzLjBRMTY5IC0xIDE2OSAxN1YzMzVRMTQzIDM1NyAxMjguNSAzODcuNVExMTQgNDE4IDExNC4wIDQ1Mi41UTExNCA0ODcgMTI4IDUxN0wxNjMgNjU3UTE2OCA2NzYgMTgzLjAgNjg4LjBRMTk4IDcwMCAyMTcgNzAwWk03OTYgMjE1UTc3MiAyMTUgNzU1IDE5N0w3MzUgMTc2TDcxNSAxOTdRNjk3IDIxNSA2NzMuNSAyMTUuMFE2NTAgMjE1IDYzMy4wIDE5OC4wUTYxNiAxODEgNjE1IDE1N1YxNDlMNjE2IDE1MVE2MTYgMTQ0IDYyMCAxMzRWMTMzUTYyNCAxMjUgNjMwIDExNlE2NDUgOTMgNjc2IDY0UTY5NiA0NiA3MjAgMjdMNzM0IDE2TDc0OSAyOFE3NzMgNDYgNzkzIDY1UTgyMiA5MiA4MzggMTE0TDg0NCAxMjRMODUwIDEzN1E4NTMgMTQ1IDg1NCAxNTBWMTU2UTg1NCAxODAgODM3LjAgMTk3LjVRODIwIDIxNSA3OTYgMjE1Wk03OTEgNjQ0SDIxN0wxODAgNDk3UTE2OSA0NzYgMTY5IDQ1M1ExNjkgNDEzIDE5Ny4wIDM4NS4wUTIyNSAzNTcgMjY0LjUgMzU3LjBRMzA0IDM1NyAzMzIuMCAzODQuNVEzNjAgNDEyIDM2MSA0NTFWNDUzSDQwOFY0NTFRNDA5IDQxMiA0MzcuMCAzODQuNVE0NjUgMzU3IDUwNC4wIDM1Ny4wUTU0MyAzNTcgNTcxLjAgMzg0LjVRNTk5IDQxMiA1OTkgNDUxVjQ1M0g2NDdWNDUxUTY0OCA0MTIgNjc2LjAgMzg0LjVRNzA0IDM1NyA3NDMuMCAzNTcuMFE3ODIgMzU3IDgxMC4wIDM4NS4wUTgzOCA0MTMgODM4IDQ1M1E4MzggNDc2IDgyNyA0OTdaTTc4MyA4MTFRNzk0IDgxMSA4MDIuMCA4MDMuMFE4MTAgNzk1IDgxMC4wIDc4My41UTgxMCA3NzIgODAyLjAgNzYzLjVRNzk0IDc1NSA3ODMgNzU1SDIyNVEyMTQgNzU1IDIwNS41IDc2My41UTE5NyA3NzIgMTk3LjAgNzgzLjVRMTk3IDc5NSAyMDUuNSA4MDMuMFEyMTQgODExIDIyNSA4MTFaIiBmaWxsPSIjMzIzMjMzIi8+PC9nPjwvc3ZnPg==",
name: "好店入驻",
url: "/packages/shopEnter/choose/index",
}],
shopManagementList: [
{
image: "https://static.hshuishang.com/property-img-file/user_page_Group_1782.png",
name: "商家端",
url: "/packages/storeManagement/index/index",
isShow: uni.getStorageSync('is_merchant'),
},
// {
// image: "https://static.hshuishang.com/property-img-file/userPageGys.png",
// name: "供应商端",
// url: "",
// isShow: uni.getStorageSync('is_worker'),
// },
{
image: "https://static.hshuishang.com/property-img-file/userPageWuye.png",
name: "物业端",
url: "/packages/workOrderDashboard/guide/index",
isShow: uni.getStorageSync("is_worker"),
},
{
image: "https://static.hshuishang.com/property-img-file/userPageWuye.png",
name: "师傅端",
url: "/packages/homeService/worker/index",
isShow: uni.getStorageSync("is_merchant"),
}
],
parkList: [
{
image: "https://static.hshuishang.com/park/parkIndex_icon1.png",
name: "临停缴费",
url: "/packages/park/temporaryOrder/index",
},
// {
// image: "https://static.hshuishang.com/park/parkIndex_icon2.png",
// name: "月卡充值",
// url: "/packages/park/monthlyPayment/index",
// },
{
image: "https://static.hshuishang.com/park/parkIndex_icon3.png",
name: "停车订单",
url: "/packages/park/parkOrder/index",
},
{
image: "https://static.hshuishang.com/park/parkIndex_icon4.png",
name: "车辆管理",
url: "/packages/park/index/index",
},
],
userInfo: {},
isShop: uni.getStorageSync('is_shop'),
}
},
methods: {
goWallet(type, item) {
NavgateTo('/packages/user/wallet/index?type=' + type + '&item=' + JSON.stringify(item));
},
goRedPacket() {
NavgateTo('/packages/user/redPacket/index');
},
// 头像点击
toLogin() {
NavgateTo('/packages/user/replenishInfo/index');
},
// 刷新
headerRefreshClick() {
uni.showLoading({
title: '刷新中',
mask: true
})
// 清楚缓存信息
uni.removeStorageSync('ctoken');
uni.removeStorageSync('userId');
uni.removeStorageSync('openId');
uni.removeStorageSync('phone');
uni.removeStorageSync('is_deal');
uni.removeStorageSync('is_dev');
uni.removeStorageSync('is_shop');
uni.removeStorageSync('is_merchant');
uni.removeStorageSync('is_worker');
uni.removeStorageSync('shopId');
uni.removeStorageSync('order_dispatch_permission');
uni.removeStorageSync('work_order_permission');
const button = uni.createSelectorQuery().select('#hiddenLoginBtn');
button.boundingClientRect().exec();
// 执行原headerLoginClick逻辑
this.headerLoginClick();
},
headerLoginClick() {
let that = this;
uni.login({
onlyAuthorize: true,
success: (res) => {
request(apiArr.login, 'POST', {
code: res.code,
phone: '',
password: '',
}, { silent: false }).then((loginRes) => {
// 存储用户信息
uni.setStorageSync('ctoken', loginRes.token);
uni.setStorageSync('is_deal', loginRes.is_deal);
uni.setStorageSync('is_dev', loginRes.is_dev);
uni.setStorageSync('is_shop', loginRes.is_shop);
uni.setStorageSync('is_merchant', loginRes.is_merchant);
uni.setStorageSync('is_worker', loginRes.is_worker);
// 重置用户信息状态
this.userInfo = {};
// 更新商家显示状态
this.shopManagementList = [
{
image: "https://static.hshuishang.com/property-img-file/user_page_Group_1782.png",
name: "商家端",
url: "/packages/storeManagement/index/index",
isShow: loginRes.is_merchant,
},
// {
// image: "https://static.hshuishang.com/property-img-file/userPageGys.png",
// name: "供应商端",
// url: "",
// isShow: loginRes.is_worker,
// },
{
image: "https://static.hshuishang.com/property-img-file/userPageWuye.png",
name: "物业端",
url: "/packages/workOrderDashboard/guide/index",
isShow: loginRes.is_worker,
},
{
image: "https://static.hshuishang.com/property-img-file/userPageWuye.png",
name: "师傅端",
url: "/packages/homeService/worker/index",
isShow: loginRes.is_merchant,
}
];
// 获取用户信息
request(apiArr.loginInfo, 'POST', {
token: loginRes.token
}, { silent: false }).then((res2) => {
if (res2.error) return;
// 保存userId 后续接口使用
uni.setStorageSync('userId', res2.user_id);
uni.setStorageSync('openId', res2.open_id);
uni.setStorageSync('shopId', res2.wshop_id);
that.getUserInfo(true)
})
}, (err) => {
uni.hideLoading();
console.log('登录接口错误', err);
})
}
})
},
// 小程序登录获取手机号接口
getPhoneNumber(event) {
console.log('小程序登录获取手机号', event);
},
// 设置
headerSettingsClick() {
NavgateTo('/packages/user/index/index');
},
// 客服
headerCustomerClick() {
console.log('客服')
},
// 我的社区跳转
handleCommunityClick() {
NavgateTo('/packages/community/myCommunity/index')
},
// 物业账单跳转
handleApplyOwnerClick() {
NavgateTo(`/packages/community/propertyPayment/index`)
},
// 我的工单跳转
handleFacilityClick() {
const communityId = uni.getStorageSync('changeCommData').id;
NavgateTo(`/packages/workOrderDashboard/index/index?communityId=${communityId}`)
},
// 我的申请跳转
handleMeApplyClick() {
this.NotOpen();
// NavgateTo(`/packages/community/ownerList/index`)
},
headerGoldClick() {
this.NotOpen();
// NavgateTo(`/packages/community/ownerList/index`)
},
// 我的订单跳转
headerOrderClick(event) {
if (!event.url) {
this.NotOpen();
return
} else {
// if (!uni.getStorageSync('city')) {
// wx.showModal({
// title: '提示',
// content: '请先选择您的城市',
// confirmText:"去选择",
// complete: (res) => {
// if (res.cancel) {}
// if (res.confirm) {
// NavgateTo( '/pages/index/shopcity')
// }
// }
// })
// return
// }
console.log('选择城市');
NavgateTo(`${event.url}`)
}
},
// 暂未开通服务弹窗
NotOpen() {
uni.showModal({
title: '提示',
content: '此功能暂未开通!',
showCancel: false,
complete: (res) => {
if (res.cancel) {
}
}
})
return
},
async getUserInfo(item = false) {
const isCtoken = uni.getStorageSync('ctoken');
if (!isCtoken) return;
const res = await request(apiArr2.getUserInfo, 'POST', {}, { silent: item === true ? false : true });
const newUserInfo = {
...res,
userPic: res.avatar ? `${picUrl}${res.avatar}` : 'https://static.hshuishang.com/person/Group_309.png'
};
this.userInfo = newUserInfo;
if (item) {
const { community_worker } = res;
uni.setStorageSync('order_dispatch_permission', community_worker && community_worker[0].order_dispatch_permission == 1 || false);
uni.setStorageSync('work_order_permission', community_worker && community_worker[0].work_order_permission == 1 || false);
uni.setStorageSync('phone', res.account);
uni.hideLoading();
// uni.showToast({
// title: '刷新成功',
// icon: 'success',
// mask: true,
// duration: 2000,
// })
}
},
async getMyRedPacket() {
const params = {
user_id: uni.getStorageSync('userId'),
}
const res = await request(apiArr3.redPackageMyred, 'POST', params);
let processedList = res.rows
.filter(item => item.status !== 3)
.map(item => {
const newItem = { ...item };
if (newItem?.agent_info?.ad?.ad_name) {
newItem.agent_info.ad.ad_name = newItem.agent_info.ad.ad_name.split(',').join('');
}
return newItem;
});
this.redPacketMoney = processedList.reduce((total, item) =>
item.red_package_config ? total + item.red_package_config.money : total, 0.00
).toFixed(2);
},
},
onLoad() {
const meun = menuButtonInfo();
this.top = meun.height + meun.top;
},
onShow() {
this.getUserInfo();
this.getMyRedPacket();
// this.headerLoginClick();
},
}
</script>
<style>
@import url("./index.css");
</style>