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

501 lines
16 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="myInfo.serOrderNum.wait2Pay > 0">
<block>{{myInfo.serOrderNum.wait2Pay}}</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="myInfo.serOrderNum.processing > 0">
<block>{{myInfo.serOrderNum.processing}}</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="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-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="myInfo.serOrderNum.afterServ > 0">
<block>{{myInfo.serOrderNum.afterServ}}</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="myInfo.serOrderNum.wait2Forward > 0">
<block>{{myInfo.serOrderNum.wait2Forward}}</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>运营商申请</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"></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>
</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: '已完成'
}],
servOrderType: 0,
productOrderTabList: [{
// type: -1,
name: '待付款'
}, {
type: -1,
name: '买到的'
}, {
type: -1,
name: '卖出的'
}, {
type: -1,
name: '售后中'
}, {
type: -1,
name: '已完成'
}],
productOrderType: 1,
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');
},
getWxUserBasicInfo() {
uni.navigateTo({
url: '/pages/my/edit-user-basic-info'
})
},
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 showAppInviteQrcode() {
this.curUserInfo = this.$request.getCurUserInfo();
let res = await this.$request.getUnlimitedWxacode({
scene: "distributor=" + this.curUserInfo.customerId,
//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>