470 lines
12 KiB
Vue
470 lines
12 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 || H5 -->
|
||
<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="formInfo.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: formInfo.birthDay ? '#333' : '#999'}">
|
||
{{ formInfo.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> -->
|
||
<up-datetime-picker mode="date" @cancel="calendarShow = false" :show="calendarShow"
|
||
minDate="-2208988800000" v-model="value1" itemHeight="66" visibleItemCount="5"
|
||
@confirm="confirmTime"></up-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="formInfo.telephone" fontSize="14px" type="text" input-align="left"
|
||
readonly placeholder="获取手机号" :custom-style="{border:'none'}"
|
||
placeholder-style="color:#999;font-size: 28rpx" />
|
||
<!-- #ifdef MP-WEIXIN || H5 -->
|
||
<button class="getPhone" open-type="getPhoneNumber" @getphonenumber="getPhone">
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<button class="getPhone" open-type="getAuthorize" scope='phoneNumber' @getAuthorize="getPhone">
|
||
<!-- #endif -->
|
||
<view class="text">{{'获取手机号'}}</view>
|
||
</button>
|
||
</view>
|
||
<view class="agreement">
|
||
<view class="agreement_tip">我已阅读并同意以下内容</view>
|
||
<view class="agreement_item" @click="isProtocol = !isProtocol">
|
||
<up-checkbox-group>
|
||
<up-checkbox :checked="isProtocol" shape="circle" activeColor="#E3AD7F"
|
||
@change="radioChange" size="35" iconSize="20"></up-checkbox>
|
||
</up-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 setup>
|
||
import {
|
||
defineProps,
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
|
||
const props = defineProps({
|
||
shopUserInfo: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
});
|
||
|
||
const formInfo = reactive({
|
||
nickName: "",
|
||
telephone: "",
|
||
birthDay: "",
|
||
})
|
||
|
||
const value1 = Number(new Date())
|
||
|
||
const calendarShow = ref(false)
|
||
|
||
// 用户图片
|
||
const userHeadImg = ref('')
|
||
|
||
//显示隐藏
|
||
const memberOpen = ref(false)
|
||
|
||
//显示隐藏
|
||
const isProtocol = ref(false)
|
||
|
||
const init = async () => {
|
||
|
||
// if (uni.cache.get('shopUserInfo') && uni.cache.get('shopId') == uni.cache.get('shopUserInfo').id) {
|
||
// shopUserInfo = uni.cache.get('shopUserInfo');
|
||
// } else {
|
||
// let res = await this.api.shopUserInfo({
|
||
// "shopId": uni.cache.get('shopId'),
|
||
// "userId": uni.cache.get('userInfo').id,
|
||
// })
|
||
// if (res.code == 0) {
|
||
// shopUserInfo = res.data;
|
||
// }
|
||
// }
|
||
// memberOpen.value = shopUserInfo.isVip == 0 ? true : false;
|
||
// userHeadImg.value = shopUserInfo.headImg;
|
||
// formInfo.nickName = shopUserInfo.nickName && shopUserInfo.nickName != '微信用户' ? shopUserInfo
|
||
// .nickName : '';
|
||
// formInfo.telephone = shopUserInfo.telephone;
|
||
// formInfo.birthDay = shopUserInfo.birthDay
|
||
|
||
}
|
||
|
||
// 返回
|
||
const showClose = () => {
|
||
uni.navigateBack()
|
||
}
|
||
|
||
//
|
||
const radioChange = (n) => {
|
||
isProtocol.value = n;
|
||
}
|
||
|
||
// 查看协议
|
||
const viewProtocol = () => {
|
||
wx.openPrivacyContract({
|
||
success: () => {}, // 打开成功
|
||
fail: () => {}, // 打开失败
|
||
complete: () => {}
|
||
})
|
||
}
|
||
|
||
//上传头像
|
||
const onChooseAvatar = (e) => {
|
||
//#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)
|
||
userHeadImg.value = 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',
|
||
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)
|
||
userHeadImg.value = data
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
});
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
});
|
||
// #endif
|
||
}
|
||
|
||
|
||
// 确定生日
|
||
const confirmTime = (e) => {
|
||
this.calendarShow = false;
|
||
this.birthDay = this.getDate(e.value);
|
||
}
|
||
|
||
// 获取手机号
|
||
const 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
|
||
}
|
||
|
||
// 格式化时间戳
|
||
const 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}`;
|
||
}
|
||
|
||
|
||
const registerMember = async() => {
|
||
// if ( userHeadImg.value == "" || userHeadImg.value == null ) {
|
||
// uni.showToast({
|
||
// title: '请选择会员头像',
|
||
// icon: 'none'
|
||
// });
|
||
// return;
|
||
// }
|
||
if (formInfo.nickName == "" || formInfo.nickName == null) {
|
||
uni.showToast({
|
||
title: '请输入会员昵称',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
// if ( this.birthDay == "" || this.birthDay == null ) {
|
||
// uni.showToast({
|
||
// title: '请选择日期',
|
||
// icon: 'none'
|
||
// });
|
||
// return;
|
||
// }
|
||
if (formInfo.telephone == "" || formInfo.telephone == null) {
|
||
uni.showToast({
|
||
title: '请获取手机号',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!isProtocol.value) {
|
||
uni.showToast({
|
||
title: '请勾选协议',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
let res = await this.api.openMember({
|
||
id: uni.cache.get('userInfo').id,
|
||
shopId: uni.cache.get('shopId'),
|
||
nickName: formInfo.nickName,
|
||
headImg: userHeadImg.value,
|
||
telephone: formInfo.telephone,
|
||
birthDay: formInfo.birthDay
|
||
})
|
||
if (res.code == 0) {
|
||
|
||
}
|
||
}
|
||
</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> |