feat: 搜索、详情、支付页面完善

src/pages/order/create/index.config.js

@@ -1,3 +1,7 @@
 export default definePageConfig({
-  navigationBarTitleText: '创建订单'
+  navigationBarTitleText: '创建订单',
+  usingComponents: {
+    "van-radio-weapp": "@/vant/radio/index",
+    "van-radio-group-weapp": "@/vant/radio-group/index"
+  },
 })

src/pages/order/create/index.vue

@@ -1,26 +1,261 @@
 <template>
-  <view class="index">
-    {{msg}}
-    <button @click="doOpenPay({ id: 'xxxx' })">创建订单去支付</button>
-  </view>
+  <div class="must-page-class-name create-order-page">
+    <section class="module-area-count-selector">
+      <!-- 购买 -->
+      <JCell
+        class="buy-area-count-section"
+        title="购买区域"
+        v-if="buyType === 'buy'"
+      >
+        <template #label>
+          <van-radio-group-weapp
+            :value="selectedInfo.radio"
+            @change="onAreaCountRadioChange"
+          >
+            <van-radio-weapp name="num">
+              <template #icon="props">
+                <span
+                  class="j-icon checkbox"
+                  :class="{ checked: props.checked }"
+                ></span>
+              </template>
+              <div class="radio-content">
+                <span class="r-c-label">自定义</span>
+                <JStepper
+                  v-model="selectedInfo.areaCount"
+                  :min="1"
+                  :max="15"
+                  @change="onAreaCountChange($event, 'buy')"
+                  integer
+                >
+                  <template #content-suffix-text>个省</template>
+                </JStepper>
+              </div>
+            </van-radio-weapp>
+            <van-radio-weapp name="">
+              <template #icon="props">
+                <span
+                  class="j-icon checkbox"
+                  :class="{ checked: props.checked }"
+                ></span>
+              </template>
+              <div class="radio-content">
+                全国或{{ conf.maxAreaCount + 1 }}个省及以上
+              </div>
+            </van-radio-weapp>
+          </van-radio-group-weapp>
+        </template>
+      </JCell>
+    </section>
+    <div class="order-spec-list-container">
+      <spec-list :list="specList" @change="onChangeSpec" v-model="activeSpec"></spec-list>
+    </div>
+    <img class="order-desc-img" src="https://h5.jianyu360.cn/jy_mobile/assets/introduce-a97a5aea.png">
+    <van-submit-bar button-type="primary" :price="calcPrice" button-text="提交订单" @submit="onSubmit" />
+  </div>
 </template>
 
 <script>
 import Taro from "@tarojs/taro";
-
+import { SubmitBar } from "vant";
+import SpecList from "@/components/create-order/SpecList.vue";
+import { JCell, JStepper } from '@/ui'
+import {mapGetters} from "vuex";
 export default {
-  components: {},
+  components: {
+    SpecList,
+    JCell,
+    JStepper,
+    [SubmitBar.name]: SubmitBar
+  },
   data () {
     return {
-      msg: '创建订单页面'
+      buyType: 'buy',
+      conf: {
+        productId: '',
+        linkKey: 'vipSubLink',
+        defaultTitleText: '超级订阅',
+        maxAreaCount: 15
+      },
+      selectedInfoMap: {
+        buy: {
+          radio: '',
+          areaCount: 1
+        },
+        renew: {},
+        upgrade: {
+          radio: 'num', // 'num' / ''
+          areaCount: 1
+        }
+      },
+      activeSpec: 1,
+      specList: [
+        {
+          id: 1,
+          cycleType: 1, // 月
+          label: '1月',
+          value: '1个月',
+          price: 599,
+          desc: '每天仅需19.97元',
+          perDayPrice: 0,
+          productionId: 1012, // 产品id，后台配置
+          tipText: '',
+          giftLoaded: false,
+          giftInfo: '',
+          giftName: '',
+          discountId: '',
+          activityInfo: ''
+        },
+        {
+          id: 2,
+          cycleType: 2, // 季
+          label: '1季',
+          value: '1季',
+          price: 1499,
+          desc: '每天仅需16.66元',
+          perDayPrice: 0,
+          productionId: 1013,
+          tipText: '',
+          giftLoaded: false,
+          giftInfo: '',
+          giftName: '',
+          discountId: '',
+          activityInfo: ''
+        },
+        {
+          id: 3,
+          cycleType: 3, // 年
+          label: '1年',
+          value: '1年',
+          price: 5999,
+          desc: '每天仅需16.44元',
+          perDayPrice: 0,
+          productionId: 1014,
+          tipText: '',
+          giftLoaded: false,
+          giftInfo: '',
+          giftName: '',
+          discountId: '',
+          activityInfo: ''
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('env', ['canSupportPay']),
+    selectedInfo() {
+      return this.selectedInfoMap[this.buyType] || {}
+    },
+    calcPrice () {
+      return this.specList[this.activeSpec - 1].price * 100
     }
   },
   methods: {
-    doOpenPay ({ id }) {
-      Taro.navigateTo({
-        url: `/pages/order/pay/index?id=${id}`,
+    onChangeSpec () {},
+    onAreaCountChange (e, type) {
+      this.overLimit(e)
+    },
+    overLimit(value, max = 15, min = 1) {
+      const limitedMax = value > max
+      const limitedMin = value < min
+      if (limitedMax) {
+        this.setRadioNum(max)
+        if (this.buyType === 'buy') {
+          this.selectedInfo.radio = ''
+          Taro.showToast({
+            title: '已自动为您切换至全国'
+          })
+        }
+      } else if (limitedMin) {
+        Taro.showToast({
+          title: `最小值为${min}`
+        })
+        this.setRadioNum(min)
+      }
+    },
+    onAreaCountRadioChange ({ detail }) {
+      this.selectedInfo.radio = detail
+    },
+    setRadioNum(count) {
+      this.selectedInfo.areaCount = count
+    },
+    onSubmit () {
+      this.doOpenPay({
+        id: 'test-order-' + Date.now(),
+        price: this.calcPrice
+      })
+    },
+    doOpenPay ({ id, price }) {
+      if (this.canSupportPay) {
+        Taro.navigateTo({
+          url: `/pages/order/pay/index?id=${id}&price=${price}`,
+        })
+      } else {
+        this.doPayOther({ id, price })
+      }
+    },
+    doPayOther ({ id, price }) {
+      Taro.navigateToMiniProgram({
+        appId: 'wx37f06c38292f7d82',
+        path: `/pages/order/pay/index?id=${id}&price=${price}`,
+        extraData: {
+          foo: 'bar'
+        },
+        envVersion: 'trial',
+        success: function(res) {
+          // 打开成功
+        },
+        fail: function () {
+          Taro.showToast({
+            title: '取消',
+            icon: 'error',
+            duration: 2000
+          })
+        }
       })
     }
   }
 }
 </script>
+<style lang="scss">
+.create-order-page {
+  background: #F5F5F5;
+  height: 100%;
+  .order-desc-img {
+    width: 375px;
+    height: 1246px;
+    margin-bottom: 84px;
+  }
+
+  .order-spec-list-container {
+    background: #fff;
+    margin: 8px 0;
+    .spec-card {
+      flex: 1;
+      margin: 8px;
+    }
+  }
+
+  .van-button--primary, .van-button--info {
+    color: #fff;
+    background-color: #2abed1;
+    border: 1px solid #2abed1;
+  }
+
+  .module-area-count-selector {
+    background: #fff;
+    .radio-content {
+      display: flex;
+      align-items: center;
+    }
+    .r-c-label {
+      margin-right: 20px;
+    }
+    .van-radio {
+      &:not(:last-of-type) {
+        margin-bottom: 16px;
+      }
+    }
+  }
+}
+</style>

src/pages/order/pay/index.config.js

@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '支付页面'
+  navigationBarTitleText: '收银台'
 })

src/pages/order/pay/index.vue

@@ -1,17 +1,114 @@
 <template>
-  <view class="index">
-    {{msg}}
-    <button>支付</button>
-  </view>
+  <div class="must-page-class-name pay-page j-container">
+    <div class="j-main">
+      <div class="pay-money">
+        ￥{{payInfo.price / 100}}
+      </div>
+      <div>
+        订单编号：{{payInfo.id}}
+      </div>
+    </div>
+    <div class="j-footer">
+      <div class="j-button-group">
+        <button class="j-button-cancel" @click="doBack">取消</button>
+        <button class="j-button-confirm" @click="doPay">
+          支付
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import Taro from "@tarojs/taro";
+
 export default {
-  components: {},
   data () {
     return {
-      msg: '支付页面'
+      payInfo: {}
+    }
+  },
+  onShow () {
+    console.log('onShow')
+    const $instance = Taro.getCurrentInstance()
+    this.payInfo = $instance.router.params
+  },
+  methods: {
+    doBack () {
+      Taro.navigateBackMiniProgram({
+        extraData: {
+          foo: 'bar'
+        },
+        success: function (res) {
+          // 返回成功
+        },
+        fail: function (err) {
+          console.log(err)
+          Taro.navigateBack()
+        }
+      })
+    },
+    doPay () {
+      try {
+        Taro.cloud
+          .callFunction({
+            name: "createOrder",
+            data: {}
+          }).then(res => {
+          console.log('ccc', JSON.stringify(res))
+          const payment = res.result.payment
+          Taro.requestPayment({
+            ...payment,
+            success: function (res) {
+              console.log('ok', JSON.stringify(res))
+              Taro.showToast({
+                title: '支付成功',
+                duration: 2000
+              })
+            },
+            fail: function (res) {
+              console.log(JSON.stringify(res))
+              Taro.showToast({
+                title: '取消支付',
+                icon: 'error',
+                duration: 2000
+              })
+            }
+          })
+        }).finally(() => {
+          Taro.showToast({
+            title: '获取支付参数失败',
+            icon: 'error',
+            duration: 2000
+          })
+        })
+      } catch (e) {
+        console.log(e)
+        Taro.showToast({
+          title: '未配置支付',
+          icon: 'error',
+          duration: 2000
+        })
+      }
     }
   }
 }
 </script>
+<style lang="scss">
+.pay-page {
+  .j-main {
+    font-size: 16px;
+    text-align: center;
+  }
+  .pay-money {
+    margin: 36px 0;
+    font-size: 36px;
+    text-align: center;
+  }
+  .j-footer {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+</style>

src/pages/search/content/bidding/index.vue

@@ -136,10 +136,10 @@ import {
 } from '@/utils'
 
 // api
-import { supplyInfoDetail } from '@/api/modules/jyinfo'
+import { getBiddingDetail } from '@/api/modules/search'
 import Taro from "@tarojs/taro";
 import {mapGetters} from "vuex";
-import UseLogin from "../../../../components/login/useLogin.vue";
+import UseLogin from "@/components/login/useLogin.vue";
 
 export default {
   name: 'article-content',
@@ -218,6 +218,7 @@ export default {
       // 来自页面内转发按钮
       console.log(res.target, res, this.$instance.router)
     }
+    console.log(`${this.$instance.router.path}?id=${this.$instance.router.params.id}&form=share`)
     return {
       title: '我想让你看一下这几个项目',
       path: `${this.$instance.router.path}?id=${this.$instance.router.params.id}&form=share`
@@ -227,8 +228,18 @@ export default {
     this.stickyTop = 0
     const { form = '' } = this.$instance.router.params
     if (form === 'share') {
-      Taro.showToast({
-        title: '通过分享进入页面'
+      Taro.showModal({
+        title: '你的好友给你分享了这个标讯',
+        content: '登录可解锁更多功能',
+        confirmText: '我知道了',
+        showCancel: false,
+        success: function (res) {
+          if (res.confirm) {
+            console.log('用户点击确定')
+          } else if (res.cancel) {
+            console.log('用户点击取消')
+          }
+        }
       })
     }
   },
@@ -250,7 +261,7 @@ export default {
     },
     getContent() {
       const { id } = this.$instance.router.params
-      this.contentId = id
+      this.contentId = decodeURIComponent(id)
       this.getIssuedContent()
     },
     async getIssuedContent() {
@@ -258,7 +269,7 @@ export default {
         data,
         error_code: code,
         error_msg: msg
-      } = await supplyInfoDetail({ msgId: this.contentId, msgType: 0 })
+      } = await getBiddingDetail({ id: this.contentId })
       if (code === 0 && data) {
         Object.assign(this.contentInfo, data)
         this.otherSupplyInfo = data?.otherSupplyInfo || []

src/pages/search/result/bidding/index.vue

@@ -1,18 +1,31 @@
 <template>
   <div class="must-page-class-name j-container search-result-bidding top-radius">
     <div class="j-header">
-      <top-search v-model="topSearch.input" @submit="submit()"></top-search>
+      <top-search v-model="topSearch.input" @submit="submit()" @clear="doBack"></top-search>
       <DropFilter
         v-model="confirmState"
         :default-state="getDefaultConfirmState"
-        :options="options"
-        @confirm="onConfirm"
+        :options="getOptions"
         @cancel="onCancel"
+        @confirm="onConfirm"
       >
       </DropFilter>
     </div>
-    <div class="j-main search--list" ref="list">
-      <div>
+    <div ref="list" class="j-main search--list">
+      <scroll-view
+        class="scroll-view_H"
+        @scrolltolower="onScroll"
+        :scroll-y="true"
+      >
+        <div class="search-total-count" v-if="listInfo.config.total > 0">
+          <div>
+            搜索到
+            <span class="highlight-text">
+              {{ listInfo.config.total }}
+            </span>
+            条信息
+          </div>
+        </div>
         <ProjectCell
           v-for="(item, index) in getFormatList"
           :key="index"
@@ -20,34 +33,55 @@
           card-type="detailed"
           v-bind="item"
           @click="onClickCell(item)"
-        />
-      </div>
+        >
+          <template #buyerText="{ item }">
+          <span class="buyer-item link-clickable">
+            {{ item.text }}
+          </span>
+          </template>
+          <template #winnerText="{ item }">
+          <span
+            v-for="(winner, index) in item.children"
+            :key="index"
+            class="winner-item highlight-text link-clickable j-splitter"
+            data-j-splitter="、"
+          >
+            {{ winner.text }}
+          </span>
+          </template>
+        </ProjectCell>
+        <view class="tips-loading" v-if="listInfo.config.loading">
+          <span class="iconfont icon-lv"></span>
+          <span>加载中...</span>
+        </view>
+      </scroll-view>
       <AppEmpty
-        class="mt-100"
         v-if="!listInfo.config.loading && !listInfo.list.length"
-      >未搜索到符合条件的信息</AppEmpty
+        class="mt-100"
+      >未搜索到符合条件的信息
+      </AppEmpty
       >
     </div>
   </div>
 </template>
 
 <script>
-import { AppEmpty, ProjectCell, DropFilter } from '@/ui'
+import {AppEmpty, ProjectCell, DropFilter} from '@/ui'
 import scopeSelectorContent from '@/components/selector/scope'
 import TopSearch from "@/components/search/TopSearch.vue";
-// import AreaCitySelector from '@/components/selector/area-city'
-import { filterObjOfKeys } from '@/utils'
-import { ajaxGetSupplySearch } from '@/api/modules/jyinfo'
+import AreaCitySidebar from '@/components/selector/area-city-sidebar'
+import {filterObjOfKeys, dateFormatter, getRandomString, calcNotExactTime} from '@/utils'
+import {getBiddingSearchList} from '@/api/modules/search'
 import Taro from "@tarojs/taro";
 
 export default {
-  name: 'SearchResultSupplier',
+  name: 'SearchResultBidding',
   components: {
     TopSearch,
     [AppEmpty.name]: AppEmpty,
     [ProjectCell.name]: ProjectCell,
     [DropFilter.name]: DropFilter,
-    // [AreaCitySelector.name]: AreaCitySelector,
+    [AreaCitySidebar.name]: AreaCitySidebar,
     [scopeSelectorContent.name]: scopeSelectorContent
   },
   data() {
@@ -68,14 +102,24 @@ export default {
         list: []
       },
       confirmState: {
-        searchType: ['title'],
-        time: [''],
+        selectType: ['title', 'content'],
+        publishTime: [''],
         area: [],
         status: ['0']
       },
       options: [
         {
-          key: 'searchType',
+          key: 'area',
+          value: '',
+          menu: {
+            title: '地区'
+          },
+          content: {
+            component: AreaCitySidebar
+          }
+        },
+        {
+          key: 'selectType',
           menu: {
             title: '搜索范围'
           },
@@ -90,24 +134,29 @@ export default {
                   checked: false
                 },
                 {
-                  key: 'detail',
+                  key: 'content',
                   label: '正文搜索',
                   checked: false
                 },
                 {
-                  key: 'ent_name',
-                  label: '发布单位',
+                  label: '附件',
+                  key: 'file',
+                  checked: false
+                },
+                {
+                  label: '项目名称/标的物',
+                  key: 'ppa',
                   checked: false
                 }
               ],
-              defaultVal: ['title']
+              defaultVal: ['title', 'content']
             }
           }
         },
         {
-          key: 'time',
+          key: 'publishTime',
           menu: {
-            title: '发布时间'
+            title: '时间'
           },
           content: {
             component: scopeSelectorContent,
@@ -153,62 +202,37 @@ export default {
               confirm: 'change'
             }
           }
-        },
-        {
-          key: 'status',
-          value: '',
-          menu: {
-            title: '信息状态'
-          },
-          content: {
-            component: scopeSelectorContent,
-            props: {
-              multiple: false,
-              checkedIcon: 'duihao',
-              defaultIcon: '',
-              options: [
-                {
-                  key: '0',
-                  label: '全部',
-                  checked: false
-                },
-                {
-                  key: '1',
-                  label: '生效中',
-                  checked: false
-                },
-                {
-                  key: '-1',
-                  label: '已过期',
-                  checked: false
-                }
-              ],
-              defaultVal: ['0']
-            },
-            hooks: {
-              confirm: 'change'
-            }
-          }
         }
       ]
     }
   },
   computed: {
+    getOptions () {
+      return this.options.map(v => {
+        const hasDiffValue = this.confirmState[v.key] !== this.getDefaultConfirmState[v.key]
+        if (hasDiffValue) {
+          v.menu.hight = true
+        }
+        return v
+      })
+    },
     getDefaultConfirmState() {
       return this.$options.data().confirmState
     },
     getSearchKey() {
-      return this.listInfo.keys.split('+')
+      return this.listInfo.keys?.split('+')
     },
     getParams() {
       const params = {
-        keywords: this.listInfo.config.search,
-        pageIndex: this.listInfo.config.pageNum,
+        keyWords: this.topSearch?.input,
+        pageNum: this.listInfo.config.pageNum,
         pageSize: this.listInfo.config.pageSize,
+        searchGroup: 0,
+        searchMode: 0,
         noToast: true
       }
       if (params.pageIndex === 1) {
-        params.keywords = this.topSearch.input
+        params.keyWords = this.topSearch.input
       }
       Object.keys(this.confirmState).forEach((key) => {
         switch (key) {
@@ -222,12 +246,13 @@ export default {
             })
             break
           }
-          case 'time': {
+          case 'publishTime': {
             params[key] = ''
+            console.log('tttt')
             if (this.confirmState[key][0] !== '') {
-              const formatTime = (
+              const formatTime = calcNotExactTime(
                 this.confirmState[key][0],
-                's'
+                  's'
               )
               params[key] = `${formatTime.start}-${formatTime.end}`
             }
@@ -242,29 +267,30 @@ export default {
       return params
     },
     getShowDetail() {
-      return this.getParams.searchType.indexOf('detail') !== -1
+      return this.getParams.selectType.indexOf('content') !== -1
     },
     getFormatList() {
       return this.listInfo.list.map((v) => {
-        return Object.assign(v, {
-          detail: this.getShowDetail ? v.detail : '',
-          tags: [v.province].filter((v) => v),
-          time: v.publish_time * 1000
-        })
+        return this.preSortItem(v)
       })
     }
   },
-  created () {
+  created() {
     this.$instance = Taro.getCurrentInstance()
     this.topSearch.input = this.$instance.router.params.search
+    this.listInfo.config.search = this.topSearch.input
     this.onLoad()
   },
   mounted() {
     this.isMounted = true
   },
   methods: {
-    clear() {
-      this.$router.back()
+    doBack() {
+      Taro.navigateBack()
+    },
+    onScroll () {
+      console.log('scr')
+      this.onLoad()
     },
     submit() {
       this.doResetList()
@@ -310,8 +336,8 @@ export default {
     doQueryList() {
       console.log('doQueryList')
       this.listInfo.config.loading = true
-      this.listInfo.config.search = this.getParams.keywords
-      ajaxGetSupplySearch(this.getParams).then((res) => {
+      this.listInfo.config.search = this.getParams.keyWords
+      getBiddingSearchList(this.getParams).then((res) => {
         if (res?.data) {
           this.listInfo.keys = res.data?.ckeys || this.listInfo.config.search
           if (this.listInfo.config.pageNum === 1) {
@@ -343,6 +369,93 @@ export default {
         }
       })
     },
+    preSortItem(item) {
+      if (!item) return
+      const {area, isCollected, projectInfo} = item
+      item.star = !!isCollected
+      // 参标参数
+      item.isCB = {
+        id: '',
+        value: 0
+      }
+      // 是否有附件
+      item.isFile = item?.fileExists || false
+      item.leftTopBadgeText =
+        item.site === '剑鱼信息发布平台' ? '业主委托项目' : ''
+      // 拟建项目独有参数
+      if (projectInfo) {
+        Object.assign(item, projectInfo)
+      }
+      const buyerClass =
+        item?.buyerClass && item?.buyerClass !== '其它'
+          ? item?.buyerClass
+          : undefined
+      // 标签
+      item.tagList = [
+        area || '全国',
+        buyerClass,
+        item?.type || item?.subtype,
+      ].filter((v) => v)
+
+      item.tags = item.tagList
+
+      item.dateTime = item.publishTime ? item.publishTime * 1000 : ''
+      item.time = item.dateTime
+
+      // 整理企业画像数据
+      let winnerList = Array.isArray(item.winnerInfo) ? item.winnerInfo : []
+      winnerList = winnerList.map((w) => {
+        return {
+          text: w.winner,
+          id: w.winnerId
+        }
+      })
+
+      item.vKid = `${item.id}--${getRandomString(8).toLowerCase()}`
+
+      // 详细列表数据
+      item.detailList = [
+        {
+          label: '采购单位',
+          splitter: '：',
+          text: Array.isArray(item.buyer)
+            ? item.buyer.join(',')
+            : item.buyer || '',
+          highlightText: true,
+          detailTextSlot: 'buyerText'
+        },
+        {
+          label: '代理机构',
+          splitter: '：',
+          text: item.agency || ''
+        },
+        {
+          label: '中标单位',
+          splitter: '：',
+          text: Array.isArray(item.winnerInfo)
+            ? item.winnerInfo.map((w) => w.winner).join(',')
+            : '',
+          detailTextSlot: 'winnerText',
+          children: winnerList
+        },
+        {
+          label: '报名截止日期',
+          splitter: '：',
+          text: item.signEndTime
+            ? dateFormatter(item.signEndTime * 1000, 'yyyy-MM-dd')
+            : ''
+        },
+        {
+          label: '投标截止日期',
+          splitter: '：',
+          text: item.bidEndTime
+            ? dateFormatter(item.bidEndTime * 1000, 'yyyy-MM-dd')
+            : ''
+        }
+      ]
+
+      return item
+    },
     doResetList() {
       Object.assign(this.listInfo, this.$options.data().listInfo)
       this.onLoad()
@@ -373,6 +486,7 @@ export default {
       margin-left: 12px;
     }
   }
+
   .hd-search-group .back-icon {
     display: none;
   }
@@ -383,32 +497,51 @@ export default {
     border-radius: 8px;
   }
 
+
+  .tips-loading {
+    padding: 8px;
+    text-align: center;
+    color: $gray_7;
+  }
+
+  .search-total-count {
+    font-size: 14px;
+    padding: 16px;
+  }
+
   .search-- {
     &tab-menu {
-      ::v-deep {
-        .van-dropdown-menu__bar {
-          box-shadow: unset;
-        }
-        .van-dropdown-menu {
-          color: $gray_7;
-        }
-        .van-dropdown-menu__title--active {
+      .van-dropdown-menu__bar {
+        box-shadow: unset;
+      }
+
+      .van-dropdown-menu {
+        color: $gray_7;
+      }
+
+      .van-dropdown-menu__title--active {
           color: $main;
         }
-      }
+
       &-title {
         font-weight: 500;
         font-size: 14px;
+
         &.selected {
           color: $main;
         }
       }
     }
+
     &tab-content {
       max-width: 100%;
       overflow: hidden;
     }
+
     &list {
+      .scroll-view_H {
+        height: 100%;
+      }
       .mt-100 {
         margin-top: -100px;
       }

src/pages/select-area/index.config.js

@@ -0,0 +1,7 @@
+export default definePageConfig({
+  navigationBarTitleText: '选择省份',
+  usingComponents: {
+    "van-index-bar-weapp": "@/vant/index-bar/index",
+    "van-index-anchor-weapp": "@/vant/index-anchor/index"
+  },
+})

src/pages/select-area/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="must-page-class-name select-area-page j-container">
+    <div class="j-header">
+      <div class="top-tip">
+        已选择：{{selectArea}}
+      </div>
+    </div>
+    <div class="j-main">
+      <area-city-selector :only-province="true" :only-one="true" v-model="area"></area-city-selector>
+    </div>
+    <div class="j-footer j-button-group fix-safe">
+      <button class="j-button-cancel" @click="doReset">重置</button>
+      <button class="j-button-confirm" :disabled="!selectArea" @click="doChangeArea">确认</button>
+    </div>
+  </div>
+</template>
+<script>
+import Taro from "@tarojs/taro";
+import AreaCitySelector from "@/components/selector/area-city/index.vue";
+import {mapMutations} from "vuex";
+
+export default {
+  components: {
+    AreaCitySelector
+  },
+  created () {
+    this.$instance = Taro.getCurrentInstance()
+    this.doReset()
+  },
+  onShareAppMessage (res) {
+    if (res.from === 'button') {
+      // 来自页面内转发按钮
+      console.log(res.target, res, this.$instance.router)
+    }
+    return {
+      title: '我推荐你使用这个小程序',
+      path: `${this.$instance.router.path}?form=share`
+    }
+  },
+  data () {
+    return {
+      area: {
+        "安徽": []
+      },
+      showSelectAreaTip: true
+    }
+  },
+  computed: {
+    selectArea () {
+      return Object.keys(this.area)[0]
+    }
+  },
+  methods: {
+    ...mapMutations('user', ['setArea']),
+    doChangeArea () {
+      this.setArea(this.selectArea)
+      Taro.navigateBack()
+    },
+    doReset () {
+      this.area = {
+        [this.$instance.router.params.area]: []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.select-area-page {
+  background-color: #f5f5f5;
+  height: 100%;
+  .top-tip{
+    background-color: #fff;
+    padding: 16px;
+  }
+}
+</style>