【微信小程序开发实战项目】——花店微信小程序实战项目（4）_开发测试

【微信小程序开发实战项目】——花店微信小程序实战项目（4）

创始人

2025-01-08 16:34:28

0次

在这里插入图片描述

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由曼亿点原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

花店小程序

文章目录

- ⭐🅰⭐
- ⭐前言⭐
- 🎶 一、鲜花的购物车模块
- - (1)gou.wxml
  - (2)gou.wxss
  - (3)gou.js
- 🎶 二、鲜花的个人中心模块
- - (1)own.wxml
  - (2)own.wxss
  - (3)own.js
  - - 结束语🥇

⭐前言⭐

在这个数字化的时代，鲜花不仅仅是情感的传递者，更是美好生活的点缀。为了让您能更便捷地选购心仪的花束，我们精心打造了这款网上花店微信小程序。
鲜花，承载着爱与祝福，是浪漫与温馨的象征。然而，传统的花店购买方式往往受到时间和空间的限制，让您无法在第一时间将这份美好传递给重要的人。我们深知您对鲜花的热爱和对便捷服务的需求，因此致力于通过技术的力量，为您创造一个全新的购花体验。
这个网上花店微信小程序，将汇聚来自世界各地的优质鲜花品种，以精美的图片和详细的介绍呈现在您眼前。无论您是为了庆祝生日、表达爱意，还是为了装饰家居，只需轻点屏幕，就能轻松挑选到最适合您的那束花。
同时，我们还提供贴心的配送服务，确保每一朵鲜花都能以最鲜活的姿态送达您指定的地点。在这里，您不仅能享受到便捷的购物流程，还能感受到我们对品质和服务的执着追求。
让我们一同开启这充满花香的数字之旅，让鲜花的美丽与温暖，随时伴您左右。

在这里插入图片描述

🎶 一、鲜花的购物车模块

在探寻鲜花之美的旅程中，购物车宛如您贴心的花束收纳篮，承载着您精心挑选的每一份美好期许。
当您漫步于我们的花店小程序，被那一朵朵娇艳欲滴、芬芳四溢的鲜花所吸引时，购物车便是您的私人珍藏空间。它让您能够随心收集心仪的花朵，无论是象征爱情的玫瑰，还是代表友情的向日葵，亦或是寓意祝福的百合。
购物车不仅是一个存放商品的地方，更是您规划美丽与情感的角落。您可以在这里对比不同鲜花的搭配，调整数量，斟酌预算，精心打造属于您的专属花礼。
它简单易用，却又功能强大，随时陪伴您在花的海洋中畅游，确保您不会错过任何一朵让您心动的鲜花。有了购物车，您的鲜花选购之旅将更加轻松、有序、充满乐趣。

(1)gou.wxml

          {dataList}}" wx:for-index="index" wx:key="item">                {item.id}}" checked="{{checked}}" />              {item}}">                    {item.img}}" mode="aspectFill" />                             {{item.content}}                                       ￥               {{item.showPrice}}                                         x{{item.number}}                                                                           {checkAll}}" />全选                              合计：       ￥       {{totalMoney}}          结 算

(2)gou.wxss

/* pages/gou/gou.wxss */ page {   font-size: 32rpx;   background-color: #f1f1f1; }  .bg-color {   background-color: #FF0000;   height: 200rpx;   width: 100%; }  .car-box {   min-height: 300rpx;   border-radius: 20rpx;   background-color: white;   margin: -190rpx 20rpx 20rpx 20rpx;   padding: 20rpx 10rpx; }  .row-data {   display: flex;   flex-direction: row;   align-items: center;   margin-top: 20rpx; }  .row-btn {   width: 10%;   text-align: center; }  .row-list {   width: 90%;   display: flex;   flex-direction: row; }  .row-img {   width: 30%;   background-color: #f1f1f1; }  .row-info {   width: 70%;   display: flex;   flex-direction: column;   justify-content: space-between;   margin-left: 20rpx; }  .row-img image {   width: 100%;   height: 200rpx; }  .row-text {   display: -webkit-box;   -webkit-box-orient: vertical;   -webkit-line-clamp: 2;   text-overflow: ellipsis;   overflow: hidden;   font-size: 30rpx; }  .row-price {   display: flex;   flex-direction: row;   justify-content: space-between; }  .row-price view:first-child {   color: #FA5422; }  .row-icon {   font-size: 26rpx; }  .row-money {   font-weight: bold; }  .btn {   padding: 5rpx 20rpx;   font-size: 28rpx;   color: rgb(230, 204, 231); }  checkbox {   zoom: .8; }  .footer-box {   position: fixed;   bottom: 0;   left: 0;   right: 0;   z-index: 999;   height: 100rpx;   display: flex;   flex-direction: row;   align-items: center;   justify-content: space-between;   background-color: white;   padding: 0 20rpx; }  .level {   display: flex;   flex-direction: row;   align-items: center; }  .total-btn {   color: #FA5422; }  .total-end {   background-color: #FF0000;   margin-left: 20rpx;   padding: 15rpx 50rpx;   border-radius: 50rpx;   font-size: 30rpx;   color: white; }

(3)gou.js

// pages/gou/gou.js  Page({       /**    * 页面的初始数据    */   data: {     checked: false,     checkAll: false,     dataList: [{         id: '000',         img: '/images/hua/12.jpg',         content: '香槟玫瑰',         price: 7800,         showPrice: '78.00',         number: 1       },       {         id: '111',         img: '/images/hua/hau6.jpg',         content: '昆明桃红金芍',         price: 11200,         showPrice: '112.00',         number: 2       }, {         id: '222',         img: '/images/hua/hua7.jpg',         content: '昆明金丝竹桃',         price: 12900,         showPrice: '129.00',         number: 1       },     ],     totalMoney: '0.00',     selectDatas: []   },   // 查看详情   detailClick(e) {     let data = e.currentTarget.dataset.item;     wx.showToast({       title: '点击了查看详情',       icon: 'none'     })     console.log('详情数据：', data)   },   // 单选   checkboxChange(e) {     let money = 0,       str = [];     let attr = e.detail.value;     let list = this.data.dataList;     for (let i = 0; i < list.length; i++) {       for (let k = 0; k < attr.length; k++) {         if (list[i].id === attr[k]) {           money += list[i].price * list[i].number;           str.push(list[i]);         }       }     }     this.setData({       selectDatas: str,       totalMoney: (money / 100).toFixed(2),       checkAll: (list.length == attr.length && list.length > 0) ? true : false     })   },   // 全选   checkboxChangeAll(e) {     let money = 0,       str = [];     let val = e.detail.value;     let list = this.data.dataList;     if (val.length > 0) {       for (let i = 0; i < list.length; i++) {         money += list[i].price * list[i].number;         str.push(list[i]);       }       this.setData({         checked: true,         selectDatas: str,         totalMoney: (money / 100).toFixed(2)       })     } else {       this.setData({         checked: false,         selectDatas: [],         totalMoney: '0.00'       })     }   },   // 结算   totalClick() {     let list = this.data.selectDatas;     if (list.length < 1) {       wx.showToast({         title: '无结算订单',         icon: 'error'       })       return false;     }     wx.showModal({       title: '提示',       content: '确定结算当前订单吗？',       complete: (res) => {         if (res.confirm) {           wx.showToast({             title: '结算完成',           })         }       }     })   }, })

结果展示：
在这里插入图片描述

🎶 二、鲜花的个人中心模块

在这繁花似锦的数字花园中，个人用户中心是独属于您的温馨角落。
它如同您与鲜花世界之间的专属纽带，精心记录着您每一次与美丽邂逅的点点滴滴。在这里，您的喜好、您的选择、您的每一次心动都被悉心珍藏。
个人用户中心是您个性化体验的集中展现，它清晰呈现您的订单历史，让您随时回顾那些充满温馨与惊喜的时刻。您的收货地址被安全保管，确保每一束鲜花都能准确无误地送达您的怀抱。
这里也是您与我们互动交流的窗口，您的建议和反馈如同璀璨星光，指引着我们不断改进与提升，为您创造更优质的服务。
它不仅是一个功能区域，更是您在鲜花之旅中的贴心伙伴，陪伴您走过每一个与花相伴的美好瞬间。

(1)own.wxml

                                                                                  {value}}">昌           花坊会员                                                             我的订单                                          我的收藏                                                我的地址                                         联系客服                                          关于版本号

(2)own.wxss

/* 用户列表选项样式 */ page {   width: 100%;   height: 100%;   background:#f0f0f0; } .parent_catainer{   background:#f0f0f0; }   /* 头部背景图片 */ .container_head{   height: 370rpx;   width: 100%;   display: flex;   justify-content: flex-end;   align-items: flex-end; }   .head_img {   position: absolute;   width: 100%;   height: 370rpx; }   .head_pers_info{    height: 200rpx;    width: 100%;    margin-bottom: 50rpx;    justify-content: left;    display: flex;    align-items: center;    flex-direction: row;    position: absolute; }   .head_pic{   width: 120rpx;   height: 120rpx;   border-radius: 60rpx;   color: #ffffff;   align-items: center;   display: flex;   justify-content: center; } .head_pic_content{   position: absolute;   width: 110rpx;   height: 110rpx;   border-radius: 55rpx;   background-color: white; }   .head_pic{   margin-left: 5%; }   .inf_content{   display: flex;   flex-direction: column;   margin-left: 10rpx;   align-items: flex-start;   justify-content: center;    color: #ffffff;    padding-bottom: 5rpx; }   .user_info{   text-align: left;   font-size: 32rpx;   font-weight: bold;   margin-bottom: 8rpx; }   .family_info_ct_phone{   text-align: center;   justify-content: center;   font-size: 28rpx;   margin-bottom: 2rpx; }   .family_info_ct{   text-align: center;   justify-content: center;   font-size: 28rpx;   margin-bottom: 2rpx;   width: 500rpx;   overflow: hidden;   white-space: nowrap;   text-align: left;   text-overflow: ellipsis; }   .userItemListView{   background: #fff;   padding: 0 0rpx;   margin: 24rpx 0; }   .userItemListView > view{   height: 94rpx;   line-height: 94rpx;   padding-left: 50rpx;   border-bottom: 1rpx solid #F1F1F1;   position: relative; }   /* 移除最后一个元素的下边框 */ .userItemListView > view:last-child{   border: none; }   .my_priview_md{   display: flex;   align-items: center; }   .my_priview{   width: 50rpx;   height: 50rpx;   margin-right: 10rpx; }   .arrow{   width: 16rpx;   height: 16rpx;   border-top: 4rpx solid #999;   border-right: 4rpx solid #999;   /* 旋转45度 */   transform: rotate(45deg);   /* 调整位置 */   position: absolute;   right: 30rpx;   top: 38rpx; }   .userItemListView text{   font-size: 30rpx; }   .last_view{    background:#f0f0f0;    width: 100%;    height:1200rpx; }

(3)own.js

Page({   contact:function(e){ wx.makePhoneCall({   phoneNumber: '18478292935', })   },   myaid:function(e){ wx.navigateTo({   url: '/pages/collection/collection', })   },   myfriend:function(e){     wx.navigateTo({       url: '/pages/won/won',     })       },       user:function(e){         wx.navigateTo({           url: '/pages/users/users',         })           },           openmyorder:function(e){             wx.navigateTo({               url: '/pages/order/order',             })           },      /**    * 页面的初始数据    */   data: {     value:'陶继昌'   },   mycollection(){     wx.navigateTo({       url: '/pages/address/address',     })   },   /**    * 生命周期函数--监听页面加载    */   onLoad() {       var that = this;   },     /**    * 生命周期函数--监听页面初次渲染完成    */   onReady() {     },     // 退出登录   logout: function () {       wx.showModal({       content: '确定退出登录吗？',       cancelColor: '#666666',//666666       confirmColor: '#666666',       success(res) {         if (res.confirm) {           wx.reLaunch({             url: '/pages/login/login'           })           console.log('用户点击确定')         } else if (res.cancel) {           console.log('用户点击取消')         }       },       fail: function (res) { },//接口调用失败的回调函数       complete: function (res) { },//接口调用结束的回调函数（调用成功、失败都会执行     })     },   /**    * 生命周期函数--监听页面显示    */   onShow() {     wx.hideHomeButton();     wx.hideShareMenu();   },     /**    * 生命周期函数--监听页面隐藏    */   onHide() {     },     /**    * 生命周期函数--监听页面卸载    */   onUnload() {     },     /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh() {     },     /**    * 页面上拉触底事件的处理函数    */   onReachBottom() {     },     /**    * 用户点击右上角分享    */   onShareAppMessage() {     } })