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.
263 lines
5.6 KiB
263 lines
5.6 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">???</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.price}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">联系方式</view>
|
|
<view class="value">
|
|
<uv-input v-model="form.phone" placeholder="请输入联系方式" border="bottom" type='number'
|
|
clearable></uv-input>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">剩余推广时长</view>
|
|
<view class="value">{{item.price}}</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>
|
|
|
|
|
|
<!--确认发布弹框-->
|
|
<uv-popup ref="popup" mode="center" custom-style="height: 400rpx;" :closeOnClickOverlay="false">
|
|
<view class="content">
|
|
<view class="title">
|
|
推广选项
|
|
</view>
|
|
<!--付费周期-->
|
|
<view style="" class="payCycle">
|
|
<view>付费周期</view>
|
|
<view style="width: 200rpx;height:50rpx">
|
|
<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
|
|
<view style="display: flex;justify-content: flex-start" @click="openPicker">
|
|
<span style="margin-right: 10rpx;">{{ form.cycle }}</span>
|
|
<uv-icon name="arrow-down" color="#2979ff" size="28"></uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!--金额-->
|
|
<view style="width:100%;display: flex;justify-content: space-between;align-items: center;">
|
|
<view>金额</view>
|
|
<view style="width: 200rpx;height:50rpx">
|
|
<uv-input type="number" placeholder="请输入内容" border="surround" v-model="form.moneyValue"
|
|
@change="moneyValueChange"></uv-input>
|
|
</view>
|
|
</view>
|
|
|
|
<!--确认推广按钮-->
|
|
<view class="confirmBottom">
|
|
<button @click="confirmPromotion" class="confirmBtn">
|
|
确认推广
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
<uv-toast ref="toast"></uv-toast>
|
|
|
|
|
|
</view>
|
|
|
|
<!--继续推广按钮-->
|
|
<button @click="continueToPromotion" class="bottomBtn">
|
|
继续推广
|
|
</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import '../../../../common.css'; // 引入公共 CSS 文件
|
|
export default {
|
|
onLoad: function(options) {
|
|
const id = options.id;
|
|
},
|
|
data() {
|
|
return {
|
|
columns: [
|
|
['一天', '两天', '三天']
|
|
],
|
|
form: {
|
|
moneyValue: 0,
|
|
cycle: '一天',
|
|
phone: '',
|
|
},
|
|
item: {},
|
|
param: {
|
|
type: 'default',
|
|
title: '结束后跳转标签页',
|
|
message: "推广成功",
|
|
url: '/pages/componentsD/tag/tag'
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
// 获取推广详情数据
|
|
getData() {
|
|
this.$api('infoGetPromotionDetail', {}, res => {
|
|
if (res.code == 200) {
|
|
this.item = res.result.records
|
|
}
|
|
})
|
|
},
|
|
|
|
openPicker() {
|
|
this.$refs.picker.open();
|
|
},
|
|
confirm(e) {
|
|
console.log('confirm', e);
|
|
this.form.cycle = e.value[0]
|
|
},
|
|
// 继续推广按钮
|
|
continueToPromotion() {
|
|
this.$refs.popup.open();
|
|
},
|
|
// 金额发生变化
|
|
moneyValueChange(e) {
|
|
console.log('moneyValue', e);
|
|
this.form.moneyValue = e
|
|
},
|
|
// 确认推广
|
|
confirmPromotion() {
|
|
console.log('确认推广', this.form);
|
|
this.$refs.toast.show({
|
|
...this.param,
|
|
complete() {
|
|
this.param.url && uni.navigateTo({
|
|
url: this.param.url
|
|
})
|
|
}
|
|
})
|
|
// this.$refs.toast.show()
|
|
// this.$api('ConfirmPromotion', {}, res => {
|
|
// if (res.code == 200) {
|
|
// //跳转到支付页面。。。
|
|
|
|
// }
|
|
// })
|
|
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
bottom: 30rpx;
|
|
left: 25%;
|
|
width: 50%;
|
|
height: 100rpx;
|
|
|
|
.continueBtn {
|
|
color: #ffffff;
|
|
background: $uni-linear-gradient-btn-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.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>
|