Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
136529c9 by zhangmeng
Options

化妆

1 parent 864e02a7
Expand all
Inline Side-by-side
Showing 3 changed files with 101 additions and 73 deletions
src/viewsPc/booking/makeUpDetail.vue
......@@ -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">
<OfficeBuilding/>
<el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
<OfficeBuilding />
</el-icon>
{{ language==0?'成立':'Established for'}} <span class="sign">{{form.ageLimit}}</span>{{language==0?'年':'years'}} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<UserFilled/>
{{ language == 0 ? '成立' : 'Established for' }} <span
class="sign"
>{{ 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;
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<PhoneFilled/>
<span class="sign"> {{ form.dresserLimit }}</span>{{ language == 0 ? '名化妆师' : 'makeup artists' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
<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">
<LocationFilled/>
&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
<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 v-html="form.introduction"></div>
<div class="title forPc" style="min-width: 130px">{{ language == 0 ? '工作室简介:' : 'Studio profile:' }}
</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-col :span="8" class="oddmb" v-for="(p,index) in form?.photosList?.slice(1,7)">
<div class="imgbox hotelImg"><el-image :src="p" fit="cover"/></div>
<el-row :gutter="20" class="h100">
<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>
</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 >
import {useRouter} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useRoute} from "vue-router";
import * as booking from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import MakeUpCalendar from "@/viewsPc/booking/component/makeUpCalendar.vue";
import {fillImgUrl} from "/@/utils/ruoyi";
<script setup>
import { useRouter } from 'vue-router'
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import * as booking from '@/apiPc/booking'
import { useStorage } from '@vueuse/core/index'
import useUserStore from '@/store/modules/user'
import MakeUpCalendar from '@/viewsPc/booking/component/makeUpCalendar.vue'
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.photos?.split(',')?.forEach(v=>{
form.value.photosList = []
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;
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;
......
src/viewsPc/center/myReservation.vue
......@@ -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) {
router.push({
name: 'hotelDetail',
params: {
cptId: row.activeId,
hotelId: row.hotelId
},
query: {
id: row.extId
}
// 化妆
if (row.orderType == 3) {
return router.push({
path: `/booking/makeUp/${row.activeId}/${row.extId}`
})
}
if (row.orderType == 5) {
router.push({
name: 'ticket',
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!