|
|
@@ -46,13 +46,11 @@
|
|
|
</view>
|
|
|
<view class="table">
|
|
|
<view class="row">
|
|
|
- <view class="name">产品型号</view>
|
|
|
+ <view class="name">设备型号</view>
|
|
|
<view class="value">{{obj.model}}</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
-
|
|
|
-
|
|
|
<view class="row">
|
|
|
<view class="name">出厂编号</view>
|
|
|
<view class="value">{{obj.deviceNo}}</view>
|
|
|
@@ -130,7 +128,10 @@
|
|
|
</view>
|
|
|
<view class="row">
|
|
|
<view class="name">有效期至</view>
|
|
|
- <view class="value">{{obj.expirationTime}}</view>
|
|
|
+ <view class="value">{{obj.expirationTime?obj.expirationTime.split(' ')[0]:''}}
|
|
|
+ <u-button type="primary" v-if="0" @click="popupShowWL=true" v-if="obj.expirationTime"
|
|
|
+ style="margin-left: 8px;" size="mini" shape="circle" >立即续期</u-button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
@@ -182,17 +183,85 @@
|
|
|
|
|
|
</view>
|
|
|
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ <u-popup v-model="popupShowWL" mode="bottom" :closeable="true" border-radius="30" >
|
|
|
+ <view class="popup-screen">
|
|
|
+ <view class="popup-title">物联网卡续期
|
|
|
+ <span style="color: rgba(102, 102, 102, 1);font-weight: 400;">
|
|
|
+ 有效期至<span style="color: red;">{{obj.expirationTime?obj.expirationTime.split(' ')[0]:''}}</span>
|
|
|
+ </span>
|
|
|
+ </view>
|
|
|
+ <view class="cardList">
|
|
|
+ <view class="cardInfo" v-for="(item,i) in cardList" :key="i"
|
|
|
+ @click="wlkid=item.id"
|
|
|
+ :class="{
|
|
|
+ cardInfoCk:item.id==wlkid
|
|
|
+ }" >
|
|
|
+ <view class="name">{{item.name}}</view>
|
|
|
+ <view class="price">{{item.price}}元</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 支付方式 -->
|
|
|
+ <view class="payment">
|
|
|
+ <view class="title">
|
|
|
+ 选择支付方式
|
|
|
+ </view>
|
|
|
+ <radio-group @change="radioChange">
|
|
|
+
|
|
|
+ <view class="way">
|
|
|
+ <view class="way-name">
|
|
|
+ <text><img src="@/assets/img/riFill-wechat-pay-fill@3x.png" alt=""></text>
|
|
|
+ 微信支付
|
|
|
+ </view>
|
|
|
+ <view class="way-radio">
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="0" name="abc" :checked="submitType === '0'" /><text></text>
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="way">
|
|
|
+ <view class="way-name">
|
|
|
+ <text><img src="@/assets/img/ze-alipay Copy@3x.png" alt=""></text>
|
|
|
+ 支付宝
|
|
|
+ </view>
|
|
|
+ <view class="way-radio">
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="1" name="abc" :checked="submitType === '1'" /><text></text>
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </radio-group>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-button type="success" style="margin-top: 10px;" @click="submitWLK"
|
|
|
+ shape="circle" >确认充值</u-button>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-modal v-model="showModelzfb" :show-cancel-button="true" @confirm="confirmzfb"
|
|
|
+ confirm-text="支付成功？" title="扫码支付">
|
|
|
+ <view style="
|
|
|
+ text-align: center;
|
|
|
+ ">
|
|
|
+ <img id="qrcode2" :src="qrCodeImg">
|
|
|
+ </view>
|
|
|
+ <view style="
|
|
|
+ text-align: center;
|
|
|
+ ">请使用支付宝扫码</view>
|
|
|
+
|
|
|
+ </u-modal>
|
|
|
+ <img id="qrcode" style="display: none;">
|
|
|
+
|
|
|
<u-popup v-model="popupShow" mode="bottom" :closeable="true" border-radius="30" >
|
|
|
<view class="popup-screen">
|
|
|
<view class="popup-title">{{vipUser.id?'修改':'添加'}}白名单信息</view>
|
|
|
- <view>白名单车主姓名<span style="color: red;">*</span></view>
|
|
|
+ <view style="padding: 4px;" >白名单车主姓名<span style="color: red;">*</span></view>
|
|
|
<u-input :customStyle="customStyle" v-model="vipUser.name"
|
|
|
placeholder="白名单车主姓名(必填)"></u-input>
|
|
|
- <view>白名单车主手机号码<span style="color: red;">*</span></view>
|
|
|
+ <view style="padding: 4px;">白名单车主手机号码<span style="color: red;">*</span></view>
|
|
|
<u-input :customStyle="customStyle" type="number" v-model="vipUser.phone"
|
|
|
placeholder="白名单车主手机号码(必填)"></u-input>
|
|
|
- <view>白名单车主车牌号</view>
|
|
|
+ <view style="padding: 4px;">白名单车主车牌号</view>
|
|
|
<u-input :customStyle="customStyle" v-model="vipUser.carNum"
|
|
|
placeholder="白名单车主车牌号"></u-input>
|
|
|
<view v-if="vipUser.id" style="display: flex;">
|
|
|
@@ -226,11 +295,16 @@
|
|
|
|
|
|
<script>
|
|
|
|
|
|
+ import * as API from '@/apis/mall.js'
|
|
|
+ import * as WxJsApi from '@/utils/wxJsApi.js'
|
|
|
|
|
|
import * as API_apply from '@/apis/apply.js'
|
|
|
import {
|
|
|
-
|
|
|
- } from '@/utils'
|
|
|
+ convertCanvasToImage
|
|
|
+ } from '@/utils'
|
|
|
+ import {
|
|
|
+ wxPayJs
|
|
|
+ } from '@/utils/wxpay'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -246,6 +320,7 @@
|
|
|
confirmText: '拨打电话',
|
|
|
listShow:true,
|
|
|
popupShow:false,
|
|
|
+ popupShowWL:false,
|
|
|
customStyle:{
|
|
|
"border-radius": "50px",
|
|
|
"background-color": 'rgba(242, 244, 246, 1)',
|
|
|
@@ -256,8 +331,28 @@
|
|
|
vipUserList:[],
|
|
|
vipUser:{},
|
|
|
delShow:false,
|
|
|
- obj:{}
|
|
|
-
|
|
|
+ obj:{},
|
|
|
+ showModelzfb:false,
|
|
|
+ qrCodeImg: "",
|
|
|
+ submitForm:{},
|
|
|
+ submitType:"0",
|
|
|
+ wlkid:"c4474038-2921-4cd1-8cf9-93755de7ec2c",
|
|
|
+ cardList:[
|
|
|
+ {
|
|
|
+ name:"包年",
|
|
|
+ price:60,
|
|
|
+ id:"c4474038-2921-4cd1-8cf9-93755de7ec2c"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:"9c247fb3-097e-46be-9317-d2ae2075e6eb",
|
|
|
+ name:"1个月",
|
|
|
+ price:5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:"3个月",
|
|
|
+ price:15
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -282,6 +377,82 @@
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ submitWLK(){
|
|
|
+ var type=this.submitType
|
|
|
+
|
|
|
+
|
|
|
+ if (type == 0) {
|
|
|
+ this.wxpy()
|
|
|
+ }
|
|
|
+ if (type == 1) {
|
|
|
+ this.alpy()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ alpy() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ var listcanvas = document.getElementsByTagName('canvas')
|
|
|
+
|
|
|
+ if (listcanvas.length > 0) {
|
|
|
+ document.getElementById("qrcode").removeChild(document.getElementsByTagName('canvas')[0]);
|
|
|
+ }
|
|
|
+ API.tradePrecreatePay({
|
|
|
+ productId: this.id,
|
|
|
+ opinions:this.opinions,
|
|
|
+ buyNum:1,
|
|
|
+ receiver:this.receiver,
|
|
|
+ contactPhone:this.contactPhone,
|
|
|
+ deliveryAddress:this.deliveryAddress,
|
|
|
+ }).then((response) => {
|
|
|
+
|
|
|
+ let qrcode = new QRCode('qrcode', {
|
|
|
+ width: 200,
|
|
|
+ height: 200,
|
|
|
+ text: response.data.qr_code,
|
|
|
+ correctLevel: QRCode.CorrectLevel.M,
|
|
|
+
|
|
|
+ })
|
|
|
+ this.outOrderNo = response.data.outOrderNo;
|
|
|
+ var canvas = document.getElementsByTagName('canvas')[0];
|
|
|
+ this.qrCodeImg = convertCanvasToImage(canvas);
|
|
|
+ uni.hideLoading()
|
|
|
+ this.showModel = true
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ wxpy() {
|
|
|
+ API.wxJsapiPay({
|
|
|
+ productId: this.wlkid,
|
|
|
+ opinions:"",
|
|
|
+ buyNum:1,
|
|
|
+ receiver:"x",
|
|
|
+ contactPhone:"x",
|
|
|
+ deliveryAddress:"x",
|
|
|
+ }).then((response) => {
|
|
|
+ this.submitForm = response.data
|
|
|
+ wxPayJs(this.submitForm);
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ radioChange: function(evt) {
|
|
|
+
|
|
|
+ this.submitType=evt.detail.value
|
|
|
+
|
|
|
+ },
|
|
|
submitUser(){
|
|
|
if(!this.vipUser.name){
|
|
|
uni.showToast({
|
|
|
@@ -459,7 +630,52 @@
|
|
|
<style lang="scss">
|
|
|
|
|
|
|
|
|
-
|
|
|
+ // 支付方式
|
|
|
+ .payment {
|
|
|
+ margin: 24rpx;
|
|
|
+ padding: 32rpx 0rpx;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .way {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .way-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-right: 16rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.uni-radio-input-checked {
|
|
|
+ background-color: #00b962 !important;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.uni-radio-input {
|
|
|
+ width: 40rpx !important;
|
|
|
+ height: 40rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
page {
|
|
|
background-color: #F6F8F8;
|
|
|
@@ -640,5 +856,39 @@
|
|
|
font-weight: bold;
|
|
|
padding-bottom: 10px;
|
|
|
}
|
|
|
+ .cardList{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+
|
|
|
+ .cardInfo{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(187, 187, 187, 1);
|
|
|
+ .name{
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cardInfoCk{
|
|
|
+ background-color: rgba(225, 247, 237, 1);
|
|
|
+ border: 1px solid rgba(0, 185, 98, 1);
|
|
|
+
|
|
|
+ .price{
|
|
|
+ color: rgba(0, 161, 85, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
zhengkaixin