600 lines
14 KiB
Vue
600 lines
14 KiB
Vue
<template>
|
||
<view class="index">
|
||
<!-- <navbar :Background='Background' :navtitle='navtitle' :navMethodcan='1' :navboxshow="navboxshow"
|
||
@fatherMethod='fatherMethod'>
|
||
</navbar> -->
|
||
<image class="index_top_imge" :src="list.store.background" mode="aspectFill"></image>
|
||
<view class="index_box">
|
||
<view class="oneindex_box">
|
||
<view class="oneindex_box_image">
|
||
<image :src="list.store.avatar" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="oneindex_box_text flex-start">
|
||
<view class="oneindex_box_text_one">
|
||
{{list.store.title}}
|
||
</view>
|
||
<view class="oneindex_box_text_tow flex-start">
|
||
<u-rate :count="count" v-model="list.store.score" readonly active-color="#f1cb66"
|
||
inactive-color="#F1CB66"></u-rate>
|
||
<text class="oneindex_box_text_towtext">{{list.store.score}}.0</text>
|
||
</view>
|
||
</view>
|
||
<view class="towindex_box_text flex-between">
|
||
<view class="towindex_box_text_one">
|
||
营业时间：{{list.store.b_hours}}
|
||
</view>
|
||
<view class="towindex_box_text_tow flex-start" @click="mobilemobile(list.store.mobile)">
|
||
<u-icon name="phone-fill" color="#2ca248" size="20"></u-icon>
|
||
<text>联系商家</text>
|
||
</view>
|
||
</view>
|
||
<view class="towindex_box_dw flex-start" @click="openmap">
|
||
<image src="@/static/positioning.png" mode="aspectFill"></image>
|
||
<text style="margin-left: 12rpx;">{{list.store.address}}</text>
|
||
</view>
|
||
<view class="towindex_box_bouttn flex-start">
|
||
<text v-for="(item,index) in list.store.label" :key="index">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="towindextow" @click="toworder()" v-if="list.is_balance_vip == 0">
|
||
<image :src="list.vip_img" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="thereindexone flex-between">
|
||
<view class="thereindexone_item flex-colum" v-for="(item,indexs) in list.store_type" :key="indexs"
|
||
@click="clickthereindexone(item.id)">
|
||
<image :src="item.img" mode="aspectFill"></image>
|
||
<text>{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="fourindexone">
|
||
<view class="fourindexone_one flex-center">
|
||
<text class="fourindexone_one_o"></text>
|
||
<text class="fourindexone_one-text">预约服务</text>
|
||
<text class="fourindexone_one_T"></text>
|
||
</view>
|
||
<view class="fourindexone_box flex-colum" v-for="(item,index) in list.store_service" :key="index"
|
||
@click="eeInfo(item)">
|
||
<view class="fourindexone_item flex-start">
|
||
<image class="fourindexone_itemimage" :src="item.img" mode="aspectFill"></image>
|
||
<view class="fourindexone_itemview flex-colum-start">
|
||
<view class="fourindexone_itemview_one">
|
||
{{item.title}}
|
||
</view>
|
||
<view class="fourindexone_itemview_tow">
|
||
{{item.describe}}
|
||
</view>
|
||
<view class="fourindexone_itemview_there flex-start">
|
||
<view class="fourindexone_itemview_there_text">
|
||
<text>¥</text>{{item.price}}
|
||
</view>
|
||
<view class="fourindexone_itemview_there_text_x">
|
||
¥{{item.y_price}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fourindexone_item_there">
|
||
立即预约
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fiveindexone">
|
||
<view class="fiveindexonehtml" v-html="list.describe">
|
||
</view>
|
||
<view class="sixindex" @click="clickthereindexone(0)">
|
||
立马预约服务
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<bottombbar :valuebbar='1'></bottombbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import navbar from '@/components/navbar.vue'
|
||
import bottombbar from '@/components/bottombbar.vue'
|
||
export default {
|
||
components: {
|
||
navbar,
|
||
bottombbar
|
||
},
|
||
data() {
|
||
return {
|
||
navtitle: '', //名称
|
||
navboxshow: '3', //显示
|
||
Background: '#fff',
|
||
count: 5,
|
||
value: 2,
|
||
list: {}
|
||
}
|
||
},
|
||
async onLoad(e) {
|
||
if (e) {
|
||
uni.cache.set('store_id', e.scene) // 判断显示哪家的作品
|
||
}
|
||
await this.$onLaunched
|
||
// uni.reLaunch({
|
||
// url: '/pages/index/components/hairdressing'
|
||
// })
|
||
this.indexappclassindex()
|
||
},
|
||
methods: {
|
||
async userlogin() { //登录
|
||
let res = await this.api.userlogin({
|
||
code: uni.cache.get('weixincode'),
|
||
// #ifdef H5
|
||
code: '0c3KOzFa1lkuMF0enAHa1Eu2xG1KOzFJ'
|
||
// #endif
|
||
})
|
||
try {
|
||
if (res) {
|
||
uni.cache.set('loginuser', res);
|
||
this.positionindex()
|
||
} else {
|
||
uni.cache.set('loginuser', 0);
|
||
}
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
fatherMethod() {
|
||
uni.cache.set('details_id', '')
|
||
uni.cache.set('store_id', '')
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
});
|
||
},
|
||
async toworder() { //会员卡
|
||
let res = await this.api.userreceivebalancecar({
|
||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||
})
|
||
uni.showToast({
|
||
title: '领取成功',
|
||
icon: 'none'
|
||
});
|
||
setTimeout(() => {
|
||
uni.pro.navigateTo('my/member/index')
|
||
}, 1500);
|
||
},
|
||
openmap() { //打开地图
|
||
uni.openLocation({
|
||
latitude: Number(this.list.store.lat),
|
||
longitude: Number(this.list.store.lng),
|
||
name: this.list.store.title,
|
||
address: this.list.store.address,
|
||
success: (res) => {
|
||
console.log('success');
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
})
|
||
},
|
||
eeInfo(e) { //查看订单详情
|
||
uni.pro.navigateTo('order/orderInfo', {
|
||
id: e.id,
|
||
})
|
||
},
|
||
clickthereindexone(e) {
|
||
uni.pro.navigateTo('order/index', {
|
||
id: e
|
||
})
|
||
},
|
||
mobilemobile(e) { //打电话
|
||
uni.makePhoneCall({
|
||
phoneNumber: e //仅为示例
|
||
});
|
||
},
|
||
async indexappclassindex() { //店铺详情
|
||
let res = await this.api.indexappclassindex({
|
||
store_id: uni.cache.get('store_id')
|
||
})
|
||
try {
|
||
if (res) {
|
||
console.log(res)
|
||
this.list = res
|
||
uni.cache.set('store_id', res.store.id) // 返回的id
|
||
if (uni.cache.get('store_id')) {
|
||
this.$store.dispatch("actionsclassification");
|
||
}
|
||
uni.setNavigationBarTitle({
|
||
title: res.store.title
|
||
});
|
||
this.list.describe = res.describe.replace(/\<img/g,
|
||
'<img style="max-width:100%;height:auto" ');
|
||
}
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
|
||
.index {
|
||
.index_top_imge {
|
||
width: 100%;
|
||
height: 448rpx;
|
||
z-index: 98;
|
||
}
|
||
|
||
.index_box {
|
||
position: relative;
|
||
z-index: 99;
|
||
background: #FFFFFF;
|
||
border-radius: 26rpx 26rpx 0px 0px;
|
||
|
||
.oneindex_box {
|
||
position: relative;
|
||
width: 100%;
|
||
padding: 44rpx 28rpx;
|
||
|
||
.oneindex_box_image {
|
||
position: absolute;
|
||
left: 28rpx;
|
||
top: -28rpx;
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
|
||
image {
|
||
border-radius: 20rpx;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.oneindex_box_text {
|
||
margin-left: 140rpx;
|
||
|
||
.oneindex_box_text_one {
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.oneindex_box_text_tow {
|
||
.oneindex_box_text_towtext {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #F1CB66;
|
||
}
|
||
}
|
||
}
|
||
|
||
.towindex_box_text {
|
||
margin-top: 32rpx;
|
||
|
||
.towindex_box_text_one {
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.towindex_box_text_tow {
|
||
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.towindex_box_dw {
|
||
image {
|
||
width: 25.37rpx;
|
||
height: 33.02rpx;
|
||
}
|
||
|
||
margin-top: 24rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Regular,
|
||
Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.towindex_box_bouttn {
|
||
margin-top: 32rpx;
|
||
|
||
text:nth-child(1) {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
text {
|
||
margin-left: 16rpx;
|
||
padding: 8rpx 14rpx;
|
||
background: #F7F7F7;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.towindextow {
|
||
padding: 32rpx;
|
||
border-top: 16rpx solid #F7F7F7;
|
||
border-bottom: 16rpx solid #F7F7F7;
|
||
background: #FFFFFF;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
}
|
||
}
|
||
|
||
.thereindexone {
|
||
padding: 32rpx 28rpx;
|
||
|
||
.thereindexone_item {
|
||
image {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
}
|
||
|
||
text {
|
||
margin-top: 16rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fourindexone {
|
||
padding: 32rpx 28rpx;
|
||
|
||
.fourindexone_one {
|
||
font-size: 32rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #1A1A1A;
|
||
|
||
.fourindexone_one_o {
|
||
display: inline-block;
|
||
width: 34rpx;
|
||
height: 4rpx;
|
||
background: linear-gradient(94deg, rgba(255, 255, 255, 0) 0%, #373746 100%);
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.fourindexone_one-text {
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.fourindexone_one_T {
|
||
display: inline-block;
|
||
width: 34rpx;
|
||
height: 4rpx;
|
||
background: linear-gradient(266deg, rgba(255, 255, 255, 0) 0%, #373746 100%);
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
|
||
.fourindexone_box {
|
||
.fourindexone_item {
|
||
position: relative;
|
||
width: 100%;
|
||
padding: 32rpx 0;
|
||
border-bottom: 1rpx dashed #F7F7F7;
|
||
|
||
.fourindexone_itemimage {
|
||
width: 164rpx;
|
||
height: 164rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.fourindexone_item_there {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 32rpx;
|
||
padding: 16rpx 22rpx;
|
||
font-size: 24rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #FFFFFF;
|
||
background: linear-gradient(180deg, #A3A7D5 0%, #414154 100%);
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.fourindexone_itemview {
|
||
|
||
height: 164rpx;
|
||
justify-content: space-evenly;
|
||
margin-left: 24rpx;
|
||
|
||
.fourindexone_itemview_one {
|
||
width: 300rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.fourindexone_itemview_tow {
|
||
width: 300rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.fourindexone_itemview_there {
|
||
.fourindexone_itemview_there_text {
|
||
font-size: 34rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #FC5F69;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.fourindexone_itemview_there_text_x {
|
||
margin-left: 12rpx;
|
||
text-decoration: line-through;
|
||
font-size: 20rpx;
|
||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fiveindexone {
|
||
// padding: 32rpx 28rpx;
|
||
width: 100%;
|
||
|
||
// background: linear-gradient(309deg, #FFFFFF 0%, #1A1A1A 100%);
|
||
// border-radius: 32rpx 32rpx 0px 0px;
|
||
.fiveindexonehtml {
|
||
width: 100%;
|
||
|
||
/deep/ img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.fiveindexone_one {
|
||
.fiveindexone_oneimage {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.fiveindexone_one_text {
|
||
margin-left: 12rpx;
|
||
font-size: 32rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.fiveindextow {
|
||
padding: 28rpx;
|
||
margin-top: 32rpx;
|
||
width: 100%;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 18rpx;
|
||
|
||
.fiveindextowitem:nth-child(1) {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.fiveindextowitem {
|
||
margin-top: 32rpx;
|
||
width: 100%;
|
||
|
||
view {
|
||
width: 33%;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fiveindexthere {
|
||
overflow-x: scroll;
|
||
flex-wrap: nowrap;
|
||
|
||
.fiveindexthere_item:nth-child(1) {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
.fiveindexthere_item {
|
||
margin-left: 54rpx;
|
||
|
||
.fiveindexthere_itemimage {
|
||
width: 120rpx;
|
||
height: 152rpx;
|
||
}
|
||
|
||
.fiveindexthere_item_one {
|
||
margin-top: 8rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.fiveindexthere_item_tow {
|
||
margin-top: 8rpx;
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: rgba(255, 255, 255, 0.57);
|
||
}
|
||
}
|
||
}
|
||
|
||
.fiveindexfour {
|
||
.fiveindexfourimage {
|
||
margin-top: 70rpx;
|
||
position: relative;
|
||
width: 370rpx;
|
||
height: 396rpx;
|
||
background: linear-gradient(316deg, #636363 0%, #ACACAC 100%);
|
||
border-radius: 16rpx;
|
||
|
||
image {
|
||
position: absolute;
|
||
top: -30rpx;
|
||
left: -18rpx;
|
||
border-radius: 16rpx;
|
||
width: 372rpx;
|
||
height: 412rpx;
|
||
}
|
||
}
|
||
|
||
.fiveindexfourtext {
|
||
flex: 1;
|
||
margin-left: 70rpx;
|
||
|
||
text {
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sixindex {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
padding: 24rpx 0;
|
||
text-align: center;
|
||
background: linear-gradient(360deg, #FBDDBB 0%, #FEE3C5 100%);
|
||
border-radius: 48rpx;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #422A07;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |