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> |