123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413 |
- <template>
- <view class='content'>
- <view class='wrap'>
- <u--form ref="uForm">
- <u-form-item labelWidth='80' labelPosition='top' label="营业执照">
- <u-upload height='208' width='320' :fileList="fileList2" @afterRead="afterRead($event,1)" @delete="deletePic" name="2" multiple
- :maxCount="1">
- <image style='width:680rpx;height:417rpx;' src="@/static/image/enter/yingyezhizhao.png" mode=""></image>
- </u-upload>
- </u-form-item>
- <u-form-item labelWidth='80' labelPosition='top' label="经营许可证">
- <u-upload height='208' width='320' :fileList="fileList3" @afterRead="afterRead($event,2)" @delete="deletePic" name="3" multiple
- :maxCount="1">
- <image style='width:680rpx;height:417rpx;' src="@/static/image/enter/jingyingxukezheng.png" mode=""></image>
- </u-upload>
- </u-form-item>
- <u-form-item labelWidth='150' labelPosition='left' label="经营许可证有效期">
- <view style='text-align:right;' @click='openjyxkz'>{{form.operateCertificateDate?form.operateCertificateDate:'选择日期'}}<image src="@/static/image/yjt.png" mode=""
- style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image></view>
- </u-form-item>
- <uni-calendar
- :insert="false"
- :lunar="true"
- ref="calendar"
- :start-date="startDate"
- @confirm="confirm"
- />
- <u-form-item labelWidth='150' labelPosition='left' label="店铺名称">
- <u-input inputAlign='right' border='none' placeholder='输入店铺名称' v-model="form.shopNames" />
- </u-form-item>
- <u-form-item labelWidth='150' labelPosition='left' label="经营者">
- <u-input inputAlign='right' border='none' placeholder='输入经营者姓名' v-model="form.operater" />
- </u-form-item>
- <u-form-item labelWidth='150' labelPosition='left' label="经营者手机号">
- <u-input inputAlign='right' maxlength="15" border='none' placeholder='输入经营者手机号' v-model="form.operaterPhone" />
- </u-form-item>
- <u-form-item labelWidth='150' labelPosition='left' label="验证码">
- <u-input inputAlign='right' border='none' placeholder='输入验证码' v-model="form.verifyCode" >
- <template slot="suffix">
- <u-code ref="uCode"
- @change="codeChange"
- seconds="60"
- changeText="X秒重新获取"
- ></u-code>
- <view class='get_code' @click='getCode'>{{tips}}</view>
- </template>
- </u-input>
- </u-form-item>
- <u-form-item labelWidth='150' labelPosition='left' label="业务联系人(选填)">
- <u-input inputAlign='right' border='none' placeholder='输入联系人姓名' v-model="form.contacts" />
- </u-form-item>
- <u-form-item labelWidth='150' labelPosition='left' label="业务联系电话(选填)">
- <u-input inputAlign='right' maxlength="15" border='none' placeholder='输入联系电话' v-model="form.contactsPhone" />
- </u-form-item>
- <u-form-item labelWidth='80' labelPosition='left' @click='placeSelect(),hideKeyboard()' label="店铺位置">
- <view style='text-align:right;' v-if="form.province">{{ form.province }}{{ form.city }}{{ form.area }}</view>
- <view style='text-align:right;' v-else>
- <text style='text-align:right;'>选择位置 </text>
- <image src="@/static/image/yjt.png" mode=""
- style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image>
- </view>
- </u-form-item>
- <u-form-item labelWidth='80' labelPosition='left' label="详细地址">
- <u-input inputAlign='right' maxlength="15" border='none' placeholder='输入详细地址,不超过15个字' v-model="form.detailedAddress" />
- </u-form-item>
- <u-form-item labelWidth='150' labelPosition='left' label="营业时间">
- <view style='text-align:right;' @click='selectTime'>{{form.timesection}}<image src="@/static/image/yjt.png" mode=""
- style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image></view>
- </u-form-item>
- <smh-time-range :is-under='show' :time="['18','0','42']" @confrim="confrim" @cancel="cancel"></smh-time-range>
- <!-- label -->
- <view class='flex justify-space-between align-item-center'>
- <view>标签(2-4个,最多5个字)</view>
- <view class='add_label' @click='addLabel'>新增</view>
- </view>
- <view style='flex-wrap: wrap;' class='flex'>
- <view style='margin:10rpx;width:47%;' class='flex align-item-center' v-for='item in labelList'>
- <u-input inputAlign='right' placeholder='输入标签文字' v-model="item.value" />
- <view class="iconfont_no icon_merchants_enterjianshao"></view>
- </view>
- </view>
-
- <u-form-item labelWidth='240' labelPosition='top' label="门面及门头照片(1张,店名文字清晰)">
- <u-upload :fileList="fileList4" @afterRead="afterRead($event,3)" @delete="deletePic" name="4" multiple
- :maxCount="1">
-
- </u-upload>
- </u-form-item>
- <u-form-item labelWidth='120' labelPosition='top' label="室内照片(1-6张)">
- <u-upload :fileList="fileList5" @afterRead="afterRead($event,4)" @delete="deletePic" name="5" multiple
- :maxCount="6">
-
- </u-upload>
- </u-form-item>
- </u--form>
- <view class="footer">
- <button @click='submit' class="submit">提交</button>
- </view>
- </view>
- <u-modal :show="isSubmit" :content='content' @confirm="$u.debounce(confirmSubmit, 500)" showCancelButton
- @cancel="isSubmit=false" @close="isSubmit=false" closeOnClickOverlay></u-modal>
- </view>
- </template>
- <script>
- var that
- import uploadImage from '@/components/ossutil/uploadFile.js';
- export default {
- data() {
- return {
- content:'确定提交入驻信息',
- isSubmit:false,
- form:{
- commonId:uni.getStorageSync("userInfo").id,
- mainBody:'商铺',
- lookFlag:0,
- startDate:'',
- city: '',
- area: '',
- province: '',
- location: '',
- detailedAddress: '',
- businessLicense:'',
- operateCertificate:'',
- coverImage:'',
- indoorImage:'',
- timesection:'09:00~21:00',
- startDate:'09:00',
- endDate:'21:00',
- operateCertificateDate:'',
- },
- indoorImageArray:[],
- tips:'发送验证码',
- startDate:'',
- show:false,
- foodId:'',
- labelList:[{value:''},{value:''}],
- fileList2:[],
- fileList3:[],
- fileList4:[],
- fileList5:[],
-
- }
- },
- onLoad(options) {
- this.foodId=options.foodId
- that = this
- },
- onShow(){
- this.$request.baseRequest('admin.tourism.foodInfo', 'get', {
- id:this.foodId
- }, failres => {
- uni.showToast({
- icon: "none",
- title: failres.errmsg,
- duration: 3000
- });
-
- uni.hideLoading()
- }).then(res => {
- console.log(res.data)
- this.form=res.data
- this.fileList2=[{url:this.form.businessLicense}]
- this.fileList3=[{url:this.form.operateCertificate}]
- this.fileList4=[{url:this.form.coverImage}]
- this.fileList5=[]
- if(this.form.indoorImage){
- var arr=this.form.indoorImage.split(',')
- for(var i=0;i<arr.length;i++){
- if(arr[i]!=''){
- this.fileList5.push({url:arr[i]})
- }
- }
-
- }
- if(this.form.label){
- this.labelList=[]
- var label=this.form.label.split(',')
- for(var i=0;i<label.length;i++){
- if(arr[i]!=''){
- this.labelList.push({value:label[i]})
- }
- }
- }else{
- this.labelList=[{value:''},{value:''}]
- }
- })
-
- },
- methods: {
- submit(){
- if(this.labelList.length>0){
- var arr=[]
- for(var i=0;i<this.labelList.length;i++){
- if(!this.labelList[i].value){
- uni.showToast({
- icon: "none",
- title: '标签请输入内容!',
- duration: 3000
- });
- return
- }
- if(this.labelList[i].value.length>5){
- uni.showToast({
- icon: "none",
- title: '标签最多5个字!',
- duration: 3000
- });
- return
- }
- arr.push(this.labelList[i].value)
- }
- this.form.label=arr.toString()
- }
- this.isSubmit = true
- },
- confirmSubmit() {
- uni.showLoading({
- title: '加载中',
- mask: true
- })
- this.form.status = '审核中'
- this.$request.baseRequest('admin.tourism.foodInfo', 'update', {
- foodInfo: JSON.stringify(this.form)
- }, failres => {
- uni.showToast({
- icon: "none",
- title: failres.errmsg,
- duration: 3000
- });
-
- uni.hideLoading()
- }).then(res => {
- this.isSubmit = false
- uni.showToast({
- icon: "success",
- title: '提交成功,请等待平台审核',
- duration: 2000
- });
- uni.navigateBack()
-
- })
- },
- concel(e){
- this.show=false
- console.log(e)
- },
- confrim(e){
- console.log(e)
- this.show=false
- this.form.timesection=e.time
- this.form.startDate=e.start
- this.form.endDate=e.end
- },
- selectTime(){
- this.show=true
- },
- addLabel(){
- if(this.labelList.length>=4){
- uni.showToast({
- icon: "success",
- title: '最多4个标签!',
- duration: 2000
- });
- return
- }
- this.labelList.push({value:''})
- },
- codeChange(text) {
- this.tips = text;
- },
- getCode() {
- if(!this.form.operaterPhone){
- uni.showToast({
- icon: "none",
- title: '请输入手机号再获取验证码!',
- duration: 2000
- });
- return
- }
- if (this.$refs.uCode.canGetCode) {
- // 模拟向后端请求验证码
- uni.showLoading({
- title: '正在获取验证码'
- })
- this.$request.baseRequest('user', 'sendVerifyCode', {
- phone: this.form.operaterPhone
- }, failres => {
- uni.showToast({
- icon: "none",
- title: failres.errmsg,
- duration: 3000
- });
- uni.hideLoading()
- }).then(res => {
-
-
- })
- setTimeout(() => {
- uni.hideLoading();
- // 这里此提示会被this.start()方法中的提示覆盖
-
- // 通知验证码组件内部开始倒计时
- this.$refs.uCode.start();
- }, 2000);
- } else {
- uni.showToast({
- icon: "success",
- title: '提交成功!',
- duration: 2000
- });
- }
- },
- confirm(e){
- this.form.operateCertificateDate = e.fulldate
- this.$forceUpdate()
- console.log(e)
- },
- openjyxkz(){
- this.$refs.calendar.open();
- },
- placeSelect() {
- uni.chooseLocation({
- success: function(res) {
- console.log(res);
- that.form.location = res.latitude + ',' + res.longitude
- let _address = that.$helper.formatLocation(res.address)
- console.log(_address)
- that.form.province = _address.Province
- that.form.city = _address.City
- that.form.area = _address.Country
- that.form.detailedAddress = _address.Village
- that.$forceUpdate()
- }
- });
- },
- hideKeyboard() {
- uni.hideKeyboard()
- },
- // 删除图片
- deletePic(event,status) {
- this[`fileList${event.name}`].splice(event.index, 1)
- that.indoorImageArray.splice(event.index, 1)
- that.form.indoorImage =that.indoorImageArray.toString()
- },
- // 新增图片
- async afterRead(event,status) {
- // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
- let lists = [].concat(event.file)
- let fileListLen = this[`fileList${event.name}`].length
- lists.map((item) => {
- this[`fileList${event.name}`].push({
- ...item,
- status: 'uploading',
- message: '上传中'
- })
- })
- for (let i = 0; i < lists.length; i++) {
- const result = await this.uploadFilePromise(lists[i].url,status)
-
- let item = this[`fileList${event.name}`][fileListLen]
- this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
- status: 'success',
- message: '',
- url: result
- }))
- fileListLen++
- console.log(that.form, this[`fileList${event.name}`])
-
- }
- },
- uploadFilePromise(res,status) {
- return new Promise((resolve, reject) => {
- uploadImage(res, 'cardImages/',
- result => {
- if(status==1){
- that.form.businessLicense = result
- }else if(status==2){
- that.form.operateCertificate = result
- }else if(status==3){
- that.form.coverImage = result
- }else if(status==4){
- that.indoorImageArray.push(result)
- that.form.indoorImage =that.indoorImageArray.toString()
- }
- resolve(res)
- }
- )
- })
- },
- }
- }
- </script>
- <style lang='scss' scoped>
- .wrap{
- padding:20rpx;
- }
- .icon_merchants_enterjianshao{
- margin-left:10rpx;
- font-size:50rpx;
- color:#666;
- }
- .add_label,.get_code{
- background: #5F7DE9;
- color: #fff;
- padding: 10rpx 20rpx;
- border-radius: 10rpx;
- font-size: 26rpx;
- }
- </style>
|