demingshangjia/pages/release/index.vue
2020-07-16 09:47:53 +08:00

371 lines
8.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view id="release">
<u-form :model="form" ref="uForm">
<u-form-item label="标题" label-position="right">
<u-input v-model="form.name" placeholder="请输入标题" />
</u-form-item>
<view class="titles">图片</view>
<u-upload :action="action" del-color="#ececec" upload-text="选择图片" del-bg-color="#fff" :file-list="fileList"></u-upload>
<!-- 标签 -->
<view>
<view class="titles">标签</view>
<view class="form-view" @click="show_add()">+ 新建标签</view>
<view class="form-view" v-for="(item,index) in fileListes" :key="index">{{item}}</view>
</view>
<!-- 简介 -->
<view class="titles">简介</view>
<view class="titles_border">
<textarea placeholder="请输入内容..."></textarea>
</view>
<!-- 底部弹框 商品选择 -->
<view class="show_two">
<u-popup v-model="show_two" mode="bottom" :closeable="true">
<view class="title">
<text>选择商品</text>
</view>
<!-- 商品列表 -->
<view class="listes_shoping" v-for="(item, index) in list" :key="index">
<view>
<u-checkbox-group @change="checkboxGroupChange">
<u-checkbox @change="checkboxChange" shape="circle" active-color="#FF780F" v-model="item.checked" :name="item.id"></u-checkbox>
</u-checkbox-group>
</view>
<view>
<image :src="item.url" mode="widthFix"></image>
</view>
<view class="contentes">{{item.content}}</view>
</view>
<!-- 提交按钮 -->
<view class="u-button" @click="changes()">确定</view>
</u-popup>
<!-- 底部选择商品列表 -->
<view @click="show_two = true">选择商品
<image class="images" src="../../static/image/tosign/bhottom.png"></image>
</view>
<!-- 选择后的列表 -->
<view class="List_tosign" v-if="List_tosign != ''">
<view>
<image src="../../static/image/tosign/tosigin(5).png" mode="scaleToFill"></image>
</view>
<view>
木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子
</view>
<view>
<image src="../../static/image/tosign/delete.png" mode="widthFix"></image>
</view>
</view>
</view>
<!-- 提交 -->
<u-button class="custom-style" shape="circle" size="default">发表</u-button>
</u-form>
<!-- 添加标签的按钮 -->
<u-popup v-model="show" mode="center" border-radius="14">
<view class="text">
创建属于你的标签吧
</view>
<view class="u-inputes">
<u-input v-model="form.name" />
</view>
<u-button class="custom-style-button" shape="circle" size="default">确定</u-button>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
intro: '',
sex: ''
},
// 演示地址,请勿直接使用
action: 'http://www.example.com/upload',
fileList: [],
fileListes: ["美妆", "博主穿搭", "美妆", "美妆", "美妆", "美妆", "美妆", "博主穿搭"],
show: false,
show_two: false,
filesList: [],
arres_list : [],
checked: false,
list: [{
name: 'apple',
checked: false,
disabled: false,
content: "木糖少女小紫薯西装领连衣裙夏季新款女装装领连衣裙夏季装领连衣裙夏季装领连衣裙夏季夏收腰格子格纹裙子",
url: '../../static/image/tosign/tosigin(5).png',
id : '1'
},
{
name: 'apple2',
checked: false,
disabled: false,
content: "木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子",
url: '../../static/image/tosign/tosigin(5).png',
id : '2'
},
{
name: 'appl3e',
checked: false,
disabled: false,
content: "木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子",
url: '../../static/image/tosign/tosigin(5).png',
id : '3'
},
],
List_tosign : []
}
},
onLoad(){
// 缓存取选择好的数据
this.tosign()
},
methods: {
changes() {
let that = this;
that.show_two = false;
console.log(that.arres_list);
// 过滤数组
that.arres_list = [...new Set(that.arres_list)];
console.log(that.arres_list)
},
show_add() {
console.log(this.show)
this.show = !this.show
},
// 选中某个复选框时由checkbox时触发
checkboxChange(e) {
console.log(e);
if(e.value == true){
let id = e.name;
this.pushes(id)
}
},
pushes(id){
var that = this;
console.log(id)
if(id == ''){
console.log("为空")
}else{
that.arres_list.push(id);
}
},
// 选中任一checkbox时由checkbox-group触发
checkboxGroupChange(e) {
console.log(e);
},
tosign(){
console.log("111")
this.$u.api.documentInfo({
document_code: 'privacy'
}).then((res)=>{
console.log(res)
})
try {
const value = uni.getStorageSync('list_tosign');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
}
}
}
</script>
<style lang="scss" scoped>
#release {
width: 690rpx;
margin: 0 auto;
.form-view {
background: rgba(255, 120, 15, 1);
border-radius: 6rpx;
margin-right: 20rpx;
font-size: 24rpx;
padding: 8rpx 20rpx;
display: inline-block;
margin-bottom: 28rpx;
color: #fff;
}
.titles {
font-size: 30rpx;
font-weight: 400;
color: rgba(51, 51, 51, 1);
margin: 30rpx 0;
}
textarea {
font-size: 26rpx;
}
.custom-style {
background: rgba(255, 120, 15, 1) !important;
color: #fff !important;
font-size: 36rpx;
}
.custom-style-button {
background: rgba(255, 120, 15, 1) !important;
color: #fff !important;
font-size: 28rpx;
width: 200rpx;
margin-bottom: 23rpx;
line-height: 60rpx;
height: 60rpx;
}
.show_two .title {
width: 100%;
border-bottom: solid 1px #ECECEC;
margin-bottom: 30rpx;
}
.show_two .title>text {
font-size: 30rpx;
padding: 30rpx;
display: block;
}
.listes_shoping {
overflow: hidden;
zoom: 1;
margin-bottom: 30rpx;
height: 160rpx;
position: relative;
}
.listes_shoping>view {
float: left;
}
.listes_shoping>view:nth-child(1) {
width: 36rpx;
height: 36rpx;
margin-top: 62rpx;
margin-left: 30rpx;
}
.listes_shoping>view:nth-child(2) {
width: 180rpx;
height: 160rpx;
margin: 0 31rpx 0 19rpx;
}
.listes_shoping>view:nth-child(2) image {
width: 100%;
}
.listes_shoping>view:nth-child(3) {
width: 425rpx;
margin-top: 43rpx;
overflow: hidden;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.u-button {
background: #FF780F;
width: 690rpx;
height: 98rpx;
line-height: 98rpx;
background: rgba(255, 120, 15, 1);
border-radius: 49px;
font-size: 36rpx;
color: #FFFFFF;
text-align: center;
margin: 0 auto 20rpx;
}
}
.u-mode-center-box {
padding: 120rpx;
.text {
font-size: 30rpx;
margin-top: 74rpx;
text-align: center;
font-weight: 500;
color: #333;
}
}
.titles_border,
.uni-textarea-compute {
border: 1px #BABABA solid !important;
padding: 10rpx;
border-radius: 10rpx;
}
.u-inputes {
margin: 30rpx 0;
border: 1px #ececec solid;
padding-left: 14rpx;
width: 420rpx;
}
.show_two {
padding: 30rpx 0 70rpx 0;
}
.show_two>view {
font-size: 30rpx;
font-weight: 400;
color: rgba(51, 51, 51, 1);
}
.show_two .images {
width: 22rpx;
height: 12rpx;
float: right;
top: 14rpx;
}
.List_tosign {
overflow: hidden;
zoom: 1;
margin-top: 21rpx;
position: relative;
}
.List_tosign > view{
float: left;
}
.List_tosign> view:nth-child(1) {
width: 180rpx;
height: 160rpx;
margin-bottom: 30rpx;
image{
border-radius: 15rpx;
width: 100%;
height: 100%;
}
}
.List_tosign> view:nth-child(2) {
width: 420rpx;
height: 76rpx;
margin: 43rpx 43rpx 0 21rpx;
}
.List_tosign> view:nth-child(3) {
width: 26rpx;
height: 27rpx;
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
image{
width: 100%;
height: 100%;
display: block;
}
}
</style>