素材推广

app.json

@@ -1,13 +1,16 @@
 {
     "pages": [
-        "pages/tabbar/mine/index",
+        "pages/promotional/index",
         "pages/tabbar/home/index",
+        "pages/tabbar/mine/index",
         "pages/tabbar/smartStore/index",
         "pages/tabbar/message/index",
         "pages/tabbar/workbench/index",
         "pages/annunciate/index",
         "pages/annunciate/details",
-        "pages/tabbar/mine/userMsg/index"
+        "pages/tabbar/mine/userMsg/index",
+        "pages/promotional/details",
+        "pages/promotional/upload"
     ],
     "usingComponents": {
         "My_card": "/components/My_card/index",

custom-tab-bar/index.js

@@ -12,6 +12,13 @@ Component({
     /**
      * 组件的初始数据
      */
+
+     /* 
+            {
+                icon: 'icon-a-biaoqianlangongzuo',
+                text: '工作',
+                url: '/pages/tabbar/workbench/index'
+            }, */
     data: {
         active: 0,
         tabbarList: [{
@@ -24,11 +31,6 @@ Component({
                 text: '信息',
                 url: '/pages/tabbar/message/index'
             },
-            {
-                icon: 'icon-a-biaoqianlangongzuo',
-                text: '工作',
-                url: '/pages/tabbar/workbench/index'
-            },
             {
                 icon: 'icon-a-biaoqianlanzhiku',
                 text: '智库',

pages/promotional/details.js

@@ -0,0 +1,66 @@
+// pages/promotional/details.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/promotional/details.json

@@ -0,0 +1,4 @@
+{
+    "navigationBarTitleText": "素材详情",
+    "usingComponents": {}
+}

pages/promotional/details.scss

@@ -0,0 +1,64 @@
+/* 头部 */
+.header {
+    width: 750rpx;
+    padding: 30rpx;
+    background-color: #ffffff;
+    box-sizing: border-box;
+
+    .title {
+        font-size: 30rpx;
+        font-family: PingFang SC-Bold, PingFang SC;
+        font-weight: bold;
+        color: #333333;
+    }
+
+    .display-data {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        height: 28rpx;
+        line-height: 28rpx;
+        margin-top: 20rpx;
+        font-size: 20rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #999999;
+
+        text {
+            margin-right: 20rpx;
+        }
+
+        text:last-child {
+            margin-right: 0rpx;
+
+        }
+
+    }
+
+    .explain {
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #666666;
+        margin-top: 30rpx;
+    }
+}
+
+/* 吸底 */
+.footer {
+    position: fixed;
+    width: 750rpx;
+    background-color: #ffffff;
+    text-align: center;
+    padding: 20rpx 0;
+    bottom: 0;
+
+    &-button {
+        width: 500rpx;
+        height: 90rpx;
+        border-radius: 45rpx !important;
+        font-size: 28rpx;
+        font-family: PingFang SC-Bold, PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+    }
+}

pages/promotional/details.wxml

@@ -0,0 +1,16 @@
+<view class="header">
+    <view class="title multi-line">撒旦士大夫士大夫广泛的fdgroiefdojgf34598734958sogiudsfgojo时代光华士大夫发搜i规划的发给你卢卡斯发达国家哦i房管局梵蒂冈</view>
+    <view class="display-data">
+        <view>2022-12-12 12:20</view>
+        <view>
+            <text>浏览：30</text>
+            <text>分享：654</text>
+            <text>拉新：30</text>
+        </view>
+    </view>
+    <view class="explain multi-line">撒旦士大夫士大夫广泛的fdgroiefdojgf34598734958sogiudsfgojo时代光华士大夫发搜i规划的发给你卢卡斯发达国家哦i房管局梵蒂冈</view>
+</view>
+
+<view class="footer">
+    <van-button custom-class='footer-button' color="var(--warning)">分享</van-button>
+</view>

pages/promotional/index.js

@@ -0,0 +1,72 @@
+// pages/promotional/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        searchContent: "", //搜索内容
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    },
+    /**
+     * 用户分享到朋友圈
+     */
+    onShareTimeline() {
+
+    }
+})

pages/promotional/index.json

@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "推广素材",
+    "usingComponents": {
+        "van-search": "@vant/weapp/search/index",
+        "ProductList": "./modules/productList"
+    }
+}

pages/promotional/index.scss

@@ -0,0 +1,45 @@
+@import '/static/unread.wxss';
+
+/* 搜索和上传按钮 */
+.search-and-upload {
+    width: 750rpx;
+    height: 104rpx;
+    background-color: var(--primary);
+    box-sizing: border-box;
+    padding: 20rpx 30rpx;
+
+    .con {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.upload-box {
+    position: relative;
+    width: 190rpx;
+    height: 100%;
+    .upload {
+        position: absolute;
+        height: 64rpx;
+        display: flex;
+        align-items: center;
+        line-height: 64rpx;
+        border-radius: 32rpx;
+        border: 1rpx solid #fff;
+        padding: 0 20rpx !important;
+        box-sizing: border-box;
+        margin: 0 20rpx;
+        font-size: 28rpx;
+        font-family: PingFang SC-Bold, PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+        top: -30rpx;
+        text {
+            margin-right: 15rpx;
+        }
+    }
+
+
+}

pages/promotional/index.wxml

@@ -0,0 +1,18 @@
+<van-search value="{{ searchContent }}" use-action-slot shape="round" background="var(--primary)" placeholder="请输入搜索关键词">
+    <view class="upload-box" slot='action'>
+        <navigator url="/pages/promotional/upload" class="upload">
+            <text class="iconfont icon-a-tuiguangsucaishangchuan1" />
+            上传
+        </navigator>
+    </view>
+</van-search>
+
+<van-tabs swipeable sticky color='var(--assist)' title-active-color='var(--assist)' title-inactive-color='#999999'>
+    <van-tab title="列表">
+        <ProductList></ProductList>
+    </van-tab>
+    <van-tab title="我的素材">
+        <ProductList></ProductList>
+    </van-tab>
+    <van-tab title="拉新清单">内容 3</van-tab>
+</van-tabs>

pages/promotional/modules/productList.js

@@ -0,0 +1,27 @@
+// pages/promotional/modules/productList.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    options: {
+        addGlobalClass: true
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

pages/promotional/modules/productList.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

pages/promotional/modules/productList.scss

@@ -0,0 +1,61 @@
+/* 物料列表 */
+.product-list {
+    display: flex;
+    flex-wrap: wrap;
+    background: none !important;
+
+    .item {
+        width: 336rpx;
+        border-radius: 16rpx;
+        overflow: hidden;
+        border: 1rpx solid #DDDDDD;
+        margin-bottom: 20rpx;
+
+        .cover {
+            padding: 0 !important;
+            margin: 0 !important;
+        }
+
+        .details {
+            width: 100%;
+            background-color: #fff;
+            margin-top: -8rpx;
+            padding: 20rpx;
+            box-sizing: border-box;
+            border-bottom: 1rpx solid #eeeeee;
+            font-family: PingFang SC-Regular, PingFang SC;
+
+
+            .title {
+                font-size: 24rpx;
+                color: #333333;
+            }
+
+            .display-data {
+                display: flex;
+                justify-content: space-around;
+                height: 28rpx;
+                line-height: 28rpx;
+                margin-top: 10rpx;
+                font-size: 20rpx;
+                color: #999999;
+
+                text {
+                    margin-right: 6rpx;
+                    font-size: 28rpx;
+                }
+            }
+
+        }
+
+        .share-button {
+            height: 60rpx;
+            font-size: 24rpx;
+            color: #3874F6;
+        }
+    }
+
+    .item:nth-of-type(2n) {
+        margin-left: 10rpx;
+    }
+}

pages/promotional/modules/productList.wxml

@@ -0,0 +1,19 @@
+<view class="unread">总共20个，有1个更新</view>
+<My_card custom-class='product-list'>
+    <view url="/pages/promotional/details" class="item" wx:for="{{5}}">
+        <navigator url="/pages/promotional/details">
+            <van-image width="336rpx" height="247rpx" fit='cover' src="https://img.yzcdn.cn/vant/cat.jpeg" lazy-load />
+            <view class="details">
+                <view class="title line-1">
+                    标题标题标题标题标题标题标题标题标题标题
+                </view>
+                <view class="display-data">
+                    <view><text class="iconfont icon-a-tonggaoliulanliang" />99999</view>
+                    <view><text class="iconfont icon-a-tuiguangsucaifenxiangliang" />99999</view>
+                    <view><text class="iconfont icon-a-tuiguangsucailaxinliang" />99999</view>
+                </view>
+            </view>
+        </navigator>
+        <van-button custom-class='share-button' open-type='share' size="large">一键分享</van-button>
+    </view>
+</My_card>

pages/promotional/upload.js

@@ -0,0 +1,66 @@
+// pages/promotional/upload.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/promotional/upload.json

@@ -0,0 +1,4 @@
+{
+    "navigationBarTitleText": "发布素材",
+    "usingComponents": {}
+}

pages/promotional/upload.scss

@@ -0,0 +1,54 @@
+.box {
+    margin-top: 0 !important;
+    background: none !important;
+    font-size: 24rpx;
+
+    .label {
+        font-size: 28rpx;
+        font-family: PingFang SC-Bold, PingFang SC;
+        font-weight: bold;
+        height: 40rpx;
+        line-height: 40rpx;
+        color: #333333;
+        margin-top: 30rpx;
+
+        text {
+            float: right;
+            font-size: 24rpx;
+            font-family: PingFang SC-Regular, PingFang SC;
+            color: #999999;
+        }
+    }
+
+    .textarea {
+        height: 160rpx;
+        padding: 20rpx;
+    }
+
+    .category {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 90rpx;
+        padding: 0 20rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #666666;
+    }
+}
+
+.base {
+    width: 100%;
+    border-radius: 16rpx;
+    overflow: hidden;
+    background-color: #ffffff;
+    box-sizing: border-box;
+    margin-top: 20rpx;
+}
+
+.upload {
+    width: 500rpx;
+    height: 90rpx;
+    background: #3874F6 !important;
+    border-radius: 45rpx !important;
+    margin-top: 100rpx;
+}

pages/promotional/upload.wxml

@@ -0,0 +1,14 @@
+<My_card custom-class='box'>
+    <view class="label">素材标题</view>
+    <textarea class="textarea base" placeholder-style='font-size: 24rpx;' placeholder='请输入标题'></textarea>
+    <view class="label">所属分类</view>
+    <navigator class="category base" url="#">
+        <view>请选择素材分类</view>
+        <van-icon name="arrow-down" />
+    </navigator>
+    <view class="label">素材<text>已上传2个</text></view>
+</My_card>
+
+<view style="width: 100%; text-align: center;">
+    <van-button type="primary" custom-class='upload'>提交</van-button>
+</view>

project.private.config.json

@@ -28,6 +28,20 @@
                     "query": "",
                     "launchMode": "default",
                     "scene": null
+                },
+                {
+                    "name": "推广素材详情",
+                    "pathName": "pages/promotional/details",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
+                {
+                    "name": "发布素材",
+                    "pathName": "pages/promotional/upload",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
                 }
             ]
         }

static/font-icon.wxss

@@ -1,9 +1,9 @@
 @font-face {
     font-family: "iconfont"; /* Project id 3376421 */
-    src: url('//at.alicdn.com/t/font_3376421_mrfm9bkur9a.woff2?t=1652410014572') format('woff2'),
-         url('//at.alicdn.com/t/font_3376421_mrfm9bkur9a.woff?t=1652410014572') format('woff'),
-         url('//at.alicdn.com/t/font_3376421_mrfm9bkur9a.ttf?t=1652410014572') format('truetype'),
-         url('//at.alicdn.com/t/font_3376421_mrfm9bkur9a.svg?t=1652410014572#iconfont') format('svg');
+    src: url('//at.alicdn.com/t/font_3376421_27w1cny95mq.woff2?t=1652685109017') format('woff2'),
+         url('//at.alicdn.com/t/font_3376421_27w1cny95mq.woff?t=1652685109017') format('woff'),
+         url('//at.alicdn.com/t/font_3376421_27w1cny95mq.ttf?t=1652685109017') format('truetype'),
+         url('//at.alicdn.com/t/font_3376421_27w1cny95mq.svg?t=1652685109017#iconfont') format('svg');
   }
   
   .iconfont {
@@ -14,6 +14,10 @@
     -moz-osx-font-smoothing: grayscale;
   }
   
+  .icon-PDF:before {
+    content: "\e62f";
+  }
+  
   .icon-a-wodebangdingweixin:before {
     content: "\e650";
   }
@@ -138,10 +142,6 @@
     content: "\e62e";
   }
   
-  .icon-PDF:before {
-    content: "\e62f";
-  }
-  
   .icon-shipin:before {
     content: "\e630";
   }