jiaoyi-uni/pages/index/index.vue

<template>
	<view class="content">
		<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>
			<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-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="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">{{ 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>
				</view>
			</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">
					<view class="item">客服时间：{{storeData.start_at}}-{{storeData.end_at}}</view>
					<view class="item">
						<button class="btn" @click="$dialog.jumpUri('/pages/service/chat/chat?poi='+storeData.poi_id+'&source=home',1);showService(2)">在线咨询商家</button>
					</view>
					<view class="item" v-if="storeData.service_mobile" @click="callMobile(storeData.service_mobile)">商家客服电话</view>
				</view>
				<view class="foot" @click="showService(2)">取消</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/home.js";
export default {
	data() {
		return {
			loading:false,
			bannerData:[],
			goodsData:[],
			storeId:"",
			storeData:null,
			goodsParam:{
				page:1,
				size:10,
				loading:false,
				isMore:false
			}
		}
	},
	onLoad({store}) {
		app = this;
		var poiId = uni.getStorageSync("poiId");
		if (!poiId && !store) {
			app.storeId = "7644106137976965139";
		} else {
			app.storeId = poiId;
		}
		app.getData()
	},
	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++;
					if (res.data.total <= res.data.pageSize) {
						app.goodsParam.isMore = false;
					} else {
						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;
				uni.setStorageSync("contact",res.data.store);
				app.bannerData = res.data.banner;
				app.getGoods();
			})
		},
		callMobile(mobile){
			uni.makePhoneCall({
				phoneNumber:mobile,
				success(res) {
					console.log(res)
				},fail(res) {
					console.log(res)
				}
			})
		},
		showService(type){
			if (type == 1) {
				this.$nextTick(() => {
					uni.hideTabBar()
				})
				app.$refs.userpopup.open()
			} else {
				this.$nextTick(() => {
					uni.showTabBar()
				})
				app.$refs.userpopup.close()
			}
		}
	}
}
</script>

<style>
page{background-color: #f8f8f8;}
.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;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: 0;color: #fff;font-size: 24upx;padding: 10upx 30upx;border-radius: 8upx;background-image: linear-gradient(to right, #EB3434, #ff7e5f);}

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