cansnow
454 lines
15 KiB
Vue
454 lines
15 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar :is-back="true"
|
|
back-icon-color="#333333"
|
|
title="摇一摇设置"
|
|
:background="{ background: '#f0f0f0'}"
|
|
title-color="#000000"
|
|
:title-bold="true"
|
|
title-size="34"
|
|
:border-bottom="false"
|
|
z-index="1001">
|
|
</u-navbar>
|
|
<view>
|
|
<u-cell-group>
|
|
<u-cell-item @click="showNewUserPop()" title="背景图片" :title-style="titleStyle"></u-cell-item>
|
|
<u-cell-item title="音效" :title-style="titleStyle" :arrow="false">
|
|
<u-switch slot="right-icon" size="48" active-color="#19BE6B" v-model="checked"></u-switch>
|
|
</u-cell-item>
|
|
<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
|
|
<u-cell-item title="打招呼的人" :title-style="titleStyle" @click="toLinkedList()"></u-cell-item>
|
|
<u-cell-item title="摇到的历史" @click="addAndUpdate()" :title-style="titleStyle"></u-cell-item>
|
|
<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
|
|
<u-cell-item title="摇一摇信息" :title-style="titleStyle" @click="toSetLatestUsers()"></u-cell-item>
|
|
</u-cell-group>
|
|
</view>
|
|
|
|
<u-popup v-model="newLatestFlag" mode="right"
|
|
safe-area-inset-bottom
|
|
:mask-close-able="false"
|
|
length="100%">
|
|
<scroll-view class="u-p-30 u-p-t-80" scroll-y="true" style="height:85%;width: 700rpx;">
|
|
<view>
|
|
<u-collapse :head-style="{borderBottom:'1rpx solid #909399'}">
|
|
<u-collapse-item :title="'第'+(index+1)+'位'"
|
|
v-for="(newUser,index) in lastestZhuanFaUsers"
|
|
:key="index">
|
|
<view style="border: 1rpx solid #595b5f;padding: 10rpx 20rpx;">
|
|
<u-form :model="newUser" :ref="'newUser-'+index"
|
|
label-width="300rpx"
|
|
label-position="top">
|
|
<u-form-item label="姓名">
|
|
<u-input v-model="newUser.nickName" />
|
|
</u-form-item>
|
|
<u-form-item label="微信号">
|
|
<u-input v-model="newUser.chatNumber" />
|
|
</u-form-item>
|
|
<u-form-item label="头像">
|
|
<u-input type="textarea" v-model="newUser.avatar" />
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="u-flex u-row-between u-col-center u-p-30">
|
|
<u-button @click="addNewLatestUserItem()">新增</u-button>
|
|
<u-button v-if="lastestZhuanFaUsers.length>1" @click="delNewLatestUser()">删除</u-button>
|
|
<u-button type="success" @click="submitAddLatestUsers()">确定</u-button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
|
|
<u-popup v-model="addAndUpdateFlag" mode="right"
|
|
safe-area-inset-bottom
|
|
:mask-close-able="false"
|
|
length="100%">
|
|
<scroll-view class="u-p-30 u-p-t-80" scroll-y="true" style="height:85%;width: 700rpx;">
|
|
<view>
|
|
<u-collapse :head-style="{borderBottom:'1rpx solid #909399'}">
|
|
<u-collapse-item :title="'第'+(index+1)+'位'"
|
|
v-for="(newUser,index) in newUsers"
|
|
:key="index">
|
|
<view style="border: 1rpx solid #595b5f;padding: 10rpx 20rpx;">
|
|
<u-form :model="newUser" :ref="'newUser-'+index"
|
|
label-width="300rpx"
|
|
label-position="top">
|
|
<u-form-item label="姓名">
|
|
<u-input :maxlength="-1" v-model="newUser.nickName" />
|
|
</u-form-item>
|
|
<u-form-item label="微信号">
|
|
<u-input :maxlength="-1" placeholder="不能与其他重复!" v-model="newUser.chatNumber" />
|
|
</u-form-item>
|
|
<u-form-item label="头像">
|
|
<u-input :maxlength="-1" type="textarea" v-model="newUser.avatar" />
|
|
</u-form-item>
|
|
<u-form-item label="地区(注意空格)">
|
|
<u-input :maxlength="-1" placeholder="注意格式,如: 广东 广州" v-model="newUser.address" />
|
|
</u-form-item>
|
|
<u-form-item label="个性签名">
|
|
<u-input :maxlength="-1" v-model="newUser.signature" />
|
|
</u-form-item>
|
|
<u-form-item label="给你打招呼的内容">
|
|
<u-input :maxlength="-1" type="textarea" v-model="newUser.userRemark" />
|
|
</u-form-item>
|
|
<u-form-item label="给你打招呼的时间">
|
|
<u-input :maxlength="-1" placeholder="注意格式,如: 22:30" v-model="newUser.createTime" />
|
|
</u-form-item>
|
|
<u-form-item label="你通过好友时间">
|
|
<u-input :maxlength="-1" placeholder="注意格式,如: 22:35" v-model="newUser.sendTimeStr" />
|
|
</u-form-item>
|
|
<u-form-item label="第一条朋友圈">
|
|
<u-input type="textarea" :maxlength="-1" v-model="newUser.friendCircle[0]" />
|
|
</u-form-item>
|
|
<u-form-item label="第二条朋友圈">
|
|
<u-input type="textarea" :maxlength="-1" v-model="newUser.friendCircle[1]" />
|
|
</u-form-item>
|
|
<u-form-item label="第三条朋友圈">
|
|
<u-input type="textarea" :maxlength="-1" v-model="newUser.friendCircle[2]" />
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="u-flex u-row-between u-col-center u-p-30">
|
|
<u-button @click="addNewUserItem()">新增</u-button>
|
|
<u-button v-if="newUsers.length>1" @click="delNewUser()">删除</u-button>
|
|
<u-button type="success" @click="submitAddUsers()">确定</u-button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
|
|
<u-popup v-model="newUserPopFlag" mode="right"
|
|
safe-area-inset-bottom
|
|
:mask-close-able="false"
|
|
length="100%">
|
|
<view style="padding-top:15%;">
|
|
<view class="u-border-top">
|
|
<u-field v-model="count"
|
|
type="number"
|
|
label="本次录入数量" label-width="200rpx"
|
|
placeholder="录入数量,建议5-10个"></u-field>
|
|
</view>
|
|
<view v-if="count<1" class="u-p-30 u-font-32" style="font-weight: bold;">
|
|
<view>填入数量决定了下面录入的每项信息的数量 !!!</view>
|
|
<view class="u-m-t-10">比如5个,那么必须填入5个人的信息,每个用%%隔开 ! </view>
|
|
<view class="u-m-t-10">不能多! 也不能少! 没有信息的填0 !</view>
|
|
<view>地址为例: "广东 广州,0,湖北 武汉,四川 城都,福建 厦门" </view>
|
|
</view>
|
|
</view>
|
|
<view v-if="count>0">
|
|
<scroll-view class="u-p-30 u-p-t-80"
|
|
scroll-y="true" style="height:80%;width: 700rpx;">
|
|
<view style="padding:10rpx 20rpx;">
|
|
<u-form :model="propArrObj" :border-bottom="false"
|
|
label-width="300rpx"
|
|
label-position="top">
|
|
<u-form-item label="姓名">
|
|
<u-input placeholder="格式: (张三%%李四%%王五)"
|
|
type="textarea" :maxlength="-1"
|
|
:height="300" border
|
|
v-model="propArrObj.nickNameStr" />
|
|
</u-form-item>
|
|
<u-form-item label="微信号">
|
|
<u-input placeholder="格式: (666666%%aaaaaa%%zzzzzz)"
|
|
type="textarea" :maxlength="-1"
|
|
:height="200" border
|
|
v-model="propArrObj.chatNumberStr" />
|
|
</u-form-item>
|
|
<u-form-item label="头像">
|
|
<u-input placeholder="格式: (xxx.jpg%%yyy.jpg%%%zzz%%jpg)"
|
|
type="textarea" :maxlength="-1"
|
|
:height="300" border
|
|
v-model="propArrObj.avatarStr" />
|
|
</u-form-item>
|
|
<u-form-item label="个性签名">
|
|
<u-input placeholder="格式: (哈哈哈%%嘻嘻嘻%%哇哇哇)"
|
|
type="textarea" :maxlength="-1"
|
|
:height="200" border
|
|
v-model="propArrObj.signatureStr" />
|
|
</u-form-item>
|
|
<u-form-item label="打招呼的内容">
|
|
<u-input placeholder="格式: (哈喽%%你好%%hello)"
|
|
type="textarea" :maxlength="-1"
|
|
:height="200" border
|
|
v-model="propArrObj.userRemarkStr" />
|
|
</u-form-item>
|
|
<u-form-item label="地址">
|
|
<u-input placeholder="每个值用%%隔开!没有地址的用0代替"
|
|
type="textarea" :maxlength="-1"
|
|
:height="100" border
|
|
v-model="propArrObj.addressStr" />
|
|
</u-form-item>
|
|
<u-form-item label="打招呼时间">
|
|
<u-input placeholder="格式: (12:01%%12:02%%12:03)"
|
|
type="textarea" :maxlength="-1"
|
|
:height="100" border
|
|
v-model="propArrObj.createTimeStr" />
|
|
</u-form-item>
|
|
<u-form-item label="加好友时间">
|
|
<u-input placeholder="格式: (12:01%%12:02%%12:03)"
|
|
type="textarea" :maxlength="-1"
|
|
:height="100" border
|
|
v-model="propArrObj.sendTimeStr" />
|
|
</u-form-item>
|
|
<u-form-item label="朋友圈">
|
|
<u-input placeholder="格式: ([xxx.jpg%%yyy.jpg,zzz.jpg]%%[111.jpg,222.jpg]%%[]%%[333.jpg])"
|
|
type="textarea" :maxlength="-1"
|
|
:height="300" border
|
|
v-model="propArrObj.friendCircleStr" />
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="u-flex u-row-between u-col-center u-p-30">
|
|
<u-button @click="cancelAdd()">取消</u-button>
|
|
<u-button type="success" @click="submitAdd()">确定</u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
titleStyle:{
|
|
fontSize:"34rpx",
|
|
color:'#000000'
|
|
},
|
|
linkedUsers:[], //摇一摇的人
|
|
addAndUpdateFlag:false, //新增
|
|
newUsers:[
|
|
{
|
|
id:new Date().getTime(),
|
|
avatar:'',
|
|
chatNumber:'',
|
|
nickName:'',
|
|
signature:'',
|
|
userRemark:'',
|
|
address:'',
|
|
sex:0,
|
|
friendPower:0,
|
|
forbidSelf:false,
|
|
forbidHis:false,
|
|
createTime:"",
|
|
sendTimeStr:"",
|
|
lastMsgContent:'',
|
|
delFlag:false,
|
|
friendCircle:["","",""],
|
|
messageList:[],
|
|
},
|
|
],
|
|
checked:true,
|
|
newLatestFlag:false,
|
|
lastestZhuanFaUsers:[
|
|
{
|
|
id:'1',
|
|
avatar:'/static/image/default/default-user/1.jpg',
|
|
chatNumber:'qwe',
|
|
nickName:'猫先生',
|
|
}
|
|
],
|
|
//--------------------------------------
|
|
newUserPopFlag:false,
|
|
count:5,
|
|
propArrObj:{
|
|
nickNameStr:"",
|
|
chatNumberStr:"",
|
|
avatarStr:"",
|
|
signatureStr:"",
|
|
userRemarkStr:"",
|
|
addressStr:"",
|
|
createTimeStr:"",
|
|
sendTimeStr:"",
|
|
friendCircleStr:"",
|
|
}
|
|
};
|
|
},
|
|
methods:{
|
|
toSetLatestUsers:function(){
|
|
if(this.vuex_lastestZhuanFaUsers.length>0){
|
|
this.lastestZhuanFaUsers=JSON.parse(JSON.stringify(this.vuex_lastestZhuanFaUsers));
|
|
}
|
|
this.newLatestFlag=true;
|
|
},
|
|
addNewLatestUserItem:function(){
|
|
let obj={
|
|
id:new Date().getTime(),
|
|
avatar:'',
|
|
chatNumber:'',
|
|
nickName:'',
|
|
};
|
|
this.lastestZhuanFaUsers.push(obj);
|
|
},
|
|
delNewLatestUser:function(){
|
|
this.lastestZhuanFaUsers.splice(this.lastestZhuanFaUsers.length-1,1);
|
|
},
|
|
submitAddLatestUsers:function(){
|
|
let that=this;
|
|
this.$u.vuex("vuex_lastestZhuanFaUsers",this.lastestZhuanFaUsers);
|
|
this.newLatestFlag=false;
|
|
},
|
|
addAndUpdate:function(){
|
|
let that=this;
|
|
that.addAndUpdateFlag=true
|
|
},
|
|
addNewUserItem:function(){
|
|
let oldObj= this.newUsers[this.newUsers.length-1];
|
|
let obj={
|
|
id:new Date().getTime(),
|
|
avatar:'',
|
|
chatNumber:'',
|
|
nickName:'',
|
|
signature:'',
|
|
userRemark:'',
|
|
address:'',
|
|
sex:0,
|
|
friendPower:0,
|
|
forbidSelf:false,
|
|
forbidHis:false,
|
|
createTime:oldObj.createTime,
|
|
sendTimeStr:oldObj.sendTimeStr,
|
|
lastMsgContent:'',
|
|
delFlag:false,
|
|
friendCircle:["","",""],
|
|
messageList:[],
|
|
};
|
|
//this.newUsers.push(obj);
|
|
this.newUsers.unshift(obj);
|
|
},
|
|
delNewUser:function(){
|
|
this.newUsers.splice(this.newUsers.length-1,1);
|
|
},
|
|
submitAddUsers:function(){
|
|
let that=this;
|
|
uni.showModal({
|
|
title: '确认提示',
|
|
content: '请认真检查各项填入内容!',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
that.addAndUpdateFlag = false;
|
|
that.linkedUsers=that.newUsers.concat(that.linkedUsers);
|
|
that.newUsers=[
|
|
{
|
|
id:new Date().getTime(),
|
|
avatar:'',
|
|
chatNumber:'',
|
|
nickName:'',
|
|
signature:'',
|
|
userRemark:'',
|
|
address:'',
|
|
sex:0,
|
|
friendPower:0,
|
|
forbidSelf:false,
|
|
forbidHis:false,
|
|
createTime:'',
|
|
sendTimeStr:'',
|
|
lastMsgContent:'',
|
|
delFlag:false,
|
|
friendCircle:["","",""],
|
|
messageList:[],
|
|
},
|
|
]
|
|
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
toLinkedList:function(){
|
|
let arr=JSON.parse(JSON.stringify(this.vuex_linkedUsers));
|
|
let newLinkedUsers=this.linkedUsers.concat(arr);
|
|
console.log("去摇一摇设置",newLinkedUsers);
|
|
this.$u.vuex("vuex_linkedUsers",newLinkedUsers);
|
|
this.linkedUsers=[];
|
|
this.$u.route("/pages/tabbar/find/yaoyiyao/yaoyiyao-linked-list");
|
|
},
|
|
//------------------------------------------------------------------------------------------------
|
|
showNewUserPop:function(){
|
|
this.newUserPopFlag=true;
|
|
},
|
|
|
|
cancelAdd:function(){
|
|
this.newUserPopFlag=false;
|
|
},
|
|
|
|
submitAdd:function(){
|
|
let that=this;
|
|
let keys= Object.keys(that.propArrObj);
|
|
for (let i = 0; i < keys.length; i++) {
|
|
let key= keys[i];
|
|
let keyValue= that.propArrObj[key];
|
|
let valueArr= keyValue.split("%%");
|
|
if(valueArr.length!=that.count){
|
|
this.globalUtil.utilAlert("第"+(i+1)+"项录入信息有误!["+key+"]");
|
|
return;
|
|
}
|
|
}
|
|
that.muchCreateUser();
|
|
},
|
|
|
|
muchCreateUser(){
|
|
let that=this;
|
|
let arr=[];
|
|
for (var i = 0; i < this.count; i++) {
|
|
let item={
|
|
id:"u-"+i,
|
|
avatar:that.propArrObj.avatarStr.split("%%")[i],
|
|
chatNumber:that.propArrObj.chatNumberStr.split("%%")[i],
|
|
nickName:that.propArrObj.nickNameStr.split("%%")[i],
|
|
signature:that.propArrObj.signatureStr.split("%%")[i],
|
|
userRemark:that.propArrObj.userRemarkStr.split("%%")[i],
|
|
address:that.propArrObj.addressStr.split("%%")[i],
|
|
createTime:that.propArrObj.createTimeStr.split("%%")[i],
|
|
sendTimeStr:that.propArrObj.sendTimeStr.split("%%")[i],
|
|
friendCircle:that.propArrObj.friendCircleStr.split("%%")[i],
|
|
lastMsgContent:"",
|
|
messageList:[],
|
|
sex:0,
|
|
friendPower:0,
|
|
forbidSelf:false,
|
|
forbidHis:false,
|
|
delFlag:false,
|
|
};
|
|
arr.push(item);
|
|
}
|
|
console.log("====arr====",arr);
|
|
that.linkedUsers=arr.concat(that.linkedUsers);
|
|
this.count=0;
|
|
this.propArrObj={
|
|
avatarStr:"",
|
|
chatNumberStr:"",
|
|
nickNameStr:"",
|
|
signatureStr:"",
|
|
userRemarkStr:"",
|
|
addressStr:"",
|
|
createTimeStr:"",
|
|
sendTimeStr:"",
|
|
friendCircleStr:"",
|
|
};
|
|
that.newUserPopFlag=false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style>
|
|
<style>
|
|
page{
|
|
background-color: #f0f0f0;
|
|
}
|
|
</style> |