猫妈狗爸伴宠师小程序前端代码
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.

382 lines
11 KiB

3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
  1. <template>
  2. <view>
  3. <view class="user-header">
  4. <view class="flex flex-between login">
  5. <view style="width: 120rpx;">
  6. <up-image class="mr20" width="120rpx" height="120rpx" :src="userInfo.userImage || 'https://image.hhlm1688.com/img/work/log/headImage.png'"
  7. shape="circle"></up-image>
  8. </view>
  9. <view style="width: calc(100% - 120rpx); padding-left: 20rpx;box-sizing: border-box;">
  10. <view class="base-leavel">
  11. <text>{{isLogin ? userInfo.userName : "欢迎来到版宠师"}}</text>
  12. </view>
  13. <view v-if="isLogin">
  14. <image v-if="petMaster" class="role-tag" :src="petMaster" mode="aspectFill"></image>
  15. <image v-if="partnerMaster" class="role-tag" :src="partnerMaster" mode="aspectFill"></image>
  16. </view>
  17. <!-- <view>
  18. 手机号:{{ userInfo?.userTelephone }}
  19. </view> -->
  20. </view>
  21. <!-- <view style="width: 140rpx">
  22. <up-button v-else @click="logout" :customStyle="{borderColor:'#fff'}" type="primary" text="退出登录"
  23. shape="circle" color="#FFBF60"></up-button>
  24. </view> -->
  25. </view>
  26. <view class="header-money">
  27. <view class="header-money-list">
  28. <view class="header-money-item flex flex-evenly">
  29. <view style="text-align: center">
  30. <view class="mb20 flex">
  31. <!-- <up-image :show-loading="true" src="https://cdn.catmdogd.com/Work/image/work/icon4.png"
  32. width="68rpx" height="68rpx"></up-image> -->
  33. <up-image :show-loading="true" src="/static/images/user/a2.png"
  34. style="margin-right: 14rpx;"
  35. width="50rpx" height="50rpx"></up-image>
  36. 服务酬劳
  37. </view>
  38. <view class="mb20">{{ isLogin ? userInfo.price || '0' : '--' }}</view>
  39. <view class="flex flex-between but">
  40. <view @click="handleWithdraw">提现</view>
  41. <view>|</view>
  42. <view @click="handleRunningWater">明细</view>
  43. </view>
  44. </view>
  45. <view style="text-align: center">
  46. <view class="mb20 flex">
  47. <!-- <up-image :show-loading="true" src="https://cdn.catmdogd.com/Work/image/work/icon4.png"
  48. width="68rpx" height="68rpx"></up-image> -->
  49. <up-image :show-loading="true" src="/static/images/user/a1.png"
  50. style="margin-right: 14rpx;"
  51. width="50rpx" height="50rpx"></up-image>
  52. 保证金
  53. </view>
  54. <view class="mb20">{{ isLogin ? userInfo.baoPrice || '0' : '--' }}</view>
  55. <view @click="handleBail" class="but">保证金中心</view>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <view class="user-container">
  62. <view class="bgf pd4 radius20 mb28">
  63. <view class="mb28 flex flex-between">
  64. <view class="font36">我的爱宠</view>
  65. <view @click="handleMyPet" style="color: #707070">更多 ></view>
  66. </view>
  67. <view>
  68. <view v-if="isLogin && petList.length">
  69. <scroll-view scroll-x class="pet-scroll-container" show-scrollbar="false">
  70. <view class="pet-scroll-content">
  71. <view class="cw-box radius20 pd20 flex pet-item"
  72. v-for="(pet, inde) in petList"
  73. @click="handleEditPet(pet)"
  74. :key="pet.id">
  75. <up-image class="mr20" width="120rpx" style="flex-shrink: 0" height="120rpx"
  76. :src="pet?.headImage" shape="circle"></up-image>
  77. <view style="width: 280rpx">
  78. <view class="font32 mb20 pet-name-container">
  79. {{ pet.nickName }}
  80. <text class="pet-gender" :class="{'pet-gender-male': pet.sex === 0, 'pet-gender-female': pet.sex === 1}">
  81. {{ pet.sex === 0 ? '♂' : '♀' }}
  82. </text>
  83. </view>
  84. <view class="font24 ellipsis">{{ pet.type }} | {{ pet.age }}</view>
  85. </view>
  86. </view>
  87. </view>
  88. </scroll-view>
  89. </view>
  90. <view class="no-pet-tip radius20 pd20 flex" v-else>
  91. <up-image class="mr20" width="80rpx" height="80rpx" src="https://image.hhlm1688.com/img/work/log/headImage.png" shape="circle"></up-image>
  92. <view class="no-pet-text">{{isLogin ? '您还没有添加您的爱宠信息呢' : '登录后查看您的爱宠'}}</view>
  93. <view class="add-pet-btn" @click="handleMyPet">{{isLogin ? '去添加' : '去登录'}}</view>
  94. </view>
  95. </view>
  96. </view>
  97. <view class="bgf pd40 radius20">
  98. <view class="font36 mb28">服务中心</view>
  99. <view class="flex flex-between font28 flex-wrap">
  100. <view class="icon-list" @click="handleEvaluate">
  101. <!-- <up-image class="mb20" src="https://cdn.catmdogd.com/Work/image/work/icon1.png" width="68rpx"
  102. height="68rpx"></up-image> -->
  103. <up-image class="mb20" src="/static/images/user/1.png" width="58rpx"
  104. height="58rpx"></up-image>
  105. <view>我的评价</view>
  106. </view>
  107. <view @click="platformProtocol" class="icon-list">
  108. <!-- <up-image class="mb20" :show-loading="true"
  109. src="https://cdn.catmdogd.com/Work/image/work/icon2.png" width="68rpx"
  110. height="68rpx"></up-image> -->
  111. <up-image class="mb20" src="/static/images/user/2.png" width="58rpx"
  112. height="58rpx"></up-image>
  113. <view>平台协议</view>
  114. </view>
  115. <button plain class="btn-share" open-type="contact">
  116. <view class="icon-list">
  117. <!-- <up-image class="mb20" :show-loading="true"
  118. src="https://cdn.catmdogd.com/Work/image/work/icon3.png" width="68rpx"
  119. height="68rpx"></up-image> -->
  120. <up-image class="mb20" src="/static/images/user/4.png" width="58rpx"
  121. height="58rpx"></up-image>
  122. <view>联系客服</view>
  123. </view>
  124. </button>
  125. <button plain class="btn-share" open-type="share">
  126. <view class="icon-list">
  127. <!-- <up-image class="mb20" :show-loading="true"
  128. src="https://t9.baidu.com/it/u=2834693008,3232051400&fm=193" width="68rpx"
  129. height="68rpx"></up-image> -->
  130. <up-image class="mb20" src="/static/images/user/5.png" width="58rpx"
  131. height="58rpx"></up-image>
  132. <view>分享好友</view>
  133. </view>
  134. </button>
  135. </view>
  136. <!-- <view class="flex flex-between font28 flex-wrap mt20">
  137. <view class="icon-list" @click="logout">
  138. <up-image class="mb20"
  139. src="https://cdn.catmdogd.com/2025/04/01ab556ca51d2a4f82896c1e6fd0034a8b7shDr3f7qeDQ527d93075294e7237cee8b6c7d613be8.png"
  140. width="68rpx" height="68rpx" bgColor="#ffffff"></up-image>
  141. <view>退出登录</view>
  142. </view>
  143. </view> -->
  144. </view>
  145. </view>
  146. </view>
  147. <up-popup :show="show" @close="close" :round="10">
  148. <view style="padding: 10rpx 20rpx;height: 50vh;overflow-y: scroll;" v-html="content"></view>
  149. </up-popup>
  150. <Modal @confirm="confirmLogout" @cancel="cancelLogout" ref="modal">
  151. <template>
  152. <view class="tip">
  153. 确认退出登录?
  154. </view>
  155. </template>
  156. </Modal>
  157. </template>
  158. <script setup>
  159. import {
  160. computed,
  161. onMounted,
  162. ref
  163. } from "vue"
  164. import {
  165. getIsLogin,
  166. getStorage,
  167. getToken,
  168. removeIsLogin
  169. } from "../../utils/auth";
  170. import { getLoginStatus } from "@/utils/useMixin.js"
  171. import tab from "../../plugins/tab";
  172. import Modal from "@/components/Modal/index.vue"
  173. import {
  174. useStore
  175. } from "vuex"
  176. import {
  177. onShow,
  178. onShareAppMessage,
  179. } from "@dcloudio/uni-app"
  180. import {
  181. getpetList
  182. } from "@/api/pet/index.js"
  183. onShow(() => {
  184. checkLoginStatus();
  185. if (isLogin.value) {
  186. getPet();
  187. }
  188. })
  189. onMounted(() => {
  190. content.value = configList.value?.['home_agreement']?.paramValueArea || ""
  191. // 分享好友
  192. onShareAppMessage(() => {
  193. return {
  194. title: configList.value.applet_info.paramValueText, // 分享标题
  195. imageUrl: configList.value.applet_info.paramValueImage, // 分享图片地址,非必须
  196. path: '/pages/workbenchManage/index', // 分享路径
  197. };
  198. })
  199. })
  200. const store = useStore();
  201. const isLogin = ref(false)
  202. const userInfo = computed(() => {
  203. return store.getters.userInfo
  204. })
  205. const configList = computed(() => {
  206. return store.getters.configList;;
  207. })
  208. const petList = ref([])
  209. const show = ref(false)
  210. const content = ref("")
  211. const modal = ref(null)
  212. const LEVEL_AND_KEY_FIELDS_MAPPING = {
  213. '1': 'primary',
  214. '2': 'intermediate',
  215. '3': 'senior',
  216. }
  217. // 按伴宠师等级选中图标
  218. const petMaster = computed(() => {
  219. if (!isLogin.value) return ''
  220. const { userBcs, userBcsRole } = userInfo.value
  221. if (!userBcs) {
  222. return ''
  223. }
  224. const key = `pet_${LEVEL_AND_KEY_FIELDS_MAPPING[userBcsRole]}`
  225. return configList.value?.[key]?.paramValueImage
  226. })
  227. // 按合伙人等级选中图标
  228. const partnerMaster = computed(() => {
  229. if (!isLogin.value) return ''
  230. const { userHh } = userInfo.value
  231. if (!userHh) {
  232. return ''
  233. }
  234. const key = `partner_${LEVEL_AND_KEY_FIELDS_MAPPING[userHh]}`
  235. return configList.value?.[key]?.paramValueImage
  236. })
  237. // 检查登录状态
  238. const checkLoginStatus = () => {
  239. if (getIsLogin() && getToken()) {
  240. isLogin.value = true
  241. } else {
  242. isLogin.value = false
  243. }
  244. }
  245. // 检查登录状态,未登录则跳转登录
  246. const checkLoginAndRedirect = () => {
  247. if (!isLogin.value) {
  248. uni.navigateTo({
  249. url: "/pages/login/index"
  250. })
  251. return false
  252. }
  253. return true
  254. }
  255. // 处理评价点击
  256. const handleEvaluate = () => {
  257. if (!checkLoginAndRedirect()) return
  258. uni.navigateTo({
  259. url: "/otherPages/orderTakingManage/evaluate/index"
  260. })
  261. }
  262. // 处理流水明细点击
  263. const handleRunningWater = () => {
  264. if (!checkLoginAndRedirect()) return
  265. uni.navigateTo({
  266. url: "/otherPages/myOrdersManage/transaction/index"
  267. })
  268. }
  269. // 处理提现点击
  270. const handleWithdraw = () => {
  271. if (!checkLoginAndRedirect()) return
  272. uni.navigateTo({
  273. url: "/otherPages/binding/withdrawal/index"
  274. })
  275. }
  276. // 处理保证金点击
  277. const handleBail = () => {
  278. if (!checkLoginAndRedirect()) return
  279. uni.navigateTo({
  280. url: "/otherPages/myOrdersManage/bond/index"
  281. })
  282. }
  283. // 处理我的宠物点击
  284. const handleMyPet = () => {
  285. if (!checkLoginAndRedirect()) return
  286. uni.navigateTo({
  287. url: '/otherPages/userManage/pet/index'
  288. });
  289. }
  290. // 处理编辑宠物点击
  291. const handleEditPet = (item) => {
  292. if (!checkLoginAndRedirect()) return
  293. if (item.petType === '猫咪' || item.petType === 0) {
  294. uni.navigateTo({
  295. url: `/otherPages/userManage/pet/petInfo?petType=0&optionType=edit&petId=${item.id}`
  296. })
  297. }
  298. if (item.petType === '狗狗' || item.petType === 1) {
  299. uni.navigateTo({
  300. url: `/otherPages/userManage/pet/petInfo?petType=1&optionType=edit&petId=${item.id}`
  301. })
  302. }
  303. };
  304. const getPet = async () => {
  305. if (!isLogin.value) return;
  306. let response = await getpetList({
  307. userId: userInfo.value.userId
  308. });
  309. petList.value = response?.data || [];
  310. }
  311. const logout = () => {
  312. modal.value.open();
  313. }
  314. const close = () => {
  315. show.value = false;
  316. }
  317. const confirmLogout = () => {
  318. store.commit("setUserInfo", {});
  319. uni.removeStorageSync("token")
  320. uni.removeStorageSync("baseInfo")
  321. removeIsLogin();
  322. uni.navigateTo({
  323. url: "/pages/login/index"
  324. })
  325. }
  326. const platformProtocol = () => {
  327. show.value = true;
  328. }
  329. const cancelLogout = () => {
  330. // 取消退出登录回调
  331. }
  332. </script>
  333. <style scoped lang="scss">
  334. @import "index";
  335. .tip {
  336. text-align: center;
  337. padding-bottom: 20rpx;
  338. }
  339. </style>