wardrobe/pages/index/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : 'grey text ']">
		<tm-menubars color="primary" title="" :shadow="0" :showback="false">
			<!-- <template #left>
				<view class="pl-24">
					<tm-images :width="86" src="static/logowhite.png"></tm-images>
				</view>
			</template> -->

		</tm-menubars>
		
		<view>
			<view class="fixed fulled  overflow" style="z-index: 8;">
				<tm-search @confirm="openSearch" v-model="keyword" suffixIcon=" " :showRight="false" :fllowTheme="false"
					color="white" :bg-color="$tm.vx.state().tmVuetify.color || 'primary'"
					:insertColor="$tm.vx.state().tmVuetify.color || 'primary'" :round="4" placeholder="组件中英文名的关键词"
					:shadow="0">
					<template #suffixIcon>
						<view @click="openSearch">
							<tm-tags dense color="primary" model="text">搜索组件</tm-tags>
						</view>
					</template>
				</tm-search>
			</view>
			<view style="height: 84rpx;"></view>
		</view>

		<view :class="[$tm.vx.state().tmVuetify.black ? 'black' : $tm.vx.state().tmVuetify.color || 'primary']">
			<view class=" py-32" style=""
				:class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : $tm.vx.state().tmVuetify.color || 'primary']">
				<!-- <navigator url="gonggao" class=" text-align-center text-white pb-12 flex-center mx-32" style="vertical-align: middle;">
					<text class="pr-32 text-weight-b text-size-s">来自作者的一条公告>></text>
				</navigator> -->
				<view class="text-size-s text-align-center text-white opacity-8">
					<text class="pr-24 ">当前版本：{{ ver }}</text>
					<text>更新时间：{{ time }}</text>
				</view>
			</view>
			<view class="pt-14 pb-n10 round-t-8" :class="[$tm.vx.state().tmVuetify.black ? 'black' : 'grey text  ']">
				<view class="ma-32  flex-between flex-wrap ">
					<view @click="openUrl(item.url)" v-for="(item, index) in list" :key="index"
						class=" round-10 mb-n10 shadow-24" style="width: 48%;"
						:class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : 'white']">
						<view class="flex-center flex-col px-32 py-n12">
							<tm-icons :color="$tm.vx.state().tmVuetify.color || 'primary'" :size="130"
								:name="item.icon"></tm-icons>
							<view class="text-size-lg text-weight-b">{{ item.title }}</view>
							<view class="text-size-s py-12 text-align-center">{{ item.label }}</view>
							<view>
								<!-- <tm-tags color="grey" size="g" model="text">{{ item.btn }}</tm-tags> -->
								<tm-button :round="12" text size="s">
									<view class="flex-center px-10 vertical-align-middle" style="line-height: 0;">
										<text class="pr-10">{{ item.btn }}</text>
										<tm-icons :fllowTheme="true" style="line-height: 0;" dense size="20"
											name="icon-angle-right"></tm-icons>
									</view>
								</tm-button>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-center">
					<tm-images :width="60" src="static/logo_great.png"></tm-images>
				</view>
				<view class="py-24 px-0 text-size-xs text-grey-lighten-1 text mx-32 text-align-center">
					本UI经过细致打磨，并且还在不断的细化中，让它成为高效率、高颜值、高覆盖率的组件库，需要各方努力贡献。
					<view>请不要盗版，可免费使用。</view>
					<view class=" text-weight-b" :class="[`text-${$tm.vx.state().tmVuetify.color || 'primary'}`]">
						用户Q群：
						<text selectable>18593916</text>
					</view>
				</view>
			</view>
		</view>
		<tm-dialog v-model="show" title="提醒"
			content="因小程序大小限制，本demo页面过大，主体导入的js超过2mb，对于分包已无作用，因此如需查询相关demo请前往H5预览，一定是兼容小程序的,不用担心."></tm-dialog>
		<tm-flotbutton :safe="true" color="bg-gradient-primary-accent-b" @click="imte"
			:icon="$tm.vx.state().tmVuetify.black ? 'icon-lightbulb-fill' : 'icon-lightbulb'"
			:label="$tm.vx.state().tmVuetify.black ? '亮色' : '暗黑'" :show-text="true" :offset="[16, bottom]">
		</tm-flotbutton>

		<view style="height: 150rpx;" @click="show=true"></view>

	</view>
</template>

<script>


	export default {
		data() {
			return {
				
				
				test: true,
				show: false,
				keyword: '',
				top: 60,
				flootBootm: 0,
				time: '2022/3/27',
				ver: '1.2.30',
				sys: null,
				bottom: 0,
				list: [{
						icon: 'https://jx2d.cn/yuwuimages/120/com.png?v=2',
						title: '基础组件',
						label: '提供了基础组件90+',
						url: '/subpages/com/index',
						btn: '预览组件'
					},
					{
						icon: 'https://jx2d.cn/yuwuimages/120/theme.png?v=2',
						title: '主题切换',
						label: '暗黑，其它主题切换',
						url: 'themechange',
						btn: '前往体验'
					},
					{
						icon: 'https://jx2d.cn/yuwuimages/120/com.png?v=2',
						title: 'render',
						label: 'canvas渲染引擎',
						url: '/pages/index/crender',
						btn: '1.0正式版'
					},
					{
						icon: 'https://jx2d.cn/yuwuimages/120/css.png?v=2',
						title: '预设样式库',
						label: '零CSS写应用',
						url: '/subpages/csspage/csspage',
						btn: '预览相关'
					},
					{
						icon: 'https://jx2d.cn/yuwuimages/120/lottie.png?v=2',
						title: 'lottie动画',
						label: '提供了对lottie的封装',
						url: '/subpages/lottie/index',
						btn: '前往体验'
					},
					{
						icon: 'https://jx2d.cn/yuwuimages/120/echarts.png?v=2',
						title: 'Echarts',
						label: '对百度图表的封装',
						url: '/subpages/echarts/index',
						btn: '前往体验'
					},
					{
						icon: 'https://jx2d.cn/yuwuimages/120/yewu.png?v=2',
						title: '业务组件',
						label: '提供了相关行业的组件',
						url: '/subpages/food/index',
						btn: '预览相关'
					},
					{
						icon: 'https://jx2d.cn/yuwuimages/120/moban.png?v=2',
						title: '页面模板',
						label: '相关行业的页面模板',
						url: '/subpages/moban/index',
						btn: '预览模板'
					},
					{
						icon: 'https://jx2d.cn/yuwuimages/120/game.png?v=2',
						title: '游戏抽奖',
						label: '转盘|老虎机|九宫格等',
						url: '/subpages/yewu/index',
						btn: '体验相关'
					}
				]
			};
		},
		created() {
			this.sys = uni.getSystemInfoSync();
		},
		onLoad() {
			// #ifdef MP
			this.top = uni.upx2px(150);
			// #endif
			
			// uni.request({
			// 	url: 'https://jisutqybmf.market.alicloudapi.com/weather/query?city=%E5%AE%89%E9%A1%BA&citycode=citycode&cityid=cityid&ip=ip&location=location',
			// 	data:{'src':'南京市'},//传入参数
			// 	method: 'POST',
			// 	success: res => {
					
			// 	}
			// })
			    uni.request({
			        url : "https://jisutqybmf.market.alicloudapi.com/weather/query",
			        type : "post",
			        beforeSend : function(req) {
			            req.setRequestHeader("Authorization", "APPCODE acacbfc4fac24722996q34b284935353562340cd77c8be");
			        },
			        dataType : "json",
			        success : function(data) {
			            
			        },
			        error : function(e) {
			            alert("网络异常，请重试");
			        }
			    });

		},
		mounted() {
			uni.showTabBar({
				animation: true
			});
			
		},
		methods: {
			openSearch() {
				uni.navigateTo({
					url: 'search?key=' + this.keyword
				});
			},
			openUrl(url) {
				let t = this;
				uni.navigateTo({
					url: url,
					fail: e => {
						t.show = true;
					}
				});
			},
			imte() {
				this.$tm.theme.setBlack();
			},
		}
	};
</script>

<style lang="scss">
	page,
	body {
		min-height: 100%;
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped></style>