161 lines
3.7 KiB
Vue
161 lines
3.7 KiB
Vue
<template>
|
|
<view class="detail-container">
|
|
<u-navbar id="uNavbarId" title="商品详情" :background="{background: 'transparent' }" :border-bottom="false"
|
|
back-icon-color="#000" title-color="#000">
|
|
<template v-slot:right>
|
|
<image class="collection" src="/static/icon/Settings.png" mode=""></image>
|
|
</template>
|
|
</u-navbar>
|
|
<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
|
|
111
|
|
</scroll-view>
|
|
|
|
<view class="bottom-view" id="bottomViewId">
|
|
<view class="icon-btn">
|
|
<view class="item">
|
|
<u-image width="100%" :fade="false" src="/static/mall/Home.png" mode="widthFix"></u-image>
|
|
店铺
|
|
</view>
|
|
<view class="item">
|
|
<u-image width="100%" :fade="false" src="/static/mall/Twitch.png" mode="widthFix"></u-image>
|
|
客服
|
|
</view>
|
|
<view class="item">
|
|
<u-image width="100%" :fade="false" src="/static/mall/Star.png" mode="widthFix"></u-image>
|
|
收藏
|
|
</view>
|
|
</view>
|
|
<view class="text-btn">
|
|
<u-button class="add-car common" :hair-line="false" hover-class="none">加入购物车</u-button>
|
|
<u-button class="buy common" :hair-line="false" hover-class="none">领券购买</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, getCurrentInstance } from 'vue';
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app';
|
|
import { mallAPI } from '../../api/mall';
|
|
|
|
const instance = getCurrentInstance();
|
|
const scrollHeight = ref(0)
|
|
const loadHeight = () => {
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
let screenHeight = res.screenHeight
|
|
uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((data : any) => {
|
|
scrollHeight.value = screenHeight - data.height
|
|
}).exec()
|
|
uni.createSelectorQuery().in(instance.proxy).select("#bottomViewId").boundingClientRect((data : any) => {
|
|
scrollHeight.value = scrollHeight.value - data.height
|
|
}).exec()
|
|
}
|
|
})
|
|
}
|
|
|
|
const dataId = ref()
|
|
|
|
const loadData = () => {
|
|
mallAPI.getMallDetail(dataId.value).then(res => {
|
|
console.log(res);
|
|
})
|
|
}
|
|
|
|
onLoad((val) => {
|
|
dataId.value = val.id
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadHeight()
|
|
loadData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.detail-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
|
|
|
|
|
|
.collection {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.bottom-view {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 116rpx;
|
|
background: #F5F8FF;
|
|
padding: 0 29rpx;
|
|
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.icon-btn {
|
|
display: flex;
|
|
width: 228rpx;
|
|
width: 30%;
|
|
flex-wrap: nowrap;
|
|
|
|
.item {
|
|
margin-right: 20rpx;
|
|
white-space: nowrap;
|
|
|
|
font-family: Work Sans;
|
|
font-weight: 400;
|
|
font-style: Regular;
|
|
font-size: 26rpx;
|
|
leading-trim: NONE;
|
|
line-height: 100%;
|
|
letter-spacing: -2%;
|
|
}
|
|
}
|
|
|
|
.text-btn {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
|
|
.common {
|
|
border: none;
|
|
width: 200rpx;
|
|
height: 70rpx;
|
|
margin: 0;
|
|
color: #fff;
|
|
font-family: Work Sans;
|
|
font-weight: 400;
|
|
font-style: Regular;
|
|
font-size: 26rpx;
|
|
leading-trim: NONE;
|
|
line-height: 100%;
|
|
letter-spacing: -2%;
|
|
}
|
|
|
|
.buy {
|
|
background: #6287FF;
|
|
border-top-right-radius: 12rpx;
|
|
border-bottom-right-radius: 12rpx;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.add-car {
|
|
background: #A8BCFF;
|
|
border-top-right-radius: 0rpx;
|
|
border-bottom-right-radius: 0rpx;
|
|
border-top-left-radius: 12rpx;
|
|
border-bottom-left-radius: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |