dingdong-mall/pages/index/my-home.vue

622 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>
<c-tabbar :current="4">
<!-- 顶部头像栏 -->
<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>
</c-tabbar>
</template>
<script>
// import appInviteQrcode from '@/pages/my/app-invite-qrcode.vue';
import CTabbar from '@/components/CTabbar.vue';
export default {
name: 'personal-center',
components: {
CTabbar
},
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();
},
async onShareAppMessage(e) {
let shareInfo = null;
if (e && e.target && e.target.dataset) {
shareInfo = e.target.dataset.shareInfo;
}
if (!this.curUserInfo) {
this.curUserInfo = await this.$request.getCurUserNoCache();
if (!this.curUserInfo) {
uni.showToast({
title: '请前往“我的”完成登录',
icon: 'none'
})
return;
}
}
if (!shareInfo) {
shareInfo = {
title: '家政服务就找工圈子',
path: '/pages/index/home?distributor=' + this.curUserInfo.customerId,
imageUrl: 'http://gqz.opsoul.com/sys/group-selfie.png'
}
}
return shareInfo;
},
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>