feawt: 新增订阅设置和订阅推送设置页面

src/pages/subscribe/manage/index.vue

@@ -1,32 +1,174 @@
 <template>
-  <view class="must-page-class-name j-container">
-    <div class="j-header">
+  <view class="must-page-class-name j-container subscribe-manage-page use-bg">
+    <div class="page-header-container j-header">
       <van-nav-bar
         title="订阅管理"
         left-arrow
         @click-left="doBack"
       />
     </div>
+    <div class="j-main ">
+      <div class="subscribe-manage-content">
+        <div class="subscribe-info-container free" v-if="false">
+          <!-- <img src="" alt=""> -->
+        </div>
+        <div class="subscribe-info-container vip">
+          <div class="subscribe-info-content">
+            <div class="subscribe-info-label">订阅周期</div>
+            <div class="subscribe-info-content">2020年09月06日 - 2031年07月03日</div>
+          </div>
+        </div>
+        <div class="subscribe-action-list">
+          <JCell is-link :value="selectInfo.area" @click="toSetArea">
+            <template #title>
+              <span class="subscribe-title-container">
+                <span class="iconfont icon-weizhi"></span>
+                <span class="subscribe-item-label">区域</span>
+              </span>
+            </template>
+          </JCell>
+          <JCell is-link :value="'已选：' + selectInfo.infoType" @click="toSetInfoType">
+            <template #title>
+              <span class="subscribe-title-container">
+                <span class="iconfont icon-xinxileixing"></span>
+                <span class="subscribe-item-label">信息类型</span>
+              </span>
+            </template>
+          </JCell>
+          <JCell is-link @click="toSetPushSetting">
+            <template #title>
+              <span class="subscribe-title-container">
+                <span class="iconfont icon-mine_export"></span>
+                <span class="subscribe-item-label">推送设置</span>
+              </span>
+            </template>
+          </JCell>
+        </div>
+      </div>
+    </div>
   </view>
 </template>
 
 <script>
 import Taro from '@tarojs/taro'
 import { NavBar } from 'vant'
+import { JCell } from '@/ui'
 
 export default {
   name: 'SubscribeManage',
   components: {
-    [NavBar.name]: NavBar
+    [NavBar.name]: NavBar,
+    JCell
   },
   data() {
-    return {}
+    return {
+      selectInfo: {
+        area: '-',
+        infoType: '-'
+      }
+    }
   },
   created() {},
   methods: {
     doBack() {
       Taro.navigateBack()
     },
+    toSetArea() {
+      Taro.navigateTo({
+        url: '/pages/subscribe/setting/area'
+      })
+    },
+    toSetInfoType() {
+      console.log('toSetInfoType')
+    },
+    toSetPushSetting() {
+      Taro.navigateTo({
+        url: '/pages/subscribe/push/index'
+      })
+    },
   }
 }
 </script>
+
+<style lang="scss">
+.subscribe-manage-page {
+  background-color: #F5F6F7;
+  &.use-bg {
+    background-image: url(https://cdn-common.jianyu360.com/cdn/assets/mini-app/images/bg/subscribe-header-bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    background-position: center -90px;
+  }
+  .page-header-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .van-nav-bar {
+    background: transparent;
+    .van-icon {
+      font-size: 20px;
+      color: #fff;
+    }
+  }
+  .van-nav-bar__title {
+    color: #fff;
+  }
+  .subscribe-info-container {
+    margin: 0 12px;
+    border-radius: 12px;
+    height: 88px;
+    
+    &.free {
+      background: linear-gradient(90deg, #FEE7D1 1%, #FBD3C2 100%);
+    }
+
+    &.vip {
+      display: flex;
+      align-items: center;
+      background: linear-gradient(270deg, #F1D090 0%, #FAE7CA 100%);
+      box-shadow: 0px 12px 16px rgba(250, 231, 202, 0.32);
+      padding: 8px 32px;
+    }
+
+    .subscribe-info-label {
+      font-size: 15px;
+      color: #1B1A2A;
+      line-height: 24px;
+    }
+    .subscribe-info-content {
+      font-size: 12px;
+      color: #5F5E64;
+      line-height: 18px;
+    }
+  }
+  .subscribe-action-list {
+    margin-top: 12px;
+    background-color: $white;
+  }
+
+  .j-row-cell {
+    position: relative;
+    &:not(:last-of-type)::after {
+      content: '';
+      position: absolute;
+      left: 42px;
+      bottom: 0;
+      width: 100%;
+      height: 1px;
+      background-color: $border_color_3;
+    }
+  }
+  .subscribe-title-container {
+    display: flex;
+    align-items: center;
+    color: #171826;
+    .iconfont {
+      font-size: 20px;
+    }
+    .subscribe-item-label {
+      margin-left: 8px;
+    }
+  }
+}
+</style>

src/pages/subscribe/push/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '订阅管理'
+})

src/pages/subscribe/push/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <view class="must-page-class-name j-container subscribe-push-setting">
+    <div class="j-main">
+      <div class="s-divider-line"></div>
+      <div class="setting-group radio-container push-methods">
+        <van-cell title="推送渠道">
+          <template #icon>
+            <span class="iconfont icon-byEmail"></span>
+          </template>
+        </van-cell>
+        <van-cell-group>
+          <van-cell
+            title="微信提醒"
+            center
+            class="wx-tip"
+            label="根据设置的推送时间通过微信公众号发送消息"
+            value="未关注"></van-cell>
+        </van-cell-group>
+      </div>
+      <div class="s-divider-line"></div>
+    </div>
+  </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro'
+import { Cell, CellGroup } from 'vant'
+
+export default {
+  name: 'SubscribePushSetting',
+  components: {
+    [CellGroup.name]: CellGroup,
+    [Cell.name]: Cell
+  },
+  data() {
+    return {
+      settingConf: {
+        wxFollow: true
+      }
+    }
+  },
+  created() {},
+  methods: {}
+}
+</script>
+<style lang="scss">
+.subscribe-push-setting {
+  .s-divider-line {
+    height: 12px;
+    background-color: #F5F6F7;
+  }
+  .van-cell {
+    padding: 16px;
+    &::after {
+      content: unset;
+    }
+    .iconfont {
+      color: $main;
+      margin-right: 14px;
+    }
+    .van-cell__label {
+      white-space: nowrap;
+    }
+  }
+
+  .wx-tip {
+    height: 60px;
+  }
+
+
+}
+</style>