uniAppXCX/pages/orderConfirm/orderConfirm.vue

<template>
  <view class="container">
    <view class="list">
      <view class="card" style="height: 60px; align-items: center" @click="toAddress" v-if="!addressId">
        <view class="row">
          <view class="left">
            <image class="icon" :src="$fileUrl() + '/orderConfirm/icon1.png'" mode="widthFix"></image>
            <span class="text1" style="margin-left: 5px">添加地址</span>
          </view>
          <view class="">
            <image class="icon" :src="$fileUrl() + '/orderConfirm/icon2.png'" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <view class="card" style="height: 60px; align-items: center" v-else @click="toAddress">
        <view class="row">
          <view>
            {{ address.name }}
          </view>
          <view>
            {{ address.tel }}
          </view>
        </view>
        <view class="row" style="margin-top: 5px">
          <view style="font-size: 12px">
            {{ address.province }}{{ address.city }}{{ address.county }}{{ address.addressDetail }}
          </view>
        </view>
      </view>
    </view>

    <view class="list">
      <view class="card" v-for="(item, index) in list">
        <view class="row" style="margin-top: 10px">
          <view class="left">
            <image class="img" :src="$fileUrl() + '/ka.jpeg'" mode="aspectFill"></image>
          </view>
          <view class="right" style="font-size: 14px">
            <view class="row title">
              {{ item.prizeName }}
            </view>
            <view class="row text">获得时间：{{ item.creatTime }}</view>
            <!-- 						<view class="row" style="color: #FF2C43;">
							回收积分：{{ item.integral }}
							<span class="status">{{ item.prizeStatus }}</span>
						</view> -->
            <!-- 						<view class="row button">
							<span></span>
							<span>
								<image style="width: 44px;" :src="$fileUrl() + /knapsack/button5.png" mode="widthFix"></image>
							</span>
						</view> -->
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="left">
        <view class="text">
          共计：
          <span style="color: #000">{{ list.length }}</span>
        </view>
      </view>
      <view class="right">
        <image
          class="button"
          @click="clickSubmit"
          :src="$fileUrl() + '/orderConfirm/button.png'"
          mode="heightFix"
        ></image>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" background-color="#fff" safe-area>
      <view class="popupContent">
        <view class="title">发货须知</view>
        <view class="text">
          1.平台默认使用圆通物流，满5件国内包邮新疆、内蒙、港澳台除外)，小于5件需支付15元邮费。申请发货后7-10个工作日发出
        </view>
        <view class="text">2.需要发其他快递请联系客服，高价卡建议联系客服进行顺丰保价。</view>
        <view class="text2">
          运费：
          <view class="price" v-if="this.list.length >= 5">￥0</view>
          <view class="price" v-else>￥15</view>
        </view>

        <image class="button" @click="payment" :src="$fileUrl() + '/orderConfirm/button2.png'" mode="heightFix"></image>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { packagePrizeIdsListApi, prizeOrderApi } from '@/api/knapsack.js'
import { addressDetailApi, addressDefaultDetailApi } from '@/api/address.js'
export default {
  data() {
    return {
      ids: [],
      list: [],
      address: {},
      addressId: '',
    }
  },
  onLoad(query) {
    this.getDefaultAddress()
    let orderConfirmIds = getApp().globalData.orderConfirmIds
    if (orderConfirmIds.length > 0) {
      this.ids = orderConfirmIds
      this.getList()
    }
    if (query.addressId) {
      this.addressId = query.addressId
      this.geAddress()
    }
    // this.$refs.popup.open('bottom')
  },
  methods: {
    getList() {
      packagePrizeIdsListApi(this.ids).then(res => {
        console.log(res, '商品')
        this.list = res.data
      })
    },
    // 获取默认地址
    getDefaultAddress() {
      addressDefaultDetailApi().then(res => {
        console.log(res, '默认地址')
        if (res.data) {
          this.address = res.data
          this.addressId = res.data.id
        }
      })
    },
    // 获取地址
    geAddress() {
      let params = {
        id: this.addressId,
      }
      addressDetailApi(params).then(res => {
        console.log(res, '选中的地址')
        if (res.data) {
          this.address = res.data
        }
      })
    },
    // 去选择地址
    toAddress() {
      getApp().globalData.selectAddrss = true
      this.$navigateTo('/pages/addressManage/addressManage')
    },
    clickSubmit() {
      if (!this.addressId) {
        wx.showToast({
          title: '请选则收货地址。',
          icon: 'none',
        })
        return
      }
      this.$refs.popup.open('bottom')
    },
    payment() {
      let param = {
        addressId: this.addressId,
        prizeIdList: this.ids,
      }
      let _this = this
      prizeOrderApi(param).then(res => {
        console.log(res, 'res')
        if (res.data.orderStatus == 201) {
          wx.showToast({
            title: '下单成功。',
            icon: 'success',
          })
          wx.switchTab({
            url: '/pages/knapsack/knapsack',
          })
          return
        }
        _this.wxPayment(res.data)
      })
    },
    close() {
      this.$refs.popup.close()
    },
    wxPayment(data) {
      let _this = this
      wx.requestPayment({
        timeStamp: data.timeStamp,
        nonceStr: data.nonceStr,
        package: data.packageValue,
        signType: data.signType,
        paySign: data.paySign,
        success: function (res) {
          console.log(res, '支付过程成功')
          wx.showToast({
            title: '支付成功。',
            icon: 'success',
          })
          _this.close()
          wx.navigateBack({
            delta: 1,
          })
        },
        fail: function (res) {
          console.log('支付过程失败')
          // util.showErrorToast('支付失败');
        },
        complete: function (res) {
          console.log('支付过程结束')
        },
      })
    },
  },
}
</script>

<style scoped lang="scss">
.list {
  padding: 10px;

  .swipeLeft {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;

    .radio {
      transform: scale(0.8);
    }
  }

  .card {
    margin-bottom: 10px;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    .row {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .left {
        display: flex;
        align-items: center;

        .photo {
          margin-right: 5px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }

        .name {
          font-size: 14px;
          font-weight: 600;
        }

        .img {
          width: 100px;
          height: 100px;
          border-radius: 2px;
          margin-right: 10px;
        }
      }

      .right {
        flex: 1;

        .row {
          margin-bottom: 5px;
        }

        .title {
          font-size: 16px;
          font-weight: 600;
        }
      }
      .icon {
        width: 16px;
      }
      .text1 {
        color: #666666;
        font-size: 12px;
      }
    }
  }
}
.bottom {
  background: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: calc(100% - 20px);
  padding: 10px 10px 30px 10px;
  .left {
    display: flex;
    justify-content: center;
    align-items: center;

    .text {
      color: #999;
      font-size: 14px;
      margin-left: 10px;
    }
    .radio1 {
      width: 20px;
      height: 20px;
    }
    .radio2 {
      width: 18px;
      height: 18px;
    }
  }

  .right {
    display: flex;

    .button {
      height: 30px;
    }
  }
}
.popupContent {
  .title {
    text-align: center;
    padding: 15px;
    font-weight: 600;
  }
  .text {
    padding: 10px 30px;
    font-size: 14px;
  }
  .text2 {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    .price {
      font-size: 14px;
      font-weight: 600;
      color: #ff2c43;
    }
  }

  .button {
    margin: 20px auto;
    height: 40px;
  }
}
</style>