436 lines
12 KiB
Vue
436 lines
12 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="base-info-section">
|
|
<view
|
|
class="item is_required"
|
|
@click="chooseLogoImg()"
|
|
>
|
|
<view class="cell acea-row row-between row-middle">
|
|
<view class="cell-title">店铺LOGO</view>
|
|
<view>
|
|
<image
|
|
:src="innApplyInfo.logo ? innApplyInfo.logo : webUrl + '/20210228103411271415.png'"
|
|
class="img-item"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<text class="iconfont icon-jiantou"></text>
|
|
</view>
|
|
<view class="item is_required">
|
|
<view class="cell acea-row row-between row-middle">
|
|
<view class="cell-title">店铺类型</view>
|
|
<view class="cell-value">
|
|
<picker
|
|
:value="typeIndex"
|
|
:range="typeRange"
|
|
@change="typePickerChange"
|
|
>
|
|
<view style="text-align: right;font-size:24rpx;color:#C2C5CC;" v-if="typeList.length>0">
|
|
{{ typeList[typeIndex].name }}
|
|
</view>
|
|
<view style="text-align: right;font-size:24rpx;color:#C2C5CC;" v-else>请选择店铺类型</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<text class="iconfont icon-jiantou"></text>
|
|
</view>
|
|
<view v-if="innApplyInfo.coverType === 1" class="item is_required" @click="chooseCoverImg()">
|
|
<view class="cell acea-row row-between row-middle">
|
|
<view class="cell-title">封面照片</view>
|
|
<view>
|
|
<image
|
|
:src="innApplyInfo.cover ? innApplyInfo.cover : webUrl + '/20210228103411271415.png'"
|
|
class="img-item"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<text class="iconfont icon-jiantou"></text>
|
|
</view>
|
|
<view v-if="innApplyInfo.coverType === 2" class="item is_required" @click="chooseLogoVideo()">
|
|
<view class="cell acea-row row-between row-middle">
|
|
<view class="cell-title">封面视频</view>
|
|
<view>
|
|
<video
|
|
:src="innApplyInfo.coverVideo"
|
|
:poster="innApplyInfo.coverVideo + '?vframe/jpg/offset/1'"
|
|
:controls="false"
|
|
play-btn-position="center"
|
|
class="video-item"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<text class="iconfont icon-jiantou"></text>
|
|
</view>
|
|
<view class="item" @click="chooseQrcodeImg()">
|
|
<view class="cell acea-row row-between row-middle">
|
|
<view class="cell-title">微信二维码</view>
|
|
<view>
|
|
<image
|
|
:src="innApplyInfo.qrcode ? innApplyInfo.qrcode : webUrl + '/20210228103411271415.png'"
|
|
class="img-item"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<text class="iconfont icon-jiantou"></text>
|
|
</view>
|
|
<view class="item is_required">
|
|
<view class="cell acea-row row-between row-middle">
|
|
<view class="cell-title">店主名字</view>
|
|
<view class="cell-value">
|
|
<input
|
|
v-model="innApplyInfo.ownerName"
|
|
type="text"
|
|
placeholder="请输入店主名字"
|
|
placeholder-style="font-size:24rpx;color:#C2C5CC;"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item is_required">
|
|
<view class="cell acea-row row-between row-middle">
|
|
<view class="cell-title">一句话介绍</view>
|
|
<view class="cell-value">
|
|
<input
|
|
v-model="innApplyInfo.content"
|
|
type="text"
|
|
placeholder="店铺风格一句话描述"
|
|
placeholder-style="font-size:24rpx;color:#C2C5CC;"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="item is_required">
|
|
<view class="cell acea-row row-column">
|
|
<view class="cell-title">店铺简介</view>
|
|
<view>
|
|
<textarea
|
|
v-model="innApplyInfo.desc"
|
|
placeholder="请输入店铺简介..."
|
|
placeholder-style="font-size:24rpx;color:#C2C5CC;"
|
|
class="inp-textarea"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="item">
|
|
<view class="img-upload">
|
|
<tm-upload
|
|
:dataList="picsArray"
|
|
:upload_img_wh="(750 - 3 * 16 - 2 * 32) / 3.0"
|
|
:upload_max="10"
|
|
:url="uploadUrl"
|
|
:header="uploadHeader"
|
|
@change="uploadedImgChange"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="submit-btn" @tap="submit">确定修改</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CitySelect from '@/components/CitySelect'
|
|
import tmUpload from '@/pagesInn/components/tm-upload/tm-upload.vue'
|
|
import {
|
|
chooseImage,
|
|
chooseVideoToUpload
|
|
} from '@/utils'
|
|
import {VUE_APP_API_URL} from '@/config'
|
|
import {getHotelTypeList, postHotelInfoEdit} from '@/api/inn.js'
|
|
export default {
|
|
components: {
|
|
CitySelect,
|
|
tmUpload
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
uploadUrl: VUE_APP_API_URL + '/api/upload',
|
|
uploadHeader: {
|
|
Authorization: 'Bearer ' + this.$store.getters.token
|
|
},
|
|
innHistory: {}, // 历史信息
|
|
picsArray: [],
|
|
typeList: [], // 类型列表
|
|
typeIndex: 0, // 选中的类型
|
|
typeRange: [], // 类型数据源
|
|
uploadedFilesArray: [],
|
|
innApplyInfo: {
|
|
'address': '',
|
|
'areaId': 0,
|
|
'cityId': 0,
|
|
'provinceId': 0,
|
|
'content': '',
|
|
'cover': '',
|
|
'coverType': 1, // coverType: 1-图片,2-视频
|
|
'desc': '',
|
|
'logo': '',
|
|
'name': '',
|
|
'ownerName': '',
|
|
'pics': [],
|
|
'position': '',
|
|
'tel': '',
|
|
'qrcode': '',
|
|
'tips': '',
|
|
'type': ''
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getHotelType()
|
|
},
|
|
onLoad(options) {
|
|
const id = options.id
|
|
if (id) {
|
|
// 赋值
|
|
const hotel = JSON.parse(uni.getStorageSync('MY_HOTEL_INFO'))
|
|
this.innHistory = hotel
|
|
this.fillData(this.innApplyInfo, this.innHistory)
|
|
if (hotel.coverType === 2) {
|
|
this.innApplyInfo.coverVideo = hotel.cover
|
|
} else {
|
|
this.innApplyInfo.coverVideo = ''
|
|
}
|
|
// 图片填充
|
|
this.picsArray = hotel.pics.map(function (item) {
|
|
return {
|
|
path: item,
|
|
upload_percent: 100
|
|
}
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
typePickerChange: function (e) {
|
|
this.typeIndex = e.target.value
|
|
// 修改type
|
|
if (this.typeList.length > 0) {
|
|
this.$set(this.innApplyInfo, 'type', this.typeList[this.typeIndex].id)
|
|
}
|
|
},
|
|
getHotelType() {
|
|
const _this = this
|
|
getHotelTypeList().then((res) => {
|
|
_this.typeList = res.data
|
|
// 构建数据源
|
|
_this.typeRange = [];
|
|
_this.typeList.forEach((item, index) => {
|
|
_this.typeRange.push(item.name)
|
|
})
|
|
// 重新填写模式预填充type
|
|
const len = this.typeList.length
|
|
if (len > 0) {
|
|
for (let i = 0; i < len; i++) {
|
|
if (this.typeList[i].id === this.innHistory.type) this.typeIndex = i
|
|
}
|
|
}
|
|
})
|
|
},
|
|
fillData: function (target, source) {
|
|
Object.keys(target).forEach((value, key) => {
|
|
target[value] = source[value]
|
|
})
|
|
},
|
|
// 文件上传结果
|
|
uploadedImgChange: function (uploadedFilesList) {
|
|
this.uploadedFilesArray = uploadedFilesList
|
|
},
|
|
chooseQrcodeImg() {
|
|
chooseImage(img => {
|
|
this.$set(this.innApplyInfo, 'qrcode', img)
|
|
})
|
|
},
|
|
chooseLogoImg() {
|
|
chooseImage(img => {
|
|
this.$set(this.innApplyInfo, 'logo', img)
|
|
})
|
|
},
|
|
chooseLogoVideo() {
|
|
chooseVideoToUpload(path => {
|
|
this.$set(this.innApplyInfo, 'coverVideo', path)
|
|
})
|
|
},
|
|
chooseCoverImg() {
|
|
chooseImage(img => {
|
|
this.$set(this.innApplyInfo, 'cover', img)
|
|
})
|
|
},
|
|
submit() {
|
|
if (this.innApplyInfo.logo.length === 0) {
|
|
this.$dialog.error('请上传店铺LOGO图片')
|
|
return
|
|
}
|
|
if (this.innApplyInfo.cover.length === 0 && this.innApplyInfo.coverType === 1) {
|
|
this.$dialog.error('请上传店铺封面图片')
|
|
return
|
|
}
|
|
if (this.innApplyInfo.coverVideo.length === 0 && this.innApplyInfo.coverType === 2) {
|
|
this.$dialog.error('请上传店铺封面视频')
|
|
return
|
|
}
|
|
if (this.innApplyInfo.ownerName.length === 0) {
|
|
this.$dialog.error('请输入店主名字')
|
|
return
|
|
}
|
|
if (this.innApplyInfo.content.length === 0) {
|
|
this.$dialog.error('请输入一句话介绍')
|
|
return
|
|
}
|
|
if (this.innApplyInfo.desc.length === 0) {
|
|
this.$dialog.error('请输入店铺简介')
|
|
return
|
|
}
|
|
if (this.uploadedFilesArray.length === 0) {
|
|
this.$dialog.error('请上传至少一张店铺图片')
|
|
return
|
|
}
|
|
// 深拷贝
|
|
const param = JSON.parse(JSON.stringify(this.innApplyInfo))
|
|
if (this.uploadedFilesArray.length > 0) {
|
|
param.pics = this.uploadedFilesArray.join(',')
|
|
}
|
|
param.id = this.innHistory.id
|
|
if (param.coverType === 2) {
|
|
param.cover = param.coverVideo
|
|
}
|
|
uni.showLoading()
|
|
postHotelInfoEdit(param).then((res) => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '修改成功!',
|
|
mask: false,
|
|
duration: 1500
|
|
})
|
|
setTimeout(function () {
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
}).catch((err) => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: err.msg + '',
|
|
icon: 'none',
|
|
mask: false,
|
|
duration: 1500
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.base-info-section {
|
|
padding: 32rpx 32rpx 120rpx 32rpx;
|
|
background: #FFFFFF;
|
|
.img-item {
|
|
display: block;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
}
|
|
.video-item {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
}
|
|
.inp-textarea {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
color:#C2C5CC;
|
|
}
|
|
}
|
|
|
|
.base-info-section .section-title {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
color: #080F1A;
|
|
}
|
|
|
|
.base-info-section .item {
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
padding: 20rpx 0rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.base-info-section .item .iconfont {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.base-info-section .item::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
left: 0rpx;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
z-index: 1;
|
|
height: 1rpx;
|
|
}
|
|
|
|
.base-info-section .item .pictrue {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.base-info-section .item .cell {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.base-info-section .item .cell input {
|
|
text-align: right;
|
|
color: #C2C5CC;
|
|
}
|
|
|
|
.base-info-section .item .pictrue image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.base-info-section .item.is_required .cell .cell-title {
|
|
flex-shrink: 0;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.base-info-section .item.is_required .cell .cell-value {
|
|
flex-grow: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
.base-info-section .item.is_required .cell .cell-title::before {
|
|
content: "*";
|
|
color: #ff4949;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
|
|
.submit-btn {
|
|
height: 86rpx;
|
|
text-align: center;
|
|
line-height: 86rpx;
|
|
// margin: 50rpx auto 30rpx auto;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
background: #0DC5C5;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
bottom: 0;
|
|
}
|
|
|
|
</style>
|