jiangchengfeiyi-xiaochengxu/pages/home/home.vue

<template>
<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
  <view class="section" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }"></view>
  <image class="image pos" :src="homeUrl + '/flower.png'" />
  <text class="text pos_6">手作传艺|锦绣邀约</text>
  <text class="font pos_2">匠</text>
  <text class="font pos_3">承</text>
  <text class="font pos_4">非</text>
  <text class="font pos_5">遗</text>
  <view class="grid pos_7">
    <view class="flex-row grid-item" @click="jump_xiezhen">
      <image
        class="shrink-0 self-center image_2"
        :src="homeUrl + '/xzyy.png'"
      />
      <view class="ml-4 flex-col items-center flex-1 self-start group">
        <text class="font_2 text_2">写真预约</text>
        <text class="mt-14 font_3 text_3">锦绣华服，即刻预约</text>
      </view>
    </view>
    <view class="flex-row items-center grid-item_2" @click="jump_feiyi">
      <image
        class="shrink-0 image_3"
        :src="homeUrl + '/jyty.png'"
      />
      <view class="flex-col items-center flex-1 ml-7">
        <text class="font_2">技艺体验</text>
        <text class="mt-14 font_3">古艺新学，手作体验</text>
      </view>
    </view>
    <view class="flex-row grid-item_3" @click="jump_store">
      <image
        class="shrink-0 self-center image_5"
        :src="homeUrl + '/tjsp.png'"
      />
      <view class="flex-col items-center flex-1 self-start group_2 ml-7">
        <text class="font_2 text_5">手作商城</text>
        <text class="mt-12 font_3 text_6">传统工艺，匠心好物</text>
      </view>
    </view>
    <view class="flex-row relative grid-item_4" @click="jumpToActivity">
      <image
        class="shrink-0 self-center image_4"
        :src="homeUrl + '/hdzx.png'"
      />
      <text class="self-start font_2 text_4">活动日记</text>
      <text class="font_3 pos_8">活动点滴，邀您共阅</text>
    </view>
  </view>
</view>
</template>

<script setup>
import {inject, ref} from 'vue'
import { baseUrl, testUrl , suiUrl} from '@/api/request';
import { onShow,onLoad } from "@dcloudio/uni-app";
import { getFonts } from '../../common/globalFont';
import { getZSFont } from '../../common/globalFont';
import { homeUrl,bkgPubilcPath } from '../../common/globalImagesUrl';
const bkgUrl = ref(homeUrl + '/bkg.png')
onShow(() => {
	uni.removeStorageSync('businessId')
})
onLoad(()=>{
	getFonts()
	getZSFont()
	getMyUser()
	wx.showShareMenu({
		withShareTicket: true,
		menus: ["shareAppMessage","shareTimeline"]
	})
})
const getMyUser = async () =>{
	const res = await uni.request({
		url: baseUrl + '/user/get/login',
		method: 'GET',
		header: {
			// 读取JSESSIONID
			'cookie': wx.getStorageSync("cookie")
		}
	})
	console.log('获取用户信息==>',res.data)
	if( res.data.code === 40100 ) {
		// uni.navigateTo({
		// 	url: '/pages/login/login'
		// })
		uni.showToast({
			icon: 'error',
			title: "未登录"
		})
	}
}
const jump_xiezhen =()=>{  //跳转写真预约
	uni.navigateTo({
		url: '/pages/book/myPhotoProducts/myPhotoProducts'
	})
}
const jump_feiyi =()=>{   //跳转非遗工坊
	uni.navigateTo({
		url: '/pages/workshop/index/index'
	})
}
const jump_store =()=>{
	uni.switchTab({
		url: '/pages/store-home/main/testMain'
	})
}

const jumpToActivity = () => {
	uni.navigateTo({
		url: '../activity/activityMain/activityMain'
	})
}


//为了上架的提示框
const showTest = ref(false)
const showStop =()=>{
	showTest.value = true
	// uni.navigateTo({
	// 	url: '../activity/activityHome/activityHome'
	// })
}
</script>

<style lang="scss" scoped>
	
.ml-7 {
  margin-left: 4.13rpx;
}
.page {
  // background-image: url(https://123.249.108.160:8888/api/file/downloadFile?objectKey=feiyi/miniProgram/home/bkg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.section {
  // height: 1415.63rpx;
}
.image {
  opacity: 0.35;
  width: 86vw;
  height: 127.5vw;
}
.pos {
  position: absolute;
  left: 0;
  top: 0;
}
.text {
  color: #C35C5D;
  font-size: 37.5rpx;
  font-family: 'FangZhengFonts';
  line-height: 36.92rpx;
}
.pos_6 {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translateX(-50%);
}
.font {
  font-size: 168.75rpx;
  font-family: ZhongShanFonts;
  line-height: 202.5rpx;
  color: #C35C5D;
}
.pos_2 {
  position: absolute;
  right: 156.19rpx;
  top: 71.25rpx;
}
.pos_3 {
  position: absolute;
  right: 114.81rpx;
  top: 273.43rpx;
}
.pos_4 {
  position: absolute;
  right: 165.41rpx;
  top: 474.62rpx;
}
.pos_5 {
  position: absolute;
  right: 114.81rpx;
  top: 676.8rpx;
}
.grid {
  width: 646.88rpx;
  height: 305.63rpx;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 56.38rpx;
  column-gap: 80.76rpx;
}
.pos_7 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50rpx;
  margin: 0 auto;
}
.grid-item {
  padding: 22.5rpx 11.25rpx 22.5rpx 18.75rpx;
  background-color: #ffffff;
  border-radius: 46.88rpx;
}
.image_2 {
  width: 73.13rpx;
  height: 78.75rpx;
}
.group {
  margin-top: 11.25rpx;
}
.font_2 {
  font-size: 28.13rpx;
  font-family: 'FangZhengFonts';
  line-height: 26.47rpx;
  color: #323232;
}
.text_2 {
  line-height: 27.36rpx;
}
.grid-item_2 {
  padding: 22.5rpx 3.75rpx 22.5rpx 15rpx;
  background-color: #ffffff;
  border-radius: 46.88rpx;
}
.image_3 {
  width: 76.88rpx;
  height: 76.88rpx;
}
.grid-item_3 {
  padding: 22.5rpx 3.75rpx 22.5rpx 11.25rpx;
  background-color: #ffffff;
  border-radius: 46.88rpx;
}
.image_5 {
  width: 80.63rpx;
  height: 78.75rpx;
}
.group_2 {
  margin-top: 15rpx;
}
.text_5 {
  line-height: 27.02rpx;
}
.font_3 {
  font-size: 18.75rpx;
  font-family: 'FangZhengFonts';
  line-height: 17.29rpx;
  // color: #faddde;
  color: #F29FA3;
}
.text_3 {
  line-height: 18.09rpx;
}
.text_6 {
  line-height: 18.09rpx;
}
.grid-item_4 {
  padding: 16.88rpx 9.38rpx;
  background-color: #ffffff;
  border-radius: 46.88rpx;
  width: 281.25rpx;
}
.image_4 {
  width: 103.13rpx;
  height: 91.88rpx;
}
.text_4 {
  margin-left: 18.75rpx;
  margin-top: 15rpx;
}
.pos_8 {
  position: absolute;
  right: 18.14rpx;
  bottom: 24.28rpx;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

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