484 lines
13 KiB
Vue
484 lines
13 KiB
Vue
<template>
|
||
<!-- 店铺详情 -->
|
||
<u-popup :show="memberOpen" :round="20" overlayOpacity="0.8" mode="bottom" @close="showClose" height="500">
|
||
<view class="register-member-wrap">
|
||
<view class="register-title">欢迎加入{{shopUserInfo.shopName?shopUserInfo.shopName:'本店'}}</view>
|
||
<view class="register-tip">请完善个人信息完成会员注册</view>
|
||
<view class="register-content">
|
||
<view class="reg-head">
|
||
<view class="reg-head-img">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button class="reg-head-img" type="default" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||
<image class="reg-head-img" :src="userHeadImg || 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/head_default.png'" mode="aspectFill"></image>
|
||
</button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<button class="reg-head-img" @click="onChooseAvatar">
|
||
<image class="reg-head-img" :src="userHeadImg || 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/head_default.png'" mode="aspectFill"></image>
|
||
</button>
|
||
<!-- #endif -->
|
||
|
||
</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" @click="calendarShow = true">
|
||
<view class="lable">生日</view>
|
||
<view class="value" :style="{color: birthDay ? '#333' : '#999'}">{{ 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"
|
||
itemHeight="66"
|
||
visibleItemCount="5"
|
||
@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"/>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button class="getPhone" open-type="getPhoneNumber" @getphonenumber="getPhone">
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<button class="getPhone" open-type="getAuthorize" scope='phoneNumber' @getAuthorize="getPhone" @error="getPhoneError">
|
||
<!-- #endif -->
|
||
|
||
<view class="text">{{'获取手机号'}}</view>
|
||
</button>
|
||
</view>
|
||
<view class="agreement">
|
||
<view class="agreement_tip">我已阅读并同意以下内容</view>
|
||
<view class="agreement_item" @click="isProtocol = !isProtocol">
|
||
<u-checkbox-group >
|
||
<u-checkbox :checked="isProtocol" shape="circle" activeColor="#E3AD7F" @change="radioChange" size="35" iconSize="20"></u-checkbox>
|
||
</u-checkbox-group>
|
||
<text @click.stop="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: {
|
||
shopId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
show: {
|
||
type: Boolean,
|
||
default: false,
|
||
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
value1: Number(new Date()),
|
||
calendarShow: false,
|
||
userId: null,
|
||
userHeadImg: "",
|
||
nickName: "",
|
||
telephone: "",
|
||
birthDay: "",
|
||
isProtocol: false,
|
||
shopUserInfo: null,
|
||
memberOpen: false,
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.shopId = uni.cache.get('shopId')
|
||
console.log(this.memberOpen)
|
||
this.init()
|
||
// console.log(this.userInfo)
|
||
// this.userId = this.userInfo.id;
|
||
// console.log(this.userInfo, '调试1113');
|
||
},
|
||
|
||
methods: {
|
||
async init() {
|
||
if ( uni.cache.get('shopUserInfo') && this.shopId == uni.cache.get('shopUserInfo').id ) {
|
||
this.shopUserInfo = uni.cache.get('shopUserInfo');
|
||
} else {
|
||
let res = await this.api.shopUserInfo({
|
||
"shopId": this.shopId,
|
||
"userId": uni.cache.get('userInfo').id,
|
||
})
|
||
if (res.code == 0) {
|
||
this.shopUserInfo = res.data;
|
||
}
|
||
}
|
||
this.memberOpen = this.shopUserInfo.isVip == 0 ? true : false;
|
||
this.userHeadImg = this.shopUserInfo.headImg;
|
||
this.nickName = this.shopUserInfo.nickName && this.shopUserInfo.nickName != '微信用户' ? this.shopUserInfo.nickName : '';
|
||
this.telephone = this.shopUserInfo.telephone;
|
||
this.birthDay = this.shopUserInfo.birthDay
|
||
},
|
||
|
||
showClose (){
|
||
console.log(2)
|
||
uni.navigateBack()
|
||
},
|
||
radioChange(n) {
|
||
//是否同意
|
||
console.log(n);
|
||
this.isProtocol = n;
|
||
},
|
||
/**
|
||
* 查看协议
|
||
*/
|
||
viewProtocol (){
|
||
wx.openPrivacyContract({
|
||
success: () => {}, // 打开成功
|
||
fail: () => {}, // 打开失败
|
||
complete: () => {}
|
||
})
|
||
},
|
||
/**
|
||
* 上传头像
|
||
* @param {Object} e
|
||
*/
|
||
onChooseAvatar(e) {
|
||
let _this = this;
|
||
//#ifdef MP-WEIXIN
|
||
let avatarUrl = e.detail.avatarUrl
|
||
uni.uploadFile({
|
||
url: uni.conf.baseUrl + '/common/upload',
|
||
// url: uni.conf.baseUrl + '/common/upload',
|
||
filePath: avatarUrl,
|
||
header: {
|
||
environment: 'app',
|
||
type: 'android',
|
||
version: '1.7.3',
|
||
'content-type': 'multipart/form-data'
|
||
},
|
||
fileType:'image',
|
||
name: "file",
|
||
formData: {
|
||
file: avatarUrl,
|
||
},
|
||
success: (uploadFileRes) => {
|
||
let { data } = JSON.parse(uploadFileRes.data)
|
||
this.userHeadImg = data
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
});
|
||
// #endif
|
||
//#ifdef MP-ALIPAY
|
||
uni.chooseImage({
|
||
count: 1, // 默认9，设置图片的数量
|
||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
success: function (res) {
|
||
// 成功选择图片后
|
||
let avatarUrl = res.tempFilePaths[0]; // 获取文件路径
|
||
|
||
my.uploadFile({
|
||
url: uni.conf.baseUrl + '/common/upload',
|
||
// url: uni.conf.baseUrl + '/common/upload',
|
||
filePath: avatarUrl,
|
||
header: {
|
||
environment: 'app',
|
||
type: 'android',
|
||
version: '1.7.3',
|
||
'content-type': 'multipart/form-data'
|
||
},
|
||
fileType:'image',
|
||
name: "file",
|
||
formData: {
|
||
file: avatarUrl,
|
||
},
|
||
success: (uploadFileRes) => {
|
||
let { data } = JSON.parse(uploadFileRes.data)
|
||
_this.userHeadImg = data
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
});
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
});
|
||
|
||
// #endif
|
||
|
||
|
||
|
||
},
|
||
|
||
/**
|
||
* 确定生日
|
||
* @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) {
|
||
// #ifdef MP-WEIXIN
|
||
if (d.detail.iv) {
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: async (data) => {
|
||
let res = await this.api.userwxlogins({
|
||
code: data.code,
|
||
encryptedData: d.detail.encryptedData,
|
||
iv: d.detail.iv,
|
||
source: "wechar"
|
||
})
|
||
this.telephone = res.data
|
||
}
|
||
})
|
||
}
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
// 支付宝小程序环境
|
||
my.getAuthCode({
|
||
scopes: 'auth_user',
|
||
success: (res) => {
|
||
console.log(res)
|
||
my.getPhoneNumber({
|
||
success: async (data) => {
|
||
let res = await this.api.userwxlogins({
|
||
encryptedData: JSON.parse(data.response).response,
|
||
source: "alipay"
|
||
})
|
||
this.telephone = res.data
|
||
// console.log(this.phonetitle)
|
||
}
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
|
||
getPhoneError (e) {
|
||
console.log(e)
|
||
},
|
||
|
||
/**
|
||
* 格式化时间戳
|
||
* @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.birthDay)
|
||
// if ( this.userHeadImg == "" || this.userHeadImg == null ) {
|
||
// uni.showToast({
|
||
// title: '请选择会员头像',
|
||
// icon: 'none'
|
||
// });
|
||
// return;
|
||
// }
|
||
if ( this.nickName == "" || this.nickName == null ) {
|
||
uni.showToast({
|
||
title: '请输入会员昵称',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
// if ( this.birthDay == "" || this.birthDay == null ) {
|
||
// uni.showToast({
|
||
// title: '请选择日期',
|
||
// icon: 'none'
|
||
// });
|
||
// return;
|
||
// }
|
||
if ( this.telephone == "" || this.telephone == null ) {
|
||
uni.showToast({
|
||
title: '请获取手机号',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if ( !this.isProtocol ) {
|
||
uni.showToast({
|
||
title: '请勾选协议',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
let res = await this.api.openMember({
|
||
id: uni.cache.get('userInfo').id,
|
||
shopId: this.shopId,
|
||
nickName: this.nickName,
|
||
headImg: this.userHeadImg,
|
||
telephone: this.telephone,
|
||
birthDay: this.birthDay
|
||
})
|
||
if ( res.code == 0 ) {
|
||
|
||
this.$emit('getRegisterMember', false)
|
||
this.memberOpen = false;
|
||
let res = await this.api.loginwxuserInfo({
|
||
userId: uni.cache.get('userInfo').id
|
||
})
|
||
if (res.code == 0) {
|
||
uni.cache.set('userInfo', res.data);
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.u-datetime-picker {
|
||
height: 300px !important;
|
||
}
|
||
.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;
|
||
border-radius: 50%;
|
||
padding: 0;
|
||
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{
|
||
background-color: none;
|
||
border: 2rpx solid #E3AD7F;
|
||
color: #E3AD7F;
|
||
font-size: 28rpx;
|
||
padding: 5rpx 10rpx;
|
||
// #ifdef MP-ALIPAY
|
||
padding-top: 0;
|
||
display: initial;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 5rpx;
|
||
// #endif
|
||
}
|
||
}
|
||
.agreement{
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 48rpx;
|
||
.agreement_tip{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
.agreement_item{
|
||
display: flex;
|
||
padding-top: 32rpx;
|
||
padding-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> |