同步版本
This commit is contained in:
@@ -1,33 +1,29 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="content" v-if="!loding">
|
||||
<!-- 轮播主图 -->
|
||||
<view class="goods-covers">
|
||||
<swiper class="swiper">
|
||||
<swiper-item>
|
||||
<image class="swiper-item" src="https://yanxuan-item.nosdn.127.net/b3cc0eadfe8581b8bc86f428b18a5ea8.png" mode="aspectFill"/>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image class="swiper-item" src="https://yanxuan-item.nosdn.127.net/a7f8652eeecb2c0e1915120b1d986510.png" mode="aspectFill"/>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image class="swiper-item" src="https://yanxuan-item.nosdn.127.net/afb05e6fc75e7476729146214450f0ae.png" mode="aspectFill"/>
|
||||
</swiper-item>
|
||||
<swiper class="swiper" indicator-dots indicator-active-color="#c82626">
|
||||
<block v-if="goodsObj.pictures.length > 0">
|
||||
<swiper-item v-for="(item, index) in goodsObj.pictures" :key="index">
|
||||
<image class="swiper-item" :src="item" mode="aspectFill"/>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 产品详情 -->
|
||||
<view class="goods-content">
|
||||
<view class="header">
|
||||
<view class="title">谷风一木3层软抽面巾纸 6包/提</view>
|
||||
<view class="sub-title">进口原木浆 和风高颜值</view>
|
||||
<view class="title">{{goodsObj.name}}</view>
|
||||
<view class="sub-title">{{goodsObj.description}}</view>
|
||||
<view class="flex-box">
|
||||
<view class="price"><text>¥</text>100.00</view>
|
||||
<view class="sales">累计易货10次</view>
|
||||
<view class="price"><text>¥</text>{{goodsObj.price.show}}</view>
|
||||
<view class="sales">累计易货{{goodsObj.sales}}次</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商家信息 -->
|
||||
<view class="store">
|
||||
<view class="title">宜家哈尔滨旗舰店</view>
|
||||
<image class="logo" src="@/static/dev/good_cover_06.jpg" mode="aspectFill"></image>
|
||||
<view class="title">{{goodsObj.shop.name}}</view>
|
||||
<image class="logo" :src="goodsObj.shop.cover" mode="aspectFill"></image>
|
||||
<view class="rate">
|
||||
<uni-rate
|
||||
:readonly="true"
|
||||
@@ -43,7 +39,7 @@
|
||||
<view class="size">
|
||||
<view class="size-item nowrap">
|
||||
<label class="title">产品规格</label>
|
||||
17个功能分区,理性展现
|
||||
{{goodsObj.skus[0].goods_name}}
|
||||
</view>
|
||||
<view class="size-item nowrap">
|
||||
<label class="title">限制</label>
|
||||
@@ -56,36 +52,53 @@
|
||||
</view>
|
||||
<!-- 产品详情 -->
|
||||
<view class="product">
|
||||
<image src="https://yanxuan-item.nosdn.127.net/15b6eb17fd2dfc10824d19262d579115.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/64bba3712d2de3afbd01209ddc8a144c.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/e361196cfdc93e697214cb8b73715d7b.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/b508dcfc9b597e0563fb9703084df968.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/47aea2602cdc2d74f7c1470845b10228.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/47aea2602cdc2d74f7c1470845b10228.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/a93ea06bab7212b3d09b58a4ef6ef992.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/48062fd41ab8345e4d89dcc9ae882a83.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/c6144d9afbfa23dae5127d71b27f9286.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/d36cbe3e7a3a51ad5809ace03a2ec11a.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/55152a8961ac3e4315bf0e9078c201de.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/e1daf70033b4a560ea3a163b7b2901ba.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/86a0fa00f375e4b266a528d2c4cc35fd.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/71bac1bfd70aeb8d6b97eae4f4d4af67.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/2a536f0650b2a2cbb53373e758f0439e.jpg" mode="widthFix"></image>
|
||||
<block v-for="(item, index) in goodsObj.content" :key="index">
|
||||
<image :src="item" mode="widthFix"></image>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<!-- footer -->
|
||||
<view class="footer">
|
||||
<button class="btn" size="default">立即购买</button>
|
||||
<button class="btn" size="default" @click="buyGoods">立即购买</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { goods } from '@/apis/interfaces/goods'
|
||||
import userAuth from '@/public/userAuth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
loding : true,
|
||||
goodsObj: {},
|
||||
identity: ''
|
||||
};
|
||||
},
|
||||
created() {
|
||||
goods(this.$Route.query.id || 16).then(res=>{
|
||||
this.loding = false
|
||||
this.goodsObj = res
|
||||
this.identity = res.identity.id || ''
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 提交购买单
|
||||
buyGoods(){
|
||||
let token = this.$store.getters.getToken
|
||||
if(token == ''){
|
||||
let userLogin = new userAuth()
|
||||
userLogin.Login()
|
||||
return
|
||||
}
|
||||
this.$Router.push({
|
||||
name: 'Buy',
|
||||
params: {
|
||||
skuId: this.goodsObj.skus[0].sku_id,
|
||||
type : this.identity
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -102,7 +115,6 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: #3F536E;
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
.swiper{
|
||||
|
||||
Reference in New Issue
Block a user