Files
xdd-uniapp-new/pagesInn/inn/innApply.vue
T

783 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="container" style="padding-bottom: 150rpx;">
<view class="base-info-section">
<text class="section-title">基本信息</text>
<view class="item is_required">
<view class="pictrue">
<image :src="webUrl+'/20210228103509027781.png'"/>
</view>
<view class="cell acea-row row-between row-middle">
<view class="cell-title">店铺名称</view>
<view class="cell-value">
<input type="text" v-model="innApplyInfo.name" placeholder="请输入店铺中文名称"
placeholder-style="font-size:24rpx;color:#C2C5CC;"/>
</view>
</view>
<!-- <text class="iconfont icon-jiantou"></text> -->
</view>
<view class="item is_required">
<view class="pictrue">
<image :src="webUrl+'/20210405104608775924.png'"/>
</view>
<view class="cell acea-row row-between row-middle" style="flex-wrap: nowrap;">
<view class="cell-title">店铺类型</view>
<view class="cell-value">
<picker :value="typeIndex" @change="typePickerChange" :range="typeRange">
<!-- <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-if="parseInt(innApplyInfo.type)>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 class="item is_required">
<view class="pictrue">
<image :src="webUrl+'/20210228103432722049.png'"/>
</view>
<view class="cell acea-row row-between row-middle">
<view class="cell-title">店铺省市区</view>
<view class="">
<CitySelect
ref="cityselect"
:defaultValue="addressText"
@callback="result"
:items="district"
></CitySelect>
</view>
</view>
<text class="iconfont icon-jiantou"></text>
</view>
<view class="item is_required">
<view class="pictrue">
<image :src="webUrl+'/20210228103348614918.png'"/>
</view>
<view class="cell acea-row row-between row-middle">
<view class="cell-title">详细地址</view>
<view class="cell-value">
<input type="text" v-model="innApplyInfo.address" placeholder="请输入详细地址"
placeholder-style="font-size:24rpx;color:#C2C5CC;"/>
</view>
</view>
</view>
<view class="item is_required">
<view class="pictrue">
<image :src="webUrl+'/20210228103518230014.png'"/>
</view>
<view class="cell acea-row row-between row-middle">
<view class="cell-title">联系电话</view>
<view class="cell-value">
<input type="text" v-model="innApplyInfo.tel" placeholder="请输入联系电话"
placeholder-style="font-size:24rpx;color:#C2C5CC;"/>
</view>
</view>
</view>
<view class="item is_required" @click="chooLocation()">
<view class="pictrue">
<image :src="webUrl+'/20210228103444957710.png'"/>
</view>
<view class="cell acea-row row-between row-middle" style="flex-wrap: nowrap;">
<view class="cell-title">地图定位选择</view>
<view v-if="innApplyInfo.position.length>0" class="cell-value" style="text-align: right;">
{{ innApplyInfo.position }}
</view>
</view>
<text class="iconfont icon-jiantou"></text>
</view>
</view>
<view class="base-info-section" style="margin-bottom: 150rpx !important;margin-top: 20rpx;">
<text class="section-title">详细信息</text>
<view class="item is_required" @click="chooseLogoImg()">
<view class="cell acea-row row-between row-middle">
<view class="cell-title">店铺LOGO</view>
<view class="">
<image style="width: 64rpx;height: 64rpx;"
:src="innApplyInfo.logo.length>0?innApplyInfo.logo:webUrl+'/20210228103411271415.png'"
mode=""></image>
</view>
</view>
<text class="iconfont icon-jiantou"></text>
</view>
<view class="item is_required" @click="chooseCoverImg()">
<view class="cell acea-row row-between row-middle">
<view class="cell-title">封面照片</view>
<view class="">
<image style="width: 64rpx;height: 64rpx;"
:src="innApplyInfo.cover.length>0?innApplyInfo.cover:webUrl+'/20210228103411271415.png'"
mode=""></image>
</view>
</view>
<text class="iconfont icon-jiantou"></text>
</view>
<view class="item" @click="chooseQrcodeImg()">
<view class="cell acea-row row-between row-middle" style="flex-wrap: nowrap;">
<view class="cell-title acea-row row-column">
<view class="">店主微信二维码</view>
<view style="color:#B9B9BC;font-size: 24rpx;">(注意不是商城二维码是个人微信二维码)</view>
</view>
<view class="">
<image style="width: 64rpx;height: 64rpx;"
:src="innApplyInfo.qrcode.length>0?innApplyInfo.qrcode:webUrl+'/20210228103411271415.png'"
mode=""></image>
</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 type="text" v-model="innApplyInfo.ownerName" 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 type="text" v-model="innApplyInfo.content" 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 type="text" v-model="innApplyInfo.tips" 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 class="">
<textarea style="height: 200rpx;color:#C2C5CC;" v-model="innApplyInfo.desc" placeholder="请输入店铺简介..."
placeholder-style="font-size:24rpx;color:#C2C5CC;"/>
</view>
</view>
</view>
<view class="item">
<view class="img-upload">
<tmUpload
:dataList="picsArray"
:upload_img_wh="uploadImgWH"
:url="uploadUrl"
:type='uploadType'
:header="uploadHeader"
@change="uploadedImgChange"/>
</view>
</view>
</view>
<view class="bottom-wrap acea-row row-between savepadding">
<view class="acea-row">
<view class="acea-row"
style="border-top: #BFBFBF;border-width: 1rpx;font-size: 24rpx;color: #BFBFBF;padding-left: 32rpx;">
<checkbox-group @change="agreementChange">
<label>
<checkbox :checked="isAgreementChecked" style="border-radius: 50%;transform:scale(0.7)"/>
<text>阅读并同意遵守</text>
</label>
</checkbox-group>
<text class="" style="margin-left: 4rpx;text-decoration: underline;" @tap="showPartnerAgreement">
店主合伙人协议条款
</text>
</view>
</view>
<view class="submit-btn" @tap="submit">提交申请</view>
</view>
</view>
</template>
<script>
import CitySelect from "@/components/CitySelect";
import tmUpload from '@/components/tm-upload/tm-upload.vue';
import {getCity} from "@/api/user";
import {chooseImage, isWeixin} from "@/utils";
import {getHomeData} from "@/api/public";
import {VUE_APP_API_URL} from "@/config"
import {getHotelTypeList, postHotelApply, postHotelReApply} from "@/api/inn.js";
let that;
export default {
components: {
CitySelect,
tmUpload
},
data() {
return {
partnerAgreement: '',
isAgreementChecked: true,
webUrl: this.$VUE_APP_RESOURCES_URL,
uploadUrl: VUE_APP_API_URL + '/api/upload',
uploadType: 'image',
uploadImgWH: (750 - 3 * 16 - 2 * 32) / 3.0,
uploadHeader: {
Authorization: "Bearer " + this.$store.getters.token
},
type: 0,//0-申请 -1-重新申请 2-修改
innHistory: {},//历史信息
picsArray: [],
typeList: [],//类型列表
typeIndex: 0,//选中的类型
typeRange: [],
uploadedFilesArray: [],
innApplyInfo: {
"address": "",
"areaId": 0,
"cityId": 0,
"provinceId": 0,
"content": "",
"cover": "",
"desc": "",
"logo": "",
"name": "",
"ownerName": "",
"pics": [],
"position": "",
"qrcode": "",
"tel": "",
"tips": "",
"type": "",
},//申请信息
district: [],
isWechat: isWeixin(),
addressText: ""
}
},
onShow: function () {
this.getHotelType();
},
onLoad: function (e) {
that = this;
this.type = e.type;
console.log('this.type', this.type);
var title = '申请我的店铺';
switch (this.type) {
case 0:
break;
case 1:
title = '修改店铺申请';
break;
case 2:
title = '修改店铺资料';
break;
default:
break;
}
;
//改变title
uni.setNavigationBarTitle({
title: title
});
//
if (e.hotel) {
//赋值
var hotel = JSON.parse(e.hotel);
this.innHistory = hotel;
this.fillData(this.innApplyInfo, this.innHistory);
//Object.assign(this.innApplyInfo,hotel);
this.addressText = this.innHistory.provinceName + " " + this.innHistory.cityName + " " + this.innHistory.areaName;
//图片填充
this.picsArray = hotel.pics.map(function (item) {
var obj = {
path: item,
upload_percent: 100
}
return obj;
});
}
this.getCityList();
//this.fetchCompanyData()
},
methods: {
agreementChange: function (e) {
this.isAgreementChecked = !this.isAgreementChecked;
},
showPartnerAgreement: function () {
this.$yrouter.push('/pagesInn/inn/innPartnerAgreement');
},
fetchCompanyData: function () {
var that = this;
getHomeData().then(res => {
// that.buyNotice = res.data.buyNotice;
that.partnerAgreement = res.data.partnerAgreement.replace(
/\<img/gi,
'<img style="max-width:100%;height:auto;"'
);
});
},
typePickerChange: function (e) {
this.typeIndex = e.target.value;
//修改type
if (this.typeList.length > 0) {
this.$set(this.innApplyInfo, 'type', this.typeList[this.typeIndex].id);
//this.$forceUpdate();
console.log("type:" + this.innApplyInfo.type);
}
},
getHotelType: function () {
getHotelTypeList().then((res) => {
that.typeList = res.data;
//构建数据源
that.typeRange = [];
that.typeList.forEach((item, index) => {
that.typeRange.push(item.name);
});
//重新填写模式预填充type
if (that.type == 1 && Object.keys(that.innHistory).length != 0) {
for (var i = 0; i < that.typeList.length; i++) {
var item = that.typeList[i];
//找到类型id相同的索引
if (item.id === that.innHistory.type) {
that.typeIndex = i;
//设置type
if (that.typeList.length > 0) {
that.$set(that.innApplyInfo, 'type', item.id);
}
break;
}
}
}
}).catch((err) => {
}).finally(() => {
})
},
fillData: function (target, source) {
//var keys = Object.keys(target);
Object.keys(target).forEach((value, key) => {
target[value] = source[value];
console.log('key:' + value);
});
//预填充type
for (var i = 0; i < this.typeList.length; i++) {
var item = this.typeList[i];
//找到类型id相同的索引
if (item.id === that.innHistory.type) {
this.typeIndex = i;
//设置type
if (this.typeList.length > 0) {
this.$set(this.innApplyInfo, 'type', item.id);
}
break;
}
}
},
result(values) {
console.log(values);
// this.address = {
// province: values.province.name || "",
// city: values.city.name || "",
// district: values.district.name || "",
// city_id: values.city.id
// };
this.innApplyInfo.cityId = values.city.id;
this.innApplyInfo.provinceId = values.province.id;
this.innApplyInfo.areaId = values.district.id;
this.addressText = values.province.name + " " + values.city.name + " " + values.district.name;
//this.addressText = `${this.address.province} ${this.address.city} ${this.address.district}`;
},
chooLocation() {
uni.chooseLocation({
success: function (res) {
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
that.innApplyInfo.address = res.address;
that.innApplyInfo.position = that.$forceToDecimal(res.longitude, 6) + ',' + that.$forceToDecimal(res.latitude, 6);
}
});
},
getIndex(value, arr) {
var idx = -1;
for (var i = 0; i < arr.length; i++) {
if (arr[i].n == value) {
idx = i;
break;
}
}
return idx;
},
getCityList: function () {
let that = this;
getCity()
.then(res => {
that.district = res.data;
// that.ready = true;
// if(this.id){
// //设置city_id
// var pIdx = that.getIndex(that.address.province,that.district);
// if(pIdx>-1){
// var citys = that.district[pIdx].c;
// var cIdx = that.getIndex(that.address.city,citys);
// if(cIdx>-1){
// var city = citys[cIdx];
// that.address.city_id = city.v;
// console.log('city_id:'+city.v);
// }
// }
// }
})
.catch(err => {
that.$dialog.error(err.msg);
});
},
chooseQrcodeImg: function () {
chooseImage(img => {
console.log(img)
that.$set(that.innApplyInfo, 'qrcode', img);
});
},
chooseLogoImg: function () {
chooseImage(img => {
console.log(img)
that.innApplyInfo.logo = img;
});
},
chooseCoverImg: function () {
chooseImage(img => {
console.log(img)
that.innApplyInfo.cover = img;
});
},
//文件上传结果
uploadedImgChange: function (uploadedFilesList) {
this.uploadedFilesArray = uploadedFilesList;
},
submit: function () {
if (this.innApplyInfo.name.length == 0) {
this.$dialog.error("请输入店铺名称");
return;
}
if (this.innApplyInfo.type.length == 0) {
this.$dialog.error("请选择店铺类型");
return;
}
if (this.addressText.length == 0) {
this.$dialog.error("请选择店铺所在省市区");
return;
}
if (this.innApplyInfo.address.length == 0) {
this.$dialog.error("请输入店铺详细地址");
return;
}
if (this.innApplyInfo.tel.length == 0) {
this.$dialog.error("请输入店铺联系电话");
return;
}
if (this.innApplyInfo.position.length == 0) {
this.$dialog.error("请选择店铺地图定位坐标");
return;
}
if (this.innApplyInfo.logo.length == 0) {
this.$dialog.error("请上传店铺LOGO图片");
return;
}
if (this.innApplyInfo.cover.length == 0) {
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.tips.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;
}
if (this.isAgreementChecked == false) {
this.$dialog.error("请勾选同意店主合伙人协议条款");
return;
}
var param = {};
//深拷贝
param = JSON.parse(JSON.stringify(this.innApplyInfo));
if (this.uploadedFilesArray.length > 0) {
param.pics = this.uploadedFilesArray.join(',');
}
//设置type
if (this.typeList.length > 0) {
this.$set(this.innApplyInfo, 'type', this.typeList[this.typeIndex].id);
}
//提交请求
if (this.type == 0) {//申请
this.submitApplyInfo(param);
} else if (this.type == 1) {//重新申请
//如果是编辑,把id赋值
param.id = this.innHistory.id;
this.resubmitApplyInfo(param);
}
},
submitApplyInfo: function (param) {
uni.showLoading();
postHotelApply(param).then((res) => {
uni.hideLoading()
uni.showToast({
title: '提交成功!',
mask: false,
duration: 1500
});
//返回
setTimeout(function () {
that.$yrouter.back();
}, 1500);
}).catch((err) => {
uni.hideLoading()
uni.showToast({
title: err.msg,
icon: 'none',
mask: false,
duration: 1500
});
}).finally(() => {
})
},
resubmitApplyInfo: function (param) {
uni.showLoading();
postHotelReApply(param).then((res) => {
uni.hideLoading()
uni.showToast({
title: '提交成功!',
mask: false,
duration: 1500
});
//返回
setTimeout(function () {
that.$yrouter.back();
}, 1500);
}).catch((err) => {
uni.hideLoading()
var msg = '提交出错,请重试';
if (err.msg != null) {
msg = err.msg + '';
}
uni.showToast({
title: msg,
icon: 'none',
mask: false,
duration: 1500
});
}).finally(() => {
})
}
}
}
</script>
<style scoped lang="less">
.base-info-section {
padding: 32rpx;
background: #FFFFFF;
}
.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;
align-self: flex-end;
}
.base-info-section .item.is_required .cell .cell-title::before {
content: "*";
color: #ff4949;
margin-right: 4rpx;
}
// .bottom-cover{
// position: fixed;
// height: 86rpx;
// width: 100%;
// left: 0;
// right: 0;
// bottom: 0;
// }
.bottom-wrap {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 86rpx;
width: 100%;
text-align: center;
line-height: 86rpx;
// margin: 50rpx auto 30rpx auto;
font-size: 32rpx;
color: #fff;
background: #fff;
z-index: 2;
}
.submit-btn {
width: 160rpx;
text-align: center;
font-size: 32rpx;
color: #fff;
background: #0DC5C5;
}
</style>