化妆

zhangmeng
Showing 3 changed files with 101 additions and 73 deletions
src/viewsPc/booking/component/makeUpCalendar.vue
src/viewsPc/booking/makeUpDetail.vue
src/viewsPc/center/myReservation.vue
--- a/src/viewsPc/booking/component/makeUpCalendar.vue
View file @136529c
+++ b/src/viewsPc/booking/component/makeUpCalendar.vue
View file @136529c
--- a/src/viewsPc/booking/makeUpDetail.vue
View file @136529c
+++ b/src/viewsPc/booking/makeUpDetail.vue
View file @136529c
@@ -5,48 +5,53 @@
        <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?'名化妆师':'makeup artists' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
+          <span class="sign"> {{ form.dresserLimit }}</span>{{ language == 0 ? '名化妆师' : 'makeup artists' }}&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;
+          &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 forPc">{{language==0?'工作室简介:':'Studio profile:'}}</div>
+          <div class="title forPc" style="min-width: 130px">{{ language == 0 ? '工作室简介:' : 'Studio profile:' }}
-          <div v-html="form.introduction"></div>
+          </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>
@@ -54,22 +59,23 @@
      </div>
      <br>
      <el-card :body-style="{'padding':'20px 20px'}">
-        <MakeUpCalendar/>
+        <MakeUpCalendar />
      </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 MakeUpCalendar  from "@/viewsPc/booking/component/makeUpCalendar.vue";
+import MakeUpCalendar from '@/viewsPc/booking/component/makeUpCalendar.vue'
-import {fillImgUrl} from "/@/utils/ruoyi";
+import { fillImgUrl } from '/@/utils/ruoyi'
 const user = useUserStore().user
 const language = useStorage('language', 0)
 const router = useRouter()
@@ -77,7 +83,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)
 onMounted(() => {
@@ -89,8 +95,8 @@ function getData() {
  booking.makeUpDetail(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))
    })
    console.log(res)
@@ -101,23 +107,23 @@ function getData() {
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .room {
  background: #FAFBFD;
  margin: 20px 0 0;
  padding: 20px;
  border: 1px solid #E5E5E5;
  .name {
    font-size: 20px;
    margin: 0 0 10px;
  }
  .roomImg {
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      object-fit: cover;
@@ -125,17 +131,17 @@ function getData() {
      height: 100%;
    }
  }
  .price {
    color: #FF8124;
    font-size: 24px;
    span {
      font-size: 36px;
      font-family: "DIN Alternate"
    }
  }
  .bg-lineg {
    margin: auto;
    border-radius: 10px;
@@ -144,7 +150,7 @@ function getData() {
    font-size: 24px;
    width: 66px;
    cursor: pointer;
    div {
      background: #fff;
      font-size: 13px;
@@ -167,30 +173,30 @@ function getData() {
  h3 {
    margin: 0 0 20px;
  }
  img.w100 {
    object-fit: cover;
    aspect-ratio: 16/9
  }
  .addr {
    font-size: 16px;
    color: #929AA0;
    font-weight: 400;
  }
  .price {
    margin: 0 0 25px;
    color: #FF8124;
    font-size: 18px;
    span {
      font-size: 24px;
      margin: 0 8px;
      font-family: 'DINAlternate-Bold';
      font-weight: 600;
    }
    i {
      font-style: normal;
      color: #929AA0;
@@ -201,12 +207,12 @@ function getData() {
 .tagbox {
  margin: 15px 0;
  a {
    color: #AFB5B9;
    font-size: 12px;
  }
  span {
    border-radius: 13px;
    font-size: 12px;
@@ -214,22 +220,22 @@ function getData() {
    margin-right: 10px;
    font-weight: 400;
  }
  span:nth-child(4n) {
    background: rgba(50, 177, 108, 0.2);
    color: rgba(50, 177, 108, 1);
  }
  span:nth-child(4n+1) {
    background: rgba(243, 152, 0, 0.2);
    color: rgba(243, 152, 0, 1);
  }
  span:nth-child(4n+2) {
    background: rgba(0, 160, 233, 0.2);
    color: rgba(0, 160, 233, 1);
  }
  span:nth-child(4n+3) {
    background: rgba(247, 64, 166, 0.2);
    color: rgba(247, 64, 166, 1);
@@ -249,14 +255,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;
@@ -267,12 +276,24 @@ function getData() {
  border-radius: 10px;
 }
-.hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9;
+.hotelImg {
-  img{object-fit: cover;object-position: center;width: 100%;height: 100%;
+  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 @136529c
+++ b/src/viewsPc/center/myReservation.vue
View file @136529c
@@ -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.viewStatus!=0"
+                  v-if="(b.orderType == 0||b.orderType == 5||b.orderType==1||b.orderType==2||b.orderType==3)&&b.viewStatus!=0"
                  class="mb10" plain round
                  size="small" type="success"
                  @click="Rebook(b)"
@@ -236,6 +236,19 @@ function goDetail(b) {
 function Rebook(row) {
  console.log(row)
+  if (row.orderType == 0) {
+    router.push({
+      name: 'hotelDetail',
+      params: {
+        cptId: row.activeId,
+        hotelId: row.hotelId
+      },
+      query: {
+        id: row.extId
+      }
+    })
+  }
  if (row.orderType == 1) {
    return router.push({
      path: `/booking/car/${row.activeId}`
@@ -247,19 +260,13 @@ function Rebook(row) {
      path: `/booking/dinner/${row.activeId}`
    })
  }
+  // 化妆
-  if (row.orderType == 0) {
+  if (row.orderType == 3) {
-    router.push({
+    return router.push({
-      name: 'hotelDetail',
+      path: `/booking/makeUp/${row.activeId}/${row.extId}`
-      params: {
-        cptId: row.activeId,
-        hotelId: row.hotelId
-      },
-      query: {
-        id: row.extId
-      }
    })
  }
  if (row.orderType == 5) {
    router.push({
      name: 'ticket',