597 lines
19 KiB
Vue
597 lines
19 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 顶部头像栏 -->
|
||
<view class="padding bg-gradual-color"
|
||
:style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'">
|
||
<view class="flex justify-start padding-bottom-xl">
|
||
<view class="cu-avatar round"
|
||
:style="'width: 120rpx; height: 120rpx; background-image:url(' + curUserInfo.customerLogoUrl + ');'"
|
||
@click="getWxUserBasicInfo"></view>
|
||
<view class="margin-lr-sm">
|
||
<view class="text-xl margin-bottom-xs" @click="getWxUserBasicInfo">{{curUserInfo.name}}</view>
|
||
<view class="padding-xs text-sm">
|
||
<view v-if="myInfo.vipInfo.isVip" class='cu-tag bg-yellow radius'>{{myInfo.vipInfo.level}}会员
|
||
</view>
|
||
<view v-else class='cu-tag bg-yellow radius'>非会员</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="cu-bar">
|
||
<view class="action bar-first-action"><text class="margin-right-sm">余额:</text><text>{{myInfo.balance}}</text></view>
|
||
<view class="action"><text class="margin-right-sm">积分:</text><text>{{myInfo.integrate}}</text></view>
|
||
<view class="action" @click="showCart">
|
||
<text class="margin-right-sm">购物车:</text>
|
||
<text class="cuIcon-cart my-cart">
|
||
<text class="cu-tag badge my-cart-badge" v-if="myInfo.cartNum > 0">{{myInfo.cartNum}}</text>
|
||
</text>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="margin-lr-sm paper-drawer-bar margin-bottom-with-bar">
|
||
<!-- 服务圈 -->
|
||
<!-- <view class="bg-white padding-lr shadow-warp">
|
||
<view class="cu-bar margin-top-sm solid-bottom">
|
||
<view class="action bar-first-action">
|
||
<text>{{myInfo.servCircle.name}}</text>
|
||
<view class="cuIcon-title text-main-color"></view>
|
||
<text>服务圈</text>
|
||
</view>
|
||
<view class="flex justify-end">
|
||
<view class="text-center margin-right-sm">
|
||
<view class="cuIcon-shop action-icon"></view>
|
||
<view class="text-xs">邻里商铺</view>
|
||
</view>
|
||
<view class="text-center">
|
||
<view class="cuIcon-roundaddfill text-main-color action-icon"></view>
|
||
<view class="text-xs">您的小区</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="padding-top serv-news">
|
||
<view class="flex justify-between padding-bottom" v-for="(item, index) in myInfo.servCircle.newBuy">
|
||
<view class="flex justify-start">
|
||
<view class="cu-avatar round margin-right-sm"
|
||
:style="'background-image:url(' + item.avatarUrl + ');'"></view>
|
||
<view class="text-sm">
|
||
<text class="margin-right-xs">{{encryptString(item.userName)}}</text>
|
||
<text>{{item.action}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="margin-left-sm">
|
||
<button v-if="item.type === 0" class="cu-btn bg-main-color round sm">立即下单</button>
|
||
<button v-else class="cu-btn bg-main-color round sm">学家政</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="bg-white padding-lr padding-bottom">
|
||
<!-- 服务订单 -->
|
||
<view class="cu-bar solid-bottom margin-top-sm">
|
||
<view class="action bar-first-action">
|
||
<text class="cuIcon-titles text-main-color"></text> 服务订单
|
||
</view>
|
||
<view @click="showMyOrders(servOrderTabList, 0, servOrderType)">
|
||
<text>全部</text>
|
||
<text class="cuIcon-right"></text>
|
||
</view>
|
||
</view>
|
||
<view class="cu-list grid no-border col-5">
|
||
<view class="cu-item" @click="showMyOrders(servOrderTabList, 0, servOrderType)">
|
||
<view class="cuIcon-news">
|
||
<view class="cu-tag badge" v-if="waitForPayOrderCount > 0">
|
||
<block>{{waitForPayOrderCount}}</block>
|
||
</view>
|
||
</view>
|
||
<text>待付款</text>
|
||
</view>
|
||
<!-- <view class="cu-item" @click="showMyOrders(servOrderTabList, 1, servOrderType)">
|
||
<view class="cuIcon-list">
|
||
<view class="cu-tag badge" v-if="myInfo.serOrderNum.wait2Serv > 0">
|
||
<block>{{myInfo.serOrderNum.wait2Serv}}</block>
|
||
</view>
|
||
</view>
|
||
<text>待接单</text>
|
||
</view>
|
||
<view class="cu-item" @click="showMyOrders(servOrderTabList, 2, servOrderType)">
|
||
<view class="cuIcon-calendar">
|
||
<view class="cu-tag badge" v-if="myInfo.serOrderNum.wait2Serv > 0">
|
||
<block>{{myInfo.serOrderNum.wait2Serv}}</block>
|
||
</view>
|
||
</view>
|
||
<text>待排期</text>
|
||
</view>
|
||
<view class="cu-item" @click="showMyOrders(servOrderTabList, 3, servOrderType)">
|
||
<view class="cuIcon-repair">
|
||
<view class="cu-tag badge" v-if="myInfo.serOrderNum.processing > 0">
|
||
<block>{{myInfo.serOrderNum.processing}}</block>
|
||
</view>
|
||
</view>
|
||
<text>待上门</text>
|
||
</view> -->
|
||
<view class="cu-item" @click="showMyOrders(servOrderTabList, 1, servOrderType)">
|
||
<view class="cuIcon-repair">
|
||
<view class="cu-tag badge" v-if="waitForServOrderCount > 0">
|
||
<block>{{waitForServOrderCount}}</block>
|
||
</view>
|
||
</view>
|
||
<text>待服务</text>
|
||
</view>
|
||
<view class="cu-item" @click="showMyOrders(servOrderTabList, 2, servOrderType)">
|
||
<view class="cuIcon-comment">
|
||
<view class="cu-tag badge" v-if="servingOrderCount > 0">
|
||
<block>{{servingOrderCount}}</block>
|
||
</view>
|
||
</view>
|
||
<text>进行中</text>
|
||
</view>
|
||
<!-- <view class="cu-item" @click="showMyOrders(servOrderTabList, 3, servOrderType)">
|
||
<view class="cuIcon-notice">
|
||
<view class="cu-tag badge" v-if="myInfo.serOrderNum.afterServ > 0">
|
||
<block>{{myInfo.serOrderNum.afterServ}}</block>
|
||
</view>
|
||
</view>
|
||
<text>确认中</text>
|
||
</view> -->
|
||
<view class="cu-item" @click="showMyOrders(servOrderTabList, 3, servOrderType)">
|
||
<view class="cuIcon-service">
|
||
<view class="cu-tag badge" v-if="afterOrderCount > 0">
|
||
<block>{{afterOrderCount}}</block>
|
||
</view>
|
||
</view>
|
||
<text>售后中</text>
|
||
</view>
|
||
<view class="cu-item" @click="showMyOrders(servOrderTabList, 4, servOrderType)">
|
||
<view class="cuIcon-forward">
|
||
<view class="cu-tag badge" v-if="finishedOrderCount > 0">
|
||
<block>{{finishedOrderCount}}</block>
|
||
</view>
|
||
</view>
|
||
<text>已完成</text>
|
||
</view>
|
||
</view>
|
||
<!-- 商品订单 -->
|
||
<!-- <view class="cu-bar solid-bottom">
|
||
<view class="action bar-first-action">
|
||
<text class="cuIcon-titles text-main-color"></text> 商品订单
|
||
</view>
|
||
<view @click="showMyOrders(productOrderTabList, 0, productOrderType)">
|
||
<text>全部</text>
|
||
<text class="cuIcon-right"></text>
|
||
</view>
|
||
</view>
|
||
<view class="cu-list grid no-border col-5">
|
||
<view class="cu-item" @click="showMyOrders(productOrderTabList, 0, productOrderType)">
|
||
<view class="cuIcon-news">
|
||
<view class="cu-tag badge" v-if="myInfo.serOrderNum.wait2Pay > 0">
|
||
<block>{{myInfo.serOrderNum.wait2Pay}}</block>
|
||
</view>
|
||
</view>
|
||
<text>待付款</text>
|
||
</view>
|
||
<view class="cu-item" @click="showMyOrders(productOrderTabList, 1, productOrderType)">
|
||
<view class="cuIcon-goodsfavor">
|
||
<view class="cu-tag badge" v-if="myInfo.serOrderNum.buy> 0">
|
||
<block>{{myInfo.serOrderNum.buy}}</block>
|
||
</view>
|
||
</view>
|
||
<text>买到的</text>
|
||
</view>
|
||
<view class="cu-item" @click="showMyOrders(productOrderTabList, 2, productOrderType)">
|
||
<view class="cuIcon-goodsnew">
|
||
<view class="cu-tag badge" v-if="myInfo.serOrderNum.sale > 0">
|
||
<block>{{myInfo.serOrderNum.sale}}</block>
|
||
</view>
|
||
</view>
|
||
<text>卖出的</text>
|
||
</view>
|
||
<view class="cu-item" @click="showMyOrders(productOrderTabList, 3, productOrderType)">
|
||
<view class="cuIcon-comment">
|
||
<view class="cu-tag badge" v-if="myInfo.serOrderNum.afterServ > 0">
|
||
<block>{{myInfo.serOrderNum.afterServ}}</block>
|
||
</view>
|
||
</view>
|
||
<text>售后中</text>
|
||
</view>
|
||
<view class="cu-item" @click="showMyOrders(productOrderTabList, 4, productOrderType)">
|
||
<view class="cuIcon-forward">
|
||
<view class="cu-tag badge" v-if="myInfo.serOrderNum.wait2Forward > 0">
|
||
<block>{{myInfo.serOrderNum.wait2Forward}}</block>
|
||
</view>
|
||
</view>
|
||
<text>待转发</text>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- 所有功能 -->
|
||
<view class="bg-white padding-lr padding-bottom">
|
||
<view class="cu-bar margin-top-sm solid-bottom">
|
||
<view class="action bar-first-action">
|
||
<view class="cuIcon-titles text-main-color"></view>
|
||
<text>所有功能</text>
|
||
</view>
|
||
</view>
|
||
<view class="cu-list grid no-border col-4">
|
||
<!-- <view class="cu-item" @click="showPage(null)">
|
||
<view class="cuIcon-wefill text-red"></view>
|
||
<text>我的发布</text>
|
||
</view> -->
|
||
<view class="cu-item" @click="showMyAddress">
|
||
<view class="cuIcon-locationfill text-orange"></view>
|
||
<text>地址管理</text>
|
||
</view>
|
||
<!-- <view class="cu-item">
|
||
<view class="cuIcon-questionfill text-yellow"></view>
|
||
<text>常见问题</text>
|
||
</view> -->
|
||
<!-- <view class="cu-item">
|
||
<view class="cuIcon-servicefill text-olive"></view>
|
||
<text>联系客服</text>
|
||
</view> -->
|
||
<view class="cu-item" @click="showAppInviteQrcode">
|
||
<view class="cuIcon-qr_code text-green"></view>
|
||
<text>二维码分享</text>
|
||
</view>
|
||
<view class="cu-item" v-if="curUserInfo.placeStatus == 2" @click="showPage('/pages/my/withdraw')">
|
||
<view class="cuIcon-moneybagfill text-cyan"></view>
|
||
<text>钱包</text>
|
||
</view>
|
||
<!-- <view class="cu-item">
|
||
<view class="cuIcon-friendaddfill text-blue"></view>
|
||
<text>加盟项目</text>
|
||
</view> -->
|
||
<!-- <view class="cu-item">
|
||
<view class="cuIcon-group_fill text-purple"></view>
|
||
<text>社区代理</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<!-- 后台入口 -->
|
||
<view class="bg-white padding-lr padding-bottom">
|
||
<view class="cu-bar margin-top-sm solid-bottom">
|
||
<view class="action bar-first-action">
|
||
<view class="cuIcon-titles text-main-color"></view>
|
||
<text>后台入口</text>
|
||
</view>
|
||
</view>
|
||
<view class="cu-list grid no-border col-4">
|
||
<!-- <view class="cu-item">
|
||
<view class="cuIcon-brandfill text-mauve"></view>
|
||
<text>商家注册</text>
|
||
</view> -->
|
||
<view class="cu-item" @click="showApplyOperator">
|
||
<view class="cuIcon-wenzi text-pink"></view>
|
||
<text>{{curUserInfo.placeStatus == 0 ? '运营商申请' : '运营商登录'}}</text>
|
||
</view>
|
||
<view class="cu-item" @click="showApplyOtherCooperate('joiningProject', '/pages/my/apply-joining-project')">
|
||
<view class="cuIcon-group text-brown"></view>
|
||
<text>项目加盟</text>
|
||
</view>
|
||
<view class="cu-item" @click="showApplyOtherCooperate('communityAgents', '/pages/my/apply-community-operator')">
|
||
<view class="cuIcon-profile text-purple"></view>
|
||
<text>社区代理</text>
|
||
</view>
|
||
<!-- <view class="cu-item">
|
||
<view class="cuIcon-searchlist text-brown"></view>
|
||
<text>后台数据</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- app二维码分享 -->
|
||
<view class="cu-modal" :class="appShareQrcodeModal?'show':''">
|
||
<view class="cu-dialog bg-white">
|
||
<view class="cu-bar bg-white justify-end">
|
||
<view class="content">小程序线下邀请码</view>
|
||
<view class="action" @click="hideModal" data-modal="appShareQrcodeModal">
|
||
<text class="cuIcon-close text-red"></text>
|
||
</view>
|
||
</view>
|
||
<view class="padding-tb-sm">
|
||
<image :src="'data:image/png;base64,' + appQrcode" mode="aspectFit" @click="viewImage('data:image/png;base64,' + appQrcode)">
|
||
</image>
|
||
</view>
|
||
<view class="text-center padding">
|
||
<!-- <view class="padding-bottom-sm text-lg">请通过扫码或分享链接给好友进行邀请</view> -->
|
||
<!-- <button class="cu-btn bg-main-color shadow-blur" open-type="share">
|
||
<text class="cuIcon-share"></text>
|
||
<text>分享链接给好友</text>
|
||
</button> -->
|
||
<view class="padding-bottom-sm text-lg">点击二维码，长按保存图片</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// import appInviteQrcode from '@/pages/my/app-invite-qrcode.vue';
|
||
|
||
export default {
|
||
name: 'personal-center',
|
||
// components: {
|
||
// appInviteQrcode
|
||
// },
|
||
data() {
|
||
return {
|
||
pageContentTop: this.CustomBar,
|
||
curUserInfo: {},
|
||
myInfo: {},
|
||
servOrderTabList: [{
|
||
// type: -1,
|
||
name: '待付款'
|
||
},
|
||
// {
|
||
// type: 0,
|
||
// name: '待接单'
|
||
// }, {
|
||
// type: 1,
|
||
// name: '待排期'
|
||
// }, {
|
||
// type: 2,
|
||
// name: '待上门'
|
||
// },
|
||
{
|
||
type: '0,1,2',
|
||
name: '待服务'
|
||
}, {
|
||
type: '3,4',
|
||
name: '服务中'
|
||
},
|
||
// {
|
||
// type: 4,
|
||
// name: '待确认'
|
||
// },
|
||
{
|
||
// type: 4,
|
||
name: '售后中'
|
||
}, {
|
||
type: 5,
|
||
name: '已完成'
|
||
}, {
|
||
type: 6,
|
||
name: '已取消'
|
||
}
|
||
],
|
||
servOrderType: 0,
|
||
productOrderTabList: [{
|
||
// type: -1,
|
||
name: '待付款'
|
||
}, {
|
||
type: -1,
|
||
name: '买到的'
|
||
}, {
|
||
type: -1,
|
||
name: '卖出的'
|
||
}, {
|
||
type: -1,
|
||
name: '售后中'
|
||
}, {
|
||
type: -1,
|
||
name: '已完成'
|
||
}],
|
||
productOrderType: 1,
|
||
|
||
waitForPayOrderCount: 0,
|
||
waitForServOrderCount: 0,
|
||
servingOrderCount: 0,
|
||
afterOrderCount: 0,
|
||
finishedOrderCount: 0,
|
||
|
||
appQrcode: '',
|
||
appShareQrcodeModal: false
|
||
}
|
||
},
|
||
onShow() {
|
||
this.loadData();
|
||
},
|
||
onReady() {
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
await this.$request.refreshCurUserCache();
|
||
this.curUserInfo = this.$request.getCurUserInfo();
|
||
this.myInfo = await this.$api.data('myInfo');
|
||
this.myOrderCount();
|
||
},
|
||
async myOrderCount() {
|
||
let params = {
|
||
customerId: this.curUserInfo.customerId,
|
||
orderType: 0
|
||
}
|
||
|
||
// 待付款服务订单数量
|
||
let waitForPayOrderCountRes = await this.$request.countOrderList({
|
||
...params,
|
||
payStatusList: '0,4',
|
||
exceptOrderStatus: 6
|
||
});
|
||
this.waitForPayOrderCount = waitForPayOrderCountRes.data;
|
||
|
||
// 待服务服务订单数量
|
||
let waitForServOrderCountRes = await this.$request.countOrderList({
|
||
...params,
|
||
orderStatuses: '0,1,2'
|
||
});
|
||
this.waitForServOrderCount = waitForServOrderCountRes.data;
|
||
|
||
// 服务中服务订单数量
|
||
let servingOrderCountRes = await this.$request.countOrderList({
|
||
...params,
|
||
orderStatuses: '3,4'
|
||
});
|
||
this.servingOrderCount = servingOrderCountRes.data;
|
||
|
||
// 售后中服务订单数量
|
||
let afterOrderCountRes = await this.$request.countAfterList({
|
||
customerId: params.customerId
|
||
});
|
||
this.afterOrderCount = afterOrderCountRes.data;
|
||
|
||
// 已完成服务订单数量
|
||
let finishedOrderCountRes = await this.$request.countOrderList({
|
||
...params,
|
||
orderStatus: 5
|
||
});
|
||
this.finishedOrderCount = finishedOrderCountRes.data;
|
||
},
|
||
getWxUserBasicInfo() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/edit-user-basic-info'
|
||
})
|
||
},
|
||
viewImage(url) {
|
||
uni.previewImage({
|
||
urls: [url],
|
||
current: url
|
||
});
|
||
},
|
||
showMyOrders(tabHeaderList, tabCur, orderType) {
|
||
let tabInfo = {
|
||
orderType: orderType,
|
||
tabHeaderList: tabHeaderList,
|
||
tabCur: tabCur
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/my/my-order?tabInfo=' + encodeURIComponent(JSON.stringify(tabInfo))
|
||
})
|
||
},
|
||
encryptString(str) {
|
||
str = str[0] + "**" + str[str.length - 1];
|
||
return str;
|
||
},
|
||
showCart() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/my-cart'
|
||
});
|
||
},
|
||
showMyAddress() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/my-address'
|
||
});
|
||
},
|
||
async showApplyOperator() {
|
||
this.curUserInfo = this.$request.getCurUserInfo();
|
||
// 判断当前用户的是否已提交分销资格申请
|
||
if (this.curUserInfo.placeStatus == 0) {
|
||
uni.navigateTo({
|
||
url: '/pages/my/apply-operator'
|
||
})
|
||
} else if (this.curUserInfo.placeStatus == 1) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '申请审核中'
|
||
})
|
||
} else if (this.curUserInfo.placeStatus == 2) {
|
||
// 判断是否有绑定银行信息
|
||
let res = await this.$request.getBindBankCardByCustomerId({
|
||
customerId: this.curUserInfo.customerId
|
||
})
|
||
let bindBankCardInfo = res.data;
|
||
if (bindBankCardInfo && bindBankCardInfo.bankNum) {
|
||
// 分销资格审核通过
|
||
uni.navigateTo({
|
||
url: '/pages/my/my-operator'
|
||
})
|
||
} else {
|
||
// 跳转到银行卡绑定页面
|
||
uni.navigateTo({
|
||
url: '/pages/my/withdraw'
|
||
})
|
||
}
|
||
}
|
||
},
|
||
async showApplyOtherCooperate(type, pageUrl) {
|
||
let res = await this.$request.getCustomerPlaceList({
|
||
customerId: this.curUserInfo.customerId,
|
||
type: type
|
||
});
|
||
if (res && res.rows && res.rows.length) {
|
||
let applyRecord = res.rows[0];
|
||
if (applyRecord.status === 1) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '申请成功'
|
||
})
|
||
return;
|
||
} else if (applyRecord.status === 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '申请中，请等待工作人员联系',
|
||
duration: 2500
|
||
})
|
||
return;
|
||
}
|
||
}
|
||
uni.navigateTo({
|
||
url: pageUrl
|
||
})
|
||
},
|
||
async showAppInviteQrcode() {
|
||
this.curUserInfo = this.$request.getCurUserInfo();
|
||
let res = await this.$request.getUnlimitedWxacode({
|
||
scene: "distributor=" + this.curUserInfo.customerId,
|
||
width: 1280
|
||
//FIXME: 只适用于体验版，正式版需要去掉
|
||
// env_version: 'trial'
|
||
});
|
||
this.appQrcode = res.data;
|
||
this.appShareQrcodeModal = true;
|
||
},
|
||
showPage(pageUrl) {
|
||
if (pageUrl) {
|
||
uni.navigateTo({
|
||
url: pageUrl
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '功能开发中'
|
||
})
|
||
}
|
||
},
|
||
hideModal(e) {
|
||
this[e.currentTarget.dataset.modal] = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.bg-main-color .solid-bottom::after {
|
||
border-bottom: 1upx solid rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.my-cart {
|
||
position: relative;
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.my-cart-badge {
|
||
right: -30rpx;
|
||
}
|
||
|
||
.action-icon {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.paper-drawer-bar {
|
||
position: relative;
|
||
top: -100rpx;
|
||
}
|
||
|
||
.bar-first-action {
|
||
margin-left: unset !important;
|
||
font-size: 30rpx !important;
|
||
}
|
||
|
||
.serv-news .cu-avatar {
|
||
min-width: 64rpx;
|
||
}
|
||
|
||
.serv-news button {
|
||
min-width: 120rpx;
|
||
}
|
||
</style>
|