318 lines
8.3 KiB
Vue
318 lines
8.3 KiB
Vue
<template>
|
|
<!-- 店铺详情 -->
|
|
<u-popup :show="show" :round="20" overlayOpacity="0.8" mode="bottom" @close="showClose" height="500">
|
|
<view class="register-member-wrap">
|
|
<view class="register-title">欢迎加入双屿</view>
|
|
<view class="register-tip">请完善个人信息完成会员注册</view>
|
|
<view class="register-content">
|
|
<view class="reg-head">
|
|
<view class="reg-head-img">
|
|
<button class="reg-head-img" type="default" open-type="chooseAvatar" @chooseavatar="uploadImg">
|
|
<image class="reg-head-img" :src="userHeadImg || 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/head_default.png'" mode="aspectFill"></image>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view class="reg-cell">
|
|
<view class="lable">昵称<text style="color: #CD1A1A;">*</text></view>
|
|
<u-input class="value" v-model="nickName" fontSize="14px" type="text" input-align="left" placeholder="请输入昵称" :custom-style="{border:'none'}" placeholderStyle="color:#999;font-size: 28rpx"/>
|
|
</view>
|
|
<view class="reg-cell">
|
|
<view class="lable">生日</view>
|
|
<view class="value" :style="{color: birthDay ? '#333' : '#999'}" @click="calendarShow = true">{{ birthDay || '请选择日期'}}</view>
|
|
<!-- <u-calendar @close="calendarShow = false" monthNum="99" minDate="1945-01-01" maxDate="2055-12-12" :show="calendarShow" mode="single" @confirm="confirmCalendar"></u-calendar> -->
|
|
<!-- <u-picker :show="calendarShow" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
|
|
<!-- <picker :show="calendarShow" mode="date"></picker> -->
|
|
<u-datetime-picker
|
|
mode="date"
|
|
@cancel="calendarShow = false"
|
|
:show="calendarShow"
|
|
:minDate="-2208988800000"
|
|
v-model="value1"
|
|
@confirm="confirmTime"
|
|
></u-datetime-picker>
|
|
<u-icon name="arrow-down-fill" color="#000" size="23"></u-icon>
|
|
</view>
|
|
<view class="reg-cell">
|
|
<view class="lable">手机号</view>
|
|
<u-input class="value" v-model="telephone" fontSize="14px" type="text" input-align="left" readonly placeholder="获取微信手机号" :custom-style="{border:'none'}" placeholder-style="color:#999;font-size: 28rpx"/>
|
|
<button class="getPhone" open-type="getPhoneNumber" @getphonenumber="getPhone">
|
|
<view class="text">{{phonetitle || '获取微信手机号'}}</view>
|
|
</button>
|
|
</view>
|
|
<view class="agreement">
|
|
<view class="agreement_tip">我已阅读并同意以下内容</view>
|
|
<view class="agreement_item">
|
|
<u-checkbox-group>
|
|
<u-checkbox shape="circle" activeColor="#E3AD7F" @change="radioChange" size="30"></u-checkbox>
|
|
</u-checkbox-group>
|
|
<text @click="viewProtocol(1)" class="agreement_item_text">用户协议/隐私条款</text>
|
|
</view>
|
|
<!-- <view class="agreement_item">
|
|
<u-checkbox-group>
|
|
<u-checkbox shape="circle" activeColor="#E3AD7F" @change="radioChange" size="30"></u-checkbox>
|
|
</u-checkbox-group>
|
|
<text class="agreement_item_text">隐私条款</text>
|
|
</view> -->
|
|
</view>
|
|
<view class="register_btn" @tap="$u.debounce(registerMember, 500)" >快速注册</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['userInfo','show',"shopId"],
|
|
data() {
|
|
return {
|
|
value1: Number(new Date()),
|
|
calendarShow: false,
|
|
userId: null,
|
|
userHeadImg: "",
|
|
nickName: "",
|
|
telephone: "",
|
|
birthDay: "",
|
|
isProtocol: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.userInfo = uni.cache.get('userInfo')
|
|
this.userId = this.userInfo.id;
|
|
this.userHeadImg = this.userInfo.headImg;
|
|
this.nickName = this.userInfo.nickName && this.userInfo.nickName != '微信用户' ? this.userInfo.nickName : '';
|
|
this.telephone = this.userInfo.telephone;
|
|
this.birthDay = this.userInfo.birthDay
|
|
console.log(this.userInfo, '调试1113');
|
|
},
|
|
methods: {
|
|
showClose (){
|
|
console.log(2)
|
|
uni.navigateBack()
|
|
},
|
|
radioChange(n) {
|
|
//是否同意
|
|
console.log(n);
|
|
this.isProtocol = n;
|
|
},
|
|
/**
|
|
* 查看协议
|
|
*/
|
|
viewProtocol (){
|
|
wx.openPrivacyContract({
|
|
success: () => {}, // 打开成功
|
|
fail: () => {}, // 打开失败
|
|
complete: () => {}
|
|
})
|
|
},
|
|
/**
|
|
* 上传头像
|
|
* @param {Object} e
|
|
*/
|
|
uploadImg(e) {
|
|
console.log(e)
|
|
const {
|
|
avatarUrl
|
|
} = e.detail
|
|
console.log(e)
|
|
console.log(e.detail)
|
|
// this.userHeadImg = avatarUrl
|
|
uni.uploadFile({
|
|
url: 'https://wxcashiertest.sxczgkj.cn/cashierService/common/upload',
|
|
// url: uni.conf.baseUrl + '/common/upload',
|
|
filePath: avatarUrl,
|
|
header: {
|
|
environment: 'app',
|
|
type: 'android',
|
|
version: '1.7.3',
|
|
},
|
|
name: "file",
|
|
formData: {
|
|
file: avatarUrl,
|
|
},
|
|
success: (uploadFileRes) => {
|
|
let { data } = JSON.parse(uploadFileRes.data)
|
|
this.userHeadImg = data
|
|
},
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 确定生日
|
|
* @param {Object} e
|
|
*/
|
|
confirmTime(e) {
|
|
this.calendarShow = false;
|
|
this.birthDay = this.getDate(e.value);
|
|
// console.log(this.getDate(e.value))
|
|
},
|
|
|
|
/**
|
|
* 获取手机号
|
|
* @param {Object} d
|
|
*/
|
|
async getPhone(d) {
|
|
if (d.detail.iv) {
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: async (data) => {
|
|
console.log(data)
|
|
let res = await this.api.userwxlogins({
|
|
code: data.code,
|
|
encryptedData: d.detail.encryptedData,
|
|
iv: d.detail.iv,
|
|
})
|
|
this.phonetitle = res.data
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 格式化时间戳
|
|
* @param {Object} time
|
|
*/
|
|
getDate(time) {
|
|
const date = new Date(time);
|
|
// const date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
|
|
|
|
month = month > 9 ? month : '0' + month;
|
|
day = day > 9 ? day : '0' + day;
|
|
return `${year}-${month}-${day}`;
|
|
},
|
|
|
|
/**
|
|
* 注册会员
|
|
*/
|
|
async registerMember () {
|
|
console.log(this.userInfo)
|
|
if ( !this.isProtocol ) {
|
|
uni.showToast({
|
|
title: '请勾选协议',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
let res = await this.api.openMember({
|
|
id: this.userId,
|
|
shopId: this.shopId,
|
|
nickName: this.nickName,
|
|
headImg: this.userHeadImg,
|
|
telephone: this.telephone,
|
|
birthDay: this.birthDay
|
|
})
|
|
if ( res.code == 0 ) {
|
|
this.$emit('getRegisterMember', false)
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.register-member-wrap{
|
|
padding: 64rpx 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.register-title{
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #333333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.register-tip{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
.register-content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.reg-head{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 64rpx;
|
|
.reg-head-img{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
position: relative;
|
|
}
|
|
.reg-head-edit{
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 14rpx;
|
|
}
|
|
}
|
|
.reg-cell{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 2rpx solid #E5E5E5;
|
|
.lable{
|
|
width: 120rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.value{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
padding: 12rpx 0 12rpx 18rpx;
|
|
}
|
|
.u-input{
|
|
input{
|
|
font-size: 28rpx!important;
|
|
}
|
|
}
|
|
.getPhone{
|
|
line-height: initial;
|
|
background-color: none;
|
|
border: 2rpx solid #E3AD7F;
|
|
color: #E3AD7F;
|
|
font-size: 28rpx;
|
|
padding: 5rpx 10rpx;
|
|
}
|
|
}
|
|
.agreement{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 48rpx;
|
|
.agreement_tip{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
.agreement_item{
|
|
display: flex;
|
|
margin-bottom: 16rpx;
|
|
.agreement_item_text{
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #E3AD7F;
|
|
}
|
|
}
|
|
}
|
|
.register_btn{
|
|
width: 572rpx;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
background: #E3AD7F;
|
|
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
margin: 30rpx auto 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style> |