| | |
| | | <view class="top-gradient"></view> |
| | | <view class="form-card"> |
| | | <text class="page-title">门店信息</text> |
| | | |
| | | <view class="form-group"> |
| | | <text class="label">门店名称</text> |
| | | <input v-model="form.name" class="text-input align-left" type="text" placeholder="请输入门店名称" placeholder-style="color: #B2B2B2;" /> |
| | | <text class="text-input align-left" style="font-weight: 600;margin-left: 30rpx;">{{info.name}}</text> |
| | | </view> |
| | | |
| | | <view class="form-group"> |
| | | <text class="label">门店头像</text> |
| | | <view class="upload-row" style="margin-top: 20rpx;"> |
| | | <view class="upload-box" @click="chooseAndUploadImage(1)"> |
| | | <view class="upload-plus">+</view> |
| | | <text class="upload-text">上传照片</text> |
| | | </view> |
| | | <view :key="index" class="photo-box" v-if="form.coverImgUrl"> |
| | | <image class="photo-image" :src="form.coverImgUrl" mode="aspectFill"></image> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="divider"></view> |
| | | |
| | | <view class="form-group textarea-group"> |
| | | <text class="label">门店介绍</text> |
| | | <input v-model="form.intro" class="text-input align-left" type="text" placeholder="请输入门店介绍" placeholder-style="color: #B2B2B2;" /> |
| | | <input v-model="form.content" class="text-input align-left" type="text" placeholder="请输入门店介绍" placeholder-style="color: #B2B2B2;" /> |
| | | </view> |
| | | |
| | | <view class="divider"></view> |
| | | |
| | | <view class="form-group switch-group"> |
| | | <view class="label-row"> |
| | | <text class="label">是否全天营业</text> |
| | | <text class="required">*</text> |
| | | </view> |
| | | <view class="switch-row"> |
| | | <view class="switch-pill" :class="{ active: !form.fullTime }" @tap="form.fullTime = false">是</view> |
| | | <view class="switch-pill" :class="{ active: form.fullTime }" @tap="form.fullTime = true">否</view> |
| | | <view class="switch-pill" :class="{ active: form.businessType ===1 }" @tap="form.businessType = 1">是</view> |
| | | <view class="switch-pill" :class="{ active: form.businessType===0 }" @tap="form.businessType = 0">否</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="form-group"> |
| | | <view class="label-row"> |
| | | <text class="label">营业时间</text> |
| | | <text class="required">*</text> |
| | | </view> |
| | | <input v-model="form.businessHours" class="text-input align-left" type="text" placeholder="必填,请输入门店营业时间" placeholder-style="color: #B2B2B2;" /> |
| | | <input v-model="form.shopHours" class="text-input align-left" type="text" placeholder="必填,请输入门店营业时间" placeholder-style="color: #B2B2B2;" /> |
| | | </view> |
| | | |
| | | <view class="divider"></view> |
| | | |
| | | <view class="form-group"> |
| | | <text class="label">寄存类型</text> |
| | | <input v-model="form.storageType" class="text-input align-left" type="text" placeholder="请输入可寄存类型" placeholder-style="color: #B2B2B2;" /> |
| | | <input v-model="form.depositTypes" class="text-input align-left" type="text" placeholder="请输入可寄存类型" placeholder-style="color: #B2B2B2;" /> |
| | | </view> |
| | | |
| | | <view class="divider"></view> |
| | | |
| | | <view class="form-group"> |
| | | <view class="label-row"> |
| | | <text class="label">配送范围</text> |
| | | <text class="required">*</text> |
| | | </view> |
| | | <view class="input-with-unit"> |
| | | <input v-model="form.deliveryRange" class="text-input" type="digit" placeholder="必填,请输入" placeholder-style="color: #B2B2B2;" /> |
| | | <input v-model="form.deliveryArea" class="text-input" type="digit" placeholder="必填,请输入" placeholder-style="color: #B2B2B2;" /> |
| | | <text class="unit-text" style="font-size: 28rpx;">公里</text> |
| | | </view> |
| | | </view> |
| | |
| | | <text class="label">收费标准</text> |
| | | <text class="required">*</text> |
| | | </view> |
| | | <textarea v-model="form.chargeRule" class="text-area charge-area" placeholder="必填,请输入门店收费标准" placeholder-style="color: #B2B2B2;" auto-height></textarea> |
| | | <textarea v-model="form.feeStandard" class="text-area charge-area" placeholder="必填,请输入门店收费标准" placeholder-style="color: #B2B2B2;" auto-height></textarea> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="save-wrap"> |
| | | <view class="save-btn">保存</view> |
| | | <view class="save-btn" @click="maintainShop">保存</view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | export default { |
| | | computed: { |
| | | ...mapState(['navHeight', 'statusbarHeight','shopInfo','shopToken']) |
| | | }, |
| | | data() { |
| | | return { |
| | | form: { |
| | | name: '', |
| | | intro: '', |
| | | fullTime: true, |
| | | businessHours: '', |
| | | storageType: '', |
| | | deliveryRange: '', |
| | | chargeRule: '' |
| | | info:{}, |
| | | form:{ |
| | | coverImgUrl:"", |
| | | businessType: 0, |
| | | content: "", |
| | | coverImg: "", |
| | | deliveryArea: 0, |
| | | depositTypes:"" , |
| | | feeStandard:"" , |
| | | shopHours: "" |
| | | } |
| | | } |
| | | }, |
| | | onShow() { |
| | | }, |
| | | onLoad() { |
| | | this.info ={} |
| | | this.getMyShop() |
| | | }, |
| | | methods:{ |
| | | previewImage(images,index = 0) { |
| | | uni.previewImage({ |
| | | current: index, |
| | | urls: images |
| | | }); |
| | | }, |
| | | async getMyShop(index){ |
| | | var that =this |
| | | let res1 = await that.$u.api.getShopInfoDetail() |
| | | if (res1.code === 200) { |
| | | this.info = res1.data |
| | | } |
| | | let res = await that.$u.api.maintainInfo() |
| | | if (res.code === 200) { |
| | | if(res.data){ |
| | | this.form ={ |
| | | coverImgUrl:res.data.coverImgUrl || '', |
| | | businessType: res.data.businessType || 0, |
| | | content: res.data.content || '', |
| | | coverImg: res.data.coverImg || '', |
| | | deliveryArea: res.data.deliveryArea || 0, |
| | | depositTypes: res.data.depositTypes || '', |
| | | feeStandard:res.data.feeStandard || '', |
| | | shopHours: res.data.shopHours || '', |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | maintainShop(index){ |
| | | if(this.loading){ |
| | | return; |
| | | } |
| | | if(!this.form.shopHours){ |
| | | uni.showToast({ |
| | | title:"请填写营业时间", |
| | | icon:'none' |
| | | }) |
| | | return |
| | | } |
| | | if(!this.form.deliveryArea){ |
| | | uni.showToast({ |
| | | title:"请填写配送范围", |
| | | icon:'none' |
| | | }) |
| | | return |
| | | } |
| | | if(!this.form.feeStandard){ |
| | | uni.showToast({ |
| | | title:"请填写收费标准", |
| | | icon:'none' |
| | | }) |
| | | return |
| | | } |
| | | this.loading = true |
| | | try{ |
| | | var that =this |
| | | that.$u.api.maintainShopInfo(this.form).then(res=>{ |
| | | if (res.code === 200) { |
| | | uni.showToast({ |
| | | title:"信息保存成功", |
| | | icon:'success' |
| | | }) |
| | | } |
| | | this.loading =false |
| | | }) |
| | | }catch(e){ |
| | | this.loading =false |
| | | } |
| | | }, |
| | | async uploadFiles(filePaths, maxCount =1) { |
| | | console.log("==================================1") |
| | | if (!filePaths || !filePaths.length) { |
| | | return null |
| | | } |
| | | |
| | | console.log("==================================3") |
| | | const uploadTasks = filePaths.map(filePath => { |
| | | return new Promise((resolve, reject) => { |
| | | uni.uploadFile({ |
| | | url: this.$baseUrl + '/web/public/upload', |
| | | filePath: filePath, |
| | | name: 'file', |
| | | formData: { |
| | | folder: 'shop' |
| | | }, |
| | | success: (res) => { |
| | | if (res.statusCode === 200) { |
| | | const data = JSON.parse(res.data) |
| | | if (data.code === 200) { |
| | | resolve(data.data) |
| | | } else { |
| | | |
| | | console.log("==================================6") |
| | | reject(new Error(data.msg || '上传失败')) |
| | | } |
| | | } else { |
| | | |
| | | console.log("==================================4") |
| | | reject(new Error('上传失败')) |
| | | } |
| | | }, |
| | | fail: (err) => { |
| | | |
| | | console.log("==================================5",err) |
| | | reject(err) |
| | | } |
| | | }) |
| | | }) |
| | | }) |
| | | try { |
| | | const results = await Promise.all(uploadTasks) |
| | | return results |
| | | } catch (error) { |
| | | uni.showToast({ |
| | | title: '上传失败', |
| | | icon: 'none' |
| | | }) |
| | | throw error |
| | | } |
| | | }, |
| | | async chooseAndUploadImage(maxCount = 1) { |
| | | var that = this |
| | | uni.chooseImage({ |
| | | count: 1, |
| | | sizeType: ['compressed'], |
| | | sourceType: ['album', 'camera'], |
| | | success: async (res) => { |
| | | const tempFilePaths = res.tempFilePaths |
| | | uni.showLoading({ |
| | | title: '上传中...', |
| | | mask: true |
| | | }) |
| | | try { |
| | | const uploadResults = await that.uploadFiles(tempFilePaths, maxCount) |
| | | |
| | | that.form.coverImgUrl = uploadResults.map(item => item.url || item.path || item)[0] |
| | | that.form.coverImg = uploadResults.map(item => item.imgaddr)[0] |
| | | console.log(that.form,"=====================================01") |
| | | uni.hideLoading() |
| | | uni.showToast({ |
| | | title: '上传成功', |
| | | icon: 'success' |
| | | }) |
| | | } catch (error) { |
| | | uni.hideLoading() |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .upload-row { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | gap: 10rpx; |
| | | margin-bottom: 22rpx; |
| | | } |
| | | |
| | | .upload-box, |
| | | .photo-box { |
| | | width: 122rpx; |
| | | height: 122rpx; |
| | | border-radius: 0; |
| | | overflow: hidden; |
| | | position: relative; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .upload-box { |
| | | border: 1rpx dashed #c8ccd4; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .upload-plus { |
| | | font-size: 54rpx; |
| | | line-height: 1; |
| | | color: #999999; |
| | | } |
| | | |
| | | .upload-text { |
| | | margin-top: 8rpx; |
| | | font-size: 24rpx; |
| | | color: #999999; |
| | | } |
| | | |
| | | .photo-image { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | .store-info-page { |
| | | position: relative; |
| | | height: 482rpx; |