chore(分包): 拆分pages_tooll子包
This commit is contained in:
465
pages_tool/member/basic/account.vue
Normal file
465
pages_tool/member/basic/account.vue
Normal file
@@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<view :style="themeColor">
|
||||
<mescroll-uni ref="mescroll" @getData="getData" v-if="storeToken">
|
||||
<block slot="list">
|
||||
<view class="nc-info-list-content">
|
||||
<view class="list-item balance-item" @click="setBalanceDefault()"
|
||||
v-if="type == 'fenxiao' && payList && payList.balance">
|
||||
<view class="item-top">
|
||||
<view class="item-left">
|
||||
<view class="title-text">提现到余额</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="dataList.length > 0">
|
||||
<view class="list-item" v-for="(item, index) in dataList" :key="index">
|
||||
<view class="item-top">
|
||||
<view class="item-left">
|
||||
<view class="title-text">{{ item.withdraw_type_name }}</view>
|
||||
<view class="info-content">
|
||||
<text class="top-title">{{ item.realname }}</text>
|
||||
<text class="top-num">{{ item.mobile }}</text>
|
||||
</view>
|
||||
<view class="content-bottom">
|
||||
<block v-if="item.withdraw_type == 'alipay'">
|
||||
提现账号：{{ item.bank_account }}
|
||||
</block>
|
||||
<block v-if="item.withdraw_type == 'bank'">
|
||||
银行名称 ：{{ item.branch_bank_name }}
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-btn" @click.stop="editAccount('edit', item.id)">修改</view>
|
||||
</view>
|
||||
|
||||
<view class="item-bottom">
|
||||
<view class="account-default" @click="setDefault(item.id, item.is_default)">
|
||||
<text class="default">设为默认账户</text>
|
||||
<switch v-if="item.is_default == 1" checked disabled style="transform:scale(0.7)"
|
||||
:color="themeStyle.main_color" />
|
||||
<switch v-else style="transform:scale(0.7)" :color="themeStyle.main_color" />
|
||||
</view>
|
||||
<view class="account-btn">
|
||||
<text class="delete" v-if="item.is_default != 1" @click="deleteAccount(item.id)">
|
||||
<text class="iconfont iconicon7"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view
|
||||
v-if="dataList.length <= 0 && (type != 'fenxiao' || (type == 'fenxiao' && payList && !payList.balance))"
|
||||
class="empty-box">
|
||||
<image :src="$util.img('public/uniapp/member/account/empty.png')" mode="widthFix"></image>
|
||||
<view class="tips">暂无账户信息，请添加</view>
|
||||
<button type="primary" class="add-account" @click="editAccount('add')">{{ $lang('newAddAccount')
|
||||
}}</button>
|
||||
</view>
|
||||
</block>
|
||||
</mescroll-uni>
|
||||
<view class="btn-add" v-if="dataList.length > 0 || (type == 'fenxiao' && payList && payList.balance)">
|
||||
<button class="add-account" type="primary" @click="editAccount('add')">{{ $lang('newAddAccount') }}</button>
|
||||
</view>
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
toTop: () => import('@/components/toTop/toTop.vue'),
|
||||
nsLogin: () => import('@/components/ns-login/ns-login.vue'),
|
||||
MescrollUni: () => import('@/components/mescroll/my-list-mescroll.vue'),
|
||||
loadingCover: () => import('@/components/loading-cover/loading-cover.vue'),
|
||||
nsEmpty: () => import('@/components/ns-empty/ns-empty.vue'),
|
||||
// #ifdef MP-WEIXIN
|
||||
privacyPopup: () => import('@/components/wx-privacy-popup/privacy-popup.vue'),
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [], //账号列表
|
||||
back: '', // 返回页
|
||||
redirect: 'redirectTo', // 跳转方式
|
||||
type: 'member',
|
||||
payList: null
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.back) this.back = option.back;
|
||||
if (option.type) this.type = option.type;
|
||||
if (option.redirect) this.redirect = option.redirect;
|
||||
},
|
||||
onShow() {
|
||||
if (this.storeToken) {
|
||||
this.getTransferType();
|
||||
if (this.$refs.mescroll) this.$refs.mescroll.refresh();
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.login.open('/pages_tool/member/account');
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 编辑提现账户信息
|
||||
editAccount(type, id) {
|
||||
let data = {};
|
||||
data.type = this.type;
|
||||
if (type == 'edit') data.id = id;
|
||||
if (this.back) data.back = this.back;
|
||||
this.$util.redirectTo('/pages_tool/member/account_edit', data);
|
||||
},
|
||||
deleteAccount(id) {
|
||||
uni.showModal({
|
||||
title: '操作提示',
|
||||
content: '确定要删除该账户吗？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/memberbankaccount/delete',
|
||||
data: {
|
||||
id: id
|
||||
},
|
||||
success: result => {
|
||||
if (result.code == 0) {
|
||||
this.$util.showToast({
|
||||
title: '删除成功'
|
||||
});
|
||||
this.$refs.mescroll.refresh();
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: '删除失败'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
setDefault(id, is_default) {
|
||||
if (is_default == 1) return;
|
||||
this.$api.sendRequest({
|
||||
url: '/api/memberbankaccount/setdefault',
|
||||
data: {
|
||||
id
|
||||
},
|
||||
success: res => {
|
||||
if (res.data >= 0) {
|
||||
if (this.back != '') {
|
||||
this.$util.redirectTo(this.back, {}, this.redirect);
|
||||
} else {
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.show();
|
||||
this.dataList = [];
|
||||
this.$refs.mescroll.refresh();
|
||||
}
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
setBalanceDefault() {
|
||||
this.$util.redirectTo(this.back, {
|
||||
'is_balance': 1
|
||||
}, this.redirect);
|
||||
},
|
||||
getData(mescroll) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/memberbankaccount/page',
|
||||
data: {
|
||||
page_size: mescroll.size,
|
||||
page: mescroll.num
|
||||
},
|
||||
success: res => {
|
||||
let newArr = [];
|
||||
let msg = res.message;
|
||||
if (res.code == 0 && res.data) {
|
||||
newArr = res.data.list;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
});
|
||||
}
|
||||
mescroll.endSuccess(newArr.length);
|
||||
//设置列表数据
|
||||
if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
|
||||
this.dataList = this.dataList.concat(newArr); //追加新数据
|
||||
|
||||
let withdrawType = {
|
||||
bank: '银行',
|
||||
alipay: '支付宝',
|
||||
wechatpay: '微信'
|
||||
};
|
||||
|
||||
this.dataList.forEach(item => {
|
||||
item.withdraw_type_name = withdrawType[item.withdraw_type] ? withdrawType[
|
||||
item.withdraw_type] : '';
|
||||
});
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
},
|
||||
fail: res => {
|
||||
mescroll.endErr();
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
getTransferType() {
|
||||
let url = this.type == "member" ? "/api/memberwithdraw/transferType" :
|
||||
"/fenxiao/api/withdraw/transferType";
|
||||
this.$api.sendRequest({
|
||||
url: url,
|
||||
success: res => {
|
||||
if (res.code >= 0 && res.data) {
|
||||
this.payList = res.data;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
storeToken: function (nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.$refs.mescroll.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.empty-box {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.get-account,
|
||||
.add-account {
|
||||
width: 50%;
|
||||
height: 78rpx;
|
||||
line-height: 78rpx;
|
||||
border-radius: 78rpx;
|
||||
margin-top: 50rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.get-account {
|
||||
width: 50%;
|
||||
background: #fff;
|
||||
color: $base-color;
|
||||
border: 2rpx solid $base-color;
|
||||
margin-top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.mescroll-downwarp+.empty-box {
|
||||
height: calc(100vh - 260rpx);
|
||||
}
|
||||
|
||||
|
||||
.btn-add {
|
||||
margin-top: 60rpx;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
z-index: 10;
|
||||
|
||||
.add-account {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 80rpx;
|
||||
margin: 30rpx 0 30rpx;
|
||||
font-size: $font-size-toolbar;
|
||||
|
||||
text {
|
||||
margin-right: 10rpx;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zw {
|
||||
margin-top: 250rpx;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 0 0;
|
||||
padding: 24rpx $margin-both;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
margin-bottom: 18rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&.balance-item {
|
||||
.item-top {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.item-mr {
|
||||
font-size: $font-size-activity-tag;
|
||||
color: #fff;
|
||||
height: 150rpx;
|
||||
width: 150rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: -90rpx;
|
||||
top: -90rpx;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.item-top {
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
padding-bottom: 26rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 100rpx);
|
||||
|
||||
.title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
|
||||
.top-title {
|
||||
font-size: 26rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.top-num {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content-bottom {
|
||||
font-size: 26rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
width: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 24rpx;
|
||||
|
||||
.account-default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 1;
|
||||
color: #666666;
|
||||
|
||||
.default {}
|
||||
|
||||
.iconfont {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.account-btn {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.edit {
|
||||
text {
|
||||
vertical-align: center;
|
||||
margin-right: 10rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.delete {
|
||||
background: #F1F1F1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
padding: 10rpx;
|
||||
text-align: center;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/deep/ .mescroll-upwarp {
|
||||
padding-bottom: 150rpx;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.item-bottom>>>.uni-switch-wrapper .uni-switch-input {
|
||||
height: 48rpx !important;
|
||||
width: 88rpx !important;
|
||||
}
|
||||
|
||||
.item-bottom>>>.uni-switch-wrapper .uni-switch-input:after {
|
||||
height: 44rpx !important;
|
||||
width: 44rpx !important;
|
||||
}
|
||||
|
||||
.item-bottom>>>.uni-switch-wrapper .uni-switch-input:before {
|
||||
background-color: #EDEDED !important;
|
||||
height: 44rpx !important;
|
||||
width: 90rpx !important;
|
||||
}
|
||||
</style>
|
||||
329
pages_tool/member/basic/account_edit.vue
Normal file
329
pages_tool/member/basic/account_edit.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<view class="account-list-content" :style="themeColor">
|
||||
<view class="edit-item">
|
||||
<text class="tit">{{ $lang('name') }}</text>
|
||||
<input class="desc uni-input" type="text" maxlength="30" placeholder="请输入真实姓名" name="name"
|
||||
v-model="formData.realname" />
|
||||
</view>
|
||||
<view class="edit-item">
|
||||
<text class="tit">{{ $lang('mobilePhone') }}</text>
|
||||
<input class="desc uni-input" type="number" maxlength="11" placeholder="请输入手机号" v-model="formData.mobile" />
|
||||
</view>
|
||||
<view class="edit-item">
|
||||
<text class="tit">{{ $lang('accountType') }}</text>
|
||||
<picker @change="bindPickerChange" :value="index" :range="payList" class="picker">
|
||||
<text class="desc uni-input">{{ payList[index] }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="edit-item" v-if="formData.withdraw_type == 'bank'">
|
||||
<text class="tit">银行名称</text>
|
||||
<input class="desc uni-input" type="text" maxlength="50" placeholder="请输入银行名称"
|
||||
v-model.trim="formData.branch_bank_name" />
|
||||
</view>
|
||||
<view class="edit-item" v-if="formData.withdraw_type != 'wechatpay'">
|
||||
<text class="tit">提现账号</text>
|
||||
<input class="desc uni-input" type="text" maxlength="30" placeholder="请输入提现账号"
|
||||
v-model.trim="formData.bank_account" />
|
||||
</view>
|
||||
<view class="btn">
|
||||
<button type="primary" class="add" @click="saveAccount">{{ $lang('save') }}</button>
|
||||
</view>
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import validate from 'common/js/validate.js';
|
||||
export default {
|
||||
components: {
|
||||
loadingCover: () => import('@/components/loading-cover/loading-cover.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
realname: '',
|
||||
mobile: '',
|
||||
withdraw_type: '',
|
||||
bank_account: '',
|
||||
branch_bank_name: ''
|
||||
},
|
||||
payList: [],
|
||||
index: 0,
|
||||
flag: false,
|
||||
transferType: [],
|
||||
accountInfo: null,
|
||||
back: '',
|
||||
type: 'member'
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.id) this.formData.id = option.id;
|
||||
if (option.back) this.back = option.back;
|
||||
if (option.type) this.type = option.type; // 区分是从会员提现还是从分销提现
|
||||
},
|
||||
onShow() {
|
||||
if (this.formData.id) {
|
||||
this.getAccountDetail(this.formData.id);
|
||||
} else {
|
||||
this.getTransferType();
|
||||
}
|
||||
if (this.formData.id) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '编辑账户'
|
||||
});
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '新增账户'
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getAccountDetail(id) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/memberbankaccount/info',
|
||||
data: {
|
||||
id: this.formData.id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.accountInfo = res.data;
|
||||
this.formData.realname = res.data.realname;
|
||||
this.formData.mobile = res.data.mobile;
|
||||
this.formData.bank_account = res.data.bank_account;
|
||||
this.formData.branch_bank_name = res.data.branch_bank_name;
|
||||
this.formData.withdraw_type = res.data.withdraw_type;
|
||||
}
|
||||
this.getTransferType();
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
},
|
||||
fail: res => {
|
||||
this.getTransferType();
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取转账方式
|
||||
*/
|
||||
getTransferType() {
|
||||
this.payList = [];
|
||||
let url = this.type == "member" ? "/api/memberwithdraw/transferType" : "/fenxiao/api/withdraw/transferType";
|
||||
this.$api.sendRequest({
|
||||
url: url,
|
||||
success: res => {
|
||||
if (res.code >= 0 && res.data) {
|
||||
delete res.data.balance;
|
||||
this.transferType = res.data;
|
||||
for (let v in this.transferType) {
|
||||
this.payList.push(this.transferType[v]);
|
||||
}
|
||||
|
||||
if (this.payList.length == 1 && this.payList[0] == '银行卡') {
|
||||
this.formData.withdraw_type = 'bank';
|
||||
}
|
||||
|
||||
this.payList.reverse();
|
||||
if (!this.formData.id && this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
|
||||
if (this.accountInfo && this.$util.inArray(this.accountInfo.withdraw_type_name, this.payList) == -1) {
|
||||
this.payList.push(this.accountInfo.withdraw_type_name);
|
||||
}
|
||||
|
||||
if (this.payList.length && this.accountInfo) {
|
||||
this.index = this.$util.inArray(this.accountInfo.withdraw_type_name, this.payList);
|
||||
}
|
||||
|
||||
if (!this.formData.withdraw_type && this.payList.length) {
|
||||
switch (this.payList[0]) {
|
||||
case '银行卡':
|
||||
this.formData.withdraw_type = 'bank';
|
||||
break;
|
||||
case '支付宝':
|
||||
this.formData.withdraw_type = 'alipay';
|
||||
break;
|
||||
case '微信零钱':
|
||||
this.formData.withdraw_type = 'wechatpay';
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
bindPickerChange(e) {
|
||||
this.index = e.detail.value;
|
||||
let value = '';
|
||||
for (let i in this.transferType) {
|
||||
if (this.transferType[i] == this.payList[this.index]) {
|
||||
value = i;
|
||||
}
|
||||
}
|
||||
if (value != '') this.formData.withdraw_type = value;
|
||||
},
|
||||
vertify() {
|
||||
var rule = [
|
||||
{
|
||||
name: 'realname',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入姓名'
|
||||
},
|
||||
{
|
||||
name: 'mobile',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入手机号'
|
||||
},
|
||||
{
|
||||
name: 'mobile',
|
||||
checkType: 'phoneno',
|
||||
errorMsg: '请输入正确的手机号'
|
||||
},
|
||||
{
|
||||
name: 'withdraw_type',
|
||||
checkType: 'required',
|
||||
errorMsg: '请选择账户类型'
|
||||
}
|
||||
];
|
||||
if (this.formData.withdraw_type == 'bank') {
|
||||
rule.push({
|
||||
name: 'branch_bank_name',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入银行名称'
|
||||
});
|
||||
}
|
||||
if (this.formData.withdraw_type != 'wechatpay') {
|
||||
rule.push({
|
||||
name: 'bank_account',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入提现账号'
|
||||
});
|
||||
}
|
||||
var checkRes = validate.check(this.formData, rule);
|
||||
if (checkRes) {
|
||||
return true;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: validate.error
|
||||
});
|
||||
this.flag = false;
|
||||
return false;
|
||||
}
|
||||
},
|
||||
saveAccount() {
|
||||
if (this.flag) return;
|
||||
this.flag = true;
|
||||
if (this.vertify()) {
|
||||
let url = !this.formData.id ? 'add' : 'edit';
|
||||
let data = {};
|
||||
this.$api.sendRequest({
|
||||
url: '/api/memberbankaccount/' + url,
|
||||
data: {
|
||||
id: this.formData.id,
|
||||
realname: this.formData.realname,
|
||||
mobile: this.formData.mobile,
|
||||
withdraw_type: this.formData.withdraw_type,
|
||||
bank_account: this.formData.bank_account,
|
||||
branch_bank_name: this.formData.branch_bank_name
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
if (!this.formData.id) {
|
||||
this.$util.showToast({
|
||||
title: '添加成功'
|
||||
});
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: '修改成功'
|
||||
});
|
||||
}
|
||||
if (this.back != '') {
|
||||
this.$util.redirectTo(this.back, {}, this.redirect);
|
||||
} else {
|
||||
this.$util.redirectTo('/pages_tool/member/account');
|
||||
}
|
||||
} else {
|
||||
this.flag = false;
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
this.flag = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.account-list-content {
|
||||
margin: $margin-updown $margin-both;
|
||||
padding: 0 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: $border-radius;
|
||||
|
||||
.edit-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
background-color: #fff;
|
||||
|
||||
.tit {
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: $uni-spacing-row-base;
|
||||
}
|
||||
|
||||
.picker {
|
||||
flex: 1;
|
||||
|
||||
text {
|
||||
&:last-child {
|
||||
line-height: 50rpx;
|
||||
float: right;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-list-content>.edit-item+.edit-item {
|
||||
border-top: 2rpx solid $color-line;
|
||||
}
|
||||
|
||||
.add {
|
||||
margin-top: 60rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx !important;
|
||||
border-radius: 80rpx;
|
||||
font-weight: 500;
|
||||
width: calc(100% - 60rpx);
|
||||
margin-left: 30rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
bottom: 30rpx;
|
||||
height: auto;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/*兼容 IOS<11.2*/
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/*兼容 IOS>11.2*/
|
||||
}
|
||||
</style>
|
||||
233
pages_tool/member/basic/index.vue
Normal file
233
pages_tool/member/basic/index.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<view :style="themeColor">
|
||||
<view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }"
|
||||
class="page-img">
|
||||
<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch"
|
||||
:style="{ backgroundImage: bgImg }">
|
||||
<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="true" />
|
||||
</view>
|
||||
|
||||
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl"
|
||||
:scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
|
||||
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
|
||||
:haveTopCategory="true" />
|
||||
<ns-copyright v-show="isShowCopyRight" />
|
||||
</diy-index-page>
|
||||
|
||||
<view v-else class="bg-index"
|
||||
:style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
|
||||
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" />
|
||||
<ns-copyright v-show="isShowCopyRight" />
|
||||
|
||||
<view class="foot">
|
||||
<view class="item" @click="tourl('/pages_tool/agreement/contenr?type=0')">{{
|
||||
$lang('privacyPolicy') }}</view>
|
||||
<view class="item" @click="tourl('/pages_tool/agreement/contenr?type=1')">{{
|
||||
$lang('registrationAgreement') }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录和账号注销按钮 -->
|
||||
<view class="action-buttons" v-if="storeToken">
|
||||
<view class="action-btn cancel-btn" @click="cancellation">{{ $lang('cancellation') }}</view>
|
||||
<view class="action-btn logout-btn" @click="logout">{{ $lang('logout') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template
|
||||
v-if="diyData.global && diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
|
||||
<view class="image-wrap">
|
||||
<image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle"
|
||||
@click="uniPopupWindowFn()" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="iconfont icon-round-close" @click="closePopupWindow"></text>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 底部tabBar -->
|
||||
<view id="tab-bar" :class="{ hide: bottomNavHidden }" v-if="openBottomNav">
|
||||
<diy-bottom-nav @callback="callback" />
|
||||
</view>
|
||||
|
||||
<!-- 收藏 -->
|
||||
<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
|
||||
<view v-if="showTip" class="collectPopupWindow"
|
||||
:style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
|
||||
<image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit" />
|
||||
<text @click="closeCollectPopupWindow">我知道了</text>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<ns-birthday-gift ref="birthdayGift"></ns-birthday-gift>
|
||||
<ns-new-gift ref="nsNewGift"></ns-new-gift>
|
||||
|
||||
|
||||
<hover-nav></hover-nav>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- 小程序隐私协议 -->
|
||||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import diyJs from '@/common/js/diy.js';
|
||||
import indexJs from '../public/js/index.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
diyGroup: () => import('@/components-diy/diy-group.vue'),
|
||||
diyBottomNav: () => import('@/components-diy/diy-bottom-nav.vue'),
|
||||
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
nsNavbar: () => import('@/components/ns-navbar/ns-navbar.vue'),
|
||||
nsCopyright: () => import('@/components/ns-copyright/ns-copyright.vue'),
|
||||
nsBirthdayGift: () => import('@/components/ns-birthday-gift/ns-birthday-gift.vue'),
|
||||
nsNewGift: () => import('@/components/ns-new-gift/ns-new-gift.vue'),
|
||||
hoverNav: () => import('@/components/hover-nav/hover-nav.vue'),
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
privacyPopup: () => import('@/components/wx-privacy-popup/privacy-popup.vue'),
|
||||
// #endif
|
||||
},
|
||||
mixins: [diyJs, indexJs],
|
||||
methods: {
|
||||
|
||||
tourl(url) {
|
||||
this.$util.redirectTo(url);
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
logout() {
|
||||
uni.showModal({
|
||||
title: this.$lang('logoutTitle'),
|
||||
content: this.$lang('logoutContent'),
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.$store.commit('setToken', '');
|
||||
this.$store.commit('setMemberInfo', '');
|
||||
this.$store.dispatch('emptyCart');
|
||||
uni.removeStorageSync('authInfo');
|
||||
this.$util.redirectTo('/pages/member/index');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 账号注销
|
||||
cancellation() {
|
||||
uni.showModal({
|
||||
title: this.$lang('cancellationTitle'),
|
||||
content: this.$lang('cancellationContent'),
|
||||
confirmColor: '#000000',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.$api.sendRequest({
|
||||
url: '/membercancel/api/membercancel/apply',
|
||||
success: rres => {
|
||||
if (rres.code >= 0) {
|
||||
this.$store.commit('setToken', '');
|
||||
this.$store.commit('setMemberInfo', '');
|
||||
this.$store.dispatch('emptyCart');
|
||||
uni.removeStorageSync('authInfo');
|
||||
this.$util.redirectTo('/pages/member/index');
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: rres.message
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/common/css/diy.scss';
|
||||
|
||||
.foot {
|
||||
display: flex;
|
||||
// position: absolute;
|
||||
width: 100%;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
color: #F4391c
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.choose-store>>>.goodslist-uni-popup-box {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 20rpx 30rpx 40rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 80%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background-color: var(--main-color);
|
||||
color: #fff;
|
||||
border: 1rpx solid #ddd;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .diy-index-page .uni-popup .uni-popup__wrapper-box {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/deep/ .placeholder {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
max-height: unset !important;
|
||||
}
|
||||
</style>
|
||||
334
pages_tool/member/basic/info.vue
Normal file
334
pages_tool/member/basic/info.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<view :style="themeColor">
|
||||
<view v-if="indent == 'all' && memberInfo" class="info-wrap">
|
||||
<!-- 头像@click="headImage" -->
|
||||
<view class="info-list-cell info-item info-list-con" hover-class="cell-hover">
|
||||
<text class="cell-tit">头像</text>
|
||||
<view class="info-list-head cell-tip">
|
||||
<image :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.getDefaultImage().head"
|
||||
@error="memberInfo.headimg = $util.getDefaultImage().head" mode="aspectFill" />
|
||||
</view>
|
||||
<text style="margin-right: 20rpx;"></text>
|
||||
</view>
|
||||
<!-- 账号 -->
|
||||
<!-- <view class="info-list-cell info-list-con" hover-class="cell-hover" v-if="memberInfo.is_edit_username == 1" @click="modifyInfo('username')">
|
||||
<text class="cell-tit">账号</text>
|
||||
<text class="cell-tip">{{ memberInfoformData.number }}</text>
|
||||
<text class="cell-more"></text>
|
||||
</view> -->
|
||||
<!-- 账号 -->
|
||||
<!-- <view class="info-list-cell info-list-con" hover-class="cell-hover" v-else>
|
||||
<text class="cell-tit">{{ $lang('account') }}</text>
|
||||
<text class="cell-tip cell-tip1">{{ memberInfoformData.number }}</text>
|
||||
</view> -->
|
||||
<!-- 昵称 -->
|
||||
<view class="info-list-cell info-list-con" hover-class="cell-hover" @click="modifyInfo('name')">
|
||||
<text class="cell-tit">昵称</text>
|
||||
<text class="cell-tip">{{ memberInfoformData.nickName }}</text>
|
||||
<text class="cell-more"></text>
|
||||
</view>
|
||||
<!-- 真实姓名 -->
|
||||
<view class="info-list-cell info-list-con" hover-class="cell-hover" @click="modifyInfo('realName')">
|
||||
<text class="cell-tit">姓名</text>
|
||||
<text class="cell-tip">{{ memberInfoformData.realName }}</text>
|
||||
<text class="cell-more"></text>
|
||||
</view>
|
||||
<!-- 性别 -->
|
||||
<view class="info-list-cell info-list-con" hover-class="cell-hover" @click="modifyInfo('sex')">
|
||||
<text class="cell-tit">性别</text>
|
||||
<text class="cell-tip">{{ memberInfoformData.sex }}</text>
|
||||
<text class="cell-more"></text>
|
||||
</view>
|
||||
<!-- 生日 -->
|
||||
<view class="info-list-cell info-list-con" hover-class="cell-hover" @click="modifyInfo('birthday')">
|
||||
<text class="cell-tit">生日</text>
|
||||
<text class="cell-tip">{{ memberInfoformData.birthday }}</text>
|
||||
<text class="cell-more"></text>
|
||||
</view>
|
||||
<!-- 手机号 -->
|
||||
<view class="info-list-cell info-list-con" @click="modifyInfo('mobile')">
|
||||
<text class="cell-tit">手机号</text>
|
||||
<text v-if="memberInfoformData.user_tel == ''" class="cell-tip">密码</text>
|
||||
<text v-else class="cell-tip">{{ memberInfoformData.mobile }}</text>
|
||||
<text class="cell-more"></text>
|
||||
</view>
|
||||
<!-- 密码 -->
|
||||
<!-- <view class="info-list-cell info-list-con" hover-class="cell-hover" @click="modifyInfo('password')">
|
||||
<text class="cell-tit">密码</text>
|
||||
<text class="cell-more"></text>
|
||||
</view> -->
|
||||
<!-- 支付密码 -->
|
||||
<!-- <view class="info-list-cell info-list-con" hover-class="cell-hover" @click="modifyInfo('paypassword')">
|
||||
<text class="cell-tit">{{ $lang('paypassword') }}</text>
|
||||
<text class="cell-more"></text>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="info-list-cell info-list-con" hover-class="cell-hover" @click="modifyInfo('address')">
|
||||
<text class="cell-tit">所在地址</text>
|
||||
<text class="cell-tip" v-if="memberInfo.full_address">{{ memberInfo.full_address }}
|
||||
{{ memberInfo.address }}</text>
|
||||
<text class="cell-tip" v-else>去设置</text>
|
||||
<text class="cell-more"></text>
|
||||
</view> -->
|
||||
|
||||
<!-- 注销 -->
|
||||
<view class="info-list-cell info-list-con" hover-class="cell-hover" @click="cancellation()">
|
||||
<text class="cell-tit">注销账号</text>
|
||||
<text class="cell-more"></text>
|
||||
</view>
|
||||
<!-- <view class="info-list-cell info-list-con" hover-class="cell-hover" @click="cancellation()" v-if="addonIsExist.membercancel && memberConfig.is_enable == 1">
|
||||
<text class="cell-tit">注销账号</text>
|
||||
<text class="cell-more"></text>
|
||||
</view> -->
|
||||
<!-- <view class="info-list-cell info-list-con" hover-class="cell-hover">
|
||||
<text class="cell-tit">版本号</text>
|
||||
<text class="cell-tip cell-tip1">{{ version }}</text>
|
||||
</view> -->
|
||||
|
||||
<!-- 语言 -->
|
||||
<!-- <view class="info-list-cell info-item info-list-con" hover-class="cell-hover" @click="modifyInfo('language')">
|
||||
<text class="cell-tit">{{ $lang('lang') }}</text>
|
||||
<text class="cell-tip">{{ langList[langIndex].name }}</text>
|
||||
<text class="cell-more"></text>
|
||||
</view> -->
|
||||
<!-- 退出登录 -->
|
||||
<!-- <view class="info-list-cell log-out-btn" >
|
||||
<text class="cell-tit color-base-text"></text>
|
||||
</view> -->
|
||||
<!-- #ifdef H5 -->
|
||||
|
||||
<!-- #endif -->
|
||||
<view class="save-item" @click="logout">
|
||||
<button type="primary">退出登录</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import info from '../public/js/info.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniNavBar: () => import('@/pages_tool/components/uni-nav-bar/uni-nav-bar.vue'),
|
||||
nsLogin: () => import('@/components/ns-login/ns-login.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
version: ''
|
||||
};
|
||||
},
|
||||
mixins: [info],
|
||||
onLoad(data) {
|
||||
this.version = this.$config.version;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.info-head {
|
||||
.head-nav {
|
||||
width: 100%;
|
||||
height: var(--status-bar-height);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.head-nav.active {
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha {
|
||||
width: 170rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.info-list-cell {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
position: relative;
|
||||
line-height: 50rpx;
|
||||
background-color: #fff;
|
||||
|
||||
&:first-child {
|
||||
padding: 28rpx 30rpx;
|
||||
}
|
||||
|
||||
.cell-tit {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cell-tip1 {
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
&.log-out-btn {
|
||||
margin-top: 40rpx;
|
||||
|
||||
.cell-tit {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list-head {
|
||||
border: 1rpx solid $color-line;
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info-list-head image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
// #ifdef MP
|
||||
&.info-item {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
&.info-list-con~&.info-list-con:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
top: 0;
|
||||
border-bottom: 1rpx solid $color-line;
|
||||
}
|
||||
|
||||
.cell-tip {
|
||||
margin-left: auto;
|
||||
color: $color-tip;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 470rpx;
|
||||
}
|
||||
|
||||
.cell-more {
|
||||
margin-left: 10rpx;
|
||||
width: 32rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cell-more:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
|
||||
border: 2rpx solid darken($color-line, 20%) {
|
||||
right-color: transparent;
|
||||
bottom-color: transparent;
|
||||
}
|
||||
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
.edit-info-box {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 40rpx;
|
||||
min-height: 50rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.info-name {
|
||||
width: 150rpx;
|
||||
font-size: $font-size-base;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
width: 0;
|
||||
font-size: $font-size-base;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dynacode {
|
||||
margin: 0;
|
||||
padding: 0 10rpx;
|
||||
width: 250rpx;
|
||||
height: 60rpx;
|
||||
font-size: $font-size-base;
|
||||
line-height: 60rpx;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.edit-sex-list {
|
||||
display: flex;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
margin-left: 30rpx;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
uni-radio .uni-radio-input {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.set-pass-tips {
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
}
|
||||
|
||||
.input-len {
|
||||
width: 500rpx !important;
|
||||
}
|
||||
|
||||
.save-item {
|
||||
margin: 50rpx auto;
|
||||
|
||||
button {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
padding-top: 80rpx;
|
||||
|
||||
.empty_img {
|
||||
width: 63%;
|
||||
height: 450rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 190rpx;
|
||||
color: $color-tip;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 300rpx;
|
||||
margin-top: 100rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
410
pages_tool/member/basic/info_edit.vue
Normal file
410
pages_tool/member/basic/info_edit.vue
Normal file
@@ -0,0 +1,410 @@
|
||||
<template>
|
||||
<view :style="themeColor">
|
||||
<template v-if="memberInfo">
|
||||
<!-- 修改用户名 -->
|
||||
<view v-if="indent == 'username'" class="edit-info">
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">用户名</text>
|
||||
<input class="uni-input info-content input-len" type="text" maxlength="30" placeholder="请输入"
|
||||
v-model="formData.username" />
|
||||
</view>
|
||||
<view class="color-tip font-size-goods-tag set-pass-tips">用户名仅可修改一次，请谨慎设置</view>
|
||||
<view class="save-item" @click="save('username')">
|
||||
<button type="primary">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 修改昵称 -->
|
||||
<view v-if="indent == 'name'" class="edit-info">
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">昵称</text>
|
||||
<input class="uni-input info-content input-len" type="text" maxlength="30" placeholder="请输入"
|
||||
v-model="formData.nickName" />
|
||||
</view>
|
||||
<view class="save-item" @click="save('name')">
|
||||
<button type="primary">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 修改真实姓名 -->
|
||||
<view v-if="indent == 'realName'" class="edit-info">
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">姓名</text>
|
||||
<input class="uni-input info-content input-len" type="text" maxlength="30" placeholder="请输入"
|
||||
v-model="formData.realName" />
|
||||
</view>
|
||||
<view class="save-item" @click="save('realName')">
|
||||
<button type="primary">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 修改性别 -->
|
||||
<view v-if="indent == 'sex'" class="edit-info">
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">性别</text>
|
||||
<radio-group @change="radioChange" class="edit-sex-list">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
|
||||
<view>
|
||||
<radio :color="themeStyle.main_color" :value="item.value"
|
||||
:checked="index === formData.sex" />
|
||||
</view>
|
||||
<view>{{ item.name }}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="save-item" @click="save('sex')">
|
||||
<button type="primary">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 修改生日 -->
|
||||
<view v-if="indent == 'birthday'" class="edit-info edit-birthday-list">
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">生日</text>
|
||||
<picker mode="date" :value="formData.birthday" :start="startDate" :end="endDate"
|
||||
@change="bindDateChange">
|
||||
<view class="uni-input">{{ formData.birthday ? formData.birthday : '请选择生日' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="save-item" @click="save('birthday')">
|
||||
<button type="primary">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 修改密码 -->
|
||||
<view v-if="indent == 'password'" class="edit-info">
|
||||
<block v-if="memberInfo.password == 0 && memberInfo.mobile == ''">
|
||||
<view class="empty">
|
||||
<view class="empty_img">
|
||||
<image :src="$util.img('public/uniapp/common/common-empty.png')" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="color-tip margin-top margin-bottom">请先绑定手机再执行该操作</view>
|
||||
<button type="primary" size="mini" class="mini button color-base-bg"
|
||||
@click="modifyInfo('mobile')">立即绑定</button>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="edit-info-box" v-if="memberInfo.password">
|
||||
<text class="info-name">原密码</text>
|
||||
<input class="uni-input info-content input-len" type="password" maxlength="30" placeholder="请输入"
|
||||
v-model="formData.currentPassword" />
|
||||
</view>
|
||||
<block v-else>
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">新密码</text>
|
||||
<input class="uni-input info-content" type="number" maxlength="4" placeholder="请输入"
|
||||
v-model="formData.mobileVercode" />
|
||||
<image :src="captcha.img" class="captcha" @click="getCaptcha"></image>
|
||||
</view>
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">再次输入</text>
|
||||
<input class="uni-input info-content" type="number" maxlength="6" placeholder="请输入"
|
||||
v-model="formData.mobileDynacode" />
|
||||
<button type="primary" class="dynacode" @click="passwordMoblieCode()">{{
|
||||
formData.mobileCodeText }}</button>
|
||||
</view>
|
||||
<view class="color-tip font-size-goods-tag set-pass-tips">
|
||||
点击“获取动态码”，将会向您已绑定的手机号{{ memberInfoformData.mobile | mobile }}发送验证码</view>
|
||||
</block>
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">新密码</text>
|
||||
<input class="uni-input info-content input-len" type="password" maxlength="30" placeholder="请输入"
|
||||
v-model="formData.newPassword" />
|
||||
</view>
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">再次输入</text>
|
||||
<input class="uni-input info-content input-len" type="password" maxlength="30" placeholder="请输入"
|
||||
v-model="formData.confirmPassword" />
|
||||
</view>
|
||||
|
||||
<view class="save-item" @click="save('password')">
|
||||
<button type="primary">保存</button>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 修改手机号 -->
|
||||
<view v-if="indent == 'mobile'" class="edit-info">
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">手机号</text>
|
||||
<input class="uni-input info-content" type="number" maxlength="11" placeholder="请输入"
|
||||
v-model="formData.mobile" />
|
||||
</view>
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">验证码</text>
|
||||
<input class="uni-input info-content" type="number" maxlength="4" placeholder="请输入"
|
||||
v-model="formData.mobileVercode" />
|
||||
<image :src="captcha.img" class="captcha" @click="getCaptcha"></image>
|
||||
</view>
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">短信验证码</text>
|
||||
<input class="uni-input info-content" type="number" maxlength="6" placeholder="请输入"
|
||||
v-model="formData.mobileDynacode" />
|
||||
<button type="primary" class="dynacode" @click="bindMoblieCode()">{{ formData.mobileCodeText
|
||||
}}</button>
|
||||
</view>
|
||||
<view class="save-item" @click="save('mobile')">
|
||||
<button type="primary">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 绑定手机号 -->
|
||||
<view v-if="indent == 'bind_mobile'" class="edit-info">
|
||||
<view class="save-item bind-mobile">
|
||||
<button type="primary" open-type="getPhoneNumber" @getphonenumber="mobileAuth">一键授权绑定</button>
|
||||
</view>
|
||||
<view class="save-item bind-mobile">
|
||||
<button type="primary" @click="manualBinding">手动绑定</button>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="indent == 'address'" class="edit-info">
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">所在地区</text>
|
||||
<pick-regions :default-regions="defaultRegions" select-arr="3" @getRegions="handleGetRegions">
|
||||
<text class="select-address " :class="{ 'color-tip': !formData.fullAddress }">
|
||||
{{ formData.fullAddress ? formData.fullAddress : '请选择省市区县' }}
|
||||
</text>
|
||||
</pick-regions>
|
||||
</view>
|
||||
<view class="edit-info-box">
|
||||
<text class="info-name">详细地址</text>
|
||||
<input class="uni-input info-content" type="text" placeholder="详细地址" v-model="formData.address" />
|
||||
</view>
|
||||
<view class="save-item" @click="save('address')">
|
||||
<button type="primary">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import info from '../public/js/info.js';
|
||||
import auth from '@/common/js/auth.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniNavBar: () => import('@/pages_tool/components/uni-nav-bar/uni-nav-bar.vue'),
|
||||
nsLogin: () => import('@/components/ns-login/ns-login.vue'),
|
||||
pickRegions: () => import('@/components/pick-regions/pick-regions.vue'),
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad(data) {
|
||||
if (data.type) this.indent = data.type;
|
||||
},
|
||||
mixins: [info, auth],
|
||||
filters: {
|
||||
mobile(mobile) {
|
||||
return mobile.substring(0, 4 - 1) + '****' + mobile.substring(6 + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.info-head {
|
||||
.head-nav {
|
||||
width: 100%;
|
||||
height: var(--status-bar-height);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.head-nav.active {
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha {
|
||||
width: 170rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.info-list-cell {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
position: relative;
|
||||
line-height: 50rpx;
|
||||
background-color: #fff;
|
||||
|
||||
&:first-child {
|
||||
padding: 28rpx 30rpx;
|
||||
}
|
||||
|
||||
.cell-tip1 {
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
&.log-out-btn {
|
||||
margin-top: 40rpx;
|
||||
|
||||
.cell-tit {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list-head {
|
||||
border: 1rpx solid $color-line;
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info-list-head image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
// #ifdef MP
|
||||
&.info-item {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
&.info-list-con~&.info-list-con:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
top: 0;
|
||||
border-bottom: 1rpx solid $color-line;
|
||||
}
|
||||
|
||||
.cell-tip {
|
||||
margin-left: auto;
|
||||
color: $color-tip;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 470rpx;
|
||||
}
|
||||
|
||||
.cell-more {
|
||||
margin-left: 10rpx;
|
||||
width: 32rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cell-more:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
|
||||
border: 2rpx solid darken($color-line, 20%) {
|
||||
right-color: transparent;
|
||||
bottom-color: transparent;
|
||||
}
|
||||
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
.edit-info-box {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 40rpx;
|
||||
min-height: 50rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.info-name {
|
||||
width: 150rpx;
|
||||
font-size: $font-size-base;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
font-size: $font-size-base;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dynacode {
|
||||
margin: 0;
|
||||
padding: 0 10rpx;
|
||||
width: 250rpx;
|
||||
height: 60rpx;
|
||||
font-size: $font-size-base;
|
||||
line-height: 60rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.edit-sex-list {
|
||||
display: flex;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
margin-left: 30rpx;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
uni-radio .uni-radio-input {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.pick-regions {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.set-pass-tips {
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
}
|
||||
|
||||
.input-len {
|
||||
width: 500rpx !important;
|
||||
}
|
||||
|
||||
.save-item {
|
||||
margin-top: 50rpx;
|
||||
|
||||
button {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bind-mobile {
|
||||
button {
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
padding-top: 80rpx;
|
||||
|
||||
.empty_img {
|
||||
width: 63%;
|
||||
height: 450rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 190rpx;
|
||||
color: $color-tip;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 300rpx;
|
||||
margin-top: 100rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
195
pages_tool/member/basic/modify_face.vue
Normal file
195
pages_tool/member/basic/modify_face.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view :style="themeColor" class="nc-modify-content">
|
||||
<view class="modify">
|
||||
<view>
|
||||
<image v-if="newImg == ''" :src="memberImg ? $util.img(memberImg) : $util.getDefaultImage().head"
|
||||
@error="memberImg = $util.getDefaultImage().head" mode="aspectFill" />
|
||||
<image v-else :src="$util.img(newImg)" @error="newImg = $util.getDefaultImage().head"
|
||||
mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="opection-box">
|
||||
<block v-if="newImg == ''">
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button type="primary" @click="uploadFace()">点击上传</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<button type="primary" @click="chooseImage()">点击上传</button>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="opec">
|
||||
<button size="mini" class="mini" type="primary" @click="save()">确认保存</button>
|
||||
<button size="mini" class="mini" type="primary" @click="chooseImage()">重新上传</button>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<img-cropping selWidth="300" selHeight="300" @upload="myUpload" ref="imgCropping"></img-cropping>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {
|
||||
imgCropping: () => import('@/pages_tool/components/img-cropping/cropping.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
memberImg: '',
|
||||
newImg: '',
|
||||
imgurl: ''
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (!this.storeToken) {
|
||||
this.$util.redirectTo(
|
||||
'/pages_tool/login/login', {
|
||||
back: '/pages_tool/member/modify_face'
|
||||
},
|
||||
'redirectTo'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
this.memberImg = this.memberInfo.headimg;
|
||||
this.imgurl = this.memberInfo.headimg;
|
||||
},
|
||||
methods: {
|
||||
chooseImage() {
|
||||
this.$refs.imgCropping.fSelect();
|
||||
},
|
||||
//上传返回图片
|
||||
myUpload(rsp) {
|
||||
let app_type = 'h5';
|
||||
let app_type_name = 'H5';
|
||||
|
||||
// #ifdef MP
|
||||
app_type = 'weapp';
|
||||
app_type_name = 'weapp';
|
||||
// #endif
|
||||
uni.request({
|
||||
url: this.$config.baseUrl + '/api/upload/headimgBase64',
|
||||
method: 'POST',
|
||||
data: {
|
||||
app_type: app_type,
|
||||
app_type_name: app_type_name,
|
||||
images: rsp.base64
|
||||
},
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded;application/json'
|
||||
},
|
||||
dataType: 'json',
|
||||
responseType: 'text',
|
||||
success: res => {
|
||||
if (res.data.code == 0) {
|
||||
this.newImg = res.data.data.pic_path;
|
||||
this.imgurl = res.data.data.pic_path;
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.$util.showToast({
|
||||
title: '头像上传失败'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
previewImage() {
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: this.images
|
||||
});
|
||||
},
|
||||
save() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/member/modifyheadimg',
|
||||
data: {
|
||||
headimg: this.imgurl
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.memberInfo.headimg = this.imgurl;
|
||||
this.$store.commit('setMemberInfo', this.memberInfo);
|
||||
this.$util.showToast({
|
||||
title: '头像修改成功'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages_tool/member/info', {}, 'redirectTo');
|
||||
}, 2000);
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadFace() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: (chooseImageRes) => {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
this.$api.upload({
|
||||
url: '/api/upload/headimg',
|
||||
filePath: tempFilePaths[0],
|
||||
fileType: 'image',
|
||||
success: (res) => {
|
||||
if (res.code) {
|
||||
this.newImg = res.data.pic_path;
|
||||
this.imgurl = res.data.pic_path;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modify {
|
||||
position: relative;
|
||||
padding-top: 50rpx;
|
||||
|
||||
view {
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
border: 4rpx solid #ffffff;
|
||||
border-radius: 100%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opection-box {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.opec {
|
||||
width: 100%;
|
||||
padding: 0 10%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
padding: 0 30rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user