拍摄
Showing
3 changed files
with
67 additions
and
42 deletions
This diff is collapsed.
Click to expand it.
| ... | @@ -5,69 +5,73 @@ | ... | @@ -5,69 +5,73 @@ |
| 5 | <el-row> | 5 | <el-row> |
| 6 | <div class="zh-title">{{ form.name }}</div> | 6 | <div class="zh-title">{{ form.name }}</div> |
| 7 | <div class="tagbox esp"> | 7 | <div class="tagbox esp"> |
| 8 | <span v-for="(t,index) in form.label?.split(',')" v-show="index<4">{{t}}</span> | 8 | <span v-for="(t,index) in form.label?.split(',')" v-show="index<4">{{ t }}</span> |
| 9 | </div> | 9 | </div> |
| 10 | </el-row> | 10 | </el-row> |
| 11 | <el-row class="hz-row"> | 11 | <el-row class="hz-row"> |
| 12 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | 12 | <el-icon color="#929AA0" size="16" style="position: relative;top: 2px"> |
| 13 | <OfficeBuilding/> | 13 | <OfficeBuilding /> |
| 14 | </el-icon> | 14 | </el-icon> |
| 15 | {{ language==0?'成立':'Established for'}} <span class="sign">{{form.ageLimit}}</span>{{language==0?'年':'years'}} | | 15 | {{ language == 0 ? '成立' : 'Established for' }} <span |
| 16 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | 16 | class="sign" |
| 17 | <UserFilled/> | 17 | >{{ form.ageLimit }}</span>{{ language == 0 ? '年' : 'years' }} | |
| 18 | <el-icon color="#929AA0" size="16" style="position: relative;top: 2px"> | ||
| 19 | <UserFilled /> | ||
| 18 | </el-icon> | 20 | </el-icon> |
| 19 | <span class="sign"> {{ form.dresserLimit }}</span>{{language==0?'名摄影师':'Photographers' }} | | 21 | <span class="sign"> {{ form.dresserLimit }}</span>{{ language == 0 ? '名摄影师' : 'Photographers' }} | |
| 20 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | 22 | <el-icon color="#929AA0" size="16" style="position: relative;top: 2px"> |
| 21 | <PhoneFilled/> | 23 | <PhoneFilled /> |
| 22 | </el-icon> | 24 | </el-icon> |
| 23 | <span style="padding-top: 2px"> | 25 | <span style="padding-top: 2px"> |
| 24 | {{ form.contact }} | 26 | {{ form.contact }} |
| 25 | </span> | 27 | </span> |
| 26 | | | 28 | | |
| 27 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | 29 | <el-icon color="#929AA0" size="16" style="position: relative;top: 2px"> |
| 28 | <LocationFilled/> | 30 | <LocationFilled /> |
| 29 | </el-icon> | 31 | </el-icon> |
| 30 | {{form.remarks}} | 32 | {{ form.remarks }} |
| 31 | </el-row> | 33 | </el-row> |
| 32 | <div style="display: flex"> | 34 | <div style="display: flex"> |
| 33 | <div style="min-width: 130px" class="title">{{language==0?'工作室简介:':'Studio profile:'}}</div> | 35 | <div class="title" style="min-width: 130px">{{ language == 0 ? '工作室简介:' : 'Studio profile:' }}</div> |
| 34 | <div v-html="form.introduction"></div> | 36 | <div v-html="form.introduction" /> |
| 35 | </div> | 37 | </div> |
| 36 | </el-card> | 38 | </el-card> |
| 37 | <div class="mt30"> | 39 | <div class="mt30"> |
| 38 | <el-row :gutter="20"> | 40 | <el-row :gutter="20"> |
| 39 | <el-col :span="10"> | 41 | <el-col :span="10"> |
| 40 | <div class="imgbox hotelImg"> | 42 | <div class="imgbox hotelImg"> |
| 41 | <el-image :src="form?.photosList?.[0]" fit="cover" :preview-src-list="form?.photosList"/> | 43 | <el-image :preview-src-list="form?.photosList" :src="form?.photosList?.[0]" fit="cover" /> |
| 42 | </div> | 44 | </div> |
| 43 | </el-col> | 45 | </el-col> |
| 44 | <el-col :span="14"> | 46 | <el-col :span="14"> |
| 45 | <el-row class="h100" :gutter="20"> | 47 | <el-row :gutter="20" class="h100"> |
| 46 | <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photosList?.slice(1,7)"> | 48 | <el-col v-for="(p,index) in form?.photosList?.slice(1,7)" :span="8" class="oddmb"> |
| 47 | <div class="imgbox hotelImg"><el-image :src="p" fit="cover"/></div> | 49 | <div class="imgbox hotelImg"> |
| 50 | <el-image :src="p" fit="cover" /> | ||
| 51 | </div> | ||
| 48 | </el-col> | 52 | </el-col> |
| 49 | </el-row> | 53 | </el-row> |
| 50 | </el-col> | 54 | </el-col> |
| 51 | </el-row> | 55 | </el-row> |
| 52 | </div> | 56 | </div> |
| 53 | <br> | 57 | <br> |
| 54 | |||
| 55 | <el-card :body-style="{'padding':'20px 20px'}"> | 58 | <el-card :body-style="{'padding':'20px 20px'}"> |
| 56 | <PhotoGraphyCalendar/> | 59 | <PhotoGraphyCalendar /> |
| 57 | </el-card> | 60 | </el-card> |
| 58 | </div> | 61 | </div> |
| 59 | </div> | 62 | </div> |
| 60 | </template> | 63 | </template> |
| 61 | 64 | ||
| 62 | <script setup > | 65 | <script setup> |
| 63 | import {useRouter} from "vue-router"; | 66 | import { useRouter } from 'vue-router' |
| 64 | import {ref, reactive, onMounted} from "vue"; | 67 | import { ref, reactive, onMounted } from 'vue' |
| 65 | import {useRoute} from "vue-router"; | 68 | import { useRoute } from 'vue-router' |
| 66 | import * as booking from "@/apiPc/booking" | 69 | import * as booking from '@/apiPc/booking' |
| 67 | import {useStorage} from "@vueuse/core/index"; | 70 | import { useStorage } from '@vueuse/core/index' |
| 68 | import useUserStore from "@/store/modules/user"; | 71 | import useUserStore from '@/store/modules/user' |
| 69 | import PhotoGraphyCalendar from "@/viewsPc/booking/component/photoGraphyCalendar.vue"; | 72 | import PhotoGraphyCalendar from '@/viewsPc/booking/component/photoGraphyCalendar.vue' |
| 70 | import {fillImgUrl} from "/@/utils/ruoyi"; | 73 | import { fillImgUrl } from '/@/utils/ruoyi' |
| 74 | |||
| 71 | const user = useUserStore().user | 75 | const user = useUserStore().user |
| 72 | const language = useStorage('language', 0) | 76 | const language = useStorage('language', 0) |
| 73 | const router = useRouter() | 77 | const router = useRouter() |
| ... | @@ -75,7 +79,7 @@ const route = useRoute() | ... | @@ -75,7 +79,7 @@ const route = useRoute() |
| 75 | const form = ref({}) | 79 | const form = ref({}) |
| 76 | const query = ref({ | 80 | const query = ref({ |
| 77 | activityId: route.params.cptId, | 81 | activityId: route.params.cptId, |
| 78 | id:route.params.id | 82 | id: route.params.id |
| 79 | }) | 83 | }) |
| 80 | const loading = ref(false) | 84 | const loading = ref(false) |
| 81 | const map = ref(null) | 85 | const map = ref(null) |
| ... | @@ -88,19 +92,18 @@ function getData() { | ... | @@ -88,19 +92,18 @@ function getData() { |
| 88 | booking.getComShootVoById(query.value).then(res => { | 92 | booking.getComShootVoById(query.value).then(res => { |
| 89 | loading.value = false | 93 | loading.value = false |
| 90 | form.value = res.data | 94 | form.value = res.data |
| 91 | form.value.photosList=[] | 95 | form.value.photosList = [] |
| 92 | form.value.photos.split(',').forEach(v=>{ | 96 | form.value.photos.split(',').forEach(v => { |
| 93 | form.value.photosList.push(fillImgUrl(v)) | 97 | form.value.photosList.push(fillImgUrl(v)) |
| 94 | }) | 98 | }) |
| 95 | }).catch(err => { | 99 | }).catch(err => { |
| 96 | console.log(err) | 100 | console.log(err) |
| 97 | }) | 101 | }) |
| 98 | |||
| 99 | } | 102 | } |
| 100 | 103 | ||
| 101 | </script> | 104 | </script> |
| 102 | 105 | ||
| 103 | <style scoped lang="scss"> | 106 | <style lang="scss" scoped> |
| 104 | .room { | 107 | .room { |
| 105 | background: #FAFBFD; | 108 | background: #FAFBFD; |
| 106 | margin: 20px 0 0; | 109 | margin: 20px 0 0; |
| ... | @@ -260,14 +263,17 @@ function getData() { | ... | @@ -260,14 +263,17 @@ function getData() { |
| 260 | width: 100%; | 263 | width: 100%; |
| 261 | height: 100%; | 264 | height: 100%; |
| 262 | position: relative; | 265 | position: relative; |
| 263 | img{object-fit: cover} | 266 | |
| 267 | img { | ||
| 268 | object-fit: cover | ||
| 269 | } | ||
| 264 | } | 270 | } |
| 265 | 271 | ||
| 266 | .img-hover{ | 272 | .img-hover { |
| 267 | position: absolute; | 273 | position: absolute; |
| 268 | top: 0; | 274 | top: 0; |
| 269 | left: 0; | 275 | left: 0; |
| 270 | background-color: rgb(0,0,0,.5); | 276 | background-color: rgb(0, 0, 0, .5); |
| 271 | color: #fff; | 277 | color: #fff; |
| 272 | font-size: 18px; | 278 | font-size: 18px; |
| 273 | font-weight: 400; | 279 | font-weight: 400; |
| ... | @@ -279,12 +285,25 @@ function getData() { | ... | @@ -279,12 +285,25 @@ function getData() { |
| 279 | 285 | ||
| 280 | //display: none; | 286 | //display: none; |
| 281 | } | 287 | } |
| 282 | .hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9; | 288 | |
| 283 | img{object-fit: cover;object-position: center;width: 100%;height: 100%; | 289 | .hotelImg { |
| 290 | border-radius: 10px; | ||
| 291 | overflow: hidden; | ||
| 292 | aspect-ratio: 16/9; | ||
| 293 | |||
| 294 | img { | ||
| 295 | object-fit: cover; | ||
| 296 | object-position: center; | ||
| 297 | width: 100%; | ||
| 298 | height: 100%; | ||
| 284 | } | 299 | } |
| 285 | } | 300 | } |
| 286 | .oddmb:nth-child(2){margin-bottom: 20px;} | 301 | |
| 287 | .title{ | 302 | .oddmb:nth-child(2) { |
| 303 | margin-bottom: 20px; | ||
| 304 | } | ||
| 305 | |||
| 306 | .title { | ||
| 288 | width: 130px; | 307 | width: 130px; |
| 289 | font-weight: 500; | 308 | font-weight: 500; |
| 290 | font-size: 18px; | 309 | font-size: 18px; | ... | ... |
| ... | @@ -133,7 +133,7 @@ | ... | @@ -133,7 +133,7 @@ |
| 133 | </div> | 133 | </div> |
| 134 | <div class="text-right"> | 134 | <div class="text-right"> |
| 135 | <el-button | 135 | <el-button |
| 136 | v-if="(b.orderType == 0||b.orderType == 5||b.orderType==1||b.orderType==2||b.orderType==3)&&b.viewStatus!=0" | 136 | v-if="(b.orderType == 0||b.orderType == 5||b.orderType==1||b.orderType==2||b.orderType==3||b.orderType==4)&&b.viewStatus!=0" |
| 137 | class="mb10" plain round | 137 | class="mb10" plain round |
| 138 | size="small" type="success" | 138 | size="small" type="success" |
| 139 | @click="Rebook(b)" | 139 | @click="Rebook(b)" |
| ... | @@ -266,6 +266,12 @@ function Rebook(row) { | ... | @@ -266,6 +266,12 @@ function Rebook(row) { |
| 266 | path: `/booking/makeUp/${row.activeId}/${row.extId}` | 266 | path: `/booking/makeUp/${row.activeId}/${row.extId}` |
| 267 | }) | 267 | }) |
| 268 | } | 268 | } |
| 269 | // 拍摄 | ||
| 270 | if (row.orderType == 4) { | ||
| 271 | return router.push({ | ||
| 272 | path: `/booking/photography/${row.activeId}/${row.extId}` | ||
| 273 | }) | ||
| 274 | } | ||
| 269 | 275 | ||
| 270 | if (row.orderType == 5) { | 276 | if (row.orderType == 5) { |
| 271 | router.push({ | 277 | router.push({ | ... | ... |
-
Please register or sign in to post a comment