442 lines
8.7 KiB
Vue
442 lines
8.7 KiB
Vue
<!-- <template>
|
|
|
|
<view class="flex-col page">
|
|
<view class="flex-col section">
|
|
<text class="self-start text">服装展示</text>
|
|
<view class="flex-col self-stretch mt-21">
|
|
<view class="flex-row items-center mt-10 list-item" v-for="(item, index) in label" :key="index"
|
|
@click="goToText(index)">
|
|
<image class="shrink-0 image_2" :src="item.image" />
|
|
<view class="flex-col flex-1 ml-11">
|
|
<view class="flex-col self-stretch">
|
|
<view class="flex-row justify-end self-stretch group">
|
|
<text class="font">详细信息</text>
|
|
<image class="image" :src="item.image" />
|
|
</view>
|
|
<text class="self-start font_2 text_2 mt-3">{{item.name}}</text>
|
|
</view>
|
|
<view class="self-stretch group_2 mt-5">
|
|
<text class="font_4">服装简介：</text>
|
|
<text class="font_3">
|
|
{{item.intro}}
|
|
</text>
|
|
</view>
|
|
<text class="self-end font_5 mt-5">￥{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mt-48 flex-row items-center section_2">
|
|
<view class="flex-col items-center shrink-0 section_3">
|
|
<image class="image_3"
|
|
src="https://ide.code.fun/api/image?token=674eb236797f850011f0c44a&name=4b56fed14a39630ca2312edf6e34c024.png" />
|
|
<text class="mt-2 text_4">客服</text>
|
|
</view>
|
|
<view class="ml-34 flex-col justify-start items-center flex-1 text-wrapper">
|
|
<text class="text_3">现在去预约</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted
|
|
} from 'vue'
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
baseUrl
|
|
} from '../../../api/request';
|
|
const list = ref([{}])
|
|
const label = ref([{}])
|
|
onMounted(() => {
|
|
getLabel()
|
|
})
|
|
onLoad((options) => {
|
|
list.value = JSON.parse(options.info)
|
|
console.log(list.value, 'id')
|
|
})
|
|
const getLabel = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/clothesInfo/list/label',
|
|
method: 'POST',
|
|
header: {
|
|
cookie: wx.getAccountInfoSync('cookie')
|
|
},
|
|
data: {
|
|
id: list.value
|
|
}
|
|
})
|
|
console.log(res)
|
|
if (res.data.code === 1) {
|
|
label.value = res.data.data
|
|
} else {
|
|
uin.showtoast({
|
|
icon: 'error',
|
|
title: '获取失败'
|
|
})
|
|
}
|
|
}
|
|
|
|
const goToText = (index) => {
|
|
uni.navigateTo({
|
|
url: "/pages/booking/CostumeDetails/CostumeDetails?info=" + JSON.stringify(label.value[index].id)
|
|
})
|
|
console.log(label.value[index].id)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mt-21 {
|
|
margin-top: 39.38rpx;
|
|
}
|
|
|
|
.ml-11 {
|
|
margin-left: 20.63rpx;
|
|
}
|
|
|
|
.mt-3 {
|
|
margin-top: 5.63rpx;
|
|
}
|
|
|
|
.mt-5 {
|
|
margin-top: 9.38rpx;
|
|
}
|
|
|
|
.page {
|
|
padding-top: 69.38rpx;
|
|
background-color: #f5f5dc;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.section {
|
|
margin: 0 18.75rpx;
|
|
padding: 37.5rpx 30rpx 129.38rpx;
|
|
background-color: #fffef8;
|
|
border-radius: 18.75rpx;
|
|
}
|
|
|
|
.text {
|
|
color: #000000;
|
|
font-size: 30rpx;
|
|
font-family: Open Sans;
|
|
line-height: 27.71rpx;
|
|
}
|
|
|
|
.list-item {
|
|
padding: 22.5rpx 22.5rpx 22.5rpx 30rpx;
|
|
background-color: #fff3c3;
|
|
border-radius: 9.38rpx;
|
|
}
|
|
|
|
.list-item:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.image_2 {
|
|
border-radius: 9.38rpx;
|
|
width: 148.13rpx;
|
|
height: 165rpx;
|
|
}
|
|
|
|
.group {
|
|
padding: 0 3.75rpx;
|
|
}
|
|
|
|
.font {
|
|
font-size: 18.75rpx;
|
|
font-family: Open Sans;
|
|
line-height: 17.44rpx;
|
|
color: #323232;
|
|
}
|
|
|
|
.image {
|
|
width: 15rpx;
|
|
height: 15rpx;
|
|
}
|
|
|
|
.font_2 {
|
|
font-size: 26.25rpx;
|
|
font-family: Open Sans;
|
|
line-height: 22.5rpx;
|
|
color: #323232;
|
|
}
|
|
|
|
.text_2 {
|
|
line-height: 24.26rpx;
|
|
}
|
|
|
|
.group_2 {
|
|
line-height: 22.5rpx;
|
|
}
|
|
|
|
.font_4 {
|
|
font-size: 18.75rpx;
|
|
font-family: Open Sans;
|
|
line-height: 22.5rpx;
|
|
color: #323232;
|
|
}
|
|
|
|
.font_3 {
|
|
font-size: 18.75rpx;
|
|
font-family: Open Sans;
|
|
line-height: 22.5rpx;
|
|
color: #828282;
|
|
}
|
|
|
|
.font_5 {
|
|
font-size: 33.75rpx;
|
|
font-family: Times New Roman;
|
|
line-height: 24.73rpx;
|
|
color: #ff3c3c;
|
|
}
|
|
|
|
.section_2 {
|
|
background-color: #fffef8;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.section_3 {
|
|
padding: 15rpx 0;
|
|
background-color: #ffc470;
|
|
width: 118.13rpx;
|
|
height: 114.38rpx;
|
|
}
|
|
|
|
.image_3 {
|
|
width: 52.5rpx;
|
|
height: 52.5rpx;
|
|
}
|
|
|
|
.text_4 {
|
|
color: #fffef8;
|
|
font-size: 26.25rpx;
|
|
font-family: Inter;
|
|
line-height: 24.17rpx;
|
|
}
|
|
|
|
.text-wrapper {
|
|
margin-right: 26.25rpx;
|
|
padding: 26.25rpx 0;
|
|
background-color: #fbb612;
|
|
border-radius: 75rpx;
|
|
height: 82.5rpx;
|
|
}
|
|
|
|
.text_3 {
|
|
color: #ffffff;
|
|
font-size: 30rpx;
|
|
font-family: Inter;
|
|
line-height: 27.86rpx;
|
|
}
|
|
|
|
@import url("../../../common/css/global.css");
|
|
</style> -->
|
|
|
|
|
|
<template>
|
|
<view class="flex-col justify-start relative page">
|
|
<view class="shrink-0 section"></view>
|
|
<view class="flex-col justify-start items-center text-wrapper pos"><text class="text">服装详情</text></view>
|
|
<view class="flex-col pos_2">
|
|
<view class="flex-row items-center list-item" v-for="(item, index) in label" :key="index" @click="goToText(index)">
|
|
<image class="shrink-0 image"
|
|
:src="item.image" />
|
|
<view class="flex-col flex-1 ml-5">
|
|
<text class="self-start font">{{item.name}}</text>
|
|
<text class="self-start font_2 text_2">
|
|
{{item.intro}}
|
|
</text>
|
|
<text class="self-end font_3 text_3">￥{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row justify-between items-center section_4 pos_3">
|
|
<view class="flex-col items-center">
|
|
<image class="image_2"
|
|
src="https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=a18599a262f28b8e3d504092795de649.png" />
|
|
<text class="text_5 mt-3">客服</text>
|
|
</view>
|
|
<view class="flex-col justify-start items-center text-wrapper_2"><text class="font text_4">现在去预约</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted
|
|
} from 'vue'
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
baseUrl
|
|
} from '../../../api/request';
|
|
const list = ref([{}])
|
|
const label = ref([{}])
|
|
onMounted(() => {
|
|
getLabel()
|
|
})
|
|
onLoad((options) => {
|
|
list.value = JSON.parse(options.info)
|
|
console.log(list.value, 'id')
|
|
})
|
|
const getLabel = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/clothesInfo/list/label',
|
|
method: 'POST',
|
|
header: {
|
|
cookie: wx.getAccountInfoSync('cookie')
|
|
},
|
|
data: {
|
|
id: list.value
|
|
}
|
|
})
|
|
console.log(res)
|
|
if (res.data.code === 1) {
|
|
label.value = res.data.data
|
|
} else {
|
|
uin.showtoast({
|
|
icon: 'error',
|
|
title: '获取失败'
|
|
})
|
|
}
|
|
}
|
|
|
|
const goToText = (index) => {
|
|
uni.navigateTo({
|
|
url: "/pages/booking/CostumeDetails/CostumeDetails?info=" + JSON.stringify(label.value[index].id)
|
|
})
|
|
console.log(label.value[index].id)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ml-5 {
|
|
margin-left: 9.38rpx;
|
|
}
|
|
.mt-3 {
|
|
margin-top: 5.63rpx;
|
|
}
|
|
.page {
|
|
background-color: #ffffff;
|
|
overflow: hidden;
|
|
background-image: url('https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=7f5f6eb3a306f1097a8541736adfb354.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=67610a10797f850011f30392&name=7f5f6eb3a306f1097a8541736adfb354.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 750rpx;
|
|
height: 1659.38rpx;
|
|
}
|
|
.text-wrapper {
|
|
padding: 26.25rpx 0 22.5rpx;
|
|
background-color: #ebe7e480;
|
|
}
|
|
.pos {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.text {
|
|
color: #000000;
|
|
font-size: 37.5rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 36.34rpx;
|
|
}
|
|
.pos_2 {
|
|
position: absolute;
|
|
left: 45rpx;
|
|
right: 37.5rpx;
|
|
top: 150rpx;
|
|
}
|
|
.list-item {
|
|
padding: 0 7.5rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 18.75rpx;
|
|
}
|
|
.image {
|
|
width: 161.25rpx;
|
|
height: 219.38rpx;
|
|
}
|
|
.font {
|
|
font-size: 28.13rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 27.69rpx;
|
|
color: #000000;
|
|
}
|
|
.font_2 {
|
|
font-size: 22.5rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 27.69rpx;
|
|
color: #00000099;
|
|
}
|
|
.text_2 {
|
|
margin-top: 18.75rpx;
|
|
line-height: 26.25rpx;
|
|
width: 427.5rpx;
|
|
}
|
|
.font_3 {
|
|
font-size: 28.13rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 18.79rpx;
|
|
color: #ff0707;
|
|
}
|
|
.text_3 {
|
|
margin-right: 18.75rpx;
|
|
}
|
|
.section_4 {
|
|
padding: 15rpx 45rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
.pos_3 {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
position: fixed;
|
|
bottom: 0;
|
|
}
|
|
.image_2 {
|
|
width: 46.88rpx;
|
|
height: 46.88rpx;
|
|
}
|
|
.text_5 {
|
|
color: #9d2624;
|
|
font-size: 22.5rpx;
|
|
font-family: Open Sans;
|
|
line-height: 20.72rpx;
|
|
}
|
|
.text-wrapper_2 {
|
|
margin-right: 22.5rpx;
|
|
padding: 30rpx 0 26.25rpx;
|
|
background-color: #e79ea1;
|
|
border-radius: 75rpx;
|
|
width: 466.14rpx;
|
|
height: 82.5rpx;
|
|
}
|
|
.text_4 {
|
|
color: #ffffff;
|
|
font-size: 30rpx;
|
|
line-height: 27.43rpx;
|
|
}
|
|
|
|
@import url("../../../common/css/global.css");
|
|
// </style> |