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

347 lines
6.8 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
3 months ago
  1. <template>
  2. <view class="containers po-r">
  3. <image src="" mode="" class="mainBg"></image>
  4. <view class="w-100 po-a content">
  5. <stepProgress :step="1"></stepProgress>
  6. <view class="bg-fff mt22 form ">
  7. <view class="title fw700 size-30 flex-rowl">
  8. 基本信息
  9. </view>
  10. <dForm ref="formRef" :list="state.list" labelWidth="220rpx" :isFooter="false" @input="onFormInput"></dForm>
  11. </view>
  12. <view class="license__view" v-if="form.license">
  13. <view class="license">
  14. <up-checkbox-group
  15. v-model="licenseData.selected"
  16. shape="circle"
  17. activeColor="#FFBF60"
  18. labelColor="#000000"
  19. labelSize="26rpx"
  20. >
  21. <view class="license-options">
  22. <up-checkbox
  23. v-for="item in LICENSE_OPTIONS"
  24. :key="`license-${item.value}`"
  25. :label="item.label"
  26. :name="item.value"
  27. >
  28. </up-checkbox>
  29. </view>
  30. </up-checkbox-group>
  31. <view class="tips">
  32. 温馨提示上传专业执照将大大增加通过概率且会快速晋升为高级伴宠师获取更高报酬
  33. </view>
  34. <up-upload
  35. :fileList="licenseData.fileList"
  36. @afterRead="afterRead"
  37. @delete="deletePic"
  38. multiple
  39. >
  40. <image src="../static/list/icon-upload.png" style="width: 144rpx;height: 144rpx;"></image>
  41. </up-upload>
  42. </view>
  43. </view>
  44. <view class="bg-fff mt22 form bt120">
  45. <view class="title fw700 size-30 flex-rowl">
  46. 个人宠物类型
  47. </view>
  48. <view class="flex-between wrap mt32">
  49. <view class="type">
  50. <image src="@/static/images/ydd/cat.png" mode="widthFix" @click="onSelectPetType('cat')"></image>
  51. <template v-if="petType === 'cat'">
  52. <image class="active" src="@/static/images/ydd/cat-active.png" mode="widthFix"></image>
  53. <view class="active-icon">
  54. <up-icon name="checkmark-circle" color="#FFBF60" size="32rpx"></up-icon>
  55. </view>
  56. </template>
  57. </view>
  58. <view class="type">
  59. <image src="@/static/images/ydd/dog.png" mode="widthFix" @click="onSelectPetType('dog')"></image>
  60. <template v-if="petType === 'dog'">
  61. <image class="active" src="@/static/images/ydd/dog-active.png" mode="widthFix"></image>
  62. <view class="active-icon">
  63. <up-icon name="checkmark-circle" color="#FFBF60" size="32rpx"></up-icon>
  64. </view>
  65. </template>
  66. </view>
  67. <view class="type">
  68. <image src="@/static/images/ydd/special-pet.png" mode="widthFix" @click="onSelectPetType('special-pet')"></image>
  69. <template v-if="petType === 'special-pet'">
  70. <image class="active" src="@/static/images/ydd/special-pet-active.png" mode="widthFix"></image>
  71. <view class="active-icon">
  72. <up-icon name="checkmark-circle" color="#FFBF60" size="32rpx"></up-icon>
  73. </view>
  74. </template>
  75. </view>
  76. </view>
  77. </view>
  78. <view class="footer-btn" @click="toNext">
  79. <view class="btn">
  80. 下一步
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. </template>
  86. <script setup>
  87. import { ref, reactive } from "vue";
  88. import { ossUpload } from '@/utils/oss-upload/oss/index.js'
  89. import dForm from "@/components/dForm/index.vue"
  90. import stepProgress from '../components/stepProgress.vue';
  91. const state = reactive({
  92. list: [{
  93. type: "input",
  94. label: "姓名",
  95. key: "name",
  96. placeholder: "请输入您的真实姓名",
  97. },
  98. {
  99. type: "input",
  100. label: "身份证号",
  101. key: "idCard",
  102. placeholder: "请输入您的真实身份证号",
  103. },
  104. {
  105. type: "radio",
  106. label: "性别",
  107. key: "sex",
  108. options: [{
  109. name: "男",
  110. value: 0,
  111. },
  112. {
  113. name: "女",
  114. value: 1,
  115. }
  116. ]
  117. },
  118. {
  119. type: "input",
  120. label: "年龄",
  121. key: "gender",
  122. placeholder: "请输入您的年龄",
  123. },
  124. {
  125. type: "input",
  126. label: "养宠经验",
  127. key: "shij",
  128. placeholder: "请输入您的养宠年限",
  129. unit: "年"
  130. },
  131. {
  132. type: "radio",
  133. label: "是否有专业执照",
  134. key: "license",
  135. placeholder: "请选择",
  136. options: [{
  137. name: "是",
  138. value: 1,
  139. }, {
  140. name: "没有",
  141. value: 0,
  142. }]
  143. },
  144. ]
  145. })
  146. const formRef = ref()
  147. const form = ref({})
  148. const onFormInput = (e) => {
  149. form.value = e
  150. }
  151. const licenseData = reactive({
  152. selected: [],
  153. fileList: []
  154. })
  155. const LICENSE_OPTIONS = [
  156. {
  157. label: '兽医职称专业执照',
  158. value: 0,
  159. },
  160. {
  161. label: '宠物美容洗护专业执照',
  162. value: 1,
  163. },
  164. {
  165. label: '宠物康复护理专业执照',
  166. value: 2,
  167. },
  168. {
  169. label: '宠物膳食管理专业执照',
  170. value: 3,
  171. },
  172. {
  173. label: '其他专业执照',
  174. value: 4,
  175. },
  176. ]
  177. const afterRead = (event) => {
  178. event.file.forEach(n => {
  179. ossUpload(n.url)
  180. .then(url => {
  181. licenseData.fileList.push({
  182. url
  183. })
  184. })
  185. })
  186. };
  187. const deletePic = (event) => {
  188. licenseData.fileList.splice(event.index, 1);
  189. };
  190. const petType = ref()
  191. const onSelectPetType = (type) => {
  192. petType.value = type
  193. }
  194. const toNext = () => {
  195. // todo: save data
  196. const data = {
  197. ...form.value,
  198. ...licenseData,
  199. petType: petType.value,
  200. }
  201. console.log('--data', data)
  202. uni.navigateTo({
  203. url: "/otherPages/authentication/examination/start"
  204. })
  205. }
  206. </script>
  207. <style lang="scss" scoped>
  208. .bt120 {
  209. margin-bottom: 120rpx;
  210. width: 716rpx;
  211. box-sizing: border-box;
  212. }
  213. .footer-btn {
  214. width: 100vw;
  215. height: 144rpx;
  216. background-color: #fff;
  217. display: flex;
  218. justify-content: center;
  219. position: fixed;
  220. bottom: 0;
  221. left: 0;
  222. align-items: center;
  223. .btn {
  224. font-size: 30rpx;
  225. color: #fff;
  226. display: flex;
  227. justify-content: center;
  228. align-items: center;
  229. width: 574rpx;
  230. height: 94rpx;
  231. border-radius: 94rpx;
  232. background-color: #FFBF60;
  233. }
  234. }
  235. .type {
  236. width: 190rpx;
  237. margin-bottom: 74rpx;
  238. position: relative;
  239. image {
  240. width: 100%;
  241. }
  242. .active {
  243. position: absolute;
  244. top: 0;
  245. left: 0;
  246. &-icon {
  247. position: absolute;
  248. top: 14rpx;
  249. right: 18rpx;
  250. }
  251. }
  252. }
  253. .form {
  254. padding: 40rpx 32rpx;
  255. box-sizing: border-box;
  256. width: 716rpx;
  257. }
  258. .title {
  259. &::before {
  260. content: "";
  261. display: block;
  262. width: 9rpx;
  263. height: 33rpx;
  264. background-color: #FFBF60;
  265. margin-right: 7rpx;
  266. }
  267. }
  268. .mb6 {
  269. margin-bottom: 6rpx;
  270. }
  271. .containers {
  272. .mainBg {
  273. width: 100vw;
  274. height: 442rpx;
  275. background-image: linear-gradient(to bottom, #FFBF60, #f5f5f5);
  276. }
  277. .content {
  278. top: 0;
  279. left: 0;
  280. padding: 16rpx;
  281. }
  282. }
  283. .license__view {
  284. width: 716rpx;
  285. padding-bottom: 40rpx;
  286. box-sizing: border-box;
  287. background-color: #FFFFFF;
  288. .license {
  289. width: 100%;
  290. padding: 13rpx 16rpx;
  291. box-sizing: border-box;
  292. background-color: #FFFCF1;
  293. &-options {
  294. display: grid;
  295. grid-template-columns: repeat(2, 1fr);
  296. }
  297. }
  298. .tips {
  299. margin: 22rpx 0 24rpx 0;
  300. color: #FFBF60;
  301. font-size: 22rpx;
  302. width: 100%;
  303. word-break: break-all;
  304. }
  305. }
  306. </style>