|
@@ -13,14 +13,14 @@
|
|
|
</view>
|
|
|
<!-- 内容 -->
|
|
|
<view class="scrollPage-content">
|
|
|
- <view class="product-info">
|
|
|
+ <view class="product-info" v-if="detail">
|
|
|
<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>
|
|
|
+ <u-swiper mode="number" :border-radius="0" bg-color="#000" img-mode="widthFix" :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-title">{{detail.productName}}</view>
|
|
|
<view class="product-info-text-attr">
|
|
|
<view class="product-info-price">
|
|
|
- ¥<text class="price-red">45.8</text>
|
|
|
+ ¥<text class="price-red">{{hasLogin ? detail.price : '***'}}</text>
|
|
|
</view>
|
|
|
<view class="product-info-nums">
|
|
|
<view class="share">
|
|
@@ -31,18 +31,21 @@
|
|
|
</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 class="product-info-guige" v-if="detail">
|
|
|
+ <view class="row">品牌:<text>{{detail.productBrandName||'--'}}</text></view>
|
|
|
+ <view class="row-ban">原厂编码:<text>{{detail.productOrigCode||'--'}} </text></view>
|
|
|
+ <view class="row-ban">产品编码:<text>{{detail.productCode||'--'}}</text></view>
|
|
|
+ <view class="row-ban">计量单位:<text>{{detail.unit||'--'}}</text></view>
|
|
|
+ <view class="row-ban">包装数:<text>{{ (detail && detail.packQty) || '--' }}{{ (detail && detail.packQty) ? detail.unit : '' }}/{{ detail.packQtyUnit||'--' }}</text></view>
|
|
|
+ <view class="row-ban">尺寸:<text>{{detail.size||'--'}}</text></view>
|
|
|
+ <view class="row-ban">内盒尺寸:<text>{{detail.size||'--'}}</text></view>
|
|
|
+ <view class="row-ban">重量:<text>{{detail.weight||'--'}}</text></view>
|
|
|
+ <view class="row-ban">颜色:<text>{{detail.color||'--'}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="product-info-content">
|
|
|
+ <rich-text v-if="detail && detail.description" :nodes="detail.description"></rich-text>
|
|
|
+ <view v-else style="font-size: 12px;color: #999;text-align: center;">暂无产品介绍</view>
|
|
|
</view>
|
|
|
- <view class="product-info-content"></view>
|
|
|
</view>
|
|
|
<!-- 底部栏 -->
|
|
|
<view class="scrollPage-footer">
|
|
@@ -73,21 +76,21 @@
|
|
|
position="bottom"
|
|
|
custom-style="height:30%"
|
|
|
@afterleave="closePopu">
|
|
|
- <view class="popu-content">
|
|
|
+ <view class="popu-content" v-if="detail">
|
|
|
<view class="popu-close" @click="showPopu=false">
|
|
|
<uni-icons size="26" type="closeempty"></uni-icons>
|
|
|
</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>
|
|
|
+ <image style="width: 100px; height: 100px;" mode="aspectFit" :src="detail.productMsg"></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-info-title">{{detail.productName}}</view>
|
|
|
<view class="popu-content-box">
|
|
|
- <view class="popu-content-price">¥<text class="price-red">45.8</text></view>
|
|
|
+ <view class="popu-content-price">¥<text class="price-red">{{detail.price}}</text></view>
|
|
|
<view class="popu-content-num flex align_center">
|
|
|
- <text style="margin-right: 5px;">数量</text>
|
|
|
- <uni-number-box :min="1" :max="99"></uni-number-box>
|
|
|
+ <text style="margin-right: 10px;">数量</text>
|
|
|
+ <uni-number-box v-model="qty" :min="1" :max="99"></uni-number-box>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -102,44 +105,52 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations,
|
|
|
+ } from 'vuex'
|
|
|
import { addCart, getCartCount } from '@/api/cart.js'
|
|
|
+ import { getShopDetail } from '@/api/shop.js'
|
|
|
+ import { purchaseSave } from '@/api/purchase.js'
|
|
|
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',
|
|
|
- ],
|
|
|
+ imgList: [],
|
|
|
totalNum: 0 ,// 购物车总数
|
|
|
- productSn: null,
|
|
|
- detail: null
|
|
|
+ shopProductSn: null,
|
|
|
+ detail: null,
|
|
|
+ qty: 1,// 数量
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
// 计算安全区域
|
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|
|
this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
|
|
|
- this.productSn = option.sn
|
|
|
- // 购物车数量
|
|
|
- this.cartCount()
|
|
|
+ this.shopProductSn = option.sn
|
|
|
// 获取产品详情
|
|
|
- // this.getDetail()
|
|
|
+ this.getDetail()
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+ if(this.hasLogin){
|
|
|
+ // 购物车数量
|
|
|
+ this.cartCount()
|
|
|
+ }
|
|
|
},
|
|
|
// 分享
|
|
|
onShareAppMessage(e){
|
|
|
return {
|
|
|
- title: '产品标题',
|
|
|
- path: '/pagesB/shopiing/productDetail?sn='+this.productSn,
|
|
|
- imageUrl:'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
|
- type: '1',
|
|
|
+ title: this.detail ? this.detail.productName : '商品名称',
|
|
|
+ path: '/pagesB/shopiing/productDetail?sn='+this.shopProductSn,
|
|
|
+ imageUrl:this.detail ? this.detail.productMsg : '',
|
|
|
+ type: '1'
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin'])
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 返回
|
|
|
goBack(){
|
|
@@ -151,10 +162,12 @@
|
|
|
title: '加载中'
|
|
|
})
|
|
|
// 获取产品详情
|
|
|
- getDetail({
|
|
|
- productSn: this.productSn
|
|
|
+ getShopDetail({
|
|
|
+ shopProductSn: this.shopProductSn
|
|
|
}).then(res => {
|
|
|
if(res.status == 200){
|
|
|
+ this.detail = res.data
|
|
|
+ this.imgList = [res.data.productMsg]
|
|
|
}
|
|
|
uni.hideLoading()
|
|
|
})
|
|
@@ -169,41 +182,87 @@
|
|
|
},
|
|
|
// 加入购物车
|
|
|
addCart(){
|
|
|
- addCart({
|
|
|
- qty:19,
|
|
|
- price: 10,
|
|
|
- productSn:13
|
|
|
- }).then(res => {
|
|
|
- if(res.status == 200){
|
|
|
- this.cartCount()
|
|
|
- uni.showToast({
|
|
|
- title: '加入成功',
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ if(this.hasLogin){
|
|
|
+ addCart({
|
|
|
+ qty: 1,
|
|
|
+ price: this.detail.price,
|
|
|
+ productSn: this.detail.productSn
|
|
|
+ }).then(res => {
|
|
|
+ if(res.status == 200){
|
|
|
+ this.cartCount()
|
|
|
+ uni.showToast({
|
|
|
+ title: '加入成功',
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
// 打开购物车
|
|
|
toCart(){
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/cart/index'
|
|
|
- })
|
|
|
+ if(this.hasLogin){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pagesB/cart/index'
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
// 立即购买
|
|
|
toBuy(){
|
|
|
- // 打开数量选择弹框
|
|
|
- if(!this.showPopu){
|
|
|
- this.showPopu = true
|
|
|
+ if(this.hasLogin){
|
|
|
+ // 打开数量选择弹框
|
|
|
+ if(!this.showPopu){
|
|
|
+ this.showPopu = true
|
|
|
+ }else{
|
|
|
+ // 提交
|
|
|
+ this.submitOrder()
|
|
|
+ }
|
|
|
}else{
|
|
|
- // 提交
|
|
|
- this.submitOk = true
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
+ // 去结算
|
|
|
+ submitOrder(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: '提交中...',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ const detailList = [{
|
|
|
+ productSn:this.detail.productSn,
|
|
|
+ productCode:this.detail.productCode,
|
|
|
+ qty: this.qty,
|
|
|
+ price:this.detail.price,
|
|
|
+ }]
|
|
|
+ purchaseSave({
|
|
|
+ detailList: detailList
|
|
|
+ }).then(res => {
|
|
|
+ if(res.status == 200){
|
|
|
+ res.data.detailList = []
|
|
|
+ this.$store.state.vuex_tempData = res.data
|
|
|
+ this.showPopu = false
|
|
|
+ this.submitOk = true
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title: res.message,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
// 关闭后
|
|
|
closePopu(){
|
|
|
this.showPopu = false
|
|
|
+ this.qty = 1
|
|
|
uni.hideLoading()
|
|
|
-
|
|
|
// 提交成功
|
|
|
if(this.submitOk){
|
|
|
uni.navigateTo({
|
|
@@ -434,7 +493,7 @@
|
|
|
margin-top: 10px;
|
|
|
.popu-content-price{
|
|
|
font-size: 14px;
|
|
|
- color: #eb0000;
|
|
|
+ color: #d50e0e;
|
|
|
.price-red{
|
|
|
font-size: 24px;
|
|
|
}
|
|
@@ -452,9 +511,9 @@
|
|
|
justify-content: center;
|
|
|
margin-top: 20px;
|
|
|
.popu-content-btn-item{
|
|
|
- width: 100%;
|
|
|
+ width: 50%;
|
|
|
height: 40px;
|
|
|
- background-color: #eb0000;
|
|
|
+ background-color: #d50e0e;
|
|
|
color: #FFFFFF;
|
|
|
font-size: 14px;
|
|
|
display: flex;
|