update 订单功能（花店端）

xuxueyang

2024-07-24 499a94ded67a4c1e763dc6686afe5a2e99faf407

 sub_pages/customer/shopping/confirm.vue

@@ -11,6 +11,7 @@
        return state.defaultaddress || {}
      },
    }),

  },
  watch: {
    // address(nv, ov) {
@@ -49,22 +50,76 @@
    //   private List<FlowerCartListDTO> flowers;
    // @ApiModelProperty(value = "打包费")
    //   private BigDecimal packing;
    //todo 显示打包费等，然后再确认
    // https://lanhuapp.com/web/#/item/project/detailDetach?pid=05830e81-7c59-4655-8253-4deb7c913b51&project_id=05830e81-7c59-4655-8253-4deb7c913b51&image_id=f7cc3e57-5367-4b99-a84e-99c38249aa66&fromEditor=true

  },
  data() {
    return {
      dto: {},
      dto: {
        remarks: '',
        specialNeeds: '',
        transportId: '',
        addressId: '',
        flowers: [],
      },
      cacheAddressId: '',
      transportList: [],
      // private Long id;
      // @ApiModelProperty(value = "名称")
      // private String name;
      // @ApiModelProperty(value = "英文名")
      // private String enName;
      // @ApiModelProperty(value = "运费")
      // private BigDecimal fee;


    }
  },
  methods: {
    async submitOrder() {
      if (!this.dto.transportId) {
        this.$message.toast('请选择配送方式')
        return
      }
      if (!this.dto.addressId) {
        this.$message.toast('请选择收货地址')
        return
      }
      this.$message.showLoading()
      const {code, data} = await this.$http.request('post', '/api/customer/flower/order/confirm', {
        data: {
          ...this.dto
        }
      })
      this.$message.hideLoading()
      if (code === 0) {
        //提交信息
        console.log('pay,', data)
        if (data && data['_testOrderId']) {
          //回调
          this.$message.showLoading()
          const {code, data} = await this.$http.request('get', '/api/customer/flower/order/callback/tmp', {
            params: {
              id: data['_testOrderId']
            }
          })
          this.$message.hideLoading()
        } else if (data) {
          //微信接口
          let that = this
          wx.requestPayment({
            ...data,
            async success(res) {
              console.log('pay success', res)
              this.$message.showToast('支付成功')
              //返回上一页
              await this.$store.dispatch('sign_add', 'shopping')
              uni.navigateBack()
              // uni.navigateTo({
              //   url: '/pages/canteen/canteen-success/canteen-success'
              // })
            },
            fail(err) {
              console.error('pay fail', err)
              that.$message.showToast('支付失败')
            }
          })

        }
      }

    }
  }
}
@@ -72,17 +127,86 @@

<template>
  <view class="page-confirm">
    <view>
    <view class="p10">
      <common-address-select ref="addressselect"></common-address-select>
    </view>
    <view>
<!--     todo 查看商品列表，和选择运费 -->
      <view class="flower-container">
        <view class="shopping-item m-t-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>
          <view class="item-each 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>
              <view class="price">
                {{ item.price || 0 }}*{{ item.num }}扎
              </view>
              <view class="desc m-t-12">
                <view class="m-r-15">每扎重量:{{ item.weight || 0 }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="price">
          <view class="desc">打包费用:{{ dto.packing || 0 }}}</view>
          <view class="m-l-a m-r-0">
            共{{ dto.flowers.length }}件，小计<span class="t-red">￥{{ dto.totalAmount || 0 }}</span>
          </view>
        </view>
      </view>
      <!--    查看商品列表，和选择运费 -->
      <view class="transform-container p10">
        <view class="title flex">
          <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">
              <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">
            10kg以下的零买订单将收取打包费，花店建议购满20kg， 可选冷链物流
          </view>
          <view class="desc">
            预计装1Mini件，运费约18.00元(5公斤内18元，不满5公斤按5公斤计费，每件货不能超过5公斤)，第一汤下单预计次日凌晨发货，备货高峰期除外，冷链汽车运输，发货后72小时左右到货，三线城市会推迟6-12小时，顺丰送货到店。
            优势:价格便宜，顺丰配送
            弊端:订单必须是5kg以内
          </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="请输入特殊需求">

          </u-textarea>
        </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="填写内容需与卖家协商并确认">

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

    </view>
    <view class="bottom-price flex">
      <view>
        合计:￥ {{ dto.totalAmount||0 }} 元
        合计:￥ {{ dto.totalAmount || 0 }} 元
      </view>
      <view class="button-green-1">
      <view class="button-green-1" @click="submitOrder">
        提交订单
      </view>
    </view>
@@ -90,7 +214,101 @@
</template>

<style scoped lang="scss">
.page-confirm{
.page-confirm {
  .flower-container {
    .shopping-item {
      padding: 28rpx 22rpx;
      position: relative;

      .sup-title {
        border-bottom: 2rpx solid #EEEEEE;
      }

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

        .img {
          width: 124rpx;
          height: 124rpx;
        }

        .title {
          font-weight: 600;
          font-size: 28rpx;

          color: #000000;
          line-height: 40rpx;

          .level {
            color: #20613D;
          }
        }

        .price {
          font-weight: 400;
          font-size: 28rpx;
          color: #CF0000;
          line-height: 40rpx;
        }

        .desc {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 34rpx;
        }
      }

      .button-icons {
        position: absolute;
      }
    }

  }

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

        .title {
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          line-height: 40rpx;
        }

        .price {
          font-weight: 600;
          font-size: 32rpx;
          color: #20613D;
          line-height: 44rpx;
        }
      }

      .transform-item.cur {
        background: #E1F0E7;
        border-radius: 8rpx;
        border: 2rpx solid #20613D;
      }
    }

    .transform-list:nth-child(3n+0) {
      margin-left: 0
    }

    .transform-list:nth-child(3n+2) {
      margin-right: 0;
    }

  }

  .bottom-price {
    position: fixed;