fix bug 接口对接和样式调整

xuxueyang

2024-07-26 2d5090c2b215a5ea7e489d4b50fbf30aae569324

 sub_pages/customer/shopping/confirm.vue

@@ -13,34 +13,14 @@
    }),

  },
  watch: {
    // address(nv, ov) {
    //   if (nv && nv.id) {
    //     //尝试更新一下
    //
    //   }
    // }
  },
  async onShow() {
    setTimeout(async () => {
      if (this.address && this.address.id && this.cacheAddressId !== this.address.id) {
        this.$message.showLoading()
        const {code, data} = await this.$http.request('get', '/api/flower/customer/order/confirm/transports', {
          data: {
            addressId: this.address.id,
            weight: this.dto.totalWeight || 0
          }
        })
        this.$message.hideLoading()
        this.transportList = []
        if (code === 0) {
          this.transportList = data || []
        }
      }
    }, 200)

  },
  onLoad(options) {
    let item = JSON.parse(decodeURIComponent(options.query.dto));
    // console.log('dto',options)

    // let item = JSON.parse(decodeURIComponent(options.query.dto));
    let item = JSON.parse(this.$storage.getItem('_cache_shopping_dto') || '{}') || {}
    this.dto = {
      ...this.dto,
      ...item
@@ -61,24 +41,56 @@
        addressId: '',
        flowers: [],
      },
      current_transport: {},
      cacheAddressId: '',
      transportList: [],


    }
  },
  watch: {
    address(nv, ov) {
      if (nv && nv.id !== this.cacheAddressId) {
        this.loadTransportList()
        this.cacheAddressId = nv.id

      }
    }
  },
  methods: {
    async loadTransportList() {
      let that = this
      {
        console.log('address', that.address, that.cacheAddressId)
        if (that.address && that.address.id && that.cacheAddressId !== that.address.id) {
          that.$message.showLoading()
          const {code, data} = await that.$http.request('post', '/api/customer/flower/order/confirm/transports', {
            data: {
              addressId: that.address.id,
              weight: that.dto.totalWeight || 0
            }
          })
          that.$message.hideLoading()
          that.transportList = []
          if (code === 0) {
            that.transportList = data || []
          }
        }
      }
    },
    async submitOrder() {
      console.log('submitOrder', this.dto)
      if (!this.dto.transportId) {
        this.$message.toast('请选择配送方式')
        this.$message.showToast('请选择配送方式')
        return
      }
      if (!this.dto.addressId) {
        this.$message.toast('请选择收货地址')
      if (!this.address.id) {
        this.$message.showToast('请选择收货地址')
        return
      }
      this.dto.addressId = this.address.id
      this.$message.showLoading()
      const {code, data} = await this.$http.request('post', '/api/customer/flower/order/confirm', {
      const {code, data} = await this.$http.request('post', '/api/customer/flower/order/commit', {
        data: {
          ...this.dto
        }
@@ -127,18 +139,18 @@

<template>
  <view class="page-confirm">
    <view class="p10">
    <view class="p10 bg-white br-4">
      <common-address-select ref="addressselect"></common-address-select>
    </view>
    <view>
      <view class="flower-container">
        <view class="shopping-item m-t-20" v-for="(item,index) of dto.flowers" :key="index">
      <view class="flower-container br-4 p10">
        <view class="shopping-item m-b-20" v-for="(item,index) of dto.flowers" :key="index">
          <u-divider v-if="index>0"></u-divider>
          <view class="sup-title">
            <image class="icon-dp" src="/static/common/icon-dp.png"></image>
            {{ item.supplierName || '-' }}
          <view class="sup-title flex">
            <image class="icon-dp img100 m-r-10" src="/static/common/icon-dp.png"></image>
            <view>{{ item.supplierName || '-' }}</view>
          </view>
          <view class="item-each flex">
          <view class="item-each m-t-12 flex">
            <image class="img img100 m-r-6" :src="item.url||item.cover"></image>
            <view>
              <view class="title"><span>{{ item.levelStr || '-' }}</span>&nbsp;&nbsp;{{ item.name || '-' }}</view>
@@ -152,25 +164,25 @@
          </view>
        </view>
        <view class="price">
          <view class="desc">打包费用:{{ dto.packing || 0 }}}</view>
          <view class="m-l-a m-r-0">
          <view class="m-l-a m-r-0 text-right">
            共{{ dto.flowers.length }}件，小计<span class="t-red">￥{{ dto.totalAmount || 0 }}</span>
          </view>
        </view>
      </view>
      <!--    查看商品列表，和选择运费 -->
      <view class="transform-container p10">
        <view class="title flex">
      <view class="br-4 transform-container p10">
        <view class="title">
          <view>运输方式：</view>
          <!--          <view>约</view>-->
          <view class="flex transform-list">
            <view v-for="(transform,index) of transportList" :class="[transform.id===dto.transportId?'cur':'']"
                  :key="index" class="transform-item" @click="dto.transportId = transform.id">
                  :key="index" class="transform-item" @click="()=>{
                    dto.transportId = transform.id;
                    current_transport = transform
                  }">
              <view class="title">{{ transform.name }}</view>
              <view class="price">￥{{ transform.fee }}</view>
            </view>
          </view>

        </view>
        <view class="m-t-20" v-if="false">
          <view class="desc-red">
@@ -184,29 +196,58 @@
        </view>
      </view>

      <view class="form-item p10">
        <view class="label">特殊需求</view>
        <view class="m-l-a m-r-0 flex text-right">
          <u-textarea v-model="dto.remarks" placeholder="请输入特殊需求">
      <view class="p10 bg-white m-t-20 br-4">
        <view class="form-item  ">
          <view class="label">特殊需求</view>
          <view class="m-l-a m-r-0 flex1">
            <view class="m-t-12 m-b-12">
              <u-textarea v-model="dto.specialNeeds" placeholder="请输入特殊需求">

          </u-textarea>
              </u-textarea>
            </view>
          </view>
        </view>
      </view>
      <view class="form-item p10">
        <view class="label">留言</view>
        <view class="m-l-a m-r-0 flex text-right">
          <u-textarea v-model="dto.remarks" placeholder="填写内容需与卖家协商并确认">
        <view class="form-item  m-t-12 ">
          <view class="label">留言</view>
          <view class="m-l-a m-r-0 flex1">
            <view class="m-t-12 m-b-12">
              <u-textarea v-model="dto.remarks" placeholder="填写内容需与卖家协商并确认">

          </u-textarea>
              </u-textarea>
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="bottom-price flex">
      <view>
        合计:￥ {{ dto.totalAmount || 0 }} 元
    <view class="m-t-20 br-4 info-container p10 bg-white">
      <view class="desc flex">
        <view>商品金额:</view>
        <view class="m-l-a m-r-0 text-right">
          {{ (dto.totalAmount || 0) - (dto.packing) || 0 }}
        </view>
      </view>
      <view class="button-green-1" @click="submitOrder">
      <view class="desc flex">
        <view>打包费:</view>
        <view class="m-l-a m-r-0 text-right">
          {{ (dto.packing || 0) }}
        </view>
      </view>
      <view class="desc flex">
        <view>运费:</view>
        <view class="m-l-a m-r-0 text-right">
          {{ (current_transport.fee || 0) }}
        </view>
      </view>
    </view>

    <view style="min-height:200rpx">
    </view>
    <view class="bottom-price flex">
      <view class="m-t-12 m-l-0 m-r-a">
        合计:￥ {{ (dto.totalAmount || 0) + (current_transport.fee || 0) || 0 }} 元
      </view>
      <view class="button-green-1 m-l-a m-r-0" style="min-width: 240rpx" @click="submitOrder">
        提交订单
      </view>
    </view>
@@ -215,17 +256,36 @@

<style scoped lang="scss">
.page-confirm {
  padding: 20rpx 30rpx;
  .bottom-price {
    position: fixed;
    background-color: #ffffff;
    left: 0rpx;
    padding: 20rpx;
    right: 0rpx;
    bottom: 0rpx;
  }

  .flower-container {
    background-color: #ffffff;

    .shopping-item {
      padding: 28rpx 22rpx;
      position: relative;

      .sup-title {
        border-bottom: 2rpx solid #EEEEEE;
        line-height: 50rpx;

        .icon-dp {
          width: 36rpx;
          height: 36rpx;
          margin-top: 7rpx;
        }
      }

      .item-each {
        padding-left: 88rpx;
        padding-left: 20rpx;

        .img {
          width: 124rpx;
@@ -256,27 +316,49 @@
          font-size: 24rpx;
          color: #666666;
          line-height: 34rpx;

        }
      }

      .button-icons {
        position: absolute;
        line-height: 40rpx;

      }
    }

  }

  .info-container {
    .desc {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 40rpx;

      .value {
        text-align: right;
      }
    }
  }

  .transform-container {
    background-color: #ffffff;

    .transform-list {
      .transform-item {
        background: rgba(225, 240, 231, 0.38);
        border-radius: 8rpx;
        min-height: 112rpx;
        //min-height: 112rpx;
        border: 2rpx solid rgba(225, 240, 231, 0.38);
        padding: 14rpx;
        text-align: center;
        margin: 0 auto;
        //margin: 0 auto;
        margin-left: 20rpx;
        margin-top: 10rpx;
        margin-right: auto;
        max-width: 32%;
        min-width: 120rpx;

        .title {
          font-weight: 400;
@@ -289,7 +371,7 @@
          font-weight: 600;
          font-size: 32rpx;
          color: #20613D;
          line-height: 44rpx;
          //line-height: 44rpx;
        }
      }

@@ -310,12 +392,5 @@

  }

  .bottom-price {
    position: fixed;
    left: 0rpx;
    padding: 20rpx;
    right: 0rpx;
    bottom: 160rpx;
  }
}
</style>