lanan-old/detection-user/pages/detection/coupon.vue
愉快的大福 7dc28dc701 init
2024-07-17 14:16:22 +08:00

178 lines
3.3 KiB
Vue

<template>
<view class="content">
<view class="c-top">
<view class="" @click="getback()">
<uni-icons type="left" size="18"></uni-icons>
</view>
<view class="c-title">优惠券</view>
<view class=""></view>
</view>
<view class="ail">
<view class="imgqs" v-if="arrlist == ''">
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
</view>
<view class="q-box" v-for="(item,index) in arrlist" :key="index" @click="getcouponId(item.couponId,item.discount,item.title,item.couponType)">
<view class="dix">
<view class="qimg">
<image src="http://www.nuoyunr.com/lananRsc/detection/yhq.png" mode=""></image>
</view>
<view>
<view class="q-title">{{item.title}}</view>
<view class="q-hui">{{item.startTime}}-{{item.expirationTime}}</view>
</view>
</view>
<view class="dix">
<view class="">
<view class="ju"> <text class="xju">¥</text> {{item.discount / 100}}</view>
</view>
<view class="xuan">
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import request from '../../utils/request'
import config from '@/config'
export default {
data(){
return{
id:'',
type:'',
arrlist:[],
}
},
onLoad(option) {
this.id = option.id
this.type = option.type
this.imgs = this.$baseUrl
this.getcanUseCoupon()
},
mounted() {
},
methods:{
getcouponId(id,discount,title,couponType){
let data ={
couponId:id,
discount:discount / 100,
title:title,
couponType:couponType,
}
uni.$emit('userCouponDiscount', data)
uni.navigateBack({
delta: 1
})
},
async getcanUseCoupon(){
let res = await request({
url:'/appInspection/goods/canUseCoupon?objectId='+this.id+'&type='+this.type,
method: 'get',
})
this.arrlist = res.data
},
getback(){
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.content{
width: 100%;
height: calc(100vh);
background-color: #F6F6F6;
box-sizing: border-box;
padding-top: 45px;
}
.c-top{
width: 100%;
box-sizing: border-box;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
}
.c-title{
font-size: 18px;
font-weight: bold
}
.ail{
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.q-box{
width: 100%;
height: 82px;
background: #FFFFFF;
border-radius: 8px ;
box-sizing: border-box;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.qimg{
width: 60px;
height: 60px;
margin-right: 10px;
image{
width: 100%;
height: 100%;
}
}
.q-title{
font-size: 16px;
font-weight: bold;
color: #333333;
margin-bottom: 20px;
}
.q-hui{
font-size: 13px;
font-weight: 400;
color: #666666;
}
.dix{
display: flex;
align-items: center;
}
.xuan{
width: 16px;
height: 16px;
border-radius: 8px;
border: 1px solid #B4B3B1;
margin-left: 20px;
}
.ju{
font-size: 30px;
font-weight: 400;
color: #FF571A;
margin-bottom: 0px;
}
.xju{
font-size: 14px;
font-weight: 400;
color: #FF571A;
}
.imgqs{
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
image{
width: 100%;
height: 100%;
}
}
</style>