diff --git a/src/pages.json b/src/pages.json
index 5b6074c..bde8e4b 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -37,6 +37,12 @@
}
},
{
+ "path": "pages/details/details",
+ "style": {
+ "navigationBarTitleText": "产品详情"
+ }
+ },
+ {
"path": "pages/myOrderPaying/myOrderPaying",
"style": {
"navigationBarTitleText": "我的订单"
@@ -169,7 +175,7 @@
},
{
"name": "产品详情",
- "path": "pages/frameDetail/frameDetail",
+ "path": "pages/details/details",
"query": ""
},
{
diff --git a/src/pages/details/details.vue b/src/pages/details/details.vue
new file mode 100644
index 0000000..fbc9c9c
--- /dev/null
+++ b/src/pages/details/details.vue
@@ -0,0 +1,145 @@
+<template>
+ <view class="container">
+ <view class="info">
+ <!-- 轮播图 -->
+ <swiper
+ class="swiperImage"
+ :indicator-dots="true"
+ :autoplay="true"
+ :interval="4000"
+ :duration="500"
+ >
+ <swiper-item
+ v-for="(item, index) in goodInfo.pics"
+ :key="index"
+ >
+ <image
+ :src="item"
+ mode="scaleToFill"
+ ></image>
+ </swiper-item>
+ </swiper>
+ <!-- 产品价格及购买人数 -->
+ <view class="info_pay">
+ ￥{{goodInfo.priceArea.Min_Price || '暂无'}}
+ <span class="info_pay_number">{{goodInfo.trade_num || '暂无'}}人购买过</span>
+ </view>
+ <!-- 产品名称 -->
+ <view class="info_name">
+ <span>{{goodInfo.p_name || '暂无'}}</span>
+ </view>
+ <!-- 产品售后信息 -->
+ <view class="info_after">
+ <span>支持7天无理由退货</span>
+ <span>顺丰发货</span>
+ <span>30天质量保证</span>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+import store from '@/store'
+// import BottomSheet from '@/components/BottomSheet.vue'
+
+export default {
+ components: {},
+ data () {
+ return {
+ pid: 7, // 产品ID
+ }
+ },
+ onLoad({ pid = this.pid, sk_id: skId }) {
+ this.pid = pid
+
+ // 获取产品详情
+ this.getDetails({ pid, skId })
+ },
+ computed: {
+
+ },
+ methods: {
+ // 获取产品详情
+ getDetails({ pid, skId }) {
+ store.dispatch('read/fetch', {
+ pid,
+ sk_id: skId,
+ }).then((res) => {
+ // 储存规格参数
+ this.saveGlassInfo([
+ res.goodInfo.frame_width,
+ res.goodInfo.glass_heig,
+ res.goodInfo.glass_height,
+ res.goodInfo.nose_width,
+ res.goodInfo.leg_long,
+ res.goodInfo.weight,
+ ],
+ )
+ })
+ },
+ saveGlassInfo(infoArray) {
+
+ },
+ },
+}
+</script>
+
+<style lang="scss">
+.container {
+ background-color: #f8f8f8;
+ font-family: "PingFangSC-Regular";
+ // 板块样式
+ > view {
+ background: #ffffff;
+ margin-bottom: 10px;
+ padding: 8px 20px 8px 20px;
+ box-sizing: border-box;
+ }
+ // 信息板块
+ .info {
+ // 轮播图
+ .swiperImage {
+ width: 684rpx;
+ height: 480rpx;
+ image {
+ max-width: 100%;
+ max-height: 100%;
+ border-radius: 16rpx;
+ }
+ }
+ // 产品价格及购买人数
+ .info_pay {
+ color: #eb5d3b;
+ font-size: 18px;
+ margin-top: 5px;
+ font-family: "PingFangSC-Semibold";
+ display: flex;
+ justify-content: space-between;
+ .info_pay_number {
+ color: #999;
+ font-size: 14px;
+ }
+ }
+ // 产品名称
+ .info_name {
+ font-size: 16px;
+ font-family: "PingFangSC-Semibold";
+ margin-top: 5px;
+ > span {
+ height: 14px;
+ margin-right: 10px;
+ }
+ }
+ // 售后服务
+ .info_after {
+ font-size: 10px;
+ color: #999;
+ margin-top: 5px;
+ > span {
+ height: 14px;
+ margin-right: 10px;
+ }
+ }
+ }
+}
+</style>
diff --git a/src/pages/frameDetail/components/BottomSheet.vue b/src/pages/frameDetail/components/BottomSheet.vue
index b214ec9..2a281dd 100644
--- a/src/pages/frameDetail/components/BottomSheet.vue
+++ b/src/pages/frameDetail/components/BottomSheet.vue
@@ -20,7 +20,7 @@
mode="aspectFill"
style="width: 188rpx;height: 168rpx;"
></image>
- </view>
+ </view>∂
<view class="infoRight">
<text class="goodName">{{goodInfo.p_name}}</text>
<text class="remarks">支持7天无理由退货 顺丰发货</text>
diff --git a/src/pages/frameDetail/frameDetail.vue b/src/pages/frameDetail/frameDetail.vue
index f57749d..a8eae62 100644
--- a/src/pages/frameDetail/frameDetail.vue
+++ b/src/pages/frameDetail/frameDetail.vue
@@ -23,29 +23,13 @@
<view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
<view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
</view>
- <view
+ <!-- <view
class="D2"
v-if="updateGoodType == 2 || updateGoodType == 4"
>
<view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
<view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
<view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
- </view>
- <!-- <view
- class="D2"
- v-if="updateGoodType == 1"
- >
- <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
- <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
- <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
- </view>
- <view
- class="D2"
- v-if="updateGoodType == 3"
- >
- <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
- <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
- <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
</view> -->
<view class="D3">
<view class="screenBar">
@@ -490,47 +474,7 @@ export default {
fail: (error) => { console.log('跳转参数选择失败======>', error) },
complete: () => { console.log('goPerchase') },
})
- // break
- // case '2':
- // uni.navigateTo({
- // url: '../detailStandard/detailStandard_k',
- // success: res => {},
- // fail: () => {},
- // complete: () => {}
- // })
- // break
- // case '3':
- // uni.navigateTo({
- // url: '../purchaseLenses/purchaseLenses',
- // success: res => {},
- // fail: () => {},
- // complete: () => {}
- // })
- // break
- // case '4':
- // uni.navigateTo({
- // url: '../detailStandard/detailStandard_sun',
- // success: res => {},
- // fail: () => {},
- // complete: () => {}
- // })
- // break
- // default :
- // break
- // }
},
- // 加入购物车
- // addCart () {
- // store.dispatch('cart/addCart', {
- // uid: this.$store.state.user.userInfo.uid,
- // openid: this.$store.state.user.userInfo.openid,
- // pid: this.pid,
- // checkedSKU: {},
- // })
- // store.dispatch('cart/getCartList', {
- // uid: this.$store.state.user.userInfo.uid, // 用户id
- // })
- // },
tabChange (e) {
if (this.current !== e) {
this.current = e
diff --git a/src/store/modules/read.js b/src/store/modules/read.js
index 72d1382..a2a7e85 100644
--- a/src/store/modules/read.js
+++ b/src/store/modules/read.js
@@ -2,57 +2,57 @@ import urlAlias from '../url'
import request from '../request'
const {
- read
+ read,
} = urlAlias
const state = {
- goodInfo: {}
+ goodInfo: {},
}
const mutations = {
INIT: (state, goodInfo) => {
state.goodInfo = goodInfo
- }
+ },
}
const actions = {
fetch({ commit }, param) {
- // 由于购物车和用户推荐的价格要根据sk_id来获取
- const arg=Object.assign({},param)
- delete param.sk_id
+ // 由于购物车和用户推荐的价格要根据sk_id来获取
+ const arg = Object.assign({}, param)
+ delete param.sk_id
return new Promise((resolve, reject) => request({
url: read,
data: param,
success: (res) => {
- console.log('readParm====>',arg)
- console.log('read====>',res.data.data)
- // 用一个新的对象来接收sk_id找的值
- const Res=Object.assign({},res.data.data)
- if(arg.sk_id!=undefined){
- for (let i = 0; i < res.data.data.skuList.length; i++) {
- if(res.data.data.skuList[i].sk_id==arg.sk_id){
- Res.p_sale_price= res.data.data.skuList[i].real_price
- console.log('陈工了')
- }
- }
- }
- console.log(Res)
+ console.log('readParm====>', arg)
+ console.log('read====>', res.data.data)
+ // 用一个新的对象来接收sk_id找的值
+ const Res = Object.assign({}, res.data.data)
+ if (arg.sk_id !== undefined) {
+ for (let i = 0; i < res.data.data.skuList.length; i++) {
+ if (res.data.data.skuList[i].sk_id === arg.sk_id) {
+ Res.p_sale_price = res.data.data.skuList[i].real_price
+ console.log('陈工了')
+ }
+ }
+ }
+ console.log(Res)
commit('INIT', Res)
- resolve()
+ resolve(res)
},
fail: (res) => {
console.log('fail status === > ', res)
},
complete: (res) => {
console.log('complete status === > ', res)
- }
+ },
}))
- }
+ },
}
export default {
namespaced: true,
state,
mutations,
- actions
+ actions,
}