shop-applet/pages/activeCode/subsidy.vue

350 lines
9.8 KiB
Vue
Raw Normal View History

2024-02-29 20:36:05 +08:00
<template>
<view class="page">
<view class="bg">
<image mode="widthFix" style="width: 100%;"
src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/87960202402291430371479.webp"></image>
<view class="card" :class="{card2:type==2}">
<view class="c-head">
<view :class="type==1?'left':'right'" @click="changeType(1)">春耕采购补贴</view>
<view :class="type==2?'left':'right'" @click="changeType(2)">增收销售补贴</view>
</view>
<view class="c-body-title">
<view>补贴金额</view>
<view>补贴状态</view>
</view>
<view class="c-body-text">
<view class="price">{{info.subsidy_amount}}</view>
<view>
<text v-if="info.subsidy_status" class="price">已到账</text>
<text v-else>未到账</text>
</view>
</view>
</view>
<view class="bottom"></view>
</view>
<image @click="back" class="bg_back"
src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/back.png"></image>
<view class="bg_title">补贴进度</view>
<view class="body" >
<view class="b-card" v-if="type==1">
<view class="b-top">
<view>春耕采购余额{{info.spring_subsidy_amount}}</view>
<view>采购余额{{info.spring_subsidy}}</view>
</view>
<view class="b-bottom">
<view class="pro">
<view class="loss">
<image class="image" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f805f20240229155704834.webp"></image>
<view class="text">{{info.spring_subsidy_rate}}%</view>
</view>
</view>
<view v-if="info.spring_subsidy_rate>=100" style="color: #FF5E0C;">已完成</view>
<view v-else style="color: #ADADAD;">未完成</view>
</view>
</view>
<view class="b-card">
<view class="b-top">
<view>销售目标金额{{info.sale_target}}</view>
<view>当前进度{{info.sale_amount}}</view>
</view>
<view class="b-bottom">
<view class="pro">
<view class="loss" :style="{left: `-${100-info.sale_finish_rate}%`}">
<image class="image" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f805f20240229155704834.webp"></image>
<view class="text">{{info.sale_finish_rate}}%</view>
</view>
</view>
<view v-if="info.sale_finish_rate>=100" style="color: #FF5E0C;">已完成</view>
<view v-else style="color: #ADADAD;">未完成</view>
</view>
</view>
<view class="b-card">
<view class="b-top">
<view>采购目标金额{{info.purchase_amount}}</view>
<view>当前进度{{info.purchase_target}}</view>
</view>
<view class="b-bottom">
<view class="pro">
<view class="loss" :style="{left: `-${100-info.purchase_finish_rate}%`}">
<image class="image" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f805f20240229155704834.webp"></image>
<view class="text">{{info.purchase_finish_rate}}%</view>
</view>
</view>
<view v-if="info.purchase_finish_rate>=100" style="color: #FF5E0C;">已完成</view>
<view v-else style="color: #ADADAD;">未完成</view>
</view>
</view>
<view class="b-tips" v-if="type==1">
*春耕采购余额使用完采购金额和销售金额达到后才可获取补贴
</view>
<view class="b-list" v-else>
<view class="list-head"></view>
<view class="list-body">
<view class="list-b-title">
<view>采购金额</view>
<view>销售金额</view>
<view>补贴金额</view>
<view>状态</view>
</view>
<view class="list-b-text" v-for="(item,index) in list" :key="index">
<view class="item1">{{ item.extra.purchase_amount }}</view>
<view class="item2">{{ item.extra.sale_amount }}</view>
<view class="item3">{{ item.coupon_price }}</view>
<view class="item4">
<text v-if="item.status!=1">未到账</text>
<text v-else style="color: #FF5E0C;">已到账</text>
</view>
</view>
<view class="list-b-text" style="align-items: center;" v-if="list.length == 0">
<view>暂无数据</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { getSubsidy, getSubsidyRecord } from "@/api/admin.js"
export default {
data() {
return {
type: 1,
mer_id: '',
info: {},
list: [],
where:{
page: 1,
limit: 20
}
}
},
onLoad() {
let user = this.$store.state.app.userInfo;
if(typeof user == 'string') user = JSON.parse(user);
this.mer_id = user.service.mer_id;
this.getSubsidy();
if(this.type==2)this.getSubsidyRecord();
},
onShow() {},
methods: {
changeType(type){
this.type = type;
this.getSubsidy();
if(type==2)this.getSubsidyRecord();
},
getSubsidy(){
if(!this.mer_id) return ;
getSubsidy(this.mer_id, {
type: this.type
}).then(res=>{
console.log(res);
this.info = res.data;
})
},
getSubsidyRecord(){
getSubsidyRecord(this.mer_id, this.where).then(res=>{
this.list = res.data.record;
})
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss" scoped>
page{
background-color: #fff;
}
.page {
position: relative;
font-size: 28rpx;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 750rpx;
height: 530rpx;
.card{
position: absolute;
transition: 300ms;
bottom: 30rpx;
left: 50%;
transform: translate(-50%);
width: 670rpx;
height: 290rpx;
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e5b2e202402291538018132.webp');
background-size: 100% 100%;
background-repeat: no-repeat;
padding-bottom: 40rpx;
.c-head{
display: flex;
justify-content: space-around;
height: 90rpx;
overflow: hidden;
margin-top: 20rpx;
.left{
font-size: 32rpx;
color: #DF4104;
line-height: 80rpx;
}
.right{
color: #7A7A7A;
line-height: 100rpx;
}
}
.c-body-title{
display: flex;
justify-content: space-around;
color: #2E2E2E;
height: 70rpx;
align-items: center;
}
.c-body-text{
display: flex;
justify-content: space-around;
color: #7A7A7A;
height: 70rpx;
align-items: center;
.price{
color: #F13B3B;
}
}
}
.card2{
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/b4cfc20240229163236372.webp');
}
.bottom{
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 50rpx;
border-radius: 50rpx 50rpx 0 0;
background-color: #fff;
}
}
.bg_back {
height: 34rpx;
width: 20rpx;
position: absolute;
top: calc(var(--status-bar-height) + 30rpx);
left: 30rpx;
}
.bg_title {
font-size: 32rpx;
color: #fff;
font-weight: 500;
position: absolute;
top: calc(var(--status-bar-height) + 30rpx);
left: 50%;
transform: translate(-50%);
}
.body{
padding: 530rpx 30rpx 30rpx 30rpx;
.b-card{
padding-bottom: 30rpx;
.b-top{
display: flex;
justify-content: space-between;
}
.b-bottom{
display: flex;
justify-content: space-between;
align-items: center;
height: 80rpx;
.pro{
width: 570rpx;
height: 28rpx;
border-radius: 28rpx;
overflow: hidden;
position: relative;
background-color: #ffdfce;
.loss{
width: 570rpx;
height: 28rpx;
position: absolute;
top: 0;
left: -100%;
}
.image{
width: 570rpx;
height: 28rpx;
}
.text{
position: absolute;
right: 0;
top: 0;
font-size: 20rpx;
color: #fff;
border-radius: 28rpx;
background-color: #FF5E0C;
padding: 0 10rpx;
height: 30rpx;
border: 2rpx solid #ffad82;
}
}
}
}
.b-tips{
color: #7A7A7A;
font-size: 24rpx;
}
.b-list{
.list-head{
width: 690rpx;
height: 45rpx;
background: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/7bc46202402291702073308.webp');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.list-body{
.list-b-title{
padding: 20rpx 0;
display: flex;
view{
flex: 1;
text-align: center;
flex-shrink: 0;
}
}
.list-b-text{
background-color: #F9F9F9;
border-radius: 12rpx;
padding: 20rpx 0;
margin-bottom: 20rpx;
display: flex;
font-size: 24rpx;
view{
flex: 1;
text-align: center;
flex-shrink: 0;
}
.item1{
color: #F13B3B;
}
.item2{
color: #20A162;
}
.item3{
color: #FF8056;
}
.item4{
color: #2E2E2E;
}
}
}
}
}
</style>