413 lines
11 KiB
Vue
413 lines
11 KiB
Vue
<template lang="pug">
|
|
//- 添加账号
|
|
.add_account.content
|
|
NavbarComponent(:title="status == 0?'添加账号':'修改信息'" showLeft)
|
|
.line
|
|
van-field(v-model="account" placeholder="输入账号" label="账号")
|
|
MyCell(title='性别')
|
|
van-radio-group(v-model="gender")
|
|
van-radio(name="1") 男
|
|
van-radio(name="2") 女
|
|
MyCell(title='花呗/白条')
|
|
van-radio-group(v-model="credit")
|
|
van-radio(name="0") 未开通
|
|
van-radio(name="1") 已开通
|
|
van-field(:placeholder="age.text == ''?'请选择年龄段':age.text" label="年龄段" disabled right-icon='arrow' @click='ageShow = true')
|
|
van-field(v-model="points" placeholder="淘气值" label="淘气值")
|
|
van-field(:placeholder="rate.text == ''?'信誉等级':rate.text" label="信誉等级" disabled right-icon='arrow' @click='levelShow = true')
|
|
//- 最多选择三个
|
|
van-field(clearable='', label='购买标签', disabled right-icon='arrow', :placeholder='labelName', @click="isPopup('show')")
|
|
van-field(v-model="name" placeholder="输入姓名" label="收货人姓名")
|
|
van-field(v-model="cellphone" type="tel" placeholder="输入手机号" label="收货人电话")
|
|
Address(@confirm="onConfirm" :areaText='areaText' :value='areaIndex')
|
|
van-field(v-model="detail" placeholder="地址详情" label="地址详情")
|
|
.alipay
|
|
.alipay_title 支付截图
|
|
.alipay_img
|
|
van-uploader(v-model="fileList1" multiple :deletable='false' :max-count='1')
|
|
van-uploader(v-model="fileList2" multiple :max-count='1' :after-read='afterRead')
|
|
.account_sub
|
|
van-button(type='default' size='large' color='#20c6c2' @click='saveaccount') 提交
|
|
//- 类目弹窗
|
|
van-popup(v-model='show', closeable, :style="{ width: '80%' }")
|
|
.category
|
|
.category_list.pd30
|
|
.row_list(v-for='(item,index) in label' :key='index' @click='changeLabel(index)')
|
|
.row.flex_cen(:class="categoryId.indexOf(item.id) !== -1 ?'row_active':''") {{item.title}}
|
|
.category_custom.pd30
|
|
//- input( placeholder="自定义类目" type="text")
|
|
.category_sub
|
|
van-button(type='default' size='large' color='#20c6c2' @click='labelConfirm') 确定
|
|
//- 信用等级选择
|
|
van-popup(v-model='levelShow', position="bottom" )
|
|
van-picker( :columns="level[type==10?0:1]" value-key='text' @cancel='levelShow = false' @confirm="onConfirmLevel" show-toolbar)
|
|
//- 年龄段选择
|
|
van-popup(v-model='ageShow', position="bottom" )
|
|
van-picker( :columns="ageGroup" value-key='text' @cancel='ageShow = false' @confirm="onConfirmAge" show-toolbar)
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Provide, Vue, Inject } from "vue-property-decorator";
|
|
import NavbarComponent from "@/components/Navbar.vue";
|
|
import MyCell from "@/components/MyCell.vue";
|
|
import Address from "@/components/Address.vue";
|
|
import { Dialog } from 'vant';
|
|
|
|
type levelType = {
|
|
text: string
|
|
id: number
|
|
}
|
|
|
|
@Component({
|
|
components: {
|
|
MyCell,
|
|
NavbarComponent,
|
|
Address
|
|
}
|
|
})
|
|
export default class AddAccount extends Vue {
|
|
$http: any
|
|
$utils: any
|
|
|
|
// 1淘宝2京东3拼多多
|
|
private type: number = 1
|
|
// 当前页面的状态对应买号列表的显示状态 0默认 1审核中 2已通过 -1 未通过
|
|
private status: number = 0
|
|
// 买号id 修改买号时需要
|
|
private id: string = ''
|
|
|
|
// 信誉等级配置
|
|
private level: Array<levelType[]> =[
|
|
[{
|
|
text: '3心',
|
|
id: 1
|
|
},{
|
|
text: '4心',
|
|
id: 2
|
|
},{
|
|
text: '5心',
|
|
id: 3
|
|
},{
|
|
text: '一钻以上',
|
|
id: 4
|
|
}],[{
|
|
text: '铜牌会员',
|
|
id: 5
|
|
},{
|
|
text: '银牌会员',
|
|
id: 6
|
|
},{
|
|
text: '金牌会员',
|
|
id: 7
|
|
},{
|
|
text: '砖石会员',
|
|
id: 8
|
|
}]
|
|
]
|
|
|
|
// 信誉等级弹出层控制
|
|
private levelShow: boolean = false
|
|
|
|
// 年龄段
|
|
private ageGroup: object[] = [
|
|
{
|
|
text: '18岁以下',
|
|
id: 0
|
|
},{
|
|
text: '18-25岁',
|
|
id: 1
|
|
},{
|
|
text: '26-30岁',
|
|
id: 2
|
|
},{
|
|
text: '31-35岁',
|
|
id: 3
|
|
},{
|
|
text: '36-40岁',
|
|
id: 4
|
|
},{
|
|
text: '41-45岁',
|
|
id: 5
|
|
},{
|
|
text: '45岁以上',
|
|
id: 6
|
|
}
|
|
]
|
|
// 年龄段弹出层控制
|
|
private ageShow: boolean = false
|
|
|
|
private account: string = ''
|
|
private credit: string = ''
|
|
private gender: string = ''
|
|
// 年龄段
|
|
private age: levelType = {
|
|
text: '',
|
|
id: 0
|
|
}
|
|
private points: string = ''
|
|
// 信誉等级
|
|
private rate: levelType = {
|
|
text: '',
|
|
id: 0
|
|
}
|
|
private name: string = ''
|
|
private cellphone: string = ''
|
|
private areaId: Number[] = []
|
|
private detail: string = ''
|
|
// 回显的地址信息
|
|
private areaText: string = '选择收货地址'
|
|
private areaIndex: string = ''
|
|
// 图片地址id
|
|
private fileImg: string = '';
|
|
|
|
// 标签数据
|
|
private label: any[] = []
|
|
// 选中的标签最多三个
|
|
private categoryId: Array<number> = []
|
|
private labelName: string = '选择标签'
|
|
|
|
private fileList1: Array<any> = [
|
|
{ url: "http://static.alkid888.com/example/alipay.png" }
|
|
];
|
|
private fileList2: Array<any> = []
|
|
|
|
// 控制弹出层
|
|
private show: boolean = false;
|
|
|
|
@Inject() HiddenTabBar!: Function;
|
|
|
|
async created() {
|
|
this.HiddenTabBar()
|
|
this.accountTagInfo()
|
|
if(this.$route.query.id !== void 0){
|
|
let id = this.$route.query.id as string
|
|
this.id = id
|
|
this.status = parseInt(this.$route.query.status as string) | 0
|
|
this.accountListByPlatform(id)
|
|
}
|
|
if(this.$route.query.type !== void 0){
|
|
this.type = parseInt(this.$route.query.type as string)
|
|
}
|
|
}
|
|
|
|
// 获取回显的信息
|
|
private async accountListByPlatform(id:string): Promise<void> {
|
|
this.areaText = ''
|
|
let res = (await this.$http.UserService.accountListByPlatform(id))[0]
|
|
let area = res.address.area_text
|
|
this.account = res.account
|
|
this.gender = String(res.account_gender)
|
|
this.ageGroup.forEach((v: any,i:number)=>{
|
|
if(v.id == res.account_ages){
|
|
this.age = {
|
|
id: v.id,
|
|
text: v.text
|
|
}
|
|
}
|
|
})
|
|
this.points = res.account_points
|
|
this.rate.id = res.account_rate
|
|
this.level[this.type==10?0:1].forEach((v: any,i:number)=>{
|
|
if(v.id == res.account_ages){
|
|
this.rate = {
|
|
id: v.id,
|
|
text: v.text
|
|
}
|
|
}
|
|
})
|
|
this.name = res.address.full_name
|
|
this.cellphone = res.address.cellphone
|
|
this.areaText = `${area.province} ${area.city} ${area.country}`
|
|
this.areaIndex = String(res.address.area_id)
|
|
this.detail = res.address.detail
|
|
this.fileList2.push({url:res.review_img[0].uploads.local_path})
|
|
this.fileImg = res.review_img[0].id
|
|
this.labelName = ''
|
|
this.areaId.push(res.address.area_id)
|
|
res.tag.forEach((v:any,i:number)=>{
|
|
if(v.title !== null){
|
|
this.labelName += (v.title + ' ')
|
|
this.categoryId.push(v.id)
|
|
}
|
|
})
|
|
if(res.status == -1){
|
|
Dialog.alert({
|
|
title: '审核未通过',
|
|
message: res.remark,
|
|
}).then(() => {
|
|
// on close
|
|
});
|
|
}
|
|
}
|
|
|
|
// 支付宝图片上传
|
|
private async afterRead(cell: any): Promise<void> {
|
|
let fd = new FormData()
|
|
fd.append('file', cell.file)
|
|
fd.append('imageType', '1')
|
|
let res = await this.$http.PublicService.uploadImg(fd)
|
|
this.fileImg = res.id
|
|
}
|
|
|
|
// 打开关闭弹出层
|
|
private isPopup(id: string): void {
|
|
if (id == "show") this.show = !this.show;
|
|
}
|
|
|
|
// 选中的标签
|
|
private changeLabel(index: number): void {
|
|
let categoryId: number[] = this.categoryId
|
|
let id: number = this.label[index].id
|
|
if(categoryId.indexOf(id) !== -1){
|
|
categoryId.splice(categoryId.indexOf(id), 1)
|
|
this.categoryId = [...categoryId]
|
|
return
|
|
}
|
|
if(categoryId.length >= 3){
|
|
this.$toast('最多选择三个标签')
|
|
return
|
|
}
|
|
this.categoryId.push(id)
|
|
}
|
|
|
|
// 标签提交
|
|
private labelConfirm(): void {
|
|
this.labelName = ''
|
|
this.categoryId.forEach((v:any, i:number)=>{
|
|
let s = this.label.filter(n=>{return n.id == v})
|
|
this.labelName += (s[0].title + ' ')
|
|
})
|
|
this.show = !this.show
|
|
}
|
|
|
|
// 信誉等级选择
|
|
private onConfirmLevel(e: any): void {
|
|
this.rate = e
|
|
this.levelShow = false
|
|
}
|
|
|
|
// 年龄段选择
|
|
private onConfirmAge(e: any): void {
|
|
this.age = e
|
|
this.ageShow = false
|
|
}
|
|
|
|
// 确定选择城市
|
|
private onConfirm(value: any): void {
|
|
this.areaId = value
|
|
}
|
|
|
|
// 添加买号的标签
|
|
private async accountTagInfo(): Promise<void> {
|
|
let res = await this.$http.HomeService.accountTagInfo(1)
|
|
this.label = res[0].sub
|
|
}
|
|
|
|
// 添加买号
|
|
private async saveaccount(): Promise<void> {
|
|
if(this.account == ''){
|
|
this.$toast('请填写账号')
|
|
return
|
|
}
|
|
if(this.gender == ''){
|
|
this.$toast('请选择性别')
|
|
return
|
|
}
|
|
if(this.credit == ''){
|
|
this.$toast('请选择是否开通花呗/白条')
|
|
return
|
|
}
|
|
if(this.age.text == ''){
|
|
this.$toast('请填写年龄')
|
|
return
|
|
}
|
|
if(this.points == ''){
|
|
this.$toast('请填写淘气值')
|
|
return
|
|
}
|
|
if(this.rate.text == ''){
|
|
this.$toast('请填写信用等级')
|
|
return
|
|
}
|
|
if(this.labelName == '选择标签'){
|
|
this.$toast('请选择标签')
|
|
return
|
|
}
|
|
if(this.name == ''){
|
|
this.$toast('请填写收货人姓名')
|
|
return
|
|
}
|
|
if(this.cellphone == ''){
|
|
this.$toast('请填写收货人电话')
|
|
return
|
|
}
|
|
if(!this.$utils.isTel(this.cellphone)){
|
|
this.$toast('收货人电话填写有误')
|
|
return
|
|
}
|
|
if(this.areaId.length <= 0){
|
|
this.$toast('请选择收货地址')
|
|
return
|
|
}
|
|
if(this.detail == ''){
|
|
this.$toast('请填写收货地详情')
|
|
return
|
|
}
|
|
if(this.fileImg == ''){
|
|
this.$toast('请上传支付宝截图')
|
|
return
|
|
}
|
|
let data = {
|
|
account: this.account,
|
|
account_gender: this.gender,
|
|
account_rate: this.rate.id,
|
|
account_ages: this.age,
|
|
account_points: this.points,
|
|
image_id: this.fileImg,
|
|
full_name: this.name,
|
|
cellphone: this.cellphone,
|
|
area_id: this.areaId[this.areaId.length-1],
|
|
detail: this.detail,
|
|
category_id: this.categoryId,
|
|
account_type: this.type,
|
|
credit_pay: this.credit
|
|
}
|
|
Dialog.confirm({
|
|
title: '是否提交',
|
|
message: '点击确定提交信息'
|
|
}).then( async () => {
|
|
if(this.status == 0){
|
|
let res = await this.$http.HomeService.saveaccount(data)
|
|
this.$toast('添加成功等待审核')
|
|
setTimeout(() => {
|
|
this.$router.go(-1)
|
|
}, 2000);
|
|
}else if(this.status == -1){
|
|
Object.assign(data, {id: this.id})
|
|
let res = await this.$http.UserService.modifyAccount(data)
|
|
if(!!res){
|
|
this.$toast('修改成功等待审核')
|
|
setTimeout(() => {
|
|
this.$router.go(-1)
|
|
}, 2000)
|
|
}else{
|
|
setTimeout(() => {
|
|
this.$router.go(-1)
|
|
}, 2000)
|
|
}
|
|
}
|
|
}).catch(() => {
|
|
// on cancel
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="stylus" scoped>
|
|
@import '~@assets/stylus/page/addAccount';
|
|
</style>
|
|
<style lang="stylus">
|
|
.add_account
|
|
.van-radio-group
|
|
display flex
|
|
.van-radio
|
|
margin-right: 0.6rem;
|
|
</style> |