You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
179 lines
3.6 KiB
179 lines
3.6 KiB
<template>
|
|
<view class="changecontainer">
|
|
<view class="cardcontent">
|
|
<view class="myswiper">
|
|
<image src="../../static/cardimg1.jpg" mode="widthFix"></image>
|
|
<view class="cardtitle">卡片信息</view>
|
|
</view>
|
|
<view class="cardinfobox">
|
|
<view class="cardlist">
|
|
<view class="cardinfolist">
|
|
<view class="listitem">
|
|
<view>卡片名称</view>
|
|
<text>红金款999型蟹卡</text>
|
|
</view>
|
|
<view class="listitem">
|
|
<view>卡片有效期</view>
|
|
<text>卡片至2025年10月31日有效</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cardbtn" @click="saveImg">点击保存图片</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
toast
|
|
} from "@/common/util.js"
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log(wx.env.USER_DATA_PATH)
|
|
},
|
|
methods: {
|
|
|
|
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: '../../static/cardimg1.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" scoped>
|
|
.changecontainer{
|
|
width: 100%;
|
|
background-image: url(../../static/bg-change.jpg);
|
|
background-position: center top;
|
|
background-size: cover;
|
|
padding-top: 195rpx;
|
|
padding-bottom: 310rpx;
|
|
}
|
|
.cardcontent{
|
|
width: 87.33%;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
.myswiper{
|
|
padding: 55rpx 44rpx 45rpx;
|
|
}
|
|
.myswiper image{
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 10rpx;
|
|
}
|
|
.cardtitle{
|
|
margin-top: 54rpx;
|
|
font-size: 36rpx;
|
|
text-align: center;
|
|
color: #b98b44;
|
|
}
|
|
.cardinfobox{
|
|
position: relative;
|
|
border-top: 1rpx dashed #a4a5a4;
|
|
padding: 82rpx 25rpx;
|
|
}
|
|
.cardinfobox::before,.cardinfobox::after{
|
|
content: " ";
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
border-radius: 50%;
|
|
background: #4a4b4a;
|
|
top: -14rpx;
|
|
}
|
|
.cardinfobox::before{
|
|
left: -14rpx;
|
|
}
|
|
.cardinfobox::after{
|
|
right: -14rpx;
|
|
}
|
|
.cardlist{
|
|
border-radius: 10rpx;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
box-shadow: 0 5rpx 16rpx rgba(0,0,0,.32);
|
|
position: relative;
|
|
background-image: url(../../static/cardbg.jpg);
|
|
background-position: center top;
|
|
background-size: cover;
|
|
margin-bottom: 78rpx;
|
|
}
|
|
.cardinfolist{
|
|
padding: 16rpx 38rpx;
|
|
}
|
|
.cardinfolist .listitem{
|
|
display: flex;
|
|
border-bottom: 1rpx solid #f6d9b6;
|
|
}
|
|
.listitem:last-child{
|
|
border-bottom: none;
|
|
}
|
|
.listitem view{
|
|
padding-left: 6rpx;
|
|
width: 140rpx;
|
|
line-height: 80rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
border-right: 1rpx solid #f6d9b6;
|
|
}
|
|
.listitem text{
|
|
font-size: 24rpx;
|
|
line-height: 80rpx;
|
|
color: #f6d9b6;
|
|
padding-left: 20rpx;
|
|
}
|
|
.cardbtn{
|
|
width: 450rpx;
|
|
height: 74rpx;
|
|
line-height: 74rpx;
|
|
background: #b98b44;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
border-radius: 74rpx;
|
|
}
|
|
</style> |