139 lines
3.1 KiB
Vue
139 lines
3.1 KiB
Vue
<template>
|
||
<view class="shop">
|
||
<!-- <view class="orderdetail_header p30">
|
||
<view :style="{ height: statusBarHeight }"></view>
|
||
<view style="height: 44px; display: flex; align-items: center" @click="">
|
||
<up-icon name="arrow-left" bold color="#000" @click="back"></up-icon>
|
||
<view @click="back" style="margin-left: 25rpx; transition: all 0.5s">商品详情</view>
|
||
</view>
|
||
</view> -->
|
||
<up-swiper :list="[shop.cover]" height="759rpx"></up-swiper>
|
||
<view class="p30">
|
||
<view class="shop_info">
|
||
<view class="shop_info_mon">￥ {{ shop.currentPrice }}</view>
|
||
<view class="shop_info_tit">{{ shop.name }}</view>
|
||
<view class="shop_info_note">
|
||
库存：{{ shop.stock }}
|
||
<view style="width: 50rpx"></view>
|
||
销量：{{ shop.sales }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="margin: 30rpx 0; font-size: 30rpx; color: #333; text-align: center">详情介绍</view>
|
||
<image style="width: 100%" mode="widthFix" :src="item" v-for="(item, index) in shop.detail.split(',')" :key="index"></image>
|
||
<view style="height: 150rpx"></view>
|
||
<view class="shop_btn">
|
||
<!-- <view>
|
||
<view>首页</view>
|
||
</view>
|
||
<view>
|
||
<view>客服</view>
|
||
</view> -->
|
||
<view class="shop_btn_btn" @click="navTo(`/pageInvest/shop/affirm?id=${shop.id}`)">立即下单</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed } from 'vue';
|
||
import { useNav } from '@/hooks/useNav.js';
|
||
import { shopInfo } from '@/api/api.js';
|
||
let shop = ref({});
|
||
|
||
const { nav, navTo } = useNav();
|
||
|
||
const headerBg = ref(false);
|
||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||
|
||
const list3 = ref(['/static/图层 979.png']);
|
||
|
||
onLoad(async (options) => {
|
||
console.log(options);
|
||
let _res = await shopInfo({
|
||
goodId: options.id
|
||
});
|
||
shop.value = _res;
|
||
});
|
||
|
||
const back = () => {
|
||
uni.navigateBack();
|
||
};
|
||
|
||
onPageScroll((e) => {
|
||
if (e.scrollTop > uni.getSystemInfoSync().statusBarHeight + 44) {
|
||
headerBg.value = true;
|
||
} else {
|
||
headerBg.value = false;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background: #f7f7f7;
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="scss">
|
||
.orderdetail_header {
|
||
width: 750rpx;
|
||
transition: all 0.5s;
|
||
}
|
||
|
||
.shop_btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 20rpx 60rpx 30rpx;
|
||
width: 750rpx;
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
&_btn {
|
||
width: 496rpx;
|
||
// height: 64rpx;
|
||
padding: 15rpx;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 2rpx solid #002ea4;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #002ea4;
|
||
}
|
||
}
|
||
|
||
.shop_info {
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 8rpx;
|
||
margin-top: 30rpx;
|
||
&_mon {
|
||
font-weight: bold;
|
||
font-size: 44rpx;
|
||
color: #ff1a1a;
|
||
}
|
||
&_tit {
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
color: #232323;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
&_note {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
</style> |