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

315 lines
9.9 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
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>
  3. <view class="personal-pet-basic-info">
  4. <view class="personal-pet-info-title border-bottom">
  5. 宠物基本信息
  6. </view>
  7. <u--form labelPosition="left" :model="model" ref="uForm">
  8. <u-form-item required label="昵称" :prop="`petBaseInfo.nickName`" labelWidth="80" borderBottom>
  9. <u--input v-model="petBaseInfo.nickName" placeholder="请输入宠物昵称" @change="nameChange"
  10. placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
  11. </u-form-item>
  12. <u-form-item label="性别" :prop="`petBaseInfo.sex`" labelWidth="80" borderBottom @click="showSex = true">
  13. <u--input v-model="sexText" disabled disabledColor="#ffffff" placeholder="请选择"
  14. placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
  15. <u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
  16. </u-form-item>
  17. <!-- 后台获取品种数据 赶进度这里先注释 -->
  18. <!-- <u-form-item required label="品种" :prop="`petBaseInfo.breed`" labelWidth="80" borderBottom
  19. @click="breedSelectOpen"> -->
  20. <u-form-item required label="品种" :prop="`petBaseInfo.type`" labelWidth="80" borderBottom>
  21. <u--input v-model="petBaseInfo.type" disabledColor="#ffffff" placeholder="请输入"
  22. placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
  23. <u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
  24. </u-form-item>
  25. <!-- 赶进度先注释 -->
  26. <!-- <u-form-item required label="体重" :prop="`petBaseInfo.weight`" labelWidth="80" borderBottom
  27. @click="showWeight = true" ref="item1"> -->
  28. <u-form-item required label="体重" :prop="`petBaseInfo.weight`" labelWidth="80" borderBottom ref="item1">
  29. <u--input v-model="petBaseInfo.weight" disabledColor="#ffffff" placeholder="请输入(单位kg)"
  30. placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right" type="number"></u--input>
  31. <u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
  32. </u-form-item>
  33. <u-form-item label="出生年月" :prop="`petBaseInfo.birthday`" labelWidth="80" borderBottom
  34. @click="yearMonthOpen">
  35. <u--input v-model="petBaseInfo.birthday" disabled disabledColor="#ffffff" placeholder="请选择"
  36. placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
  37. <u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
  38. </u-form-item>
  39. <!-- 后台获取性格选择数据 感进度这里先注释 -->
  40. <!-- <u-form-item required label="性格" :prop="`petBaseInfo.personality`" labelWidth="80" borderBottom
  41. @click="dispositionSelectOpen"> -->
  42. <u-form-item required label="性格" :prop="`petBaseInfo.personality`" labelWidth="80" borderBottom>
  43. <u--input v-model="petBaseInfo.personality" disabledColor="#ffffff" placeholder="请输入"
  44. placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
  45. <u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
  46. </u-form-item>
  47. </u--form>
  48. </view>
  49. <!-- 后台获取性格选择数据 感进度这里先注释 -->
  50. <!-- <view style="background-color: #fffcf2;padding: 10px 20px;" v-show="showDisposition">
  51. <view style="height: 85%;">
  52. <u-checkbox-group v-model="petBaseInfo.personality" @change="checkboxChange" iconPlacement="left"
  53. placement="row" style="flex-wrap: wrap;" activeColor="#ffbf60">
  54. <u-checkbox :customStyle="{margin: '8px'}" v-for="(item, index) in dispositionActions" :key="item"
  55. :label="item" :name="item">
  56. </u-checkbox>
  57. </u-checkbox-group>
  58. </view>
  59. </view> -->
  60. <u-picker :show="showSex" :showToolbar='false' :columns="sexActions" @cancel="showSex = false"
  61. :immediateChange="true" @change="sexSelect"></u-picker>
  62. <u-picker :show="showWeight" :showToolbar='false' :columns="weightActions" @cancel="showWeight = false"
  63. :immediateChange="true" @change="weightSelect"></u-picker>
  64. <u-overlay :show="showBreed">
  65. <view class="breed-select" style="height: 60%;">
  66. <u-search shape="round" :show-action="false" v-model="searchValue" @change="searchBreed"></u-search>
  67. <view style="padding: 10px;height: 80%;overflow: auto;">
  68. <u-radio-group v-model="tempBreed" placement="column">
  69. <u-radio v-for="(item,index) in searchBreedData" :customStyle="{marginBottom: '8px'}"
  70. activeColor="#ffbf60" :label="item" :name="item" :key="item"></u-radio>
  71. </u-radio-group>
  72. </view>
  73. <view class="personal-pet-breed-btns">
  74. <view class="personal-pet-breed-btn">
  75. <u-button color="#FFF4E4" @click="breedSelectClose">
  76. <view style="color: #A9A9A9;">
  77. 取消
  78. </view>
  79. </u-button>
  80. </view>
  81. <view class="personal-pet-breed-btn" @click="breedSelectConfirm">
  82. <u-button color="#FFBF60">
  83. <view style="color: #fff;">
  84. 确定
  85. </view>
  86. </u-button>
  87. </view>
  88. </view>
  89. </view>
  90. </u-overlay>
  91. <u-datetime-picker :maxDate='getMaxDate()' :minDate="getMinDate()" :show="showBirthday" v-model="tempBirthday"
  92. mode="year-month" @confirm="yearMonthConfirm" @cancel="yearMonthClose"></u-datetime-picker>
  93. </view>
  94. </template>
  95. <script setup>
  96. import {
  97. ref,
  98. onMounted,
  99. watch,
  100. computed
  101. } from 'vue';
  102. // 定义 props
  103. const props = defineProps({
  104. petType: {
  105. type: String,
  106. default: 'dog'
  107. },
  108. petBaseInfo: {
  109. type: Object,
  110. default: () => ({
  111. nickName: '',
  112. sex: '',
  113. type: '',
  114. weight: '',
  115. birthday: '',
  116. personality: ''
  117. })
  118. }
  119. });
  120. // 定义 emits
  121. const emits = defineEmits(['update:petBaseInfo']);
  122. // 定义响应式数据
  123. const showSex = ref(false);
  124. const showBreed = ref(false);
  125. const showWeight = ref(false);
  126. const showBirthday = ref(false);
  127. const showDisposition = ref(false);
  128. const sexActions = ref([
  129. ['男生', '女生']
  130. ]);
  131. const weightActions = ref([
  132. ['小型(<10 KG)', '中型(10~20KG)', '大型(20KG以上)']
  133. ]);
  134. const dispositionActions = ref([]);
  135. const breedData = ref([]);
  136. const searchBreedData = ref([]);
  137. const tempBreed = ref('');
  138. const searchValue = ref('');
  139. const tempBirthday = ref('');
  140. const tempDisposition = ref('');
  141. const uForm = ref(null);
  142. const item1 = ref(null);
  143. const sexText = computed(() => {
  144. const sexMap = {
  145. 0: '男生',
  146. 1: '女生'
  147. };
  148. return sexMap[props.petBaseInfo.sex] || '';
  149. });
  150. // 定义方法
  151. const nameChange = () => {
  152. updatePetBaseInfo();
  153. };
  154. const sexSelect = (e) => {
  155. props.petBaseInfo.sex = e.index;
  156. showSex.value = false;
  157. updatePetBaseInfo();
  158. };
  159. const weightSelect = (e) => {
  160. props.petBaseInfo.weight = e.value[0];
  161. showWeight.value = false;
  162. updatePetBaseInfo();
  163. };
  164. const breedSelectOpen = () => {
  165. searchBreedData.value = breedData.value;
  166. searchValue.value = '';
  167. tempBreed.value = props.petBaseInfo.breed;
  168. showBreed.value = true;
  169. };
  170. const searchBreed = () => {
  171. if (searchValue.value && searchValue.value !== '') {
  172. searchBreedData.value = breedData.value.filter(e => e.includes(searchValue.value));
  173. } else {
  174. searchBreedData.value = breedData.value;
  175. }
  176. };
  177. const breedSelectClose = () => {
  178. tempBreed.value = '';
  179. showBreed.value = false;
  180. };
  181. const breedSelectConfirm = () => {
  182. props.petBaseInfo.type = tempBreed.value;
  183. showBreed.value = false;
  184. updatePetBaseInfo();
  185. };
  186. const yearMonthOpen = () => {
  187. if (props.petBaseInfo.birthday) {
  188. tempBirthday.value = Number(new Date(props.petBaseInfo.birthday));
  189. } else {
  190. tempBirthday.value = Number(new Date());
  191. }
  192. showBirthday.value = true;
  193. };
  194. const yearMonthClose = () => {
  195. showBirthday.value = false;
  196. };
  197. const yearMonthConfirm = (e) => {
  198. const timeFormat = uni.$u.timeFormat;
  199. props.petBaseInfo.birthday = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
  200. showBirthday.value = false;
  201. updatePetBaseInfo();
  202. };
  203. const dispositionSelectOpen = () => {
  204. tempDisposition.value = props.petBaseInfo.personality;
  205. showDisposition.value = true;
  206. };
  207. const dispositionSelectClose = () => {
  208. tempDisposition.value = '';
  209. showDisposition.value = false;
  210. };
  211. const dispositionSelectConfirm = () => {
  212. props.petBaseInfo.personality = tempDisposition.value;
  213. showDisposition.value = false;
  214. updatePetBaseInfo();
  215. };
  216. const checkboxChange = (n) => {
  217. updatePetBaseInfo();
  218. };
  219. const updatePetBaseInfo = () => {
  220. // 触发 update 事件,将修改后的 petBaseInfo 对象发送给父组件
  221. emits('update:petBaseInfo', props.petBaseInfo);
  222. };
  223. const getPersonalityDataList = () => {
  224. // getDictList('pet_personality').then(res => {
  225. // if (res.code === 200) {
  226. // dispositionActions.value = Array.from(new Set(res.data.map(e => e.dictLabel)));
  227. // } else {
  228. // uni.showToast({
  229. // title: '获取性格失败',
  230. // icon: 'none'
  231. // });
  232. // }
  233. // });
  234. };
  235. const getPetBreed = () => {
  236. let petBreedType = props.petType === 'cat' ? 'pet_brand_cat' : 'pet_brand_dog';
  237. // getDictList(petBreedType).then(res => {
  238. // if (res.code === 200) {
  239. // breedData.value = Array.from(new Set(res.data.map(e => e.dictLabel)));
  240. // } else {
  241. // uni.showToast({
  242. // title: '获取种类失败',
  243. // icon: 'none'
  244. // });
  245. // }
  246. // });
  247. };
  248. const getMaxDate = () => {
  249. return Date.now();
  250. };
  251. const getMinDate = () => {
  252. let dt = new Date();
  253. dt.setFullYear(dt.getFullYear() - 30);
  254. return Date.parse(dt);
  255. };
  256. // 生命周期钩子
  257. onMounted(() => {
  258. // getPersonalityDataList();
  259. // getPetBreed();
  260. });
  261. </script>
  262. <style>
  263. .personal-pet-basic-info {
  264. background-color: #fff;
  265. margin-top: 10px;
  266. padding: 10px 20px;
  267. }
  268. .personal-pet-breed-btns {
  269. display: flex;
  270. justify-content: space-between;
  271. box-sizing: border-box;
  272. background-color: #FFFFFF;
  273. padding: 20rpx 20rpx 40rpx 20rpx;
  274. left: 0;
  275. width: 100%;
  276. height: 160rpx;
  277. position: fixed;
  278. bottom: 0;
  279. z-index: 100;
  280. }
  281. .personal-pet-breed-btn {
  282. width: 40%;
  283. }
  284. </style>