dvcp_v2_wechat_app/src/mods/AppCreditPoints/submitOrder.vue

<template>
  <div class="order">
    <div class="order-info">
      <h2>{{ userName }}家</h2>
      <span>剩余积分:{{ familyIntegral }}分</span>
    </div>
    <image class="line" src="/static/img/line.png"/>
    <div class="order-list">
      <div class="order-item" v-for="(item, index) in goods" :key="index">
        <image :src="item.photo[0].url"/>
        <div class="order-item__right flex1">
          <h2>{{ item.merchandiseName }}</h2>
          <div class="order-item__right--info">
            <span>{{ item.costIntegral }}</span>
            <i>积分</i>
          </div>
          <div class="item-bottom">
            <div></div>
            <div class="item-bottom__right">
              <span>x {{ item.num }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="goods-footer">
      <div class="goods-footer__bottom">
        <div class="goods-footer__bottom__left">
          <h3>共{{ total }}件商品</h3>
          <div class="goods-footer__bottom--middle">
            <span>合计 ：</span>
            <i>{{ money }}</i>
            <em>积分</em>
          </div>
        </div>
        <div class="goods-footer__bottom--btn" @click="submit" hover-class="text-hover">确认提交</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  appName: "结算",
  data() {
    return {
      total: 0,
      money: 0,
      goods: [],
      memberId: '',
      userName: '',
      familyId: '',
      familyIntegral: 0
    }
  },

  onLoad(query) {
    this.userName = query.userName
    this.total = query.total
    this.familyIntegral = query.familyIntegral
    this.money = query.money
    this.memberId = query.memberId
    this.familyId = query.familyId
    this.goods = JSON.parse(query.goods)
  },

  methods: {
    submit() {
      this.$loading()
      this.$instance.post(`/app/appvillagerintegralshoporder/createOrderForWx`, {
        memberId: this.memberId,
        familyId: this.familyId,
        orderIntegral: this.money,
        shopId: this.goods[0].shopId,
        merchandiseList: this.goods.map(item => {
          return {
            merchandiseId: item.id,
            merchandiseNumber: item.num
          }
        })
      }).then(res => {
        if (res.code === 0) {
          uni.$emit('update')
          this.$linkTo('./result?type=0')
        } else {
          this.$linkTo('./result?type=1')
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.order {
  min-height: 100%;
  background: #fff;

  .line {
    width: 100%;
    height: 8px;
  }

  .order-item {
    display: flex;
    padding: 28px 30px 44px;

    .order-item__right--info {
      display: flex;
      align-items: baseline;

      span {
        margin-right: 8px;
        color: #FA4A51;
        font-size: 40px;
      }

      i {
        color: #FA4A51;
        font-size: 24px;
      }
    }

    h2 {
      margin-top: 2px;
      margin-bottom: 30px;
      color: #333333;
      font-size: 30px;
      text-align: justify;
    }

    & > image {
      width: 192px;
      height: 192px;
      margin-right: 30px;
    }
  }

  .order-list {
    margin-top: 20px;
    padding-bottom: 110px;
  }

  .order-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 128px;
    padding: 0 30px;
    color: #333333;
    font-size: 32px;
  }

  .goods-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 11;
    width: 100%;
    box-shadow: 0px -1px 4px 0px rgba(214, 214, 214, 0.5);
    background: #fff;

    .goods-footer__bottom--btn {
      width: 212px;
      height: 104px;
      line-height: 104px;
      font-size: 36px;
      color: #fff;
      text-align: center;
      background: #197DF0;
    }

    .goods-footer__bottom__left {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      padding: 0 32px;

      h3 {
        color: #F94246;
        font-size: 32px;
      }

      .goods-footer__bottom--middle {
        display: flex;
        align-items: baseline;

        span {
          color: #F94246;
          font-size: 32px;
        }

        i {
          position: relative;
          top: 2px;
          margin-right: 6px;
          color: #FA444B;
          font-size: 40px;
        }

        em {
          color: #F94246;
          font-size: 24px;
        }
      }
    }

    .goods-footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 104px;
    }
  }

  .item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;

    .item-bottom__right {
      display: flex;
      align-items: center;
      color: #666;
    }

    image {
      width: 40px;
      height: 40px;
    }

    input {
      width: 90px;
      height: 60px;
      padding: 020px;
      margin: 010px;
      background: #F6F6F6;
      border-radius: 10px;
      font-size: 26px;
      color: #666;
    }
  }
}
</style>