mall-app-t/pages/user/info/index.vue

<!-- 商家入驻 -->
<template>
  <pb-layout title="修改信息" navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }" color="#fff">
    <view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"> </view>
    <view class="apply-form">
      <uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
        <uni-forms-item label="店铺名称" name="name" required>
          <uni-easyinput type="text" v-model="formData.name" placeholder="请输入店铺名称" />
        </uni-forms-item>
        <uni-forms-item label="门店LOGO" name="logo" required>
          <p-uploader
            v-model:url="formData.logo"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          />
        </uni-forms-item>
        <uni-forms-item label="营业时间" name="timezone" required @tap="showTime">
          <uni-easyinput
            v-model="formData.timezone"
            disabled
            :styles="{ disableColor: '#fff', color: '#333', borderColor: '#dcdfd6 !important' }"
            placeholder="请选择营业时间"
          >
            <template v-slot:right>
              <uni-icons type="right" />
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="营业执照" name="tradeImg" required>
          <p-uploader
            v-model:url="formData.tradeImg"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          />
        </uni-forms-item>
        <uni-forms-item name="areaName" label="省市区" @tap="regionPickerRef.onOpen()" required>
          <uni-easyinput
            v-model="formData.areaName"
            disabled
            :styles="{ disableColor: '#fff', color: '#333', borderColor: '#dcdfd6 !important' }"
            placeholder="请选择省市区"
          >
            <template v-slot:right>
              <uni-icons type="right" />
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="detailAddress" label="详细地址" required>
          <uni-easyinput type="textarea" v-model="formData.detailAddress" placeholder="请输入详细地址" clearable />
        </uni-forms-item>
        <uni-forms-item name="contactName" label="联系人" required>
          <uni-easyinput type="text" v-model="formData.contactName" placeholder="请输入联系人" clearable />
        </uni-forms-item>
        <uni-forms-item label="联系电话" name="contactPhone" required>
          <uni-easyinput type="number" v-model="formData.contactPhone" placeholder="请输入联系电话" />
        </uni-forms-item>
        <uni-forms-item label="身份证号" name="idCard" required>
          <uni-easyinput type="idcard" v-model="formData.idCard" placeholder="请输入省份证号" />
        </uni-forms-item>
        <uni-forms-item label="身份证正面" name="idCardFront" required>
          <p-uploader
            v-model:url="formData.idCardFront"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          />
        </uni-forms-item>
        <uni-forms-item label="身份证反面" name="idCardBack" required>
          <p-uploader
            v-model:url="formData.idCardBack"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          />
        </uni-forms-item>

        <uni-forms-item label="支付宝账号" name="alipayLogonId" required>
          <uni-easyinput type="text" v-model="formData.alipayLogonId" placeholder="请输入支付宝账号" />
        </uni-forms-item>
        <uni-forms-item label="收款人姓名" name="payee" required>
          <uni-easyinput type="text" v-model="formData.payee" placeholder="请输入收款人姓名" />
        </uni-forms-item>

        <uni-forms-item label="银行名称" name="bankName" required>
          <uni-easyinput type="text" v-model="formData.bankName" placeholder="请输入银行名称" />
        </uni-forms-item>
        <uni-forms-item label="开户行" name="bankBranchName" required>
          <uni-easyinput type="text" v-model="formData.bankBranchName" placeholder="请输入开户行" />
        </uni-forms-item>
        <uni-forms-item label="银行卡号" name="bankNo" required>
          <uni-easyinput type="number" v-model="formData.bankNo" placeholder="请输入银行卡号" />
        </uni-forms-item>
        <uni-forms-item label="开户人" name="bankOpenContact" required>
          <uni-easyinput type="text" v-model="formData.bankOpenContact" placeholder="请输入开户人姓名" />
        </uni-forms-item>
        <uni-forms-item label="银行卡正面" name="bankCardFront" required>
          <p-uploader
            v-model:url="formData.bankCardFront"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          />
        </uni-forms-item>
        <uni-forms-item label="银行卡反面" name="bankCardBack" required>
          <p-uploader
            v-model:url="formData.bankCardBack"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          />
        </uni-forms-item>
      </uni-forms>

      <view class="footer-box">
        <button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSubmit">修改</button>
      </view>
    </view>

    <!-- 省市区弹窗 -->
    <p-region-picker ref="regionPickerRef" @confirm="onRegionConfirm" />
  </pb-layout>

  <!-- 时间弹窗 -->
  <timeSlot ref="timeSlotRef" :title="'选择时间段'" @confirm="confirmTime"></timeSlot>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import peach from '@/peach'
import $store from '@/peach/store'
import UserApi from '@/peach/api/member/user'
import { mobile, idCard, bankName, bankCode } from '@/peach/validate/form'
import timeSlot from '@/components/wanghexu-timeslot/wanghexu-timeslot.vue'
import _ from 'lodash'

const userStore = $store('user')
const formData = ref({
  name: '',
  logo: '',
  timezone: '',
  tradeImg: '',
  idCard: '',
  idCardFront: '',
  idCardBack: '',
  contactPhone: '',
  areaName: '',
  detailAddress: '',
  contactName: '',
  bankNo: '',
  bankName: '',
  bankBranchName: '',
  bankCardFront: '',
  bankCardBack: '',
  bankOpenContact: '',
})

const regionPickerRef = ref(null)

const rules = {
  name: {
    rules: [
      {
        required: true,
        errorMessage: '请输入店铺名称',
      },
    ],
  },
  logo: {
    rules: [
      {
        required: true,
        errorMessage: '请上传店铺LOGO',
      },
    ],
  },
  timezone: {
    rules: [
      {
        required: true,
        errorMessage: '请选择营业时间',
      },
    ],
  },
  tradeImg: {
    rules: [
      {
        required: true,
        errorMessage: '请上传营业执照',
      },
    ],
  },
  idCard: idCard,
  idCardFront: {
    rules: [
      {
        required: true,
        errorMessage: '请上传身份证正面',
      },
    ],
  },
  idCardBack: {
    rules: [
      {
        required: true,
        errorMessage: '请上传身份证反面',
      },
    ],
  },
  alipayLogonId: {
    rules: [
      {
        required: true,
        errorMessage: '请输入支付宝账号',
      },
    ],
  },
  payee: {
    rules: [
      {
        required: true,
        errorMessage: '请输入收款人姓名',
      },
    ],
  },
  areaName: {
    rules: [
      {
        required: true,
        errorMessage: '请选择省市区',
      },
    ],
  },
  contactName: {
    rules: [
      {
        required: true,
        errorMessage: '请输入联系人',
      },
    ],
  },
  detailAddress: {
    rules: [
      {
        required: true,
        errorMessage: '请输入详细地址',
      },
    ],
  },
  contactPhone: mobile,
  bankNo: bankCode,
  bankName: bankName,
  bankBranchName: {
    rules: [
      {
        required: true,
        errorMessage: '请输入开户行名称',
      },
    ],
  },
  bankCardFront: {
    rules: [
      {
        required: true,
        errorMessage: '请上传银行卡正面',
      },
    ],
  },
  bankCardBack: {
    rules: [
      {
        required: true,
        errorMessage: '请上传银行卡反面',
      },
    ],
  },
  bankOpenContact: {
    rules: [
      {
        required: true,
        errorMessage: '请输入开户人姓名',
      },
    ],
  },
}

const statusBarHeight = peach.$platform.device.statusBarHeight * 2

const timeSlotRef = ref(null)
const formRef = ref(null)

function onSubmit() {
  formRef.value
    .validate()
    .then(async (res) => {
      let tempObj = { ...res }
      tempObj.id = formData.value.id
      tempObj.memberUserId = userStore.userInfo.id
      tempObj.address = tempObj.areaName.replace(/ /g, '/') + '/' + tempObj.detailAddress
      tempObj.openingTime = tempObj.timezone.split('~')[0]
      tempObj.closingTime = tempObj.timezone.split('~')[1]

      delete tempObj.areaName
      delete tempObj.detailAddress
      delete tempObj.timezone

      await UserApi.editUserInfo(tempObj)

      peach.$router.go('/pages/user/info/detail', {
        redirect: true,
      })
    })
    .catch((err) => {
      console.log('err', err)
    })
}

// 选择时间段
function showTime() {
  timeSlotRef.value.open()
}

// 确认时间
function confirmTime(time) {
  formData.value.timezone = time.start.hour + ':' + time.start.min + '~' + time.end.hour + ':' + time.end.min
}

// 确认选择地区
function onRegionConfirm(e) {
  formData.value.areaName = `${e.province_name}/${e.city_name}/${e.district_name}`
}

// 获取申请详情
function getMerchantInfo() {
  UserApi.getUserDetail().then((data) => {
    formData.value = data.data

    let index = data.data.address.lastIndexOf('/')
    formData.value.areaName = data.data.address.substring(0, index)
    formData.value.detailAddress = data.data.address.substring(index + 1)

    formData.value.timezone =
      data.data.openingTime[0].toString().padStart(2, '0') +
      ':' +
      data.data.openingTime[1].toString().padStart(2, '0') +
      '~' +
      data.data.closingTime[0].toString().padStart(2, '0') +
      ':' +
      data.data.closingTime[1].toString().padStart(2, '0')
  })
}

// 获取区域列表
async function getAreaList() {
  let res = await UserApi.getAreaList()
  uni.setStorageSync('areaData', res.data)
}

onLoad(async () => {
  getMerchantInfo()
  await getAreaList()
})
</script>

<style lang="scss" scoped>
.page-bg {
  width: 100%;
  height: 458rpx;
  background: url('/static/merchant3.jpg') no-repeat;
  background-size: 100% 100%;
}
.apply-form {
  margin: -100rpx 16px;
  padding: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 40px;
  padding-bottom: 40rpx;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.04);
  .shake {
    animation: shake 0.05s linear 4 alternate;
  }

  @keyframes shake {
    from {
      transform: translateX(-10rpx);
    }
    to {
      transform: translateX(10rpx);
    }
  }
  :deep() {
    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 10px !important;
    }

    .uni-easyinput__placeholder-class {
      font-size: 14px;
    }

    .is-disabled {
      color: #333333;
    }
  }

  .footer-box {
    .save-btn {
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }
  }

  .agreement-box {
    margin: -10px auto 10px;
    .protocol-check {
      transform: scale(0.7);
    }
    .agreement-text {
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;
      .tcp-text {
        color: var(--ui-BG-Main);
      }
    }
  }
}
</style>