xietaitai-shop-wx/packages/card/detail.vue

<template>
	<view class="cotainer">
		<view class="myswiper">
			<view class="cardtitle">卡面示例</view>
			<u-image src="https://cdn.uviewui.com/uview/swiper/1.jpg" height="300"></u-image>
		</view>
		<view class="scan">
			<view class="cardtitle">卡片信息</view>
			<view class="scan-form">
				<view class="scan-form-flex">
					<view class="scan-form-label">
						卡片名称
					</view>
					<view class="scan-form-input">
						红金款999
					</view>
				</view>
				<view class="scan-form-flex">
					<view class="scan-form-label">
						卡片有效期
					</view>
					<view class="scan-form-input">
						卡片至2025年11月31号有效
					</view>
				</view>
				<view class="scan-form-flex">
					<view class="scan-form-btn" @click="saveImg">
						点击保存图片
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		toast
	} from "@/common/util.js"
	export default {
		components: {},
		data() {
			return {
				form: {
					code: '',
					password: ''
				},

			}
		},
		onLoad() {
			console.log(wx.env.USER_DATA_PATH)
		},
		methods: {
			getScanCode() {
				uni.scanCode({
					onlyFromCamera: false,
					scanType: ['qrCode', 'barCode', 'dataMatrix'],
					success: res => {
						if (res.errMsg == 'scanCode:ok') {
							this.form.code = res.result
						} else {
							uni.showToast({
								title: '扫码失败',
								icon: "none",
								mask: true,
							})
						}
					},
					fail: err => {
						console.log(JSON.stringify(err))
					}

				})
			},
			saveImg() {
				let _this = this
				let fileName = new Date().valueOf()
				let filePath = wx.env.USER_DATA_PATH + '/' + fileName + '.jpg'
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: (res) => {
						uni.downloadFile({
							url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
							filePath:filePath,
							success(res) {
								console.log(res)
								uni.saveImageToPhotosAlbum({
									filePath: filePath,
									success: function() {
										toast('保存成功')
									},
									fail(res) {
										console.log("fail-saveImageToPhotosAlbum", res)
									}
								});
							},
							fail(res) {
								console.log("fail-downloadFile", res)
							}
						})

					},
					fail(res) {
						console.log("user", res)
						
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.cotainer {


		.cardtitle {
			text-align: center;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.myswiper {
			padding: 40rpx;
		}

		.scan {
			margin: 30rpx;
			margin-top: 0;

			&-form {
				display: flex;
				margin: 30rpx;
				flex-wrap: wrap;

				&-flex {
					display: flex;
					align-items: center;
					margin: 0 auto;
					width: 100%;
					margin-bottom: 20rpx;
				}

				&-label {
					// font-size: 32rpx;
					width: 220rpx;
					text-align: center;
					padding: 10rpx;
					border: 1px solid #ccc;
					background: #ddd;
				}

				&-input {
					border: 1px solid #ddd;
					padding: 0 20rpx;
					width: calc(100% - 220rpx);
					padding: 10rpx;
					border: 1px solid #ccc;
					text-align: center;
					border-left: none;

				}

				&-btn {
					background-color: #A4ADB3;
					color: #fff;
					border-radius: 10rpx;
					padding: 10rpx 30rpx;
					margin: 20rpx auto;

				}
			}
		}
	}
</style>