记录alpha冲刺Day9

指导组

已于 2023-11-15 19:11:27 修改

阅读量83

点赞数

文章标签： java 团队开发

于 2023-11-15 19:10:53 首次发布

本文链接：https://blog.csdn.net/zx722/article/details/134427011

版权

这个作业属于哪个课程	课程
这个作业要求在哪里	要求
这个作业的目标	记录alpha冲刺Day9
团队名称	指导组
团队置顶集合随笔链接	指导组–alpha冲刺随笔置顶-CSDN博客
其他参考文献

成员	项目进展	存在/遇到的问题	从今天到明天会议的安排	心得体会
072103402-卢成熙	继续完善软件后端的代码	前后端交互，坐的还不是特别明了	继续完善后端代码	代码越来越熟悉，收获很多
102101117-刘建鑫	完善了用户端用户页面的设计	对软件用户端用户的设计、美化，要进行思考	继续设计完善用户端其它页面设计	学会了自己编写设计界面，成长很多
102101427-陈永裕	完善了管理员端的优惠券界面的设计	细节部分，还需要继续思考	继续完善管理员端的其它界面	在管理员端界面设计中成长了很多
102101413-王润富	完善管理员端页面设计以及代码编写	对管理员端一些隐藏功能，需要进一步思考	继续完善管理员端功能	在管理员端页面设计中成长了很多
102101128-陈林旭	完善用户端后端的设计	代码仍然不够熟练，效率比较低	继续完善用户端后端的设计	在不断的学习中成长了很多
102101133-纳世荣	进行管理员端的界面设计	隐藏功能设计比较麻烦	继续进行管理员端的界面设计	前端代码设计的更加得心应手
291800137-赵鑫	进行管理员端的界面设计	不明白有些功能如何设计以及美化界面	继续进行管理员端的界面设计	在界面设计中，成长了很多
102101134-范智强	完善用户端博客界面的商品类型的设计	页面空缺多，布局不太完美	继续完善用户端商品类型设计	在页面设计中成长了很多
102101137-林鹏	进行用户端隐藏界面的设计	对于用户端的隐藏页面进行设计，思考怎样美化	完善用户端“隐藏页面	对前端的理解进一步加深
031802441-张志敏	进行管理员端的设计	各组件排版还有一定的困难，不太美观	继续进行管理员端的界面设计	技术水平再一步提高

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>福大商铺点评</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element.css">

  <link href="./css/shop-list.css" rel="stylesheet">
  <link href="./css/main.css" rel="stylesheet">

  <style type="text/css">

  </style>
</head>
<body>
<div id="app">
  <div class="header">
    <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
    <div class="header-title">{{typeName}}</div>
    <div class="header-search">
      <i class="el-icon-search"></i><span class="header-search-text">搜索</span>
    </div>
    <i class="el-icon-location-information"></i>
  </div>
  <div class="sort-bar">
    <div class="sort-item">
      <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
        {{typeName}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="t in types" :key="t.id" :command="t">
            {{t.name}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="sort-item" @click="sortAndQuery('')">
      距离 <i class="el-icon-arrow-down el-icon--right"></i>
    </div>
    <div class="sort-item" @click="sortAndQuery('comments')">
      人气 <i class="el-icon-arrow-down el-icon--right"></i>
    </div>
    <div class="sort-item" @click="sortAndQuery('score')">
      评分 <i class="el-icon-arrow-down el-icon--right"></i>
    </div>
  </div>
  <div class="shop-list" @scroll="onScroll">
    <div class="shop-box" v-for="s in shops" :key="s.id" @click="toDetail(s.id)">
      <div class="shop-img"><img :src="s.images" alt=""></div>
      <div class="shop-info">
        <div class="shop-title shop-item">{{s.name}}</div>
        <div class="shop-rate shop-item" >
          <el-rate
              disabled v-model="s.score/10"
              text-color="#F63"
              show-score
          ></el-rate>
          <span>{{s.comments}}条</span>
        </div>
        <div class="shop-area shop-item">
          <span>{{s.area}}</span>
          <span v-if="s.distance">{{s.distance < 1000 ? s.distance.toFixed(1) + 'm' : (s.distance/1000).toFixed(1) + 'km'}}</span>
        </div>
        <div class="shop-avg shop-item">￥{{s.avgPrice}}/人</div>
        <div class="shop-address shop-item">
          <i class="el-icon-map-location"></i>
          <span>{{s.address}}</span>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script>

  const app = new Vue({
    el: "#app",
    data: {
      util,
      isReachBottom: false,
      types: [], // 类型列表
      shops: [], // 商店列表
      typeName: "",
      params:{
        typeId: 0,
        current: 1,
        sortBy: "",
        x: 120.149993, // 经度
        y: 30.334229 // 纬度
      }
    },
    created() {
      // 获取参数
      this.params.typeId = util.getUrlParam("type");
      this.typeName = util.getUrlParam("name");
      // 查询类型
      this.queryTypes();
      // 查询商店
      this.queryShops();
    },
    methods: {
      queryTypes() {
        axios.get("/shop-type/list")
          .then(({data}) => {
            this.types = data;
          })
          .catch(err => {
            console.log(err);
            this.$message.error(err)
          })
      },
      queryShops() {
        axios.get("/shop/of/type", {
            params: this.params
          })
          .then(({data}) => {
            if (!data) {
              return
            }
            data.forEach(s => s.images = s.images.split(',')[0]);
            this.shops = this.shops.concat(data);
          })
          .catch(err => {
            console.log(err);
            this.$message.error(err)
          })
      },
      handleCommand(t) {
        location.href = "/shop-list.html?type="+t.id+"&name="+t.name;
      },
      sortAndQuery(sortBy) {
        this.params.sortBy = sortBy;
        this.queryShops();
      },
      goBack() {
        history.back();
      },
      toDetail(id) {
        location.href = "/shop-detail.html?id="+id
      },
      onScroll(e) {
        let scrollTop = e.target.scrollTop;
        let offsetHeight = e.target.offsetHeight;
        let scrollHeight = e.target.scrollHeight;
        if(scrollTop + offsetHeight + 1 > scrollHeight && !this.isReachBottom){
          this.isReachBottom = true
          console.log("触底")
          this.params.current++
          this.queryShops(this.params.current, 5);
        }else{
          this.isReachBottom = false
        }
      },
    }
  })
</script>
</body>
</html>

.header,.sort-bar,.shop-list {
    background-color: #fff;
}
#app{
    background-color: #f1f1f1;
}
.header{
    width: 100%;
    height: 7%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ff6633;
    position: relative;
}
.header-back-btn{
    width: 10%;
    color: #ff6633;
    font-size: 24px;
    font-weight: bold;
}
.header-title {
    width: 20%;
    text-align: left;
    font-size: 18px;
    font-family: Hiragino Sans GB,Arial,Helvetica,"\5B8B\4F53",sans-serif;
}
.header-search {
    width: 60%;
    border:1px solid #8d8989;
    border-radius: 15px;
    text-align: center;
    font-size: 16px;
    color: #5c5958;
}
.header-search-text{
    font-size: 15px;
    align-items: center;
}
.el-icon-location-information{   
    position: absolute;
    font-size: 20px;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
}
.el-dropdown,.el-dropdown-menu__item {
    font-size: 12px;
    line-height: 20px;
}
.sort-bar {
    display: flex;
    justify-content: space-around;
    height: 6%;
    align-items: center;
    margin-bottom: 5px;
}
.sort-item {
    border: 1px solid #8d8989;
    border-radius: 5px;
    width: 20%;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    height:20px;
}
.el-icon-arrow-down{
    text-align: right;
}
.shop-list{
    height: 87%;
    background-color: #f1f1f1;
    overflow-y: auto;
}
.shop-box {
    display: flex;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 3px;
    background-color: #fff;
}
.shop-img {
    text-align: center;
    padding: 5px;
}
.shop-img img{
    width: 95px;
    height: 95px;
    border-radius: 5px;
}
.shop-info {
    width: 65%;
}
.shop-title {
    font-weight: bold;
    font-size: 14px;
}
.shop-rate {
    display: flex;
    justify-content: space-between;
}

.shop-area {
    color: #6f6f71;
    display: flex;
    justify-content: space-between;
}
.shop-item {
    line-height: 20px;
    align-items: center;
}
.shop-address{
    display: flex;
}
.shop-address i{
    color: #6c6767;
}
.shop-address span{
    height: 20px;
    line-height: 20px;
    overflow: hidden;
}