first commit

pageInvest/shop/details.vue

@@ -0,0 +1,139 @@
+<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>