|
@@ -1,8 +1,410 @@
|
|
|
<template>
|
|
|
+ <view class="pages">
|
|
|
+ <!-- head -->
|
|
|
+ <view class="scrollPage-header">
|
|
|
+ <view :style="{height:statusBarHeight+'px'}"></view>
|
|
|
+ <view class="header-title">
|
|
|
+ <view class="header-left" @click="goBack">
|
|
|
+ <image style="width: 16px; height: 16px;margin-right:3px;" mode="aspectFit" src="../static/arrow-left.png"></image>
|
|
|
+ <text>返回</text>
|
|
|
+ </view>
|
|
|
+ <view class="header-right"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <view class="scrollPage-content">
|
|
|
+ <view class="product-info">
|
|
|
+ <view :style="{height:statusBarHeight+'px'}"></view>
|
|
|
+ <u-swiper mode="number" :border-radius="0" bg-color="#000" img-mode="heightFix" :interval="3000" :height="450" :list="imgList"></u-swiper>
|
|
|
+ <view class="product-info-text">
|
|
|
+ <view class="product-info-text-title">【新品】Apple iPhone 13 Pro Max (A2644) 256GB 金色 支持移动联通电信5G 双卡双待手机</view>
|
|
|
+ <view class="product-info-text-attr">
|
|
|
+ <view class="product-info-price">
|
|
|
+ ¥<text class="price-red">45.8</text>
|
|
|
+ </view>
|
|
|
+ <view class="product-info-nums">
|
|
|
+ <view @click="share"><u-icon :size='24' name="zhuanfa"></u-icon> 分享</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-divider bg-color="">商品详情</u-divider>
|
|
|
+ <view class="product-info-guige">
|
|
|
+ <view class="row">品牌:<text>箭冠</text></view>
|
|
|
+ <view class="row-ban">原厂编码:<text>128/79 R78 </text></view>
|
|
|
+ <view class="row-ban">产品编码:<text>Y123</text></view>
|
|
|
+ <view class="row-ban">单位:<text>箱</text></view>
|
|
|
+ <view class="row-ban">包装数:<text>5/个</text></view>
|
|
|
+ <view class="row-ban">尺寸:<text>16cm</text></view>
|
|
|
+ <view class="row-ban">内盒尺寸:<text>15cm</text></view>
|
|
|
+ <view class="row-ban">重量:<text>1.5KG</text></view>
|
|
|
+ <view class="row-ban">颜色:<text>箭冠</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="product-info-content"></view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部栏 -->
|
|
|
+ <view class="scrollPage-footer">
|
|
|
+ <view class="scrollPage-footer-box">
|
|
|
+ <view class="footer-left">
|
|
|
+ <view class="footer-left-item" @click="toCart">
|
|
|
+ <u-icon :size='40' name="shopping-cart"></u-icon>
|
|
|
+ <text class="footer-left-item-text">购物车</text>
|
|
|
+ <text class="badge" v-if="totalNum">{{totalNum>99?'99+':totalNum}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer-right">
|
|
|
+ <view class="footer-right-item" @click="addCart">
|
|
|
+ <text>加入购物车</text>
|
|
|
+ </view>
|
|
|
+ <view class="footer-right-item" @click="toBuy">
|
|
|
+ <text>立即购买</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view :style="{height:safeAreaBottom+'px'}"></view>
|
|
|
+ </view>
|
|
|
+ <!-- 立即购买 -->
|
|
|
+ <page-container
|
|
|
+ :show="showPopu"
|
|
|
+ :round="true"
|
|
|
+ :z-index="100"
|
|
|
+ position="bottom"
|
|
|
+ custom-style="height:30%"
|
|
|
+ @afterleave="closePopu">
|
|
|
+ <view class="popu-content">
|
|
|
+ <view class="popu-close" @click="showPopu=false">
|
|
|
+ <icon type="clear" size="24"></icon>
|
|
|
+ </view>
|
|
|
+ <view class="pupu-box">
|
|
|
+ <view class="popu-content-img">
|
|
|
+ <image style="width: 100px; height: 100px;" mode="aspectFit" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="popu-content-info">
|
|
|
+ <view class="popu-content-info-title">【新品】Apple iPhone 13 Pro Max (A2644) 256GB 金色 支持移动联通电信5G 双卡双待手机</view>
|
|
|
+ <view class="popu-content-box">
|
|
|
+ <view class="popu-content-price">¥<text class="price-red">45.8</text></view>
|
|
|
+ <view class="popu-content-num">
|
|
|
+ <text>数量</text>
|
|
|
+ <u-number-box :min="1" :max="99"></u-number-box>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="popu-content-btn">
|
|
|
+ <view class="popu-content-btn-item" @click="toBuy">确定采购</view>
|
|
|
+ </view>
|
|
|
+ <view :style="{height:safeAreaBottom+'px'}"></view>
|
|
|
+ </view>
|
|
|
+ </page-container>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showPopu: false, // 弹框
|
|
|
+ statusBarHeight: 0, // 状态栏高度
|
|
|
+ safeAreaBottom: 0, // 底部安全区域高度
|
|
|
+ imgList: [
|
|
|
+ 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
|
+ 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
|
|
+ ],
|
|
|
+ totalNum: 0 // 购物车总数
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 计算安全区域
|
|
|
+ this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|
|
+ this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
|
|
|
+ },
|
|
|
+ onShareAppMessage() {},
|
|
|
+ methods: {
|
|
|
+ // 返回
|
|
|
+ goBack(){
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+ // 分享
|
|
|
+ share(){
|
|
|
+ uni.share({
|
|
|
+ provider: "weixin",
|
|
|
+ title:"产品标题",
|
|
|
+ scene: "WXSceneSession",
|
|
|
+ type: 0,
|
|
|
+ imageUrl: "https://cdn.uviewui.com/uview/swiper/1.jpg",
|
|
|
+ success: function (res) {
|
|
|
+ console.log("success:" + JSON.stringify(res));
|
|
|
+ },
|
|
|
+ fail: function (err) {
|
|
|
+ console.log("fail:" + JSON.stringify(err));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 加入购物车
|
|
|
+ addCart(){
|
|
|
+
|
|
|
+ },
|
|
|
+ // 打开购物车
|
|
|
+ toCart(){
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/cart/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 立即购买
|
|
|
+ toBuy(){
|
|
|
+ // 打开数量选择弹框
|
|
|
+ if(!this.showPopu){
|
|
|
+ this.showPopu = true
|
|
|
+ }else{
|
|
|
+ // 提交
|
|
|
+ this.submitOk = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭后
|
|
|
+ closePopu(){
|
|
|
+ this.showPopu = false
|
|
|
+ uni.hideLoading()
|
|
|
+
|
|
|
+ // 提交成功
|
|
|
+ if(this.submitOk){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pagesB/procureOrder"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="less">
|
|
|
+ .pages {
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .scrollPage-header{
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ position:fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ .header-title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 44px;
|
|
|
+ .header-left{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ background-color: rgba(255,255,255,0.6);
|
|
|
+ box-shadow: 0px 1px 0px 0px #E6E6E6;
|
|
|
+ border-radius: 50px;
|
|
|
+ padding: 3px 6px 3px;
|
|
|
+ }
|
|
|
+ .header-right{
|
|
|
+ width: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .scrollPage-content{
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ .product-info{
|
|
|
+ background:#fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .product-info-text{
|
|
|
+ padding: 10px;
|
|
|
+ .product-info-text-title{
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .product-info-text-attr{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .product-info-price{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FF0000;
|
|
|
+ .price-red{
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-info-nums{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-info-guige{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ background:#fff;
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 10px;
|
|
|
+ line-height: 28px;
|
|
|
+ .row{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .row-ban{
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ >view{
|
|
|
+ color: #999;
|
|
|
+ text{
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-info-content{
|
|
|
+ background:#fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .scrollPage-footer{
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ .scrollPage-footer-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ .footer-left{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 35%;
|
|
|
+ .footer-left-item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 15px;
|
|
|
+ position: relative;
|
|
|
+ .footer-left-item-text{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 3px;
|
|
|
+ }
|
|
|
+ .badge{
|
|
|
+ background: #f44336;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -8px;
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-right{
|
|
|
+ width: 60%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .footer-right-item{
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 50%;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .footer-right-item:first-child{
|
|
|
+ background-color: #FF9900;
|
|
|
+ }
|
|
|
+ .footer-right-item:last-child{
|
|
|
+ background-color: #FF0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popu-content{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ .popu-close{
|
|
|
+ padding: 10px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ .pupu-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 25px;
|
|
|
+ }
|
|
|
+ .popu-content-img{
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ }
|
|
|
+ .popu-content-info{
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+ .popu-content-info-title{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popu-content-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 10px;
|
|
|
+ .popu-content-price{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FF0000;
|
|
|
+ .price-red{
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popu-content-num{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popu-content-btn{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ .popu-content-btn-item{
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #FF0000;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|