Browse Source

详情页面

lilei 10 months ago
parent
commit
4635d3e727

+ 2 - 1
pages.json

@@ -484,7 +484,8 @@
 			"path" : "shopiing/productDetail",
 			"style" : 
 			{
-				"navigationBarTitleText" : "商品详情"
+				"navigationBarTitleText" : "商品详情",
+				"navigationStyle": "custom"
 			}
 		}
 		]

+ 1 - 1
pages/index/index.vue

@@ -79,7 +79,7 @@
 						<u-swiper mode="dot" bg-color="" img-mode="widthFix" @click="clickBanner" :interval="3000" :height="hasShopiing?280:374" :list="imgList"></u-swiper>
 					</view>
 					<!-- 快捷导航 -->
-					<view class="quick-nav pa-box" v-if="hasShopiing">
+					<view class="quick-nav pa-box" v-if="hasShopiing&&navList.length">
 						<iconItemsList :list="navList" @callback="onNavFun"></iconItemsList>
 					</view>
 					<!-- 产品分类 -->

+ 11 - 1
pagesB/components/chooseProductItemSkline.vue

@@ -3,6 +3,7 @@
 		<view class="choose-product-item"
 		v-for="(item, dix) in list"
 		:key="item.id" 
+		@click="toDetail(item)"
 		>
 			 <view>
 				 <view class="choose-product-item-img">
@@ -15,7 +16,7 @@
 					<view class="choose-product-item-left-info-guige ellipsis-two">{{item.productOrigCode}}</view>
 					<view class="choose-product-item-left-info-price">
 						<view class="price-txt">¥<text>{{item.cost}}</text></view>
-						<view>
+						<view v-if="!isView">
 							<uni-number-box v-if="!edit" v-model="item.qty" :min="1" :max="999999" @change="v=>{changeQty(v,item.id)}"></uni-number-box>
 							<view v-else class="edit-qty">
 								X <text>{{item.qty}}</text>
@@ -48,6 +49,10 @@
 			edit: {
 				type: Boolean,
 				default: false
+			},
+			isView: {
+				type: Boolean,
+				default: false
 			}
 		},
 		data() {
@@ -60,6 +65,11 @@
 			},
 			remove(id){
 				this.$emit('remove',id)
+			},
+			toDetail(item){
+				uni.navigateTo({
+						url: '/pagesB/shopiing/productDetail?sn='+item.productSn
+					})
 			}
 		}
 	}

+ 403 - 1
pagesB/shopiing/productDetail.vue

@@ -1,8 +1,410 @@
 <template>
+	<view class="pages">
+		<!-- head -->
+		<view class="scrollPage-header">
+			<view :style="{height:statusBarHeight+'px'}"></view>
+			<view class="header-title">
+				<view class="header-left" @click="goBack">
+					<image style="width: 16px; height: 16px;margin-right:3px;" mode="aspectFit" src="../static/arrow-left.png"></image>
+					<text>返回</text>
+				</view>
+				<view class="header-right"></view>
+			</view>
+		</view>
+		<!-- 内容 -->
+		<view class="scrollPage-content">
+			<view class="product-info">
+				<view :style="{height:statusBarHeight+'px'}"></view>
+				<u-swiper mode="number" :border-radius="0" bg-color="#000" img-mode="heightFix" :interval="3000" :height="450" :list="imgList"></u-swiper>
+				<view class="product-info-text">
+					<view class="product-info-text-title">【新品】Apple iPhone 13 Pro Max (A2644) 256GB 金色 支持移动联通电信5G 双卡双待手机</view>
+					<view class="product-info-text-attr">
+						<view class="product-info-price">
+							¥<text class="price-red">45.8</text>
+						</view>
+						<view class="product-info-nums">
+							<view @click="share"><u-icon :size='24' name="zhuanfa"></u-icon> 分享</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<u-divider bg-color="">商品详情</u-divider>
+			<view class="product-info-guige">
+				<view class="row">品牌:<text>箭冠</text></view>
+				<view class="row-ban">原厂编码:<text>128/79 R78 </text></view>
+				<view class="row-ban">产品编码:<text>Y123</text></view>
+				<view class="row-ban">单位:<text>箱</text></view>
+				<view class="row-ban">包装数:<text>5/个</text></view>
+				<view class="row-ban">尺寸:<text>16cm</text></view>
+				<view class="row-ban">内盒尺寸:<text>15cm</text></view>
+				<view class="row-ban">重量:<text>1.5KG</text></view>
+				<view class="row-ban">颜色:<text>箭冠</text></view>
+			</view>
+			<view class="product-info-content"></view>
+		</view>
+		<!-- 底部栏 -->
+		<view class="scrollPage-footer">
+			<view class="scrollPage-footer-box">
+				<view class="footer-left">
+					<view class="footer-left-item" @click="toCart">
+						<u-icon :size='40' name="shopping-cart"></u-icon>
+						<text class="footer-left-item-text">购物车</text>
+						<text class="badge" v-if="totalNum">{{totalNum>99?'99+':totalNum}}</text>
+					</view>
+				</view>
+				<view class="footer-right">
+					<view class="footer-right-item" @click="addCart">
+						<text>加入购物车</text>
+					</view>
+					<view class="footer-right-item" @click="toBuy">
+						<text>立即购买</text>
+					</view>
+				</view>
+			</view>
+			<view :style="{height:safeAreaBottom+'px'}"></view>
+		</view>
+		<!-- 立即购买 -->
+		<page-container
+		:show="showPopu" 
+		:round="true"
+		:z-index="100"
+		position="bottom" 
+		custom-style="height:30%"
+		@afterleave="closePopu">
+			<view class="popu-content">
+				<view class="popu-close" @click="showPopu=false">
+					<icon type="clear" size="24"></icon>
+				</view>
+				<view class="pupu-box">
+					<view class="popu-content-img">
+						<image style="width: 100px; height: 100px;" mode="aspectFit" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
+					</view>
+					<view class="popu-content-info">
+						<view class="popu-content-info-title">【新品】Apple iPhone 13 Pro Max (A2644) 256GB 金色 支持移动联通电信5G 双卡双待手机</view>
+						<view class="popu-content-box">
+							<view class="popu-content-price">¥<text class="price-red">45.8</text></view>
+							<view class="popu-content-num">
+								<text>数量</text>
+								<u-number-box :min="1" :max="99"></u-number-box>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="popu-content-btn">
+					<view class="popu-content-btn-item" @click="toBuy">确定采购</view>
+				</view>
+				<view :style="{height:safeAreaBottom+'px'}"></view>
+			</view>
+		</page-container>
+	</view>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				showPopu: false, // 弹框
+				statusBarHeight: 0, // 状态栏高度
+				safeAreaBottom: 0, // 底部安全区域高度
+				imgList: [
+					'https://cdn.uviewui.com/uview/swiper/1.jpg',
+					'https://cdn.uviewui.com/uview/swiper/2.jpg',
+					'https://cdn.uviewui.com/uview/swiper/3.jpg',
+					'https://cdn.uviewui.com/uview/swiper/1.jpg',
+					'https://cdn.uviewui.com/uview/swiper/2.jpg',
+				],
+				totalNum: 0 // 购物车总数
+			}
+		},
+		onLoad() {
+			// 计算安全区域
+			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
+		},
+		onShareAppMessage() {},
+		methods: {
+			// 返回
+			goBack(){
+				uni.navigateBack()
+			},
+			// 分享
+			share(){
+				uni.share({
+					provider: "weixin",
+					title:"产品标题",
+					scene: "WXSceneSession",
+					type: 0,
+					imageUrl: "https://cdn.uviewui.com/uview/swiper/1.jpg",
+					success: function (res) {
+						console.log("success:" + JSON.stringify(res));
+					},
+					fail: function (err) {
+						console.log("fail:" + JSON.stringify(err));
+					}
+				});
+			},
+			// 加入购物车
+			addCart(){
+				
+			},
+			// 打开购物车
+			toCart(){
+				uni.switchTab({
+					url: '/pages/cart/index'
+				})
+			},
+			// 立即购买
+			toBuy(){
+				// 打开数量选择弹框
+				if(!this.showPopu){
+					this.showPopu = true
+				}else{
+					// 提交
+					this.submitOk = true
+				}
+			},
+			// 关闭后
+			closePopu(){
+				this.showPopu = false
+				uni.hideLoading()
+				
+				// 提交成功
+				if(this.submitOk){
+					uni.navigateTo({
+						url: "/pagesB/procureOrder"
+					})
+				}
+			},
+		}
+	}
 </script>
 
-<style>
+<style lang="less">
+	.pages {
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		.scrollPage-header{
+			z-index: 1;
+			width: 100%;
+			position:fixed;
+			left: 0;
+			top: 0;
+			.header-title{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 0 10px;
+				height: 44px;
+				.header-left{
+					display: flex;
+					align-items: center;
+					text{
+						font-size: 14px;
+						color: #333333;
+					}
+					background-color: rgba(255,255,255,0.6);
+					box-shadow: 0px 1px 0px 0px #E6E6E6;
+					border-radius: 50px;
+					padding: 3px 6px 3px;
+				}
+				.header-right{
+					width: 50px;
+				}
+			}
+		}
+		.scrollPage-content{
+				flex: 1;
+				overflow-y: auto;
+				.product-info{
+					background:#fff;
+					margin-bottom: 10px;
+					.product-info-text{
+						padding: 10px;
+						.product-info-text-title{
+							font-weight: bold;
+							color: #333333;
+							line-height: 22px;
+							margin-bottom: 5px;
+						}
+						.product-info-text-attr{
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							.product-info-price{
+								font-size: 14px;
+								color: #FF0000;
+								.price-red{
+									font-size: 24px;
+								}
+							}
+							.product-info-nums{
+								font-size: 12px;
+								color: #999999;
+							}
+						}
+					}
+				}
+				.product-info-guige{
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-between;
+					background:#fff;
+					margin: 10px 0;
+					padding: 10px;
+					line-height: 28px;
+					.row{
+						width: 100%;
+					}
+					.row-ban{
+						width: 50%;
+					}
+					>view{
+						color: #999;
+						text{
+							color: #333333;
+						}
+					}
+				}
+				.product-info-content{
+					background:#fff;
+					margin-bottom: 10px;
+					padding: 10px;
+					line-height: 28px;
+				}
+		}
+		.scrollPage-footer{
+			background-color: #FFFFFF;
+			width: 100%;
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			.scrollPage-footer-box{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				height: 50px;
+			}
+			.footer-left{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 35%;
+				.footer-left-item{
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					padding: 0 15px;
+					position: relative;
+					.footer-left-item-text{
+						font-size: 12px;
+						color: #666666;
+						margin-top: 3px;
+					}
+					.badge{
+						background: #f44336;
+						color: #fff;
+						position: absolute;
+						right: 0;
+						top: -8px;
+						font-size: 12px;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						border-radius: 50rpx;
+						padding: 0 10rpx;
+					}
+				}
+			}
+			.footer-right{
+				width: 60%;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				.footer-right-item{
+					height: 100%;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					width: 50%;
+					font-size: 14px;
+					color: #FFFFFF;
+				}
+				.footer-right-item:first-child{
+					background-color: #FF9900;
+				}
+				.footer-right-item:last-child{
+					background-color: #FF0000;
+				}
+			}
+		}
+		
+		.popu-content{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				padding: 10px;
+				.popu-close{
+					padding: 10px;
+					position: absolute;
+					right: 0;
+					top: 0;
+				}
+				.pupu-box{
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-top: 25px;
+				}
+				.popu-content-img{
+					border-radius: 10px;
+					border: 1px solid #eee;
+				}
+				.popu-content-info{
+					padding: 0 0 0 10px;
+					.popu-content-info-title{
+						font-size: 14px;
+						font-weight: bold;
+					}
+				}
+				.popu-content-box{
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-top: 10px;
+					.popu-content-price{
+						font-size: 14px;
+						color: #FF0000;
+						.price-red{
+							font-size: 24px;
+						}
+					}
+					.popu-content-num{
+						font-size: 12px;
+						color: #999999;
+						margin-top: 5px;
+					}
+				}
+				.popu-content-btn{
+					width: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-top: 10px;
+					.popu-content-btn-item{
+						width: 100%;
+						height: 40px;
+						background-color: #FF0000;
+						color: #FFFFFF;
+						font-size: 14px;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						border-radius: 10px;
+					}
+				}
+		}
+	}
 </style>

+ 4 - 4
pagesB/shopiing/searchProduct.vue

@@ -40,17 +40,16 @@
 					:key="item.id"  
 					:index="index"
 					:list="item" 
-					:edit="editChoose" 
 					>
 					</chooseProductItem>
 					<!-- loading -->
 					<view class="loading-bar" v-if="list.length && (loading||loadEnd)">{{loadText}}</view>
 					<view class="empty-bar" v-if="total==0&&!loading">
 						<image mode="aspectFit" :src="empty.imgUrl"></image>
-						<view v-if="queryWord!=''">{{empty.tip}}</view>
+						<view v-if="queryWord!=''&&clzId!=''">{{empty.tip}}</view>
 					</view>
 					<!-- 搜索记录 -->
-					<view class="search-history" v-if="historyList.length&&queryWord==''">
+					<view class="search-history" v-if="historyList.length&&queryWord==''&&clzId==''">
 						<view class="search-history-title">
 							<text>搜索记录</text>
 							<image @click="clearHistory" style="width: 30px; height: 30px;" mode="aspectFit" src="../static/del.png"></image>
@@ -111,10 +110,11 @@
 			if(opts.clzId==''){
 				this.title = '商城商品搜索'
 				this.queryWord = opts.queryWord
-				this.searchList()
 			}else{
 				this.title = opts.clzName
 			}
+			this.searchList()
+			
 			// 计算区域高度
 			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
 			this.screenWidth = uni.getSystemInfoSync().windowWidth