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

454 lines
14 KiB

  1. <template>
  2. <!-- <view>打卡</view> -->
  3. <view class="box box-size">
  4. <view class="top box-size" :style="{borderRadius:'16rpx'}">
  5. <view class="form-title">
  6. 个人准备
  7. </view>
  8. <view class="mt32 ml10">
  9. <span :style="{fontSize:'30rpx',fontWeight:'400'}">手套照片</span>
  10. <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(至少1张)</span>
  11. </view>
  12. <view class="level">
  13. <view class="mt20 ml10">
  14. <up-upload :fileList="fileList.glove" @afterRead="afterRead" @delete="deletePic" name="glove"
  15. multiple :maxCount="2" width="131rpx" height="131rpx" :disabled="isRead">
  16. <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
  17. </image>
  18. </up-upload>
  19. </view>
  20. </view>
  21. <view class="mt32 ml10">
  22. <span :style="{fontSize:'30rpx',fontWeight:'400'}">鞋套照片</span>
  23. <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(至少1张)</span>
  24. </view>
  25. <view class="level">
  26. <view class="mt20 ml10">
  27. <up-upload :fileList="fileList.ShoeCover" @afterRead="afterRead" @delete="deletePic"
  28. name="ShoeCover" multiple :maxCount="2" width="131rpx" height="131rpx" :disabled="isRead">
  29. <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
  30. </image>
  31. </up-upload>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="top mt24 box-size" :style="{borderRadius:'16rpx'}">
  36. <view class="form-title">
  37. 宠物状态记录
  38. </view>
  39. <view v-for="(pet, index) in petList" :key="index">
  40. <view class="mt32 ml10">
  41. <span :style="{fontSize:'30rpx',fontWeight:'400'}">{{ pet.title }}照片</span>
  42. <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(至少2张)</span>
  43. </view>
  44. <view class="level">
  45. <view class="mt20 ml10 mr20">
  46. <up-upload :fileList="fileList['pet' + index]" @afterRead="afterRead" @delete="deletePic"
  47. :name="'pet' + index" multiple :maxCount="2" width="131rpx" height="131rpx" :disabled="isRead">
  48. <image src="/static/images/ydd/add_photo.png" mode=""
  49. :style="{width:'131rpx',height:'131rpx'}">
  50. </image>
  51. </up-upload>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="top mt24 box-size" :style="{borderRadius:'16rpx'}">
  57. <view class="form-title">
  58. 基础服务记录
  59. </view>
  60. <view class="mt32 ml10" :style="{fontSize:'30rpx',fontWeight:'400'}">粮碗前后对比 </view>
  61. <view class="level">
  62. <view class="mt20 ml10">
  63. <up-upload :fileList="fileList.foodA" @afterRead="afterRead" @delete="deletePic" name="foodA"
  64. multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
  65. <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
  66. </image>
  67. </up-upload>
  68. <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}"></view>
  69. </view>
  70. <view class="mt20 ml10 ml28">
  71. <up-upload :fileList="fileList.foodB" @afterRead="afterRead" @delete="deletePic" name="foodB"
  72. multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
  73. <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
  74. </image>
  75. </up-upload>
  76. <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}"></view>
  77. </view>
  78. </view>
  79. <view class="mt32 ml10" :style="{fontSize:'30rpx',fontWeight:'400'}">水碗前后对比 </view>
  80. <view class="level">
  81. <view class="mt20 ml10">
  82. <up-upload :fileList="fileList.waterA" @afterRead="afterRead" @delete="deletePic" name="waterA"
  83. multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
  84. <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
  85. </image>
  86. </up-upload>
  87. <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}"></view>
  88. </view>
  89. <view class="mt20 ml10 ml28">
  90. <up-upload :fileList="fileList.waterB" @afterRead="afterRead" @delete="deletePic" name="waterB"
  91. multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
  92. <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
  93. </image>
  94. </up-upload>
  95. <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}"></view>
  96. </view>
  97. </view>
  98. <view class="mt32 ml10" :style="{fontSize:'30rpx',fontWeight:'400'}">猫砂盆尿垫前后对比 </view>
  99. <view class="level">
  100. <view class="mt20 ml10">
  101. <up-upload :fileList="fileList.urinalA" @afterRead="afterRead" @delete="deletePic" name="urinalA"
  102. multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
  103. <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
  104. </image>
  105. </up-upload>
  106. <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}"></view>
  107. </view>
  108. <view class="mt20 ml10 ml28">
  109. <up-upload :fileList="fileList.urinalB" @afterRead="afterRead" @delete="deletePic" name="urinalB"
  110. multiple :maxCount="1" width="131rpx" height="131rpx" :disabled="isRead">
  111. <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
  112. </image>
  113. </up-upload>
  114. <view class="jus-center level" :style="{color:'#999999',fontSize:'22rpx',width:'131rpx'}"></view>
  115. </view>
  116. </view>
  117. </view>
  118. <view class="top mt24 box-size" :style="{borderRadius:'16rpx'}">
  119. <view class="form-title">
  120. 定制服务记录
  121. </view>
  122. <view class="mt32 ml10">
  123. <span :style="{fontSize:'30rpx',fontWeight:'400'}">遛狗</span>
  124. <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(2-3)</span>
  125. </view>
  126. <view class="level">
  127. <view class="mt20 ml10 mr20">
  128. <up-upload :fileList="fileList.testa" @afterRead="afterRead" @delete="deletePic" name="testa"
  129. multiple :maxCount="3" width="131rpx" height="131rpx" :disabled="isRead">
  130. <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
  131. </image>
  132. </up-upload>
  133. </view>
  134. </view>
  135. <view class="mt32 ml10">
  136. <span :style="{fontSize:'30rpx',fontWeight:'400'}">陪玩</span>
  137. <span :style="{fontSize:'26rpx',color:'#C7C7C7'}">(2-3)</span>
  138. </view>
  139. <view class="level">
  140. <view class="mt20 ml10 mr20">
  141. <up-upload :fileList="fileList.testb" @afterRead="afterRead" @delete="deletePic" name="testb"
  142. multiple :maxCount="3" width="131rpx" height="131rpx" :disabled="isRead">
  143. <image src="/static/images/ydd/add_photo.png" mode="" :style="{width:'131rpx',height:'131rpx'}">
  144. </image>
  145. </up-upload>
  146. </view>
  147. </view>
  148. </view>
  149. <view class="top mt24 box-size" :style="{borderRadius:'16rpx'}">
  150. <view class="form-title">
  151. 其他补充信息(必填)
  152. </view>
  153. <view class="mt32 ml10" :style="{color:'#999999',fontSize:'30rpx'}">
  154. 可记录一下今日趣事宠物状况提醒事项等
  155. </view>
  156. <view class="mt24">
  157. <textarea cols="30" rows="10"
  158. placeholder="请输入内容"
  159. :style="{color:'#999999',fontSize:'30rpx',backgroundColor:'#F5F5F5',borderRadius:'16rpx',width:'681rpx',height:'180rpx'}"
  160. class="pd20 box-size" :disabled="isRead"></textarea>
  161. </view>
  162. </view>
  163. <view class="buttom mt60 box-size"
  164. style="display: flex;gap: 20rpx;"
  165. >
  166. <view class="buttom-item buttom-item-2 level size-30"
  167. @click="saveDraft(false)"
  168. :style="{borderRadius:'41rpx',color:'#ff842c'}">
  169. 保存草稿
  170. </view>
  171. <view class="buttom-item level size-30"
  172. @click="submit"
  173. :style="{borderRadius:'41rpx',color:'#fff'}">
  174. 确定提交
  175. </view>
  176. </view>
  177. </view>
  178. </template>
  179. <script setup>
  180. import {
  181. onMounted,
  182. reactive,
  183. ref,
  184. } from "vue";
  185. import {
  186. onLoad
  187. } from '@dcloudio/uni-app'
  188. import {
  189. ossUpload
  190. } from '@/utils/oss-upload/oss/index.js'
  191. import { orderItemLogGetByOrderId } from '@/api/order/order.js'
  192. import {
  193. getOrderPetById,
  194. orderItemLogAddOrUpdate,
  195. } from "@/api/order/order.js";
  196. onLoad((options) => {
  197. orderId.value = options.id || null;
  198. isRead.value = options.isRead || false;
  199. itemOrderID.value = options.itemID
  200. serviceId.value = options.serviceId;
  201. GetByOrderId()
  202. });
  203. const orderId = ref(0)
  204. const itemOrderID = ref(0)
  205. const serviceId = ref(0)
  206. const isRead = ref(false)
  207. const fileList = reactive({
  208. // glove: [],//手套
  209. // ShoeCover: [],//鞋套
  210. // food: [],//粮碗
  211. // water: [],//水碗
  212. // urinal: [],//猫砂盆、尿盆
  213. })
  214. const form = ref({})
  215. const petList = ref([
  216. // {
  217. // title: '小汪'
  218. // },
  219. // {
  220. // title: '大黄'
  221. // },
  222. ])
  223. // 删除图片
  224. const deletePic = (event) => {
  225. if (fileList[event.name]) {
  226. fileList[event.name].splice(event.index, 1);
  227. }
  228. };
  229. // 新增图片
  230. const afterRead = (event) => {
  231. if (!fileList[event.name]) {
  232. fileList[event.name] = []
  233. }
  234. event.file.forEach(n => {
  235. ossUpload(n.url)
  236. .then(url => {
  237. fileList[event.name].push({
  238. url
  239. })
  240. })
  241. })
  242. };
  243. function submit() {
  244. // 参数效验
  245. if (!fileList.glove || fileList.glove.length == 0) {
  246. return msg('请上传鞋套照片')
  247. }
  248. if (!fileList.ShoeCover || fileList.ShoeCover.length == 0) {
  249. return msg('请上传鞋套照片')
  250. }
  251. for (let i = 0; i < petList.value.length; i++) {
  252. if (!fileList['pet' + i] || fileList['pet' + i].length < 2) {
  253. return msg(`请上传${petList.value[i].title}照片`)
  254. }
  255. }
  256. if (!fileList.foodA || fileList.foodA.length < 1 ||
  257. !fileList.foodB || fileList.foodB.length < 1) {
  258. return msg('请上传粮碗前后照片')
  259. }
  260. if (!fileList.waterA || fileList.waterA.length < 1 ||
  261. !fileList.waterB || fileList.waterB.length < 1) {
  262. return msg('请上传水碗前后照片')
  263. }
  264. if (!fileList.urinalA || fileList.urinalA.length < 1 ||
  265. !fileList.urinalB || fileList.urinalB.length < 1) {
  266. return msg('请上传猫砂盆、尿盆照片')
  267. }
  268. saveDraft(true)
  269. }
  270. function GetByOrderId(){
  271. orderItemLogGetByOrderId(serviceId.value)
  272. .then(res => {
  273. if(res.code == 200 && res.data) {
  274. const data = res.data;
  275. form.value = data
  276. // 回显手套照片
  277. if(data.glovePhoto) {
  278. fileList.glove = data.glovePhoto.split(',').map(url => ({ url }));
  279. }
  280. // 回显鞋套照片
  281. if(data.shoeCoverPhoto) {
  282. fileList.ShoeCover = data.shoeCoverPhoto.split(',').map(url => ({ url }));
  283. }
  284. // 回显宠物照片
  285. if(data.petPhoto) {
  286. const pets = JSON.parse(data.petPhoto);
  287. petList.value = pets;
  288. pets.forEach((pet, index) => {
  289. if(pet.fileList) {
  290. fileList['pet' + index] = pet.fileList.split(',').map(url => ({ url }));
  291. }
  292. });
  293. }
  294. // 回显粮碗照片
  295. if(data.grainBowlFront) fileList.foodA = data.grainBowlFront.split(',').map(url => ({ url }));
  296. if(data.grainBowlAfter) fileList.foodB = data.grainBowlAfter.split(',').map(url => ({ url }));
  297. // 回显水碗照片
  298. if(data.waterBowlFront) fileList.waterA = data.waterBowlFront.split(',').map(url => ({ url }));
  299. if(data.waterBowlAfter) fileList.waterB = data.waterBowlAfter.split(',').map(url => ({ url }));
  300. // 回显猫砂盆/尿垫照片
  301. if(data.basinFront) fileList.urinalA = data.basinFront.split(',').map(url => ({ url }));
  302. if(data.basinAfter) fileList.urinalB = data.basinAfter.split(',').map(url => ({ url }));
  303. // 回显定制服务照片
  304. if(data.workDogImage) fileList.testa = data.workDogImage.split(',').map(url => ({ url }));
  305. if(data.workPalyImage) fileList.testb = data.workPalyImage.split(',').map(url => ({ url }));
  306. }else{
  307. getOrderPetByIdFN()
  308. }
  309. })
  310. }
  311. function getOrderPetByIdFN(){
  312. getOrderPetById(orderId.value)
  313. .then(res => {
  314. if(res.code == 200){
  315. res.data.forEach((n, i) => {
  316. fileList['pet' + i] = []
  317. })
  318. res.data.forEach((n, i) => {
  319. petList.value.push({
  320. title : n.name,
  321. id : n.id,
  322. })
  323. })
  324. }
  325. })
  326. }
  327. function saveDraft(flag) {
  328. // 将所有图片数组转换为逗号分隔的字符串
  329. const params = {
  330. orderId: orderId.value,
  331. itemOrderId : itemOrderID.value,
  332. itemDateId : serviceId.value,
  333. glovePhoto: fileList.glove?.map(item => item.url).join(',') || '',
  334. shoeCoverPhoto: fileList.ShoeCover?.map(item => item.url).join(',') || '',
  335. // 合并所有宠物照片
  336. petPhoto: JSON.stringify(
  337. petList.value.map((pet, index) => {
  338. return {
  339. id : pet.id,
  340. title : pet.title,
  341. fileList: fileList['pet' + index]?.map(item => item.url).join(',') || ''
  342. };
  343. })
  344. ),
  345. // 粮碗照片
  346. grainBowlFront: fileList.foodA?.map(item => item.url).join(',') || '',
  347. grainBowlAfter: fileList.foodB?.map(item => item.url).join(',') || '',
  348. // 水碗照片
  349. waterBowlFront: fileList.waterA?.map(item => item.url).join(',') || '',
  350. waterBowlAfter: fileList.waterB?.map(item => item.url).join(',') || '',
  351. // 猫砂盆/尿垫照片
  352. basinFront: fileList.urinalA?.map(item => item.url).join(',') || '',
  353. basinAfter: fileList.urinalB?.map(item => item.url).join(',') || '',
  354. // 定制服务照片
  355. workDogImage: fileList.testa?.map(item => item.url).join(',') || '',
  356. workPalyImage: fileList.testb?.map(item => item.url).join(',') || '',
  357. // 备注信息
  358. notes: form.value.notes || '',
  359. }
  360. if(form.value.id) {
  361. params.id = form.value.id
  362. }
  363. if(flag) {
  364. params.submitFlag = 1
  365. }
  366. orderItemLogAddOrUpdate(params)
  367. .then(res => {
  368. if(res.code === 200) {
  369. uni.showToast({
  370. title: '提交成功',
  371. icon: 'success'
  372. })
  373. // 如果是确认提交(非草稿),则返回上一页
  374. setTimeout(() => {
  375. uni.navigateBack()
  376. }, 1500)
  377. } else {
  378. uni.showToast({
  379. title: res.msg || '提交失败',
  380. icon: 'none'
  381. })
  382. }
  383. })
  384. .catch(err => {
  385. uni.showToast({
  386. title: '提交失败',
  387. icon: 'none'
  388. })
  389. })
  390. }
  391. function msg(content) {
  392. uni.showToast({
  393. title: content,
  394. icon: 'none'
  395. })
  396. }
  397. </script>
  398. <style scoped lang="scss">
  399. @import"index.scss"
  400. </style>