557 lines
16 KiB
Vue
557 lines
16 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="m-cells m-cells-form">
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd"><label class="u-label">{{__('入驻类型')}}</label></view>
|
||
<view class="m-cell-bd">
|
||
<picker mode="selector" @change="selectStoreType" :value="index" :range="store_type" range-key="name" style="float:right">
|
||
<label style="padding:0 40rpx;">{{store_type[index].name}}</label>
|
||
</picker>
|
||
</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" v-model="store_row.store_name" :placeholder="__('请输入店铺名称')" />
|
||
</view>
|
||
<div v-if="!(store_row.store_name)" class="m-cell-ft">
|
||
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
||
</div>
|
||
</view>
|
||
|
||
<view class="m-cell" v-if="false">
|
||
<view class="m-cell-hd"><label class="u-label">{{__('经营类目')}}</label></view>
|
||
<view class="m-cell-bd">
|
||
<picker mode="selector" @change="selectStoreCategory" :value="store_category_index" :range="store_category_rows" range-key="store_category_name" style="float:right">
|
||
<label style="padding:0 40rpx;">{{store_category_rows[store_category_index].store_category_name}}</label>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="m-cell" @click="chooseCategory">
|
||
<view class="m-cell-hd"><label class="u-label">{{__('经营类目')}}</label></view>
|
||
<view class="m-cell-bd">
|
||
<label>{{store_row.store_category_text}}</label>
|
||
</view>
|
||
<view v-if="(!store_row.store_category_id)" 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" v-model="store_row.company_name" :placeholder="__('请输入公司名称')" />
|
||
</view>
|
||
<div v-if="!(store_row.company_name)" class="m-cell-ft">
|
||
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
||
</div>
|
||
</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" v-model="store_row.bank_name" :placeholder="__('……银行……分行……支行')" />
|
||
</view>
|
||
<div v-if="!(store_row.bank_name)" class="m-cell-ft">
|
||
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
||
</div>
|
||
</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" v-model="store_row.bank_account_number" :placeholder="__('请输入银行账户')" />
|
||
</view>
|
||
<div v-if="!(store_row.bank_account_number)" class="m-cell-ft">
|
||
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
||
</div>
|
||
</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" v-model="store_row.contacts_name" :placeholder="__('请输入联系人')" />
|
||
</view>
|
||
<div v-if="!(store_row.contacts_name)" class="m-cell-ft">
|
||
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
||
</div>
|
||
</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" v-model="store_row.contacts_phone" :placeholder="__('请输入联系手机')" />
|
||
</view>
|
||
<div v-if="!(store_row.contacts_phone)" class="m-cell-ft">
|
||
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
||
</div>
|
||
</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" v-model="store_row.company_address" :placeholder="__('请输入企业地址')" />
|
||
</view>
|
||
<div v-if="!(store_row.company_address)" class="m-cell-ft">
|
||
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
||
</div>
|
||
</view>
|
||
|
||
|
||
<view class="m-cell" @click="onSelectAddress">
|
||
<view class="m-cell-hd"><label class="u-label">{{__('省/市/区')}}</label></view>
|
||
<view class="m-cell-bd">
|
||
<label>{{store_row.company_area}}</label>
|
||
</view>
|
||
<view v-if="(!store_row.store_district_id)" class="m-cell-ft">
|
||
<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="m-cell" style="padding: 2rpx 30rpx">
|
||
<view class="m-cell-hd"><label class="u-label">{{__('营业执照')}}</label></view>
|
||
<view class="m-cell-bd" style="padding: 0;margin: 0;line-height: 1;">
|
||
<view class="uni-uploader-body">
|
||
<view class="uni-uploader__files">
|
||
<block v-if="store_row.business_license_electronic">
|
||
<view class="uni-uploader__file">
|
||
<image class="uni-uploader__img" :src="store_row.business_license_electronic" :data-src="store_row.business_license_electronic" @click.stop="upImgs"></image>
|
||
</view>
|
||
</block>
|
||
<view class="uni-uploader__input-box" v-else>
|
||
<view class="uni-uploader__input" @click.stop="upImgs"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="m-cell" style="padding: 2rpx 30rpx">
|
||
<view class="m-cell-hd"><label class="u-label">{{__('其它证件')}}</label></view>
|
||
<view class="m-cell-bd" style="padding: 0;margin: 0;line-height: 1;">
|
||
<view class="uni-uploader-body">
|
||
<view class="uni-uploader__files">
|
||
<Attachment mode="create" :canUploadFile="true" :uploadFileUrl="Config.URL.upload_file" :heaer="header" :showProcess="true" :attachmentList.sync="attachmentList" @uploadSuccess="uploadSuccess" :styleObj="{'width':'208rpx', 'height':'208rpx', margin:'10rpx'}"></Attachment>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<button class="u-btn u-btn-default" @click="submitinfo">{{__('保存')}}</button>
|
||
|
||
<!-- 分类选择 -->
|
||
<storeCategory ref="storeCategory" :height="height" :type="2" @confirmCallback="confirmCallback">
|
||
</storeCategory>
|
||
|
||
|
||
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
@import "../../styles/_variables";
|
||
|
||
.btn_box {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.m-cell-bd switch {
|
||
float: right;
|
||
}
|
||
|
||
.m-cell-hd {
|
||
width: 180rpx;
|
||
}
|
||
|
||
.m-select-box-msk {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 3;
|
||
}
|
||
|
||
.m-select-box {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 300px;
|
||
background-color: #fff;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.u-select {
|
||
width: 100%;
|
||
height: 300px;
|
||
text-align: center;
|
||
}
|
||
|
||
.u-select .m-cell-bd {
|
||
width: 100%;
|
||
line-height: 50px;
|
||
font-size: 28rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.u-select .m-cell-bd label {
|
||
width: 100%;
|
||
}
|
||
|
||
.m-select-content {
|
||
position: relative
|
||
}
|
||
|
||
.m-close-panel {
|
||
height: 60rpx;
|
||
border-bottom: 1rpx solid #dfdfdf;
|
||
font-size: 24rpx;
|
||
text-align: right;
|
||
color: #73AE1F;
|
||
line-height: 60rpx;
|
||
box-sizing: border-box;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.m-cell-select-before .m-cell-bd {
|
||
padding: 0;
|
||
}
|
||
|
||
.m-icon-warn {
|
||
color: red;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
import {
|
||
mapMutations,
|
||
mapState
|
||
} from 'vuex'
|
||
|
||
|
||
import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
|
||
import $ from "../../helpers/util";
|
||
import Attachment from '@/components/jin-attachment/jin-attachment.vue';
|
||
import storeCategory from '@/components/shop/category.vue';
|
||
|
||
export default {
|
||
components: {
|
||
mpvueCityPicker,
|
||
storeCategory,
|
||
Attachment
|
||
},
|
||
data() {
|
||
return {
|
||
options: {},
|
||
|
||
height: '500px',
|
||
|
||
index: 0,
|
||
imageUrl: [],
|
||
store_type: [],
|
||
//store_category_index: 0,
|
||
//store_category_rows: [{store_category_id: 1001, store_category_name: '请选择经营类目'}],
|
||
|
||
store_row: {
|
||
store_name: '',
|
||
store_o2o_flag: 0,
|
||
store_category_id: 0,
|
||
store_category_text: '请选择经营类目',
|
||
company_name: '',
|
||
bank_name: '',
|
||
bank_account_number: '',
|
||
contacts_name: '',
|
||
contacts_phone: '',
|
||
|
||
store_district_id: '',
|
||
company_area: '请选择地址',
|
||
|
||
company_address: '',
|
||
business_license_electronic: '',
|
||
company_other_files: []
|
||
},
|
||
|
||
cityPickerValueDefault: [0, 0, 0],
|
||
themeColor: '#007AFF',
|
||
header: {
|
||
// 如果需要header，请上传
|
||
},
|
||
|
||
attachmentList: []
|
||
|
||
}
|
||
},
|
||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||
onLoad: function(options) {
|
||
uni.setNavigationBarTitle({
|
||
title: this.__('商家入驻')
|
||
});
|
||
|
||
|
||
this.store_type = [{
|
||
id: 0,
|
||
name: this.__('线上网店商家')
|
||
}, {
|
||
id: 1,
|
||
name: this.__('线下门店商家')
|
||
}];
|
||
this.store_row['store_category_text'] = this.__('请选择经营类目');
|
||
this.store_row['company_area'] = this.__('请选择地址');
|
||
|
||
|
||
var that = this;
|
||
this.setData({
|
||
options: options
|
||
});
|
||
|
||
this.forceUserInfo((user) => {
|
||
if (user) {
|
||
/*
|
||
if (user.user_level_id <= 1001)
|
||
{
|
||
that.$.showModal("只有店主才可激活店铺");
|
||
setTimeout(function () {
|
||
that.$.navigateBack(1, function () {
|
||
})
|
||
}, 2e3)
|
||
|
||
return;
|
||
}
|
||
*/
|
||
|
||
let params = {}
|
||
$.request({
|
||
url: this.Config.URL.user.joinIn.replace(/typ=e/, "typ=json"),
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
if (200 == status) {
|
||
that.store_row.store_category_id = data.store.store_category_id
|
||
|
||
that.store_category_rows = []
|
||
for (var p in data.store_category_rows) {
|
||
that.store_category_rows.push(data.store_category_rows[p])
|
||
|
||
if (data.store.store_category_id == data.store_category_rows[p].store_category_id) {
|
||
that.store_category_index = that.store_category_rows.length - 1;
|
||
that.store_row.store_category_id = that.store_category_rows[that.store_category_index].store_category_id
|
||
that.store_row.store_category_text = that.store_category_rows[that.store_category_index].store_category_name
|
||
}
|
||
}
|
||
|
||
that.store_row.store_name = data.store.store_name || ''
|
||
that.store_row.store_district_id = data.store.store_district_id || ''
|
||
that.store_row.store_area = data.store.store_area || ''
|
||
that.store_row.store_o2o_flag = data.store.store_o2o_flag || 0
|
||
that.index = data.store.store_o2o_flag || 0
|
||
|
||
if (data.company) {
|
||
that.store_row.company_name = data.company.company_name || ''
|
||
that.store_row.company_area = data.company.company_area || ''
|
||
that.store_row.store_area = data.store.store_area || data.company.company_area || ''
|
||
//that.store_row.bank_account_name = data.company.bank_account_name || ''
|
||
that.store_row.bank_name = data.company.bank_name || ''
|
||
that.store_row.bank_account_number = data.company.bank_account_number || ''
|
||
that.store_row.contacts_name = data.company.contacts_name || ''
|
||
that.store_row.contacts_phone = data.company.contacts_phone || ''
|
||
that.store_row.company_address = data.company.company_address || ''
|
||
that.store_row.business_license_electronic = data.company.business_license_electronic || ''
|
||
if (data.company.company_other_files) {
|
||
that.store_row.company_other_files = data.company.company_other_files.split(",")
|
||
} else {
|
||
that.store_row.company_other_files = []
|
||
}
|
||
}
|
||
|
||
that.attachmentList = []
|
||
if (that.store_row) {
|
||
for (var idx in that.store_row.company_other_files) {
|
||
let tmp = {};
|
||
|
||
tmp.url = that.store_row.company_other_files[idx]
|
||
tmp.fileName = that.store_row.company_other_files[idx]
|
||
tmp.type = that.$.isImg(tmp.url) ? 'image' : 'file'
|
||
|
||
that.attachmentList.push(tmp);
|
||
}
|
||
}
|
||
} else {}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
},
|
||
onBackPress() {
|
||
if (this.$refs.mpvueCityPicker.showPicker) {
|
||
this.$refs.mpvueCityPicker.pickerCancel();
|
||
return true;
|
||
}
|
||
},
|
||
onUnload() {},
|
||
|
||
methods: {
|
||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||
uploadSuccess(result) {
|
||
if (result.statusCode == 200) {
|
||
//上传成功的回调处理
|
||
uni.showToast({
|
||
title: this.__('上传成功'),
|
||
icon: 'none'
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: this.__('上传失败'),
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
console.info(this.attachmentList)
|
||
},
|
||
selectStoreType: function(e) {
|
||
this.index = e.detail.value;
|
||
this.store_row.store_o2o_flag = e.detail.value;
|
||
},
|
||
selectStoreCategory: function(e) {
|
||
this.store_category_index = e.detail.value;
|
||
this.store_row.store_category_id = this.store_category_rows[this.store_category_index].store_category_id;
|
||
},
|
||
submitinfo: function() {
|
||
var that = this;
|
||
|
||
if (that.store_row.business_license_electronic == '') {
|
||
that.$.alert(that.__('请上传营业执照'))
|
||
return;
|
||
}
|
||
|
||
|
||
for (var p in this.store_row) {
|
||
if (this.store_row[p] === '') {
|
||
//that.$.alert(p + '---')
|
||
|
||
that.$.alert(that.__('请填写完整资料！'))
|
||
|
||
return;
|
||
}
|
||
}
|
||
|
||
|
||
let params = this.store_row;
|
||
params.company_other_files = []
|
||
|
||
|
||
for (let i = 0; i < that.attachmentList.length; i++) {
|
||
that.imageUrl.push(that.attachmentList[i].url)
|
||
params.company_other_files = that.imageUrl.join(",");
|
||
}
|
||
|
||
|
||
that.$.request({
|
||
url: this.Config.URL.store.add,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
if (status == 200) {
|
||
that.$.showModal(that.__('申请成功,待审核'));
|
||
setTimeout(function() {
|
||
that.$.navigateBack(1, function() {})
|
||
}, 2e3)
|
||
} else {
|
||
that.$.alert(msg)
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
},
|
||
|
||
upImgs: function(e) {
|
||
var that = this;
|
||
let ukey = uni.getStorageSync('ukey');
|
||
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: {
|
||
'perm_key': ukey
|
||
},
|
||
success: function(n) {
|
||
that.$.hideLoading();
|
||
|
||
var up_res = that.$.parseJSON(n.data);
|
||
|
||
if (up_res.status == 200) {
|
||
var s = up_res.data.url;
|
||
|
||
that.store_row.business_license_electronic = s
|
||
that.$forceUpdate();
|
||
} else {
|
||
that.$.confirm(up_res.msg || that.__('发生错误'));
|
||
}
|
||
},
|
||
fail: function(e) {
|
||
that.$.hideLoading()
|
||
},
|
||
complete: function(e) {
|
||
that.$.hideLoading()
|
||
}
|
||
})
|
||
},
|
||
fail: function(e) {
|
||
that.$.hideLoading()
|
||
},
|
||
complete: function(e) {
|
||
that.$.hideLoading()
|
||
}
|
||
})
|
||
},
|
||
chooseCategory: function(e) {
|
||
let that = this;
|
||
|
||
this.height = '550rpx';
|
||
this.$refs.storeCategory.show();
|
||
},
|
||
//回调
|
||
confirmCallback: function(store_category_text, store_category_id) {
|
||
console.log(store_category_text);
|
||
console.log(store_category_id);
|
||
|
||
this.store_row.store_category_id = store_category_id;
|
||
this.store_row.store_category_text = store_category_text;
|
||
},
|
||
|
||
// 三级联动选择
|
||
onSelectAddress(e) {
|
||
this.$refs.mpvueCityPicker.show()
|
||
},
|
||
|
||
onCancel(e) {
|
||
//console.log(e)
|
||
},
|
||
|
||
onConfirm(e) {
|
||
let that = this;
|
||
|
||
let district_info = that.$.isNull(e.label.toString()) ? that.__('请选择地址') : e.label.toString();
|
||
this.store_row['company_area'] = district_info;
|
||
this.store_row['store_area'] = district_info;
|
||
this.store_row['store_district_id'] = that.sprintf('%d/%d/%d', e.value[0], e.value[1], e.value[2]);
|
||
}
|
||
}
|
||
};
|
||
</script> |