wardrobe/pages/dapei/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="搭配" :shadow="0" :showback="false"></tm-menubars>
		<view class="C1b1b1b pb-20">
			<tm-tabs align="left" class="qiehuan1" v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
		</view>
		<!-- 天气 -->
		<scroll-view class="scroll-view_H" scroll-x="true">
			<view class="scroll-view-item_H" v-if="alltouList.length !=0">
				<image v-if="alltouList[0].data !=0" class="chuanda" :src="alltouList[0].data.makeAppointmentCollocation.image"></image>
				<view v-else class="chuanda">
					<view v-if="tianqiList" class="text-white text-size-lg">{{tianqiList.city}}市</view>
					<view v-if="tianqiList" class="text-size-lg mt-15 text-weight-b" style="color: #FFCC00;">{{tianqiList.temp}}°C</view>
					<view v-if="tianqiList" class="text-white text-size-lg mt-15">{{tianqiList.weather}}</view>
					<view v-if="tianqiList" class="text-gray text-size-lg mt-10">最低{{tianqiList.templow}}°c 最高{{tianqiList.temphigh}}°c</view>
				</view>
				<view class="mt-20 text-align-center" v-if="tianqiList">
					<image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
					<text class="text-size-s ml-15">{{tianqiList.templow}}°c~{{tianqiList.temphigh}}°c</text>
					<text class="text-size-s ml-15">{{tianqiList.week}}</text>
				</view>
				<view v-if="alltouList[0]" class="bianji" @click="bianji(1,alltouList[0].data)">{{alltouList[0].data !=0?'更换穿搭':'添加穿搭'}}</view>
			</view>
			<view class="scroll-view-item_H" v-if="alltouList.length !=0">
				<image v-if="alltouList[1].data !=0" class="chuanda" :src="alltouList[1].data.makeAppointmentCollocation.image"></image>
				<view v-else class="chuanda">
					<view v-if="tianqiList" class="text-white text-size-lg">{{tianqiList.city}}市</view>
					<view v-if="tianqiList" class="text-size-lg mt-15 text-weight-b" style="color: #FFCC00;">{{tianqiList.daily[1].day.temphigh}}°C</view>
					<view v-if="tianqiList" class="text-white text-size-lg mt-15">{{tianqiList.daily[1].day.weather}}</view>
					<view v-if="tianqiList" class="text-gray text-size-lg mt-10">{{tianqiList.daily[1].day.winddirect}} {{tianqiList.daily[1].day.windpower}}°c</view>
				</view>
				<view class="mt-20 text-align-center" v-if="tianqiList">
					<image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
					<text class="text-size-s ml-15">最高温度{{tianqiList.daily[1].day.temphigh}}°C</text>
					<text class="text-size-s ml-15">{{tianqiList.daily[1].week}}</text>
				</view>
				<view v-if="alltouList[1]" class="bianji" @click="bianji(2,alltouList[1].data)">{{alltouList[1].data !=0?'更换穿搭':'添加穿搭'}}</view>
			</view>
			<!-- <view class="scroll-view-item_H">
				
				<view class="mt-20 text-align-center">
					<image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
					<text class="text-size-s ml-15">16°c~20°c</text>
					<text class="text-size-s ml-15">星期一</text>
				</view>
				<view class="bianji" @click="bianji(2)">添加穿搭</view>
			</view> -->
			<!-- <view class="scroll-view-item_H">
				<image class="chuanda" src="/static/img/107.png" mode="widthFix"></image>
				<view class="mt-20 text-align-center">
					<image class="taiyang" src="/static/img/106.png" mode="widthFix"></image>
					<text class="text-size-s ml-15">16°c~20°c</text>
					<text class="text-size-s ml-15">星期一</text>
				</view>
				<view class="bianji" @click="bianji()">编辑穿搭</view>
			</view> -->
		</scroll-view>
		<div class="zhuti">
			<!-- 衣橱 1-->
			<tm-sheet class="yichu" style="margin-bottom: 40px !important;">
				<tm-tabs @change="fenlei" class="C1b1b1b qiehuan" color="white"  align="left"  v-model="activeIndex1" :list="listfl" range-key="title"></tm-tabs>
				<view class="yiguicla black pa-6 ma-4 fl" v-for="(item,index) in quanbuList" @click="zidingyibianji(item)">
					<image :src="item.image" mode="widthFix"></image>
					<view class="text-size-m mt-20 mb-20 ml-10">{{item.title}}</view>
				</view>
				<view style="clear: both;"></view>
				<tm-empty v-if="quanbuList.length ==0" label="暂无数据" color="white" icon="icon-paperplane-fill"></tm-empty>
				<view v-if="total>quanbuList.length" style="clear: both;" class="more ma-40 pt-40" @click="gengmore()">
					<image src="/static/img/30.png" mode="widthFix"></image>
					<text class="text-size-s">下拉加载更多~</text>
				</view>
			</tm-sheet>
			<tm-button :round="24" class="sao" block @click="zidingyi()">自定义搭配</tm-button>
		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
import qqmapsdk from '../../js_sdk/qqmap-wx-jssdk.js'
const QQMapWX = new qqmapsdk({
	key: 'KNABZ-OAVCJ-O5IFJ-KBNST-SVIIZ-2EB3G'
});
export default {
	data() {
		return {
			list:[ '预约穿搭'],
			activeIndex:0,
			activeIndex1:0,
			quanbuList:[],
			chooseindex:-1,
			listfl:[],
			listflall:[],
			alltouList:[],
			tianqiList:[],
			page:1,
			total:0,
			pagesize:10,
			city:'南京'
		};
	},
	onLoad(e) {
		
	},
	onShow(){
		this.page=1;
		this.getFl();
		this.touFun();
		this.getCity()
	},
	created() {
		this.sys = uni.getSystemInfoSync();
		this.gettianqi();
		
	},
	methods: {
		getCity(){
			var that=this;
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: (res) => {
					console.log("获取经纬度成功");
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				},
				fail: () => {
					console.log("获取经纬度失败");
				},
				complete: () => {
					// 解析地址
					QQMapWX.reverseGeocoder({
						location: {
							latitude: this.latitude,
							longitude: this.longitude
						},
						success: function(res) {
							console.log("解析地址成功");
							console.log(res);
							// 省
							let province = res.result.ad_info.province;
							// 市
							let city = res.result.ad_info.city;
							//区
							let district=res.result.ad_info.district;
							that.city=city;
							console.log(province);
							console.log(city);
							console.log(district);
						},
						fail: function(res) {
							// uni.showToast({
							// 	title: '定位失败',
							// 	duration: 2000,
							// 	icon: "none"
							// })
							console.log(res);
						},
						complete: function(res) {
							console.log(res);
						}
					})
				}
			})
		},
		shuaxin(){
			this.activeIndex1=0;
			this.page=1;
			this.getFl();
			this.touFun();
		},
		fenlei(e){
			this.page=1;
			this.getKxuan()
		},
		touFun(){
			var that=this;
			// 11
			myRequest({
				url: "/api/Collocation/selectStyle",
				method:'post',
				data:{}
			}).then(res => {
				if (res.data.code == 200) {
					var dataList=res.data.data;
					if(dataList.length==0){
						that.alltouList[0]={data:0}
						that.alltouList[1]={data:0}
					}else if(dataList.length==1){
						for(let i=0;i<dataList.length;i++){
							if(dataList[i].type==1){
								that.alltouList[0]={data:dataList[i]}
							}else{
								that.alltouList[0]={data:0}
							}
							if(dataList[i].type==2){
								that.alltouList[1]={data:dataList[i]}
							}else{
								that.alltouList[1]={data:0}
							}
						}
					}else{
						for(let i=0;i<dataList.length;i++){
							if(dataList[i].type==1){
								that.alltouList[0]={data:dataList[i]}
							}
							if(dataList[i].type==2){
								that.alltouList[1]={data:dataList[i]}
							}
						}
					}
					console.log(that.alltouList)
				}else{
					that.alltouList[0]={data:0}
					that.alltouList[1]={data:0}
				}
			})
		},
		getFl(){
			var that=this;
			myRequest({
				url: "/api/Category/getCollocationClassList",
				method:'post',
				data:{}
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.data.length != 0){
						// that.listfl=['全部'];
						that.listfl=[];
						for(let i=0;i<res.data.data.length;i++){
							that.listfl.push(res.data.data[i].category_name)
						}
						that.listflall=res.data.data;
						that.getKxuan();
					}
				}else{
					that.listfl=[];
				}
			})
		},
		gengmore() {
			this.page=this.page+1;
			console.log(111)
			this.getKxuan();
		},
		getKxuan(){
			var that=this;
			myRequest({
				url: "/api/Collocation/getCollocationList",
				method:'post',
				data:{category_id:that.listflall[that.activeIndex1].id,page:that.page,pagesize:that.pagesize}
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.data.length != 0){
						if(this.page==1){
							that.quanbuList=res.data.data.data;
						}else{
							that.quanbuList=that.quanbuList.concat(res.data.data.data);
						}
						that.total=res.data.data.total;
					}else{
						that.quanbuList=[];
					}
				}else{
					that.quanbuList=[];
				}
			})
		},
		gettianqi(){
			var that=this;
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	geocode:true,//设置该参数为true可直接获取经纬度及城市信息
			// 	success: function (res) {
			// 		console.log(res)
			// 		// that.addrDel = res;
			// 	},
			// 	fail: function () {
			// 		uni.showToast({
			// 			title: '获取地址失败，将导致部分功能不可用',
			// 			icon:'none'
			// 		});
			// 	}
			// });
			uni.request({
				url: "https://jisutqybmf.market.alicloudapi.com/weather/query",
				method: "get",
				header: {
					'Authorization':'APPCODE b838ad36bbd741ad97bbe22e50be1847'
				},
				data:{
					city:that.city
				},
				dataType:'json',
				success : function(data) {
					that.tianqiList=data.data.result;
				},
				error : function(e) {
					alert("网络异常，请重试");
				}
			});
		},
		bianji(type,data){
			console.log(type)
			console.log(data)
			if(data.makeAppointmentCollocation){
				uni.navigateTo({
					url: "/pages/bianjigh/index?type="+type+'&id='+data.id+"&old="+data.collocation_id,
				})
			}else{
				uni.navigateTo({
					url: "/pages/bianjigh/index?type="+type,
				})
			}
			
		},
		zidingyibianji(item){
			if(item.type==2){
				// 衣橱
				uni.navigateTo({
					url: "/pages/baocun/index?id="+item.id+"&type=2",
				})
			}else{
				// 大数据推荐1
				uni.navigateTo({
					url: "/pages/zidingyikan/index?id="+item.id+"&type=2",
				})
			}
			// uni.navigateTo({
			// 	url: "/pages/zidingyi/index?type=1",
			// })
		},
		dapei(){
			uni.navigateTo({
				url: "/pages/dapeizidingyi/index?type=1",
			})
			
		},
		zidingyi(){
			uni.navigateTo({
				url: "/pages/changan/index",
			})
		}
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
	/deep/ .qiehuan1 .text-primary{color: white !important;}
	.chuanda{width: 100%;height: 144px;}
	.taiyang{width: 25px;}
	.bianji{border: 1px solid #303440;width: 80px;height: 30px;background: #303440;font-size: 15px;
	text-align: center;line-height: 30px;border-radius: 5px;margin: 0 auto;margin-top: 10px;border:1px solid white;}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		background: #1B1B1B;
		padding-bottom: 15px;
	}
	.scroll-view-item {
		height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 150px;
		text-align: center;
		font-size: 36rpx;
		margin-left: 10px;
		background: #0D0D0D;
		padding: 6px;
		border-radius: 10px;
	}
	.yichu{margin:0 !important;padding: 4px !important;margin-top: 10px !important;}
	/deep/ .qiehuan .text-white{
		font-size: 14px;
		background: #303440;
		height: 28px;
		vertical-align: middle;
		line-height: 28px;
		border-radius: 20px;
		padding-left: 14px;
		padding-right: 14px;
		margin-top: 17%;
	}
	/deep/ .qiehuan .tm-tabs-con-item-border{display: none;}
	.yiguicla image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
	.yiguicla{width: 47%;border-radius: 10px;}
	.more{text-align: center;}
	.more image{margin-right: 10px;vertical-align: middle;width: 30px;}
	.fudong{position:fixed;right:10px;bottom:150px;background: #303030;width: 130px;height: 60px;
	border-radius: 30px 0px 0px 30px;font-size: 14px;text-align: center;}
	.sao{width: 60%;display: block;margin: 0 auto;margin-bottom: 60px;}
	/deep/ .scroll-view_H{height:245px !important;}
</style>