0000

pages/me/me.vue

@@ -0,0 +1,189 @@
+<template>
+	<view class="content">
+		<view class="text-area">
+			<text class="title">{{title}}</text>
+		</view>
+		<u-dropdown ref="uDropdown" @open="open" @close="close">
+			<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
+			<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
+			<u-dropdown-item title="属性">
+				<view class="slot-content" style="background-color: #FFFFFF;">
+					<!-- 	<u-checkbox-group>
+						<u-checkbox class="item.checked?'checkboxbox':''" v-model="item.checked" v-for="(item, index) in list" :key="index"
+						 :name="item.name">{{item.name}}</u-checkbox>
+					</u-checkbox-group> -->
+					<!-- <uni-view class="item-box">
+						<uni-view class="item">琪花瑶草</uni-view>
+						<uni-view class="item">琪花瑶草</uni-view>
+						<uni-view class="item">琪花瑶草</uni-view>
+						<uni-view class="item">琪花瑶草</uni-view>
+						<uni-view class="item">琪花瑶草</uni-view>
+						<uni-view class="item">琪花瑶草</uni-view>
+						<uni-view class="item">琪花瑶草</uni-view>
+					</uni-view> -->
+					<view class="item-box">
+						<view class="item" :class="{'active': rSelect.indexOf(index)!=-1}" v-for="(value,index) in infoArr" :key="index"
+						 @tap="tapInfo(index,value)">
+							{{value.name}}
+						</view>
+					</view>
+
+					<u-button type="primary" @click="closeDropdown">确定</u-button>
+				</view>
+			</u-dropdown-item>
+		</u-dropdown>
+	</view>
+</template>
+
+<script>
+	// import uActionSheet from "../../uview-ui/components/u-action-sheet/u-action-sheet.vue";
+	// import uSelection from '../../uview-ui/components/u-select/u-select.vue';
+
+	export default {
+		data() {
+			return {
+				title: 'Hello',
+				list: [{
+					text: '点赞',
+					color: 'blue',
+					fontSize: 28,
+					name: '点赞'
+				}, {
+					text: '分享',
+					name: '分享'
+				}, {
+					text: '评论',
+					name: '评论'
+				}],
+				// show: true
+				lists: [
+					'寒雨连江夜入吴',
+					'平明送客楚山孤',
+					'洛阳亲友如相问',
+					'一片冰心在玉壶'
+				],
+				value1: 1,
+				value2: 2,
+				options1: [{
+						label: '默认排序',
+						value: 1,
+					},
+					{
+						label: '距离优先',
+						value: 2,
+					},
+					{
+						label: '价格优先',
+						value: 3,
+					}
+				],
+				options2: [{
+						label: '去冰',
+						value: 1,
+					},
+					{
+						label: '加冰',
+						value: 2,
+					},
+				],
+				infoArr: [{
+					name: "直播",
+					id: '12',
+				}, {
+					name: "视频",
+					id: '13',
+				}, {
+					name: "手游",
+					id: '14',
+				}],
+				rSelect: [],
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			goPricate() {
+				console.log("aa")
+				uni.navigateTo({
+					url: '/pages/pricate/pricate'
+				})
+			},
+			open(index) {
+				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
+				// 同时内部会自动给当前展开项进行高亮
+				this.$refs.uDropdown.highlight();
+			},
+			closeDropdown() {
+				console.log(this.rSelect)
+				let arr = [];
+				this.infoArr.forEach((item,index) => {
+					this.rSelect.forEach(items => {
+						if(index == items){
+							arr.push(item.id)	
+						}
+					})
+				})
+				console.log(arr ,"删除的锕")
+				this.$refs.uDropdown.close();
+			},
+			close(index) {
+				// 关闭的时候，给当前项加上高亮
+				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
+				this.$refs.uDropdown.highlight(index);
+			},
+			tapInfo(e) {
+				console.log(this.rSelect) //是数组，数组也有indexOf
+				if (this.rSelect.indexOf(e) == -1) {
+					console.log(e) //打印下标
+					this.rSelect.push(e); //选中添加到数组里
+				} else {
+					this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
+				}
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.item {
+		border: 1px solid #2979ff;
+		color: #2979ff;
+		padding: 3px 15px;
+		-webkit-border-radius: 38px;
+		border-radius: 38px;
+		margin-top: 11px;
+	}
+
+	.item-box {
+		margin-bottom: 19px;
+		display: flex;
+		flex-wrap: wrap;
+		-webkit-box-pack: justify;
+		justify-content: space-around;
+	}
+
+	.slot-content {
+		padding: 9px;
+	}
+
+	.active {
+		color: #fff;
+		background-color: #2979ff;
+	}
+
+	/deep/.u-checkbox__icon-wrap {
+		display: none;
+	}
+
+	.checkboxbox {
+		background: #EB3F33;
+		color: white;
+	}
+
+	.active {
+		color: white;
+		border: 1px solid #2979ff;
+		background-color: #2979ff;
+	}
+</style>

pages/middle/middle.vue

@@ -0,0 +1,155 @@
+<template>
+	<view>
+		<view class="title">自定义样式</view>
+		<view class="photo">大家好</view>
+		<t-table border="2" border-color="#95b99e" :is-check="true" @change="change">
+			<t-tr font-size="14" color="#95b99e" align="left">
+				<t-th align="left">姓名</t-th>
+				<t-th align="left">年龄</t-th>
+				<t-th align="left">爱好</t-th>
+				<t-th align="center">操作</t-th>
+			</t-tr>
+			<t-tr font-size="12" color="#5d6f61" align="right" v-for="item in tableList" :key="item.id">
+				<t-td align="left">{{ item.name }}</t-td>
+				<t-td align="left">{{ item.age }}</t-td>
+				<t-td align="left">{{ item.hobby }}</t-td>
+				<t-td align="left"><button @click="edit(item)">编辑</button></t-td>
+			</t-tr>
+		</t-table>
+		<button @click="add">添加</button>
+		<view>{{obj.name}}</view>
+		<view>{{obj.age}}</view>
+		<view class="form-box">
+			<u-form :model="form" ref="uForm" :border-bottom='false'>
+				<u-form-item label="账号">
+					<u-input v-model="form.name" border />
+				</u-form-item>
+				<u-form-item label="密码">
+					<u-input v-model="form.password" border type='password' password-icon />
+				</u-form-item>
+			</u-form>
+			<u-button :ripple="true" type="primary" @click="goLogin">登录</u-button>
+		</view>
+		<view>{{uerInfo.name}}</view>
+		<view>{{uerInfo.password}}</view>
+		<u-toast ref="uToast"></u-toast>
+	</view>
+
+</template>
+
+<script>
+	import tTable from '@/components/t-table/t-table.vue';
+	import tTh from '@/components/t-table/t-th.vue';
+	import tTr from '@/components/t-table/t-tr.vue';
+	import tTd from '@/components/t-table/t-td.vue';
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	export default {
+		components: {
+			tTable,
+			tTh,
+			tTr,
+			tTd
+		},
+		data() {
+			return {
+				borderBottom: false,
+				labelPosition: "top",
+				tableList: [{
+						id: 11,
+						name: '张三',
+						age: '19',
+						hobby: '游泳'
+					},
+					{
+						id: 1,
+						name: '李四',
+						age: '21',
+						hobby: '绘画'
+					},
+					{
+						id: 2,
+						name: '王二',
+						age: '29',
+						hobby: '滑板'
+					},
+					{
+						id: 3,
+						name: '码字',
+						age: '20',
+						hobby: '蹦极'
+					}
+				],
+				obj: {
+					name: '查娜',
+				},
+				form: {
+					user: '',
+					password: '',
+				},
+
+			};
+		},
+		onLoad() {
+
+		},
+		methods: {
+			...mapMutations(['login']),
+			change(e) {
+				console.log(e.detail);
+			},
+			edit(item) {
+				uni.showToast({
+					title: item.name,
+					icon: 'none'
+				});
+			},
+			add() {
+				this.$set(this.obj, `age`, 50);
+				console.log(this.obj)
+			},
+			toUser(data) {
+				this.login(data);
+				uni.reLaunch({
+					url: '/pages/index/index'
+				})
+			},
+			goLogin() {
+				this.$u.toast('验证码已发送');
+				setTimeout(() => {
+					this.toUser(this.form)
+					
+				}, 2000);
+
+			},
+
+		},
+		computed: {
+			...mapState(['hasLogin', 'uerInfo']),
+		},
+
+	}
+</script>
+
+<style scoped>
+	.photo {
+		background: url(../../static/logo.png) no-repeat;
+		background-size: contain;
+		border: 1rpx solid red;
+		height: 100rpx;
+		line-height: 100rpx;
+		width: 500rpx;
+		text-align: center;
+	}
+
+	.form-box {
+		width: 90%;
+		margin: 0 auto;
+	}
+
+	.form-box /deep/.u-btn--primary {
+		background-color: #19BE6B;
+	}
+</style>