1

xuxueyang

2024-07-31 7e247648201b208cfb5a5901803f784b7dbda948

 sub_pages/customer/customer-info/customer-info.vue

@@ -1,372 +1,378 @@
<template>
  <view class="container-page" style="padding: 0rpx;">
    <view v-if="source==='step'" class="" style="padding-top:40rpx">
      <u-steps current="0">
        <u-steps-item title="信息填写" class="u-steps-item" style="font-size: 28rpx;">
        </u-steps-item>
        <u-steps-item title="提交申请" class="u-steps-item"></u-steps-item>
      </u-steps>
    </view>
    <view class="p20">
      <view class="form-item before-line">
        <view class="label required">店铺名称</view>
        <view class="m-l-a m-r-0 flex">
          <input v-model="dto.name" placeholder="请输入联系人姓名"
                 style="margin-top: 16px;text-align: right;"></input>
   <view class="container-page" style="padding: 0rpx;">
      <view v-if="source==='step'" class="" style="padding-top:40rpx">
         <u-steps current="0">
            <u-steps-item title="信息填写" class="u-steps-item" style="font-size: 28rpx;">
            </u-steps-item>
            <u-steps-item title="提交申请" class="u-steps-item"></u-steps-item>
         </u-steps>
      </view>
      <view class="p20">
         <view class="form-item before-line">
            <view class="label required">店铺名称</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.name" placeholder="请输入联系人姓名"
                  style="margin-top: 16px;text-align: right;"></input>

        </view>
      </view>
            </view>
         </view>


      <view class="form-item before-line">
        <view class="label ">地区</view>
         <view class="form-item before-line">
            <view class="label ">地区</view>

        <view class="m-l-a m-r-0 flex " :class="[!dto['province']?'desc-gray':'']">
          <uni-data-picker :area="true" @change="(e)=>{PickArea(dto,e)}" placeholder=""
                           :localdata="regionDataPlus">
            {{ dto['province'] || '请选择' }}{{ dto['city'] && ('/' + dto['city']) || '' }}{{
            <view class="m-l-a m-r-0 flex " :class="[!dto['province']?'desc-gray':'']">
               <uni-data-picker :area="true" @change="(e)=>{PickArea(dto,e)}" placeholder=""
                  :localdata="regionDataPlus">
                  {{ dto['province'] || '请选择' }}{{ dto['city'] && ('/' + dto['city']) || '' }}{{
              dto['region'] && ('/' + dto['region']) || ''
            }}
          </uni-data-picker>
          <u-icon class="m-l-a" name="arrow-right"></u-icon>
        </view>
               </uni-data-picker>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>

      </view>
      <view class="form-item before-line">
        <view class="label ">地址</view>
        <view class="m-l-a m-r-0 flex">
          <input v-model="dto.address" placeholder="请输入地址"
                 style="margin-top: 16px;text-align: right;"></input>
         </view>
         <view class="form-item before-line">
            <view class="label ">地址</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.address" placeholder="请输入地址"
                  style="margin-top: 16px;text-align: right;"></input>

        </view>
      </view>
      <view class="form-item before-line">
        <view class="label ">店铺简介</view>
        <view class="m-l-a m-r-0 flex1">
          <view class="m-t-12 m-b-12">
            <u-textarea v-model="dto.description" placeholder="请输入店铺简介">
            </view>
         </view>
         <view class="form-item before-line">
            <view class="label ">店铺简介</view>
            <view class="m-l-a m-r-0 flex1">
               <view class="m-t-12 m-b-12">
                  <u-textarea v-model="dto.description" placeholder="请输入店铺简介">

            </u-textarea>
          </view>
          <!--          <input v-model="dto.description" placeholder="请输入地址"-->
          <!--                 style="margin-top: 16px;text-align: right;"></input>-->
                  </u-textarea>
               </view>
               <!--          <input v-model="dto.description" placeholder="请输入地址"-->
               <!--                 style="margin-top: 16px;text-align: right;"></input>-->

        </view>
      </view>
            </view>
         </view>


      <view class="form-item before-line m-t-20" @click="uploadIcon">
        <view class="label ">上传店铺封面</view>
        <view class="m-l-a m-r-0 flex m-b-12">
          <view class="component-button-upload">
         <view class="form-item before-line m-t-20" @click="uploadIcon">
            <view class="label ">上传店铺封面</view>
            <view class="m-l-a m-r-0 flex m-b-12">
               <view class="component-button-upload">

          </view>
               </view>

        </view>
      </view>
            </view>
         </view>

      <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"
            v-if="dto.cover">
        <view class="m-t-12 m-r-10">
          <image class="banner-img" :src="dto.cover" @click.stop="previewImg(dto.cover)">
         <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx" v-if="dto.cover">
            <view class="m-t-12 m-r-10">
               <image class="banner-img" :src="dto.cover" @click.stop="previewImg(dto.cover)">

          </image>
          <view class="t-red text-center" @click.stop="dto.cover=''">删除</view>
        </view>
      </view>
               </image>
               <view class="t-red text-center" @click.stop="dto.cover=''">删除</view>
            </view>
         </view>


      <view class="button-green-1 m-t-20 button-fixed-bottom before-line " @click="submit">
        {{ source === 'step' ? '下一步' : '更新' }}
         <view class="button-green-1 m-t-20 button-fixed-bottom before-line " @click="submit">
            {{ source === 'step' ? '下一步' : '更新' }}

      </view>
         </view>

    </view>
      </view>

    <view style="min-height: 200rpx;">
      &nbsp;
    </view>
      <view style="min-height: 200rpx;">
         &nbsp;
      </view>

  </view>
   </view>
</template>

<script>
import environments from '@/environments'
   import environments from '@/environments'

import {
  mapState
} from 'vuex'
   import {
      mapState
   } from 'vuex'

export default {
   export default {

  data() {
    return {
      id: '',
      source: '',
      data() {
         return {
            id: '',
            source: '',

      refresh: false,
      api: '',
      dto: {
        cover: '',
        address: '',
        id: '',
        userId: '',
        name: '',
        description: '',
        province: '',
        city: '',
        region: '',
      },
      requireFields: [
            refresh: false,
            api: '',
            dto: {
               cover: '',
               address: '',
               id: '',
               userId: '',
               name: '',
               description: '',
               province: '',
               city: '',
               region: '',
            },
            requireFields: [

        {
          name: '店铺名称',
          key: 'name'
        }
      ],
      regionDataPlus: [],
    }
  },
  onLoad(options) {
    //判断是不是来自登录步骤，是等话需要从缓存里面拿信息
    this.source = options.source || ''
               {
                  name: '店铺名称',
                  key: 'name'
               }
            ],
            regionDataPlus: [],
         }
      },
      onLoad(options) {
         //判断是不是来自登录步骤，是等话需要从缓存里面拿信息
         this.source = options.source || ''

    if (this.source === 'step') {
      var tjson = this.$storage.getItem('cache_customer_info')
      if (tjson) {
        this.dto = {
          ...this.dto,
          ...JSON.parse(tjson)
        }
      }
    } else {
      this.getCurrentInfo()
    }
         if (this.source === 'step') {
            var tjson = this.$storage.getItem('cache_customer_info')
            if (tjson) {
               this.dto = {
                  ...this.dto,
                  ...JSON.parse(tjson)
               }
            }
         } else {
            this.getCurrentInfo()
         }

    this.init_area()
// www.hmyxianhua.com/wx-jump
         this.init_area()
         // www.hmyxianhua.com/wx-jump

  },
      },

  methods: {
    PickArea(item, e) {
      console.log('PickArea', item, e)
      if (e.detail.value) {
        this.dto.province = ''
        this.dto.city = ''
        this.dto.region = ''
        if (e.detail.value.length <= 3) {
          if (!!e.detail.value[0])
            this.dto.province = e.detail.value[0].value
          if (!!e.detail.value[1])
            this.dto.city = e.detail.value[1].value
          if (!!e.detail.value[2])
            this.dto.region = e.detail.value[2].value
        } else {
          //说明有重复的
          var plusnum = e.detail.value.length - 3
          if (!!e.detail.value[plusnum + 0])
            this.dto.province = e.detail.value[plusnum + 0].value
          if (!!e.detail.value[plusnum + 1])
            this.dto.city = e.detail.value[plusnum + 1].value
          if (!!e.detail.value[plusnum + 2])
            this.dto.region = e.detail.value[plusnum + 2].value
        }
      methods: {
         PickArea(item, e) {
            console.log('PickArea', item, e)
            if (e.detail.value) {
               this.dto.province = ''
               this.dto.city = ''
               this.dto.region = ''
               if (e.detail.value.length == 2) {
                  if (!!e.detail.value[0])
                     this.dto.province = e.detail.value[0].value
                  if (!!e.detail.value[0])
                     this.dto.city = e.detail.value[0].value
                  if (!!e.detail.value[1])
                     this.dto.region = e.detail.value[1].value
               } else if (e.detail.value.length <= 3) {
                  if (!!e.detail.value[0])
                     this.dto.province = e.detail.value[0].value
                  if (!!e.detail.value[1])
                     this.dto.city = e.detail.value[1].value
                  if (!!e.detail.value[2])
                     this.dto.region = e.detail.value[2].value
               } else {
                  //说明有重复的
                  var plusnum = e.detail.value.length - 3
                  if (!!e.detail.value[plusnum + 0])
                     this.dto.province = e.detail.value[plusnum + 0].value
                  if (!!e.detail.value[plusnum + 1])
                     this.dto.city = e.detail.value[plusnum + 1].value
                  if (!!e.detail.value[plusnum + 2])
                     this.dto.region = e.detail.value[plusnum + 2].value
               }

        this.$forceUpdate()
               this.$forceUpdate()

      }
    },
    async init_area() {
      const res = await this.$http.request('get', '/api/pub/china/area/json')
      // console.log('area', JSON.parse(res.data))
      this.regionDataPlus = res.data && JSON.parse(res.data.replaceAll('code', 'value').replaceAll('name',
          'text')) || []
    },
            }
         },
         async init_area() {
            const res = await this.$http.request('get', '/api/pub/china/area/json')
            // console.log('area', JSON.parse(res.data))
            this.regionDataPlus = res.data && JSON.parse(res.data.replaceAll('code', 'value').replaceAll('name',
               'text')) || []
         },


    async getCurrentInfo() {
      this.$message.showLoading()
      const {
        code,
        data
      } = await this.$http.request('get', "/api/current/customer", {})
      if (code === 0) {
        this.dto = {
          ...data,
         async getCurrentInfo() {
            this.$message.showLoading()
            const {
               code,
               data
            } = await this.$http.request('get', "/api/current/customer", {})
            if (code === 0) {
               this.dto = {
                  ...data,

        }
        this.dto.userId = this.currentInfo.id
               }
               this.dto.userId = this.currentInfo.id

      }
            }

      this.$message.hideLoading()
    },
    async submit() {
      for (var field of this.requireFields) {
        if (!this.dto[field.key]) {
          this.$message.showToast(`${field.name}信息未填写`)
          return
        }
      }
      await this.$message.confirm(`是否确定提交更新信息`)
      if (this.source === 'step') {
        //先保存下来，进入下一步，然后注册成功后再保存
        this.$storage.setItem("cache_customer_info", JSON.stringify({
          ...this.dto
        }))
            this.$message.hideLoading()
         },
         async submit() {
            for (var field of this.requireFields) {
               if (!this.dto[field.key]) {
                  this.$message.showToast(`${field.name}信息未填写`)
                  return
               }
            }
            await this.$message.confirm(`是否确定提交更新信息`)
            if (this.source === 'step') {
               //先保存下来，进入下一步，然后注册成功后再保存
               this.$storage.setItem("cache_customer_info", JSON.stringify({
                  ...this.dto
               }))

        uni.navigateTo({
          url: '/pages/login/supplier-reg?source=step'
        })
               uni.navigateTo({
                  url: '/pages/login/supplier-reg?source=step'
               })

      } else {
        var dto = {
          ...this.dto,
        }
        this.$message.showLoading()
        const re = await this.$http.request('post', '/api/customer/addOrUpdate', {
          data: dto
        })
        this.$message.hideLoading()
        if (re.code == 2000 || re.code == 0) {
          this.$message.showToast('操作成功')
          this.$store.dispatch('getCurrentInfo')
          this.backpage()
        } else {
          console.log('error re', re)
          if (re.code === 30000 && Array.isArray(re.msg)) {
            this.$message.showToast('字段未填写完整')
          }
        }
      }
            } else {
               var dto = {
                  ...this.dto,
               }
               this.$message.showLoading()
               const re = await this.$http.request('post', '/api/customer/addOrUpdate', {
                  data: dto
               })
               this.$message.hideLoading()
               if (re.code == 2000 || re.code == 0) {
                  this.$message.showToast('操作成功')
                  this.$store.dispatch('getCurrentInfo')
                  this.backpage()
               } else {
                  console.log('error re', re)
                  if (re.code === 30000 && Array.isArray(re.msg)) {
                     this.$message.showToast('字段未填写完整')
                  }
               }
            }

    },
         },


    uploadIcon() {
      const that = this
      uni.chooseImage({
        count: 1, // 最多可以选择的图片张数，默认9
        sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
        sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
        success: function ({
                             errMsg,
                             tempFiles
                           }) {
          if (errMsg === 'chooseImage:ok') {
            if (tempFiles[0].size > 1024 * 1024 * 5) {
              that.$message.confirm('图片最多支持5M大小,超出大小限制')
              return
            }
            that.$message.showLoading()
            that.$http.upload(tempFiles[0].path).then(async res => {
              var pic = res.data && res.data.length > 0 && res.data[
                  0] || {}
              that.$message.hideLoading()
              that.dto.cover = (pic || {}).url || ''
              console.log('pic', that.dto)
         uploadIcon() {
            const that = this
            uni.chooseImage({
               count: 1, // 最多可以选择的图片张数，默认9
               sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
               sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
               success: function({
                  errMsg,
                  tempFiles
               }) {
                  if (errMsg === 'chooseImage:ok') {
                     if (tempFiles[0].size > 1024 * 1024 * 5) {
                        that.$message.confirm('图片最多支持5M大小,超出大小限制')
                        return
                     }
                     that.$message.showLoading()
                     that.$http.upload(tempFiles[0].path).then(async res => {
                        var pic = res.data && res.data.length > 0 && res.data[
                           0] || {}
                        that.$message.hideLoading()
                        that.dto.cover = (pic || {}).url || ''
                        console.log('pic', that.dto)

              that.$forceUpdate()
            }).catch(res => {
              that.$message.hideLoading()
                        that.$forceUpdate()
                     }).catch(res => {
                        that.$message.hideLoading()

            })
          }
        }
      })
    },
                     })
                  }
               }
            })
         },

  },
  computed: {
    ...mapState(['currentInfo'])
  },
  components: {}
}
      },
      computed: {
         ...mapState(['currentInfo'])
      },
      components: {}
   }
</script>

<style lang="scss" scoped>
.banner-img {
  width: 96rpx;
  height: 96rpx;
  border-radius: 4rpx;
  border: 2rpx dashed #CECECE;
}
   .banner-img {
      width: 96rpx;
      height: 96rpx;
      border-radius: 4rpx;
      border: 2rpx dashed #CECECE;
   }

.form-item {
  // padding: 40rpx;
  border-bottom: 2rpx solid #F3F3F3;
  display: flex;
  // height: 100px;
   .form-item {
      // padding: 40rpx;
      border-bottom: 2rpx solid #F3F3F3;
      display: flex;
      // height: 100px;

  .label {
    width: 300rpx;
    line-height: 60px;
      .label {
         width: 300rpx;
         line-height: 60px;

  }
      }

  .flex {
    line-height: 60px;
      .flex {
         line-height: 60px;

    .flex1 {
      flex: 1;
      text-align: center;
      color: var(--selfblue)
    }
         .flex1 {
            flex: 1;
            text-align: center;
            color: var(--selfblue)
         }


  }
}
      }
   }

.form-item.bottom-border-no {
  border-bottom: none;
}
   .form-item.bottom-border-no {
      border-bottom: none;
   }

.container-page {
  padding: 40rpx;
  background-color: #FFFFFF;
  // min-height: calc(100vh - 80rpx);
  min-height: 100vh;
}
   .container-page {
      padding: 40rpx;
      background-color: #FFFFFF;
      // min-height: calc(100vh - 80rpx);
      min-height: 100vh;
   }

.style {
  width: fit-content;
  margin: 0 auto;
  line-height: 64rpx;
  border-radius: 8rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  // padding-top: 5rpx;
  // padding-bottom: 5rpx;
  border: 2rpx solid var(--selfblue);
  background-color: var(--selfbluebg);
  min-width: 100rpx;
}
   .style {
      width: fit-content;
      margin: 0 auto;
      line-height: 64rpx;
      border-radius: 8rpx;
      padding-left: 20rpx;
      padding-right: 20rpx;
      // padding-top: 5rpx;
      // padding-bottom: 5rpx;
      border: 2rpx solid var(--selfblue);
      background-color: var(--selfbluebg);
      min-width: 100rpx;
   }


.style-1 {
  border: 1px solid rgb(122, 187, 255);
  border: 1px solid #409EFF;
  color: #409EFF;
  background-color: rgb(240, 247, 255);
}
   .style-1 {
      border: 1px solid rgb(122, 187, 255);
      border: 1px solid #409EFF;
      color: #409EFF;
      background-color: rgb(240, 247, 255);
   }

.style-2 {
  border: 1px solid rgb(255, 184, 78);
  border: 1px solid #FE9044;
  color: #FE9044;
  background-color: rgb(255, 247, 235);
}
   .style-2 {
      border: 1px solid rgb(255, 184, 78);
      border: 1px solid #FE9044;
      color: #FE9044;
      background-color: rgb(255, 247, 235);
   }

.style-3 {
  border: 1px solid #19be6b;
  color: #19be6b;
  background-color: rgb(231, 244, 238);
}
   .style-3 {
      border: 1px solid #19be6b;
      color: #19be6b;
      background-color: rgb(231, 244, 238);
   }

.style-4 {
  border: 1px solid #F56c6c;
  color: #F56c6c;
  background-color: rgb(254, 243, 243);
}
   .style-4 {
      border: 1px solid #F56c6c;
      color: #F56c6c;
      background-color: rgb(254, 243, 243);
   }
</style>