吉鹏 / gulu-vue

Compare View

switch
from
...
to
 
Commits (2)
Showing 9 changed files   Show diff stats
src/components/UniSliper/UniSliper.vue
Diff comments   View file @51a5fe4
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" 4 <div class="c-progress-inner"
5 v-bind:style="{width: inner_width+'rpx'}" 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 <!-- <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> --> 9 <span v-if="showPerText">{{content}}mm</span>
8 </div> 10 </div>
9 <span v-if="showPerText">{{content}}mm</span> 11 </template>
10 </div> 12
11 </template> 13 <script>
12 14 // 使用了element的颜色
13 <script> 15 const colorTable = {
14 // 使用了element的颜色 16 success: '#13ce66',
15 const colorTable = { 17 fail: '#ff4949',
16 success: '#13ce66', 18 warning: '#e6a23c',
17 fail: '#ff4949', 19 default: '#409EFF'
18 warning: '#e6a23c', 20 }
19 default: '#409EFF' 21 export default {
20 } 22 name: 'CProgress',
21 export default { 23 props: {
22 name: 'CProgress', 24 //inner的长度
23 props: { 25 inner_widthProp: Number,
24 //inner的长度 26 //调用接口的值
25 inner_widthProp: Number, 27 contentProp: String
26 //调用接口的值
27 contentProp: String
28 },
29 data () {
30 return {
31 inner_width: this.inner_widthProp,
32 content: this.contentProp
33 }
34 },
35 computed: {
36 // 设置进度条的背景样式
37 setProgressBgStyle () {
38 return {
39 // 加上滑块的宽度
40 width: `${this.width + this.sliderWidth}px`
41 }
42 },
43 // 设置进度条的样式
44 setProgressStyle () {
45 const color = colorTable[this.type] || this.progressColor
46 return {
47 width: `${this.progressWidth}px`,
48 background: color
49 }
50 },
51 // 设置滑块的样式
52 setSliderStyle () {
53 const color = colorTable[this.type] || this.progressColor
54 return {
55 border: `1px solid ${color}`,
56 width: `${this.sliderWidth}px`,
57 height: `${this.sliderWidth}px`,
58 left: `${this.sliderLeft}px`
59 }
60 }
61 },
62 mounted () {
63 this.sliderLeft = this.width / 100 * this.percent
64 this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
65 this.tempPercent = this.percent
66 // this.addListener()
67 }, 28 },
68 // methods: { 29 data () {
69 // addListener () { 30 return {
70 // const slider = this.$refs.slider 31 inner_width: this.inner_widthProp,
71 // const progress = this.$refs.progress 32 content: this.contentProp
72 // let isClickSlider = false
73 // let distance = 0 // 滑块与点击坐标的绝对距离 33 }
74 // progress.onclick = (e) => { 34 },
75 // // 阻止事件冒泡 35 computed: {
76 // if (e.target == slider) { 36 // 设置进度条的背景样式
77 // return 37 setProgressBgStyle () {
78 // } 38 return {
79 // let curX = progress.offsetLeft 39 // 加上滑块的宽度
80 // this.sliderLeft = e.pageX - curX 40 width: `${this.width + this.sliderWidth}px`
81 // if (this.sliderLeft <= 0) { 41 }
82 // this.sliderLeft = 0 42 },
83 // } 43 // 设置进度条的样式
84 // if (this.sliderLeft >= this.width) { 44 setProgressStyle () {
85 // this.sliderLeft = this.width 45 const color = colorTable[this.type] || this.progressColor
86 // } 46 return {
87 // this._countCurPercent() 47 width: `${this.progressWidth}px`,
88 // } 48 background: color
89 // // slider.onmousedown = (e) => { 49 }
90 // // isClickSlider = true 50 },
91 // // let curX = slider.offsetLeft 51 // 设置滑块的样式
92 // // distance = e.pageX - curX // 得出绝对距离 52 setSliderStyle () {
93 // // } 53 const color = colorTable[this.type] || this.progressColor
94 // progress.onmousemove = (e) => { 54 return {
95 // if (isClickSlider) { 55 border: `1px solid ${color}`,
96 // // 判断是否已经超出进度条的长度 56 width: `${this.sliderWidth}px`,
97 // if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { 57 height: `${this.sliderWidth}px`,
98 // this.sliderLeft = e.pageX - distance 58 left: `${this.sliderLeft}px`
99 // this._countCurPercent() 59 }
100 // } 60 }
101 // } 61 },
102 // } 62 mounted () {
103 // progress.onmouseup = () => { 63 this.sliderLeft = this.width / 100 * this.percent
104 // isClickSlider = false 64 this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
105 // } 65 this.tempPercent = this.percent
106 // }, 66 // this.addListener()
107 // // 算出百分比 67 },
108 // _countCurPercent () { 68 // methods: {
109 // this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) 69 // addListener () {
110 // this.progressWidth = this.sliderLeft + 20 70 // const slider = this.$refs.slider
111 // // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整 71 // const progress = this.$refs.progress
112 // if (this.tempPercent <= 0) { 72 // let isClickSlider = false
113 // this.progressWidth = 0 73 // let distance = 0 // 滑块与点击坐标的绝对距离
114 // this.sliderLeft = 0 74 // progress.onclick = (e) => {
115 // } 75 // // 阻止事件冒泡
116 // if (this.tempPercent >= 100) { 76 // if (e.target == slider) {
117 // this.progressWidth = this.width + 20 77 // return
118 // this.sliderLeft = this.width 78 // }
119 // } 79 // let curX = progress.offsetLeft
120 // this.stand_width = this.tempPercent*this.standard 80 // this.sliderLeft = e.pageX - curX
121 // this.stand_width = parseInt(this.stand_width/1) //取整 81 // if (this.sliderLeft <= 0) {
122 // this.$emit('percentChange', this.tempPercent) 82 // this.sliderLeft = 0
123 // } 83 // }
124 // } 84 // if (this.sliderLeft >= this.width) {
125 } 85 // this.sliderLeft = this.width
126 </script> 86 // }
127 87 // this._countCurPercent()
128 <style scoped lang="scss"> 88 // }
129 .c-progress { 89 // // slider.onmousedown = (e) => {
130 $width: 300px; 90 // // isClickSlider = true
131 $radius: 5px; 91 // // let curX = slider.offsetLeft
132 display: flex; 92 // // distance = e.pageX - curX // 得出绝对距离
133 align-items: center; 93 // // }
134 94 // progress.onmousemove = (e) => {
135 span { 95 // if (isClickSlider) {
136 margin-left: 5px; 96 // // 判断是否已经超出进度条的长度
137 font-size: 14px; 97 // if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
138 color: #666; 98 // this.sliderLeft = e.pageX - distance
139 } 99 // this._countCurPercent()
140 100 // }
141 .c-progress-outer { 101 // }
142 width: 420rpx; 102 // }
143 height: 10px; 103 // progress.onmouseup = () => {
144 background: #ebeef5; 104 // isClickSlider = false
145 position: relative; 105 // }
146 display: flex; 106 // },
147 align-items: center; 107 // // 算出百分比
148 108 // _countCurPercent () {
149 .c-progress-inner { 109 // this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
150 width: 300rpx; 110 // this.progressWidth = this.sliderLeft + 20
151 height: 10px; 111 // // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
152 background: #FF6B4A ; 112 // if (this.tempPercent <= 0) {
153 } 113 // this.progressWidth = 0
154 114 // this.sliderLeft = 0
155 .c-progress-slider { 115 // }
156 width: 20px; 116 // if (this.tempPercent >= 100) {
157 height: 20px; 117 // this.progressWidth = this.width + 20
158 border-radius: 50%; 118 // this.sliderLeft = this.width
159 background: #fff; 119 // }
160 border: 1px solid #FF6B4A ; 120 // this.stand_width = this.tempPercent*this.standard
161 position: absolute; 121 // this.stand_width = parseInt(this.stand_width/1) //取整
162 z-index: 10; 122 // this.$emit('percentChange', this.tempPercent)
163 left: 10px; 123 // }
164 } 124 // }
165 } 125 }
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/myOrder/myOrder", 10 "path" : "pages/user/user",
11 "style" : { 11 "style" : {
12 "navigationBarTitleText" : "我的订单" 12 "navigationBarTitleText" : "我的"
13 } 13 }
14 }, 14 },
15 { 15 {
16 "path" : "pages/cart/cart", 16 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs",
17 "style" : { 17 "style" : {
18 "navigationBarTitleText" : "购物车" 18 "navigationBarTitleText" : "镜片名称名称"
19 } 19 }
20 }, 20 },
21 { 21 {
22 <<<<<<< HEAD
23 =======
22 "path" : "pages/lensDetails/lensDetails", 24 "path" : "pages/purchaseLenses/purchaseLenses",
23 "style" : { 25 "style" : {
24 "navigationBarTitleText" : "产品详情" 26 "navigationBarTitleText" : "产品选购"
25 } 27 }
26 }, 28 },
27 { 29 {
30 >>>>>>> f0cf57997c2438808bb572407021a3e3a18ee0fb
28 "path" : "pages/purchaseLenses/purchaseLenses", 31 "path" : "pages/lensDetails/lensDetails",
29 "style" : { 32 "style" : {
30 "navigationBarTitleText" : "产品选购" 33 "navigationBarTitleText" : "产品详情"
31 } 34 }
32 }, 35 },
33 { 36 {
34 "path" : "pages/refundProgress/refundProgress", 37 "path" : "pages/myOrderPaying/myOrderPaying",
35 "style" : { 38 "style" : {
36 "navigationBarTitleText" : "申请退款" 39 "navigationBarTitleText" : "我的订单"
37 } 40 }
38 }, 41 },
39 { 42 {
40 "path" : "pages/addAddress/addAddress", 43 "path" : "pages/myOrder/myOrder",
41 "style" : { 44 "style" : {
42 "navigationBarTitleText" : "新增地址" 45 "navigationBarTitleText" : "我的订单"
43 } 46 }
44 }, 47 },
45 { 48 {
46 "path" : "pages/confirmOrder/confirmOrder", 49 "path" : "pages/cart/cart",
47 "style" : { 50 "style" : {
48 "navigationBarTitleText" : "确认订单" 51 "navigationBarTitleText" : "购物车"
49 } 52 }
50 }, 53 },
51 { 54 {
52 "path" : "pages/user/user", 55 "path" : "pages/frameDetail/frameDetail",
53 "style" : { 56 "style" : {
54 "navigationBarTitleText" : "我的" 57 "navigationBarTitleText" : "产品详情"
55 } 58 }
56 }, 59 },
57 { 60 {
58 "path" : "pages/refundment/refundWays" 61 "path" : "pages/refundProgress/refundProgress",
59 }, 62 "style" : {
60 { 63 "navigationBarTitleText" : "申请退款"
61 "path" : "pages/refundment/refundment" 64 }
62 }, 65 },
63 { 66 {
64 "path" : "pages/predelivery/predelivery" 67 "path" : "pages/addAddress/addAddress",
65 }, 68 "style" : {
66 { 69 "navigationBarTitleText" : "新增地址"
67 "path" : "pages/customerService/customerService", 70 }
68 "style" : { 71 },
69 "navigationBarTitleText" : "在线客服" 72 {
70 } 73 "path" : "pages/confirmOrder/confirmOrder",
71 }, 74 "style" : {
72 { 75 "navigationBarTitleText" : "确认订单"
73 "path" : "pages/myOrderPaying/myOrderPaying", 76 }
74 "style" : { 77 },
75 "navigationBarTitleText" : "我的订单" 78 {
76 } 79 "path" : "pages/refundment/refundWays",
77 }, 80 "style" : {
78 { 81 "navigationBarTitleText" : "退款方式"
79 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", 82 }
80 "style" : { 83 },
81 "navigationBarTitleText" : "镜片名称名称" 84 {
82 } 85 "path" : "pages/refundment/refundment",
83 }, 86 "style" : {
84 { 87 "navigationBarTitleText" : "申请退款"
85 "path" : "pages/detailStandard/detailStandard_sun", 88 }
86 "style" : { 89 },
87 "navigationBarTitleText" : "太阳镜选购页" 90 {
88 } 91 "path" : "pages/predelivery/predelivery",
89 }, 92 "style" : {
90 { 93 "navigationBarTitleText" : "待发货"
91 "path" : "pages/detailStandard/detailStandard_k", 94 }
92 "style" : { 95 },
93 "navigationBarTitleText" : "镜框选购页" 96 {
94 } 97 "path" : "pages/customerService/customerService",
95 } 98 "style" : {
96 ], 99 "navigationBarTitleText" : "在线客服"
97 "globalStyle" : { 100 }
98 "navigationBarTextStyle" : "black", 101 },
99 "navigationBarTitleText" : "uni-app", 102 {
100 "navigationBarBackgroundColor" : "#F8F8F8", 103 "path" : "pages/detailStandard/detailStandard_sun",
101 "backgroundColor" : "#F8F8F8" 104 "style" : {
102 }, 105 "navigationBarTitleText" : "太阳镜选购页"
103 "tabBar" : { 106 }
104 "color" : "#C0C4CC", 107 },
105 "selectedColor" : "#fa436a", 108 {
106 "borderStyle" : "black", 109 "path" : "pages/detailStandard/detailStandard_k",
107 "backgroundColor" : "#ffffff", 110 "style" : {
108 "list" : [ 111 "navigationBarTitleText" : "镜框选购页"
109 { 112 }
110 "pagePath" : "pages/index/index", 113 }
111 "iconPath" : "static/tab-home.png", 114 ,{
112 "selectedIconPath" : "static/tab-home-current.png", 115 "path" : "pages/addOpticsData/addOpticsData",
113 "text" : "首页" 116 "style" : {
114 }, 117 "navigationBarTitleText" : "验光数据"}
115 { 118 }
116 "pagePath" : "pages/cart/cart", 119 ],
117 "iconPath" : "static/tab-cart.png", 120 "globalStyle" : {
118 "selectedIconPath" : "static/tab-cart-current.png", 121 "navigationBarTextStyle" : "black",
119 "text" : "购物车" 122 "navigationBarTitleText" : "uni-app",
120 }, 123 "navigationBarBackgroundColor" : "#F8F8F8",
121 { 124 "backgroundColor" : "#F8F8F8"
122 "pagePath" : "pages/user/user", 125 },
123 "iconPath" : "static/tab-my.png", 126 "tabBar" : {
124 "selectedIconPath" : "static/tab-my-current.png", 127 "color" : "#C0C4CC",
125 "text" : "我的" 128 "selectedColor" : "#fa436a",
126 } 129 "borderStyle" : "black",
127 ] 130 "backgroundColor" : "#ffffff",
128 }, 131 "list" : [
129 "condition" : { 132 {
130 //模式配置，仅开发期间生效 133 "pagePath" : "pages/index/index",
131 "current" : 0, //当前激活的模式(list 的索引项) 134 "iconPath" : "static/tab-home.png",
132 "list" : [ 135 "selectedIconPath" : "static/tab-home-current.png",
133 { 136 "text" : "首页"
134 "name" : "", //模式名称 137 },
135 "path" : "", //启动页面，必选 138 {
136 "query" : "" //启动参数，在页面的onLoad函数里面得到 139 "pagePath" : "pages/cart/cart",
137 } 140 "iconPath" : "static/tab-cart.png",
138 ] 141 "selectedIconPath" : "static/tab-cart-current.png",
139 } 142 "text" : "购物车"
140 } 143 },
141 144 {
145 "pagePath" : "pages/user/user",
146 "iconPath" : "static/tab-my.png",
147 "selectedIconPath" : "static/tab-my-current.png",
148 "text" : "我的"
149 }
150 ]
151 },
152 "condition" : {
153 //模式配置，仅开发期间生效
154 "current" : 0, //当前激活的模式(list 的索引项)
155 "list" : [
156 {
157 "name" : "", //模式名称
158 "path" : "", //启动页面，必选
159 "query" : "" //启动参数，在页面的onLoad函数里面得到
160 }
161 ]
162 }
163 }
164
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @51a5fe4
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="details.data.img_index_url"></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">{{details.data.p_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"> 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 <span>￥{{details.data.p_sale_price*count}}</span> 16 </view>
10 <view class="counter"> 17 </view>
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> 18 <view class="choose">
12 <text>{{count}}</text> 19 <view class="colour">
13 <view class="btn" @click="counter(true)">+</view> 20 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view>
14 </view> 21 <view class="colour_exp">*{{colour}}</view>
22 <view>
15 </view> 23 <view class="colour2">
16 </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 <view class="choose"> 35 <hr/>
19 <view class="colour"> 36 </view>
20 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view> 37 <view class="size">
21 <view class="colour_exp">*{{colour}}</view> 38 <view class="size1">
22 <view> 39 <view class="size1_1">框架尺寸</view>
23 <view class="colour2"> 40 <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view>
24 <view 41 </view>
25 v-for="(items,index) in details.data.skuList" 42 <view class="colour">
26 :key="index" 43 <view class="colour_exp">*{{colour}}</view>
27 @click="viewChoose(index)"
28 class="colour2_view" 44 </view>
29 v-bind:class="{'colour2_viewed': chooseNum == index}" 45 <view class="D3_list">
30 > 46 <view>
31 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> 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> 58 <view class="D3_list_jDu">
33 </view> 59 <view class="D3_list1">
34 </view> 60 <c-progress class="c-progress" :inner_widthProp="190"/>
35 <hr/> 61 <view>{{details.data.glass_width}}mm</view>
36 </view> 62 </view>
37 <view class="size"> 63 <view>{{parameter[1].standard}}</view>
38 <view class="size1"> 64 </view>
39 <view class="size1_1">框架尺寸</view> 65 </view>
40 <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view> 66 <view>
41 </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 class="colour"> 95 </view>
43 <view class="colour_exp">*{{colour}}</view> 96 </view>
44 </view> 97 <hr/>
45 <view class="D3_list"> 98 </view>
46 <view> 99 </view>
47 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> 100 <view class="part">
48 <view class="D3_list_jDu"> 101 <view class="size1">
49 <view class="D3_list1"> 102 <view class="size1_1">配件</view>
50 <c-progress class="c-progress" :inner_widthProp="300"/> 103 <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
51 <text>{{details.data.frame_width}}mm</text> 104 </view>
52 </view> 105 <view class="colour_exp">*0290</view>
53 <view>{{parameter[0].standard}}</view> 106 <view class="part_som">
54 </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><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> 116 </view>
58 <view class="D3_list_jDu"> 117 <view class="buy">
59 <view class="D3_list1"> 118 <view class="buy1">选了镜框，想选镜片？</view>
60 <c-progress class="c-progress" :inner_widthProp="190"/> 119 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
61 <view>{{details.data.glass_width}}mm</view> 120 <view class="buy3">
62 </view> 121 <view class="buy3_1">暂时不选</view>
63 <view>{{parameter[1].standard}}</view> 122 <view class="buy3_2" @click="popArgs">立即去选</view>
64 </view> 123 </view>
65 </view> 124 </view>
66 <view> 125 <view class="zhanwei"></view>
67 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> 126 <view class="button"><view>立即结算</view></view>
68 <view class="D3_list_jDu"> 127 </view>
69 <view class="D3_list1"> 128 </template>
70 <c-progress class="c-progress" :inner_widthProp="210"/> 129 <script>
71 <view>{{details.data.glass_height}}mm</view> 130 import CProgress from '../../components/UniSliper/UniSliper'
72 </view> 131 import store from '@/store'
73 <view>{{parameter[2].standard}}</view> 132
74 </view> 133 export default {
134 components: {
135 CProgress
136 },
75 </view> 137 data(){
76 <view> 138 return{
77 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> 139 count: 1,
78 <view class="D3_list_jDu"> 140 colour: '1.56非球面防蓝光_亚黑色',
79 141 chooseNum : '',
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> 142 parameter:[
95 </view> 143 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
96 </view> 144 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
97 <hr/> 145 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
98 </view> 146 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
99 </view> 147 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
100 <view class="part"> 148 ],
101 <view class="size1"> 149 //配饰
102 <view class="size1_1">配件</view> 150 part:[
103 <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view> 151 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
104 </view> 152 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
105 <view class="colour_exp">*0290</view> 153 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
106 <view class="part_som"> 154 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
107 <view 155 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
108 v-for="(part) in part" 156 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
109 :key="part.key" 157 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
110 v-bind:class="{'size_viewed': part.is_actived}" 158 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
111 > 159 ],
112 <image v-bind:src="part.img"></image> 160 }
113 </view> 161 },
114 </view> 162
115 </view> 163 computed: {
116 </view> 164 details(){
117 <view class="buy"> 165 return this.$store.state.detailStandard_k.list
118 <view class="buy1">选了镜框，想选镜片？</view> 166 },
119 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
120 <view class="buy3"> 167 },
121 <view class="buy3_1">暂时不选</view> 168 onLoad:function(){
122 <view class="buy3_2" @click="popArgs">立即去选</view> 169 store.dispatch('detailStandard_k/fetch', {
170 uid: "1",
171 pid: "26",
172 });
173 // console.log(this.$store.state.detailStandard_k.list+'ssss');
123 </view> 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 </view> 201 }
125 <view class="zhanwei"></view> 202 </script>
126 <view class="button"><view>立即结算</view></view> 203
127 </view> 204 <style lang="scss">
128 </template> 205 .container{
129 <script> 206 min-height: 100vh;
130 import CProgress from '../../components/UniSliper/UniSliper' 207 background: #F2F2F2;
131 import store from '@/store' 208 padding-top: 10px;
132 209 box-sizing: border-box;
133 export default { 210 }
134 components: { 211 hr{
135 CProgress 212 border: none;
136 }, 213 height: 1px;
137 data(){ 214 background: #F2F2F2;
138 return{ 215 margin-top: 18px;
139 count: 1, 216 }
140 colour: '1.56非球面防蓝光_亚黑色', 217 .detail{
141 chooseNum : '', 218 height: 272rpx;
142 parameter:[ 219 background: #FFFFFF;
143 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, 220 border-radius: 8px;
144 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, 221 padding: 16px;
145 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, 222 box-sizing: border-box;
146 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, 223 display: flex;
147 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, 224 justify-content: space-between;
148 ], 225 align-items: center;
149 //配饰 226 }
150 part:[ 227 .detail1{
151 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, 228 height: 178rpx;
152 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 229 width: 188rpx;
153 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, 230 image{
154 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 231 width: 100%;
155 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 232 height: 100%;
156 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, 233 border-radius: 8px;
157 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, 234 }
158 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, 235 }
159 ], 236 .detail2{
160 } 237 width: 68%;
161 }, 238 view{
162 239 margin-bottom: 6px;
163 computed: { 240 font-family: PingFangSC-Regular;
164 details(){ 241 }
165 return this.$store.state.detailStandard_k.list 242 .detail2_name{
166 }, 243 font-size: 14px;
167 }, 244 color: #333333;
168 onLoad:function(){ 245 letter-spacing: -0.26px;
169 store.dispatch('detailStandard_k/fetch', { 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 uid: "1", 252 }
171 pid: "26", 253 .detail2_tui{
172 }); 254 font-size: 10px;
173 // console.log(this.$store.state.detailStandard_k.list+'ssss'); 255 color: #999999;
174 }, 256 letter-spacing: -0.19px;
175 methods: { 257 span{
176 counter(isadd){ 258 margin-right: 10px;
177 if(isadd){ 259 }
178 this.count++ 260 }
179 }else{ 261 .detail2_price{
180 this.count <= 1? this.disabled = true:this.count-- 262 font-size: 14px;
181 } 263 color: #FF6B4A;
182 }, 264 letter-spacing: -0.26px;
183 colourChange(index,e){ 265 }
184 this.colour = e ; //颜色选择 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 // console.log(index,e); 285 .choose{
186 286 background: #FFFFFF;
187 }, 287 padding: 16px;
188 viewChoose(index){ 288 box-sizing: border-box;
189 this.chooseNum = index 289 margin-top: 10px;
190 }, 290 border-radius: 8px;
191 popArgs(){ 291 .colour1{
192 uni.navigateTo({ 292 span{
193 url: '../detailsChoiceArgs/detailsChoiceArgs', 293 font-family: PingFangSC-Medium;
194 success: res => {}, 294 font-size: 16px;
195 fail: () => {}, 295 color: #333333;
196 complete: () => {} 296 letter-spacing: -0.3px;
197 }); 297 text-align: justify;
198 } 298 line-height: 24px;
199 } 299 font-weight: bold;
200 300 }
201 } 301 image{
202 </script> 302 float: right;
203 303 width: 40rpx;
204 <style lang="scss"> 304 height: 36rpx;
205 .container{ 305 }
206 min-height: 100vh; 306 }
207 background: #F2F2F2; 307 .colour_exp{
208 padding-top: 10px; 308 font-family: PingFangSC-Regular;
209 box-sizing: border-box; 309 font-size: 12px;
210 } 310 color: #666666;
211 hr{ 311 letter-spacing: 0;
212 border: none; 312 margin-top: 10px;
213 height: 1px; 313 margin-bottom: 10px;
214 background: #F2F2F2; 314 }
215 margin-top: 18px; 315 .colour2{
216 } 316 display: grid;
217 .detail{ 317 grid-template-columns: repeat(5, 17%);
218 height: 272rpx; 318 justify-content: space-between ;
219 background: #FFFFFF; 319 grid-row-gap: 10px;
220 border-radius: 8px; 320 margin-bottom: 14px;
221 padding: 16px; 321 .colour2_view{
222 box-sizing: border-box; 322 border: 1px solid #F2F2F2;
223 display: flex; 323 image{
224 justify-content: space-between; 324 width: 100rpx;
225 align-items: center; 325 height: 60rpx;
226 } 326 }
227 .detail1{ 327 }
228 height: 178rpx; 328 .colour2_viewed{
229 width: 188rpx; 329 border: 1px solid #FF6B4A;
330 image{
331 width: 100rpx;
332 height: 60rpx;
333 }
230 image{ 334 }
231 width: 100%; 335 }
232 height: 100%; 336 }
233 border-radius: 8px; 337 .size,.part{
234 } 338 margin-top:14px;
235 } 339 .size1{
236 .detail2{ 340 display: flex;
237 width: 68%; 341 justify-content: space-between;
238 view{ 342 margin-bottom: 10px;
239 margin-bottom: 6px; 343 .size1_1{
240 font-family: PingFangSC-Regular; 344 font-weight: bold;
241 } 345 font-family: PingFangSC-Medium;
242 .detail2_name{ 346 font-size: 16px;
243 font-size: 14px; 347 color: #333333;
244 color: #333333; 348 letter-spacing: -0.3px;
245 letter-spacing: -0.26px; 349 line-height: 24px;
246 line-height: 18px; 350 }
247 overflow:hidden; 351 view{
248 text-overflow:ellipsis; 352 span{
249 display:-webkit-box; 353 font-family: PingFangSC-Regular;
250 -webkit-box-orient:vertical; 354 font-size: 14px;
251 -webkit-line-clamp:2; 355 color: #FF6B4A;
252 } 356 letter-spacing: -0.26px;
253 .detail2_tui{ 357 margin-right: 12px;
254 font-size: 10px; 358 }
255 color: #999999; 359 image{
256 letter-spacing: -0.19px; 360 width: 40rpx;
257 span{ 361 height: 36rpx;
258 margin-right: 10px; 362 }
259 } 363 }
260 } 364 }
261 .detail2_price{ 365 .size2{
262 font-size: 14px; 366 view{
263 color: #FF6B4A; 367 display: inline-flex;
264 letter-spacing: -0.26px; 368 align-items: center;
265 } 369 justify-content: center; //字体居中
266 } 370 margin-right: 12px;
267 .counter{ 371 margin-bottom: 20px;
268 display: flex; 372 width: 136rpx;
269 flex-direction: row; 373 height: 60rpx;
270 justify-content: space-between; 374 background: #F2F2F2;
271 font-size: 28rpx; 375 border-radius: 2px;
272 color: #333333; 376 font-family: PingFangSC-Regular;
273 width: 122rpx; 377 font-size: 12px;
274 float: right; 378 color: #666666;
275 .btn{ 379 }
276 display: flex; 380 view:hover{
277 justify-content: center; 381 color: #FF6B4A;
278 line-height: 32rpx; 382 background: rgba(255,107,74,0.15);
279 height: 32rpx; 383 }
280 width: 32rpx; 384 }
281 background-color: #F2F2F2; 385 .D3_list{
282 color: #CFCFCF; 386 margin-bottom: 4px;
283 } 387 }
284 } 388 .D3_list>view{
285 .choose{ 389 display: flex;
286 background: #FFFFFF; 390 align-content: center;
287 padding: 16px; 391 margin-bottom: 10px;
288 box-sizing: border-box; 392 view{
289 margin-top: 10px; 393 margin-right: 10px;
290 border-radius: 8px; 394 }
291 .colour1{ 395 }
292 span{ 396 .D3_list image{
293 font-family: PingFangSC-Medium; 397 width: 50px;
294 font-size: 16px; 398 height: 25px;
295 color: #333333; 399 margin-right: 6px;
296 letter-spacing: -0.3px; 400 }
297 text-align: justify; 401 .D3_list span{
298 line-height: 24px; 402 margin-left: 6px;
299 font-weight: bold; 403 margin-right: 5px;
300 } 404 font-family: 'PingFangSC-Regular';
301 image{ 405 }
302 float: right; 406 .D3_list_jDu{
303 width: 40rpx; 407 view{
304 height: 36rpx; 408 font-family: PingFangSC-Regular;
305 } 409 font-size: 10px;
306 } 410 color: #999999;
307 .colour_exp{ 411 letter-spacing: -0.19px;
308 font-family: PingFangSC-Regular; 412 }
413 .D3_list1{
414 display: flex;
415 }
309 font-size: 12px; 416 }
310 color: #666666; 417 }
311 letter-spacing: 0; 418 .part{
312 margin-top: 10px; 419 .part_som{
313 margin-bottom: 10px; 420 display: grid;
314 } 421 justify-content: space-between;
315 .colour2{ 422 grid-template-columns: repeat(4, 22%);
316 display: grid; 423 grid-row-gap: 12px;
317 grid-template-columns: repeat(5, 17%); 424 margin-bottom: 14px;
318 justify-content: space-between ; 425 view{
319 grid-row-gap: 10px; 426 border: 1px solid #F2F2F2;
320 margin-bottom: 14px; 427 height: 72rpx;
321 .colour2_view{ 428 image{
322 border: 1px solid #F2F2F2; 429 width: 100%;
323 image{ 430 height: 100%;
324 width: 100rpx; 431 }
325 height: 60rpx; 432 }
326 } 433 .size_viewed{
327 } 434 border: 1px solid #FF6B4A;
435 height: 72rpx;
436 image{
437 width: 100%;
438 height: 100%;
439 }
328 .colour2_viewed{ 440 }
329 border: 1px solid #FF6B4A; 441 }
330 image{ 442 }
443
331 width: 100rpx; 444 .buy{
332 height: 60rpx; 445 height: 300rpx;
333 } 446 background: #FFFFFF ;
334 } 447 margin-top: 10px;
335 } 448 border-radius: 8px;
336 } 449 padding-top: 20px;
337 .size,.part{ 450 box-sizing: border-box;
338 margin-top:14px; 451 margin-bottom: 20px;
339 .size1{ 452 }
340 display: flex; 453 .buy1{
341 justify-content: space-between; 454 font-family: PingFangSC-Medium;
342 margin-bottom: 10px; 455 font-size: 16px;
343 .size1_1{ 456 font-weight: bold;
344 font-weight: bold; 457 color: #333333;
345 font-family: PingFangSC-Medium; 458 text-align: center;
346 font-size: 16px; 459 }
347 color: #333333; 460 .buy2{
348 letter-spacing: -0.3px; 461 font-family: PingFangSC-Regular;
349 line-height: 24px; 462 font-size: 12px;
350 } 463 color: #999999;
351 view{ 464 text-align: center;
352 span{ 465 margin: 10px;
353 font-family: PingFangSC-Regular; 466 }
354 font-size: 14px; 467 .buy3{
355 color: #FF6B4A; 468 font-family: PingFangSC-Regular;
356 letter-spacing: -0.26px; 469 font-size: 16px;
357 margin-right: 12px; 470 display: flex;
358 } 471 justify-content: center;
359 image{ 472 margin-top: 14px;
360 width: 40rpx; 473 view{
361 height: 36rpx; 474 border-radius: 20px;
362 } 475 width: 240rpx;
363 } 476 height: 80rpx;
364 } 477 display: flex;
365 .size2{ 478 justify-content: center;
366 view{ 479 align-items: center;
367 display: inline-flex; 480 }
368 align-items: center; 481 .buy3_1{
369 justify-content: center; //字体居中 482 margin-right: 20px;
370 margin-right: 12px; 483 background: rgba(255,107,74,0.15);
371 margin-bottom: 20px; 484 color: #FF6B4A ;
372 width: 136rpx; 485 }
373 height: 60rpx; 486 .buy3_2{
374 background: #F2F2F2; 487 background: #FF6B4A;
375 border-radius: 2px; 488 color: #FFFFFF ;
376 font-family: PingFangSC-Regular; 489 }
377 font-size: 12px; 490 }
378 color: #666666; 491 .zhanwei{
379 } 492 background: #F2F2F2;
380 view:hover{ 493 height: 120rpx;
381 color: #FF6B4A; 494 }
382 background: rgba(255,107,74,0.15); 495 .button{
src/pages/detailStandard/detailStandard_sun.vue
Diff comments   View file @51a5fe4
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="details.data.img_index_url"></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">{{details.data.p_name}}</view> 6 <view class="detail2_name">{{details.data.p_name}}</view>
7 <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> 7 <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view>
8 <view class="detail2_price"> 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 <text>￥{{details.data.p_sale_price*count}}</text> 16 </view>
10 <view class="counter"> 17 </view>
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> 18 <view class="choose">
12 <text>{{count}}</text> 19 <view class="colour">
13 <view class="btn" @click="counter(true)">+</view> 20 <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view>
14 </view> 21 <view class="colour_exp">*{{colour}}</view>
22 <view>
15 </view> 23 <view class="colour2">
16 </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 <view class="choose"> 35 <hr/>
19 <view class="colour"> 36 </view>
20 <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view> 37 <view class="colour">
21 <view class="colour_exp">*{{colour}}</view> 38 <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view>
22 <view> 39 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
40 <view>
23 <view class="colour2"> 41 <view class="jp_colour2">
24 <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 v-for="(items,index) in details.data.skuList" 50 </view>
26 :key="index" 51 <hr/>
27 @click="viewChoose(index)" 52 </view>
28 class="colour2_view" 53 <view class="colour">
29 v-bind:class="{'colour2_viewed': chooseNum == index}" 54 <view class="colour1">
30 > 55 <text>{{details.data.attrList[0].meta_name}}</text>
31 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> 56 <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text>
32 </view> 57 <image src="/static/img/detail/xiala.png"></image>
33 </view> 58 </view>
34 </view> 59 <view>
35 <hr/> 60 <view class="split">
36 </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 class="colour"> 71 </view>
38 <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view>
39 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
40 <view>
41 <view class="jp_colour2">
42 <view 72 </view>
43 v-for="(items,index) in jp_colour" 73 <hr/>
44 :key="index" 74 </view>
45 class="jp_colour2_view" 75 <view class="size">
46 > 76 <view class="size1">
47 <image v-bind:src="items.img"></image> 77 <view class="size1_1">框架尺寸</view>
48 </view> 78 <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view>
49 </view> 79 </view>
50 </view> 80 <view class="colour">
51 <hr/> 81 <view class="colour_exp">*{{colour}}</view>
52 </view>
53 <view class="colour"> 82 </view>
54 <view class="colour1">
55 <text>{{details.data.attrList[0].meta_name}}</text> 83 <view class="D3_list">
56 <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text> 84 <view>
57 <image src="/static/img/detail/xiala.png"></image> 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> 106 <view class="D3_list_jDu">
59 <view> 107 <view class="D3_list1">
60 <view class="split"> 108 <c-progress class="c-progress" :inner_widthProp="210"/>
61 <view 109 <view>{{details.data.glass_height}}mm</view>
62 v-for="(items,index) in details.data.attrList[0].attr" 110 </view>
63 :key="index" 111 <view>{{parameter[2].standard}}</view>
64 > 112 </view>
65 <view 113 </view>
66 class="split_colour2" 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 @click="splitChoose(index)" 133 </view>
68 v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" 134 </view>
69 >{{items.name}}</view> 135 <hr/>
70 </view> 136 </view>
71 </view> 137 </view>
72 </view> 138 <view class="part">
73 <hr/> 139 <view class="size1">
74 </view> 140 <view class="size1_1">配件</view>
75 <view class="size"> 141 <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
76 <view class="size1"> 142 </view>
77 <view class="size1_1">框架尺寸</view> 143 <view class="colour_exp">*0290</view>
78 <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view> 144 <view class="part_som">
79 </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 class="colour"> 152 </view>
81 <view class="colour_exp">*{{colour}}</view> 153 </view>
82 </view> 154 </view>
83 <view class="D3_list"> 155 <view class="buy">
84 <view> 156 <view class="buy1">选了镜框，想选镜片？</view>
85 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> 157 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
86 <view class="D3_list_jDu"> 158 <view class="buy3">
87 <view class="D3_list1"> 159 <view class="buy3_1">暂时不选</view>
88 <c-progress class="c-progress" :inner_widthProp="300"/> 160 <view class="buy3_2" @click="popArgs">立即去选</view>
89 <text>{{details.data.frame_width}}mm</text> 161 </view>
90 </view> 162 </view>
91 <view>{{parameter[0].standard}}</view> 163 <view class="zhanwei"></view>
92 </view> 164 <view class="button"><view>立即结算</view></view>
93 </view> 165 </view>
94 <view> 166 </template>
95 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> 167 <script>
96 <view class="D3_list_jDu"> 168 import CProgress from '../../components/UniSliper/UniSliper'
169 import store from '@/store'
97 <view class="D3_list1"> 170
98 <c-progress class="c-progress" :inner_widthProp="190"/> 171 export default {
99 <view>{{details.data.glass_width}}mm</view> 172 components: {
100 </view> 173 CProgress
101 <view>{{parameter[1].standard}}</view> 174 },
102 </view> 175 data(){
103 </view> 176 return{
104 <view> 177 count: 1,
105 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> 178 colour: '1.56非球面防蓝光_亚黑色',
106 <view class="D3_list_jDu"> 179 chooseNum : '',
107 <view class="D3_list1"> 180 isSplit: '' ,
108 <c-progress class="c-progress" :inner_widthProp="210"/> 181 parameter:[
109 <view>{{details.data.glass_height}}mm</view> 182 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
110 </view> 183 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
111 <view>{{parameter[2].standard}}</view> 184 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
112 </view> 185 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
113 </view> 186 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
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"/> 187 ],
120 <view>{{details.data.nose_width}}mm</view> 188 //镜片颜色
121 </view> 189 jp_colour:[
122 <view>{{parameter[3].standard}}</view> 190 {img:'/static/img/detail/Kuang/sun_jp.png'},
123 </view> 191 {img:'/static/img/detail/Kuang/sun_jp.png'},
124 </view> 192 {img:'/static/img/detail/Kuang/sun_jp.png'},
125 <view> 193 {img:'/static/img/detail/Kuang/sun_jp.png'},
126 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> 194 {img:'/static/img/detail/Kuang/sun_jp.png'},
127 <view class="D3_list_jDu"> 195 {img:'/static/img/detail/Kuang/sun_jp.png'}
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>
133 </view>
134 </view>
135 <hr/>
136 </view>
137 </view>
138 <view class="part">
139 <view class="size1"> 196 ],
140 <view class="size1_1">配件</view> 197 //配饰
141 <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view> 198 part:[
142 </view> 199 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
143 <view class="colour_exp">*0290</view> 200 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
144 <view class="part_som"> 201 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
145 <view 202 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
146 v-for="(part) in part" 203 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
147 :key="part.key" 204 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
148 v-bind:class="{'size_viewed': part.is_actived}" 205 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
149 > 206 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
150 <image v-bind:src="part.img"></image>
151 </view> 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 </view> 259 }
153 </view> 260 }
261
154 </view> 262 }
155 <view class="buy"> 263 </script>
156 <view class="buy1">选了镜框，想选镜片？</view> 264
157 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> 265 <style lang="scss">
158 <view class="buy3"> 266 .container{
159 <view class="buy3_1">暂时不选</view> 267 min-height: 100vh;
160 <view class="buy3_2" @click="popArgs">立即去选</view> 268 background: #F2F2F2;
161 </view> 269 padding-top: 10px;
162 </view> 270 box-sizing: border-box;
163 <view class="zhanwei"></view> 271 }
164 <view class="button"><view>立即结算</view></view> 272 hr{
165 </view> 273 border: none;
166 </template> 274 height: 1px;
167 <script> 275 background: #F2F2F2;
168 import CProgress from '../../components/UniSliper/UniSliper' 276 margin-top: 18px;
277 margin-bottom: 10px;
169 import store from '@/store' 278 }
170 279 .detail{
171 export default { 280 height: 272rpx;
172 components: { 281 background: #FFFFFF;
173 CProgress 282 border-radius: 8px;
174 }, 283 padding: 16px;
175 data(){ 284 box-sizing: border-box;
176 return{ 285 display: flex;
177 count: 1, 286 justify-content: space-between;
178 colour: '1.56非球面防蓝光_亚黑色', 287 align-items: center;
179 chooseNum : '', 288 }
180 isSplit: '' , 289 .detail1{
181 parameter:[ 290 height: 178rpx;
182 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, 291 width: 188rpx;
183 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, 292 image{
184 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, 293 width: 100%;
185 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, 294 height: 100%;
186 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, 295 border-radius: 8px;
187 ], 296 }
188 //镜片颜色 297 }
189 jp_colour:[ 298 .detail2{
190 {img:'/static/img/detail/Kuang/sun_jp.png'}, 299 width: 68%;
191 {img:'/static/img/detail/Kuang/sun_jp.png'}, 300 view{
192 {img:'/static/img/detail/Kuang/sun_jp.png'}, 301 margin-bottom: 6px;
193 {img:'/static/img/detail/Kuang/sun_jp.png'}, 302 font-family: PingFangSC-Regular;
194 {img:'/static/img/detail/Kuang/sun_jp.png'}, 303 }
195 {img:'/static/img/detail/Kuang/sun_jp.png'} 304 .detail2_name{
196 ], 305 font-size: 14px;
197 //配饰 306 color: #333333;
198 part:[ 307 letter-spacing: -0.26px;
199 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, 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 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 314 }
201 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, 315 .detail2_tui{
202 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 316 font-size: 10px;
203 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 317 color: #999999;
204 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, 318 letter-spacing: -0.19px;
205 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, 319 span{
206 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, 320 margin-right: 10px;
207 ], 321 }
208 //折射率 322 }
209 split:[ 323 .detail2_price{
210 {number: 1.56}, 324 font-size: 14px;
211 {number: 1.60}, 325 color: #FF6B4A;
212 {number: 1.67}, 326 letter-spacing: -0.26px;
213 {number: 1.71}, 327 }
214 {number: 1.74} 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 347 .choose{
216 ] 348 background: #FFFFFF;
217 } 349 padding: 16px;
218 }, 350 box-sizing: border-box;
219 351 margin-top: 10px;
220 computed: { 352 border-radius: 8px;
221 details(){ 353 .colour1{
222 return this.$store.state.detailStandard_k.list 354 span{
223 }, 355 font-family: PingFangSC-Medium;
224 }, 356 font-size: 16px;
225 onLoad:function(){ 357 color: #333333;
226 store.dispatch('detailStandard_k/fetch', { 358 letter-spacing: -0.3px;
227 uid: "1", 359 text-align: justify;
228 pid: "26", 360 line-height: 24px;
229 }); 361 font-weight: bold;
230 console.log(this.$store.state.detailStandard_k.list.data+'ssswwwwwwwws'); 362 }
231 console.log("ssssssssssssssssssssssssssss") 363 image{
232 }, 364 float: right;
233 methods: { 365 width: 40rpx;
234 counter(isadd){ 366 height: 36rpx;
235 if(isadd){ 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 this.count++ 375 }
237 }else{ 376 .colour_exp{
238 this.count <= 1? this.disabled = true:this.count-- 377 font-family: PingFangSC-Regular;
239 } 378 font-size: 12px;
240 }, 379 color: #666666;
241 colourChange(index,e){ 380 letter-spacing: 0;
242 this.colour = e ; //颜色选择 381 margin-top: 10px;
243 // console.log(index,e); 382 margin-bottom: 10px;
244 383 }
245 }, 384 .colour2{
246 viewChoose(index){ 385 display: grid;
247 this.chooseNum = index 386 grid-template-columns: repeat(5, 17%);
248 }, 387 justify-content: space-between ;
249 splitChoose(index){ 388 grid-row-gap: 10px;
250 this.isSplit = index 389 margin-bottom: 14px;
251 }, 390 .colour2_view{
252 popArgs(){ 391 border: 1px solid #F2F2F2;
253 uni.navigateTo({ 392 image{
254 url: '../detailsChoiceArgs/detailsChoiceArgs', 393 width: 100rpx;
255 success: res => {}, 394 height: 60rpx;
256 fail: () => {}, 395 }
257 complete: () => {} 396 }
258 }); 397 .colour2_viewed{
259 } 398 border: 1px solid #FF6B4A;
399 image{
400 width: 100rpx;
401 height: 60rpx;
402 }
260 } 403 }
261 404 }
262 } 405 }
263 </script> 406 .jp_colour2{
264 407 display: grid;
265 <style lang="scss"> 408 grid-template-columns: repeat(5, 13%);
266 .container{ 409 justify-content: start ;
267 min-height: 100vh; 410 grid-column-gap: 10px;
268 background: #F2F2F2; 411 grid-row-gap: 10px;
269 padding-top: 10px; 412 margin-bottom: 14px;
413 .jp_colour2_view{
270 box-sizing: border-box; 414 border: 1px solid #F2F2F2;
271 }
272 hr{ 415 image{
273 border: none; 416 width: 80rpx;
274 height: 1px; 417 height: 80rpx;
275 background: #F2F2F2; 418 }
276 margin-top: 18px; 419 }
277 margin-bottom: 10px;
278 }
279 .detail{
280 height: 272rpx;
281 background: #FFFFFF;
282 border-radius: 8px;
283 padding: 16px;
284 box-sizing: border-box;
285 display: flex;
286 justify-content: space-between;
287 align-items: center;
288 }
289 .detail1{
290 height: 178rpx;
291 width: 188rpx;
292 image{
293 width: 100%;
294 height: 100%;
295 border-radius: 8px;
296 }
297 }
298 .detail2{
299 width: 68%;
300 view{
301 margin-bottom: 6px;
302 font-family: PingFangSC-Regular;
303 }
304 .detail2_name{ 420 }
305 font-size: 14px; 421 .split{
306 color: #333333; 422 display: grid;
307 letter-spacing: -0.26px; 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 line-height: 18px; 435 font-family: PingFangSC-Regular;
309 overflow:hidden; 436 font-size: 12px;
310 text-overflow:ellipsis; 437 color: #666666;
311 display:-webkit-box; 438 letter-spacing: 0;
312 -webkit-box-orient:vertical; 439 text-align: center;
313 -webkit-line-clamp:2; 440 }
314 } 441 .split_colour2_actived{
315 .detail2_tui{ 442 background: rgba(255,107,74,0.15);
316 font-size: 10px; 443 color: #FF6B4A;
317 color: #999999;
318 letter-spacing: -0.19px;
319 span{
320 margin-right: 10px;
321 }
322 }
323 .detail2_price{
324 font-size: 14px;
325 color: #FF6B4A;
326 letter-spacing: -0.26px;
327 }
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{ 444 }
338 display: flex;
339 justify-content: center; 445 }
340 line-height: 32rpx; 446 .size,.part{
341 height: 32rpx; 447 margin-top:14px;
342 width: 32rpx; 448 .size1{
343 background-color: #F2F2F2; 449 display: flex;
344 color: #CFCFCF; 450 justify-content: space-between;
345 } 451 margin-bottom: 10px;
346 } 452 .size1_1{
347 .choose{ 453 font-weight: bold;
348 background: #FFFFFF; 454 font-family: PingFangSC-Medium;
349 padding: 16px; 455 font-size: 16px;
350 box-sizing: border-box; 456 color: #333333;
351 margin-top: 10px; 457 letter-spacing: -0.3px;
352 border-radius: 8px; 458 line-height: 24px;
353 .colour1{ 459 }
354 span{ 460 view{
355 font-family: PingFangSC-Medium; 461 span{
356 font-size: 16px; 462 font-family: PingFangSC-Regular;
357 color: #333333; 463 font-size: 14px;
358 letter-spacing: -0.3px; 464 color: #FF6B4A;
359 text-align: justify; 465 letter-spacing: -0.26px;
360 line-height: 24px; 466 margin-right: 12px;
361 font-weight: bold; 467 }
362 } 468 image{
363 image{ 469 width: 40rpx;
364 float: right; 470 height: 36rpx;
365 width: 40rpx; 471 }
366 height: 36rpx; 472 }
367 } 473 }
368 .colour1_span2{ 474 .size2{
369 font-family: PingFangSC-Regular; 475 view{
370 font-size: 12px; 476 display: inline-flex;
371 color: #666666; 477 align-items: center;
372 margin-left: 10px; 478 justify-content: center; //字体居中
373 font-weight: normal 479 margin-right: 12px;
374 } 480 margin-bottom: 20px;
375 } 481 width: 136rpx;
376 .colour_exp{ 482 height: 60rpx;
377 font-family: PingFangSC-Regular; 483 background: #F2F2F2;
378 font-size: 12px; 484 border-radius: 2px;
379 color: #666666; 485 font-family: PingFangSC-Regular;
380 letter-spacing: 0; 486 font-size: 12px;
381 margin-top: 10px; 487 color: #666666;
382 margin-bottom: 10px; 488 }
383 } 489 view:hover{
384 .colour2{ 490 color: #FF6B4A;
385 display: grid; 491 background: rgba(255,107,74,0.15);
386 grid-template-columns: repeat(5, 17%); 492 }
387 justify-content: space-between ; 493 }
388 grid-row-gap: 10px; 494 .D3_list{
389 margin-bottom: 14px; 495 margin-bottom: 4px;
390 .colour2_view{ 496 }
391 border: 1px solid #F2F2F2; 497 .D3_list>view{
392 image{ 498 display: flex;
393 width: 100rpx; 499 align-content: center;
394 height: 60rpx; 500 margin-bottom: 10px;
395 } 501 view{
396 } 502 margin-right: 10px;
397 .colour2_viewed{ 503 }
398 border: 1px solid #FF6B4A; 504 }
399 image{ 505 .D3_list image{
400 width: 100rpx; 506 width: 50px;
401 height: 60rpx; 507 height: 25px;
402 } 508 margin-right: 6px;
403 } 509 }
404 } 510 .D3_list span{
405 } 511 margin-left: 6px;
406 .jp_colour2{ 512 margin-right: 5px;
407 display: grid; 513 font-family: 'PingFangSC-Regular';
408 grid-template-columns: repeat(5, 13%); 514 }
409 justify-content: start ; 515 .D3_list_jDu{
410 grid-column-gap: 10px; 516 view{
411 grid-row-gap: 10px; 517 font-family: PingFangSC-Regular;
412 margin-bottom: 14px; 518 font-size: 10px;
413 .jp_colour2_view{ 519 color: #999999;
414 border: 1px solid #F2F2F2; 520 letter-spacing: -0.19px;
415 image{ 521 }
522 .D3_list1{
523 display: flex;
524 }
416 width: 80rpx; 525 }
417 height: 80rpx; 526 }
418 } 527 .part{
419 } 528 .part_som{
420 } 529 display: grid;
421 .split{ 530 justify-content: space-between;
422 display: grid; 531 grid-template-columns: repeat(4, 22%);
423 grid-template-columns: repeat(2, 45%); 532 grid-row-gap: 12px;
424 grid-column-gap: 10px; 533 margin-bottom: 14px;
425 grid-row-gap: 10px; 534 view{
426 margin-top: 10px ; 535 border: 1px solid #F2F2F2;
427 .split_colour2{ 536 height: 72rpx;
428 display: flex; 537 image{
429 justify-content: center; 538 width: 100%;
430 align-items: center; 539 height: 100%;
431 width: 300rpx; 540 }
432 height: 60rpx; 541 }
433 background: #F2F2F2; 542 .size_viewed{
434 border-radius: 2px; 543 border: 1px solid #FF6B4A;
544 height: 72rpx;
545 image{
546 width: 100%;
547 height: 100%;
548 }
src/store/modules/detailStandard_k.js
Diff comments   View file @51a5fe4
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 detailStandardUrl 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, data) => { 13 INIT: (state, data) => {
14 state.list = data; 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: detailStandardUrl, 21 url: detailStandardUrl,
22 data: param, 22 data: param,
23 success: (res) => { 23 success: (res) => {
24 commit('INIT', res.data); 24 commit('INIT', res.data);
25 }, 25 },
26 fail: (res) => { 26 fail: (res) => {
27 console.log(" detail fail status === > ", res); 27 console.log(" detail fail status === > ", res);
28 }, 28 },
29 complete: (res) => { 29 complete: (res) => {
30 console.log(" detail complete status === > ", res); 30 console.log(" detail complete status === > ", res);
31 }, 31 },
32 }) 32 })
33 }
34 } 33 }
35 34 }
36 export default { 35
37 namespaced: true, 36 export default {
38 state, 37 namespaced: true,
39 mutations, 38 state,
40 actions, 39 mutations,
41 } 40 actions,
src/store/modules/myOrder.js
Diff comments   View file @51a5fe4
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 orderList 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: orderList, 88 url: myOrderList,
89 data: param, 89 data: param,
90 success: (res) => { 90 success: (res) => {
91 <<<<<<< HEAD
92 const resData = {
93 ...res,
94 data,
95 }
96 console.log('data.data',res);
97 commit("INIT", resData.data.data);
98 =======
91 const resData = { 99 // console.log(res.data);
92 ...res, 100 commit("INIT", res.data.data);
101 >>>>>>> f0cf57997c2438808bb572407021a3e3a18ee0fb
93 data, 102 },
94 } 103 })
95 console.log('data.data',res); 104 }
96 commit("INIT", resData.data.data); 105 }
97 }, 106
98 }) 107 export default {
99 } 108 namespaced: true,
100 } 109 state,
101 110 mutations,
102 export default { 111 actions,
103 namespaced: true, 112 }
src/store/modules/test.js
Diff comments   View file @51a5fe4
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, data) => { 13 INIT: (state, data) => {
14 state.list = data; 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 shopList: '/app/prod/list', 3 read: '/app/prod/read',
4 4
5 // 获取首页商品列表 5 // 首页
6 category: '/app/prod/category2', 6 shopList: '/app/prod/list', // 获取首页商品列表
7 // 获取商品信息 7 category: '/app/prod/category2', // 获取首页商品分类
8 read: '/app/prod/read', 8 search: '/app/prod/search', // 首页搜索商品
9 9
10 // 首页 10 // 登陆
11 shopList: '/app/prod/list', // 获取首页商品列表 11 login: '/app/glass/getOpenId', // 登陆
12 category: '/app/prod/category', // 获取首页商品分类 12 getUserInfo: '/app/glass/userinfo', // 获取用户信息
13 13
14 // 登陆 14 // 我的订单
15 login: '/app/glass/getOpenId', // 登陆 15 myOrderList: '/app/order/list3', // 获取订单列表
16 getUserInfo: '/app/glass/userinfo', // 获取用户信息 16 orderRead: '/app/order/read', // 获取订单详情
17 17 cancelOrder: '/app/order/wait/del',//取消订单
18 // 我的订单 18 statusConfirm: '/app/order/statusConfirm',//订单操作
19 orderList: '/app/order/list', // 获取订单列表 19 payLog:'/app/pay/log',//调起支付
20 20
21 // 购物车 21 // 购物车
22 cartList: '/app/cart/list', // 获取购物车列表 22 cartList: '/app/cart/list', // 获取购物车列表
23 23 cartModi: '/app/cart/modi', // 修改购物车
24 // 我的 24 cartDel: '/app/cart/del', // 删除购物车
25 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 25 cartAdd: '/app/cart/add',// 添加购物车
26 26
27 // 选购页 27 // 我的
28 detailStandardUrl: '/app/prod/read', //获取商品的详细信息 28 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
29 29
30 } 30 // 选购页
31 31 detailStandardUrl: '/app/prod/read', //获取商品的详细信息
32 export default urlAlias; 32
33 33 }
34
35 export default urlAlias;
36