|
@@ -2,9 +2,9 @@
|
|
|
<view class="all-container">
|
|
|
<view class="bg"></view>
|
|
|
<zj-page-layout>
|
|
|
- <view class="status-container">
|
|
|
- <view class="status">{{statusFilter(detail.payStatus)}}</view>
|
|
|
- </view>
|
|
|
+ <view class="status-container">
|
|
|
+ <view class="status">{{ statusFilter(detail.payStatus) }}</view>
|
|
|
+ </view>
|
|
|
<view class="content-container">
|
|
|
<!-- 服务信息 -->
|
|
|
<view class="info-container card mt30">
|
|
@@ -27,160 +27,161 @@
|
|
|
<view class="label">产品大类</view>
|
|
|
<view class="value">{{ detail.mainName || '' }}</view>
|
|
|
</view>
|
|
|
- <view class="row">
|
|
|
- <view class="label">服务内容</view>
|
|
|
- <view class="value">{{ detail.increContent || '' }}</view>
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <view class="label">使用限值</view>
|
|
|
- <view class="value">{{ detail.limitNum + '年' || '' }}</view>
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <view class="label">服务金额</view>
|
|
|
- <view class="value">{{ detail.amount || '' }}</view>
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <view class="label">下单时间</view>
|
|
|
- <view class="value">{{ detail.createTime || '' }}</view>
|
|
|
- </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">服务内容</view>
|
|
|
+ <view class="value">{{ detail.increContent || '' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">使用限值</view>
|
|
|
+ <view class="value">{{ detail.limitNum + '年' || '' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">服务金额</view>
|
|
|
+ <view class="value">{{ detail.amount || '' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">下单时间</view>
|
|
|
+ <view class="value">{{ detail.createTime || '' }}</view>
|
|
|
+ </view>
|
|
|
<view class="row">
|
|
|
<view class="label">销售网点</view>
|
|
|
<view class="value">{{ detail.websitName || '' }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 产品信息 -->
|
|
|
- <view class="info-container card mt30">
|
|
|
- <view class="common-title">产品信息</view>
|
|
|
- <view>
|
|
|
- <view class="row">
|
|
|
- <view class="label">内机条码</view>
|
|
|
- <view class="value">{{ detail.insideCode || '' }}</view>
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <view class="label">发票价格</view>
|
|
|
- <view class="value">{{ detail.invoiceAmount || '' }}</view>
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <view class="label">原保到期</view>
|
|
|
- <view class="value">{{ detail.insureTime.substring(0,10) || '' }}</view>
|
|
|
- </view>
|
|
|
- <view class="row" v-if="detail.payStatus == 'PAID' || detail.payStatus == 'EXPIRE'">
|
|
|
- <view class="label">服务期限</view>
|
|
|
- <view class="value">{{ detail.insureTime.substring(0,10) + '至' + detail.serviceEndTime.substring(0,10) }}</view>
|
|
|
- </view>
|
|
|
- <view class="imgs">
|
|
|
- <!-- 内机条码 -->
|
|
|
- <view class="it">
|
|
|
- <block>
|
|
|
- <image mode="aspectFill" :src="detail.insideCodeImg" @tap="prevImg(detail.insideCodeImg)">
|
|
|
- </image>
|
|
|
- </block>
|
|
|
- <view class="name">内机条码</view>
|
|
|
- </view>
|
|
|
- <!-- 机器铭牌 -->
|
|
|
- <view class="it">
|
|
|
- <block>
|
|
|
- <image mode="aspectFill" :src="detail.machineImg" @tap="prevImg(detail.machineImg)">
|
|
|
- </image>
|
|
|
- </block>
|
|
|
- <view class="name">机器铭牌<br/>(含出厂日期)</view>
|
|
|
- </view>
|
|
|
- <!-- 购机凭证 -->
|
|
|
- <view class="it">
|
|
|
- <block>
|
|
|
- <image mode="aspectFill" :src="detail.buyCertImg" @tap="prevImg(detail.buyCertImg)">
|
|
|
- </image>
|
|
|
- </block>
|
|
|
- <view class="name">购机凭证</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 客户信息 -->
|
|
|
- <view class="info-container card mt30">
|
|
|
- <view class="common-title">客户信息</view>
|
|
|
- <view>
|
|
|
- <view class="row">
|
|
|
- <view class="value" style="margin-right: 20rpx;">{{detail.userName}}</view>
|
|
|
- <view class="value">{{ detail.userMobile }}</view>
|
|
|
- </view>
|
|
|
- <view class="row">
|
|
|
- <view class="value">{{detail.userAddress}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <!-- 产品信息 -->
|
|
|
+ <view class="info-container card mt30">
|
|
|
+ <view class="common-title">产品信息</view>
|
|
|
+ <view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">内机条码</view>
|
|
|
+ <view class="value">{{ detail.insideCode || '' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">发票价格</view>
|
|
|
+ <view class="value">{{ detail.invoiceAmount || '' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">原保到期</view>
|
|
|
+ <view class="value">{{ detail.insureTime.substring(0, 10) || '' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.payStatus == 'PAID' || detail.payStatus == 'EXPIRE'">
|
|
|
+ <view class="label">服务期限</view>
|
|
|
+ <view class="value">{{
|
|
|
+ detail.insureTime.substring(0, 10) + '至' + detail.serviceEndTime.substring(0, 10)
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="imgs">
|
|
|
+ <!-- 内机条码 -->
|
|
|
+ <view class="it">
|
|
|
+ <block>
|
|
|
+ <image mode="aspectFill" :src="detail.insideCodeImg" @tap="prevImg(detail.insideCodeImg)"> </image>
|
|
|
+ </block>
|
|
|
+ <view class="name">内机条码</view>
|
|
|
+ </view>
|
|
|
+ <!-- 机器铭牌 -->
|
|
|
+ <view class="it">
|
|
|
+ <block>
|
|
|
+ <image mode="aspectFill" :src="detail.machineImg" @tap="prevImg(detail.machineImg)"> </image>
|
|
|
+ </block>
|
|
|
+ <view class="name">机器铭牌<br />(含出厂日期)</view>
|
|
|
+ </view>
|
|
|
+ <!-- 购机凭证 -->
|
|
|
+ <view class="it">
|
|
|
+ <block>
|
|
|
+ <image mode="aspectFill" :src="detail.buyCertImg" @tap="prevImg(detail.buyCertImg)"> </image>
|
|
|
+ </block>
|
|
|
+ <view class="name">购机凭证</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 客户信息 -->
|
|
|
+ <view class="info-container card mt30">
|
|
|
+ <view class="common-title">客户信息</view>
|
|
|
+ <view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="value" style="margin-right: 20rpx">{{ detail.userName }}</view>
|
|
|
+ <view class="value">{{ detail.userMobile }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="value">{{ detail.userAddress }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</zj-page-layout>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import zjDialogPicker from "@/components/zj-dialog/zj-dialog-picker.vue";
|
|
|
+import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- zjDialogPicker
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- imageUrl: this.$imageUrl,
|
|
|
- detail: null,
|
|
|
- loadStatus: 1,
|
|
|
- refresherTriggered: false
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- async onLoad({ id }) {
|
|
|
- this.getDetail(id)
|
|
|
- },
|
|
|
- computed: {
|
|
|
- statusFilter() {
|
|
|
- return function(val){
|
|
|
- const statusMap = {
|
|
|
- WAIT: '待支付',
|
|
|
- PAID: '已支付',
|
|
|
- EXPIRE: '已过期',
|
|
|
- CANCEL: '已取消',
|
|
|
- REFUND: '已退款'
|
|
|
- }
|
|
|
- return statusMap[val]
|
|
|
- }
|
|
|
- },
|
|
|
- deadline(){
|
|
|
- return function(time,num){
|
|
|
- let date = new Date(time)
|
|
|
- date.setFullYear(date.getFullYear() + num);
|
|
|
- let y = date.getFullYear(),
|
|
|
- m = date.getMonth() + 1,
|
|
|
- d = date.getDate()
|
|
|
- return `${y}-${m>9?m:'0'+m}-${d>9?d:'0'+d}`
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取详情
|
|
|
- getDetail(id) {
|
|
|
- this.$api.post('/increConfig/detailIncre', {
|
|
|
- id
|
|
|
- }).then((res) => {
|
|
|
- this.detail = res.data;
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- copyData(val) {
|
|
|
- this.$copy(val);
|
|
|
- },
|
|
|
-
|
|
|
- // 预览图片
|
|
|
- prevImg(url) {
|
|
|
- uni.previewImage({
|
|
|
- current: this.imageUrl + url,
|
|
|
- urls: [this.imageUrl + url],
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ components: {
|
|
|
+ zjDialogPicker
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imageUrl: this.$imageUrl,
|
|
|
+ detail: null,
|
|
|
+ loadStatus: 1,
|
|
|
+ refresherTriggered: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async onLoad({ id }) {
|
|
|
+ this.getDetail(id)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ statusFilter() {
|
|
|
+ return function (val) {
|
|
|
+ const statusMap = {
|
|
|
+ WAIT: '待支付',
|
|
|
+ PAID: '已支付',
|
|
|
+ EXPIRE: '已过期',
|
|
|
+ CANCEL: '已取消',
|
|
|
+ REFUND: '已退款'
|
|
|
+ }
|
|
|
+ return statusMap[val]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deadline() {
|
|
|
+ return function (time, num) {
|
|
|
+ let date = new Date(time)
|
|
|
+ date.setFullYear(date.getFullYear() + num)
|
|
|
+ let y = date.getFullYear(),
|
|
|
+ m = date.getMonth() + 1,
|
|
|
+ d = date.getDate()
|
|
|
+ return `${y}-${m > 9 ? m : '0' + m}-${d > 9 ? d : '0' + d}`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取详情
|
|
|
+ getDetail(id) {
|
|
|
+ this.$api
|
|
|
+ .post('/increConfig/detailIncre', {
|
|
|
+ id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.detail = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ copyData(val) {
|
|
|
+ this.$copy(val)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 预览图片
|
|
|
+ prevImg(url) {
|
|
|
+ uni.previewImage({
|
|
|
+ current: this.imageUrl + url,
|
|
|
+ urls: [this.imageUrl + url]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -203,10 +204,10 @@ export default {
|
|
|
.status {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 500;
|
|
|
- position: absolute;
|
|
|
- left: 50rpx;
|
|
|
- top: 30rpx;
|
|
|
- z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ left: 50rpx;
|
|
|
+ top: 30rpx;
|
|
|
+ z-index: 999;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -254,38 +255,37 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.imgs {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .it {
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .it {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- margin-top: 30rpx;
|
|
|
- margin-right: 30rpx;
|
|
|
-
|
|
|
- &:nth-child(3n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 190rpx;
|
|
|
- height: 190rpx;
|
|
|
- background: #f4f4f7;
|
|
|
- border-radius: 20rpx;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- margin-top: 24rpx;
|
|
|
- color: $sec-font;
|
|
|
-
|
|
|
- text {
|
|
|
- color: $minor-color;
|
|
|
- }
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+
|
|
|
+ &:nth-child(3n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 190rpx;
|
|
|
+ height: 190rpx;
|
|
|
+ background: #f4f4f7;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ color: $sec-font;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: $minor-color;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+}
|
|
|
</style>
|