From d755959f05d44f63f710bdc479c00d8829b87c94 Mon Sep 17 00:00:00 2001
From: chen-xin-zhi <3588068430@qq.com>
Date: Wed, 26 Feb 2025 14:06:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=86=99=E7=9C=9F=E4=BA=A7=E5=93=81=E5=B7=B2?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../photoProductDetail/photoProductDetail.vue | 210 +++++++++++++
 pages/book/photoProducts/photoProducts.vue    | 288 ++++++++++++++++++
 2 files changed, 498 insertions(+)
 create mode 100644 pages/book/photoProductDetail/photoProductDetail.vue
 create mode 100644 pages/book/photoProducts/photoProducts.vue

diff --git a/pages/book/photoProductDetail/photoProductDetail.vue b/pages/book/photoProductDetail/photoProductDetail.vue
new file mode 100644
index 0000000..6810102
--- /dev/null
+++ b/pages/book/photoProductDetail/photoProductDetail.vue
@@ -0,0 +1,210 @@
+<template>
+	<view class="flex-col justify-start relative page">
+	  <view class="section"></view>
+	  <image
+	    class="image pos"
+	    :src="obj.introImg"
+	  />
+	  <view class="flex-col items-start section_2 pos_2">
+	    <text class="font text">{{ obj.name }}</text>
+	    <text class="mt-18 font text_2">￥{{ obj.price.toFixed(2) }}起</text>
+	  </view>
+	  <text class="font_2 pos_3">服务&交付标准</text>
+	  <view class="flex-row equal-division">
+	    <view class="flex-col items-center group equal-division-item">
+	      <image
+	        class="image_2"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=38dcf3c1e2244e5a085c6cab2d3e9782.png"
+	      />
+	      <text class="font_3 mt-11">1组造型</text>
+	    </view>
+	    <view class="ml-38 flex-col items-center group equal-division-item">
+	      <image
+	        class="image_2"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=3ee14e25cc9badbf556ce47b1b3fae40.png"
+	      />
+	      <text class="font_3 mt-11">1套服装</text>
+	    </view>
+	    <view class="ml-38 flex-col items-center group equal-division-item">
+	      <image
+	        class="image_2"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=ad428b849d260407680f59d5f75d6f06.png"
+	      />
+	      <text class="font_3 mt-11">1种背景</text>
+	    </view>
+	  </view>
+	  <image
+	    class="image_3 pos_4"
+	    src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=6697ed477f5159bddd4ba87ba7ccd849.png"
+	  />
+	  <text class="font_2 text_3 pos_5">产品详情</text>
+	  <text class="font_2 text_4 pos_6">服务说明</text>
+	  <image
+	    class="image_4 pos_7"
+	    :src="obj.detailImg"
+	  />
+	  <view class="flex-col justify-start items-end section_3 pos_8">
+	    <view class="flex-col justify-start items-center text-wrapper"><text class="font_3 text_5">立即预约</text></view>
+	  </view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { onLoad } from "@dcloudio/uni-app";
+	import {ref} from 'vue'
+	const obj = ref({})
+	onLoad((options) => {
+		console.log(options)
+		obj.value = JSON.parse(options.obj)
+	})
+</script>
+
+<style lang="scss" scoped>
+.mt-11 {
+  margin-top: 20.63rpx;
+}
+.page {
+  background-color: #ffffff;
+  background-image: url('https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=8a8617bd8ea20ecda3f731825ed1b080.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+}
+.section {
+  background-image: url('https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=8a8617bd8ea20ecda3f731825ed1b080.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 750rpx;
+  height: 2726.25rpx;
+}
+.image {
+  width: 100vw;
+  height: 106vw;
+}
+.pos {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+.section_2 {
+  padding: 37.5rpx 56.25rpx 41.25rpx;
+  background-color: #ebe6e3;
+  border-radius: 18.75rpx;
+  box-shadow: 0rpx 7.5rpx 7.5rpx #04040440;
+}
+.pos_2 {
+  position: absolute;
+  left: 22.5rpx;
+  right: 22.5rpx;
+  top: 750rpx;
+}
+.font {
+  font-size: 45rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  color: #000000;
+}
+.text {
+  line-height: 43.76rpx;
+}
+.text_2 {
+  margin-left: 7.5rpx;
+  line-height: 40.26rpx;
+}
+.font_2 {
+  font-size: 37.5rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 36.34rpx;
+  color: #000000;
+}
+.pos_3 {
+  position: absolute;
+  left: 29.74rpx;
+  top: 1003.65rpx;
+}
+.equal-division {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 1077.51rpx;
+}
+.image_2 {
+  width: 128.01rpx;
+  height: 128.01rpx;
+}
+.font_3 {
+  font-size: 30rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 27.3rpx;
+  color: #000000;
+}
+.group {
+  flex: 1 1 202.5rpx;
+}
+.equal-division-item {
+  padding: 11.25rpx 0;
+}
+.image_3 {
+  width: 256.88rpx;
+  height: 76.88rpx;
+}
+.pos_4 {
+  position: absolute;
+  left: 116.25rpx;
+  top: 1280.63rpx;
+}
+.text_3 {
+  line-height: 36.62rpx;
+}
+.pos_5 {
+  position: absolute;
+  left: 106.61rpx;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.text_4 {
+  line-height: 35.89rpx;
+}
+.pos_6 {
+  position: absolute;
+  right: 103.39rpx;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.image_4 {
+  width: 100vw;
+  height: 150vw;
+}
+.pos_7 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 183.75rpx;
+}
+.section_3 {
+  padding: 18.75rpx 0;
+  background-color: #ffffff;
+}
+.pos_8 {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0 auto;
+}
+.text-wrapper {
+  margin-right: 11.25rpx;
+  padding: 26.25rpx 0;
+  background-color: #ffb6b9;
+  border-radius: 187.5rpx;
+  width: 241.88rpx;
+}
+.text_5 {
+  color: #ffffff;
+  line-height: 27.43rpx;
+}
+@import url(../../../common/css/global.css);
+</style>
diff --git a/pages/book/photoProducts/photoProducts.vue b/pages/book/photoProducts/photoProducts.vue
new file mode 100644
index 0000000..5999231
--- /dev/null
+++ b/pages/book/photoProducts/photoProducts.vue
@@ -0,0 +1,288 @@
+<template>
+	<view class="flex-col justify-start relative page">
+	  <view class="section"></view>
+	  <view class="flex-row equal-division">
+	    <view class="flex-col items-center equal-division-item">
+	      <image
+	        class="image"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=98d92598fa059f35ed92af5a9439c9c0.png"
+	      />
+	      <text class="font text_1 mt-7">写真专区</text>
+	    </view>
+	    <view class="flex-col items-center equal-division-item_2 ml-48">
+	      <image
+	        class="image"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=96be13306d195949440e67325578de26.png"
+	      />
+	      <text class="font mt-7">摄影服务</text>
+	    </view>
+	    <view class="flex-col items-center equal-division-item_3 ml-48">
+	      <image
+	        class="image"
+	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=57485239f24eb48a22be8fce00be610d.png"
+	      />
+	      <text class="font mt-4">妆造服务</text>
+	    </view>
+	  </view>
+	  <view class="divider pos"></view>
+	  <view class="flex-col justify-start section_2 pos_2">
+	    <view class="flex-col">
+	      <view
+	        class="flex-col justify-start items-center relative list-item mt-16" @click="isSelected(item, index)" :style="asideStyle[index]"
+	        v-for="(item, index) in categoryList"
+	        :key="index"
+	      >
+	        <text class="font_2 text_2">{{ item.name }}</text>
+	      </view>
+	    </view>
+	  </view>
+	  <text class="font_2 text pos_3">{{ categoryName }}</text>
+	  <view class="flex-col group pos_4">
+	    <view class="flex-row justify-between relative list-item_2 mt-13" @click="jumpToDetail(item)"
+		v-for="(item, index) in photoProducts" :key="index">
+	      <view class="flex-row self-center">
+	        <image
+	          class="image_2"
+	          :src="item.introImg"
+	        />
+	        <view class="flex-col items-start ml-12">
+	          <text class="font_2 text_3">{{ item.name }}</text>
+	          <text class="font_2 text_4 mt-32">{{ item.price.toFixed(2) }}元起</text>
+	        </view>
+	      </view>
+	      <view class="flex-col justify-start items-center self-start text-wrapper_2">
+	        <text class="font_3">立即预约</text>
+	      </view>
+	    </view>
+	  </view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import {onMounted, ref} from 'vue'
+	import { baseUrl } from '../../../api/request';
+	
+	const cookie = wx.getStorageSync("cookie")  //请求头
+	const categoryList = ref([])
+	const photoProducts = ref([])
+	const asideStyle = ref([])
+	const categoryId = ref(0)
+	const categoryName = ref('')
+	
+	onMounted( async () => {
+		await getAllCategory()
+		await getPhotoProductsByCategoryId(categoryName.value)
+	})
+	
+	
+	const isSelected = (item:any, index:any) => {
+		categoryId.value = item.id
+		categoryName.value = item.name
+		for (var i = 0; i < asideStyle.value.length; i ++ ) {
+			if (i == index) {
+				asideStyle.value[i].backgroundColor = '#FFB6B9'
+			} else {
+				asideStyle.value[i].backgroundColor = '#ffb6b936'
+			}
+		}
+		getPhotoProductsByCategoryId(categoryName.value)
+	}
+	
+	
+	const getAllCategory = async () => {
+		const res = await uni.request({
+			url: baseUrl + '/photoCategory/list/users',
+			method: 'POST',
+			header: {
+				cookie
+			}
+		})
+		categoryList.value = res.data.data
+		categoryName.value = res.data.data[0].name
+		asideStyle.value = Array(categoryList.value.length).fill(null).map(() => ({
+			backgroundColor: '#ffb6b936'
+		}))
+		asideStyle.value[0].backgroundColor = '#FFB6B9'
+	}
+	
+	const getPhotoProductsByCategoryId = async (val:any) => {
+		const res = await uni.request({
+			url: baseUrl + '/photoCategory/list/type',
+			method: 'POST',
+			header: {
+				cookie
+			},
+			data: {
+				type: val
+			}
+		})
+		photoProducts.value = res.data.data
+		console.log(photoProducts.value)
+	}
+	
+	const jumpToDetail = (val:any) => {
+		uni.navigateTo({
+			url: '../photoProductDetail/photoProductDetail?obj=' + JSON.stringify(val)
+		})
+	}
+	
+	
+	
+</script>
+
+<style scoped lang="scss">
+.mt-7 {
+  margin-top: 13.13rpx;
+}
+.mt-13 {
+  margin-top: 24.38rpx;
+}
+.page {
+  background-image: url('https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=039df2fe261116bd1bd408f287b060bc.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100vh;
+}
+.section {
+  background-image: url('https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=039df2fe261116bd1bd408f287b060bc.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 750rpx;
+}
+.equal-division {
+  position: absolute;
+  left: 12.32rpx;
+  right: 22.61rpx;
+  top: 8.76rpx;
+}
+.equal-division-item {
+  padding: 8.25rpx 0 9.99rpx;
+}
+.image {
+  width: 176.01rpx;
+  height: 176.01rpx;
+}
+.font {
+  font-size: 30rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 28.71rpx;
+  color: #323232;
+}
+.text_1 {
+  line-height: 29.18rpx;
+}
+.equal-division-item_2 {
+  padding: 8.25rpx 0 10.35rpx;
+}
+.equal-division-item_3 {
+  padding: 8.25rpx 0 17.85rpx;
+}
+.divider {
+  background-color: #a1a1a1;
+  height: 1.88rpx;
+}
+.pos {
+  position: absolute;
+  left: 30rpx;
+  right: 33.77rpx;
+  top: 273.75rpx;
+}
+.section_2 {
+  padding-bottom: 40rpx;
+  // background-color: #ffffff96;
+  border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
+  // box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
+  width: 159.38rpx;
+  height: 1140rpx;
+  overflow-y: auto;
+}
+.pos_2 {
+  position: absolute;
+  left: 0;
+  top: 309.38rpx;
+}
+
+/* 隐藏滚动条，但仍然允许滚动 */
+::-webkit-scrollbar {
+  display: none;
+}
+
+.list-item {
+  padding: 47.94rpx 0 49.93rpx;
+  background-color: #ffb6b936;
+  border-radius: 18.75rpx;
+  box-shadow: 0rpx 7.5rpx 7.5rpx #5a5a5a40;
+  width: 159.38rpx;
+}
+.list-item:first-child {
+  margin-top: 0;
+}
+.font_2 {
+  font-size: 26.25rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 25.16rpx;
+  color: #000000;
+}
+.text_2 {
+  line-height: 24rpx;
+}
+.text {
+  font-size: 28.13rpx;
+  line-height: 25.71rpx;
+}
+.pos_3 {
+  position: absolute;
+  left: 180.77rpx;
+  top: 312.66rpx;
+}
+.group {
+  width: 555rpx;
+  height: 1050rpx;
+  padding-bottom: 40rpx;
+  overflow-y: auto;
+}
+.pos_4 {
+  position: absolute;
+  right: 15rpx;
+  top: 360rpx;
+}
+.list-item_2 {
+  padding: 31.88rpx 20.63rpx 27.58rpx;
+  background-color: #ffffff96;
+  border-radius: 18.75rpx;
+  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
+}
+.list-item_2:first-child {
+  margin-top: 0;
+}
+.image_2 {
+  margin-bottom: 2.42rpx;
+  width: 99.38rpx;
+  height: 108.75rpx;
+}
+.text_3 {
+  line-height: 25.54rpx;
+}
+.text_4 {
+  font-size: 28.13rpx;
+}
+.text-wrapper_2 {
+  margin-right: 5.63rpx;
+  margin-top: 50.63rpx;
+  padding: 14.91rpx 0 16.71rpx;
+  background-color: #ffb6b9;
+  border-radius: 28.13rpx;
+  width: 108.75rpx;
+  height: 48.75rpx;
+}
+.font_3 {
+  font-size: 18.75rpx;
+  font-family: FZSongKeBenXiuKaiS-R-GB;
+  line-height: 17.14rpx;
+  color: #ffffff;
+}
+@import url(../../../common/css/global.css);
+</style>