H5_module/mine/components/refund-popup/index.vue

<template>
<view>
<!--components/refund-popup/index.wxml-->
<view class="mask" @tap="hidePopup"></view>
<view class="popup">
	<view class="pop">
		<text class="txt">{{refundType==1?"退款原因":refundType==2?"退货方式":refundType==3?"货物状态":"快递公司"}}</text>
	</view>
	<view class="close" @tap="hidePopup">
		<image class="image" src="/static/pages/images/close.png"></image>
	</view>
	<scroll-view scroll-y="true" style="height: 500rpx;">
			<radio-group @change="radioChange">
				<label v-for="(item, index) in refundType==1&&isrefund==2?list:refundType==2?goods:refundType==3?goodstare:refundType==1&&isrefund==1?refund:express" :key="index" class="li">
					<view class="cont">
						<view class="weui-cell__bd">{{item.label}}</view>
					</view>
					<radio :value="item.value" :checked="item.checked" class="right" :data-index="item.value" color="red"></radio>
				</label>
			</radio-group>
	</scroll-view>
	<view class="confirm mbglinear" @tap="getValue">确定</view>
</view>
</view>
</template>

<script>
// components/refund-popup/index.js
const req = require("../../../utils/request");

export default {
  data() {
    return {
      list: [],
      goods: [{
        label: "送回门店",
        value: 2
      }, {
        label: "邮寄",
        value: 1
      }, {
        label: "货物拒收",
        value: 3
      }],
      goodstare: [{
        label: "未收货",
        value: 1
      }, {
        label: "已收货",
        value: 2
      }],
      express: [],
      refund: [],
      value: "",
      listtype: "",
      huo: "",
      huotype: "",
      start: "",
      starttype: "",
      expresstype: ""
    };
  },

  components: {},
  props: {
    // 1 为退款原因 2为退货方式 3为货物状态 4为物流方式
    refundType: {
      type: String,
      default: ''
    },
    isrefund: {
      type: String,
      default: ''
    }
  },

  mounted() {
    // if (req.getStorage('isrefund')) {
    //   let isrefund=req.getStorage('isrefund')
    //   let express=isrefund.express
    //     express.splice(isrefund.express.length - 3, 3)
    //   this.setData({list:isrefund.reason,express:express})
    //   console.log(this.data.list,this.data.express)
    // }else{
    req.getRequest('/api/orderRefund/refundReason', '', data => {
      let express = data.express;
      express.splice(data.express.length - 3, 3);
	  let reason = data.reason.map((it,idx)=>{
		  console.log('退款原因===',it)
		  if(it.label!='审方失败'){
			  return it;
		  }
	  })
      this.setData({
        list: reason,
        express: express,
        refund: data.refund
      });
      // console.log(this.refundType, this.isrefund);
    }); // }
  } // created: function() {
  //   // 页面被展示
  //   // req.getStorage('isrefund')
  // let isrefund=req.getStorage('isrefund')
  // let express=isrefund.express
  //   express.splice(isrefund.express.length - 3, 3)
  // this.setData({list:isrefund.reason,express:express})
  // console.log(this.data.list,this.data.express)
  // },
  ,

  options: {
    addGlobalClass: true
  },
  methods: {
    radioChange(e) {
      // console.log(e); // console.log(this.data.refundType)
      // console.log('radio发生change事件，携带value值为：', e.detail.value)

      if (this.refundType == 1) {
        if (this.isrefund == 1) {
          let list = this.refund;

          for (let i = 0, len = list.length; i < len; ++i) {
            if (list[i].value == e.detail.value) {
              list[i].checked = true;
              this.setData({
                value: list[i].label,
                listtype: list[i].value
              });
            }
          }
        } else {
          let list = this.list;

          for (let i = 0, len = list.length; i < len; ++i) {
            if (list[i].value == e.detail.value) {
              list[i].checked = true;
              this.setData({
                value: list[i].label,
                listtype: list[i].value
              });
            }
          }
        }
      }

      if (this.refundType == 2) {
        let list = this.goods;

        for (let i = 0, len = list.length; i < len; ++i) {
          if (list[i].value == e.detail.value) {
            list[i].checked = true;
            this.setData({
              huo: list[i].label,
              huotype: list[i].value
            });
          }
        }
      }

      if (this.refundType == 3) {
        let list = this.goodstare;

        for (let i = 0, len = list.length; i < len; ++i) {
          if (list[i].value == e.detail.value) {
            list[i].checked = true;
            this.setData({
              start: list[i].label,
              starttype: list[i].value
            });
            this.setData({
              list
            });
          }
        }
      }

      if (this.refundType == 4) {
        let express = this.express;

        for (let i = 0, len = express.length; i < len; ++i) {
          if (express[i].value == e.detail.value) {
            // express[i].checked = true
            this.setData({
              start: express[i].label,
              expresstype: express[i].value
            }); // this.setData({ express })
          }
        }
      }
    },

    hidePopup() {
      this.$emit('hidePopup', {
        detail: this
      });
    },

    getValue() {
      if (this.refundType == 1) {
        this.$emit('getValue', {
          detail: this.value
        });
        this.$emit('getIndex', {
          detail: this.listtype
        });
      }

      if (this.refundType == 2) {
        this.$emit('getValue', {
          detail: this.huo
        });
        this.$emit('getIndex', {
          detail: this.huotype
        });
      }

      if (this.refundType == 3) {
        this.$emit('getValue', {
          detail: this.start
        });
        this.$emit('getIndex', {
          detail: this.starttype
        });
      }

      if (this.refundType == 4) {
        this.$emit('getValue', {
          detail: this.start
        });
        this.$emit('getIndex', {
          detail: this.expresstype
        });
      }

      this.hidePopup();
    }

  }
};
</script>
<style>
@import "./index.css";
</style>