|
|
@@ -1,53 +1,77 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="home-banner" v-if="bannerData.length>0">
|
|
|
- <swiper class="swiper" circular :autoplay="false" :interval="2000" :duration="200">
|
|
|
- <swiper-item class="swiper-item" v-for="(item,idex) in bannerData" :key="idex"><image :src="item.cover" mode="widthFix"></image></swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
- <view class="" v-else>
|
|
|
- <view class="skeleton">
|
|
|
- <view class="skeleton-line max animate" style="height: 200upx;"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="home-store">
|
|
|
- <view class="store-left" @click="showService(1)">
|
|
|
- <view class="left">
|
|
|
- <image src="/static/image/kefu.png"></image>
|
|
|
- <view class="name">联系客服</view>
|
|
|
+ <view class="store-info" v-if="loading">
|
|
|
+ <view class="store-header">
|
|
|
+ <view class="logo"><view class="skeleton-line animate"></view></view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="skeleton-line animate"></view>
|
|
|
+ <view class="skeleton-line animate mt15"></view>
|
|
|
</view>
|
|
|
- <view class="right" v-if="storeData">
|
|
|
- <text class="status success">{{storeData.start_at}}-{{storeData.end_at}}</text>
|
|
|
- <image src="/static/image/right-black.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="store-detail">
|
|
|
+ <view class="detail-left">
|
|
|
+ <view class="skeleton-line animate"></view>
|
|
|
+ <view class="skeleton-line animate mt15"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- <view class="store-right"><image src="/static/image/search.png"></image></view> -->
|
|
|
- </view>
|
|
|
- <view class="home-search"></view>
|
|
|
- <view class="empty-body" v-if="goodsData.length == 0">
|
|
|
- <view class="img">
|
|
|
- <image src="/static/image/empty.png" mode="widthFix"></image>
|
|
|
- <view class="tip">没有更多数据啦</view>
|
|
|
+ <view class="store-goods">
|
|
|
+ <view class="goods-item" v-for="(item,index) in 3" :key="index">
|
|
|
+ <view class="image"><view class="skeleton-line animate"></view></view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="skeleton-line animate"></view>
|
|
|
+ <view class="skeleton-line animate mt15"></view>
|
|
|
+ <view class="skeleton-line animate mt15"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="home-goods" v-if="goodsData.length > 0">
|
|
|
- <view class="goods-item" v-for="(item,index) in goodsData" :key="index" @click="$dialog.jumpUri('/pages/goods/detail?goods='+item.product_id+'&spm='+item.id,1)">
|
|
|
- <view class="image"><image :src="item.image_list[0].url" mode="widthFix"></image></view>
|
|
|
+ <view class="store-info" v-else>
|
|
|
+ <view class="store-header">
|
|
|
+ <view class="logo"><image :src="storeData.poi_logo" class="animate"></image></view>
|
|
|
<view class="info">
|
|
|
- <view class="title">{{item.product_name}}</view>
|
|
|
- <view class="desc-num">已售{{item.sale_stock}}</view>
|
|
|
- <view class="price">
|
|
|
- <view class="price-left">
|
|
|
- <view class="pay-price">{{$dialog.formatMoney(item.price)}}</view>
|
|
|
- <view class="line-price">{{$dialog.formatMoney(item.line_price)}}</view>
|
|
|
+ <view class="title">{{ storeData.poi_name }}</view>
|
|
|
+ <view class="time">营业时间：{{ storeData.start_at }} - {{ storeData.end_at }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right-item" @click="showService(1)">
|
|
|
+ <view class="icon"><image src="/static/image/kf.svg"></image></view>
|
|
|
+ <view class="name">联系商家</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="store-detail" @click="toMap">
|
|
|
+ <view class="detail-left">
|
|
|
+ <view class="city">{{ storeData.poi_city }}</view>
|
|
|
+ <view class="address">{{ storeData.poi_address }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="detail-arrow"><image src="/static/image/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ <view class="empty-body" v-if="goodsData.length == 0">
|
|
|
+ <view class="img">
|
|
|
+ <image src="/static/image/empty.png" mode="widthFix"></image>
|
|
|
+ <view class="tip">没有更多数据啦</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="store-goods" v-else>
|
|
|
+ <view class="goods-item" v-for="(item,index) in goodsData" :key="index" @click="$dialog.jumpUri('/pages/goods/detail?goods='+item.product_id+'&spm='+item.id,1)">
|
|
|
+ <view class="image"><image :src="item.image_list[0].url"></image></view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">{{item.product_name}}</view>
|
|
|
+ <view class="desc-num">
|
|
|
<view class="sale">{{$dialog.disFormat(item.price,item.line_price)}}折</view>
|
|
|
+ <view class="number-desc">已售{{item.sale_stock}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="price-left">
|
|
|
+ <view class="pay-price">{{$dialog.formatMoney(item.price)}}</view>
|
|
|
+ <view class="line-price">{{$dialog.formatMoney(item.line_price)}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="price-right">抢购</view>
|
|
|
</view>
|
|
|
- <view class="price-right">立即抢购</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- <view class="goods-more">查看更多>></view> -->
|
|
|
+ <view class="goods-more" v-if="goodsParam.isMore" @click="getGoods">{{ goodsParam.loading?'努力加载中...':'查看更多' }}</view>
|
|
|
</view>
|
|
|
+
|
|
|
<uni-popup ref="userpopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
|
|
|
<view class="service-popup">
|
|
|
<view class="top">
|
|
|
@@ -60,6 +84,7 @@
|
|
|
<view class="foot" @click="showService(2)">取消</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -69,10 +94,17 @@ import * as Api from "@/static/api/home.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ loading:false,
|
|
|
bannerData:[],
|
|
|
- goodsData:{},
|
|
|
+ goodsData:[],
|
|
|
storeId:"",
|
|
|
- storeData:null
|
|
|
+ storeData:null,
|
|
|
+ goodsParam:{
|
|
|
+ page:1,
|
|
|
+ size:10,
|
|
|
+ loading:false,
|
|
|
+ isMore:false
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
onLoad({store}) {
|
|
|
@@ -85,18 +117,53 @@ export default {
|
|
|
}
|
|
|
app.getData()
|
|
|
},
|
|
|
- methods: {
|
|
|
+ methods: {
|
|
|
+ toMap(){
|
|
|
+ var poi = app.storeData;
|
|
|
+ uni.openLocation({
|
|
|
+ latitude:poi.latitude,
|
|
|
+ longitude:poi.longitude,
|
|
|
+ name:poi.poi_name,
|
|
|
+ address:poi.poi_address,
|
|
|
+ success() {
|
|
|
+ console.log("open success")
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ app.$dialog.showSuccess("打开导航失败")
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getGoods(){
|
|
|
+ if (!app.storeId) return ;
|
|
|
+ app.goodsParam.loading = true;
|
|
|
+ Api.goods({"store":app.storeId,"page":app.goodsParam.page,"size":app.goodsParam.size}).then((res)=>{
|
|
|
+ app.goodsParam.loading = false;
|
|
|
+ if (res.code !== 200) {
|
|
|
+ return app.$dialog.showSuccess(res.msg)
|
|
|
+ }
|
|
|
+ if (res.data.rows.length > 0) {
|
|
|
+ app.goodsParam.page++;
|
|
|
+ app.goodsParam.isMore = true;
|
|
|
+ } else {
|
|
|
+ app.goodsParam.isMore = false;
|
|
|
+ }
|
|
|
+ app.goodsData = app.goodsData.concat(res.data.rows);
|
|
|
+ })
|
|
|
+ },
|
|
|
getData(){
|
|
|
if (!app.storeId) return ;
|
|
|
+ app.loading = true;
|
|
|
Api.data({"store":app.storeId}).then((res)=>{
|
|
|
+ app.loading = false;
|
|
|
if (res.code !== 1) {
|
|
|
return app.$dialog.showSuccess(res.msg)
|
|
|
}
|
|
|
uni.setStorageSync("poiId",res.data.store.poi_id);
|
|
|
app.storeData = res.data.store;
|
|
|
- app.goodsData = res.data.goods;
|
|
|
uni.setStorageSync("contact",res.data.store);
|
|
|
app.bannerData = res.data.banner;
|
|
|
+ app.getGoods();
|
|
|
})
|
|
|
},
|
|
|
callMobile(mobile){
|
|
|
@@ -111,7 +178,9 @@ export default {
|
|
|
},
|
|
|
showService(type){
|
|
|
if (type == 1) {
|
|
|
- uni.hideTabBar()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ uni.hideTabBar()
|
|
|
+ })
|
|
|
app.$refs.userpopup.open()
|
|
|
} else {
|
|
|
this.$nextTick(() => {
|
|
|
@@ -126,43 +195,52 @@ export default {
|
|
|
|
|
|
<style>
|
|
|
page{background-color: #f8f8f8;}
|
|
|
-.service-popup .item{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-bottom: 2upx solid #f8f8f8;}
|
|
|
-.service-popup .item .btn{background-color: #fff;border: 0;height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;}
|
|
|
-.service-popup .item .btn::after{border: 0;}
|
|
|
-.service-popup .foot{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-top: 20upx solid #f8f8f8;}
|
|
|
-.goods-item{background-color: #fff;border-radius: 10upx;display: flex;align-items: center;margin-top: 20upx;}
|
|
|
-.goods-item .image{height: 200upx;overflow: hidden;}
|
|
|
-.goods-item .image image{width: 200upx;}
|
|
|
-.goods-item .info{margin-left: 20upx;padding: 20upx 0;flex: 1;}
|
|
|
-.goods-item .title{font-size: 28upx;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
|
|
|
-.goods-item .desc-num{color: #999;font-size: 24upx;margin: 10upx 0;}
|
|
|
+.loading-empty{background-color: #fff;border-top: 2upx solid #f8f8f8;padding: 20upx;}
|
|
|
+.store-info{}
|
|
|
+.store-header{display: flex;gap: 20upx;border-bottom: 2upx solid #f8f8f8;border-top: 2upx solid #f8f8f8;align-items: center;padding: 20upx;background-color: #fff;}
|
|
|
+.store-header .logo{width: 100upx;height: 100upx;border: 2upx solid #ddd;border-radius: 10upx;display: flex;align-items: center;justify-content: center;}
|
|
|
+.store-header .logo image{width: 90upx;height: 90upx;border-radius: 10upx;}
|
|
|
+.store-header .info{flex: 1;}
|
|
|
+.store-header .title{font-size: 32upx;font-weight: bold;}
|
|
|
+.store-header .time{font-size: 24upx;color: #666;margin-top: 15upx;}
|
|
|
+.store-header .right-item {text-align: center;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-left: auto;margin-right: 0;}
|
|
|
+.store-header .right-item .name{font-size: 24upx;color: #666;margin-bottom: 10upx;}
|
|
|
+.store-header .right-item .icon{background-color: #f8f8f8;border-radius: 60upx;display: flex;align-items: center;justify-content: center;width: 60upx;height: 60upx;}
|
|
|
+.store-header .right-item image{width: 40upx;height: 40upx;}
|
|
|
+
|
|
|
+.goods-more{background-color: #fff;text-align: center;font-size: 24upx;font-weight: bold;border-radius: 10upx;padding: 20upx 0;width: 55%;margin: 20upx auto;}
|
|
|
+
|
|
|
+.store-detail{display: flex;padding: 20upx;gap: 40upx;align-items: center;background-color: #fff;border-radius: 0 0 20upx 20upx;}
|
|
|
+.store-detail .detail-left{font-size: 28upx;color: #000;flex: 1;}
|
|
|
+.store-detail .detail-left .address{font-size: 24upx;color: #666;margin-top: 10upx;}
|
|
|
+.store-detail .detail-arrow{margin-left: auto;margin-right: 0;}
|
|
|
+.store-detail .detail-arrow image{width: 40upx;height: 40upx;}
|
|
|
+.store-detail .detail-right{margin-left: auto;margin-right: 0;display: flex;align-items: center;gap: 20upx;}
|
|
|
+.store-detail .detail-right .right-item {text-align: center;display: flex;align-items: center;justify-content: center;flex-direction: column;}
|
|
|
+.store-detail .detail-right .right-item .name{font-size: 24upx;color: #666;}
|
|
|
+.store-detail .detail-right .right-item .icon{background-color: #f8f8f8;border-radius: 60upx;display: flex;align-items: center;justify-content: center;width: 60upx;height: 60upx;}
|
|
|
+.store-detail .detail-right .right-item image{width: 40upx;height: 40upx;}
|
|
|
+
|
|
|
+.store-goods{background-color: #fff;padding: 0 20upx;margin-top: 20upx;border-radius: 20upx 20upx 0 0;}
|
|
|
+.goods-item{background-color: #fff;border-radius: 10upx;border-bottom: 2upx solid #f8f8f8;display: flex;align-items: center;gap: 20upx;padding: 20upx 0;}
|
|
|
+.goods-item:last-child{border-bottom: 0;}
|
|
|
+.goods-item .image{height: 180upx;overflow: hidden;display: flex;align-items: center;min-width: 180upx;}
|
|
|
+.goods-item .image image{width: 180upx;border-radius: 10upx;height: 100%;}
|
|
|
+.goods-item .info{flex: 1;}
|
|
|
+.goods-item .title{font-size: 28upx;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;font-weight: bold;}
|
|
|
+.goods-item .desc-num{color: #999;font-size: 24upx;margin: 10upx 0;display: flex;align-items: center;gap: 20upx;justify-content: space-between;}
|
|
|
+.goods-item .desc-num .sale{background-color: #FDEBE5;border-radius: 4rpx;font-size: 22rpx;color: #FF4747;padding: 5rpx 15rpx;}
|
|
|
+
|
|
|
.goods-item .price{display: flex;align-items: center;}
|
|
|
-.goods-item .price .price-left{display: flex;align-items: center;}
|
|
|
+.goods-item .price .price-left{display: flex;align-items: center;flex: 1;}
|
|
|
.goods-item .price .pay-price{color: #FF4747;font-size: 32rpx;font-weight: bold;margin-right: 10upx;}
|
|
|
.goods-item .price .line-price{color: #999999;font-size: 22rpx;text-decoration-line: line-through;margin-right: 10upx;}
|
|
|
.goods-item .price .sale{background-color: #FDEBE5;border: 4rpx;font-size: 22rpx;color: #FF4747;padding: 10rpx;}
|
|
|
-.goods-item .price .price-right{margin-left: auto;margin-right: 20upx;background-color: #EB3434;color: #fff;font-size: 24upx;padding: 10upx;border-radius: 10upx;}
|
|
|
-.content{padding: 20upx;}
|
|
|
-.home-banner image{width: 100%;border-radius: 20upx;height: auto;}
|
|
|
-.home-banner .swiper{height: 380upx;}
|
|
|
-.home-store{margin: 20upx auto;display: flex;align-items: center;gap: 20upx;}
|
|
|
-.home-store .store-left{background-color: #fff;border-radius: 10upx;display: flex;align-items: center;padding: 30upx;flex: 1;}
|
|
|
-.home-store .store-right{width: 120upx;height: 120upx;background-color: #fff;text-align: center;display: flex;align-items: center;justify-content: center;margin-left: auto;margin-right: 0;border-radius: 10upx;}
|
|
|
-.home-store .store-right image{width: 60upx;height: 60upx;}
|
|
|
-.home-store .left{display: flex;align-items: center;}
|
|
|
-.home-store .left image{width: 60upx;height: 60upx;margin-right: 20upx;}
|
|
|
-.home-store .right {margin-left: auto;margin-right: 0;display: flex;align-items: center;}
|
|
|
-.home-store .right image{width: 50upx;height: 50upx;}
|
|
|
-.home-store .name{font-size: 32upx;color: #000;font-weight: bold;}
|
|
|
-.home-store .desc{font-size: 26upx;color: #666;margin-top: 20upx;}
|
|
|
-.home-store .status{color: #333;font-size: 28upx;padding:5upx 15upx;border-radius: 10upx;margin-left: 10upx;}
|
|
|
-.home-store .status.error{background-color: #fef0f0;color: #f56c6c;}
|
|
|
+.goods-item .price .price-right{margin-left: auto;margin-right: 0;color: #fff;font-size: 24upx;padding: 10upx 30upx;border-radius: 8upx;background-image: linear-gradient(to right, #EB3434, #ff7e5f);}
|
|
|
|
|
|
-.goods-more{background-color: #fff;text-align: center;font-size: 24upx;font-weight: bold;margin-top: 20upx;border-radius: 10upx;padding: 20upx 0;}
|
|
|
-
|
|
|
-.empty-body{display: flex;align-items: center;justify-content: center;flex-direction: column;height: 40vh;}
|
|
|
-.empty-body .img{text-align: center;font-size: 28upx;color: #666;}
|
|
|
-.empty-body .img image{height: 160upx;width: 160upx;}
|
|
|
-.empty-body .img .tip{margin-top: 20upx;}
|
|
|
-.empty-body .re-btn{width: 180upx;height: 80upx;line-height: 80upx;text-align: center;font-size: 28upx;color: #fff;background-color: #007aff;border-radius: 10upx;margin-top: 60upx;}
|
|
|
+.service-popup .item{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-bottom: 2upx solid #f8f8f8;}
|
|
|
+.service-popup .item:last-child{border-bottom: 0;}
|
|
|
+.service-popup .item .btn{background-color: #fff;border: 0;height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;}
|
|
|
+.service-popup .item .btn::after{border: 0;}
|
|
|
+.service-popup .foot{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-top: 20upx solid #f8f8f8;}
|
|
|
</style>
|
