aluminium-trading-uniapp-240925/pages_order/order/offerOrBillLading.vue

<template>
  <view class="page">

    <navbar :title="titleList[titleIndex]" leftClick @leftClick="$utils.navigateBack"/>

    <view class="frame">
      <view class="title">
				<span
            style="width: 10rpx;height: 40rpx;background-color: #1f1c39;border-radius: 10rpx;overflow: hidden;"></span>
        <span>{{ $t('other.aluminumProducts') }}</span>
      </view>

      <view class="basic-info">

        <!--供应商名称-->
        <view v-if="titleIndex == 1" class="item">
          <view>{{ $t('other.supplierName') }}</view>
          <view>华南铝业有限公司</view>
        </view>

        <!--商品规格-->
        <view class="item">
          <view>{{ $t('components.productSpe') }}</view>
          <view>铝制品(Al>96%)</view>
        </view>


        <view class="addressA" @click="openAddress">
          <view class="title">{{ $t('components.shippingAddress') }}</view>
          <view class="address" style="width: 70%">
            <image mode="" src="/static/image/address/selectIcon.png"></image>
            <view class="">
              {{ address.name }}
            </view>
            <view class="">
              {{ address.addressDetail }}
            </view>
            <view class="icon">
              <uv-icon name="arrow-right" size="30rpx"></uv-icon>
            </view>
          </view>
        </view>


        <!--提货地点-->
        <!--<view class="currentRegion">-->
        <!--	<view>{{ $t('components.pickupLocation') }}</view>-->
        <!--	<view @click.stop="selectAddr">-->
        <!--		<input class="input" disabled v-model="form.currentRegion"-->
        <!--			:placeholder=" $t('components.selectRegion')">-->
        <!--		</input>-->
        <!--		<view class="orientation">-->
        <!--			<img src="../../static/image/address/selectIcon.png"-->
        <!--				style="width:30rpx;height: 30rpx;margin:5rpx 5rpx 5rpx 5rpx;">-->
        <!--		</view>-->
        <!--	</view>-->
        <!--</view>-->

        <!--详细地址-->
        <!--<view class="item">-->
        <!--	<view>{{ $t('components.detailedAddress') }}</view>-->
        <!--	<view>-->
        <!--		<input v-model="form.address" :placeholder="$t('components.enterDetailedAddress') "-->
        <!--			clearable></input>-->
        <!--	</view>-->
        <!--</view>-->

        <!--交货日期-->
        <view class="delivery-date">
          <view>{{ $t('components.deliveryDate') }}</view>
          <view class="value">
            <view class="dateTimeCls">
              <view class="date" @click="startDateOpen">
                {{ form.transactionTime }}
                <uv-datetime-picker ref="startDateRef" v-model="form.transactionTime" mode="date"
                                    @confirm="startDateChange"></uv-datetime-picker>
              </view>
              <view class="img">
                >
              </view>
            </view>
          </view>
        </view>

        <!--暂定数量-->
        <view class="tentativeQuantity">
          <view class="key">{{ $t('other.tentativeQuantity') }}</view>
          <view class="value">
            <uv-number-box v-model="form.num"></uv-number-box>
          </view>
        </view>

        <!--单价-->
        <view class="item">
          <view>{{ $t('components.unitPrice') }}</view>
          <view>
            <input v-model="form.price" clearable></input>
          </view>
        </view>

        <!--提交报价和提交审核-->
        <view class="btns">
					<span @click="confirmBtn" class="ljxd">
						{{ titleIndex == 0 ? $t('other.submitQuotation') : $t('other.submitReview') }}
					</span>
          <span class="lxwm" @click="contactUs">
						{{ $t('components.contactUs') }}
					</span>
          <span class="tip">{{ $t('components.contactTip') }}</span>
        </view>

      </view>
    </view>

    <!-- 联系客服弹框 -->
    <customerServicePopup ref="customerServicePopup"/>


    <!-- 地址选择弹框 -->
    <uv-popup ref="addressPopup" :round="30">
      <addressList ref="addressList" height="60vh" @select="selectAddress"/>
    </uv-popup>

  </view>
</template>

<script>
import topbar from "@/components/base/topbar.vue";
import tabber from "@/components/base/tabbar.vue";
import customerServicePopup from "@/components/config/customerServicePopup.vue";
import Position from "@/utils/position";
import dayjs from "dayjs";
import AddressList from "@/pages_order/components/address/addressList.vue";

export default {
  name: "offer",
  components: {
    AddressList,
    customerServicePopup,
    tabber,
    topbar
  },
  onLoad(options) {
    this.titleIndex = options.titleIndex;
  },
  data() {
    return {
      titleIndex: 0,
      titleList: [
        // 0 供应商报价
        this.$t('pages.index.index.supplierQuotation'),
        this.$t('pages.index.index.supplierBillLading')
      ],
      form: {
        "addressId": "",
        "num": 0,
        "price": 0,
        "transactionTime": ""
      },
      address: {
        name: '请选择地址',
        addressDetail: '',
      },
      addressTotal: 0,
    }
  },
  onShow() {
    this.getAddressListA()
  },
  methods: {

    //获取地址列表
    getAddressListA() {
      this.$refs.addressList.getAddressList()
    },

    // 提交报价/提交审核
    confirmBtn() {
      //TODO
      this.form.addressId = this.address.id
      this.$api('addProduct', this.form, res => {
        if (res.code == 200) {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/index/index'
            })
          }, 1500)
        }
      })
    },

    openAddress() {
      // if (this.addressTotal == 0) {
      //   this.$refs.popup.close()
      //   return uni.navigateTo({
      //     url: '/pages_order/mine/address?type=back'
      //   })
      // }
      this.$refs.addressPopup.open('bottom')
      // this.getAddressList()
    },
    // 选择地址
    selectAddress(e) {
      this.address = e
      this.$refs.addressPopup.close()
    },


    startDateChange(val) {
      this.$nextTick(() => {
        this.form.transactionTime = dayjs(val.value).format("YYYY-MM-DD")
      });
    },
    startDateOpen() {
      this.$refs.startDateRef.open();
    },

    // 联系我们
    contactUs() {
      this.$refs.customerServicePopup.open()
    },

    //地图上选择地址
    selectAddr() {
      Position.getLocation(res => {
        Position.selectAddress(res.longitude, res.latitude, success => {
          this.setAddress(success)
        })
      })
      Position.getLocationDetail(res => {
        console.log(res);
        this.form.address = res
      })
    },
  },
}
</script>


<style scoped lang="scss">
.page {
  height: 100vh;

  .frame {
    background-color: #FFF;

    .title {
      display: flex;
      font-size: 30rpx;
      font-weight: 700;
      padding: 0rpx 0 0rpx 20rpx;
      margin: 20rpx 0 0 0;

      > span:nth-of-type(1) {
        margin: 4rpx 0 0 8rpx;
        background-color: #FFF;
      }

      > span:nth-of-type(2) {
        margin: 0 0 0 8rpx;
        background-color: #FFF;
      }
    }

    .basic-info {
      display: flex;
      flex-direction: column;
      gap: 10rpx;
      //margin-top: 20rpx;
      padding: 20rpx 20rpx 20rpx 20rpx;


      .addressA {
        display: flex;
        align-items: center;
        background-color: #FFF;
        height: 80rpx;
        // margin: 10rpx 0 0 0;
        //padding: 10rpx 0 0 20rpx;

        .title {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-weight: 400;
          width: 30%;
        }

        .address {
          width: 70%;
          display: flex;
          padding: 20rpx;
          background-color: #fff;

          image {
            width: 30rpx;
            height: 30rpx;
            margin: 10rpx;
          }

          view {

            //margin: 20rpx;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap; //溢出不换行
          }

          .icon {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
          }
        }
      }


      .delivery-date {
        display: flex;
        align-items: center;
        background-color: #FFF;
        height: 80rpx;
        // margin: 10rpx 0 0 0;
        padding: 10rpx 0 0 20rpx;

        > view:nth-of-type(1) {
          width: 30%;
          // font-weight: 700;
        }


        .value {
          width: 70%;
          border-radius: 10rpx;
          overflow: hidden;

          .dateTimeCls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 80%;
            //border: 1px solid #b0b2b3;
            padding: 5rpx;
            border-radius: 20rpx;

            .date {
              font-size: 30rpx;
              display: flex;
              align-items: center;
              width: 80%;
              height: 100%;
              color: #000;

            }

            .img {
              display: flex;
              justify-content: center;
              align-items: center;
              //margin-left: 50rpx;
              width: 20%;
              //height: 100%;
            }
          }

        }


      }

      .tentativeQuantity {
        display: flex;
        align-items: center;
        background-color: #FFF;
        height: 80rpx;
        // margin: 10rpx 0 0 0;
        padding: 10rpx 0 0 20rpx;

        .key {
          width: 30%;
        }

        .value {
          width: 70%;
          border-radius: 10rpx;
          overflow: hidden;
        }

      }


      .Tip {
        display: flex;
        align-items: center;
        justify-content: center;

        .span {
          color: #999;
          font-size: 24rpx;
        }
      }

      .btns {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20rpx;

        .ljxd {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 500rpx;
          height: 70rpx;
          border-radius: 40rpx;
          color: #FFF;
          font-size: 28rpx;
          margin: 20rpx 10rpx 0 0;
          background: $uni-color;
          //margin-top: 20rpx;
          border-radius: 40rpx;
        }

        .lxwm {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 500rpx;
          height: 70rpx;
          border-radius: 40rpx;
          color: #000000;
          font-size: 28rpx;
          margin: 20rpx 10rpx 0 0;
          background: #f1f1f1;
          //margin-top: 20rpx;
          border-radius: 40rpx;
        }

        .tip {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          color: #999;
          //width: 500rpx;
        }
      }

      .item {
        display: flex;
        align-items: center;
        background-color: #FFF;
        height: 80rpx;
        // margin: 10rpx 0 0 0;
        padding: 10rpx 0 0 20rpx;

        > view:nth-of-type(1) {
          width: 30%;
          // font-weight: 700;
        }

        > view:nth-of-type(2) {
          width: 70%;
          border-radius: 10rpx;
          overflow: hidden;


          input {
            background-color: #FFF;
            font-size: 28rpx;
            padding: 16rpx 8rpx 16rpx 15rpx;
          }
        }
      }

      .performanceBond {
        display: flex;
        align-items: center;
        background-color: #FFF;
        height: 80rpx;
        // margin: 10rpx 0 0 0;
        padding: 10rpx 0 0 20rpx;

        .key {
          width: 30%;
          // font-weight: 700;
        }

        .value {
          width: 70%;
          border-radius: 10rpx;
          overflow: hidden;


          input {
            background-color: #FFF;
            font-size: 28rpx;
            padding: 16rpx 8rpx 16rpx 15rpx;
          }
        }
      }

      .currentRegion {
        display: flex;
        align-items: center;
        background-color: #FFF;
        height: 80rpx;
        // margin: 10rpx 0 0 0;
        padding: 10rpx 0 0 20rpx;

        > view:nth-of-type(1) {
          width: 30%;
          // font-weight: 700;
        }

        > view:nth-of-type(2) {
          width: 70%;
          padding: 0 20rpx 0 0;
          display: flex;

          .input {
            background-color: #f5f5f5;
            // color: #a4a4a4;
            font-size: 28rpx;
            padding: 8rpx 8rpx 8rpx 15rpx;
            width: 350rpx;
          }

          .orientation {
            display: flex;
            padding: 10rpx 10rpx 10rpx 20rpx;
            font-size: 30rpx;
            color: #FBAB32;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }


        }
      }

    }
  }
}
</style>