猫妈狗爸伴宠师小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

298 lines
8.3 KiB

<template>
<view>
<view class="user-header">
<view class="flex flex-between login">
<view style="width: 120rpx;">
<up-image class="mr20" width="120rpx" height="120rpx" :src="userInfo.userImage"
shape="circle"></up-image>
</view>
<view style="width: calc(100% - 120rpx); padding-left: 20rpx;box-sizing: border-box;">
<view class="base-leavel">
<text>{{getIsLogin()?userInfo.userName:"欢迎来到版宠师"}}</text>
<image class="petMaster" :src="petMaster" mode="aspectFill"></image>
<image class="petMaster" :src="partnerMaster" mode="aspectFill"></image>
</view>
<view>
手机号:{{ userInfo?.userTelephone }}
</view>
</view>
<!-- <view style="width: 140rpx">
<up-button v-else @click="logout" :customStyle="{borderColor:'#fff'}" type="primary" text="退出登录"
shape="circle" color="#FFBF60"></up-button>
</view> -->
</view>
<view class="header-money">
<view class="header-money-list">
<view class="header-money-item flex flex-evenly">
<view style="text-align: center">
<view class="mb20 flex">
<up-image :show-loading="true" src="https://cdn.catmdogd.com/Work/image/work/icon4.png"
width="68rpx" height="68rpx"></up-image>
服务酬劳
</view>
<view class="mb20">{{ userInfo.price }}</view>
<view class="flex flex-between but">
<view @click="toWithdrawDeposit">提现</view>
<view>|</view>
<view @click="toRunningWater">明细</view>
</view>
</view>
<view style="text-align: center">
<view class="mb20 flex">
<up-image :show-loading="true" src="https://cdn.catmdogd.com/Work/image/work/icon4.png"
width="68rpx" height="68rpx"></up-image>
保证金
</view>
<view class="mb20">{{ userInfo.baoPrice }}</view>
<view @click="toBail" class="but">保证金中心</view>
</view>
</view>
</view>
</view>
</view>
<view class="user-container">
<view class="bgf pd4 radius20 mb28">
<view class="mb28 flex flex-between">
<view class="font36">我的宠物</view>
<view @click="toMyPet" style="color: #707070">更多 ></view>
</view>
<view>
<!-- <up-button v-if="getIsLogin()" class="mb20" size="large" style="width: 500rpx" type="primary"
text="请添加您的爱宠" shape="circle"
color="linear-gradient(to right, rgb(255 ,191 ,96 ,1), rgb(255, 51, 186))"></up-button> -->
<view v-if="isLogin" class="cw-box radius20 pd20 flex">
<up-image class="mr20" width="140rpx" style="flex-shrink: 0" height="140rpx"
:src="pet?.headImage" shape="circle"></up-image>
<view style="width: 418rpx">
<view class="font32 mb20">{{ pet.type }}</view>
<view class="font24 ellipsis">澳大利亚雾猫(澳洲,原“斑点雾猫”)| 1 个月</view>
</view>
</view>
</view>
</view>
<view class="bgf pd40 radius20">
<view class="font36 mb28">服务中心</view>
<view class="flex flex-between font28 flex-wrap">
<view class="icon-list" @click="toNext">
<up-image class="mb20" src="https://cdn.catmdogd.com/Work/image/work/icon1.png" width="68rpx"
height="68rpx"></up-image>
<view>我的评价</view>
</view>
<view @click="platformProtocol" class="icon-list">
<up-image class="mb20" :show-loading="true"
src="https://cdn.catmdogd.com/Work/image/work/icon2.png" width="68rpx"
height="68rpx"></up-image>
<view>平台协议</view>
</view>
<view @click="openCustomerServiceChat" class="icon-list">
<up-image class="mb20" :show-loading="true"
src="https://cdn.catmdogd.com/Work/image/work/icon3.png" width="68rpx"
height="68rpx"></up-image>
<view>联系客服</view>
</view>
<button plain class="btn-share" open-type="share">
<view class="icon-list">
<up-image class="mb20" :show-loading="true"
src="https://t9.baidu.com/it/u=2834693008,3232051400&fm=193" width="68rpx"
height="68rpx"></up-image>
<view>分享好友</view>
</view>
</button>
</view>
<view class="flex flex-between font28 flex-wrap mt20">
<view class="icon-list" @click="logout">
<up-image class="mb20"
src="https://cdn.catmdogd.com/2025/04/01ab556ca51d2a4f82896c1e6fd0034a8b7shDr3f7qeDQ527d93075294e7237cee8b6c7d613be8.png"
width="68rpx" height="68rpx" bgColor="#ffffff"></up-image>
<view>退出登录</view>
</view>
</view>
</view>
</view>
</view>
<up-popup :show="show" @close="close" :round="10">
<view style="padding: 10rpx 20rpx;height: 50vh;overflow-y: scroll;" v-html="content"></view>
</up-popup>
<Modal @confirm="confirmLogout" @cancel="cancelLogout" ref="modal">
<template>
<view class="tip">
确认退出登录?
</view>
</template>
</Modal>
</template>
<script setup>
import {
computed,
onMounted,
ref
} from "vue"
import {
getIsLogin,
getStorage,
getToken,
removeIsLogin
} from "../../utils/auth";
import { getLoginStatus } from "@/utils/useMixin.js"
import tab from "../../plugins/tab";
import Modal from "@/components/Modal/index.vue"
import {
useStore
} from "vuex"
import {
onShow,
onShareAppMessage,
} from "@dcloudio/uni-app"
import {
getpetList
} from "@/api/pet/index.js"
onShow(() => {
if (!getLoginStatus()) return;
getPet();
})
onMounted(() => {
content.value = configList.value?.['home_agreement']?.paramValueArea || ""
// 分享好友
onShareAppMessage(() => {
return {
title: configList.value.applet_info.paramValueText, // 分享标题
imageUrl: configList.value.applet_info.paramValueImage, // 分享图片地址,非必须
path: '/pages/workbenchManage/index', // 分享路径
};
})
})
const store = useStore();
const isLogin = ref(false)
const userInfo = computed(() => {
return store.getters.userInfo
})
const configList = computed(() => {
return store.getters.configList;;
})
const pet = ref({})
const show = ref(false)
const content = ref("")
const modal = ref(null)
const petMasterLevel = ref(1)
const partnerLevel = ref(0)
// 按伴宠师等级选中图标
const petMaster = computed(() => {
const paths = [configList.value?.pet_primary?.paramValueImage, configList.value?.pet_senior
?.paramValueImage
];
return paths[petMasterLevel.value];
})
// 按合伙人等级选中图标
const partnerMaster = computed(() => {
const paths = [configList.value?.partner_intermediate?.paramValueImage, configList.value?.partner_senior
?.paramValueImage
];
return paths[partnerLevel.value];
})
if (getIsLogin() && getToken()) {
userInfo.value = getStorage("userInfo")
isLogin.value = true
}
const toNext = () => {
uni.navigateTo({
url: "/otherPages/orderTakingManage/evaluate/index"
})
}
const toRunningWater = () => {
uni.navigateTo({
url: "/otherPages/myOrdersManage/transaction/index"
})
}
const getPet = async () => {
let response = await getpetList();
pet.value = response?.data[0] || {};
}
const logout = () => {
modal.value.open();
}
// 跳转提现
const toWithdrawDeposit = () => {
uni.navigateTo({
url: "/otherPages/myOrdersManage/withdrawal/index"
})
}
//跳转保证金
const toBail = () => {
uni.navigateTo({
url: "/otherPages/myOrdersManage/bond/index"
})
}
// 跳转我的宠物
const toMyPet = () => {
uni.navigateTo({
url: '/otherPages/userManage/pet/index'
});
}
const close = () => {
show.value = false;
}
const confirmLogout = () => {
store.commit("setUserInfo", {});
uni.removeStorageSync("token")
uni.removeStorageSync("baseInfo")
removeIsLogin();
uni.navigateTo({
url: "/pages/login/index"
})
}
const platformProtocol = () => {
show.value = true;
}
const cancelLogout = () => {
// 取消退出登录回调
}
// 定义 openCustomerServiceChat 方法,用于唤起客服会话界面
const openCustomerServiceChat = () => {
uni.openCustomerServiceChat({
extInfo: {
url: "https://work.weixin.qq.com/kfid/kfc135d138d063817e1"
},
sessionFrom: '1000',
// 成功回调函数
success: function(res) {
console.log('成功打开客服会话', res);
},
// 失败回调函数
fail: function(err) {
console.error('打开客服会话失败', err);
}
});
};
</script>
<style scoped lang="scss">
@import "index";
.tip {
text-align: center;
padding-bottom: 20rpx;
}
</style>