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

375 lines
8.5 KiB

2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
  1. <template>
  2. <view class="personal-pet">
  3. <view v-if="petList.length > 0" class="personal-pet-list">
  4. <view v-for="(item, index) in petList" :key="index">
  5. <view
  6. :class="['personal-pet-list-item', item.sex === 0 ? 'personal-pet-list-item_backgroud_m' : 'personal-pet-list-item_backgroud_f' ]">
  7. <view class="personal-pet-info">
  8. <view>
  9. <u-avatar :src="item.headImage || defaultPhoto" size="60" shape="circle"></u-avatar>
  10. </view>
  11. <view class="personal-pet-info-1">
  12. <view class="personal-pet-info-2">
  13. <view class="personal-pet-name">
  14. {{ item.nickName }}
  15. </view>
  16. <view class="personal-pet-sex">
  17. <img :src="item.sex === 0 ? '../../../static/images/sex/boy.svg' : '../../../static/images/sex/girl.svg'"
  18. alt="sex" style="width: 16px;height: 16px;" />
  19. </view>
  20. </view>
  21. <view class="personal-pet-info-3" style="width: 100%;">
  22. <view style="max-width: 35%;">
  23. {{ item.type || '未知' }}
  24. </view>
  25. <view class="personal-pet-info-age" style="max-width: 90px;">
  26. {{ item.age || '未知' }}
  27. </view>
  28. <view style="max-width: 25%;">
  29. 体重{{ item.weight }}kg
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. <view class="personal-pet-info-disposition ellipsis">
  35. 性格 {{ item.personality }}
  36. </view>
  37. <view class="personal-pet-info-btns">
  38. <view class="personal-pet-info-btn" @click="editPet(item)">
  39. <u-icon name="edit-pen" color="#7d8196" size="16" style="margin-right: 5px;"></u-icon>
  40. <view style="margin-left: 5px;">
  41. 编辑
  42. </view>
  43. </view>
  44. <view class="personal-pet-info-btn" @click="deletePet(item)">
  45. <u-icon name="trash" color="#7d8196" size="16"></u-icon>
  46. <view style="margin-left: 5px;">
  47. 删除
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. <view v-else class="personal-pet-none">
  55. <img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png" alt="pet"
  56. style="width: 149px;height: 124px;" mode="widthFix" />
  57. <view class="personal-pet-none-text">这里还没有您的宠物,请点击添加吧~</view>
  58. </view>
  59. <view class="personal-pet-add">
  60. <button class="personal-pet-add-btn" @click="addPet">
  61. <view style="font-size: 16px;font-weight: 500;">
  62. 添加宠物
  63. </view>
  64. </button>
  65. </view>
  66. <view>
  67. <u-picker :showToolbar='true' :show="show" :columns="petTypes" @change="petTypeChange" @cancel="cancel"
  68. @confirm="confirm" :immediateChange="true"></u-picker>
  69. </view>
  70. <u-modal :show="showDel" @confirm="confirmDel" @cancel="cancelDel" ref="uModal" showCancelButton
  71. :asyncClose="true" :content="delContent"></u-modal>
  72. </view>
  73. </template>
  74. <script setup>
  75. import {
  76. ref,
  77. onMounted
  78. } from 'vue';
  79. // import {
  80. // getDictList
  81. // } from "@/api/system/user.js"
  82. import {
  83. getpetList,
  84. delByPetId
  85. } from "@/api/pet/index.js";
  86. import {
  87. useRouter
  88. } from 'vue-router';
  89. import {
  90. onShow,
  91. onPullDownRefresh
  92. } from '@dcloudio/uni-app'
  93. const router = useRouter();
  94. const defaultPhoto = ref('https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png');
  95. const petList = ref([]);
  96. const show = ref(false);
  97. const showDel = ref(false);
  98. const petTypes = ref([
  99. [
  100. '猫咪', '狗狗'
  101. ]
  102. ]);
  103. const delContent = ref('');
  104. const deleteId = ref('');
  105. const petType = ref('');
  106. const getPetList = async () => {
  107. petList.value = [];
  108. try {
  109. const res = await getpetList();
  110. if (res && res.data) {
  111. petList.value = res.data;
  112. showDel.value = false;
  113. }
  114. } catch (error) {
  115. console.error('获取宠物列表失败', error);
  116. }
  117. };
  118. // const getPetTypeList = async () => {
  119. // try {
  120. // const res = await getDictList('pet_type');
  121. // if (res.code === 200) {
  122. // const petType = res.data.map(e => e.dictLabel);
  123. // petTypes.value = [petType];
  124. // } else {
  125. // console.error('获取pet type失败');
  126. // }
  127. // } catch (error) {
  128. // console.error('获取pet type列表失败', error);
  129. // }
  130. // };
  131. const addPet = () => {
  132. show.value = true;
  133. };
  134. const cancel = () => {
  135. show.value = false;
  136. };
  137. const petTypeChange = (e) => {
  138. petType.value = e.value[0];
  139. };
  140. const confirm = (e) => {
  141. show.value = false;
  142. if (petType.value === '猫咪') {
  143. uni.navigateTo({
  144. url: "/otherPages/userManage/pet/petInfo?petType=0&optionType=add"
  145. })
  146. }
  147. if (petType.value === '狗狗') {
  148. uni.navigateTo({
  149. url: "/otherPages/userManage/pet/petInfo?petType=1&optionType=add"
  150. })
  151. }
  152. // if (!petType.value) {
  153. // if (e.value[0] === '猫咪') {
  154. // router.push({
  155. // path: `/pages/personalCenter/petInfo`,
  156. // query: {
  157. // petType: 'cat',
  158. // optionType: 'add'
  159. // }
  160. // });
  161. // }
  162. // if (e.value[0] === '狗狗') {
  163. // router.push({
  164. // path: `/pages/personalCenter/petInfo`,
  165. // query: {
  166. // petType: 'dog',
  167. // optionType: 'add'
  168. // }
  169. // });
  170. // }
  171. // }
  172. };
  173. const editPet = (item) => {
  174. console.log(item)
  175. if (item.petType === '猫咪' || item.petType === 0) {
  176. uni.navigateTo({
  177. url: `/otherPages/userManage/pet/petInfo?petType=0&optionType=edit&petId=${item.id}`
  178. })
  179. }
  180. if (item.petType === '狗狗' || item.petType === 1) {
  181. uni.navigateTo({
  182. url: `/otherPages/userManage/pet/petInfo?petType=1&optionType=edit&petId=${item.id}`
  183. })
  184. }
  185. };
  186. const deletePet = (item) => {
  187. delContent.value = "确定要删除" + item.nickName + '?';
  188. showDel.value = true;
  189. deleteId.value = item.id;
  190. };
  191. const confirmDel = async () => {
  192. try {
  193. await delByPetId({ id : deleteId.value });
  194. console.log('删除成功');
  195. getPetList();
  196. } catch (error) {
  197. console.error('删除宠物失败', error);
  198. }
  199. };
  200. const cancelDel = () => {
  201. showDel.value = false;
  202. deleteId.value = '';
  203. };
  204. onMounted(() => {
  205. // getPetTypeList();
  206. getPetList();
  207. });
  208. onShow(() => {
  209. getPetList();
  210. });
  211. onPullDownRefresh(() => {
  212. getPetList();
  213. });
  214. </script>
  215. <style lang="scss" scoped>
  216. .personal-pet {
  217. position: relative;
  218. height: 100%;
  219. padding-bottom: 90px;
  220. .personal-pet-add {
  221. box-sizing: border-box;
  222. background-color: #FFFFFF;
  223. padding: 20rpx 20rpx 40rpx 20rpx;
  224. width: 100%;
  225. height: 160rpx;
  226. position: fixed;
  227. bottom: 0;
  228. z-index: 100;
  229. display: flex;
  230. .personal-pet-add-btn {
  231. width: 100%;
  232. height: 90rpx;
  233. border-radius: 6px;
  234. background: #FFB13F;
  235. font-size: 16px;
  236. color: #FFFFFF;
  237. }
  238. }
  239. .personal-pet-list {
  240. .personal-pet-list-add {
  241. width: 100%;
  242. height: 44px;
  243. background-color: #FFFFFF;
  244. display: flex;
  245. justify-content: space-between;
  246. align-items: center;
  247. padding: 0 15px;
  248. .personal-pet-list-add-btn {
  249. font-size: 14px;
  250. color: #AAA;
  251. display: flex;
  252. align-items: center;
  253. }
  254. }
  255. .personal-pet-list-item_backgroud_m {
  256. background: linear-gradient(179deg, #EDF5FE 0.75%, #FFF 34.11%);
  257. }
  258. .personal-pet-list-item_backgroud_f {
  259. background: linear-gradient(179deg, #FFF4F6 0.75%, #FFF 34.11%);
  260. }
  261. .personal-pet-list-item {
  262. margin: 10px 10px 0 10px;
  263. border-radius: 5px;
  264. padding: 20px 10px 10px;
  265. .personal-pet-info {
  266. display: flex;
  267. align-items: center;
  268. justify-content: flex-start;
  269. .personal-pet-info-1 {
  270. margin-left: 10px;
  271. width: calc(100% - 60px);
  272. .personal-pet-info-2 {
  273. display: flex;
  274. flex-wrap: wrap;
  275. .personal-pet-name {
  276. color: #333;
  277. font-size: 16px;
  278. margin-right: 10px;
  279. }
  280. }
  281. .personal-pet-info-3 {
  282. display: flex;
  283. align-items: baseline;
  284. font-size: 14px;
  285. margin-top: 5px;
  286. color: #7D8196;
  287. .personal-pet-info-age {
  288. padding: 0 10px;
  289. margin: 0 10px;
  290. border-left: solid 2px #7D8196;
  291. border-right: solid 2px #7D8196;
  292. }
  293. }
  294. }
  295. }
  296. .personal-pet-info-disposition {
  297. padding: 10px;
  298. color: #7D8196;
  299. font-size: 14px;
  300. background: #f9f9f9;
  301. border-radius: 5px;
  302. margin-top: 10px;
  303. }
  304. .personal-pet-info-btns {
  305. display: flex;
  306. justify-content: flex-end;
  307. margin-top: 10px;
  308. .personal-pet-info-btn {
  309. display: flex;
  310. font-size: 14px;
  311. color: #7D8196;
  312. margin-left: 20px;
  313. }
  314. }
  315. }
  316. }
  317. .personal-pet-none {
  318. display: flex;
  319. justify-content: center;
  320. align-items: center;
  321. flex-wrap: wrap;
  322. margin-top: 40%;
  323. .personal-pet-none-text {
  324. color: #666;
  325. text-align: center;
  326. font-size: 14px;
  327. width: 100%;
  328. margin-top: 10px;
  329. }
  330. }
  331. }
  332. </style>