shop-applet/pages/activeCode/subsidy.vue

489 lines
16 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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==2?'left':'right'" @click="changeType(2)">增收销售补贴</view>
<!-- <view :class="type==1?'left':'right'" @click="changeType(1)">春耕采购补贴</view> -->
<view v-if="mer_info.type_code=='PersonalStore'" :class="type==1?'left':'right'" @click="changeType(1)">春耕采购补贴</view>
<view v-else></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==2" class="price">{{info.subsidy_status_name}}</text>
<text v-else>{{info.subsidy_status_name}}</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}}元</view>
<view>剩余金额{{info.balance}}元</view>
</view>
<view class="b-bottom">
<view class="pro">
<view class="loss" :style="{left: `-${100-info.spring_subsidy_rate}%`}">
<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.official_purchase_target}}元</view>
<view>当前进度{{info.official_purchase_amount}}元</view>
</view>
<view class="b-bottom">
<view class="pro">
<view class="loss" :style="{left: `-${100-info.official_purchase_finish_rate}%`}">
<image class="image" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f805f20240229155704834.webp"></image>
<view class="text">{{info.official_purchase_finish_rate}}%</view>
</view>
</view>
<view v-if="info.official_purchase_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_target}}元</view>
<view>当前进度{{info.purchase_amount}}元</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">
<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">{{ cPrice2(item.extra.official_purchase_target, item.extra.purchase_target) }}</view>
<view class="item2">{{ item.extra.sale_target }}</view>
<view class="item3" v-if="item.status!=1">{{ cPrice(item.coupon_price) }}</view>
<view class="item3" v-else>{{ item.coupon_price }}</view>
<view class="item4" @click="showPopup(item.send_status, item.id)">
<!-- send_status 发放状态-1未激活0待审核1待领取2已完成 -->
<text v-if="item.send_status==2||item.send_status==1" style="color: #FF5E0C;">{{item.send_status_cn}}</text>
<text v-else>{{item.send_status_cn}}</text>
</view>
</view>
<view class="list-b-text" style="align-items: center;" v-if="list.length == 0">
<view>暂无数据</view>
</view>
</view>
</view>
<uni-popup type="center" ref="pupRef">
<view style="width: 630rpx;height: 500rpx;position: relative;">
<view style="position: absolute;top: 0;right: 10rpx;" @click="closePopup">
<image style="width: 50rpx;height: 50rpx;" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/c8b19202403201714381681.webp"></image>
</view>
<view style="width: 630rpx;position: absolute;top: 70rpx;right: 0;" :class="[send_status_cn>0?'h430':'h310']">
<image style="width: 100%;" :class="[send_status_cn>0?'h430':'h310']" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/23ad8202403201716417527.webp"></image>
<view style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 30rpx;display: flex;flex-direction: column;justify-content: center;">
<view style="padding-bottom: 50rpx;font-size: 32rpx;color: #2E2E2E;">
<text v-if="send_status_cn==-1">补贴未激活</text>
<text v-else-if="send_status_cn==0">补贴审核中</text>
<text v-else-if="send_status_cn==1">补贴待领取</text>
<text v-else-if="send_status_cn==10">请填写错误内容</text>
</view>
<view style="color: #7A7A7A;font-size: 28rpx;">
<text v-if="send_status_cn==-1">当前采购目标金额、销售目标金额未完成,无法提交报审。</text>
<text v-else-if="send_status_cn==0">你的补贴申请已提交报审审核周期为3个月内审核完成后将会以短信形式通知。</text>
<text v-else-if="send_status_cn==1">
请核对补贴金额是否正确,如有疑问,请联系工作人员。
电话13627640188
</text>
</view>
<view v-if="send_status_cn==10" style="background-color: #fff;border-radius: 20rpx;padding: 20rpx;">
<textarea v-model="reason" placeholder="请填写错误内容" style="height: 100rpx;"/>
</view>
<view v-if="send_status_cn==1" style="display: flex;justify-content: center;margin-top: 30rpx;color: #F98144;">
<view @click="reAudit" style="padding: 9rpx 50rpx 12rpx 50rpx;border-radius: 40rpx;border: 4rpx solid #F98144;margin-right: 100rpx;">错误</view>
<view @click="couponReceive" style="padding: 9rpx 50rpx 12rpx 50rpx;border-radius: 40rpx;border: 4rpx solid #F98144;color: #FFF;background-color: #F98144;">正确</view>
</view>
<view v-else-if="send_status_cn==10" style="display: flex;justify-content: center;margin-top: 30rpx;color: #F98144;">
<view @click="couponRefuse" style="padding: 9rpx 50rpx 12rpx 50rpx;border-radius: 40rpx;border: 4rpx solid #F98144;color: #FFF;background-color: #F98144;">提交</view>
</view>
</view>
</view>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
import { getSubsidy, getSubsidyRecord, couponReceive, couponRefuse } from "@/api/admin.js"
import { Toast } from "../../libs/uniApi";
export default {
data() {
return {
type: 2,
mer_id: '',
info: {},
list: [],
send_status_cn: '1',
send_id: 0,
reason: '',
where:{
page: 1,
limit: 20,
type: 2
},
mer_info:{
type_code: ''
}
}
},
onLoad() {
let user = this.$store.state.app.userInfo;
if(typeof user == 'string') user = JSON.parse(user);
this.mer_info.type_code = user.mer_info.type_code;
this.mer_id = user.service.mer_id;
this.getSubsidy();
if(this.type==2)this.getSubsidyRecord();
// this.$nextTick(res=>{
// this.$refs.pupRef.open();
// })
},
onShow() {},
methods: {
showPopup(type, send_id){
this.send_status_cn = type;
this.send_id = send_id;
if(type==2) Toast('已经领取过啦');
else this.$refs.pupRef.open();
},
closePopup(){
this.$refs.pupRef.close();
},
back() {
uni.navigateBack();
},
changeType(type){
this.type = type;
this.getSubsidy();
this.getSubsidyRecord();
},
getSubsidy(){
if(!this.mer_id) return ;
getSubsidy(this.mer_id, {
type: this.type
}).then(res=>{
this.info = res.data;
})
},
couponReceive(){
this.closePopup();
couponReceive({
mer_id: this.mer_id,
id: this.send_id,
}).then(res=>{
this.$nextTick(()=>{
Toast('领取成功')
})
}).catch(err=>{
this.$nextTick(()=>{
Toast(err)
})
})
},
reAudit(){
this.send_status_cn = 10;
},
couponRefuse(){
if(this.reason=='') return Toast('错误内容不能为空');
this.closePopup();
couponRefuse({
mer_id: this.mer_id,
id: this.send_id,
reason: this.reason
}).then(res=>{
this.$nextTick(()=>{
Toast('提交成功')
})
}).catch(err=>{
this.$nextTick(()=>{
Toast(err)
})
})
},
getSubsidyRecord(){
getSubsidyRecord(this.mer_id, this.where).then(res=>{
this.list = res.data.record;
})
},
cPrice(n){ //计算未激活的补贴达成了多少
let t = Number(this.info.official_purchase_finish_rate) + Number(this.info.purchase_finish_rate) + Number(this.info.sale_finish_rate);
t/=3*100;
t==0?t=1:null;
return (+n*t).toFixed(2);
},
cPrice2(a,b){
a = Number(a);
b = Number(b);
return (a+b).toFixed(2)
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
page{
background-color: #fff;
}
.page {
position: relative;
font-size: 28rpx;
background-color: #fff;
}
.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/b4cfc20240229163236372.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;
view{
flex: 1;
text-align: center;
}
.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/e5b2e202402291538018132.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;
font-size: 26rpx;
}
.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;
margin-bottom: 30rpx;
}
.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;
}
}
}
}
}
.h430{
height: 430rpx;
}
.h310{
height: 310rpx;
}
</style>