324 lines
7.8 KiB
Vue
324 lines
7.8 KiB
Vue
<template>
|
|
<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')'}">
|
|
<view class="flex-row equal-division flex-box">
|
|
<view class="flex-col items-center group equal-division-item" @click="changeSelectedStatus(true)">
|
|
<image
|
|
class="image"
|
|
:src="xzUrl"
|
|
/>
|
|
<text class="font text mt-10" :style="xzColor">写真服务</text>
|
|
</view>
|
|
<view class="flex-col items-center group equal-division-item" @click="changeSelectedStatus(false)">
|
|
<image
|
|
class="image"
|
|
:src="fzUrl"
|
|
/>
|
|
<text class="font text_2 mt-10" :style="fzColor">服装租赁</text>
|
|
</view>
|
|
</view>
|
|
<view class="divider pos"></view>
|
|
<view class="section_2 pos_2"></view>
|
|
<view class="flex-col pos_3">
|
|
<view
|
|
class="flex-col justify-start items-center text-wrapper_1 list-item mt-19"
|
|
v-for="(item, index) in typeList" @click="isSelected(item, index)" :style="asideStyle[index]"
|
|
:key="index"
|
|
>
|
|
<text class="font_2 text_11">{{ item }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col group_2 pos_4">
|
|
<view class="flex-row justify-between list-item_2 mt-12" @click="gotoDetailPage(item.id)"
|
|
v-for="(item, index) in pointItemList" :key="index">
|
|
<view class="flex-row">
|
|
<image
|
|
class="image_2" mode="aspectFill"
|
|
:src="publicPath + (isShow ? item.introImg : item.image)"
|
|
/>
|
|
<view class="flex-col items-start ml-7">
|
|
<text class="font_2 text_9">{{ item.name }}</text>
|
|
<text class="font_2 text_10 mt-50">{{ item.price.toFixed(2) }}元{{ isShow ? '起' : '/天' }}</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>
|
|
import {onMounted, ref} from 'vue'
|
|
import { bookUrl } from '../../../common/globalImagesUrl';
|
|
import { baseUrl } from '../../../api/request';
|
|
import { publicPath,bkgPubilcPath } from '../../../common/globalImagesUrl';
|
|
import { getFonts } from '../../../common/globalFont';
|
|
import { onPullDownRefresh } from "@dcloudio/uni-app";
|
|
|
|
const cookie = wx.getStorageSync("cookie") //请求头
|
|
const xzgl = bookUrl + '/myPhotoProducts/xz-gl.png'
|
|
const xz = bookUrl + '/myPhotoProducts/xz.png'
|
|
const fzgl = bookUrl + '/myPhotoProducts/fz-gl.png'
|
|
const fz = bookUrl + '/myPhotoProducts/fz.png'
|
|
|
|
const xzUrl = ref(xzgl)
|
|
const fzUrl = ref(fz)
|
|
const isShow = ref(true)
|
|
let clothesMap = null
|
|
let photoProductsMap = null
|
|
let pointMap = ref(null)
|
|
let typeList = ref(null)
|
|
let pointItemList = ref(null)
|
|
let pointIdx = ref(0)
|
|
const asideStyle = ref([])
|
|
const xzColor = ref({ color: '#C35C5D', fontSize: '38.75rpx;', fontWeight: 'bold' })
|
|
const fzColor = ref({ color: '#323232', fontSize: '33.75rpx;', fontWeight: 'normal' })
|
|
|
|
onMounted(() => {
|
|
getFonts()
|
|
getAllData()
|
|
})
|
|
|
|
|
|
onPullDownRefresh( async ()=>{ //下拉刷新
|
|
await getAllData()
|
|
setTimeout(()=>{
|
|
uni.stopPullDownRefresh() //停止下拉刷新
|
|
},1000)
|
|
})
|
|
|
|
const getAllData = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/global/getAllProducts',
|
|
method: 'GET',
|
|
header: {
|
|
cookie
|
|
}
|
|
})
|
|
clothesMap = Object.entries(res.data.data['clothesMap'])
|
|
photoProductsMap = Object.entries(res.data.data['photoProductsMap'])
|
|
pointMap.value = photoProductsMap
|
|
typeList.value = pointMap.value.map(item => item[0])
|
|
pointItemList.value = pointMap.value[0][1]
|
|
asideStyle.value = Array(typeList.value.length).fill(null).map(() => ({
|
|
backgroundColor: '#FBDEDF'
|
|
}))
|
|
asideStyle.value[0].backgroundColor = '#FFB6B9'
|
|
}
|
|
|
|
|
|
|
|
|
|
const changeSelectedStatus = (val) => {
|
|
if (isShow.value && !val) {
|
|
xzUrl.value = xz
|
|
fzUrl.value = fzgl
|
|
isShow.value = !isShow.value
|
|
|
|
pointMap.value = clothesMap
|
|
typeList.value = pointMap.value.map(item => item[0])
|
|
pointItemList.value = pointMap.value[0][1]
|
|
|
|
pointIdx.value = 0
|
|
asideStyle.value[0].backgroundColor = '#FFB6B9'
|
|
for (var i = 1; i < asideStyle.value.length; i ++ ) {
|
|
asideStyle.value[i].backgroundColor = '#FBDEDF'
|
|
}
|
|
|
|
xzColor.value = { color: '#323232', fontSize: '33.75rpx;', fontWeight: 'normal' }
|
|
fzColor.value = { color: '#C35C5D', fontSize: '38.75rpx;', fontWeight: 'bold' }
|
|
}
|
|
if (!isShow.value && val) {
|
|
xzUrl.value = xzgl
|
|
fzUrl.value = fz
|
|
isShow.value = !isShow.value
|
|
|
|
pointMap.value = photoProductsMap
|
|
typeList.value = pointMap.value.map(item => item[0])
|
|
pointItemList.value = pointMap.value[0][1]
|
|
|
|
pointIdx.value = 0
|
|
asideStyle.value[0].backgroundColor = '#FFB6B9'
|
|
for (var i = 1; i < asideStyle.value.length; i ++ ) {
|
|
asideStyle.value[i].backgroundColor = '#FBDEDF'
|
|
}
|
|
xzColor.value = { color: '#C35C5D', fontSize: '38.75rpx;', fontWeight: 'bold' }
|
|
fzColor.value = { color: '#323232', fontSize: '33.75rpx;', fontWeight: 'normal' }
|
|
}
|
|
}
|
|
|
|
|
|
const isSelected = (item, index) => {
|
|
if (pointIdx.value === index) return
|
|
pointIdx.value = index
|
|
for (var i = 0; i < asideStyle.value.length; i ++ ) {
|
|
if (i == index) {
|
|
asideStyle.value[i].backgroundColor = '#FFB6B9'
|
|
} else {
|
|
asideStyle.value[i].backgroundColor = '#FBDEDF'
|
|
}
|
|
}
|
|
pointItemList.value = pointMap.value[pointIdx.value][1]
|
|
}
|
|
|
|
|
|
const gotoDetailPage = (val) => {
|
|
uni.navigateTo({
|
|
url: '/pages/book/myPhotoProductDetail/myPhotoProductDetail?isShow=' + isShow.value + '&id=' + val
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::-webkit-scrollbar {
|
|
display: none; /* 隐藏滚动条 */
|
|
}
|
|
.flex-box {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.mt-19 {
|
|
margin-top: 35.63rpx;
|
|
}
|
|
.ml-7 {
|
|
margin-left: 13.13rpx;
|
|
}
|
|
.page {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100vh;
|
|
}
|
|
.equal-division {
|
|
position: absolute;
|
|
left: 23.38rpx;
|
|
right: 25.37rpx;
|
|
top: 18.13rpx;
|
|
}
|
|
.group {
|
|
// flex: 1 1 350.63rpx;
|
|
}
|
|
.equal-division-item {
|
|
padding: 7.31rpx 0 9.99rpx;
|
|
}
|
|
.image {
|
|
width: 176.01rpx;
|
|
height: 176.01rpx;
|
|
}
|
|
.font {
|
|
font-size: 33.75rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 32.83rpx;
|
|
}
|
|
.text {
|
|
color: #c35c5d;
|
|
}
|
|
.text_2 {
|
|
color: #323232;
|
|
line-height: 32.44rpx;
|
|
}
|
|
.divider {
|
|
background-color: #BEBEBE;
|
|
height: 1.88rpx;
|
|
}
|
|
.pos {
|
|
position: absolute;
|
|
left: 31.88rpx;
|
|
right: 31.88rpx;
|
|
top: 280.31rpx;
|
|
}
|
|
.section_2 {
|
|
background-color: #fff;
|
|
border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
|
|
width: 159.38rpx;
|
|
}
|
|
.pos_2 {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 309.38rpx;
|
|
bottom: 0;
|
|
}
|
|
.pos_3 {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 309.38rpx;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
.text-wrapper_1 {
|
|
padding: 60.38rpx 0 60.11rpx;
|
|
background-color: #faddde;
|
|
border-radius: 18.75rpx;
|
|
width: 159.38rpx;
|
|
}
|
|
.list-item:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.font_2 {
|
|
font-size: 26.25rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 25.16rpx;
|
|
color: #323232;
|
|
}
|
|
.text_11 {
|
|
line-height: 24rpx;
|
|
}
|
|
.group_2 {
|
|
width: 555rpx;
|
|
}
|
|
.pos_4 {
|
|
position: absolute;
|
|
right: 16.88rpx;
|
|
top: 309.38rpx;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
.list-item_2 {
|
|
padding: 18.13rpx 19.88rpx 17.58rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 18.75rpx;
|
|
}
|
|
.list-item_2:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.image_2 {
|
|
margin-bottom: 2.42rpx;
|
|
border-radius: 9.38rpx;
|
|
width: 120rpx;
|
|
height: 142.5rpx;
|
|
}
|
|
.text_9 {
|
|
line-height: 25.54rpx;
|
|
}
|
|
.text_10 {
|
|
font-size: 28.13rpx;
|
|
}
|
|
.text-wrapper_2 {
|
|
margin-right: 5.61rpx;
|
|
margin-top: 69.38rpx;
|
|
padding: 14.93rpx 0 16.69rpx;
|
|
background-color: #ffb6b9;
|
|
border-radius: 28.13rpx;
|
|
width: 108.75rpx;
|
|
height: 48.75rpx;
|
|
}
|
|
.font_3 {
|
|
font-size: 18.75rpx;
|
|
font-family: FangZhengFonts;
|
|
line-height: 17.14rpx;
|
|
color: #ffffff;
|
|
}
|
|
@import url(../../../common/css/global.css);
|
|
</style>
|