Adam / gulu-vue

Download as
Browse Code »

Commit d1ce60f3df3e4d9db432c5cca16bc591f26fde56

Authored by BigBoss
2 parents 5b513503fb 1df0f126a4
Exists in master

合并冲突

Showing 9 changed files   Show diff stats
src/components/UniSliper/UniSliper.vue
Diff comments   View file @d1ce60f
1 <template> 1 <template>
2 <div class="c-progress"> 2 <div class="c-progress">
3 <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress"> 3 <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
4 <div class="c-progress-inner" :style="setProgressStyle"></div> 4 <div class="c-progress-inner"
5 <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> 5 v-bind:style="{width: inner_width+'rpx'}"
6 ></div>
7 <!-- <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> -->
6 </div> 8 </div>
7 <span v-if="showPerText">{{stand_width}}mm</span> 9 <span v-if="showPerText">{{content}}mm</span>
8 </div> 10 </div>
9 </template> 11 </template>
10 12
11 <script> 13 <script>
12 // 使用了element的颜色 14 // 使用了element的颜色
13 const colorTable = { 15 const colorTable = {
14 success: '#13ce66', 16 success: '#13ce66',
15 fail: '#ff4949', 17 fail: '#ff4949',
16 warning: '#e6a23c', 18 warning: '#e6a23c',
17 default: '#409EFF' 19 default: '#409EFF'
18 } 20 }
19 export default { 21 export default {
20 name: 'CProgress', 22 name: 'CProgress',
21 props: { 23 props: {
22 percent: { 24 //inner的长度
23 type: Number, 25 inner_widthProp: Number,
24 default: 60 26 //调用接口的值
25 }, 27 contentProp: String
26 showSlider: {
27 type: Boolean,
28 default: true
29 },
30 showPerText: {
31 type: Boolean,
32 default: true
33 },
34 // 进度条的宽度
35 width: {
36 type: Number,
37 default: 300
38 },
39 bgColor: {
40 type: String,
41 default: '#ebeef5'
42 },
43 progressColor: {
44 type: String,
45 default: '#409EFF'
46 },
47 // 滑块的宽度
48 sliderWidth: {
49 type: Number,
50 default: 20
51 },
52 // 颜色的类型
53 type: {
54 type: String,
55 default: colorTable.default
56 },
57 //规格长度
58 standard:{
59 type: Number,
60 default: 1.4
61 },
62 //初始长度
63 stand_width:{
64 type: Number,
65 default: 0
66 }
67 }, 28 },
68 data () { 29 data () {
69 return { 30 return {
70 sliderLeft: 0, // 滑块相对父元素发x坐标 31 inner_width: this.inner_widthProp,
71 progressWidth: 0, // 进度条当前的的宽度 32 content: this.contentProp
72 tempPercent: 0,
73 } 33 }
74 }, 34 },
75 computed: { 35 computed: {
76 // 设置进度条的背景样式 36 // 设置进度条的背景样式
77 setProgressBgStyle () { 37 setProgressBgStyle () {
78 return { 38 return {
79 // 加上滑块的宽度 39 // 加上滑块的宽度
80 width: `${this.width + this.sliderWidth}px` 40 width: `${this.width + this.sliderWidth}px`
81 } 41 }
82 }, 42 },
83 // 设置进度条的样式 43 // 设置进度条的样式
84 setProgressStyle () { 44 setProgressStyle () {
85 const color = colorTable[this.type] || this.progressColor 45 const color = colorTable[this.type] || this.progressColor
86 return { 46 return {
87 width: `${this.progressWidth}px`, 47 width: `${this.progressWidth}px`,
88 background: color 48 background: color
89 } 49 }
90 }, 50 },
91 // 设置滑块的样式 51 // 设置滑块的样式
92 setSliderStyle () { 52 setSliderStyle () {
93 const color = colorTable[this.type] || this.progressColor 53 const color = colorTable[this.type] || this.progressColor
94 return { 54 return {
95 border: `1px solid ${color}`, 55 border: `1px solid ${color}`,
96 width: `${this.sliderWidth}px`, 56 width: `${this.sliderWidth}px`,
97 height: `${this.sliderWidth}px`, 57 height: `${this.sliderWidth}px`,
98 left: `${this.sliderLeft}px` 58 left: `${this.sliderLeft}px`
99 } 59 }
100 } 60 }
101 }, 61 },
102 mounted () { 62 mounted () {
103 this.sliderLeft = this.width / 100 * this.percent 63 this.sliderLeft = this.width / 100 * this.percent
104 this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度 64 this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
105 this.tempPercent = this.percent 65 this.tempPercent = this.percent
106 this.addListener() 66 // this.addListener()
107 }, 67 },
108 methods: { 68 // methods: {
109 addListener () { 69 // addListener () {
110 const slider = this.$refs.slider 70 // const slider = this.$refs.slider
111 const progress = this.$refs.progress 71 // const progress = this.$refs.progress
112 let isClickSlider = false 72 // let isClickSlider = false
113 let distance = 0 // 滑块与点击坐标的绝对距离 73 // let distance = 0 // 滑块与点击坐标的绝对距离
114 progress.onclick = (e) => { 74 // progress.onclick = (e) => {
115 // 阻止事件冒泡 75 // // 阻止事件冒泡
116 if (e.target == slider) { 76 // if (e.target == slider) {
117 return 77 // return
118 } 78 // }
119 let curX = progress.offsetLeft 79 // let curX = progress.offsetLeft
120 this.sliderLeft = e.pageX - curX 80 // this.sliderLeft = e.pageX - curX
121 if (this.sliderLeft <= 0) { 81 // if (this.sliderLeft <= 0) {
122 this.sliderLeft = 0 82 // this.sliderLeft = 0
123 } 83 // }
124 if (this.sliderLeft >= this.width) { 84 // if (this.sliderLeft >= this.width) {
125 this.sliderLeft = this.width 85 // this.sliderLeft = this.width
126 } 86 // }
127 this._countCurPercent() 87 // this._countCurPercent()
128 } 88 // }
129 // slider.onmousedown = (e) => { 89 // // slider.onmousedown = (e) => {
130 // isClickSlider = true 90 // // isClickSlider = true
131 // let curX = slider.offsetLeft 91 // // let curX = slider.offsetLeft
132 // distance = e.pageX - curX // 得出绝对距离 92 // // distance = e.pageX - curX // 得出绝对距离
133 // } 93 // // }
134 progress.onmousemove = (e) => { 94 // progress.onmousemove = (e) => {
135 if (isClickSlider) { 95 // if (isClickSlider) {
136 // 判断是否已经超出进度条的长度 96 // // 判断是否已经超出进度条的长度
137 if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { 97 // if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
138 this.sliderLeft = e.pageX - distance 98 // this.sliderLeft = e.pageX - distance
139 this._countCurPercent() 99 // this._countCurPercent()
140 } 100 // }
141 } 101 // }
142 } 102 // }
143 progress.onmouseup = () => { 103 // progress.onmouseup = () => {
144 isClickSlider = false 104 // isClickSlider = false
145 } 105 // }
146 }, 106 // },
147 // 算出百分比 107 // // 算出百分比
148 _countCurPercent () { 108 // _countCurPercent () {
149 this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) 109 // this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
150 this.progressWidth = this.sliderLeft + 20 110 // this.progressWidth = this.sliderLeft + 20
151 // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整 111 // // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
152 if (this.tempPercent <= 0) { 112 // if (this.tempPercent <= 0) {
153 this.progressWidth = 0 113 // this.progressWidth = 0
154 this.sliderLeft = 0 114 // this.sliderLeft = 0
155 } 115 // }
156 if (this.tempPercent >= 100) { 116 // if (this.tempPercent >= 100) {
157 this.progressWidth = this.width + 20 117 // this.progressWidth = this.width + 20
158 this.sliderLeft = this.width 118 // this.sliderLeft = this.width
159 } 119 // }
160 this.stand_width = this.tempPercent*this.standard 120 // this.stand_width = this.tempPercent*this.standard
161 this.stand_width = parseInt(this.stand_width/1) //取整 121 // this.stand_width = parseInt(this.stand_width/1) //取整
162 this.$emit('percentChange', this.tempPercent) 122 // this.$emit('percentChange', this.tempPercent)
163 } 123 // }
164 } 124 // }
165 } 125 }
166 </script> 126 </script>
167 127
168 <style scoped lang="scss"> 128 <style scoped lang="scss">
169 .c-progress { 129 .c-progress {
170 $width: 400rpx; 130 $width: 300px;
171 $radius: 5px; 131 $radius: 5px;
172 display: flex; 132 display: flex;
173 align-items: center; 133 align-items: center;
174 134
175 span { 135 span {
176 margin-left: 5px; 136 margin-left: 5px;
177 font-size: 14px; 137 font-size: 14px;
178 color: #666; 138 color: #666;
179 } 139 }
180 140
181 .c-progress-outer { 141 .c-progress-outer {
182 width: $width; 142 width: 420rpx;
183 height: 10px; 143 height: 10px;
184 background: #ebeef5; 144 background: #ebeef5;
185 position: relative; 145 position: relative;
186 display: flex; 146 display: flex;
187 align-items: center; 147 align-items: center;
188 148
189 .c-progress-inner { 149 .c-progress-inner {
190 width: 100rpx; 150 width: 300rpx;
191 height: 10px; 151 height: 10px;
192 background: #FF6B4A ; 152 background: #FF6B4A ;
193 } 153 }
194 154
195 .c-progress-slider { 155 .c-progress-slider {
196 width: 20px; 156 width: 20px;
197 height: 20px; 157 height: 20px;
198 border-radius: 50%; 158 border-radius: 50%;
199 background: #fff; 159 background: #fff;
200 border: 1px solid #FF6B4A ; 160 border: 1px solid #FF6B4A ;
201 position: absolute; 161 position: absolute;
202 z-index: 10; 162 z-index: 10;
203 left: 10px; 163 left: 10px;
204 } 164 }
205 } 165 }
1 { 1 {
2 "pages" : [ 2 "pages" : [
3 { 3 {
4 "path" : "pages/index/index", 4 "path" : "pages/index/index",
5 "style" : { 5 "style" : {
6 "navigationBarTitleText" : "商城一览" 6 "navigationBarTitleText" : "商城一览"
7 } 7 }
8 }, 8 },
9 { 9 {
10 "path" : "pages/addOpticsData/addOpticsData", 10 "path" : "pages/addOpticsData/addOpticsData",
11 "style" : { 11 "style" : {
12 "navigationBarTitleText" : "验光数据"} 12 "navigationBarTitleText" : "验光数据"}
13 }, 13 },
14 { 14 {
15 "path" : "pages/user/user", 15 "path" : "pages/user/user",
16 "style" : { 16 "style" : {
17 "navigationBarTitleText" : "我的" 17 "navigationBarTitleText" : "我的"
18 } 18 }
19 }, 19 },
20 { 20 {
21 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", 21 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs",
22 "style" : { 22 "style" : {
23 "navigationBarTitleText" : "镜片名称名称" 23 "navigationBarTitleText" : "镜片名称名称"
24 } 24 }
25 }, 25 },
26 { 26 {
27 "path" : "pages/purchaseLenses/purchaseLenses", 27 "path" : "pages/purchaseLenses/purchaseLenses",
28 "style" : { 28 "style" : {
29 "navigationBarTitleText" : "产品选购" 29 "navigationBarTitleText" : "产品选购"
30 } 30 }
31 }, 31 },
32 { 32 {
33 "path" : "pages/lensDetails/lensDetails", 33 "path" : "pages/lensDetails/lensDetails",
34 "style" : { 34 "style" : {
35 "navigationBarTitleText" : "产品详情" 35 "navigationBarTitleText" : "产品详情"
36 } 36 }
37 }, 37 },
38 { 38 {
39 "path" : "pages/myOrderPaying/myOrderPaying", 39 "path" : "pages/myOrderPaying/myOrderPaying",
40 "style" : { 40 "style" : {
41 "navigationBarTitleText" : "我的订单" 41 "navigationBarTitleText" : "我的订单"
42 } 42 }
43 }, 43 },
44 { 44 {
45 "path" : "pages/myOrder/myOrder", 45 "path" : "pages/myOrder/myOrder",
46 "style" : { 46 "style" : {
47 "navigationBarTitleText" : "我的订单" 47 "navigationBarTitleText" : "我的订单"
48 } 48 }
49 }, 49 },
50 { 50 {
51 "path" : "pages/cart/cart", 51 "path" : "pages/cart/cart",
52 "style" : { 52 "style" : {
53 "navigationBarTitleText" : "购物车" 53 "navigationBarTitleText" : "购物车"
54 } 54 }
55 }, 55 },
56 { 56 // {
57 "path" : "pages/frameDetail/frameDetail", 57 // "path" : "pages/frameDetail/frameDetail",
58 "style" : { 58 // "style" : {
59 "navigationBarTitleText" : "产品详情" 59 // "navigationBarTitleText" : "产品详情"
60 } 60 // }
61 }, 61 // },
62 { 62 {
63 "path" : "pages/refundProgress/refundProgress", 63 "path" : "pages/refundProgress/refundProgress",
64 "style" : { 64 "style" : {
65 "navigationBarTitleText" : "申请退款" 65 "navigationBarTitleText" : "申请退款"
66 } 66 }
67 }, 67 },
68 { 68 {
69 "path" : "pages/addAddress/addAddress", 69 "path" : "pages/addAddress/addAddress",
70 "style" : { 70 "style" : {
71 "navigationBarTitleText" : "新增地址" 71 "navigationBarTitleText" : "新增地址"
72 } 72 }
73 }, 73 },
74 { 74 {
75 "path" : "pages/confirmOrder/confirmOrder", 75 "path" : "pages/confirmOrder/confirmOrder",
76 "style" : { 76 "style" : {
77 "navigationBarTitleText" : "确认订单" 77 "navigationBarTitleText" : "确认订单"
78 } 78 }
79 }, 79 },
80 { 80 {
81 "path" : "pages/refundment/refundWays", 81 "path" : "pages/refundment/refundWays",
82 "style" : { 82 "style" : {
83 "navigationBarTitleText" : "退款方式" 83 "navigationBarTitleText" : "退款方式"
84 } 84 }
85 }, 85 },
86 { 86 {
87 "path" : "pages/refundment/refundment", 87 "path" : "pages/refundment/refundment",
88 "style" : { 88 "style" : {
89 "navigationBarTitleText" : "申请退款" 89 "navigationBarTitleText" : "申请退款"
90 } 90 }
91 }, 91 },
92 { 92 {
93 "path" : "pages/predelivery/predelivery", 93 "path" : "pages/predelivery/predelivery",
94 "style" : { 94 "style" : {
95 "navigationBarTitleText" : "待发货" 95 "navigationBarTitleText" : "待发货"
96 } 96 }
97 }, 97 },
98 { 98 {
99 "path" : "pages/customerService/customerService", 99 "path" : "pages/customerService/customerService",
100 "style" : { 100 "style" : {
101 "navigationBarTitleText" : "在线客服" 101 "navigationBarTitleText" : "在线客服"
102 } 102 }
103 }, 103 },
104 { 104 {
105 "path" : "pages/detailStandard/detailStandard_sun", 105 "path" : "pages/detailStandard/detailStandard_sun",
106 "style" : { 106 "style" : {
107 "navigationBarTitleText" : "太阳镜选购页" 107 "navigationBarTitleText" : "太阳镜选购页"
108 } 108 }
109 }, 109 },
110 { 110 {
111 "path" : "pages/detailStandard/detailStandard_k", 111 "path" : "pages/detailStandard/detailStandard_k",
112 "style" : { 112 "style" : {
113 "navigationBarTitleText" : "镜框选购页" 113 "navigationBarTitleText" : "镜框选购页"
114 } 114 }
115 } 115 }
116 ], 116
117 "globalStyle" : { 117 ],
118 "navigationBarTextStyle" : "black", 118 "globalStyle" : {
119 "navigationBarTitleText" : "uni-app", 119 "navigationBarTextStyle" : "black",
120 "navigationBarBackgroundColor" : "#F8F8F8", 120 "navigationBarTitleText" : "uni-app",
121 "backgroundColor" : "#F8F8F8" 121 "navigationBarBackgroundColor" : "#F8F8F8",
122 }, 122 "backgroundColor" : "#F8F8F8"
123 "tabBar" : { 123 },
124 "color" : "#C0C4CC", 124 "tabBar" : {
125 "selectedColor" : "#fa436a", 125 "color" : "#C0C4CC",
126 "borderStyle" : "black", 126 "selectedColor" : "#fa436a",
127 "backgroundColor" : "#ffffff", 127 "borderStyle" : "black",
128 "list" : [ 128 "backgroundColor" : "#ffffff",
129 { 129 "list" : [
130 "pagePath" : "pages/index/index", 130 {
131 "iconPath" : "static/tab-home.png", 131 "pagePath" : "pages/index/index",
132 "selectedIconPath" : "static/tab-home-current.png", 132 "iconPath" : "static/tab-home.png",
133 "text" : "首页" 133 "selectedIconPath" : "static/tab-home-current.png",
134 }, 134 "text" : "首页"
135 { 135 },
136 "pagePath" : "pages/cart/cart", 136 {
137 "iconPath" : "static/tab-cart.png", 137 "pagePath" : "pages/cart/cart",
138 "selectedIconPath" : "static/tab-cart-current.png", 138 "iconPath" : "static/tab-cart.png",
139 "text" : "购物车" 139 "selectedIconPath" : "static/tab-cart-current.png",
140 }, 140 "text" : "购物车"
141 { 141 },
142 "pagePath" : "pages/user/user", 142 {
143 "iconPath" : "static/tab-my.png", 143 "pagePath" : "pages/user/user",
144 "selectedIconPath" : "static/tab-my-current.png", 144 "iconPath" : "static/tab-my.png",
145 "text" : "我的" 145 "selectedIconPath" : "static/tab-my-current.png",
146 } 146 "text" : "我的"
147 ] 147 }
148 }, 148 ]
149 "condition" : { 149 },
150 //模式配置，仅开发期间生效 150 "condition" : {
151 "current" : 0, //当前激活的模式(list 的索引项) 151 //模式配置，仅开发期间生效
152 "list" : [ 152 "current" : 0, //当前激活的模式(list 的索引项)
153 { 153 "list" : [
154 "name" : "", //模式名称 154 {
155 "path" : "", //启动页面，必选 155 "name" : "", //模式名称
156 "query" : "" //启动参数，在页面的onLoad函数里面得到 156 "path" : "", //启动页面，必选
157 } 157 "query" : "" //启动参数，在页面的onLoad函数里面得到
158 ] 158 }
159 } 159 ]
160 } 160 }
161 }
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @d1ce60f
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="detail"> 3 <view class="detail">
4 <view class="detail1"><image v-bind:src="detail.image"></image></view> 4 <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
5 <view class="detail2"> 5 <view class="detail2">
6 <view class="detail2_name">{{detail.name}}</view> 6 <view class="detail2_name">{{details.data.p_name}}</view>
7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> 7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
8 <view class="detail2_price"><span>￥{{detail.price}}</span></view> 8 <view class="detail2_price">
9 <span>￥{{details.data.p_sale_price*count}}</span>
10 <view class="counter">
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12 <text>{{count}}</text>
13 <view class="btn" @click="counter(true)">+</view>
14 </view>
15 </view>
9 </view> 16 </view>
10 </view> 17 </view>
11 <view class="choose"> 18 <view class="choose">
12 <view class="colour"> 19 <view class="colour">
13 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view> 20 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view>
14 <view class="colour_exp">*黑色 BHL192345</view> 21 <view class="colour_exp">*{{colour}}</view>
22 <view>
15 <view class="colour2"> 23 <view class="colour2">
16 <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> 24 <view
25 v-for="(items,index) in details.data.skuList"
26 :key="index"
27 @click="viewChoose(index)"
28 class="colour2_view"
29 v-bind:class="{'colour2_viewed': chooseNum == index}"
30 >
31 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
32 </view>
33 </view>
17 </view> 34 </view>
18 <hr/> 35 <hr/>
19 </view> 36 </view>
20 <view class="size"> 37 <view class="size">
21 <view class="size1"> 38 <view class="size1">
22 <view class="size1_1">框架尺寸</view> 39 <view class="size1_1">框架尺寸</view>
23 <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view> 40 <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view>
24 </view> 41 </view>
25 <view class="size2"> 42 <view class="colour">
26 <view>通用</view> 43 <view class="colour_exp">*{{colour}}</view>
27 <view>定制</view>
28 </view> 44 </view>
29 <view class="D3_list"> 45 <view class="D3_list">
30 <view v-for="(item) in parameter" :key="item.key"> 46 <view>
31 <view><image class="D3_image" v-bind:src = "item.img"></image></view> 47 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
48 <view class="D3_list_jDu">
49 <view class="D3_list1">
50 <c-progress class="c-progress" :inner_widthProp="300"/>
51 <text>{{details.data.frame_width}}mm</text>
52 </view>
53 <view>{{parameter[0].standard}}</view>
54 </view>
55 </view>
56 <view>
57 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
32 <view class="D3_list_jDu"> 58 <view class="D3_list_jDu">
33 <!-- uni-sliper插件 --> 59 <view class="D3_list1">
34 <!-- <c-progress class="c-progress" 60 <c-progress class="c-progress" :inner_widthProp="190"/>
35 :percent="item.percent" 61 <view>{{details.data.glass_width}}mm</view>
36 :show-slider="false" :width="190" 62 </view>
37 :standard="item.standard_l" 63 <view>{{parameter[1].standard}}</view>
38 :stand_width="item.slength" 64 </view>
39 progressColor="#FF6B4A" 65 </view>
40 /> --> 66 <view>
41 <view>{{item.standard}}</view> 67 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
68 <view class="D3_list_jDu">
69 <view class="D3_list1">
70 <c-progress class="c-progress" :inner_widthProp="210"/>
71 <view>{{details.data.glass_height}}mm</view>
72 </view>
73 <view>{{parameter[2].standard}}</view>
74 </view>
75 </view>
76 <view>
77 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
78 <view class="D3_list_jDu">
79
80 <view class="D3_list1">
81 <c-progress class="c-progress" :inner_widthProp="160"/>
82 <view>{{details.data.nose_width}}mm</view>
83 </view>
84 <view>{{parameter[3].standard}}</view>
85 </view>
86 </view>
87 <view>
88 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
89 <view class="D3_list_jDu">
90 <view class="D3_list1">
91 <c-progress class="c-progress" :inner_widthProp="260"/>
92 <view>{{details.data.leg_long}}mm</view>
93 </view>
94 <view>{{parameter[4].standard}}</view>
42 </view> 95 </view>
43 </view> 96 </view>
44 <hr/> 97 <hr/>
45 </view> 98 </view>
46 </view> 99 </view>
47 <view class="part"> 100 <view class="part">
48 <view class="size1"> 101 <view class="size1">
49 <view class="size1_1">配件</view> 102 <view class="size1_1">配件</view>
50 <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view> 103 <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
51 </view> 104 </view>
52 <view class="colour_exp">*0290</view> 105 <view class="colour_exp">*0290</view>
53 <view class="part_som"> 106 <view class="part_som">
54 <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> 107 <view
108 v-for="(part) in part"
109 :key="part.key"
110 v-bind:class="{'size_viewed': part.is_actived}"
111 >
112 <image v-bind:src="part.img"></image>
113 </view>
55 </view> 114 </view>
56 </view> 115 </view>
57 </view> 116 </view>
58 <view class="buy"> 117 <view class="buy">
59 <view class="buy1">选了镜框，想选镜片？</view> 118 <view class="buy1">选了镜框，想选镜片？</view>
60 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> 119 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
61 <view class="buy3"> 120 <view class="buy3">
62 <view class="buy3_1">暂时不选</view> 121 <view class="buy3_1">暂时不选</view>
63 <view class="buy3_2">立即去选</view> 122 <view class="buy3_2" @click="popArgs">立即去选</view>
64 </view> 123 </view>
65 </view> 124 </view>
66 <view class="zhanwei"></view> 125 <view class="zhanwei"></view>
67 <view class="button"><view>立即结算</view></view> 126 <view class="button"><view>立即结算</view></view>
68 </view> 127 </view>
69 </template> 128 </template>
70 <script> 129 <script>
71 import CProgress from '../../components/UniSliper/UniSliper' 130 import CProgress from '../../components/UniSliper/UniSliper'
72 import store from '@/store' 131 import store from '@/store'
73 132
74 export default { 133 export default {
134 components: {
135 CProgress
136 },
75 data(){ 137 data(){
76 return{ 138 return{
77 detail:{ 139 count: 1,
78 image:'/static/img/detail/d1.png', 140 colour: '1.56非球面防蓝光_亚黑色',
79 name:'商品名称商品名称商品名称商品名称商品名称', 141 chooseNum : '',
80 price: 180,
81 number: 1,
82 },
83 //框架颜色
84 colour:[
85 {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
86 {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
87 {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
88 {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
89 {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
90 {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
91 {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
92 ],
93 //规格
94 parameter:[ 142 parameter:[
95 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, 143 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
96 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, 144 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
97 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, 145 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
98 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, 146 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
99 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, 147 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
100 ], 148 ],
101 //配饰 149 //配饰
102 part:[ 150 part:[
103 {key: 0,img:'/static/img/detail/Kuang/g1.png'}, 151 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
104 {key: 1,img:'/static/img/detail/Kuang/g1.png'}, 152 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
105 {key: 2,img:'/static/img/detail/Kuang/g2.png'}, 153 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
106 {key: 3,img:'/static/img/detail/Kuang/g1.png'}, 154 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
107 {key: 4,img:'/static/img/detail/Kuang/g1.png'}, 155 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
108 {key: 5,img:'/static/img/detail/Kuang/g3.png'}, 156 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
109 {key: 6,img:'/static/img/detail/Kuang/g3.png'}, 157 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
110 {key: 7,img:'/static/img/detail/Kuang/g2.png'}, 158 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
111 ], 159 ],
112 } 160 }
113 }, 161 },
114 162
115 components: { 163 computed: {
116 detailStandard_k(){ 164 details(){
117 console.log(detailStandard_k) 165 return this.$store.state.detailStandard_k.list
118 return this.$store.state.detailStandard_k.detailStandardList 166 },
119 }
120 }, 167 },
121 onLoad:function(){ 168 onLoad:function(){
122 store.dispatch('detailStandard_k/getList') 169 store.dispatch('detailStandard_k/fetch', {
170 uid: "1",
171 pid: "26",
172 });
173 // console.log(this.$store.state.detailStandard_k.list+'ssss');
123 }, 174 },
175 methods: {
176 counter(isadd){
177 if(isadd){
178 this.count++
179 }else{
180 this.count <= 1? this.disabled = true:this.count--
181 }
182 },
183 colourChange(index,e){
184 this.colour = e ; //颜色选择
185 // console.log(index,e);
186
187 },
188 viewChoose(index){
189 this.chooseNum = index
190 },
191 popArgs(){
192 uni.navigateTo({
193 url: '../detailsChoiceArgs/detailsChoiceArgs',
194 success: res => {},
195 fail: () => {},
196 complete: () => {}
197 });
198 }
199 }
200
124 } 201 }
125 </script> 202 </script>
126 203
127 <style lang="scss"> 204 <style lang="scss">
128 .container{ 205 .container{
129 min-height: 100vh; 206 min-height: 100vh;
130 background: #F2F2F2; 207 background: #F2F2F2;
131 padding-top: 10px; 208 padding-top: 10px;
132 box-sizing: border-box; 209 box-sizing: border-box;
133 } 210 }
134 hr{ 211 hr{
135 border: none; 212 border: none;
136 height: 1px; 213 height: 1px;
137 background: #F2F2F2; 214 background: #F2F2F2;
138 margin-top: 18px; 215 margin-top: 18px;
139 } 216 }
140 .detail{ 217 .detail{
141 height: 272rpx; 218 height: 272rpx;
142 background: #FFFFFF; 219 background: #FFFFFF;
143 border-radius: 8px; 220 border-radius: 8px;
144 padding: 16px; 221 padding: 16px;
145 box-sizing: border-box; 222 box-sizing: border-box;
146 display: flex; 223 display: flex;
147 justify-content: space-between; 224 justify-content: space-between;
148 align-items: center; 225 align-items: center;
149 } 226 }
150 .detail1{ 227 .detail1{
151 height: 188rpx; 228 height: 178rpx;
152 width: 188rpx; 229 width: 188rpx;
153 image{ 230 image{
154 width: 100%; 231 width: 100%;
155 height: 100%; 232 height: 100%;
156 border-radius: 8px; 233 border-radius: 8px;
157 } 234 }
158 } 235 }
159 .detail2{ 236 .detail2{
160 width: 68%; 237 width: 68%;
161 view{ 238 view{
162 margin-bottom: 8px; 239 margin-bottom: 6px;
163 font-family: PingFangSC-Regular; 240 font-family: PingFangSC-Regular;
164 } 241 }
165 .detail2_name{ 242 .detail2_name{
166 font-size: 14px; 243 font-size: 14px;
167 color: #333333; 244 color: #333333;
168 letter-spacing: -0.26px; 245 letter-spacing: -0.26px;
169 line-height: 18px; 246 line-height: 18px;
247 overflow:hidden;
248 text-overflow:ellipsis;
249 display:-webkit-box;
250 -webkit-box-orient:vertical;
251 -webkit-line-clamp:2;
170 } 252 }
171 .detail2_tui{ 253 .detail2_tui{
172 font-size: 10px; 254 font-size: 10px;
173 color: #999999; 255 color: #999999;
174 letter-spacing: -0.19px; 256 letter-spacing: -0.19px;
175 span{ 257 span{
176 margin-right: 10px; 258 margin-right: 10px;
177 } 259 }
178 } 260 }
179 .detail2_price{ 261 .detail2_price{
180 font-size: 14px; 262 font-size: 14px;
181 color: #FF6B4A; 263 color: #FF6B4A;
182 letter-spacing: -0.26px; 264 letter-spacing: -0.26px;
183 } 265 }
184 } 266 }
267 .counter{
268 display: flex;
269 flex-direction: row;
270 justify-content: space-between;
271 font-size: 28rpx;
272 color: #333333;
273 width: 122rpx;
274 float: right;
275 .btn{
276 display: flex;
277 justify-content: center;
278 line-height: 32rpx;
279 height: 32rpx;
280 width: 32rpx;
281 background-color: #F2F2F2;
282 color: #CFCFCF;
283 }
284 }
185 .choose{ 285 .choose{
186 background: #FFFFFF; 286 background: #FFFFFF;
187 padding: 16px; 287 padding: 16px;
188 box-sizing: border-box; 288 box-sizing: border-box;
189 margin-top: 10px; 289 margin-top: 10px;
190 border-radius: 8px; 290 border-radius: 8px;
191 .colour1{ 291 .colour1{
192 span{ 292 span{
193 font-family: PingFangSC-Medium; 293 font-family: PingFangSC-Medium;
194 font-size: 16px; 294 font-size: 16px;
195 color: #333333; 295 color: #333333;
196 letter-spacing: -0.3px; 296 letter-spacing: -0.3px;
197 text-align: justify; 297 text-align: justify;
198 line-height: 24px; 298 line-height: 24px;
199 font-weight: bold; 299 font-weight: bold;
200 } 300 }
201 image{ 301 image{
202 float: right; 302 float: right;
203 width: 40rpx; 303 width: 40rpx;
204 height: 36rpx; 304 height: 36rpx;
205 } 305 }
206 } 306 }
207 .colour_exp{ 307 .colour_exp{
208 font-family: PingFangSC-Regular; 308 font-family: PingFangSC-Regular;
209 font-size: 12px; 309 font-size: 12px;
210 color: #666666; 310 color: #666666;
211 letter-spacing: 0; 311 letter-spacing: 0;
212 margin-top: 10px; 312 margin-top: 10px;
213 margin-bottom: 10px; 313 margin-bottom: 10px;
214 } 314 }
215 .colour2{ 315 .colour2{
216 display: grid; 316 display: grid;
217 grid-template-columns: repeat(5, 17%); 317 grid-template-columns: repeat(5, 17%);
218 justify-content: space-between ; 318 justify-content: space-between ;
219 grid-row-gap: 10px; 319 grid-row-gap: 10px;
220 margin-bottom: 14px; 320 margin-bottom: 14px;
221 view{ 321 .colour2_view{
222 border: 1px solid #F2F2F2; 322 border: 1px solid #F2F2F2;
223 image{ 323 image{
224 width: 100%; 324 width: 100rpx;
225 height: 100%; 325 height: 60rpx;
226 } 326 }
227 } 327 }
228 view:hover{ 328 .colour2_viewed{
229 border: 1px solid #FF6B4A; 329 border: 1px solid #FF6B4A;
330 image{
331 width: 100rpx;
332 height: 60rpx;
333 }
230 } 334 }
231 } 335 }
232 } 336 }
233 .size,.part{ 337 .size,.part{
234 margin-top:14px; 338 margin-top:14px;
235 .size1{ 339 .size1{
236 display: flex; 340 display: flex;
237 justify-content: space-between; 341 justify-content: space-between;
238 margin-bottom: 10px; 342 margin-bottom: 10px;
239 .size1_1{ 343 .size1_1{
240 font-weight: bold; 344 font-weight: bold;
241 font-family: PingFangSC-Medium; 345 font-family: PingFangSC-Medium;
242 font-size: 16px; 346 font-size: 16px;
243 color: #333333; 347 color: #333333;
244 letter-spacing: -0.3px; 348 letter-spacing: -0.3px;
245 line-height: 24px; 349 line-height: 24px;
246 } 350 }
247 view{ 351 view{
248 span{ 352 span{
249 font-family: PingFangSC-Regular; 353 font-family: PingFangSC-Regular;
250 font-size: 14px; 354 font-size: 14px;
251 color: #FF6B4A; 355 color: #FF6B4A;
252 letter-spacing: -0.26px; 356 letter-spacing: -0.26px;
253 margin-right: 12px; 357 margin-right: 12px;
254 } 358 }
255 image{ 359 image{
256 width: 40rpx; 360 width: 40rpx;
257 height: 36rpx; 361 height: 36rpx;
258 } 362 }
259 } 363 }
260 } 364 }
261 .size2{ 365 .size2{
262 view{ 366 view{
263 display: inline-flex; 367 display: inline-flex;
264 align-items: center; 368 align-items: center;
265 justify-content: center; //字体居中 369 justify-content: center; //字体居中
266 margin-right: 12px; 370 margin-right: 12px;
267 margin-bottom: 20px; 371 margin-bottom: 20px;
268 width: 136rpx; 372 width: 136rpx;
269 height: 60rpx; 373 height: 60rpx;
270 background: #F2F2F2; 374 background: #F2F2F2;
271 border-radius: 2px; 375 border-radius: 2px;
272 font-family: PingFangSC-Regular; 376 font-family: PingFangSC-Regular;
273 font-size: 12px; 377 font-size: 12px;
274 color: #666666; 378 color: #666666;
275 } 379 }
276 view:hover{ 380 view:hover{
277 color: #FF6B4A; 381 color: #FF6B4A;
278 background: rgba(255,107,74,0.15); 382 background: rgba(255,107,74,0.15);
279 } 383 }
280 } 384 }
281 .D3_list{ 385 .D3_list{
282 margin-bottom: 4px; 386 margin-bottom: 4px;
283 } 387 }
284 .D3_list>view{ 388 .D3_list>view{
285 display: flex; 389 display: flex;
286 align-content: center; 390 align-content: center;
287 margin-bottom: 10px; 391 margin-bottom: 10px;
288 view{ 392 view{
289 margin-right: 10px; 393 margin-right: 10px;
290 } 394 }
291 } 395 }
292 .D3_list image{ 396 .D3_list image{
293 width: 50px; 397 width: 50px;
294 height: 25px; 398 height: 25px;
295 margin-right: 6px; 399 margin-right: 6px;
296 } 400 }
297 .D3_list span{ 401 .D3_list span{
298 margin-left: 6px; 402 margin-left: 6px;
299 margin-right: 5px; 403 margin-right: 5px;
300 font-family: 'PingFangSC-Regular'; 404 font-family: 'PingFangSC-Regular';
301 } 405 }
302 .D3_list_jDu{ 406 .D3_list_jDu{
303 view{ 407 view{
304 font-family: PingFangSC-Regular; 408 font-family: PingFangSC-Regular;
305 font-size: 10px; 409 font-size: 10px;
306 color: #999999; 410 color: #999999;
307 letter-spacing: -0.19px; 411 letter-spacing: -0.19px;
308 } 412 }
413 .D3_list1{
414 display: flex;
415 }
309 } 416 }
310 } 417 }
311 .part{ 418 .part{
312 .part_som{ 419 .part_som{
313 display: grid; 420 display: grid;
314 justify-content: space-between; 421 justify-content: space-between;
315 grid-template-columns: repeat(4, 22%); 422 grid-template-columns: repeat(4, 22%);
316 grid-row-gap: 12px; 423 grid-row-gap: 12px;
317 margin-bottom: 14px; 424 margin-bottom: 14px;
318 view{ 425 view{
319 border: 1px solid #F2F2F2; 426 border: 1px solid #F2F2F2;
320 height: 72rpx; 427 height: 72rpx;
321 image{ 428 image{
322 width: 100%; 429 width: 100%;
323 height: 100%; 430 height: 100%;
324 } 431 }
325 } 432 }
326 view:hover{ 433 .size_viewed{
327 border: 1px solid #FF6B4A; 434 border: 1px solid #FF6B4A;
435 height: 72rpx;
436 image{
437 width: 100%;
438 height: 100%;
439 }
328 } 440 }
329 } 441 }
330 } 442 }
443
331 .buy{ 444 .buy{
332 height: 280rpx; 445 height: 300rpx;
333 background: #FFFFFF ; 446 background: #FFFFFF ;
334 margin-top: 10px; 447 margin-top: 10px;
335 border-radius: 8px; 448 border-radius: 8px;
336 padding-top: 20px; 449 padding-top: 20px;
337 box-sizing: border-box; 450 box-sizing: border-box;
338 margin-bottom: 20px; 451 margin-bottom: 20px;
339 } 452 }
340 .buy1{ 453 .buy1{
341 font-family: PingFangSC-Medium; 454 font-family: PingFangSC-Medium;
342 font-size: 16px; 455 font-size: 16px;
343 font-weight: bold; 456 font-weight: bold;
344 color: #333333; 457 color: #333333;
345 text-align: center; 458 text-align: center;
346 } 459 }
347 .buy2{ 460 .buy2{
348 font-family: PingFangSC-Regular; 461 font-family: PingFangSC-Regular;
349 font-size: 12px; 462 font-size: 12px;
350 color: #999999; 463 color: #999999;
351 text-align: center; 464 text-align: center;
352 margin: 10px; 465 margin: 10px;
353 } 466 }
354 .buy3{ 467 .buy3{
355 font-family: PingFangSC-Regular; 468 font-family: PingFangSC-Regular;
356 font-size: 16px; 469 font-size: 16px;
357 display: flex; 470 display: flex;
358 justify-content: center; 471 justify-content: center;
359 margin-top: 14px; 472 margin-top: 14px;
360 view{ 473 view{
361 border-radius: 20px; 474 border-radius: 20px;
362 width: 240rpx; 475 width: 240rpx;
363 height: 80rpx; 476 height: 80rpx;
364 display: flex; 477 display: flex;
365 justify-content: center; 478 justify-content: center;
366 align-items: center; 479 align-items: center;
367 } 480 }
368 .buy3_1{ 481 .buy3_1{
369 margin-right: 20px; 482 margin-right: 20px;
370 background: rgba(255,107,74,0.15); 483 background: rgba(255,107,74,0.15);
371 color: #FF6B4A ; 484 color: #FF6B4A ;
372 } 485 }
373 .buy3_2{ 486 .buy3_2{
374 background: #FF6B4A; 487 background: #FF6B4A;
375 color: #FFFFFF ; 488 color: #FFFFFF ;
376 } 489 }
377 } 490 }
378 .zhanwei{ 491 .zhanwei{
379 background: #F2F2F2; 492 background: #F2F2F2;
380 height: 120rpx; 493 height: 120rpx;
381 } 494 }
382 .button{ 495 .button{
src/pages/detailStandard/detailStandard_sun.vue
Diff comments   View file @d1ce60f
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="detail"> 3 <view class="detail">
4 <view class="detail1"><image v-bind:src="detail.image"></image></view> 4 <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
5 <view class="detail2"> 5 <view class="detail2">
6 <view class="detail2_name">{{detail.name}}</view> 6 <view class="detail2_name">{{details.data.p_name}}</view>
7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> 7 <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view>
8 <view class="detail2_price"><span>￥{{detail.price}}</span></view> 8 <view class="detail2_price">
9 <text>￥{{details.data.p_sale_price*count}}</text>
10 <view class="counter">
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12 <text>{{count}}</text>
13 <view class="btn" @click="counter(true)">+</view>
14 </view>
15 </view>
9 </view> 16 </view>
10 </view> 17 </view>
11 <view class="choose"> 18 <view class="choose">
12 <view class="colour"> 19 <view class="colour">
13 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view> 20 <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view>
14 <view class="colour_exp">*黑色 BHL192345</view> 21 <view class="colour_exp">*{{colour}}</view>
22 <view>
15 <view class="colour2"> 23 <view class="colour2">
16 <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> 24 <view
25 v-for="(items,index) in details.data.skuList"
26 :key="index"
27 @click="viewChoose(index)"
28 class="colour2_view"
29 v-bind:class="{'colour2_viewed': chooseNum == index}"
30 >
31 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
32 </view>
33 </view>
17 </view> 34 </view>
18 <hr/> 35 <hr/>
19 </view> 36 </view>
20 <view class="colour"> 37 <view class="colour">
21 <view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view> 38 <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view>
22 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> 39 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
40 <view>
23 <view class="jp_colour2"> 41 <view class="jp_colour2">
24 <view class="jp_colour" v-for="(colours) in jp" :key="colours.key"><image v-bind:src="colours.img"></image></view> 42 <view
43 v-for="(items,index) in jp_colour"
44 :key="index"
45 class="jp_colour2_view"
46 >
47 <image v-bind:src="items.img"></image>
48 </view>
49 </view>
25 </view> 50 </view>
26 <hr/> 51 <hr/>
27 </view> 52 </view>
28 <view class="split"> 53 <view class="colour">
29 <view class="split1"> 54 <view class="colour1">
30 <span>折射率</span> 55 <text>{{details.data.attrList[0].meta_name}}</text>
31 <span class="split1_span">注：折射率越高，镜片越薄，看起来更美观。</span> 56 <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text>
32 <image src="/static/img/detail/xiala2.png"></image> 57 <image src="/static/img/detail/xiala.png"></image>
33 </view> 58 </view>
34 <view class="split2"> 59 <view>
35 <view class="split2_number">0-300度</view> 60 <view class="split">
36 <view class="split2_choose"><view class="split2_tui">1.56（推荐）</view><view>1.60</view></view> 61 <view
62 v-for="(items,index) in details.data.attrList[0].attr"
63 :key="index"
64 >
65 <view
66 class="split_colour2"
67 @click="splitChoose(index)"
68 v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}"
69 >{{items.name}}</view>
70 </view>
37 </view> 71 </view>
38 <view class="split2">
39 <view class="split2_number">300-1000度</view>
40 <view class="split2_choose"><view class="split2_tui">1.71（推荐）</view>
41 <view>1.67</view><view>1.74</view><view>1.80</view><view>1.71</view></view>
42 </view> 72 </view>
43 <hr/> 73 <hr/>
44 </view> 74 </view>
45 <view class="size"> 75 <view class="size">
46 <view class="size1"> 76 <view class="size1">
47 <view class="size1_1">框架尺寸</view> 77 <view class="size1_1">框架尺寸</view>
48 <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view> 78 <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view>
49 </view> 79 </view>
50 <view class="size2"> 80 <view class="colour">
51 <view>通用</view> 81 <view class="colour_exp">*{{colour}}</view>
52 <view>定制</view>
53 </view> 82 </view>
54 <!-- uni-sliper插件 -->
55 <view class="D3_list"> 83 <view class="D3_list">
56 <view v-for="(item) in parameter" :key="item.key"> 84 <view>
57 <view><image class="D3_image" v-bind:src = "item.img"></image></view> 85 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
86 <view class="D3_list_jDu">
87 <view class="D3_list1">
88 <c-progress class="c-progress" :inner_widthProp="300"/>
89 <text>{{details.data.frame_width}}mm</text>
90 </view>
91 <view>{{parameter[0].standard}}</view>
92 </view>
93 </view>
94 <view>
95 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
96 <view class="D3_list_jDu">
97 <view class="D3_list1">
98 <c-progress class="c-progress" :inner_widthProp="190"/>
99 <view>{{details.data.glass_width}}mm</view>
100 </view>
101 <view>{{parameter[1].standard}}</view>
102 </view>
103 </view>
104 <view>
105 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
58 <view class="D3_list_jDu"> 106 <view class="D3_list_jDu">
59 <c-progress class="c-progress" 107 <view class="D3_list1">
60 :percent="item.percent" 108 <c-progress class="c-progress" :inner_widthProp="210"/>
61 :show-slider="false" :width="190" 109 <view>{{details.data.glass_height}}mm</view>
62 :standard="item.standard_l" 110 </view>
63 :stand_width="item.slength" 111 <view>{{parameter[2].standard}}</view>
64 progressColor="#FF6B4A" 112 </view>
65 /> 113 </view>
66 <view>{{item.standard}}</view> 114 <view>
115 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
116 <view class="D3_list_jDu">
117
118 <view class="D3_list1">
119 <c-progress class="c-progress" :inner_widthProp="160"/>
120 <view>{{details.data.nose_width}}mm</view>
121 </view>
122 <view>{{parameter[3].standard}}</view>
123 </view>
124 </view>
125 <view>
126 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
127 <view class="D3_list_jDu">
128 <view class="D3_list1">
129 <c-progress class="c-progress" :inner_widthProp="260"/>
130 <view>{{details.data.leg_long}}mm</view>
131 </view>
132 <view>{{parameter[4].standard}}</view>
67 </view> 133 </view>
68 </view> 134 </view>
69 <hr/> 135 <hr/>
70 </view> 136 </view>
71 </view> 137 </view>
72 <view class="part"> 138 <view class="part">
73 <view class="size1"> 139 <view class="size1">
74 <view class="size1_1">配件</view> 140 <view class="size1_1">配件</view>
75 <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view> 141 <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
76 </view> 142 </view>
77 <view class="colour_exp">*0290</view> 143 <view class="colour_exp">*0290</view>
78 <view class="part_som"> 144 <view class="part_som">
79 <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> 145 <view
146 v-for="(part) in part"
147 :key="part.key"
148 v-bind:class="{'size_viewed': part.is_actived}"
149 >
150 <image v-bind:src="part.img"></image>
151 </view>
80 </view> 152 </view>
81 </view> 153 </view>
82 </view> 154 </view>
83 <view class="buy"> 155 <view class="buy">
84 <view class="buy1">选了镜框，想选镜片？</view> 156 <view class="buy1">选了镜框，想选镜片？</view>
85 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> 157 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
86 <view class="buy3"> 158 <view class="buy3">
87 <view class="buy3_1">暂时不选</view> 159 <view class="buy3_1">暂时不选</view>
88 <view class="buy3_2">立即去选</view> 160 <view class="buy3_2" @click="popArgs">立即去选</view>
89 </view> 161 </view>
90 </view> 162 </view>
91 <view class="zhanwei"></view> 163 <view class="zhanwei"></view>
92 <view class="button"><view>立即结算</view></view> 164 <view class="button"><view>立即结算</view></view>
93 </view> 165 </view>
94 </template> 166 </template>
95 <script> 167 <script>
96 import CProgress from '../../components/UniSliper/UniSliper' 168 import CProgress from '../../components/UniSliper/UniSliper'
169 import store from '@/store'
97 170
98 export default { 171 export default {
99 components: { 172 components: {
100 CProgress 173 CProgress
101 }, 174 },
102 data(){ 175 data(){
103 return{ 176 return{
104 detail:{ 177 count: 1,
105 image:'/static/img/detail/sun_glass.png', 178 colour: '1.56非球面防蓝光_亚黑色',
106 name:'商品名称商品名称商品名称商品名称商品名称', 179 chooseNum : '',
107 price: 180, 180 isSplit: '' ,
108 number: 1, 181 parameter:[
109 }, 182 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
110 //框架颜色 183 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
111 colour:[ 184 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
112 {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, 185 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
113 {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, 186 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
114 {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
115 {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
116 {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
117 {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
118 {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
119 ], 187 ],
120 //镜片颜色 188 //镜片颜色
121 jp:[ 189 jp_colour:[
122 {key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'}, 190 {img:'/static/img/detail/Kuang/sun_jp.png'},
123 {key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'}, 191 {img:'/static/img/detail/Kuang/sun_jp.png'},
124 {key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'}, 192 {img:'/static/img/detail/Kuang/sun_jp.png'},
125 {key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'}, 193 {img:'/static/img/detail/Kuang/sun_jp.png'},
126 {key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'}, 194 {img:'/static/img/detail/Kuang/sun_jp.png'},
127 {key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'}, 195 {img:'/static/img/detail/Kuang/sun_jp.png'}
128 {key:6 ,img: '/static/img/detail/Kuang/sun_jp.png'},
129 {key:7 ,img: '/static/img/detail/Kuang/sun_jp.png'},
130 {key:8 ,img: '/static/img/detail/Kuang/sun_jp.png'}
131 ],
132 //规格参数
133 parameter:[
134 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
135 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
136 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
137 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
138 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
139 ], 196 ],
140 //配饰 197 //配饰
141 part:[ 198 part:[
142 {key: 0,img:'/static/img/detail/Kuang/g1.png'}, 199 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
143 {key: 1,img:'/static/img/detail/Kuang/g1.png'}, 200 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
144 {key: 2,img:'/static/img/detail/Kuang/g2.png'}, 201 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
145 {key: 3,img:'/static/img/detail/Kuang/g1.png'}, 202 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
146 {key: 4,img:'/static/img/detail/Kuang/g1.png'}, 203 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
147 {key: 5,img:'/static/img/detail/Kuang/g3.png'}, 204 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
148 {key: 6,img:'/static/img/detail/Kuang/g3.png'}, 205 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
149 {key: 7,img:'/static/img/detail/Kuang/g2.png'}, 206 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
150
151 ], 207 ],
208 //折射率
209 split:[
210 {number: 1.56},
211 {number: 1.60},
212 {number: 1.67},
213 {number: 1.71},
214 {number: 1.74}
215
216 ]
217 }
218 },
219
220 computed: {
221 details(){
222 return this.$store.state.detailStandard_k.list
223 },
224 },
225 onLoad:function(){
226 store.dispatch('detailStandard_k/fetch', {
227 uid: "1",
228 pid: "26",
229 });
230 console.log(this.$store.state.detailStandard_k.list.data+'ssswwwwwwwws');
231 console.log("ssssssssssssssssssssssssssss")
232 },
233 methods: {
234 counter(isadd){
235 if(isadd){
236 this.count++
237 }else{
238 this.count <= 1? this.disabled = true:this.count--
239 }
240 },
241 colourChange(index,e){
242 this.colour = e ; //颜色选择
243 // console.log(index,e);
244
245 },
246 viewChoose(index){
247 this.chooseNum = index
248 },
249 splitChoose(index){
250 this.isSplit = index
251 },
252 popArgs(){
253 uni.navigateTo({
254 url: '../detailsChoiceArgs/detailsChoiceArgs',
255 success: res => {},
256 fail: () => {},
257 complete: () => {}
258 });
152 } 259 }
153 } 260 }
261
154 } 262 }
155 </script> 263 </script>
156 264
157 <style lang="scss"> 265 <style lang="scss">
158 .container{ 266 .container{
159 min-height: 100vh; 267 min-height: 100vh;
160 background: #F2F2F2; 268 background: #F2F2F2;
161 padding-top: 10px; 269 padding-top: 10px;
162 box-sizing: border-box; 270 box-sizing: border-box;
163 } 271 }
164 hr{ 272 hr{
165 border: none; 273 border: none;
166 height: 1px; 274 height: 1px;
167 background: #F2F2F2; 275 background: #F2F2F2;
168 margin-top: 18px; 276 margin-top: 18px;
277 margin-bottom: 10px;
169 } 278 }
170 .detail{ 279 .detail{
171 height: 272rpx; 280 height: 272rpx;
172 background: #FFFFFF; 281 background: #FFFFFF;
173 border-radius: 8px; 282 border-radius: 8px;
174 padding: 16px; 283 padding: 16px;
175 box-sizing: border-box; 284 box-sizing: border-box;
176 display: flex; 285 display: flex;
177 justify-content: space-between; 286 justify-content: space-between;
178 align-items: center; 287 align-items: center;
179 } 288 }
180 .detail1{ 289 .detail1{
181 height: 188rpx; 290 height: 178rpx;
182 width: 188rpx; 291 width: 188rpx;
183 image{ 292 image{
184 width: 100%; 293 width: 100%;
185 height: 100%; 294 height: 100%;
186 border-radius: 8px; 295 border-radius: 8px;
187 } 296 }
188 } 297 }
189 .detail2{ 298 .detail2{
190 width: 68%; 299 width: 68%;
191 view{ 300 view{
192 margin-bottom: 8px; 301 margin-bottom: 6px;
193 font-family: PingFangSC-Regular; 302 font-family: PingFangSC-Regular;
194 } 303 }
195 .detail2_name{ 304 .detail2_name{
196 font-size: 14px; 305 font-size: 14px;
197 color: #333333; 306 color: #333333;
198 letter-spacing: -0.26px; 307 letter-spacing: -0.26px;
199 line-height: 18px; 308 line-height: 18px;
309 overflow:hidden;
310 text-overflow:ellipsis;
311 display:-webkit-box;
312 -webkit-box-orient:vertical;
313 -webkit-line-clamp:2;
200 } 314 }
201 .detail2_tui{ 315 .detail2_tui{
202 font-size: 10px; 316 font-size: 10px;
203 color: #999999; 317 color: #999999;
204 letter-spacing: -0.19px; 318 letter-spacing: -0.19px;
205 span{ 319 span{
206 margin-right: 10px; 320 margin-right: 10px;
207 } 321 }
208 } 322 }
209 .detail2_price{ 323 .detail2_price{
210 font-size: 14px; 324 font-size: 14px;
211 color: #FF6B4A; 325 color: #FF6B4A;
212 letter-spacing: -0.26px; 326 letter-spacing: -0.26px;
213 } 327 }
214 } 328 }
329 .counter{
330 display: flex;
331 flex-direction: row;
332 justify-content: space-between;
333 font-size: 28rpx;
334 color: #333333;
335 width: 122rpx;
336 float: right;
337 .btn{
338 display: flex;
339 justify-content: center;
340 line-height: 32rpx;
341 height: 32rpx;
342 width: 32rpx;
343 background-color: #F2F2F2;
344 color: #CFCFCF;
345 }
346 }
215 .choose{ 347 .choose{
216 background: #FFFFFF; 348 background: #FFFFFF;
217 padding: 16px; 349 padding: 16px;
218 box-sizing: border-box; 350 box-sizing: border-box;
219 margin-top: 10px; 351 margin-top: 10px;
220 border-radius: 8px; 352 border-radius: 8px;
221 .colour1{ 353 .colour1{
222 span{ 354 span{
223 font-family: PingFangSC-Medium; 355 font-family: PingFangSC-Medium;
224 font-size: 16px; 356 font-size: 16px;
225 color: #333333; 357 color: #333333;
226 letter-spacing: -0.3px; 358 letter-spacing: -0.3px;
227 text-align: justify; 359 text-align: justify;
228 line-height: 24px; 360 line-height: 24px;
229 font-weight: bold; 361 font-weight: bold;
230 } 362 }
231 image{ 363 image{
232 float: right; 364 float: right;
233 width: 40rpx; 365 width: 40rpx;
234 height: 36rpx; 366 height: 36rpx;
235 } 367 }
368 .colour1_span2{
369 font-family: PingFangSC-Regular;
370 font-size: 12px;
371 color: #666666;
372 margin-left: 10px;
373 font-weight: normal
374 }
236 } 375 }
237 .colour_exp{ 376 .colour_exp{
238 font-family: PingFangSC-Regular; 377 font-family: PingFangSC-Regular;
239 font-size: 12px; 378 font-size: 12px;
240 color: #666666; 379 color: #666666;
241 letter-spacing: 0; 380 letter-spacing: 0;
242 margin-top: 10px; 381 margin-top: 10px;
243 margin-bottom: 10px; 382 margin-bottom: 10px;
244 } 383 }
245 .colour2{ 384 .colour2{
246 display: grid; 385 display: grid;
247 grid-template-columns: repeat(5, 17%); 386 grid-template-columns: repeat(5, 17%);
248 justify-content: space-between ; 387 justify-content: space-between ;
249 grid-row-gap: 10px; 388 grid-row-gap: 10px;
250 margin-bottom: 14px; 389 margin-bottom: 14px;
251 view{ 390 .colour2_view{
252 border: 1px solid #F2F2F2; 391 border: 1px solid #F2F2F2;
253 image{ 392 image{
254 width: 100%; 393 width: 100rpx;
255 height: 100%; 394 height: 60rpx;
256 } 395 }
257 } 396 }
258 view:hover{ 397 .colour2_viewed{
259 border: 1px solid #FF6B4A; 398 border: 1px solid #FF6B4A;
399 image{
400 width: 100rpx;
401 height: 60rpx;
402 }
260 } 403 }
261 } 404 }
262 } 405 }
263 .jp_colour2{ 406 .jp_colour2{
264 display: grid; 407 display: grid;
265 grid-template-columns: repeat(6, 12%); 408 grid-template-columns: repeat(5, 13%);
266 grid-row-gap: 10px; 409 justify-content: start ;
267 grid-column-gap: 6px; 410 grid-column-gap: 10px;
268 margin-bottom: 14px; 411 grid-row-gap: 10px;
269 view{ 412 margin-bottom: 14px;
413 .jp_colour2_view{
270 border: 1px solid #F2F2F2; 414 border: 1px solid #F2F2F2;
271 height: 80rpx;
272 image{ 415 image{
273 width: 100%; 416 width: 80rpx;
274 height: 100%; 417 height: 80rpx;
275 } 418 }
276 } 419 }
277 view:hover{
278 border: 1px solid #FF6B4A;
279 }
280 }
281 .split1{
282 span{
283 font-family: PingFangSC-Medium;
284 font-size: 16px;
285 color: #333333;
286 letter-spacing: -0.3px;
287 text-align: justify;
288 line-height: 24px;
289 font-weight: bold;
290 margin-right:8px;
291 }
292 .split1_span{
293 font-family: PingFangSC-Regular;
294 font-size: 10px;
295 color: #999999;
296 letter-spacing: -0.3px;
297 font-weight:normal;
298 }
299 image{
300 float: right;
301 width: 40rpx;
302 height: 36rpx;
303 }
304 } 420 }
305 .split2{ 421 .split{
306 margin-bottom: 12px; 422 display: grid;
307 .split2_number{ 423 grid-template-columns: repeat(2, 45%);
424 grid-column-gap: 10px;
425 grid-row-gap: 10px;
426 margin-top: 10px ;
427 .split_colour2{
428 display: flex;
429 justify-content: center;
430 align-items: center;
431 width: 300rpx;
432 height: 60rpx;
433 background: #F2F2F2;
434 border-radius: 2px;
308 font-family: PingFangSC-Regular; 435 font-family: PingFangSC-Regular;
309 font-size: 10px; 436 font-size: 12px;
310 color: #999999; 437 color: #666666;
311 letter-spacing: -0.19px; 438 letter-spacing: 0;
312 margin-bottom: 6px; 439 text-align: center;
313 } 440 }
314 .split2_choose{ 441 .split_colour2_actived{
315 display: flex; 442 background: rgba(255,107,74,0.15);
316 view{ 443 color: #FF6B4A;
317 display: flex;
318 justify-content: center;
319 align-items: center;
320 font-family: PingFangSC-Regular;
321 font-size: 12px;
322 color: #666666;
323 background: #F2F2F2;
324 width: 100rpx;
325 height: 60rpx;
326 border-radius: 2px;
327 margin-right: 10px;
328 }
329 view:hover{
330 color: #FF6B4A;
331 background: rgba(255,107,74,0.15);
332 }
333 .split2_tui{
334 width: 186rpx;
335 height: 60rpx;
336 }
337 } 444 }
338
339 } 445 }
340 .size,.part{ 446 .size,.part{
341 margin-top:14px; 447 margin-top:14px;
342 .size1{ 448 .size1{
343 display: flex; 449 display: flex;
344 justify-content: space-between; 450 justify-content: space-between;
345 margin-bottom: 10px; 451 margin-bottom: 10px;
346 .size1_1{ 452 .size1_1{
347 font-weight: bold; 453 font-weight: bold;
348 font-family: PingFangSC-Medium; 454 font-family: PingFangSC-Medium;
349 font-size: 16px; 455 font-size: 16px;
350 color: #333333; 456 color: #333333;
351 letter-spacing: -0.3px; 457 letter-spacing: -0.3px;
352 line-height: 24px; 458 line-height: 24px;
353 } 459 }
354 view{ 460 view{
355 span{ 461 span{
356 font-family: PingFangSC-Regular; 462 font-family: PingFangSC-Regular;
357 font-size: 14px; 463 font-size: 14px;
358 color: #FF6B4A; 464 color: #FF6B4A;
359 letter-spacing: -0.26px; 465 letter-spacing: -0.26px;
360 margin-right: 12px; 466 margin-right: 12px;
361 } 467 }
362 image{ 468 image{
363 width: 40rpx; 469 width: 40rpx;
364 height: 36rpx; 470 height: 36rpx;
365 } 471 }
366 } 472 }
367 } 473 }
368 .size2{ 474 .size2{
369 view{ 475 view{
370 display: inline-flex; 476 display: inline-flex;
371 align-items: center; 477 align-items: center;
372 justify-content: center; //字体居中 478 justify-content: center; //字体居中
373 margin-right: 12px; 479 margin-right: 12px;
374 margin-bottom: 20px; 480 margin-bottom: 20px;
375 width: 136rpx; 481 width: 136rpx;
376 height: 60rpx; 482 height: 60rpx;
377 background: #F2F2F2; 483 background: #F2F2F2;
378 border-radius: 2px; 484 border-radius: 2px;
379 font-family: PingFangSC-Regular; 485 font-family: PingFangSC-Regular;
380 font-size: 12px; 486 font-size: 12px;
381 color: #666666; 487 color: #666666;
382 } 488 }
383 view:hover{ 489 view:hover{
384 color: #FF6B4A; 490 color: #FF6B4A;
385 background: rgba(255,107,74,0.15); 491 background: rgba(255,107,74,0.15);
386 } 492 }
387 } 493 }
388 .D3_list{ 494 .D3_list{
389 margin-bottom: 4px; 495 margin-bottom: 4px;
390 } 496 }
391 .D3_list>view{ 497 .D3_list>view{
392 display: flex; 498 display: flex;
393 align-content: center; 499 align-content: center;
394 margin-bottom: 10px; 500 margin-bottom: 10px;
395 view{ 501 view{
396 margin-right: 10px; 502 margin-right: 10px;
397 } 503 }
398 } 504 }
399 .D3_list image{ 505 .D3_list image{
400 width: 50px; 506 width: 50px;
401 height: 25px; 507 height: 25px;
402 margin-right: 6px; 508 margin-right: 6px;
403 } 509 }
404 .D3_list span{ 510 .D3_list span{
405 margin-left: 6px; 511 margin-left: 6px;
406 margin-right: 5px; 512 margin-right: 5px;
407 font-family: 'PingFangSC-Regular'; 513 font-family: 'PingFangSC-Regular';
408 } 514 }
409 .D3_list_jDu{ 515 .D3_list_jDu{
410 view{ 516 view{
411 font-family: PingFangSC-Regular; 517 font-family: PingFangSC-Regular;
412 font-size: 10px; 518 font-size: 10px;
413 color: #999999; 519 color: #999999;
414 letter-spacing: -0.19px; 520 letter-spacing: -0.19px;
415 } 521 }
522 .D3_list1{
523 display: flex;
524 }
416 } 525 }
417 } 526 }
418 .part{ 527 .part{
419 .part_som{ 528 .part_som{
420 display: grid; 529 display: grid;
421 justify-content: space-between; 530 justify-content: space-between;
422 grid-template-columns: repeat(4, 22%); 531 grid-template-columns: repeat(4, 22%);
423 grid-row-gap: 12px; 532 grid-row-gap: 12px;
424 margin-bottom: 14px; 533 margin-bottom: 14px;
425 view{ 534 view{
426 border: 1px solid #F2F2F2; 535 border: 1px solid #F2F2F2;
427 height: 72rpx; 536 height: 72rpx;
428 image{ 537 image{
429 width: 100%; 538 width: 100%;
430 height: 100%; 539 height: 100%;
431 } 540 }
432 } 541 }
433 view:hover{ 542 .size_viewed{
434 border: 1px solid #FF6B4A; 543 border: 1px solid #FF6B4A;
544 height: 72rpx;
545 image{
546 width: 100%;
547 height: 100%;
548 }
src/pages/frameDetail/frameDetail.vue
View file @5b51350
1 <template> File was deleted
2 <view class="container">
3 <view class="D1">
4 <!-- 轮播图 -->
5 <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
6 <swiper-item v-for="(item) in infos" :key="item.goods_id">
7 <image :src="item.img" mode="scaleToFill"></image>
8 </swiper-item>
9 </swiper>
10 <view class="D1_price">￥{{price}}</view>
11 <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
12 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
13 </view>
14 <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4">
15 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
16 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
17 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
18 </view>
19 <view class="D2" v-if="updateGoodType == 1">
20 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
21 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
22 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
23 </view>
24 <view class="D2" v-if="updateGoodType == 3">
25 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
26 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
27 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
28 </view>
29
30 <view class="D3">
31 <view class="screenBar">
32 <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" >
33 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
34 </view>
35 </view>
36 <view class="screen-item " v-if="current ===0">
37 <view class="D3_list">
38 <view v-for="(item) in parameter" :key="item.key">
39 <image class="D3_image" v-bind:src = "item.img"></image>
40 <span>{{item.standard}}</span>
41 <span>{{item.slength}}</span>
42 </view>
43 </view>
44 </view >
45 <view class="screen-item " v-if="current ===1">
46 <view class="D3_list">
47 <view>主体</view>
48 <view>商品产地：韩国</view>
49 <view>包装清单：彩色隐形 * 1</view>
50 </view>
51 </view >
52 <view class="screen-item " v-if="current ===2">
53 <view class="customerService">
54 <view class="serviceItem" >
55 <view class="title">
56 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
57 <text class="titleText">卖家服务</text>
58 </view>
59 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
60 </view>
61 <view class="serviceItem" >
62 <view class="title">
63 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
64 <text class="titleText">平台承诺</text>
65 </view>
66 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
67 </view>
68 <view class="serviceItem">
69 <view class="title">
70 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
71 <text class="titleText">正品保证</text>
72 </view>
73 <view class="itemContent">向您保证所售商品均为正品行货</view>
74 </view>
75 <view class="serviceItem2">
76 <view class="title">
77 <text class="titleText">权利申明</text>
78 </view>
79 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
80 </view>
81 <view class="serviceItem2">
82 <view class="title">
83 <text class="titleText">价格保证</text>
84 </view>
85 <view class="itemContent">
86 <view class="itemContent-child">
87 <text class="contentTitle">平台价:</text>
88 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
89 </view>
90 <view class="itemContent-child">
91 <text class="contentTitle">划线价:</text>
92 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
93 </view>
94 <view class="itemContent-child">
95 <text class="contentTitle">平折扣:</text>
96 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
97 </view>
98 <view class="itemContent-child">
99 <text class="contentTitle">异常问题:</text>
100 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
101 </view>
102
103 </view>
104 </view>
105 </view>
106 </view >
107 </view>
108 <view class="D4" v-if="current !==2">
109 <view class="D4_esvalue">
110 <view>{{esvalue}}</view>
111 <view class="D4_2">
112 <view class="star" v-for="o in starCount" :key="o">
113 <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image>
114 </view>
115 </view>
116 </view>
117 <view class="D4_list">
118 <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
119 </view>
120 </view>
121 <view class="D5" v-if="current !==2">
122 <view class="D5_fixed1">
123 <image src="/static/img/detail/hr.png"></image>
124 <view>商品详细</view>
125 <image src="/static/img/detail/hr.png"></image>
126 </view>
127 <view class="D5_all">
128 <image v-bind:src="imgAll"></image>
129 </view>
130 <view class="D5_photoes">
131 <view class="D5_photoes1">
132 <view v-for="(photoes) in photoes" :key="photoes.value">
133 <image v-bind:src = "photoes.img"></image>
134 <view>{{photoes.value}}</view>
135 </view>
136 </view>
137 <view class="D5_logo1">帕森防蓝光镜片</view>
138 <view class="D5_logo2">健康护眼，我们是认真的！</view>
139 <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
140 </view>
141 </view>
142 <view class="D6" v-if="current !==2">
143 <view class="D6_v1">CHARM DETAIL</view>
144 <view class="D6_v2">细节展示</view>
145 <view ><image v-bind:src="imgDetail"></image></view>
146 <view>........................................................................</view>
147 <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
148 </view>
149
150 <!-- 底部菜单 -->
151 <view class="botton">
152 <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
153 <view class="botton_2">
154 <view class="botton_input">加入购物车</view>
155 <view class="botton_now" @click="goPerchase">立即购买</view>
156 </view>
157 </view>
158 </view>
159 </template>
160
161 <script>
162 import store from '@/store';
163 export default {
164 data(){
165 return {
166 name:'商品名称',
167 goodType:2,
168 price: 120,
169 number: 391,
170 screenItems: [
171 {current:0,text:'商品保障'},
172 {current:1,text:'规格参数'},
173 {current:2,text:'售后保障'},
174 ],
175 current: 0,
176 starCount:5,
177 infos: [
178 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
179 { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
180 { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
181 { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
182 ],
183 parameter:[
184 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
185 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
186 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
187 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
188 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
189 {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
190 ],
191 assess:[
192 {key: 0, Iassess: '价格实惠'},
193 {key: 1, Iassess: '美观大方'},
194 {key: 2, Iassess: '易搭配'}
195 ],
196 esvalue:'宝贝好评率 100%',
197 introduction:{
198 material:'钛合金',
199 func:'抗疲劳/防辐射',
200 rate: 1.6
201 },
202 imgAll:'/static/img/detail/d8.png' ,
203 photoes:[
204 {value:'日常办公', img:'/static/img/detail/d9.png'},
205 {value:'上网', img:'/static/img/detail/d10.png'},
206 {value:'追剧', img:'/static/img/detail/d11.png'},
207 {value:'玩游戏', img:'/static/img/detail/d12.png'},
208 ],
209 imgDetail:'/static/img/detail/d13.png',
210 imgShop:{
211 img:'/static/tab-cart.png',
212 IsShown: false
213 }
214 }
215 },
216 onLoad:function(option){
217 this.goodType = option.goodType
218 // console.log(this.updateGoodType)
219 store.dispatch('read/fetch');
220 },
221 computed:{
222 updateGoodType(){
223 return this.goodType
224 },
225 goodInfo() {
226 console.log(this.$store.state.read.goodInfo)
227 return this.$store.state.read.goodInfo;
228 },
229 },
230 methods:{
231 goPerchase(){
232 switch(this.updateGoodType){
233 case '1':
234 uni.navigateTo({
235 url: '../detailsChoiceArgs/detailsChoiceArgs',
236 success: res => {},
237 fail: () => {},
238 complete: () => {}
239 });
240 break;
241 case '2':
242 uni.navigateTo({
243 url: `../detailStandard/detailStandard_k`,
244 success: res => {},
245 fail: () => {},
246 complete: () => {}
247 });
248 break;
249 case '3':
250 uni.navigateTo({
251 url: `../purchaseLenses/purchaseLenses`,
252 success: res => {},
253 fail: () => {},
254 complete: () => {}
255 });
256 break;
257 case '4':
258 uni.navigateTo({
259 url: `../detailStandard/detailStandard_sun`,
260 success: res => {},
261 fail: () => {},
262 complete: () => {}
263 });
264 break;
265 default :
266 break
267 }
268 },
269 tabChange(e) {
270 if (this.current !== e) {
271 this.current = e;
272 }
273 }
274 }
275 }
276 </script>
277 <style lang='scss'>
278 .container{
279 background-color:#f8f8f8 ;
280 }
281 .D1,.D2,.D3,.D4,.D6{
282 background: #ffffff;
283 margin-bottom: 10px;
284 padding:8px 20px 8px 20px;
285 box-sizing: border-box;
286 .swiperImage {
287 width: 684rpx;
288 height: 512rpx;
289 image {
290 width: 100%;
291 height: 100%;
292 border-radius: 16rpx;
293 }
294 }
295 }
296 .D5{
297 background: #ffffff;
298 padding:8px 20px 8px 20px;
299 box-sizing: border-box;
300 }
301 .swiperImage{
302 width: 100%;
303 height: 560rpx;
304 .swiper-item{
305 width: 100%;
306 image{
307 width: 100%;
308 }
309 }
310 }
311 .D1{
312 .D1_price{
313 color: #EB5D3B;
314 font-size: 18px;
315 margin-top: 5px;
316 font-family: 'PingFangSC-Semibold';
317 }
318 .D1_name{
319 font-size: 16px;
320 font-family: 'PingFangSC-Semibold';
321 margin-top: 5px;
322 display: flex;
323 justify-content: space-between;
324 .D1_name1{
325 font-weight: bold;
326 font-size: 16px;
327 color: #333333;
328 }
329 .D1_number{
330 color: #999999 ;
331 font-size: 14px;
332 font-family: 'PingFangSC-Regular';
333 }
334 }
335 .D1_spans{
336 font-size: 10px;
337 color:#999999;
338 margin-top: 5px;
339 span{
340 height: 14px;
341 margin-right: 10px;
342 }
343 }
344
345 }
346 .D2{
347 font-size: 14px;
348 font-family: 'PingFangSC-Regular';
349 view{
350 height: 24px;
351 }
352 .D2_span1{
353 color: #999999;
354 }
355 .D2_span2{
356 color: #333333;
357 }
358 }
359 .D3{
360 .screenBar{
361 width: 670rpx;
362 margin-top: 20rpx;
363 margin-bottom: 24rpx;
364 display: flex;
365 flex-direction: row;
366 justify-content: space-between;
367 align-items: center;
368 font-size: 14px;
369 color: #333333;
370 transition:all 0.2s;
371 }
372 .screen-item{
373 font-size: 32rpx;
374 color: #333333;
375 display: flex;
376 transition:all 0.2s;
377 .D3_list{
378 margin-bottom: 4px;
379 }
380 .D3_list view{
381 display: flex;
382 align-content: center;
383 font-size: 14px;
384 color: #333333;
385 }
386 .D3_list image{
387 width: 50px;
388 height: 25px;
389 margin-right: 6px;
390 }
391 .D3_list span{
392 margin-left: 6px;
393 margin-right: 5px;
394 font-family: 'PingFangSC-Regular';
395 }
396 }
397 .active{
398 border-bottom: 4rpx solid #FF6B4A;
399 }
400 .customerService{
401 margin-bottom: 90rpx;
402 .serviceItem{
403 margin-bottom: 32rpx;
404 .title{
405 display: flex;flex-direction: row;
406 align-items: center;
407 .titleText{
408 font-size: 14px;
409 color: #333333;
410 margin-bottom: 12rpx;
411 }
412 }
413 .itemContent{
414 font-size: 14px;
415 color: #999999;
416 margin-left: 18rpx;
417 }
418 }
419 .serviceItem2{
420 margin-left: 18rpx;
421 margin-bottom: 32rpx;
422 .titleText{
423 font-size: 14px;
424 color: #FF6B4A;
425 }
426 .itemContent{
427 font-size: 14px;
428 color: #999999;
429 .itemContent-child{
430 margin-bottom: 40rpx;
431 .contentTitle{
432 border-bottom: 1px solid #FF6B4A;
433 }
434 }
435 }
436 }
437 }
438 }
439 .D4{
440 .D4_esvalue{
441 font-size: 14px;
442 color: #333333;
443 display: flex;
444 justify-content: space-between;
445 margin-bottom: 10px;
446 .D4_2{
447 width: 90px;
448 display: flex;
449 align-items: center;
450 justify-content: space-between;
451 }
452 }
453 .D4_esvalue view{
454 font-size: 14px;
455 color: #333333;
456 font-weight: bold;
457 }
458 .D4_list view{
459 display: inline-block;
460 font-size: 12px;
461 text-align: center;
462 margin-right: 12px;
463 width: 90px;
464 height: 24px;
465 line-height: 24px;
466 background: #F2F2F2;
467 color: #666666 ;
468 }
469 }
470 .D5{
471 .D5_fixed1{
472 display: flex;
473 justify-content: space-between;
474 align-content: center;
475 margin-bottom: 12px;
476 view{
477 font-size: 14px;
478 color: #333333;
479 font-weight: bold;
480 font-family: 'PingFangSC-Medium';
481 line-height: 24px;
482 }
483 image{
484 width: 240rpx;
485 height: 3px;
486 margin-top: 10px;
487 }
488 }
489 .D5_all {
490 width: 100%;
491 height: 380px;
492 margin-bottom: 30px;
493 font-family: 'PingFangSC-Regular';
494 border: #999999 solid 1.5px;
495 image{
496 width: 100%;
497 height: 380px;
498 }}
499 .D5_photoes1{
500 display: grid;
501 grid-template-columns: 48% 48%;
502 grid-row-gap: 10px;
503 grid-column-gap: 4%;
504 image{
505 width: 100%;
506 height: 70px;
507 }
508 view{
509 width: 100%;
510 font-size: 14px;
511 text-align: center;
512 background: #949494;
513 font-family: 'PingFangSC-Regular';
514 color: #ffffff;
515 view{
516 height: 24px;
517 line-height: 24px;
518 }
519 }
520 }
521 .D5_logo1,.D5_logo2{
522 text-align: center;
523 }
524 .D5_logo1{
525 margin-top: 40px;
526 font-size: 24px;
527 font-weight: bold;
528 font-family: 'PingFangSC-Semibold';
529 }
530 .D5_logo2{
531 font-size: 12px;
532 }
533 .D5_logo3{
534 width: 100%;
535 text-align: center;
536 image{
537 width: 50px;
538 height: 24px;
539 }
540 }
541 }
542 .D6{
543 width: 100%;
544 height: 430px;
545 background: #F9F6ED;
546 margin-bottom: 74px;
547 view{
548 text-align: center;
549 }
550 .D6_v1{
551 font-weight: bold;
552 }
553 .D6_v2{
554 font-size: 14px;
555 margin-bottom: 30px;
556 }
557 .D6_v5{
558 .D6_v5_s1{
559 font-weight: bold;
560 }
561 .D6_v5_s2{
562 font-size: 14px;
563 }
564 }
565 }
566 .botton{
567 position: fixed;
568 bottom: 0;
569 height: 74px;
570 width: 100%;
571 background: #FFFFFF;
572 padding: 20px 20px 8px 20px;
573 font-family: 'PingFangSC-Regular';
574 box-sizing: border-box;
575 display: flex;
576 justify-content: space-between;
577 align-content: center;
578 .botton_1{
579 width: 20%;
580 height: 100%;
581 text-align: center;
582 color: #989898;
583 }
584 image{
585 width: 60%;
586 height: 30px;
587 }
588 .botton_image{
589 font-size: 12px;
590 text-align: center;
591 }
592 .botton_2{
593 width: 74%;
594 height: 86%;
595 display: grid;
596 grid-template-columns: 50% 50%;
597 }
598 .botton_input{
599 display: inline-flex;
600 align-items: center;
601 justify-content: space-around;
602 background: #FFF0EC;
603 font-size: 16px;
604 color: #FF6B4A;
605 border-radius: 20px 0 0 20px;
606 }
607 .botton_now{
608 display: inline-flex;
609 align-items: center;
610 justify-content: space-around;
611 background: #FF6B4A;
612 font-size: 16px;
613 color: #FFFFFF;
614 border-radius:0 20px 20px 0;
615 }
616 }
617 </style>
src/store/modules/detailStandard_k.js
Diff comments   View file @d1ce60f
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 detailStandardList 5 detailStandardUrl
6 } = urlAlias 6 } = urlAlias
7 7
8 const state = { 8 const state = {
9 list:[], 9 list:[],
10 }; 10 };
11 11
12 const mutations = { 12 const mutations = {
13 INIT: (state, detailStandardList) => { 13 INIT: (state, data) => {
14 state.detailStandardList = detailStandardList; 14 state.list = data;
15 }, 15 },
16 }; 16 };
17 17
18 const actions = { 18 const actions = {
19 getList({ commit }, param){ 19 fetch({ commit }, param) {
20 request({ 20 request({
21 detailStandardList, 21 url: detailStandardUrl,
22 success: (res) => { 22 data: param,
23 23 success: (res) => {
24 commit('INIT', res.data.data) 24 commit('INIT', res.data);
25 console,log('success') 25 },
26 }, 26 fail: (res) => {
27 fail: (res) => { 27 console.log(" detail fail status === > ", res);
28 console.log("detail status === > ", res); 28 },
29 }, 29 complete: (res) => {
30 complete: (res) => { 30 console.log(" detail complete status === > ", res);
31 console.log("detail compete status === > ", res); 31 },
32 }, 32 })
33 })
34 } 33 }
35 } 34 }
36 35
37 export default { 36 export default {
38 namespaced: true, 37 namespaced: true,
39 state, 38 state,
40 mutations, 39 mutations,
41 actions, 40 actions,
42 } 41 }
src/store/modules/myOrder.js
Diff comments   View file @d1ce60f
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 myOrderList 5 myOrderList
6 } = urlAlias; 6 } = urlAlias;
7 7
8 // const data = { 8 // const data = {
9 // data: [ 9 // data: [
10 // { 10 // {
11 // finished_time: null, 11 // finished_time: null,
12 // is_refound: "0", 12 // is_refound: "0",
13 // mch_id: "1436019502", 13 // mch_id: "1436019502",
14 // money_of_dcw: "0", 14 // money_of_dcw: "0",
15 // money_of_partner: "0", 15 // money_of_partner: "0",
16 // money_of_shop: "0", 16 // money_of_shop: "0",
17 // orderJudge: false, 17 // orderJudge: false,
18 // order_info: { 18 // order_info: {
19 // address:{ 19 // address:{
20 // cityName: "镇江市", 20 // cityName: "镇江市",
21 // countyName: "丹阳市", 21 // countyName: "丹阳市",
22 // detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", 22 // detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司",
23 // errMsg: "chooseAddress:ok", 23 // errMsg: "chooseAddress:ok",
24 // nationalCode: "321181", 24 // nationalCode: "321181",
25 // postalCode: "212300", 25 // postalCode: "212300",
26 // provinceName: "江苏省", 26 // provinceName: "江苏省",
27 // telNumber: "15896379277", 27 // telNumber: "15896379277",
28 // userName: "点餐汪客服", 28 // userName: "点餐汪客服",
29 // }, 29 // },
30 // cartinfo:['11', '12'], 30 // cartinfo:['11', '12'],
31 // keyname: "1_1587129366", 31 // keyname: "1_1587129366",
32 // lefttime: 179995, 32 // lefttime: 179995,
33 // list:[ 33 // list:[
34 // { 34 // {
35 // cart_id: "11", 35 // cart_id: "11",
36 // imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", 36 // imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg",
37 // img_index_url: null, 37 // img_index_url: null,
38 // memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701", 38 // memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701",
39 // mp_id: "1", 39 // mp_id: "1",
40 // nowPrice: 100, 40 // nowPrice: 100,
41 // num: "2", 41 // num: "2",
42 // oldPrice: "0", 42 // oldPrice: "0",
43 // p_discount: "1", 43 // p_discount: "1",
44 // p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", 44 // p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流",
45 // p_root_index: "1", 45 // p_root_index: "1",
46 // p_sale_price: "0", 46 // p_sale_price: "0",
47 // peopleName: "me", 47 // peopleName: "me",
48 // pics: '', 48 // pics: '',
49 // pid: "4", 49 // pid: "4",
50 // sk_id: "38", 50 // sk_id: "38",
51 // }, 51 // },
52 // ], 52 // ],
53 // orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品", 53 // orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品",
54 // total_fee: 100 54 // total_fee: 100
55 // }, 55 // },
56 // partner_uid: "0", 56 // partner_uid: "0",
57 // pay_cate: "2020", 57 // pay_cate: "2020",
58 // pay_id: "3", 58 // pay_id: "3",
59 // pay_time: "2020-04-17 21:16:12", 59 // pay_time: "2020-04-17 21:16:12",
60 // pay_wood_desc: "在【非常戴镜】的微信付款凭证", 60 // pay_wood_desc: "在【非常戴镜】的微信付款凭证",
61 // pay_wood_id: "fcdj-1-1_1587129366", 61 // pay_wood_id: "fcdj-1-1_1587129366",
62 // prepay_id: "wx172116124528226bf1a8adad1662456500", 62 // prepay_id: "wx172116124528226bf1a8adad1662456500",
63 // re_check_staus: "0", 63 // re_check_staus: "0",
64 // shopid: "0", 64 // shopid: "0",
65 // split_userid: "0", 65 // split_userid: "0",
66 // status: "1", 66 // status: "1",
67 // total_fee: "100", 67 // total_fee: "100",
68 // uid: "1", 68 // uid: "1",
69 // } 69 // }
70 // ], 70 // ],
71 // msg: "订单列表", 71 // msg: "订单列表",
72 // status: 0, 72 // status: 0,
73 // } 73 // }
74 74
75 const state = { 75 const state = {
76 orderList: [], 76 orderList: [],
77 }; 77 };
78 78
79 const mutations = { 79 const mutations = {
80 INIT: (state, data) => { 80 INIT: (state, data) => {
81 state.orderList = data; 81 state.orderList = data;
82 }, 82 },
83 }; 83 };
84 84
85 const actions = { 85 const actions = {
86 getList({ commit }, param) { 86 getList({ commit }, param) {
87 request({ 87 request({
88 url: myOrderList, 88 url: myOrderList,
89 data: param, 89 data: param,
90 success: (res) => { 90 success: (res) => {
91 // console.log(res.data); 91 // console.log(res.data);
92 commit("INIT", res.data.data); 92 commit("INIT", res.data.data);
93 }, 93 },
94 }) 94 })
95 } 95 }
96 } 96 }
97 97
98 export default { 98 export default {
99 namespaced: true, 99 namespaced: true,
100 state, 100 state,
101 mutations, 101 mutations,
102 actions, 102 actions,
103 } 103 }
src/store/modules/test.js
Diff comments   View file @d1ce60f
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 shopList 5 shopList
6 } = urlAlias; 6 } = urlAlias;
7 7
8 const state = { 8 const state = {
9 list: [], 9 list: [],
10 }; 10 };
11 11
12 const mutations = { 12 const mutations = {
13 INIT: (state, list) => { 13 INIT: (state, data) => {
14 state.list = list; 14 state.list = data;
15 }, 15 },
16 }; 16 };
17 17
18 const actions = { 18 const actions = {
19 fetch({ commit }, param) { 19 fetch({ commit }, param) {
20 request({ 20 request({
21 url: shopList, 21 url: shopList,
22 success: (res) => { 22 success: (res) => {
23 commit('INIT', res.data.data) 23 commit('INIT', res.data.data)
24 }, 24 },
25 fail: (res) => { 25 fail: (res) => {
26 console.log("fail status === > ", res); 26 console.log("fail status === > ", res);
27 }, 27 },
28 complete: (res) => { 28 complete: (res) => {
29 console.log("complete status === > ", res); 29 console.log("complete status === > ", res);
30 }, 30 },
31 }) 31 })
32 // uni 32 // uni
33 // .request({ 33 // .request({
34 // url: "https://api.glass.xiuyetang.com/app/prod/list", 34 // url: "https://api.glass.xiuyetang.com/app/prod/list",
35 // method: "post", 35 // method: "post",
36 // data: {}, 36 // data: {},
37 // header: { 37 // header: {
38 // "Content-Type": "application/x-www-form-urlencoded", 38 // "Content-Type": "application/x-www-form-urlencoded",
39 // }, 39 // },
40 // timeout: 3000, 40 // timeout: 3000,
41 // withCredentials: false, 41 // withCredentials: false,
42 // success: (res) => { 42 // success: (res) => {
43 // commit('INIT', res.data.data) 43 // commit('INIT', res.data.data)
44 // }, 44 // },
45 // fail: (res) => { 45 // fail: (res) => {
46 // console.log("fail status === > ", res); 46 // console.log("fail status === > ", res);
47 // }, 47 // },
48 // complete: (res) => { 48 // complete: (res) => {
49 // console.log("complete status === > ", res); 49 // console.log("complete status === > ", res);
50 // }, 50 // },
51 // }); 51 // });
52 }, 52 },
53 }; 53 };
54 54
55 export default { 55 export default {
56 namespaced: true, 56 namespaced: true,
57 state, 57 state,
58 mutations, 58 mutations,
59 actions, 59 actions,
60 }; 60 };
61 61
1 const urlAlias = { 1 const urlAlias = {
2 // 获取商品信息 2 // 获取商品信息
3 read: '/app/prod/read', 3 read: '/app/prod/read',
4 4
5 // 首页 5 // 首页
6 shopList: '/app/prod/list', // 获取首页商品列表 6 shopList: '/app/prod/list', // 获取首页商品列表
7 category: '/app/prod/category2', // 获取首页商品分类 7 category: '/app/prod/category2', // 获取首页商品分类
8 search: '/app/prod/search', // 首页搜索商品 8 search: '/app/prod/search', // 首页搜索商品
9 9
10 // 登陆 10 // 登陆
11 login: '/app/glass/getOpenId', // 登陆 11 login: '/app/glass/getOpenId', // 登陆
12 getUserInfo: '/app/glass/userinfo', // 获取用户信息 12 getUserInfo: '/app/glass/userinfo', // 获取用户信息
13 13
14 // 我的订单 14 // 我的订单
15 myOrderList: '/app/order/list3', // 获取订单列表 15 myOrderList: '/app/order/list3', // 获取订单列表
16 orderRead: '/app/order/read', // 获取订单详情 16 orderRead: '/app/order/read', // 获取订单详情
17 cancelOrder: '/app/order/wait/del',//取消订单 17 cancelOrder: '/app/order/wait/del',//取消订单
18 statusConfirm: '/app/order/statusConfirm',//订单操作 18 statusConfirm: '/app/order/statusConfirm',//订单操作
19 payLog:'/app/pay/log',//调起支付 19 payLog:'/app/pay/log',//调起支付
20 20
21 // 购物车 21 // 购物车
22 cartList: '/app/cart/list', // 获取购物车列表 22 cartList: '/app/cart/list', // 获取购物车列表
23 cartModi: '/app/cart/modi', // 修改购物车 23 cartModi: '/app/cart/modi', // 修改购物车
24 cartDel: '/app/cart/del', // 删除购物车 24 cartDel: '/app/cart/del', // 删除购物车
25 cartAdd: '/app/cart/add',// 添加购物车 25 cartAdd: '/app/cart/add',// 添加购物车
26 26
27 // 我的 27 // 我的
28 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 28 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
29 29
30 // 镜框选购页 30 // 镜框选购页
31 detailStandardList: '/app/prod/read', //获取商品的详细信息 31 detailStandardList: '/app/prod/read', //获取商品的详细信息
32 32 // 选购页
33 //用户数据 33 detailStandardUrl: '/app/prod/read', //获取商品的详细信息
34 mylovelist:'/app/user/mylovelist',//关心的人的数据 34
35 myloveadd:'/app/user/myloveadd'//添加关心的人 35 //用户数据
36 36 mylovelist:'/app/user/mylovelist',//关心的人的数据
37 } 37 myloveadd:'/app/user/myloveadd'//添加关心的人
38 38
39 export default urlAlias; 39 }
40 40
41 export default urlAlias;
42