uniapp-商城-34-shop 購物車 選好了 進行訂單確認整體

在shop頁面選中商品添加到購物車,可選好后,進行確認和支付。具體呈現在shop頁面。

1 購物車欄

shop頁面代碼:

購物車代碼:

代碼:

<template><view><view class="carlayout"><!-- 車里面 點擊購物車 彈出的內容 --><view class="goods" v-if="carShow"><!-- 彈窗列表 --><view class="head"><view class="text">已選商品</view><view class="empty" @click="clearCar">清空</view></view><scroll-view scroll-y="true" class="body"><view calss="scrollContent"><view class="caritem" v-for="item,index in carsList" :key="index"><car-item :item="item"></car-item></view></view></scroll-view></view><!-- 購物車 --><view class="content"><view class="left"><view class="icon" hover-class="iconhover" hover-stay-time="50" hover-start-time="10" @click="onClickCar" v-if="!type"><!-- 鼠標點擊就會 觸發 iconhover 這個類名   --><!-- hover-stay-time 彈回 就很塊了只有 50ms --><u-icon name="shopping-cart" size="50" color="#5ac725"></u-icon><view class="num">{{totalNumValue}}</view></view><view class="price" >合計<text class="text">¥{{totalPrice}}</text></view></view><view class="right"><view class="btn disable" v-if="!type"  @click="goPaypage">選好了</view><view class="btn disable" v-else  @click="confirmPay">支付</view></view></view><view class="safeAreaBottom"></view><!-- 上面安全區域是設置為ios使用的,怕底部的區域被遮擋了 --></view><!-- 遮罩層  u-overlay 通過zindex 來層級顯示--><u-overlay :show="carShow" z-index="9" @click="onClickCar" duration="100"></u-overlay></view><!-- 這里有一個遮罩在view外,所以總的來說就還要一個 盒子,這vue2規定只能有一個頂級盒子在template中,不能多個盒子并起來,必須把里面的盒子包裹起來 -->
</template><script>import {mapState,mapMutations,mapGetters} from "vuex"export default {name: "car-Layout",data() {return {carShow:false,};},props:{type:{type:String,default:""}},computed:{...mapGetters(["carsList","totalPrice","totalNumValue"])},methods:{...mapMutations(["setCarsList"]),//確認支付confirmPay(){console.log("確認支付");},//清空購物車clearCar(){this.setCarsList(0);},//點擊購物車,改變carShow,進而改變顯示狀態onClickCar(){this.carShow=!this.carShow;},//點擊選好了,跳轉到支付頁面goPaypage(){uni.navigateTo({url:"/pagesub/pageshop/paypage/paypage"})}}}
</script><style lang="scss" scoped>.carlayout {//有這個 content 下面的css始終不生效    太tmd 想爆粗口了   找了好久這個問題,最后發現是 class寫錯了  寫成了 		<view calss="carlayout">position: relative; //相對定位,不脫離文檔流z-index: 10;   //比 u-overlay  遮罩層 高就好.goods {border-bottom: 1rpx solid $border-color-light;padding: 30rpx 30rpx 0;border-radius: 20rpx 20rpx 0 0;background-color: #fff;.head {@include flex-box();color: $text-font-color-3;padding: 25rpx 0;.empty {color: $brand-theme-color-aux;}}.body {height: 500rpx;}}.content {display: flex;justify-content: space-between;align-items: center;padding: 0 30rpx;height: 140rpx;background: #fff;.left {@include flex-box();.iconhover {transform: scale(0.7); //鼠標點擊后就縮小到0.8 然后松開鼠標就彈回 1}.icon {width: 80rpx;height: 80rpx;background-color: #eee;border-radius: 10rpx;@include flex-box-set();position: relative; //這里就是相對定位  就是為后面的num  固定到右上角的絕對定位做鋪墊   num就是子級  這里的icon 就是父級margin-right: 30rpx;.num {width: 36rpx;height: 36rpx;background: $brand-theme-color;border-radius: 50%; //圓形color: #fff;position: absolute; //這里就是絕對定位   固定到icon右上角的絕對定位  num就是子級  icon 就是父級right: -18rpx;top: -18rpx;@include flex-box-set();font-size: 22rpx;}}.price {font-size: 28rpx;.text {font-size: 32rpx;font-weight: bold;}}}.right {.btn {width: 210rpx;height: 75rpx;background: $brand-theme-color;@include flex-box-set();color: #fff;border-radius: 10rpx;&.disable {opacity: 0.4; //表示透明度    變透明意思是disable了}}}}.safeAreaBottom {//這個是 用來設置ios的安全區域的,安卓是不能執行env(safe-area-inset-bottom)  這句話的width: 100%;height: env(safe-area-inset-bottom);background: #fff;}}//有這個  下面的css始終不生效
</style>

2 購物籃代碼解析

2.1、shop就使用了組件

2.2、購物車中,右邊的文字就是支付和選好了

選好了跳轉到確認訂單頁面

支付就是在訂單頁面展現的

實現的是一個組件多個頁面共用

3 確認訂單頁面的代碼

3.1、頁面組成

a、確認頁面,存在外送? 自提選項,主要差異:

外送和自提組件:delivery-layout??

自提選項中,需要展示商家地址、 自提時間? 還有商家的聯系方式

外送選項中,主要就是收貨地址 收貨人

b、相同點 為 購物車中商品信息(goods-list組件)

c、另外還存在支付選項

支付寶和微信,默認選項為微信

d、購物車中,右邊 為支付(在shop頁面顯示為選好了)

3.2 確認訂單具體代碼

<template><view class="paypage"><!-- 確認訂單,支付訂單 --><!-- 配送方式 --><delivery-layout></delivery-layout><!-- 購物列表 --><view class="goodsList"><goods-list></goods-list></view><!-- #ifndef MP-WEIXIN --><view class="payType"><view class="box" :class="item.value==payDefValue ? 'active' : ''" v-for="item,index in payType":key="index" @click="clickBtn(item.value)"><u-icon :name="item.icon" size="26" class="icon":color="item.value==payDefValue ? item.color :''"></u-icon><text class="font">{{item.name}}</text><!-- <u-icon name="weixin-fill" size="26" class="font"></u-icon><text class="font">微信</text>--></view></view><!-- #endif --><view class="payTabbar"><car-Layout type="pay"></car-Layout></view><view class="safeAreaBottom"></view><!-- 上面安全區域是設置為ios使用的,怕底部的區域被遮擋了 --></view>
</template><script>export default {data() {return {// #ifdef MP-WEIXINpayDefValue: "wxpay",// #endif// #ifndef MP-WEIXINpayDefValue: "alipy",// #endifpayType: [{name: "支付寶",value: "alipy", //必須寫這個值,后面要用到icon: "zhifubao",color: "#1578ff", //:color="item.value==payDefValue ? item.color :''"},{name: "微  信",value: "wxpay", //必須寫這個值,后面要用到icon: "weixin-fill",color: "#04c15f", //:color="item.value==payDefValue ? item.color :''"},]};},methods: {//切換支付方式clickBtn(type) {this.payDefValue = type}}}
</script><style lang="scss">page {background-color: $page-bg-color;}.paypage {padding: 30rpx;.goodsList {margin-top: 30rpx;}.payType {@include flex-box();.box {//box 就兩個支付方式    width: 45%; //一個支付方式站49 剩下中間的2的空格height: 75rpx;background: #fff;border-radius: 10rpx;@include flex-box-set();// filter: grayscale(100%);   //濾鏡效果  100%把顏色全濾掉      我們已經用了 :color="item.value==payDefValue ? item.color :''"  就不用濾鏡了border: 1rpx solid #fff;.font {padding-left: 10rpx;}}//可以這樣 當用text時,若用view + style  就不用下面的方式.box:first-child.active {border-color: #1578ff; //邊框顏色color: #1578ff;}.box:last-child.active {border-color: #04c15f;color: #04c15f;}}.payTabbar {position: fixed;width: 100%;bottom: 0;left: 0}}
</style>

3.3 配送方式代碼:

<template><view class="delivery"><view class="headNav">外送</view><view class="body"><view class="box" @click="goAddress"><view class="left">收貨地址</view><view class="center"><view v-if="deliveryInfo.address"><view class="detail">{{deliveryInfo.address}}</view><view class="userinfo">{{deliveryInfo.username + "-" + deliveryInfo.mobile}}</view></view><view class="addressTxt" v-else>請添加收貨地址</view></view><view class="right"><u-icon name="arrow-right" color="#999" size="18"></u-icon></view></view></view></view>
</template><script>export default {name:"delivery-layout",data() {return {deliveryInfo:{address:"北京市海定區頤和園路",username:"李曉峰",mobile:null}}},methods:{goAddress(){uni.navigateTo({url:"/pagesub/pageshop/address/addrlist"})}}}
</script><style lang="scss">
.delivery{.headNav{width: 100%;height: 78rpx;background: #fff;@include flex-box-set();color:$brand-theme-color;border-radius: 15rpx 15rpx 0 0;}.body{background: #fff;padding:25rpx;.box{padding:40rpx 20rpx;background: $page-bg-color;border-radius: 10rpx;font-size: 30rpx;@include flex-box();.center{flex:1;padding:0 30rpx;font-size: 30rpx;.userinfo{padding-top:10rpx;}}}}
}
</style>

3.4 收貨地址頁面:

訂單頁面需要添加地址時,需跳轉到這個頁面

<template><view class="selfAddress"><!-- 地址列表 --><view class="headTop"><view class="title">地址簿</view><navigator class="addressBtn" url="/pagesub/pageshop/address/addredit">+ 添加地址</navigator></view><view class="list"><view class="item" v-for="item,index in 3" :key="index"><view class="head"><view class="user">張三,18066668888</view><view class="select"><u-button v-if="false" color="#EC544F" plain size="mini" text="默認地址"></u-button><u-button color="#666" v-else plain size="mini" text="設為默認"></u-button></view></view><view class="more">云南省昆明市高新區XXX樓</view></view></view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss">
page{background: $page-bg-color;
}
.selfAddress{padding:30rpx;.headTop{@include flex-box();font-size: 30rpx;font-weight: bold;.addressBtn{border:1px solid #000;border-radius: 50rpx;padding:6rpx 15rpx;}}.list{padding-top:30rpx;.item{background: #fff;padding:40rpx 20rpx;margin-bottom: 30rpx;border-radius: 15rpx;.head{@include flex-box();font-weight: bold;}.more{font-size: 28rpx;color:$text-font-color-3;padding-top:10rpx;}}}
}
</style>

3.5 地址頁面修改和添加

<template><view class="addressForm"><!-- 地址編輯 --><u--formlabelPosition="top":model="addressForm":rules="addressRules"labelWidth="100"ref="uForm"			><u-form-itemlabel="姓名"prop="username"					><u--inputv-model="addressForm.username"placeholder="請輸入姓名"></u--input></u-form-item><u-form-itemlabel="聯系電話"prop="mobile"					><u--inputv-model="addressForm.mobile"placeholder="請輸入聯系電話"></u--input></u-form-item><u-form-itemlabel="詳細地址"prop="address"					><u--inputv-model="addressForm.address"placeholder="請輸入街道門牌號"></u--input></u-form-item><u-form-item label="是否默認"><u-switch v-model="addressForm.selected"inactiveColor="#eee"></u-switch></u-form-item><u-form-item></u-form-item><u-form-item><u-button type="primary" @click="onSubmit">提交</u-button></u-form-item></u--form></view>
</template><script>export default {data() {return {addressForm:{username:"",mobile:"",address:"",selected:false},addressRules:{username:[{required: true,message: '姓名是必填的',							trigger: ['blur', 'change']},{min: 2,max: 8,message: '長度在2-8個字符之間',trigger: ['blur', 'change']}],mobile:[{required: true,message: '電話是必填的',							trigger: ['blur', 'change']},{							validator: (rule, value, callback) => {								return uni.$u.test.mobile(value);},message: '手機號碼不正確',							trigger: ['change','blur']}],address:[{required: true,message: '地址是必填的',							trigger: ['blur', 'change']}]}};},methods:{onSubmit(){this.$refs.uForm.validate().then(res => {uni.$u.toast('校驗通過')}).catch(errors => {uni.$u.toast('校驗失敗')})}}}
</script><style lang="scss">
.addressForm{padding:30rpx;
}
</style>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/78274.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/78274.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/78274.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

數據倉庫是什么?數據倉庫架構有哪些?

目錄 數據倉庫是什么&#xff1f;數據倉庫架構有哪些&#xff1f; 一、數據倉庫是什么&#xff1f; 二、數據倉庫的架構分層 1. 獲取層 2. 數據層 3. 應用層 4. 訪問層 三、數據倉庫的價值體現 1.決策支持 2.業務優化 3.提升競爭力 四、數據倉庫的未來發展趨勢 總…

單片機——使用printf調試

配置printf()輸出函數 1、來自于<stdio.h> 2、運行C語言時&#xff0c;輸出到終端 3、單片機沒有終端&#xff0c;需要使用串口&#xff0c;將要輸出的內容傳到電腦&#xff08;串口調試助手&#xff09;上 例子如下 #include <stdio.h> #include &qu…

人臉識別考勤系統實現教程:基于Face-Recognition、OpenCV與SQLite

引言 隨著人工智能技術的飛速發展&#xff0c;人臉識別技術已廣泛應用于安防、金融、教育等多個領域。本文將帶領大家利用Python的face-recognition庫、OpenCV和SQLite數據庫&#xff0c;從零開始構建一個具備異常報警功能的人臉識別考勤系統。該系統能夠實時檢測視頻流中的人…

親測成功???Linux下編譯opencv-4.10.0(靜態鏈接庫和動態鏈接庫)

1. 安裝依賴 在編譯之前&#xff0c;確保系統中安裝了必要的依賴工具和庫。運行以下命令安裝&#xff1a; sudo apt update sudo apt-get install build-essential sudo apt-get install cmake git libgtk2.0-dev pkg-config sudo apt-get install libavcodec-dev libavforma…

windows 部署Prometheus+Node-expoter

Prometheus v3.2.1 離線部署方式 通過helm部署prometheus會自動部署Node-expoter只需要添加prometheus的抓取規則&#xff01;&#xff01; 刪除&#xff1a; 清除之前安裝的 Prometheus 如果你之前已經安裝了 Prometheus&#xff0c;需要清除原有的 Prometheus 安裝&#xf…

HTMLCSS實現網頁輪播圖

網頁中輪播圖區域的實現與解析 在現代網頁設計中&#xff0c;輪播圖是一種常見且實用的元素&#xff0c;能夠在有限的空間內展示多個內容&#xff0c;吸引用戶的注意力。下面將對上述代碼中輪播圖區域的實現方式進行詳細介紹。 一、HTML 結構 <div class"carousel-c…

Linux:進程的概念

基本概念 課本概念&#xff1a;程序的一個可執行實例&#xff0c;正在執行的程序。 內核觀點&#xff1a;擔當分配系統資源實體。 當操作系統要執行程序時&#xff0c;也就是說操作系統要執行代碼&#xff0c;但一個操作系統需要執行多個程序&#xff0c;而CPU只有一塊&#xf…

前端基礎之《Vue(10)—過濾器》

一、過濾器 1、作用 用于數據處理。 2、全局過濾器 使用Vue.filter(名稱, val>{return newVal})定義。 在任何組件中都可以直接使用。 3、局部過濾器 使用選項&#xff0c;filters: {}定義&#xff0c;只能在當前組件中使用。 4、過濾器在Vue 3.0中已經淘汰了 5、過濾器…

平板電腦做歐盟網絡安全法案(EU)2022/30

平板電腦做歐盟網絡安全法案&#xff08;EU&#xff09;2022/30 平板電腦做EN18031,平板電腦做無障礙法規EU2019/882 歐盟委員會于2022年通過補充授權法案 &#xff08;EU&#xff09; 2022/30&#xff0c;明確要求無線電設備需滿足網絡安全、隱私保護及反欺詐要求。 新規時間軸…

Unity中打可選擇的AssetBundle,以及URP中加載AssetBundle包Shader丟失問題顯示洋紅色的解決方案

在上一篇打AssetBundle中已經實現了簡單的打AB包和加載,《Unity中打包AssetBundle并加載》,本篇筆記是進一步上一篇最后提出的問題,進行優化。 一、打可選擇的AssetBundle 每次打包都會把設置了AssetBundle名稱和后綴的所有文件都打包,這也是現在網上教學最多的 但是有時…

解決cannot find attribute `serde` in this scope記錄

問題描述&#xff1a; 在Rust中使用serde做json序列化&#xff0c;需要對一個字段指定序列化方法&#xff0c;添加serde注解后報錯: error: cannot find attribute serde in this scope --> src\models\order_model.rs:38:7 | 38 | #[serde(deserialize_with &qu…

基于whisper和ffmpeg語音轉文本小程序

目錄 一、環境準備 ? 第一步&#xff1a;安裝并準備 Conda 環境 ? 第二步&#xff1a;創建 Whisper 專用的 Conda 虛擬環境 ? 第三步&#xff1a;安裝 GPU 加速版 PyTorch&#xff08;適配 RTX 4060&#xff09; ? 第四步&#xff1a;安裝 Whisper 和 FFMPEG 依賴 ?…

Linux GPIO驅動開發實戰:Poll與異步通知雙機制詳解

1. 引言 在嵌入式Linux開發中&#xff0c;GPIO按鍵驅動是最基礎也最典型的案例之一。本文將基于一個支持poll和異步通知雙機制的GPIO驅動框架&#xff0c;深入剖析以下核心內容&#xff1a; GPIO中斷與防抖處理環形緩沖區設計Poll機制實現異步通知(SIGIO)實現應用層交互方式 …

【最新版】西陸健身系統源碼全開源+uniapp前端

一.系統介紹 一款基于UniappThinkPHP開發健身系統&#xff0c;支持多城市、多門店&#xff0c;包含用戶端、教練端、門店端、平臺端四個身份。有團課、私教、訓練營三種課程類型&#xff0c;支持在線排課。私教可以通過上課獲得收益&#xff0c;在線申請提現功能&#xff0c;無…

濟南國網數字化培訓班學習筆記-第二組-6-輸電線路現場教學

輸電線路現場教學 桿塔組裝 角鋼塔 角鋼-連扳-螺栓 螺栓&#xff08;M&#xff09;&#xff1a; 腳釘-螺栓&#xff08;螺栓頭-無扣長-螺紋-螺帽&#xff09;-墊片-螺帽/防盜帽/防松帽M20*45 表示直徑20mm&#xff0c;長度45mm螺栓級別由一個類似浮點數表示&#xff0c;如…

抖音的逆向工程獲取彈幕(websocket和protobuf解析)

目錄 聲明前言第一節 獲取room_id和ttwid值第二節 signture值逆向python 實現signature第三節 Websocket實現長鏈接請求protubuf反序列化pushFrame反序列化Response解壓和反序列化消息體Message解析應答ack參考博客聲明 本文章中所有內容僅供學習交流使用,不用于其他任何目的…

反射,枚舉,lambda表達式

目錄 反射枚舉的使用Lambda表達式函數式接口語法Lambda表達式語法精簡 變量捕獲Lambda在集合List中的使用 反射 作用&#xff1a;在Java代碼中&#xff0c;讓一個對象認識到自己 比如一個類的名字&#xff0c;里面的方法&#xff0c;屬性等 讓程序運行的過程&#xff0c;某個對…

鴻蒙移動應用開發--渲染控制實驗

任務&#xff1a;使用“對象數組”、“ForEach渲染”、“Badge角標組件”、“Grid布局”等相關知識&#xff0c;實現生效抽獎卡案例。如圖1所示&#xff1a; 圖1 生肖抽獎卡實例圖 圖1(a)中有6張生肖卡可以抽獎&#xff0c;每抽中一張&#xff0c;會通過彈層顯示出來&#xf…

webpack基礎使用了解(入口、出口、插件、加載器、優化、別名、打包模式、環境變量、代碼分割等)

目錄 1、webpack簡介2、簡單示例3、入口(entry)和輸出(output)4、自動生成html文件5、打包css代碼6、優化&#xff08;單獨提取css代碼&#xff09;7、優化&#xff08;壓縮過程&#xff09;8、打包less代碼9、打包圖片10、搭建開發環境&#xff08;webpack-dev-server&#xf…

Java快速上手之實驗4(接口回調)

1&#xff0e;編寫接口程序RunTest.java&#xff0c;通過接口回調實現多態性。解釋【代碼4】和【代碼6】的執行結果為何不同&#xff1f; interface Runable{ void run(); } class Cat implements Runable{ public void run(){ System.out.println("貓急上樹.."…