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.
225 lines
5.1 KiB
225 lines
5.1 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">100</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">时长</view>
|
|
<view class="value">24小时</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">联系方式</view>
|
|
<view class="value">输入框</view>
|
|
</view>
|
|
<view>推广作品</view>
|
|
<view style="width: 30%;height: 300rpx;border-radius: 20rpx;overflow: hidden;">
|
|
<image src="/static/image/promotionRecord/3.png" style="width: 100%;height: 100%;"></image>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 继续发布按钮-->
|
|
<view class="bottom">
|
|
<button @click="continueToPublish" class="continueBtn">
|
|
继续发布
|
|
</button>
|
|
</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="confirmPromotionBtn">
|
|
确认推广
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
onLoad: function (options) {
|
|
// 获取传递过来的 id 参数
|
|
const id = options.id;
|
|
console.log('ID:', id);
|
|
// 进行后续处理...
|
|
},
|
|
data() {
|
|
return {
|
|
columns: [
|
|
['一天', '两天', '三天']
|
|
],
|
|
form: {
|
|
moneyValue: 0,
|
|
cycle: '一天'
|
|
},
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
openPicker() {
|
|
this.$refs.picker.open();
|
|
},
|
|
confirm(e) {
|
|
console.log('confirm', e);
|
|
this.form.cycle = e.value[0]
|
|
},
|
|
// 推广确认按钮
|
|
continueToPublish() {
|
|
this.$refs.popup.open();
|
|
},
|
|
// 金额发生变化
|
|
moneyValueChange(e) {
|
|
console.log('moneyValue', e);
|
|
this.form.moneyValue = e
|
|
},
|
|
// 确认推广
|
|
confirmPromotion() {
|
|
console.log('确认推广', this.form);
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
|
|
.confirmBottom {
|
|
position: fixed;
|
|
bottom: 38%;
|
|
left: 30%;
|
|
width: 38%;
|
|
height: 100rpx;
|
|
|
|
.confirmPromotionBtn {
|
|
color: #ffffff;
|
|
background: $uni-linear-gradient-btn-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.uv-popup .uv-popup__content{
|
|
border-radius: 20rpx;
|
|
}
|
|
</style>
|