22b9726de6
2、首页/商品列表增加了广告弹窗 3、会员充值新增赠送菜品， 4、会员菜品增加最大添加数量限制 5、首页/我的/会员卡/菜品页面的图片设置 6、小程序余额支付，会员卡充值成功后增加 会员余额变动订阅（后端还未做处理，目前可以订阅不会推送） 7、多规格商品部分规格售罄/下架增加角标提示
375 lines
9.8 KiB
Vue
375 lines
9.8 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">欢迎加入{{shopUserInfo.shopName?shopUserInfo.shopName:'本店'}}</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" @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"/>
|
|
<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" @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: ['show',"shopId"],
|
|
data() {
|
|
return {
|
|
value1: Number(new Date()),
|
|
calendarShow: false,
|
|
userId: null,
|
|
userHeadImg: "",
|
|
nickName: "",
|
|
telephone: "",
|
|
birthDay: "",
|
|
isProtocol: false,
|
|
shopUserInfo: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log(13)
|
|
this.init()
|
|
// console.log(this.userInfo)
|
|
// this.userId = this.userInfo.id;
|
|
// console.log(this.userInfo, '调试1113');
|
|
},
|
|
|
|
methods: {
|
|
async init() {
|
|
let res = await this.api.shopUserInfo({
|
|
"shopId": this.shopId,
|
|
"userId": uni.cache.get('userInfo').id,
|
|
})
|
|
console.log(res)
|
|
if (res.code == 0) {
|
|
this.shopUserInfo = res.data;
|
|
}
|
|
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
|
|
*/
|
|
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.telephone = 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.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)
|
|
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{
|
|
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;
|
|
}
|
|
.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> |