377 lines
8.5 KiB
Vue
377 lines
8.5 KiB
Vue
<template>
|
|
<view class="basics-content">
|
|
<view class="create-form">
|
|
<view class="header">
|
|
<view @click="updLogo">
|
|
<image class="logo" style="border: none;" v-if="cover.showpath" :src="cover.showpath" mode="aspectFill" />
|
|
<image class="logo" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
|
|
</view>
|
|
<view class="inputs">
|
|
<input type="text" v-model="name" placeholder="门店/部门名称" />
|
|
</view>
|
|
<view class="inputs">
|
|
<input type="number" v-model="mobile" placeholder="门店联系电话" />
|
|
</view>
|
|
</view>
|
|
<view class="info">
|
|
<view class="inputs">
|
|
<label class="inputs-label">开店时间</label>
|
|
<picker mode="time" @change="pickerTime" :value="startTime" data-key="startTime">
|
|
<view class="time-text">
|
|
{{startTime || '选择开店时间'}}
|
|
<uni-icons class="time-icon" type="arrowdown" size="18" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="inputs">
|
|
<label class="inputs-label">闭店时间</label>
|
|
<picker mode="time" @change="pickerTime" :value="endTime" data-key="endTime">
|
|
<view class="time-text">
|
|
{{endTime || '选择闭店时间'}}
|
|
<uni-icons class="time-icon" type="arrowdown" size="18" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="inputs addrss-input">
|
|
<label class="inputs-label">门店地址</label>
|
|
<textarea class="inputs-textarea" v-model="address" placeholder="输入门店地址" auto-height/>
|
|
<view class="addrss-icon" @click="onLocation">
|
|
<uni-icons type="location-filled" size="20" color="#c82626"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="info">
|
|
<view class="inputs">
|
|
<label class="inputs-label">门店简介</label>
|
|
<textarea class="inputs-textarea" v-model="description" placeholder="门店简介..." />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="basisc-btn">
|
|
<button class="add-modules" type="default" @click="onDeleteShop" v-if="type === 'edit'">删除</button>
|
|
<button class="btn" type="default" @click="createShop">{{type === 'add' ? '创建': '保存'}}</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { create, putShop, deleteShop, editInfo } from '@/apis/interfaces/shop'
|
|
import { uploads } from '@/apis/interfaces/uploading'
|
|
export default {
|
|
data() {
|
|
return {
|
|
type : 'add',
|
|
id : '',
|
|
cover : {
|
|
showpath: '',
|
|
path : '',
|
|
},
|
|
name : '',
|
|
mobile : '',
|
|
address : '',
|
|
startTime : '',
|
|
endTime : '',
|
|
description : '',
|
|
latitude : '',
|
|
longitude : ''
|
|
};
|
|
},
|
|
onLoad() {
|
|
if(this.$Route.query.id){
|
|
this.type = 'edit'
|
|
this.getInfo()
|
|
}
|
|
},
|
|
methods:{
|
|
// 获取编辑信息
|
|
getInfo(){
|
|
editInfo(this.$Route.query.id).then(res => {
|
|
this.id = res.store_id
|
|
this.cover = res.cover
|
|
this.name = res.name
|
|
this.mobile = res.mobile
|
|
this.address = res.address
|
|
this.startTime = res.start_time
|
|
this.endTime = res.end_time
|
|
this.description= res.description
|
|
this.latitude = res.latitude
|
|
this.longitude = res.longitude
|
|
})
|
|
},
|
|
// 获取地址
|
|
onLocation(){
|
|
uni.chooseLocation({
|
|
success: res => {
|
|
this.address = res.address
|
|
this.longitude = res.longitude
|
|
this.latitude = res.latitude
|
|
},
|
|
fail: err => {
|
|
uni.showToast({
|
|
title: err,
|
|
icon : 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 选择营业时间
|
|
pickerTime(e){
|
|
this[e.target.dataset.key] = e.detail.value
|
|
},
|
|
// 编辑创建
|
|
createShop(){
|
|
let data = {
|
|
cover : this.cover.path,
|
|
name : this.name,
|
|
mobile : this.mobile,
|
|
address : this.address,
|
|
latitude : this.latitude,
|
|
longitude : this.longitude,
|
|
description : this.description,
|
|
start_time : this.startTime,
|
|
end_time : this.endTime
|
|
}
|
|
|
|
if(this.type === 'edit'){
|
|
putShop(this.id, {...data}).then(res => {
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : res,
|
|
showCancel : false,
|
|
success : modalRes => {
|
|
this.$Router.back()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
return
|
|
}
|
|
create({...data}).then(res => {
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : res,
|
|
showCancel : false,
|
|
success : modalRes => {
|
|
this.$Router.back()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 删除门店
|
|
onDeleteShop(){
|
|
deleteShop(this.id).then(res => {
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : res,
|
|
showCancel : false,
|
|
success : modalRes => {
|
|
this.$Router.back()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 上传logo
|
|
updLogo(){
|
|
uni.chooseImage({
|
|
crop: { width: 188, height: 188 },
|
|
success: path => {
|
|
uploads([{
|
|
name: 'logo',
|
|
uri : path.tempFilePaths[0]
|
|
}]).then(res => {
|
|
this.cover = {
|
|
showpath: res.url[0],
|
|
path: res.path[0]
|
|
}
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.basics-content{
|
|
padding-bottom: ($padding*3) + 90;
|
|
}
|
|
|
|
// 按钮组
|
|
.basisc-btn{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: $padding;
|
|
background: white;
|
|
margin-top: $margin - 10;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
|
.add-modules{
|
|
line-height: 86rpx;
|
|
height: 88rpx;
|
|
text-align: center;
|
|
color: $text-price;
|
|
background: white;
|
|
width: calc(50% - 15rpx);
|
|
margin-right: 30rpx;
|
|
border:solid 1rpx $mian-color;
|
|
box-sizing: border-box;
|
|
font-size: $title-size-lg;
|
|
.icon{
|
|
margin-right: $margin/3;
|
|
}
|
|
}
|
|
.btn {
|
|
background: $mian-color;
|
|
color: white;
|
|
border-radius: 8rpx;
|
|
font-size: $title-size-lg;
|
|
line-height: 88rpx;
|
|
height: 88rpx;
|
|
width: calc(50% - 15rpx);
|
|
&::after {
|
|
border: none;
|
|
}
|
|
|
|
&[disabled] {
|
|
background: rgba($color: $mian-color, $alpha: .6);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 门店信息
|
|
.create-form{
|
|
.header{
|
|
position: relative;
|
|
background: white;
|
|
padding-left: $padding + 150;
|
|
.logo{
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: $padding;
|
|
top: 26rpx;
|
|
border: dashed 2rpx $border-color;
|
|
box-sizing: border-box;
|
|
}
|
|
.inputs{
|
|
position: relative;
|
|
padding-right: $padding;
|
|
input,
|
|
.time-text{
|
|
line-height: 80rpx;
|
|
height: 80rpx;
|
|
font-size: $title-size-lg;
|
|
}
|
|
&::after{
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
content: " ";
|
|
height: 1rpx;
|
|
background: $border-color;
|
|
}
|
|
&:last-child::after{
|
|
display: none;
|
|
}
|
|
.time-text{
|
|
padding-right: 80rpx;
|
|
.time-icon{
|
|
position: absolute;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: right;
|
|
width: 80rpx;
|
|
right: $padding;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.info{
|
|
@extend .header;
|
|
margin-top: $margin;
|
|
padding-left: 0;
|
|
background: white;
|
|
.inputs{
|
|
padding-left: $padding + 150;
|
|
.inputs-label{
|
|
position: absolute;
|
|
left: $padding;
|
|
top: 0;
|
|
font-size: $title-size-lg;
|
|
line-height: 80rpx;
|
|
height: 80rpx;
|
|
width: 150rpx;
|
|
}
|
|
.inputs-textarea{
|
|
width: 100%;
|
|
padding: 20rpx 0;
|
|
height: 160rpx;
|
|
font-size: $title-size-lg;
|
|
line-height: 40rpx;
|
|
}
|
|
&.addrss-input{
|
|
padding-right: $padding + 100;
|
|
.addrss-icon{
|
|
position: absolute;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: right;
|
|
width: 80rpx;
|
|
right: $padding;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 按钮组
|
|
.create-btns{
|
|
padding: $padding;
|
|
.item-btn{
|
|
border-radius: 0;
|
|
background: white;
|
|
font-size: $title-size;
|
|
line-height: 90rpx;
|
|
height: 90rpx;
|
|
&::after{
|
|
border: none;
|
|
}
|
|
}
|
|
.btn-submit{
|
|
background: $text-price;
|
|
color: white;
|
|
font-weight: bold;
|
|
margin-bottom: $margin;
|
|
}
|
|
.btn-delete{
|
|
border: solid 1rpx $border-color;
|
|
color: $text-gray;
|
|
}
|
|
}
|
|
</style>
|