初始化产品库

src/pages/villageQRCode/villageQRCode.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="village-qr-code">
+    <div class="qr-code">
+      <u-dropdown>
+        <u-dropdown-item v-model="value" title="向杲村" :options="list"></u-dropdown-item>
+      </u-dropdown>
+      <img class="code" src="https://www.meihuama.com/resource/image/thumbnail/default.png" alt="">
+      <strong class="send" @send="handleSendMsg">点击发送乡村群二维码</strong>
+    </div>
+    <div class="list">
+      <div class="title">联村政干</div>
+      <div class="body">
+        <u-row class="wrap" v-for="item in 7" :key="item">
+          <u-avatar src="http://n.sinaimg.cn/translate/w402h363/20180213/bg7r-fyrpeie1413753.jpg" size="112"
+                    mode="square"></u-avatar>
+          <div class="info">
+            <u-row>
+              <strong class="name">陶瑞武</strong>
+              <span>组长 15888888888</span>
+            </u-row>
+            <u-gap height="12"></u-gap>
+            <u-row>
+              <label class="status">在岗</label>
+              <span>上街组、建新组、后接组</span>
+            </u-row>
+          </div>
+        </u-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapActions} from "vuex";
+
+export default {
+  name: "villageQRCode",
+  data() {
+    return {
+      value: 1,
+      list: [{
+        label: '默认排序',
+        value: 1,
+      },
+        {
+          label: '距离优先',
+          value: 2,
+        },
+        {
+          label: '价格优先',
+          value: 3,
+        }
+      ],
+    }
+  },
+  methods: {
+    ...mapActions(['wxInvoke', 'injectJWeixin']),
+    handleSendMsg() {
+      this.wxInvoke(['sendChatMessage', {
+        msgtype: "image",
+        image: {
+          mediaid: ""
+        }
+      }, res => {
+        if (res?.err_msg == 'sendChatMessage:ok') {
+
+        }
+      }])
+    }
+  },
+  created() {
+    this.injectJWeixin("sendChatMessage")
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.village-qr-code {
+  min-height: 100%;
+  background-color: #F5F5F5;
+
+  .qr-code {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff;
+    box-sizing: border-box;
+
+    .code {
+      width: 320px;
+      height: 320px;
+      margin-top: 32px;
+    }
+
+    .send {
+      font-size: 28px;
+      font-weight: 400;
+      color: #1365DD;
+      margin: 36px 0 50px;
+    }
+  }
+
+  .list {
+    background-color: #ffffff;
+    margin-top: 16px;
+
+    .title {
+      height: 96px;
+      font-size: 32px;
+      font-weight: 600;
+      color: #333333;
+      display: flex;
+      align-items: center;
+      padding-left: 32px;
+    }
+
+    .body {
+      box-sizing: border-box;
+      padding-left: 32px;
+
+      .wrap {
+        height: 176px;
+
+        .info {
+          width: calc(100% - 32px - 112px);
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          margin-left: 24px;
+          justify-content: center;
+          border-bottom: 1px solid #E5E5E5;
+
+          .name {
+            font-size: 36px;
+            color: #333333;
+            margin-right: 16px;
+          }
+
+          & > span {
+            font-size: 28px;
+            font-weight: 400;
+            color: #999999;
+          }
+
+          .status {
+            margin-right: 16px;
+            font-size: 28px;
+            font-weight: 400;
+            color: #2EA222;
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .u-dropdown__menu__item {
+    margin-top: 48px;
+  }
+
+  ::v-deep .u-dropdown__content__mask {
+    min-height: 100%;
+  }
+
+  ::v-deep .u-dropdown__menu__item__text {
+    & > span {
+      font-size: 36px;
+      font-weight: 600;
+      color: #333333;
+    }
+  }
+}
+</style>