doum
2026-04-25 9287e9a02f9a9a85b0c4dc49f04d1426af4a0ede
small-program/shop/pages/store-info/store-info.vue
@@ -3,56 +3,58 @@
      <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>
@@ -64,35 +66,239 @@
               <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;