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.
429 lines
9.9 KiB
429 lines
9.9 KiB
<template>
|
|
<view class="promotionDetail">
|
|
<!--顶部导航栏-->
|
|
<navbar leftClick @leftClick="$utils.navigateBack" title="推广详情" />
|
|
|
|
<!--主页面-->
|
|
<view class="frame">
|
|
<!--标题-->
|
|
<view class="title">
|
|
<span>推广基本信息</span>
|
|
</view>
|
|
|
|
<!--基本信息-->
|
|
<view style="" class="basicInfo">
|
|
<!-- <view class="item">
|
|
<view class="label">推广名称</view>
|
|
<view class="value">
|
|
<uv-input v-model="form.promotionName" placeholder="请输入推广名称" border="bottom" type='number'
|
|
clearable></uv-input>
|
|
</view>
|
|
</view> -->
|
|
<view class="item">
|
|
<view class="label">推广作品名称</view>
|
|
<view class="value">{{item.name}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">价格</view>
|
|
<view class="value">{{item.price }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">时长</view>
|
|
<view class="value">{{item.tuTime}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">联系方式</view>
|
|
<view class="value">
|
|
<uv-input v-model="item.phone" placeholder="请输入联系方式" border="bottom" type='number'
|
|
clearable></uv-input>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">剩余推广时长</view>
|
|
<view class="value">{{item.remainingPromotionTime}}</view>
|
|
</view>
|
|
|
|
|
|
<!-- <view>推广作品</view>
|
|
<view style="width: 30%;height: 300rpx;border-radius: 20rpx;overflow: hidden;">
|
|
<image :src="item.image" style="width: 100%;height: 100%;"></image>
|
|
</view> -->
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- ActionSheet 操作菜单 -->
|
|
<uv-action-sheet ref="actionSheet" :actions="upTopList" title="选择推广时长" @select="select" @close="close"
|
|
:closeOnClickAction="false">
|
|
</uv-action-sheet>
|
|
|
|
<!--确认发布弹框-->
|
|
<uv-popup ref="popup" mode="center" custom-style="height: 400rpx;">
|
|
<view class="content">
|
|
<view class="title">
|
|
推广选项
|
|
</view>
|
|
<!--付费周期-->
|
|
<view style="" class="payCycle">
|
|
<view>付费周期</view>
|
|
<view>{{popupData.day}}天</view>
|
|
</view>
|
|
|
|
<!--金额-->
|
|
<view style="width:100%;display: flex;justify-content: space-between;align-items: center;">
|
|
<view>金额</view>
|
|
<view>￥{{popupData.money}}</view>
|
|
</view>
|
|
|
|
<!--确认推广按钮-->
|
|
<view class="confirmBottom">
|
|
<button @click="confirmPromotion" class="confirmBtn">
|
|
确认推广
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
|
|
<!--支付弹框-->
|
|
<confirmationPopup ref="confirmationPopup" title="提示" @confirm="payOrder" confirmText="确认支付">
|
|
<view class="confirmationPopup">
|
|
<image src="/static/image/publish/pay.png" style="width: 150rpx;height: 150rpx;" mode=""></image>
|
|
<view class="info">
|
|
确认支付{{ popupData.money }}元，可置顶{{ popupData.day }}天
|
|
</view>
|
|
</view>
|
|
</confirmationPopup>
|
|
|
|
<!-- 平台审核弹框 -->
|
|
<confirmationPopup ref="confirmationPopupUpload" title="提示" confirmText="确认" @confirm="confirm()">
|
|
<view class="confirmationPopup">
|
|
<image src="/static/image/publish/upload.png" style="width: 150rpx;height: 150rpx;" mode=""></image>
|
|
<view class="info">
|
|
已由平台进行审核，时间周期为24小时
|
|
</view>
|
|
</view>
|
|
</confirmationPopup>
|
|
</view>
|
|
|
|
<!--继续推广按钮-->
|
|
<button @click="continueToPromotion" class="bottomBtn">
|
|
继续推广
|
|
</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from 'dayjs';
|
|
import '../../../../common.css'; // 引入公共 CSS 文件
|
|
import confirmationPopup from '@/components/toast/confirmationPopup.vue'
|
|
export default {
|
|
onLoad(options) {
|
|
// if (options.item) {
|
|
// let item = JSON.parse(decodeURIComponent(options.item));
|
|
// }
|
|
console.log(options.id,"opID");
|
|
this.item.id = options.id
|
|
},
|
|
components: {
|
|
confirmationPopup
|
|
},
|
|
data() {
|
|
return {
|
|
upTopList: [],
|
|
payList: [],
|
|
payId: null,
|
|
item: {
|
|
day: 0,
|
|
money: 0,
|
|
},
|
|
popupData: {
|
|
day: 0,
|
|
money: 0,
|
|
},
|
|
param: {
|
|
type: 'default',
|
|
title: '结束后跳转标签页',
|
|
message: "推广成功",
|
|
url: '/pages/componentsD/tag/tag'
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
this.indexTopPayList()
|
|
},
|
|
methods: {
|
|
// 获取推广详情数据
|
|
getData() {
|
|
this.$api('infoGetPromotionDetail', {
|
|
id: this.item.id
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
console.log(res.result,"res.result");
|
|
this.item = res.result
|
|
|
|
// 计算推广时间加上置顶时间
|
|
const futureTime = dayjs(this.item.createTime).add(this.item.tuTime, "day")
|
|
|
|
// 获取当前时间
|
|
const now = dayjs();
|
|
|
|
// 计算两个时间之间的差异（毫秒）
|
|
const diff = futureTime.diff(now);
|
|
|
|
// 将毫秒转换为小时和天
|
|
const hours = Math.floor(diff / 3600000);
|
|
const days = Math.floor(hours / 24);
|
|
|
|
// 根据时间差显示不同的格式
|
|
if (days > 0) {
|
|
// 超过24小时
|
|
const remainingHours = hours % 24;
|
|
console.log(`${days}天${remainingHours}小时`);
|
|
this.item.remainingPromotionTime = `${days}天${remainingHours}小时`
|
|
} else {
|
|
// 没有超过24小时
|
|
console.log(`${hours}小时`);
|
|
this.item.remainingPromotionTime = `${hours}小时`
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取置顶方式
|
|
indexTopPayList() {
|
|
this.$api('indexTopPayList', res => {
|
|
if (res.code == 200) {
|
|
for (var i = 0; i < res.result.length; i++) {
|
|
this.payList = res.result
|
|
this.upTopList.push({
|
|
name: '置顶' + res.result[i].day + '天' + res.result[i].money + '元'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
select(e) {
|
|
console.log('选中该项：', e);
|
|
// 使用正则表达式匹配整数和浮点数
|
|
const matches = e.name.match(/(\d+\.?\d*)/g).map(Number);
|
|
|
|
// 如果匹配到数字，则输出
|
|
if (matches && matches.length >= 2) {
|
|
// console.log(matches, "matches");
|
|
for (var i = 0; i < this.payList.length; i++) {
|
|
if (this.payList[i].day == matches[0]) {
|
|
this.payId = this.payList[i].id
|
|
}
|
|
}
|
|
|
|
|
|
// 提取天数和金额
|
|
this.popupData.day = matches[0]; // 例如，置顶天数
|
|
this.popupData.money = matches[1]; // 例如，金额
|
|
this.$refs.actionSheet.close() //关闭弹框
|
|
this.$refs.popup.open() //打开另外一个弹框
|
|
}
|
|
},
|
|
|
|
// ActionSheet 操作菜单关闭
|
|
close() {
|
|
this.$refs.actionSheet.close() //关闭弹框
|
|
// this.$refs.popup.open() //打开另外一个弹框
|
|
},
|
|
|
|
// 提交平台审核的弹框的确认回调
|
|
confirm(e) {
|
|
uni.navigateTo({
|
|
url: "/pages/index/index"
|
|
})
|
|
},
|
|
// 继续推广按钮
|
|
continueToPromotion() {
|
|
if (this.item.phone == '' || this.item.phone == null) {
|
|
return uni.showToast({
|
|
title: '请输入联系电话',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
this.$refs.actionSheet.open();
|
|
},
|
|
|
|
// 确认发布弹框
|
|
confirmPromotion() {
|
|
this.$refs.confirmationPopup.open()
|
|
this.$refs.popup.close()
|
|
},
|
|
|
|
|
|
// 发起支付
|
|
payOrder() {
|
|
let self = this
|
|
|
|
console.log(self.item.id, "self.item.id");
|
|
let data = {
|
|
id: self.item.id,
|
|
dayId: self.payId
|
|
}
|
|
|
|
|
|
self.$api('confirmPromotion', data,
|
|
res => {
|
|
console.log(res,"res");
|
|
if (res.code == 200) {
|
|
uni.requestPayment({
|
|
provider: 'wxpay', // 服务提提供商
|
|
timeStamp: res.result.timeStamp, // 时间戳
|
|
nonceStr: res.result.nonceStr, // 随机字符串
|
|
package: res.result.packageValue,
|
|
signType: res.result.signType, // 签名算法
|
|
paySign: res.result.paySign, // 签名
|
|
success: function(res) {
|
|
console.log('支付成功', res);
|
|
self.$refs.confirmationPopupUpload.open()
|
|
// self.$refs.confirmationPopup.close()
|
|
},
|
|
fail: function(err) {
|
|
console.log('支付失败', err);
|
|
self.$refs.confirmationPopup.close()
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: "支付失败"
|
|
})
|
|
}
|
|
});
|
|
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.promotionDetail {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
.frame {
|
|
width: 100%;
|
|
//height: calc(100vh - 220rpx);
|
|
padding: 28rpx 28rpx 0 28rpx;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.basicInfo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 60rpx;
|
|
margin-top: 50rpx;
|
|
width: 90%;
|
|
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.label {
|
|
width: 60%;
|
|
}
|
|
|
|
.value {
|
|
width: 40%;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
bottom: 30rpx;
|
|
left: 25%;
|
|
width: 50%;
|
|
height: 100rpx;
|
|
|
|
.continueBtn {
|
|
color: #ffffff;
|
|
background: $uni-linear-gradient-btn-color;
|
|
}
|
|
}
|
|
|
|
|
|
.confirmationPopup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 300rpx;
|
|
|
|
image {
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.info {
|
|
margin-top: 40rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
gap: 20rpx;
|
|
width: 600rpx;
|
|
height: 100%;
|
|
padding: 20rpx;
|
|
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.payCycle {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.confirmBtn {
|
|
width: 50%;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
background: linear-gradient(to right, #3c69f1, #5f3bf5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
margin-top: 50rpx;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/deep/ .uv-popup .uv-popup__content {
|
|
border-radius: 20rpx;
|
|
}
|
|
</style>
|