java-mall-app/seller/user/add.vue
2024-11-01 16:35:40 +08:00

664 lines
17 KiB
Vue

<template>
<view class="page">
<view class="m-cells m-cells-form">
<view class="m-cell" style="display:none">
<view class="m-cell-hd"><label class="u-label">{{__('账号')}}</label></view>
<view class="m-cell-bd">
<input class="u-input" type="text" :placeholder="__('请输入账号')" maxlength="11" @input="inputAccount" :value="user_account"/>
</view>
<view v-if="(!isAccount)" class="m-cell-ft">
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
</view>
</view>
<view class="m-cell">
<view class="m-cell-hd"><label class="u-label">{{__('姓名')}}</label></view>
<view class="m-cell-bd">
<input class="u-input" type="text" :placeholder="__('请输入姓名')" :value="user_nickname" @input="onInputNickname"/>
</view>
<view v-if="(!isNickname)" class="m-cell-ft">
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
</view>
</view>
<view class="m-cell">
<view class="m-cell-hd"><label class="u-label">{{__('手机号码')}}</label></view>
<view class="m-cell-bd">
<input class="u-input" type="number" :placeholder="__('请输入手机号码')" maxlength="11" @input="inputphone" :value="user_mobile"/>
</view>
<view v-if="(!isUserMobile)" class="m-cell-ft">
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
</view>
</view>
<view class="m-cell" style="display:none">
<view class="m-cell-hd"><label class="u-label">{{__('密码')}}</label></view>
<view class="m-cell-bd">
<input class="u-input" type="text" password="true" :placeholder="__('请输入登录密码')" :value="user_password" @input="onInputPassword"/>
</view>
<view v-if="(!isPassword)" class="m-cell-ft">
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
</view>
</view>
<view class="m-cell">
<view class="m-cell-hd"><label class="u-label">{{__('车牌号')}}</label></view>
<view class="m-cell-bd">
<input class="u-input" :placeholder="__('车牌号')" disabled="true" @tap="plateShow=true" v-model.trim="user_licenseplate"></input>
</view>
<view class="m-cell-hd" style="padding-right:40rpx;" @click="licenseplateImage"><label class="iconfont icon-xiangji"></label></view>
<view v-if="(!isLicenseplate)" class="m-cell-ft">
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
</view>
</view>
<view class="m-cell">
<view class="m-cell-hd"><label class="u-label">{{__('常用轮胎品牌')}}</label></view>
<view class="m-cell-bd">
<picker @change="bindPickerChange" :value="index" :range="brands" range-key="brand_name">
<view class="uni-input">{{brand_name?brand_name:__('请选择常用轮胎品牌')}}</view>
</picker>
</view>
<view v-if="(!isTyre)" class="m-cell-ft">
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
</view>
</view>
<view class="m-cell">
<view class="m-cell-hd"><label class="u-label">{{__('车型分类')}}</label></view>
<view class="m-cell-bd">
<input class="u-input" type="text" :value="user_vehicle_name" readonly="readonly" disabled="true" :placeholder="__('请选择车型分类')" @click="showvehicle" />
</view>
</view>
<view class="btn_box"><button class="u-btn u-btn-default" @tap="submitdata">{{__('保存')}}</button></view>
</view>
<!-- 车牌键盘 -->
<plate-input v-if="plateShow" :plate="user_licenseplate" @export="setPlate" @close="plateShow=false"></plate-input>
<!-- 车型分类 -->
<uni-drawer :visible="rightDrawerVehicle" mode="right" @close="closeDrawer()" >
<view class="m-tab">
<view class="m-navbar">
<view :class="['m-navbar-item', tapindex==1?'m-navbar-item-on':'']" @click="showvehicle">
{{__('一级分类')}}
</view>
<view :class="['m-navbar-item', tapindex==2?'m-navbar-item-on':'']">
{{__('二级分类')}}
</view>
<view :class="['m-navbar-item', tapindex==3?'m-navbar-item-on':'']">
{{__('三级分类')}}
</view>
</view>
</view>
<scroll-view scroll-y="true" style="height: 100%">
<view class="m-cells" style="padding:20rpx 20rpx;" v-for="(category,ii) in vehicle_category" :key="ii">
<view class="m-cell m-cell-access m-info-sp" :data-category_id="category.vehicle_category_id" :data-parent_id="category.parent_id" :data-category_name="category.category_name" @click="getVehiclecategory">
<view class="m-cell-bd">
<view class="m-order-title">
<label class="m-ber-n">{{category.category_name}}</label>
<label>
<image class="nav-image" lazy-load src="/static/images/nav.png" mode="scaleToFill" />
</label>
</view>
</view>
</view>
</view>
</scroll-view>
</uni-drawer>
</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import verifycodeDialog from '@/components/verifycode-dialog/verifycode-dialog.vue';
import plateInput from './../uni-plate-input/uni-plate-input.vue'
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
export default {
name: 'asset',
data: function() {
return {
user_account: "",
user_nickname: "",
user_password: "",
user_licenseplate: "",
user_vehicle_name: "",
user_tyre: 0,
user_mobile: "",
brands:[],
brand_name:'',
rightDrawerVehicle: false,
index: 0,
isCardNo: true,
plateNumberList:[],
type:'number',
parent_id:0,
vehicle_category_id:0,
oneVehiclecategory:'',
twoVehiclecategory:'',
threeVehiclecategory:'',
n_level:0,
vehicle_name:'',
vehicle_category:[],
tapindex:1,
isPassword: true,
isNickname: true,
isAccount: true,
isTyre: true,
isLicenseplate: true,
isUserMobile: true,
plateNo:'',
plateShow:false
};
},
components: {
verifycodeDialog,
uniDrawer,
uniList,
uniListItem,
plateInput
},
computed: mapState([
'Config',
'StateCode',
'notice',
'plantformInfo',
'shopInfo',
'userInfo',
'hasLogin'
]),
onLoad: function(options) {
var that = this;
// this.Phone = this.userInfo.user_mobile;
// this.user_data = Object.assign({}, this.userInfo);
uni.setNavigationBarTitle({
title:this.__('新增会员')
});
this.getbrand();
},
methods: {
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
//车牌号输入
setPlate(plate){
if(plate.length >= 7) this.user_licenseplate = plate
this.islLicenseplate = true
this.plateShow = false
},
bindPickerChange: function(e) {
let that = this;
var r = e.target.value
this.brand_name = that.brands[r].brand_name
that.user_tyre = that.brands[r].brand_id
},
getbrand: function() {
let that = this;
var params = {
category_id: 116
}
that.$.request({
url: that.Config.URL.account.vehicle_brand,
data: params,
success: function(data, status, msg, code) {
if (status == 200) {
for(var r in data.items){
that.brands[r] = data.items[r]
}
}
},
})
},
initData:function (){
let that = this;
that.$.request({
url: that.Config.URL.account.certificate.replace(/typ=e/, "typ=json"),
data: {},
success: function(data, status, msg, code) {
if (status == 200) {
that.setData({
user_data: data
})
that.user_data.user_vehicle_name = data.user_vehicle_name.split(",").join('>')
} else {
}
that.getbrand();
},
})
},
onInputNickname: function (e) {
let that = this;
this.setData({user_nickname:e.detail.value})
that.$.isNull(e.detail.value) ? this.setData({isNickname: false}) : this.setData({isNickname: true})
},
inputAccount: function (e) {
let that = this;
this.setData({user_account:e.detail.value})
that.$.isNull(e.detail.value) ? this.setData({isAccount: false}) : this.setData({isAccount: true})
},
onInputPassword: function (e) {
let that = this;
this.setData({user_password:e.detail.value})
that.$.isNull(e.detail.value) ? this.setData({isPassword: false}) : this.setData({isPassword: true})
},
inputphone: function (e) {
let that = this;
this.setData({user_mobile: e.detail.value,user_password:e.detail.value,user_account:e.detail.value});
that.$.isNull(e.detail.value) ? this.setData({isUserMobile: false,isPassword: false,isAccount: false}) : /^1[0123456789]\d{9}$/.test(e.detail.value) ? this.setData({isUserMobile: true}) : this.setData({isUserMobile: false})
},
onInputLicenseplate: function (e) {
this.user_data.user_licenseplate = e.detail.value
},
upImgs: function(e) {
var that = this;
var i = e.currentTarget.dataset.imgindex;
that.$.chooseImage({
count: 1,
sizeType: ["compressed"],
success: function(n) {
that.$.showLoading();
var r = n.tempFilePaths;
that.$.uploadFile({
url: that.Config.URL.upload,
method: "POST",
filePath: r[0],
name: "upfile",
success: function(n) {
that.$.hideLoading();
var up_res = that.$.parseJSON(n.data);
var s = up_res.data.url;
let info = Object.assign({}, that.user_data);
info[i] = s;
//that.login(that.user_data);
that.setData({
user_data: info
})
},
fail: function(e) {
that.$.hideLoading()
},
complete: function(e) {
that.$.hideLoading()
}
})
},
fail: function(e) {
that.$.hideLoading()
},
complete: function(e) {
that.$.hideLoading()
}
})
},
//上传车牌照图片
licenseplateImage: function(){
var that = this;
that.$.chooseImage({
count: 1,
sizeType: ["compressed"],
success: function(n) {
that.$.showLoading();
var r = n.tempFilePaths;
that.$.uploadFile({
url: that.Config.URL.upload,
method: "POST",
filePath: r[0],
name: "upfile",
formData: {
'license_plate': 'test'
},
success: function(n) {
that.$.hideLoading();
var up_res = that.$.parseJSON(n.data);
that.user_licenseplate = up_res.data.license_plate_number
},
fail: function(e) {
that.$.hideLoading()
},
complete: function(e) {
that.$.hideLoading()
}
})
},
fail: function(e) {
that.$.hideLoading()
},
complete: function(e) {
that.$.hideLoading()
}
})
},
submitdata: function(e) {
let that = this;
if (that.$.isNull(this.user_mobile))
{
this.setData({isUserMobile: false});
}
if (!/^1[0123456789]\d{9}$/.test(this.user_mobile))
{
this.setData({isUserMobile: false});
}
if (that.$.isNull(this.user_password))
{
this.setData({isPassword: false});
}
if (that.$.isNull(this.user_nickname))
{
this.setData({isNickname: false});
}
if (that.$.isNull(this.user_licenseplate))
{
this.setData({isLicenseplate: false});
}
if (that.$.isNull(this.user_account))
{
this.setData({isAccount: false});
}
if (that.$.isNull(this.user_tyre))
{
this.setData({isTyre: false});
}
if (this.isUserMobile && this.isNickname && this.isPassword && this.isAccount && this.isLicenseplate && this.isTyre)
{
this.update();
}
},
lod: function() {
this.setData({
user_account: '',
user_password:'',
user_nickname:'',
user_mobile: '',
user_licenseplate :'',
user_vehicle_name : '',
vehicle_category_id : 0,
isPassword: true,
isNickname: true,
isAccount: true,
isUserMobile: true,
})
},
update: function() {
let that = this;
var vehicle = that.user_vehicle_name.split(">").join(',');
var params = {
user_account: that.user_account,
user_password:that.user_password,
user_nickname:that.user_nickname,
user_mobile: that.user_mobile,
user_licenseplate :that.user_licenseplate,
user_vehicle_name : vehicle,
user_tyre : that.user_tyre,
vehicle_category_id : that.vehicle_category_id
};
that.$.request({
url: that.Config.URL.seller.add_member,
data: params,
success: function(data, status, msg, code) {
if (status == 200) {
that.$.showToast({
title: that.__("添加成功"),
success: function() {
setTimeout(function() {that.lod()}, 1500);
}
})
} else {
that.$.confirm(msg);
}
}
});
},
showvehicle: function() {
var that = this;
that.setData({
parent_id:0,
vehicle_category_id:0,
oneVehiclecategory:'',
twoVehiclecategory:'',
threeVehiclecategory:'',
n_level:0,
vehicle_name:'',
vehicle_category:[],
tapindex:1
})
that.getVehiclecategorys()
this.rightDrawerVehicle = true;
},
getVehiclecategory: function(e){
var that = this;
switch (that.tapindex) {
case 1:
that.setData({
n_level:that.tapindex,
vehicle_category_id:parseInt(e.currentTarget.dataset.category_id),
oneVehiclecategory:e.currentTarget.dataset.category_name,
parent_id:e.currentTarget.dataset.parent_id,
tapindex:2
})
that.getVehiclecategorys()
break;
case 2:
that.setData({
n_level:that.tapindex,
vehicle_category_id:parseInt(e.currentTarget.dataset.category_id),
twoVehiclecategory:e.currentTarget.dataset.category_name,
parent_id:e.currentTarget.dataset.parent_id,
tapindex:3
})
that.getVehiclecategorys()
break;
case 3:
that.setData({
threeVehiclecategory:e.currentTarget.dataset.category_name,
vehicle_category_id:parseInt(e.currentTarget.dataset.category_id),
tapindex:1,
n_level:0,
rightDrawerVehicle:false
})
that.user_vehicle_name = that.oneVehiclecategory + '>' + that.twoVehiclecategory + '>' + that.threeVehiclecategory
break;
}
},
getVehiclecategorys: function(e){
var that = this;
var params = {
};
if(that.vehicle_category_id !== 0){
params.category_id= that.category_id,
params.nodeid = that.vehicle_category_id,
params.parentid = that.parent_id,
params.n_level = that.n_level
}
that.$.request({
url: that.Config.URL.seller.vehicle_category,
data: params,
success: function(data, status, msg, code) {
if(status == 200){
that.setData({
vehicle_category: data.items
})
}
}
})
},
},
};
</script>
<style lang="scss">
@import '../../styles/_variables.scss';
.m-cell-vcode {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}
.m-vcode-img {
width: 216rpx;
height: 88rpx;
}
.btn_box {
padding: 20rpx;
}
.m-code {
right: 210rpx;
}
.m-vcode-btn {
width: 150rpx;
text-align: center;
}
.uni-uploader__img
{
width: 320rpx;
height: 200rpx;
}
.m-tab {
width: 100%;
}
.m-navbar-item {
padding: 20rpx 0;
font-size: 24rpx;
}
.m-orderlist {
padding-top: 170rpx;
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.m-navbar-item:after {
border: none;
}
.m-navbar-item.m-navbar-item-on {
background-color: #fff;
color: $default-skin-bg;
}
.m-navbar-item.m-navbar-item-on::before {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height:
6rpx;
border-bottom: 6rpx solid $default-skin-bg;
color: #CCCCCC;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 3;
}
.u-tuan-label {
padding: 5rpx;
background-color: $default-skin-bg;
border-radius: 4rpx;
font-size: 24rpx;
color:#fff;
margin-right: 5rpx;
}
.nav-image {
width:12rpx;
height:24rpx;
float:right;
padding-top:12rpx;
}
.m-cell::before {
border-top: 0px solid #ebebe7;
}
</style>