hly
/
pay-video-applet-uniapp-24-8-22
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

1.api文件中新增确认推广接口 2.确认推广页面完善

master
chenkun 1 year ago
parent
8b0a19d35f
commit
658948798a
4 changed files with 270 additions and 236 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -0
      api/api.js
  2. +0
    -26
      pages_mine/mine/promotionRecord.vue
  3. +256
    -205
      pages_mine/mine/sonPage/promotion/promotionDetail.vue
  4. +8
    -5
      pages_mine/mine/sonPage/promotion/promotionRecordList.vue

+ 6
- 0
api/api.js View File

@ -119,6 +119,12 @@ const config = {
method: 'GET', method: 'GET',
auth: true auth: true
}, },
// 确认推广
ConfirmPromotion: {
url: '/api/info/confirmPromotion',
method: 'POST',
auth: true
},
// 获取推广记录列表 // 获取推广记录列表
infoGetPromotionPage: { infoGetPromotionPage: {
url: '/api/info/getPromotionPage', url: '/api/info/getPromotionPage',


+ 0
- 26
pages_mine/mine/promotionRecord.vue View File

@ -99,7 +99,6 @@ export default {
}) })
}, },
keyWordChange(val) { keyWordChange(val) {
console.log("val", val)
this.queryParams.keyWord = val this.queryParams.keyWord = val
this.getData() this.getData()
}, },
@ -122,31 +121,6 @@ export default {
endDateOpen() { endDateOpen() {
this.$refs.endDateRef.open(); this.$refs.endDateRef.open();
}, },
// startDateFormatter(type, value) {
// if (type === 'year') {
// return `${value}年`
// }
// if (type === 'month') {
// return `${value}月`
// }
// if (type === 'day') {
// return `${value}日`
// }
// return value
// },
// endDateFormatter(type, value) {
// console.log(type, value, "======endDateFormatter=======")
// if (type === 'year') {
// return `${value}年`
// }
// if (type === 'month') {
// return `${value}月`
// }
// if (type === 'day') {
// return `${value}日`
// }
// return value
// }
} }
} }


+ 256
- 205
pages_mine/mine/sonPage/promotion/promotionDetail.vue View File

@ -1,212 +1,263 @@
<template> <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>
<!--确认发布弹框-->
<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>
<!--继续推广按钮-->
<button @click="continueToPromotion" class="bottomBtn">
继续推广
</button>
</view>
<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> </template>
<script> <script>
import '../../../../common.css'; // 引入公共 CSS 文件
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]
},
// 继续推广按钮
continueToPromotion() {
this.$refs.popup.open();
},
// 金额发生变化
moneyValueChange(e) {
console.log('moneyValue', e);
this.form.moneyValue = e
},
// 确认推广
confirmPromotion() {
console.log('确认推广', this.form);
}
}
}
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> </script>
<style lang="scss" scoped> <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;
}
}
}
/deep/ .uv-popup .uv-popup__content {
border-radius: 20rpx;
}
</style>
* {
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>

+ 8
- 5
pages_mine/mine/sonPage/promotion/promotionRecordList.vue View File

@ -1,7 +1,7 @@
<template> <template>
<view class="promotionRecordList"> <view class="promotionRecordList">
<view class="item" v-for="(item, index) in list" <view class="item" v-for="(item, index) in list"
@click="$utils.navigateTo(`/mine/sonPage/promotion/promotionDetail?id=${item.id}`)"
@click="gotoItem(item)"
:key="index"> :key="index">
<image src="/static/image/center/1.png" style="width: 40%"></image> <image src="/static/image/center/1.png" style="width: 40%"></image>
<view class="text"> <view class="text">
@ -11,7 +11,7 @@
</view> </view>
<view class="createBy"> <view class="createBy">
<view class=""> <view class="">
推广时效：{{ item.createBy }}
推广时效：{{ item.goTiime }}小时
</view> </view>
</view> </view>
</view> </view>
@ -39,9 +39,12 @@ export default {
return {}; return {};
}, },
methods: { methods: {
gotoPage(item) {
this.$utils.navigateTo('/mine/promotionDetail')
}
gotoItem(item) {
uni.navigateTo({
url: '/pages_mine' + `/mine/sonPage/promotion/promotionDetail?id=${item.id}`
})
},
}, },
} }
</script> </script>


Write Preview
Loading…
Cancel
Save