jiangchengfeiyi-xiaochengxu/pages/workshop/index/index.vue

<template>
	<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
	  <view class="section" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }"></view>
	  <view class="flex-col justify-start items-center section_2 pos">
	    <view class="flex-row section_3" style="display: flex; align-items: center;" @click="goToSearch">
	      <image
	        class="image" mode="aspectFill"
	        :src="workshopUrl + '/index/search.png'"
	      />
	      <input class="text-wrapper ml-7" placeholder="搜索课程" placeholder-class="placeholderStyle" disabled />
	    </view>
	  </view>
	  
	 <!-- <image
	    class="image_2 pos_2"
	    src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FaHtvfdev-test.png"
	  /> -->
	  
	  <carousel class="pos_2" :img-list="imgList" url-key="url" @selected="selectedBanner"/>
	  
	  
	  <view class="flex-col justify-start items-start pos_3">
	    <view class="my-grid">
				<view class="flex-col grid-item" v-for="(item, index) in products" :key="index" @click="jump_detail(item,index)">
				  <view class="flex-col">
				    <image
				      class="image_1" mode="aspectFill"
				      :src="publicPath + item.goodImg"
				    />
				    <text class="font text_2 mt-1">{{ item.name }}</text>
				  </view>
				  <view class="flex-row items-center group_2 mt-17">
				    <image
				      class="image_4"
				      :src="workshopUrl + '/index/money.png'"
				    />
				    <text class="font_2">{{ item.price }}</text>
				  </view>
				</view>
			</view>
	  </view>
	</view>
</template>

<script setup>
import { ref , onMounted } from 'vue'	
import { baseUrl } from '../../../api/request';
import { onLoad,onPullDownRefresh } from "@dcloudio/uni-app";
import { getFonts } from '../../../common/globalFont';
import { workshopUrl } from '../../../common/globalImagesUrl';
import { publicPath } from '../../../common/globalImagesUrl';
import carousel from '@/components/vear-carousel/vear-carousel'
const products = ref()
const cookie = wx.getStorageSync("cookie")
const bkgUrl = ref(workshopUrl + '/index/bkg.png')
const carouseList = ref([])  //轮播图
const imgList = ref([])  //轮播图展示图


 onLoad(() => {
	 getFonts()
 })
onMounted(()=>{
	getProducts()
	getCarouseList()
})
onPullDownRefresh( async ()=>{
	getProducts()
	getCarouseList()
	setTimeout(()=>{
		uni.stopPullDownRefresh()   //停止下拉刷新
	},1000)
})

const getCarouseList = async () => {
	const res = await uni.request({
		url: baseUrl + '/banner/query',
		method: 'POST',
		header: {
			cookie
		},
		data: {
			type: '服务类'
		}
	})
	console.log('轮播图---->',res.data);
	if(res.data.code === 1) {
		carouseList.value = res.data.data
		carouseList.value.forEach((item)=>{
			imgList.value.push({
				url: publicPath + item.url
			})
		})
	}
}

const getProducts = async ()=> {
	const res = await uni.request({
		url: baseUrl + '/goods/service/list/card',
		method: 'GET',
		header: {
			cookie
		}
	})
	products.value = res.data.data
}
const jump_detail =(item,index)=>{
	// console.log(item.id);
	uni.navigateTo({
		url: '../productmain/productmain?info=' + JSON.stringify(item.id)
	})
}



	
	
	const goToSearch = () => {
		uni.navigateTo({
			url: '../searchGood/searchGood?type=0'
		})
	}

</script>

<style lang="scss" scoped>
.mt-1 {
  margin-top: 1.88rpx;
}
.mt-17 {
  margin-top: 31.88rpx;
}
.text-wrapper {
	padding-left: 10rpx;
}

.page {
  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.section {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  // height: 2096.25rpx;
}
.section_2 {
  padding: 25rpx 0;
  background-color: #fbdedf;
}
.pos {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;  //设置positon优先级
}
.section_3 {
  padding: 0 15rpx;
  background-color: #fff;
  border-radius: 18.75rpx;
  width: 506.25rpx;
  height: 60rpx;
}
.image {
  width: 43.13rpx;
  height: 43.88rpx;
}
.font {
  font-size: 24.38rpx;
  font-family: FangZhengFonts;
  color: #000000;
}
.text {
  line-height: 23.04rpx;
  letter-spacing: 9.75rpx;
}
.image_2 {
  width: 100vw;
  height: 62.5vw;
}
.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 115.63rpx;
}
.pos_3 {
  position: absolute;
  top: 577.5rpx;
  left: 26.25rpx;
  right: 26.27rpx;
}

.my-grid {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	row-gap: 25rpx; 
	column-gap: 25rpx;
	padding-bottom: 40rpx;
}

.grid-item {
  padding-bottom: 30.23rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
}
.image_1 {
  border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
  width: 333.75rpx;
  height: 324.38rpx;
}
.text_2 {
  margin-left: 15.56rpx;
  margin-right: 3.19rpx;
  line-height: 30rpx;
}
.group_2 {
  padding: 0 24.3rpx;
}
.image_4 {
  width: 26.25rpx;
  height: 26.25rpx;
}
.font_2 {
  color: #c35c5d;
  font-size: 30rpx;
  font-family: Times New Roman;
  line-height: 20.68rpx;
}
.flexbox {
	display: flex;
	flex-wrap: wrap;
}
.placeholderStyle {
	color: #c35c5d;
}


@import url(../../../common/css/global.css);
</style>