9999

zhaoxiaoqiang

2021-09-01 923c9beac02bf756d09c2e70b119e50b95af9f74

9999

 src/views/mine/stores/stores-detail.vue

@@ -1,202 +1,189 @@
<template>
<div class="stores-detail h-100-g">
  <div class="stores-detail h-100-g">
    <v-navbar title="门店详情" fixed rightText="保存" @right-click="Save"></v-navbar>

  <v-navbar title="门店详情" fixed rightText='保存' @right-click="Save"></v-navbar>
    <div class="cell-group">
      <v-cell v-model="form.storeName" :max="20" label="门店名称" :readonly="true" icon="iconyonghu" placeholder="门店名称"></v-cell>
      <v-cell label="所在地区" icon="icondingwei" placeholder="所在地区" @click.native="isShowArea = true">
        <div slot="v-cell-right" class="flex-center-g">
          <div>{{ form.areaText }}</div>
          <svg class="icon" aria-hidden="true" style="width:18px;height:18px;fill:#999;">
            <use xlink:href="#iconyou"></use>
          </svg>
        </div>
      </v-cell>
      <v-cell v-model="form.dtlAddr" :max="30" label="详细地址" icon="icontishi" placeholder="详细地址"></v-cell>
    </div>

  <div class="cell-group">
    <v-cell v-model="form.storeName" :max="20" label='门店名称' :readonly="true" icon='iconyonghu' placeholder='门店名称'></v-cell>
    <v-cell  label='所在地区'  icon='icondingwei'  placeholder='所在地区' @click.native="isShowArea = true;">
      <div slot="v-cell-right" class="flex-center-g">
        <div>{{form.areaText}}</div>
        <svg class="icon" aria-hidden="true" style="width:18px;height:18px;fill:#999;">
          <use xlink:href="#iconyou"></use>
        </svg>
      </div>
    </v-cell>
    <v-cell v-model="form.dtlAddr" :max="30" label='详细地址'  icon='icontishi' placeholder='详细地址'></v-cell>
    <div class="cell-group">
      <v-cell v-model="form.priName" :max="6" label="负责人姓名" :readonly="true" placeholder="负责人姓名"></v-cell>
      <v-cell v-model="form.priMblNo" :max="11" type="tel" label="负责人手机号" :readonly="true" placeholder="负责人手机号"></v-cell>
      <v-cell v-model="form.priEmail" :max="50" label="联系邮箱" :readonly="true" placeholder="联系邮箱"></v-cell>
      <v-cell v-model="form.priIdNo" :max="18" label="负责人身份证号" :readonly="true" placeholder="负责人身份证号"></v-cell>
      <v-cell v-model="form.outChanNo" :max="18" label="渠道编码" :readonly="true" placeholder="渠道编码"></v-cell>
    </div>

    <footer class="flex-center-g footer">
      <van-button class="btn left" @click="freeze">{{ menText }}</van-button>
      <van-button class="btn right" @click="orderSearch()">订单查询</van-button>
    </footer>

    <van-dialog class="setting-box-dialog" v-model="dialogShow" show-cancel-button :message="Msg" @confirm="onConfirm"> </van-dialog>

    <van-popup v-model="isShowArea" position="bottom" :close-on-click-overlay="false">
      <van-area ref="Area" :area-list="areaList" @cancel="closeAreaModal" @confirm="setAreaValue"></van-area>
    </van-popup>
  </div>


  <div class="cell-group">
    <v-cell v-model="form.priName" :max="6" label='负责人姓名' :readonly="true" placeholder='负责人姓名'></v-cell>
    <v-cell v-model="form.priMblNo" :max="11" type="tel" label='负责人手机号' :readonly="true" placeholder='负责人手机号'></v-cell>
    <v-cell v-model="form.priEmail" :max="50" label='联系邮箱' :readonly="true" placeholder='联系邮箱'></v-cell>
    <v-cell v-model="form.priIdNo" :max="18" label='负责人身份证号' :readonly="true" placeholder='负责人身份证号'></v-cell>
    <v-cell v-model="form.outChanNo" :max="18" label='渠道编码' :readonly="true" placeholder='渠道编码'></v-cell>
  </div>


  <footer class="flex-center-g footer">
    <van-button class="btn left" @click="freeze">{{ menText }}</van-button>
    <van-button class="btn right" @click="$router.push('/order/wxScore')">订单查询</van-button>
  </footer>


  <van-dialog
      class="setting-box-dialog"
      v-model="dialogShow"
      show-cancel-button
      :message='Msg'
      @confirm="onConfirm"
  >
  </van-dialog>


  <van-popup v-model="isShowArea" position="bottom" :close-on-click-overlay="false">
    <van-area ref='Area' :area-list='areaList' @cancel="closeAreaModal" @confirm="setAreaValue"></van-area>
  </van-popup>

</div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    name: "stores-detail",
    data(){
      return {
        isShowArea:false,
        dialogShow:false,
        menText:'',
        Status:null,
        Msg:'',
        Btn:false,
import { mapState } from "vuex";
export default {
  name: "stores-detail",
  data() {
    return {
      isShowArea: false,
      dialogShow: false,
      menText: "",
      Status: null,
      Msg: "",
      Btn: false,

        form:{
          areaText:'',//地区文字展示
          storeName:'', //门店名称
          dtlAddr:'',   //详细地址
          priName:'',   //负责人姓名
          priEmail:'',  //联系邮箱
          priMblNo:'',  //负责人手机
          priIdNo:'',  //负责人身份证号
          provCode: '',
          cityCode: '',
          areaCode: '',
          outChanNo:'',
      form: {
        areaText: "", //地区文字展示
        storeName: "", //门店名称
        dtlAddr: "", //详细地址
        priName: "", //负责人姓名
        priEmail: "", //联系邮箱
        priMblNo: "", //负责人手机
        priIdNo: "", //负责人身份证号
        provCode: "",
        cityCode: "",
        areaCode: "",
        outChanNo: "",
      },

      rule: [{ key: "dtlAddr", message: "请输入详细地址", type: "isEmpty" }],
    };
  },
  computed: {
    ...mapState(["areaList"]),
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$api.storeDtl({ storeId: this.$route.query.storeId }).then((res) => {
        let data = res.body,
          addr = data.addr;
        this.Status = data.freezeStatus;
        data.freezeStatus ? (this.menText = "冻结门店") : (this.menText = "启用门店");
        this.form = {
          areaText: addr.province.name + "-" + addr.city.name + "-" + addr.area.name, //地区文字展示
          storeName: data.storeName, //门店名称
          dtlAddr: addr.dtlAddr, //详细地址
          priName: data.priName, //负责人姓名
          priEmail: data.priEmail, //联系邮箱
          priMblNo: data.priMblNo, //负责人手机
          priIdNo: data.priIdNo, //负责人身份证号
          provCode: addr.province.code,
          cityCode: addr.city.code,
          areaCode: addr.area.code,
          provName: addr.province.name,
          cityName: addr.city.name,
          areaName: addr.area.name,
          outChanNo: data.outChanNo,
        };
      });
    },

    freeze() {
      this.dialogShow = !this.dialogShow;
      this.Msg = `请问是否确认${this.Status ? "冻结" : "启用"}该门店？`;
    },

    //冻结/启用  门店
    onConfirm() {
      if (this.Btn2) {
        return;
      }
      this.Btn2 = true;
      this.$api
        .channSwitchStatus({
          orgId: this.$route.query.storeId,
          orgType: 4,
          statusType: this.Status ? 0 : 1,
        })
        .then((res) => {
          this.Btn2 = false;
          this.$notify_success(`${this.Status ? "冻结" : "启用"}门店成功`);
          this.Status = this.Status ? 0 : 1;
          this.menText = this.Status ? "冻结门店" : "启用门店";
        });
    },

    // 保存门店
    Save() {
      if (this.Btn) {
        return;
      }
      this.Btn = true;
      let list = {
        addr: {
          province: {
            code: this.form.provCode,
            name: this.form.provName,
          },
          city: {
            code: this.form.cityCode,
            name: this.form.cityName,
          },
          area: {
            code: this.form.areaCode,
            name: this.form.areaName,
          },
          dtlAddr: this.form.dtlAddr,
        },
        storeId: this.$route.query.storeId,
      };

        rule:[
          {key:"dtlAddr",message:"请输入详细地址",type:"isEmpty"},
        ]
      if (
        this.$validator(list.addr, this.rule).check((item) => {
          this.$notify(item.message);
        })
      ) {
        this.$api.storeEdit(list).then((res) => {
          this.Btn = false;
          this.$notify_success("保存成功！");
        });
      }
    },
    computed:{
      ...mapState(['areaList'])

    //关闭地区弹窗
    closeAreaModal() {
      this.isShowArea = false;
      this.$refs.Area.reset();
    },
    created(){
      this.init();

    //保存 地区选择
    setAreaValue(arr) {
      this.form.areaText = arr[0].name + "-" + arr[1].name + "-" + arr[2].name;
      this.form.provCode = arr[0].code;
      this.form.cityCode = arr[1].code;
      this.form.areaCode = arr[2].code;
      this.isShowArea = false;
      this.$refs.Area.reset();
    },
    methods:{
      init(){
        this.$api.storeDtl({storeId: this.$route.query.storeId}).then((res) => {
          let data = res.body,
              addr = data.addr;
          this.Status = data.freezeStatus;
          data.freezeStatus ? this.menText = '冻结门店':this.menText = '启用门店';
          this.form = {
            areaText:addr.province.name + '-' + addr.city.name + '-' + addr.area.name,  //地区文字展示
            storeName:data.storeName, //门店名称
            dtlAddr:addr.dtlAddr,   //详细地址
            priName:data.priName,   //负责人姓名
            priEmail:data.priEmail,  //联系邮箱
            priMblNo:data.priMblNo,  //负责人手机
            priIdNo:data.priIdNo,  //负责人身份证号
            provCode: addr.province.code,
            cityCode: addr.city.code,
            areaCode: addr.area.code,
            provName:addr.province.name,
            cityName:addr.city.name,
            areaName:addr.area.name,
            outChanNo:data.outChanNo
          }
        })
      },


      freeze(){
        this.dialogShow = !this.dialogShow;
        this.Msg = `请问是否确认${this.Status ? '冻结' : '启用'}该门店？`;
      },


      //冻结/启用  门店
      onConfirm() {
        if(this.Btn2){return}
        this.Btn2 = true;
        this.$api.channSwitchStatus({
            orgId: this.$route.query.storeId,
            orgType: 4,
            statusType: this.Status ? 0 : 1
          })
          .then((res) => {
            this.Btn2 = false;
            this.$notify_success(`${ this.Status ? '冻结' : '启用'}门店成功`)
            this.Status =  this.Status ? 0 : 1;
            this.menText = this.Status ? '冻结门店' :'启用门店';
          });
      },


      // 保存门店
      Save(){
        if(this.Btn){return}
        this.Btn = true;
        let list = {
          addr:{
            province:{
              code:this.form.provCode,
              name:this.form.provName
            },
            city:{
              code:this.form.cityCode,
              name:this.form.cityName
            },
            area:{
              code:this.form.areaCode,
              name:this.form.areaName
            },
            dtlAddr:this.form.dtlAddr
          },
          storeId:this.$route.query.storeId
        };

        if(this.$validator(list.addr,this.rule).check(item=>{
          this.$notify(item.message);
        })){
          this.$api.storeEdit(list).then((res) => {
            this.Btn = false;
            this.$notify_success('保存成功！');
          });
        }
      },



      //关闭地区弹窗
      closeAreaModal(){
        this.isShowArea = false;
        this.$refs.Area.reset()
      },

      //保存 地区选择
      setAreaValue(arr){
        this.form.areaText = arr[0].name + '-' +arr[1].name +'-'+ arr[2].name;
        this.form.provCode= arr[0].code;
        this.form.cityCode= arr[1].code;
        this.form.areaCode= arr[2].code;
        this.isShowArea = false;
        this.$refs.Area.reset()
      },



    }
  }
    orderSearch() {
      this.$router.push({ path: "/order/wxScore", query: { storeId: this.$route.query.storeId } });
    },
  },
};
</script>

<style scoped lang="less">
.stores-detail{
.stores-detail {
  background-color: @c-bg-f5;
  padding-top: 44px;

@@ -204,33 +191,25 @@
    margin: 10px 8px 0;
  }






  .footer{
  .footer {
    margin-top: 60px;
    padding-bottom: 30px;
    .btn{
    .btn {
      width: 170px;
      height: 44px;
      border: none;
      font-size: @font-16;
      &.left{
      &.left {
        background-color: @c-bg-eee;
        color: @c-text-666;
        border-radius:22px 0px 0px 22px;
        border-radius: 22px 0px 0px 22px;
      }
      &.right{
      &.right {
        background-color: @c-bg-default;
        color: @c-text-fff;
        border-radius:0px 22px 22px 0px;
        border-radius: 0px 22px 22px 0px;
      }
    }
  }



}
</style>

 src/views/order/wxScore.vue

@@ -6,202 +6,199 @@
 * @Description: 花呗订单
 -->
<template>
    <div class="order-lthyj">
        <v-navbar title="微信分订单列表" fixed >
            <template v-slot:right >
                <div class="flex-center-g" @click="isShowFilter = true;">
                    <span>筛选</span>
                    <svg class="icon" aria-hidden="true" style="width:18px;height:18px;">
                        <use xlink:href="#iconshaixuan"></use>
                    </svg>
                </div>
            </template>
        </v-navbar>
        <!-- 订单列表 -->
        <div class="order-list">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="init" >
                <v-wxScore-order-item :userName="item.userName || '无'"  :time='+item.creTime' :list='item.list' :contName="item.contName"
                                      :term="item.term" v-for="(item,k) in list" :key="k" @click="go(item.id)">
                </v-wxScore-order-item>
            </van-list>
  <div class="order-lthyj">
    <v-navbar title="微信分订单列表" fixed>
      <template v-slot:right>
        <div class="flex-center-g" @click="isShowFilter = true">
          <span>筛选</span>
          <svg class="icon" aria-hidden="true" style="width:18px;height:18px;">
            <use xlink:href="#iconshaixuan"></use>
          </svg>
        </div>
        <v-button-circle icon='icondaochu' title='导出' @click="exportFile"></v-button-circle>
        <v-filter  v-model="isShowFilter" :hasTime="false" :hasMoney="false" :hasSearch="true" :hasWxScore="true" @search="(v)=>search(v,true)"></v-filter>
        <van-popup v-model="exporShow">
            <div class="popup-content">
                <div class="icon-box flex-center-g" >
                    <div class="child flex-center-g" :style="{background:$store.state.backColor, opacity: 0.8}">
                        <svg class="icon" aria-hidden="true" style="width:33px;height:27px;fill:#fff;" @click="$router.back()">
                            <use xlink:href="#iconyoujian"></use>
                        </svg>
                    </div>
                </div>
                <p class="text">
                    <span class="top">已将信息发送至邮箱，请注意查收</span>
                    <span v-text="userinfo.email || ''">1244667@163.com</span>
                </p>
                <van-button class="btn-submit" @click="exporShow=false;" :style="{color:$store.state.backColor}">确定</van-button>
            </div>
        </van-popup>
      </template>
    </v-navbar>
    <!-- 订单列表 -->
    <div class="order-list">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="init">
        <v-wxScore-order-item :userName="item.userName || '无'" :time="+item.creTime" :list="item.list" :contName="item.contName" :term="item.term" v-for="(item, k) in list" :key="k" @click="go(item.id)"> </v-wxScore-order-item>
      </van-list>
    </div>
    <v-button-circle icon="icondaochu" title="导出" @click="exportFile"></v-button-circle>
    <v-filter v-model="isShowFilter" :hasTime="false" :hasMoney="false" :hasSearch="true" :hasWxScore="true" @search="(v) => search(v, true)"></v-filter>
    <van-popup v-model="exporShow">
      <div class="popup-content">
        <div class="icon-box flex-center-g">
          <div class="child flex-center-g" :style="{ background: $store.state.backColor, opacity: 0.8 }">
            <svg class="icon" aria-hidden="true" style="width:33px;height:27px;fill:#fff;" @click="$router.back()">
              <use xlink:href="#iconyoujian"></use>
            </svg>
          </div>
        </div>
        <p class="text">
          <span class="top">已将信息发送至邮箱，请注意查收</span>
          <span v-text="userinfo.email || ''">1244667@163.com</span>
        </p>
        <van-button class="btn-submit" @click="exporShow = false" :style="{ color: $store.state.backColor }">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
    import {
        mapState,
        mapGetters
    } from 'vuex';
    import {
        getParams
    } from '@/utils/index';
    export default {
        data() {
            return {
                exporShow:false,
                loading:false,
                finished:false,
                isShow: false,
                isShowFilter:false,
                list: [],
                orderData: [],
                belongArr: [],
                periodsArr: [],
                statusArr: [],
                filter: {}
            }
import { mapState, mapGetters } from "vuex";
import { getParams } from "@/utils/index";
export default {
  data() {
    return {
      exporShow: false,
      loading: false,
      finished: false,
      isShow: false,
      isShowFilter: false,
      list: [],
      orderData: [],
      belongArr: [],
      periodsArr: [],
      statusArr: [],
      filter: {},
    };
  },
  created() {
    console.log(this.$route.query);
  },
  computed: {
    ...mapState(["userinfo"]),
    ...mapGetters(["orgType"]),
  },
  methods: {
    search(v, isClear) {
      this.filter.id = "";
      this.finished = false;
      this.init(v, isClear);
    },
    go(orderId) {
      this.$router.push({
        path: "/product/wxScore-detail",
        query: {
          orderId: orderId,
        },
        created(){
            console.log(this.$route.query)
        },
        computed: {
            ...mapState(['userinfo']),
            ...mapGetters(['orgType']),
        },
        methods: {
            search(v,isClear){
                this.filter.id ="";
                this.finished = false;
                this.init(v,isClear)
            },
            go(orderId) {
                this.$router.push({
                    path:'/product/wxScore-detail',
                    query:{
                        orderId:orderId
                    }
                })
            },
            //订单导出
            exportFile() {
                if (!this.list.length) {
                    this.$notify('暂无数据导出')
                    return;
                }
                this.$api.wxScoreExport(this.filter).then((res) => {
                    this.exporShow = true;
                }).catch((err) => {

                });
            },
            // 获取订单列表
            init(params = this.filter,isClear) {
                this.loading = true;
                params.merId =  this.$route.query.id;
                this.$api.wxScoreList(params).then(res => {
                    this.filter = {...params};
                    if(isClear){
                        this.list = [];
                    }
                    let list = res.body || [],
                        len = list.length;
                    if (len) {
                        this.filter.id = list[list.length - 1].id;
                        list.forEach(item => {
                            let color = 'success';
                            this.list.push({
                                ...item,
                                list: [{
                                    value: item.guaranteedAmt,
                                    label: '担保金额',
                                    },
                                    {
                                        value: item.mblNo,
                                        label: '用户手机号',
                                    },
                                    {
                                        value: item.status,
                                        label: '订单状态',
                                    },
                                ]
                            })
                        })
                    }
                    if (len < 10) {
                        this.finished = true;
                    }
                    this.loading = false;
                    this.isShow = false;
                }).catch((err) => {
                    this.finished = true;
                    this.loading = false;
                });
            },
        },
    }
      });
    },
    //订单导出
    exportFile() {
      if (!this.list.length) {
        this.$notify("暂无数据导出");
        return;
      }
      this.$api
        .wxScoreExport(this.filter)
        .then((res) => {
          this.exporShow = true;
        })
        .catch((err) => {});
    },
    // 获取订单列表
    init(params = this.filter, isClear) {
      this.loading = true;
      params.storeId = this.$route.query.id;
      //   params.storeId = this.$route.query.storeId ? this.$route.query.storeId : "";
      this.$api
        .wxScoreList(params)
        .then((res) => {
          this.filter = { ...params };
          if (isClear) {
            this.list = [];
          }
          let list = res.body || [],
            len = list.length;
          if (len) {
            this.filter.id = list[list.length - 1].id;
            list.forEach((item) => {
              let color = "success";
              this.list.push({
                ...item,
                list: [
                  {
                    value: item.guaranteedAmt,
                    label: "担保金额",
                  },
                  {
                    value: item.mblNo,
                    label: "用户手机号",
                  },
                  {
                    value: item.status,
                    label: "订单状态",
                  },
                ],
              });
            });
          }
          if (len < 10) {
            this.finished = true;
          }
          this.loading = false;
          this.isShow = false;
        })
        .catch((err) => {
          this.finished = true;
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.order-lthyj {
  height: 100%;
  background-color: @c-bg-f5;
}
.order-list {
  margin-top: 60px;
  padding: 0 8px 30px;
  background-color: @c-bg-f5;
  .info {
    margin-bottom: 20px;
  }
}
.popup-content {
  height: 150px;
  width: 280px;
  border-radius: 3px;
  .icon-box {
    z-index: 99999;
    height: 64px;
    width: 64px;
    position: absolute;
    left: 50%;
    background: rgba(66, 61, 93, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);

    .order-lthyj {
        height: 100%;
        background-color: @c-bg-f5;
    .child {
      height: 55px;
      width: 55px;
      background: rgba(66, 61, 93, 0.8);
      border-radius: 50%;
    }
    .order-list {
        margin-top: 60px;
        padding: 0 8px 30px;
        background-color: @c-bg-f5;
        .info {
            margin-bottom: 20px;
        }
  }
  .text {
    width: 210px;
    text-align: center;
    margin: 0 auto;
    padding-top: 50px;
    line-height: 18px;
    .top {
      color: @c-text-666;
    }
    .popup-content{
        height: 150px;
        width: 280px;
        border-radius: 3px;
        .icon-box{
            z-index: 99999;
            height: 64px;
            width: 64px;
            position: absolute;
            left: 50%;
            background:rgba(66,61,93,0.1);
            border-radius: 50%;
            transform: translate(-50%,-50%);

            .child{
                height: 55px;
                width: 55px;
                background:rgba(66,61,93,0.8);
                border-radius: 50%;

            }
        }
        .text{
            width: 210px;
            text-align: center;
            margin: 0 auto;
            padding-top: 50px;
            line-height: 18px;
            .top{
                color: @c-text-666;
            }
        }
        .btn-submit{
            .lh(44px);
            position: absolute;
            width: 100%;
            bottom: 0;
            color: @c-text-default;
        }
    }
  }
  .btn-submit {
    .lh(44px);
    position: absolute;
    width: 100%;
    bottom: 0;
    color: @c-text-default;
  }
}
</style>