上传

api/api.js

@@ -195,6 +195,21 @@ const config = {
 		showLoading: true,
 	},
 	
+	
+	
+	//文创好物-获取商品详情
+	queryWaresById: {
+		url: '/wares/queryWaresById',
+		method: 'GET',
+		showLoading: true,
+	},
+	//文创好物-获取商品列表
+	queryWaresList: {
+		url: '/wares/queryWaresList',
+		method: 'GET',
+		showLoading: true,
+	},
+	
 }
 
 

pages_order/components/product/productList.vue

@@ -1,112 +1,129 @@
 <template>
 	<view class="list">
-		<view class="item"
-		v-for="(item, index) in 10"
-		@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
-		:key="index">
-			<image 
-			class="image"
-			src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode="aspectFill"></image>
+		<view class="item" v-for="(item, index) in list.records" @click="gotoProductDetail(item.id)" :key="index">
+			<image class="image" :src="item.waresImage" mode="aspectFill"></image>
 			<view class="info">
 				<view class="title">
-					桌布租赁
+					{{item.waresTitle}}
 				</view>
 				<view class="price">
-					<text>￥58</text>元/起
+					<text>￥{{item.waresPrice}}</text>元/起
 				</view>
 				<view class="favorable">
 					<view class="t">
 						限时优惠
 					</view>
 					<view class="p">
-						￥48
+						￥{{item.waresPrice * item.waresDiscount}}
 					</view>
 				</view>
 			</view>
 			<view class="btn">
-				<uv-icon name="shopping-cart"
-				color="#fff"></uv-icon>
+				<uv-icon name="shopping-cart" color="#fff"></uv-icon>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	import { mapState } from 'vuex'
+	import {
+		mapState
+	} from 'vuex'
 	export default {
-		name:"productList",
+		name: "productList",
+		props: ["list"],
 		data() {
 			return {
-				
+
 			};
 		},
-		computed : {
+		onShow() {
+
+		},
+		computed: {
+
 		},
-		methods : {
-			
+		methods: {
+			gotoProductDetail(id) {
+				uni.navigateTo({
+					url: '/pages_order/product/productDetail?id=' + id
+				})
+
+			}
 		},
 	}
 </script>
 
 <style scoped lang="scss">
-.list{
-	display: flex;
-	flex-wrap: wrap;
-	.item{
-		position: relative;
-		width: 300rpx;
-		padding: 20rpx;
-		background-color: #fff;
-		border-radius: 20rpx;
-		margin-top: 20rpx;
-		&:nth-child(odd){
-			margin-right: 20rpx;
-		}
-		.image{
+	.list {
+		display: flex;
+		flex-wrap: wrap;
+
+		.item {
+			position: relative;
 			width: 300rpx;
-			height: 250rpx;
+			padding: 20rpx;
+			background-color: #fff;
 			border-radius: 20rpx;
-		}
-		.info{
-			font-size: 26rpx;
-			.title{
-				font-size: 30rpx;
+			margin-top: 20rpx;
+
+			&:nth-child(odd) {
+				margin-right: 20rpx;
 			}
-			.price{
-				color: #D03F25;
-				margin-top: 6rpx;
-				text{
-					font-size: 34rpx;
-					font-weight: 900;
-				}
+
+			.image {
+				width: 300rpx;
+				height: 250rpx;
+				border-radius: 20rpx;
 			}
-			.favorable{
-				display: flex;
-				background-image: url(../../static/product/favorable.png);
-				background-size: 100% 100%;
-				width: fit-content;
-				padding: 5rpx 10rpx;
-				font-size: 18rpx;
-				margin-top: 6rpx;
-				.p{
-					color: #fff;
-					margin-left: 10rpx;
+
+			.info {
+				font-size: 26rpx;
+
+				.title {
+					font-size: 30rpx;
+				}
+
+				.price {
+					color: #D03F25;
+					margin-top: 6rpx;
+
+					text {
+						font-size: 34rpx;
+						font-weight: 900;
+					}
+				}
+
+				.favorable {
+					display: flex;
+					background-image: url(../../static/product/favorable.png);
+					background-size: 100% 100%;
+					width: fit-content;
+					padding: 5rpx 10rpx;
+					font-size: 18rpx;
+					margin-top: 6rpx;
+
+					.p {
+						color: #fff;
+						margin-left: 10rpx;
+					}
+				}
+
+				.num {
+					margin-top: 6rpx;
+					font-size: 22rpx;
+					color: #888;
 				}
 			}
-			.num{
-				margin-top: 6rpx;
-				font-size: 22rpx;
-				color: #888;
+
+			.btn {
+				position: absolute;
+				right: 20rpx;
+				bottom: 20rpx;
+				padding: 10rpx;
+				border-radius: 50%;
+				background-color: $uni-color;
 			}
 		}
-		.btn{
-			position: absolute;
-			right: 20rpx;
-			bottom: 20rpx;
-			padding: 10rpx;
-			border-radius: 50%;
-			background-color: $uni-color;
-		}
 	}
-}
 </style>

pages_order/mine/volunteer.vue

@@ -17,6 +17,8 @@
 						</template>
 					</uv-input>
 				</view>
+				<view>
+				</view>
 				<view>
 					<uv-input placeholder="请输入证件号码" border="none" fontSize="28rpx"
 						:custom-style="{backgroundColor: '#fff'}">

pages_order/product/productDetail.vue

@@ -1,24 +1,21 @@
 <template>
 	<view class="page">
 		<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" />
-		
+
 		<view class="swipe">
-			<uv-swiper 
-			:list="productDetail.image.split(',')" 
-			indicator
-			height="350rpx"></uv-swiper>
+			<uv-swiper :list="productDetailList.waresImage.split(',')" indicator height="350rpx"></uv-swiper>
 		</view>
-		
+
 		<view class="info">
 			<view class="title">
-				桌布租赁
+				{{productDetailList.waresTitle}}
 			</view>
 			<view class="info-line">
 				<view class="price">
-					￥<text>45.9</text>起
+					￥<text>{{productDetailList.waresPrice}}</text>起
 				</view>
 				<view class="num">
-					已售1000+
+					{{productDetailList.waresSales}}
 					<image src="../static/product/like.png" mode=""></image>
 				</view>
 			</view>
@@ -34,35 +31,33 @@
 				</view>
 			</view>
 		</view>
-		
+
 		<view class="info-unit">
 			<uv-cell title="服务" isLink>
 				<template #icon>
 					<text class="text">免费上门退·7天无理由退货·快递发货</text>
 				</template>
 			</uv-cell>
-			
+
 			<uv-cell title="参数" isLink>
 				<template #icon>
 					<text class="text">品牌；适应人群</text>
 				</template>
 			</uv-cell>
 		</view>
-		
+
 		<view class="content">
 			<view class="title">
 				详情
 			</view>
 			<uv-parse :content="productDetail.content"></uv-parse>
 		</view>
-		
+
 		<!-- 分享和租赁按钮 -->
-		<submit 
-		@submit="$refs.submitUnitSelect.open()"
-		@share="share"/>
-		
+		<submit @submit="$refs.submitUnitSelect.open()" @share="share" />
+
 		<!-- 选择规格 -->
-		<submitUnitSelect ref="submitUnitSelect"/>
+		<submitUnitSelect ref="submitUnitSelect" />
 	</view>
 </template>
 
@@ -70,94 +65,120 @@
 	import submit from '../components/product/submit.vue'
 	import submitUnitSelect from '../components/product/submitUnitSelect.vue'
 	export default {
-		components : {
+		components: {
 			submit,
 			submitUnitSelect
 		},
 		data() {
 			return {
-				productDetail : {
-					image : 'https://cdn.uviewui.com/uview/swiper/swiper3.png,https://cdn.uviewui.com/uview/swiper/swiper2.png',
-					content : '',
+				productDetail: {
+					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png,https://cdn.uviewui.com/uview/swiper/swiper2.png',
+					content: '',
+					productId: '',
+					productDetailList:''
 				},
 			}
 		},
 		onLoad(args) {
-			console.log(args);
+			this.productId = args.id
+			this.queryWaresById()
 		},
 		methods: {
 			// 分享商品
-			share(){
-				
+			share() {
+
 			},
 			// 选择完成规格立即租赁下单
-			submit(){
-				
+			submit() {
+
+			},
+			queryWaresById() {
+				this.$api('queryWaresById', {
+						waresId: this.productId
+					},
+					res => {
+						if (res.code == 200) {
+							console.log(res);
+							this.productDetailList = res.result
+						}
+					})
 			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-.page{
-	.swipe{
-		
-	}
-	.info{
-		padding: 30rpx;
-		background-color: #fff;
-		.title{
-			font-size: 34rpx;
-			font-weight: 900;
-		}
-		.info-line{
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			margin-top: 30rpx;
-			.price{
-				font-size: 28rpx;
-				color: $uni-color;
-				text{
-					font-size: 34rpx;
+	.page {
+		.swipe {}
+
+		.info {
+			padding: 30rpx;
+			background-color: #fff;
+
+			.title {
+				font-size: 34rpx;
+				font-weight: 900;
+			}
+
+			.info-line {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 30rpx;
+
+				.price {
+					font-size: 28rpx;
+					color: $uni-color;
+
+					text {
+						font-size: 34rpx;
+					}
+				}
+
+				.num {
+					font-size: 24rpx;
+
+					image {
+						width: 24rpx;
+						height: 24rpx;
+					}
 				}
 			}
-			.num{
-				font-size: 24rpx;
-				image{
-					width: 24rpx;
-					height: 24rpx;
+
+			.tips {
+				display: flex;
+				font-size: 20rpx;
+				margin-top: 30rpx;
+
+				.tip {
+					margin-right: 40rpx;
 				}
 			}
 		}
-		.tips{
-			display: flex;
-			font-size: 20rpx;
-			margin-top: 30rpx;
-			.tip{
-				margin-right: 40rpx;
+
+		.info-unit {
+			margin-top: 20rpx;
+			padding: 30rpx;
+			background-color: #fff;
+
+			/deep/ text {
+				font-size: 26rpx;
+			}
+
+			/deep/ .text {
+				color: #7C7C7C;
+				margin-right: 20rpx;
+				font-size: 26rpx;
 			}
 		}
-	}
-	.info-unit{
-		margin-top: 20rpx;
-		padding: 30rpx;
-		background-color: #fff;
-		/deep/ text{
-			font-size: 26rpx;
-		}
-		/deep/ .text{
-			color: #7C7C7C;
-			margin-right: 20rpx;
-			font-size: 26rpx;
-		}
-	}
-	.content{
-		background-color: #fff;
-		margin-top: 20rpx;
-		.title{
-			padding: 30rpx;
+
+		.content {
+			background-color: #fff;
+			margin-top: 20rpx;
+
+			.title {
+				padding: 30rpx;
+			}
 		}
 	}
-}
-</style>
+</style>

pages_order/product/productList.vue

@@ -2,27 +2,19 @@
 	<view class="page">
 		<navbar title="文创好物" leftClick @leftClick="$utils.navigateBack" />
 		<view class="search">
-			<uv-search
-			placeholder="请输入搜索服务" 
-			:showAction="false"
-			search-icon-size="40rpx"
-			v-model="keyword"></uv-search>
+			<uv-search placeholder="请输入搜索服务" :showAction="false" search-icon-size="40rpx" v-model="keyword"></uv-search>
 		</view>
 		<view class="dropDown">
-			<uv-tabs :list="tabs"
-			lineColor="#B12026"
-			lineHeight="8rpx"
-			lineWidth="50rpx"
-			:scrollable="false"
-			@click="clickTabs"></uv-tabs>
+			<uv-tabs :list="tabs" lineColor="#B12026" lineHeight="8rpx" lineWidth="50rpx" :scrollable="false"
+				@click="clickTabs"></uv-tabs>
 		</view>
-		
+
 		<view class="list">
-			<productList/>
+			<productList :list="list" />
 		</view>
-		
-		<cartAction/>
-		<tabber/>
+
+		<cartAction />
+		<tabber />
 	</view>
 </template>
 
@@ -30,14 +22,13 @@
 	import cartAction from '../components/product/cartAction.vue'
 	import productList from '../components/product/productList.vue'
 	export default {
-		components : {
+		components: {
 			productList,
 			cartAction,
 		},
 		data() {
 			return {
-				tabs: [
-					{
+				tabs: [{
 						name: '综合'
 					},
 					{
@@ -54,9 +45,13 @@
 					pageNo: 1,
 					pageSize: 10,
 				},
-				state : 0,
+				list: [],
+				state: 0,
 			}
 		},
+		onShow() {
+			this.getProductList()
+		},
 		methods: {
 			//点击tab栏
 			clickTabs(index) {
@@ -67,24 +62,37 @@
 				}
 				// this.getOrderList()
 			},
+			getProductList() {
+				this.$api('queryWaresList', this.queryParams,
+					res => {
+						if (res.code == 200) {
+							this.list = res.result
+							console.log(this.list);
+						}
+					})
+			}
+
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-.page{
-	.search{
-		background-color: #fff;
-		padding: 20rpx 30rpx;
-		/deep/ .uv-search__content__icon{
-			padding: 15rpx 0;
+	.page {
+		.search {
+			background-color: #fff;
+			padding: 20rpx 30rpx;
+
+			/deep/ .uv-search__content__icon {
+				padding: 15rpx 0;
+			}
+		}
+
+		.dropDown {
+			background-color: #fff;
+		}
+
+		.list {
+			padding: 0 20rpx;
 		}
 	}
-	.dropDown{
-		background-color: #fff;
-	}
-	.list{
-		padding: 0 20rpx;
-	}
-}
-</style>
+</style>