123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- <template>
- <view class="container">
- <block v-if="type==2">
- <image style="width: 80%;" :src="qrcode" mode="widthFix"></image>
-
- <view class="hg120">
-
- </view>
- <view class="btm-btn-block">
- <view class="content flex-row-between">
- <block>
- <view class="btn btn22" @click="dofile">下载二维码</view>
- <view class="btn btn11" @click="setup" data-index="index">修改</view>
- </block>
- </view>
- </view>
- </block>
- <block v-else>
-
- <view class="header_success">
- <image class="header_success_icon" src="../../static/images/success.png" mode=""></image>
- <view class="header_success-tip">
- 智能替换成功
- </view>
- </view>
-
- <view class="header_success_bg">
- <view class="flex-center header_success_title">
- <image src="../../static/images/line.png" mode=""></image>
- 替换图片
- <image src="../../static/images/line.png" mode=""></image>
- </view>
- <image style="width: 60%;" :src="qrcode" mode="widthFix"></image>
- <view class="flex-center" @click="dofile">
- <view class="btm-btn">
- <image class="dofile-icon" src="../../static/images/file.png" mode=""></image>下载图片
- </view>
- </view>
- </view>
- </block>
- </view>
- </template>
- <script>
- // #ifdef MP-WEIXIN
- import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
- // #endif
- export default {
- data() {
- return {
- qrcode: "",
- type: 1,
- info: "",
- card_num:"",
- URL: getApp().globalData.URL,
- }
- },
- onLoad(e) {
- console.log(e)
- this.type = e.type;
- if (e.type == 2) {
- this.card_num=e.card_num;
- this.edit_detail();
- }else{
- this.qrcode = uni.getStorageSync("qrcode");
- }
- },
- onShareAppMessage(e) {
- },
- methods: {
- edit_detail(e) {
- this.request({
- url: "picture/edit_detail",
- data: {
- card_num: this.card_num,
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- this.qrcode = res.data.re_url;
- }
- }).catch((res) => {
- });
- },
-
- setup(e) {
- uni.redirectTo({
- url: 'replace?card_num='+this.card_num,
- })
- },
- dofile(e) {
- // #ifdef H5
- uni.showModal({
- title: '提示',
- content: '请长按二维码图片进行保存',
- showCancel: false,
- confirmText: '好的',
- });
- // #endif
- // #ifdef MP-WEIXIN
- var url = this.qrcode;
- saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
- //成功的逻辑
- console.log(res, "保存成功")
- wx.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>
- .hg120{
- height: 120rpx;
- }
- .container {
- text-align: center;
- }
- .header_success {
- text-align: center;
- font-size: 30rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- color: #181818;
- }
- .header_success_icon {
- width: 144rpx;
- height: 144rpx;
- }
- .header_success-tip {
- padding: 20rpx 0 32rpx 0;
- }
- .header_success_bg {
- width: 670rpx;
- background: linear-gradient(180deg, #f4f8ff, #ffffff);
- border-radius: 16rpx 16rpx 0px 0px;
- margin: 0 auto;
- text-align: center;
- }
- .header_success_title {
- font-size: 30rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- color: #3488ff;
- padding: 40rpx 0;
- }
- .header_success_title image {
- width: 17rpx;
- height: 24rpx;
- margin: 0 15rpx;
- }
- .btm-btn {
- width: 670rpx;
- height: 98rpx;
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
- font-size: 32rpx;
- font-weight: 500;
- text-align: center;
- color: #fff;
- line-height: 98rpx;
- margin: 0 auto;
- margin-top: 100rpx;
- }
- .dofile-icon {
- width: 31rpx;
- height: 31rpx;
- }
- .btm-btn-block{
- position: fixed;
- bottom: 30rpx;
- width: 100%;
- }
- .btm-btn-block .content {
- padding: 0rpx 40rpx;
- }
- .btm-btn-block .content .btn {
- flex: none;
- width: 325rpx;
- height: 98rpx;
- border-radius: 8rpx;
- text-align: center;
- line-height: 98rpx;
- font-size: 32rpx;
- font-weight: 500;
- }
- .btm-btn-block .content .btn11 {
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
- color: #fff;
- }
- .btm-btn-block .content .btn22 {
- box-shadow: 0px 0px 8px 0px rgba(207, 219, 234, 0.4);
- color: #3387FF;
- background: #FFFFFF;
- }
- </style>
|