123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- <template>
- <view class="content">
-
- <view class="step">
- <uni-steps active-color="#FF6A69" :options="[
- {title: '注册账号',url:'./getShop'},
- {title: '扫码授权',url:'./qrCode'},
- {title: '提交支付资质',url:'./addPay'},
- {title: '基础信息',url:'./basics'} ]" :active="1"></uni-steps>
- </view>
- <view style="height: 130rpx;"></view>
-
- <view class="hg72"></view>
- <view class="home-content">
- <view class="home-content-title flex-center">
- 微信授权二维码
- </view>
- <view class="home-content-code flex-center">
- <view class="">
- <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="qrcodeVal" :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>
- </view>
-
- <view class="bottom-bar" style="background: none;">
- <button @click="upCode">
- 下载二维码
- </button>
- </view>
-
- </view>
- </template>
- <script>
- // #ifdef MP-WEIXIN
- import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
- // #endif
- import tkiQrcode from "../components/tki-qrcode/tki-qrcode.vue"
- export default {
- components: {
- tkiQrcode,
- },
- data() {
- return { //二维码相关参数
- ifShow: true,
- val: '二维码', // 要生成的二维码值
- size: 350, // 二维码大小
- unit: 'upx', // 单位
- background: '#000000', // 背景色
- foreground: '#ffffff', // 前景色
- pdground: '#ffffff', // 角标色
- icon: '', // 二维码图标
- iconsize: 40, // 二维码图标大小
- lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
- onval: false, // val值变化时自动重新生成二维码
- loadMake: true, // 组件加载完成后自动生成二维码
- src: '', // 二维码生成后的图片地址或base64
- info: {},
- id: "",
- URL: getApp().globalData.URL,
- qrcodeVal: "",
- wxqr: 1,
- qrcodeImg:'',
- }
- },
-
- onLoad(e) {
- this.https();
- },
- methods: { //传入组件的方法
- qrR(e) {
- this.qrcodeImg=e;
- console.log(e, "ee")
- },
- https() {
- this.request({
- url: 'Wechatstore/index',
- data: {
- admin_id: uni.getStorageSync("admin_id"),
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === "200") {
- this.qrcodeVal = res.data;
- setTimeout(()=>{
- this.$refs.qrcode._makeCode()
- },50)
-
- }
- });
- },
-
- upCode(e) {
- // #ifdef H5
- uni.showModal({
- title: '提示',
- content: '请长按二维码图片进行保存',
- showCancel: false,
- confirmText: '好的',
- });
- // #endif
- // #ifdef MP-WEIXIN
- this.$refs.qrcode._saveCode()
-
- return
-
- var url = this.qrcodeImg;
- console.log(url, "url")
- saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
- //成功的逻辑
- console.log(res, "保存成功")
- uni.showToast({
- title: '保存成功',
- icon: 'none',
- mask: true,
- })
- }).catch((err) => {
- console.log(err, "保存失败")
- if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
- err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
- "saveImageToPhotosAlbum:fail authorize no response") {
- // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
- uni.showModal({
- title: '提示',
- content: '需要您设置授权保存相册',
- showCancel: false,
- success: modalSuccess => {
- uni.openSetting({
- success(settingdata) {
- console.log("settingdata", settingdata)
- if (settingdata.authSetting[
- 'scope.writePhotosAlbum']) {
- uni.showModal({
- title: '提示',
- content: '获取权限成功,再次点击图片即可保存',
- showCancel: false,
- })
- } else {
- uni.showModal({
- title: '提示',
- content: '获取权限失败,将无法保存到相册哦~',
- showCancel: false,
- })
- }
- },
- fail(failData) {
- console.log("failData", failData)
- },
- complete(finishData) {
- console.log("finishData", finishData)
- }
- })
- }
- })
- }
- // 失败后的逻辑
- })
- // #endif
- },
- }
- }
- </script>
- <style>
- page {
- background: #F5F7FA;
- }
- .hg72 {
- height: 72rpx;
- }
- .home-content {
- background: #FFFFFF;
- width: 670rpx;
- height: 843rpx;
- margin: 0 auto;
- position: relative;
- }
- .home-content-title {
- width: 100%;
- height: 154rpx;
- background: linear-gradient(180deg, #FF6A69, #FF6A69);
- border-radius: 16rpx 16rpx 0px 0px;
- font-size: 36rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- color: #ffffff;
- }
- .home-content-code {
- width: 100%;
- height: 689rpx;
- font-size: 32rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #464646;
- text-align: center;
- }
- .home-content-code image {
- width: 400rpx;
- height: 400rpx;
- margin-bottom: 64rpx;
- }
- .home-content-code-title {
- padding: 0 30rpx;
- color: red;
- }
- .code-btn {
- font-size: 32rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #3c8cff;
- margin-bottom: 35rpx;
- }
- .bottom-bar {
- position: fixed;
- /* bottom: 50rpx; */
- width: 100%;
- z-index: 1000;
- padding: 30rpx 0;
- }
- .bottom-bar button {
- text-align: center;
- width: 690rpx;
- height: 90rpx;
- background: linear-gradient(132deg, #FF6A69 0%, #FF6A69 100%);
- box-shadow: 0px 2rpx 12rpx #FF6A69;
- opacity: 1;
- border-radius: 10rpx;
- color: #fff;
- font-size: 32rpx;
- font-family: Source Han Sans CN, Source Han Sans CN-Medium;
- font-weight: 500;
- color: #ffffff;
- }
- </style>
|