<template>
|
<view class="coreshop-bg-white">
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="店铺设置" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<view class="coreshop-padding-10 ">
|
<u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
|
<u-form-item label="店铺名称" prop="storeName" borderBottom>
|
<u--input type="text" placeholder='请输入店铺名称' v-model="form.storeName" />
|
</u-form-item>
|
<u-form-item label="店铺Logo" borderBottom>
|
<image class='coreshop-avatar xl radius bg-gray' mode="aspectFill" :src="form.storeLogo" @click="uploadLogo"></image>
|
</u-form-item>
|
<u-form-item label="店铺简介" prop="storeDesc" borderBottom>
|
<u--textarea v-model="form.storeDesc" placeholder="请您在此描述问题(最多200字)" maxlength="200" count></u--textarea>
|
</u-form-item>
|
<u-form-item label="店铺招牌" borderBottom>
|
<!--<u-upload :action="upLoadAction" ref="uUpload" :file-list="fileList" max-count="3" :max-size="2 * 1024 * 1024" width="120" height="120" :header="header"></u-upload>-->
|
<u-upload :fileList="fileList1"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="1"
|
multiple
|
:maxSize="2 * 1024 * 1024"
|
width="200"
|
height="113"
|
:maxCount="3"></u-upload>
|
</u-form-item>
|
</u--form>
|
</view>
|
<!--按钮-->
|
<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
|
<u-button type="error" size="normal" @click="submitHandler">保存</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
|
export default {
|
data() {
|
return {
|
upLoadAction: this.$globalConstVars.apiBaseUrl + '/Api/Common/UploadImages',
|
header: {
|
'Accept': 'application/json',
|
'Content-Type': 'multipart/form-data',
|
'Authorization': 'Bearer ' + this.$db.get('userToken')
|
},
|
fileList1: [],
|
form: {
|
storeName: '',//店铺名称
|
storeLogo: '',
|
storeBanner: '',
|
storeDesc: '无',//店铺介绍
|
},
|
rules: {
|
storeName: [
|
{
|
required: true,
|
message: '请输入店铺名称',
|
trigger: ['blur', 'change']
|
}
|
],
|
storeDesc: [
|
{
|
required: true,
|
message: '请输入店铺简介',
|
trigger: ['blur', 'change']
|
}
|
]
|
}
|
}
|
},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
//this.fileList = this.$refs.uUpload.lists;
|
},
|
methods: {
|
// 删除图片
|
deletePic(event) {
|
this[`fileList${event.name}`].splice(event.index, 1)
|
},
|
// 新增图片
|
async afterRead(event) {
|
console.log(event);
|
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
let lists = [].concat(event.file)
|
let fileListLen = this[`fileList${event.name}`].length
|
lists.map((item) => {
|
this[`fileList${event.name}`].push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
})
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].thumb)
|
var jmResult = JSON.parse(result);
|
console.log(result);
|
let item = this[`fileList${event.name}`][fileListLen]
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
status: 'success',
|
message: '',
|
url: jmResult.data.src
|
}))
|
fileListLen++
|
}
|
},
|
uploadFilePromise(url) {
|
return new Promise((resolve, reject) => {
|
let a = uni.uploadFile({
|
url: this.upLoadAction, // 仅为示例，非真实的接口地址
|
fileType: 'image',
|
filePath: url,
|
header: {
|
'Accept': 'application/json',
|
'Content-Type': 'multipart/form-data',
|
'Authorization': 'Bearer ' + this.$db.get('userToken')
|
},
|
name: 'file',
|
success: (res) => {
|
setTimeout(() => {
|
resolve(res.data)
|
}, 1000)
|
}
|
});
|
})
|
},
|
|
// 用户上传头像
|
uploadLogo() {
|
this.$upload.uploadFiles(null, res => {
|
if (res.status) {
|
this.form.storeLogo = res.data.src;
|
} else {
|
this.$u.toast(res.msg)
|
}
|
})
|
},
|
submitHandler() {
|
this.$refs.uForm.validate().then(res => {
|
if (!this.form.storeName || this.form.storeName == '') {
|
this.$u.toast('请填写店铺名称');
|
return;
|
}
|
if (this.fileList1.length <= 0) {
|
this.$u.toast('请上传店铺招牌');
|
return;
|
} else {
|
let images = [];
|
for (var i = 0; i < this.fileList1.length; i++) {
|
if (this.fileList1[i].url) {
|
images.push(this.fileList1[i].url);
|
} else if (this.fileList1[i].error == false) {
|
images.push(this.fileList1[i].response.data.fileUrl);
|
}
|
}
|
this.form.storeBanner = images.join(',');
|
}
|
if (!this.form.storeLogo) {
|
this.$u.toast('请上传店铺LOGO');
|
return;
|
}
|
this.$u.api.setDistributionStore({
|
storeName: this.form.storeName,
|
storeLogo: this.form.storeLogo,
|
storeBanner: this.form.storeBanner,
|
storeDesc: this.form.storeDesc
|
}).then(res => {
|
if (res.status) {
|
this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
|
} else {
|
this.$u.toast(res.msg);
|
}
|
});
|
}).catch(errors => {
|
uni.$u.toast('提交的数据校验失败，请输入合法信息！')
|
})
|
}
|
},
|
onLoad: function () {
|
var _this = this;
|
_this.$u.api.getDistributionInfo({ check_condition: false }).then(res => {
|
if (res.status) {
|
_this.form.storeName = res.data.storeName;
|
_this.form.storeDesc = res.data.storeDesc;
|
_this.form.storeLogo = res.data.storeLogo;
|
_this.form.storeBanner = res.data.storeBanner;
|
if (res.data.storeBanner) {
|
var arr = res.data.storeBanner.split(',');
|
for (var i = 0; i < arr.length; i++) {
|
_this.fileList1.push({
|
url: arr[i]
|
});
|
}
|
}
|
} else {
|
//报错了
|
_this.$u.toast(res.msg);
|
}
|
});
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
</style>
|
