562 lines
14 KiB
Vue
562 lines
14 KiB
Vue
<template>
|
|
<view class="index">
|
|
<view class="title_text">
|
|
基本信息
|
|
</view>
|
|
<view class="onecontent">
|
|
<view class="onecontent_item flex-between">
|
|
<view class="onecontent_itemleft">
|
|
门店logo
|
|
</view>
|
|
<view class="onecontent_itemright flex-start">
|
|
<view class="onecontent_itemrightimges flex-colum" v-if="!form.avatar" @click="chooseImagelist()">
|
|
+
|
|
</view>
|
|
<view v-else class="onecontent_itemrightimges flex-colum" @click="chooseImagelist()">
|
|
<image :src="form.avatar"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="onecontent_item flex-between">
|
|
<view class="onecontent_itemleft">
|
|
门店名称
|
|
</view>
|
|
<view class="onecontent_itemright flex-start">
|
|
<input class="onecontent_itemright_text" v-model="form.title" type="text" placeholder="请输入门店名称">
|
|
</view>
|
|
</view>
|
|
<view class="onecontent_item flex-between">
|
|
<view class="onecontent_itemleft">
|
|
门店ID
|
|
</view>
|
|
<view class="onecontent_itemright flex-start">
|
|
<input disabled class="onecontent_itemright_text" v-model="form.id" type="text" placeholder="001">
|
|
</view>
|
|
</view>
|
|
<view class="onecontent_item flex-between">
|
|
<view class="onecontent_itemleft">
|
|
营业时间
|
|
</view>
|
|
<view class="onecontent_itemright flex-start" @click="showpicker = true">
|
|
<text class="onecontent_itemright_text">{{form.b_hours || '请选择营业时间'}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="onecontent_item flex-between">
|
|
<view class="onecontent_itemleft">
|
|
联系人
|
|
</view>
|
|
<view class="onecontent_itemright flex-start">
|
|
<input class="onecontent_itemright_text" v-model="form.contacts" type="text" placeholder="请输入联系人">
|
|
</view>
|
|
</view>
|
|
<view class="onecontent_item flex-between">
|
|
<view class="onecontent_itemleft">
|
|
门店电话
|
|
</view>
|
|
<view class="onecontent_itemright flex-start">
|
|
<input class="onecontent_itemright_text" v-model="form.mobile" type="text" placeholder="请输入门店电话">
|
|
</view>
|
|
</view>
|
|
<view class="onecontent_item flex-between">
|
|
<view class="onecontent_itemleft">
|
|
详细地址
|
|
</view>
|
|
<view class="onecontent_itemright flex-start">
|
|
<input class="onecontent_itemright_text" v-model="form.address" type="text" placeholder="请输入详细地址">
|
|
</view>
|
|
</view>
|
|
<view class="onecontent_item flex-between">
|
|
<view class="onecontent_itemleft">
|
|
我的背景
|
|
</view>
|
|
<view class="onecontent_itemright flex-start">
|
|
<view class="onecontent_itemrightimges flex-colum" v-if="!form.my_background"
|
|
@click="chooseImagelists()">
|
|
+
|
|
</view>
|
|
<view v-else class="onecontent_itemrightimges flex-colum" @click="chooseImagelists()">
|
|
<image :src="form.my_background"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="title_text">
|
|
上传图片
|
|
</view>
|
|
<view class="onecontent" style="margin-left: 26rpx;">
|
|
<u-scroll-list :indicator="false">
|
|
<view v-for="(item, index) in form.bananer" :key="index" class="onecontentscroll">
|
|
<view class="onecontentscroll_item">
|
|
<image class="onecontentscroll_itemimage" :src="item"></image>
|
|
<view class="onecontentscrollicon" @click="remove(index)">
|
|
<u-icon name="close-circle-fill" color="#333" size="20"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="onecontentscrolllang" v-if="form.bananer.length<10" @click="add()">
|
|
<view class="onecontentscroll_item flex-colum">
|
|
<u-icon name="plus" color="#333" size="20"></u-icon>
|
|
</view>
|
|
</view>
|
|
</u-scroll-list>
|
|
</view>
|
|
<!-- <view class="onecontent_item flex-between" @click="chooseLocation">
|
|
<view class="onecontent_itemleft">
|
|
门店经纬度
|
|
</view>
|
|
<view class="onecontent_itemright flex-start">
|
|
<input disabled class="onecontent_itemright_text" v-model="lnglat" type="text" placeholder="门店经纬度">
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="baocun" @click="userstoreset">
|
|
保存
|
|
</view>
|
|
<u-picker :show="showpicker" @cancel='showpicker = false' ref="uPicker" :columns="columnspicker"
|
|
@confirm="confirm"></u-picker>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
sheetshow: false,
|
|
placeholder: '开始输入文章内容...',
|
|
editorCtx: '',
|
|
lnglat: '',
|
|
showpicker: false,
|
|
columnspicker: [
|
|
['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00',
|
|
'11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
|
|
'21:00', '22:00', '23:00', '24:00'
|
|
],
|
|
['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00',
|
|
'11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
|
|
'21:00', '22:00', '23:00', '24:00'
|
|
],
|
|
],
|
|
form: {
|
|
title: '',
|
|
details: '',
|
|
avatar: '',
|
|
my_background: '',
|
|
b_hours: '',
|
|
bananer: ''
|
|
}
|
|
}
|
|
},
|
|
async onLoad() {
|
|
try {
|
|
let res = await this.api.userstoredetail()
|
|
this.form = res.data
|
|
this.lnglat = res.data.lat + '-' + res.data.lng
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
mounted() {
|
|
this.$bus.$on('editors', this.demo)
|
|
},
|
|
methods: {
|
|
|
|
confirm(e) {
|
|
if (e.indexs[0] == e.indexs[1]) {
|
|
uni.showToast({
|
|
title: '选择时间不能相同'
|
|
})
|
|
} else {
|
|
console.log(e)
|
|
this.form.b_hours = e.value[0] + '-' + e.value[1]
|
|
this.showpicker = false
|
|
}
|
|
},
|
|
remove(e) {
|
|
console.log(e)
|
|
this.form.bananer.splice(e, 1)
|
|
},
|
|
add() {
|
|
uni.showLoading({
|
|
title: '上传中',
|
|
mask: true
|
|
})
|
|
uni.chooseImage({
|
|
count: 1, //默认9
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album'], //从相册选择
|
|
success: (res) => {
|
|
let file = res.tempFilePaths[0];
|
|
uploadImage(file, 'wechat/indexbananer/',
|
|
result => {
|
|
this.form.bananer.push(result)
|
|
uni.hideLoading()
|
|
}, result => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
fail: (res) => {
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
},
|
|
chooseLocation() {
|
|
uni.chooseLocation({
|
|
success: (res) => {
|
|
this.form.address = res.address
|
|
this.form.lat = res.latitude
|
|
this.form.lng = res.longitude
|
|
this.lnglat = res.latitude + '-' + res.longitude
|
|
console.log('位置名称：' + res.name);
|
|
console.log('详细地址：' + res.address);
|
|
console.log('纬度：' + res.latitude);
|
|
console.log('经度：' + res.longitude);
|
|
},
|
|
fail: (res) => {
|
|
console.log(res)
|
|
}
|
|
});
|
|
},
|
|
demo(data) {
|
|
this.form.details = data
|
|
},
|
|
demos() {
|
|
uni.pro.navigateTo('project/editor/editor', {
|
|
id: this.form.service_id
|
|
})
|
|
},
|
|
async userstoreset() {
|
|
console.log(this.form)
|
|
if (this.form.title == null || this.form.title == '') {
|
|
uni.showToast({
|
|
title: '商户名称不能为空',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.form.contacts == null || this.form.contacts == '') {
|
|
uni.showToast({
|
|
title: '请填写联系人',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.form.mobile == null || this.form.mobile == '') {
|
|
uni.showToast({
|
|
title: '手机号不能为空',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.form.address == null || this.form.address == '') {
|
|
uni.showToast({
|
|
title: '地址不能为空',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.form.avatar == null || this.form.avatar == '') {
|
|
uni.showToast({
|
|
title: '图片不能为空',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
let res = await this.api.userstoreset({
|
|
title: this.form.title,
|
|
contacts: this.form.contacts,
|
|
mobile: this.form.mobile,
|
|
address: this.form.address,
|
|
lng: this.form.lng,
|
|
lat: this.form.lat,
|
|
avatar: this.form.avatar,
|
|
background: this.form.my_background,
|
|
bananer: this.form.bananer.toString(),
|
|
b_hours: this.form.b_hours
|
|
});
|
|
if (res.code == 1) {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'none'
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1000);
|
|
}
|
|
},
|
|
async servicedelservice() {
|
|
var this_ = this
|
|
console.log(this.form.service_id)
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认删除该商品吗？',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
let data = await this.api.servicedelservice({
|
|
service_id: this.form.service_id
|
|
});
|
|
if (data.code == 1) {
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'none'
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1000);
|
|
}
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
// 上传
|
|
chooseImagelist() {
|
|
uni.showLoading({
|
|
title: '上传中',
|
|
mask: true
|
|
})
|
|
uni.chooseImage({
|
|
count: 1, //默认9
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album'], //从相册选择
|
|
success: (res) => {
|
|
let file = res.tempFilePaths[0];
|
|
uploadImage(file, 'wechat/store/',
|
|
result => {
|
|
this.form.avatar = ''
|
|
this.form.avatar = result
|
|
uni.hideLoading()
|
|
}, result => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
fail: (res) => {
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
},
|
|
// 上传
|
|
chooseImagelists() {
|
|
uni.showLoading({
|
|
title: '上传中',
|
|
mask: true
|
|
})
|
|
uni.chooseImage({
|
|
count: 1, //默认9
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album'], //从相册选择
|
|
success: (res) => {
|
|
let file = res.tempFilePaths[0];
|
|
uploadImage(file, 'wechat/store/',
|
|
result => {
|
|
this.form.my_background = ''
|
|
this.form.my_background = result
|
|
uni.hideLoading()
|
|
}, result => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
fail: (res) => {
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
},
|
|
onEditorReady() {
|
|
// #ifdef MP-BAIDU
|
|
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
|
|
// #endif
|
|
|
|
// #ifdef APP-PLUS || H5 ||MP-WEIXIN
|
|
uni.createSelectorQuery().select('#editor').context((res) => {
|
|
this.editorCtx = res.context
|
|
}).exec()
|
|
// #endif
|
|
},
|
|
undo() {
|
|
this.editorCtx.undo()
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #F6F6F6;
|
|
}
|
|
|
|
.index {
|
|
.title_text {
|
|
padding: 12rpx 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
|
|
#editor {
|
|
width: 100%;
|
|
height: 456rpx;
|
|
padding: 12rpx 40rpx;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.baocun {
|
|
margin: 40rpx auto;
|
|
width: 90%;
|
|
padding: 18rpx 0;
|
|
background: #6699FF;
|
|
text-align: center;
|
|
border-radius: 16rpx;
|
|
font-size: 32rpx;
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.onecontent {
|
|
background: #ffffff;
|
|
|
|
.onecontent_item {
|
|
width: 100%;
|
|
padding: 16rpx 46rpx;
|
|
border-bottom: 2rpx solid #E5E5E5;
|
|
|
|
.onecontent_itemleft {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
|
|
.onecontent_itemright {
|
|
flex: 3;
|
|
|
|
.onecontent_itemrighttext {
|
|
font-size: 24rpx;
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.onecontent_itemrightimges {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 10rpx;
|
|
font-size: 40rpx;
|
|
color: #878787;
|
|
|
|
image {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
}
|
|
}
|
|
|
|
.onecontent_itemright_text {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.flex-start {
|
|
.fourcontent {
|
|
.fourcontent_item {
|
|
position: relative;
|
|
margin-top: 16rpx;
|
|
margin-left: 20rpx;
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
border-radius: 16rpx;
|
|
|
|
image {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.fourcontent_itemtext {
|
|
position: absolute;
|
|
top: 0rpx;
|
|
right: 0rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.onecontent {
|
|
background: #ffffff;
|
|
padding-bottom: 20rpx;
|
|
|
|
.onecontentscrolls {
|
|
width: 564rpx;
|
|
height: 190rpx;
|
|
margin: 0 auto;
|
|
border-radius: 10rpx;
|
|
background: #f5f5f5;
|
|
|
|
.onecontentscrollsimage {
|
|
width: 564rpx;
|
|
height: 190rpx;
|
|
}
|
|
}
|
|
|
|
.onecontentone {
|
|
width: 694rpx;
|
|
text-align: center;
|
|
margin: 20rpx auto;
|
|
background: #6699FF;
|
|
border-radius: 16rpx;
|
|
padding: 18rpx 0;
|
|
font-size: 32rpx;
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.onecontentscrolllang {
|
|
padding: 28rpx 20rpx;
|
|
|
|
.onecontentscroll_item {
|
|
background: #f5f5f5;
|
|
border-radius: 10rpx;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
}
|
|
}
|
|
|
|
.onecontentscroll {
|
|
padding: 28rpx 20rpx;
|
|
|
|
.onecontentscroll_item {
|
|
position: relative;
|
|
|
|
.onecontentscroll_itemimage {
|
|
border-radius: 10rpx;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
}
|
|
|
|
.onecontentscrollicon {
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: -10rpx;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |