lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>详情-订单-创业帮</title>
    <meta name="keywords" content="详情-订单-创业帮">
    <meta name="description" content="详情-订单-创业帮">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="apple-mobile-web-app-title" content="详情-订单-创业帮">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="./static/css/main.css">
  </head>
  <body class="bgc-back pt0" style="padding-top:0;">
    <div id="app" v-cloak>
      <van-nav-bar class="user_rank_explan_title user_title_normal f16 rightbtn" title="订单详情" @click-left="goback" left-arrow v-if="toptitleisshow" v-cloak>
        <template #left> <img src="./static/images/icon-comback@2x.png" alt=""></template>
      </van-nav-bar>
      <div class="deal-detail" v-cloak>
        <van-cell class="deal-status" title="等待付款" center :border="false" v-if="orderinfo.Status === 0"></van-cell>
        <van-cell class="deal-status" title="付款成功" center :border="false" v-if="orderinfo.Status === 1"></van-cell>
        <van-cell class="deal-status" title="交易完成" center :border="false" v-if="orderinfo.Status === 2"></van-cell>
        <van-cell class="deal-address bb8f7f7f7" :label="orderinfo.Areas + orderinfo.Address" icon="location" center :border="false" v-if="orderinfo.DeliveryType === 1 &amp;&amp; !isnews">
          <template #title><span class="mr12">{{orderinfo.RealName}}</span><span>{{orderinfo.Mobile}}</span></template>
        </van-cell>
        <van-cell class="deal-address bb8f7f7f7" icon="location" center :border="false" v-if="orderinfo.DeliveryType === 2 &amp;&amp; !isnews">
          <template #title><span class="mr12">上门自提</span></template>
        </van-cell>
        <van-cell-group :border="false">
          <van-card class="suremall" v-for="item,index in orderinfo.Products" :price="item.ProductPrice | tofixed2" :title="item.ProductName" :num="item.ProductCount" :thumb="item.ProductPhoto" :key="index" :lazy-load="true" centered>
            <template #footer v-if="index === orderinfo.Products.length - 1">
              <div class="tr van-hairline--top pt8 mt8"><span class="f12 c666">共{{orderinfo.BuyCount}}件商品 实付金额：</span><span class="f14 c333">¥{{orderinfo.TotalPrice | tofixed2}}</span></div>
            </template>
          </van-card>
        </van-cell-group>
        <van-cell-group class="bb8f7f7f7 bt8f7f7f7" :border="false">
          <van-cell title="发货状态" :value="orderinfo.PayDate !== '' ? '已发货':'未发货'" :border="false"></van-cell>
          <van-cell title="订单编号" :border="false">
            <template #right-icon>
              <div class="f12 dib c999 pr16" id="dealId">{{orderinfo.OrderNo}}</div><span class="c666 f10" style="border:1px solid #eee; border-radius:2px; padding:0 2px" :data-clipboard-text="orderinfo.OrderNo" data-clipboard-action="copy" data-clipboard-target="#dealId" ref="copy" id="copy" @click="copyCode" @mouseenter="copyCode">复制</span>
            </template>
          </van-cell>
          <van-cell title="下单时间" :value="orderinfo.CreateDate" :border="false"></van-cell>
          <van-cell title="付款时间" :value="orderinfo.PayDate" :border="false" v-if="orderinfo.PayDate !== ''"></van-cell>
          <van-cell class="spcell" title="兑换券码" :value="orderinfo.PayDate" :border="false" v-if="orderinfo.PayDate !== '' &amp;&amp; isnews">
            <template #default>
              <div v-for="item,index in codearr" @click="checkitem(index)">
                <div class="f14 c333">{{item[0]}} - {{item[item.length -1]}}
                  <van-icon name="arrow-down" v-if="checkindex !== index"></van-icon>
                  <van-icon name="arrow-up" v-if="checkindex === index"></van-icon>
                </div>
                <div class="f14 c333" v-for="item in codearr[checkindex]" v-if="checkindex === index">{{item}}</div>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group :border="false" v-if="!isnews">
          <van-cell title="发货仓库" :border="false">
            <template #right-icon>
              <div class="f12 dib c999 mr12">{{orderinfo.StoreContact}}</div>
              <div class="f12 dib c999 mr12">{{orderinfo.StoreContactMobile}}</div>
              <van-button class="c999" plain size="mini" @click="takephone(orderinfo.StoreContactMobile)">拨号</van-button>
            </template>
          </van-cell>
          <van-cell title="提货方式" :value="orderinfo.DeliveryType === 1 ? '邮寄到付':'上门自提'" :border="false"></van-cell>
          <van-cell title="提货仓库" :value="orderinfo.StoreName" :border="false"></van-cell>
        </van-cell-group>
      </div>
      <van-goods-action class="mall-bottom" v-if="orderinfo.Status === 0">
        <van-goods-action-button class="kxs-btn" type="default" color="#FFD500" style="color:#333;" text="继续完成支付" @click="onClickButton"></van-goods-action-button>
      </van-goods-action>
      <van-popup class="payTypePop bgc-back" v-model="payTypePop" position="bottom" closeable close-icon-position="top-left" :style="{ height: '50%' }">
        <div class="tc pt16 rel">
          <div class="f18 c333">确认付款</div>
        </div>
        <div class="pt32 pb32 tc">
          <div class="f24 c333"><span class="f16">￥</span>{{orderinfo.TotalPrice | tofixed2}}</div>
        </div>
        <van-radio-group v-model="radio">
          <van-cell-group :border="false">
            <van-cell title="支付宝" clickable @click="radio = 1" icon="alipay">
              <template #right-icon>
                <van-radio :name="1"></van-radio>
              </template>
            </van-cell>
            <van-cell title="余额" clickable @click="radio = 3" icon="gold-coin">
              <template #title>
                <div>余额    <span class="ml16 c999">可用余额: ( ￥{{balance}} )</span></div>
              </template>
              <template #right-icon>
                <van-radio :name="3"></van-radio>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <van-goods-action class="mall-bottom">
          <van-goods-action-button type="danger" text="确认支付" @click="gotoInputPwd"></van-goods-action-button>
        </van-goods-action>
      </van-popup>
      <van-popup class="pwdPop" v-model="pwdPop" position="bottom" @close="onKeyboardHide" closeable close-icon-position="top-left" :style="{ height: '60%' }">
        <div class="tc pt16 rel">
          <div class="f18 c333">输入密码</div>
          <div class="pop-forgetpwd abs f14 c666"></div>
        </div>
        <div class="pt8">
          <van-password-input class="mt8" :value="value" :info="pwdInfo" :error-info="errorInfo" :focused="showKeyboard" @focus="showKeyboard = true"></van-password-input>
        </div>
        <van-number-keyboard v-model="value" :show="true" maxlength="6"></van-number-keyboard>
      </van-popup>
    </div>
    <script src="./static/js/clipboard.min.js"></script> 
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/appfunc.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script src="./static/js/publicfn.js"></script>
    <script>
      //- function OnStart(){
        //- app.getorderinfo();
        //- PublicLib.ShowMsg({Title:'标题', Message:'OnStart'});
      //- };
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      Vue.use(vant.Lazyload);
      
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            //- 兑换码列表
            codearr:[[]],
            checkindex:-1,
            isnews:false,
            toptitleisshow:false,
            payTypePop: false,
            pwdPop: false,
            chosenAddressId: 1,
            orderinfo:{
              Status: '', //状态
              OrderNo: "", //订单号
              RealName: "", //姓名
              Mobile: "", //手机号
              TotalPrice: 0, //总价
              Areas: "", //所在地区
              Address: "", //详细地址
              BuyCount: 0, //下单数量
              SendStatus: 0, //1已发货0未发货发货状态
              CreateDate: "", //创建时间
              PayDate: "", //付款时间
              DeliveryType: 1, //提货类型1邮寄到付2自提
              StoreContact: "", //仓库联系人
              StoreContactMobile: "", //仓库联系人电话
              StoreName: "", //提货仓库
              Products:[
                {
                  ProductName:'商品名称',
                  ProductPrice:'0.00',
                  ProductCount:'0',
                  ProductPhoto:'',
                }
              ]
            },
            balance:0,
            value: '',
            errorInfo: '',
            showKeyboard: true,
            radio: 1,
            pwdInfo: '密码为 6 位数字',
            flag:true,
          };
        },
        watch: {
          async value(value) {
            if(value.length === 6){
            //- 验证原支付密码
              const Id = PublicLib.getCookieInfo('userId');
              const res = await getRequest('api/v1/users/checkpaypwd?t='+Math.random(6),JSON.stringify({Id,PayPwd:this.value}));
              if(res.status === '1'){
                this.pwdInfo = '密码正确';
                const that = this;
                this.payfn();
                this.getorderinfo();
                setTimeout(function(){
                  that.value = '';
                },800);
              }else{
                this.errorInfo = '密码错误';
                const that = this;
                setTimeout(function(){
                  that.value = '';
                },2000);
              };
            } else if(value.length === 0){
              this.errorInfo = '';
              this.pwdInfo = '密码为 6 位数字';
            } else{
              this.errorInfo = '';
              this.pwdInfo = '再输入' + (6 - value.length) + '位密码';
            }
          },
        },
        created(){
          this.toptitleisshow = toptitleisshow;
          this.getorderinfo();
        },
        beforeUpdate(){
          this.$nextTick(() => {
            console.log(this.$refs.copy)
          },10);
        },
        methods: {
          checkitem(index){
            if(index !== this.checkindex){
              this.checkindex = index;
            }else{this.checkindex = -1};
          },
          async getorderinfo(){
            const UserId = PublicLib.getCookieInfo('userId');
            const Id = PublicLib.getCookieInfo('mallorderId');
            const res = await getRequest('api/v1/orders/detail2?t='+Math.random(6),JSON.stringify({UserId,Id}));
            if(res.status !== '1') return tips('获取订单详情失败，请重试！');
            let ind = 0;
            res.data.ExchangeCodeList.forEach((item,index)=>{
              this.codearr[ind].push(item);
              if(index % 100 === 0 && index !== 0){
                this.codearr.push([]);
                ind++;
              };
            });
            this.orderinfo = res.data;
            if(res.data.DeliveryType === 0){
              this.isnews = true;
            }else{
              this.isnews = false;
            };
          },
          //余额查询
          async getNoun(){
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/useraccount/myaccount?t='+Math.random(6),JSON.stringify({UserId}));
            this.balance = tofixed2(res.data.BalanceAmount);
          },
          giveToast(str){
            vant.Toast(str);
          },
          copyCode(){
            clipboard = new ClipboardJS(this.$refs.copy);
            const that = this;
            this.$nextTick(() => {
            clipboard.on('success', function(e) {
              that.giveToast('复制成功');
            });
            clipboard.on('error', function(e) {
              that.giveToast('复制失败，请手动选择复制！');
            });
            });
          },
          onClickButton() {
            this.payTypePop = true;
            this.getNoun()
          },
          async payfn(){
            const Id = PublicLib.getCookieInfo('mallorderId');
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await postRequest('api/v1/orders/pay?t='+Math.random(6),JSON.stringify({UserId,PayMode:this.radio,Id}));
            if(res.status !== '1')return tips(res.info)
            //- if(this.radio === 2) {
            //-   PublicLib.RequestWechatPay({
            //-     OrderInfo: res.data.PayData, 
            //-     SuccessUrl:'mall-deal-detail-finished', 
            //-     FailUrl:'mall-deal-detail-finished'
            //-   });
            //-   this.flag = false;
            //- }else 
            if(this.radio === 1) {
              PublicLib.RequestAlipay({
                OrderInfo: res.data.PayData, 
                SuccessUrl:'mall-deal-detail-finished', 
                FailUrl:'mall-deal-detail-finished'
              });
              this.flag = false;
            } else {
              tips('支付成功！');
              setTimeout(()=>{
                this.pwdPop = false;
                this.getorderinfo();
              },2000)
            };
          },
          //- 点击确认支付
          async gotoInputPwd() {
            if(Number(this.orderinfo.TotalPrice)>Number(this.balance) && this.radio === 3) return tips('余额不足，请更换付款方式');
            this.paydata = '';
            this.payTypePop = false;
            switch(this.radio){
              case 3:
              const Id = PublicLib.getCookieInfo('userId');
              const res = await getRequest('api/v1/users/existpaypwd?t='+Math.random(6),JSON.stringify({Id}));
              if(res.status !== '1') return PublicLib.Goto({Url:'user-setpaypwd-1'});
              this.pwdPop = true;
              break;
              case 1:
              this.payfn();
              break;
              case 2:
              //- this.payfn();
              break;
            };
          },
          onKeyboardHide(){
            this.value = '';
            this.radio = 3;
          },
          //- 拨打电话
          takephone(phonenum){
            PublicLib.PhoneCall(phonenum);
          },
          goback(){
            if(this.flag){
              PublicLib.GoBack({Level:1});
            }else{
              PublicLib.GoBack({Level:2});
            }
          }
        }
      });
    </script>
  </body>
</html>