使用微信小程序開發(fā)的一個鮮花銷售小程序?

?

?

?

首頁部分源碼

//新品上架newpin:[{cp_id:0,cp_mingcheng:"桃紅雪山玫瑰",jiage:99,cp_tupian:"https://i.loli.net/2021/05/14/6YBDdEqzvken2RK.jpg"},{cp_id:1,cp_mingcheng:"香檳玫瑰百合",jiage:139,cp_tupian:"https://i.loli.net/2021/05/14/AaQTgKWyCLqr9oG.jpg"},{cp_id:2,cp_mingcheng:"粉色康乃馨",jiage:179,cp_tupian:"https://i.loli.net/2021/05/14/umT16axSJhKHOeG.jpg"},{cp_id:3,cp_mingcheng:"藍(lán)繡球向日葵",jiage:229,cp_tupian:"https://i.loli.net/2021/05/14/T6L3JbnyEQkl15e.jpg"}],//猜你喜歡guesslike:[{like_id:0,likeimg:"https://i.loli.net/2021/05/14/HOiVc5ujp2gr3EQ.jpg",likename:"媽媽辛苦了",jieshao:"19枝粉色康乃馨搭配白桔梗、白色滿天星、紐扣菊、白色煙花扶郎、小葉尤加利葉",paynum:9979,likejiage:149},{like_id:1,likeimg:"https://i.loli.net/2021/05/14/6p3znkMStuwfAyY.jpg",likename:"向陽的溫暖",jieshao:"2枝向日葵3枝白荔枝玫瑰搭配香檳翠菊、黃色多頭玫瑰白桔梗、尤加利葉",paynum:6979,likejiage:99},{like_id:2,likeimg:"https://i.loli.net/2021/05/14/hVjolpLXKWSFiCB.jpg",likename:"愛意連綿",jieshao:"33枝卡羅拉玫瑰搭配白色滿天星",paynum:3979,likejiage:199}]},// 關(guān)閉公告closeNotices:function(options){this.setData({isOpen:!this.data.isOpen}) },// 監(jiān)聽動畫結(jié)束animationend(){ console.log("") }, // 改變點(diǎn)擊狀態(tài)onShow() { this.initAnimation(this.data.text) }, onHide() { this.destroyTimer() this.setData({timer: null }) }, onUnload() { this.destroyTimer() this.setData({timer: null }) }, destroyTimer() { if (this.data.timer) {clearTimeout(this.data.timer); } }, /** * 開啟公告字幕滾動動畫 */ initAnimation(texts) { let that = this// 獲取文本節(jié)點(diǎn)信息 let query = wx.createSelectorQuery() query.select('.content-box').boundingClientRect() query.select('#text').boundingClientRect() query.exec((rect) => {that.setData({textWidth: rect[1].width,duration:rect[1].width/16*400}, () => {this.startAnimation()}) }) // 創(chuàng)建動畫對象 this.data.animation = wx.createAnimation({duration: this.data.duration,timingFunction: 'linear' })}, // 定時器動畫 startAnimation() { //reset重復(fù)滾動 this.data.animation.option.transition.duration = 0 const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({duration:0}) this.setData({animationData: resetAnimation.export() }); // 讓文字滾動起來 const animationData = this.data.animation.translateX(-this.data.textWidth).step({ duration: this.data.duration }); setTimeout(() => {this.setData({animationData: animationData.export(),}) }, 50); // 設(shè)置開啟動畫的間隔 const timer = setTimeout(() => {this.startAnimation() }, this.data.duration); this.setData({timer }); }, maxonclick(e){wx.navigateTo({url: '' ,}) },})

分類頁面

分類頁面部分源碼

<!--pages/category/index.wxml--> <!-- 分類頁面 --><!-- 搜索框 --> <search></search><!--分類欄--> <view class="container"><!--左側(cè)欄--><view class="nav_left"><block wx:for="{{cateItems}}" wx:key="cate_id"><!--當(dāng)前項(xiàng)的id等于item項(xiàng)的id，那個就是當(dāng)前狀態(tài)--><!--用data-index記錄這個數(shù)據(jù)在數(shù)組的下標(biāo)位置，使用data-id設(shè)置每個item的id值，供打開2級頁面使用--><view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view></block></view><!--右側(cè)欄--><view class="nav_right"><!--如果有數(shù)據(jù)，才遍歷項(xiàng)--><view wx:if="{{cateItems[curIndex].ishaveChild}}"><block wx:for="{{cateItems[curIndex].children}}" wx:key="cate_id"><view class="nav_right_items"><!--界面跳轉(zhuǎn) --><navigator url=""><image src="{{item.image}}"></image><text>{{item.name}}</text></navigator></view></block></view><!--如果無數(shù)據(jù)，則顯示數(shù)據(jù)--><view class="nodata_text" wx:else>該分類暫無數(shù)據(jù)</view></view> </view><!-- 客服按鈕 --> <kefu></kefu> <!-- 回到頂部按鈕 --> <backtop></backtop>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?購物車頁面?

?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?購物車頁面部分源碼

// 添加按鈕被點(diǎn)擊addButtonClick: function(tap) {var that = this;var user_data = wx.getStorageSync('user_data'); //獲取緩存里面的用戶信息const index = parseInt(tap.currentTarget.id); //獲取當(dāng)前的商品的索引值let dataSource = that.data.dataSource; //購物車所有的商品數(shù)據(jù)let quantity = dataSource[index].quantity; //獲取購買數(shù)量quantity = quantity + 1; //將購買數(shù)量 +1dataSource[index].quantity = quantity; //更改當(dāng)前商品的數(shù)量that.setData({dataSource: dataSource //更新商品數(shù)據(jù)});that.getTotalPrice(); //重新計(jì)算總價(jià)格},// 減少按鈕被點(diǎn)擊reduceButtonClick: function(tap) {var that = this;var user_data = wx.getStorageSync('user_data');const index = parseInt(tap.currentTarget.id);let dataSource = that.data.dataSource[index];let quantity = dataSource.quantity; //獲取購買數(shù)量if (quantity == 1) { //判斷是否等于1wx.showModal({title: '提示',content: '確定將 ' + dataSource.name + ' 移出購物車嗎？',success: function(sm) {if (sm.confirm) {var tempData = that.data.dataSource; //所有商品數(shù)據(jù)tempData.splice(index, 1); //從當(dāng)前索引值開始刪除1項(xiàng)數(shù)據(jù)that.setData({dataSource: tempData //更新數(shù)據(jù)})} else if (sm.cancel) {return false;}}})} else { //如果商品數(shù)量不等于 1 var dataSource_2 = that.data.dataSource;var quantity2 = quantity - 1;dataSource_2[index].quantity = quantity2;this.setData({dataSource: dataSource_2});}that.getTotalPrice(); //重新計(jì)算總價(jià)格},/*checkbox 選中或未選中都會觸發(fā)該事件*/checkboxChange: function(e) {var that = this;that.setData({all_shop: e.detail.value,})},//刪除單個商品deleteGoods(e) {const index = e.currentTarget.dataset.index;const cartId = e.currentTarget.dataset.cart_id;let carts = this.data.dataSource;wx.showModal({title: '溫馨提示',content: '確定刪除當(dāng)前商品嗎？',confirmColor: "#f00",success: (res) => {if (res.confirm) {wx.showLoading({title: '加載中'});carts.splice(index, 1);this.updateCarts(carts);//更新總價(jià)this.getTotalPrice();wx.hideLoading();}}})},//更新數(shù)據(jù)函數(shù)updateCarts(data) {this.setData({dataSource: data})},/*點(diǎn)擊結(jié)算 */toBuy: function(tap) {var that = this;let good = this.data.dataSource; //所有商品數(shù)據(jù)let user_info = wx.getStorageSync('user_data')if (that.data.total_all_price == 0) { //判斷是否選擇了商品，這里我是判斷總價(jià)格wx.showToast({title: '請選擇商品',})} else {this.data.good_one = []; //重置數(shù)組for (var i = 0; i < this.data.dataSource.length; i++) { //循環(huán)購物車中的商品if (good[i].checks == true) {var good_one1 = [good[i].cart_id, good[i].quantity];this.data.good_one.push(good_one1) //將數(shù)據(jù)添加到數(shù)組里邊}}}},/**點(diǎn)擊全選 */setChecked: function() {let checked = this.data.checked; //是否為全選狀態(tài)checked = !checked; //改變狀態(tài)let dataSource = this.data.dataSource;for (let i = 0; i < dataSource.length; i++) {dataSource[i].checks = checked; // 改變所有商品狀態(tài)}this.setData({checked: checked, //更新全選狀態(tài)dataSource: dataSource //更新所有商品的狀態(tài)});this.getTotalPrice(); //重新獲取總價(jià)格},/**點(diǎn)擊單個多選框 */allCheckbox: function(tap) {var a = 0 //設(shè)置初始總價(jià)格var index = tap.currentTarget.dataset.index //獲取索引值let good = this.data.dataSource //獲取購物車列表const checks = good[index].checks; //獲取當(dāng)前商品的選中狀態(tài)good[index].checks = !checks //改變當(dāng)前商品的狀態(tài)var all_shop_1 = parseInt(good[index].cart_id) //獲取商品的購物車idvar shop_quantity_1 = good[index].quantity //獲取商品的數(shù)量this.setData({dataSource: good});this.getTotalPrice() //重新獲取總價(jià)格/*設(shè)置全選 */for (let i = 0; i < good.length; i++) {a += good[i].quantity * good[i].price}if (this.data.total_all_price == a) {this.setData({checked: true})} else {this.setData({checked: false})}},/**計(jì)算總價(jià)格 */getTotalPrice() {let good = this.data.dataSource; // 獲取購物車列表let total = 0;for (let i = 0; i < good.length; i++) { // 循環(huán)列表得到每個數(shù)據(jù)if (good[i].checks) { // 判斷選中才會計(jì)算價(jià)格total += good[i].quantity * good[i].price; // 所有價(jià)格加起來}}this.setData({ // 最后賦值到data中渲染到頁面good: good,total_all_price: total.toFixed(2),});}, })

?

用戶頁面?

?

?

?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?用戶頁面部分源碼?

<!--pages/user/index.wxml--> <view class="view_contain"><!-- 頂部登錄部分 --><view class="view_top"><view class="view_image_text"><image class="image_radius" src="/pages/images/mytx.jpg" /><button class="button" open-type="getUserInfo" bindtap="login"> 登錄 </button></view></view><!-- 中間功能按鈕部分 --><view class="view_center"><view class="view_tupianwenzi"><image class="image_tupian" src="/pages/images/my2.png"></image><text class="text_saoyisao">待付款</text></view><view class="view_tupianwenzi"><image class="image_tupian" src="/pages/images/my3.png"></image><text class="text_saoyisao">待發(fā)貨</text></view><view class="view_tupianwenzi"><image class="image_tupian" src="/pages/images/my4.png"></image><text class="text_saoyisao">待收貨</text></view><view class="view_tupianwenzi"><image class="image_tupian" src="/pages/images/my5.png"></image><text class="text_saoyisao">待評價(jià)</text></view></view><!-- 頂部功能列表部分 --><view class="view_bottom"><view class="list-item"><image class="item-image" src="/pages/images/my6.png"></image><text class="item-text">我的收藏</text><view class="detail2"><text> ></text></view></view><view class="line"></view><view class="list-item"><image class="item-image" src="/pages/images/my7.png"></image><text class="item-text">我的評價(jià)</text><view class="detail2"><text> ></text></view></view><view class="line"></view><view class="list-item"><image class="item-image" src="/pages/images/my8.png"></image><text class="item-text">版本更新</text><view class="detail2"><text> ></text></view></view><view class="line"></view><view class="list-item"><image class="item-image" src="/pages/images/my9.png"></image><text class="item-text">購買歷史</text><view class="detail2"><text> ></text></view></view><view class="line"></view><view class="list-item"><image class="item-image" src="/pages/images/my10.png"></image><text class="item-text">分享邀請</text><view class="detail2"><text> ></text></view></view><view class="line"></view></view> </view> <!-- 客服按鈕 --> <kefu></kefu>

?

?

?

總結(jié)

以上是生活随笔為你收集整理的花乐鲜购小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。