You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
yanzong_qianduan/pages/news/caigou/notice6.vue

546 lines
15 KiB

<template>
<view class="notice">
<view class="notice-navbar">
<u-navbar title="权益礼包" :border-bottom="false" :background="background1"></u-navbar>
</view>
<view class="notice-bd">
<view class="a">
<view class="title">认证商家专享权益包</view>
<view class="desc">开通享8大权益</view>
<view class="list">
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-01.png"></image>
订货优惠券
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-02.png"></image>
专享活动
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-03.png"></image>
专享券
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-04.png"></image>
直采价
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-05.png"></image>
线报
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-06.png"></image>
快速发货
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-07.png"></image>
专属客服
</view>
</view>
</view>
<view class="b">
<view class="title">服务权益</view>
<view class="list">
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-08.png"></image>
<view class="info">
<view class="name">订货优惠券</view>
<view class="desc">平台针对所有认证成功的采购商定期或不定期发放订货优惠券以及新人优惠券</view>
</view>
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-09.png"></image>
<view class="info">
<view class="name">专享活动/专享券</view>
<view class="desc">平台针对采购量大的采购商推出专享活动或发放专享券采购量大的采购商有权参与可获得专享优惠</view>
</view>
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-10.png"></image>
<view class="info">
<view class="name">直采价</view>
<view class="desc">平台将不断对接更多品类的供应链资源让平台上每一位采购商获取更多跨界的产品直采资源</view>
</view>
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-11.png"></image>
<view class="info">
<view class="name">线报</view>
<view class="desc">平台将每天在广场推出每日线报方便采购商获取最新前沿的商品渠道行情助力采购商零售批发双线齐发</view>
</view>
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-12.png"></image>
<view class="info">
<view class="name">专属客服</view>
<view class="desc">每天09:00-21:00(周一至周六)在线实时解答订货疑虑提供各种采购指导及售后处理</view>
</view>
</view>
<view class="item">
<image src="https://www.amiami.com.cn/static/caigou/icon-m-13.png"></image>
<view class="info">
<view class="name">认证服务费</view>
<view class="desc">采购商如果在支付认证服务费后10日内如未在本平台产生任何订单(包括退款订单)支持认证服务费退费申请平台将在2个工作日内给您退回认证服务费</view>
</view>
</view>
</view>
</view>
<view class="pay-bd" v-if="orcInfo.isToWrite">
<view class="title">选择支付方式</view>
<view class="item" v-for="(a,i) in paymentMethods" @click="tabItem1(i)">
<image v-if="tabIndex == i" src="https://www.amiami.com.cn/static/invoice/select-on.png"></image>
<image v-else src="https://www.amiami.com.cn/static/invoice/select.png"></image>
{{a.method == 'huifu' ? '银联支付' : (a.method == 'wechat'?'微信支付':'余额支付')}}<text v-if="a.method == 'balance'">(余额:{{personal.balance}})</text>
</view>
</view>
</view>
<view class="notice-fd">
<view class="btn" v-if="orcInfo.isToWrite" @click="openPage()">( ¥{{info.price}}/年 <text>¥{{info.year}}/年 </text> ) 去支付</view>
<view class="btn" v-else @click="openPage1()">立即提交</view>
</view>
<addShuiyin />
</view>
</template>
<script>
import { Wechat } from '@/core/payment'
import * as CashierApi from '@/api/cashier';
import * as newFunApi from '@/api/newFun'
export default {
data() {
return {
background1: {
background: "url(https://www.amiami.com.cn/static/caigou/bg@2x.png) center top no-repeat",
backgroundSize: '100% auto',
},
info: {},
orcInfo: {},
paymentMethods: {},
personal: {},
isClick: true,
tabIndex: 0,
};
},
onReady() {
this.orcInfo = uni.getStorageSync("orcInfo");
this.wholesalerPrice();
},
onLoad() {
uni.$on('appShow', this.solveShowMsg);
},
onUnload() {
uni.$off('appShow', this.solveShowMsg);
},
methods: {
solveShowMsg(info) {
console.log(info);
if (this.miniPayRequest && Object.keys(this.miniPayRequest).length > 0 && info.appId === this.miniPayRequest.miniuser) {
this.onTradeQuery(this.miniPayRequest.out_trade_no, this.paymentMethods[this.tabIndex].method);
}
},
// 设置默认的支付方式
setDefaultPayType() {
const app = this
const defaultIndex = app.paymentMethods.findIndex(item => item.is_default == true)
defaultIndex > -1 && app.tabItem1(defaultIndex);
},
tabItem1(i){
this.tabIndex = i
if (this.paymentMethods[this.tabIndex].method == "huifu") {
this.huifuPay();
}
},
//识别营业执照
async wholesalerPrice() {
const { status, data, message } = await newFunApi.wholesalerPrice({client:'MP-WEIXIN'});
if (status == 200) {
this.info = data.info
this.paymentMethods = data.paymentMethods
this.personal = data.personal
this.setDefaultPayType();
}
},
//微信支付
async toWechatPay() {
const that = this;
const {status, data } = await newFunApi.wholesalerSubmit({
method: 'wechat',
client: "MP-WEIXIN",
username: this.orcInfo.username,
mobile: this.orcInfo.mobile,
mobile_code: this.orcInfo.mobile_code,
card_front_img_id: this.orcInfo.card_front_img_id,
card_back_img_id: this.orcInfo.card_back_img_id,
license_img_id: this.orcInfo.license_img_id,
card_no: this.orcInfo.card_no,
door_img_id: this.orcInfo.door_img_id,
province_id: this.orcInfo.province_id,
company_name: this.orcInfo.company_name,
city_id: this.orcInfo.city_id,
credit_code: this.orcInfo.credit_code,
business: this.orcInfo.business,
avatar_id: this.orcInfo.avatar_id,
})
if(status == 200) {
Wechat.payment(data.payment)
.then((result) => {
console.log(22,result)
uni.showToast({
title: "支付成功"
})
this.isClick = true;
setTimeout(()=>{
uni.removeStorageSync("orcInfo");
uni.redirectTo({
url: "/pages/news/caigou/notice5"
})
},1000)
})
.catch(err => {
uni.showToast({
title: "支付失败"
})
this.isClick = true;
})
}
},
async huifuPay() {
const app = this;
const {status, data } = await newFunApi.wholesalerSubmit({
method: 'huifu',
client: "MP-WEIXIN",
username: this.orcInfo.username,
mobile: this.orcInfo.mobile,
mobile_code: this.orcInfo.mobile_code,
card_front_img_id: this.orcInfo.card_front_img_id,
card_back_img_id: this.orcInfo.card_back_img_id,
license_img_id: this.orcInfo.license_img_id,
card_no: this.orcInfo.card_no,
door_img_id: this.orcInfo.door_img_id,
province_id: this.orcInfo.province_id,
company_name: this.orcInfo.company_name,
city_id: this.orcInfo.city_id,
credit_code: this.orcInfo.credit_code,
business: this.orcInfo.business,
avatar_id: this.orcInfo.avatar_id,
})
if(status == 200) {
const { miniPayRequest, out_trade_no } = data.payment;
app.miniPayRequest = miniPayRequest;
app.miniPayRequest.out_trade_no = out_trade_no;
}
},
//去支付 余额支付
async toPay() {
const that = this;
const {status, message} = await newFunApi.wholesalerSubmit({
method: 'balance',
client: "MP-WEIXIN",
username: this.orcInfo.username,
mobile: this.orcInfo.mobile,
mobile_code: this.orcInfo.mobile_code,
card_front_img_id: this.orcInfo.card_front_img_id,
card_back_img_id: this.orcInfo.card_back_img_id,
license_img_id: this.orcInfo.license_img_id,
card_no: this.orcInfo.card_no,
door_img_id: this.orcInfo.door_img_id,
province_id: this.orcInfo.province_id,
company_name: this.orcInfo.company_name,
city_id: this.orcInfo.city_id,
credit_code: this.orcInfo.credit_code,
business: this.orcInfo.business,
avatar_id: this.orcInfo.avatar_id,
})
if(status == 200) {
uni.showToast({
title: "支付成功"
})
this.isClick = true;
setTimeout(()=>{
uni.removeStorageSync("orcInfo");
uni.redirectTo({
url: "/pages/news/caigou/notice5"
})
},1000)
}else{
this.isClick = true;
uni.showToast({
icon: "none",
title: message
})
}
},
openPage() {
if(this.isClick == false){
return;
}
this.isClick = false;
if(this.paymentMethods[this.tabIndex].method == "balance"){
if(Number(this.info.price) <= Number(this.personal.balance)){
this.toPay()
}else{
this.isClick = true;
uni.showToast({
icon: "none",
title: "余额不足,请选择其他支付方式"
})
}
}else if(this.paymentMethods[this.tabIndex].method == "wechat"){
this.toWechatPay();
} else if(this.paymentMethods[this.tabIndex].method == "huifu"){
this.isClick = true;
if (!this.miniPayRequest || Object.keys(this.miniPayRequest).length === 0) {
this.$toast(`暂无银联支付信息`);
return
}
let appPayRequest = '';
appPayRequest = encodeURIComponent(JSON.stringify({
sign: this.miniPayRequest.sign,
prepayid: this.miniPayRequest.prepayid,
}));
uni.openEmbeddedMiniProgram({
appId: this.miniPayRequest.miniuser,
path: `${this.miniPayRequest.minipath}?appPayRequest=${appPayRequest}`
});
}
},
async openPage1() {
if(this.isClick == false){
return;
}
this.isClick = false;
const that = this;
const {status, message} = await newFunApi.wholesalerEditApply({
client: "MP-WEIXIN",
username: this.orcInfo.username,
mobile: this.orcInfo.mobile,
mobile_code: this.orcInfo.mobile_code,
card_front_img_id: this.orcInfo.card_front_img_id,
card_back_img_id: this.orcInfo.card_back_img_id,
license_img_id: this.orcInfo.license_img_id,
card_no: this.orcInfo.card_no,
door_img_id: this.orcInfo.door_img_id,
province_id: this.orcInfo.province_id,
company_name: this.orcInfo.company_name,
city_id: this.orcInfo.city_id,
credit_code: this.orcInfo.credit_code,
business: this.orcInfo.business,
avatar_id: this.orcInfo.avatar_id,
})
if(status == 200) {
uni.showToast({
title: "提交成功"
})
this.isClick = true;
setTimeout(()=>{
uni.removeStorageSync("orcInfo");
uni.redirectTo({
url: "/pages/news/caigou/notice5"
})
},1000)
}else{
this.isClick = true;
uni.showToast({
icon: "none",
title: message
})
}
},
// 已完成支付按钮事件: 请求后端查单
onTradeQuery(outTradeNo, method) {
const app = this
// 交易查询
// 查询第三方支付订单是否付款成功
CashierApi.tradeQuery({
outTradeNo,
method,
client: app.platform
})
.then(result => {
if (result.data.isPay) {
uni.showToast({
title: result.message || "支付成功",
icon: 'success'
})
setTimeout(()=>{
uni.removeStorageSync("orcInfo");
uni.redirectTo({
url: "/pages/news/caigou/notice5"
})
},1000)
} else {
uni.showToast({
title: result.message || "支付失败",
icon: 'none'
})
}
})
.finally(() => app.showConfirmModal = false)
},
},
}
</script>
<style lang="scss" scoped>
.notice{
min-height: 100vh;
background: url(https://www.amiami.com.cn/static/caigou/bg@2x.png) center top no-repeat;
background-size: 100% auto;
padding-bottom: 150rpx;
&-bd{
width: 700rpx;
margin: 0 auto;
text-align: justify;
border-radius: 10rpx;
box-sizing: border-box;
padding: 0 20rpx;
box-sizing: border-box;
background-color: #fff;
margin: 0 auto;
margin-top: 20rpx;
.title{
padding: 30rpx 0;
font-size: 30rpx;
}
.item{
padding: 20rpx 0;
display: flex;
align-items: center;
font-size: 28rpx;
color: #212121;
image{
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
text{
margin-left: 20rpx;
color: #666;
}
}
.a{
width: 702rpx;
min-height: 454rpx;
background: #FFFFFF;
border-radius: 20rpx;
border: 1px solid #FFC8D7;
margin: 15rpx auto;
padding: 10rpx 20rpx 30rpx;
box-sizing: border-box;
text-align: center;
.title{
font-weight: 400;
font-size: 36rpx;
padding: 20rpx 0;
color: #222222;
}
.desc{
font-size: 24rpx;
color: #999999;
}
.list{
overflow: hidden;
.item{
width: 25%;
text-align: center;
float: left;
margin-top: 25rpx;
font-size: 24rpx;
color: #333333;
display: block;
image{
width: 90rpx;
height: 90rpx;
display: block;
margin: 0 auto 15rpx;
}
}
}
}
.b{
padding: 60rpx 0 20rpx;
.title{
font-size: 30rpx;
color: #222222;
position: relative;
&::after{
content: "";
width: 8rpx;
height: 30rpx;
border-radius: 10rpx;
background-color: #F34A40;
position: absolute;
left: -25rpx;
top: 4rpx;
z-index: 2;
}
}
.list{
.item{
padding: 30rpx 0 0;
overflow: hidden;
display: flex;
align-items: flex-start;
image{
width: 82rpx;
height: 82rpx;
margin-right: 20rpx;
}
.info{
padding-bottom: 30rpx;
border-bottom: 1px solid #E9E9E9;
max-width: 500rpx;
.name{
font-size: 28rpx;
color: #F34A40;
}
.desc{
font-size: 24rpx;
color: #666666;
line-height: 36rpx;
margin-top: 15rpx;
}
}
}
}
}
}
&-fd{
height: 140rpx;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 22;
background-color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
.btn{
width: 662rpx;
height: 90rpx;
line-height: 90rpx;
background: #F34A40;
border-radius: 90rpx;
text-align: center;
font-size: 32rpx;
color: #FFFFFF;
&-on{
background-color: #ccc;
}
text{
text-decoration: line-through;
font-size: 24rpx;
}
}
}
}
</style>