用户详情

project/src/components/customOperate/sideTool/userPortrait.vue

@@ -5,7 +5,6 @@
       <el-button type="primary" size="mini" @click="copy">复制链接</el-button>
       <div class="f12 line18 lMar8 c-FE9">
         <p>*上下拖动列表可调节信息位置</p>
-        <p>*请先设置好客户信息后复制链接</p>
       </div>
     </div>
     <div class="flex-start" style=" margin-top: 20px;">

qwh5/package-lock.json

@@ -27,6 +27,7 @@
         "@vue/cli-plugin-typescript": "~5.0.0",
         "@vue/cli-plugin-vuex": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
+        "postcss-px-to-viewport": "^1.1.1",
         "typescript": "~4.5.5"
       }
     },
@@ -8377,6 +8378,16 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-px-to-viewport": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
+      "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
+      "dev": true,
+      "dependencies": {
+        "object-assign": ">=4.0.1",
+        "postcss": ">=5.0.2"
+      }
+    },
     "node_modules/postcss-reduce-initial": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz",
@@ -17166,6 +17177,16 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "postcss-px-to-viewport": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
+      "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
+      "dev": true,
+      "requires": {
+        "object-assign": ">=4.0.1",
+        "postcss": ">=5.0.2"
+      }
+    },
     "postcss-reduce-initial": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz",

qwh5/package.json

@@ -26,6 +26,7 @@
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "postcss-px-to-viewport": "^1.1.1",
     "typescript": "~4.5.5"
   }
 }

qwh5/postcss.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    'postcss-px-to-viewport': {
+      viewportWidth: 375,
+      unitPrecision: 5,
+      viewportUnit: 'vw',
+      selectorBlackList: ['.ignore', '.hairlines'],
+      minPixelValue: 1,
+      mediaQuery: false,
+      exclude: /node_modules/
+    }
+  }
+}

qwh5/src/main.ts

@@ -5,7 +5,7 @@ import store from './store'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 // import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import { Icon, Loading, Popover } from 'vant';
+import { Icon, Loading, Popover, List } from 'vant';
 import 'vant/lib/index.css';
 import './styles/index.scss'
 import axios from './utils/axios';
@@ -16,7 +16,7 @@ const app = createApp(App)
 //   app.component(key, component)
 // }
 
-app.use(Popover).use(Loading).use(Icon).use(ElementPlus).use(store).use(router).mount('#app')
+app.use(List).use(Popover).use(Loading).use(Icon).use(ElementPlus).use(store).use(router).mount('#app')
 
 app.config.globalProperties.$axios = axios;//全局挂载方法
 app.config.globalProperties.$getWxConfig = getWxConfig;//全局挂载方法

qwh5/src/utils/getWxConfig.ts

@@ -1,11 +1,16 @@
 import axios from './axios';
 import { getQueryString } from './common'
-function getAuthInfo(cb) {//jsapi通用授权数据
+function getAuthInfo(cb?: any, redirect_url?: any) {//jsapi通用授权数据
   axios.post('/api/h5/auth/commonAuthData', {
     corpid: getQueryString('corpid'),
     url: location.href.split('#')[0],
   }).then((res: any) => {
-    initQYConfig(res.rst, cb);
+    if (redirect_url) {//构造网页授权链接回调
+      redirect_url(res.rst)
+    }
+    if (cb) {
+      initQYConfig(res.rst, cb);
+    }
   }).catch((err) => {
     console.log(err, 'err')
   })

qwh5/src/views/userPortrait.vue

@@ -88,21 +88,21 @@
               </div>
             </div>
           </div>
-          <div class="order_con" v-if="user_tab==2">
+          <van-list v-model:loading="order_loading" class="order_con" v-if="user_tab==2" :finished="order_finished" finished-text="没有更多了" @load="get_h5CustomerOrderList" :immediate-check="false">
             <noData v-if="h5CustomerOrderList.length<=0"></noData>
             <table class="tableCon" v-else>
               <thead>
                 <tr>
                   <th>订单ID</th>
-                  <th style="width: 250px">商品</th>
-                  <th style="width: 200px">创建时间</th>
-                  <th style="width: 250px">付款状态</th>
-                  <th style="width: 200px">订单金额</th>
+                  <th style="width: 25%">商品</th>
+                  <th style="width: 20%">创建时间</th>
+                  <th style="width: 15%">付款状态</th>
+                  <th style="width: 15%">订单金额</th>
                 </tr>
               </thead>
                 <template v-if="tableData&&tableData.length>0">
                   <tbody>
-                    <tr v-for="(item,) in h5CustomerOrderList">
+                    <tr v-for="(item) in h5CustomerOrderList" :key="item.order_id">
                       <td>{{item.order_id}} </td>
                       <td>{{item.playlet_name}} </td>
                       <td>{{item.created_ts}}</td>
@@ -111,8 +111,8 @@
                     </tr>
                   </tbody>
                 </template>
-              </table>
-          </div>
+            </table>
+          </van-list>
         </div>
       </div>
     </div>
@@ -157,25 +157,31 @@ export default {
     const pageLoading = ref(false)  
     const showPopover = ref(false)
     const getUserInfoFlag = ref(true)//获取企微用户授权，是否被允许
+    const order_loading = ref(false)
+    const order_finished = ref(false);
+    const page = ref(0)
+    const page_size = ref(20)
+    const total = ref(-1)
+    const pages = ref(0)
     const configInfo = reactive({
-      // corpid:'',
-      // external_userid:'',
-      // user_id:'',
-      corpid:'ww27940915d8fbfbe6',
-      external_userid:'wm5xsRBwAAC_qqbdzn-IVkN5ojRwM1qQ',
-      user_id:'8a82d12ae22e0cedd81ae297a2e7c1fa'
+      corpid:'',
+      external_userid:'',
+      user_id:'',
+      // corpid:'ww27940915d8fbfbe6',
+      // external_userid:'wm5xsRBwAAC_qqbdzn-IVkN5ojRwM1qQ',
+      // user_id:'8a82d12ae22e0cedd81ae297a2e7c1fa'
     })
     onBeforeMount(() => {//组件挂载之前
-      pageLoading.value = true;
-      get_data_init()
-      return;
+      // pageLoading.value = true;
+      // get_data_init()
+      // return;
       if(getQueryString('againJump')){
         configInfo.corpid = getQueryString('corpid')
         getWxConfig(()=>{
           getCurExternalContact()//获取企业外部联系人ID
         });
       }else{//获取用户信息
-        getWxConfig((authInfo)=>{
+        getWxConfig('',(authInfo)=>{
           let redirect_uri = encodeURIComponent(window.location.href+'&againJump=true')
           let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${authInfo.corpid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=1&agentid=${authInfo.agent_id}#wechat_redirect`;
           let link = document.createElement("a");
@@ -260,16 +266,30 @@ export default {
     }
     function get_h5CustomerOrderList(){//客户画像-订单
       return new Promise((resolve,reject)=>{
+        // 数据全部加载完成
+        if (total.value != -1 && page.value >= pages.value) {
+          order_finished.value = true;
+          resolve('')
+          return
+        }
+        page.value = page.value + 1;
         (proxy as any).$axios.get("/api/h5/portrait/h5CustomerOrderList", {
           corpid:configInfo.corpid,
           external_userid:configInfo.external_userid,
           user_id:configInfo.user_id,
-          page:1,
-          page_size:20,
+          page: page.value,
+          page_size: page_size.value,
         },true).then((res) => {
           //请求成功
           let data = res.rst;
-          h5CustomerOrderList.value = data.data;
+          if(page.value == 1){
+            h5CustomerOrderList.value = []
+          }
+          h5CustomerOrderList.value = h5CustomerOrderList.value.concat(data.data);
+          total.value = data.pageInfo.total;
+          pages.value = data.pageInfo.pages;
+          // 加载状态结束
+          order_loading.value = false;
           resolve('')
         }).catch( err => {
           console.log(err,'err')
@@ -340,10 +360,13 @@ export default {
       h5CustomerOrderList,
       showPopover,
       getUserInfoFlag,
+      order_loading,
+      order_finished,
       confirm_tag,
       onBeforeClose,
       _closeTag,
-      getCurExternalContact
+      getCurExternalContact,
+      get_h5CustomerOrderList
     }
   },
 }