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

360 lines
7.0 KiB

4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
  1. <template>
  2. <view class="page bg-fff">
  3. <view class="size-22 color-ffb flex-rowl tip">
  4. <image class="icon" :src="configList.my_information_statement.paramValueImage"></image>
  5. <view>
  6. <up-parse :content="configList.my_information_statement.paramValueArea" containerStyle="{
  7. color: '#FFBF60',
  8. fontSize: '22rpx',
  9. lineHeight: '40rpx',
  10. }"></up-parse>
  11. </view>
  12. </view>
  13. <view class="info">
  14. <view class="title mt24">
  15. 基本资料
  16. </view>
  17. <view class="flex-colc">
  18. <button class="btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
  19. <view class="flex-colc">
  20. <image class="head" :src="baseInfo.info.userImage" mode="widthFix"></image>
  21. <!-- <image class="head" :src="form.headImage" mode="widthFix"></image> -->
  22. <text class="size-28 color-999 mt10">点击更换头像</text>
  23. </view>
  24. </button>
  25. </view>
  26. <view class="form">
  27. </view>
  28. </view>
  29. <view class="info">
  30. <view class="title mt24 flex-rowl">
  31. 展示信息
  32. <text class="size-22 color-ffb fw700">(重要)</text>
  33. </view>
  34. <view class="form">
  35. </view>
  36. </view>
  37. <view class="info">
  38. <view class="title mt24 flex-rowl">
  39. 服务资料
  40. </view>
  41. <view class="form">
  42. </view>
  43. </view>
  44. <view class="size-24 color-ffb flex-rowc mt32 pb28">
  45. 伴宠师查看服务酬劳服务时长等规则
  46. </view>
  47. <popupTypeSelect ref="popupTypeSelectRef" v-model="form.type" @confirm="fetchUpdate" ></popupTypeSelect>
  48. <popupServeSelect ref="popupServeSelectRef" v-model="form.serve" @confirm="fetchUpdate" ></popupServeSelect>
  49. <view class="uni-btn-color"
  50. @click="submit">
  51. 保存
  52. </view>
  53. </view>
  54. </template>
  55. <script setup>
  56. import { ref, reactive, computed, onMounted, nextTick } from "vue";
  57. import { useStore } from 'vuex'
  58. import { onShow } from '@dcloudio/uni-app'
  59. import { ossUpload } from '@/utils/oss-upload/oss/index.js'
  60. import popupTypeSelect from "./popupTypeSelect.vue";
  61. import popupServeSelect from "./popupServeSelect.vue";
  62. import { serviceLogList } from '@/api/serviceLog'
  63. import {
  64. binBaseInfo,
  65. } from "@/api/home.js"
  66. const store = useStore()
  67. const configList = computed(() => {
  68. return store.getters.configList
  69. })
  70. const userInfo = computed(() => {
  71. return store.getters.userInfo
  72. })
  73. const baseInfo = ref(JSON.parse(uni.getStorageSync("baseInfo")))
  74. const serviceCount = ref(0)
  75. const form = reactive({
  76. headImage: null,
  77. type: [],
  78. serve: [],
  79. })
  80. const onChooseAvatar = (res) => {
  81. ossUpload(res.target.avatarUrl)
  82. .then(url => {
  83. form.headImage = url
  84. fetchUpdate()
  85. })
  86. }
  87. const baseInfoRef = ref(null)
  88. const displayInfoRef = ref(null)
  89. const serveInfoRef = ref(null)
  90. const state = reactive({
  91. baseInfoList: [{
  92. type: "input",
  93. label: "昵称",
  94. key: "userName",
  95. placeholder: "请输入",
  96. },
  97. {
  98. type: "input",
  99. label: "手机号",
  100. key: "userTelephone",
  101. placeholder: "请输入",
  102. },
  103. {
  104. type: "select",
  105. label: "性别",
  106. key: "sex",
  107. placeholder: "请选择",
  108. options: [
  109. {
  110. name: "男",
  111. value : '男',
  112. },
  113. {
  114. name: "女",
  115. value : '男',
  116. }
  117. ]
  118. }
  119. ],
  120. displayInfoList: [{
  121. type: "input",
  122. label: "个人简介",
  123. key: "jianjie",
  124. placeholder: "请输入",
  125. },
  126. {
  127. type: "input",
  128. label: "养宠经验",
  129. unit: "年",
  130. key: "jingyan",
  131. placeholder: "请输入",
  132. },
  133. {
  134. type: "custom",
  135. label: "服务记录",
  136. key: "jilu",
  137. placeholder: "请选择",
  138. options: [{
  139. name: "男"
  140. },
  141. {
  142. name: "女"
  143. }
  144. ]
  145. }
  146. ],
  147. serveInfoList: [{
  148. type: "custom",
  149. label: "服务宠物类型",
  150. key: "type",
  151. placeholder: "请选择",
  152. },
  153. {
  154. type: "input",
  155. label: "基础服务",
  156. key: "base",
  157. placeholder: "宠物喂养上门遛狗",
  158. },
  159. {
  160. type: "custom",
  161. label: "增值服务",
  162. key: "zenz",
  163. placeholder: "请选择",
  164. }
  165. ],
  166. })
  167. const jumpToServeRecord = () => {
  168. uni.navigateTo({
  169. url: "/otherPages/authentication/serve/record"
  170. })
  171. }
  172. const popupTypeSelectRef = ref()
  173. const openTypeSelectPopup = () => {
  174. popupTypeSelectRef.value.open()
  175. }
  176. const petTypeOptions = computed(() => {
  177. return store.getters.petTypeOptions
  178. })
  179. const typeDesc = computed(() => {
  180. const typeIds = form.type
  181. if (!typeIds.length) {
  182. return '请选择'
  183. }
  184. let descArr = typeIds.map(typeId => {
  185. return petTypeOptions.value.find(item => item.id === typeId).title
  186. })
  187. return descArr.join('、')
  188. })
  189. const popupServeSelectRef = ref()
  190. const increaseServiceOptions = computed(() => {
  191. return store.getters.increaseServiceOptions
  192. })
  193. const openServeSelectPopup = () => {
  194. popupServeSelectRef.value.open()
  195. }
  196. const serveDesc = computed(() => {
  197. const serveIds = form.serve
  198. if (!serveIds.length) {
  199. return '请选择'
  200. }
  201. let descArr = serveIds.map(serveId => {
  202. return increaseServiceOptions.value.find(option => option.id === serveId)?.title
  203. })
  204. return descArr.join('、')
  205. })
  206. function getCountSerivce(){
  207. serviceLogList({ userId: userInfo.value.userId })
  208. .then(res => {
  209. serviceCount.value = res.length
  210. })
  211. }
  212. const getBaseInfo = () => {
  213. binBaseInfo(baseInfo.value.userId).then(res => {
  214. baseInfo.value = res.data
  215. uni.setStorageSync(JSON.stringify(res.data))
  216. // baseInfoRef.value.setData(res.data.info)
  217. })
  218. }
  219. function submit(){
  220. }
  221. onShow(() => {
  222. getCountSerivce()
  223. getBaseInfo()
  224. store.dispatch('fetchPetTypeOptions')
  225. store.dispatch('fetchIncreaseServiceOptions')
  226. })
  227. onMounted(()=> {
  228. // todo: fetch data and init data
  229. serveInfoRef.value.setDataByKey('base', configList.value.pet_basic_services.paramValueText)
  230. })
  231. </script>
  232. <style lang="scss" scoped>
  233. .form{
  234. .form-item {
  235. min-height: 90rpx;
  236. padding-top: 10rpx;
  237. width: 100%;
  238. border-bottom: 1rpx solid #f5f5f5;
  239. }
  240. .flex-rowr {
  241. display: flex;
  242. justify-content: flex-end;
  243. align-items: center;
  244. }
  245. .ml10 {
  246. margin-left: 10rpx;
  247. }
  248. }
  249. .page {
  250. padding-top: 16rpx;
  251. padding-bottom: 150rpx;
  252. .tip {
  253. background-color: rgba($color: #FFBF60, $alpha: 0.16);
  254. padding: 13rpx 22rpx;
  255. margin: 0 28rpx 37rpx 28rpx;
  256. .icon {
  257. width: 36rpx;
  258. height: 36rpx;
  259. margin-right: 15rpx;
  260. }
  261. }
  262. }
  263. .info {
  264. & + & {
  265. margin-top: 50rpx;
  266. }
  267. }
  268. .head {
  269. width: 165rpx;
  270. height: auto;
  271. margin-top: 28rpx;
  272. }
  273. .btn-avatar {
  274. border: none;
  275. padding: 0;
  276. }
  277. .title {
  278. font-size: 30rpx;
  279. font-weight: 700;
  280. display: flex;
  281. align-items: center;
  282. padding: 0 40rpx;
  283. &:before {
  284. display: inline-block;
  285. content: "";
  286. width: 10rpx;
  287. border-radius: 5rpx;
  288. height: 33rpx;
  289. background-color: #FFBF60;
  290. margin-right: 7rpx;
  291. }
  292. }
  293. .form {
  294. padding: 0 22rpx;
  295. :deep(.form-item){
  296. padding-left: 24rpx;
  297. padding-right: 30rpx;
  298. box-sizing: border-box;
  299. }
  300. }
  301. .uni-btn-color{
  302. border-radius: 40rpx;
  303. padding: 20rpx;
  304. margin: 40rpx;
  305. background: #FFBF60;
  306. color: #fff;
  307. text-align: center;
  308. font-size: 28rpx;
  309. }
  310. </style>