rebatedine-mini/src/pagesSub/order/submitOrder.vue

<template>
  <view>
    <network-error />
    <u-notice-bar mode="horizontal"
                  :list="['虚假填写信息将被列入黑名单，永久不得参加活动']"></u-notice-bar>
    <view class="main">
      <view class="item u-flex u-row-left u-border-bottom">
        <view class="label u-flex label-w">
          <view class="icon-bt"></view>
          <view>外卖订单编号</view>
        </view>
        <input v-model="form.ordersn"
               placeholder="请输入订单编号" />
      </view>
      <view class="item u-flex u-row-left u-border-bottom">
        <view class="label u-flex label-w">
          <view class="icon-bt"></view>
          <view>实际支付金额</view>
        </view>
        <input v-model="form.real_pay_price"
               type="digit"
               placeholder="请输入实际支付金额" />
      </view>
      <view class="item u-flex u-row-left u-border-bottom">
        <view class="label u-flex label-w">
          <view class="icon-bt"></view>
          <view>手机号</view>
        </view>
        <input v-model="form.contact_phone"
               type="number"
               placeholder="请输入手机号" />
      </view>
      <view class="item u-flex u-row-left u-border-bottom">
        <view class="label u-flex label-w">
          <view class="icon-bt"></view>
          <view>支付宝账号</view>
        </view>
        <input v-model="userInfo.alipay_account"
               placeholder="请完善支付宝账号"
               :disabled="true" />
      </view>
      <view class="item u-flex u-row-left u-border-bottom">
        <view class="label u-flex label-w">
          <view class="icon-bt"></view>
          <view>真实姓名</view>
        </view>
        <input v-model="userInfo.alipay_username"
               placeholder="请完善支付宝真实姓名"
               :disabled="true" />
      </view>
      <view class="item u-border-bottom">
        <view class="label u-flex">
          <view class="icon-bt"></view>
          <view>订单截图<span class="u-content-color u-font-30 line-42">（含店名与实付金额）</span></view>
        </view>
        <view class="u-flex u-flex-wrap u-p-t-40">
          <block v-for="(item, index) in imgList1"
                 :key="index">
            <view class="u-rela img-item">
              <image :src="item.url | imgFilter(4)"
                     mode="aspectFill"
                     @click="lookImg(imgList1, index)"></image>
              <view class="icon-del-red-wh icon-del-red"
                    @click="delImg(index, 1)"></view>
            </view>
          </block>
          <view class="upload icon-upload-bg"
                @click="uploadImg(1)"></view>
        </view>
      </view>
      <view class="item u-border-bottom">
        <view class="label u-flex">
          <view class="icon-bt"></view>
          <view>订单截图<span class="u-content-color u-font-30 line-42">（含下单时间与订单号）</span></view>
        </view>
        <view class="u-flex u-flex-wrap u-p-t-40">
          <block v-for="(item, index) in imgList2"
                 :key="index">
            <view class="u-rela img-item">
              <image :src="item.url | imgFilter(4)"
                     mode="aspectFill"
                     @click="lookImg(imgList2, index)"></image>
              <view class="icon-del-red-wh icon-del-red"
                    @click="delImg(index, 2)"></view>
            </view>
          </block>
          <view class="upload icon-upload-bg"
                @click="uploadImg(2)"></view>
        </view>
      </view>
      <view class="item u-border-bottom">
        <view class="label u-flex">
          <view class="icon-bt"></view>
          <view>评价截图<span class="u-content-color u-font-30 line-42">（需上传评价截图）</span>
            <span class="rule u-m-l-32"
                  @click="toRule">评价规则</span>
          </view>
        </view>
        <view class="u-flex u-flex-wrap u-p-t-40">
          <block v-for="(item, index) in imgList3"
                 :key="index">
            <view class="u-rela img-item">
              <image :src="item.url | imgFilter(4)"
                     mode="aspectFill"
                     @click="lookImg(imgList3, index)"></image>
              <view class="icon-del-red-wh icon-del-red"
                    @click="delImg(index, 3)"></view>
            </view>
          </block>
          <view class="upload icon-upload-bg"
                @click="uploadImg(3)"></view>
        </view>
      </view>
      <view class="item u-border-bottom">
        <view class="label u-flex">
          <view class="icon-bt"></view>
          <view>门店搜索结果页截图<span class="u-content-color u-font-30 line-42">（截图需包含当前门店）</span>
          </view>
        </view>
        <view class="u-flex u-flex-wrap u-p-t-40">
          <block v-for="(item, index) in imgList4"
                 :key="index">
            <view class="u-rela img-item">
              <image :src="item.url | imgFilter(4)"
                     mode="aspectFill"
                     @click="lookImg(imgList4, index)"></image>
              <view class="icon-del-red-wh icon-del-red"
                    @click="delImg(index, 4)"></view>
            </view>
          </block>
          <view class="upload icon-upload-bg"
                @click="uploadImg(4)"></view>
        </view>
      </view>
    </view>
    <button class="sub u-m-t-12"
            :disabled="disabledBtn"
            @click="submit">提交</button>
  </view>
</template>

<script>
import upload from '@/utils/uploadImg'
import dealImgUrl from '@/utils/dealImgUrl'
import { submitOrderInfo } from '@/api/userApi'
export default {
  data () {
    return {
      activityId: '',
      form: {
        id: '',
        ordersn: '',
        contact_phone: '',
        real_pay_price: '',
        img_items: []
      },
      imgList1: [], // 订单截图（含店名与实付金额）
      imgList2: [], // 订单截图（含下单时间与订单号）
      imgList3: [], // 评价截图（需上传评价截图）
      imgList4: [] // 搜索结果截图
    }
  },
  computed: {
    userInfo () {
      console.log(this.$store.state.userInfo)
      return this.$store.state.userInfo
    },
    disabledBtn () {
      if (!this.imgList4.length) {
        return true
      } else if (!this.imgList3.length) {
        return true
      } else if (!this.imgList2.length) {
        return true
      } else if (!this.imgList1.length) {
        return true
      } else if (!this.form.real_pay_price) {
        return true
      } else if (!this.form.contact_phone) {
        return true
      } else if (!this.form.ordersn) {
        return true
      } else {
        return false
      }
    }
  },
  onLoad (options) {
    this.activityId = options.activityId
    this.form.id = options.userActivityId
  },
  methods: {
    // 提交订单信息
    async submitForm () {
      const params = JSON.parse(JSON.stringify(this.form))
      params.real_pay_price = params.real_pay_price * 100
      const { code, msg } = await submitOrderInfo(params)
      if (code === 200) {
        uni.navigateTo({
          url: `/pagesSub/order/submitOutcome?id=${this.activityId}`
        })
      } else {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
      }
    },
    // 上传图片
    async uploadImg (type) {
      const imgs = await upload(9)
      if (type === 1) {
        this.imgList1 = this.imgList1.concat(imgs)
      } else if (type === 2) {
        this.imgList2 = this.imgList2.concat(imgs)
      } else if (type === 3) {
        this.imgList3 = this.imgList3.concat(imgs)
      } else if (type === 4) {
        this.imgList4 = this.imgList4.concat(imgs)
      }
    },
    delImg (index, type) {
      if (type === 1) {
        this.imgList1.splice(index, 1)
      } else if (type === 2) {
        this.imgList2.splice(index, 1)
      } else if (type === 3) {
        this.imgList3.splice(index, 1)
      } else if (type === 4) {
        this.imgList4.splice(index, 1)
      }
    },
    // 点击提交
    submit () {
      const is = /^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.contact_phone)
      if (!is) {
        uni.showToast({
          title: '请输入正确的手机号！',
          icon: 'none'
        })
        return
      }
      const imgList1 = this.dealImg(this.imgList1, 1)
      const imgList2 = this.dealImg(this.imgList2, 2)
      const imgList3 = this.dealImg(this.imgList3, 3)
      const imgList4 = this.dealImg(this.imgList4, 4)
      this.form.img_items = this.form.img_items.concat(imgList1, imgList2, imgList3, imgList4)
      this.submitForm()
    },
    // 处理上传图片
    dealImg (arr, type) {
      const imgs = []
      arr.forEach(item => {
        const imgItem = {
          url: item.url,
          res_type: type
        }
        imgs.push(imgItem)
      })
      return imgs
    },
    toRule () {
      uni.navigateTo({
        url: `/pagesSub/order/rule?id=${this.activityId}`
      })
    },
    lookImg (list, index) {
      const imgs = list.map(item => {
        item.url = dealImgUrl(item.url)
        return item.url
      })
      uni.previewImage({
        urls: imgs,
        current: index
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;
}
.icon-bt {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
.item {
  padding: 32px 32px 32px 24px;
}
.label {
  font-size: 30px;
  color: $u-main-color;
  line-height: 42px;
}
.label-w {
  width: 200px;
  margin-right: 78px;
}
.sub {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 116px;
  border-radius: 0;
  background-color: $u-type-primary;
  color: #fff;
  font-size: 36px;
  line-height: 50px;
  &::after {
    border-color: transparent;
  }
}
.img-item image,
.upload {
  width: 160px;
  height: 160px;
  border-radius: 4px;
  font-size: 0;
}
.upload {
  margin-bottom: 16px;
}
.img-item {
  margin-right: 14px;
  margin-bottom: 10px;
}
.icon-del-red-wh {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
}
.rule {
  color: $u-type-other;
}
button[disabled] {
  color: #f8f9fb;
  background-color: #f8bca9;
}
</style>

<style scoped>
.u-notice-bar >>> .u-notice-text {
  font-size: 26px;
}
</style>