|
|
@@ -1,106 +1,126 @@
|
|
|
<template>
|
|
|
- <view class="detail">
|
|
|
+ <view class="container">
|
|
|
<!-- 轮播图 -->
|
|
|
<view class="carousel-map">
|
|
|
- <u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular bgColor="#ffffff" height="150" />
|
|
|
- <!-- <u-swiper :list="swiperList"/> -->
|
|
|
- <!-- <view class="carousel-item">
|
|
|
- <view class="mark">
|
|
|
- <view class="mark-item">{{ merchant.score }}分</view>
|
|
|
- <u-rate count="5" v-model="merchant.score" active-color="#fff" readonly inactive-color="#fff" :size="12" />
|
|
|
- </view>
|
|
|
- <view class="good-item">近期有6266个购买者给了给好评</view>
|
|
|
- </view> -->
|
|
|
+ <u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular bgColor="#000" height="430" />
|
|
|
+ <!-- <image class='top-img' src='@/static/icon_test.jpg'></image> -->
|
|
|
</view>
|
|
|
|
|
|
<!-- 商家信息 -->
|
|
|
- <view class="merchant-info">
|
|
|
- <view class="info-title">
|
|
|
- <view>{{ merchant.name }}</view>
|
|
|
- </view>
|
|
|
- <view class="info-tag">商家信息</view>
|
|
|
- <view class="info-item">
|
|
|
- <view class="info-text">
|
|
|
- <view>营业时间：{{ merchant.opening }}</view>
|
|
|
- <view>电话号码：{{ merchant.mobile }}</view>
|
|
|
- <view>营业状态：{{ merchant.businessStatus == "1" ? "休息中" : "营业中" }}</view>
|
|
|
- <view>{{ merchant.address }}</view>
|
|
|
- <view class="distance">{{ (merchant.distance / 1000).toFixed(2) }}km</view>
|
|
|
+ <view class="center-box">
|
|
|
+ <view class="merchant-info">
|
|
|
+ <view class="info-title">
|
|
|
+ <view>{{ merchant.name }}</view>
|
|
|
</view>
|
|
|
- <view class="info-icon">
|
|
|
- <view class="info-map" @click="handlerFavouriteShop">
|
|
|
- <u-icon class="user-operate-icon" :name="merchant.favorites ? 'heart-fill' : 'heart' " size="24" />
|
|
|
- <view style="font-size: 20rpx; margin-top: 5rpx">收藏</view>
|
|
|
+
|
|
|
+ <view class='info-item'>
|
|
|
+ <view class='item-left'>
|
|
|
+ <view class='left-item'>
|
|
|
+ <view class='left-name'>营业时间:</view>
|
|
|
+ <view class='left-value'>{{ merchant.opening }}</view>
|
|
|
+ </view>
|
|
|
+ <view class='left-item'>
|
|
|
+ <view class='left-name'>营业状态:</view>
|
|
|
+ <view class='left-value'>{{ merchant.businessStatus == "1" ? "休息中" : "营业中" }}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="info-map">
|
|
|
- <u-icon name="map" size="24"></u-icon>
|
|
|
- <view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
|
|
|
+ <view class='item-right'>
|
|
|
+ <view class="info-icon">
|
|
|
+ <view class="info-map" @click="handlerFavouriteShop">
|
|
|
+ <view class="icon-box">
|
|
|
+ <u-icon :name="merchant.favorites ? 'heart-fill' : 'heart' " size="22" />
|
|
|
+ </view>
|
|
|
+ <view style="font-size: 20rpx; margin-top: 5rpx">收藏</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-map" @click="handlerMakeCall">
|
|
|
+ <view class="icon-box">
|
|
|
+ <u-icon name="phone" size="22"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="info-map" @click="handlerMakeCall">
|
|
|
- <u-icon name="phone" size="24"></u-icon>
|
|
|
- <view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class='info-item' style="border: none;">
|
|
|
+ <view class='item-left'>
|
|
|
+ <view class='address'> {{ merchant.address }} </view>
|
|
|
+ <view class='distance'> 距离您{{ (merchant.distance / 1000).toFixed(2) }}km </view>
|
|
|
+ </view>
|
|
|
+ <view class='item-right'>
|
|
|
+ <view class="info-map" >
|
|
|
+ <view class="icon-box">
|
|
|
+ <u-icon name="map" size="22"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="evaluate-context">
|
|
|
- <view class="flex evaluate">
|
|
|
+
|
|
|
+ <u-gap height="8" bgColor="#F9F9F9"></u-gap>
|
|
|
+
|
|
|
+ <view class="evaluate-context">
|
|
|
<view class="flex">
|
|
|
- <text style="margin-right: 30rpx">优惠</text>
|
|
|
- <view class="text_title"> 您有{{ coupons.length }}张购物券可领取 </view>
|
|
|
- </view>
|
|
|
- <view class="flex" @click="openPopup">
|
|
|
- <text class="text_title" style="margin-right: 20rpx">去领取</text>
|
|
|
- <u-icon name="arrow-right" size="16" color="#999" />
|
|
|
+ <view class="flex">
|
|
|
+ <span class='evaluate-title'>优惠</span>
|
|
|
+ <view class="text_title"> 您有{{ coupons.length }}张购物券可领取 </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex" style='color: #ED4444 ;' @click="openPopup">
|
|
|
+ <span class="text_title" style="margin-right: 6rpx">去领取</span>
|
|
|
+ <u-icon name="arrow-right" size="14" color="#ED4444" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
- <!-- 商家分类 -->
|
|
|
- <view class="categoryList">
|
|
|
- <u-tabs :list="categoryList" @change='handlerChangeTab'></u-tabs>
|
|
|
- </view>
|
|
|
+ <u-gap height="8" bgColor="#F9F9F9"></u-gap>
|
|
|
|
|
|
- <view>
|
|
|
- <view class="list" :key="index" v-for="(item, index) of goods" @click="handlerSkipGoodsDetail(item, index)">
|
|
|
- <image class="img" :src="!Boolean(item.logo) ? '@/static/QR57a.jpg' : item.logo"></image>
|
|
|
- <view class="listDetail">
|
|
|
- <view class="item-text">
|
|
|
- <view class="item-text-left"> {{ item.name }} </view>
|
|
|
- <view class="item-text-right">
|
|
|
- <image class="img" src="@/static/icon/shopCar.png" @click.stop="handlerAddCart(item)"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-flex">
|
|
|
- <view class="star">
|
|
|
- <u-rate count="5" v-model="item.score" readonly :size="14" />
|
|
|
- <text class="line">|</text>
|
|
|
- <text class="points">{{ item.score }}分</text>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <!-- {{ item.score }}单 -->
|
|
|
+ <view class="categoryList">
|
|
|
+ <u-tabs :list="categoryList" @change='handlerChangeTab'></u-tabs>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-gap height="8" bgColor="#F9F9F9"></u-gap>
|
|
|
+
|
|
|
+ <view>
|
|
|
+ <view class="list" :key="index" v-for="(item, index) of goods" @click="handlerSkipGoodsDetail(item, index)">
|
|
|
+ <image class="img" :src="!Boolean(item.logo) ? '@/static/QR57a.jpg' : item.logo"></image>
|
|
|
+ <view class="listDetail">
|
|
|
+ <view class="item-text">
|
|
|
+ <view class="item-text-left"> {{ item.name }} </view>
|
|
|
+ <view class="item-text-right">
|
|
|
+ <image class="img" src="@/static/icon/shopCar.png" @click.stop="handlerAddCart(item)"></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="list-item">
|
|
|
- <view class="list-price">
|
|
|
- <view class="item-l">
|
|
|
- 优惠价 <span>￥{{ item.specialPrice.toFixed(2) }}</span>
|
|
|
+ <view class="item-flex">
|
|
|
+ <view class="star">
|
|
|
+ <u-rate count="5" v-model="item.score" readonly :size="14" />
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text class="points">{{ item.score }}分</text>
|
|
|
</view>
|
|
|
- <view class="item-r">
|
|
|
- 门市价 <span>￥{{ item.originalPrice.toFixed(2) }}</span>
|
|
|
+ <view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="btn-box">
|
|
|
- <button class="btn" @click.stop="handlerService(item, index)">预约</button>
|
|
|
- <!-- <button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button> -->
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="list-price">
|
|
|
+ <view class="item-l">
|
|
|
+ 优惠价 <span>￥{{ item.specialPrice.toFixed(2) }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-r">
|
|
|
+ 门市价 <span>￥{{ item.originalPrice.toFixed(2) }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <button class="btn" @click.stop="handlerService(item, index)">预约</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
|
|
|
+ <u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
|
|
|
+ </u-empty>
|
|
|
</view>
|
|
|
-
|
|
|
- <u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
|
|
|
- </u-empty>
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部购物车 -->
|
|
|
@@ -120,7 +140,8 @@
|
|
|
</view>
|
|
|
<view class="draw-item">
|
|
|
<view class="item-text">联系方式</view>
|
|
|
- <u--input placeholder="请输入联系方式" border="surround" type="number" maxlength='11' v-model="addParams.mobile"></u--input>
|
|
|
+ <u--input placeholder="请输入联系方式" border="surround" type="number" maxlength='11'
|
|
|
+ v-model="addParams.mobile"></u--input>
|
|
|
</view>
|
|
|
<button class="draw-btn" @click="handlerDrawConfirmBtn">确定</button>
|
|
|
</view>
|
|
|
@@ -150,8 +171,13 @@
|
|
|
cancelFavorite,
|
|
|
changeGoodsType
|
|
|
} from '@/api/client/business.js';
|
|
|
- import { getCurrentLocation, hotMerchant } from '@/api/client/home';
|
|
|
- import { accountTotIdGetConponList } from "@/api/client/mine.js"
|
|
|
+ import {
|
|
|
+ getCurrentLocation,
|
|
|
+ hotMerchant
|
|
|
+ } from '@/api/client/home';
|
|
|
+ import {
|
|
|
+ accountTotIdGetConponList
|
|
|
+ } from "@/api/client/mine.js"
|
|
|
// import GainCoupon from '@/pages/client/clientPackage/serviceDetail/GainCoupon.vue';
|
|
|
import cpuponComponents from "./components/couponComponent.vue"
|
|
|
import settleBottomComponent from "./components/settleBottomComponent.vue"
|
|
|
@@ -195,7 +221,7 @@
|
|
|
};
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
- console.log("@@@@option",option)
|
|
|
+ console.log("@@@@option", option)
|
|
|
this.ids = option.id
|
|
|
this.queryParams.id = option.id;
|
|
|
},
|
|
|
@@ -431,110 +457,110 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .detail {
|
|
|
- min-height: calc(100vh - 200rpx);
|
|
|
- background-color: #efefef;
|
|
|
- padding-bottom: 200rpx;
|
|
|
- }
|
|
|
-
|
|
|
- // 轮播图
|
|
|
- .carousel-map {
|
|
|
- background-color: #fff;
|
|
|
- padding: 0 20rpx;
|
|
|
+ .container {
|
|
|
+ position: relative;
|
|
|
|
|
|
- .carousel-item {
|
|
|
- height: 90rpx;
|
|
|
- display: flex;
|
|
|
- background-color: #fff7e0;
|
|
|
- border-radius: 0 0 10rpx 10rpx;
|
|
|
-
|
|
|
- .mark {
|
|
|
- background-color: #ff4b04;
|
|
|
- color: #fff;
|
|
|
- padding: 20rpx;
|
|
|
- border-radius: 0 0 0 10rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .mark-item {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
+ // 轮播图
|
|
|
+ .carousel-map {
|
|
|
+ width: 100%;
|
|
|
+ height: 430rpx;
|
|
|
|
|
|
- .good-item {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #a39c85;
|
|
|
- line-height: 90rpx;
|
|
|
- margin-left: 40rpx;
|
|
|
- }
|
|
|
+ // .top-img {
|
|
|
+ // width: 100%;
|
|
|
+ // }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- // 商家信息
|
|
|
- .merchant-info {
|
|
|
- padding: 20rpx;
|
|
|
- background-color: #fff;
|
|
|
|
|
|
- .info-title {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- margin: 20rpx 0;
|
|
|
+ .center-box {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 32rpx 32rpx 0 0;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-bottom: 200rpx;
|
|
|
+ // 商家信息
|
|
|
+ .merchant-info {
|
|
|
+ padding: 32rpx 32rpx 0;
|
|
|
+
|
|
|
+ .info-title {
|
|
|
+ color: #0C1223;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 2rpx solid #D8D8D8;
|
|
|
+ padding-bottom: 32rpx;
|
|
|
+ }
|
|
|
|
|
|
- .info-mark {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: normal;
|
|
|
- color: #999;
|
|
|
- margin: 20rpx 0 20rpx 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border-bottom: 2rpx solid #D8D8D8;
|
|
|
+ align-items: center;
|
|
|
+ color: #0C1223;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .item-left {
|
|
|
+ .left-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .left-name {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-value {}
|
|
|
+ }
|
|
|
|
|
|
- .info-tag {
|
|
|
- width: 140rpx;
|
|
|
- padding: 10rpx;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid #5992bb;
|
|
|
- color: #5992bb;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
+ .left-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
|
|
|
- .info-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .address {
|
|
|
+ color: #0C1223;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
|
|
|
- .info-text {
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 58rpx;
|
|
|
- color: #212020;
|
|
|
- margin-left: 20rpx;
|
|
|
+ .distance {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .distance {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #555252;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- }
|
|
|
+ .item-right {
|
|
|
+ .info-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- .info-icon {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ .info-map {
|
|
|
+ padding: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .info-map {
|
|
|
- padding: 10rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- margin-top: 120rpx;
|
|
|
+ .icon-box {
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ border-radius: 50%;
|
|
|
+ padding: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
.evaluate-context {
|
|
|
background-color: #fff;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- .evaluate {
|
|
|
- padding: 20rpx;
|
|
|
- border-bottom: 1rpx solid #f4f4f4;
|
|
|
+ padding:32rpx;
|
|
|
+ .evaluate-title{
|
|
|
+ color:#ED4444;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right:16rpx;
|
|
|
+ }
|
|
|
+ .text_title {
|
|
|
+ font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -544,11 +570,6 @@
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
- .text_title {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-
|
|
|
.list {
|
|
|
height: 220rpx;
|
|
|
background-color: #fff;
|
|
|
@@ -700,6 +721,7 @@
|
|
|
|
|
|
.categoryList {
|
|
|
background-color: #fff;
|
|
|
+ padding-bottom:10rpx;
|
|
|
}
|
|
|
|
|
|
.bottom-box {
|
