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

<template>
  <view class="refundsOrExchange">
    <navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack"/>

    <view class="frame">

      <!-- 商品简介 -->
      <view class="itme1" @click="openSpPopup">
        <view class="left">
          <img src="../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;">
        </view>
        <view class="center">
          <view>{{ commodity.title }}</view>
          <view>{{ commodity.smallTitle }}</view>
        </view>
        <view class="right">×{{ commodity.total }}</view>
      </view>


      <!--<commoditySelect ></commoditySelect>-->

      <!-- 申请类型&申请原因 -->
      <view class="item2">
        <view class="type">
          <span>申请类型</span>
          <span>退货退款</span>
        </view>
        <uv-line></uv-line>
        <view class="reason">
          <view>申请原因</view>
          <view>
            <uv-input placeholder="请输入申请原因" border="none" clearable></uv-input>
          </view>
        </view>
      </view>

      <!--  退货数量&申请金额-->
      <view class="item3">
        <view class="type">
          <span>{{ titleIndex == 0 ? '退货数量' : '换货数量' }}</span>
          <span>
						<uv-number-box :min="1" :max="100"></uv-number-box>
					</span>
        </view>
        <uv-line v-if='titleIndex == 0 ? true :false'></uv-line>
        <view class="reason" v-if='titleIndex == 0 ? true :false'>
          <view>申请原因</view>
          <view>
            <uv-input disabled placeholder="$" border="none" clearable></uv-input>
          </view>
        </view>
      </view>

      <!-- 申请说明 -->
      <view class="item4">
        <view>申请说明(选填)</view>
        <view>
          <uv-input placeholder="请您详细填写申请说明" border="none" clearable></uv-input>
        </view>
        <view>
          <uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx"
                     @delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
        </view>
      </view>


      <!-- 联系电话 -->
      <view class="item5">
        <view class="phone">
          <view>联系电话</view>
          <view>
            <uv-input placeholder="请输入联系电话" border="none" clearable></uv-input>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <bottomBtn @confirm='confirm()' :color='bottomBtnStyle.color' :backgroundColor='bottomBtnStyle.backgroundColor'
               :fontSize='bottomBtnStyle.fontSize' :text='bottomBtnStyle.text' :width="bottomBtnStyle.width"
               :height="bottomBtnStyle.height" :borderRadius='bottomBtnStyle.borderRadius'
			   :bottom='bottomBtnStyle.bottom'
			   >
    </bottomBtn>

    <!--商品选择-->
    <uv-popup ref="spPopup" :round="30">
      <commoditySelect
          :commodityList="commodityList"
          @selectSp="selectCommodity"
      />
    </uv-popup>

  </view>
</template>

<script>
import bottomBtn from "../../components/bottom/bottomBtn.vue"
import commoditySelect from "../components/commodity/commoditySelect.vue"

export default {
  onLoad(option) {
    this.titleIndex = option.index
  },
  components: {
    bottomBtn, commoditySelect
  },
  data() {
    return {
      titleIndex: 0,
      title: ['申请换货', '申请退货'],
      fileList: [],
      bottomBtnStyle: {
        color: '#FFF',
        backgroundColor: '#fd5100',
        fontSize: '34rpx',
        text: '提交申请',
        width: '400rpx',
        height: '80rpx',
        borderRadius: '100rpx',
        bottom: '40rpx'
      },
      commodityList: [
        {

          title: '商品名称',
          smallTitle: '产品规格：120*4*75【桌子尺寸】',
          total:1,
        },
        {
          title: '商品名称1',
          smallTitle: '产品规格：120*4*75【桌子尺寸】',
          total:1,
        },
        {
          title: '商品名称2',
          smallTitle: '产品规格：120*4*75【桌子尺寸】',
          total:1,

        }
      ],
      commodity: {
        title: '商品名称',
        smallTitle: '产品规格：120*4*75【桌子尺寸】',
        total:1,

      },

    }
  },
  mounted() {

  },
  methods: {

    openSpPopup() {
      this.$refs.spPopup.open('bottom');
    },

    // 选择退换货商品回调
    selectCommodity(e) {
      console.log(e, "selectCommodity--e")
      this.commodity = e
      this.$refs.spPopup.close()
    },

    confirm() {
      console.log("===");
    },
    deleteImage(e) {
      this.fileList.splice(e.index, 1)
    },
    afterRead(e) {
      let self = this
      e.file.forEach(file => {
        self.$Oss.ossUpload(file.url).then(url => {
          self.fileList.push({
            url
          })
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.refundsOrExchange {
  .frame {

    display: flex;
    flex-direction: column;
    gap: 30rpx;
    width: 100%;
    padding-top: 40rpx;
    background-color: #f5f5f5;


    .itme1 {
      display: flex;
      height: 200rpx;
      background-color: #ffffff;

      .left {
        padding: 40rpx;
        width: 20%;
        border-radius: 10rpx;
        background-color: #ffffff;
      }

      .center {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20rpx;
        width: 60%;
        padding: 0rpx 0 0 20rpx;
        background-color: #ffffff;

        // 给第一个 view 设置样式
        > view:first-of-type {
          font-size: 36rpx;
          color: #333;
        }

        // 给第二个 view 设置样式
        > view:nth-of-type(2) {
          font-size: 28rpx;
          color: #666666;
        }
      }

      .right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 10%;
        color: #666666;
        background-color: #ffffff;
      }
    }

    .item2 {
      width: 100vw;

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

        > span:nth-of-type(1) {
          width: 30%;
        }

        > span:nth-of-type(2) {
          width: 70%;
        }
      }

      .reason {
        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%;
        }

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

    .item3 {
      width: 100vw;

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

        > span:nth-of-type(1) {
          width: 70%;
        }

        > span:nth-of-type(2) {
          width: 30%;
        }
      }

      .reason {
        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%;
        }

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

    .item4 {
      display: flex;
      flex-direction: column;
      padding: 10rpx 0 0 20rpx;
      background-color: #FFF;

      > view:nth-of-type(1) {
        background-color: #FFF;
      }

      > view:nth-of-type(2) {
        margin: 10rpx 0 10rpx 0;
        background-color: #FFF;

      }
    }

    .item5 {
      display: flex;
      flex-direction: column;
      padding: 0 0 0 20rpx;
      background-color: #FFF;

      .phone {
        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%;
        }

        > view:nth-of-type(2) {
          width: 70%;
          padding: 0 20rpx 0 0;
        }
      }
    }
  }
}
</style>