ctxx-xcx/ctxx_xcx/pages/index/index.vue

<template>
	<view class="content">

		<nav-bar :navIndex="0"></nav-bar>
		<view class="swiper">
				<swiper
					  indicator-dots
					  indicator-active-color="#FFFFFF"
					  circular
					  autoplay
					>
						<swiper-item
						  v-for="item in rotation"

						>

							<image class="swiper-img" :src="item.cover"></image>
						</swiper-item>
					</swiper>
		</view>
		<view @click="navTaps" v-if="status!=''">
			<wyb-noticeBar :text=array :wdithFix="630" />
		</view>

 
		<view class="titles" v-if="goodsList!=''">
			<view class="lines"></view>
			<view class="views">深度洗护</view>
			<view class="lines" style="margin-left: 20rpx;"></view>
		</view>
		<view class="title-texts" v-if="goodsList!=''">5双及以上，工作人员将上门取货</view>
		<view class="content-s" v-for="(item,index) in goodsList" >
			<view class="cate-goods">
				<view class="sort-goods">
					<scroll-view  class="uni-swiper-tab" scroll-x>
						<view class="shop-lists" v-for="(items,indexs) in item.list"  @click="shopNavTaps(item,indexs,index)">
							<view class="name" :class="indexs==items.sortIndex?'nameStyles':''">{{items.title}}</view>
							<view class="icons" v-if="indexs==shopIndex">
								<img src="/static/index/index_icons.png" alt="">
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="cate-content">
					<view class="goods-top">
						<view class="images">
							<image :src="item.list[item.indexs].logo"></image>
						</view>
						<view class="rights">
							<view class="name">{{item.list[item.indexs].title}}</view>
							<view class="box-list">
								<view class="boxs"  @click="boxTaps(indexs,index,item)"
								:class="indexs==items.checkIndex?'nameStyle':''"
								v-for="(items,indexs) in item.list[item.indexs].ladder_set">
									{{items.title}}
								</view>
							</view>
							<view class="price"><size>¥</size>
								{{item.list[item.indexs].ladder_set[item.checkIndexs].price}}
							</view>
						</view>
					</view>
					<view class="image-photo">
						<view class="title">照片</view>
						<view class="image">
							<view class="image-lists" v-for="(itemss,indexss) in goodsList[index].imageList" :key="indexss">
								<view class="img-width" v-if="itemss==''" @click="upLoadImg(index,indexss)">
									<view class="photo-img">
										<image src="../../static/index/photo-icon.png"></image>
									</view>
								</view>
								<view v-else>
									<view class="imgeLists">
										<view class="close" @click="close(index,indexss)">
											<image src="/static/index/close.png"></image>
										</view>
										<image :src="itemss"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="image-photo">
						<view class="title">备注信息</view>
						<textarea v-model="item.remark" class="textarea" placeholder="备注信息…"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="add-cate" @click="addGoodsCate" v-if="goodsList!=''">
			<view class="add-icon">
				<image src="/static/index/add-icon.png" alt=""></image>
				<view class="names">再加一双</view>
			</view>
		</view>
		<view class="titles" v-if="shopInfo!=''">
			<view class="lines"></view>
			<view class="views">店铺信息</view>
			<view class="lines" style="margin-left: 20rpx;"></view>
		</view>
		<view class="index-bottoms">
			<view class="shop-banner">
				<img :src="shopInfo.app_logo" alt="">
			</view>
			<view class="shop-detail" v-if="shopInfo!=''">
				<view class="views">
					<view class="shop-icons">
						<img src="/static/index/phone-icon.png" alt="">
					</view>
					<view class="texts">{{shopInfo.service_phone}}</view>
				</view>
				<view class="views">
					<view class="shop-icons">
						<img src="/static/index/eimail-icon.png" alt="">
					</view>
					<view class="texts">{{shopInfo.service_email}}</view>
				</view>
				<view class="views">
					<view class="shop-icons">
						<img src="/static/index/address-icon.png" alt="">
					</view>
					<view class="texts">{{shopInfo.app_address}}</view>
				</view>
			</view>
		</view>
		<view class="bottom-s" v-if="goodsList!=''">
			<view class="shopping">
				<img src="../../static/index/shopping-icon.png">
				<text>{{goodsList.length}}</text>
			</view>
			<view class="money">¥{{shoppingPrice}}</view>
			<view class="buttons" @click="submits">去结算</view>
		</view>


	</view>
</template>

<script>
	import __config from 'config/env';
	import api from 'utils/api'
	import wybNoticeBar from '@/components/wyb-noticeBar/wyb-noticeBar.vue'
	import navBar from '@/components/nav-bar/nav-bar.vue'
	export default {
		components:{wybNoticeBar,navBar},
		data() {
			return {
				status:'',
				cateIndex:0,
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						count: 2,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill", 
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
					},
				],
				current: 0,
				texts:{

				},
				shopIndex:0,
				goodsList:[],
				shopInfo:'',
				indexNav:0,
				array:[''],
				title: 'Hello',
				template:'',//添加默认模板
				rotation: [

				],
				shoppingCart:'',
				shoppingPrice:'',
			}
		},
		onLoad() {
			uni.showLoading({
				title:"正在加载",				
			})
			
			this.getBanner();
			this.getShopSet();
			this.getGoodsSort();
			this.sysConfig();
		},
		methods: {
			navTaps(){
				uni.navigateTo({
					url:"/pages/indexNotice/index"
				})
			},
			sysConfig(){
				api.getSysConfig({"search_name":"notice_title"}).then((res)=>{
						if(res.code==1){
							this.array[0]=res.data.notice_title;
							this.status=res.data
					}
				})
			},
			submits(){
				for(let i=0;i<this.goodsList.length;i++){
					for(let j=0;j<this.goodsList[i].imageList.length;j++){
						this.goodsList[i].imageLiss=this.goodsList[i].imageList;
						this.goodsList[i].imageLiss = this.goodsList[i].imageLiss.filter((item) => {
							return item != ''
						})
					}
				}
				uni.navigateTo({
					url:"/pages/shopesOrder/index?price="+this.shoppingPrice
				})
				uni.setStorageSync("goodsList",JSON.stringify(this.goodsList))

			},
			fomatFloat(num){
				 var result = parseFloat(num);
				  if (isNaN(result)) {
				     alert('传递参数错误，请检查！');
				     return false;
				  }
				  result = Math.round(num * 100) / 100;
				  return result;


			},
			//计算商品的价格
			getUserPrice(){
				let count=this.shoppingPrice;
				let price=0;
				for(let i=0;i<this.goodsList.length;i++){
					price+=(this.fomatFloat(this.goodsList[i].price))
				}

				price=price.toFixed(2)
				this.shoppingPrice=price
			},
			close(indexs,index){
				this.$set(this.goodsList[indexs].imageList,index,'')
			},
			upLoadImg(indexs,index){
				let that=this;
				let _url = __config.basePath + '/api/upload/upload'
					uni.chooseImage({
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.uploadFile({
								url: _url,
								filePath: tempFilePaths[0],
								file: tempFilePaths[0],
								name: 'file',
								success: (res) => {
									let _res=JSON.parse(res.data)
									if(_res.code==1){
										that.goodsList[indexs].imageList[index]=_res.data;

										that.$set(that.goodsList[indexs].imageList,index,_res.data)
										// item.imageList[index]=_res.data
										console.error(that.goodsList)

									}
								}
							});
						}
					});
			},
			addGoodsCate(){
				let temp=JSON.parse(JSON.stringify(this.template))
				this.goodsList.push(temp)
				setTimeout(()=>{
					this.getUserPrice()
				},50)
			},
			//标签切换
			boxTaps(index,index_s,item){
				let indexs=item.indexs;
				for(let j=0;j<this.goodsList[index_s].list[indexs].ladder_set.length;j++){
					this.goodsList[index_s].list[indexs].ladder_set[j].checkIndex=index
					this.goodsList[index_s].checkIndexs=index
				}
				this.goodsList[index_s].price=this.goodsList[index_s].list[indexs].ladder_set[index].price
				setTimeout(()=>{
					this.getUserPrice()
				},50)
			},
			//分类切换
			shopNavTaps(item,index,indexs){
				this.shopIndex=index;
				for(let j=0;j<this.goodsList.length;j++){
					if(item.list[j]){
						item.list[j].sortIndex=index
					}
					item.checkIndexs=0
					item.indexs=index

				}
				for(let i=0;i<item.list[index].ladder_set.length;i++){
					item.list[index].ladder_set[i].checkIndex=0
				}
				this.goodsList[indexs].price=item.list[index].ladder_set[0].price
				setTimeout(()=>{
					this.getUserPrice()
				},50)
			},
			//获取商品分类
			getGoodsSort(){
				api.getWashCate().then((res)=>{
				   if(res.code==1){
					   res.data.imageList=[[],[],[],[]]
					   res.data.img=[]
					   res.data.img1=[]
					   res.data.remark="";
					   // res.data.index=0;
					   res.data.indexs=0;
					   res.data.checkIndexs=0; //价格区分
					   let list=res.data.list;
					   res.data.price=res.data.list[0].ladder_set[0].price;
					   console.error()
					   for(let i=0;i<list.length;i++){
						   list[i].sortIndex=0
						  for(let j=0;j<list[i].ladder_set.length;j++){
							  list[i].ladder_set[j].checkIndex=0
						  }
					   }
					   this.shoppingPrice=res.data.list[0].ladder_set[0].price;
					   console.error(this.shoppingPrice)
					   this.template=JSON.parse(JSON.stringify(res.data))
					   this.goodsList.push(res.data);
				   }
				})
			},
			//获取店铺设置
			getShopSet(){
			   api.getShopSet().then((res)=>{
				   if(res.code==1){
					   this.shopInfo=res.data
				   }
			   })
			},
			//获取首页轮播图
			getBanner(){
				api.getBanner({"num":5}).then((res)=>{
					if(res.code==1){
						this.rotation=res.data.list
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.imgeLists{
		position: relative;
		.close{
			position: absolute;
			right: -7rpx;
			top: -7rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		image{
			width: 130rpx;
			height: 130rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
		}
	}
	.photo-img{
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.add-cate{
		height: 72rpx;
		background: #222222;
		box-shadow: 0px 4rpx 40rpx 0px rgba(142,142,142,0.07);
		border-radius: 16rpx;
		width: 690rpx;
		margin: 20rpx auto;
		line-height: 72rpx;
		.names{
			color: #fff;
			font-size: 28rpx;
			text-align: center;
		}
		.add-icon{
			display: flex;
			justify-content: center;
			image{
				width: 32rpx;
				height: 32rpx;
				margin: 20rpx 20rpx 0 0;
			}
		}
	}
	.nameStyle{
		color: #fff!important;
		background-color: #222222!important;
	}
	.shop-lists{
		position: relative;
		margin-left: 25rpx;
		// width: 150rpx;
		display: inline-block;

		padding: 0;
		.name{
			color: #eee;
			font-size: 28rpx;
		}

		.nameStyles{
			color: #fff;
			font-size: 28rpx;
			font-weight: 600;
		}
		.icons{
			margin-top: 20rpx;
			text-align: center;
			position: absolute;
			top: 0rpx;
			left: 50%;
			margin-left:-15rpx;

			img{
				width: 20rpx;
				height: 8rpx;
			}
		}
	}
	.uni-swiper-tab{
		white-space: nowrap;
	}
	.bottom-s{
		width: 100%;
		height: 88rpx;
		position: fixed;
		bottom: 150rpx;
		background: #fff;
		display: flex;
		padding: 0 30rpx;
		line-height: 88rpx;
		font-weight: 600;
		justify-content: space-between;
		.buttons{
			width: 160rpx;
			height: 52rpx;
			line-height: 52rpx;
			background: #222222;
			color: #fff;
			font-size: 28rpx;
			border-radius: 30rpx;
			text-align: center;
			margin-right: 70rpx;
			margin-top: 20rpx;
		}
		.money{
			color: #FE022B;
			margin-left: 25rpx;
			font-size: 32rpx;
			flex: 1;
		}
		.shopping{
			position: relative;
			width: 80rpx;
			text{
				position: absolute;
				width: 28rpx;
				// padding: 0 8rpx;
				height: 28rpx;
				background: #FE022B;
				border: 1rpx solid #FFFFFF;
				border-radius: 50%;
				font-size: 20rpx;
				text-align: center;
				color: #fff;
				line-height: 28rpx;
				right: 0;
				margin-top: -5rpx;
				// margin-left: 30rpx;
			}
			img{
				width: 72rpx;
				height: 72rpx;
			}
		}
	}
	.index-bottoms{
		margin-top: 15rpx;
		padding:0 30rpx;
		.shop-detail{
			padding-bottom: 260rpx;
			margin-bottom: 100rpx;
			.views{
				margin-bottom: 10rpx;
				display: flex;
				line-height: 30rpx;
				.texts{
					color: #222;
					font-size: 20rpx;
					margin-left: 10rpx;
				}
				.shop-icons{
					img{
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
		.shop-banner{
			img{
				width: 688rpx;
				height: 284rpx;
				border-radius: 16rpx;
			}
		}
	}
	.title-texts{
		color: #222;
		font-size: 20rpx;
		text-align: center;
		margin-top: 10rpx;
	}
	.titles{
		text-align: center;
		display: flex;
		justify-content: center;
		margin-top: 35rpx;
		.lines{
			width: 18rpx;
			height: 4rpx;
			background: #000000;
			border-radius: 4rpx;
			margin: 18rpx 20rpx 0 0;
		}
		.views{
			font-size: 28rpx;
			color: #222;
		}
	}
	.content-s{
		.cate-goods{
			.sort-goods{
				width: 690rpx;
				height: 80rpx;
				background: #222222;
				border-radius: 16rpx 16rpx 0px 0px;
				line-height: 80rpx;
				display: flex;
				margin: 30rpx auto 0 auto;
			}
			.cate-content{
				margin:0 auto 50rpx auto;
				width: 630rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 12rpx 0px rgba(231,231,231,0.41);
				border-radius: 16rpx;
				padding: 30rpx;
				.image-photo{
					margin-top: 20rpx;
					.textarea{
						width: 600rpx;
						height: 126rpx;
						background: #F7F7F9;
						border-radius: 16rpx;
						margin-top: 20rpx;
						font-size: 24rpx;
						padding: 10rpx 20rpx;
					}
					.title{
						font-size: 24rpx;
						color: #555;
					}
					.image{
						display: flex;
						.image-lists{
							margin-top: 20rpx;
							.img-width{
								width: 130rpx;
								height: 130rpx;
								background: #F7F7F9;
								border-radius: 8rpx;
								margin-right: 16rpx;
								display: flex;
								justify-content: center;
								align-items: center;

							}
						}
					}
				}
				.goods-top{
					display: flex;
					.box-list{
						display: flex;
						flex-wrap: wrap;
						.boxs{
							padding: 3rpx 20rpx;
							height: 32rpx;
							font-size: 20rpx;
							color:#555555;
							line-height: 32rpx;
							margin-right: 16rpx;
							background: #EEEEEE;
							border-radius: 8rpx;
						}
					}
					.rights{
						.price{
							color: #FE022B;
							font-size: 28rpx;
							margin-top: 24rpx;
							size{
								font-size: 20rpx;
							}
						}
						margin-left: 30rpx;
						.name{
							color: #555;
							font-size: 24rpx;
							margin: 12rpx 0 14rpx 0;
						}
					}
					.images{
						image{
							width: 160rpx;
							height: 160rpx;
						}
					}
				}
			}
		}


	}
	.contents{

	}
	swiper{
		height: 1334rpx;
	}
	.swiper{
		margin: 12rpx auto;
		text-align: center;
	}
	.swiper-img{
		width: 684rpx;
		height: 1334rpx;
		text-align: center;
		border-radius: 16rpx;
	}
</style>