zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
@fawn-nine
2023-03-03 12:11:23 +08:00
commit f8e1a3015b
502 changed files with 57308 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

421
pages/user/addAddress - 副本.vue Normal file
View File

@@ -0,0 +1,421 @@
<template>
<view>
<view class="addressHeader">
<!-- 顶部导航栏 -->
<z-nav-bar :title="navName"></z-nav-bar>
</view>
<view class="addContent">
<u-form :model="addressForm" ref='addForm' :rules="rules" label-width="150rpx">
<u-form-item label="收件人" prop="userName">
<u-input type="string" v-model="addressForm.userName" placeholder="名字" clearable
border="surround" />
</u-form-item>
<u-form-item label="手机号码" prop="userTel">
<u-input type="number" v-model="addressForm.userTel" placeholder="手机号" clearable
border="surround" />
</u-form-item>
<u-form-item label="地区" prop="">
<u-picker @cancel="cancel" :show="show" ref="uPicker" :columns="columns" keyName="name"
@confirm="confirm" @change="changeHandler"></u-picker>
<!-- <u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select> -->
</u-form-item>
<u-form-item label="所在省" prop="">
<picker mode="selector" @change="selectProvince" :range="provinceList" range-key="provName">
<view class="pickerItem">
{{province}}
</view>
</picker>
</u-form-item>
<u-form-item label="所在市" prop="" v-if="this.provId!=''">
<picker mode="selector" @change="selectCity" :range="cityList" range-key="cityName"
:disabled='isShowCity'>
<view class="pickerItem">
{{city}}
</view>
</picker>
</u-form-item>
<u-form-item label="所在区" prop="" v-if="this.cityId!=''">
<picker mode="selector" @change="selectCount" :range="countList" range-key="countyName"
:disabled='isShowCount'>
<view class="pickerItem">
{{count}}
</view>
</picker>
</u-form-item>
<u-form-item label="详细地址" prop="addrDetail">
<u-input type="string" v-model="addressForm.addrDetail" placeholder="小区楼栋/乡村名称" clearable
border="surround" />
</u-form-item>
<u-form-item label="默认地址" prop="isDefault">
<u-switch v-model="addressForm.isDefault" active-color="#ff9e02"></u-switch>
</u-form-item>
</u-form>
</view>
<view class="addFooter">
<view class="del" v-if="isShowDel" @click="deleteShow=true">
删除
</view>
<view class="submit" @click="uploadSub">
保存
</view>
</view>
<u-modal :show="deleteShow" content="你确定要删除地址吗？" :showCancelButton="true" @cancel="deleteShow=false"
@confirm="deleteSub">
</u-modal>
</view>
</template>
<script>
import address from '@/components/address.json';
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
data() {
return {
show: false, //是否显示
columns: [], //省份数据显示，三级联动需要三维数组，展示初始数据
columnData: [], //市数据
columnDatas: [], //区地址
navName: '', // 顶部导航栏标题
province: '请选择省', //用于显示
city: '请选择市', //用于显示
count: '请选择区', //用于显示
provId: '', // 存储省id
cityId: '', // 存储市id
countyId: '', // 存储区id
isShowDel: false, // 是否显示删除按钮
isShowCity: true, // 是否可以选择城市
isShowCount: true, // 是否可以选择地区
addressList:[],
// 地址
addressForm: {
addrId: '',
userName: '',
userTel: '',
area: '',
addrDetail: '',
isDefault: false,
},
provinceList: [],
cityList: [],
countList: [],
show: true,
deleteShow: false,
rules: {
userName: [{
required: true,
message: "请输入收件人姓名",
trigger: "blur"
}],
userTel: [{
required: true,
message: "请输入手机号码",
trigger: 'blur'
}],
addrDetail: [{
required: true,
message: "请输入所在地区",
trigger: "blur"
}]
}
}
},
onLoad(e) {
if (e.type == 0) {
this.navName = '添加地址'
this.isShowDel = false
} else {
this.navName = '编辑地址'
this.isShowDel = true
}
this.initDataPicker() //初始化省份列表
},
onShow() {
this.getProvince()
},
computed: {
...mapState(['userInfo']),
},
onReady() {
this.$refs.addForm.setRules(this.rules)
},
methods: {
initDataPicker() {
//此处的province主要用作数据的初始化，即刚打开就需要进行展示的数据，这个跟第一条省份数据相关，我的第一条是北京市，所以需要columns中的三维数组，第一维度是省份数据数组，第二维度是市数据数组，第三维度是区数据数组
let province = []; //初始数据需要展示的省份
let province1 = [{
name: '市辖区',
code: '1101'
}]; //因为第一个市北京市，所以就直接添加北京市下辖的直辖市了 也即初始数据需要展示的市，北京市只有一个市辖区
let province2 = []; //初始数据需要展示的区域数据，也即是 北京市市辖区内的区
// this.addressList
address.map(item => {
province.push(item);
});
address[0].children[0].children.map(item => {
province2.push(item);
});
//省数据 因为要做数据初始化，所以是三维数组
// 数据格式 [ [所有的省份数据:{},{}] , [第一个省份下的所有的市:{},{},{}] , [第一个市下面所有的区:{},{},{}] ]
this.columns.push(province);
this.columns.push(province1);
this.columns.push(province2);
// 市数据数组，筛选address.json文件，将全国所有省下面的市数据放入数组
// 格式[ [第一个省下面所有市,{},{},{}] , [第二个省下面所有市{},{},{}] , [第三个省下面所有市{},{},{}] ] 注意，以上的第一第二对应着 columns[0] 的数据
address.map(item => {
let city = [];
item.children.map(item1 => {
city.push(item1);
});
this.columnData.push(city);
});
//区数据数组
//数据格式: [ 所有省下面所有市的所有区 [ 第一个省下面所有市的区:[ [第一个省下面第一个市的所有区] , [第一个省下面第二个市的所有区] ,] , [ 第二个省下面所有市的区:[ [第二个省下面第一个市的所有区] , [第二个省下面第二个市的所有区] ,] ]
let area = [];
address.map((item, index) => {
let area1 = []; //省下面所有市的初始化
item.children.map(item1 => {
area = []; //市下面的区初始化
item1.children.map(item2 => {
area.push(item2);
});
area1.push(area); // 每循环一个市，添加该市下面的所有区
});
this.columnDatas.push(area1); // 每循环一个省，添加该省下面的所有市
});
},
changeHandler(e) { //城市选择时触发
const {
columnIndex, //当前选择的列，省 / 市 / 区
value, // 当前选择的数组内容
values, // values为当前变化列的数组内容
index, // 当前列的下标值
indexs, // 当前选择 省 市 区的下表值
picker = this.$refs.uPicker
} = e;
// 当第一列值发生变化时，变化第二列和第三列的值（省份变更，市和区跟着变更）
if (columnIndex === 0) { // 判断当前变更的是省还是市还是区
// picker为选择器this实例，变化第二列对应的选项
picker.setColumnValues(1, this.columnData[
index]); //设置市为该省下面的所有市，index是当前省在省份数组的下标，对应市数组中的下表就是 该省下面的所有市 的数据
picker.setColumnValues(2, this.columnDatas[index][0]); // 设置区域为该省下面第一个市下面的所有区域
}
if (columnIndex === 1) {
// 当第二列发生变化 变化对应的第三列
picker.setColumnValues(2, this.columnDatas[indexs[0]][index]); //同上
}
},
confirm(e) { //点击确定按钮
console.log(e)
this.show = false;
},
cancel() { //点击取消按钮
this.show = false;
},
// 选择省
selectProvince(e) {
// 获取下标
let index = e.detail.value
// 找到对应id
this.provId = this.provinceList[index].provId
// 调用获取'市'列表方法
this.getCityList(this.provId)
this.province = this.provinceList[index].provName
},
// 选择市
selectCity(e) {
// 获取下标
let index = e.detail.value
// 找到对应id
this.cityId = this.cityList[index].cityId
// 调用获取'市'列表方法
this.getCountList(this.cityId)
this.city = this.cityList[index].cityName
},
// 选择区
selectCount(e) {
// 获取下标
let index = e.detail.value
// 找到对应id
this.countyId = this.countList[index].countyId
this.count = this.countList[index].countyName
},
// 获取’省’列表
getProvince() {
this.$http.post('/api/province/getProvinceList').then(res => {
this.provinceList = res.provinceList
})
},
// 获取'市'列表
getCityList(id) {
this.$http.post(`/api/province/getCityList?provId=${id}`).then(res => {
this.cityList = res.prov
this.isShowCity = false
})
},
// 获取'区'列表
getCountList(id) {
this.$http.post(`/api/province/getCountyList?cityId=${id}`).then(res => {
this.countList = res.countyList
this.isShowCount = false
})
},
// 保存地址
uploadSub() {
this.$refs.addForm.validate()
.then(res => {
if (this.countyId == '') {
uni.showToast({
title: '请补全所在地址信息',
icon: "none"
});
return
}
console.log(this.addressForm)
let data = {
userid: this.userInfo.id,
username: this.addressForm.userName,
userphone: this.addressForm.userTel,
areaidpath: `${this.provId}_${this.cityId}_${this.countyId}`,
areaid: this.countyId,
useraddress: this.addressForm.addrDetail,
isdefault: this.addressForm.isDefault ? 1 : 0,
}
$http.request({
url: "book/useraddress/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '地址添加成功',
duration: 1000,
});
uni.navigateBack()
}
})
}).catch(errors => {
uni.showToast({
title: '请补全信息',
icon: "none"
});
})
},
// 编辑地址获取信息
if (isShowDel) {
},
// 删除地址
deleteSub() {
let data = {
userid: this.userInfo.id,
}
this.deleteShow = false
return
$http.request({
url: "book/useraddress/delete",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '地址删除成功',
duration: 1000,
});
uni.navigateBack()
}
})
},
},
}
</script>
<style lang="scss" scoped>
.addContent {
width: 90%;
margin: 20rpx auto 0 auto;
.addItem {
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 25rpx 10rpx;
uni-picker {
flex: 1;
}
.pickerItem {
height: 100%;
padding: 20rpx;
background-color: #dfdfdf;
border-radius: 20rpx;
border-bottom: solid 1px #ccc;
color: #7d7d7d;
}
}
}
.addFooter {
width: 100%;
margin: 50rpx 0 0 0;
view {
font-size: 30rpx;
width: 80%;
padding: 16rpx 0;
text-align: center;
color: #fff;
border-radius: 20rpx;
margin: 30rpx auto 0 auto;
}
.submit {
background-image: linear-gradient(90deg, #eba00b 0%, #c96713 100%)
}
.del {
background-image: linear-gradient(90deg, #bf0c0c 0%, #95110c 100%)
}
}
</style>

449
pages/user/addAddress.vue Normal file
View File

@@ -0,0 +1,449 @@
<template>
<view>
<view class="addressHeader">
<!-- 顶部导航栏 -->
<z-nav-bar :title="navName"></z-nav-bar>
</view>
<view class="addContent">
<u-form :model="addressForm" ref='addForm' :rules="rules" label-width="180rpx">
<u-form-item label="收件人 :" prop="username">
<u-input type="string" v-model="addressForm.username" placeholder="姓名" clearable
border="surround" />
</u-form-item>
<u-form-item label="手机号码 :" prop="userphone">
<u-input type="number" v-model="addressForm.userphone" placeholder="手机号" clearable
border="surround" />
</u-form-item>
<u-form-item label="所在地区 :" prop="">
<view class="add_arrow" @click="addreShow=true">{{addressForm.areaidpathtext}}</view>
<u-picker @cancel="addcancel" :show="addreShow" ref="uPicker" :columns="columns" keyName="UName"
@confirm="addconfirm" @change="changeHandler"></u-picker>
</u-form-item>
<u-form-item label="详细地址 :" prop="useraddress">
<u-input type="string" v-model="addressForm.useraddress" placeholder="小区楼栋/乡村名称" clearable
border="surround" />
</u-form-item>
<u-form-item label="默认地址 :">
<u-switch v-model="addressForm.isDafault" active-color="#ff9e02" @change="changeSwitch"></u-switch>
</u-form-item>
</u-form>
</view>
<view class="addFooter">
<view class="submit" @click="uploadSub">
保存
</view>
<view class="del" v-if="isShowDel" @click="deleteShow=true">
删除
</view>
</view>
<u-modal :show="deleteShow" content="你确定要删除地址吗？" :showCancelButton="true" @cancel="deleteShow=false"
@confirm="deleteSub">
</u-modal>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
data() {
return {
addreShow: false, //是否显示
columns: [], //省份数据显示，三级联动需要三维数组，展示初始数据
columnData: [], //市数据
columnDatas: [], //区地址
switchTrue: true,
switchFalse: false,
navName: '', // 顶部导航栏标题
provId: '', // 存储省id
cityId: '', // 存储市id
countyId: '', // 存储区id
addressList: [],
// 地址
addressForm: {
addressid: '',
username: '',
userphone: '',
area: '',
useraddress: '',
isDafault: false,
areaidpathtext: ''
},
isShowDel: false,
editIndex: 0,
deleteShow: false,
rules: {
username: [{
required: true,
message: "请输入收件人姓名",
trigger: "blur"
}],
userphone: [{
required: true,
message: "请输入手机号",
},
{
// 自定义验证函数
validator: (rule, value, callback) => {
// 返回true表示校验通过，返回false表示不通过
// 过滤第一层，先判断输入为不为空，因为required: false，不是必填项，所以为空应该返回true
if (value) {
return this.$u.test.mobile(value);
} else {
return true
}
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
}
],
useraddress: [{
required: true,
message: "请输入所在地区",
trigger: "blur"
}]
}
}
},
onLoad(e) {
if (e.type == 0) {
this.navName = '添加地址'
this.isShowDel = false
} else {
this.navName = '编辑地址'
this.isShowDel = true
this.editIndex = e.index
this.getAddress()
}
this.initDataPicker() //初始化省份列表
},
onShow() {
},
computed: {
...mapState(['userInfo']),
},
onReady() {
this.$refs.addForm.setRules(this.rules)
},
methods: {
// 三级联动
initDataPicker() {
this.$http
.post('api/province/getProvince')
.then(res => {
if (res.code == 0) {
this.addressList = res.provinceEntity
//此处的province主要用作数据的初始化，即刚打开就需要进行展示的数据，这个跟第一条省份数据相关，我的第一条是北京市，所以需要columns中的三维数组，第一维度是省份数据数组，第二维度是市数据数组，第三维度是区数据数组
let province = []; //初始数据需要展示的省份
let province1 = [{
"cityId": this.addressList[0].cityList[0].cityId,
"provId": this.addressList[0].cityList[0].provId,
"cityName": this.addressList[0].cityList[0].cityName,
"UName": this.addressList[0].cityList[0].cityName,
"createDate": this.addressList[0].cityList[0].createDate,
"regionCode": this.addressList[0].cityList[0].regionCode,
"countyList": this.addressList[0].cityList[0].countyList
}]; //因为第一个市北京市，所以就直接添加北京市下辖的直辖市了 也即初始数据需要展示的市，北京市只有一个市辖区
let province2 = []; //初始数据需要展示的区域数据，也即是 北京市市辖区内的区
for (let i = 0; i < this.addressList.length; i++) {
this.addressList[i].UName = this.addressList[i].provName
if (this.addressList[i].cityList == null) {
this.addressList[i].cityList = [{
"cityId": this.addressList[i].provId,
"provId": this.addressList[i].provId,
"cityName": this.addressList[i].provName,
"UName": this.addressList[i].provName,
"createDate": this.addressList[i].createDate,
"regionCode": this.addressList[i].regionCode,
"countyList": [{
"countyId": this.addressList[i].provId,
"cityId": this.addressList[i].provId,
"countyName": this.addressList[i].provName,
"UName": this.addressList[i].provName,
"createDate": this.addressList[i].createDate,
"regionCode": this.addressList[i].regionCode
}]
}]
} else {
for (let j = 0; j < this.addressList[i].cityList.length; j++) {
this.addressList[i].cityList[j].UName = this.addressList[i].cityList[j]
.cityName
for (let k = 0; k < this.addressList[i].cityList[j].countyList.length; k++) {
this.addressList[i].cityList[j].countyList[k].UName = this.addressList[i]
.cityList[j].countyList[k].countyName
}
}
}
province.push(this.addressList[i]);
}
this.addressList[0].cityList[0].countyList.map(item => {
province2.push(item);
});
//省数据 因为要做数据初始化，所以是三维数组
// 数据格式 [ [所有的省份数据:{},{}] , [第一个省份下的所有的市:{},{},{}] , [第一个市下面所有的区:{},{},{}] ]
this.columns.push(province);
this.columns.push(province1);
this.columns.push(province2);
// 市数据数组，筛选address.json文件，将全国所有省下面的市数据放入数组
// 格式[ [第一个省下面所有市,{},{},{}] , [第二个省下面所有市{},{},{}] , [第三个省下面所有市{},{},{}] ] 注意，以上的第一第二对应着 columns[0] 的数据
this.addressList.map(item => {
let city = [];
item.cityList.map(item1 => {
city.push(item1);
});
this.columnData.push(city);
});
//区数据数组
//数据格式: [ 所有省下面所有市的所有区 [ 第一个省下面所有市的区:[ [第一个省下面第一个市的所有区] , [第一个省下面第二个市的所有区] ,] , [ 第二个省下面所有市的区:[ [第二个省下面第一个市的所有区] , [第二个省下面第二个市的所有区] ,] ]
let area = [];
this.addressList.map((item, index) => {
let area1 = []; //省下面所有市的初始化
item.cityList.map(item1 => {
area = []; //市下面的区初始化
item1.countyList.map(item2 => {
area.push(item2);
});
area1.push(area); // 每循环一个市，添加该市下面的所有区
});
this.columnDatas.push(area1); // 每循环一个省，添加该省下面的所有市
});
};
})
},
changeHandler(e) { //城市选择时触发
const {
columnIndex, //当前选择的列，省 / 市 / 区
value, // 当前选择的数组内容
values, // values为当前变化列的数组内容
index, // 当前列的下标值
indexs, // 当前选择 省 市 区的下表值
picker = this.$refs.uPicker
} = e;
// 当第一列值发生变化时，变化第二列和第三列的值（省份变更，市和区跟着变更）
if (columnIndex === 0) { // 判断当前变更的是省还是市还是区
// picker为选择器this实例，变化第二列对应的选项
picker.setColumnValues(1, this.columnData[
index]); //设置市为该省下面的所有市，index是当前省在省份数组的下标，对应市数组中的下表就是 该省下面的所有市 的数据
picker.setColumnValues(2, this.columnDatas[index][0]); // 设置区域为该省下面第一个市下面的所有区域
}
if (columnIndex === 1) {
// 当第二列发生变化 变化对应的第三列
picker.setColumnValues(2, this.columnDatas[indexs[0]][index]); //同上
}
},
addconfirm(e) { //点击确定按钮
this.addreShow = false;
this.addressForm.areaidpathtext = e.value[0].UName + ' ' + e.value[1].UName + ' ' + e.value[2].UName
this.provId = e.value[0].provId
this.cityId = e.value[1].cityId
this.countyId = e.value[2].countyId
},
addcancel() { //点击取消按钮
this.addreShow = false;
},
// 保存地址
uploadSub() {
this.$refs.addForm.validate()
.then(res => {
let link_add = ''
if (!this.isShowDel) {
link_add = 'book/useraddress/save'
} else {
link_add = 'book/useraddress/update'
}
if (this.addressForm.areaidpath == '') {
uni.showToast({
title: '请补全所在地址信息',
icon: "none"
});
return
}
this.addressForm.userid = this.userInfo.id
this.addressForm.areaidpath = `${this.provId}_${this.cityId}_${this.countyId}`
this.addressForm.areaid = this.countyId
this.addressForm.isdefault = this.addressForm.isDafault ? 1 : 0
let data = this.addressForm
$http.request({
url: link_add,
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '地址添加成功',
duration: 1000,
});
setTimeout(function() {
uni.navigateBack()
}, 1000);
}
})
}).catch(errors => {
uni.showToast({
title: '请补全信息',
icon: "none"
});
})
},
changeSwitch(e) {
this.addressForm.isDafault = e
console.log(this.addressForm)
},
// 编辑地址获取信息
getAddress() {
this.$http
.post(`book/useraddress/getUserAddress?userId=${this.userInfo.id}`)
.then(res => {
if (res.code == 0) {
this.addressForm = res.list[this.editIndex]
if (this.addressForm.isdefault == 1) {
this.addressForm.isDafault = true
}
}
})
},
// 删除地址
deleteSub() {
let addressArr = [];
addressArr.push(this.addressForm.addressid)
this.deleteShow = false
$http.request({
url: "book/useraddress/delete",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data:addressArr,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '地址删除成功',
duration: 1000,
});
uni.navigateBack()
}
})
},
},
}
</script>
<style lang="scss" scoped>
.add_arrow {
height: 28px;
line-height: 28px;
width: 100%;
position: relative;
&::after {
content: '';
position: absolute;
right: 20upx;
top: 50%;
transform: translateY(-50%);
width: 40upx;
height: 40upx;
background-image: url('../../static/icon/icon_right.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
}
.addContent {
width: 90%;
margin: 20rpx auto 0 auto;
.addItem {
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 25rpx 10rpx;
uni-picker {
flex: 1;
}
.pickerItem {
height: 100%;
padding: 20rpx;
background-color: #dfdfdf;
border-radius: 20rpx;
border-bottom: solid 1px #ccc;
color: #7d7d7d;
}
}
}
.addFooter {
width: 100%;
margin: 50rpx 0 0 0;
view {
font-size: 34rpx;
width: 80%;
padding: 25rpx 0;
text-align: center;
color: #fff;
border-radius: 20rpx;
margin: 30rpx auto 0 auto;
}
.submit {
background-image: linear-gradient(90deg, #eba00b 0%, #c96713 100%)
}
.del {
background-image: linear-gradient(90deg, #bf0c0c 0%, #95110c 100%)
}
}
</style>

144
pages/user/address.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<view class="">
<view class="addressHeader">
<!-- 顶部导航栏 -->
<z-nav-bar title="地址管理"></z-nav-bar>
</view>
<view class="addressMain">
<view class="addressItem" v-for="(item,index) in addressList" :key="index">
<view class="addrContent">
<view class="addrContentTop">
<view class="userName">
{{item.username}}
</view>
<view class="userTel">
{{item.userphone}}
</view>
<view class="userMoren" v-if="item.isdefault==1">
默认
</view>
</view>
<view class="addrContentBottom">
<view class="userAddress">
{{item.areaidpathtext}} {{item.useraddress}}
</view>
</view>
</view>
<view class="addrEdit" @click="toAddress(1,index)">
<u-icon name="edit-pen" color="#a7a5a5" size="24"></u-icon>
</view>
</view>
</view>
<view class="addressFooter">
<view class="addAddress" @click="toAddress(0,0)">
+ 添加收货地址
</view>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
export default {
data() {
return {
addressList: []
}
},
onShow() {
this.getUserAddress()
},
computed: {
...mapState(['userInfo']),
},
methods: {
getUserAddress() {
this.$http
.post(`book/useraddress/getUserAddress?userId=${this.userInfo.id}`)
.then(res => {
if (res.code == 0) {
this.addressList = res.list
}
})
},
// 跳转页面
toAddress(type, index) {
uni.navigateTo({
url: `/pages/user/addAddress?type=${type}&index=${index}`
})
}
}
}
</script>
<style lang="scss" scoped>
.addressItem {
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
.addrContent {
margin-left: 40rpx;
flex: 1;
.addrContentTop {
display: flex;
align-items: flex-end;
margin: 0 0 15rpx 0;
.userName {
font-size: 35rpx;
font-weight: bold;
margin-right: 30rpx;
}
.userTel {
font-size: 25rpx;
color: #888;
}
.userMoren {
border: 1px solid #fd6004;
color: #fd6004;
padding: 3rpx 10rpx;
font-size: 22rpx;
border-radius: 10rpx;
margin: 0 0 0 20rpx;
}
}
.addrContentBottom {
font-size: 32rpx;
}
}
.addrEdit {
padding: 10rpx;
}
}
.addressFooter {
width: 100%;
height: auto;
display: flex;
justify-content: center;
position: fixed;
bottom: 30rpx;
.addAddress {
font-size: 34rpx;
width: 90%;
text-align: center;
color: #fff;
background-image: linear-gradient(90deg, #eba00b 0%, #c96713 100%);
border-radius: 20rpx;
padding: 25rpx 0;
}
}
</style>

282
pages/user/bindPhone.vue Normal file
View File

@@ -0,0 +1,282 @@
<template>
<view>
<z-nav-bar title="绑定手机号"></z-nav-bar>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="bindAccountBox">
<image :src="logoUrl"></image>
<view><image src="../../static/icon/bindingIcon.png"></image></view>
<image src="../../static/icon/WeChatIcon.png"></image>
</view>
<view class="inputItem">
<view class="title">*手机号</view>
<view class="info"><input type="number" placeholder="请输入" v-model="phone" /></view>
</view>
<view class="inputItem">
<view class="title">*验证码</view>
<view class="info">
<input type="number" placeholder="请输入" v-model="code" />
<button @click="getCode">{{ codeText }}</button>
</view>
</view>
<view class="registeredBut bindAccountBut"><button @click="onSubmit">立即绑定</button></view>
</view>
</template>
<script>
var clear;
import { mapState, mapMutations } from 'vuex';
import socket from '@/config/socket';
// #ifdef H5
import {publicShare} from '@/config/utils';
// #endif
export default {
data() {
return {
logoUrl: '',
readonly: false,
codeText: '获取验证码',
phone: '',
code: ''
};
},
//第一次加载
onLoad(e) {
this.logoUrl = this.$base.logoUrl;
},
computed: {
...mapState(['userInfo','chatScenesInfo'])
},
//页面显示
onShow() {},
//方法
methods: {
...mapMutations(['setUserInfo']),
//验证码按钮文字状态
getCodeState() {
const _this = this;
this.readonly = true;
this.codeText = '60S后重新获取';
var s = 60;
clear = setInterval(() => {
s--;
_this.codeText = s + 'S后重新获取';
if (s <= 0) {
clearInterval(clear);
_this.codeText = '获取验证码';
_this.readonly = false;
}
}, 1000);
},
//获取验证码
getCode() {
if (this.readonly) {
uni.showToast({
title: '验证码已发送',
icon: 'none'
});
return;
}
if (this.phone == '') {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.$base.phoneRegular.test(this.phone)) {
uni.showToast({
title: '手机号格式不正确',
icon: 'none'
});
return;
}
this.$http
.post('api/open/v1/send_sms', {
phone: this.phone,
type: 3104
})
.then(res => {
this.getCodeState();
});
},
//账号绑定
onSubmit() {
if (this.phone == '') {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.$base.phoneRegular.test(this.phone)) {
uni.showToast({
title: '手机号格式不正确',
icon: 'none'
});
return;
}
if (this.code == '') {
uni.showToast({
title: '请输入验证码',
icon: 'none'
});
return;
}
if (!/^[0-9]{6}$/.test(this.code)) {
uni.showToast({
title: '验证码必须是6位数',
icon: 'none'
});
return;
}
if (!(this.userInfo.wxSmallOpenId || this.userInfo.openId || this.userInfo.wxPublicOpenId)) {
uni.showToast({
title: '数据丢失',
icon: 'none'
});
return;
}
let httpData = {
openId: this.userInfo.openId || this.userInfo.wxSmallOpenId || this.userInfo.wxPublicOpenId,
phone: this.phone,
code: this.code,
// #ifdef MP-WEIXIN
type: 1201,
// #endif
// #ifdef H5
type: 1301,
// #endif
// #ifdef APP-PLUS
type: 1101
// #endif
};
if(this.userInfo.unionid || this.userInfo.wxUnionid){
httpData.unionid = this.userInfo.unionid || this.userInfo.wxUnionid;
}
// #ifdef H5
let recommendCode = uni.getStorageSync("recommendCode");
if(recommendCode){
httpData.recommendCode = recommendCode;
}
// #endif
// #ifndef H5
if(this.chatScenesInfo.recommendCode){
httpData.recommendCode = this.chatScenesInfo.recommendCode;
}
// #endif
this.$http
.post('api/open/v1/third_bind',httpData)
.then(res => {
this.setUserInfo(res);
// #ifdef H5
publicShare();
// #endif
socket.init();
uni.showModal({
title: '提示',
content: '账号绑定成功！',
showCancel: false,
success: res => {
uni.navigateBack();
}
});
});
}
},
//页面隐藏
onHide() {},
//页面卸载
onUnload() {},
//页面下来刷新
onPullDownRefresh() {},
//页面上拉触底
onReachBottom() {},
//用户点击分享
onShareAppMessage(e) {
return this.wxShare();
}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.bindAccountBox {
height: 283upx;
display: flex;
justify-content: center;
align-items: center;
}
.bindAccountBox > image {
width: 95upx;
height: 95upx;
border-radius: 15upx;
}
.bindAccountBox > view {
width: 95upx;
height: 95upx;
padding: 0upx 20upx;
display: flex;
align-items: center;
}
.bindAccountBox > view image {
width: 100%;
height: 40upx;
}
.bindAccountBut {
margin-top: 60upx;
}
.registeredBut {
margin-bottom: 30upx;
padding: 0upx 20upx;
}
.registeredBut button {
font-size: 36upx;
border-radius: 3upx;
text-align: center;
line-height: 90upx;
height: 90upx;
background-color: $themeColor;
color: #fff;
}
.inputItem {
background-color: #fff;
display: flex;
margin-top: 12upx;
padding: 0 25upx;
}
.inputItem .title {
min-width: 190upx;
height: 100upx;
line-height: 100upx;
flex-shrink: 0;
font-size: 30upx;
white-space: nowrap;
}
.inputItem .info {
flex: 1;
display: flex;
align-items: center;
color: #999;
}
.inputItem .info input {
height: 100upx;
line-height: 100upx;
font-size: 30upx;
width: 100%;
}
.inputItem .info button {
height: 80upx;
line-height: 80upx;
font-size: 28upx;
flex-shrink: 0;
padding: 0 15upx;
border: 1upx solid $themeColor;
background-color: #fff;
color: $themeColor;
}
</style>

246
pages/user/forget.vue Normal file
View File

@@ -0,0 +1,246 @@
<template>
<view class="page">
<z-nav-bar></z-nav-bar>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="title">忘记密码</view>
<view class="input_box">
<text class="input_tit">手机号</text>
<input type="text" v-model="phone" placeholder="请输入手机号" />
</view>
<view class="input_box">
<text class="input_tit">验证码</text>
<input type="number" v-model="code" placeholder="请输入验证码" />
<button @click="getCode">{{codeText}}</button>
</view>
<view class="input_box">
<text class="input_tit">密码</text>
<input type="password" v-model="password" placeholder="请输入密码" />
</view>
<view class="input_box">
<text class="input_tit">确认密码</text>
<input type="password" v-model="confirmPassword" placeholder="请确认密码" />
</view>
<view class="btn_box"><button @click="onSubmit">提 交</button></view>
</view>
</template>
<script>
import md5 from '@/plugins/md5';
var clear;
export default {
data() {
return {
//手机号账号
phone: '',
// 密码
password: '',
//验证码
code: '',
//确认密码
confirmPassword: '',
//验证码
codeText: '获取验证码',
//验证码已发
readonly: false
};
},
//第一次加载
onLoad(e) {},
//页面显示
onShow() {},
//方法
methods: {
//获取验证码
getCode() {
if (this.readonly) {
uni.showToast({
title: '验证码已发送',
icon: 'none'
});
return;
}
if (!this.phone) {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.$base.phoneRegular.test(this.phone)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
});
return;
}
this.$http
// .post('api/common/v1/send_sms', {
.post('book/user/sms/sendcode', {
phone: this.phone,
type: 3000
})
.then(res => {
this.getCodeState();
});
},
//验证码按钮文字状态
getCodeState() {
const _this = this;
this.readonly = true;
this.codeText = '60S后重新获取';
var s = 60;
clear = setInterval(() => {
s--;
_this.codeText = s + 'S后重新获取';
if (s <= 0) {
clearInterval(clear);
_this.codeText = '获取验证码';
_this.readonly = false;
}
}, 1000);
},
onSubmit() {
if (!this.phone) {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.$base.phoneRegular.test(this.phone)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
});
return;
}
if (!this.code) {
uni.showToast({
title: '请输入验证码',
icon: 'none'
});
return;
}
if (!this.password) {
uni.showToast({
title: '请输入密码',
icon: 'none'
});
return;
}
if (!this.confirmPassword) {
uni.showToast({
title: '请输入确认密码',
icon: 'none'
});
return;
}
if (this.confirmPassword != this.password) {
uni.showToast({
title: '两次密码不一致',
icon: 'none'
});
return;
}
if (!this.$base.passwordRegular.test(this.password)) {
uni.showToast({
title: '请输入不少于6位且包含数字和字母的密码',
icon: 'none'
});
return;
}
this.$http
// .post('api/common/v1/forget_password', {
.post('book/user/setPassword', {
phone: this.phone,
code:this.code,
// password: md5(this.password),
password: this.password
})
.then(res => {
uni.showModal({
title:"提示",
content:"密码修改成功！",
showCancel:false,
success: (res) => {
uni.navigateBack();
}
});
});
}
},
//页面隐藏
onHide() {},
//页面卸载
onUnload() {},
//页面下来刷新
onPullDownRefresh() {},
//页面上拉触底
onReachBottom() {},
//用户点击分享
onShareAppMessage(e) {
return this.wxShare();
}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.page {
background-color: #ffffff;
padding: 0 65rpx;
min-height: 100vh;
.title {
padding: 60rpx 0 40rpx 0;
font-size: 60rpx;
color: #333333;
}
.input_box {
display: flex;
justify-content: space-between;
height: 100rpx;
padding-top: 30rpx;
border-bottom: 1rpx solid #eeeeee;
align-items: center;
text{
font-size: 30rpx;
width: 180rpx;
}
input {
flex: 1;
height: 70rpx;
line-height: 70rpx;
font-size: 30rpx;
}
button {
height: 78rpx;
line-height: 78rpx;
font-size: 30rpx;
color: $themeColor;
&:active {
background-color: transparent;
}
}
}
.btn_box {
margin-top: 70rpx;
button {
font-size: 32rpx;
@include theme('btn_bg')
color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 50rpx;
}
}
.protocol {
font-size: 24rpx;
color: #999999;
text-align: center;
margin-top: 20rpx;
text {
color: $themeColor;
}
}
}
</style>

287
pages/user/healthLog.vue Normal file
View File

@@ -0,0 +1,287 @@
<template>
<view class="page">
<z-nav-bar></z-nav-bar>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="title">手机号验证</view>
<view class="input_box">
<text class="input_tit">手机号</text>
<input type="text" v-model="phone" placeholder="请输入手机号" />
</view>
<view class="input_box">
<text class="input_tit">验证码</text>
<input type="text" v-model="code" placeholder="请输入验证码" />
<button @click="getCode">{{codeText}}</button>
</view>
<view class="btn_box"><button @click="onSubmit">提 交</button></view>
</view>
</template>
<script>
import md5 from '@/plugins/md5';
var clear;
import store from '@/store';
import socket from '@/config/socket';
import {
mapState,
mapMutations
} from 'vuex';
export default {
data() {
return {
//手机号账号
phone: '',
// 密码
password: '',
//验证码
code: '',
//验证码
codeText: '获取验证码',
//验证码已发
readonly: false
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.showPhone();
},
computed: {
...mapState(["userInfo"])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
},
//方法
methods: {
// 显示手机号
showPhone() {
let HealthMes = store.state.HealthMes;
let IsPhoneHealth = this.$base.phoneRegular.test(HealthMes.cellPhone)
if (IsPhoneHealth) {
this.phone = HealthMes.cellPhone
}
},
//获取验证码
getCode() {
if (this.readonly) {
uni.showToast({
title: '验证码已发送',
icon: 'none'
});
return;
}
if (!this.phone) {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.$base.phoneRegular.test(this.phone)) {
uni.showToast({
title: '手机格式不正确',
icon: 'none'
});
return;
}
this.$http
.get('book/user/sms/sendcode', {
phone: this.phone,
type: 2000
})
.then(res => {
this.getCodeState();
});
},
//验证码按钮文字状态
getCodeState() {
const _this = this;
this.readonly = true;
this.codeText = '60S后重新获取';
var s = 60;
clear = setInterval(() => {
s--;
_this.codeText = s + 'S后重新获取';
if (s <= 0) {
clearInterval(clear);
_this.codeText = '获取验证码';
_this.readonly = false;
}
}, 1000);
},
onSubmit() {
if (!this.phone) {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.$base.phoneRegular.test(this.phone)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
});
return;
}
if (!this.code) {
uni.showToast({
title: '请输入验证码',
icon: 'none'
});
return;
}
let HealthMes = store.state.HealthMes;
let httpData = {};
httpData.code = this.code;
httpData.phone = this.phone;
httpData.yljkOid = HealthMes.yljkOid;
httpData.userName = HealthMes.nameCN;
httpData.customerIcons = HealthMes.customerIcons;
this.$http
.get('book/user/registerHs', httpData)
.then(res => {
uni.showToast({
title: '手机验证成功',
duration: 1000,
});
res.userInfo.token = res.token.token;
this.setUserInfo(res.userInfo);
// socket.init();
setTimeout(() => {
uni.switchTab({
url: '/pages/peanut/home'
});
}, 1000);
// uni.showModal({
// title: '提示',
// content: '该手机号已经注册过花生，您是否要绑定登录？',
// success: function(res) {
// if (res.confirm) {
// console.log('用户点击确定');
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
// uni.showModal({
// title: '提示',
// content: '验证成功，请问您要通过该账户登录花生吗？',
// success: function(res) {
// if (res.confirm) {
// this.setUserInfo(res.userInfo);
// // socket.init();
// uni.switchTab({
// url: "/pages/home/home"
// });
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
});
// let bangDing = {};
// bangDing.phone = this.code;
// httpData.password = this.phone;
// httpData.hsuserId = HealthMes.yljkOid;
// this.$http
// .get('book/user/getEverhealthInfo', bangDing)
// .then(res => {
// console.log(res)
// uni.showToast({
// title: '验证成功',
// duration: 600,
// });
// });
}
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.page {
background-color: #ffffff;
padding: 0 65rpx;
min-height: 100vh;
.title {
padding: 60rpx 0 40rpx 0;
font-size: 60rpx;
color: #333333;
}
.input_box {
display: flex;
justify-content: space-between;
height: 100rpx;
padding-top: 30rpx;
border-bottom: 1rpx solid #eeeeee;
align-items: center;
text {
font-size: 30rpx;
width: 180rpx;
}
input {
flex: 1;
height: 70rpx;
line-height: 70rpx;
font-size: 30rpx;
}
button {
height: 78rpx;
line-height: 78rpx;
font-size: 30rpx;
color: $themeColor;
&:active {
background-color: transparent;
}
}
}
.btn_box {
margin-top: 70rpx;
button {
font-size: 32rpx;
@include theme('btn_bg') color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 50rpx;
}
}
.protocol {
font-size: 24rpx;
color: #999999;
text-align: center;
margin-top: 20rpx;
text {
color: $themeColor;
}
}
}
</style>

869
pages/user/login.vue Normal file
View File

@@ -0,0 +1,869 @@
<template>
<view style="background-color: #fff;">
<!-- <z-nav-bar :shadow="false"></z-nav-bar> -->
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="logo_bg">
<text>您好，<br>欢迎来到 疯子读书</text>
<image src="../../static/icon/login_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
<image src="../../static/icon/login_icon_2.png" mode="aspectFit" class="icon_hua_2"></image>
</view>
<view class="register_page">
<view class="login_method">
<view class="title" :class="{ active: type == 2000 }" v-if="type == 2000">验证码登录/注册</view>
<view class="title" :class="{ active: type == 1000 }" v-if="type == 1000">密码登录</view>
<!-- <view class="title" :class="{ active: type == 2000 }" @click="type = 2000">验证码登录/注册</view>
<view class="title" :class="{ active: type == 1000 }" @click="type = 1000">密码登录</view> -->
</view>
<view class="input_tit">手机号</view>
<view class="input_box triangle" :clasfs="[type == 1000 ? 'left_triangle': 'right_triangle']">
<input type="text" v-model="phone" @input="onInput" placeholder="请输入您的手机号" placeholder-class="grey" />
</view>
<view class="input_tit" v-if="type == 1000">密码</view>
<view class="input_box" v-if="type == 1000">
<input class="input_item" v-model="password" @input="onInput" :password="!isSee" placeholder="请输入密码"
placeholder-class="grey" @confirm="onSubmit" />
<image v-if="isSee" src="../../static/icon/ic_logon_display.png" mode="aspectFit"
@click="isSee = false">
</image>
<image v-else-if="!isSee" src="../../static/icon/ic_logon_hide.png" mode="aspectFit"
@click="isSee = true">
</image>
</view>
<view class="input_tit" v-if="type == 2000">验证码</view>
<view class="input_box" v-if="type == 2000">
<input v-model="code" placeholder="请输入您的验证码" placeholder-class="grey" @input="onInput" maxlength="6"
@confirm="onSubmit" />
<button class="active" @click="onSetCode">{{ codeText }}</button>
</view>
<view class="protocol_box">
<view class="select" :class="{active: agree}" @click="agree = !agree"></view>
我已同意
<text @click="onPageJump('/pages/user/protocol')">《用户协议》</text>
和
<text @click="onPageJump('/pages/user/protocol')">《隐私协议》</text>
</view>
<view class="btn_box">
<button @click="onSubmit" class="active" v-if="btnShow">登 录</button>
<button v-else>登 录</button>
</view>
<view class="password_register" style="margin: 0 auto; text-align: center; display: block;">
<button @click="onPageJump('/pages/user/register')">注册账号</button>
<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码？</text>
</view>
<view class="third_party_login_box">
<view class="third_party_title"><text>第三方登录</text></view>
<view class="third_party_content">
<image src="../../static/icon/ic_login_health.png" @click="onHealthLogin" mode="aspectFit"></image>
</view>
</view>
<view class="qie_huan" style="display: flex; justify-content: center;">
<view style="width: 30%;" @click="type = 1000" v-if="type == 2000">密码登录</view>
<view style="width: 30%;" @click="type = 2000" v-if="type == 1000">验证码登录</view>
</view>
<z-popup v-model="HealthOpen" type="center" :hideOnBlur="false">
<view class="popup_box">
<view class="popup_title">
<view>
<image src="../../static/icon/ic_login_health.png" mode="aspectFit"></image>
一路健康用户 - 登录
</view>
</view>
<view class="popup_content">
<view class="input_tit">账号</view>
<view class="input_box triangle" :class="[type == 1000 ? 'left_triangle': 'right_triangle']">
<input type="text" v-model="health_phone" placeholder="请输入您的一路健康账号"
placeholder-class="grey" />
</view>
<view class="input_tit">密码</view>
<view class="input_box">
<input class="input_item" v-model="health_password" :password="!isSee_H" placeholder="请输入密码"
placeholder-class="grey" @confirm="onSubmit_Health" />
<image v-if="isSee_H" src="../../static/icon/ic_logon_display.png" mode="aspectFit"
@click="isSee_H = false">
</image>
<image v-else-if="!isSee_H" src="../../static/icon/ic_logon_hide.png" mode="aspectFit"
@click="isSee_H = true">
</image>
</view>
</view>
<view class="popup_footer">
<view @click="HealthOpen = false">取消</view>
<view @click="onSubmit_Health">确定</view>
</view>
</view>
</z-popup>
<!-- #ifdef APP-PLUS -->
<view class="third_party_login_box" v-if="isIos && system >= 13">
<view class="third_party_title"><text>第三方登录</text></view>
<view class="third_party_content">
<image src="../../static/icon/ic_login_weixin.png" v-if="isWeixin" @click="onWxAppLogin"
mode="aspectFit"></image>
<image src="../../static/icon/ic_login_ios.png" v-if="isIos && system >= 13" @click="onAppleLogin"
mode="aspectFit"></image>
</view>
</view>
<!-- #endif -->
</view>
</view>
</template>
<script>
import md5 from '@/plugins/md5';
var clear;
import {
mapState,
mapMutations
} from 'vuex';
import socket from '@/config/socket';
export default {
data() {
return {
type: 2000,
isSee: false,
code: '',
// phone: '15022449475',
phone: '18047689535',
password: '123456z',
//验证码
codeText: '获取验证码',
//验证码已发
readonly: false,
btnShow: true,
agree: false,
isIos: true,
isWeixin: true,
system: 13,
clearTime: null,
HealthOpen: false,
health_phone: '13333333333',
health_password: '123456',
isSee_H: false,
};
},
//第一次加载
onLoad(e) {
// #ifdef APP-PLUS
this.isIos = (plus.os.name == "iOS");
let systemInfo = uni.getSystemInfoSync();
this.system = parseFloat(systemInfo['system'].replace(/[a-zA-Z]/g, ""));
this.isWeixin = plus.runtime.isApplicationExist({
pname: 'com.tencent.mm',
action: "weixin://"
});
// #endif
},
//页面显示
onShow() {},
//方法
methods: {
...mapMutations(['setUserInfo']),
...mapMutations(['setHealthMes']),
onPageJump(url) {
uni.navigateTo({
url: url
});
},
onInput() {
// this.clearTime && clearTimeout(this.clearTime)
// this.clearTime = setTimeout(() => {
// if (this.type == 2000) {
// if (this.phone && this.code) {
// this.btnShow = true;
// } else {
// this.btnShow = false;
// }
// } else {
// if (this.phone && this.password) {
// this.btnShow = true;
// } else {
// this.btnShow = false;
// }
// }
// }, 500);
},
//验证码按钮文字状态
getCodeState() {
clear && clearInterval(clear);
const _this = this;
this.readonly = true;
this.codeText = '60S';
var s = 60;
clear = setInterval(() => {
s--;
_this.codeText = s + 'S';
if (s <= 0) {
clearInterval(clear);
_this.codeText = '获取验证码';
_this.readonly = false;
}
}, 1000);
},
// 发送验证码
onSetCode() {
if (this.readonly) {
return;
}
if (!this.phone) {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.$base.phoneRegular.test(this.phone)) {
uni.showToast({
title: '手机格式不正确',
icon: 'none'
});
return;
}
if (!this.agree) {
uni.showToast({
title: '请先同意《用户协议》和《隐私协议》',
icon: 'none'
});
return;
}
this.$http
.get('book/user/sms/sendcode', {
phone: this.phone,
type: 2000
})
.then(res => {
uni.showToast({
title: '验证码发送成功',
icon: 'none'
});
this.getCodeState();
});
},
// 手机密码登录
onSubmit() {
if (!this.agree) {
uni.showToast({
title: '请先同意《用户协议》和《隐私协议》',
icon: 'none'
});
return;
}
if (!this.phone) {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.$base.phoneRegular.test(this.phone)) {
uni.showToast({
title: '手机格式不正确',
icon: 'none'
});
return;
}
let httpData = {};
if (this.type == 2000) {
if (!this.code) {
uni.showToast({
title: '请输入验证码',
icon: 'none'
});
return;
}
httpData.code = this.code;
httpData.tel = this.phone;
this.$http
.get('book/user/registerOrLogin', httpData)
.then(res => {
res.userInfo.token = res.token.token;
this.setUserInfo(res.userInfo);
// socket.init();
uni.showToast({
title: '登录成功',
duration: 1000,
});
setTimeout(() => {
uni.switchTab({
url: '/pages/peanut/home'
});
}, 1000);
});
} else {
if (!this.password) {
uni.showToast({
title: '请输入密码',
icon: 'none'
});
return;
}
// httpData.password = md5(this.password);
httpData.password = this.password;
httpData.phone = this.phone;
this.$http
.post('book/user/login', httpData)
.then(res => {
res.userInfo.token = res.token.token;
this.setUserInfo(res.userInfo);
// socket.init();
uni.showToast({
title: '登录成功',
duration: 1000,
});
setTimeout(() => {
uni.switchTab({
url: '/pages/peanut/home'
});
}, 1000);
});
}
},
// 一路健康APP登录进入
onSubmit_Health() {
if (!this.health_phone) {
uni.showToast({
title: '请输入一路健康账号',
icon: 'none'
});
return;
}
if (!this.health_password) {
uni.showToast({
title: '请输入密码',
icon: 'none'
});
return;
}
let healthData = {};
healthData.phone = this.health_phone;
healthData.password = this.health_password
this.$http
.post('book/user/getEverhealthInfo', healthData)
.then(res => {
this.setHealthMes(res.everhealthInfo);
if (res.userInfo) {
res.userInfo.token = res.token.token;
this.setUserInfo(res.userInfo);
uni.showToast({
title: '登录成功',
duration: 1000,
});
setTimeout(() => {
uni.switchTab({
url: '/pages/peanut/home'
});
}, 1000);
} else {
setTimeout(() => {
uni.navigateTo({
url: '/pages/user/healthLog'
});
}, 600);
uni.showToast({
title: '账号验证成功',
duration: 600,
});
}
// if (!IsPhoneHealth) {
// setTimeout(() => {
// uni.navigateTo({
// url: '/pages/user/healthLog'
// });
// }, 600);
// uni.showToast({
// title: '验证成功',
// duration: 600,
// });
// } else {
// uni.showModal({
// title: '提示',
// content: '验证您的一路健康账号成功，请问您要通过该账户登录花生吗？',
// success: function(res) {
// if (res.confirm) {
// this.setUserInfo(res.userInfo);
// // socket.init();
// uni.switchTab({
// url: "/pages/home/home"
// });
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
// }
});
},
// 一路健康APP登录
onHealthLogin() {
if (!this.agree) {
uni.showToast({
title: '请先同意《用户协议》和《隐私协议》',
icon: 'none'
});
return;
}
this.HealthOpen = true
},
// 微信APP登录
onWxAppLogin() {
uni.login({
provider: 'weixin',
success: res => {
uni.getUserInfo({
success: (info) => {
this.userInfo = info.userInfo;
if (res.authResult.openid && res.authResult.unionid) {
this.$http
.post('api/open/v1/login', {
wxAppOpenId: res.authResult.openid,
unionid: res.authResult.unionid,
nickname: this.userInfo.nickName,
headImg: this.userInfo.avatarUrl
})
.then(data => {
this.setUserInfo({
openId: res.authResult.openid,
unionid: res.authResult.unionid,
...data,
});
if (data.thirdLoginSuccess) {
socket.init();
uni.showToast({
title: '登录成功',
duration: 2000
});
setTimeout(() => {
uni.switchTab({
url: "/pages/home/home"
});
}, 2000);
} else {
uni.showModal({
title: '提示',
content: '您还未绑定手机号，请先绑定~',
confirmText: '去绑定',
cancelText: '再逛会',
success: res => {
if (res.confirm) {
uni.redirectTo({
url: '/pages/user/bindPhone'
});
}
}
});
}
});
} else {
uni.showToast({
title: '点击无效，请再次点击',
icon: "none"
});
}
},
fail: () => {
console.log("未授权");
}
})
},
fail(err) {
console.log(err);
}
});
},
// 苹果登录
onAppleLogin() {
uni.login({
provider: 'apple',
success: loginRes => {
uni.getUserInfo({
provider: 'apple',
success: userInfoRes => {
if (userInfoRes.userInfo.identityToken) {
this.$http
.post('api/open/v1/ios_login', {
identityToken: userInfoRes.userInfo.identityToken
})
.then(data => {
this.setUserInfo(data);
if (data.thirdLoginSuccess) {
socket.init();
uni.showToast({
title: '登录成功',
duration: 2000
});
setTimeout(() => {
uni.switchTab({
url: "/pages/home/home"
});
}, 2000);
} else {
uni.showModal({
title: '提示',
content: '您还未绑定手机号，请先绑定~',
confirmText: '去绑定',
cancelText: '再逛会',
success: res => {
if (res.confirm) {
uni.redirectTo({
url: '/pages/user/bindPhone'
});
}
}
});
}
});
}
}
})
},
fail: err => {
uni.showToast({
title: '登录失败',
icon: 'none'
})
}
})
}
},
//页面隐藏
onHide() {},
//页面卸载
onUnload() {},
//页面下来刷新
onPullDownRefresh() {},
//页面上拉触底
onReachBottom() {},
//用户点击分享
onShareAppMessage(e) {
return this.wxShare();
}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.logo_bg {
background-image: url('@/static/icon/login_bg.png');
// background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 25vh;
position: relative;
text {
font-size: 45upx;
line-height: 65rpx;
position: absolute;
bottom: 110rpx;
left: 60rpx;
color: #fff;
letter-spacing: 6rpx;
}
.icon_hua_1 {
position: absolute;
bottom: 60rpx;
left: 245rpx;
width: 150rpx;
height: 150rpx;
opacity: 0.08;
}
.icon_hua_2 {
position: absolute;
bottom: 10rpx;
right: 30rpx;
width: 250rpx;
height: 250rpx;
opacity: 0.15;
}
}
.register_page {
padding: calc(var(--status-bar-height)) 60rpx 50rpx 60rpx;
background-color: #fff;
min-height: 75vh;
.login_method {
// display: flex;
justify-content: space-between;
padding: 0 96rpx;
// padding-bottom: 5rpx;
text-align: center;
.title {
margin: 0 auto;
font-size: 40rpx;
letter-spacing: 3rpx;
color: #666;
&.active {
position: relative;
color: $themeColor;
padding-bottom: 35rpx;
font-weight: bold;
}
&.active::after {
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
content: '';
width: 150rpx;
height: 6rpx;
background-color: $themeColor;
}
}
}
.left_triangle {
&::before {
left: 140rpx;
}
&::after {
left: 140rpx;
}
}
.right_triangle {
&::before {
left: 470rpx;
}
&::after {
left: 470rpx;
}
}
.input_tit {
margin-top: 20rpx;
font-size: 34rpx;
font-weight: bold;
}
.input_box {
display: flex;
align-items: center;
border-radius: 8rpx;
border-bottom: solid 2rpx #efeef4;
margin: 30rpx 0;
image {
width: 36rpx;
height: 24rpx;
}
input {
flex: 1;
font-size: 28rpx;
color: #333;
height: 70rpx;
}
.input_item {
font-size: 28rpx;
border: 0px;
flex: 1;
background-color: #f8f9fb;
height: 70rpx;
width: 100%;
outline: none;
//margin-left: 32rpx;
}
button {
height: 60rpx;
background-color: #f8f9fb;
font-size: 28rpx;
padding: 0 14rpx;
color: $themeColor;
line-height: 60rpx;
margin-left: 20rpx;
//margin-right: 40rpx;
}
.grey {
color: #999999;
}
}
.btn_box {
margin-top: 40rpx;
button {
font-size: 32rpx;
background-color: #e5e5e5;
color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 50rpx;
&.active {
@include theme('btn_bg') color: #fff;
}
}
}
.password_register {
margin-top: 40rpx;
display: flex;
justify-content: space-between;
//text-align: center;
text {
font-size: 28rpx;
color: #333333;
//text-decoration: underline;
}
}
.protocol_box {
margin-top: 40rpx;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: 28rpx;
color: #333333;
.select {
width: 36rpx;
height: 36rpx;
background-image: url("../../static/icon/ic_gender_unselected.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
margin-right: 15rpx;
&.active {
background-image: url("../../static/icon/ic_agreed.png");
}
}
>text {
color: $themeColor;
}
}
}
.station {
height: 230rpx;
}
.third_party_login_box {
position: fixed;
bottom: 60rpx;
width: 100%;
left: 0;
padding: 0 30rpx;
.third_party_title {
display: flex;
align-items: center;
&:before,
&:after {
content: '';
flex: 1;
height: 2rpx;
background-color: #f5f5f5;
}
text {
font-size: 24rpx;
color: #999999;
flex-shrink: 0;
padding: 0 20rpx;
}
}
.third_party_content {
margin-top: 60rpx;
display: flex;
justify-content: center;
align-items: center;
image {
width: 80upx;
height: 80upx;
margin: 0 20rpx;
}
}
}
.popup_box {
width: 600upx;
border-radius: 10rpx;
.popup_title {
display: flex;
justify-content: center;
height: 88upx;
line-height: 88upx;
view {
align-items: center;
font-size: 30upx;
display: flex;
image {
width: 50upx;
height: 50upx;
margin: 0 20rpx 0 0;
}
}
}
.popup_content {
padding: 30rpx 40rpx;
}
.popup_footer {
display: flex;
justify-content: center;
view {
width: 45%;
flex-shrink: 0;
text-align: center;
font-size: 28upx;
color: #999;
line-height: 70upx;
margin: 0 0 30rpx 0;
}
view:last-child {
background-color: $themeColor;
color: #fff;
border-radius: 50rpx;
}
}
}
.qie_huan{
font-size: 26rpx;
margin: 20rpx 0 0 0;
text-align: center;
}
</style>

550
pages/user/persCount.vue Normal file
View File

@@ -0,0 +1,550 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="我的账户"></z-nav-bar>
<view class="ACTable">
<u-tabs :list="tab_list" @click="tab_click" lineColor="#54a966 100% 100%"
:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}"></u-tabs>
<view v-if="tab_muJian==0">
<view class="AC_mes">
<view style="font-size: 50rpx;font-weight: bold;">{{userMes.peanutCoin}}</view>
<view style="color: #888;font-size: 30rpx;margin-top: 10rpx;">疯币</view>
<text class="AC_chong" @click="buPoint()">充值</text>
</view>
<view class="AC_con">
<view class="AC_jilu">充值记录</view>
<view v-for="(item,index) in MoneyRecord" class="AC_List">
<view class="AC_title">
{{item.orderType}}
<view>
<text v-if="item.changeAmount>0">+</text>
<text>{{item.changeAmount}}</text>
疯币
</view>
</view>
<view class="AC_mark">{{item.remark}}</view>
<view class="AC_time">{{item.createTime}}</view>
</view>
</view>
</view>
<view v-if="tab_muJian==1">
<view class="couponList">
<view v-for="(item,index) in couponTabs" @click="couponTabCLi(index)"
:class="couponListTab==index?'couStyle':''">{{item.name}}</view>
</view>
<view>
<view class="card" v-for="item in cardList">
<view>
<view class="content">
<view :class="couponListTab==0?'page-group':'page-group grey'">
<i class="fold-page"></i>
<span class="page">优惠券</span>
</view>
<i class="dot-left"></i>
<i class="dot-right"></i>
<view class="coupon-detail">
<view :class="couponListTab==0?'':'grey'">
<span>￥</span>
<span>{{item.coupons.amount}}</span>
</view>
<view>
<view>{{item.coupons.couponName}}</view>
<view>满{{item.coupons.useLevel}}元可用</view>
<view>
<span v-if="item.coupons.couponProType == 0">使用类型：商品类</span>
<span v-if="item.coupons.couponProType == 1">使用类型：电子书</span>
</view>
</view>
<view>
<view v-if="couponListTab==0" @click="onPageJump('../bookShop/bookShopIndex')">
立即使用</view>
</view>
</view>
</view>
<view class="footer">
<view style="margin: 0 0 8rpx 0;">使用时间：{{item.coupons.takeEffectDate}} - {{item.coupons.expirationDate}}
</view>
<view>{{item.coupons.note}}</view>
<view class="arrow"></view>
<view class="arrow-up"></view>
</view>
<view class="ribbon" v-if="couponListTab==0">未使用</view>
<view class="ribbon grey" v-if="couponListTab==1">已使用</view>
<view class="ribbon grey" v-if="couponListTab==2">已过期</view>
</view>
</view>
<view v-if="cardList.length==0" style="text-align: center;font-size: 30rpx;color: #666;">暂无代金券
</view>
</view>
</view>
<view>
<view v-if="status==0" style="text-align: center;">
<u-loading-icon style="display: inline-block;"></u-loading-icon>
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
</view>
<view v-if="status==1">
<u-divider text="全部加载完成"></u-divider>
</view>
</view>
<view style="padding-bottom: 20rpx;">
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle">
</u-back-top>
</view>
</view>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
data() {
return {
tab_list: [{
name: '疯币',
}, {
name: '优惠券',
}],
couponTabs: [{
name: '未使用'
}, {
name: '已使用'
}, {
name: '已过期'
}],
cardList: [],
couponListTab: 0,
MoneyRecord: [],
userMes: {},
RecordScreen: {
userid: '',
page: 1,
limit: 5,
},
scrollTop: 0,
status: 3,
totalPage: 0,
totalCount: 0,
tab_muJian: 0,
bgiStyle: {
background: '#2ab58833'
},
iconStyle: {
fontSize: '40rpx',
fontWeight: 'bold',
color: '#54a966',
},
};
},
// 返回顶部
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
// 下拉刷新
onReachBottom() {
this.status = 0
if (this.RecordScreen.page < this.totalPage) {
this.RecordScreen.page = this.RecordScreen.page + 1
setTimeout(() => {
this.$http
.post('book/transactiondetails/list?userId=' + this.userInfo.id + '&page=' + this
.RecordScreen.page + '&limit=' + this.RecordScreen.limit)
.then(res => {
this.totalPage = res.page.totalPage
this.totalCount = res.page.totalCount
for (let i in res.page.list) {
this.MoneyRecord.push(res.page.list[i])
}
});
}, 1000)
} else {
this.status = 1
}
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
this.getData();
this.getCourpe();
},
//方法
methods: {
// 获取
getData() {
// 用户详情
if (this.userInfo.id != undefined) {
this.$http
.post('book/user/info/' + this.userInfo.id)
.then(res => {
this.userMes = res.user
});
}
// 充值记录
this.$http
.post('book/transactiondetails/list?userId=' + this.userInfo.id + '&page=' + this.RecordScreen
.page + '&limit=' + this.RecordScreen.limit)
.then(res => {
this.MoneyRecord = res.page.list
this.totalPage = res.page.totalPage
this.totalCount = res.page.totalCount
});
},
// 点击tab
tab_click(e) {
this.tab_muJian = e.index
},
// 优惠券
getCourpe() {
this.$http
.post('/book/couponhistory/appGetUserCenterCoupon?userId=' + this.userInfo.id + '&useStatus=' + this
.couponListTab)
.then(res => {
// this.cardList = res.couponVos
this.cardList = res.couponVos
});
},
// 切换优惠券
couponTabCLi(e) {
this.couponListTab = e
this.getCourpe()
},
// 充值疯币
buPoint() {
uni.navigateTo({
url: '../peanut/reCharge'
});
},
// 跳转
onPageJump(url) {
uni.navigateTo({
url: url
});
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.ACTable {
padding: 20rpx 30rpx;
.AC_mes {
margin-top: 50rpx;
padding: 30rpx 30rpx;
box-shadow: 0 0px 10px 1px #d3d1d133;
background-color: #fff;
border-radius: 15rpx;
margin-bottom: 40rpx;
position: relative;
.AC_chong {
background-color: #54a966;
color: #fff;
border-radius: 80rpx;
padding: 15rpx 50rpx;
font-size: 35rpx;
position: absolute;
top: 50rpx;
right: 50rpx;
}
}
.AC_con {
margin-top: 50rpx;
padding: 30rpx 30rpx;
box-shadow: 0 0px 10px 1px #d3d1d133;
background-color: #fff;
border-radius: 15rpx;
margin-bottom: 40rpx;
font-size: 30rpx;
.AC_jilu {
font-size: 32rpx;
text-align: center;
margin-bottom: 30rpx;
}
.AC_List {
border-bottom: 1px solid #eee;
padding: 40rpx 10rpx;
.AC_title {
font-size: 32rpx;
margin-bottom: 20rpx;
view {
float: right;
font-size: 34rpx;
font-weight: bold;
}
}
.AC_mark {
font-size: 28rpx;
margin-bottom: 15rpx;
color: #888;
}
.AC_time {
color: #bababa;
font-size: 25rpx;
}
}
}
.couponList {
view {
display: inline-block;
padding: 0 0 25rpx 0;
margin: 40rpx 0 40rpx 0;
width: 33%;
text-align: center;
font-size: 30rpx;
}
.couStyle {
border-bottom: 5rpx solid #54a966;
color: #54a966;
font-weight: bold;
}
}
.card {
width: 100%;
overflow: hidden;
margin-bottom: 30rpx;
padding-left: 10rpx;
position: relative;
}
.card>view {
background: #fff;
border-radius: 5rpx;
}
.card .dot-left,
.card .dot-right {
display: block;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #f5f5f5;
position: absolute;
z-index: 999;
}
.card .dot-left {
bottom: -6rpx;
left: -6rpx;
}
.card .dot-right {
bottom: -6rpx;
right: -6rpx;
}
.card .page-group {
position: absolute;
top: 10rpx;
left: -2rpx;
width: 100%;
max-width: 200rpx;
.fold-page {
display: block;
width: 10rpx;
height: 8rpx;
background: #54a966;
transform: skewY(-40deg);
position: absolute;
top: -5rpx;
left: -8rpx;
z-index: 0;
}
.page {
position: absolute;
z-index: 1;
display: block;
padding: 5rpx 20rpx 3rpx 20rpx;
height: 40rpx;
line-height: 40rpx;
background: linear-gradient(137deg, #54a966 0%, #0d5e1e 100%);
border-radius: 0 20rpx 20rpx 0;
color: #fff;
text-align: center;
font-size: 24rpx;
overflow: hidden;
left: -8rpx;
}
}
.card .page-group.grey {
.fold-page {
background: #c6c6c6;
}
.page {
background: linear-gradient(137deg, #c6c6c6 0%, #999595 100%);
}
}
.card .content {
width: 100%;
height: 180rpx;
border-bottom: 1rpx dotted #f5f5f5;
position: relative;
z-index: 2;
}
.card .content .coupon-detail {
display: flex;
padding: 0 15rpx 0 20rpx;
}
.card .content .coupon-detail>view {
height: 130rpx;
display: flex;
align-items: center;
}
.card .content .coupon-detail>view:first-child {
color: #54a966;
padding-top: 100rpx;
width: 30%;
}
.card .content .coupon-detail>view.grey {
color: #c6c6c6;
}
.card .content .coupon-detail>view:first-child>span:first-child {
font-size: 30rpx;
margin: 0 10rpx 0 0;
}
.card .content .coupon-detail>view:first-child>span:last-child {
font-size: 70rpx;
}
.card .content .coupon-detail>view:last-child>view {
color: #54a966;
border: 1rpx solid #54a966;
border-radius: 50rpx;
font-size: 12px;
line-height: 25px;
width: 150rpx;
height: 50rpx;
margin: 100rpx 0 0 5rpx;
text-align: center;
}
.card .coupon-detail>view:nth-child(2) {
flex-direction: column;
padding-top: 60rpx;
width: 40%;
}
.card .coupon-detail>view:nth-child(2)>view {
width: 100%;
}
.card .coupon-detail>view:nth-child(2)>view:first-child {
color: #333;
font-weight: bold;
font-size: 25rpx;
margin: 0 0 10rpx 0;
}
.card .coupon-detail>view:nth-child(2)>view:last-child {
font-size: 12px;
color: #adadad;
margin-top: 5rpx;
}
.card .coupon-detail>view:nth-child(2)>view:last-child>view {
transform: scale(0.8);
margin-left: -14rpx;
}
.card {
.footer {
color: #999;
font-size: 12px;
padding: 30rpx 15rpx 30rpx 30rpx;
}
.ribbon {
width: 160rpx;
height: 40rpx;
background: #54a966;
position: absolute;
right: -40rpx;
top: 25rpx;
transform: rotateZ(45deg);
text-align: center;
color: #fff;
font-size: 20rpx;
line-height: 44rpx;
}
.ribbon.grey {
background: #c6c6c6;
}
}
}
</style>

411
pages/user/persData.vue Normal file
View File

@@ -0,0 +1,411 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="个人资料"></z-nav-bar>
<view class="tabulate">
<view class="per_list">
<text class="biaoti">账号</text>
<text class="neirong">{{userMes.tel}}</text>
</view>
<view class="per_list per_list_arrow" @click="avatarShow = true">
<text class="biaoti" style="margin-top: 40rpx;">头像</text>
<text class="neirong" style="margin-top: 0;">
<image :src="userMes.avatar" class="per_mes_img"></image>
</text>
</view>
<view class="per_list per_list_arrow" @click="nicknameShow = true">
<text class="biaoti">昵称</text>
<text class="neirong">{{userMes.nickname}}</text>
</view>
<view class="per_list per_list_arrow" @click="passwordShow = true">
<text class="biaoti">修改密码</text>
</view>
<view class="per_list per_list_arrow" @click="ageShow = true">
<text class="biaoti">年龄</text>
<text class="neirong">{{userMes.age}}</text>
</view>
<view class="per_list per_list_arrow" @click="sexShow = true">
<text class="biaoti">性别</text>
<text class="neirong" v-if="userMes.sex==1">男</text>
<text class="neirong" v-if="userMes.sex==0">女</text>
</view>
</view>
<!-- 头像 -->
<u-popup :show="avatarShow" :round="10" @close="avatarShow=false">
<view class="tanchu">
<view class="dp_title">请更换头像</view>
<u-upload :fileList="fileAvatar" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1"
width="150" height="150" :previewFullImage="true">
</u-upload>
<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="choseAvatar()"
style="margin-top: 50rpx;"></u-button>
<view @click="avatarShow=false" class="dp_canBtn">取消</view>
</view>
</u-popup>
<!-- 昵称 -->
<u-popup :show="nicknameShow" :round="10" @close="nicknameShow=false">
<view class="tanchu">
<view class="dp_title">请输入昵称</view>
<u--input v-model="userMes.nickname" placeholder="请输入昵称" border="surround" clearable></u--input>
<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="choseNickname()"
style="margin-top: 50rpx;"></u-button>
<view @click="nicknameShow=false" class="dp_canBtn">取消</view>
</view>
</u-popup>
<!-- 年龄 -->
<u-popup :show="ageShow" :round="10" @close="ageShow=false">
<view class="tanchu">
<view class="dp_title">请输入年龄</view>
<u--input v-model="userMes.age" type="number" placeholder="请输入年龄" border="surround" clearable>
</u--input>
<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="choseAge()"
style="margin-top: 50rpx;"></u-button>
<view @click="ageShow=false" class="dp_canBtn">
取消</view>
</view>
</u-popup>
<!-- 性别 -->
<u-popup :show="sexShow" :round="10" @close="sexShow=false">
<view class="tanchu">
<view class="dp_title">请选择性别</view>
<u-radio-group v-model="userMes.sex">
<view style="width: 100%;">
<view v-for="(item, index) in sexList" @click="choseSex(item.id)" class="dp_sex">
{{item.title}}
<u-radio :key="index" activeColor="#54a966" :name='item.id'
style="float: right;margin-top: 5rpx;" @change="choseSex(item.id)"></u-radio>
</view>
</view>
</u-radio-group>
<view @click="sexShow=false" class="dp_canBtn">取消</view>
</view>
</u-popup>
<!-- 密码 -->
<u-popup :show="passwordShow" :round="10" @close="passwordShow=false">
<view class="tanchu">
<view class="dp_title">请修改密码</view>
<u--input v-model="userMes.password" placeholder="请输入新密码" :password="true" border="surround" clearable>
</u--input>
<u--input v-model="userMes.Repassword" placeholder="请再确认密码" :password="true" border="surround" clearable
style="margin-top: 20rpx;"></u--input>
<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="chosePassword()"
style="margin-top: 50rpx;"></u-button>
<view @click="passwordShow=false" class="dp_canBtn">取消</view>
</view>
</u-popup>
<!-- <view class="btn_box">
<button @click="chosePassword" class="active">登 录</button>
</view> -->
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
data() {
return {
userMes: {
id: '',
age: '',
sex: '',
nickname: '',
tel: '',
password: '',
Repassword: ''
},
avatarShow: false,
nicknameShow: false,
ageShow: false,
sexShow: false,
passwordShow: false,
fileAvatar: [],
sexList: [{
title: '男',
id: 1,
},
{
title: '女',
id: 0,
}
],
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
this.getData();
},
//方法
methods: {
// 获取
getData() {
let that = this
// 获取个人信息
if (this.userInfo.id != undefined) {
this.$http
.post('book/user/info/' + that.userInfo.id)
.then(res => {
that.userMes.id = res.user.id
that.userMes.age = res.user.age
that.userMes.sex = res.user.sex
that.userMes.nickname = res.user.nickname
that.userMes.tel = res.user.tel
that.userMes.avatar = res.user.avatar
});
}
},
// 头像
choseAvatar(e) {
let that = this
if (that.fileAvatar.length == 0) {
uni.showToast({
title: "请选择图片",
icon: 'none'
});
return
}
that.userMes.avatar = that.fileAvatar[0].url
that.choseData()
that.avatarShow = false
that.fileAvatar.splice(0, 1)
},
// 年龄
choseAge(e) {
let that = this
if(that.userMes.age<=0){
uni.showToast({
title: "年龄不能小于0",
icon: 'none'
});
return
}
that.choseData()
that.ageShow = false
},
// 昵称
choseNickname(e) {
let that = this
that.choseData()
that.nicknameShow = false
},
// 性别
choseSex(e) {
let that = this
that.userMes.sex = e
that.choseData()
that.sexShow = false
},
// 修改密码
chosePassword() {
let that = this
if (that.userMes.Repassword == '' || that.userMes.password == '') {
uni.showToast({
icon: "none",
title: "请输入密码！"
});
return
}
if (that.userMes.Repassword != that.userMes.password) {
uni.showToast({
icon: "none",
title: "两次密码输入不一致！"
});
return
}
that.choseData()
that.passwordShow = false
},
// 修改个人资料
choseData() {
let that = this
$http.request({
url: "book/user/update",
method: "POST",
data: that.userMes,
header: {
'Content-Type': 'application/json'
},
}).then(function(res) {
if (res.code == 0) {
uni.showToast({
title: "修改成功"
});
}
}).catch(function(error) {
console.log(error);
});
},
// 头像上传
afterRead(e) {
let that = this
uni.uploadFile({
url: this.$baseUrl + 'oss/fileoss',
filePath: e.file[0].url,
name: 'file',
formData: {},
success: (res) => {
that.fileAvatar.push({
url: JSON.parse(res.data).url
})
}
});
},
// 删除图片
deletePic() {
let that = this
that.fileAvatar.splice(0, 1)
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.btn_box {
margin-top: 40rpx;
padding: 10px;
button {
font-size: 32rpx;
background-color: #e5e5e5;
color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 50rpx;
&.active {
@include theme('btn_bg') color: #fff;
}
}
}
.tabulate {
.per_list {
font-size: 30rpx;
background-color: #fff;
padding: 0;
align-items: center;
position: relative;
border-top: 1px solid #e5e5e5;
width: 100%;
overflow: auto;
text.biaoti {
color: #333;
display: inline-block;
margin: 25rpx 0 25rpx 40rpx;
}
text.neirong {
color: #888;
font-weight: normal;
float: right;
margin: 25rpx 80rpx 0 0;
display: block;
}
}
.per_list_arrow {
font-size: 30rpx;
background-color: #fff;
padding: 0;
align-items: center;
position: relative;
border-top: 1px solid #e5e5e5;
width: 100%;
overflow: auto;
&:active {
background-color: #f5f5f5;
}
&::after {
content: '';
position: absolute;
right: 20upx;
top: 50%;
transform: translateY(-50%);
width: 40upx;
height: 40upx;
background-image: url('../../static/icon/icon_right.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.per_mes_img {
width: 100rpx;
height: 100rpx;
background-color: #fff;
border-radius: 120rpx;
margin: 10rpx 0;
}
}
}
.tanchu {
padding: 60rpx 50rpx 80rpx 50rpx;
.dp_title {
font-size: 32rpx;
margin-bottom: 50rpx;
color: #555;
text-align: center;
font-weight: bold;
}
.dp_sex {
font-size: 30rpx;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid #ededed;
image {
width: 40rpx;
height: 40rpx;
display: inline-block;
margin-right: 20rpx;
vertical-align: bottom;
}
}
.dp_canBtn {
text-align: center;
font-size: 28rpx;
margin-top: 25rpx;
color: #888;
}
}
.submit{
}
</style>

73
pages/user/protocol.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<view class="protocol_page">
<z-nav-bar title="协议"></z-nav-bar>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="title">{{title}}</view>
<jyf-parser ref="article"></jyf-parser>
</view>
</template>
<script>
export default {
data() {
return {
type:1000,
title:"用户协议"
};
},
//第一次加载
onLoad(e) {
if(e.type){
this.type = parseInt(e.type);
let title;
switch (this.type) {
case 1000:
title = "登录注册用户协议";
break;
}
this.title = title;
}
this.pageData();
},
//页面显示
onShow() {},
//方法
methods: {
pageData() {
this.$http
.get('api/common/v1/protocol', {
type: this.type
})
.then(res => {
this.$refs.article.setContent(res);
});
}
},
//页面隐藏
onHide() {},
//页面卸载
onUnload() {},
//页面下来刷新
onPullDownRefresh() {},
//页面上拉触底
onReachBottom() {},
//用户点击分享
onShareAppMessage(e) {
return this.wxShare();
}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.protocol_page {
background-color: #fff;
padding: 30upx;
font-size: 30upx;
line-height: 180%;
.title {
font-size: 50upx;
padding-bottom: 30upx;
}
}
</style>

300
pages/user/register.vue Normal file
View File

@@ -0,0 +1,300 @@
<template>
<view class="page">
<z-nav-bar></z-nav-bar>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="title">注册</view>
<view class="input_box">
<text class="input_tit">手机号</text>
<input type="text" v-model="phone" placeholder="请输入手机号" />
</view>
<view class="input_box">
<text class="input_tit">验证码</text>
<input type="number" v-model="code" placeholder="请输入验证码" />
<button @click="getCode">{{codeText}}</button>
</view>
<view class="input_box">
<text class="input_tit">密码</text>
<input password v-model="password" placeholder="请输入密码" />
</view>
<view class="input_box">
<text class="input_tit">确认密码</text>
<input password v-model="confirmPassword" placeholder="请确认密码" />
</view>
<view class="input_box">
<text class="input_tit">推荐码</text>
<input type="text" v-model="recommendCode" placeholder="推荐码（非必填）" @confirm="onSubmit" />
</view>
<view class="protocol_box">
<view class="select" :class="{active: agree}" @click="agree = !agree"></view>
我已同意
<text @click="onPageJump('/pages/user/protocol')">《用户协议》</text>
和
<text @click="onPageJump('/pages/user/protocol')">《隐私协议》</text>
</view>
<view class="btn_box"><button @click="onSubmit">注 册</button></view>
</view>
</template>
<script>
import md5 from '@/plugins/md5';
var clear;
export default {
data() {
return {
//手机号
phone: '',
// 密码
password: '',
//验证码
code: '',
//确认密码
confirmPassword: '',
// 推荐码
recommendCode: "",
//验证码
codeText: '获取验证码',
//验证码已发
readonly: false,
agree: false,
};
},
//第一次加载
onLoad(e) {},
//页面显示
onShow() {},
//方法
methods: {
onJumpPage(url) {
uni.navigateTo({
url: url
});
},
//获取验证码
getCode() {
if (this.readonly) {
uni.showToast({
title: '验证码已发送',
icon: 'none'
});
return;
}
if (!this.phone) {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.$base.phoneRegular.test(this.phone)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
});
return;
}
this.$http
// .post('api/common/v1/send_sms', {
.post('book/user/sms/sendcode', {
phone: this.phone,
type: 1000
})
.then(res => {
this.getCodeState();
});
},
//验证码按钮文字状态
getCodeState() {
const _this = this;
this.readonly = true;
this.codeText = '60S后重新获取';
var s = 60;
clear = setInterval(() => {
s--;
_this.codeText = s + 'S后重新获取';
if (s <= 0) {
clearInterval(clear);
_this.codeText = '获取验证码';
_this.readonly = false;
}
}, 1000);
},
onSubmit() {
if (!this.agree) {
uni.showToast({
title: '请先同意《用户协议》和《隐私协议》',
icon: 'none'
});
return;
}
if (!this.phone) {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.$base.phoneRegular.test(this.phone)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
});
return;
}
if (!this.code) {
uni.showToast({
title: '请输入验证码',
icon: 'none'
});
return;
}
if (!this.password) {
uni.showToast({
title: '请输入密码',
icon: 'none'
});
return;
}
if (!this.confirmPassword) {
uni.showToast({
title: '请输入确认密码',
icon: 'none'
});
return;
}
if (this.confirmPassword != this.password) {
uni.showToast({
title: '两次密码不一致',
icon: 'none'
});
return;
}
if (!this.$base.passwordRegular.test(this.password)) {
uni.showToast({
title: '请输入不少于6位且包含数字和字母的密码',
icon: 'none'
});
return;
}
let httpData = {
tel: this.phone,
code: this.code,
// password: md5(this.password),1
password: this.password,
};
if (this.recommendCode) {
httpData.recommendCode = this.recommendCode;
}
this.$http
.post('book/user/register', httpData)
.then(res => {
uni.showModal({
title: "提示",
content: "注册成功！",
showCancel: false,
success: (res) => {
uni.navigateBack();
}
});
});
}
},
//页面隐藏
onHide() {},
//页面卸载
onUnload() {},
//页面下来刷新
onPullDownRefresh() {},
//页面上拉触底
onReachBottom() {},
//用户点击分享
onShareAppMessage(e) {
return this.wxShare();
}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.page {
background-color: #FFF;
padding: 0 65rpx;
min-height: 100vh;
.title {
padding: 60rpx 0 40rpx 0;
font-size: 60rpx;
color: #333333;
}
.input_box {
display: flex;
justify-content: space-between;
height: 100rpx;
padding-top: 30rpx;
border-bottom: 1rpx solid #eeeeee;
align-items: center;
text{
font-size: 30rpx;
width: 180rpx;
}
input {
flex: 1;
height: 70rpx;
line-height: 80rpx;
font-size: 30rpx;
}
button {
height: 78rpx;
line-height: 78rpx;
font-size: 30rpx;
color: $themeColor;
&:active {
background-color: transparent;
}
}
}
.btn_box {
margin-top: 40rpx;
button {
font-size: 32rpx;
@include theme('btn_bg') color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 50rpx;
}
}
.protocol_box {
margin-top: 40rpx;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: 28rpx;
color: #333333;
.select {
width: 36rpx;
height: 36rpx;
background-image: url("../../static/icon/ic_gender_unselected.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
margin-right: 15rpx;
&.active {
background-image: url("../../static/icon/ic_agreed.png");
}
}
>text {
color: $themeColor;
}
}
}
</style>