新增门店管理店员管理营销推广码
This commit is contained in:
唐明明
327
pages/shop/create.vue
Normal file
327
pages/shop/create.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<view>
|
||||
<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="create-btns">
|
||||
<button class="item-btn btn-submit" type="default" @click="createShop">{{type === 'add' ? '创建': '保存'}}</button>
|
||||
<button class="item-btn btn-delete" type="default" @click="onDeleteShop" v-if="type === 'edit'">删除</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>
|
||||
// 门店信息
|
||||
.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>
|
||||
120
pages/shop/lists.vue
Normal file
120
pages/shop/lists.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<view class="lists">
|
||||
<block v-if="lists.length > 0">
|
||||
<view class="lists-item" v-for="(item, index) in lists" :key="index" @click="$Router.push({name: 'shopCreate', params: { id: item.store_id }})">
|
||||
<view class="header">
|
||||
<image class="logo" :src="item.cover" mode="aspectFill"></image>
|
||||
<view class="title">{{item.name}}</view>
|
||||
<view class="time"><text>营业时间{{item.start_time}} 至 {{item.end_time}}</text></view>
|
||||
<view class="icons">
|
||||
<uni-icons type="arrowright" color="#999" size="18"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="address">店铺地址：{{item.address}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="list-null">
|
||||
<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
|
||||
<view class="sub-title">暂未创建店铺/部门</view>
|
||||
<view class="sub-btn" @click="$Router.push({name: 'shopCreate'})">创建</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shops } from '@/apis/interfaces/shop'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lists: []
|
||||
};
|
||||
},
|
||||
onShow(){
|
||||
shops().then(res => {
|
||||
console.log(res)
|
||||
this.lists = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 空提示
|
||||
.list-null{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding-bottom: 20vh;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
text-align: center;
|
||||
@extend .vertical;
|
||||
.sub-title{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
.icon{
|
||||
width: 288rpx;
|
||||
}
|
||||
.sub-btn{
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
background: $mian-color;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
margin-top: $margin*2;
|
||||
}
|
||||
}
|
||||
// 列表
|
||||
.lists-item{
|
||||
background: white;
|
||||
margin: $margin;
|
||||
border-radius: $radius/2;
|
||||
padding: $padding;
|
||||
.header{
|
||||
position: relative;
|
||||
padding-left: 128rpx;
|
||||
padding-right: 100rpx;
|
||||
min-height: 108rpx;
|
||||
padding-bottom: $padding - 10;
|
||||
.logo{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.title{
|
||||
line-height: 60rpx;
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
.time{
|
||||
line-height: 40rpx;
|
||||
font-size: $title-size-sm;
|
||||
text{
|
||||
background-color: $border-color-lg;
|
||||
color: $text-gray;
|
||||
padding: 0 $padding/2;
|
||||
}
|
||||
}
|
||||
.icons{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: 108rpx;
|
||||
}
|
||||
}
|
||||
.address{
|
||||
border-top: solid 1rpx $border-color;
|
||||
padding-top: $padding - 10;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
left: 50rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user