# dev [资源] - 前端页面模板 & [资源] - 码券查询

Freemud.BE.Toolbox.WebApi/Startup.cs

@@ -84,7 +84,7 @@ namespace Freemud.BE.Toolbox.WebApi
 
             app.UseGlobalExceptionHandler();
             app.UseRequestClientInfoReceiver();
-            app.UseRequestWebWorkContext();
+            //app.UseRequestWebWorkContext();
 
             app.UseEndpoints(endpoints =>
             {

freemud.be.toolboxview/src/views/requestresource/CouponProductSearch.vue

@@ -4,43 +4,40 @@
     <br />
     <Form :label-width="80">
       <Row>
-        <Col span="8">
-          <FormItem label="券号">
-            <Input></Input>
+        <Col span="12">
+          <FormItem label="渠道">
+            <RadioGroup type="button" v-model="channel">
+              <Radio label="delivery">
+                <Icon type="md-bicycle" />麦乐送
+              </Radio>
+              <Radio label="mcoffee">
+                <Icon type="md-cafe" />麦咖啡
+              </Radio>
+              <Radio label="kiosk">
+                <Icon type="md-ice-cream" />甜品站
+              </Radio>
+            </RadioGroup>
           </FormItem>
         </Col>
-        <Col span="8">
-          <FormItem label="门店号">
-            <Input></Input>
+        <Col span="12">
+          <FormItem label="环境">
+            <RadioGroup type="button" v-model="env">
+              <Radio label="dev">开发环境</Radio>
+              <Radio label="prod">生产环境</Radio>
+            </RadioGroup>
           </FormItem>
         </Col>
-        <Col span="8">
-          <FormItem label="渠道">
-            <Select>
-              <Option value="deliver">
-                <Icon type="md-bicycle" />
-                <span>麦乐送</span>
-              </Option>
-              <Option value="mcoffee">
-                <Icon type="md-cafe" />
-                <span>麦咖啡</span>
-              </Option>
-              <Option value="kiosk">
-                <Icon type="md-ice-cream" />
-                <span>甜品站</span>
-              </Option>
-            </Select>
+        <Col span="12">
+          <FormItem label="券号">
+            <Input type="text" v-model="couponCode" placeholder="券号"></Input>
           </FormItem>
         </Col>
-        <Col span="8">
-          <FormItem label="环境">
-            <Select>
-              <Option value="dev">测试环境</Option>
-              <Option value="prod">正式环境</Option>
-            </Select>
+        <Col span="12">
+          <FormItem label="门店号">
+            <Input type="text" v-model="storeId" placeholder="门店编号"></Input>
           </FormItem>
         </Col>
-        <Col span="8">
+        <Col span="12">
           <FormItem>
             <Button type="primary" icon="ios-search" @click="search()">查 询</Button>
           </FormItem>
@@ -50,9 +47,47 @@
 
     <hr />
     <div class="result">
-      <h3>结果 JSON</h3>
-      <!-- bidirectional data binding（双向数据绑定） -->
-      <codemirror v-model="code" :options="cmOptions"></codemirror>
+      <h3>结果</h3>
+      <Tabs :animated="false">
+        <TabPane label="结果" icon="md-list-box">
+          <List border>
+            <ListItem>说明描述</ListItem>
+            <ListItem>说明描述</ListItem>
+            <ListItem>说明描述</ListItem>
+            <ListItem>说明描述</ListItem>
+            <ListItem>说明描述</ListItem>
+            <ListItem>说明描述</ListItem>
+          </List>
+        </TabPane>
+        <TabPane label="元信息" icon="md-bug">
+          <div class="result-panel">
+            <div class="item">
+              <span>URL</span>
+              <codemirror v-model="metaDataRequestUrl" :options="cmOptions"></codemirror>
+            </div>
+            <div class="item">
+              <span>Request Header</span>
+              <codemirror v-model="metaDataRequestHeader" :options="cmOptions"></codemirror>
+            </div>
+            <div class="item">
+              <span>Request Body</span>
+              <codemirror v-model="metaDataRequestBody" :options="cmOptions"></codemirror>
+            </div>
+            <div class="item">
+              <span>Response Error</span>
+              <Alert type="error">{{this.metaDataResponseError}}</Alert>
+            </div>
+            <div class="item">
+              <span>Response Header</span>
+              <codemirror v-model="metaDataResponseHeader" :options="cmOptions"></codemirror>
+            </div>
+            <div class="item">
+              <span>Response Body</span>
+              <codemirror v-model="metaDataResponseBody" :options="cmOptions"></codemirror>
+            </div>
+          </div>
+        </TabPane>
+      </Tabs>
     </div>
   </div>
 </template>
@@ -62,7 +97,7 @@
 import { codemirror } from 'vue-codemirror'
 import 'codemirror/mode/javascript/javascript.js'
 import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/ambiance.css'
+import 'codemirror/theme/the-matrix.css'
 
 export default {
   components: {
@@ -70,13 +105,23 @@ export default {
   },
   data () {
     return {
-      code: '',
+      channel: 'delivery',
+      env: 'dev',
+      couponCode: '573185005512078',
+      storeId: '1450026',
+      viewData: '',
+      metaDataRequestUrl: '',
+      metaDataRequestHeader: '',
+      metaDataRequestBody: '',
+      metaDataResponseHeader: '',
+      metaDataResponseBody: '',
+      metaDataResponseError: '',
       cmOptions: {
         lineNumbers: true,
         // readOnly: true,
         tabSize: 2,
         model: 'text/javascript',
-        theme: 'ambiance'
+        theme: 'the-matrix'
       }
     }
   },
@@ -84,11 +129,25 @@ export default {
 
   },
   methods: {
-    search () {
-      const codeStr = '{"title":"json在线解析（简版） -JSON在线解析","json.url":"https://www.sojson.com/simple_json.html","keywords":"json在线解析","功能":["JSON美化","JSON数据类型显示","JSON数组显示角标","高亮显示","错误提示",{"备注":["www.sojson.com","json.la"]}],"加入我们":{"qq群":"259217951","年龄":18,"IsChange":false}}'
-      const json = JSON.parse(codeStr)
-      this.code = JSON.stringify(json, null, '\t')
-      this.$Message.success('请求成功')
+    async search () {
+      const params = { env: this.env, channel: this.channel, couponCode: this.couponCode, storeId: this.storeId }
+      const { data: response } = await this.$http.post('/requestresource/get-coupon-product', params)
+      if (response.code !== 200) {
+        this.$Message.error(response.message)
+      } else {
+        // const codeStr = '{"title":"json在线解析（简版） -JSON在线解析","json.url":"https://www.sojson.com/simple_json.html","keywords":"json在线解析","功能":["JSON美化","JSON数据类型显示","JSON数组显示角标","高亮显示","错误提示",{"备注":["www.sojson.com","json.la"]}],"加入我们":{"qq群":"259217951","年龄":18,"IsChange":false}}'
+        // const json = JSON.parse(codeStr)
+        // this.viewData = JSON.stringify(json, null, '\t')
+        // this.$Message.success('请求成功')
+        this.metaDataRequestUrl = response.data.url
+        // this.metaDataRequestHeader = JSON.stringify(JSON.parse(response.data.requestHeaders), null, '\t')
+        // this.metaDataRequestBody = JSON.stringify(JSON.parse(response.data.requestBody), null, '\t')
+        // this.metaDataResponseHeader = JSON.stringify(JSON.parse(response.data.responseHeaders), null, '\t')
+        // this.metaDataResponseBody = JSON.stringify(JSON.parse(response.data.responseBody), null, '\t')
+        this.metaDataResponseError = response.data.responseError
+
+        this.$Message.success('保存成功')
+      }
     }
   }
 }
@@ -98,6 +157,20 @@ export default {
 .ss {
   color: aqua;
 }
+
+.result-panel {
+  .item {
+    margin-bottom: 10px;
+    span {
+      display: inline-block;
+      border-bottom: 5px solid #61b73e;
+      margin-bottom: 10px;
+      font-weight: bold;
+      font-size: 25px;
+      font-family: fantasy;
+    }
+  }
+}
 </style>
 
 <style lang="less">

freemud.be.toolboxview/src/views/requestresource/RequestResource.vue

@@ -3,7 +3,7 @@
     <h1>请求资源</h1>
     <div class="request-resource">
       <div class="request-resource-menu">
-        <Menu :accordion="true">
+        <Menu>
           <Submenu name="1">
             <template slot="title">
               <Icon type="ios-paper" />券码相关