moliparty/moliparty-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

申请公会-增加手机区号及联系方式

Browse Source
This commit is contained in:
chenruiye
2025-06-03 14:38:27 +08:00
parent 08a1857c1a
commit ab0e2e74db
5 changed files with 269 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
view/molistar/activity/2025-celebrateEid/images/page1_giftBg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 10 KiB

20
view/molistar/modules/guild-ar/createGuild.html
View File

@@ -34,12 +34,30 @@
</div>
<div class="agentContactInfo">
<div class="left"><strong class="text4"></strong><b>*</b></div>
<input class="right placeholder" type="text" placeholder="">
<!-- <input class="right placeholder" type="text" placeholder=""> -->
<div class="input-container">
<select class="country-code">
<!-- <option value="+86">+86</option>
<option value="+87">+87</option> -->
<!-- 更多选项... -->
</select>
<div class="xian"></div>
<input type="text" placeholder="" class="right placeholder">
</div>
</div>
<div class="agentIDCard"><strong class="text5"></strong><b>*</b></div>
<input class="agentIDCardImgInput" type="file" id="backImageUpload2" accept="image/*"
onchange="fileChangeF2(event)" class="upload" style="opacity: 0;">
<img src="./images/createGuildNull.png" alt="" class="agentIDCardImg">
<div class="guildContactType">
<div class="left"><strong class="text4"></strong><b>*</b></div>
<div class="contactTypeOption">
<select class="contactType">
</select>
</div>
</div>
</div>
<!-- 邀请人信息 -->
<div class="inviterInfo">

233
view/molistar/modules/guild-ar/css/createGuild.css
View File

@@ -1,42 +1,41 @@
@charset "UTF-8";
html,
body {
width: 100%;
height: 17.78667rem;
height: 17.7866666667rem;
background: #FFFFFF;
}
.back {
width: 100%;
height: 2.38667rem;
height: 2.3866666667rem;
line-height: 3.2rem;
position: fixed;
left: 0;
top: 0rem;
text-align: center;
color: #333333;
font-size: 0.45333rem;
font-size: 0.4533333333rem;
font-weight: bold;
z-index: 10;
background: #fff;
}
.back img {
width: 0.58667rem;
height: 0.58667rem;
width: 0.5866666667rem;
height: 0.5866666667rem;
position: absolute;
left: 0.24rem;
top: 58%;
}
.myInfo {
width: 9.14667rem;
height: 2.13333rem;
width: 9.1466666667rem;
height: 2.1333333333rem;
background: #F7F7F7;
border-radius: 0.26667rem;
margin: 2.6rem auto 0.42667rem;
border-radius: 0.2666666667rem;
margin: 2.6rem auto 0.4266666667rem;
position: relative;
}
.myInfo .tx {
width: 1.6rem;
height: 1.6rem;
@@ -46,61 +45,55 @@ body {
transform: translateY(-50%);
border-radius: 50%;
}
.myInfo p {
width: 4.5rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #313131;
font-size: 0.42667rem;
font-size: 0.4266666667rem;
font-weight: 500;
position: absolute;
top: 0.50667rem;
left: 2.18667rem;
top: 0.5066666667rem;
left: 2.1866666667rem;
}
.myInfo b {
color: #7B7B7D;
font-weight: 400;
position: absolute;
left: 2.18667rem;
top: 1.17333rem;
font-size: 0.34667rem;
left: 2.1866666667rem;
top: 1.1733333333rem;
font-size: 0.3466666667rem;
}
.info {
width: 9.14667rem;
height: 11.6rem;
width: 9.1466666667rem;
background: #F7F7F7;
border-radius: 0.26667rem;
margin: 0 auto 0.42667rem;
border-radius: 0.2666666667rem;
margin: 0 auto 0.4266666667rem;
position: relative;
overflow: hidden;
}
.info .agencyAvatar {
width: 3.01333rem;
height: 3.01333rem;
width: 3.0133333333rem;
height: 3.0133333333rem;
position: absolute;
top: 0.4rem;
left: 50%;
transform: translateX(-50%);
}
.info .agencyAvatarInput {
width: 3.01333rem;
height: 3.01333rem;
width: 3.0133333333rem;
height: 3.0133333333rem;
position: absolute;
top: 0.4rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.info .p1 {
width: 100%;
top: 3.62667rem;
top: 3.6266666667rem;
left: 50%;
transform: translateX(-50%);
color: #313131;
@@ -109,34 +102,29 @@ body {
position: absolute;
text-align: center;
}
.info .p1 b {
color: #FF2C2C;
}
.info .agencyName {
width: 100%;
height: 1.33333rem;
line-height: 1.33333rem;
border-bottom: 0.01333rem solid #D6D6D6;
margin-top: 4.34667rem;
height: 1.3333333333rem;
line-height: 1.3333333333rem;
border-bottom: 0.0133333333rem solid #D6D6D6;
margin-top: 4.3466666667rem;
box-sizing: border-box;
padding: 0 0.32rem;
display: flex;
justify-content: space-between;
}
.info .agencyName .left {
color: #313131;
font-size: 0.37333rem;
font-size: 0.3733333333rem;
font-weight: 500;
white-space: nowrap;
}
.info .agencyName .left b {
color: #FF2C2C;
}
.info .agencyName input {
background: none;
outline: none;
@@ -144,83 +132,136 @@ body {
text-align: right;
width: 5rem;
}
.info .agentContactInfo {
width: 100%;
height: 1.33333rem;
line-height: 1.33333rem;
border-bottom: 0.01333rem solid #D6D6D6;
border-bottom: 0.0133333333rem solid #D6D6D6;
margin-top: 0rem;
margin: 0 auto 0.4rem;
box-sizing: border-box;
padding: 0 0.32rem;
display: flex;
justify-content: space-between;
padding: 0.4rem 0.32rem;
}
.info .agentContactInfo .left {
color: #313131;
font-size: 0.37333rem;
font-size: 0.3733333333rem;
font-weight: 500;
white-space: nowrap;
}
.info .agentContactInfo .left b {
color: #FF2C2C;
}
.info .agentContactInfo input {
background: none;
outline: none;
border: none;
text-align: right;
width: 5rem;
margin-left: 0.5333333333rem;
}
.info .agentContactInfo .input-container {
display: flex;
align-items: center;
border: 0.0133333333rem solid #ccc;
border-radius: 0.1066666667rem;
padding: 0.1333333333rem 0.2666666667rem;
background-color: #fff;
margin-top: 0.2666666667rem;
}
.info .agentContactInfo .country-code {
background-color: #fff;
padding-right: 0.8rem; /* 为箭头留出空间 */
border: none;
outline: none;
font-size: 0.3733333333rem;
color: #333;
margin-right: 0.2666666667rem;
display: flex;
align-items: center;
cursor: pointer;
}
.info .agentContactInfo .xian {
width: 0.0266666667rem;
height: 0.8rem;
background-color: #ccc;
}
.info .agentContactInfo .phone_input {
flex: 1;
border: none;
outline: none;
font-size: 0.3733333333rem;
padding: 0.2133333333rem 0;
}
.info .agentIDCard {
width: 100%;
box-sizing: border-box;
padding: 0 0.32rem;
color: #313131;
font-size: 0.37333rem;
font-size: 0.3733333333rem;
font-weight: 500;
margin-bottom: 0.32rem;
white-space: nowrap;
}
.info .agentIDCard b {
color: #FF2C2C;
}
.info .agentIDCardImg {
width: 2.93333rem;
height: 2.93333rem;
width: 2.9333333333rem;
height: 2.9333333333rem;
display: inline-block;
margin: 0 0.32rem;
}
.info .agentIDCardImgInput {
width: 2.93333rem;
height: 2.93333rem;
width: 2.9333333333rem;
height: 2.9333333333rem;
display: inline-block;
left: 0.3rem;
z-index: 2;
position: absolute;
}
.inviterInfo {
width: 9.14667rem;
height: 5.92rem;
border-radius: 0.26667rem;
background: #F7F7F7;
margin: 0 auto 0.21333rem;
.info .guildContactType {
width: 100%;
margin-top: 0rem;
margin: 0 auto 0.4rem;
box-sizing: border-box;
padding: 0 0.32rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.4rem 0.32rem;
}
.info .guildContactType .left {
color: #313131;
font-size: 0.3733333333rem;
font-weight: 500;
white-space: nowrap;
}
.info .guildContactType .left b {
color: #FF2C2C;
}
.info .guildContactType .contactType {
background-color: #fff;
border: none;
outline: none;
font-size: 0.3733333333rem;
color: #333;
display: flex;
align-items: center;
cursor: pointer;
padding: 0.0533333333rem 0.5333333333rem;
border-radius: 0.1066666667rem;
}
.inviterInfo {
width: 9.1466666667rem;
height: 5.92rem;
border-radius: 0.2666666667rem;
background: #F7F7F7;
margin: 0 auto 0.2133333333rem;
}
.inviterInfo .InviterId {
width: 100%;
height: 1.33333rem;
line-height: 1.33333rem;
border-bottom: 0.01333rem solid #D6D6D6;
height: 1.3333333333rem;
line-height: 1.3333333333rem;
border-bottom: 0.0133333333rem solid #D6D6D6;
margin-top: 0rem;
margin: 0 auto 0.4rem;
box-sizing: border-box;
@@ -228,18 +269,15 @@ body {
display: flex;
justify-content: space-between;
}
.inviterInfo .InviterId .left {
color: #313131;
font-size: 0.37333rem;
font-size: 0.3733333333rem;
font-weight: 500;
white-space: nowrap;
}
.inviterInfo .InviterId .left b {
color: #FF2C2C;
}
.inviterInfo .InviterId input {
background: none;
outline: none;
@@ -247,27 +285,24 @@ body {
text-align: right;
width: 5rem;
}
.inviterInfo .inviterPic {
width: 100%;
box-sizing: border-box;
padding: 0 0.32rem;
color: #313131;
font-size: 0.37333rem;
font-size: 0.3733333333rem;
font-weight: 500;
margin-bottom: 0.32rem;
}
.inviterInfo .inviterPicImg {
width: 2.93333rem;
height: 2.93333rem;
width: 2.9333333333rem;
height: 2.9333333333rem;
display: inline-block;
margin: 0 0.32rem;
}
.inviterInfo .inviterPicImgInput {
width: 2.93333rem;
height: 2.93333rem;
width: 2.9333333333rem;
height: 2.9333333333rem;
display: inline-block;
left: 0.8rem;
z-index: 2;
@@ -275,18 +310,18 @@ body {
}
.butBox {
width: 8.85333rem;
height: 1.22667rem;
line-height: 1.22667rem;
width: 8.8533333333rem;
height: 1.2266666667rem;
line-height: 1.2266666667rem;
text-align: center;
color: #fff;
background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
margin: 0 auto 0;
border-radius: 1.22667rem;
border-radius: 1.2266666667rem;
}
.null {
height: 0.26667rem;
height: 0.2666666667rem;
}
.submitSuccessfully {
@@ -299,18 +334,16 @@ body {
background: rgba(0, 0, 0, 0.5);
display: none;
}
.submitSuccessfully .submitSuccessfully_in {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 7.73333rem;
width: 7.7333333333rem;
background: #fff;
border-radius: 0.42667rem;
padding: 0.37333rem 0.61333rem 0.48rem;
border-radius: 0.4266666667rem;
padding: 0.3733333333rem 0.6133333333rem 0.48rem;
}
.submitSuccessfully .submitSuccessfully_in .title {
color: #313131;
font-size: 0.4rem;
@@ -320,24 +353,22 @@ body {
margin: 0rem auto 0.32rem;
text-align: center;
}
.submitSuccessfully .submitSuccessfully_in p {
width: 100%;
color: #313131;
font-size: 0.34667rem;
font-size: 0.3466666667rem;
font-weight: 400;
line-height: 0.48rem;
}
.submitSuccessfully .submitSuccessfully_in .but {
width: 6.50667rem;
width: 6.5066666667rem;
height: 0.96rem;
line-height: 0.96rem;
text-align: center;
border-radius: 0.96rem;
margin: 0.32rem auto 0;
color: #fff;
font-size: 0.37333rem;
font-size: 0.3733333333rem;
font-weight: 500;
background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
}
@@ -346,24 +377,20 @@ body {
left: auto;
right: 0.3rem;
}
.arabic .inviterInfo .inviterPicImgInput {
left: auto;
right: 0.8rem;
}
.arabic .myInfo .tx {
left: auto;
right: 0.32rem;
}
.arabic .myInfo b {
left: auto;
right: 2.18667rem;
}
.arabic .info .agencyName input,
.arabic .info .agentContactInfo input,
.arabic .inviterInfo .InviterId input {
text-align: left;
}
}

86
view/molistar/modules/guild-ar/css/createGuild.scss
View File

@@ -78,7 +78,7 @@ body {
.info {
width: px2rem(686);
height: px2rem(870);
// height: px2rem(870);
background: #F7F7F7;
border-radius: px2rem(20);
margin: 0 auto px2rem(32);
@@ -152,15 +152,16 @@ body {
.agentContactInfo {
width: 100%;
height: px2rem(100);
line-height: px2rem(100);
// height: px2rem(100);
// line-height: px2rem(100);
border-bottom: px2rem(1) solid #D6D6D6;
margin-top: px2rem(0);
margin: 0 auto px2rem(30);
box-sizing: border-box;
padding: 0 px2rem(24);
display: flex;
justify-content: space-between;
// display: flex;
// justify-content: space-between;
padding: px2rem(30) px2rem(24);
.left {
color: #313131;
@@ -176,8 +177,46 @@ body {
background: none;
outline: none;
border: none;
text-align: right;
width: 5rem;
margin-left: px2rem(40);
}
.input-container {
display: flex;
align-items: center;
border: px2rem(1) solid #ccc;
border-radius: px2rem(8);
padding: px2rem(10) px2rem(20);
background-color: #fff;
margin-top: px2rem(20);
}
.country-code {
background-color: #fff;
padding-right: px2rem(60); /* 为箭头留出空间 */
border: none;
outline: none;
font-size: px2rem(28);
color: #333;
margin-right: px2rem(20);
display: flex;
align-items: center;
cursor: pointer;
}
.xian{
width: px2rem(2);
height: px2rem(60);
background-color: #ccc;
}
.phone_input {
flex: 1;
border: none;
outline: none;
font-size: px2rem(28);
padding: px2rem(16) 0;
}
}
@@ -210,6 +249,41 @@ body {
z-index: 2;
position: absolute;
}
.guildContactType{
width: 100%;
margin-top: px2rem(0);
margin: 0 auto px2rem(30);
box-sizing: border-box;
padding: 0 px2rem(24);
display: flex;
align-items: center;
justify-content: space-between;
padding: px2rem(30) px2rem(24);
.left {
color: #313131;
font-size: px2rem(28);
font-weight: 500;
white-space: nowrap;
b {
color: #FF2C2C;
}
}
.contactType{
background-color: #fff;
// padding-right: px2rem(60); /* 为箭头留出空间 */
border: none;
outline: none;
font-size: px2rem(28);
color: #333;
display: flex;
align-items: center;
cursor: pointer;
padding:px2rem(4) px2rem(40);
border-radius: px2rem(8);
}
}
}
.inviterInfo {

41
view/molistar/modules/guild-ar/js/createGuild.js
View File

@@ -50,6 +50,7 @@ $(function () {
localLang = window.lang;
translateFun();
h5User();
getParamOptions();
}, 100)
})
var agencySubmit = false;
@@ -219,6 +220,39 @@ function h5User() {
}
})
}
// 区号接口
function getParamOptions(){
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/guild/apply/paramOptions',
success(res) {
if (res.code == 200) {
let str = '';
res.data.areaCodeOption.forEach((item,index) => {
str += `
<option value="${item}">+${item}</option>
`
});
$('.country-code').append(str);
let contactTypeStr = '';
res.data.contactTypeOption.forEach((item,index) => {
contactTypeStr += `
<option value="${item}">${item}</option>
`
});
$('.contactType').append(contactTypeStr);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error(err) {
hideLoading(layerIndex)
toastMsg(langReplace(localLang.demoModule.layerIndex3))
}
})
}
// 创建接口
function apply(obj) {
showLoading()
@@ -245,18 +279,23 @@ $('.butBox').click(function () {
var guildAvatar = $('.info .agencyAvatar').attr('src');
var guildName = $('.info .agencyName input').val();
var guildContact = $('.info .agentContactInfo input').val();
var countryCode = $('.country-code').val().replace('+', '');
;
var idCard = $('.info .agentIDCardImg').attr('src');
var inviteErbanNo = $('.inviterInfo .InviterId input').val();
var inviteCheck = $('.inviterInfo .inviterPicImg').attr('src');
var guildContactType = $('.info .contactType').val();
var obj = {};
obj.guildAvatar = guildAvatar;
obj.guildName = guildName;
obj.guildContact = guildContact;
obj.guildContact = countryCode+guildContact;
obj.idCard = idCard;
obj.inviteErbanNo = inviteErbanNo;
obj.inviteCheck = inviteCheck;
obj.erbanNo = erbanNo;
obj.applyUid = pubInfo.uid;
obj.guildContactType = guildContactType;
// console.log(obj);
if (guildName != '' && guildContact != '' && guildAvatar != './images/createGuildNull.png' && idCard != './images/createGuildNull.png') {
apply(JSON.stringify(obj))
} else {