拍摄

zhangmeng
Showing 3 changed files with 177 additions and 129 deletions
src/viewsPc/booking/component/photoGraphyCalendar.vue
src/viewsPc/booking/photographyDetail.vue
src/viewsPc/center/myReservation.vue
--- a/src/viewsPc/booking/component/photoGraphyCalendar.vue
View file @9fa2d4d
+++ b/src/viewsPc/booking/component/photoGraphyCalendar.vue
View file @9fa2d4d
 <template>
-  <div >
+  <div>
    <el-calendar v-model="currentDate" :range="calendarRange">
      <template #header="{date}">
        <el-row style="width: 100%">
-          <el-col :span="7">
+          <el-col :span="7" />
-          </el-col>
          <el-col :span="10">
-            <el-row justify="center" align='middle'  class="cTitle">
+            <el-row align="middle" class="cTitle" justify="center">
-<!--              <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
-<!--              <div>-->
+              <!--              <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
-<!--&lt;!&ndash;                <el-date-picker&ndash;&gt;-->
+              <!--              <div>-->
-<!--&lt;!&ndash;                  v-model="value2"&ndash;&gt;-->
+              <!--&lt;!&ndash;                <el-date-picker&ndash;&gt;-->
-<!--&lt;!&ndash;                  type="daterange"&ndash;&gt;-->
+              <!--&lt;!&ndash;                  v-model="value2"&ndash;&gt;-->
-<!--&lt;!&ndash;                  range-separator="-"&ndash;&gt;-->
+              <!--&lt;!&ndash;                  type="daterange"&ndash;&gt;-->
-<!--&lt;!&ndash;                  start-placeholder="Start date"&ndash;&gt;-->
+              <!--&lt;!&ndash;                  range-separator="-"&ndash;&gt;-->
-<!--&lt;!&ndash;                  end-placeholder="End date"&ndash;&gt;-->
+              <!--&lt;!&ndash;                  start-placeholder="Start date"&ndash;&gt;-->
-<!--&lt;!&ndash;                  format="YYYY-MM-DD"&ndash;&gt;-->
+              <!--&lt;!&ndash;                  end-placeholder="End date"&ndash;&gt;-->
-<!--&lt;!&ndash;                  value-format="YYYY-MM-DD"&ndash;&gt;-->
+              <!--&lt;!&ndash;                  format="YYYY-MM-DD"&ndash;&gt;-->
-<!--&lt;!&ndash;                  size="small"&ndash;&gt;-->
+              <!--&lt;!&ndash;                  value-format="YYYY-MM-DD"&ndash;&gt;-->
-<!--&lt;!&ndash;                  @change="changee"&ndash;&gt;-->
+              <!--&lt;!&ndash;                  size="small"&ndash;&gt;-->
-<!--&lt;!&ndash;                />&ndash;&gt;-->
+              <!--&lt;!&ndash;                  @change="changee"&ndash;&gt;-->
-<!--                <el-input readonly v-model="value2" type="text" size="small" style="width: 280px"></el-input>-->
+              <!--&lt;!&ndash;                />&ndash;&gt;-->
-<!--              </div>-->
+              <!--                <el-input readonly v-model="value2" type="text" size="small" style="width: 280px"></el-input>-->
-<!--              <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
+              <!--              </div>-->
-              {{date}}
+              <!--              <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
+              {{ date }}
            </el-row>
          </el-col>
          <el-col :span="7">
            <div style="text-align: right;padding-right: 10px">
              <el-date-picker
                v-model="currentDate1"
-                type="date"
+                :clearable="false"
-                placeholder="YYYY-MM-DD"
+                :disabled-date="disabledDateRZ"
                format="YYYY-MM-DD"
+                placeholder="YYYY-MM-DD"
                size="small"
+                type="date"
                @change="dateChange"
-                :disabled-date="disabledDateRZ"
-                :clearable="false"
              />
            </div>
          </el-col>
@@ -51,30 +51,44 @@
    <div class="calendarList">
      <ul v-loading="loading">
-        <li v-for="n in schList" :key="n.id" >
+        <li v-for="n in schList" :key="n.id">
          <el-row style="width: 100%">
            <div style="margin-right: 25px">
-              <el-image style="width: 90px;height: 115px" :src="fillImgUrl(n.photos?.split(',')[0]) " fit="cover" />
+              <el-image :src="fillImgUrl(n.photos?.split(',')[0]) " fit="cover" style="width: 90px;height: 115px" />
            </div>
-            <div style="flex: 1" >
+            <div style="flex: 1">
              <div class="hz-title">{{ n.name }}</div>
              <div>
                <el-row justify="space-between">
                  <el-row class="hz-p" style="flex: 1">
                    <el-col :span="8">
-                      <div  class="esp_3">{{ language==0?'套餐说明':'Package Description' }}: <span style="margin-right: 20px">{{n.introduction}}</span></div>
+                      <div class="esp_3">{{ language == 0 ? '套餐说明' : 'Package Description' }}: <span
+                        style="margin-right: 20px"
+                      >{{ n.introduction }}</span></div>
                    </el-col>
                    <el-col :span="8">
-                      <div>{{ language==0?'剩余':'' }}<span class="sign">{{ n.num-n.counts }}</span>{{language==0?'名额':'Places Remaining' }} </div>
+                      <div>{{ language == 0 ? '剩余' : '' }}<span class="sign">{{
+                        n.num - n.counts
+                      }}</span>{{ language == 0 ? '名额' : 'Places Remaining' }}
+                      </div>
                    </el-col>
                    <el-col :span="8">
-                      <div >{{n.goHome==1?language==0?'上门拍照':'Door-to-door photo':''}}</div>
+                      <div>{{ n.goHome == 1 ? language == 0 ? '上门拍照' : 'Door-to-door photo' : '' }}</div>
                    </el-col>
                  </el-row>
                  <el-row>
-                    <div class="zh-margin" style="font-size: 36px;color: #ff8124"><span style="font-size: 24px">{{ language==0?'¥':'€'}}  </span> {{language==0?n.photoPrice:n.photoPriceEn}}</div>
+                    <div class="zh-margin" style="font-size: 36px;color: #ff8124"><span
-                    <el-button :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()" class="btn-lineG w200px" round type="primary" size="large" @click="goMatch(n)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
+                                                                                    style="font-size: 24px"
+                                                                                  >{{ language == 0 ? '¥' : '€' }}  </span>
+                      {{ language == 0 ? n.photoPrice : n.photoPriceEn }}
+                    </div>
+                    <el-button
+                      :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()"
+                      class="btn-lineG w200px" round size="large" type="primary" @click="goMatch(n)"
+                    >
+                      {{ language == 0 ? '立即预约' : 'Select' }} ⇀
+                    </el-button>
                  </el-row>
                </el-row>
              </div>
@@ -82,63 +96,66 @@
          </el-row>
        </li>
      </ul>
-      <el-empty v-if="schList.length== 0"
+      <el-empty
-                style="--el-empty-padding:0;--el-empty-description-margin-top:0"
+        v-if="schList.length== 0"
        :image="`/img/order_no.png`"
-                :image-size="200"/>
+        :image-size="200"
+        style="--el-empty-padding:0;--el-empty-description-margin-top:0"
+      />
    </div>
  </div>
 </template>
 <script setup>
-import {ref,onMounted} from "vue";
+import { ref, onMounted } from 'vue'
-import {dayjs} from "element-plus";
+import { dayjs } from 'element-plus'
-import {useRoute,useRouter} from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
-import * as booking from "@/apiPc/booking"
+import * as booking from '@/apiPc/booking'
-import {useStorage} from "@vueuse/core/index";
+import { useStorage } from '@vueuse/core/index'
-import useUserStore from "/@/store/modules/user";
+import useUserStore from '/@/store/modules/user'
-import {getActivityPhotoVoListByShootId, getBaseInfoByActiveId} from "@/apiPc/booking";
+import { getActivityPhotoVoListByShootId, getBaseInfoByActiveId } from '@/apiPc/booking'
-import {ElMessageBox} from'element-plus'
+import { ElMessageBox } from 'element-plus'
+import { getCurrentInstance } from '@vue/runtime-core'
+const { proxy } = getCurrentInstance()
 const user = useUserStore().user
 const language = useStorage('language', 0)
 const router = useRouter()
-const route=useRoute()
+const route = useRoute()
 const currentDate = ref(new Date())
 const currentDate1 = ref(new Date())
-const calendarRange = ref([dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())])
+const calendarRange = ref([dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())])
 const schList = ref([])
 const loading = ref(false)
 const query = ref({
-  lasId:route.params.id,
+  lasId: route.params.id
 })
-const value2=ref('')
+const value2 = ref('')
-const formTime=ref()
+const formTime = ref()
 onMounted(() => {
-  getBaseInfoByActiveId(route.params.cptId).then(res=>{
+  getBaseInfoByActiveId(route.params.cptId).then(res => {
    formTime.value = res.data || null
-  }).catch(err=>{
+  }).catch(err => {
    console.log(err)
    formTime.value = null
-  }).finally(()=>{
+  }).finally(() => {
    getData()
    getScheduleList()
  })
 })
-function getData(){
+function getData() {
  if (!formTime.value.photoStart) return
-  const toDay=dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
+  const toDay = dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
-  const start=dayjs(formTime.value.photoStart).valueOf()
+  const start = dayjs(formTime.value.photoStart).valueOf()
-  if(toDay<start){
+  if (toDay < start) {
-    currentDate1.value= query.value.currentDate = dayjs(start).format('YYYY-MM-DD')
+    currentDate1.value = query.value.currentDate = dayjs(start).format('YYYY-MM-DD')
+  } else {
-  }else{
    currentDate1.value = query.value.currentDate = dayjs(toDay).format('YYYY-MM-DD')
  }
-  calendarRange.value=[dayjs(currentDate1.value).toDate(),(dayjs(currentDate1.value).toDate())]
+  calendarRange.value = [dayjs(currentDate1.value).toDate(), (dayjs(currentDate1.value).toDate())]
 }
@@ -146,30 +163,36 @@ function getScheduleList() {
  loading.value = true
  query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD')
  console.log(query.value)
-  booking.getActivityPhotoVoListByShootId(query.value).then(res=>{
+  booking.getActivityPhotoVoListByShootId(query.value).then(res => {
    loading.value = false
    schList.value = res.data
  })
 }
 function selectDate(date) {
-  currentDate1.value= currentDate.value=dayjs(date).toDate()
+  currentDate1.value = currentDate.value = dayjs(date).toDate()
  getScheduleList()
 }
-function dateChange(){
+function dateChange() {
-  currentDate.value=currentDate1.value
+  currentDate.value = currentDate1.value
-  calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]
+  calendarRange.value = [dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())]
  getScheduleList()
 }
-function goMatch(n) {
+async function goMatch(n) {
  console.log(11)
+  const { data } = await getBaseInfoByActiveId(route.params.cptId)
+  if (data.isPhotoView == 0) {
+    return proxy.$modal.confirm(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
+  }
  if (!user) {
    useUserStore().setVisitor()
    return
  }
-  ElMessageBox.confirm(language.value==0?`你当前所预约的时间为${query.value.currentDate}是否确定？`:`Your current appointment is ${query.value.currentDate}. Are you sure?`,{type:'warning'})
+  ElMessageBox.confirm(language.value == 0 ? `你当前所预约的时间为${query.value.currentDate}是否确定？` : `Your current appointment is ${query.value.currentDate}. Are you sure?`, { type: 'warning' })
    .then((rr) => {
      console.log(rr)
      router.push({
@@ -186,25 +209,23 @@ function goMatch(n) {
      // catch error
      console.log(e)
    })
 }
 function disabledDateRZ(date) {
  if (formTime.value) {
-      const toDay=dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
+    const toDay = dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
-      const start=dayjs(formTime.value.photoStart).valueOf()
+    const start = dayjs(formTime.value.photoStart).valueOf()
-      const end=dayjs(formTime.value.photoEnd).valueOf()
+    const end = dayjs(formTime.value.photoEnd).valueOf()
-      if (toDay<start) {
+    if (toDay < start) {
-        return date.getTime()<start||date.getTime()>end
+      return date.getTime() < start || date.getTime() > end
-      } else if(toDay>start&&toDay <end) {
+    } else if (toDay > start && toDay < end) {
-        return date.getTime()<toDay||date.getTime()>end
+      return date.getTime() < toDay || date.getTime() > end
-      }else return true
+    } else return true
  }
 }
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .el-calendar {
  --el-calendar-border: none;
  --el-calendar-cell-width: 40px;
@@ -259,7 +280,8 @@ function disabledDateRZ(date) {
  height: 625px;
  ul {
-    li {cursor: pointer;
+    li {
+      cursor: pointer;
      background: #F6F9FE;
      margin: 7px 0 7px 20px;
      position: relative;
@@ -323,21 +345,22 @@ function disabledDateRZ(date) {
  }
 }
-.hz-title{
+.hz-title {
  font-size: 20px;
  font-weight: 400;
  color: #000;
-  margin-top:20px;
+  margin-top: 20px;
  margin-bottom: 10px;
 }
-.zh-margin{
+.zh-margin {
  font-weight: bold;
  font-size: 36px;
  color: #FF8124;
  margin-right: 30px;
 }
-.hz-p{
+.hz-p {
  font-size: 16px;
  color: #4C5359;
  font-weight: 400;
@@ -349,7 +372,7 @@ function disabledDateRZ(date) {
  line-height: 50px;
 }
-.canBtn{
+.canBtn {
  color: #453DEA;
  border-radius: 2px;
  width: 22px;
@@ -358,10 +381,10 @@ function disabledDateRZ(date) {
  text-align: center;
  background-color: #fff;
  margin: 0 16px -2px 16px;
-  cursor:pointer
+  cursor: pointer
 }
-.cTitle{
+.cTitle {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
--- a/src/viewsPc/booking/photographyDetail.vue
View file @9fa2d4d
+++ b/src/viewsPc/booking/photographyDetail.vue
View file @9fa2d4d
@@ -5,69 +5,73 @@
        <el-row>
          <div class="zh-title">{{ form.name }}</div>
          <div class="tagbox esp">
-            <span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{t}}</span>
+            <span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{ t }}</span>
          </div>
        </el-row>
        <el-row class="hz-row">
-          <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
+          <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
-            <OfficeBuilding/>
+            <OfficeBuilding />
          </el-icon>
-          {{ language==0?'成立':'Established for'}} <span class="sign">{{form.ageLimit}}</span>{{language==0?'年':'years'}} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
+          {{ language == 0 ? '成立' : 'Established for' }} <span
-          <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
+            class="sign"
-            <UserFilled/>
+          >{{ form.ageLimit }}</span>{{ language == 0 ? '年' : 'years' }} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
+          <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
+            <UserFilled />
          </el-icon>
-         <span class="sign"> {{ form.dresserLimit }}</span>{{language==0?'名摄影师':'Photographers' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
+          <span class="sign"> {{ form.dresserLimit }}</span>{{ language == 0 ? '名摄影师' : 'Photographers' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
-          <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
+          <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
-            <PhoneFilled/>
+            <PhoneFilled />
          </el-icon>
          <span style="padding-top: 2px">
            {{ form.contact }}
          </span>
          &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
-          <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
+          <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
-            <LocationFilled/>
+            <LocationFilled />
          </el-icon>
-         {{form.remarks}}
+          {{ form.remarks }}
        </el-row>
        <div style="display: flex">
-          <div style="min-width: 130px" class="title">{{language==0?'工作室简介:':'Studio profile:'}}</div>
+          <div class="title" style="min-width: 130px">{{ language == 0 ? '工作室简介:' : 'Studio profile:' }}</div>
-          <div v-html="form.introduction"></div>
+          <div v-html="form.introduction" />
        </div>
      </el-card>
      <div class="mt30">
        <el-row :gutter="20">
          <el-col :span="10">
            <div class="imgbox hotelImg">
-              <el-image :src="form?.photosList?.[0]" fit="cover" :preview-src-list="form?.photosList"/>
+              <el-image :preview-src-list="form?.photosList" :src="form?.photosList?.[0]" fit="cover" />
            </div>
          </el-col>
          <el-col :span="14">
-            <el-row class="h100" :gutter="20">
+            <el-row :gutter="20" class="h100">
-              <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photosList?.slice(1,7)">
+              <el-col v-for="(p,index) in form?.photosList?.slice(1,7)" :span="8" class="oddmb">
-                <div class="imgbox hotelImg"><el-image :src="p" fit="cover"/></div>
+                <div class="imgbox hotelImg">
+                  <el-image :src="p" fit="cover" />
+                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <br>
      <el-card :body-style="{'padding':'20px 20px'}">
-        <PhotoGraphyCalendar/>
+        <PhotoGraphyCalendar />
      </el-card>
    </div>
  </div>
 </template>
-<script setup >
+<script setup>
-import {useRouter} from "vue-router";
+import { useRouter } from 'vue-router'
-import {ref, reactive, onMounted} from "vue";
+import { ref, reactive, onMounted } from 'vue'
-import {useRoute} from "vue-router";
+import { useRoute } from 'vue-router'
-import * as booking from "@/apiPc/booking"
+import * as booking from '@/apiPc/booking'
-import {useStorage} from "@vueuse/core/index";
+import { useStorage } from '@vueuse/core/index'
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user'
-import PhotoGraphyCalendar  from "@/viewsPc/booking/component/photoGraphyCalendar.vue";
+import PhotoGraphyCalendar from '@/viewsPc/booking/component/photoGraphyCalendar.vue'
-import {fillImgUrl} from "/@/utils/ruoyi";
+import { fillImgUrl } from '/@/utils/ruoyi'
 const user = useUserStore().user
 const language = useStorage('language', 0)
 const router = useRouter()
@@ -75,7 +79,7 @@ const route = useRoute()
 const form = ref({})
 const query = ref({
  activityId: route.params.cptId,
-  id:route.params.id
+  id: route.params.id
 })
 const loading = ref(false)
 const map = ref(null)
@@ -88,19 +92,18 @@ function getData() {
  booking.getComShootVoById(query.value).then(res => {
    loading.value = false
    form.value = res.data
-    form.value.photosList=[]
+    form.value.photosList = []
-    form.value.photos.split(',').forEach(v=>{
+    form.value.photos.split(',').forEach(v => {
      form.value.photosList.push(fillImgUrl(v))
    })
  }).catch(err => {
    console.log(err)
  })
 }
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .room {
  background: #FAFBFD;
  margin: 20px 0 0;
@@ -260,14 +263,17 @@ function getData() {
  width: 100%;
  height: 100%;
  position: relative;
-  img{object-fit: cover}
+  img {
+    object-fit: cover
+  }
 }
-.img-hover{
+.img-hover {
  position: absolute;
  top: 0;
  left: 0;
-  background-color: rgb(0,0,0,.5);
+  background-color: rgb(0, 0, 0, .5);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
@@ -279,12 +285,25 @@ function getData() {
  //display: none;
 }
-.hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9;
-  img{object-fit: cover;object-position: center;width: 100%;height: 100%;
+.hotelImg {
+  border-radius: 10px;
+  overflow: hidden;
+  aspect-ratio: 16/9;
+  img {
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+    height: 100%;
  }
 }
-.oddmb:nth-child(2){margin-bottom: 20px;}
-.title{
+.oddmb:nth-child(2) {
+  margin-bottom: 20px;
+}
+.title {
  width: 130px;
  font-weight: 500;
  font-size: 18px;
--- a/src/viewsPc/center/myReservation.vue
View file @9fa2d4d
+++ b/src/viewsPc/center/myReservation.vue
View file @9fa2d4d
@@ -133,7 +133,7 @@
              </div>
              <div class="text-right">
                <el-button
-                  v-if="(b.orderType == 0||b.orderType == 5||b.orderType==1||b.orderType==2||b.orderType==3)&&b.viewStatus!=0"
+                  v-if="(b.orderType == 0||b.orderType == 5||b.orderType==1||b.orderType==2||b.orderType==3||b.orderType==4)&&b.viewStatus!=0"
                  class="mb10" plain round
                  size="small" type="success"
                  @click="Rebook(b)"
@@ -266,6 +266,12 @@ function Rebook(row) {
      path: `/booking/makeUp/${row.activeId}/${row.extId}`
    })
  }
+  // 拍摄
+  if (row.orderType == 4) {
+    return router.push({
+      path: `/booking/photography/${row.activeId}/${row.extId}`
+    })
+  }
  if (row.orderType == 5) {
    router.push({