fanxing-shop/pages/order/order_confirm.vue

<!-- 订单确认页 -->
<template>
  <view class="order_confirm" :style="{ background: 'url(' + bgImg + ') #F4F5F9' }">
    <view class="all">
      <view class="title">您选择的{{ setData.packageName }}</view>
      <view class="menu">
        <view class="amounts flex jcsb">
          <view class="amontl">
            <view class="now flex aife">
              <text class="dw fs40">¥</text>
              <text class="num">{{ setData.currentPrice }}</text>
              <text class="unit">/条</text>
            </view>
            <view class="past flex aic">
              <text class="past_text fs28">原价</text>
              <text class="past_num fs32">¥{{ setData.originalPrice }}/条</text>
            </view>
          </view>
          <view class="amontr">
            <text class="num">{{ strip }}</text>
            <text class="unit">条</text>
          </view>
        </view>
        <view class="choose">
          <view v-for="(item, index) in setData.selectContents" :key="index"
                class="choose_item-box flex aic jcsb">
            <view class="choose_item flex aic">
              <image :src="guoxuanImg"></image>
              <text>{{ item.configKey }}可选 {{ item.count || 0 }} 个</text>
            </view>
            <view v-if="index == 0" class="choose_item-more flex aic" @click="toDetail">
              <text>查看更多</text>
              <image :src="moreBImg"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="choosion">
        <view class="name">选择内容</view>
        <view class="content">
          <view v-for="(item, index) in orderContents" :key="index" class="content_item flex aic jcsb"
                @click="chooseScene(item, index)">
            <view class="aic flex">
              <view class="item_label">{{ item.name }}</view>
              <view v-if="item.scenes.length > 0" class="item_num">{{ item.scenes.join('; ') }}</view>
              <view v-else class="item_text">{{ setData.packageName }}可选 {{ item.count || 0 }} 个{{
                  item.name
                }}
              </view>
            </view>
            <image class="more_img" :src="moreImg"></image>
          </view>
        </view>
      </view>
      <view class="choosion">
        <view class="name">支付方式</view>
        <view class="content">
          <view class="content_item flex aic jcsb">
            <view class="aic flex">
              <image class="icon_img" :src="weixinImg"></image>
              <view class="item_name">微信支付</view>
            </view>
            <image class="icon_img" :src="guoyuanImg"></image>
          </view>
        </view>
      </view>
      <view class="choosion">
        <view class="name">收件方式</view>
        <view class="content">
          <view class="content_item flex aic jcsb">
            <view class="aic flex">
              <view class="item_label">收件人</view>
              <u--input v-model="formData.recipientName" placeholder="输入收件人姓名" fontSize="14"
                        :customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
            </view>
          </view>
          <view class="content_item flex aic jcsb">
            <view class="aic flex">
              <view class="item_label">联系电话</view>
              <u--input v-model="formData.contactPhone" placeholder="输入手机号码" fontSize="14"
                        :customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
            </view>
          </view>
          <view class="content_item flex aic jcsb">
            <view class="aic flex">
              <view class="item_label">收件地址</view>
              <u--input v-model="formData.email" placeholder="输入电子邮箱或网盘" fontSize="14"
                        :customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
            </view>
          </view>
        </view>
      </view>
      <view class="choosion">
        <view class="name">需求相关</view>
        <view class="content">
          <view class="content_item flex aic jcsb">
            <view class="flex">
              <view class="item_label">以往案例</view>
              <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                        :maxCount="5">
                <view class="item_updata">
                  <image :src="upImg"></image>
                  <text>上传案例</text>
                </view>
              </u-upload>
            </view>
          </view>
          <view class="content_item flex aic jcsb">
            <view class="flex w100">
              <view class="item_label pt18">拍摄需求</view>
              <u--textarea v-model="formData.shootingRequirements" placeholder="简单描述您的拍摄需求" count
                           maxlength="200"></u--textarea>
            </view>
          </view>
        </view>
      </view>
      <view class="agree">
        <text>点击“确认支付”，即代表您已阅读并同意</text>
        <text class="agree_text">《用户购买协议》</text>
      </view>
    </view>
    <view class="btom">
      <view class="sum">
        <text>应付款：</text>
        <text class="money">
          <text class="unit">¥</text>
          {{ numMultiR }}
        </text>
      </view>
      <view class="btn" :style="{ background: 'url(' + buybtnBg + ')' }" @click="submitOrder">立即购买</view>
    </view>
    <u-popup ref="uPicker" mode="bottom" :loading="loading" :show="isSelect" round="12" @close="close" @open="open"
             :customStyle="{ height: '100px' }">
      <view class="popup_content safe-area-inset-bottom">
        <view class="checkbox">
          <u-checkbox-group v-model="checked" placement="column" iconPlacement="right"
                            @change="checkboxChange">
            <u-checkbox v-for="(item, index) in configData" :key="index" :label="item" :name="item"
                        :customStyle="{ marginBottom: '24px' }" :disabled="isDisabled(item)"></u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="btns flex aic jcsb">
          <view class="cancel" @click="close">取消</view>
          <view class="confirm" @click="confirm">确认</view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import {getPackageById, getConfigById, upload, save} from '@/apis/index';
import {baseUrl} from "@/config"
import {numMulti} from '@/utils/calculate'
import wx from 'jweixin-module';
import {getWxBuyConfig, submitOrder} from "../../apis";

export default {
  components: {},
  data() {
    return {
      type: '',
      fileList1: [],
      count: '', //可选数量
      strip: '',//条数
      packageId: '', //套餐id
      setData: {}, // 套餐数据
      configData: [], //选择内容数据
      loading: false,
      isSelect: false,
      name: '',
      phone: '',
      checked: [], //多选
      orderContents: [], //选中后的内容
      configKey: '',//内容标题
      bgImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/bg_top%403x.png",
      guoxuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuan.png',
      guoyuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuanyuan.png',
      moreBImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_black.png',
      moreImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more%403x.png',
      weixinImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_weixinzhifu.png',
      upImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_up.png',
      buybtnBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_buy.png',
      formData: {
        recipientName: '',
        contactPhone: '',
        email: '',
        shootingRequirements: '',
      }
    };
  },
  computed: {
    numMultiR() {
      return numMulti(Number(this.setData.currentPrice), Number(this.strip))
    }
  },
  watch: {},
  onLoad(options) {
    if (options.id) this.packageId = options.id
    if (options.strip) this.strip = options.strip
    if (options.type) this.type = options.type
    this.getPackage()
  },
  methods: {
    toDetail() {
      uni.navigateTo({
        url: '/pages/index/detail?type=' + this.type
      })
    },
    // 判断当前选项是否应该禁用
    isDisabled(value) {
      // 已选中6个且当前选项未被选中时禁用
      return this.checked.length >= this.count &&
          !this.checked.includes(value)
    },

    // 选择变化时的处理
    checkboxChange(values) {
      if (values.length > this.count) {
        // 如果超过6个，自动截断并提示
        this.checked = values.slice(0, thsi.count);
        uni.showToast({
          title: '最多只能选择6个选项',
          icon: 'none'
        });
      }
    },

    // 获取套餐内容
    getPackage() {
      getPackageById({packageId: this.packageId}).then(res => {
        this.setData = res
        this.orderContents = res.selectContents.map(item => {
          return {
            name: item.configKey,
            configId: item.configId,
            count: item.count,
            scenes: []
          }
        })
        console.log('orderContents', this.orderContents);
      })
    },
    open() {
      console.log('打开');
    },
    // 选择内容
    chooseScene(item, index) {
      if (!item.count) {
        uni.showToast({
          title: '无可选内容',
          icon: 'none'
        });
        return
      }
      this.loading = true
      getConfigById({
        packageId: this.packageId,
        configId: item.configId
      }).then(res => {
        this.loading = false
        this.count = item.count
        console.log(this.checked, this.count, '数量');
        this.configData = res
        this.configKey = item.name
        this.orderContents.map(itm => {
          if (itm.name === this.configKey && itm.scenes.length !== 0) {
            this.checked = itm.scenes
          }
        })
        this.isSelect = true

      })
    },
    confirm() {
      if (this.checked.length < this.count) {
        uni.showToast({
          title: '至少选择' + this.count + '个选项',
          icon: 'none',
        });
        return
      }
      this.orderContents.map(item => {
        if (item.name === this.configKey) {
          item.scenes = this.checked
        }
      })
      this.checked = []
      this.isSelect = false

    },
    close() {
      this.isSelect = false
      this.checked = []
    },

    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式

      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
            fileListLen,
            1,
            Object.assign({
              // status: "success",
              // message: "",
              url: result,
            })
        );
        fileListLen++;
      }
      console.log(this.fileList1, 'fileList1');
    },
    uploadFilePromise(url) {
      console.log(url, upload, 'url');
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: baseUrl + '/sys/oss/upload', // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            let data = JSON.parse(res.data);
            setTimeout(() => {
              resolve(data.data.src);
            }, 1000);
          },
          fail: (err) => {
            console.log(err, 'err');
            reject(err);
          },
        });
      });
    },

    // 校验选择内容
    checkContents() {

      for (const item of this.orderContents) {
        if (!item.scenes || item.scenes.length === 0) {
          uni.showToast({
            title: `请选择${item.name}`,
            icon: 'none',
            duration: 2000
          });
          return false; // 校验失败
        }
      }
      return true; // 校验成功
    },

    // 校验表单
    checkForm() {
      if (this.formData.recipientName === '' || this.formData.contactPhone === '' || this.formData.email === '') {
        uni.showToast({
          title: '请填写完整收件方式',
          icon: 'none',
        });
        return false
      }
      return true; // 校验成功

    },

    invokePayment(rePayInfo) {
      WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: rePayInfo.appid,
            timeStamp: rePayInfo.timeStamp,
            nonceStr: rePayInfo.nonceStr,
            package: rePayInfo.packages,
            signType: rePayInfo.signType,
            paySign: rePayInfo.sign
          },
          (res) => {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              uni.navigateTo({
                url: '/pages/order/success?orderId=' + rePayInfo.orderId
              })
            } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
              uni.showToast({
                title:'用户取消了支付'
              })
            } else {
              console.error('支付失败', res.err_msg);
              // 处理支付失败的逻辑
            }
          }
      );
    },

    // 提交订单
    submitOrder() {

      if (!this.checkContents()) {
        return; // 如果校验失败，停止提交
      }
      if (!this.checkForm()) {
        return; // 如果校验失败，停止提交
      }
      let params = {
        packageId: Number(this.packageId),
        quantity: this.strip,
        unitPrice: this.setData.currentPrice,
        totalAmount: this.numMultiR,
        packageName: this.setData.packageName,
        ...this.formData,
        caseFileUrls: this.fileList1.map(item => {
          return item.url
        }),
        orderContents: this.orderContents,
      }

      submitOrder({
        ...params
      }).then((res) => {
        // 检查是否在微信浏览器中
        if (typeof WeixinJSBridge === 'undefined') {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', () => {
              this.invokePayment(res);
            }, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', () => {
              this.invokePayment(res);
            });
            document.attachEvent('onWeixinJSBridgeReady', () => {
              this.invokePayment(res);
            });
          }
        } else {
          this.invokePayment(res);
        }
      })
    }


  },
  created() {

  },
  mounted() {

  },
}
</script>
<style lang="scss">
uni-toast {
  z-index: 99999 !important;
}
</style>
<style lang='scss' scoped>
.order_confirm {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: top;

  .all {
    padding: 0 24rpx;
    flex: 1;
    overflow: auto;

    .title {
      font-weight: 500;
      font-size: 36rpx;
      color: #0D121A;
      margin: 48rpx 0 40rpx;
      text-align: center;
    }

    .menu {
      width: 100%;
      background: linear-gradient(180deg, #E4F8FF 0%, #FFFFFF 100%);
      border-radius: 24rpx;
      border: 2rpx solid #FFFFFF;
      padding: 64rpx 48rpx;

      .amounts {
        .now {
          font-size: 32rpx;
          color: #0D121A;

          .dw {
            line-height: 40rpx;
          }

          .limit {
            margin-left: 24rpx;
            width: 72rpx;
            height: 40rpx;
            background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
            border-radius: 8rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #0D121A;
            text-align: center;
            line-height: 40rpx;
          }
        }

        .num {
          font-size: 72rpx;
          line-height: 56rpx;
          font-weight: bold;
        }

        .unit {
          margin-left: 8px;
        }

        .past {
          color: #0D121A;
          margin-top: 34rpx;

          .past_text {
            margin-right: 8rpx;
          }
        }
      }

      .choose {
        margin-top: 64rpx;

        .choose_item-box {
          margin-top: 16rpx;

          image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 24rpx;
          }

          text {
            color: #0D121A;
            font-size: 28rpx;
          }
        }

        .choose_item-more {
          text {
            font-size: 28rpx;
            color: #0D121A;
          }

          image {
            width: 32rpx;
            height: 32rpx;
            margin-left: 12rpx;
          }
        }

        .choose_item-box:nth-child(1) {
          margin-top: 0;
        }
      }
    }

    .choosion {
      .name {
        font-weight: 400;
        font-size: 28rpx;
        color: #9EA3B1;
        margin: 32rpx 0 20rpx 32rpx;
      }

      .content {
        background-color: #FFFFFF;
        border-radius: 24rpx;

        .content_item {
          padding: 36rpx 32rpx;

          .item_updata {
            width: 168rpx;
            height: 168rpx;
            background: #F4F5F9;
            border-radius: 16rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            // margin-left: 48rpx;

            image {
              width: 56rpx;
              height: 56rpx;
            }

            text {
              color: #9EA3B1;
              font-weight: 400;
              font-size: 24rpx;
            }
          }

          .item_label {
            font-weight: 500;
            font-size: 28rpx;
            color: #0D121A;
            min-width: 150rpx;
            white-space: nowrap;
          }

          .item_num {
            font-size: 28rpx;
            margin-left: 48rpx;

          }

          .item_text {
            font-size: 28rpx;
            color: #9EA3B1;
            margin-left: 48rpx;
          }

          .item_name {
            font-size: 28rpx;
            color: #0D121A;
            margin-left: 16rpx;
          }

          .more_img {
            width: 32rpx;
            height: 32rpx;
            flex-shrink: 0;
          }

          .icon_img {
            width: 48rpx;
            height: 48rpx;
          }

          input {
            height: 0;
          }
        }

        .content_item_input {
        }
      }
    }

    .agree {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #9EA3B1;
      padding: 48rpx 0 32rpx;

      .agree_text {
        color: #0D121A;
      }
    }
  }

  .btom {
    background: #FFFFFF;
    flex-shrink: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 24rpx;
    padding-bottom: calc(16rpx + constant(safe-area-inset-bottom)) !important;
    padding-bottom: calc(16rpx + env(safe-area-inset-bottom)) !important;

    .sum {
      font-weight: 400;
      font-size: 30rpx;
      color: #0D121A;

      .money {
        font-size: 56rpx;
        color: #0D121A;
      }

      .unit {
        font-size: 40rpx;
      }
    }

    .btn {
      width: 312rpx;
      height: 84rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      font-size: 32rpx;
      color: #0D121A;
      background-size: 100% 100% !important;

    }
  }

  .pt18 {
    padding-top: 18rpx;
  }

  .popup_content {
    padding: 32rpx;
    max-height: 1000rpx;
    display: flex;
    flex-direction: column;

    .checkbox {
      flex: 1;
      overflow: auto;
    }

    .btns {
      flex-shrink: 1;
    }
  }

  .btns {
    padding: 0 0 16rpx;
    color: #0D121A;

    .cancel {
      width: 45%;
      height: 84rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border: #9EA3B1 1px solid;
    }

    .confirm {
      width: 45%;
      height: 84rpx;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
    }
  }

  .u-popup {
    flex: 0;
    z-index: 999;
  }
}
</style>