recruit.vue
8.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<template>
<view class="container">
<!-- 申请分销员 -->
<view class="topBackImg flex-items flex-column">
<view class="content mar-top-36">
<view class="topColor"></view>
<view class="text-box mar-left-30">
<label class="fs-bold">分销员是什么？</label>
<view class="fs24 font-color-656 mar-top-20">分销员是我们为拥有推广能力的用户推出的运营计划。你只需将高品质商品分享推荐给他人，收获他人的感谢的同时，挣得属于自己的利润。</view>
</view>
<view class="text-box mar-top-20 mar-left-30">
<label class="fs-bold">我该怎么成为分销员？</label>
<view class="fs24 font-color-656 mar-top-20">
<view>
<label class="fs-bold"> · </label>
<label class="mar-left-20">点击本页面的【我要成为分销员】，即可完成申请。</label>
</view>
<view class="flex-row-plus mar-top-20">
<label class="fs-bold"> · </label>
<label class="mar-left-20 textDes">点击拥有分销员活动标识的分享按钮，将商品分享给好友或朋友圈。</label>
</view>
<view class="mar-top-20">
<label class="fs-bold"> · </label>
<label class="mar-left-20">朋友通过您的链接进入并购买一件商品。</label>
</view>
<view class="flex-row-plus textDes mar-top-20">
<label class="fs-bold"> · </label>
<label class="mar-left-20">我们收到已完成的订单时，会将本订单的佣金结算给您。</label>
</view>
<view class="mar-top-20">
<label class="fs-bold"> · </label>
<label class="mar-left-20">返回个人中心-分销中心，查看您的。</label>
</view>
</view>
</view>
<view class="text-box mar-top-20 mar-left-30">
<label class="fs-bold">其他说明</label>
<view class="fs24 font-color-656 mar-top-20">
<view>
<label class="fs-bold"> · </label>
<label class="mar-left-20">客户只有通过您的链接成交，才能返佣给您。</label>
</view>
<view class="flex-row-plus mar-top-20">
<label class="fs-bold"> · </label>
<label class="mar-left-20 textDes"> 若订单发生退款，我们将去除本订单的佣金。</label>
</view>
<view class="mar-top-20">
<label class="fs-bold"> · </label>
<label class="mar-left-20">商品的售后问题，由本商店处理。</label>
</view>
<view class="flex-row-plus textDes mar-top-20">
<label class="fs-bold"> · </label>
<label class="mar-left-20">不传播任何违法违规信息，一经发现，即被清退，本商城不负任何责任。</label>
</view>
<view class="mar-top-20">
<label class="fs-bold"> · </label>
<label class="mar-left-20">以上内容解释权归本商城所有。</label>
</view>
</view>
</view>
</view>
</view>
<view class="butBox flex-items-plus" :style="{'padding-bottom':(isIphone === true? 20:0)+'rpx'}" @click="informationShowClick">
<view class="submitbut">我要成为分销员</view>
</view>
<!-- 填写信息弹窗 -->
<u-popup v-model="informationShowFalg" mode="center" border-radius="14">
<view class="informationShow-box">
<view class="flex-items flex-column informationShow-centent">
<view class="mar-top-60">
<label class="fs-bold fs36">请填写相关信息</label>
</view>
<view class="flex-items flex-row mar-top-60">
<view class="fs26 font-color-656">真实姓名<label class="font-color-red">*</label></view>
<input class="recruitName mar-left-20 fs26" v-model="userName"/>
</view>
<view class="flex-items flex-row mar-top-30 phoneStyle">
<label class="fs26 font-color-656">联系电话<label class="font-color-red">*</label></label>
<input class="recruitIphone mar-left-20 fs26" disabled="disabled" type="number" v-model="mobile"/>
</view>
<view class="flex-items flex-row mar-top-30 mar-left-40">
<label class="fs26 font-color-656">邀请码</label>
<input class="recruitIphone mar-left-20 fs26" v-model="inviteId"/>
</view>
<view class="flex-row-plus massageDes-but fs28">
<view class="exitBut" @click="exitButClick">取消</view>
<view class="submitbut" @click="submitbut">提交</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
data() {
return {
informationShowFalg: false,
item: '',
userName:'',
mobile:'',
inviteId:'',
shopId:0,
isIphone:false
}
},
onLoad(options) {
this.isIphone = getApp().globalData.isIphone;
if (getApp().globalData.distributeRecruitItem) {
const item = getApp().globalData.distributeRecruitItem
this.shopId = parseInt(item.shopId)
getApp().globalData.distributeRecruitItem = undefined
} else {
this.shopId = parseInt(options.shopId)
}
this.isIphone = getApp().globalData.isIphone;
},
methods: {
informationShowClick() {
this.informationShowFalg = true
const res = uni.getStorageSync('storage_key');
this.mobile = res.phone
if (!this.mobile) {
uni.showToast({
title:'请先登录!',
icon:'none'
})
uni.navigateTo({
url: '../../../pages_category_page2/userModule/login'
})
}
},
exitButClick() {
this.informationShowFalg = false
},
submitbut() {
this.applyForRecruit()
},
//申请为分销员
applyForRecruit(){
var regphone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
if(this.userName == ''){
uni.showToast({
title:'真实姓名不能为空',
icon:'none'
})
}else if (this.mobile == '') {
uni.showToast({
title:'手机号不能为空',
icon:'none'
})
}else if (!regphone.test(this.mobile)) {
uni.showToast({
title:'手机格式不正确',
icon:'none'
})
}else{
NET.request(API.Apply,{
shopId:this.shopId,
distributorPhone: this.mobile,
distributorName: this.userName,
invitationCode:this.inviteId
},'POST').then(res => {
this.informationShowFalg = false
uni.showToast({
title:'请等候审核...',
})
setTimeout(() => {
uni.navigateBack({
delta: 1
});
}, 1500);
}).catch(res => {
uni.showToast({
title:'申请失败',
icon:'none'
})
})
}
}
}
}
</script>
<style lang="scss">
.container {
.topBackImg {
width: 100%;
height: 260upx;
background: url(https://jy.scjysm.asia:18086/cdwlMall/questionnaire/file/static/images/storeTop_Img.png) no-repeat;
background-size: 100% 260upx;
.content {
width: 690upx;
background-color: #FFFFFF;
.topColor {
height: 60upx;
}
.text-box {
width: 622upx;
.textDes {
width: 598upx;
line-height: 40upx;
}
}
}
}
.butBox {
height: 130upx;
width: 100%;
position: absolute;
bottom: 0upx;
left: 0upx;
background-color: #FFFFFF;
box-shadow: 0upx 3upx 12upx #999999;
.submitbut {
height: 80upx;
width: 690upx;
background: #333333;
font-size: 28upx;
text-align: center;
line-height: 80upx;
color: #FFEBC4;
}
}
.informationShow-box {
.flex-items {
input {
padding-left: 16upx;
}
}
.phoneStyle {
input {
background: #EEEEEE;
color: #999999;
}
}
.informationShow-centent {
width: 520upx;
height: 550upx;
.recruitName {
border: 2upx solid #DDDDDD;
width: 300upx;
height: 48upx;
}
.recruitIphone {
border: 2upx solid #DDDDDD;
width: 300upx;
height: 48upx;
}
.massageDes-but {
position: absolute;
bottom: 0;
}
.exitBut {
border: 1upx solid #E5E5E5;
width: 260upx;
height: 90upx;
text-align: center;
line-height: 90upx;
}
.submitbut {
background-color: #333333;
width: 260upx;
height: 90upx;
text-align: center;
line-height: 90upx;
color: #FFFFFF;
}
}
}
}
</style>