| xqd
@@ -1,7 +1,17 @@
|
|
|
<template>
|
|
|
- <view class="dialog-panel" v-if="isShow">
|
|
|
- 对话框
|
|
|
- </view>
|
|
|
+ <uni-popup ref="main" type="center">
|
|
|
+ <view class="pop">
|
|
|
+ <view class="title"><text>识别下方二维码即可购买</text></view>
|
|
|
+ <view style="margin-left:30rpx;width: 580rpx;height: 2rpx;background: #F0F0F0;"></view>
|
|
|
+ <view class="img">
|
|
|
+ <image :src="imgUrl" mode="aspectFit"/>
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+ <view class="cancel" @click="$refs.main.close()"><text>取消</text></view>
|
|
|
+ <view class="download" @click="saveImg"><text>保存图片</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
| xqd
@@ -9,26 +19,133 @@
|
|
|
name: "dialog-panel",
|
|
|
data(){
|
|
|
return {
|
|
|
- isShow:false
|
|
|
+ imgUrl:""
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
- show(){
|
|
|
- this.isShow = true
|
|
|
+ show(arg){
|
|
|
+ this.imgUrl = arg
|
|
|
+ this.$refs.main.open()
|
|
|
+ },
|
|
|
+ saveImg(){
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: this.imgUrl,
|
|
|
+ success:(res)=>{
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.path,
|
|
|
+ success(_) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '已保存到相册',
|
|
|
+ icon: 'success',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail(err){
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .dialog-panel{
|
|
|
- position: fixed;
|
|
|
- z-index: 13;
|
|
|
- top:0;left: 0;right:0;bottom:0;
|
|
|
- margin: auto;
|
|
|
- width: 600rpx;
|
|
|
- height: 650rpx;
|
|
|
- background-color: #fff;
|
|
|
+ $pageColor:#F9F9F9;
|
|
|
+ $bgColor:#FFFFFF;
|
|
|
+ @mixin flexlayout {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .pop {
|
|
|
+ width: 640rpx;
|
|
|
+ height: 740rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
border-radius: 20rpx;
|
|
|
+ padding-top: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ @include flexlayout();
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ margin-left: 48rpx;
|
|
|
+ width: 544rpx;
|
|
|
+ height: 484rpx;
|
|
|
+ background: $bgColor;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ @include flexlayout();
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 420rpx;
|
|
|
+ height: 440rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textfont {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ @include flexlayout();
|
|
|
+ width: 572rpx;
|
|
|
+ height: 106rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #828282;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 110rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .cancel {
|
|
|
+ @include flexlayout();
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ border-top: #E5E5E5 solid 1rpx;
|
|
|
+ border-right: #E5E5E5 solid 1rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .download {
|
|
|
+ border-top: #E5E5E5 solid 1rpx;
|
|
|
+ // border-left:#E5E5E5 solid 0.3rpx;
|
|
|
+ @include flexlayout();
|
|
|
+ height: 100%;
|
|
|
+ width: 50%;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF7119;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
</style>
|