Files
xdd-uniapp-new/pkg_join/views/shop.vue
T

921 lines
25 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>
<u--form
ref="shopForm"
:model="form"
errorType="toast"
labelWidth="216rpx"
>
<view
v-if="stateTitle && isDraft !== 1"
class="box-state"
>
<u-alert
:center="stateType === 'primary'"
:title="stateTitle"
:type="stateType"
/>
</view>
<u-cell-group
:border="false"
:customStyle="{'fontSize':'40rpx'}"
title="店铺基本信息"
>
<u-form-item prop="name">
<u-cell title="店铺名称" :border="false">
<template #icon>
<text class="required">*</text>
</template>
<template #value>
<u-input
v-model="form.name"
:disabled="reviewing"
border="none"
placeholder="请填写店铺名称"
/>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="coverType">
<u-cell title="封面类型" :border="false">
<template #icon>
<text class="required">*</text>
</template>
<template #value>
<u-radio-group
v-model="form.coverType"
:disabled="reviewing"
placement="row"
>
<u-radio
:name="1"
:customStyle="{marginRight: '16px'}"
active-color="red"
label="图片"
/>
<u-radio
:name="2"
active-color="red"
label="视频"
/>
</u-radio-group>
</template>
</u-cell>
</u-form-item>
<u-form-item v-if="form.coverType === 1" prop="cover">
<u-cell title="店铺图片封面" :border="false">
<template #icon>
<text class="required">*</text>
</template>
</u-cell>
<u-cell :border="false">
<template #title>
<view
class="box-upload"
@click="chooseLogoImg('cover')"
>
<view
v-if="!form.cover"
class="btn-upload"
>上传图片</view>
<image
v-else
:src="form.cover"
class="img-preview"
/>
</view>
</template>
</u-cell>
</u-form-item>
<u-form-item v-if="form.coverType === 2" prop="coverVideo">
<u-cell title="店铺视频封面" :border="false">
<template #icon>
<text class="required">*</text>
</template>
</u-cell>
<u-cell :border="false">
<template #title>
<view
class="box-upload"
@click="chooseLogoVideo()"
>
<view
v-if="!form.coverVideo"
class="btn-upload"
>上传视频</view>
<video
v-else
:src="form.coverVideo"
:poster="form.coverVideo + '?vframe/jpg/offset/1'"
:controls="false"
play-btn-position="center"
class="video-item"
/>
</view>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="pics">
<u-cell title="店铺图片" :border="false">
<template #label>
<u-upload
:fileList="pics"
:maxCount="99999"
:disabled="reviewing"
name="pics"
multiple
@afterRead="afterRead"
@delete="deletePic"
/>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="logo">
<u-cell title="店铺logo" :border="false">
<template #icon>
<text class="required">*</text>
</template>
</u-cell>
<u-cell :border="false">
<template #title>
<view class="box-upload" @click="chooseLogoImg('logo')">
<view
v-if="!form.logo"
class="btn-upload"
>上传图片</view>
<image
v-else
:src="form.logo"
class="img-preview"
/>
</view>
</template>
</u-cell>
</u-form-item>
<view class="full-title">
<u-cell :border="false">
<template #title>
<view>
<text class="required" style="margin-right: 10rpx">*</text>
商家资质
<text class="font-color-red">请上传营业执照及行业相关资质证明</text>
</view>
</template>
<template #label>
<u-upload
:maxCount="9"
:fileList="quaPics"
:disabled="reviewing"
name="quaPics"
multiple
@afterRead="quaAfterRead"
@delete="quaDeletePic"
/>
</template>
</u-cell>
</view>
<u-form-item prop="typeText">
<u-cell title="店铺类型" :border="false" isLink>
<template #icon>
<text class="required">*</text>
</template>
<template #value>
<picker
:value="indexType"
:range="columnsType"
:disabled="reviewing"
mode=selector
range-key="name"
class="picker"
@change="typeChange"
>
<u--text v-if="form.typeText" :text="form.typeText"></u--text>
<u--text v-else text="请选择类型" color="#c0c4cc"></u--text>
</picker>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="contact">
<u-cell title="联系人姓名" :border="false">
<template #icon>
<text class="required">*</text>
</template>
<template #value>
<u-input
v-model="form.contact"
:disabled="reviewing"
border="none"
placeholder="请填写姓名"
/>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="phone">
<u-cell title="联系方式" :border="false">
<template #icon>
<text class="required">*</text>
</template>
<template #value>
<u-input
v-model="form.phone"
:disabled="reviewing"
maxlength="11"
type="number"
border="none"
placeholder="请填写联系方式"
/>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="captcha">
<u-cell title="验证码" :border="false">
<template #icon>
<text class="required">*</text>
</template>
<template #value>
<view class="captcha-wrap">
<view class="captcha-wrap-input">
<u-input
v-model="form.captcha"
:disabled="reviewing"
border="none"
placeholder="请填写验证码"
/>
</view>
<view v-if="!reviewing" class="captcha-wrap-ft">
<u-code
ref="uCode"
seconds="30"
changeText="X秒重新获取"
@change="codeChange"
/>
<u-button
:text="tips"
type="success"
size="normal"
@tap="getCode"
/>
</view>
</view>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="area">
<u-cell title="省市区" :border="false" isLink>
<template #icon>
<text class="required">*</text>
</template>
<template #value>
<view class="u-text__value" :class="{'area-item':form.area && form.area.length===0}">
<CitySelect
ref="cityselect"
:defaultValue="form.area || ''"
:disabled="reviewing"
:items="district"
@callback="result"
/>
</view>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="address">
<u-cell title="详细地址" :border="false">
<template #icon>
<text class="required">*</text>
</template>
<template #value>
<u-input
v-model="form.address"
:disabled="reviewing"
border="none"
placeholder="请填写详细地址"
/>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="position">
<u-cell
title="地理定位选择"
:border="false"
isLink
@click="chooLocation"
>
<template #icon>
<text class="required">*</text>
</template>
<template #value>
<u--text v-if="form.position" :text="form.position"></u--text>
<u--text v-else text="请选择" color="#c0c4cc"></u--text>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="serviceTime">
<u-cell title="营业时间" :border="false" isLink @click="showTimePicker">
<template #icon>
<text class="required">*</text>
</template>
<template #value>
<u--text :text="form.serviceTime + ' - ' + form.serviceEndTime"></u--text>
<tpf-time-range
startTime="00:00"
endTime="23:59"
:startDefaultTime="form.serviceTime"
:endDefaultTime="form.serviceEndTime"
ref="TimePickerPopupRef"
@timeRange="timeRange"
>
</tpf-time-range>
</template>
</u-cell>
</u-form-item>
<u-form-item prop="content">
<u-cell title="一句话介绍" :border="false">
<template #icon>
<text class="required">*</text>
</template>
</u-cell>
<view class="content-section">
<u-cell :border="false">
<template #title>
<view class="line">
<u-input
v-model="form.content"
:disabled="reviewing"
border="none"
placeholder="请填写一句话..."
/>
</view>
</template>
</u-cell>
</view>
</u-form-item>
<view style="height: 100rpx;width: 100%;"></view>
</u-cell-group>
<view
v-if="reviewStatus === 0 && isDraft !== 1"
class="btn-submit btn-remove"
@click="changeRemove(true)"
>
撤销申请
</view>
<view
v-else
class="btn-submit"
@click="onSubmit"
>
提交申请
</view>
<u-modal
:show="showRemove"
content="您确定撤销申请吗?"
showCancelButton
@cancel="changeRemove(false)"
@confirm="onRemove"
/>
<u-popup
:show="show"
mode="center"
round="10"
closeable
@close="show=false"
>
<view class="popup-body">
<view class="tc bold">入驻申请须知</view>
<view class="content">
<rich-text :nodes="notice" />
</view>
<view class="agree-box">
<checkbox-group @change="changeAgree">
<label>
<checkbox value="yes" style="transform:scale(0.8)"/>
</label>
<text>我已仔细阅读并同意</text>
</checkbox-group>
</view>
<u-button
type="error"
text="确定"
:disabled="!isAgree"
@click="handleAgree"
/>
</view>
</u-popup>
</u--form>
</template>
<script>
import TimePickerPopup from '@/components/timePickerPopup/time-picker-popup.vue';
import CitySelect from '@/components/CitySelect'
import { pageListenMixins } from '@/mixins/pageListenMixins'
import {
getShopData,
getShopInfo,
removeApply,
saveShop
} from '@/api/join'
import {
getCity,
registerVerify
} from '@/api/user'
import {
chooseImage,
moreImage,
uploadImage,
chooseVideoToUpload
} from '@/utils'
export default {
name: 'PkgJoinShop',
components: {
CitySelect,
TimePickerPopup
},
mixins: [pageListenMixins],
data() {
return {
partnerId: null,
pics: [],
quaPics: [],
tips: '获取验证码',
form: {
name: '',
cover: '',
coverVideo: '',
coverType: 1, // coverType: 1-图片,2-视频
logo: '',
qualification: '',
type: 0,
typeText: '',
phone: '',
captcha: '',
area: '',
address: '',
position: '',
content: '',
serviceTime: '00:00',
serviceEndTime: '23:59'
},
rules: {
'name': {
type: 'string',
required: true,
message: '请填写店铺名称',
trigger: ['blur', 'change']
},
'cover': {
type: 'string',
required: true,
message: '请上传店铺图片封面',
trigger: ['blur', 'change']
},
'coverVideo': {
type: 'string',
required: true,
message: '请上传店铺视频封面',
trigger: ['blur', 'change']
},
'logo': {
type: 'string',
required: true,
message: '请上传店铺LOGO',
trigger: ['blur', 'change']
},
'typeText': {
type: 'string',
required: true,
message: '请选择店铺类型',
trigger: ['blur', 'change']
},
'contact': {
type: 'string',
required: true,
message: '请填写联系人姓名',
trigger: ['blur', 'change']
},
'phone': {
type: 'string',
required: true,
message: '请填写联系方式',
trigger: ['blur', 'change']
},
'captcha': {
type: 'string',
required: true,
message: '请填写验证码',
trigger: ['blur', 'change']
},
'area': {
type: 'string',
required: true,
message: '请选择所在省市',
trigger: ['blur', 'change']
},
'address': {
type: 'string',
required: true,
message: '请填写详细地址',
trigger: ['blur', 'change']
},
'position': {
type: 'string',
required: true,
message: '请选择定位信息',
trigger: ['blur', 'change']
},
'serviceTime': {
type: 'string',
required: true,
message: '请选择营业时间',
trigger: ['blur', 'change']
},
'content': {
type: 'string',
required: true,
message: '请填写介绍内容',
trigger: ['blur', 'change']
}
},
columnsType: [],
indexType: [0],
district: [],
address: {},
isAgree: false,
show: false,
notice: '',
showRemove: false,
isDraft: null,
reviewStatus: null,
stateTitle: '',
stateType: 'primary',
// 是否为审核中
reviewing: false,
pageKeyId: Object.freeze('merchantApplyHotel')
}
},
onLoad(options) {
this.partnerId = options.partnerId
const local_form = uni.getStorageSync('merchantApplyHotel' + '_form') || {}
this.quaPics = uni.getStorageSync('merchantApplyHotel' + '_quaPics') || []
if(!local_form.serviceTime) {
local_form.serviceTime = '00:00'
}
if(!local_form.serviceEndTime) {
local_form.serviceEndTime = '23:59'
}
this.form = !this.reviewing ? local_form : {
name: '',
cover: '',
coverVideo: '',
coverType: 1, // coverType: 1-图片,2-视频
logo: '',
qualification: '',
type: 0,
typeText: '',
phone: '',
captcha: '',
area: '',
address: '',
position: '',
content: '',
serviceTime: '00:00',
serviceEndTime: '23:59'
}
this.init()
},
onUnload() {
uni.setStorageSync('merchantApplyHotel'+'_quaPics', this.quaPics)
uni.setStorageSync('merchantApplyHotel' + '_form', this.form)
},
onReady() {
this.$refs.shopForm.setRules(this.rules)
},
methods: {
handleAgree(){
this.show = false
},
timeRange(e) {
this.form.serviceTime = e[0]
this.form.serviceEndTime = e[1]
this.$forceUpdate()
},
showTimePicker() {
this.$refs.TimePickerPopupRef.open()
},
changeRemove(state){
this.showRemove = state
},
codeChange(text) {
this.tips = text
},
getCode() {
if (this.reviewing) return
if (!this.form.phone) {
uni.$u.toast('请输入手机号')
return
}
if (this.form.phone.length !== 11) {
uni.$u.toast('请输入11位手机号')
return
}
if (this.$refs.uCode.canGetCode) {
uni.showLoading({
title: '正在获取验证码'
})
registerVerify({
phone: this.form.phone,
type: 'merchantApply'
}).then(() => {
uni.hideLoading()
// 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast('验证码已发送')
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start()
}).catch(err => {
uni.hideLoading()
uni.$u.toast(err.msg)
})
} else {
uni.$u.toast('倒计时结束后再发送')
}
},
init() {
getCity().then(({data}) => {
this.district = data
})
getShopData().then(({data}) => {
this.columnsType = data.hotelTypeList
this.notice = data.merchantApplyNotice
this.initInfo()
})
},
initInfo() {
getShopInfo().then(({data}) => {
if (data.partnerId != null) {
this.partnerId = data.partnerId
}
this.isDraft = data.isDraft
this.reviewStatus = data.reviewStatus
if(data.isDraft === null || data.isDraft === 1) {
this.show = true
}
if (data.isDraft !== 1) {
switch (data.reviewStatus) {
case 0:
this.stateTitle = '审核中'
this.stateType = 'primary'
this.reviewing = true
break
case 1:
this.reviewing = false
break
case 2:
this.stateTitle = '审核驳回:' + data.reviewMsg
this.stateType = 'error'
this.reviewing = false
break
}
}
if (data.hotelInfo) {
// 店铺图片
this.pics = []
this.form = data.hotelInfo
this.form.coverVideo = this.form.coverType === 2 ? this.form.cover : ''
const picsTemp = this.form.pics.split(',')
if (picsTemp.length > 0) {
picsTemp.map(item => {
if (item) {
this.pics.push({url: item})
}
})
}
// 商家资质
this.quaPics = []
const quaPicsTemp = this.form.qualification && this.form.qualification.split(',') || []
if (quaPicsTemp.length > 0) {
quaPicsTemp.map(item => {
if (item) {
this.quaPics.push({url: item})
}
})
}
this.indexType = this.columnsType.findIndex(item => item.id === this.form.type)
if (this.indexType !== -1) {
this.form.typeText = this.columnsType[this.indexType].name
}
this.form.position = this.$forceToDecimal(this.form.longitude, 6) + ',' + this.$forceToDecimal(this.form.latitude, 6)
this.form.area = `${this.form.provinceName} ${this.form.cityName} ${this.form.areaName}`
}
})
},
chooseLogoImg(target) {
if (this.reviewing) return
chooseImage(img => {
this.form[target] = img
})
},
chooseLogoVideo() {
if (this.reviewing) return
chooseVideoToUpload(path => {
this.form.coverVideo = path
this.$forceUpdate()
})
},
chooseShopImg() {
if (this.reviewing) return
const _this = this
let count = 0
moreImage(9, (img, total) => {
if (img) {
_this.pics.push(img)
count++
}
if (count === total) {
_this.form.pics = _this.pics.join(',')
}
})
},
// 删除图片
deletePic(event) {
this[`${event.name}`].splice(event.index, 1)
},
afterRead(event) {
const _this = this
if (event.file.length > 0) {
event.file.map(item => {
uploadImage(item.url, img => {
_this.pics.push({url: img})
})
})
}
},
quaDeletePic(event) {
this[`${event.name}`].splice(event.index, 1)
},
quaAfterRead(event) {
let that = this;
if (event.file.length > 0) {
event.file.map(item => {
uploadImage(item.url, img => {
that.quaPics.push({url: img})
})
})
}
},
typeChange(e) {
const idx = parseInt(e.detail.value)
this.columnsType.map((item, index) => {
if (index === idx) {
this.form.typeText = item.name
this.indexType = index
this.form.type = item.id
}
})
},
// 省市区
result(values) {
this.address = {
province: values.province.name || '',
city: values.city.name || '',
district: values.district.name || '',
provinceId: values.province.id,
cityId: values.city.id,
areaId: values.district.id
}
this.form.area = `${this.address.province} ${this.address.city} ${this.address.district}`
this.form.provinceId = values.province.id
this.form.cityId = values.city.id
this.form.areaId = values.district.id
},
// 定位
chooLocation() {
const _this = this
uni.chooseLocation({
success: function (res) {
_this.form.address = res.address
_this.form.longitude = _this.$forceToDecimal(res.longitude, 6)
_this.form.latitude = _this.$forceToDecimal(res.latitude, 6)
_this.form.position = _this.$forceToDecimal(res.longitude, 6) + ',' + _this.$forceToDecimal(res.latitude, 6)
}
})
},
onSubmit() {
if (this.reviewStatus === 0) return
if (this.quaPics.length === 0) {
uni.showToast({
title: '请上传营业执照',
icon: 'none'
})
return
}
this.$refs.shopForm.validate().then(res => {
// 校验通过
// this.show = true
this.save()
}).catch(errors => {
// 校验失败
console.log(errors)
})
},
onRemove() {
removeApply().then(res => {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 3000,
success: () => {
this.showRemove = false
setTimeout(() => {
uni.navigateBack()
}, 3000)
}
})
})
},
changeAgree(event) {
this.isAgree = event.detail.value.length > 0
},
save() {
this.form.pics = ''
const picsLength = this.pics.length
if (picsLength > 0) {
const tempArr = []
this.pics.map(item => {
item.url && tempArr.push(item.url)
})
this.form.pics = tempArr.join(',')
}
this.form.qualification = ''
const quaPicsLength = this.quaPics.length
if (quaPicsLength > 0) {
const tempArr = []
this.quaPics.map(item => {
item.url && tempArr.push(item.url)
})
this.form.qualification = tempArr.join(',')
}
const postData = Object.assign({}, this.form)
if (postData.coverType === 2) {
postData.cover = postData.coverVideo
}
saveShop(postData, this.partnerId).then(res => {
if (res.status === 200) {
uni.showToast({
title: '您的入驻申请已提交成功,请耐心等待审核',
icon: 'none',
success: () => {
this.initInfo()
this.show = false
}
})
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none',
success: () => {
this.show = false
}
})
})
}
}
}
</script>
<style lang="less">
@import "@/assets/css/pkg_join.less";
/deep/ .cityselect-nav {
.item {
font-size: 30rpx !important;
}
}
/deep/ .cityselect-item {
.cityselect-item-box {
font-size: 30rpx !important;
}
}
/deep/ .full-title {
.u-cell__title {
width: 100% !important;
}
}
.font-color-red {
font-size: 22rpx;
}
.video-item {
width: 80px;
height: 80px;
}
.captcha-wrap {
display: flex;
align-items: center;
.captcha-wrap-input {
flex: 1;
}
}
</style>