720 lines
18 KiB
Vue
720 lines
18 KiB
Vue
<template>
|
|
<view class="page11 content">
|
|
<view class="m-cells m-cells-form">
|
|
<view class="m-cell">
|
|
<view class="m-cell-hd"
|
|
><label class="u-label">{{ __("账号") }}</label></view
|
|
>
|
|
<view class="m-cell-bd">
|
|
<input
|
|
class="u-input"
|
|
type="number"
|
|
:placeholder="__('请输入手机号码')"
|
|
maxlength="11"
|
|
@input="inputphone"
|
|
:value="user_mobile"
|
|
/>
|
|
</view>
|
|
<view v-if="!isUserMobile" class="m-cell-ft">
|
|
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
|
</view>
|
|
</view>
|
|
<view class="m-cell m-cell-vcode">
|
|
<view class="m-cell-hd">
|
|
<label class="u-label">{{ __("图形码") }}</label>
|
|
</view>
|
|
<view class="m-cell-bd">
|
|
<input
|
|
class="u-input"
|
|
:placeholder="__('请输入验证码')"
|
|
maxlength="6"
|
|
@input="onInputImgCode"
|
|
/>
|
|
</view>
|
|
<view v-if="!isImgCode" class="m-cell-ft">
|
|
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
|
</view>
|
|
<view class="m-vcode-btn" @click="refresh">
|
|
<imgcode ref="imgcode"></imgcode>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="m-cell m-cell-vcode">
|
|
<view class="m-cell-hd">
|
|
<label class="u-label">{{ __("验证码") }}</label>
|
|
</view>
|
|
<view class="m-cell-bd">
|
|
<input
|
|
class="u-input"
|
|
type="number"
|
|
:placeholder="__('请输入手机验证码')"
|
|
maxlength="6"
|
|
@input="inputcode"
|
|
/>
|
|
</view>
|
|
<view v-if="!isCode" class="m-cell-ft">
|
|
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
|
</view>
|
|
<view v-if="isSend" @click="sendmessage" class="m-vcode-btn">{{
|
|
btntext
|
|
}}</view>
|
|
<view v-else class="m-vcode-btn">{{ btntext }}</view>
|
|
</view>
|
|
|
|
<view class="m-cell">
|
|
<view class="m-cell-hd"
|
|
><label class="u-label">{{ __("昵称") }}</label></view
|
|
>
|
|
<view class="m-cell-bd">
|
|
<input
|
|
class="u-input"
|
|
type="text"
|
|
:placeholder="__('请输入昵称')"
|
|
:value="user_nickname"
|
|
@input="onInputNickname"
|
|
/>
|
|
</view>
|
|
<view v-if="!isNickname" class="m-cell-ft">
|
|
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="m-cell" style="">
|
|
<view class="m-cell-hd"
|
|
><label class="u-label">{{ __("头像") }}</label></view
|
|
>
|
|
<view class="m-cell-bd">
|
|
<image
|
|
lazy-load
|
|
mode="aspectFit"
|
|
:src="user_avatar"
|
|
@click.stop="upImgs"
|
|
style="
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
margin-top: 20rpx;
|
|
"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="m-cell">
|
|
<view class="m-cell-hd"
|
|
><label class="u-label">{{ __("密码") }}</label></view
|
|
>
|
|
<view class="m-cell-bd">
|
|
<input
|
|
class="u-input"
|
|
type="text"
|
|
:placeholder="__('请输入登录密码')"
|
|
:value="user_password"
|
|
@input="onInputPassword"
|
|
/>
|
|
</view>
|
|
<view v-if="!isPassword" class="m-cell-ft">
|
|
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="m-cell"
|
|
@click="showbox"
|
|
v-if="Config.PLANTFORM_FX_AGENT_ENABLE"
|
|
>
|
|
<view class="m-cell-hd"
|
|
><label class="u-label">{{ __("地区") }}</label></view
|
|
>
|
|
<view class="m-cell-bd">
|
|
<label>{{ seladstr }}</label>
|
|
</view>
|
|
<view v-if="!isDistrict" class="m-cell-ft">
|
|
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="m-cell" v-if="Config.PLANTFORM_FX_ENABLE">
|
|
<view class="m-cell-hd"
|
|
><label class="u-label">{{ __("推荐人") }}</label></view
|
|
>
|
|
<view class="m-cell-bd">
|
|
<input
|
|
class="u-input"
|
|
type="text"
|
|
:placeholder="__('请输入推荐人编号')"
|
|
:value="source_user_id"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<mpvue-city-picker
|
|
:themeColor="themeColor"
|
|
ref="mpvueCityPicker"
|
|
:pickerValueDefault="cityPickerValueDefault"
|
|
@onCancel="onCancel"
|
|
@onConfirm="onConfirm"
|
|
></mpvue-city-picker>
|
|
|
|
<view class="btn-row" style="margin-top: 0">
|
|
<checkbox-group @change="onChangeProtocol">
|
|
<label>
|
|
<checkbox :checked="protocol_checked" value="1" />{{ __("同意") }}
|
|
</label>
|
|
<label @tap="showBanner">
|
|
{{ __("注册协议") }}
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
|
|
<view class="btn-row" style="margin-top: 0">
|
|
<button type="primary" class="primary" @click="submitInfo">
|
|
{{ __("注册") }}
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 弹出层 -->
|
|
<view class="uni-banner" style="background: #ffffff" v-if="bannerShow">
|
|
<view style="justify-content: flex-end" @tap="closeBanner">
|
|
<view
|
|
style="justify-content: flex-end; text-align: right; padding: 20rpx"
|
|
>
|
|
<text class="uni-icon uni-icon-close"></text>
|
|
</view>
|
|
</view>
|
|
<view style="padding: 20rpx">
|
|
<scroll-view scroll-y="true" style="height: 387px">
|
|
<p v-html="protocol_text"></p>
|
|
</scroll-view>
|
|
</view>
|
|
<view style="padding: 50rpx 0; padding-bottom: 68rpx">
|
|
<button
|
|
type="warn"
|
|
class="mini-btn"
|
|
v-if="countdown == 6"
|
|
@click="closeBanner"
|
|
style="background: #f6644d; margin: 0 80rpx"
|
|
>
|
|
{{ __("确认同意网站服务协议") }}
|
|
</button>
|
|
<button
|
|
type="warn"
|
|
class="mini-btn"
|
|
v-if="countdown < 6"
|
|
style="background: #f6644d; margin: 0 80rpx"
|
|
>
|
|
{{ countdown }}s
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view class="uni-mask" v-if="bannerShow"></view>
|
|
<!-- 弹出层 -->
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import "../../styles/_variables";
|
|
@import "../../styles/login.scss";
|
|
.m-cell,
|
|
m-cell-vcode {
|
|
height: 60rpx;
|
|
min-height: 60rpx;
|
|
padding: 20rpx 0;
|
|
padding-left: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.m-cell-bd {
|
|
width: 80%;
|
|
}
|
|
.m-cell-hd {
|
|
width: 20%;
|
|
}
|
|
|
|
.m-cell-bd label {
|
|
color: #888;
|
|
}
|
|
.m-cell-vcode {
|
|
/*padding-top: 0;padding-right: 0;padding-bottom: 0;*/
|
|
}
|
|
.m-vcode-img {
|
|
width: 216rpx;
|
|
height: 88rpx;
|
|
}
|
|
.btn_box {
|
|
padding: 20rpx;
|
|
}
|
|
.m-code {
|
|
right: 210rpx;
|
|
}
|
|
.m-vcode-btn {
|
|
width: 150rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.m-cell-vcode .m-icon-warn {
|
|
position: relative;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
/* 遮罩层 */
|
|
.uni-mask {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 弹出层形式的广告 */
|
|
.uni-banner {
|
|
width: 96%;
|
|
height: 80%;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
z-index: 99;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import imgcode from "@/components/verify-code/imgcode.vue";
|
|
import mpvueCityPicker from "../../components/mpvue-citypicker/mpvueCityPicker.vue";
|
|
|
|
import { mapState, mapMutations } from "vuex";
|
|
|
|
export default {
|
|
data: function () {
|
|
return {
|
|
user_account: "",
|
|
user_nickname: "",
|
|
user_mobile: "",
|
|
user_avatar:
|
|
"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/demodata/assets/data/avatar.png",
|
|
user_password: "",
|
|
mobile_code: "",
|
|
btntext: "发送",
|
|
isUserMobile: true,
|
|
isUserEmail: true,
|
|
isNickname: true,
|
|
isPassword: true,
|
|
isSend: true,
|
|
sendTime: 120,
|
|
isCode: true,
|
|
isImgCode: false,
|
|
source_user_id: "",
|
|
|
|
isDistrict: true,
|
|
|
|
Pindex: 0,
|
|
selectedProId: 0,
|
|
selectedCityId: 0,
|
|
selectedCountyId: 0,
|
|
selectedPro: "",
|
|
selectedCity: "",
|
|
selectedCounty: "",
|
|
seladstr: "请选择所属地区",
|
|
|
|
cityPickerValueDefault: [0, 0, 0],
|
|
themeColor: "#007AFF",
|
|
|
|
protocol_checked: true,
|
|
protocol_text: "",
|
|
bannerShow: false,
|
|
countdown: 6,
|
|
cTimer: null,
|
|
};
|
|
},
|
|
computed: mapState([
|
|
"Config",
|
|
"StateCode",
|
|
"notice",
|
|
"plantformInfo",
|
|
"shopInfo",
|
|
"userInfo",
|
|
"hasLogin",
|
|
]),
|
|
components: {
|
|
imgcode,
|
|
mpvueCityPicker,
|
|
},
|
|
onLoad: function (options) {
|
|
uni.setNavigationBarTitle({
|
|
title: this.__("注册"),
|
|
});
|
|
|
|
this.btntext = this.__("发送");
|
|
this.seladstr = this.__("请选择所属地区");
|
|
|
|
let source_user_id = this.$.getStorageSync("source_user_id");
|
|
this.setData({ source_user_id: source_user_id });
|
|
|
|
this.show();
|
|
},
|
|
methods: {
|
|
...mapMutations([
|
|
"login",
|
|
"logout",
|
|
"getPlantformInfo",
|
|
"forceUserInfo",
|
|
"getUserInfo",
|
|
]),
|
|
|
|
/* start 图形验证码 */
|
|
refresh: function () {
|
|
this.$refs.imgcode.refresh();
|
|
},
|
|
show: function () {
|
|
var _self = this;
|
|
setTimeout(function () {
|
|
_self.refresh();
|
|
}, 500);
|
|
},
|
|
onInputImgCode: function (e) {
|
|
if (
|
|
e.detail.value.toLocaleLowerCase() ==
|
|
uni.getStorageSync("imgcode").toLocaleLowerCase()
|
|
) {
|
|
this.setData({ isImgCode: true });
|
|
} else {
|
|
this.setData({ isImgCode: false });
|
|
}
|
|
},
|
|
/* end 图形验证码 */
|
|
|
|
inputuser_email: function (e) {
|
|
let that = this;
|
|
this.setData({ user_email: e.detail.value }),
|
|
that.$.isNull(e.detail.value)
|
|
? this.setData({ isUserEmail: false })
|
|
: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(
|
|
e.detail.value
|
|
)
|
|
? this.setData({ isUserEmail: true })
|
|
: this.setData({ isUserEmail: false });
|
|
},
|
|
submitInfo: function (e) {
|
|
let that = this;
|
|
/*
|
|
if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.user_email))
|
|
{
|
|
this.setData({isUserEmail: false});
|
|
return
|
|
}
|
|
*/
|
|
|
|
if (that.$.isNull(this.user_mobile)) {
|
|
this.setData({ isUserMobile: false });
|
|
}
|
|
|
|
if (!/^1[0123456789]\d{9}$/.test(this.user_mobile)) {
|
|
this.setData({ isUserMobile: false });
|
|
}
|
|
|
|
if (that.$.isNull(this.user_nickname)) {
|
|
this.setData({ isNickname: false });
|
|
}
|
|
|
|
if (that.$.isNull(this.mobile_code)) {
|
|
this.setData({ isCode: false });
|
|
}
|
|
|
|
if (that.$.isNull(this.user_password)) {
|
|
this.setData({ isPassword: false });
|
|
}
|
|
|
|
if (
|
|
that.$.isNull(this.selectedProId) ||
|
|
that.$.isNull(this.selectedCityId) ||
|
|
that.$.isNull(this.selectedCountyId)
|
|
) {
|
|
this.setData({ isDistrict: false });
|
|
}
|
|
|
|
if (
|
|
this.isUserMobile &&
|
|
this.isUserEmail &&
|
|
this.isNickname &&
|
|
this.isPassword &&
|
|
this.isCode
|
|
) {
|
|
if (that.cf.PLANTFORM_FX_AGENT_ENABLE) {
|
|
if (this.isDistrict) {
|
|
this.update();
|
|
}
|
|
} else {
|
|
this.update();
|
|
}
|
|
}
|
|
},
|
|
|
|
update: function () {
|
|
var that = this;
|
|
|
|
if (!this.protocol_checked) {
|
|
that.$.confirm("请先同意注册协议");
|
|
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: __("请先同意注册协议"),
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
var params = {
|
|
user_account: this.user_mobile,
|
|
user_nickname: this.user_nickname,
|
|
user_password: this.user_password,
|
|
user_avatar: this.user_avatar,
|
|
user_mobile: this.user_mobile,
|
|
rand_key: this.user_mobile,
|
|
verify_code: this.mobile_code,
|
|
source_user_id: this.source_user_id,
|
|
};
|
|
|
|
if (that.cf.PLANTFORM_FX_AGENT_ENABLE) {
|
|
params.user_province_id = that.selectedProId;
|
|
params.user_city_id = that.selectedCityId;
|
|
params.user_county_id = that.selectedCountyId;
|
|
}
|
|
|
|
that.$.request({
|
|
url: this.Config.URL.register,
|
|
data: params,
|
|
success: function (data, status, msg, code) {
|
|
if (status == 200) {
|
|
that.$.showToast({
|
|
title: "注册成功!",
|
|
success: function () {
|
|
that.login(data);
|
|
|
|
if (data.im && that.plantformInfo.config.chat_global) {
|
|
that.$Socket.connectserver(data.im);
|
|
}
|
|
|
|
setTimeout(() => {
|
|
var prePage = getCurrentPages()[getCurrentPages().length - 2];
|
|
|
|
try {
|
|
if (prePage.refreshData) {
|
|
prePage.refreshData(prePage.options);
|
|
} else if (prePage.onLoad) {
|
|
prePage.onLoad(prePage.options);
|
|
}
|
|
} catch (e) {}
|
|
|
|
that.$.navigateBack(2);
|
|
}, 200);
|
|
},
|
|
});
|
|
} else {
|
|
that.$.confirm(msg);
|
|
}
|
|
},
|
|
});
|
|
},
|
|
inputphone: function (e) {
|
|
let that = this;
|
|
this.setData({ user_mobile: e.detail.value });
|
|
that.$.isNull(e.detail.value)
|
|
? this.setData({ isUserMobile: false })
|
|
: /^1[0123456789]\d{9}$/.test(e.detail.value)
|
|
? this.setData({ isUserMobile: true })
|
|
: this.setData({ isUserMobile: false });
|
|
},
|
|
|
|
onInputNickname: function (e) {
|
|
let that = this;
|
|
this.setData({ user_nickname: e.detail.value });
|
|
that.$.isNull(e.detail.value)
|
|
? this.setData({ isNickname: false })
|
|
: this.setData({ isNickname: true });
|
|
},
|
|
|
|
onInputPassword: function (e) {
|
|
let that = this;
|
|
this.setData({ user_password: e.detail.value });
|
|
that.$.isNull(e.detail.value)
|
|
? this.setData({ isPassword: false })
|
|
: this.setData({ isPassword: true });
|
|
},
|
|
|
|
inputcode: function (e) {
|
|
let that = this;
|
|
this.setData({ mobile_code: e.detail.value }),
|
|
that.$.isNull(e.detail.value)
|
|
? this.setData({ isCode: false })
|
|
: this.setData({ isCode: true });
|
|
},
|
|
upImgs: function (e) {
|
|
var that = this;
|
|
|
|
that.$.chooseImage({
|
|
count: 1,
|
|
sizeType: ["compressed"],
|
|
success: function (n) {
|
|
that.$.showLoading();
|
|
var r = n.tempFilePaths;
|
|
that.$.uploadFile({
|
|
url: that.Config.URL.upload,
|
|
method: "POST",
|
|
filePath: r[0],
|
|
name: "upfile",
|
|
//header: {"content-type": "multipart/form-data"},
|
|
success: function (n) {
|
|
that.$.hideLoading();
|
|
|
|
var up_res = that.$.parseJSON(n.data);
|
|
var s = up_res.data.url;
|
|
that.setData({ user_avatar: s });
|
|
},
|
|
fail: function (e) {
|
|
that.$.hideLoading();
|
|
},
|
|
complete: function (e) {
|
|
that.$.hideLoading();
|
|
},
|
|
});
|
|
},
|
|
fail: function (e) {
|
|
that.$.hideLoading();
|
|
},
|
|
complete: function (e) {
|
|
that.$.hideLoading();
|
|
},
|
|
});
|
|
},
|
|
sendmessage: function () {
|
|
let that = this;
|
|
if (that.$.isNull(this.user_mobile)) {
|
|
this.setData({ isUserMobile: false });
|
|
} else if (!/^1[0123456789]\d{9}$/.test(this.user_mobile)) {
|
|
this.setData({ isUserMobile: false });
|
|
} else if (!this.isImgCode) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "请输入正确的图形验证码",
|
|
});
|
|
return;
|
|
} else if (this.isSend) {
|
|
this.setData({ isSend: false });
|
|
var t = this.sendTime;
|
|
var params = {
|
|
mobile: this.user_mobile,
|
|
};
|
|
|
|
that.$.request({
|
|
url: this.Config.URL.account.get_mobile_checkcode,
|
|
data: params,
|
|
success: function (data, status, msg, code) {
|
|
if (status == 200) {
|
|
var r = setInterval(function () {
|
|
t > 0
|
|
? that.setData({ btntext: t-- + "s" })
|
|
: (that.setData({
|
|
isSend: true,
|
|
sendTime: 120,
|
|
btntext: "重新发送",
|
|
}),
|
|
clearInterval(r));
|
|
}, 1e3);
|
|
} else {
|
|
that.setData({ isSend: true });
|
|
that.$.alert(msg);
|
|
}
|
|
},
|
|
});
|
|
}
|
|
},
|
|
|
|
// 三级联动选择
|
|
showbox() {
|
|
/*
|
|
this.setData({
|
|
isShow: true
|
|
})
|
|
*/
|
|
this.$refs.mpvueCityPicker.show();
|
|
},
|
|
|
|
onCancel(e) {
|
|
//console.log(e)
|
|
},
|
|
|
|
onConfirm(e) {
|
|
let that = this;
|
|
//console.info(e);
|
|
//console.info(JSON.stringify(e));
|
|
this.pickerText = JSON.stringify(e);
|
|
|
|
this.setData({
|
|
isDistrict: true,
|
|
Pindex: this.cityCode,
|
|
selectedProId: e.value[0],
|
|
selectedCityId: e.value[1],
|
|
selectedCountyId: e.value[2],
|
|
selectedPro: e.label[0],
|
|
selectedCity: e.label[1],
|
|
selectedCounty: e.label[2],
|
|
seladstr: that.$.isNull(e.label.toString())
|
|
? "请选择地址"
|
|
: e.label.toString(),
|
|
});
|
|
},
|
|
|
|
onChangeProtocol: function (e) {
|
|
var values = e.detail.value;
|
|
|
|
if (values.length > 0) {
|
|
this.protocol_checked = true;
|
|
} else {
|
|
this.protocol_checked = false;
|
|
}
|
|
},
|
|
closeBanner: function () {
|
|
this.bannerShow = false;
|
|
},
|
|
showBanner: function () {
|
|
let that = this;
|
|
|
|
that.$.request({
|
|
url: that.Config.URL.protocol,
|
|
data: {},
|
|
success: function (data, status, msg, code) {
|
|
if (status == 200) {
|
|
that.bannerShow = true;
|
|
that.protocol_text = data.document;
|
|
} else {
|
|
that.$.confirm(msg);
|
|
}
|
|
},
|
|
});
|
|
},
|
|
startTimer: function () {
|
|
var _this = this;
|
|
if (_this.cTimer == null) {
|
|
_this.countdown--;
|
|
_this.cTimer = setInterval(function () {
|
|
_this.countdown--;
|
|
if (_this.countdown == 0) {
|
|
_this.clearTimer();
|
|
}
|
|
}, 1000);
|
|
}
|
|
},
|
|
clearTimer: function () {
|
|
var _this = this;
|
|
clearInterval(_this.cTimer);
|
|
_this.cTimer = null;
|
|
_this.countdown = 6;
|
|
},
|
|
},
|
|
};
|
|
</script>
|