jiaoyi-uni/pages/index/index.vue

<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>
				<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>
			<!-- <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>
		</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="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="sale">{{$dialog.disFormat(item.price,item.line_price)}}折</view>
						</view>
						<view class="price-right">立即抢购</view>
					</view>
				</view>
			</view>
			<!-- <view class="goods-more">查看更多>></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 {
			bannerData:[],
			goodsData:{},
			storeId:"",
			storeData:null
		}
	},
	onLoad({store}) {
		app = this;
		var poiId = uni.getStorageSync("poiId");
		if (!poiId && !store) {
			app.storeId = "7644106137976965139";
		} else {
			app.storeId = poiId;
		}
		app.getData()
	},
	methods: {
		getData(){
			if (!app.storeId) return ;
			Api.data({"store":app.storeId}).then((res)=>{
				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;
			})
		},
		callMobile(mobile){
			uni.makePhoneCall({
				phoneNumber:mobile,
				success(res) {
					console.log(res)
				},fail(res) {
					console.log(res)
				}
			})
		},
		showService(type){
			if (type == 1) {
				uni.hideTabBar()
				app.$refs.userpopup.open()
			} else {
				this.$nextTick(() => {
					uni.showTabBar()
				})
				app.$refs.userpopup.close()
			}
		}
	}
}
</script>

<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;}
.goods-item .price{display: flex;align-items: center;}
.goods-item .price .price-left{display: flex;align-items: center;}
.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-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;}
</style>