1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <template>
- <view class="pages">
- <view class="success-box">
- <view class="success-tit">质保单领取成功</view>
- <view class="success-code">
- <image :src="codeImg"></image>
- </view>
- <view class="success-tips">车主可用微信扫此二维码查看质保单详情</view>
- </view>
- <view class="buttons flex justify_between">
- <u-button type="default" @click="shareCode">保存二维码</u-button>
- <u-button type="primary" @click="saveForm">查看质保信息</u-button>
- </view>
- </view>
- </template>
- <script>
- import { getZbdQrCode, sharePic } from '@/libs/tools'
- export default {
- data() {
- return {
- detail: null,
- codeImg: ''
- }
- },
- onLoad() {
- this.detail = this.$store.state.vuex_uuidTempData
- this.codeImg = getZbdQrCode()
- },
- onUnload() {
- this.$store.state.vuex_uuidTempData = null
- },
- methods: {
- // 保存二维码到相册并打开详情页面
- saveForm(){
- uni.redirectTo({
- url: "/pagesA/qualityPolicy/searchOrder?mobile="+this.detail.customerInfo.customMobile
- })
- },
- shareCode(){
- sharePic()
- }
- }
- }
- </script>
- <style lang="less">
- .pages{
- height: 100vh;
- background: #fff;
- .success-box{
- text-align: center;
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin-top: 10vh;
- .success-tit{
- font-weight: bold;
- color: #4CAF50;
- font-size: 1rem;
- }
- .success-code{
- padding: 2rem;
- image{
- width: 10rem;
- height: 10rem;
- }
- }
- .success-tips{
- color: #fd920e;
- }
- }
-
- .buttons{
- padding: 1rem 2rem 2rem;
- position: fixed;
- width: 100%;
- bottom: 0;
- left: 0;
- background: #fff;
- z-index: 10000;
- border-top: 1px solid #eee;
- justify-content: space-around;
- /deep/ .u-btn{
- width: 8rem;
- }
- }
- }
- </style>
|