需求变更

2022-11-11 08:36:42 +08:00
parent e08d795e53
commit 8b1197fe54
7 changed files with 140 additions and 67 deletions
--- a/src/project/tianfuxing/AppHome/AddMerchants.vue
+++ b/src/project/tianfuxing/AppHome/AddMerchants.vue
@@ -20,12 +20,12 @@
    <div class="upload">
      <h2>门店照片</h2>
      <div class="upload-wrapper">
-        <div class="add" @click="upLoad" v-if="!photoUrl">
+        <div class="add" @click="upLoad1">
          <div></div>
          <span>添加照片</span>
        </div>
-        <div class="imgs" v-else>
-          <image :src="photoUrl" mode="aspectFill" @click="prev" />
+        <div class="imgs" v-for="(item, index) in logoFiles" :key="index">
+          <image :src="item.url" mode="aspectFill" @click="prev(item.url)" />
          <image class="remove" @click.stop="photoUrl = ''" v-if="!isAdd" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/close_release.png" />
        </div>
      </div>
@@ -48,7 +48,8 @@
        lat: '',
        lng: '',
        merchantName: '',
-        photoUrl: '',
+        logoFiles: [],
+        hideStatus: false,
        isAdd: false
      }
    },
@@ -70,7 +71,7 @@
            this.lat = this.user.merchantInfo.lat
            this.lng = this.user.merchantInfo.lng
            this.merchantName = this.user.merchantInfo.merchantName
-            this.photoUrl = this.user.merchantInfo.photoUrl
+            this.logoFiles = this.user.merchantInfo.logoFiles || []
          }
        })
      }
@@ -96,21 +97,41 @@
        })
      },

-      upLoad () {
-        if (this.isAdd) {
-          return false
+      upLoad1 () {
+        console.log(232)
+        this.hideStatus = false
+        if (this.logoFiles.length > 9) {
+          return this.$toast(`图片不能超过9张`)
        }
-
        uni.chooseImage({
-          count: 1,
+          count: (9 - this.logoFiles.length) > 0 ? 9 - this.logoFiles.length : 0,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
-            this.$loading('上传中')
+            if (res.tempFilePaths.length > 9) {
+              this.$toast(`图片不能超过9张`)

+              return false
+            }
+
+            this.$loading('上传中')
+            res.tempFilePaths.forEach((item, index) => {
+              if (index === res.tempFilePaths.length - 1) {
+                this.hideStatus = true
+              }
+
+              this.$nextTick(() => {
+                this.uploadFile(item, res.tempFilePaths.length)
+              })
+            })
+          }
+        })
+      },
+
+      uploadFile (img) {
        uni.uploadFile({
          url: this.$instance.defaults.baseURL + (process.env.NODE_ENV == 'production' ? '/api' : '') + '/file/add',
-              filePath: res.tempFilePaths[0],
+          filePath: img,
          name: 'file',
          header: {
            'Content-Type': 'multipart/form-data',
@@ -119,24 +140,30 @@
          success: (res) => {
            const data = JSON.parse(res.data)

-                if (data.code === 0) {
-                  this.photoUrl = data.data[0].split(';')[0]
+            if (data.code === 0 && this.logoFiles.length < 9) {
+              this.logoFiles.push({
+                url: data.data[0].split(';')[0],
+                id: data.data[0].split(';')[1]
+              })
            } else {
              this.$toast(data.msg)
            }
          },
          complete: () => {
-                uni.hideLoading()
+            this.$nextTick(() => {
+              if (this.hideStatus) {
+                this.$hideLoading()
+                this.hideStatus = false
+              }
+            })
          }
        })
      },
-        })
-      },

-      prev () {
+      prev (url) {
        wx.previewImage({
-          current: this.photoUrl,
-          urls: [this.photoUrl]
+          current: url,
+          urls: this.logoFiles.map(v => v.url)
        })
      },

@@ -149,7 +176,7 @@
          return this.$toast('请选择商家地址')
        }

-        if (!this.photoUrl) {
+        if (!this.logoFiles.length) {
          return this.$toast('请上传门店照片')
        }

@@ -161,7 +188,7 @@
        this.$instance.post('/api/appmerchantinfo/addOrUpdate', {
          merchantName: this.merchantName,
          address: this.address,
-          photoUrl: this.photoUrl,
+          logoFiles: this.logoFiles,
          lat: this.lat,
          lng: this.lng,
          openId: this.user.openId,
@@ -247,21 +274,29 @@
        color: #666666;
      }

+      .upload-wrapper {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
      .imgs {
        position: relative;
-        width: 216px;
-        height: 216px;
+        width: 200px;
+        height: 200px;
+        margin: 0 10px 10px 0;
        border-radius: 8px;

        image {
-          width: 216px;
-          height: 216px;
+          width: 200px;
+          height: 200px;
          border-radius: 8px;
        }
        .remove {
          position: absolute;
          top: 0%;
          right: 0%;
+          z-index: 11;
          width: 36px;
          height: 36px;
          transform: translate(50%, -50%);
@@ -273,8 +308,9 @@
        align-items: center;
        flex-direction: column;
        justify-content: center;
-        width: 216px;
-        height: 216px;
+        width: 200px;
+        height: 200px;
+        margin: 0 10px 10px 0;
        background: #EFF5FA;
        border-radius: 8px;

--- a/src/project/tianfuxing/AppHome/AppHome.vue
+++ b/src/project/tianfuxing/AppHome/AppHome.vue
@@ -16,7 +16,7 @@
        </div>
        <div class="nav-item" hover-class="text-hover" @click="$linkTo('./PhotoReport')">
          <image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home2.png" />
-          <span>随手拍</span>
+          <span>文明拍</span>
        </div>
        <div class="nav-item" hover-class="text-hover" @click="$linkTo('./Culture')">
          <image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home3.png" />
@@ -36,7 +36,7 @@
        <h2>商家优惠</h2>
        <div class="yh-list">
          <div class="yh-item" v-for="(item, index) in list" :key="index" hover-class="text-hover" @click="$linkTo('./StoreDetail?id=' + item.id)">
-            <image :src="item.merchantPhoto" mode="aspectFill" />
+            <image :src="item.logoFiles[0].url" mode="aspectFill" />
            <div class="right">
              <h2>{{ item.merchantName }}</h2>
              <p>{{ item.title }}</p>
--- a/src/project/tianfuxing/AppHome/PhotoReport.vue
+++ b/src/project/tianfuxing/AppHome/PhotoReport.vue
@@ -4,7 +4,7 @@
      <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
      <div class="nav-bar">
        <image src="/static/img/left.png" @click="back"/>
-        <h2>随手拍</h2>
+        <h2>文明拍</h2>
      </div>
    </div>
    <div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}">
@@ -12,8 +12,8 @@
    </div>
    <div class="photo-header">
      <image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/photo-bg.png" />
-      <h2>随手拍</h2>
-      <p>将身边文明或不文明行为拍照上传即可获得积分奖励</p>
+      <h2>文明拍</h2>
+      <p>将身边文明行为拍照上传即可获取积分奖励</p>
      <image class="right-icon" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/right2.png" />
    </div>
    <div class="phone-wrapper">
@@ -45,7 +45,7 @@
  import { mapState } from 'vuex'
  export default {
    name: 'PhotoReport',
-    appName: '随手拍',
+    appName: '文明拍',
    customNavigation: true,

    data () {
--- a/src/project/tianfuxing/AppHome/Store.vue
+++ b/src/project/tianfuxing/AppHome/Store.vue
@@ -2,7 +2,7 @@
  <div class="Store">
    <div class="store-list">
      <div class="store-item" v-for="(item, index) in list" :key="index" hover-class="text-hover" @click="$linkTo('./StoreDetail?id=' + item.id)">
-        <image :src="item.merchantPhoto" mode="aspectFill" />
+        <image :src="item.logoFiles[0].url" mode="aspectFill" />
        <div class="middle">
          <h2>{{ item.merchantName }}</h2>
          <p>{{ item.title }}</p>
--- a/src/project/tianfuxing/AppHome/StoreDetail.vue
+++ b/src/project/tianfuxing/AppHome/StoreDetail.vue
@@ -10,7 +10,11 @@
    <div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}">
      <image src="/static/img/left.png"/>
    </div>
-    <image class="banner" mode="aspectFill" :src="info.merchantInfo.photoUrl" />
+    <swiper class="banner" indicatorDots circular :autoplay="true" :interval="5000">
+      <swiper-item v-for="(item, index) in info.logoFiles" :key="index">
+        <image :src="item.url" mode="aspectFill" />
+      </swiper-item>
+    </swiper>
    <div class="wrapper">
      <div class="top">
        <div class="top-right">
@@ -108,13 +112,17 @@
      z-index: 1;
      width: 100%;
      height: 480px;
+
+      image {
+        width: 100%;
+        height: 480px;
+      }
    }

    .wrapper {
      position: relative;
      z-index: 2;
-      padding-top: 400px;
-      margin: 0 16px;
+      margin: 400px 16px 0;

      .top {
        display: flex;
--- a/src/project/tianfuxing/AppMy/Merchants.vue
+++ b/src/project/tianfuxing/AppMy/Merchants.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="merchants">
    <div class="top">
-      <image :src="user.merchantInfo.photoUrl || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
+      <image :src="user.merchantInfo.logoFiles && user.merchantInfo.logoFiles[0].url" />
      <div class="right">
        <h2>{{ user.merchantInfo.merchantName }}</h2>
        <p>{{ user.merchantInfo.address }}</p>
--- a/src/project/tianfuxing/AppMy/UserInfo.vue
+++ b/src/project/tianfuxing/AppMy/UserInfo.vue
@@ -22,20 +22,11 @@
            <input placeholder="请输入手机号" type="number" maxlength="11" v-model="userInfo.phone" />
          </div>
        </div>
-        <div class="form-item">
-          <h2>所在社区</h2>
-          <picker :range="sqList" range-key="dictName" @change="e => (userInfo.sssq = sqList[e.detail.value].dictName)">
-            <div class="form-item__right">
-              <span :style="{color: userInfo.sssq ? '#333' : '#999'}">{{ userInfo.sssq ? userInfo.sssq : '请输入所在社区' }}</span>
-              <image class="right" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/ContentRightArrow@2x.png" />
-            </div>
-          </picker>
-        </div>
        <div class="form-item">
          <h2>所在小区</h2>
-          <picker :range="xqList" range-key="dictName" @change="e => (userInfo.szxq = xqList[e.detail.value].dictName)">
+          <picker :range="list" mode="multiSelector" @columnchange="columnchange" @change="onChange">
            <div class="form-item__right">
-              <span :style="{color: userInfo.szxq ? '#333' : '#999'}">{{ userInfo.szxq ? userInfo.szxq : '请输入所在小区' }}</span>
+              <span :style="{color: userInfo.sssq ? '#333' : '#999'}">{{ userInfo.sssq ? userInfo.sssq + '-' + userInfo.szxq : '请输入所在小区' }}</span>
              <image class="right" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/ContentRightArrow@2x.png" />
            </div>
          </picker>
@@ -57,7 +48,12 @@
      return {
        sqList: [],
        xqList: [],
-        userInfo: {}
+        userInfo: {},
+        list: [
+          [], []
+        ],
+        communityList: [],
+        currIndex: 0
      }
    },

@@ -73,9 +69,38 @@
        this.sqList = this.$dict.getDict('tfx_sssq')
        this.xqList = this.$dict.getDict('tfx_szxq')
      })
+
+      this.getInfo()
    },

    methods: {
+      getInfo () {
+        this.$instance.post('/api/publicDictionaryClassification/tree?type=0', null, {
+          withoutToken: true
+        }).then(res => {
+          if (res.code === 0) {
+            const villageList = res.data.map(v => v.name)
+            this.communityList = res.data.map(v => {
+              return v.children.map(v => v.name)
+            })
+
+            this.list[0] = villageList
+            this.list[1] = this.communityList[0]
+          }
+        })
+      },
+
+      onChange (e) {
+        this.$set(this.userInfo, 'sssq', this.list[0][e.detail.value[0]])
+        this.$set(this.userInfo, 'szxq', this.list[1][e.detail.value[1]])
+      },
+
+      columnchange (e) {
+        if (e.detail.column === 0) {
+          this.$set(this.list, '1', this.communityList[e.detail.value])
+        }
+      },
+
      save () {
        if (!this.userInfo.avatarUrl) {
          return this.$toast('请上传头像')
@@ -237,12 +262,16 @@
            input {
              width: 500rpx;
              text-align: right;
-              font-size: 30rpx;
+              font-size: 30px;
            }

            span {
+              max-width: 400px;
              color: #4e4e4e;
-              font-size: 30rpx;
+              font-size: 30px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap
            }

            .right {