刘文博 / gulu-vue

Browse Code »

Commit 530bb7e836a6337c7d71e8248779fb48a55b10a0

Authored by 范牧 2020-06-07 21:40:53 +0800

1 parent 3cda19af7e

Exists in master

重构详情页-商品介绍

Showing 5 changed files with 564 additions and 35 deletions Show diff stats

src/pages.json

Diff comments View file @530bb7e

 {
     "pages": [
         {
             "path": "pages/index/index",
             "style": {
                 "navigationBarTitleText": "商城一览"
             }
         },
         {
             "path": "pages/user/user",
             "style": {
                 "navigationBarTitleText": "我的"
             }
         },
         {
             "path": "pages/addOpticsData/addOpticsData",
             "style": {
                 "navigationBarTitleText": "验光数据"
             }
         },
         {
             "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
             "style": {
                 "navigationBarTitleText": "镜片名称名称"
             }
         },
         {
             "path": "pages/purchaseLenses/purchaseLenses",
             "style": {
                 "navigationBarTitleText": "参数选择"
             }
         },
         {
             "path": "pages/lensDetails/lensDetails",
             "style": {
                 "navigationBarTitleText": "产品详情"
             }
         },
         {
             "path": "pages/details/details",
             "style": {
                 "navigationBarTitleText": "产品详情"
             }
         },
         {
             "path": "pages/myOrderPaying/myOrderPaying",
             "style": {
                 "navigationBarTitleText": "我的订单"
             }
         },
         {
             "path": "pages/myOrder/myOrder",
             "style": {
                 "navigationBarTitleText": "我的订单"
             }
         },
         {
             "path": "pages/cart/cart",
             "style": {
                 "navigationBarTitleText": "购物车"
             }
         },
         {
             "path": "pages/frameDetail/frameDetail",
             "style": {
                 "navigationBarTitleText": "产品详情"
             }
         },
         // {
         //     "path": "pages/refundProgress/refundProgress",
         //     "style": {
         //         "navigationBarTitleText": "申请退款"
         //     }
         // },
         // {
         //     "path": "pages/address/addAddress",
         //     "style": {
         //         "navigationBarTitleText": "新增地址"
         //     }
         // },
         // {
         //     "path": "pages/address/addressList",
         //     "style": {
         //         "navigationBarTitleText": "地址管理"
         //     }
         // },
         {
             "path": "pages/confirmOrder/confirmOrder",
             "style": {
                 "navigationBarTitleText": "确认订单"
             }
         },
         // {
         //     "path": "pages/refundment/refundWays",
         //     "style": {
         //         "navigationBarTitleText": "退款方式"
         //     }
         // },
         // {
         //     "path": "pages/refundment/refundment",
         //     "style": {
         //         "navigationBarTitleText": "申请退款"
         //     }
         // },
         {
             "path": "pages/predelivery/predelivery",
             "style": {
                 "navigationBarTitleText": "待发货"
             }
         },
         {
             "path": "pages/customerService/customerService",
             "style": {
                 "navigationBarTitleText": "在线客服"
             }
         },
         {
             "path": "pages/detailStandard/detailStandard_sun",
             "style": {
                 "navigationBarTitleText": "太阳镜选购页"
             }
         },
         {
             "path": "pages/detailStandard/detailStandard_k",
             "style": {
                 "navigationBarTitleText": "镜框选购页"
             }
         },
         {
             "path": "pages/newOpticsData/newOpticsData",
             "style": {
                 "navigationBarTitleText": "验光数据"
             }
         }
-   ],
+    ],
-  "subpackages": [
+    "subpackages": [
-	 {
+        {
-	   "root": "pages/refundment",
+            "root": "pages/refundment",
-	   "pages": [
+            "pages": [
-		 "pages/refundment/refundWays",
+                "pages/refundment/refundWays",
-		 "pages/refundment/refundment",
+                "pages/refundment/refundment",
-		 "pages/refundProgress/refundProgress"
+                "pages/refundProgress/refundProgress"
-	   ]
+            ]
-	 },
+        },
-	 {
+        {
-	   "root": "pages/address",
+            "root": "pages/address",
-	   "name": "pack2",
+            "name": "pack2",
-	   "pages": [
+            "pages": [
-	 		 "pages/address/addAddress",
+                "pages/address/addAddress",
-	 		 "pages/address/addressList"
+                "pages/address/addressList"
-	   ]
+            ]
-	 }
+        }
-   ],
+    ],
     "globalStyle": {
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "uni-app",
         "navigationBarBackgroundColor": "#F8F8F8",
         "backgroundColor": "#F8F8F8"
     },
     "tabBar": {
         "color": "#C0C4CC",
         "selectedColor": "#fa436a",
         "borderStyle": "black",
         "backgroundColor": "#ffffff",
         "list": [
             {
                 "pagePath": "pages/index/index",
                 "iconPath": "static/tab-home.png",
                 "selectedIconPath": "static/tab-home-current.png",
                 "text": "首页"
             },
             {
                 "pagePath": "pages/cart/cart",
                 "iconPath": "static/tab-cart.png",
                 "selectedIconPath": "static/tab-cart-current.png",
                 "text": "购物车"
             },
             {
                 "pagePath": "pages/user/user",
                 "iconPath": "static/tab-my.png",
                 "selectedIconPath": "static/tab-my-current.png",
                 "text": "我的"
             }
         ]
     },
     "condition": {
         "current": 0,
         "list": [
-			// {
+            // {
-			//     "name": "首页",
+            //     "name": "首页",
-			//     "path": "pages/test/index",
+            //     "path": "pages/test/index",
-			//     "query": ""
+            //     "query": ""
-			// },
+            // },
             {
                 "name": "首页",
                 "path": "pages/index/index",
                 "query": ""
             },
             {
                 "name": "产品详情",
                 "path": "pages/details/details",
                 "query": ""
             },
             {
+                "name": "旧版产品详情",
+                "path": "pages/frameDetail/frameDetail",
+                "query": ""
+            },
+            {
                 "name": "镜片、美瞳参数选择",
                 "path": "pages/purchaseLenses/purchaseLenses",
                 "query": ""
             },
             {
                 "name": "确认订单",
                 "path": "pages/confirmOrder/confirmOrder",
                 "query": ""
             },
             {
                 "name": "新增地址",
                 "path": "pages/address/addAddress",
                 "query": ""
             },
             {
                 "name": "地址管理",
                 "path": "pages/address/addressList",
                 "query": ""
             },
             {
                 "name": "我的订单",
                 "path": "pages/myOrder/myOrder",
                 "query": ""
             },
             {
                 "name": "待付款订单详情",
                 "path": "pages/myOrderPaying/myOrderPaying",
                 "query": ""
             },
             {
                 "name": "我的",
                 "path": "pages/user/user",
                 "query": ""
             }
         ]
     }
 }

src/pages/details/components/Introduce.vue

Diff comments View file @530bb7e

File was created	1	<template>
	2	<view class="introduce">
	3	<!-- 迭代时建议配合接口修改为数组 -->
	4	<view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
	5	<view>
	6	年龄：<view
	7	v-for="(item,index) in tag.prod_tag_age"
	8	:key="index"
	9	>
	10	{{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
	11	</view>
	12	</view>
	13	</view>
	14	<view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
	15	<view>
	16	颜色：<view
	17	v-for="(item,index) in tag.prod_tag_color"
	18	:key="index"
	19	>
	20	{{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
	21	</view>
	22	</view>
	23	</view>
	24	<view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
	25	<view>
	26	脸型：<view
	27	v-for="(item,index) in tag.prod_tag_face"
	28	:key="index"
	29	>
	30	{{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
	31	</view>
	32	</view>
	33	</view>
	34	<view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
	35	<view>
	36	赠品：<view
	37	v-for="(item,index) in tag.prod_tag_freesend"
	38	:key="index"
	39	>
	40	{{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
	41	</view>
	42	</view>
	43	</view>
	44	<view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
	45	<view>
	46	保险：<view
	47	v-for="(item,index) in tag.prod_tag_insurance"
	48	:key="index"
	49	>
	50	{{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
	51	</view>
	52	</view>
	53	</view>
	54	<view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
	55	<view>
	56	材质：<view
	57	v-for="(item,index) in tag.prod_tag_metal"
	58	:key="index"
	59	>
	60	{{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
	61	</view>
	62	</view>
	63	</view>
	64	<view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
	65	<view>
	66	个性：<view
	67	v-for="(item,index) in tag.prod_tag_personal"
	68	:key="index"
	69	>
	70	{{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
	71	</view>
	72	</view>
	73	</view>
	74	<view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
	75	<view>
	76	场景：<view
	77	v-for="(item,index) in tag.prod_tag_sense"
	78	:key="index"
	79	>
	80	{{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
	81	</view>
	82	</view>
	83	</view>
	84	<view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
	85	<view>
	86	性别：<view
	87	v-for="(item,index) in tag.prod_tag_sex"
	88	:key="index"
	89	>
	90	{{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
	91	</view>
	92	</view>
	93	</view>
	94	<view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
	95	<view>
	96	风格：<view
	97	v-for="(item,index) in tag.prod_tag_style"
	98	:key="index"
	99	>
	100	{{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
	101	</view>
	102	</view>
	103	</view>
	104	<view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
	105	<view>
	106	重量：<view
	107	v-for="(item,index) in tag.prod_tag_weight"
	108	:key="index"
	109	>
	110	{{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
	111	</view>
	112	</view>
	113	</view>
	114	</view>
	115	</template>
	116
	117	<script>
	118	export default {
	119	props: {
	120	tag: Object,
	121	},
	122	created() {
	123	console.log('lalal')
	124	console.log('tag', this)
	125	},
	126	updated() {
	127	console.log('lalal-2')
	128	console.log('tag-2', this.tag)
	129	},
	130	}
	131	</script>
	132
	133	<style lang="scss" scoped>
	134	.introduce {
	135	margin-bottom: 4px;
	136	view {
	137	display: flex;
	138	align-content: center;
	139	font-size: 14px;
	140	color: #333333;
	141	}
	142	span {
	143	margin-left: 6px;
	144	margin-right: 5px;
	145	font-family: "PingFangSC-Regular";
	146	}
	147	}
	148	</style>
	149

src/pages/details/components/Specification.vue

Diff comments View file @530bb7e

File was created	1	<template>
	2	<div>
	3
	4	</div>
	5	</template>
	6
	7	<script>
	8	export default {
	9
	10	}
	11	</script>
	12
	13	<style lang="scss" scoped>
	14	</style>
	15

src/pages/details/details.vue

Diff comments View file @530bb7e

1	<template>	1	<template>
2	<view class="container">	2	<view class="container">
		3	<!-- 基础信息 -->
3	<view class="basic_info">	4	<view class="basic_info">
4	<!-- 轮播图 -->	5	<!-- 轮播图 -->
5	<swiper	6	<swiper
6	class="swiperImage"	7	class="swiperImage"
7	:indicator-dots="true"	8	:indicator-dots="true"
8	:autoplay="true"	9	:autoplay="true"
9	:interval="4000"	10	:interval="4000"
10	:duration="500"	11	:duration="500"
11	>	12	>
12	<swiper-item	13	<swiper-item
13	v-for="(item, index) in carousel"	14	v-for="(item, index) in carousel"
14	:key="index"	15	:key="index"
15	>	16	>
16	<image	17	<image
17	:src="item"	18	:src="item"
18	mode="scaleToFill"	19	mode="scaleToFill"
19	></image>	20	></image>
20	</swiper-item>	21	</swiper-item>
21	</swiper>	22	</swiper>
22	<!-- 产品价格及购买人数 -->	23	<!-- 产品价格及购买人数 -->
23	<view class="info_pay">	24	<view class="info_pay">
24	<view>￥{{goodsInfo.price \|\| '暂无'}}<span	25	<view>￥{{goodsInfo.price \|\| '暂无'}}<span
25	v-if="goodsInfo.discountPrice"	26	v-if="goodsInfo.discountPrice"
26	class="info_pay_discount"	27	class="info_pay_discount"
27	>¥{{goodsInfo.discountPrice}}</span></view>	28	>¥{{goodsInfo.discountPrice}}</span></view>
28	<span class="info_pay_number">{{goodsInfo.tradeNumber \|\| '暂无'}}人购买过</span>	29	<span class="info_pay_number">{{goodsInfo.tradeNumber \|\| '暂无'}}人购买过</span>
29	</view>	30	</view>
30	<!-- 产品名称 -->	31	<!-- 产品名称 -->
31	<view class="info_name">	32	<view class="info_name">
32	<text class="info_name_name">{{goodsInfo.name \|\| '暂无'}}</text>	33	<text class="info_name_name">{{goodsInfo.name \|\| '暂无'}}</text>
33	<view class="info_name_share">	34	<view class="info_name_share">
34	<image src="/static/img/detail/share-icon.png"></image>	35	<image src="/static/img/detail/share-icon.png"></image>
35	<text>分享</text>	36	<text>分享</text>
36	</view>	37	</view>
37	</view>	38	</view>
38	<!-- 产品售后信息 -->	39	<!-- 产品售后信息 -->
39	<view class="info_after">	40	<view class="info_after">
40	<span>支持7天无理由退货</span>	41	<span>支持7天无理由退货</span>
41	<span>顺丰发货</span>	42	<span>顺丰发货</span>
42	<span>30天质量保证</span>	43	<span>30天质量保证</span>
43	</view>	44	</view>
44	</view>	45	</view>
		46	<!-- 详细信息 -->
45	<view class="detail_info">	47	<view class="detail_info">
46	<!-- 详细信息菜单 -->	48	<!-- 详细信息菜单 -->
47	<view class="screen_bar">	49	<view class="screen_bar">
48	<view	50	<view
49	v-for="item in screenItems"	51	v-for="(item, index) in screenItems"
50	:key="item.current"	52	:key="index"
51	@click="tabChange(item.current)"	53	@click="tabChange(index)"
52	>	54	>
53	<view	55	<view
54	class="screen_item"	56	class="screen_item"
55	v-bind:class="{ item_active: item_current === item.current }"	57	v-bind:class="{ item_active: item_current === index }"
56	>{{ item.text \|\| '暂无' }}</view>	58	>{{ screenItems[index] \|\| '暂无' }}</view>
		59	</view>
		60	</view>
		61	<!-- 商品介绍 -->
		62	<view
		63	class="screen_item"
		64	v-if="item_current === 0"
		65	>
		66	<Introduce :tag="tag" />
		67	</view>
		68	<!-- 规格参数 -->
		69	<view
		70	class="screen_item"
		71	v-if="item_current === 1"
		72	>
		73	<view class="specification">
		74	<view
		75	class="spe_item"
		76	v-for="(item, index) in specification"
		77	:key="index"
		78	>
		79	<image
		80	class="spe_image"
		81	v-bind:src="item.img"
		82	></image>
		83	<span>{{item.standard \|\| '暂无'}}</span>
		84	<span>{{item.slength \|\| '暂无'}}</span>
		85	</view>
57	</view>	86	</view>
58	</view>	87	</view>
59	<!-- 售后保障 -->	88	<!-- 售后保障 -->
60	<view	89	<view
61	class="screen_item"	90	class="screen_item"
62	v-if="item_current === 2"	91	v-if="item_current === 2"
63	>	92	>
64	<AfterSails />	93	<AfterSails />
65	</view>	94	</view>
66	</view>	95	</view>
		96	<!-- 评价 -->
		97	<template v-if="item_current !== 2">
		98	<view class="evaluate">
		99	<!-- 标题 -->
		100	<view class="evaluate_title">
		101	<view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>
		102	<!-- 星星 -->
		103	<view class="evaluate_star">
		104	<view
		105	class="star"
		106	v-for="(item, index) in evaluate.star"
		107	:key="index"
		108	>
		109	<image
		110	src="../../static/img/detail/d_star.png"
		111	mode="aspectFill"
		112	style="height: 26rpx; width: 28rpx;"
		113	></image>
		114	</view>
		115	</view>
		116	</view>
		117	<!-- 标签 -->
		118	<view class="evaluate_tag">
		119	<view
		120	v-for="(item, index) in evaluate.tag"
		121	:key="index"
		122	>{{item.name}}</view>
		123	</view>
		124	</view>
		125	</template>
		126	<!-- 商品详情页 -->
		127	<template v-if="current !==2">
		128	<view class="more_info">
		129	<view
		130	class="more_fixed1"
		131	@click="consolg(goodInfo.prodIntro1)"
		132	>
		133	<image src="/static/img/detail/hr.png"></image>
		134	<view>商品详情</view>
		135	<image src="/static/img/detail/hr.png"></image>
		136	</view>
		137	<view
		138	class="more_all"
		139	v-html="more"
		140	>
		141	</view>
		142	</view>
		143	</template>
		144	<!-- 底部菜单 -->
		145	<view class="menu">
		146	<view
		147	@tap="toCart()"
		148	class="menu_1"
		149	>
		150	<view class="cart_icon">
		151	<image src="/static/tab-cart.png" />
		152	<text>{{cartNumber}}</text>
		153	</view>
		154	<view class="menu_image">购物车</view>
		155	</view>
		156	<view class="menu_2">
		157	<view
		158	class="menu_input"
		159	@tap="showBottom(1)"
		160	>加入购物车</view>
		161	<view
		162	class="menu_now"
		163	@click="showBottom(2)"
		164	>立即购买</view>
		165	</view>
		166	</view>
67	</view>	167	</view>
68	</template>	168	</template>
69		169
70	<script>	170	<script>
71	import store from '@/store'	171	import store from '@/store'
72	import AfterSails from './components/AfterSails'	172	import Introduce from './components/Introduce' // 商品介绍基本信息
		173	import AfterSails from './components/AfterSails' // 售后保障组件
73	// import BottomSheet from '@/components/BottomSheet.vue'	174	// import BottomSheet from '@/components/BottomSheet.vue'
74		175
75	export default {	176	export default {
76	components: {	177	components: {
		178	Introduce,
77	AfterSails,	179	AfterSails,
78	},	180	},
79	data () {	181	data () {
80	return {	182	return {
81	pid: 7, // 产品ID	183	pid: 7, // 产品ID
82	skId: undefined, // skuId	184	skId: undefined, // skuId
83	// 详细信息菜单	185	// 详细信息菜单
84	item_current: 0,	186	item_current: 0,
85	screenItems: [	187	screenItems: [
86	{ current: 0, text: '商品介绍' },	188	'商品介绍',
87	{ current: 1, text: '规格参数' },	189	'规格参数',
88	{ current: 2, text: '售后保障' },	190	'售后保障',
89	],	191	],
90	}	192	}
91	},	193	},
92	onLoad({ pid = this.pid, sk_id: skId }) {	194	onLoad({ pid = this.pid, sk_id: skId }) {
		195	// 根据页面传参请求页面数据
93	this.pid = pid	196	this.pid = pid
94	this.skId = skId	197	this.skId = skId
95		198
96	// 获取产品详情	199	// 获取产品详情
97	this.getDetails({ pid, skId })	200	this.getDetails({ pid, skId })
		201	// 获取购物车数据
		202	this.getCartNum()
98	},	203	},
99	computed: {	204	computed: {
100	// 获取轮播图数据	205	// 获取轮播图数据
101	carousel() {	206	carousel() {
102	return this.$store.state.details.carousel	207	return this.$store.state.details.carousel
103	},	208	},
104	// 商品基本信息	209	// 商品基本信息
105	goodsInfo() {	210	goodsInfo() {
106	return this.$store.state.details.goodsInfo	211	return this.$store.state.details.goodsInfo
107	},	212	},
		213	// 商品介绍商品标签
		214	tag() {
		215	return this.$store.state.details.tag
		216	},
		217	// 规格参数
		218	specification() {
		219	return this.$store.state.details.specification
		220	},
		221	// 评价
		222	evaluate() {
		223	return this.$store.state.details.evaluate
		224	},
		225	// 商品详情
		226	more() {
		227	return this.$store.state.details.more
		228	},
		229	// 购物车数目
		230	cartNumber() {
		231	return this.$store.state.details.cartNumber
		232	},
108	},	233	},
109	methods: {	234	methods: {
110	// 获取产品详情	235	// 获取产品详情
111	getDetails({ pid, skId }) {	236	getDetails({ pid, skId }) {
112	store.dispatch('details/details', {	237	store.dispatch('details/details', {
113	pid,	238	pid,
114	sk_id: skId,	239	sk_id: skId,
115	})	240	})
116	},	241	},
		242	// 获取购物车数目
		243	getCartNum() {
		244	store.dispatch('details/getCartNumber')
		245	},
117	// 切换详细信息菜单	246	// 切换详细信息菜单
118	tabChange (e) {	247	tabChange (e) {
119	if (this.current !== e) {	248	if (this.current !== e) {
120	this.item_current = e	249	this.item_current = e
121	}	250	}
122	},	251	},
123	},	252	},
124	}	253	}
125	</script>	254	</script>
126		255
127	<style lang="scss">	256	<style lang="scss">
128	.container {	257	.container {
129	background-color: #f8f8f8;	258	background-color: #f8f8f8;
130	font-family: "PingFangSC-Regular";	259	font-family: "PingFangSC-Regular";
131	// 板块样式	260	// 板块样式
132	> view {	261	> view {
133	background: #ffffff;	262	background: #ffffff;
134	margin-bottom: 10px;	263	margin-bottom: 10px;
135	padding: 8px 20px 8px 20px;	264	padding: 8px 20px 8px 20px;
136	box-sizing: border-box;	265	box-sizing: border-box;
137	}	266	}
138	// 基础信息板块	267	// 基础信息板块
139	.basic_info {	268	.basic_info {
140	// 轮播图	269	// 轮播图
141	.swiperImage {	270	.swiperImage {
142	width: 684rpx;	271	width: 684rpx;
143	height: 480rpx;	272	height: 480rpx;
144	image {	273	image {
145	max-width: 100%;	274	max-width: 100%;
146	max-height: 100%;	275	max-height: 100%;
147	border-radius: 16rpx;	276	border-radius: 16rpx;
148	}	277	}
149	}	278	}
150	// 产品价格及购买人数	279	// 产品价格及购买人数
151	.info_pay {	280	.info_pay {
152	color: #eb5d3b;	281	color: #eb5d3b;
153	font-size: 18px;	282	font-size: 18px;
154	margin-top: 5px;	283	margin-top: 5px;
155	font-family: "PingFangSC-Semibold";	284	font-family: "PingFangSC-Semibold";
156	display: flex;	285	display: flex;
157	justify-content: space-between;	286	justify-content: space-between;
158	.info_pay_discount {	287	.info_pay_discount {
159	text-decoration: line-through;	288	text-decoration: line-through;
160	margin-left: 8rpx;	289	margin-left: 8rpx;
161	color: #999;	290	color: #999;
162	font-size: 14px;	291	font-size: 14px;
163	}	292	}
164	.info_pay_number {	293	.info_pay_number {
165	color: #999;	294	color: #999;
166	font-size: 14px;	295	font-size: 14px;
167	}	296	}
168	}	297	}
169	// 产品名称	298	// 产品名称
170	.info_name {	299	.info_name {
171	margin-top: 5px;	300	margin-top: 5px;
172	display: flex;	301	display: flex;
173	justify-content: space-between;	302	justify-content: space-between;
174	.info_name_name {	303	.info_name_name {
175	margin-right: 10px;	304	margin-right: 10px;
176	font-size: 16px;	305	font-size: 16px;
177	font-family: "PingFangSC-Semibold";	306	font-family: "PingFangSC-Semibold";
178	max-width: 592rpx;	307	max-width: 592rpx;
179	}	308	}
180	.info_name_share {	309	.info_name_share {
181	display: flex;	310	display: flex;
182	flex-direction: column;	311	flex-direction: column;
183	justify-content: space-between;	312	justify-content: space-between;
184	align-items: center;	313	align-items: center;
185	margin-top: 14rpx;	314	margin-top: 14rpx;
186	> image {	315	> image {
187	height: 40rpx;	316	height: 40rpx;
188	width: 40rpx;	317	width: 40rpx;
189	}	318	}
190	> text {	319	> text {
191	font-family: PingFangSC-Regular;	320	font-family: PingFangSC-Regular;
192	font-size: 12px;	321	font-size: 12px;
193	color: #999;	322	color: #999;
194	letter-spacing: -0.23px;	323	letter-spacing: -0.23px;
195	}	324	}
196	}	325	}
197	}	326	}
198	// 售后服务	327	// 售后服务
199	.info_after {	328	.info_after {
200	font-size: 10px;	329	font-size: 10px;
201	color: #999;	330	color: #999;
202	margin-top: 20rpx;	331	margin-top: 20rpx;
203	> span {	332	> span {
204	height: 14px;	333	height: 14px;
205	margin-right: 10px;	334	margin-right: 10px;
206	}	335	}
207	}	336	}
208	}	337	}
209	// 详细信息	338	// 详细信息
210	.detail_info {	339	.detail_info {
		340	margin-bottom: 20rpx;
211	.screen_bar {	341	.screen_bar {
212	width: 670rpx;	342	width: 670rpx;
213	margin-top: 20rpx;	343	margin-top: 20rpx;
214	margin-bottom: 24rpx;	344	margin-bottom: 24rpx;
215	display: flex;	345	display: flex;
216	flex-direction: row;	346	flex-direction: row;
217	justify-content: space-between;	347	justify-content: space-between;
218	align-items: center;	348	align-items: center;
219	font-size: 14px;	349	font-size: 14px;
220	color: #333333;	350	color: #333333;
221	transition: all 0.2s;	351	transition: all 0.2s;
222	}	352	}
223	.item_active {	353	.item_active {
224	border-bottom: 4rpx solid #ff6b4a;	354	border-bottom: 4rpx solid #ff6b4a;
225	}	355	}
226	.screen_item {	356	.screen_item {
227	font-size: 32rpx;	357	font-size: 32rpx;
228	color: #333333;	358	color: #333333;
229	display: flex;	359	display: flex;
230	transition: all 0.2s;	360	transition: all 0.2s;
		361	// 规格参数
		362	.specification {
		363	margin-bottom: 4px;
		364	.spe_item {
		365	image {
		366	width: 50px;
		367	height: 25px;
		368	margin-right: 6px;
		369	vertical-align: middle;
		370	}
		371	span {
		372	margin-left: 24rpx;
		373	}
		374	}
		375	}
		376	}
		377	//
		378	}
		379	// 宝贝好评率
		380	.evaluate {
		381	.evaluate_title {
		382	font-size: 14px;
		383	color: #333333;
		384	display: flex;
		385	justify-content: space-between;
		386	.title_rate {
		387	margin-left: 10rpx;
		388	}
		389	.evaluate_star {
		390	width: 90px;
		391	display: flex;
		392	align-items: center;
		393	justify-content: space-between;
		394	}
		395	view {
		396	font-size: 14px;
		397	color: #333333;
		398	font-weight: bold;
		399	}
		400	}
		401	.evaluate_tag {
		402	view {
		403	display: inline-block;
		404	margin-right: 20rpx;
		405	min-width: 180rpx;
		406	margin-top: 10px;
		407	height: 48rpx;
		408	background: #f2f2f2;
		409	border-radius: 2px;
		410	font-family: PingFangSC-Regular;
		411	font-size: 12px;
		412	color: #666666;
		413	letter-spacing: -0.23px;
		414	text-align: center;
		415	padding: 0 48rpx;
		416	line-height: 48rpx;
		417	}
		418	}
		419	}
		420	// 商品详情
		421	.more_info {
		422	.more_fixed1 {
		423	display: flex;
		424	justify-content: space-between;
		425	align-content: center;
		426	margin-bottom: 12px;
		427	view {
		428	font-size: 14px;
		429	color: #333333;
		430	font-weight: bold;
		431	font-family: "PingFangSC-Medium";
		432	line-height: 24px;
		433	}
		434	image {
		435	width: 240rpx;
		436	height: 3px;
		437	margin-top: 10px;
		438	}
		439	}
		440	.more_all {
		441	width: 100%;
		442	margin-top: 30rpx;
		443	margin-right: 30rpx;
		444	margin-bottom: 180rpx;
		445	font-family: "PingFangSC-Regular";
		446	}
		447	}
		448	// 菜单
		449	.menu {
		450	position: fixed;
		451	bottom: 0;
		452	height: 74px;
		453	width: 100%;
		454	background: #ffffff;
		455	padding: 20px 20px 8px 20px;
		456	font-family: "PingFangSC-Regular";
		457	box-sizing: border-box;
		458	display: flex;
		459	justify-content: space-between;
		460	align-content: center;
		461	margin: 0;
		462	.menu_1 {
		463	width: 20%;
		464	height: 100%;
		465	text-align: center;
		466	color: #989898;
		467	.cart_icon {
		468	position: relative;
		469	text {
		470	position: absolute;
		471	color: white;
		472	font-size: 17px;
		473	background-color: red;
		474	min-height: 24px;
		475	min-width: 24px;
		476	line-height: 24px;
		477	right: -12%;
		478	top: -12px;
		479	text-align: center;
		480	border-radius: 24px;
		481	padding: 2px;
		482	}
		483	}
		484	}
		485	image {
		486	width: 42%;
		487	height: 26px;
		488	}
		489	.menu_image {
		490	font-size: 12px;
		491	text-align: center;
		492	}
		493	.menu_2 {
		494	width: 74%;
		495	height: 86%;
		496	display: grid;
		497	grid-template-columns: 50% 50%;
		498	}
		499	.menu_input {
		500	display: inline-flex;
		501	align-items: center;
		502	justify-content: space-around;
		503	background: #fff0ec;
		504	font-size: 16px;
		505	color: #ff6b4a;
		506	border-radius: 20px 0 0 20px;
		507	}
		508	.menu_now {
		509	display: inline-flex;
		510	align-items: center;
		511	justify-content: space-around;
		512	background: #ff6b4a;
		513	font-size: 16px;
		514	color: #ffffff;
		515	border-radius: 0 20px 20px 0;
231	}	516	}
232	}	517	}
233	}	518	}
234	</style>	519	</style>
235		520

src/store/modules/details.js

Diff comments View file @530bb7e

1	import urlAlias from '../url'	1	import urlAlias from '../url'
2	import request from '../request'	2	import request from '../request'
3		3
4	const {	4	const {
5	read,	5	read,
		6	cartList,
6	} = urlAlias	7	} = urlAlias
7		8
8	const state = {	9	const state = {
9	// 轮播图	10	// 轮播图
10	carousel: [	11	carousel: [
11	'/static/img/detail/d9.png',	12	'/static/img/detail/d9.png',
12	],	13	],
13	// 商品基本信息	14	// 商品基本信息
14	goodsInfo: {	15	goodsInfo: {
15	name: '暂无名称',	16	name: '暂无名称',
16	price: '暂无价格',	17	price: '暂无价格',
17	discountPrice: undefined,	18	discountPrice: undefined,
18	tradeNumber: undefined,	19	tradeNumber: undefined,
19	},	20	},
		21	// 商品介绍
		22	tag: {
		23	prod_tag_style: [{
		24	label: '青春学子风',
		25	value: '54',
		26	}],
		27	},
		28	// 规格参数
		29	specification: [
		30	{ key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
		31	{ key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
		32	{ key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
		33	{ key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
		34	{ key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
		35	{ key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克（grams）' },
		36	],
		37	// 评价
		38	evaluate: {
		39	rate: '100%',
		40	star: 5,
		41	tag: [{ name: '价格实惠' }],
		42	},
		43	// 商品详情
		44	more: '',
		45	// 购物车数目
		46	cartNumber: 0,
20	}	47	}
21		48
22	const mutations = {	49	const mutations = {
23	INIT: (state, { carousel, goodsInfo }) => {	50	INIT: (state, { carousel, goodsInfo, tag, specification, evaluate, more }) => {
24	state.carousel = carousel	51	state.carousel = carousel
25	state.goodsInfo = goodsInfo	52	state.goodsInfo = goodsInfo
		53	state.tag = tag
		54	state.specification = specification
		55	state.evaluate = evaluate
		56	state.more = more
		57	},
		58	CART: (state, number) => {
		59	state.cartNumber = number
26	},	60	},
27	}	61	}
28		62
29	const actions = {	63	const actions = {
30	details({ commit }, param) {	64	// 获取详情
		65	details({ commit, rootState }, param) {
31	return new Promise((resolve, reject) => request({	66	return new Promise((resolve, reject) => request({
32	url: read,	67	url: read,
33	data: param,	68	data: param,
34	success: ({ data: { data } }) => {	69	success: ({ data: { data } }) => {
		70	console.log('data.tag', data.tag)
		71	// 规格参数设置
		72	const specification = rootState.details.specification
		73	const parameter = {
		74	frame_width: data.frame_width,
		75	glass_width: data.glass_width,
		76	glass_height: data.glass_height,
		77	nose_width: data.nose_width,
		78	leg_long: data.leg_long,
		79	weight: data.weight,
		80	}
		81	for (let index = 0; index < specification.length; index++) {
		82	if (specification[index].key !== 'weight') {
		83	specification[index].slength = `${parameter[specification[index].key]}mm`
		84	} else {
		85	specification[index].slength = `${parameter[specification[index].key]}克（grams）`
		86	}
		87	}
		88
35	commit('INIT', {	89	commit('INIT', {
36	carousel: data.pics,	90	carousel: data.pics,
37	goodsInfo: {	91	goodsInfo: {
38	name: data.p_name,	92	name: data.p_name,
39	price: data.priceArea.Min_Price,	93	price: data.priceArea.Min_Price,
40	discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount),	94	discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount),
41	tradeNumber: data.trade_num,	95	tradeNumber: data.trade_num,
42	},	96	},
		97	tag: data.tag,
		98	specification,
		99	evaluate: {
		100	rate: data.judgeInfo.good,
		101	tag: data.judge_tag,
		102	star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100),
		103	},
		104	more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'),
43	})	105	})
44	resolve(data)	106	resolve(data)
45	},	107	},
46	fail: (res) => {	108	fail: (res) => {
47	console.log('fail status ===>', res)	109	console.log('fail status ===>', res)
48	},	110	},
49	}))	111	}))
50	},	112	},
		113	// 获取购物车列表
		114	getCartNumber({ commit }, param) {
		115	return new Promise((resolve) => request({
		116	url: cartList,
		117	data: param,
		118	success: ({ data: { data } }) => {
		119	console.log('cartData', data)
		120	let number = 0
		121	for (let index = 0; index < data.length; index++) {
		122	number += Number(data[index].num)
		123	}
		124	commit('CART', number)
		125	},
		126	}))
		127	},
51	}	128	}
52		129
53	export default {	130	export default {
54	namespaced: true,	131	namespaced: true,
55	state,	132	state,
56	mutations,	133	mutations,
57	actions,	134	actions,
58	}	135	}
59		136