feat: 初始化版本！
This commit is contained in:
tianyongbao
130
src/pages_geek/pages/code/index.vue
Normal file
130
src/pages_geek/pages/code/index.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template xlang="wxml">
|
||||
<view class="container">
|
||||
<view class="qrimg">
|
||||
<view class="qrimg-i">
|
||||
<geek-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit"
|
||||
:background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
|
||||
:lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
|
||||
</view>
|
||||
<view class="qrimg-i">
|
||||
<geek-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval"
|
||||
:loadMake="loadMake" :usingComponents="true" @result="qrR" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">请输入要生成的二维码内容</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<input class="uni-input" placeholder="请输入要生成的二维码内容" v-model="val" />
|
||||
</view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">设置二维码大小</view>
|
||||
</view>
|
||||
<view class="body-view">
|
||||
<slider :value="size" @change="sliderchange" min="50" max="500" show-value />
|
||||
</view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="btns">
|
||||
<button type="primary" @tap="selectIcon">选择二维码图标</button>
|
||||
<button type="primary" @tap="creatQrcode">生成二维码</button>
|
||||
<button type="primary" @tap="saveQrcode">保存到图库</button>
|
||||
<button type="warn" @tap="clearQrcode">清除二维码</button>
|
||||
<button type="warn" @tap="ifQrcode">显示隐藏二维码</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ifShow: true,
|
||||
val: '二维码', // 要生成的二维码值
|
||||
size: 200, // 二维码大小
|
||||
unit: 'upx', // 单位
|
||||
background: '#b4e9e2', // 背景色
|
||||
foreground: '#309286', // 前景色
|
||||
pdground: '#32dbc6', // 角标色
|
||||
icon: '', // 二维码图标
|
||||
iconsize: 40, // 二维码图标大小
|
||||
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
||||
onval: false, // val值变化时自动重新生成二维码
|
||||
loadMake: true, // 组件加载完成后自动生成二维码
|
||||
src: '' // 二维码生成后的图片地址或base64
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sliderchange(e) {
|
||||
this.size = e.detail.value
|
||||
},
|
||||
creatQrcode() {
|
||||
this.$refs.qrcode._makeCode()
|
||||
},
|
||||
saveQrcode() {
|
||||
this.$refs.qrcode._saveCode()
|
||||
},
|
||||
qrR(res) {
|
||||
this.src = res
|
||||
},
|
||||
clearQrcode() {
|
||||
this.$refs.qrcode._clearCode()
|
||||
this.val = ''
|
||||
},
|
||||
ifQrcode() {
|
||||
this.ifShow = !this.ifShow
|
||||
},
|
||||
selectIcon() {
|
||||
let that = this
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: function (res) {
|
||||
that.icon = res.tempFilePaths[0]
|
||||
setTimeout(() => {
|
||||
that.creatQrcode()
|
||||
}, 100);
|
||||
// console.log(res.tempFilePaths);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* @import "../../../common/icon.css"; */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qrimg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrimg-i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-top: 10upx;
|
||||
}</style>
|
||||
117
src/pages_geek/pages/index/index.vue
Normal file
117
src/pages_geek/pages/index/index.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<uni-section class="mb-10" title="数值板" sub-title="statistic" type="line"></uni-section>
|
||||
<u-row gutter="0">
|
||||
<u-col span="6">
|
||||
<geek-statistic label="订单数量(个)" labelColor="#1f1f1f" :number="0" numberColor="red" />
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<geek-statistic label="交易金额(元)" labelColor="#1f1f1f" :number="0" numberColor="red" />
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
<uni-section class="mb-10" title="菜单" sub-title="menu" type="line"></uni-section>
|
||||
<u-row>
|
||||
<u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
|
||||
<geek-menu v-bind=menu :size="60" @click="modal.msg(menu.label)" type="circle" />
|
||||
</u-col>
|
||||
</u-row>
|
||||
<u-row>
|
||||
<u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
|
||||
<geek-menu :icon="menu.icon" :label="menu.label" :size="60" @click="modal.msg(menu.label)" type="rect" />
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
<uni-section class="mb-10" title="商品列表" sub-title="commodity" type="line"></uni-section>
|
||||
<geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="line"
|
||||
@click="modal.msg(item.title)" />
|
||||
<geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="rect"
|
||||
@click="modal.msg(item.title)" />
|
||||
|
||||
|
||||
<uni-section class="mb-10" title="订单列表" sub-title="order" type="line"></uni-section>
|
||||
<geek-order v-for="item, index in orderList" :key="index" v-bind="item" @more="modal.msg('更多')"
|
||||
@again="modal.msg('再次购买')" @return="modal.msg('退换')" @sell="modal.msg('卖了换钱')"></geek-order>
|
||||
|
||||
<uni-section class="mb-10" title="颜色选择器" sub-title="order" type="line"></uni-section>
|
||||
<geek-color-picker ref="gk"></geek-color-picker>
|
||||
<button @click="open()">打开颜色选择器</button>
|
||||
|
||||
|
||||
<uni-section class="mb-10" title="二维码" sub-title="order" type="line"></uni-section>
|
||||
<geek-qrcode cid="qrcode2" ref="qrcode2" val="二维码" :loadMake="true" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import modal from '@/plugins/modal'
|
||||
import { Commodity, CommodityOrder, Menu } from "@/components/geek-xd/types"
|
||||
|
||||
const gk = ref(null)
|
||||
function open() {
|
||||
//@ts-ignore
|
||||
gk.value.open()
|
||||
}
|
||||
|
||||
const menus:Array<Menu> = reactive([
|
||||
{ icon: "/static/images/icon/rocket.png", label: '抢单' },
|
||||
{ icon: "/static/images/icon/phone.png", label: '回访' },
|
||||
{ icon: "/static/images/icon/message.png", label: '消息' },
|
||||
{ icon: "/static/images/icon/dialogue.png", label: '公告' },
|
||||
{ icon: "/static/images/icon/knowledge.png", label: '知识库' }
|
||||
]);
|
||||
|
||||
const commodityList: Array<Commodity> = reactive([
|
||||
{
|
||||
img: '/static/images/banner/banner01.jpg',
|
||||
title: '商品1',
|
||||
subTitle: '商品1简介',
|
||||
price: 100,
|
||||
},
|
||||
{
|
||||
img: '/static/images/banner/banner02.jpg',
|
||||
title: '商品2',
|
||||
subTitle: '商品2简介',
|
||||
price: 300,
|
||||
},
|
||||
{
|
||||
img: '/static/images/banner/banner03.jpg',
|
||||
title: '商品3',
|
||||
subTitle: '商品3简介',
|
||||
price: 200,
|
||||
}
|
||||
])
|
||||
|
||||
const orderList: Array<CommodityOrder> = [
|
||||
{
|
||||
shop: 'geek自营旗舰店',
|
||||
status: '完成',
|
||||
img: '/static/images/banner/banner01.jpg',
|
||||
title: '商品1',
|
||||
subTitle: '商品1简介',
|
||||
price: 100.32,
|
||||
num: 10
|
||||
},
|
||||
{
|
||||
shop: 'geek自营旗舰店',
|
||||
status: '已取消',
|
||||
img: '/static/images/banner/banner03.jpg',
|
||||
title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
|
||||
subTitle: '商品3简介',
|
||||
price: 2000.67,
|
||||
num: 10
|
||||
},
|
||||
{
|
||||
shop: 'geek自营旗舰店',
|
||||
status: '已取消',
|
||||
img: '/static/images/banner/banner03.jpg',
|
||||
title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
|
||||
subTitle: '商品3简介',
|
||||
price: 10.67,
|
||||
num: 10
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user