|
@@ -3,7 +3,7 @@
|
|
|
<!-- 轮播图 -->
|
|
|
<view class="carousel-map">
|
|
|
<u-swiper
|
|
|
- :list="list3"
|
|
|
+ :list="swiperList"
|
|
|
previousMargin="0"
|
|
|
nextMargin="100"
|
|
|
circular
|
|
@@ -41,62 +41,71 @@
|
|
|
</view>
|
|
|
<view class="info-icon">
|
|
|
<view class="info-map">
|
|
|
- <u-icon name="map" size="25"></u-icon>
|
|
|
- <view>导航</view>
|
|
|
+ <u-icon name="map" size="20"></u-icon>
|
|
|
+ <view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
|
|
|
</view>
|
|
|
<view class="info-map" @click="handlerMakeCall">
|
|
|
- <u-icon name="phone" size="25"></u-icon>
|
|
|
- <view>电话</view>
|
|
|
+ <u-icon name="phone" size="20"></u-icon>
|
|
|
+ <view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view
|
|
|
- class="list"
|
|
|
- :key="index"
|
|
|
- v-for="(item, index) of goods"
|
|
|
- @click="handlerSkipGoodsDetail(item, index)"
|
|
|
- >
|
|
|
- <!-- <image class="img" :src="
|
|
|
+ <!-- 商家分类 -->
|
|
|
+ <view class="categoryList">
|
|
|
+ <u-tabs :list="categoryList"></u-tabs>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view>
|
|
|
+ <view
|
|
|
+ class="list"
|
|
|
+ :key="index"
|
|
|
+ v-for="(item, index) of goods"
|
|
|
+ @click="handlerSkipGoodsDetail(item, index)"
|
|
|
+ >
|
|
|
+ <!-- <image class="img" :src="
|
|
|
error || !loaded
|
|
|
? 'https://cdn.uviewui.com/uview/album/10.jpg'
|
|
|
: goods.logo
|
|
|
" mode="scaleToFill" @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"></image> -->
|
|
|
- <image class="img" src="../../static/logo.png"></image>
|
|
|
- <view>
|
|
|
- <view class="item-text">{{ item.name }}</view>
|
|
|
- <view class="item-flex">
|
|
|
- <view class="star">
|
|
|
- <u-rate :count="item.score" :size="14" />
|
|
|
- <text class="line">|</text>
|
|
|
- <text class="points">{{ item.score }}分</text>
|
|
|
- </view>
|
|
|
- <view>{{ item.score }}单</view>
|
|
|
- </view>
|
|
|
- <view class="list-item">
|
|
|
- <view class="list-price">
|
|
|
- <view class="item-l"
|
|
|
- >券后价 <span>¥{{ item.originalPrice.toFixed(2) }}</span>
|
|
|
+ <image class="img" src="@/static/logo.png"></image>
|
|
|
+ <view class="listDetail">
|
|
|
+ <view class="item-text">{{ item.name }}</view>
|
|
|
+ <view class="item-flex">
|
|
|
+ <view class="star">
|
|
|
+ <u-rate :count="item.score" :size="14" />
|
|
|
+ <text class="line">|</text>
|
|
|
+ <text class="points">{{ item.score }}分</text>
|
|
|
</view>
|
|
|
- <view class="item-r"
|
|
|
- >门市价 <span>¥{{ item.specialPrice.toFixed(2) }}</span></view
|
|
|
- >
|
|
|
+ <view>{{ item.score }}单</view>
|
|
|
</view>
|
|
|
- <view class="btn-box">
|
|
|
- <button class="btn btn1" @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.originalPrice.toFixed(2) }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-r">
|
|
|
+ 门市价 <span>¥{{ item.specialPrice.toFixed(2) }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <button class="btn btn1" @click.stop="handlerService(item, index)">预约</button>
|
|
|
+ <button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <u-empty
|
|
|
+ v-show="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>
|
|
|
|
|
|
+ <!-- 弹窗 -->
|
|
|
<u-popup
|
|
|
:show="reserve_show"
|
|
|
@close="reserve_show = false"
|
|
@@ -130,6 +139,7 @@
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
|
|
|
+ <!-- 时间 -->
|
|
|
<u-datetime-picker
|
|
|
:show="time_show"
|
|
|
:minDate="Number(new Date())"
|
|
@@ -154,8 +164,15 @@ export default {
|
|
|
goods: [],
|
|
|
count: 5,
|
|
|
value: 3,
|
|
|
- list3: [],
|
|
|
-
|
|
|
+ swiperList: [],
|
|
|
+ categoryList: [
|
|
|
+ { id: 1, name: '全部' },
|
|
|
+ { id: 2, name: '养车' },
|
|
|
+ { id: 2, name: '维修' },
|
|
|
+ { id: 2, name: '改装' },
|
|
|
+ { id: 2, name: '补胎' },
|
|
|
+ { id: 2, name: '其他' },
|
|
|
+ ],
|
|
|
queryParams: {
|
|
|
//请求参数
|
|
|
id: null, //商家ID
|
|
@@ -163,12 +180,10 @@ export default {
|
|
|
longitude: null, //经度
|
|
|
latitude: null, //纬度
|
|
|
},
|
|
|
-
|
|
|
template_value: '',
|
|
|
time_show: false,
|
|
|
reserve_show: false,
|
|
|
value: '',
|
|
|
-
|
|
|
addParams: {
|
|
|
merchantId: '',
|
|
|
mobile: '',
|
|
@@ -219,26 +234,31 @@ export default {
|
|
|
handlerInitList() {
|
|
|
getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
|
|
|
this.merchant = res.data.merchant;
|
|
|
- (this.goods = res.data.goods), (this.list3 = res.data.merchant.banners.map(h => h.url));
|
|
|
+ (this.goods = res.data.goods),
|
|
|
+ (this.swiperList = res.data.merchant.banners.map(h => h.url));
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
// 点击拨打电话
|
|
|
handlerMakeCall() {
|
|
|
uni.makePhoneCall({
|
|
|
phoneNumber: this.merchant.mobile,
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
// 点击跳转到商品详情
|
|
|
handlerSkipGoodsDetail(item, index) {
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/business/service/detail?id=${item.id}`,
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
// 预约
|
|
|
handlerService(item, index) {
|
|
|
this.addParams.merchantId = item.id;
|
|
|
this.reserve_show = true;
|
|
|
},
|
|
|
+
|
|
|
// 购买
|
|
|
handlerSkipBuy(item, index) {
|
|
|
uni.navigateTo({
|
|
@@ -246,11 +266,11 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- open() {},
|
|
|
// 点击选择时间
|
|
|
handlerSelectTime() {
|
|
|
this.time_show = true;
|
|
|
},
|
|
|
+
|
|
|
// 点击预约确定按钮
|
|
|
handlerDrawConfirmBtn() {
|
|
|
if (this.addParams.appointTime == '') {
|
|
@@ -290,12 +310,14 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
formatter(type, value) {
|
|
|
if (type === 'minute') {
|
|
|
return `00`;
|
|
|
}
|
|
|
return value;
|
|
|
},
|
|
|
+
|
|
|
// 选择时间
|
|
|
handlerTimeChange(e) {
|
|
|
if (e) {
|
|
@@ -354,8 +376,9 @@ export default {
|
|
|
.info-title {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- font-size: 40rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
+ margin: 20rpx 0;
|
|
|
|
|
|
.info-mark {
|
|
|
font-size: 12px;
|
|
@@ -366,7 +389,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.info-tag {
|
|
|
- width: 160rpx;
|
|
|
+ width: 140rpx;
|
|
|
padding: 10rpx;
|
|
|
text-align: center;
|
|
|
border: 1px solid #5992bb;
|
|
@@ -379,10 +402,10 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.info-text {
|
|
|
- font-size: 30rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
line-height: 58rpx;
|
|
|
color: #212020;
|
|
|
- font-weight: 600;
|
|
|
+ margin-left: 20rpx;
|
|
|
|
|
|
.distance {
|
|
|
font-size: 26rpx;
|
|
@@ -393,6 +416,7 @@ export default {
|
|
|
|
|
|
.info-icon {
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.info-map {
|
|
@@ -404,18 +428,21 @@ export default {
|
|
|
}
|
|
|
|
|
|
.list {
|
|
|
- height: 250rpx;
|
|
|
+ height: 220rpx;
|
|
|
background-color: #fff;
|
|
|
padding: 20rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
display: flex;
|
|
|
|
|
|
.img {
|
|
|
- width: 120px;
|
|
|
- height: calc(100% - 20rpx);
|
|
|
- margin: 10rpx 20rpx 10rpx 0;
|
|
|
+ width: 140px;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .listDetail {
|
|
|
+ width: calc(100% - 160rpx);
|
|
|
}
|
|
|
-
|
|
|
.item-text {
|
|
|
font-weight: bold;
|
|
|
margin: 10rpx 0 10rpx;
|
|
@@ -537,4 +564,10 @@ export default {
|
|
|
.time-text {
|
|
|
color: #d4d6dc;
|
|
|
}
|
|
|
+
|
|
|
+/* 分类 */
|
|
|
+
|
|
|
+.categoryList {
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
</style>
|