332 lines
8.9 KiB
Vue
332 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="flex flex-between cell" @click="selectImg('logoImage')">
|
|||
|
|
<text class="name">店铺LOGO</text>
|
|||
|
|
<image :src="logoImage" mode="" class="img"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="list-item">
|
|||
|
|
<text class="label">店铺名称：</text>
|
|||
|
|
<input type="text" :maxlength="30" placeholder="请输入店铺名称" v-model="infor.name" class="input"/>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item">
|
|||
|
|
<text class="label">联系电话：</text>
|
|||
|
|
<input type="number" :maxlength="11" class="input" v-model="infor.mobile" placeholder="请输入店铺联系电话" />
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item" @click="visible = true">
|
|||
|
|
<text class="color-purple flex-grow label">{{pickerText||'选择省/市/区'}}</text>
|
|||
|
|
<text class="iconfont icon"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item" v-if="infor.addressDetails" @click="selectDetail">
|
|||
|
|
<text class="color-purple flex-grow label">{{infor.addressDetails}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item bor-no">
|
|||
|
|
<input type="text" :maxlength="50" class="input" v-model="infor.addressSupplement" placeholder="补充具体地址" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-column textarea">
|
|||
|
|
<text class="name">店铺简介：</text>
|
|||
|
|
<textarea :maxlength="80" placeholder="请输入您的店铺简介(80字以内)" v-model="infor.introduce" class="areaTxt" @keydown.enter="keydown" />
|
|||
|
|
<!-- <input type="text" placeholder="请输入您的店铺简介(80字以内)" :maxlength="80" v-model="infor.introduce" class="flex-grow font36"/> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-column textarea">
|
|||
|
|
<text class="name">店铺公告：</text>
|
|||
|
|
<textarea :maxlength="180" placeholder="请输入您的店铺公告(180字以内)" v-model="infor.notice" class="areaTxt" @keydown.enter="keydown" />
|
|||
|
|
<!-- <input type="text" placeholder="请输入您的店铺简介(80字以内)" :maxlength="80" v-model="infor.introduce" class="flex-grow font36"/> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="grid flex flex-between">
|
|||
|
|
<text>店铺背景图：</text>
|
|||
|
|
<view class="flex flex-center box" @click="uplodingImg('backgroundImage')">
|
|||
|
|
<text class="iconfont font60 color-b9" v-if="!backgroundImage"></text>
|
|||
|
|
<image :src="backgroundImage" mode="" class="image" v-else></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<button type="primary" class="bg-base btn" :loading="loading" :disabled="loading" @click="commit()">修改</button>
|
|||
|
|
<w-picker
|
|||
|
|
:visible.sync="visible"
|
|||
|
|
:value="positionValue"
|
|||
|
|
ref="mpvueCityPicker"
|
|||
|
|
mode="region"
|
|||
|
|
@confirm="onConfirm"
|
|||
|
|
themeColor="#3a2397"
|
|||
|
|
></w-picker>
|
|||
|
|
|
|||
|
|
<avatar @upload="myUpload" ref="avatar"></avatar>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import url from '@/common/http/url.js';
|
|||
|
|
import publics from "@/common/utils/public.js"
|
|||
|
|
import upload from "@/common/http/upload.js"
|
|||
|
|
import wPicker from "@/components/w-picker/w-picker.vue"
|
|||
|
|
import avatar from "@/components/yq-avatar/yq-avatar.vue";
|
|||
|
|
|
|||
|
|
export default{
|
|||
|
|
components: {
|
|||
|
|
wPicker, avatar
|
|||
|
|
},
|
|||
|
|
data(){
|
|||
|
|
return {
|
|||
|
|
loading: false,
|
|||
|
|
visible: false,
|
|||
|
|
pickerText: '',
|
|||
|
|
positionValue: [],
|
|||
|
|
infor: {},
|
|||
|
|
callbackList: [],
|
|||
|
|
logoImage: "",
|
|||
|
|
backgroundImage: "",
|
|||
|
|
addressInfo: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(){
|
|||
|
|
this.$http("GET", url.store.getStoreInfo).then(res=>{
|
|||
|
|
this.infor = res.data
|
|||
|
|
delete this.infor.createTime
|
|||
|
|
this.logoImage = res.data.logoImage
|
|||
|
|
this.backgroundImage = res.data.backgroundImage
|
|||
|
|
if (res.data.notice === 'null') {
|
|||
|
|
this.infor.notice = ""
|
|||
|
|
}
|
|||
|
|
let addrObj = publics.getLngAndLatByCode(res.data.threeAdcode)
|
|||
|
|
if (addrObj){
|
|||
|
|
this.pickerText = ""
|
|||
|
|
addrObj.map(v=>{
|
|||
|
|
this.pickerText = this.pickerText + v.name
|
|||
|
|
this.positionValue.push(v.name)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
async commit(){
|
|||
|
|
if (!this.infor.name){
|
|||
|
|
return this.$msg("请输入店铺名称")
|
|||
|
|
} else if (!this.infor.mobile){
|
|||
|
|
return this.$msg("请输入店铺联系电话")
|
|||
|
|
} else if (!this.infor.introduce){
|
|||
|
|
return this.$msg("请输入店铺简介")
|
|||
|
|
}
|
|||
|
|
this.loading = true
|
|||
|
|
let callbackList = this.callbackList
|
|||
|
|
for(let i = 0; i<callbackList.length; i++){
|
|||
|
|
let v = callbackList[i]
|
|||
|
|
let data = await upload.getOssSignature(v.path, 10, 1)
|
|||
|
|
let list = await upload.uploadImageOss(data)
|
|||
|
|
this.infor[v.name] = JSON.stringify({
|
|||
|
|
resourceTemporaryUUID: list[0].resourceTemporaryUUID,
|
|||
|
|
ossWidth: v.ossWidth,
|
|||
|
|
ossHeight: v.ossHeight,
|
|||
|
|
size: v.size
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.httpReq()
|
|||
|
|
},
|
|||
|
|
httpReq(){
|
|||
|
|
this.$http("POST", url.store.editStoreInfo, this.infor).then(res =>{
|
|||
|
|
this.$msg(res.data)
|
|||
|
|
this.$navigateBack(1, 500)
|
|||
|
|
}).catch(()=>{
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onConfirm(e) {
|
|||
|
|
let _this = this
|
|||
|
|
this.pickerText = e.result
|
|||
|
|
this.infor.oneAdcode = e.obj.province.value
|
|||
|
|
this.infor.twoAdcode = e.obj.city.value
|
|||
|
|
this.infor.threeAdcode = e.obj.area.value
|
|||
|
|
let addressInfo = e.obj.area
|
|||
|
|
this.addressInfo = addressInfo
|
|||
|
|
uni.chooseLocation({
|
|||
|
|
longitude: addressInfo.centerLng.toString(),
|
|||
|
|
latitude: addressInfo.centerLat.toString(),
|
|||
|
|
success(res) {
|
|||
|
|
if (res.address.startsWith(e.result)){
|
|||
|
|
_this.infor.addressDetails = res.address.split(e.result)[1]
|
|||
|
|
} else if (res.name === '地图位置' || res.name === res.address){
|
|||
|
|
_this.infor.addressDetails = res.address
|
|||
|
|
} else {
|
|||
|
|
_this.infor.addressDetails = res.name + res.address
|
|||
|
|
}
|
|||
|
|
_this.infor.lng = res.longitude
|
|||
|
|
_this.infor.lat = res.latitude
|
|||
|
|
_this.$forceUpdate()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selectDetail(){
|
|||
|
|
let _this = this
|
|||
|
|
uni.chooseLocation({
|
|||
|
|
longitude: _this.addressInfo.centerLng.toString(),
|
|||
|
|
latitude: _this.addressInfo.centerLat.toString(),
|
|||
|
|
success(res) {
|
|||
|
|
if (res.address.startsWith(_this.pickerText)){
|
|||
|
|
_this.infor.addressDetails = res.address.split(_this.pickerText)[1]
|
|||
|
|
} else if (res.name === '地图位置' || res.name === res.address){
|
|||
|
|
_this.infor.addressDetails = res.address
|
|||
|
|
} else {
|
|||
|
|
_this.infor.addressDetails = res.name + res.address
|
|||
|
|
}
|
|||
|
|
_this.infor.lng = res.longitude
|
|||
|
|
_this.infor.lat = res.latitude
|
|||
|
|
_this.$forceUpdate()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selectImg(){
|
|||
|
|
upload.showAvatarModal(this, 500, 500)
|
|||
|
|
},
|
|||
|
|
myUpload(rsp){
|
|||
|
|
let _this = this
|
|||
|
|
this.callbackList.forEach((v, i)=>{
|
|||
|
|
if (v.name === "logoImage") {
|
|||
|
|
this.callbackList.splice(i, 1)
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.logoImage = rsp.path
|
|||
|
|
uni.getImageInfo({
|
|||
|
|
src: rsp.path,
|
|||
|
|
success: function (image) {
|
|||
|
|
_this.callbackList.push({
|
|||
|
|
name: "logoImage",
|
|||
|
|
path: rsp.path,
|
|||
|
|
ossWidth: image.width,
|
|||
|
|
ossHeight: image.height
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
uplodingImg(name){
|
|||
|
|
let _this = this
|
|||
|
|
this.callbackList.forEach((v, i)=>{
|
|||
|
|
if (v.name === name) {
|
|||
|
|
this.callbackList.splice(i, 1)
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: 1,
|
|||
|
|
success: (res) => {
|
|||
|
|
let tempFilePath = res.tempFilePaths[0]
|
|||
|
|
_this[name] = tempFilePath
|
|||
|
|
uni.getImageInfo({
|
|||
|
|
src: tempFilePath,
|
|||
|
|
success: function (image) {
|
|||
|
|
_this.callbackList.push({
|
|||
|
|
name: name,
|
|||
|
|
path: tempFilePath,
|
|||
|
|
ossWidth: image.width,
|
|||
|
|
ossHeight: image.height,
|
|||
|
|
size: res.tempFiles[0].size
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
keydown(){
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.main{
|
|||
|
|
padding: 20rpx;
|
|||
|
|
.textarea{
|
|||
|
|
padding: 30rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
.areaTxt{
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.name{
|
|||
|
|
color: #555;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
.cell{
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
height: 130rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
.img{
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
width: 110rpx;
|
|||
|
|
height: 110rpx;
|
|||
|
|
background-color: #928add;
|
|||
|
|
overflow: hidden;
|
|||
|
|
.icon{
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.list{
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
&-item{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 120rpx;
|
|||
|
|
border-bottom: 2rpx solid #f5f3f7;
|
|||
|
|
color: #555;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
.input{
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
.icon{
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.cell{
|
|||
|
|
height: auto;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
.textarea{
|
|||
|
|
height: 200rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.grid{
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #555;
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
.box{
|
|||
|
|
width: 350rpx;
|
|||
|
|
height: 250rpx;
|
|||
|
|
border: 2rpx solid #EEEEEE;
|
|||
|
|
border-radius: 14rpx;
|
|||
|
|
.img{
|
|||
|
|
width: 187rpx;
|
|||
|
|
height: 111rpx;
|
|||
|
|
}
|
|||
|
|
.image{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.btn{
|
|||
|
|
margin: 50rpx 0;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|