deming/pageA/topick/topick.vue

386 lines
6.6 KiB
Vue
Raw Normal View History

2020-06-11 00:43:51 +00:00
<template>
<!-- login页面 -->
<view>
<view class="login">
<image class="images" src="../../static/pageA/topick.jpg"></image>
<view class="backes"></view>
<view class="content">
<view class="title">开启个性化定制</view>
<view class="title_two">你的兴趣频道</view>
</view>
<!-- 标签 -->
<view class="tab_lable">
2020-07-31 00:45:30 +00:00
<view :class="{'cur': rSelect.indexOf(index)!=-1}" v-for="(item,index) in tab_lables" :key="index" @click="tapClick(index,item.id)">{{item.name}}</view>
2020-06-11 00:43:51 +00:00
</view>
<!-- 提交按钮 -->
2020-06-18 06:57:26 +00:00
<view class="submites" @click="toHomePage">{{submites}}</view>
2020-06-11 00:43:51 +00:00
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
checked: false,
disabled: false
}],
value: '',
login: '登录',
show: false,
2020-06-22 09:45:39 +00:00
tab_lables: [],
2020-06-11 00:43:51 +00:00
submites: '选好了进入首页',
2020-07-31 01:59:22 +00:00
rSelect: [],
2020-07-31 00:45:30 +00:00
list: [],
2020-06-11 00:43:51 +00:00
};
},
2020-07-31 01:59:22 +00:00
onLoad() {
2020-07-04 03:03:20 +00:00
// 标签的列表展示
2020-07-31 01:59:22 +00:00
this.$u.api.labelList({
}).then((res) => {
console.log(res)
this.tab_lables = res.data
})
2020-06-22 09:45:39 +00:00
},
2020-07-31 01:59:22 +00:00
mounted() {},
2020-06-11 00:43:51 +00:00
methods: {
// 选中某个复选框时由checkbox时触发
checkboxChange(e) {
//console.log(e);
},
// 选中任一checkbox时由checkbox-group触发
checkboxGroupChange(e) {
// console.log(e);
},
mask_u() {
this.show = !this.show
},
// 点击切换颜色
2020-07-31 01:59:22 +00:00
tapClick(index, id) {
2020-08-01 03:16:53 +00:00
// console.log(index);
2020-06-11 00:43:51 +00:00
if (this.rSelect.indexOf(index) == -1) {
2020-07-31 01:59:22 +00:00
if (this.rSelect.length > 9) {
this.$u.toast("只能选择10个标签");
return false;
}
2020-08-01 03:16:53 +00:00
this.rSelect.push(index); // 选中状态
this.list.push(id); //选中添加到数组里
2020-06-11 00:43:51 +00:00
} else {
this.rSelect.splice(this.rSelect.indexOf(index), 1); //取消
2020-07-31 00:45:30 +00:00
this.list.splice(this.rSelect.indexOf(id), 1); //取消
2020-06-11 00:43:51 +00:00
}
2020-07-31 00:45:30 +00:00
// console.log(this.rSelect);
2020-08-01 03:16:53 +00:00
console.log(this.list);
2020-06-18 06:57:26 +00:00
},
toHomePage() {
2020-08-01 03:16:53 +00:00
this.$u.post("StartUp/addLabel", {
label_ids: this.list
}).then(res => {
// console.log(res);
if (res.errCode == 0) {
// this.$u.toast(res.message);
uni.switchTab({
url: '/pages/index/index'
});
} else {
this.$u.toast(res.message);
}
})
2020-06-22 09:45:39 +00:00
},
2020-07-31 01:59:22 +00:00
2020-06-11 00:43:51 +00:00
}
};
</script>
<style lang="scss" scoped>
.tab_lable {
// display:flex;
// flex-wrap:wrap;
// display: -webkit-flex; /* Safari */
}
.tab_lable>view {
height: 76rpx;
background: rgba(239, 240, 244, 1);
border-radius: 35rpx;
color: #fff;
text-align: center;
line-height: 76rpx;
float: left;
margin-left: 40rpx;
margin-bottom: 50rpx;
flex: 1;
width: 200rpx;
font-weight: 400;
color: rgba(102, 102, 102, 1);
}
// 提交按钮
.submites {
width: 628rpx;
height: 98rpx;
line-height: 98rpx;
background: rgba(255, 120, 15, 1);
border-radius: 49rpx;
position: fixed;
bottom: 87rpx;
left: 0;
right: 0;
margin: auto;
font-size: 36rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
line-height: 98rpx;
text-align: center;
}
.login {
// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
.images {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.backes {
background: rgba(255, 355, 255, 0.8);
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
text {
z-index: 9;
color: #fff;
}
.more_Login {
overflow: hidden;
zoom: 1;
width: 630rpx;
margin: 0 auto;
}
.more_Login text {
display: inline-block;
width: 50%;
float: left;
font-size: 30rpx;
color: rgba(255, 255, 255, 1);
line-height: 36px;
margin: 97rpx 0;
}
.more_Login .other {
text-align: right;
}
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #fff;
font-weight: bold;
color: rgba(51, 51, 51, 1);
font-size: 54rpx;
}
.title_two {
margin: 39rpx 0 43rpx 0;
font-size: 30rpx;
font-weight: bold;
color: rgba(51, 51, 51, 1);
}
.content {
width: 630rpx;
z-index: 99999;
margin: 0 auto;
padding-top: 130rpx;
.labales text {
font-size: 30rpx;
}
.labales {
border-bottom: 1px #fff solid;
margin-bottom: 90rpx;
}
.labales {
position: relative;
}
.identifying {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 30rpx;
font-weight: 500;
color: rgba(255, 120, 15, 1);
line-height: 36px;
}
}
.pact text {
font-size: 22rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 36px;
}
.pact_text {
font-size: 22px;
font-weight: 400;
color: rgba(129, 188, 253, 1) !important;
line-height: 36px;
}
//单选框的样式
.pact {
position: relative;
padding-left: 40rpx;
}
.u-checkbox-group {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.u-checkbox__icon--square {
border-radius: 50rpx !important;
width: 22rpx;
height: 22rpx;
}
.u-btn {
width: 628rpx;
height: 98rpx;
background: rgba(255, 120, 15, 1) !important;
border-radius: 49rpx;
margin: 0 auto;
font-size: 36rpx;
color: rgba(255, 255, 255, 1) !important;
line-height: 36px;
border: 1px #ff780f solid;
outline: none;
border-color: rgba(255, 120, 15, 1) !important;
}
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 558rpx;
height: 300rpx;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
zoom: 1;
position: relative;
display: flex;
flex-wrap: wrap;
display: -webkit-flex;
/* Safari */
.rect_view {
width: 100rpx;
height: 100rpx;
.image {
width: 45rpx;
height: 53rpx;
display: inline-block;
}
flex:1;
margin-top: 77rpx;
}
.rect_view:nth-child(2) image {
width: 57rpx;
height: 45rpx;
}
.rect_butoon {
width: 100%;
position: absolute;
bottom: 0;
height: 85rpx;
text-align: center;
line-height: 85rpx;
border-top: 1px #999999 solid;
}
view {
color: #666;
font-size: 24rpx;
margin-top: 30rpx;
}
}
.rect_view:nth-child(1) image,
.rect_view:nth-child(1) view {
float: right;
}
.rect_view:nth-child(1) image {
margin-right: 20rpx;
}
.rect_view:nth-child(1) {
position: relative;
margin-right: 79rpx;
}
.rect_view:nth-child(1) view {
position: absolute;
bottom: 0;
right: 0;
}
.rect_view:nth-child(2) image,
.rect_view:nth-child(2) view {
float: left;
}
.rect_view:nth-child(2) image {
margin-left: 20rpx;
}
.rect_view:nth-child(2) {
position: relative;
}
.rect_view:nth-child(2) view {
position: absolute;
bottom: 0;
left: 0;
}
2020-07-31 01:59:22 +00:00
2020-06-11 00:43:51 +00:00
// 选中的样式
.cur {
2020-07-31 01:59:22 +00:00
background-color: #ff5d00 !important;
color: #fff !important;
2020-06-11 00:43:51 +00:00
}
</style>