234 changed files with 6243 additions and 880 deletions
@ -0,0 +1,31 @@ |
|||||
|
export default { |
||||
|
FireKeys : { |
||||
|
NeedsSelectedCallback : 'NeedsSelectedCallback', |
||||
|
}, |
||||
|
UserNeeds : ["小红书","抖音","美团","大众","App","小程序","官网","公众号","其他"], |
||||
|
///用户自己的数据
|
||||
|
Player : { |
||||
|
//昵称
|
||||
|
nickName : "", |
||||
|
//头像地址
|
||||
|
headUrl : "", |
||||
|
//性别
|
||||
|
sex : 0, |
||||
|
//生日
|
||||
|
birthday : "", |
||||
|
//电话号码
|
||||
|
phone : "", |
||||
|
//职业
|
||||
|
profession : "", |
||||
|
//简介
|
||||
|
intro : "", |
||||
|
///真实姓名
|
||||
|
realName : "", |
||||
|
///身份证号码
|
||||
|
idNumber : "", |
||||
|
///银行卡号
|
||||
|
bankId : "", |
||||
|
///开户行
|
||||
|
bankAddress: "", |
||||
|
}, |
||||
|
} |
||||
@ -0,0 +1,255 @@ |
|||||
|
<!--我的--> |
||||
|
<template> |
||||
|
<view class="main"> |
||||
|
<view class="back"/> |
||||
|
<image class="top" src="../../static/images/wode/bg_3.png" mode="widthFix"> |
||||
|
<u-navbar |
||||
|
title="个人中心" |
||||
|
:safeAreaInsetTop="true" |
||||
|
:fixed="true" |
||||
|
bgColor="#FFFFFF00" |
||||
|
:isShowLeftIcon="false" |
||||
|
/> |
||||
|
<view class="top_head_area"> |
||||
|
<view class="head_background"> |
||||
|
<image class="head" src="../../static/images/wode/touxaingkuang.png" mode="widthFix"/> |
||||
|
</view> |
||||
|
<text class="nickname">登录 | 注册</text> |
||||
|
</view> |
||||
|
<view class="walletBox"> |
||||
|
<text class="wallet_title">钱包</text> |
||||
|
<image class="eye_close" src="../../static/images/wode/bukejian.png" mode="widthFix"></image> |
||||
|
<view class="wallet_number_box"> |
||||
|
<text class="wallet_number">******</text> |
||||
|
</view> |
||||
|
<u-icon name="arrow-right" customStyle="width: 14rpx;height: 25rpx;position: absolute;top: 53rpx;right: 30rpx;"/> |
||||
|
</view> |
||||
|
</image> |
||||
|
<view class="body"> |
||||
|
<view v-for="(item,index) in items" :key="index" class="item"> |
||||
|
<image :src="item.icon" class="item_icon" /> |
||||
|
<view class="item_title_box"> |
||||
|
<text class="item_title">{{item.title}}</text> |
||||
|
<text v-if="item.message != null" class="item_message">{{item.message}}</text> |
||||
|
</view> |
||||
|
<u-icon name="arrow-right" customStyle="width: 12rpx;height: 21rpx;position: absolute;top: 45rpx;right: 20rpx;"/> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name:"Mine", |
||||
|
data() { |
||||
|
return { |
||||
|
items : [ |
||||
|
{ |
||||
|
title : "实名认证", |
||||
|
icon : "../../static/images/wode/shiming.png", |
||||
|
message : "提现必须进行实名认证", |
||||
|
}, |
||||
|
{ |
||||
|
title : "在线客服", |
||||
|
icon : "../../static/images/wode/kefu2.png", |
||||
|
message : null, |
||||
|
}, |
||||
|
{ |
||||
|
title : "帮助", |
||||
|
icon : "../../static/images/wode/bangzhu.png", |
||||
|
message : null, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.back{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
background:#F6F6F6 |
||||
|
} |
||||
|
.main{ |
||||
|
position: relative; |
||||
|
} |
||||
|
.top{ |
||||
|
position: relative; |
||||
|
width: 750rpx; |
||||
|
height: 495rpx; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
//background-color: #0081FF; |
||||
|
} |
||||
|
///头像-名字-登录|注册区域 |
||||
|
.top_head_area{ |
||||
|
width: 100%; |
||||
|
height: 150rpx; |
||||
|
//background-color: #1CBBB4; |
||||
|
position: absolute; |
||||
|
top: 200rpx; |
||||
|
} |
||||
|
///头像背景是一个白色的圆 |
||||
|
.head_background{ |
||||
|
width: 138rpx; |
||||
|
height: 138rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 50%; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
left: 24rpx; |
||||
|
top: 6rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
///头像的大小 |
||||
|
.head{ |
||||
|
width: 125rpx; |
||||
|
height: 125rpx; |
||||
|
} |
||||
|
///昵称或者登录|注册 |
||||
|
.nickname{ |
||||
|
height: 46rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
left: 182rpx; |
||||
|
top: 52rpx; |
||||
|
} |
||||
|
//本来是导航栏的，但是那玩意儿好像不支持，所以现在没用 |
||||
|
.title{ |
||||
|
width: 144rpx; |
||||
|
height: 50rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
top: 100rpx; |
||||
|
left: 303rpx; |
||||
|
} |
||||
|
///钱包外包围框 |
||||
|
.walletBox{ |
||||
|
width: 702rpx; |
||||
|
height: 132rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.06); |
||||
|
opacity: 1; |
||||
|
border-radius: 20rpx; |
||||
|
position: relative; |
||||
|
left: 24rpx; |
||||
|
bottom: 96rpx; |
||||
|
} |
||||
|
.wallet_title{ |
||||
|
width: 64rpx; |
||||
|
height: 45rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
left: 30rpx; |
||||
|
top: 44rpx; |
||||
|
} |
||||
|
///闭着的眼睛的图片 |
||||
|
.eye_close{ |
||||
|
width: 31rpx; |
||||
|
height: 15rpx; |
||||
|
position: absolute; |
||||
|
left: 110rpx; |
||||
|
top: 59rpx; |
||||
|
} |
||||
|
///钱包的数字的外包围，为了让钱包的数字可以居中显示 |
||||
|
.wallet_number_box{ |
||||
|
position: absolute; |
||||
|
text-align: center; |
||||
|
height: 45rpx; |
||||
|
width: 400rpx; |
||||
|
top: 48rpx; |
||||
|
left: 151rpx; |
||||
|
text-align: center; |
||||
|
//background-color: #9000FF; |
||||
|
} |
||||
|
///钱包数字 |
||||
|
.wallet_number{ |
||||
|
height: 45rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
line-height: 45rpx; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
//下方的实名认证那些玩意儿 |
||||
|
.body{ |
||||
|
width: 702rpx; |
||||
|
height: 340rpx; |
||||
|
padding-top: 5rpx; |
||||
|
padding-bottom: 5rpx; |
||||
|
//background-color: #2979FF; |
||||
|
position: relative; |
||||
|
left: 24rpx; |
||||
|
top: -56rpx; |
||||
|
border-radius: 20rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
} |
||||
|
///一行的内容，比如 实名认证，在线客服的外包围框 |
||||
|
.item{ |
||||
|
width: 100%; |
||||
|
height: 110rpx; |
||||
|
//background-color: #1CBBB4; |
||||
|
border-radius: 20rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
///每一行的图标的大小，位置等 |
||||
|
.item_icon{ |
||||
|
width: 33rpx; |
||||
|
height: 33rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 39rpx; |
||||
|
} |
||||
|
///为了让每一行的标题和下方的message可以显示正确，这个是他们的外包围 |
||||
|
.item_title_box{ |
||||
|
height: 100rpx; |
||||
|
width: 600rpx; |
||||
|
//background-color: #2979FF; |
||||
|
position: relative; |
||||
|
left: 50rpx; |
||||
|
top: 5rpx; |
||||
|
} |
||||
|
///每一行的标题，例如 实名认证 |
||||
|
.item_title{ |
||||
|
height: 40rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
left: 0rpx; |
||||
|
top: 30rpx; |
||||
|
} |
||||
|
///每一行的提示信息，例如：提现必须进行实名认证 |
||||
|
.item_message{ |
||||
|
height: 33rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 400; |
||||
|
color: #999999; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 2rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,51 @@ |
|||||
|
<template> |
||||
|
<view class="top"> |
||||
|
<image class="top_banner" :src="background"> |
||||
|
</image> |
||||
|
<u-navbar |
||||
|
:title="title" |
||||
|
:safeAreaInsetTop="true" |
||||
|
:fixed="true" |
||||
|
bgColor="#FFFFFF00" |
||||
|
> |
||||
|
</u-navbar> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name:"MyNavbar", |
||||
|
props:{ |
||||
|
///标题哈 |
||||
|
title : { |
||||
|
type : String, |
||||
|
default : "" |
||||
|
}, |
||||
|
///背景哈 |
||||
|
background : { |
||||
|
type : String, |
||||
|
default : "../../static/images/kehu/bg_2.png" |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.top{ |
||||
|
width: 750rpx; |
||||
|
height: 424rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
.top_banner{ |
||||
|
position: relative; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 750rpx; |
||||
|
height: 424rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,229 @@ |
|||||
|
<!--需求选择弹出--> |
||||
|
<template> |
||||
|
<view class="main"> |
||||
|
<view class="top"> |
||||
|
<view class="button_box_left" @click="onClickButtonCancel"> |
||||
|
<text class="cancel_text">取消</text> |
||||
|
</view> |
||||
|
<view class="button_box_right" @click="onClickButtonOk"> |
||||
|
<text class="ok_text">确定</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-line color="#E2E2E2" length="750rpx" customStyle="position: relative;border: 1px solid #E2E2E2;" :hairline="true" margin="99rpx 0 0 0"></u-line> |
||||
|
<text class="duoxuan_text">支持多选</text> |
||||
|
<u-gap height="40rpx"/> |
||||
|
<u-grid |
||||
|
col="3" |
||||
|
> |
||||
|
<u-grid-item |
||||
|
:customStyle="{width:250+'rpx',height:100+'rpx'}" |
||||
|
v-for="(item,index) in allneeds" :key="item.key" |
||||
|
@click="onClickOneItem" |
||||
|
> |
||||
|
<view class="out_box"> |
||||
|
<view v-if="isSelected(index)" class="selected_box" :key="item.key"> |
||||
|
<text class="selected_text">{{item.name}}</text> |
||||
|
</view> |
||||
|
<view v-else class="unselected_box" :key="item.key"> |
||||
|
<text class="unselected_text">{{item.name}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-grid-item> |
||||
|
</u-grid> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name:"NeedsSelect", |
||||
|
|
||||
|
props:{ |
||||
|
selected :{ |
||||
|
type : Array, |
||||
|
default : [ |
||||
|
false,false,false, |
||||
|
false,false,false, |
||||
|
false,false,false, |
||||
|
], |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
allneeds : this.init(), |
||||
|
}; |
||||
|
}, |
||||
|
methods:{ |
||||
|
|
||||
|
init(){ |
||||
|
var allneeds = []; |
||||
|
var names = this.$Define.UserNeeds; |
||||
|
for(var i = 0;i<names.length;i++){ |
||||
|
var into = { |
||||
|
name : names[i], |
||||
|
key : new Date().getTime(), |
||||
|
}; |
||||
|
allneeds.push(into); |
||||
|
} |
||||
|
//console.log(allneeds); |
||||
|
return allneeds; |
||||
|
}, |
||||
|
///检查传递进来的index是否被选中了 |
||||
|
isSelected(index){ |
||||
|
if(index < 0 || index >= this.selected.length){ |
||||
|
return false; |
||||
|
} |
||||
|
return this.selected[index]; |
||||
|
}, |
||||
|
/** |
||||
|
* @param {number} index 点中哪一个需求了 |
||||
|
*/ |
||||
|
onClickOneItem(index){ |
||||
|
var indo = this.selected[index]; |
||||
|
this.selected[index] = !indo; |
||||
|
this.allneeds[index].key = new Date().getTime(); |
||||
|
}, |
||||
|
///点击确认 |
||||
|
onClickButtonOk(){ |
||||
|
var key = this.$Define.FireKeys.NeedsSelectedCallback; |
||||
|
this.$fire.fire(key,{status:true,selected : this.selected}); |
||||
|
}, |
||||
|
///点击取消 |
||||
|
onClickButtonCancel(){ |
||||
|
var key = this.$Define.FireKeys.NeedsSelectedCallback; |
||||
|
this.$fire.fire(key,{status:false,selected : []}); |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.main { |
||||
|
width: 750rpx; |
||||
|
height: 512rpx; |
||||
|
background: #FFFFFF; |
||||
|
border: 1rpx solid #E2E2E2; |
||||
|
opacity: 1; |
||||
|
border-radius: 20rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
.top{ |
||||
|
position: absolute; |
||||
|
height: 94rpx; |
||||
|
width: 100%; |
||||
|
//background-color: #0081FF; |
||||
|
top: 0; |
||||
|
} |
||||
|
.button_box_left{ |
||||
|
position: absolute; |
||||
|
left: 10rpx; |
||||
|
width: 100rpx; |
||||
|
height: 94rpx; |
||||
|
top: 0; |
||||
|
//background-color: #39B54A; |
||||
|
} |
||||
|
|
||||
|
.button_box_right{ |
||||
|
position: absolute; |
||||
|
right: 10rpx; |
||||
|
width: 100rpx; |
||||
|
height: 94rpx; |
||||
|
top: 0; |
||||
|
//background-color: #39B54A; |
||||
|
} |
||||
|
|
||||
|
.cancel_text{ |
||||
|
width: 64rpx; |
||||
|
height: 45rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #666666; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
top: 25rpx; |
||||
|
left: 24rpx; |
||||
|
} |
||||
|
.ok_text{ |
||||
|
width: 64rpx; |
||||
|
height: 45rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #41CF41; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
top: 25rpx; |
||||
|
right: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.duoxuan_text{ |
||||
|
width: 112rpx; |
||||
|
height: 40rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #999999; |
||||
|
opacity: 1; |
||||
|
position: relative; |
||||
|
left: 24rpx; |
||||
|
top: 30rpx; |
||||
|
} |
||||
|
.unselected_box{ |
||||
|
width: 180rpx; |
||||
|
height: 70rpx; |
||||
|
background: #FFFFFF; |
||||
|
border: 1rpx solid #E2E2E2; |
||||
|
opacity: 1; |
||||
|
border-radius: 10rpx; |
||||
|
position: absolute; |
||||
|
top: 5rpx; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.out_box{ |
||||
|
width: 234rpx; |
||||
|
height: 80rpx; |
||||
|
//background-color: #1CBBB4; |
||||
|
position: relative; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.selected_box{ |
||||
|
width: 180rpx; |
||||
|
height: 70rpx; |
||||
|
background: #FFFFFF; |
||||
|
border: 1rpx solid #D49B4B; |
||||
|
opacity: 1; |
||||
|
border-radius: 10rpx; |
||||
|
position: absolute; |
||||
|
top: 5rpx; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.selected_text{ |
||||
|
height: 70rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #D49B4B; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
vertical-align: middle; |
||||
|
line-height: 70rpx; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.unselected_text{ |
||||
|
///字体高度需要和外框一致，居中才好弄 |
||||
|
height: 70rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #999999; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
vertical-align: middle; |
||||
|
line-height: 70rpx; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,83 @@ |
|||||
|
<template> |
||||
|
<view class="rect"> |
||||
|
<image class="image" src="../../static/images/kehu/tijiao.png" mode="widthFix"/> |
||||
|
<text class="title">提交信息成功</text> |
||||
|
<text class="info">请等待后台审核</text> |
||||
|
<view class="button"> |
||||
|
<text class="textknow">知道了</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name:"UploadSuccess", |
||||
|
data() { |
||||
|
return { |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less"> |
||||
|
.rect { |
||||
|
width: 558rpx; |
||||
|
height: 595rpx; |
||||
|
background: #FFFFFF; |
||||
|
opacity: 1; |
||||
|
border-radius: 20rpx; |
||||
|
position: relative; |
||||
|
left: 96rpx; |
||||
|
top: 377rpx; |
||||
|
} |
||||
|
.image{ |
||||
|
width: 292rpx; |
||||
|
height: 241rpx; |
||||
|
position: absolute; |
||||
|
left: 133rpx; |
||||
|
top: 60rpx; |
||||
|
} |
||||
|
.title{ |
||||
|
width: 182rpx; |
||||
|
height: 40rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
top: 293rpx; |
||||
|
left: 189rpx; |
||||
|
} |
||||
|
.info{ |
||||
|
width: 196rpx; |
||||
|
height: 40rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
top: 339rpx; |
||||
|
left: 182rpx; |
||||
|
} |
||||
|
.button{ |
||||
|
width: 351rpx; |
||||
|
height: 90rpx; |
||||
|
background: #FFFFFF; |
||||
|
border: 1rpx solid #D49B4B; |
||||
|
opacity: 1; |
||||
|
border-radius: 93rpx; |
||||
|
position: absolute; |
||||
|
left: 104rpx; |
||||
|
bottom: 74rpx; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.textknow{ |
||||
|
width: 108rpx; |
||||
|
height: 90rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 400; |
||||
|
line-height: 90rpx; |
||||
|
color: #D49B4B; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,229 @@ |
|||||
|
<template> |
||||
|
<view class="min-picker"> |
||||
|
<view class="min-popup" v-if="show" :class="[show ? 'min-show' : 'min-hide']"> |
||||
|
<view class="min-content" :style="{height:heightRpx+'rpx'}"> |
||||
|
<view class="main-top"> |
||||
|
<view class="picer-top"> |
||||
|
<text @click="cacel">取消</text> |
||||
|
<text @click="sure" class="sure">确认</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" style="height:400rpx"> |
||||
|
<picker-view-column> |
||||
|
<view class="picker item" v-for="(item,index) in years" :key="index">{{item}}年</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column> |
||||
|
<view class="picker item" v-for="(item,index) in months" :key="index">{{item}}月</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column> |
||||
|
<view class="picker item" v-for="(item,index) in days" :key="index">{{item}}日</view> |
||||
|
</picker-view-column> |
||||
|
</picker-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name:'MinPicker', |
||||
|
props: { |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
///日期选择器的起始时间 |
||||
|
startTime:{ |
||||
|
type: Array, |
||||
|
default: () => [2018,6,5] |
||||
|
}, |
||||
|
///日期选择器的结束时间 |
||||
|
endTime:{ |
||||
|
type: Number, |
||||
|
default: 2045 |
||||
|
}, |
||||
|
heightRpx: { |
||||
|
type: String |
||||
|
}, |
||||
|
///日期选择器默认显示的时间 |
||||
|
currentTime : { |
||||
|
type : [Array,null], |
||||
|
default:null |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
years: [], |
||||
|
months: [], |
||||
|
days: [], |
||||
|
dayLength: 30, |
||||
|
value: [0, 0, 0], |
||||
|
visible: false, |
||||
|
month: '', |
||||
|
year: '', |
||||
|
flag: false, |
||||
|
indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}rpx;` |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
const time = new Date() |
||||
|
const year = time.getFullYear() |
||||
|
const month = time.getMonth() + 1 |
||||
|
this.month = month |
||||
|
this.year = year |
||||
|
this.getDaysInOneMonth(year, month) |
||||
|
this.getYears() |
||||
|
this.getMonth() |
||||
|
this.getDays() |
||||
|
// 获取初始位置 |
||||
|
if(this.currentTime == null){ |
||||
|
this.value = [this.years.indexOf(this.year),this.months.indexOf(this.month ),this.days.indexOf( time.getDate())] |
||||
|
}else{ |
||||
|
this.value = this.currentTime; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
bindChange: function(e) { |
||||
|
this.getDaysInOneMonth(this.years[e.target.value[0]], this.months[e.target.value[1]]) |
||||
|
this.flag = true |
||||
|
const val = e.detail.value |
||||
|
this.year = this.years[val[0]] |
||||
|
this.month = this.months[val[1]] < 10 ? '0' + this.months[val[1]] : this.months[val[1]] |
||||
|
this.day = this.days[val[2]] < 10 ? '0' + this.days[val[2]] : this.days[val[2]] |
||||
|
this.getDays() |
||||
|
if(this.year === this.years[0] && this.startTime[1] && this.startTime[2]) { |
||||
|
this.getMonth(this.startTime[1]) |
||||
|
return this.getDays(this.startTime[2]) |
||||
|
} |
||||
|
this.getYears() |
||||
|
this.getMonth() |
||||
|
this.getDays() |
||||
|
// }) |
||||
|
}, |
||||
|
// 获得年份 |
||||
|
getYears() { |
||||
|
this.years = [] |
||||
|
for (let i = this.startTime[0]; i <= this.endTime; i++) { |
||||
|
this.years.push(i) |
||||
|
} |
||||
|
}, |
||||
|
// 获取月份 |
||||
|
getMonth(min) { |
||||
|
this.months = [] |
||||
|
// const time = new Date() |
||||
|
for (let i = min ? min : 1; i <= 12; i++) { |
||||
|
this.months.push(i) |
||||
|
} |
||||
|
}, |
||||
|
getDays(min) { |
||||
|
this.days = [] |
||||
|
for (let i = min ? min : 1; i <= this.dayLength; i++) { |
||||
|
this.days.push(i) |
||||
|
} |
||||
|
}, |
||||
|
// 获取某年某月多少天 |
||||
|
getDaysInOneMonth(year, month) { |
||||
|
month = parseInt(month, 10) |
||||
|
var d = new Date(year, month, 0) |
||||
|
this.dayLength = d.getDate() |
||||
|
this.getDays() |
||||
|
return d.getDate() |
||||
|
}, |
||||
|
// 取消 |
||||
|
cacel() { |
||||
|
this.$emit('cancel', false) |
||||
|
}, |
||||
|
// 确认 |
||||
|
sure() { |
||||
|
if (!this.flag) { |
||||
|
this.$emit('cancel', false) |
||||
|
this.$emit('sure', { |
||||
|
a: this.years[this.value[0]], |
||||
|
b: this.months[this.value[1]], |
||||
|
c: this.days[this.value[2]] |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
this.$emit('cancel', false) |
||||
|
this.$emit('sure', { |
||||
|
a: this.year, |
||||
|
b: this.month, |
||||
|
c: this.day |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.main-top { |
||||
|
padding: 0 30rpx; |
||||
|
border-radius: 20rpx; |
||||
|
.picer-top { |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-size: 30rpx; |
||||
|
//background-color: #1CBBB4; |
||||
|
.sure { |
||||
|
color: #007aff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.picker { |
||||
|
text-align: center; |
||||
|
line-height: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.min-popup{ |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
position: fixed; |
||||
|
top:0; |
||||
|
left: 0; |
||||
|
z-index: 100; |
||||
|
&.min-hide{ |
||||
|
.min-content{ |
||||
|
animation: hide .5s linear forwards; |
||||
|
} |
||||
|
.min-content-height{ animation: hide .5s linear forwards;} |
||||
|
|
||||
|
} |
||||
|
&.min-show{ |
||||
|
.min-content{ |
||||
|
animation: show .5s linear forwards; |
||||
|
} |
||||
|
.min-content-height{ animation: show .5s linear forwards;} |
||||
|
} |
||||
|
.min-content{ |
||||
|
width: 100%; |
||||
|
height:800rpx; |
||||
|
background: #fff; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 9999; |
||||
|
overflow: hidden; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
} |
||||
|
@keyframes hide { |
||||
|
100% { |
||||
|
transform: translateY(100%); |
||||
|
} |
||||
|
0% { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
@keyframes show { |
||||
|
0% { |
||||
|
transform: translateY(100%); |
||||
|
} |
||||
|
100% { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,21 @@ |
|||||
|
The MIT License (MIT) |
||||
|
|
||||
|
Copyright (c) 2018 Hust.cc |
||||
|
|
||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
|
of this software and associated documentation files (the "Software"), to deal |
||||
|
in the Software without restriction, including without limitation the rights |
||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
|
copies of the Software, and to permit persons to whom the Software is |
||||
|
furnished to do so, subject to the following conditions: |
||||
|
|
||||
|
The above copyright notice and this permission notice shall be included in all |
||||
|
copies or substantial portions of the Software. |
||||
|
|
||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
|
SOFTWARE. |
||||
@ -0,0 +1,58 @@ |
|||||
|
# onfire.js |
||||
|
|
||||
|
> nano version (~ 500b) for event-emitter. |
||||
|
|
||||
|
[](https://travis-ci.org/hustcc/onfire.js) |
||||
|
[](https://www.npmjs.com/package/onfire.js) |
||||
|
|
||||
|
|
||||
|
[中文文档](./README_zh.md) | [English Doc](./README.md) |
||||
|
|
||||
|
|
||||
|
## Install |
||||
|
|
||||
|
> npm i --save onfire.js |
||||
|
|
||||
|
|
||||
|
|
||||
|
## Usage |
||||
|
|
||||
|
```js |
||||
|
import EE from 'onfire.js'; |
||||
|
|
||||
|
const ee = new EE(); |
||||
|
|
||||
|
ee.on('mouseover', () => {}); |
||||
|
|
||||
|
ee.once('click', () => {}); |
||||
|
|
||||
|
ee.fire('click', 1, 'hello', true); |
||||
|
|
||||
|
ee.off('click'); |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
|
||||
|
## API |
||||
|
|
||||
|
Simple and similar with `event-emitter`. |
||||
|
|
||||
|
|
||||
|
- `on(eventName: string, callback: Function)`: listen an event. |
||||
|
- `once(eventName: string, callback: Function)`: listen a event only once. |
||||
|
- `fire(eventName: string, ...parameters: any[])`: emit / trigger an event with parameters. |
||||
|
- `off(eventName?: string, callback?: Function)`: unsubscribe an event. |
||||
|
|
||||
|
|
||||
|
|
||||
|
## Used |
||||
|
|
||||
|
- Events subscribe and dispatcher. |
||||
|
- `Cross-component communication` for React / Vue / Angular. |
||||
|
- System event mechanism. |
||||
|
|
||||
|
|
||||
|
|
||||
|
## License |
||||
|
|
||||
|
MIT@[hustcc](https://github.com/hustcc). |
||||
@ -0,0 +1,58 @@ |
|||||
|
# onfire.js |
||||
|
|
||||
|
> 一个迷你版（~ 500b）的事件订阅和发布的库，简单实用。 |
||||
|
|
||||
|
[](https://travis-ci.org/hustcc/onfire.js) |
||||
|
[](https://www.npmjs.com/package/onfire.js) |
||||
|
|
||||
|
|
||||
|
[中文文档](./README_zh.md) | [English Doc](./README.md) |
||||
|
|
||||
|
|
||||
|
## 安装 |
||||
|
|
||||
|
> npm i --save onfire.js |
||||
|
|
||||
|
|
||||
|
|
||||
|
## 使用 |
||||
|
|
||||
|
```js |
||||
|
import EE from 'onfire.js'; |
||||
|
|
||||
|
const ee = new EE(); |
||||
|
|
||||
|
ee.on('mouseover', () => {}); |
||||
|
|
||||
|
ee.once('click', () => {}); |
||||
|
|
||||
|
ee.fire('click', 1, 'hello', true); |
||||
|
|
||||
|
ee.off('click'); |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
|
||||
|
## API 文档 |
||||
|
|
||||
|
非常简单，类似于 `event-emitter`。 |
||||
|
|
||||
|
|
||||
|
- `on(eventName: string, callback: Function)`：监听一个事件，触发后，执行指定的方法。 |
||||
|
- `once(eventName: string, callback: Function)`：仅监听一个事件一次，，触发后，执行指定的方法。 |
||||
|
- `fire(eventName: string, ...parameters: any[])`：触发一个指定的事件，并发送对应的数据。 |
||||
|
- `off(eventName?: string, callback?: Function)`：取消监听一个事件及方法，如果 callback 为空，则取消事件的所有方法；如果都为空，则取消所有事件监听。 |
||||
|
|
||||
|
|
||||
|
|
||||
|
## 使用场景 |
||||
|
|
||||
|
- 事件订阅和发布的场景。 |
||||
|
- 在 React、Vue、Angular 中进行`跨组件通信`。 |
||||
|
- 系统的自定义事件机制。 |
||||
|
- 应用：[如何进行跨组件通信 —— React 实例](./doc/cross-component-communication-react.md) |
||||
|
|
||||
|
|
||||
|
## License |
||||
|
|
||||
|
MIT@[hustcc](https://github.com/hustcc). |
||||
@ -0,0 +1,58 @@ |
|||||
|
# 如何进行跨组件通信 |
||||
|
|
||||
|
> 分步骤介绍如何在 React 中使用 onfire.js 事件的方式去进行跨组件通信。 |
||||
|
|
||||
|
举个场景例子：页面顶部的搜索框（Search）根据下面加载的内容（Content）页面不同，显示不同的默认内容。也就是 Content 组件需要发送数据给 Search 组件。 |
||||
|
|
||||
|
|
||||
|
- 安装 |
||||
|
|
||||
|
> npm i --save onfire.js |
||||
|
|
||||
|
|
||||
|
- 公共模块创建事件 |
||||
|
|
||||
|
例如，在整个系统的公共模块中创建一个 onfire 实例，用于数据通信。比如 `common.js` 中： |
||||
|
|
||||
|
```js |
||||
|
import OnFire from 'onfire.js'; |
||||
|
// 创建 onFire 事件实例 |
||||
|
const onFire = new OnFire(); |
||||
|
|
||||
|
// 导出，给 Search、Content 组件使用 |
||||
|
export default onFire; |
||||
|
``` |
||||
|
|
||||
|
- Search 组件中监听事件 |
||||
|
|
||||
|
我们定义事件名称为：`keywordEventName`，然后在 Search 组件中监听事件，代码如下： |
||||
|
|
||||
|
```js |
||||
|
import onFire from './common.js'; |
||||
|
|
||||
|
// 组件加载之后，监听事件 |
||||
|
function onLoad() { |
||||
|
onFire.on('keywordEventName', function(keyword) { |
||||
|
// 设置搜索框默认的搜索关键字 |
||||
|
setDefaultKeyword(keyword); |
||||
|
}); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
- Content 组件发送数据 |
||||
|
|
||||
|
```js |
||||
|
import onFire from './common.js'; |
||||
|
|
||||
|
// 组件加载之后，发送数据 |
||||
|
function onLoad() { |
||||
|
onFire.fire('keywordEventName', 'Content 页面的关键字'); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
> 完成之后，效果就是，在 Content 组件加载之后，会将 `'Content 页面的关键字'` 发送到 Search 组件中。切换不同的内容，可以实现发送不同的数据。 |
||||
|
|
||||
|
|
||||
|
---- |
||||
|
|
||||
|
以上伪代码，并不一定在 React 才能使用，在 Vue、Angular，甚至小程序上，原理都是一样的，通过事件的监听和发布机制，事件数据的通信。 |
||||
@ -0,0 +1,34 @@ |
|||||
|
/** |
||||
|
* mini (~500 b) version for event-emitter. |
||||
|
* |
||||
|
* Created by hustcc on 2018/12/31 |
||||
|
* Contract: vip@hust.edu.cn |
||||
|
*/ |
||||
|
export interface Listener { |
||||
|
cb: Function; |
||||
|
once: boolean; |
||||
|
} |
||||
|
export interface EventsType { |
||||
|
[eventName: string]: Listener[]; |
||||
|
} |
||||
|
/** |
||||
|
* const ee = new OnFire(); |
||||
|
* |
||||
|
* ee.on('click', (...values) => {}); |
||||
|
* |
||||
|
* ee.on('mouseover', (...values) => {}); |
||||
|
* |
||||
|
* ee.emit('click', 1, 2, 3); |
||||
|
* ee.fire('mouseover', {}); // same with emit
|
||||
|
* |
||||
|
* ee.off(); |
||||
|
*/ |
||||
|
export default class OnFire { |
||||
|
static ver: string; |
||||
|
es: EventsType; |
||||
|
on(eventName: string, cb: Function, once?: boolean): void; |
||||
|
once(eventName: string, cb: Function): void; |
||||
|
fire(eventName: string, ...params: any[]): void; |
||||
|
off(eventName?: string, cb?: Function): void; |
||||
|
emit(eventName: string, ...params: any[]): void; |
||||
|
} |
||||
@ -0,0 +1,115 @@ |
|||||
|
"use strict"; |
||||
|
/** |
||||
|
* mini (~500 b) version for event-emitter. |
||||
|
* |
||||
|
* Created by hustcc on 2018/12/31 |
||||
|
* Contract: vip@hust.edu.cn |
||||
|
*/ |
||||
|
|
||||
|
Object.defineProperty(exports, "__esModule", { |
||||
|
value: true |
||||
|
}); |
||||
|
/** |
||||
|
* const ee = new OnFire(); |
||||
|
* |
||||
|
* ee.on('click', (...values) => {}); |
||||
|
* |
||||
|
* ee.on('mouseover', (...values) => {}); |
||||
|
* |
||||
|
* ee.emit('click', 1, 2, 3); |
||||
|
* ee.fire('mouseover', {}); // same with emit
|
||||
|
* |
||||
|
* ee.off(); |
||||
|
*/ |
||||
|
|
||||
|
var OnFire = |
||||
|
/** @class */ |
||||
|
function () { |
||||
|
function OnFire() { |
||||
|
// 所有事件的监听器
|
||||
|
this.es = {}; |
||||
|
} |
||||
|
|
||||
|
OnFire.prototype.on = function (eventName, cb, once) { |
||||
|
if (once === void 0) { |
||||
|
once = false; |
||||
|
} |
||||
|
|
||||
|
if (!this.es[eventName]) { |
||||
|
this.es[eventName] = []; |
||||
|
} |
||||
|
|
||||
|
this.es[eventName].push({ |
||||
|
cb: cb, |
||||
|
once: once |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
OnFire.prototype.once = function (eventName, cb) { |
||||
|
this.on(eventName, cb, true); |
||||
|
}; |
||||
|
|
||||
|
OnFire.prototype.fire = function (eventName) { |
||||
|
var params = []; |
||||
|
|
||||
|
for (var _i = 1; _i < arguments.length; _i++) { |
||||
|
params[_i - 1] = arguments[_i]; |
||||
|
} |
||||
|
|
||||
|
var listeners = this.es[eventName] || []; |
||||
|
var l = listeners.length; |
||||
|
|
||||
|
for (var i = 0; i < l; i++) { |
||||
|
var _a = listeners[i], |
||||
|
cb = _a.cb, |
||||
|
once = _a.once; |
||||
|
cb.apply(this, params); |
||||
|
|
||||
|
if (once) { |
||||
|
listeners.splice(i, 1); |
||||
|
i--; |
||||
|
l--; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
OnFire.prototype.off = function (eventName, cb) { |
||||
|
// clean all
|
||||
|
if (eventName === undefined) { |
||||
|
this.es = {}; |
||||
|
} else { |
||||
|
if (cb === undefined) { |
||||
|
// clean the eventName's listeners
|
||||
|
delete this.es[eventName]; |
||||
|
} else { |
||||
|
var listeners = this.es[eventName] || []; // clean the event and listener
|
||||
|
|
||||
|
var l = listeners.length; |
||||
|
|
||||
|
for (var i = 0; i < l; i++) { |
||||
|
if (listeners[i].cb === cb) { |
||||
|
listeners.splice(i, 1); |
||||
|
i--; |
||||
|
l--; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; // cname of fire
|
||||
|
|
||||
|
|
||||
|
OnFire.prototype.emit = function (eventName) { |
||||
|
var params = []; |
||||
|
|
||||
|
for (var _i = 1; _i < arguments.length; _i++) { |
||||
|
params[_i - 1] = arguments[_i]; |
||||
|
} |
||||
|
|
||||
|
this.fire.apply(this, [eventName].concat(params)); |
||||
|
}; |
||||
|
|
||||
|
OnFire.ver = "2.0.1"; |
||||
|
return OnFire; |
||||
|
}(); |
||||
|
|
||||
|
exports.default = OnFire; |
||||
@ -0,0 +1,92 @@ |
|||||
|
{ |
||||
|
"_from": "onfire.js", |
||||
|
"_id": "onfire.js@2.0.1", |
||||
|
"_inBundle": false, |
||||
|
"_integrity": "sha512-Fwl7tXwnzBSwedaJkF3Zx1KKcGyQvpPw8Y8mTu7ZLE+6TMFv2W5TONW3DwDejp8vivXZSlb7dxjlld2jT1YW8Q==", |
||||
|
"_location": "/onfire.js", |
||||
|
"_phantomChildren": {}, |
||||
|
"_requested": { |
||||
|
"type": "tag", |
||||
|
"registry": true, |
||||
|
"raw": "onfire.js", |
||||
|
"name": "onfire.js", |
||||
|
"escapedName": "onfire.js", |
||||
|
"rawSpec": "", |
||||
|
"saveSpec": null, |
||||
|
"fetchSpec": "latest" |
||||
|
}, |
||||
|
"_requiredBy": [ |
||||
|
"#USER", |
||||
|
"/" |
||||
|
], |
||||
|
"_resolved": "https://registry.npmjs.org/onfire.js/-/onfire.js-2.0.1.tgz", |
||||
|
"_shasum": "76ac5a440e17ecd81aa4c287df02af368576dad8", |
||||
|
"_spec": "onfire.js", |
||||
|
"_where": "D:\\Uni-App\\HBuilderProjects\\Test", |
||||
|
"author": { |
||||
|
"name": "hustcc", |
||||
|
"url": "https://atool.vip/" |
||||
|
}, |
||||
|
"bugs": { |
||||
|
"url": "https://github.com/hustcc/onfire.js/issues" |
||||
|
}, |
||||
|
"bundleDependencies": false, |
||||
|
"dependencies": {}, |
||||
|
"deprecated": false, |
||||
|
"description": "onfire.js is a mini (~500 b) version for event-emitter.", |
||||
|
"devDependencies": { |
||||
|
"@babel/cli": "^7.2.3", |
||||
|
"@babel/core": "^7.2.2", |
||||
|
"@babel/preset-env": "^7.2.3", |
||||
|
"@types/jest": "^23.3.10", |
||||
|
"babel-plugin-version": "^0.2.3", |
||||
|
"jest": "^23.6.0", |
||||
|
"rimraf": "^2.6.2", |
||||
|
"ts-jest": "^23.10.5", |
||||
|
"typescript": "^3.2.2" |
||||
|
}, |
||||
|
"homepage": "https://github.com/hustcc/onfire.js#readme", |
||||
|
"jest": { |
||||
|
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.ts$", |
||||
|
"transform": { |
||||
|
"^.+\\.(ts|tsx)$": "ts-jest" |
||||
|
}, |
||||
|
"collectCoverage": true, |
||||
|
"collectCoverageFrom": [ |
||||
|
"src/**/*.{ts,js}", |
||||
|
"!**/node_modules/**", |
||||
|
"!**/vendor/**", |
||||
|
"!src/**/*.{d.ts}" |
||||
|
], |
||||
|
"moduleFileExtensions": [ |
||||
|
"ts", |
||||
|
"tsx", |
||||
|
"js", |
||||
|
"jsx", |
||||
|
"json" |
||||
|
] |
||||
|
}, |
||||
|
"keywords": [ |
||||
|
"onfire", |
||||
|
"ee", |
||||
|
"event", |
||||
|
"emitter", |
||||
|
"event-emitter", |
||||
|
"subscribe" |
||||
|
], |
||||
|
"license": "MIT", |
||||
|
"main": "lib/index.js", |
||||
|
"name": "onfire.js", |
||||
|
"officialName": "onfire.js", |
||||
|
"repository": { |
||||
|
"type": "git", |
||||
|
"url": "git+https://github.com/hustcc/onfire.js.git" |
||||
|
}, |
||||
|
"scripts": { |
||||
|
"build": "rimraf tmp lib && tsc && babel tmp --out-dir lib --copy-files && rimraf tmp", |
||||
|
"lint": "tsc --noEmit", |
||||
|
"test": "jest" |
||||
|
}, |
||||
|
"summary": "onfire.js is a mini (~500 b) version for event-emitter.", |
||||
|
"version": "2.0.1" |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
{ |
||||
|
"name": "Test", |
||||
|
"version": "1.0.0", |
||||
|
"lockfileVersion": 1, |
||||
|
"requires": true, |
||||
|
"dependencies": { |
||||
|
"onfire.js": { |
||||
|
"version": "2.0.1", |
||||
|
"resolved": "https://registry.npmjs.org/onfire.js/-/onfire.js-2.0.1.tgz", |
||||
|
"integrity": "sha512-Fwl7tXwnzBSwedaJkF3Zx1KKcGyQvpPw8Y8mTu7ZLE+6TMFv2W5TONW3DwDejp8vivXZSlb7dxjlld2jT1YW8Q==" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,320 @@ |
|||||
|
<template> |
||||
|
<view class="main_background"> |
||||
|
<view class="back"></view> |
||||
|
<MyNavbar title="合作申请" background="../../static/images/kehu/bg_2.png"></MyNavbar> |
||||
|
<view class="body"> |
||||
|
<view style="width:100%;height:129rpx;position: absolute;top: 0;left: 0;right: 0;"> |
||||
|
<view style="width: 8rpx;height: 22rpx;background: #D49B4B;opacity: 1;border-radius: 1px 5px 5px 1px;position: absolute;top: 42rpx;left: 20rpx;"/> |
||||
|
<text class="title_text">个人资料</text> |
||||
|
</view> |
||||
|
<view class="u-form-body"> |
||||
|
<u-form |
||||
|
labelPosition="left" |
||||
|
ref="form1" |
||||
|
:model="person" |
||||
|
:rules="rules" |
||||
|
:labelStyle="form_tile_title" |
||||
|
> |
||||
|
<u-form-item |
||||
|
prop="person.name" |
||||
|
borderBottom |
||||
|
ref="name" |
||||
|
label="姓名*" |
||||
|
> |
||||
|
<input |
||||
|
:placeholder="rules['person.name'].message" |
||||
|
class="form_input" |
||||
|
:value="person.name" |
||||
|
placeholder-class="form_holder" |
||||
|
@blur="rules['person.name'].validator" |
||||
|
/> |
||||
|
</u-form-item> |
||||
|
<u-form-item |
||||
|
label="电话*" |
||||
|
prop="person.phone" |
||||
|
borderBottom |
||||
|
ref="phone" |
||||
|
> |
||||
|
<input |
||||
|
:placeholder="rules['person.phone'].message" |
||||
|
class="form_input" |
||||
|
placeholder-class="form_holder" |
||||
|
:value="person.phone" |
||||
|
@blur="rules['person.phone'].validator" |
||||
|
/> |
||||
|
</u-form-item> |
||||
|
<u-form-item |
||||
|
label="所在地址" |
||||
|
prop="person.address" |
||||
|
borderBottom |
||||
|
ref="city" |
||||
|
@click="onClickToSelectCity" |
||||
|
> |
||||
|
<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion"> |
||||
|
<input |
||||
|
:placeholder="rules['person.address'].message" |
||||
|
class="form_input" |
||||
|
:disabled="true" |
||||
|
:value="person.address" |
||||
|
placeholder-class="form_holder" |
||||
|
/> |
||||
|
</pick-regions> |
||||
|
<u-icon |
||||
|
slot="right" |
||||
|
name="arrow-right" |
||||
|
></u-icon> |
||||
|
</u-form-item> |
||||
|
<u-form-item |
||||
|
label="推荐人电话" |
||||
|
prop="person.referrer" |
||||
|
borderBottom |
||||
|
ref="referrer" |
||||
|
> |
||||
|
<input |
||||
|
:placeholder="rules['person.referrer'].message" |
||||
|
class="form_input" |
||||
|
placeholder-class="form_holder" |
||||
|
:value="person.referrer" |
||||
|
@blur="rules['person.referrer'].validator" |
||||
|
/> |
||||
|
</u-form-item> |
||||
|
</u-form> |
||||
|
<u-gap height="40rpx" /> |
||||
|
<view style="width: 100%;height: 120rpx;"> |
||||
|
<text class="attentionText">注意事项</text> |
||||
|
<text class="attentionInfo"> |
||||
|
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名 |
||||
|
</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="button"> |
||||
|
<text class="button_text">提交</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MyNavbar from "@/components/MyNavbar/MyNavbar.vue"; |
||||
|
export default { |
||||
|
components:{ |
||||
|
MyNavbar, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
person : { |
||||
|
///名字 |
||||
|
name : '', |
||||
|
///电话号码 |
||||
|
phone : '', |
||||
|
///所在地址 |
||||
|
address : '', |
||||
|
///推荐人电话 |
||||
|
referrer : '', |
||||
|
}, |
||||
|
rules : { |
||||
|
"person.name" : { |
||||
|
type: 'string', |
||||
|
required: true, |
||||
|
message : '请输入您的姓名', |
||||
|
validator : (object)=>{ |
||||
|
this.person.name = object.detail.value; |
||||
|
} |
||||
|
}, |
||||
|
'person.phone' : { |
||||
|
type: 'string', |
||||
|
required: true, |
||||
|
message : '请输入您的联系电话', |
||||
|
///校验用户是否输入了正确的手机号码 |
||||
|
validator : (object)=>{ |
||||
|
var suc = uni.$u.test.mobile(object.detail.value); |
||||
|
if(!suc){ |
||||
|
uni.$u.toast("请输入正确的电话号码！"); |
||||
|
}else{ |
||||
|
this.person.phone = object.detail.value; |
||||
|
} |
||||
|
|
||||
|
return suc; |
||||
|
} |
||||
|
}, |
||||
|
'person.address' : { |
||||
|
type : 'string', |
||||
|
required : false, |
||||
|
message: '请选择您的地址', |
||||
|
}, |
||||
|
'person.referrer' : { |
||||
|
type : 'string', |
||||
|
required : false, |
||||
|
message : '请输入推荐人电话号码', |
||||
|
///校验用户是否输入了正确的手机号码 |
||||
|
validator : (object)=>{ |
||||
|
var suc = uni.$u.test.mobile(object.detail.value); |
||||
|
if(!suc){ |
||||
|
uni.$u.toast("请输入正确的电话号码！"); |
||||
|
}else{ |
||||
|
this.person.referrer = object.detail.value; |
||||
|
} |
||||
|
return suc; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
form_tile_title : { |
||||
|
width: '170rpx', |
||||
|
height: '37rpx', |
||||
|
fontSize: 26, |
||||
|
fontWeight: 500, |
||||
|
color: 'black', |
||||
|
}, |
||||
|
defaultRegion:['四川省','成都市','武侯区'], |
||||
|
region:[], |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
methods:{ |
||||
|
///点击并选择城市 |
||||
|
onClickToSelectCity(){ |
||||
|
uni.hideKeyboard(); |
||||
|
}, |
||||
|
// 获取选择的地区 |
||||
|
handleGetRegion(region){ |
||||
|
this.region = region; |
||||
|
this.person.address = this.regionName(); |
||||
|
this.$refs.form1.validateField('person.address'); |
||||
|
}, |
||||
|
regionName(){ |
||||
|
return this.region.map(item=>item.name).join(' '); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.main_background{ |
||||
|
opacity: 1; |
||||
|
border-radius: 0rpx; |
||||
|
overflow: scroll; |
||||
|
touch-action: auto; |
||||
|
flex-direction: column; |
||||
|
display: flex; |
||||
|
margin: 0 auto; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
position: relative; |
||||
|
} |
||||
|
.back{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
background:#F6F6F6 |
||||
|
} |
||||
|
.top{ |
||||
|
width: 750rpx; |
||||
|
height: 424rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
.top_banner{ |
||||
|
position: relative; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 750rpx; |
||||
|
height: 424rpx; |
||||
|
} |
||||
|
.body{ |
||||
|
width: 702rpx; |
||||
|
height: 820rpx; |
||||
|
position: relative; |
||||
|
left: 24rpx; |
||||
|
right: 24rpx; |
||||
|
top: -129rpx; |
||||
|
background: #FFFFFF; |
||||
|
opacity: 1; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
.title_text{ |
||||
|
width: 192rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
left: 38rpx; |
||||
|
top: 30rpx; |
||||
|
} |
||||
|
.u-form-body{ |
||||
|
position: absolute;width: 662rpx; |
||||
|
top: 70rpx; |
||||
|
left: 20rpx; |
||||
|
right: 20rpx; |
||||
|
height: 740rpx; |
||||
|
//background-color: #1CBBB4; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
.form_input{ |
||||
|
//background-color: #0081FF; |
||||
|
width: 100%; |
||||
|
height: 90rpx; |
||||
|
text-align: right; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.form_holder{ |
||||
|
width: 100%; |
||||
|
height: 90rpx; |
||||
|
text-align: right; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 400; |
||||
|
color: #999999; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
.form_label_style{ |
||||
|
height: 37rpx; |
||||
|
font-size: 26rpx; |
||||
|
font-weight: 400; |
||||
|
color: #666666; |
||||
|
opacity: 1; |
||||
|
}r |
||||
|
///注意事项 |
||||
|
.attentionText{ |
||||
|
width: 104rpx; |
||||
|
height: 37rpx; |
||||
|
font-size: 26rpx; |
||||
|
font-weight: 400; |
||||
|
color: #666666; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
.attentionInfo{ |
||||
|
width: 648rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 400; |
||||
|
color: #999999; |
||||
|
opacity: 1; |
||||
|
max-height: 120rpx; |
||||
|
} |
||||
|
.button{ |
||||
|
width: 702rpx; |
||||
|
height: 90rpx; |
||||
|
background: #D49B4B; |
||||
|
opacity: 1; |
||||
|
border-radius: 93rpx; |
||||
|
position: relative; |
||||
|
left: 24rpx; |
||||
|
} |
||||
|
.button_text{ |
||||
|
width: 72rpx; |
||||
|
height: 50rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
left: 315rpx; |
||||
|
top: 20rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,393 @@ |
|||||
|
<!--个人中心-->> |
||||
|
<template> |
||||
|
<view class="main"> |
||||
|
<view class="back"/> |
||||
|
<u-navbar |
||||
|
title="个人主页" |
||||
|
:safeAreaInsetTop="true" |
||||
|
:fixed="true" |
||||
|
bgColor="#FFFFFF00" |
||||
|
:placeholder="true" |
||||
|
/> |
||||
|
<u-line :dashed="false" color="#E2E2E2" customStyle="border: 1rpx solid #E2E2E2;"></u-line> |
||||
|
<view class="body"> |
||||
|
<u-form |
||||
|
labelPosition="left" |
||||
|
ref="form1" |
||||
|
:model="player" |
||||
|
:rules="rules" |
||||
|
:labelStyle="form_tile_title" |
||||
|
> |
||||
|
<u-form-item v-for="(item,index) in rules" :key="item.getValue(player)" :prop="index" borderBottom :ref="index" @click="onTouchOneItem"> |
||||
|
<view class="form_item_global"> |
||||
|
<text class="form_title_global"> |
||||
|
{{item.title}} |
||||
|
</text> |
||||
|
<view v-if="index == 'headUrl'"> |
||||
|
<image :src="item.getValue(player)" class="head"/> |
||||
|
</view> |
||||
|
<input |
||||
|
:placeholder="item.message" |
||||
|
class="form_input_global" |
||||
|
placeholder-class="form_input_placeholder_global" |
||||
|
:value="item.getValue(player)" |
||||
|
@blur='(object)=>{ |
||||
|
onBlurCallback(index,object); |
||||
|
}' |
||||
|
v-else-if="item.enableInput" |
||||
|
/> |
||||
|
<view v-else> |
||||
|
<text v-if="item.getValue(player) == ''" class="form_input_placeholder_global">{{item.message}}</text> |
||||
|
<text class="form_title_global" v-else>{{item.getValue(player)}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-form-item> |
||||
|
</u-form> |
||||
|
</view> |
||||
|
<u-gap height="37rpx" /> |
||||
|
<view class="intro_box"> |
||||
|
<text class="item_title" style="position: absolute;left: 0;">简介</text> |
||||
|
<view class="intro_area"> |
||||
|
<textarea |
||||
|
class="textarea" |
||||
|
placeholder="请输入您的简单介绍" |
||||
|
placeholder-class='form_holder' |
||||
|
@blur="onEditPlayerIntro" |
||||
|
:value="player.intro" |
||||
|
> |
||||
|
</textarea> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-gap height="40rpx" /> |
||||
|
<button class="confirm_button_global" @click="doConfirm" hover-class="confirm_button_hover_class"> |
||||
|
确认 |
||||
|
</button> |
||||
|
<u-gap height="20rpx" /> |
||||
|
<button class="cancel_button_global" hover-class="cancel_button_hover_class" @click="doLoginOut">退出登录</button> |
||||
|
<u-gap height="100rpx" /> |
||||
|
<min-picker |
||||
|
:startTime="startTime" |
||||
|
:endTime="endTime" |
||||
|
@cancel="onDateSelectCanceled" |
||||
|
@sure="onDateSelectConfirm" |
||||
|
:show="isDateSelectShowing" |
||||
|
heightRpx="500" |
||||
|
:currentTime="currentTime" |
||||
|
></min-picker> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
mounted() { |
||||
|
this.$refs.form1.setRules(this.rules); |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
player : this.$Define.Player, |
||||
|
///生日选择器是否在活动中 |
||||
|
isDateSelectShowing : false, |
||||
|
rules:{ |
||||
|
///头像 |
||||
|
headUrl : { |
||||
|
type : 'string', |
||||
|
|
||||
|
title : '头像', |
||||
|
|
||||
|
message : '', |
||||
|
//是否允许输入 |
||||
|
enableInput : false, |
||||
|
|
||||
|
///获取里面的值 |
||||
|
getValue(player){ |
||||
|
if(player.headUrl == ''){ |
||||
|
return "../../static/images/wode/touxiang_6.png"; |
||||
|
} |
||||
|
return player.headUrl; |
||||
|
}, |
||||
|
|
||||
|
validator:(object)=>{}, |
||||
|
}, |
||||
|
name : { |
||||
|
type : 'string', |
||||
|
|
||||
|
title : '昵称', |
||||
|
|
||||
|
key : 'name', |
||||
|
|
||||
|
message : '', |
||||
|
//是否允许输入 |
||||
|
enableInput : false, |
||||
|
|
||||
|
///获取里面的值 |
||||
|
getValue(player){ |
||||
|
if(player.nickName == ''){ |
||||
|
return "没有获取到昵称"; |
||||
|
} |
||||
|
return player.nickName; |
||||
|
}, |
||||
|
|
||||
|
validator:(object)=>{}, |
||||
|
}, |
||||
|
sex : { |
||||
|
type : 'string', |
||||
|
|
||||
|
title : '性别', |
||||
|
|
||||
|
key : 'sex', |
||||
|
|
||||
|
message : '', |
||||
|
//是否允许输入 |
||||
|
enableInput : false, |
||||
|
///获取里面的值 |
||||
|
getValue(player){ |
||||
|
if(player.sex == 0){ |
||||
|
return "女"; |
||||
|
} |
||||
|
return '男'; |
||||
|
}, |
||||
|
|
||||
|
validator:(object)=>{}, |
||||
|
}, |
||||
|
phone : { |
||||
|
type : 'string', |
||||
|
|
||||
|
title : '手机号码', |
||||
|
|
||||
|
key : 'phone', |
||||
|
|
||||
|
message : '', |
||||
|
//是否允许输入 |
||||
|
enableInput : false, |
||||
|
///获取里面的值 |
||||
|
getValue(player){ |
||||
|
if(player.phone == ''){ |
||||
|
return "没有获取到电话号码"; |
||||
|
} |
||||
|
return player.phone; |
||||
|
}, |
||||
|
|
||||
|
validator:(object)=>{}, |
||||
|
}, |
||||
|
birthday : { |
||||
|
type : 'string', |
||||
|
|
||||
|
title : '生日', |
||||
|
|
||||
|
key : 'birthday', |
||||
|
|
||||
|
message : '未选择', |
||||
|
|
||||
|
//是否允许输入 |
||||
|
enableInput : false, |
||||
|
|
||||
|
///获取当前可以显示的值 |
||||
|
getValue(player){ |
||||
|
return player.birthday; |
||||
|
}, |
||||
|
validator:(object)=>{}, |
||||
|
}, |
||||
|
profession : { |
||||
|
type : 'string', |
||||
|
|
||||
|
title : '职业', |
||||
|
|
||||
|
key : 'profession', |
||||
|
|
||||
|
message : '未填写', |
||||
|
//是否允许输入 |
||||
|
enableInput : true, |
||||
|
|
||||
|
trigger : 'blur', |
||||
|
///获取里面的值 |
||||
|
getValue(player){ |
||||
|
return player.profession; |
||||
|
}, |
||||
|
///输入了数据，这里验证 |
||||
|
validator:(object)=>{ |
||||
|
this.player.profession = object.detail.value; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
form_tile_title : { |
||||
|
width: '170rpx', |
||||
|
height: '37rpx', |
||||
|
fontSize: 26, |
||||
|
fontWeight: 500, |
||||
|
color: 'black', |
||||
|
}, |
||||
|
startTime : [1900,1,1], |
||||
|
endTime : 2022, |
||||
|
currentTime : this.getCurrentDateSelectTime(), |
||||
|
}; |
||||
|
}, |
||||
|
methods:{ |
||||
|
///从player的birtday数据来初始化 |
||||
|
getCurrentDateSelectTime(player){ |
||||
|
var player = this.$Define.Player; |
||||
|
if(player.birthday == ''){ |
||||
|
return null; |
||||
|
} |
||||
|
var str = player.birthday; |
||||
|
//以-分割 |
||||
|
var arr = str.split('-'); |
||||
|
//需要转换称number |
||||
|
return [parseInt(arr[0]),parseInt(arr[1]),parseInt(arr[2])]; |
||||
|
}, |
||||
|
///显示生日选择器 |
||||
|
onOpenDateSelect(){ |
||||
|
this.isDateSelectShowing = true; |
||||
|
}, |
||||
|
///当生日选择器点击了确认，返回了一个日志 |
||||
|
onDateSelectConfirm(e){ |
||||
|
console.log(e); |
||||
|
//关闭选择器 |
||||
|
this.isDateSelectShowing = false; |
||||
|
//更新用户的生日系统 |
||||
|
var year = parseInt(e.a); |
||||
|
var mouth = parseInt(e.b); |
||||
|
var day = parseInt(e.c); |
||||
|
var str = year + "-" + mouth + "-" + day; |
||||
|
this.player.birthday = str; |
||||
|
this.currentTime = [year,mouth,day]; |
||||
|
//console.log(this.$Define.Player); |
||||
|
}, |
||||
|
///生日选择器取消了选择 |
||||
|
onDateSelectCanceled(){ |
||||
|
this.isDateSelectShowing = false; |
||||
|
}, |
||||
|
///当前几了某一行item，回调参数为当前的prop，prop内容为rules里面的key |
||||
|
onTouchOneItem(prop){ |
||||
|
console.log(prop); |
||||
|
if(prop == 'birthday'){ |
||||
|
//点击的是生日，弹出生日选择器 |
||||
|
this.isDateSelectShowing = true; |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
///当某些输入框失去焦点 |
||||
|
onBlurCallback(key,obj){ |
||||
|
var item = this.rules[key]; |
||||
|
if(item != null){ |
||||
|
item.validator(obj); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
///用户更新了自己的简介 |
||||
|
onEditPlayerIntro(obj){ |
||||
|
console.log(obj); |
||||
|
this.player.intro = obj.detail.value; |
||||
|
}, |
||||
|
///点击了确认按钮 |
||||
|
doConfirm(){ |
||||
|
console.log("You just confirmed!"); |
||||
|
}, |
||||
|
///退出登录 |
||||
|
doLoginOut(){ |
||||
|
console.log("You just loginout!"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.back{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
background:#FFFFFF |
||||
|
} |
||||
|
.main{ |
||||
|
opacity: 1; |
||||
|
border-radius: 0px; |
||||
|
overflow: scroll; |
||||
|
touch-action: auto; |
||||
|
flex-direction: column; |
||||
|
display: flex; |
||||
|
margin: 0 auto; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.body{ |
||||
|
width: 702rpx; |
||||
|
height: 920rpx; |
||||
|
position: relative; |
||||
|
background-color: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
left: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.head{ |
||||
|
width: 97rpx; |
||||
|
height: 97rpx; |
||||
|
position: absolute; |
||||
|
right: 20rpx; |
||||
|
top: 6rpx; |
||||
|
} |
||||
|
|
||||
|
.intro_box{ |
||||
|
width: 702rpx; |
||||
|
height: 200rpx; |
||||
|
position: relative; |
||||
|
border-radius: 20rpx; |
||||
|
left: 24rpx; |
||||
|
//background-color: #0081FF; |
||||
|
} |
||||
|
|
||||
|
.intro_area{ |
||||
|
width: 702rpx; |
||||
|
height: 166rpx; |
||||
|
background: #FFFFFF; |
||||
|
border: 1rpx solid #E2E2E2; |
||||
|
opacity: 1; |
||||
|
border-radius: 12rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.textarea{ |
||||
|
width: 662rpx; |
||||
|
height: 126rpx; |
||||
|
//background-color: #1CBBB4; |
||||
|
left: 20rpx; |
||||
|
top: 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.confirm_button{ |
||||
|
width: 702rpx; |
||||
|
height: 90rpx; |
||||
|
background: #D49B4B; |
||||
|
opacity: 1; |
||||
|
border-radius: 93rpx; |
||||
|
position: relative; |
||||
|
left: 24rpx; |
||||
|
top: 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.confirm_text{ |
||||
|
width: 72rpx; |
||||
|
height: 50rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,162 @@ |
|||||
|
<!--实名认证页面--> |
||||
|
<template> |
||||
|
<view class="back"> |
||||
|
<u-navbar |
||||
|
title="实名认证" |
||||
|
:safeAreaInsetTop="true" |
||||
|
:fixed="true" |
||||
|
bgColor="#FFFFFF00" |
||||
|
:placeholder="true" |
||||
|
:border="true" |
||||
|
/> |
||||
|
<u-line :dashed="false" color="#E2E2E2" customStyle="border: 1rpx solid #E2E2E2;"></u-line> |
||||
|
<text class="top_text">请完善您的个人信息</text> |
||||
|
<u-gap height="50rpx"/> |
||||
|
<view class="form_out_box_global"> |
||||
|
<u-form |
||||
|
labelPosition="left" |
||||
|
ref="form1" |
||||
|
:model="player" |
||||
|
:rules="rules" |
||||
|
> |
||||
|
<u-form-item v-for="(item,index) in rules" |
||||
|
:key="item.value" |
||||
|
:prop="index" |
||||
|
borderBottom |
||||
|
@click="onTouchOneItem" |
||||
|
> |
||||
|
<view class="form_item_global"> |
||||
|
<text class="form_title_global">{{item.title}}</text> |
||||
|
<input |
||||
|
:placeholder="item.message" |
||||
|
class="form_input_global" |
||||
|
:value="item.value" |
||||
|
placeholder-class="form_input_placeholder_global" |
||||
|
@blur="(obj)=>{ |
||||
|
onBlurCallback(index,obj); |
||||
|
}" |
||||
|
/> |
||||
|
</view> |
||||
|
</u-form-item> |
||||
|
</u-form> |
||||
|
<view class="attention_box"> |
||||
|
<text class="attention_title">注意事项</text> |
||||
|
<u-parse |
||||
|
:content="content" |
||||
|
class="attention_info" |
||||
|
></u-parse> |
||||
|
</view> |
||||
|
</view> |
||||
|
<button class="confirm_button_global">确定</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
onLoad() { |
||||
|
console.log(this.$refs.form1); |
||||
|
console.log(this.rules); |
||||
|
this.$refs.form1.setRules(this.rules); |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
content : '<p>实名认证所获取的信息均只会用于进行实名认证,不用作其他用途.</p><p> 您所输入的银行卡账号信息必须在实名认证的人名下.</p>', |
||||
|
player : this.$Define.Player, |
||||
|
rules : { |
||||
|
"realName" : { |
||||
|
type : 'string', |
||||
|
title : '姓名', |
||||
|
message : '请输入您的真实姓名', |
||||
|
value : this.$Define.Player.realName, |
||||
|
validator:(obj)=>{ |
||||
|
this.player.realName = obj.detail.value; |
||||
|
}, |
||||
|
}, |
||||
|
"idNumber" : { |
||||
|
type : 'string', |
||||
|
title : '身份证号', |
||||
|
message : '请输入您的身份证号', |
||||
|
value : this.$Define.Player.idNumber, |
||||
|
validator:(obj)=>{ |
||||
|
this.player.idNumber = obj.detail.value; |
||||
|
}, |
||||
|
}, |
||||
|
"bankId" : { |
||||
|
type : 'string', |
||||
|
title : '银行卡号', |
||||
|
message : '请输入您的银行卡号', |
||||
|
value : this.$Define.Player.bankId, |
||||
|
validator:(obj)=>{ |
||||
|
this.player.bankId = obj.detail.value; |
||||
|
}, |
||||
|
}, |
||||
|
"bankAddress" : { |
||||
|
type : 'string', |
||||
|
title : '开户行', |
||||
|
message : '请输入您的开户行', |
||||
|
value : this.$Define.Player.bankAddress, |
||||
|
validator:(obj)=>{ |
||||
|
this.player.bankAddress = obj.detail.value; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
methods:{ |
||||
|
///点击了某个item反馈 |
||||
|
onTouchOneItem(prop){ |
||||
|
|
||||
|
}, |
||||
|
///当前某个表单输入发生了改变的时候回调 |
||||
|
onBlurCallback(key,obj){ |
||||
|
var item = this.rules[key]; |
||||
|
if(item != null){ |
||||
|
item.validator(obj); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.top_text{ |
||||
|
width: 288rpx; |
||||
|
height: 45rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
opacity: 1; |
||||
|
position: relative; |
||||
|
left: 24rpx; |
||||
|
top: 38rpx; |
||||
|
} |
||||
|
|
||||
|
.attention_box{ |
||||
|
width: 702rpx; |
||||
|
height: 240rpx; |
||||
|
//background-color: #0081FF; |
||||
|
border-radius: 20rpx; |
||||
|
position: relative; |
||||
|
top: 30rpx; |
||||
|
} |
||||
|
///注意事项 |
||||
|
.attention_title{ |
||||
|
height: 37rpx; |
||||
|
font-size: 26rpx; |
||||
|
font-weight: 400; |
||||
|
line-height: 37rpx; |
||||
|
color: #666666; |
||||
|
opacity: 1; |
||||
|
position: absolute; |
||||
|
} |
||||
|
.attention_info{ |
||||
|
text-indent: 2em; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 400; |
||||
|
line-height: 40rpx; |
||||
|
position: absolute; |
||||
|
top: 50rpx; |
||||
|
color: #999999; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,141 @@ |
|||||
|
<!--微信授权登录界面--> |
||||
|
<template> |
||||
|
<view> |
||||
|
<!-- #ifdef MP-WEIXIN --> |
||||
|
<view v-if="isCanUse" class="back"> |
||||
|
<u-navbar |
||||
|
title="微信授权登录" |
||||
|
:safeAreaInsetTop="true" |
||||
|
:fixed="true" |
||||
|
bgColor="#FFFFFF00" |
||||
|
:placeholder="true" |
||||
|
/> |
||||
|
<view class="body"> |
||||
|
<view class='header'> |
||||
|
<image src='../../static/images/wx_icon.png'></image> |
||||
|
</view> |
||||
|
<u-gap height="50rpx" /> |
||||
|
<view class='content'> |
||||
|
<view>申请获取以下权限</view> |
||||
|
<text>获得你的公开信息(昵称，头像、地区等)</text> |
||||
|
</view> |
||||
|
|
||||
|
<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="login"> |
||||
|
授权登录 |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- #endif --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
SessionKey: '', |
||||
|
OpenId: '', |
||||
|
nickName: null, |
||||
|
avatarUrl: null, |
||||
|
isCanUse: uni.getStorageSync('isCanUse')||true//默认为true |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
//登录 |
||||
|
login() { |
||||
|
let _this = this; |
||||
|
uni.showLoading({ |
||||
|
title: '登录中...' |
||||
|
}); |
||||
|
|
||||
|
// 1.wx获取登录用户code |
||||
|
uni.login({ |
||||
|
provider: 'weixin', |
||||
|
success: function(loginRes) { |
||||
|
console.log(loginRes); |
||||
|
let code = loginRes.code; |
||||
|
/*if (!_this.isCanUse) { |
||||
|
//非第一次授权获取用户信息 |
||||
|
uni.getUserInfo({ |
||||
|
provider: 'weixin', |
||||
|
success: function(infoRes) { //获取用户信息后向调用信息更新方法 |
||||
|
let nickName = infoRes.userInfo.nickName; //昵称 |
||||
|
let avatarUrl = infoRes.userInfo.avatarUrl; //头像 |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
}*/ |
||||
|
|
||||
|
//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息 |
||||
|
uni.request({ |
||||
|
url: 'http://192.168.31.11:8888/app/v1/login/wechatlogin', |
||||
|
data: { |
||||
|
code: code, |
||||
|
}, |
||||
|
method: 'POST', |
||||
|
header: { |
||||
|
'content-type': 'application/json' |
||||
|
}, |
||||
|
success: (res) => { |
||||
|
//openId、或SessionKdy存储//隐藏loading |
||||
|
console.log("!!!!"); |
||||
|
console.log(res); |
||||
|
uni.hideLoading(); |
||||
|
}, |
||||
|
fail: (e) => { |
||||
|
console.log(e); |
||||
|
uni.hideLoading(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
onLoad() {//默认加载 |
||||
|
//this.login(); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
.body{ |
||||
|
width: 100%; |
||||
|
//background-color: #0081FF; |
||||
|
position: relative; |
||||
|
} |
||||
|
.header { |
||||
|
border-bottom: 1px solid #ccc; |
||||
|
text-align: center; |
||||
|
width: 750rpx; |
||||
|
height: 300rpx; |
||||
|
line-height: 450rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.header image { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
margin-left: 50rpx; |
||||
|
margin-bottom: 90rpx; |
||||
|
} |
||||
|
|
||||
|
.content text { |
||||
|
display: block; |
||||
|
color: #9d9d9d; |
||||
|
margin-top: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
border-radius: 80rpx; |
||||
|
margin: 70rpx 50rpx; |
||||
|
font-size: 35rpx; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 975 B |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 664 B |
|
After Width: | Height: | Size: 860 B |
|
After Width: | Height: | Size: 882 B |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 586 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||||
|
{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":";;;;wEAAA,qBACA,sBACA,0D,mDAFmBA,GAAGC,kCAAoCC,EAG1DC,EAAWC,a","file":"pages/UploadSuccess/UploadSuccess.js","sourcesContent":["import 'uni-pages';wx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages/UploadSuccess/UploadSuccess.vue'\ncreatePage(Page)"],"sourceRoot":""} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,8 +1,8 @@ |
|||||
{ |
{ |
||||
|
"component": true, |
||||
"usingComponents": { |
"usingComponents": { |
||||
"u-tabs": "/uni_modules/uview-ui/components/u-tabs/u-tabs", |
"u-tabs": "/uni_modules/uview-ui/components/u-tabs/u-tabs", |
||||
"u-text": "/uni_modules/uview-ui/components/u-text/u-text", |
"u-text": "/uni_modules/uview-ui/components/u-text/u-text", |
||||
"u-line": "/uni_modules/uview-ui/components/u-line/u-line" |
"u-line": "/uni_modules/uview-ui/components/u-line/u-line" |
||||
}, |
} |
||||
"component": true |
|
||||
} |
} |
||||
@ -1,8 +1,8 @@ |
|||||
{ |
{ |
||||
|
"component": true, |
||||
"usingComponents": { |
"usingComponents": { |
||||
"u-line": "/uni_modules/uview-ui/components/u-line/u-line", |
"u-line": "/uni_modules/uview-ui/components/u-line/u-line", |
||||
"u-cell-group": "/uni_modules/uview-ui/components/u-cell-group/u-cell-group", |
"u-cell-group": "/uni_modules/uview-ui/components/u-cell-group/u-cell-group", |
||||
"u-cell": "/uni_modules/uview-ui/components/u-cell/u-cell" |
"u-cell": "/uni_modules/uview-ui/components/u-cell/u-cell" |
||||
}, |
} |
||||
"component": true |
|
||||
} |
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue