You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
7.8 KiB
Vue
275 lines
7.8 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 预约服务 -->
|
|
<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
|
|
:autoplay="true" interval="100" duration="0" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
|
|
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
|
<view class="swiper-item">
|
|
<!-- <navigator :url="'resevation-project/resevation-project?item=' + JSON.stringify(item)"> -->
|
|
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
|
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
|
|
<!-- </navigator> -->
|
|
</view>
|
|
|
|
</swiper-item>
|
|
</swiper>
|
|
<scroll-view scroll-x class="bg-white nav text-center" style="margin-top: 20upx;">
|
|
<view class="flex text-center">
|
|
<view class="cu-item light flex-sub" :class="[TabCur==1?'bg-red cur text-white':'']" @tap="tabSelect" :data-id="1">
|
|
卡内
|
|
</view>
|
|
<view class="cu-item light flex-sub" :class="[TabCur==2?'bg-red cur text-white':'']" @tap="tabSelect" :data-id="2">
|
|
新品
|
|
</view>
|
|
<view class="cu-item light flex-sub" :class="[TabCur==3?'bg-red cur text-white':'']" @tap="tabSelect" :data-id="3">
|
|
优惠
|
|
</view>
|
|
<view class="cu-item light flex-sub" :class="[TabCur==4?'bg-red cur text-white':'']" @tap="tabSelect" :data-id="4">
|
|
全部
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="bg-white" v-show="TabCur==1">
|
|
<view class="experience-title bg-gray">卡内项目</view>
|
|
<view class="experience" v-for="(item,index) in experiencelist" :key="index" @click="setTitle" data-projectId="item.projectId"
|
|
data-projectNum="item.projectNum" data-title="item.projectName">
|
|
<view class="experience-img">
|
|
<image src="../../../../static/image/95327411_1.jpg"></image>
|
|
</view>
|
|
<view class="experience-content">
|
|
<view class="experience-name">{{item.projectname}}</view>
|
|
<view class="experience-explain">介绍：{{item.explain}}</view>
|
|
<view class="experience-price">体验价：
|
|
<text>￥{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="experience-icon">
|
|
<text class="cuIcon-right"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bg-white" v-show="TabCur==2">
|
|
<view class="experience-title bg-gray">新品推荐</view>
|
|
<view class="experience" v-for="(item,index) in experiencelist" :key="index" @click="setTitle" data-projectId="item.projectId"
|
|
data-projectNum="item.projectNum" data-title="item.projectName">
|
|
<view class="experience-img">
|
|
<image src="../../../../static/image/95327411_1.jpg"></image>
|
|
</view>
|
|
<navigator url="./resevation-project/resevation-project">
|
|
<view class="experience-content">
|
|
<view class="experience-name">{{item.projectname}}</view>
|
|
<view class="experience-explain">介绍：{{item.explain}}</view>
|
|
<view class="experience-price">体验价：
|
|
<text>￥{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
<view class="experience-icon">
|
|
<text class="cuIcon-right"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bg-white" v-show="TabCur==3">
|
|
<view class="experience-title bg-gray">限时优惠</view>
|
|
<view class="experience" v-for="(item,index) in experiencelist" :key="index" @click="setTitle" data-projectId="item.projectId"
|
|
data-projectNum="item.projectNum" data-title="item.projectName">
|
|
<view class="experience-img">
|
|
<image src="../../../../static/image/95327411_1.jpg"></image>
|
|
</view>
|
|
<view class="experience-content">
|
|
<view class="experience-name">{{item.projectname}}</view>
|
|
<view class="experience-explain">介绍：{{item.explain}}</view>
|
|
<view class="experience-price">体验价：
|
|
<text>￥{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="experience-icon">
|
|
<text class="cuIcon-right"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bg-white" v-show="TabCur==4">
|
|
<view class="experience-title bg-gray">门店项目</view>
|
|
<view class="experience" v-for="(item,index) in experiencelist" :key="index" @click="setTitle" data-projectId="item.projectId"
|
|
data-projectNum="item.projectNum" data-title="item.projectName">
|
|
<view class="experience-img">
|
|
<image src="../../../../static/image/95327411_1.jpg"></image>
|
|
</view>
|
|
<view class="experience-content">
|
|
<view class="experience-name">{{item.projectname}}</view>
|
|
<view class="experience-explain">介绍：{{item.explain}}</view>
|
|
<view class="experience-price">体验价：
|
|
<text>￥{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="experience-icon">
|
|
<text class="cuIcon-right"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
reservationForm: {},
|
|
dotStyle: false,
|
|
cardCur: 1,
|
|
TabCur: 1,
|
|
// 轮播图
|
|
swiperList: [{
|
|
id: 1,
|
|
type: 'image',
|
|
url: "../../../../static/image/95327411_1.jpg"
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 'image',
|
|
url: "../../../../static/image/95327411_2.jpg"
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 'image',
|
|
url: "../../../../static/image/95327411_3.jpg"
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 'image',
|
|
url: "../../../../static/image/95327411_4.jpg"
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 'image',
|
|
url: "../../../../static/image/95327411_5.jpg"
|
|
},
|
|
|
|
{
|
|
id: 6,
|
|
type: 'image',
|
|
url: "../../../../static/image/95327411_6.jpg"
|
|
},
|
|
{
|
|
id: 7,
|
|
type: 'image',
|
|
url: "../../../../static/image/95327411_7.jpg"
|
|
},
|
|
{
|
|
id: 8,
|
|
type: 'image',
|
|
url: "../../../../static/image/95327411_8.jpg"
|
|
},
|
|
{
|
|
id: 9,
|
|
type: 'image',
|
|
url: "../../../../static/image/95327411_9.jpg"
|
|
}
|
|
],
|
|
experiencelist: [{
|
|
projectname: "精品美容A套餐",
|
|
explain: "精品美容,你的明智之选,限时推出的新品,全新的体验,全新的美容方式",
|
|
price: 188
|
|
}, {
|
|
projectname: "精品美容B套餐",
|
|
explain: "精品美容,你的明智之选,限时推出的新品,全新的体验,全新的美容方式",
|
|
price: 288
|
|
}, {
|
|
projectname: "精品美容C套餐",
|
|
explain: "精品美容,你的明智之选,限时推出的新品,全新的体验,全新的美容方式",
|
|
price: 588
|
|
}]
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
cardSwiper(e) {
|
|
this.cardCur = e.detail.current
|
|
},
|
|
tabSelect(e) {
|
|
this.TabCur = e.currentTarget.dataset.id * 1;
|
|
},
|
|
setTitle() {
|
|
|
|
}
|
|
},
|
|
onLoad: function(option) {
|
|
if (option.item != undefined) {
|
|
const item = JSON.parse(option.item);
|
|
this.reservationForm = item
|
|
}
|
|
},
|
|
onShow: function() {
|
|
console.log(this.reservationForm);
|
|
// this.swiperList.forEach()
|
|
this.swiperList.reverse()
|
|
this.swiperList = [...this.swiperList, ...this.swiperList.reverse()]
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.experience-title {
|
|
height: 100rpx;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
font-size: 34rpx;
|
|
/* font-weight: 550; */
|
|
}
|
|
|
|
/* 推荐疗程 */
|
|
.experience {
|
|
width: 750rpx;
|
|
height: 150rpx;
|
|
display: flex;
|
|
/* align-items: center; */
|
|
border-bottom: 1px solid #eee;
|
|
padding: 20rpx 15rpx;
|
|
}
|
|
|
|
.experience-img {
|
|
width: 135rpx;
|
|
}
|
|
|
|
.experience-img image {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
}
|
|
|
|
.experience-content {
|
|
width: 575rpx;
|
|
height: 110rpx;
|
|
}
|
|
|
|
.experience-name {
|
|
height: 40rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.experience-explain {
|
|
height: 36rpx;
|
|
font-size: 26rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: #505050;
|
|
}
|
|
|
|
.experience-price {
|
|
height: 24rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.experience-price text {
|
|
color: red;
|
|
font-weight: 550;
|
|
}
|
|
|
|
.experience-icon {
|
|
width: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #ccc;
|
|
}
|
|
</style>
|