174 lines
3.6 KiB
Vue
174 lines
3.6 KiB
Vue
<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>
|