362 lines
11 KiB
Vue
362 lines
11 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 顶部头像栏 -->
|
|
<view class="padding bg-main-color" :style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'">
|
|
<view class="flex justify-start padding-bottom-xl solid-bottom">
|
|
<view class="cu-avatar round"
|
|
:style="'width: 120rpx; height: 120rpx; background-image:url(' + myInfo.picUrl + ');'"></view>
|
|
<view class="margin-lr-sm">
|
|
<view class="text-xl margin-bottom-xs">{{myInfo.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.news">
|
|
<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-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, 3, 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, 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">
|
|
<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">
|
|
<view class="cuIcon-qr_code text-green"></view>
|
|
<text>二维码分享</text>
|
|
</view>
|
|
<view class="cu-item">
|
|
<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>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'personal-center',
|
|
components: {},
|
|
data() {
|
|
return {
|
|
pageContentTop: this.CustomBar,
|
|
myInfo: {},
|
|
servOrderTabList: [{
|
|
type: 'ordersWait2Pay',
|
|
name: '待付款'
|
|
}, {
|
|
type: 'ordersWait2Serv',
|
|
name: '待服务'
|
|
}, {
|
|
type: 'ordersServing',
|
|
name: '服务中'
|
|
}, {
|
|
type: 'ordersAfterServ',
|
|
name: '售后中'
|
|
}, {
|
|
type: 'ordersFinish',
|
|
name: '已完成'
|
|
}],
|
|
servOrderType: 'servOrder',
|
|
productOrderTabList: [{
|
|
type: 'pdOrdersWait2Pay',
|
|
name: '待付款'
|
|
}, {
|
|
type: 'pdOrdersBought',
|
|
name: '买到的'
|
|
}, {
|
|
type: 'pdOrdersSaled',
|
|
name: '卖出的'
|
|
}, {
|
|
type: 'pdOrdersAfterServ',
|
|
name: '售后中'
|
|
}, {
|
|
type: 'pdOrdersFinish',
|
|
name: '已完成'
|
|
}],
|
|
productOrderType: 'productOrder'
|
|
}
|
|
},
|
|
onReady() {
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
async loadData() {
|
|
this.myInfo = await this.$api.data('myInfo');
|
|
console.log(this.myInfo)
|
|
},
|
|
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'
|
|
});
|
|
},
|
|
showApplyOperator() {
|
|
uni.navigateTo({
|
|
url: '/pages/my/apply-operator'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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>
|