add
This commit is contained in:
parent
686092cb97
commit
be59c24415
|
|
@ -89,7 +89,7 @@
|
||||||
|
|
||||||
const subtotal = computed(() => {
|
const subtotal = computed(() => {
|
||||||
let num = +datas.value.cart_num || 0;
|
let num = +datas.value.cart_num || 0;
|
||||||
let sell = +datas.value.price;
|
let sell = +datas.value.sell || datas.value.price;
|
||||||
return Math.ceil(num * sell * 100) / 100
|
return Math.ceil(num * sell * 100) / 100
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,19 @@
|
||||||
let BASE_URL
|
let BASE_URL
|
||||||
import store from "@/store/user.js"
|
import store from "@/store/user.js"
|
||||||
// 环境
|
// 环境
|
||||||
let env = "dev"
|
// let env = "dev"
|
||||||
|
let env = "prod"
|
||||||
// let env = "liu";
|
// let env = "liu";
|
||||||
|
|
||||||
switch (env) {
|
switch (env) {
|
||||||
|
case 'dev':
|
||||||
|
BASE_URL = 'https://test-multi-store.lihaink.cn';
|
||||||
|
break;
|
||||||
case 'liu':
|
case 'liu':
|
||||||
BASE_URL = 'http://192.168.1.201:8545';
|
BASE_URL = 'http://192.168.1.201:8545';
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
BASE_URL = 'https://test-multi-store.lihaink.cn';
|
BASE_URL = 'https://multi-store.lihaink.cn';
|
||||||
}
|
}
|
||||||
|
|
||||||
let HTTP_REQUEST_URL
|
let HTTP_REQUEST_URL
|
||||||
|
|
|
||||||
|
|
@ -142,6 +142,11 @@
|
||||||
import goodPopup from "@/components/goodPopup.vue"
|
import goodPopup from "@/components/goodPopup.vue"
|
||||||
import useCartStore from "@/store/cart.js"
|
import useCartStore from "@/store/cart.js"
|
||||||
|
|
||||||
|
// 用户选择的门店信息
|
||||||
|
let STORE_INFO = uni.getStorageSync('STORE_INFO');
|
||||||
|
if (STORE_INFO)
|
||||||
|
STORE_INFO = JSON.parse(STORE_INFO)
|
||||||
|
|
||||||
const cartStore = useCartStore();
|
const cartStore = useCartStore();
|
||||||
|
|
||||||
// 创建响应式数据
|
// 创建响应式数据
|
||||||
|
|
@ -197,7 +202,9 @@
|
||||||
const addCart = (id, cart_num) => { //加入购物车
|
const addCart = (id, cart_num) => { //加入购物车
|
||||||
cartCreateApi({
|
cartCreateApi({
|
||||||
cart_num: +cart_num,
|
cart_num: +cart_num,
|
||||||
goods_id: id
|
product_id: id,
|
||||||
|
store_id: 1
|
||||||
|
// store_id:
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
getcartList();
|
getcartList();
|
||||||
})
|
})
|
||||||
|
|
@ -216,7 +223,7 @@
|
||||||
};
|
};
|
||||||
const changeGood = (data) => { // 确定选择商品重量
|
const changeGood = (data) => { // 确定选择商品重量
|
||||||
showGoodPopup.value = false;
|
showGoodPopup.value = false;
|
||||||
addCart(data.goods_id || data.id, data.cart_num);
|
addCart(data.product_id, data.cart_num);
|
||||||
}
|
}
|
||||||
|
|
||||||
const cartList = ref([]);
|
const cartList = ref([]);
|
||||||
|
|
@ -342,7 +349,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.total {
|
.total {
|
||||||
padding: 0 20rpx;
|
margin-top: 10rpx;
|
||||||
|
padding: 0 40rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
<view style="font-size: 30rpx;font-weight: bold;" @click="test">惠农批发 </view>
|
<view style="font-size: 30rpx;font-weight: bold;" @click="test">惠农批发 </view>
|
||||||
</template>
|
</template>
|
||||||
</up-navbar>
|
</up-navbar>
|
||||||
|
|
||||||
<view class="store-info" @click="navgo('/multipleShop/index/index')">
|
<view class="store-info" @click="navgo('/multipleShop/index/index')">
|
||||||
<view style="display: flex;font-size: 30rpx;font-weight: bold;">
|
<view style="display: flex;font-size: 30rpx;font-weight: bold;">
|
||||||
{{STORE_INFO.name}}
|
{{STORE_INFO.name}}
|
||||||
|
|
@ -333,7 +332,8 @@
|
||||||
pid: pid,
|
pid: pid,
|
||||||
page_no: page_no,
|
page_no: page_no,
|
||||||
page_size: 30,
|
page_size: 30,
|
||||||
three: three
|
three: three,
|
||||||
|
store_id: STORE_INFO.id || '' // 店铺id，用于获取店铺分类列表，如果为空则获取全部分类列表，否则获取店铺分类列表。
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if (pid == 0) { // 加载一级分类时设置全部分类
|
if (pid == 0) { // 加载一级分类时设置全部分类
|
||||||
if (!res.data?.lists?.length) return;
|
if (!res.data?.lists?.length) return;
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,8 @@
|
||||||
<up-icon name="trash"></up-icon>
|
<up-icon name="trash"></up-icon>
|
||||||
删除
|
删除
|
||||||
</view>
|
</view>
|
||||||
<view class="btn" @click="navTo('/pagesOrder/addressEdit/addressEdit?mode=edit&address_id='+item.address_id)">
|
<view class="btn"
|
||||||
|
@click="navTo('/pagesOrder/addressEdit/addressEdit?mode=edit&address_id='+item.address_id)">
|
||||||
<up-icon name="edit-pen"></up-icon>
|
<up-icon name="edit-pen"></up-icon>
|
||||||
编辑
|
编辑
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -30,17 +31,26 @@
|
||||||
</view>
|
</view>
|
||||||
<view style="width: 100%;height: 150rpx;"></view>
|
<view style="width: 100%;height: 150rpx;"></view>
|
||||||
<view class="bottom-fixed">
|
<view class="bottom-fixed">
|
||||||
<up-button color="#20B128" shape="circle" @click="navTo('/pagesOrder/addressEdit/addressEdit')">新增地址</up-button>
|
<up-button color="#20B128" shape="circle"
|
||||||
|
@click="navTo('/pagesOrder/addressEdit/addressEdit')">新增地址</up-button>
|
||||||
</view>
|
</view>
|
||||||
<modal :show="show" title="确认删除吗" content="删除后不可恢复" @close="show=false" @change="deleteAddress"></modal>
|
<modal :show="show" title="确认删除吗" content="删除后不可恢复" @close="show=false" @change="deleteAddress"></modal>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue"
|
import {
|
||||||
|
ref
|
||||||
|
} from "vue"
|
||||||
import modal from "@/components/modal.vue";
|
import modal from "@/components/modal.vue";
|
||||||
import { addressListsApi, addressEditApi, addressDeleteApi } from "@/api/user.js";
|
import {
|
||||||
import { onShow } from "@dcloudio/uni-app";
|
addressListsApi,
|
||||||
|
addressEditApi,
|
||||||
|
addressDeleteApi
|
||||||
|
} from "@/api/user.js";
|
||||||
|
import {
|
||||||
|
onShow
|
||||||
|
} from "@dcloudio/uni-app";
|
||||||
|
|
||||||
const navTo = (url) => {
|
const navTo = (url) => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
|
|
@ -51,7 +61,7 @@
|
||||||
const show = ref(false);
|
const show = ref(false);
|
||||||
const deleteInfo = ref({});
|
const deleteInfo = ref({});
|
||||||
const showDelete = (item) => {
|
const showDelete = (item) => {
|
||||||
if(addressList.value.length<=1) return uni.$u.toast('最后一个地址无法删除!');
|
if (addressList.value.length <= 1) return uni.$u.toast('最后一个地址无法删除!');
|
||||||
deleteInfo.value = item;
|
deleteInfo.value = item;
|
||||||
show.value = true;
|
show.value = true;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,8 @@
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="qr_code" v-if="datas.paid == 1 && datas.status == 1">
|
<view class="qr_code" v-if="datas.paid == 1 && datas.status == 1">
|
||||||
<QRCode :val="datas.verify_code" :size="150"></QRCode>
|
<w-barcode :options="options"></w-barcode>
|
||||||
|
<!-- <QRCode :val="datas.verify_code" :size="150"></QRCode> -->
|
||||||
<view style="font-weight: bold;color: #333;font-size: 26;">
|
<view style="font-weight: bold;color: #333;font-size: 26;">
|
||||||
核销码 {{datas.verify_code}}
|
核销码 {{datas.verify_code}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -188,13 +189,14 @@
|
||||||
} from "@dcloudio/uni-app";
|
} from "@dcloudio/uni-app";
|
||||||
import {
|
import {
|
||||||
nextTick,
|
nextTick,
|
||||||
ref
|
ref,
|
||||||
|
reactive
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import addressPopup from "@/components/addressPopup.vue";
|
import addressPopup from "@/components/addressPopup.vue";
|
||||||
import orderCanclePopup from "@/components/orderCanclePopup.vue";
|
import orderCanclePopup from "@/components/orderCanclePopup.vue";
|
||||||
import shopListPopupVue from "@/components/shopListPopup.vue";
|
import shopListPopupVue from "@/components/shopListPopup.vue";
|
||||||
import modal from "@/components/modal.vue";
|
import modal from "@/components/modal.vue";
|
||||||
import QRCode from "@/uni_modules/uview-plus/components/u-qrcode/u-qrcode.vue";
|
// import QRCode from "@/uni_modules/uview-plus/components/u-qrcode/u-qrcode.vue";
|
||||||
import {
|
import {
|
||||||
orderDetailApi,
|
orderDetailApi,
|
||||||
cancelOrderApi,
|
cancelOrderApi,
|
||||||
|
|
@ -210,6 +212,12 @@
|
||||||
const showCancel = ref(false);
|
const showCancel = ref(false);
|
||||||
const showTake = ref(false);
|
const showTake = ref(false);
|
||||||
|
|
||||||
|
const options = reactive({
|
||||||
|
width: 670, // 宽度 单位rpx
|
||||||
|
height: 100, // 高度 单位rpx
|
||||||
|
code: '', // 生成条形码的值
|
||||||
|
}, )
|
||||||
|
|
||||||
const submitCancel = (e) => {
|
const submitCancel = (e) => {
|
||||||
showCancel.value = false;
|
showCancel.value = false;
|
||||||
cancelOrderApi({
|
cancelOrderApi({
|
||||||
|
|
@ -235,6 +243,8 @@
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
datas.value = res.data;
|
datas.value = res.data;
|
||||||
|
|
||||||
|
options.code = datas.value.verify_code; // 生成条形码的值
|
||||||
|
|
||||||
shopInfo.value = res.data.store_info;
|
shopInfo.value = res.data.store_info;
|
||||||
if (addressList.value.length > 0 && res.data.paid) {
|
if (addressList.value.length > 0 && res.data.paid) {
|
||||||
addressInfo.value = addressList.value.find(item => item.address_id == res.data.address_id);
|
addressInfo.value = addressList.value.find(item => item.address_id == res.data.address_id);
|
||||||
|
|
|
||||||
|
|
@ -6,36 +6,35 @@
|
||||||
<text>待付款</text>
|
<text>待付款</text>
|
||||||
</view>
|
</view>
|
||||||
<view v-else>
|
<view v-else>
|
||||||
<text v-if="datas.status==0">待收货</text>
|
<text v-if="datas.status==0">待核销</text>
|
||||||
<text v-if="datas.status==1">待收货</text>
|
<text v-if="datas.status==1">待核销</text>
|
||||||
<text v-if="datas.status==2||datas.status==3">已完成</text>
|
<text v-if="datas.status==2||datas.status==3">已完成</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item-body" @click="navTo">
|
<view class="item-body" @click="navTo">
|
||||||
<view class="body-content">
|
<view class="body-content">
|
||||||
<view style="display: flex;flex: 1;flex-shrink: 0;">
|
<view>
|
||||||
<view v-for="(item,index) in datas.goods_list" :key="index" style="display: flex;">
|
<view v-for="(item,index) in datas.goods_list" :key="index"
|
||||||
|
style="display: flex;margin-bottom: 20rpx;">
|
||||||
<image class="image" :src="item.image"></image>
|
<image class="image" :src="item.image"></image>
|
||||||
<view class="">
|
<view style="width: 520rpx;">
|
||||||
<view class="" style="display: flex;position: relative;">
|
<view class="" style="display: flex;justify-content: space-between;">
|
||||||
<view>
|
<view>
|
||||||
{{item.store_name}}
|
{{item.store_name}}
|
||||||
</view>
|
</view>
|
||||||
<view style="position: absolute;right: -440rpx;font-size: 32rpx;">
|
<view style="font-size: 32rpx;">
|
||||||
￥{{item.price}}
|
￥{{item.price}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="" style="display: flex;margin-top: 20rpx;position: relative;">
|
<view class="" style="display: flex;justify-content: space-between;">
|
||||||
<view style="translateX:-100rpx;">
|
<view>
|
||||||
{{item.unit_name}}
|
{{item.unit_name}}
|
||||||
</view>
|
</view>
|
||||||
<view style="position: absolute;right: -440rpx;font-size: 32rpx;">
|
<view style="font-size: 32rpx;">
|
||||||
x{{item.cart_num}}
|
x{{item.cart_num}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -267,7 +267,7 @@
|
||||||
order_id: e.id,
|
order_id: e.id,
|
||||||
address_id: e.address_id,
|
address_id: e.address_id,
|
||||||
mer_id: e.merchant,
|
mer_id: e.merchant,
|
||||||
pay_type: 7
|
pay_type: e.pay_type
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
|
if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
|
||||||
uni.requestPayment({
|
uni.requestPayment({
|
||||||
|
|
@ -291,7 +291,7 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
uni.$u.toast('网络错误')
|
uni.$u.toast(err.msg || '网络错误')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="">
|
<view class="">
|
||||||
<!-- <view class="m-card row">
|
|
||||||
<up-cell-group>
|
|
||||||
<up-cell title="请添加自提点" :isLink="true" :border="false" @click="shopListShow=true"></up-cell>
|
|
||||||
</up-cell-group>
|
|
||||||
</view> -->
|
|
||||||
<!-- <view class="m-card m-address">
|
|
||||||
<view class="address-info">
|
|
||||||
<view class="top" style="align-items: flex-start;">
|
|
||||||
<view style="color: #333;display: flex;align-items: center;">
|
|
||||||
<up-icon name="map"></up-icon>
|
|
||||||
<text style="margin: 0 10rpx;">自提点</text>
|
|
||||||
</view>
|
|
||||||
<view v-if="shopInfo.mer_id">
|
|
||||||
<view>
|
|
||||||
{{shopInfo.mer_name}}
|
|
||||||
<text v-if="shopInfo.recommend"
|
|
||||||
style="font-size: 20rpx;color: #fff;background-color: #20b128;padding: 2rpx 5rpx;padding: 1rpx 4rpx;">推荐</text>
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
<view v-if="shopInfo.service_phone" @click="onCall(shopInfo.service_phone)">
|
|
||||||
<text style="margin-right: 10rpx;">{{shopInfo.mer_real_name}}</text>
|
|
||||||
<text>{{shopInfo.service_phone}}</text>
|
|
||||||
</view>
|
|
||||||
<text v-if="shopInfo.distance"
|
|
||||||
style="color: #20b128;font-size: 20rpx;border: 1px solid #20b128;border-radius: 4rpx;">{{shopInfo.distance}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="address-btn">
|
|
||||||
<view style="width: 80px;"><up-button @click="shopListShow=true" size="small" shape="circle"
|
|
||||||
color="#f6f6f6" :customStyle="{color:'#666666'}">修改</up-button></view>
|
|
||||||
</view>
|
|
||||||
</view> -->
|
|
||||||
<!-- <view v-if="!addressInfo.address_id" class="m-card row">
|
|
||||||
<up-cell-group>
|
|
||||||
<up-cell title="我的地址" :isLink="true" :border="false" @click="openAddress()"></up-cell>
|
|
||||||
</up-cell-group>
|
|
||||||
</view> -->
|
|
||||||
<view class="m-card m-address">
|
<view class="m-card m-address">
|
||||||
<view class="address-info" @click="showAddress = true" >
|
{{orderInfo.shipping_type}}
|
||||||
|
<view class="address-info" @click="showAddress = true" v-if='orderInfo.shipping_type==1'>
|
||||||
<view class="top">
|
<view class="top">
|
||||||
<up-icon name="account"></up-icon>
|
<up-icon name="account"></up-icon>
|
||||||
<view class="t-name">{{addressInfo.real_name}}</view>
|
<view class="t-name">{{addressInfo.real_name}}</view>
|
||||||
|
|
@ -50,6 +12,14 @@
|
||||||
{{addressInfo.detail}}
|
{{addressInfo.detail}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="address-info" v-else>
|
||||||
|
<view class="top">
|
||||||
|
{{STORE_INFO.name}}
|
||||||
|
</view>
|
||||||
|
<view class="bottom u-line-2">
|
||||||
|
{{STORE_INFO.detailed_address}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<view class="address-btn item-center">
|
<view class="address-btn item-center">
|
||||||
<view class='ship-type' style="">
|
<view class='ship-type' style="">
|
||||||
<view class="ship-type-item" :class='{actShipItem:orderInfo.shipping_type==2 }'
|
<view class="ship-type-item" :class='{actShipItem:orderInfo.shipping_type==2 }'
|
||||||
|
|
@ -127,16 +97,12 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="m-card order-remark">
|
<!-- <view class="m-card order-remark">
|
||||||
<view class="head-title">
|
<view class="head-title">
|
||||||
<text>预约时间</text>
|
<text>预约时间</text>
|
||||||
</view>
|
</view>
|
||||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="reservation_time" />
|
<uni-datetime-picker type="date" :clear-icon="false" v-model="reservation_time" />
|
||||||
<!-- <up-datetime-picker hasInput :show="show" v-model="value1" mode="date"></up-datetime-picker> -->
|
</view> -->
|
||||||
|
|
||||||
<!-- <up-textarea style="background-color: #F6F6F6;" v-model="formData.remark" placeholder="暂无备注内容"
|
|
||||||
:height="40"></up-textarea> -->
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="m-card order-remark">
|
<view class="m-card order-remark">
|
||||||
<view class="head-title">
|
<view class="head-title">
|
||||||
|
|
@ -347,7 +313,7 @@
|
||||||
// uni.$u.toast('请先选择提货点');
|
// uni.$u.toast('请先选择提货点');
|
||||||
// return shopListShow.value = true;
|
// return shopListShow.value = true;
|
||||||
// }
|
// }
|
||||||
if (!isAddress.value) return toastAddressShow.value = true;
|
if (!isAddress.value && orderInfo.value.shipping_type == 1) return toastAddressShow.value = true;
|
||||||
createOrder();
|
createOrder();
|
||||||
}
|
}
|
||||||
// 订单相关
|
// 订单相关
|
||||||
|
|
@ -360,6 +326,9 @@
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
cartList.value = res.data.cart_list;
|
cartList.value = res.data.cart_list;
|
||||||
orderInfo.value = res.data.order;
|
orderInfo.value = res.data.order;
|
||||||
|
if (orderInfo.value.default_delivery == 0) {
|
||||||
|
orderInfo.value.shipping_type = 1
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -428,7 +397,7 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
uni.$u.toast('网络错误')
|
uni.$u.toast(err.msg || '网络错误')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
<a href="https://meet-ui.com" target="_blank">
|
||||||
|
<h1 align="center">文档地址</h1>
|
||||||
|
</a>
|
||||||
|
<h1 align="center">https://meet-ui.com/#/</h1>
|
||||||
|
<p align="center">为了能够第一时间解决问题，为了不影响各位在项目中使用特此提供微信群交流</p>
|
||||||
|
<center>
|
||||||
|
<img src="https://img.lovewmf.com/2022-10-19.png"/>
|
||||||
|
<img src="https://img.lovewmf.com/2022-05-10.png"/>
|
||||||
|
</center>
|
||||||
|
|
||||||
|
# 温馨提示
|
||||||
|
|
||||||
|
如果使用cli创建的应用请在`vue.config.js`里面添加如下配置
|
||||||
|
```
|
||||||
|
module.exports = {
|
||||||
|
transpileDependencies: [
|
||||||
|
/[/\\]node_modules[/\\](.+?)?@uni-ui(.*)[/\\]code-plugs/,
|
||||||
|
/[/\\]node_modules[/\\](.+?)?@uni-ui(.*)[/\\]code-ui/
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
# 微信小程序特别说明
|
||||||
|
|
||||||
|
如果在弹窗里面使用，并且弹窗有动画 当弹窗显示的时候二维码会发生偏移或抖动
|
||||||
|
因为微信小程序的canvas在真机预览渲染的是原生组件并不是 h5的canavas 所以在开发工具里面没问题但是真机会有问题
|
||||||
|
|
||||||
|
解决方案：
|
||||||
|
|
||||||
|
1. 如果是使用uView组件的弹窗 请关闭动画
|
||||||
|
2. 如果是使用uni-popup组件 关闭动画无效 因为uni的弹窗动画关闭 其实是动画时长为0并且是包含在uni-transition详情请查看uni-popup代码
|
||||||
|
|
||||||
|
## 如果是使用uni_modules而非Npm
|
||||||
|
|
||||||
|
在`pages.json`里面配置如下
|
||||||
|
|
||||||
|
```js
|
||||||
|
"easycom": {
|
||||||
|
"^w-(.*)": "@/uni_modules/wmf-code/components/w-$1/w-$1.vue"//二维码条形码的配置 如果是uni_modules
|
||||||
|
},
|
||||||
|
"pages": [
|
||||||
|
//...
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
## 如果是使用npm而非uni_modules
|
||||||
|
|
||||||
|
在`pages.json`里面配置如下
|
||||||
|
|
||||||
|
```js
|
||||||
|
"easycom": {
|
||||||
|
"^w-(.*)": "@uni-ui/code-ui/components/w-$1/index.vue"//二维码条形码的配置 如果是npm方式使用
|
||||||
|
},
|
||||||
|
"pages": [
|
||||||
|
//...
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
## 条形码支持添加文字
|
||||||
|
|
||||||
|
<img src="https://img.lovewmf.com/WeChat315bd9b33217fabb1beaaa0d65421bee.png" style="margin-bottom: 10px;" />
|
||||||
|
<img src="https://img.lovewmf.com/WeChat9e319e9cd08e96369c09099f2863bff5.png" style="margin-bottom: 10px;" />
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<figure>
|
||||||
|
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07d4381cff624fc79ab28cdd1bf3cc6a~tplv-k3u1fbpfcp-watermark.image" style="margin-bottom: 10px;" />
|
||||||
|
<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71d7c20e8c91495c81d245ccfc83d7e7~tplv-k3u1fbpfcp-watermark.image" style="margin-bottom: 10px;" />
|
||||||
|
</figure>
|
||||||
|
</center>
|
||||||
|
|
||||||
|
#
|
||||||
|
<center>
|
||||||
|
<figure>
|
||||||
|
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfe9eb88cea44007b2627bb640343dcc~tplv-k3u1fbpfcp-watermark.image" style="margin-bottom: 10px;" />
|
||||||
|
<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b625254802404a9b84bd699e67b03db4~tplv-k3u1fbpfcp-watermark.image" style="margin-bottom: 10px;" />
|
||||||
|
</figure>
|
||||||
|
</center>
|
||||||
|
|
||||||
|
#
|
||||||
|
<center>
|
||||||
|
<figure>
|
||||||
|
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f84328d92b104edbad4c34a8665b4c72~tplv-k3u1fbpfcp-watermark.image" style="margin-bottom: 10px;" />
|
||||||
|
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1548ccd6c944bbe90ef288817077b8c~tplv-k3u1fbpfcp-watermark.image" style="margin-bottom: 10px;" />
|
||||||
|
</figure>
|
||||||
|
</center>
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
## 1.6.2（2022-10-24）
|
||||||
|
* 修复已知问题
|
||||||
|
## 1.6.1（2022-10-19）
|
||||||
|
* 支付宝小程序适配问题
|
||||||
|
* 修改文档
|
||||||
|
## 1.6.0（2022-07-27）
|
||||||
|
* 修改条形码bug
|
||||||
|
## 1.5.9（2022-07-26）
|
||||||
|
* 修复条形码保存图片部分黑底问题
|
||||||
|
## 1.5.8（2022-07-26）
|
||||||
|
* 修复支付宝小程序图片保存缺失问题
|
||||||
|
## 1.5.7（2022-07-09）
|
||||||
|
* 修复条形码保存缺失问题
|
||||||
|
## 1.5.6（2022-07-01）
|
||||||
|
修改引入错误
|
||||||
|
## 1.5.5（2022-07-01）
|
||||||
|
* 修复vue3无法通过ref获取保存图片方法
|
||||||
|
## 1.5.4（2022-06-01）
|
||||||
|
* 条形码支持添加文字
|
||||||
|
## 1.5.3（2022-05-31）
|
||||||
|
* 修复二维码有时候无法识别问题
|
||||||
|
* 建议使用npm方式
|
||||||
|
## 1.5.2（2022-05-31）
|
||||||
|
修改条形码垂直方向生成图片 参数互换
|
||||||
|
## 1.5.1（2022-05-31）
|
||||||
|
条形码增加垂直方向 默认水平方向
|
||||||
|
## 1.5.0（2022-05-30）
|
||||||
|
修改uni_modules引入错误
|
||||||
|
## 1.4.9（2022-05-25）
|
||||||
|
支持vue3
|
||||||
|
## 1.4.8（2021-12-06）
|
||||||
|
* 百度小程序不支持canvas的arcTo方法 如果在百度小程序中不支持的全部默认值
|
||||||
|
* 小程序平台绘制文字不支持渐变 取color数组第一个
|
||||||
|
## 1.4.7（2021-12-05）
|
||||||
|
* 修复已知问题
|
||||||
|
## 1.4.5（2021-12-05）
|
||||||
|
* 修复已知问题
|
||||||
|
## 1.4.4（2021-11-30）
|
||||||
|
* level默认值修改为2
|
||||||
|
## 1.4.3（2021-11-30）
|
||||||
|
* 修复引用js_sdk引用路径
|
||||||
|
## 1.4.2（2021-11-29）
|
||||||
|
* 修复设置画布大小时没有带单位px导致显示不全
|
||||||
|
## 1.4.1（2021-11-29）
|
||||||
|
1. 修复在高分辨率屏幕上支付宝小程序显示模糊问题
|
||||||
|
2. 修复保存相册图片模糊问题
|
||||||
|
## 1.4.0（2021-11-23）
|
||||||
|
1. 使用TS重构
|
||||||
|
2. 新增二维码文字绘制
|
||||||
|
3. 新增二维码padding
|
||||||
|
4. 新增二维码中间图片圆角 圆形
|
||||||
|
5. 新增长按事件
|
||||||
|
6. 二维码边框支持透明
|
||||||
|
7. 颜色最多支持10中颜色渐变
|
||||||
|
## 1.3.7（2021-11-08）
|
||||||
|
修改引入
|
||||||
|
## 1.3.6（2021-11-02）
|
||||||
|
修改引用路径
|
||||||
|
## 1.3.5（2021-10-19）
|
||||||
|
canvas 增加 type="2d"
|
||||||
|
## 1.3.4（2021-10-14）
|
||||||
|
1. 修改百度小程序修改参数无法重新渲染问题
|
||||||
|
2. 修改纯中文无法识别问题
|
||||||
|
## 1.3.3（2021-09-04）
|
||||||
|
修改uni_module引用路径
|
||||||
|
## 1.3.2（2021-09-03）
|
||||||
|
* 【重要】多个条形码或者二维码同时渲染
|
||||||
|
* 增加示例
|
||||||
|
## 1.3.1（2021-08-31）
|
||||||
|
uni_modules支持组件方式
|
||||||
|
## 1.3.0（2021-08-31）
|
||||||
|
支持纯文字以及文字数字 字母的混合
|
||||||
|
## 1.2.9（2021-08-30）
|
||||||
|
新增二维码创建成功回调方法中返回生成的二维码图片
|
||||||
|
## 1.2.8（2021-08-20）
|
||||||
|
支持vue3
|
||||||
|
## 1.2.7（2021-08-20）
|
||||||
|
修改版本号
|
||||||
|
## 1.2.6（2021-06-28）
|
||||||
|
1. 修改自定义组件时微信小程序无法显示二维码的问题
|
||||||
|
2. 统一二维码的大小单位为rpx
|
||||||
|
## 1.2.5（2021-06-25）
|
||||||
|
二维码logo大小增加默认值：30
|
||||||
|
## 1.2.4（2021-06-24）
|
||||||
|
1. nvue 二维码支持渐变色
|
||||||
|
## 1.2.3（2021-06-23）
|
||||||
|
1. 修改app不支持颜色渐变问题
|
||||||
|
2. 修改判断方式Object.prototype.toString.call()
|
||||||
|
## 1.2.2（2021-06-23）
|
||||||
|
修改插件描述
|
||||||
|
## 1.2.1（2021-06-23）
|
||||||
|
修改return 错误
|
||||||
|
## 1.1.2（2021-06-23）
|
||||||
|
修改文档
|
||||||
|
## 1.1.1（2021-06-23）
|
||||||
|
二维码支持渐变色
|
||||||
|
## 1.0.8（2021-06-22）
|
||||||
|
兼容nvue
|
||||||
|
## 1.0.7（2021-06-09）
|
||||||
|
1. 修改保存二维码图片的方法名以及传参方式
|
||||||
|
2. 修改微信小程序保存二维码时显示为黑色
|
||||||
|
3. 二维码增加参数
|
||||||
|
## 1.0.6（2021-06-04）
|
||||||
|
修改 description说明
|
||||||
|
## 1.0.5（2021-06-04）
|
||||||
|
修改文档展示名称
|
||||||
|
## 1.0.4（2021-06-04）
|
||||||
|
修改符合uni_modules规范
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
// 判断arr是否为一个数组，返回一个bool值
|
||||||
|
function isArray(arr) {
|
||||||
|
return Object.prototype.toString.call(arr) === '[object Array]';
|
||||||
|
}
|
||||||
|
// 深度克隆
|
||||||
|
function deepClone(obj) {
|
||||||
|
// 对常见的“非”值，直接返回原来值
|
||||||
|
if ([null, undefined, NaN, false].includes(obj)) return obj;
|
||||||
|
if (typeof obj !== "object" && typeof obj !== 'function') {
|
||||||
|
//原始类型直接返回
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
var o = isArray(obj) ? [] : {};
|
||||||
|
for (let i in obj) {
|
||||||
|
if (obj.hasOwnProperty(i)) {
|
||||||
|
o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return o;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getUUid(len = 32, firstU = true, radix = null) {
|
||||||
|
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
|
||||||
|
let uuid = [];
|
||||||
|
radix = radix || chars.length;
|
||||||
|
|
||||||
|
if (len) {
|
||||||
|
// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
|
||||||
|
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
|
||||||
|
} else {
|
||||||
|
let r;
|
||||||
|
// rfc4122标准要求返回的uuid中,某些位为固定的字符
|
||||||
|
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
|
||||||
|
uuid[14] = '4';
|
||||||
|
|
||||||
|
for (let i = 0; i < 36; i++) {
|
||||||
|
if (!uuid[i]) {
|
||||||
|
r = 0 | Math.random() * 16;
|
||||||
|
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
|
||||||
|
if (firstU) {
|
||||||
|
uuid.shift();
|
||||||
|
return 'u' + uuid.join('');
|
||||||
|
} else {
|
||||||
|
return uuid.join('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function platform () {
|
||||||
|
let val = null;
|
||||||
|
// #ifdef VUE3
|
||||||
|
val = 'VUE3'
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
val = 'APP-PLUS'
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS-NVUE || APP-NVUE
|
||||||
|
val = 'NVUE'
|
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
val = 'H5'
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
val = 'MP-WEIXIN'
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
val = 'MP-ALIPAY'
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-BAIDU
|
||||||
|
val = 'MP-BAIDU'
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
val = 'MP-TOUTIAO'
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-LARK
|
||||||
|
val = 'MP-LARK'
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
val = 'MP-QQ'
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-KUAISHOU
|
||||||
|
val = 'MP-KUAISHOU'
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-360
|
||||||
|
val = 'MP-360'
|
||||||
|
// #endif
|
||||||
|
// #ifdef QUICKAPP-WEBVIEW
|
||||||
|
val = 'QUICKAPP-WEBVIEW'
|
||||||
|
// #endif
|
||||||
|
// #ifdef QUICKAPP-WEBVIEW-UNION
|
||||||
|
val = 'QUICKAPP-WEBVIEW-UNION'
|
||||||
|
// #endif
|
||||||
|
// #ifdef QUICKAPP-WEBVIEW-HUAWEI
|
||||||
|
val = 'QUICKAPP-WEBVIEW-HUAWEI'
|
||||||
|
// #endif
|
||||||
|
return val;
|
||||||
|
|
||||||
|
}
|
||||||
|
export {
|
||||||
|
deepClone,
|
||||||
|
getUUid,
|
||||||
|
platform
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,204 @@
|
||||||
|
<template>
|
||||||
|
<view @longtap.stop="longtap">
|
||||||
|
<canvas
|
||||||
|
:width="info.orient == 'vertical' ? info.destHeight : info.destWidth "
|
||||||
|
:height="info.orient == 'vertical' ? info.destWidth : info.destHeight"
|
||||||
|
:canvas-id="item.id"
|
||||||
|
:id="item.id"
|
||||||
|
:style="{width:info.orient == 'vertical' ? info.height : info.width,height: info.orient == 'vertical' ? info.width : info.height}"
|
||||||
|
v-for="item in info.listCode"
|
||||||
|
:key="item.id"
|
||||||
|
@error="handleError"></canvas>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<!-- #ifdef VUE3 -->
|
||||||
|
<script setup name="WBarcode">
|
||||||
|
import {
|
||||||
|
reactive,
|
||||||
|
watch,
|
||||||
|
onMounted,
|
||||||
|
nextTick,
|
||||||
|
getCurrentInstance,
|
||||||
|
defineExpose
|
||||||
|
} from 'vue';
|
||||||
|
import {
|
||||||
|
BarCode,
|
||||||
|
GetImg,
|
||||||
|
GetPixelRatio,
|
||||||
|
GetPx ,
|
||||||
|
} from '../../js_sdk/index.js';
|
||||||
|
import {
|
||||||
|
getUUid,
|
||||||
|
deepClone,
|
||||||
|
platform,
|
||||||
|
} from '../../common/helper.js'
|
||||||
|
//定义props
|
||||||
|
const props = defineProps({
|
||||||
|
options:{
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () =>{
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const emits = defineEmits(['generate','press','error'])
|
||||||
|
const opt = props.options;
|
||||||
|
const that = getCurrentInstance();
|
||||||
|
const HSize = opt.text ? opt.text.size || 40 + opt.text.padding || 20 : 0;
|
||||||
|
let info = reactive({
|
||||||
|
id: getUUid(),
|
||||||
|
destWidth: GetPixelRatio() * GetPx(opt.width) + 'px',
|
||||||
|
destHeight: GetPixelRatio() * GetPx(opt.height + HSize) + 'px',
|
||||||
|
width: GetPx(opt.width) + 'px',
|
||||||
|
height: GetPx(opt.height + HSize) + 'px',
|
||||||
|
orient: opt.orient || 'horizontal',
|
||||||
|
listCode: []
|
||||||
|
})
|
||||||
|
onMounted(()=>{
|
||||||
|
SpecialTreatment(opt);
|
||||||
|
nextTick(()=>{
|
||||||
|
generateCode(opt)
|
||||||
|
})
|
||||||
|
});
|
||||||
|
watch(()=>props.options,(val)=>{
|
||||||
|
SpecialTreatment(val);
|
||||||
|
const HSize = val.text ? val.text.size || 40 + val.text.padding || 20 : 0;
|
||||||
|
info.destWidth= GetPixelRatio() * GetPx(val.width) + 'px',
|
||||||
|
info.destHeight= GetPixelRatio() * GetPx(val.height + HSize) + 'px',
|
||||||
|
info.orient = val.orient || 'horizontal',
|
||||||
|
info.width= GetPx(val.width) + 'px',
|
||||||
|
info.height= GetPx(val.height + HSize) + 'px',
|
||||||
|
setTimeout(()=>{
|
||||||
|
generateCode(val)
|
||||||
|
},100)
|
||||||
|
},{ deep: true })
|
||||||
|
const generateCode = (val)=> {
|
||||||
|
try{
|
||||||
|
const parameter = {...val,orient: info.orient,source: platform(),id: info.id,ctx: that};
|
||||||
|
BarCode(parameter,(res)=>{
|
||||||
|
emits('generate',res)
|
||||||
|
})
|
||||||
|
}catch(err){console.warn(err)}
|
||||||
|
}
|
||||||
|
const GetCodeImg = async ()=> {
|
||||||
|
try{
|
||||||
|
return await GetImg({id: info.id,source: platform(),width: opt.orient == 'vertical' ? opt.height : opt.width,height: opt.orient == 'vertical' ? opt.width : opt.height,ctx: that});
|
||||||
|
}catch(e){console.warn(e)}
|
||||||
|
};
|
||||||
|
const SpecialTreatment = (val) => {//渲染多个canvas特殊处理
|
||||||
|
let obj = deepClone(val);
|
||||||
|
obj.id = info.id;
|
||||||
|
info.listCode = [obj];
|
||||||
|
};
|
||||||
|
// 长按事件
|
||||||
|
const longtap = (e)=>{
|
||||||
|
emits('press',e)
|
||||||
|
}
|
||||||
|
// canvas创建错误 触发
|
||||||
|
const handleError = (e)=>{
|
||||||
|
emits('error',e.detail)
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
GetCodeImg
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- #ifndef VUE3 -->
|
||||||
|
<script>
|
||||||
|
import { BarCode, GetImg,GetPixelRatio,GetPx } from '../../js_sdk/index.js';
|
||||||
|
import { getUUid, deepClone,platform } from '../../common/helper.js'
|
||||||
|
export default {
|
||||||
|
name: 'WBarcode',
|
||||||
|
props:{
|
||||||
|
options:{
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () =>{
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
info:{
|
||||||
|
destHeight: 0,
|
||||||
|
destWidth: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
listCode: [],
|
||||||
|
orient: 'horizontal'
|
||||||
|
},
|
||||||
|
id: getUUid()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const HSize = this.options.text ? ((this.options.text.size || 40) + ( this.options.text.padding || 20)) : 0;
|
||||||
|
this.info.height = GetPx(this.options.height + HSize) + 'px';
|
||||||
|
this.info.orient = this.options.orient || 'horizontal';
|
||||||
|
this.info.width = GetPx(this.options.width) + 'px';
|
||||||
|
this.info.destHeight = GetPx(this.options.height + HSize) * GetPixelRatio() + 'px';
|
||||||
|
this.info.destWidth = GetPx(this.options.width) * GetPixelRatio() + 'px';
|
||||||
|
this.SpecialTreatment(this.options)
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.generateCode();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options:{
|
||||||
|
deep: true,
|
||||||
|
handler (val) {
|
||||||
|
const HSize = val.text ? val.text.size || 40 + val.text.padding || 20 : 0;
|
||||||
|
this.info.height = GetPx(val.height + HSize) + 'px';
|
||||||
|
this.info.width = GetPx(val.width) + 'px';
|
||||||
|
this.info.destHeight = GetPx(val.height + HSize) * GetPixelRatio() + 'px';
|
||||||
|
this.info.destWidth = GetPx(val.width) * GetPixelRatio() + 'px';
|
||||||
|
this.info.orient = val.orient || 'horizontal'
|
||||||
|
this.SpecialTreatment(val)
|
||||||
|
setTimeout(()=>{// h5平台动态改变canvas大小
|
||||||
|
this.generateCode();
|
||||||
|
},100)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
longtap (e){
|
||||||
|
this.$emit('press',e)
|
||||||
|
},
|
||||||
|
handleError (e) {//当发生错误时触发 error 事件，字节跳动小程序与飞书小程序不支持
|
||||||
|
this.$emit('error',e.detail)
|
||||||
|
},
|
||||||
|
SpecialTreatment (val) {//微信小程序渲染多个canvas特殊处理
|
||||||
|
let obj = deepClone(val);
|
||||||
|
obj.id = this.id;
|
||||||
|
this.info.listCode = [obj]
|
||||||
|
},
|
||||||
|
generateCode () {
|
||||||
|
try{
|
||||||
|
const parameter = {...this.options,orient: this.info.orient,source: platform(),id: this.id,ctx: this};
|
||||||
|
console.log(parameter)
|
||||||
|
BarCode(parameter,(res)=>{
|
||||||
|
this.$emit('generate',res)
|
||||||
|
})
|
||||||
|
}catch(err){console.log(err)}
|
||||||
|
},
|
||||||
|
async GetCodeImg (){
|
||||||
|
try{
|
||||||
|
const pars = {
|
||||||
|
id: this.id,
|
||||||
|
source: platform(),
|
||||||
|
width: this.options.orient == 'vertical' ? this.info.height : this.info.width,
|
||||||
|
height: this.options.orient == 'vertical' ? this.info.width : this.info.height,
|
||||||
|
ctx: this,
|
||||||
|
}
|
||||||
|
return await GetImg(pars);
|
||||||
|
}catch(e){console.warn(e)}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
<template>
|
||||||
|
<view @longtap.stop="longtap">
|
||||||
|
<canvas
|
||||||
|
:width="info.destWidth"
|
||||||
|
:height="info.destHeight"
|
||||||
|
:canvas-id="item.id"
|
||||||
|
:id="item.id"
|
||||||
|
:style="{width:info.width,height: info.height}"
|
||||||
|
v-for="item in info.listCode"
|
||||||
|
:key="item.id"
|
||||||
|
@error="handleError"></canvas>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<!-- #ifdef VUE3 -->
|
||||||
|
<script setup name="WQrcode">
|
||||||
|
import {reactive, watch,onMounted,nextTick,getCurrentInstance ,defineExpose } from 'vue';
|
||||||
|
import { QRCode, GetImg,GetPixelRatio,GetPx } from '@/uni_modules/wmf-code/js_sdk/index.js';
|
||||||
|
import { getUUid, deepClone,platform } from '../../common/helper.js'
|
||||||
|
//定义props
|
||||||
|
const props = defineProps({
|
||||||
|
options:{
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () =>{
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const emits = defineEmits(['generate','press','error'])
|
||||||
|
const opt = props.options;
|
||||||
|
const that = getCurrentInstance();
|
||||||
|
const SIZE = GetPx(opt.size);
|
||||||
|
let info = reactive({
|
||||||
|
destHeight: SIZE * GetPixelRatio() + 'px',
|
||||||
|
destWidth: SIZE * GetPixelRatio() + 'px',
|
||||||
|
width: SIZE + 'px',
|
||||||
|
height: SIZE + 'px',
|
||||||
|
listCode:[],
|
||||||
|
id: getUUid(),
|
||||||
|
})
|
||||||
|
onMounted(()=>{
|
||||||
|
SpecialTreatment(opt);
|
||||||
|
nextTick(()=>{
|
||||||
|
generateCode(opt)
|
||||||
|
})
|
||||||
|
});
|
||||||
|
watch(()=>props.options,(val)=>{
|
||||||
|
SpecialTreatment(val);
|
||||||
|
const SIZE_Dynamic = GetPx(val.size);
|
||||||
|
info.destWidth= GetPixelRatio() * SIZE_Dynamic + 'px',
|
||||||
|
info.destHeight= GetPixelRatio() * SIZE_Dynamic + 'px',
|
||||||
|
info.width= SIZE_Dynamic + 'px',
|
||||||
|
info.height= SIZE_Dynamic + 'px',
|
||||||
|
setTimeout(()=>{
|
||||||
|
generateCode(val)
|
||||||
|
},50)
|
||||||
|
},{ deep: true })
|
||||||
|
const SpecialTreatment =(val)=> {//渲染多个canvas特殊处理
|
||||||
|
let obj = deepClone(val);
|
||||||
|
obj.id = info.id;
|
||||||
|
info.listCode = [obj]
|
||||||
|
};
|
||||||
|
const generateCode = (val)=>{
|
||||||
|
try{
|
||||||
|
const parameter = {...val,source: platform(),id: info.id,ctx: that};
|
||||||
|
QRCode(parameter,(res)=>{
|
||||||
|
emits('generate',res)
|
||||||
|
})
|
||||||
|
}catch(err){console.warn(err)}
|
||||||
|
};
|
||||||
|
const GetCodeImg = async ()=> {
|
||||||
|
try{
|
||||||
|
return await GetImg({id: info.id,source: platform(),width: opt.width,height: opt.height,ctx: that});
|
||||||
|
}catch(e){console.warn(e)}
|
||||||
|
};
|
||||||
|
// 长按事件
|
||||||
|
const longtap = (e)=>{
|
||||||
|
emits('press',e)
|
||||||
|
}
|
||||||
|
// canvas创建错误 触发
|
||||||
|
const handleError = (e)=>{
|
||||||
|
emits('error',e.detail)
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
GetCodeImg
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- #ifndef VUE3 -->
|
||||||
|
<script>
|
||||||
|
import { QRCode, GetImg,GetPixelRatio,GetPx } from '@/uni_modules/wmf-code/js_sdk/index.js';
|
||||||
|
import { getUUid, deepClone,platform } from '../../common/helper.js'
|
||||||
|
export default {
|
||||||
|
name: 'WQrcode',
|
||||||
|
props:{
|
||||||
|
options:{
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () =>{
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
info:{
|
||||||
|
destHeight: 0,
|
||||||
|
destWidth: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
listCode:[],
|
||||||
|
},
|
||||||
|
destHeight: 0,
|
||||||
|
destWidth: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
listCode:[],
|
||||||
|
id: getUUid(),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.info.height = this.info.width = GetPx(this.options.size) + 'px';
|
||||||
|
this.info.destHeight = this.info.destWidth = GetPx(this.options.size) * GetPixelRatio() + 'px';
|
||||||
|
this.SpecialTreatment(this.options)
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.generateCode();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options:{
|
||||||
|
deep: true,
|
||||||
|
handler (val) {
|
||||||
|
this.info.height = this.info.width = GetPx(val.size) + 'px';
|
||||||
|
this.info.destHeight = this.info.destWidth = GetPx(val.size) * GetPixelRatio() + 'px';
|
||||||
|
this.SpecialTreatment(val)
|
||||||
|
setTimeout(()=>{// h5平台动态改变canvas大小
|
||||||
|
this.generateCode();
|
||||||
|
},50)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
longtap (e){// 长按事件
|
||||||
|
this.$emit('press',e);
|
||||||
|
},
|
||||||
|
handleError (e) {//当发生错误时触发 error 事件，字节跳动小程序与飞书小程序不支持
|
||||||
|
this.$emit('error',e.detail)
|
||||||
|
},
|
||||||
|
SpecialTreatment (val) {//微信小程序渲染多个canvas特殊处理
|
||||||
|
let obj = deepClone(val);
|
||||||
|
obj.id = this.id;
|
||||||
|
this.info.listCode = [obj]
|
||||||
|
},
|
||||||
|
// 生成二维码
|
||||||
|
generateCode () {
|
||||||
|
try{
|
||||||
|
const parameter = {...this.options,source: platform(),id: this.id,ctx: this};
|
||||||
|
QRCode(parameter,(res)=>{
|
||||||
|
this.$emit('generate',res)
|
||||||
|
})
|
||||||
|
}catch(err){console.warn(err)}
|
||||||
|
},
|
||||||
|
// 获取二维码图片
|
||||||
|
async GetCodeImg (){
|
||||||
|
try{
|
||||||
|
return await GetImg({id: this.id,source: platform(),width: this.options.size,height: this.options.size,ctx: this});
|
||||||
|
}catch(e){console.warn(e)}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!-- #endif -->
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,77 @@
|
||||||
|
{
|
||||||
|
"id": "wmf-code",
|
||||||
|
"displayName": "二维码 条形码生成 支持链接 支持nvue 支持纯文字",
|
||||||
|
"version": "1.6.2",
|
||||||
|
"description": "二维码 条形码生成，支持渐变色边框 保存二维码图片,支持链接 ,支持nvue 支持纯文字",
|
||||||
|
"keywords": [
|
||||||
|
"二维码",
|
||||||
|
"条形码"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/lovewmf/uni-code",
|
||||||
|
"engines": {
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无 ",
|
||||||
|
"permissions": "无 "
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@uni-ui/code-ui",
|
||||||
|
"type": "sdk-js"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue