kailin_mp/pages/user/information.vue

<template>
  <view>
    <view class="alter_info">请选择您药店/诊所所在城市，选择后不可更改，请谨慎选择</view>
    <view class="form"  >
      <!-- 地区代表表单 -->
      
      <!-- 新增列表 -->
      <view class="list-container">
        <view class="list-item" v-for="(item, index) in articleList" :key="index">
          <image :src="item.thumbnail" class="list-thumbnail" mode="aspectFit"></image>
          <view class="list-content">
            <view class="list-title">{{ item.title }}</view>
            <view class="list-meta">
              <text>阅读数: {{ item.readCount }}</text>
              <text>点赞数: {{ item.likeCount }}</text>
              <text>时间: {{ item.time }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getProvinces,getMyCity} from "../../utils/city";

export default {
  data() {
    return {
      requestParam:{
        province:"",
        city:"",
      },
      cityArray: [[],[]],
      cityValue: [0,0],
      // 新增文章列表数据
      articleList: [
        {
          thumbnail: 'https://example.com/thumbnail1.jpg',
          title: '文章标题1',
          readCount: 100,
          likeCount: 20,
          time: '2025-02-21'
        },
        {
          thumbnail: 'https://example.com/thumbnail2.jpg',
          title: '文章标题2',
          readCount: 200,
          likeCount: 30,
          time: '2025-02-20'
        }
      ]
    }
  },
  onLoad(){
    // 替换对应的数据
    this.cityArray.splice(0,1,getProvinces());
    this.cityArray.splice(1,1,getMyCity(this.cityValue[0]));
    // 默认地址
    // this.requestParam.province 	= this.cityArray[0][this.cityValue[0]]
    // this.requestParam.city 		= this.cityArray[1][this.cityValue[1]];
  },
  onShow(){
    // 登录信息
    if( !this.$checkAccess.alterLogin() ) return ;
    // 授权成功以后，调用绑定
    this.$http.request('api/custom/get_city',{},'get').then((re)=>{
      // 成功的话
      if( re.code != 'success' ){
        // 跳转
        uni.showToast({title: re.msg,icon:"none"});
        return;
      }
      this.requestParam.province	= re.data.province;
      this.requestParam.city 		= re.data.city;
    });
  },
  methods: {
    toApply(){
      // 登录信息
      if( !this.$checkAccess.alterLogin() ) return ;
      // 提示信息
      if( !this.requestParam.province ){
        uni.showToast({
          title:"请选择所在城市",
          icon:"none"
        })
        return ;
      }
      // 提示信息
      if( !this.requestParam.city ){
        uni.showToast({
          title:"请选择所在城市",
          icon:"none"
        })
        return ;
      }
      // 请求状态
      uni.showLoading({mask:true});
      // 授权成功以后，调用绑定
      this.$http.request('api/custom/set_city',this.requestParam,'post').then((re)=>{
        // 关闭
        uni.hideLoading();
        // 成功的话
        if( re.code != 'success' ){
          // 跳转
          uni.showToast({title: re.msg,icon:"none"});
          return;
        }
        uni.switchTab({url: '/pages/user/index'});
      });
    },
    cityChange(e){
      // 替换三个选项
      this.cityValue.splice(e.detail.column,1,e.detail.value);
      // 下一级设置为0
      if( e.detail.column == 0 ){
        this.cityValue.splice(1,1,0);
        this.cityValue.splice(2,1,0);
      }
      if( e.detail.column == 1 ){
        this.cityValue.splice(2,1,0);
      }
      // 替换对应的数据
      this.cityArray.splice(0,1,getProvinces());
      this.cityArray.splice(1,1,getMyCity(this.cityValue[0]));
    },
    cityFinish(e){
      this.requestParam.province 	= this.cityArray[0][this.cityValue[0]];
      this.requestParam.city 		= this.cityArray[1][this.cityValue[1]];
    },
  }
}
</script>

<style lang="less">












































































.alter_info{
  display: block;
  color: #E03519;
  font-size: 20rpx;
  overflow: hidden;
  margin: 20rpx auto;
  background: #FFFFFF;
  line-height: 40rpx;
  padding: 35rpx 35rpx;
  text-align: center;
}
.info_form{
  display: block;
  overflow: hidden;
  padding: 20rpx 0rpx;
  background: #FFFFFF;
  .form_group{
    display: block;
    overflow: hidden;
    line-height: 60rpx;
    padding: 20rpx 35rpx;
    .group_title{
      float: left;
      width: 160rpx;
      display: block;
      overflow: hidden;
      font-size: 30rpx;
      margin-right: 20rpx;
    }
    .group_box{
      width: 480rpx;
      float: left;
      display: block;
      .form_ctrl{
        height: 56rpx;
        font-size: 24rpx;
        padding: 0rpx 20rpx;
        line-height: 56rpx;;
        border: 2rpx solid #DDDDDD;
        .area_text{
          width: 446rpx;
          height: 56rpx;
          font-size: 20rpx;
          overflow: hidden;
          white-space: nowrap;
          line-height: 56rpx;
          text-overflow: ellipsis;
        }
      }
      .group_image{
        width: 200rpx;
        height: 200rpx;
      }
      .choose_image{
        display: block;
        width: 200rpx;
        height: 200rpx;
        font-size: 38rpx;
        text-align: center;
        line-height: 200rpx;
        border: 2rpx solid #DDDDDD;
      }
    }
  }
  .submit_btn{
    color: #FFFFFF;
    width: 220rpx;
    height: 80rpx;
    display: block;
    font-size: 30rpx;
    padding: 0rpx 0rpx;
    line-height: 80rpx;
    margin: 50rpx auto;
    background-color: forestgreen;
  }
}
</style>