.

project/src/assets/config/interface_api.js

@@ -42,6 +42,12 @@ var api = {
   authorize_corpList: "/api/authorize/corpList",
   getCorCustomerList: "/api/corp/getCorCustomerList",
   authCode: "/api/authCode",
+  customerDetail: "/api/customer/customerDetail",
+  customerInfoUpdate: "/api/customer/customerInfoUpdate",
+  customerDynamicList: "/api/customer/customerDynamicList",
+  customerOrderList: "/api/customer/customerOrderList",
+  tag_detial_list: "/api/customer/customerDetailTagList",
+  tag_detial_edit: "/api/customer/customerDetailTagUpdate",
 };
 
 export { api };

project/src/components/customManage/manage.vue

@@ -112,7 +112,7 @@
           <div class="flex">
             <div class="c-00B38A pointer" @click="shieldingEvent(scope.row)">加入黑名单</div>
             <div class="c-00B38A pointer">聊天记录</div>
-            <div class="c-00B38A pointer" @click="showDetial">详情</div>
+            <div class="c-00B38A pointer" @click="showDetial(scope.row)">详情</div>
           </div>
         </template>
       </el-table-column>
@@ -130,7 +130,10 @@
       :size="drawerSize"
       :visible.sync="detialDrawer"
       :with-header="false">
-      <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer"></detial>
+      <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer" :rowProp="{
+        customer_id:rowPro.customer_id,
+        user_id:rowPro.user_id
+      }" ref="detial"></detial>
     </el-drawer>
   </div>
 </template>
@@ -177,18 +180,13 @@ export default {
       resetFlag: false,//重置
       otherData: {},
       shieldingData: {},//拉黑的数据
+      rowPro: {},//去详情的此条对象
     }
   },
   created () {
     this.init(1)
   },
   methods: {
-        changeDrawerSize(){
-    this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
-  },
-  closeDrawer(){
-    this.detialDrawer = false
-  },
     resetEvent () {//重置
       this.resetFlag = !this.resetFlag
       this.input_keyword = '';
@@ -303,9 +301,21 @@ export default {
     handleSelectionChange () {
 
     },
-    showDetial () {
+
+    changeDrawerSize(){
+      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
+    },
+    closeDrawer(){
+      this.detialDrawer = false
+    },
+    showDetial (row) {
+      this.rowPro = row
       this.drawerSize = '60%'
       this.detialDrawer = true
+      this.$nextTick(()=>{
+        this.$refs.detial.acIdx = 0
+        this.$refs.detial.init()
+      })
     }
   }
 }

project/src/components/detials/customerProfile.vue

@@ -19,27 +19,33 @@
             <el-table-column
               label="所属员工"
               class-name="self-column">
-              <template >
+              <template slot-scope="scope">
                 <div class="flex-align-center">
-                  <img src="@/assets/img/userDefault.png" alt="" width="40px">
-                  <span class="lMar8">莲雾</span>
+                  <img :src="scope.row.avatar" alt="" width="40px">
+                  <span class="lMar8">{{scope.row.user_name}}</span>
                 </div>
               </template>
             </el-table-column>
             <el-table-column
               class-name="self-column"
-              prop="name"
               label="其他客户来源">
+              <template slot-scope="scope">
+                {{scope.row.add_way}}
+              </template>
             </el-table-column>
             <el-table-column
               class-name="self-column"
-              prop="address"
               label="添加时间">
+              <template slot-scope="scope">
+                {{scope.row.createtime}}
+              </template>
             </el-table-column>
             <el-table-column
               class-name="self-column"
-              prop="address"
               label="最近沟通">
+              <template slot-scope="scope">
+                {{scope.row.remark}}
+              </template>
             </el-table-column>
           </el-table>
         </template>
@@ -61,7 +67,7 @@
                :style="[{borderBottom:(b.name == '企业' || b.name == '微博') ? 'none' : '' },{borderRight:bidx%2!==0 ? 'none' : ''}]">
             <div class="name">{{b.name}}</div>
             <div class="value">
-              <template v-if="b.name == '生日'">
+              <template v-if="b.key == 'e_birthday'">
                 <el-date-picker class="ipt"
                                 v-focus
                                 v-if="b.itpShow"
@@ -73,6 +79,9 @@
                 </el-date-picker>
                 <span @click="b.itpShow = true" class="text" v-else>{{b.value?b.value:'-'}}</span>
               </template>
+              <template v-else-if="b.key == 'sex'">
+                <span>{{b.value == 1 ? '男' : (b.value == 2 ? '女' : '未知')}}</span>
+              </template>
               <template v-else>
                 <el-input class="ipt" v-focus v-model="b.value" :placeholder="'请输入'+b.name" v-if="b.itpShow" @blur="iptBlur(bidx)"></el-input>
                 <span @click="b.itpShow = true" class="text" v-else>{{b.value?b.value:'-'}}</span>
@@ -89,16 +98,12 @@
 <script>
 export default {
   name: "customerProfile",
+  props:['rowProp'],
   data(){
     return{
       loading:false,
-      tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }],
       basicInfo:[
-        {
+        { //性别的位置不要换,换的话在initProfile里调整获取的索引
           name:'性别',
           key:'sex',
           value:'',
@@ -106,71 +111,73 @@ export default {
         },
         {
           name:'地址',
-          key:'sex',
+          key:'e_address',
           value:'',
           itpShow:false
         },
         {
           name:'年龄',
-          key:'sex',
+          key:'e_age',
           value:'',
           itpShow:false
         },
         {
           name:'生日',
-          key:'sex',
+          key:'e_birthday',
           value:'',
           itpShow:false
         },
         {
           name:'描述',
-          key:'sex',
+          key:'e_desc',
           value:'',
           itpShow:false
         },
         {
           name:'邮箱',
-          key:'sex',
+          key:'e_email',
           value:'',
           itpShow:false
         },
         {
           name:'电话',
-          key:'sex',
+          key:'e_phone',
           value:'',
           itpShow:false
         },
         {
           name:'职位',
-          key:'sex',
+          key:'e_position',
           value:'',
           itpShow:false
         },
         {
           name:'QQ',
-          key:'sex',
+          key:'e_qq',
           value:'',
           itpShow:false
         },
         {
           name:'来源',
-          key:'sex',
+          key:'e_source',
           value:'',
           itpShow:false
         },
         {
           name:'企业',
-          key:'sex',
+          key:'e_company',
           value:'',
           itpShow:false
         },
         {
           name:'微博',
-          key:'sex',
+          key:'e_weibo',
           value:'',
           itpShow:false
         }
-      ]
+      ],
+      resInfo:{},
+      tableData: [],
     }
   },
   directives:{
@@ -180,12 +187,58 @@ export default {
       }
     }
   },
+  created() {
+    this.init()
+  },
   methods:{
+    init(){
+      this.loading = true
+      this.$axios.get(this.URL.BASEURL + this.URL.customerDetail,{
+        params:{
+          customer_id:this.rowProp.customer_id,
+          user_id:this.rowProp.user_id
+        }
+      }).then((res)=>{
+        this.loading = false
+        res=res.data
+        this.resInfo = res.rst
+        this.tableData = []
+        this.tableData.push({
+          add_way:res.rst.follow_list.add_way,
+          createtime:res.rst.follow_list.createtime,
+          remark:res.rst.follow_list.remark,
+          avatar:res.rst.follow_list.avatar,
+          user_name:res.rst.follow_list.user_name
+        })
+        this.basicInfo[0].value = res.rst.gender
+        this.basicInfo.forEach(item=>{
+          item.value = res.rst[item.key]
+        })
+      }).catch(err=>{
+        this.loading = false
+      })
+    },
+    editProfile(){
+      let data={
+        customer_id:this.rowProp.customer_id,
+      }
+      this.basicInfo.forEach(item=>{
+        data[item.key] = item.value
+      })
+      this.$axios.post(this.URL.BASEURL + this.URL.customerInfoUpdate,data).then((res)=>{
+        res=res.data
+        this.$message({
+          message: res.err,
+          type: "info"
+        })
+      })
+    },
     headerClassName(){
       return 'headerClass'
     },
     iptBlur(index){
       this.basicInfo[index].itpShow = false
+      this.editProfile()
     }
   }
 }

project/src/components/detials/customerStatus.vue

@@ -1,83 +1,80 @@
 <template>
   <div v-loading="loading" class="con">
-    <div v-for="(l,idx) in list" :key="idx">
-      <div class="dayDate">{{l.date}}{{l.week}}</div>
-      <div v-for="(s,sIdx) in l.sub" :key="sIdx" class="subBox" :class="sIdx==0 ? 'tMar17' : ''">
-        <div class="subBox_line">
-          <i class="el-icon-price-tag f16"></i>
-          <div class="splitLine"></div>
-        </div>
-        <div class="lMar8">
-          <div class="dayTime">{{s.time}}</div>
-          <div class="behavior_box">
-            <div class="behavior">{{s.opa}}</div>
-            <div class="behavior_detial"><span class="fWeight600">{{s.name1}}</span> 添加了 <span class="fWeight600">{{s.name2}}</span> 为好友</div>
+    <template v-if="list&&list.length>0">
+      <div v-for="(l,idx) in list" :key="idx">
+        <div class="dayDate">{{l.create_time&&l.create_time.split(' ')[0]}}{{l.week}}</div>
+        <!--       v-for="(s,sIdx) in l.sub" :key="sIdx"-->
+        <div class="subBox" :class="idx==0 ? 'tMar17' : ''">
+          <div class="subBox_line">
+            <i class="el-icon-price-tag f16"></i>
+            <div class="splitLine"></div>
+          </div>
+          <div class="lMar8">
+            <div class="dayTime">{{l.create_time&&l.create_time.split(' ')[1]}}</div>
+            <div class="behavior_box">
+              <div class="behavior">
+                <span v-if="l.type == 1">添加好友</span>
+                <span v-else-if="l.type == 2">被员工删除</span>
+                <span v-else-if="l.type == 3">删除跟进客户</span>
+                <span v-else-if="l.type == 4">客户转移</span>
+                <span v-else-if="l.type == 5">客户下单</span>
+                <span v-else-if="l.type == 6">加入黑名单</span>
+                <span v-else-if="l.type == 7">移出黑名单</span>
+                <span v-else-if="l.type == 8">聊天</span>
+                <span v-else>未知</span>
+              </div>
+              <div class="behavior_detial">{{l.content}}</div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-
+    </template>
+    <template v-else>
+      <noData></noData>
+    </template>
   </div>
-
 </template>
 
 <script>
+import noData from "../assembly/noData";
 export default {
   name: "customerStatus",
+  props:['rowProp'],
+  components:{
+    noData
+  },
   data(){
     return{
       loading:false,
-      list:[
-        {
-          date:'2022-03-18',
-          week:'星期三',
-          sub:[
-            {
-              time:'10.45',
-              opa:'添加好友',
-              name1:'黄金菊',
-              name2:'蛋卷',
-            }
-          ]
-        },
-        {
-          date:'2022-03-18',
-          week:'星期三',
-          sub:[
-            {
-              time:'10.45',
-              opa:'添加好友',
-              name1:'黄金菊',
-              name2:'蛋卷',
-            },
-            {
-              time:'10.45',
-              opa:'添加好友',
-              name1:'黄金菊',
-              name2:'蛋卷',
-            },
-            {
-              time:'10.45',
-              opa:'添加好友',
-              name1:'黄金菊',
-              name2:'蛋卷',
-            }
-          ]
-        },
-        {
-          date:'2022-03-18',
-          week:'星期三',
-          sub:[
-            {
-              time:'10.45',
-              opa:'添加好友',
-              name1:'黄金菊',
-              name2:'蛋卷',
-            }
-          ]
-        }
-      ]
+      list:[]
     }
+  },
+  created() {
+    this.init()
+  },
+  methods:{
+    init(){
+      this.loading = true
+      let data={
+        params:{
+          customer_id:this.rowProp.customer_id,
+        }
+      }
+      this.$axios.get(this.URL.BASEURL + this.URL.customerDynamicList,data).then((res)=>{
+        this.loading = false
+        res=res.data
+        if(res&&res.errno==0){
+          this.list = res.rst
+        }else{
+          this.$message({
+            message: res.err,
+            type: "info"
+          })
+        }
+      }).catch(err=>{
+        this.loading = false
+      })
+    },
   }
 }
 </script>

project/src/components/detials/index.vue

@@ -34,21 +34,23 @@
         </template>
         <template>
           <div class="infoBox">
-            <div><img src="@/assets/img/userDefault.png"  alt="" ></div>
+            <div><img :src="resInfo.avatar"  alt="" ></div>
             <div>
               <div class="name">
-                <span>我回去了</span>
-                <span class="bright">@微信</span>
+                <span>{{resInfo&&resInfo.name}}</span>
+                <span class="bright" v-if="resInfo.type==1">@微信</span>
               </div>
               <div class="lable">
                 <span>企业标签:</span>
-                <span class="lable_con">开发</span>
-                <span class="bright" @click="comLableShow = true"><i class="el-icon-edit"></i> 编辑</span>
+                <span class="lable_con" v-for="(t,tidx) in resInfo.tag_list" :key="tidx">{{t}}</span>
+                <span class="bright" @click="init_tag"><i class="el-icon-edit"></i> 编辑</span>
               </div>
-              <div class="lable">
+<!--
+ <div class="lable">
                 <span>个人标签:</span>
                 <span class="bright" @click="selfLableShow = true"><i class="el-icon-edit"></i> 编辑</span>
               </div>
+-->
             </div>
           </div>
         </template>
@@ -62,11 +64,11 @@
           <div :class="acIdx == t.id ? 'bor_line_ac' : 'bor_line'"></div>
         </div>
       </div>
-      <customerProfile v-if="acIdx == 0"></customerProfile>
-      <customerStatus v-if="acIdx == 1"></customerStatus>
+      <customerProfile v-if="acIdx == 0" :rowProp="rowProp" ref="profile"></customerProfile>
+      <customerStatus v-if="acIdx == 1" :rowProp="rowProp"></customerStatus>
 <!--      <chatRecord v-if="acIdx == 2"></chatRecord>-->
 <!--      <chatGroup v-if="acIdx == 3"></chatGroup>-->
-      <order v-if="acIdx == 4"></order>
+      <order v-if="acIdx == 4" :rowProp="rowProp"></order>
     </div>
 
     <el-dialog
@@ -76,17 +78,32 @@
       class="addLable_dialog"
       width="30%">
       <div class="addLableBox">
-        <div class="add" @click="iptshow = true,addLableVal = ''">+ 添加</div>
-        <el-input v-if="iptshow" v-focus class="ipt" v-model="addLableVal" placeholder="请输入标签" @blur="iptBlur"></el-input>
-        <div class="lableItem" v-for="(l,lidx) in lableArr" :key="l.id" :class="lableArr_checked.indexOf(l.id) == -1 ? '' : 'lableItemAc'" @click="switchLable(l.id)">{{l.name}}</div>
+        <!--后台说先不做-->
+        <template v-if="false">
+          <div class="add" @click="iptshow = true,addLableVal = ''">+ 添加</div>
+          <el-input v-if="iptshow" v-focus class="ipt" v-model="addLableVal" placeholder="请输入标签" @blur="iptBlur"></el-input>
+        </template>
+        <div class="tMar10" v-for="l in lableArr" :key="l.group_id">
+          <div>
+            {{l.group_name}}
+          </div>
+          <div class="lableItem_dad">
+            <div class="lableItem" v-for="t in l.tag_list" :key="t.tag_id" :class="lableArr_checked.indexOf(t.tag_id) == -1 ? '' : 'lableItemAc'" @click="switchLable(t.tag_id)">
+              {{t.tag_name}}
+            </div>
+          </div>
+
+        </div>
+
       </div>
       <div slot="footer" class="dialog-footer">
-        <div class="addLableGroup" @click="lableGroup = true">
+        <!--后台说先不做-->
+        <div class="addLableGroup" @click="lableGroup = true" v-if="false">
           +新建标签组
         </div>
         <div>
           <el-button size="mini" @click="comLableShow = false">取 消</el-button>
-          <el-button size="mini" type="primary" @click="comLableShow = false">确 定</el-button>
+          <el-button size="mini" type="primary" @click="edit_tag">确 定</el-button>
         </div>
       </div>
     </el-dialog>
@@ -140,7 +157,8 @@
       </div>
     </el-dialog>
 
-    <el-dialog
+<!--
+  <el-dialog
       title="个人标签"
       :visible.sync="selfLableShow"
       :append-to-body="true"
@@ -151,31 +169,33 @@
         <div class="group_item">
           <div class="lable">性别:</div>
           <div class="opaArea">
-<!--            <el-select v-model="value" placeholder="请选择">-->
-<!--              <el-option-->
-<!--                v-for="item in sexList"-->
-<!--                :key="item.value"-->
-<!--                :label="item.label"-->
-<!--                :value="item.value">-->
-<!--              </el-option>-->
-<!--            </el-select>-->
-          </div>
-        </div>
-        <div class="group_item">
-          <div class="lable">可见范围:</div>
-          <div class="opaArea">
-            <el-radio-group v-model="scopeVal">
-              <el-radio :label="0">全部员工</el-radio>
-              <el-radio :label="1">部门可用</el-radio>
-            </el-radio-group>
-          </div>
-        </div>
-      </div>
-      <div slot="footer">
-        <el-button size="mini" @click="selfLableShow = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="selfLableShow = false">确 定</el-button>
-      </div>
-    </el-dialog>
+            <el-select v-model="value" placeholder="请选择">
+                  <el-option
+                    v-for="item in sexList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+  </div>
+  </div>
+  <div class="group_item">
+    <div class="lable">可见范围:</div>
+    <div class="opaArea">
+      <el-radio-group v-model="scopeVal">
+        <el-radio :label="0">全部员工</el-radio>
+        <el-radio :label="1">部门可用</el-radio>
+      </el-radio-group>
+    </div>
+  </div>
+  </div>
+  <div slot="footer">
+    <el-button size="mini" @click="selfLableShow = false">取 消</el-button>
+    <el-button size="mini" type="primary" @click="selfLableShow = false">确 定</el-button>
+  </div>
+  </el-dialog>
+-->
+
   </div>
 </template>
 
@@ -187,20 +207,15 @@ import chatRecord from "./chatRecord";
 import order from "./order";
 export default {
   name: "detialIndex",
+  props:['rowProp'],
   data(){
     return{
       addLableVal:'',
-      lableArr:[
-        {id:0,name:'123'},
-        {id:1,name:'123567'},
-        {id:2,name:'123433'},
-        {id:3,name:'123778'},
-        {id:4,name:'12993'}
-      ],
-      lableArr_checked:[1,3],
+      lableArr:[],
+      lableArr_checked:[],
       comLableShow:false,
       lableGroup:false,
-      selfLableShow:false,
+      // selfLableShow:false,
       acIdx:0,
       loading:false,
       iptshow:false,
@@ -230,7 +245,8 @@ export default {
       groupName:'',
       moreLable:[
         {id:0,name:''}
-      ]
+      ],
+      resInfo:{}
     }
   },
   directives:{
@@ -248,27 +264,67 @@ export default {
     order,
   },
   methods:{
+    edit_tag(){
+      this.comLableShow = true
+      this.$axios.post(this.URL.BASEURL + this.URL.tag_detial_edit,{
+        external_userid:this.resInfo.external_userid,
+        customer_id:this.rowProp.customer_id,
+        user_id:this.rowProp.user_id,
+        selected_tag_id_list:this.lableArr_checked
+      }).then((res)=>{
+        res=res.data
+        this.$message({
+          message: res.err,
+          type: "info"
+        })
+        if(res&&res.errno == 0){
+          this.comLableShow = false
+          this.init()
+        }
+
+      })
+    },
+    init_tag(){
+      this.comLableShow = true
+      this.$axios.get(this.URL.BASEURL + this.URL.tag_detial_list,{
+        params:{
+          customer_id:this.rowProp.customer_id,
+          user_id:this.rowProp.user_id
+        }
+      }).then((res)=>{
+        res=res.data
+        this.lableArr = res.rst
+
+        this.lableArr_checked=[]
+        res.rst.forEach(l=>{
+          l.tag_list.forEach(t=>{
+            if(t.selected == 1){
+              this.lableArr_checked.push(t.tag_id)
+            }
+          })
+        })
+        console.log(this.lableArr_checked,' this.lableArr_checked');
+
+      })
+    },
+    init(){
+      this.$axios.get(this.URL.BASEURL + this.URL.customerDetail,{
+        params:{
+          customer_id:this.rowProp.customer_id,
+          user_id:this.rowProp.user_id
+        }
+      }).then((res)=>{
+        res=res.data
+        this.resInfo = res.rst
+        this.$refs.profile.init()
+      })
+    },
     changeWidth(){
       this.$emit('changeDrawerSize')
     },
     close(){
       this.$emit('closeDrawer')
     },
-    // 上移
-    upClick(index) {
-      if(index == 0){return false}
-      this.moreLable = this.swapItems(this.moreLable, index, index - 1)
-    },
-    // 下移
-    downClick(index) {
-      if(index == this.moreLable.length-1){return false}
-      this.moreLable = this.swapItems(this.moreLable, index, index + 1)
-    },
-    swapItems(arr, index1, index2) {
-      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
-      return arr;
-    },
-
     iptBlur(){
       this.iptshow = false
       if(this.addLableVal){
@@ -276,6 +332,7 @@ export default {
       }
     },
     switchLable(id){
+      console.log(this.lableArr_checked,'switchLable');
       if(this.lableArr_checked.indexOf(id) == -1){
         this.lableArr_checked.push(id)
       }else{
@@ -285,17 +342,29 @@ export default {
           }
         })
       }
+    },
 
-    }
+    // 上移
+    upClick(index) {
+      if(index == 0){return false}
+      this.moreLable = this.swapItems(this.moreLable, index, index - 1)
+    },
+    // 下移
+    downClick(index) {
+      if(index == this.moreLable.length-1){return false}
+      this.moreLable = this.swapItems(this.moreLable, index, index + 1)
+    },
+    swapItems(arr, index1, index2) {
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+      return arr;
+    },
   }
 }
 </script>
 <style lang="scss">
 .addLable_dialog{
   .addLableBox{
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+
     .add{
       padding: 4px 10px;
       line-height: 20px;
@@ -305,6 +374,11 @@ export default {
       margin-right: 8px;
       margin-top: 10px;
     }
+    .lableItem_dad{
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
     .lableItem{
       line-height: 20px;
       text-align: center;
@@ -335,9 +409,9 @@ export default {
     }
   }
   .dialog-footer{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    //display: flex;
+    //align-items: center;
+    //justify-content: space-between;
     .addLableGroup{
       font-size: 14px;
       color: #00B38A;
@@ -350,12 +424,12 @@ export default {
       align-items: center;
       margin-top: 20px;
       .lable{
-        width: 30%;
+        width: 24%;
         text-align: right;
       }
       .opaArea{
         margin-left: 20px;
-        width: 50%;
+        width: 68%;
         .addIptGroup{
           font-size: 12px;color: #00B38A;cursor: pointer;margin-top: 10px
         }
@@ -424,8 +498,8 @@ export default {
     display: flex;
     align-items: center;
     img{
-      width: 100px;
-      height: 100px;
+      width: 80px;
+      height: 80px;
       margin-right: 10px;
     }
     .name{

project/src/components/detials/order.vue

@@ -3,20 +3,32 @@
     <div class="thead">
       <div class="thead_item" v-for="(t_h,thidx) in theadList" :key="thidx">{{t_h.name}}</div>
     </div>
-    <div class="tbody">
-      <div class="tbody_item" v-for="(l,lidx) in list" :key="lidx">
-        <div>{{l.id}}</div>
-        <div>{{l.date}}</div>
-        <div>{{l.status == 1 ? '已付款' : '未付款'}}</div>
-        <div class="c-00B38A fWeight600">￥{{l.amount}}</div>
+    <template v-if="list&&list.length>0">
+      <div class="tbody">
+        <div class="tbody_item" v-for="l in list" :key="l.order_id">
+          <div>{{l.order_id}}</div>
+          <div>{{l.created_ts}}</div>
+          <div>{{l.pay_status == 1 ? '已付款' : '未付款'}}</div>
+          <div class="c-00B38A fWeight600">￥{{l.pay_money?$formatNum(l.pay_money):'-'}}</div>
+        </div>
+        <div class="pagination" v-show="total>0">
+          <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+          </el-pagination>
+        </div>
       </div>
-    </div>
+    </template>
+    <noData v-else></noData>
   </div>
 </template>
 
 <script>
+import noData from "../assembly/noData";
 export default {
   name: "order",
+  props:['rowProp'],
+  components:{
+    noData
+  },
   data(){
     return{
       loading:false,
@@ -26,154 +38,49 @@ export default {
         {name:'付款状态'},
         {name:'订单金额'},
       ],
-      list:[
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-       {
-         id:'12888888888888899',
-           date:'2022-03-18',
-         status:1,
-         amount:'34'
-       },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },     {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        },
-        {
-          id:'12888888888888899',
-          date:'2022-03-18',
-          status:1,
-          amount:'34'
-        }
-
-      ]
+      page:1,
+      pages:0,
+      page_size:20,
+      total:0,
+      list:[]
     }
 
+  },
+  created() {
+    this.init()
+  },
+  methods:{
+    init(){
+      this.loading = true
+      let data={
+        params:{
+          customer_id:this.rowProp.customer_id,
+          page:this.page,
+          page_size:this.page_size
+        }
+      }
+      this.$axios.get(this.URL.BASEURL + this.URL.customerOrderList,data).then((res)=>{
+        this.loading = false
+        res=res.data
+        if(res&&res.errno==0){
+          this.list = res.rst.data
+          this.page = res.rst.pageInfo.page
+          this.pages = res.rst.pageInfo.pages
+          this.page_size = res.rst.pageInfo.size
+          this.total = res.rst.pageInfo.total
+        }else{
+          this.$message({
+            message: res.err,
+            type: "info"
+          })
+        }
+      }).catch(err=>{
+        this.loading = false
+      })
+    },
+    handleCurrentChange (val) {
+      this.init(val)
+    },
   }
 }
 </script>