scancode-miro/pages/hexiao/ywy/add_retail.vue

<template>
  <view class="page-container">
    <view class="form-card">

      <view class="form-item">
        <text class="form-label">店铺名称</text>
        <input
            class="form-input"
            v-model="formData.storeName"
            placeholder="请输入店铺名称"
            placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="form-label">店主名称</text>
        <input
            class="form-input"
            v-model="formData.ownerName"
            placeholder="请输入店主名称"
            placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="form-label">联系方式</text>
        <input
            class="form-input"
            type="number"
            maxlength="11"
            v-model="formData.contact"
            placeholder="请输入联系方式"
            placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="form-label">店铺地址</text>
        <input
            class="form-input"
            v-model="formData.address"
            placeholder="请输入店铺地址"
            placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="form-label">店铺照片</text>
        <uni-file-picker
            class="file-picker"
            ref="files"
            :del-icon="edit"
            file-mediatype="image"
            mode="grid"
            :limit="9"
            title="最多选择9张图片"
            v-model="formData.photos"
        />
      </view>

    </view>

    <view class="footer-save-button" v-if="edit">
      <button class="save-btn" @click="submitForm" >保 存</button>
    </view>

  </view>
</template>

<script>
import {addStore, getRetailDetail, updateStore, uploadImage} from "@/api/hexiao";

export default {
  data() {
    return {
      edit:false,
      // 表单数据
      formData: {
        photos: [],
        storeId: 0,
        storeName: '',
        ownerName: '',
        contact: '',
        address: ''
      }
    };
  },
  onLoad(opt){
    this.edit = opt.edit == 1;
      if(opt.id){
        this.formData.storeId = opt.id;
        getRetailDetail(opt.id).then(res=>{
          let data = res.data;
          this.formData = {
            storeId: data.id,
            storeName: data.store_name,
            ownerName: data.contact_name,
            contact: data.contact_phone,
            address: data.address,
          }
          this.formData.photos = [];
          let photos = data.store_photo.split(",")
          for (let i = 0; i < photos.length; i++) {
            let photo = photos[i];
            this.formData.photos.push({url:photo})
          }
        })
      }
  },
  methods: {
    // 提交表单
    async submitForm() {
      if(this.$refs.files.files.length === 0){
        uni.showToast({ title: '请上传门店照片', icon: 'none' });
        return;
      }
      const imageUrlarr = await uploadImage(this.$refs.files.files);
      if(imageUrlarr.length === 0){
        uni.showToast({ title: '门店照片上传失败，请重试', icon: 'none' });
        return;
      }
      // --- 手动进行数据校验 ---
      if (!this.formData.storeName) {
        uni.showToast({ title: '请输入店铺名称', icon: 'none' });
        return;
      }
      if (!this.formData.ownerName) {
        uni.showToast({ title: '请输入店主名称', icon: 'none' });
        return;
      }
      if (!this.formData.contact) {
        uni.showToast({ title: '请输入联系方式', icon: 'none' });
        return;
      }
      // 简单的手机号格式校验
      if (!/^1[3-9]\d{9}$/.test(this.formData.contact)) {
        uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
        return;
      }
      if (!this.formData.address) {
        uni.showToast({ title: '请输入店铺地址', icon: 'none' });
        return;
      }

      console.log('校验通过，准备提交的数据:', this.formData);
      // 执行提交逻辑
      uni.showLoading({ title: '正在保存...' });
      if(this.formData.storeId>0){
        updateStore(this.formData.storeId,this.formData.storeName,this.formData.ownerName,this.formData.contact,this.formData.address,imageUrlarr.join(","))
            .then(res=>{
              uni.hideLoading();
              if(res.code == 0){
                uni.showToast({
                  title: '保存成功',
                  icon: 'success'
                });
                uni.navigateBack();
              }else{
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                });
              }


            })
      }else{
        addStore(this.formData.storeName,this.formData.ownerName,this.formData.contact,this.formData.address,imageUrlarr.join(","))
            .then(res=>{
              uni.hideLoading();
              if(res.code == 0){
                uni.showToast({
                  title: '保存成功',
                  icon: 'success'
                });
                uni.navigateBack();
              }else{
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                });
              }


            })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #e4efff, #f5f6fa 40%);
  padding: 30rpx;
  box-sizing: border-box;
}

.form-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0 40rpx; // 左右内边距
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  // 最后一个item不需要下边框
  &:last-child {
    border-bottom: none;
  }
}

.form-label {
  display: block; // 确保独占一行
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.form-input {
  margin-top: 20rpx; // 与label的间距
  font-size: 28rpx;
  color: #333;
}

.placeholder {
  color: #c0c4cc;
}

.footer-save-button {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: #f5f6fa;
  box-sizing: border-box;

  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.save-btn {
  background-color: #409eff;
  color: #ffffff;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;

  &::after {
    border: none;
  }
}
</style>