|
@@ -10,7 +10,8 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="qr-content flex-center">
|
|
<view class="qr-content flex-center">
|
|
|
- <uqrcode :loading='loading' :auto='false' :start='false' sizeUnit='rpx' ref="qrcode" canvas-id="qrcode" :value="item.verify_code" size="500"></uqrcode>
|
|
|
|
|
|
|
+ <uqrcode :loading='loading' :auto='false' :start='false' sizeUnit='rpx' ref="qrcode" canvas-id="qrcode"
|
|
|
|
|
+ :value="item.verify_code" size="500"></uqrcode>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="text-code">
|
|
<view class="text-code">
|
|
|
{{item.verify_code}}
|
|
{{item.verify_code}}
|
|
@@ -20,6 +21,12 @@
|
|
|
<view class="tip-icon top-right"></view>
|
|
<view class="tip-icon top-right"></view>
|
|
|
<view class="tip-icon bottom-right"></view>
|
|
<view class="tip-icon bottom-right"></view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <view class="flex bottomBox">
|
|
|
|
|
+ <view class="buttomBottom" @click="shopLi">
|
|
|
|
|
+ 联系商家
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="buttomBottom bgYellow" @click="shopNext">前往商家</view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -34,7 +41,7 @@
|
|
|
item: {
|
|
item: {
|
|
|
verify_code: ''
|
|
verify_code: ''
|
|
|
},
|
|
},
|
|
|
- loading:true
|
|
|
|
|
|
|
+ loading: true
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
onLoad(option) {
|
|
onLoad(option) {
|
|
@@ -48,16 +55,33 @@
|
|
|
orderDetail({}, obj.orderId).then(e => {
|
|
orderDetail({}, obj.orderId).then(e => {
|
|
|
obj.item = e.data;
|
|
obj.item = e.data;
|
|
|
obj.$refs.qrcode.make({
|
|
obj.$refs.qrcode.make({
|
|
|
- success: () => {
|
|
|
|
|
- obj.loading=false;
|
|
|
|
|
- console.log('生成成功');
|
|
|
|
|
- },
|
|
|
|
|
- fail: err => {
|
|
|
|
|
- console.log(err)
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ success: () => {
|
|
|
|
|
+ obj.loading = false;
|
|
|
|
|
+ console.log('生成成功');
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: err => {
|
|
|
|
|
+ console.log(err)
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ // 联系商家
|
|
|
|
|
+ shopLi() {
|
|
|
|
|
+ uni.makePhoneCall({
|
|
|
|
|
+ phoneNumber: this.item.system_store.phone //仅为示例
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ // 前往商家
|
|
|
|
|
+ shopNext() {
|
|
|
|
|
+ // 打开地图导航
|
|
|
|
|
+ uni.openLocation({
|
|
|
|
|
+ latitude: +this.item.system_store.latitude,
|
|
|
|
|
+ longitude: +this.item.system_store.longitude,
|
|
|
|
|
+ fail(e) {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
@@ -66,54 +90,94 @@
|
|
|
page {
|
|
page {
|
|
|
background-color: $base-color;
|
|
background-color: $base-color;
|
|
|
}
|
|
}
|
|
|
- .qr-box{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .qr-box {
|
|
|
color: $font-color-dark;
|
|
color: $font-color-dark;
|
|
|
background-color: #FFF;
|
|
background-color: #FFF;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
margin: 0 30rpx;
|
|
margin: 0 30rpx;
|
|
|
- .title-box{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .title-box {
|
|
|
padding-top: 50rpx;
|
|
padding-top: 50rpx;
|
|
|
padding-bottom: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
|
background-color: #F5F5F5;
|
|
background-color: #F5F5F5;
|
|
|
- .title{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .title {
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
font-size: 44rpx;
|
|
font-size: 44rpx;
|
|
|
}
|
|
}
|
|
|
- .tip-text{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .tip-text {
|
|
|
font-size: $font-sm;
|
|
font-size: $font-sm;
|
|
|
color: $font-color-light;
|
|
color: $font-color-light;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .qr-content{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .qr-content {
|
|
|
padding-top: 110rpx;
|
|
padding-top: 110rpx;
|
|
|
}
|
|
}
|
|
|
- .tip-icon{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .tip-icon {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
background-color: $base-color;
|
|
background-color: $base-color;
|
|
|
border-radius: 99rpx;
|
|
border-radius: 99rpx;
|
|
|
width: 100rpx;
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
height: 100rpx;
|
|
|
}
|
|
}
|
|
|
- .top-left,.bottom-left{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .top-left,
|
|
|
|
|
+ .bottom-left {
|
|
|
left: -40rpx;
|
|
left: -40rpx;
|
|
|
}
|
|
}
|
|
|
- .top-right,.bottom-right{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .top-right,
|
|
|
|
|
+ .bottom-right {
|
|
|
right: -40rpx;
|
|
right: -40rpx;
|
|
|
}
|
|
}
|
|
|
- .bottom-left,.bottom-right{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .bottom-left,
|
|
|
|
|
+ .bottom-right {
|
|
|
bottom: -40rpx;
|
|
bottom: -40rpx;
|
|
|
}
|
|
}
|
|
|
- .top-left,.top-right{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .top-left,
|
|
|
|
|
+ .top-right {
|
|
|
top: -40rpx;
|
|
top: -40rpx;
|
|
|
}
|
|
}
|
|
|
- .text-code{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .text-code {
|
|
|
font-size: 44rpx;
|
|
font-size: 44rpx;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
padding-top: 60rpx;
|
|
padding-top: 60rpx;
|
|
|
padding-bottom: 110rpx;
|
|
padding-bottom: 110rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .content{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .content {
|
|
|
padding-top: 90rpx;
|
|
padding-top: 90rpx;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .bottomBox {
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ border-top: 1px solid $border-color-light;
|
|
|
|
|
+
|
|
|
|
|
+ .buttomBottom {
|
|
|
|
|
+ width: 50%;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 30rpx 80rpx;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+ color: $base-color;
|
|
|
|
|
+ font-size: $font-base;
|
|
|
|
|
+ background-color: #FFF;
|
|
|
|
|
+
|
|
|
|
|
+ &.bgYellow {
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+ background: $bg-gradual;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|