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

307 lines
9.7 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
  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="petBaseInfo.sex" 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. } from 'vue';
  101. // 定义 props
  102. const props = defineProps({
  103. petType: {
  104. type: String,
  105. default: 'dog'
  106. },
  107. petBaseInfo: {
  108. type: Object,
  109. default: () => ({
  110. nickName: '',
  111. sex: '',
  112. type: '',
  113. weight: '',
  114. birthday: '',
  115. personality: ''
  116. })
  117. }
  118. });
  119. // 定义 emits
  120. const emits = defineEmits(['update:petBaseInfo']);
  121. // 定义响应式数据
  122. const showSex = ref(false);
  123. const showBreed = ref(false);
  124. const showWeight = ref(false);
  125. const showBirthday = ref(false);
  126. const showDisposition = ref(false);
  127. const sexActions = ref([
  128. ['男生', '女生']
  129. ]);
  130. const weightActions = ref([
  131. ['小型(<10 KG)', '中型(10~20KG)', '大型(20KG以上)']
  132. ]);
  133. const dispositionActions = ref([]);
  134. const breedData = ref([]);
  135. const searchBreedData = ref([]);
  136. const tempBreed = ref('');
  137. const searchValue = ref('');
  138. const tempBirthday = ref('');
  139. const tempDisposition = ref('');
  140. const uForm = ref(null);
  141. const item1 = ref(null);
  142. // 定义方法
  143. const nameChange = () => {
  144. updatePetBaseInfo();
  145. };
  146. const sexSelect = (e) => {
  147. props.petBaseInfo.sex = e.index;
  148. showSex.value = false;
  149. updatePetBaseInfo();
  150. };
  151. const weightSelect = (e) => {
  152. props.petBaseInfo.weight = e.value[0];
  153. showWeight.value = false;
  154. updatePetBaseInfo();
  155. };
  156. const breedSelectOpen = () => {
  157. searchBreedData.value = breedData.value;
  158. searchValue.value = '';
  159. tempBreed.value = props.petBaseInfo.breed;
  160. showBreed.value = true;
  161. };
  162. const searchBreed = () => {
  163. if (searchValue.value && searchValue.value !== '') {
  164. searchBreedData.value = breedData.value.filter(e => e.includes(searchValue.value));
  165. } else {
  166. searchBreedData.value = breedData.value;
  167. }
  168. };
  169. const breedSelectClose = () => {
  170. tempBreed.value = '';
  171. showBreed.value = false;
  172. };
  173. const breedSelectConfirm = () => {
  174. props.petBaseInfo.type = tempBreed.value;
  175. showBreed.value = false;
  176. updatePetBaseInfo();
  177. };
  178. const yearMonthOpen = () => {
  179. if (props.petBaseInfo.birthday) {
  180. tempBirthday.value = Number(new Date(props.petBaseInfo.birthday));
  181. } else {
  182. tempBirthday.value = Number(new Date());
  183. }
  184. showBirthday.value = true;
  185. };
  186. const yearMonthClose = () => {
  187. showBirthday.value = false;
  188. };
  189. const yearMonthConfirm = (e) => {
  190. const timeFormat = uni.$u.timeFormat;
  191. props.petBaseInfo.birthday = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
  192. showBirthday.value = false;
  193. updatePetBaseInfo();
  194. };
  195. const dispositionSelectOpen = () => {
  196. tempDisposition.value = props.petBaseInfo.personality;
  197. showDisposition.value = true;
  198. };
  199. const dispositionSelectClose = () => {
  200. tempDisposition.value = '';
  201. showDisposition.value = false;
  202. };
  203. const dispositionSelectConfirm = () => {
  204. props.petBaseInfo.personality = tempDisposition.value;
  205. showDisposition.value = false;
  206. updatePetBaseInfo();
  207. };
  208. const checkboxChange = (n) => {
  209. console.log('change', n);
  210. updatePetBaseInfo();
  211. };
  212. const updatePetBaseInfo = () => {
  213. // 触发 update 事件,将修改后的 petBaseInfo 对象发送给父组件
  214. emits('update:petBaseInfo', props.petBaseInfo);
  215. };
  216. const getPersonalityDataList = () => {
  217. // getDictList('pet_personality').then(res => {
  218. // if (res.code === 200) {
  219. // dispositionActions.value = Array.from(new Set(res.data.map(e => e.dictLabel)));
  220. // } else {
  221. // uni.showToast({
  222. // title: '获取性格失败',
  223. // icon: 'none'
  224. // });
  225. // }
  226. // });
  227. };
  228. const getPetBreed = () => {
  229. let petBreedType = props.petType === 'cat' ? 'pet_brand_cat' : 'pet_brand_dog';
  230. // getDictList(petBreedType).then(res => {
  231. // if (res.code === 200) {
  232. // breedData.value = Array.from(new Set(res.data.map(e => e.dictLabel)));
  233. // } else {
  234. // uni.showToast({
  235. // title: '获取种类失败',
  236. // icon: 'none'
  237. // });
  238. // }
  239. // });
  240. };
  241. const getMaxDate = () => {
  242. return Date.now();
  243. };
  244. const getMinDate = () => {
  245. let dt = new Date();
  246. dt.setFullYear(dt.getFullYear() - 30);
  247. return Date.parse(dt);
  248. };
  249. // 生命周期钩子
  250. onMounted(() => {
  251. // getPersonalityDataList();
  252. // getPetBreed();
  253. });
  254. </script>
  255. <style>
  256. .personal-pet-basic-info {
  257. background-color: #fff;
  258. margin-top: 10px;
  259. padding: 10px 20px;
  260. }
  261. .personal-pet-breed-btns {
  262. display: flex;
  263. justify-content: space-between;
  264. box-sizing: border-box;
  265. background-color: #FFFFFF;
  266. padding: 20rpx 20rpx 40rpx 20rpx;
  267. left: 0;
  268. width: 100%;
  269. height: 160rpx;
  270. position: fixed;
  271. bottom: 0;
  272. z-index: 100;
  273. }
  274. .personal-pet-breed-btn {
  275. width: 40%;
  276. }
  277. </style>