2020-12-27

最新推荐文章于 2022-08-01 10:41:39 发布

神~宁

最新推荐文章于 2022-08-01 10:41:39 发布

阅读量139

点赞数

文章标签：软件工程师 typescript html5 javascript

本文链接：https://blog.csdn.net/weixin_44668224/article/details/111776768

版权

项目进度-05 （2020.12.06~12.26）

项目整体进度：

我们的小程序已经成型，剩下的工作就是不断测试，并进一步美化。上周主要增加了商品收藏的功能，方便用户保存心仪的商品，同时对小程序的界面进行了美化和加工，令用户体验更加满意。最后，为小程序添加了小程序说明，责任声明，以及用户使用手册页面，使小程序更加完善。

一、商品收藏

商品收藏功能可以保存心仪但是目前暂时没有购买的商品，为用户提供了更多元的选择，功能代码如下：

collect(e){
    let that=this;
    if(app.userInfo.length==0){
      wx.showToast({
        title: '没有登录无法收藏',
        icon:'none'
      })
    }
    else{
      wx.showLoading({
        title: '加载中',
      })
    wx.cloud.callFunction({
      name:'user_favorite',
      data:{
        status:1,
        userid:app.userInfo[0]._id,
        goodid:that.data.goodInfo._id
      },
      success(res){
        that.setData({
          iscollected:true
        })
        wx.hideLoading();
        wx.showToast({
          title: '收藏成功',
          icon:'none'
        })
      }
    })
    }
    
  },

  uncollect(){
    let that=this;
    wx.showLoading({
      title: '加载中',
    })
    wx.cloud.callFunction({
      name:'user_favorite',
      data:{
        status:0,
        userid:app.userInfo[0]._id,
        goodid:that.data.goodInfo._id
      },
      success(res){
        that.setData({
          iscollected:false
        })
        wx.hideLoading();
        wx.showToast({
          title: '已取消收藏',
          icon:'none'
        })
      }
    })
  },
  getlist(){
    var list=[];
    let that=this
    db.collection('users').doc(app.userInfo[0]._id).get({
      success(res){
        res.data.favorite.forEach(function(item){
          db.collection('goods').doc(item).get({
            success(re){
              list.push(re.data)
              that.setData({
                list:list
              })
            }
          })
        })
      }
    })
   
  },

  detail(e) {
    let that = this;
    wx.navigateTo({
      url: '/pages/detail/detail?scene=' + e.currentTarget.dataset.id,
    })
},

  delete(e){
    wx.showModal({
     title:'提示',
     content:"您确定要删除这个收藏吗？",
     success(res){
       if(res.confirm){
         console.log();
         let that=this;
          wx.showLoading({
            title: '加载中',
          })
          wx.cloud.callFunction({
            name:'user_favorite',
            data:{
              status:0,
              userid:app.userInfo[0]._id,
              goodid:e.currentTarget.dataset.id
            },
            success(res){
              wx.hideLoading();
              wx.showToast({
                title: '删除成功',
                icon:'none'
              })
              setTimeout(function(){
                wx.redirectTo({
                  url: '../favorite/favorite',
                })
              },500)
            }
          })
       }
     }
    })
  },

效果如图：
在此处点击收藏按钮
随后会出现在我的收藏一栏中

二、界面美化

对小程序的界面进行了美化，界面美观大方，给用户良好的体验。美化部分主要有分类部分、商品罗列部分、收藏罗列部分、以及所有的主要页面。实现的代码如下：

.list_box {
  width: 95%;
  display: flex;
  align-items: center;
  padding: 20rpx 10rpx;
  box-sizing: border-box;
  margin-bottom: 10rpx;
  background-color: white;
  border-radius: 30rpx;
}

.outside1{
  height: 330rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.list_poster {
  width: 280rpx;
  height: 280rpx;
  border-radius: 33rpx;
}

.list_content {
  height: 230rpx;
  width: calc(100% - 230rpx);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 10rpx;
  box-sizing: border-box;
}

.list_word {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.list_title {
  width: 100%;
  font-size: 32rpx;
  letter-spacing: 3rpx;
  line-height: 45rpx;
  padding-left: 10rpx;
}



.list_between {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 10rpx;
}

.list_price {
  font-size: 36rpx;
  color: rgb(255, 0, 0);
}

.yuan{
  font-size: 25rpx;
}

.list_time {
  font-size: 28rpx;
  letter-spacing: 2rpx;
  color: rgb(129, 129, 129);
}

.nocontent {
  width: 100%;
  height: calc(100% - 400rpx);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
}

.nocontent image {
  padding-left: 80rpx;
  width: 340rpx;
  height: 272rpx;
}

.blank_text {
  padding-top: 40rpx;
  font-size: 32rpx;
  letter-spacing: 2rpx;
  color: #c6c6c8;
}

.fixed {
  position: fixed;
}

.nofixed {
  height: 91rpx;
  width: 100%;
  background: #fff;
}

.center_box {
  width: 95%;
  padding: 20rpx 0;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  flex-wrap:wrap;
  flex-direction: row;
  border-radius:10rpx;
}

.outside{
  height: 350rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0rpx;
}

.center_1 {
  width: 160rpx;
  height: 160rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.center_1 view {
  font-size: 26rpx;
  padding-top: 20rpx;
}

.center_1 image {
  width: 60rpx;
  height: 60rpx;
}

.blank2{
  background-color: #eee;
  height: 20rpx;
}
效果如图：

在这里插入图片描述

三、使用说明页面

使用说明页面为用户解答一些基本的问题，并作出责任声明，不为日后可能出现的问题留下隐患。页面代码如下：

var app = getApp();
var db = wx.cloud.database();

Page({
      /**
       * 页面的初始数据
       */
      data: {
            list: [ {
                        title: '该程序收费吗？',
                        id: 1,
                        des: ['本程序是完全的公益项目，永久承诺不收取任何中介费，您可以随心所欲的发布自己的闲置物品和购买。如过您觉得本小程序不错，欢迎各位支持打赏我们。'],
                        check: false,
                  }, {
                        title: '该程序是做什么的？',
                        id: 2,
                        des: ['本程序主要是方便中国海洋大学各个校区的同学发布自己不需要的二手商品。' ],
                        check: false,
                  }, {
                        title: '本程序的通知形式？',
                        id: 3,
                        des: ['本程序通过模拟买家与卖家交易来达成双方的目的', '目前暂时没有通知系统，将在以后的更新中更新', '其中也可以提供双方的个人信息来使买家和卖家下线交易'],
                        check: false,
                  },
                  {
                        title: '为什么要留下联系方式？',
                        id: 4,
                        des: ['本程序交易完全由交易双方沟通。', '除非程序出现问题导致交易故障，平台不参与任何交易'],
                        check: false,
                  }, {
                        title: '小程序发现异常（bug）怎么办？',
                        id: 5,
                        des: ['联系客服我们会有专人为您服务。您还可以向我们提出意见或者建议，我们会争取将小程序做得更好！'],
                        check: false,
                  },
            ]
      },
      onReady() {},

      show(e) {
            var that = this;
            let ite = e.currentTarget.dataset.show;
            let list = that.data.list;
            if (!ite.check) {
                  list[ite.id-1].check = true;
            } else {
                  list[ite.id-1].check = false;
            }
            that.setData({
                  list: list
            })
      },
      //跳转页面
      go(e) {
            wx.navigateTo({
                  url: e.currentTarget.dataset.go
            })
      },
      onLoad() {

      },

})

效果如下：
在这里插入图片描述

四、关于程序页面

介绍本程序的相关事项，包括开发人员，以及程序简介等等。
代码如下：

<view class="title">开发：</view>
<view class="main">
	<view class="image">
		<view class="txt" wx:for="{{imgs1}}" wx:key="{{index}}">
			<image class="im" src="{{item.url}}" data-id="{{index}}"></image>
			<view class="t">
				{{item.name}}
			</view>
		</view>
	</view>
</view>
<view class="contain">
	<view class="title">程序简介</view>
	<view class="description">
		<text space="emsp" decode="{{ true }}">{{des}}</text>
	</view>
	<view class="title">打赏我们</view>
	<view class="description">
		<view class='imagesize'>
			<image src="../../image/dashang.jpg" class='in-image' bindtap="img" />
		</view>
	</view>
	<view class="title">联系方式</view>
	<view class="description">
		<view class="tip" bindtap="copy" data-copy="wangzhan_010813" data-name="微信号">
			<view>公众号</view>:
			<text>wangzhan_010813</text>
		</view>
		<view class="tip" bindtap="copy" data-copy="1047063765" data-name="QQ群">
			<view>QQ群</view>:
			<text>1047063765</text>
		</view>
	</view>
</view>

效果如图所示：
在这里插入图片描述

五、用户使用手册

介绍小程序的功能以及使用流程。
实现代码如下：

<view class="total">
<view class="container">
  <text class="cxsm">OUC — FG 二手交易来啦~</text>
</view>

<view class="out">
  <view class="title">
    <text >
    本项目面向中国海洋大学校内学生，为二手物品交易提供便利!
    </text>
  </view>
</view>

<view class="howuse"> ====== 怎么用？======</view>

<view class="out">
  <view class="use">
    <view class="sm">
      <view class="way">
        <view class="num">01</view>
        进入小程序页面进行注册，然后完善您的个人信息
      </view>
      <view class='imagesize'>
        <image class="buyer-img" mode="aspectFit" src="{{image[0]}}" bindtap="img" data-src="0"  />
      </view>
    </view>

    <view class="sm">
      <view class="way">
        <view class="num">02</view>
        登陆界面后可以搜索物品，也可以在分类中查找物品
      </view>
      <view class='imagesize'>
        <image class="buyer-img" mode="aspectFit" src="{{image[1]}}" bindtap="img" data-src="1" />
      </view>
    </view>

    <view class="sm">
      <view class="way">
        <view class="num">03</view>
        若要发布商品，则点击发布按钮，进行商品发布
      </view>
      <view class='imagesize'>
        <image class="buyer-img" mode="aspectFit" src="{{image[2]}}" bindtap="img" data-src="2" />
      </view>
    </view>

    <view class="sm">
      <view class="way">
        <view class="num">04</view>
        你需要进入商品详情页，购买商品
      </view>
      <view class='imagesize'>
        <image class="buyer-img" mode="aspectFit" src="{{image[3]}}" bindtap="img" data-src="3" />
      </view>
    </view>

    <view class="sm">
      <view class="way">
        <view class="num">05</view>
        购买商品，则会产生订单,您可以对它进行很多操作
      </view>
      <view class='imagesize'>
        <image class="buyer-img" mode="aspectFit" src="{{image[4]}}" bindtap="img" data-src="4" />
      </view>
    </view>

    <view class="sm">
      <view class="way">
        <view class="num">06</view>
        您的商品被购买后，您也可以随时完成交易。
      </view>
      <view class='imagesize'>
        <image class="buyer-img" mode="aspectFit" src="{{image[5]}}" bindtap="img" data-src="5"  />
      </view>
    </view>

  </view>
</view>
<text space="ensp" class="b">
      注意事项：
</text>
<view class="attention">
  <text>
    为确保交易的安全性，交易地点只能选择给定的校内地点，同时为保证双方交易成功，在买家未收货前，或卖家未确认收款之前，双方不得擅自中止交易。
  </text>
</view>
</view>

效果如下图所示：
在这里插入图片描述

小组成员分工

王湛：增加了商品收藏功能。
王琪：负责小程序所有界面美化。
晏梓昂：编写使用说明页面。
徐鹏：编写关于程序页面。
许振宁：编写用户使用手册页面。

项目燃尽图

在这里插入图片描述

下阶段工作

小程序已经完成，下阶段主要解决实际应用中出现的各种问题。

附会议记录照片

在这里插入图片描述

神~宁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-27

项目进度-05 （2020.12.06~12.26）项目整体进度：我们的小程序已经成型，剩下的工作就是不断测试，并进一步美化。上周主要增加了商品收藏的功能，方便用户保存心仪的商品，同时对小程序的界面进行了美化和加工，令用户体验更加满意。最后，为小程序添加了小程序说明，责任声明，以及用户使用手册页面，使小程序更加完善。一、商品收藏商品收藏功能可以保存心仪但是目前暂时没有购买的商品，为用户提供了更多元的选择，功能代码如下：collect(e){ let that=this; if
复制链接

扫一扫