Adam / gulu-vue

Download as
Browse Code »

Commit 058f060df90e05e2dc0d43f7bae55c4637bdf1ff

Authored by mullins
2 parents 7d6833f2c7 d1ce60f3df
Exists in master

冲突修改

Showing 54 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @058f060
1 <template> 1 <template>
2 <view 2 <view
3 class="card" 3 class="card"
4 @tap="toGoods(goods.id,goods.goodType)" 4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.goodType?goods.goodType:goods.p_root_index)"
5 > 5 >
6 <image 6 <image
7 mode="widthFix" 7 mode="widthFix"
8 :src="goods.imgurl" 8 :src="goods.imgurl?goods.imgurl:goods.pic"
9 ></image> 9 ></image>
10 <view class="name">{{goods.name}}</view> 10 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
11 <view class="info"> 11 <view class="info">
12 <view class="priceBox"> 12 <view class="priceBox">
13 <view class="price">{{goods.price}}</view> 13 <view class="price">{{goods.price?goods.price:goods.real_price}}</view>
14 <view class="originCost"> 14 <view class="originCost">
15 {{goods.rsSon.Max_Price}} 15 {{goods.rsSon.Max_Price?goods.rsSon.Max_Price:goods.old_price}}
16 </view> 16 </view>
17 </view> 17 </view>
18 <view class="trade_num">{{goods.trade_num}}人购买</view> 18 <view class="trade_num">{{goods.trade_num}}人购买</view>
19 </view> 19 </view>
20 </view> 20 </view>
21 </template> 21 </template>
22 22
23 <script> 23 <script>
24 export default { 24 export default {
25 props: { 25 props: {
26 /** 26 /**
27 * 商品数据 27 * 商品数据
28 */ 28 */
29 goods: { 29 goods: {
30 id: Number, 30 id: Number,
31 imgurl: String, 31 imgurl: String,
32 name: String, 32 name: String,
33 rsSon: Object, 33 rsSon: Object,
34 originCost: String, 34 originCost: String,
35 price: String, 35 price: String,
36 trade_num: String, 36 trade_num: String,
37 goodType: String 37 goodType: String
38 } 38 }
39 39
40 }, 40 },
41 created () { 41 created () {
42 // console.log(this.goods) 42 // console.log(this.goods)
43 }, 43 },
44 data () { 44 data () {
45 return { 45 return {
46 46
47 } 47 }
48 }, 48 },
49 methods: { 49 methods: {
50 toGoods (id, type) { 50 toGoods (id, type) {
51 console.log('---', '../frameDetail/frameDetail?oderId=' + id) 51 console.log('---', '../frameDetail/frameDetail?oderId=' + id)
52 uni.navigateTo({ 52 uni.navigateTo({
53 url: '../frameDetail/frameDetail?oderId=' + id, 53 url: '../frameDetail/frameDetail?oderId=' + id,
54 success: res => {}, 54 success: res => {},
55 fail: () => {}, 55 fail: () => {},
56 complete: () => {} 56 complete: () => {}
57 }) 57 })
58 console.log('toGoods =====> id:' + id + '======>type:' + type) 58 console.log('toGoods =====> id:' + id + '======>type:' + type)
59 switch (type) { 59 switch (type) {
60 case 1: 60 case 1:
61 uni.navigateTo({ 61 uni.navigateTo({
62 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 62 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
63 success: res => {}, 63 success: res => {},
64 fail: () => {}, 64 fail: () => {},
65 complete: () => {} 65 complete: () => {}
66 }) 66 })
67 break 67 break
68 case 2: 68 case 2:
69 uni.navigateTo({ 69 uni.navigateTo({
70 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 70 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
71 success: res => {}, 71 success: res => {},
72 fail: () => {}, 72 fail: () => {},
73 complete: () => {} 73 complete: () => {}
74 }) 74 })
75 break 75 break
76 case 3: 76 case 3:
77 uni.navigateTo({ 77 uni.navigateTo({
78 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 78 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
79 success: res => {}, 79 success: res => {},
80 fail: () => {}, 80 fail: () => {},
81 complete: () => {} 81 complete: () => {}
82 }) 82 })
83 break 83 break
84 case 4: 84 case 4:
85 uni.navigateTo({ 85 uni.navigateTo({
86 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 86 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
87 success: res => {}, 87 success: res => {},
88 fail: () => {}, 88 fail: () => {},
89 complete: () => {} 89 complete: () => {}
90 }) 90 })
91 break 91 break
92 default : 92 default :
93 break 93 break
94 } 94 }
95 } 95 }
96 } 96 }
97 } 97 }
98 </script> 98 </script>
99 99
100 <style lang="scss"> 100 <style lang="scss">
101 image { 101 image {
102 width: 100%; 102 width: 100%;
103 height: 120rpx; 103 height: 120rpx;
104 } 104 }
105 .name { 105 .name {
106 width: 92%; 106 width: 92%;
107 height: 54rpx; 107 height: 54rpx;
108 padding: 5px 4%; 108 padding: 5px 4%;
109 display: -webkit-box; 109 display: -webkit-box;
110 -webkit-box-orient: vertical; 110 -webkit-box-orient: vertical;
111 -webkit-line-clamp: 2; 111 -webkit-line-clamp: 2;
112 text-align: justify; 112 text-align: justify;
113 overflow: hidden; 113 overflow: hidden;
114 font-size: 24rpx; 114 font-size: 24rpx;
115 color: #333333; 115 color: #333333;
116 } 116 }
117 .info { 117 .info {
118 display: flex; 118 display: flex;
119 justify-content: space-between; 119 justify-content: space-between;
120 align-items: center; 120 align-items: center;
121 width: 92%; 121 width: 92%;
122 padding: 5px 4% 5px 4%; 122 padding: 5px 4% 5px 4%;
123 .priceBox { 123 .priceBox {
124 display: flex; 124 display: flex;
125 justify-content: space-between; 125 justify-content: space-between;
126 align-items: center; 126 align-items: center;
127 .price { 127 .price {
128 color: #eb5d3b; 128 color: #eb5d3b;
129 font-size: 28rpx; 129 font-size: 28rpx;
130 font-weight: 600; 130 font-weight: 600;
131 margin-right: 10rpx; 131 margin-right: 10rpx;
132 } 132 }
133 .originCost { 133 .originCost {
134 text-decoration: line-through; 134 text-decoration: line-through;
135 color: #999999; 135 color: #999999;
136 font-size: 20rpx; 136 font-size: 20rpx;
137 } 137 }
138 } 138 }
139 .trade_num { 139 .trade_num {
140 color: #999999; 140 color: #999999;
141 font-size: 20rpx; 141 font-size: 20rpx;
142 } 142 }
143 } 143 }
144 </style> 144 </style>
145 145
src/components/UniCollapseItem/UniCollapseItem.vue
Diff comments   View file @058f060
1 <template> 1 <template>
2 <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }" 2 <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
3 class="uni-collapse-cell"> 3 class="uni-collapse-cell">
4 <view class="uni-collapse-cell__title" @click="onClick"> 4 <view class="uni-collapse-cell__title" @click="onClick">
5 <view v-if="iconText" class="uni-collapse-cell__title-iconText" v-bind:style="{background:background}">{{iconText}}</view>
5 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" /> 6 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
6 <text class="uni-collapse-cell__title-text">{{ title }}</text> 7 <text class="uni-collapse-cell__title-text">{{ title }}</text>
8 <text class="uni-collapse-cell__time-text">{{ time }}</text>
7 <!-- #ifdef MP-ALIPAY --> 9 <!-- #ifdef MP-ALIPAY -->
8 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" 10 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
9 class="uni-collapse-cell__title-arrow"> 11 class="uni-collapse-cell__title-arrow">
10 <uni-icons color="#bbb" size="20" type="arrowdown" /> 12 <uni-icons color="#bbb" size="20" type="arrowdown" />
11 </view> 13 </view>
12 <!-- #endif --> 14 <!-- #endif -->
13 <!-- #ifndef MP-ALIPAY --> 15 <!-- #ifndef MP-ALIPAY -->
14 <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" 16 <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
15 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" /> 17 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
16 <!-- #endif --> 18 <!-- #endif -->
17 </view> 19 </view>
18 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content"> 20 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
19 <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" 21 <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper"
20 :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}" 22 :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}">
21 >
22 <slot /> 23 <slot />
23 </view> 24 </view>
24 </view> 25 </view>
25 </view> 26 </view>
26 </template> 27 </template>
27 28
28 <script> 29 <script>
29 import UniIcons from '../UniIcons/UniIcons.vue' 30 import UniIcons from '../UniIcons/UniIcons.vue'
30 export default { 31 export default {
31 name: 'UniCollapseItem', 32 name: 'UniCollapseItem',
32 components: { 33 components: {
33 UniIcons 34 UniIcons
34 }, 35 },
35 props: { 36 props: {
36 title: { 37 title: {
37 // 列表标题 38 // 列表标题
38 type: String, 39 type: String,
39 default: '' 40 default: ''
40 }, 41 },
42 time: {
43 // 列表时间 朱海涛加的，验光数据需要
44 type: String,
45 default: ''
46 },
41 name: { 47 name: {
42 // 唯一标识符 48 // 唯一标识符
43 type: [Number, String], 49 type: [Number, String],
44 default: 0 50 default: 0
45 }, 51 },
46 disabled: { 52 disabled: {
47 // 是否禁用 53 // 是否禁用
48 type: Boolean, 54 type: Boolean,
49 default: false 55 default: false
50 }, 56 },
51 showAnimation: { 57 showAnimation: {
52 // 是否显示动画 58 // 是否显示动画
53 type: Boolean, 59 type: Boolean,
54 default: false 60 default: false
55 }, 61 },
56 open: { 62 open: {
57 // 是否展开 63 // 是否展开
58 type: Boolean, 64 type: Boolean,
59 default: false 65 default: false
60 }, 66 },
61 thumb: { 67 thumb: {
62 // 缩略图 68 // 缩略图
63 type: String, 69 type: String,
64 default: '' 70 default: ''
71 },
72 iconText:{
73 //名字头像
74 type:String,
75 default:''
65 } 76 }
66 }, 77 },
67 data() { 78 data() {
68 return { 79 return {
69 isOpen: false 80 isOpen: false,
81 background: ''
82
70 } 83 }
71 }, 84 },
72 watch: { 85 watch: {
73 open(val) { 86 open(val) {
74 this.isOpen = val 87 this.isOpen = val
75 } 88 }
76 }, 89 },
77 inject: ['collapse'], 90 inject: ['collapse'],
78 created() { 91 created() {
79 this.isOpen = this.open 92 this.isOpen = this.open
80 this.nameSync = this.name ? this.name : this.collapse.childrens.length 93 this.nameSync = this.name ? this.name : this.collapse.childrens.length
81 this.collapse.childrens.push(this) 94 this.collapse.childrens.push(this)
82 if (String(this.collapse.accordion) === 'true') { 95 if (String(this.collapse.accordion) === 'true') {
83 if (this.isOpen) { 96 if (this.isOpen) {
84 let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2] 97 let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
85 if (lastEl) { 98 if (lastEl) {
86 this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false 99 this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
87 } 100 }
88 } 101 }
89 } 102 }
90 }, 103 },
104 computed:{
105 //给头像搞个随机背景颜色，验光数据页面需要
106 getRandomColor(){
107 let r = Math.floor(Math.random()*256);
108 let g = Math.floor(Math.random()*256);
109 let b = Math.floor(Math.random()*256);
110 let color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
111 this.background = color
112 // return color;
113 }
114 },
91 methods: { 115 methods: {
92 onClick() { 116 onClick() {
93 if (this.disabled) { 117 if (this.disabled) {
94 return 118 return
95 } 119 }
96 if (String(this.collapse.accordion) === 'true') { 120 if (String(this.collapse.accordion) === 'true') {
97 this.collapse.childrens.forEach(vm => { 121 this.collapse.childrens.forEach(vm => {
98 if (vm === this) { 122 if (vm === this) {
99 return 123 return
100 } 124 }
101 vm.isOpen = false 125 vm.isOpen = false
102 }) 126 })
103 } 127 }
104 this.isOpen = !this.isOpen 128 this.isOpen = !this.isOpen
105 this.collapse.onChange && this.collapse.onChange() 129 this.collapse.onChange && this.collapse.onChange()
106 this.$forceUpdate() 130 this.$forceUpdate()
107 console.log(this.isOpen) 131 // console.log(this.isOpen)
108 } 132 },
109 } 133 }
110 } 134 }
111 </script> 135 </script>
112 136
113 <style lang="scss" scoped> 137 <style lang="scss" scoped>
114 @import '@/uni.scss'; 138 @import '@/uni.scss';
115 139
116 .uni-collapse-cell { 140 .uni-collapse-cell {
117 flex-direction: column; 141 flex-direction: column;
118 border-color: #FFFFFF; 142 border-color: #FFFFFF;
119 border-bottom-width: 1px; 143 border-bottom-width: 1px;
120 border-bottom-style: solid; 144 border-bottom-style: solid;
121 } 145 }
122 146
123 147
124 .uni-collapse-cell--hover { 148 .uni-collapse-cell--hover {
125 background-color: #FFFFFF; 149 background-color: #FFFFFF;
126 } 150 }
127 151
128 .uni-collapse-cell--open { 152 .uni-collapse-cell--open {
129 background-color: #FFFFFF; 153 background-color: #FFFFFF;
130 } 154 }
131 155
132 .uni-collapse-cell--disabled { 156 .uni-collapse-cell--disabled {
133 background-color: #FFFFFF; 157 background-color: #FFFFFF;
134 // opacity: 0.3; 158 // opacity: 0.3;
135 } 159 }
136 160
137 161
138 .uni-collapse-cell--hide { 162 .uni-collapse-cell--hide {
139 height: 48px; 163 height: 48px;
140 } 164 }
141 165
142 .uni-collapse-cell--animation { 166 .uni-collapse-cell--animation {
143 transition: transform 0s ease; 167 transition: transform all 0.3s ease;
144 transition-property: transform; 168 transition-property: transform;
145 transition-duration: 0s; 169 transition-duration: 0.3s;
146 transition-timing-function: ease; 170 transition-timing-function: ease;
147 } 171 }
148 172
149 .uni-collapse-cell__title { 173 .uni-collapse-cell__title {
150 // padding: 12px 12px; 174 // padding: 12px 12px;
151 font-size: 16px; 175 font-size: 16px;
152 color: #333333; 176 color: #333333;
153 position: relative; 177 position: relative;
154 /* #ifndef APP-NVUE */ 178 /* #ifndef APP-NVUE */
155 display: flex; 179 display: flex;
156 width: 100%; 180 width: 100%;
157 box-sizing: border-box; 181 box-sizing: border-box;
158 /* #endif */ 182 /* #endif */
159 height: 48px; 183 height: 48px;
160 line-height: 24px; 184 line-height: 24px;
161 flex-direction: row; 185 flex-direction: row;
162 justify-content: space-between; 186 justify-content: space-between;
163 align-items: center; 187 align-items: center;
164 } 188 }
165 189 .uni-collapse-cell__title-iconText{
190 border: 1px solid #FFFFFF;
191 height: 50rpx;
192 width: 50rpx;
193 border-radius: 26rpx;
194 // background-color: #47A6F0;
195 font-size: 12px;
196 color: #FFFFFF;
197 line-height: 50rpx;
198 text-align: center;
199 margin-right: 20rpx;
200 }
166 .uni-collapse-cell__title:active { 201 .uni-collapse-cell__title:active {
167 background-color: #FFFFFF; 202 background-color: #FFFFFF;
168 } 203 }
169 204
170 .uni-collapse-cell__title-img { 205 .uni-collapse-cell__title-img {
171 height: $uni-img-size-base; 206 height: $uni-img-size-base;
172 width: $uni-img-size-base; 207 width: $uni-img-size-base;
173 margin-right: 10px; 208 margin-right: 10px;
209 // height: 50rpx;
210 // width: 50rpx;
211 // border-radius: 25rpx;
212 // border-radius: 25rpx;
174 } 213 }
175 214
176 .uni-collapse-cell__title-arrow { 215 .uni-collapse-cell__title-arrow {
177 width: 20px; 216 width: 20px;
178 height: 20px; 217 height: 20px;
179 transform: rotate(0deg); 218 transform: rotate(-90deg);
180 transform-origin: center center; 219 transform-origin: center center;
181 220
182 } 221 }
183 222
184 .uni-collapse-cell__title-arrow-active { 223 .uni-collapse-cell__title-arrow-active {
185 transform: rotate(180deg); 224 transform: rotate(0deg);
186 } 225 }
187 226
188 .uni-collapse-cell__title-text { 227 .uni-collapse-cell__title-text {
189 flex: 1; 228 flex: 1;
190 font-size: $uni-font-size-base; 229 font-size: $uni-font-size-base;
191 /* #ifndef APP-NVUE */ 230 /* #ifndef APP-NVUE */
192 white-space: nowrap; 231 white-space: nowrap;
193 color: inherit; 232 color: inherit;
194 /* #endif */ 233 /* #endif */
195 /* #ifdef APP-NVUE */ 234 /* #ifdef APP-NVUE */
196 lines: 1; 235 lines: 1;
197 /* #endif */ 236 /* #endif */
198 overflow: hidden; 237 overflow: hidden;
199 text-overflow: ellipsis; 238 text-overflow: ellipsis;
239 font-size: 12px;
240 color: #333333;
241 }
242 .uni-collapse-cell__time-text{
243 font-size: 12px;
244 color: #999999;
245 margin-right: 20rpx;
200 } 246 }
201
202 .uni-collapse-cell__content { 247 .uni-collapse-cell__content {
203 overflow: hidden; 248 overflow: hidden;
204 } 249 }
205 250
206 .uni-collapse-cell__wrapper { 251 .uni-collapse-cell__wrapper {
207 /* #ifndef APP-NVUE */ 252 /* #ifndef APP-NVUE */
208 display: flex; 253 display: flex;
209 /* #endif */ 254 /* #endif */
210 flex-direction: column; 255 flex-direction: column;
211 } 256 }
212 257
213 .uni-collapse-cell__content--hide { 258 .uni-collapse-cell__content--hide {
214 // height: 0px; 259 // height: 0px;
215 // line-height: 0px; 260 // line-height: 0px;
216 } 261 }
src/components/UniSliper/UniSliper.vue
Diff comments   View file @058f060
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 },
9 {
10 "path" : "pages/addOpticsData/addOpticsData",
11 "style" : {
12 "navigationBarTitleText" : "验光数据"}
8 }, 13 },
9 { 14 {
10 "path" : "pages/myOrder/myOrder", 15 "path" : "pages/user/user",
11 "style" : { 16 "style" : {
12 "navigationBarTitleText" : "我的订单" 17 "navigationBarTitleText" : "我的"
13 } 18 }
14 }, 19 },
15 { 20 {
16 "path" : "pages/cart/cart", 21 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs",
17 "style" : { 22 "style" : {
18 "navigationBarTitleText" : "购物车" 23 "navigationBarTitleText" : "镜片名称名称"
19 } 24 }
20 }, 25 },
21 { 26 {
22 "path" : "pages/frameDetail/frameDetail", 27 "path" : "pages/purchaseLenses/purchaseLenses",
23 "style" : { 28 "style" : {
24 "navigationBarTitleText" : "产品详情" 29 "navigationBarTitleText" : "产品选购"
25 } 30 }
26 }, 31 },
27 { 32 {
28 "path" : "pages/lensDetails/lensDetails", 33 "path" : "pages/lensDetails/lensDetails",
29 "style" : { 34 "style" : {
30 "navigationBarTitleText" : "产品详情" 35 "navigationBarTitleText" : "产品详情"
31 } 36 }
32 }, 37 },
33 { 38 {
34 "path" : "pages/purchaseLenses/purchaseLenses", 39 "path" : "pages/myOrderPaying/myOrderPaying",
35 "style" : { 40 "style" : {
36 "navigationBarTitleText" : "产品选购" 41 "navigationBarTitleText" : "我的订单"
37 } 42 }
38 }, 43 },
39 { 44 {
45 "path" : "pages/myOrder/myOrder",
46 "style" : {
47 "navigationBarTitleText" : "我的订单"
48 }
49 },
50 {
51 "path" : "pages/cart/cart",
52 "style" : {
53 "navigationBarTitleText" : "购物车"
54 }
55 },
56 // {
57 // "path" : "pages/frameDetail/frameDetail",
58 // "style" : {
59 // "navigationBarTitleText" : "产品详情"
60 // }
61 // },
62 {
40 "path" : "pages/refundProgress/refundProgress", 63 "path" : "pages/refundProgress/refundProgress",
41 "style" : { 64 "style" : {
42 "navigationBarTitleText" : "申请退款" 65 "navigationBarTitleText" : "申请退款"
43 } 66 }
44 }, 67 },
45 { 68 {
46 "path" : "pages/address/addAddress", 69 "path" : "pages/address/addAddress",
47 "style" : { 70 "style" : {
48 "navigationBarTitleText" : "新增地址" 71 "navigationBarTitleText" : "新增地址"
49 } 72 }
50 }, 73 },
51 { 74 {
52 "path" : "pages/address/addressList", 75 "path" : "pages/address/addressList",
53 "style" : { 76 "style" : {
54 "navigationBarTitleText" : "地址管理" 77 "navigationBarTitleText" : "地址管理"
55 } 78 }
56 }, 79 },
57 { 80 {
58 "path" : "pages/confirmOrder/confirmOrder", 81 "path" : "pages/confirmOrder/confirmOrder",
59 "style" : { 82 "style" : {
60 "navigationBarTitleText" : "确认订单" 83 "navigationBarTitleText" : "确认订单"
61 } 84 }
62 }, 85 },
63 { 86 {
64 "path" : "pages/user/user", 87 "path" : "pages/refundment/refundWays",
65 "style" : {
66 "navigationBarTitleText" : "我的"
67 }
68 },
69 {
70 "path" : "pages/refundment/refundWays"
71 },
72 {
73 "path" : "pages/refundment/refundment"
74 }, 88 "style" : {
75 { 89 "navigationBarTitleText" : "退款方式"
76 "path" : "pages/predelivery/predelivery" 90 }
77 }, 91 },
78 { 92 {
79 "path" : "pages/customerService/customerService", 93 "path" : "pages/refundment/refundment",
80 "style" : { 94 "style" : {
81 "navigationBarTitleText" : "在线客服" 95 "navigationBarTitleText" : "申请退款"
82 } 96 }
83 }, 97 },
84 { 98 {
85 "path" : "pages/myOrderPaying/myOrderPaying", 99 "path" : "pages/predelivery/predelivery",
86 "style" : { 100 "style" : {
87 "navigationBarTitleText" : "我的订单" 101 "navigationBarTitleText" : "待发货"
88 } 102 }
89 }, 103 },
90 { 104 {
91 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", 105 "path" : "pages/customerService/customerService",
92 "style" : { 106 "style" : {
93 "navigationBarTitleText" : "镜片名称名称" 107 "navigationBarTitleText" : "在线客服"
94 } 108 }
95 }, 109 },
96 { 110 {
97 "path" : "pages/detailStandard/detailStandard_sun", 111 "path" : "pages/detailStandard/detailStandard_sun",
98 "style" : { 112 "style" : {
99 "navigationBarTitleText" : "太阳镜选购页" 113 "navigationBarTitleText" : "太阳镜选购页"
100 } 114 }
101 }, 115 },
116 {
102 { 117 "path" : "pages/detailStandard/detailStandard_k",
103 "path" : "pages/detailStandard/detailStandard_k", 118 "style" : {
104 "style" : { 119 "navigationBarTitleText" : "镜框选购页"
105 "navigationBarTitleText" : "镜框选购页" 120 }
106 } 121 }
107 } 122
108 ], 123 ],
109 "globalStyle" : { 124 "globalStyle" : {
110 "navigationBarTextStyle" : "black", 125 "navigationBarTextStyle" : "black",
111 "navigationBarTitleText" : "uni-app", 126 "navigationBarTitleText" : "uni-app",
112 "navigationBarBackgroundColor" : "#F8F8F8", 127 "navigationBarBackgroundColor" : "#F8F8F8",
113 "backgroundColor" : "#F8F8F8" 128 "backgroundColor" : "#F8F8F8"
114 }, 129 },
115 "tabBar" : { 130 "tabBar" : {
116 "color" : "#C0C4CC", 131 "color" : "#C0C4CC",
117 "selectedColor" : "#fa436a", 132 "selectedColor" : "#fa436a",
118 "borderStyle" : "black", 133 "borderStyle" : "black",
119 "backgroundColor" : "#ffffff", 134 "backgroundColor" : "#ffffff",
120 "list" : [ 135 "list" : [
121 { 136 {
122 "pagePath" : "pages/index/index", 137 "pagePath" : "pages/index/index",
123 "iconPath" : "static/tab-home.png", 138 "iconPath" : "static/tab-home.png",
124 "selectedIconPath" : "static/tab-home-current.png", 139 "selectedIconPath" : "static/tab-home-current.png",
125 "text" : "首页" 140 "text" : "首页"
126 }, 141 },
127 { 142 {
128 "pagePath" : "pages/cart/cart", 143 "pagePath" : "pages/cart/cart",
129 "iconPath" : "static/tab-cart.png", 144 "iconPath" : "static/tab-cart.png",
130 "selectedIconPath" : "static/tab-cart-current.png", 145 "selectedIconPath" : "static/tab-cart-current.png",
131 "text" : "购物车" 146 "text" : "购物车"
132 }, 147 },
133 { 148 {
134 "pagePath" : "pages/user/user", 149 "pagePath" : "pages/user/user",
135 "iconPath" : "static/tab-my.png", 150 "iconPath" : "static/tab-my.png",
136 "selectedIconPath" : "static/tab-my-current.png", 151 "selectedIconPath" : "static/tab-my-current.png",
137 "text" : "我的" 152 "text" : "我的"
138 } 153 }
139 ] 154 ]
140 }, 155 },
141 "condition" : { 156 "condition" : {
142 "current" : 0, 157 "current" : 0,
143 "list" : [ 158 "list" : [
144 { 159 {
145 "name" : "首页", 160 "name" : "首页",
146 "path" : "pages/index/index", 161 "path" : "pages/index/index",
162 "query" : ""
147 "query" : "" 163 }, {
148 }, { 164 "name" : "镜片、美瞳参数选购",
149 "name" : "镜片、美瞳参数选购", 165 "path" : "pages/purchaseLenses/purchaseLenses",
150 "path" : "pages/purchaseLenses/purchaseLenses", 166 "query" : ""
151 "query" : "" 167 }, {
152 }, { 168 "name" : "新增地址",
153 "name" : "新增地址", 169 "path" : "pages/address/addAddress",
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @058f060
File was created 1 <template>
2 <view class="wrap">
3 <view class="header">
4 <view class="headerLeft" @click=tapShow(0)>
5 <text>如何查看验光单？</text>
6 <image src="../../static/dataLook.png" mode="aspectFit"></image>
7 </view>
8 <view class="headerRight" @click=tapShow(1)>
9 <text>如何查看眼镜框架？</text>
10 <image src="../../static/glassLook.png" mode="aspectFit"></image>
11 </view>
12 </view>
13 <view class="dataMenu">
14 <uni-collapse accordion="true">
15 <view class="item" v-for="(loveItem,index) in loveList" :key="index">
16 <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
17 <view class="loveDataInfo">
18 <view class="dataInfoItem">
19 <text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text>
20 </view>
21 <view class="dataInfoItem">
22 <text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text>
23 </view>
24 <view class="dataInfoItem">
25 <text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text>
26 </view>
27 <view class="dataInfoItem">
28 <text>瞳距（PD）：</text><text>{{loveItem.pd}}</text>
29 </view>
30 </view>
31 </uni-collapse-item>
32 </view>
33 </uni-collapse>
34 </view>
35 <view class="footer">
36 <button class="btn" type="default">新建验光单</button>
37 </view>
38 </view>
39 </template>
40
41 <script>
42 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
43 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
44 // import uniPopup from '@/components/uni-popup/uni-popup.vue'
45 import store from '@/store';
46 export default {
47 components: {UniCollapse,UniCollapseItem},
48 data() {
49 return {
50
51 };
52 },
53 onLoad: function(option) {
54 //获取关心的人列表
55 store.dispatch('myLoveList/getLoveList', {
56 uid: "1",
57 });
58 },
59 computed:{
60 loveList() {
61 console.log(this.$store.state.myLoveList.loveList)
62 return this.$store.state.myLoveList.loveList || []
63 },
64 },
65 methods:{
66 tapShow(item){
67 switch(item){
68 // 0左边 1右边
69 case '0':
70
71 break;
72 case '1':
73
74 break;
75 }
76 },
77 //给时间搞一个nice的格式
78 getRightTime(time){
79 //如果小于10 则返回'0'+m
80 function add(m){return m<10?'0'+m:m}
81 const oldTime = (new Date(time)).getTime()
82 const year = new Date(oldTime).getFullYear()
83 const month = new Date(oldTime).getMonth()+1
84 const day = new Date(oldTime).getDate()
85 const newTime = add(year)+'-'+add(month)+'-'+add(day)
86 // console.log(newTime)
87 return newTime
88 },
89 getFirstName(name){
90 return name.substring(0,1)
91 }
92 }
93 }
94 </script>
95
96 <style lang="scss">
97 .wrap{
98 min-height: 100vh;
99 width: 100%;
100 background-color: #F2F2F2;
101 .header{
102 height: 304rpx;
103 width: 100%;
104 background-color: #FFFFFF;
105 display: flex;
106 justify-content: space-around;
107 align-items: center;
108 view{
109 height: 210rpx;
110 width: 304rpx;
111 background: #FDF7F5;
112 border-radius: 4px;
113 border-radius: 4px;
114 display: flex;
115 flex-direction: column;
116 align-items: center;
117 justify-content: center;
118 text{
119 font-size: 12px;
120 color: #333333;
121 }
122 image{
123 height: 144rpx;
124 width: 144rpx;
125 }
126 }
127 }
128 .dataMenu{
129 margin-top: 20rpx;
130 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
131 width: 100%;
132 background-color: #FFFFFF;
133 .item{
134 padding: 0 40rpx;
135 .loveDataInfo{
136 padding: 0 44rpx 0 70rpx;
137 display: flex;
138 justify-content: space-around;
139 flex-direction: column;
140 align-items: flex-start;
141 .dataInfoItem{
142 font-size: 12px;
143 color: #333333;
144 margin-bottom: 34rpx;
145 text{
146 font-size: 12px;
147 color: #2A2A2A;
148 margin-right: 20rpx;
149 }
150 }
151 }
152 }
153 }
154 .footer{
155 width: 100%;
156 position: fixed;
157 bottom: 0;
158 left: 0;
159 .btn{
160 width: 100%;
161 height: 112rpx;
162 line-height: 112rpx;
163 background: #FF6B4A;
164 font-size: 16px;
165 color: #FFFFFF;
166 }
167 }
168 }
169
170 </style>
171
src/pages/cart/cart.vue
Diff comments   View file @058f060
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 3 <block v-if="cartList.length==0">
4 <view class="card">
5 <view class="cardHeader">
6 <block v-if="pIsoPen">
7 <view class="partentChecked" @click="pChange(pIsoPen)">
8 <span class="status correct"></span>
9 </view>
10 </block>
11 <block v-else>
12 <view class="partentCheck" @click="pChange(pIsoPen)"></view>
13 </block>
14 <image src="../../static/store.png" mode="aspectFill"></image>
15 <text>非常戴镜</text>
16 </view>
17 4
18 <view class="cardBody"> 5 </block>
19 <template v-if="childIsOpen.child1"> 6 <block v-else>
20 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> 7 <view class="card">
21 <span class="status correct"></span> 8 <view class="cardHeader">
9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
10 @click="pChange(pIsoPen)">
11 <span class="correct"></span>
22 </view> 12 </view>
23 </template> 13 <image src="../../static/store.png" mode="aspectFill"></image>
24 <template v-else> 14 <text>非常戴镜</text>
25 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> 15 </view>
26 </template> 16
27 <view class="goodInfo"> 17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
28 <view class="imageWrap"> 18 @longpress="delCart(item.cart_id,index)">
29 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
20 @click="Change(childIsOpen[index],index)">
21 <span class="correct"></span>
30 </view> 22 </view>
31 <view class="infoRight"> 23 <view class="goodInfo">
32 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> 24 <view class="imageWrap">
33 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> 25 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
34 <view class="icon"></view>
35 </view> 26 </view>
36 <view class="priceBox"> 27 <view class="infoRight">
37 <view class="price">￥{{198}}</view> 28 <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view>
38 <text>(限购{{maxCount}}副)</text> 29 <view class="describ" @tap="toshop(item.pid,item.p_root_index)">
39 <view class="counter"> 30 <text>
40 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 31 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
41 <text>{{count}}</text> 32 {{tag.label+`&nbsp;&nbsp;`}}
42 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 33 </block>
34 </text>
35 <view class="icon"></view>
36 </view>
37 <view class="priceBox">
38 <view class="price">￥{{item.nowPrice*item.num}}</view>
39 <text>(限购{{maxCount}}副)</text>
40 <view class="counter">
41 <view class="btn" disabled="this.addDisabled" type="default"
42 @click="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view>
43 <text>{{item.num}}</text>
44 <view class="btn" disabled="this.desDisabled" type="default"
45 @click="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view>
46 </view>
43 </view> 47 </view>
44 </view> 48 </view>
45 </view> 49 </view>
46 </view> 50 </view>
47 </view> 51 </view>
48 <view class="cardBody"> 52 </block>
49 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
50 <template v-if="childIsOpen.child2">
51 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
52 <span class="status correct"></span>
53 </view>
54 </template>
55 <template v-else>
56 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
57 </template>
58 <view class="goodInfo">
59 <view class="imageWrap">
60 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
61 </view>
62 <view class="infoRight">
63 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
64 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
65 <view class="icon"></view>
66 </view>
67 <view class="priceBox">
68 <view class="price">￥198</view>
69 <text>(限购{{maxCount}}副)</text>
70 <view class="counter">
71 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
72 <text>{{count}}</text>
73 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
74 </view>
75 </view>
76 </view>
77 </view>
78 </view>
79 </view>
80
81 <view class="footer"> 53 <view class="footer">
82 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 54 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
83 <view class="footerRight"> 55 <view class="footerRight">
84 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover"> 56 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
85 <view class="paybtn">立即支付</view> 57 <view class="paybtn" >立即结算</view>
86 </navigator> 58 </navigator>
87 </view> 59 </view>
88 </view> 60 </view>
89 61
90 </view> 62 </view>
91 </template> 63 </template>
92 64
93 <script> 65 <script>
94 import store from '@/store'; 66 import store from '@/store';
95 67
96 export default { 68 export default {
97 69
98 data() { 70 data() {
99 return { 71 return {
100 totalPrice: 360, 72 totalPrice: 0,
101 count:1, 73 pIsoPen:false,
74 // childIsOpen:[],
102 maxCount:20, 75 maxCount:20,
103 pIsoPen: false,
104 childIsOpen:{
105 "child1":true,
106 "child2":true
107 },
108 } 76 }
109 }, 77 },
110 computed:{ 78 computed:{
79
111 cartList() { 80 cartList() {
112 // 也可以从 getters 获取 81 // console.log('cart-list', this.$store.state.cart.cartList);
113 console.log('cart-list', this.$store.state.cart.cartList);
114 return this.$store.state.cart.cartList; 82 return this.$store.state.cart.cartList;
83 },
84 childIsOpen(){
85 let temp=[];
86 temp.length=this.$store.state.cart.cartList.length;
87 for (let i = 0; i < temp.length; i++) {
88 temp[i]= false
89 }
90 console.log('this.childisOPne===>',temp)
91 return temp
115 } 92 }
116 }, 93 },
117 onLoad: function() { 94 onLoad: function() {
95 // 判断是否授权
96 // uni.getSetting({
97 // success(res) {
98 // console.log('authSetting',res.authSetting)
99 // if(res.authSetting['scope.userInfo'] !== true) {
100
101 // uni.switchTab({
102 // url:'/pages/user/user'
103 // })
104 // }else {
105 // }
106 // }
107 // })
108
109 // console.log('usr-my',this.$store.state.user.userInfo)
110 // store.dispatch('cart/addCart',{
111 // "num":1,
112 // "pid": 7,//产品id
113 // "uid":1,
114 // "sk_id": 72,
115 // "price": 120,
116 // "mp_id":1,
117 // "checkedSKU":{
118 // "discount": "45",
119 // "in_price": "6000",
120 // "kc": "0",
121 // "model_pic": null,
122 // "out_price": 191.8,
123 // "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg",
124 // "pid": "7",
125 // "real_price": 99,
126 // "sk_id": "89",
127 // "sku_name": "1.56非球面防蓝光_黑",
128 // "sku_shop_value": "",
129 // "sku_value": "58_61",
130 // "status": "1",
131 // },
132 // });
118 store.dispatch('cart/getCartList',{ 133 store.dispatch('cart/getCartList',{
119 uid: 1, //用户id 134 uid: 1, //用户id
120 }); 135 });
121 }, 136 },
137
122 methods: { 138 methods: {
123 counter(isadd){ 139 // 跳转到对应的选购页面
140 toshop(id,type){
141 console.log('===',id,type)
142 switch(type){
143 case 1:
144 uni.navigateTo({
145 url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type,
146 success: res => {},
147 fail: () => {},
148 complete: () => {}
149 });
150 break;
151 case 2:
152 uni.navigateTo({
153 url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type,
154 success: res => {},
155 fail: () => {},
156 complete: () => {}
157 });
158 break;
159 case 3||4:
160 uni.navigateTo({
161 url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
162 success: res => {},
163 fail: () => {},
164 complete: () => {}
165 });
166 break;
167 // case 4:
168 // uni.navigateTo({
169 // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
170 // success: res => {},
171 // fail: () => {},
172 // complete: () => {}
173 // });
174 case 5:
175 uni.navigateTo({
176 url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type,
177 success: res => {},
178 fail: () => {},
179 complete: () => {}
180 });
181 break;
182 default :
183 break
184 }
185 },
186 toGoods(id,type){
187 uni.navigateTo({
188 url: `../frameDetail/frameDetail?oderId=`+id,
189 success: res => {},
190 fail: () => {},
191 complete: () => {}
192 });
193 console.log('toGoods =====> id:'+id +"======>type:"+type)
194 switch(type){
195 case 1:
196 uni.navigateTo({
197 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
198 success: res => {},
199 fail: () => {},
200 complete: () => {}
201 });
202 break;
203 case 2:
204 uni.navigateTo({
205 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
206 success: res => {},
207 fail: () => {},
208 complete: () => {}
209 });
210 break;
211 case 3:
212 uni.navigateTo({
213 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
214 success: res => {},
215 fail: () => {},
216 complete: () => {}
217 });
218 break;
219 case 4:
220 uni.navigateTo({
221 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
222 success: res => {},
223 fail: () => {},
224 complete: () => {}
225 });
226 break;
227 default :
228 break
229 }
230 },
231
232 counter(index,isadd,mp_id,sk_id,num,cart_id){
233 // console.log('===>>counter ===>num',num)
234 // console.log('===>>counter ===>isadd',isadd)
235 num=parseInt(num);
124 if(isadd){ 236 if(isadd){
125 this.count >= this.maxCount? this.addDisabled = true:this.count++; 237 if(num>=this.maxCount){
238 this.addDisabled = true
239 } else{
240 this.addDisabled= true
241 // 修改num
242 store.dispatch('cart/modiCart',{
243 uid: 1,
244 // openid: '',
245 mp_id: mp_id,
246 sk_id: sk_id,
247 cart_id:cart_id,
248 num:num+1,
249 args:{
250 index:index,
251 isadd:isadd,
252 }
253 })
254 this.addDisabled= false
255 }
256 }else{
257 if(num<=1){
258 this.desDisabled = true
259 } else{
260 this.desDisabled = false
261 // post 请求修改相关参数
262 store.dispatch('cart/modiCart',{
263 uid: 1,
264 // openid: '',
265 mp_id: mp_id,
266 sk_id: sk_id,
267 cart_id:cart_id,
268 num:num-1,
269 args:{
270 index:index,
271 isadd:isadd,
272 }
273 })
274 this.desDisabled = true
275 }
276 }
277 },
278
279 Change(isopen,indexC){
280 // console.log('lalla===>',isopen)
281 this.childIsOpen[indexC]=!isopen
282 if(!isopen){
283 this.totalPrice=this.totalPrice+(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
126 }else{ 284 }else{
127 this.count <= 1? this.desDisabled = true:this.count--; 285 this.totalPrice=this.totalPrice-(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
286 }
287 let m=true;
288 for (let i = 0; i < this.childIsOpen.length; i++) {
289 m=m&this.childIsOpen[i]
290 }
291 if(m==1){
292 this.pIsoPen=true
293 } else{
294 this.pIsoPen=false
128 } 295 }
129 }, 296 },
130 pChange(isopen){ 297 pChange(isopen){
131 // console.log(isopen)
132 this.pIsoPen=!isopen 298 this.pIsoPen=!isopen
133 this.childIsOpen.child1=!isopen 299 for (let i = 0; i < this.childIsOpen.length; i++) {
134 this.childIsOpen.child2=!isopen 300 this.childIsOpen[i]=!isopen
135 },
136 cChange(isopen,child){
137 // console.log(child)
138 if(child==='child1'){
139 this.childIsOpen.child1=!isopen
140 } 301 }
141 if(child==='child2'){ 302 if(this.pIsoPen){
142 this.childIsOpen.child2=!isopen 303 // 计算总价逻辑
304 if(this.childIsOpen.length!=0){
305 for (let i = 0; i < this.childIsOpen.length; i++) {
306 if(this.childIsOpen[i]){
307 this.totalPrice= this.totalPrice+(this.$store.state.cart.cartList[i].num*this.$store.state.cart.cartList[i].nowPrice)
308 }
309 }
310 }
311 } else{
312 this.totalPrice=0
143 } 313 }
314
315 },
316 delCart(cart_id,index){
317 // console.log('userInfo',this.$store.state.user.userInfo)
318 cart_id=parseInt(cart_id)
319 // console.log('delcart------>cart_id',cart_id)
320 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
321 // console.log('delcart======>index',index)
322 uni.showModal({
323 title: "是否删除该商品",
324 // content: '是否删除该商品',
325 success: function (res) {
326 if (res.confirm) {
327 // this.$store.state.cart.cartList.splice(index,1)
328 store.dispatch('cart/delCart',{
329 uid: 1, //用户id
330 openid: "",
331 cart_id: cart_id, // 要修改的购物车id
332 arg:index, // 由于action 传参是能接收两参数，因此将index放入对象
333 });
334 console.log('用户点击确定');
335 }
336 }
337 });
338
144 } 339 }
145 } 340 }
146 } 341 }
147 </script> 342 </script>
148 343
149 <style lang="scss"> 344 <style lang="scss">
150 .content { 345 .content {
151 min-height: 100vh; 346 min-height: 100vh;
152 background-color: #f2f2f2; 347 background-color: #f2f2f2;
153 display: flex; 348 display: flex;
154 flex-direction: column; 349 flex-direction: column;
155 align-items: center; 350 align-items: center;
156 justify-content: space-between; 351 justify-content: space-between;
157 padding: 20rpx 40rpx; 352 padding: 20rpx 40rpx;
158 box-sizing: border-box; 353 box-sizing: border-box;
159 354
160 .partentCheck{ 355 .partentCheck{
161 width: 16px; 356 width: 16px;
162 height: 16px; 357 height: 16px;
163 border-radius: 18px; 358 border-radius: 18px;
164 border: 1px solid #CFCFCF; 359 border: 1px solid #CFCFCF;
165 background-color: #FFFFFF; 360 background-color: #FFFFFF;
166 } 361 }
167 .partentChecked{ 362 .partentChecked{
168 width: 18px; 363 width: 18px;
169 height: 18px; 364 height: 18px;
170 border-radius: 18px; 365 border-radius: 18px;
171 background-color: #FF6B4A; 366 background-color: #FF6B4A;
172 .correct { 367 .correct {
173 display: inline-block; 368 display: inline-block;
174 width: 5px; 369 position: relative;
175 height: 1px; 370 width: 10rpx;
371 height: 2rpx;
176 background: #FFFFFF; 372 background: #FFFFFF;
177 line-height: 0; 373 line-height: 0;
178 font-size: 0; 374 font-size: 0;
179 position: relative; 375 position: relative;
180 top: -6px; 376 top: -7px;
181 left: 4px; 377 left: 4px;
182 -webkit-transform: rotate(45deg); 378 -webkit-transform: rotate(45deg);
183 } 379 }
184 .correct:after { 380 .correct:after {
185 content: '/'; 381 content: '/';
186 display: block; 382 display: block;
187 width: 8px; 383 width: 16rpx;
188 height: 1px; 384 height: 2rpx;
189 background: #FFFFFF; 385 background: #FFFFFF;
190 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 386 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
191 } 387 }
192 } 388 }
193 389
194 .card{ 390 .card{
195 background-color: #FFFFFF; 391 background-color: #FFFFFF;
196 border-radius: 16rpx; 392 border-radius: 16rpx;
197 box-sizing: border-box; 393 box-sizing: border-box;
198 padding: 36rpx 36rpx 36rpx 18rpx; 394 padding: 36rpx 36rpx 36rpx 18rpx;
199 display: flex; 395 display: flex;
200 flex-direction: column; 396 flex-direction: column;
201 align-items: center; 397 align-items: center;
202 justify-content: space-between; 398 justify-content: space-between;
399 margin-bottom: 180rpx;
203 .cardHeader{ 400 .cardHeader{
204 width: 100%; 401 width: 100%;
205 height: 36rpx; 402 height: 36rpx;
206 display: flex; 403 display: flex;
207 align-items: center; 404 align-items: center;
208 justify-content: flex-start; 405 justify-content: flex-start;
209 image{ 406 image{
210 height: 32rpx; 407 height: 32rpx;
211 width: 32rpx; 408 width: 32rpx;
212 padding-left: 6px; 409 padding-left: 6px;
213 padding-right: 10px; 410 padding-right: 10px;
214 } 411 }
215 text{ 412 text{
216 // font-family: PingFangSC-Regular; 413 // font-family: PingFangSC-Regular;
217 font-size: 14px; 414 font-size: 14px;
218 color: #333333; 415 color: #333333;
219 letter-spacing: -0.26px; 416 letter-spacing: -0.26px;
220 } 417 }
221 } 418 }
222 .cardBody{ 419 .cardBody{
223 width: 100%; 420 width: 100%;
224 height: 300rpx; 421 height: 300rpx;
225 display: flex; 422 display: flex;
226 align-items: center; 423 align-items: center;
227 justify-content: space-between; 424 justify-content: space-between;
228 .goodInfo{ 425 .goodInfo{
229 width: 95%; 426 width: 95%;
230 display: flex; 427 display: flex;
231 flex-direction: row; 428 flex-direction: row;
232 justify-content: flex-start; 429 justify-content: flex-start;
233 padding-left: 6px; 430 padding-left: 6px;
234 .imageWrap{ 431 .imageWrap{
235 height: 188rpx; 432 height: 188rpx;
236 width: 188rpx; 433 width: 188rpx;
237 margin-right: 28rpx; 434 margin-right: 28rpx;
238 image{ 435 image{
239 border-radius: 4px; 436 border-radius: 4px;
240 height: 188rpx; 437 height: 188rpx;
241 width: 188rpx; 438 width: 188rpx;
242 } 439 }
243 } 440 }
244 .infoRight{ 441 .infoRight{
245 display: flex; 442 display: flex;
246 flex-direction: column; 443 flex-direction: column;
247 align-items: flex-start; 444 align-items: flex-start;
248 justify-content: space-between; 445 justify-content: space-between;
249 height: 240rpx; 446 height: 240rpx;
250 .goodName{ 447 .goodName{
448 display: -webkit-box;
449 -webkit-box-orient: vertical;
450 -webkit-line-clamp: 2;
451 text-align: justify;
452 overflow: hidden;
251 font-size: 28rpx; 453 font-size: 28rpx;
252 color: #333333; 454 color: #333333;
253 } 455 }
254 .describ{ 456 .describ{
255 width: 100%; 457 width: 100%;
256 height: 80rpx; 458 height: 80rpx;
257 box-sizing: border-box; 459 box-sizing: border-box;
258 padding: 10rpx; 460 padding: 10rpx;
259 font-size: 20rpx; 461 font-size: 20rpx;
462 letter-spacing: -0.23px;
463 text-align: justify;
260 color: #999999; 464 color: #999999;
261 background: #F2F2F2; 465 background: #F9F9F9;
262 display: flex; 466 display: flex;
263 justify-content: center; 467 justify-content: center;
264 align-items: center; 468 align-items: center;
265 text{ 469 text{
266 text-overflow: -o-ellipsis-lastline; 470 text-overflow: -o-ellipsis-lastline;
267 overflow: hidden; 471 overflow: hidden;
268 text-overflow: ellipsis; 472 text-overflow: ellipsis;
269 display: -webkit-box; 473 display: -webkit-box;
270 -webkit-line-clamp: 2; 474 -webkit-line-clamp: 2;
271 line-clamp: 2; 475 line-clamp: 2;
272 -webkit-box-orient: vertical; 476 -webkit-box-orient: vertical;
273 } 477 }
274 // .icon{ 478 // .icon{
275 // transform: rotate(90deg); 479 // transform: rotate(90deg);
276 // height: 13px; 480 // height: 13px;
277 // width: 20px; 481 // width: 20px;
278 482
279 // } 483 // }
280 .icon{ 484 .icon{
281 width: 0; 485 width: 0;
282 height: 0; 486 height: 0;
283 border-left: 5px transparent; 487 border-left: 5px transparent;
284 border-right: 5px transparent; 488 border-right: 5px transparent;
285 border-top: 5px #979797; 489 border-top: 5px #979797;
286 border-bottom: 0 transparent; 490 border-bottom: 0 transparent;
287 border-style: solid; 491 border-style: solid;
288 position: relative; 492 position: relative;
289 margin-left: 10px; 493 margin-left: 10px;
290 // transform: scaleY(-1); 494 // transform: scaleY(-1);
291 } 495 }
292 .icon::after{ 496 .icon::after{
293 content: ''; 497 content: '';
294 position: absolute; 498 position: absolute;
295 top: -6.5px; 499 top: -6.5px;
296 left: -5px; 500 left: -5px;
297 border-left: 5px transparent; 501 border-left: 5px transparent;
298 border-right: 5px transparent; 502 border-right: 5px transparent;
299 border-top: 5px #FFFFFF; 503 border-top: 5px #FFFFFF;
300 border-bottom: 0 transparent; 504 border-bottom: 0 transparent;
301 border-style: solid; 505 border-style: solid;
302 } 506 }
303 } 507 }
304 .priceBox{ 508 .priceBox{
305 display: flex; 509 display: flex;
306 justify-content: space-between; 510 justify-content: space-between;
307 align-items: center; 511 align-items: center;
308 // margin-top: 26px; 512 // margin-top: 26px;
309 width: 100%; 513 width: 100%;
310 font-size: 14px; 514 font-size: 14px;
311 color: #999999; 515 color: #999999;
312 .price{ 516 .price{
313 color: #FF6B4A; 517 color: #FF6B4A;
314 font-size: 28rpx; 518 font-size: 28rpx;
315 } 519 }
316 .counter{ 520 .counter{
317 display: flex; 521 display: flex;
318 flex-direction: row; 522 flex-direction: row;
319 justify-content: space-between; 523 justify-content: space-between;
320 align-items: center; 524 align-items: center;
321 font-size: 28rpx; 525 font-size: 28rpx;
322 color: #333333; 526 color: #333333;
323 width: 122rpx; 527 width: 122rpx;
324 .btn{ 528 .btn{
325 display: flex; 529 display: flex;
326 justify-content: center; 530 justify-content: center;
327 line-height: 32rpx; 531 line-height: 32rpx;
328 height: 32rpx; 532 height: 32rpx;
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @058f060
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 @058f060
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 @7d6833f
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/pages/myOrder/components/OrderCard.vue
Diff comments   View file @058f060
1 <template> 1 <template>
2 <view> 2 <view>
3 <view class="card" v-if="current === order.orderType" > 3 <view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)">
4 <view class="cardHeader"> 4 <view class="cardHeader">
5 <text class="orderId">订单号：{{order.orderId}}</text> 5 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text>
6 <text class="orderType" v-if="order.orderType===1">待付款</text> 6 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
7 <text class="orderType" v-if="order.orderType===2">待发货</text> 7 <text class="orderType" v-if="status=='0'">待付款</text>
8 <text class="orderType" v-if="order.orderType === 3">待收货</text> 8 <text class="orderType" v-if="status=='1'">待收货</text>
9 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 9 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
10 <text class="orderType" v-if="order.orderType === 5">已完成</text> 10 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
11 </view> 11 </view>
12 <view class="orderCardInfo"> 12 <view class="orderCardInfo" v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
13 <image :src="order.img" mode="aspectFill"></image> 13 <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
14 <view class="infoText"> 14 <view class="infoText">
15 <view class="orderName">{{order.name}}</view> 15 <view class="orderName">{{orderInfo.p_name}}</view>
16 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> 16 <view class="orderDescrib">{{orderInfo.p_name}}</view>
17 <view class="infoText-bottom"> 17 <view class="infoText-bottom">
18 <view class="markPrice">{{order.price}}</view> 18 <view class="markPrice">{{orderInfo.nowPrice}}</view>
19 <view class="buy-num">X{{order.buyNum}}</view> 19 <view class="buy-num">X {{orderInfo.num}}</view>
20 </view> 20 </view>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> 23 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
24 <view class="btns" v-if="order.orderType === 1"> 24 <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
25 <view class="btn-type1">申请退款</view> 25 <view class="btns" v-if="status == '0'">
26 <view class="btn-type1" >取消订单</view>
26 <view class="btn-type2">去支付</view> 27 <view class="btn-type2">去支付</view>
27 </view> 28 </view>
28 <view class="btns" v-if="order.orderType === 0"> 29 <view class="btns" v-if="status == '1'">
29 <view class="btn-type1">再次购买</view> 30 <view class="btn-type2">确认收货</view>
30 </view> 31 </view>
32 <view class="btns" v-if="status == '2'">
33 <view class="btn-type2">再次购买</view>
34 </view>
35 <!-- <view class="btns" v-if="status == '3'">
36 <view class="btn-type2">再次购买</view>
37 </view> -->
31 </view> 38 </view>
32 <view class="card" v-if="current === 0" > 39 <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">
33 <view class="cardHeader"> 40 <view class="cardHeader">
34 <text class="orderId">订单号：{{order.orderId}}</text> 41 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text>
35 <text class="orderType" v-if="order.orderType===1">待付款</text> 42 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
36 <text class="orderType" v-if="order.orderType===2">待发货</text> 43 <text class="orderType" v-if="status=='0'">待付款</text>
37 <text class="orderType" v-if="order.orderType === 3">待收货</text> 44 <text class="orderType" v-if="status=='1'">待收货</text>
38 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 45 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
46 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
39 </view> 47 </view>
40 <view class="orderCardInfo"> 48 <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
41 <image :src="order.img" mode="aspectFill"></image> 49 <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
42 <view class="infoText"> 50 <view class="infoText">
43 <view class="orderName">{{order.name}}</view> 51 <view class="orderName">{{orderInfo.p_name}}</view>
44 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> 52 <view class="orderDescrib">{{orderInfo.p_name}}</view>
45 <view class="infoText-bottom"> 53 <view class="infoText-bottom">
46 <view class="markPrice">{{order.price}}</view> 54 <view class="markPrice">{{orderInfo.nowPrice}}</view>
47 <view class="buy-num">X{{order.buyNum}}</view> 55 <view class="buy-num">X {{orderInfo.num}}</view>
48 </view> 56 </view>
49 </view> 57 </view>
50 </view> 58 </view>
51 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> 59 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
52 <view class="btns" v-if="order.orderType === 1"> 60 <view class="btns" v-if="status == '0'">
53 <view class="btn-type1" @click="toRefundment">申请退款</view> 61 <view class="btn-type1" >取消订单</view>
54 <view class="btn-type2">去支付</view> 62 <view class="btn-type2">去支付</view>
55 </view> 63 </view>
56 <view class="btns" v-if="order.orderType === 0"> 64 <view class="btns" v-if="status == '1'">
57 <view class="btn-type1">再次购买</view> 65 <view class="btn-type2">确认收货</view>
66 </view>
67 <view class="btns" v-if="status == '2'">
68 <view class="btn-type2">再次购买</view>
58 </view> 69 </view>
70 <!-- <view class="btns" v-if="status == '3'">
71 <view class="btn-type2">再次购买</view>
72 </view> -->
59 </view> 73 </view>
60 </view> 74 </view>
61 </template> 75 </template>
62 76
63 <script> 77 <script>
64 export default { 78 export default {
65 props: { 79 props: {
66 /** 80 /**
67 * 订单数据 81 * 订单数据
68 */ 82 */
69 order: { 83 order: {
70 orderId: Number, 84 // orderId: Number,
71 img: String, 85 // img: String,
72 name: String, 86 // name: String,
73 originCost:String, 87 // originCost:String,
74 price: String, 88 // price: String,
75 orderType:Number, 89 // orderType:Number,
76 buyNum:Number 90 // buyNum:Number,
91 finished_time: null,
92 is_refound: String,
93 mch_id: String,
94 money_of_dcw: String,
95 money_of_partner: String,
96 money_of_shop: String,
97 orderJudge: Boolean,
98 order_info: {
99 address:{
100 cityName: String,
101 countyName: String,
102 detailInfo: String,
103 errMsg: String,
104 nationalCode: String,
105 postalCode: String,
106 provinceName: String,
107 telNumber: String,
108 userName: String,
109 },
110 cartinfo: ["127"],
111 keyname: "330_1588911391",
112 lefttime: Number,
113 list:[
114 {
115 cart_id: "127",
116 imgUrl: String,
117 img_index_url: null,
118 memo: String,
119 mp_id: String,
120 nowPrice: String,
121 num: String,
122 oldPrice: Number,
123 p_discount: String,
124 p_name: String,
125 p_root_index: String,
126 p_sale_price: String,
127 peopleName: String,
128 pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"],
129 pid: String,
130 sk_id: String,
131 }
132 ],
133 orderDesc: String,
134 total_fee: Number,
135 },
136 partner_uid: String,
137 pay_cate: String,
138 pay_id: String,
139 pay_time: String,
140 pay_wood_desc: String,
141 pay_wood_id: String,
142 prepay_id: String,
143 re_check_staus: String,
144 shopid: String,
145 split_userid: String,
146 status: String,
147 // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价
148 total_fee: String,
149 uid: String,
77 }, 150 },
78 /** 151 /**
79 * 当前选择 152 * 当前选择
80 */ 153 */
81 current:Number 154 current:Number
82 155
83 }, 156 },
84 onLoad() { 157 created() {
85 // console.log('dd'); 158 console.log(this.order);
86 console.log('order', this.props.order); 159 // console.log(this.order.status );
160 // console.log(this.current);
161 },
162 computed:{
163 status(){
164 return this.order.status
165 },
166 orderInfoList(){
167 return this.order.order_info[0]
168 }
87 }, 169 },
88 data() { 170 data() {
89 return { 171 return {
90 }; 172 };
91 }, 173 },
92 methods:{ 174 methods:{
93 toRefundment(){ 175 toRefundment(){
94 uni.navigateTo({ 176 uni.navigateTo({
95 url: '../refundment/refundment', 177 url: '../refundment/refundment',
96 success: res => {}, 178 success: res => {},
97 fail: () => {}, 179 fail: () => {},
98 complete: () => {} 180 complete: () => {}
99 }); 181 });
182 },
183 toOrderInfo(status,payId){
184 console.log(status,payId)
185 switch(status){
186 // 0待付款 1待收货 2已收货 3 已评价
187 case '0':
188 uni.navigateTo({
189 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
190 fail(errMsg) {
191 console.log(errMsg)
192 }
193 })
194 break;
195 case '1':
196 uni.navigateTo({
197 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
198 fail(errMsg) {
199 console.log(errMsg)
200 }
201 })
202
203 break;
204 case '2 || 3':
205 uni.navigateTo({
206 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
207 fail(errMsg) {
208 console.log(errMsg)
209 }
210 })
211
212 break;
213
214
215 default:
216 break;
217
218 }
100 } 219 }
101 } 220 }
102 } 221 }
103 </script> 222 </script>
104 223
105 <style lang="scss"> 224 <style lang="scss">
106 .card{ 225 .card{
107 width: 670rpx; 226 width: 670rpx;
108 height: 478rpx; 227 height: 478rpx;
109 background: #FFFFFF; 228 background: #FFFFFF;
110 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); 229 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
111 border-radius: 8px; 230 border-radius: 8px;
112 border-radius: 8px; 231 border-radius: 8px;
113 margin-top: 20rpx; 232 margin-top: 20rpx;
114 padding: 40rpx; 233 padding: 40rpx;
115 box-sizing: border-box; 234 box-sizing: border-box;
116 .cardHeader{ 235 .cardHeader{
117 width: 100%; 236 width: 100%;
118 height: 40rpx; 237 height: 40rpx;
119 display: flex; 238 display: flex;
120 justify-content: space-between; 239 justify-content: space-between;
121 align-items: center; 240 align-items: center;
122 .orderId{ 241 .orderId{
123 font-size: 12px; 242 font-size: 12px;
124 color: #999999; 243 color: #999999;
125 } 244 }
126 .orderType{ 245 .orderType{
127 font-size: 14px; 246 font-size: 14px;
128 color: #FF6B4A; 247 color: #FF6B4A;
129 } 248 }
130 } 249 }
131 .orderCardInfo{ 250 .orderCardInfo{
132 width: 100%; 251 width: 100%;
133 height: 188rpx; 252 height: 188rpx;
134 display: flex; 253 display: flex;
135 flex-direction: row; 254 flex-direction: row;
136 justify-content: space-between; 255 justify-content: space-between;
137 align-items: center; 256 align-items: center;
138 margin-top: 40rpx; 257 margin-top: 40rpx;
139 image{ 258 image{
140 height: 188rpx; 259 height: 188rpx;
141 width: 188rpx; 260 width: 188rpx;
142 margin-right: 24rpx; 261 margin-right: 24rpx;
143 } 262 }
144 .infoText{ 263 .infoText{
145 display: flex; 264 display: flex;
146 flex-direction: column; 265 flex-direction: column;
147 justify-content: space-between; 266 justify-content: space-between;
148 align-items: flex-start; 267 align-items: flex-start;
149 height: 188rpx; 268 height: 188rpx;
269 width: 368rpx;
150 } 270 }
151 .orderName{ 271 .orderName{
152 font-size: 14px; 272 font-size: 14px;
153 color: #333333; 273 color: #333333;
274 display: -webkit-box;
275 overflow: hidden;
276 -webkit-box-orient: vertical;
277 -webkit-line-clamp: 2;
154 } 278 }
155 .orderDescrib{ 279 .orderDescrib{
156 font-size: 12px; 280 font-size: 12px;
157 color: #999999; 281 color: #999999;
282 display: -webkit-box;
283 overflow: hidden;
284 -webkit-box-orient: vertical;
285 -webkit-line-clamp: 2;
158 } 286 }
159 .infoText-bottom{ 287 .infoText-bottom{
160 display: flex; 288 display: flex;
161 flex-direction: row; 289 flex-direction: row;
162 justify-content: space-between; 290 justify-content: flex-start;
163 align-items: center; 291 align-items: center;
164 width: 100%; 292 width: 100%;
165 .markPrice{ 293 .markPrice{
166 font-size: 14px; 294 font-size: 14px;
167 color: #FF6B4A; 295 color: #FF6B4A;
296 margin-right: 20rpx;
168 } 297 }
169 .buy-num{ 298 .buy-num{
170 font-size: 12px; 299 font-size: 12px;
171 color: #999999; 300 color: #999999;
172 } 301 }
173 } 302 }
174 } 303 }
175 .payPrice{ 304 .payPrice{
176 text-align: right; 305 text-align: right;
177 margin: 20rpx 0; 306 margin: 20rpx 0;
178 font-size: 14px; 307 font-size: 14px;
179 color: #333333; 308 color: #333333;
180 .priceNum{ 309 .priceNum{
181 font-size: 14px; 310 font-size: 14px;
182 color: #FF6B4A; 311 color: #FF6B4A;
183 } 312 }
184 } 313 }
185 .btns{ 314 .btns{
186 display: flex; 315 display: flex;
187 justify-content: flex-end; 316 justify-content: flex-end;
188 align-items: center; 317 align-items: center;
189 .btn-type1{ 318 .btn-type1{
190 height: 48rpx; 319 height: 48rpx;
191 width: 156rpx; 320 width: 156rpx;
192 border: 1px solid #FF6B4A; 321 border: 1px solid #FF6B4A;
193 border-radius: 12px; 322 border-radius: 12px;
194 border-radius: 12px; 323 border-radius: 12px;
195 text-align: center; 324 text-align: center;
196 line-height: 48rpx; 325 line-height: 48rpx;
197 font-size: 12px; 326 font-size: 12px;
198 color: #FF6B4A; 327 color: #FF6B4A;
199 } 328 }
200 .btn-type2{ 329 .btn-type2{
201 height: 48rpx; 330 height: 48rpx;
202 width: 140rpx; 331 width: 140rpx;
203 background: #FF6B4A; 332 background: #FF6B4A;
204 border-radius: 12px; 333 border-radius: 12px;
205 border-radius: 12px; 334 border-radius: 12px;
206 text-align: center; 335 text-align: center;
207 line-height: 48rpx; 336 line-height: 48rpx;
208 font-size: 12px; 337 font-size: 12px;
209 color: #FFFFFF; 338 color: #FFFFFF;
210 margin-left: 20rpx; 339 margin-left: 20rpx;
211 } 340 }
212 } 341 }
213 } 342 }
214 </style> 343 </style>
215 344
src/pages/myOrder/myOrder.vue
Diff comments   View file @058f060
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <view class="searchBar"> 5 <!-- <view class="searchBar">
6 <icon class="searchIcon" type="search" size="14"></icon> 6 <icon class="searchIcon" type="search" size="14"></icon>
7 <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> 7 <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
8 </view> 8 </view> -->
9 <view class="screenBar"> 9 <view class="screenBar">
10 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > 10 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
11 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 11 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
12 </view> 12 </view>
13 </view> 13 </view>
14 </view> 14 </view>
15 <view class="orderList" > 15 <view class="orderList" >
16 <view 16 <view
17 v-for="(order) in orderList" 17 v-for="(order) in orderList"
18 :key="order.orderId" 18 :key="order.orderId"
19 > 19 >
20 <OrderCard :order = "order" :current="current"></OrderCard> 20 <OrderCard :order = "order" :current="current"></OrderCard>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="footer">已显示全部</view> 23 <view class="footer" >没有更多订单了，去商城看看吧~</view>
24 </view> 24 </view>
25 </template> 25 </template>
26 <script> 26 <script>
27 import OrderCard from './components/OrderCard.vue'; 27 import OrderCard from './components/OrderCard.vue';
28 import store from '@/store'; 28 import store from '@/store';
29 29
30 export default { 30 export default {
31 components:{ 31 components:{
32 'OrderCard': OrderCard 32 'OrderCard': OrderCard
33 }, 33 },
34 data() { 34 data() {
35 return { 35 return {
36 //顶部筛选项
36 screenItems: [ 37 screenItems: [
37 {current:0,text:'全部'}, 38 {current:"10",text:'全部'},
38 {current:1,text:'待付款'}, 39 {current:"0",text:'待付款'},
39 {current:2,text:'待发货'}, 40 {current:"1",text:'待收货'},
40 {current:3,text:'待收货'}, 41 {current:"2",text:'已完成'},
41 {current:4,text:'退款售后'}, 42 // {current:"3",text:'已评价'},
43 // {current:"4",text:'退款'},
42 ], 44 ],
43 current: 0, 45 //当前所在item 默认10-->全部
44 //订单数据 46 current: "10",
45 // orderList:[
46 // { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
47 // { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
48 // { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
49 // { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
50 // { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
51 // { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
52 // { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
53 // { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
54 // { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
55 // ],
56 }; 47 };
57 }, 48 },
58 49
59 onLoad: function() { 50 onLoad: function(option) {
51 //获取订单列表
60 store.dispatch('myOrder/getList', { 52 store.dispatch('myOrder/getList', {
61 uid: "1", 53 uid: "1",
62 way: "0", 54 way: "",
63 }); 55 });
56 //从user过来传的status，给current，以显示对应item
57 this.current = option.status
64 }, 58 },
65 computed: { 59 computed: {
66 orderList() { 60 orderList() {
67 console.log('orderList', this.$store.state.myOrder.orderlist); 61 // console.log('orderList', this.$store.state.myOrder.orderList);
68 return this.$store.state.myOrder.orderlist; 62 return this.$store.state.myOrder.orderList;
69 } 63 }
70 }, 64 },
71 methods:{ 65 methods:{
66 //tab点击事件
72 onClickItem(e) { 67 onClickItem(e) {
73 if (this.current !== e) { 68 if (this.current !== e) {
74 this.current = e; 69 this.current = e;
75 } 70 }
76 } 71 }
72
77 } 73 }
78 } 74 }
79 </script> 75 </script>
80 76
81 <style lang="scss"> 77 <style lang="scss">
82 .content { 78 .content {
83 display: flex; 79 display: flex;
84 flex-direction: column; 80 flex-direction: column;
85 align-items: center; 81 align-items: center;
86 background-color: #F7F6F6; 82 background-color: #F7F6F6;
87 min-height: 100vh; 83 min-height: 100vh;
88 .header{ 84 .header{
89 background-color: #ffffff; 85 background-color: #ffffff;
90 width: 100%; 86 width: 100%;
91 height: 232rpx; 87 // height: 232rpx;
92 padding: 40rpx 40rpx 36rpx 40rpx; 88 padding: 20rpx 40rpx 16rpx 40rpx;
93 box-sizing: border-box; 89 box-sizing: border-box;
94 position: fixed; 90 position: fixed;
95 top: 0; 91 top: 0;
96 left: 0; 92 left: 0;
97 .searchBar { 93 // .searchBar {
98 width: 670rpx; 94 // width: 670rpx;
99 display: flex; 95 // display: flex;
100 justify-content: center; 96 // justify-content: center;
101 align-items: center; 97 // align-items: center;
102 box-sizing: border-box; 98 // box-sizing: border-box;
103 padding: 0rpx 16rpx; 99 // padding: 0rpx 16rpx;
104 border: 1px solid #FF6B4A; 100 // border: 1px solid #FF6B4A;
105 border-radius: 8rpx; 101 // border-radius: 8rpx;
106 background-color: #ffffff; 102 // background-color: #ffffff;
107 } 103 // }
108 104
109 .screenBar{ 105 .screenBar{
110 width: 670rpx; 106 width: 670rpx;
111 height: 110rpx; 107 // height: 110rpx;
108 height: 70rpx;
112 display: flex; 109 display: flex;
113 flex-direction: row; 110 flex-direction: row;
114 justify-content: space-between; 111 justify-content: space-between;
115 align-items: center; 112 align-items: center;
116 color: #333333; 113 color: #333333;
117 font-size: 32rpx; 114 font-size: 32rpx;
118 } 115 }
119 .screenItem{ 116 .screenItem{
120 height: 50rpx; 117 height: 50rpx;
121 font-size: 32rpx; 118 font-size: 32rpx;
122 color: #333333; 119 color: #333333;
123 display: flex; 120 display: flex;
124 justify-content: center; 121 justify-content: center;
125 align-items: center; 122 align-items: center;
126 transition:all 0.2s; 123 transition:all 0.2s;
127 } 124 }
128 .active{ 125 .active{
129 // font-size: 34rpx; 126 // font-size: 34rpx;
130 color: #EC5D3B; 127 color: #EC5D3B;
131 } 128 }
132 .searchIpt { 129 .searchIpt {
133 height: 68rpx; 130 height: 68rpx;
134 width: 670rpx; 131 width: 670rpx;
135 padding: 16rpx; 132 padding: 16rpx;
136 font-size: 28rpx; 133 font-size: 28rpx;
137 box-sizing: border-box; 134 box-sizing: border-box;
138 } 135 }
139 } 136 }
140 .orderList{ 137 .orderList{
141 margin-top: 232rpx; 138 // margin-top: 232rpx;
139 margin-top: 132rpx;
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @058f060
1 <!-- 订单待付款 待收货 -->
1 <template> 2 <template>
2 3 <view class="content">
3 <view class="content"> 4 <!-- 待付款 -->
4 <view class="order-hr"></view> 5 <view
5 <view class="order-time">
6 <text>请在</text> 6 class="order-time"
7 <!-- <text class="p2"></text> -->
8 <uni-countdown 7 v-if="status == '0'"
9 color="#EC5D3B" 8 >
10 splitor-color="#EC5D3B" 9 <text>请在</text>
10 <uni-countdown
11 color="#EC5D3B"
12 splitor-color="#EC5D3B"
13 :show-day="false"
14 :hour="0"
15 :second="getTime"
16 @timeup=timeup
17 ></uni-countdown>
11 :show-day="false" 18 <text>内完成付款</text>
12 :hour="0" 19 </view>
13 :minute="59" 20 <!-- 待收货 -->
14 :second="58" 21 <view
15 style="margin: 36rpx 20rpx 0 20rpx" 22 class="headerBanner"
16 ></uni-countdown> 23 v-if="status == '1'"
17 <text>内完成付款</text> 24 >
18 </view> 25 <view class="bannerLeft">
19 <view class="order"> 26 <view class="T1">卖家已发货</view>
20 <view class="order-user"> 27 <view class="T2">还剩 确认收货</view>
21 <view class="order-user-head"> 28 </view>
22 <text class="p1">钱大大</text> 29 <image
23 <text class="p2">18823749843</text> 30 src="../../static/car.png"
24 </view> 31 mode="aspectFill"
25 <view class="order-user-body"> 32 ></image>
26 <image src="../../static/myorder-paying-location.png"></image> 33 </view>
27 <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text> 34 <view class="order">
28 </view> 35 <view class="order-user">
29 </view> 36 <view class="order-user-head">
30 <view class="order-info"> 37 <text class="p1">{{orderAddressInfo.userName}}</text>
38 <text class="p2">{{orderAddressInfo.telNumber}}</text>
39 </view>
40 <view class="order-user-body">
41 <image src="../../static/myorder-paying-location.png"></image>
31 <view class="order-info-head"> 42 <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
32 <image src="../../static/myorder-paying-pic.png"></image>
33 <view class="order-info-head-r"> 43 </view>
34 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> 44 </view>
35 <view 45 <view class="order-info">
36 class="p2" 46 <view
37 style="margin: 0;" 47 class="order-info-head"
38 > 48 v-for="(orderInfoListItem,index) in orderInfoList"
39 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 49 :key="index"
40 <!-- <view class="arrow"></view> --> 50 >
41 </view> 51 <image
42 <text class="p3"><span>￥180</span><span class="p4">X1</span></text> 52 :src="orderInfoListItem.imgUrl"
43 </view> 53 mode="aspectFill"
44 </view> 54 ></image>
45 <!-- <view class="order-info-goodsnum"> 55 <view class="order-info-head-r">
46 <text>X1</text> 56 <text class="p1">{{orderInfoListItem.p_name}}</text>
47 </view> --> 57 <view
48 <text class="order-info-freight"> 58 class="p2"
49 <text class="p1">运费</text> 59 style="margin: 0;"
50 <text class="p2">0.00</text> 60 >
51 </text> 61 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
52 <text class="order-info-discount"> 62 <!-- <view class="arrow"></view> -->
53 <text class="p1">优惠</text> 63 </view>
54 <text class="p2">-￥70.00</text> 64 <view class="infoText-bottom">
55 </text> 65 <view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
56 <text class="order-info-price"> 66 <view class="buy-num">X {{orderInfoListItem.num}}</view>
57 <text class="p1">实付</text> 67 </view>
58 <text class="p2">￥110</text> 68 </view>
59 </text> 69 </view>
60 <text class="order-info-num"> 70 <!-- <view class="order-info-goodsnum">
61 <text>订单号：203486795859605849</text> 71 <text>X1</text>
62 </text> 72 </view> -->
63 <text class="order-info-time"> 73 <text class="order-info-freight">
64 <text>下单时间：2020-10-22 14:32:42</text> 74 <text class="p1">运费</text>
65 </text> 75 <text class="p2">{{orderInfo.trans_price}}</text>
76 </text>
77 <text class="order-info-discount">
78 <text class="p1">优惠</text>
79 <text class="p2">-￥{{totalDiscount}}</text>
80 </text>
66 <view class="order-info-hr"></view> 81 <text class="order-info-price">
67 <view class="order-info-contact"> 82 <text class="p1">实付</text>
68 <image src="../../static/myorder-paying-contact.png"></image> 83 <text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
69 <text>联系客服</text> 84 </text>
70 </view> 85 <text class="order-info-num">
86 <text>订单号：{{orderInfo.prepay_id}}</text>
71 </view> 87 </text>
72 </view> 88 <text class="order-info-time">
73 <view class="order-confim"> 89 <text>下单时间：{{orderInfo.pay_time}}</text>
74 <button class="b1">取消订单</button> 90 </text>
75 <button class="b2">立即支付</button> 91 <view class="order-info-hr"></view>
76 </view> 92 <view class="order-info-contact">
77 </view> 93 <image src="../../static/myorder-paying-contact.png"></image>
78 </template> 94 <text>联系客服</text>
95 </view>
96 </view>
97 </view>
98 <view
99 class="order-confim"
100 v-if="status == '0'"
79 101 >
102 <button
103 class="b1"
104 @click="cancleOrder"
105 >取消订单</button>
106 <button
107 class="b2"
108 @click="paylog"
109 >立即支付</button>
110 </view>
111
112 <view
113 class="order-confim"
114 v-if="status == '1'"
115 >
116 <!-- <button class="b1">取消订单</button> -->
117 <button
118 class="b2"
119 @click="confirmOrder"
120 >确认收货</button>
121 </view>
122 </view>
123 </template>
124
125 <script>
126 import store from '@/store'
127 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
128 export default {
129 components: {
130 UniCountdown
131 },
132 data () {
133 return {
134 // orderInfo:{},
135 payId: '',
136 status: '',
137 uid: '',
138 openid: '',
139 lefttime: 0
140
141 }
142 },
143 onLoad: function (option) {
144 console.log(option)
145 this.payId = option.payId
146 this.status = option.status
147 const openid = uni.getStorageSync('openid')
148 const uid = this.$store.state.user.uid
149 this.uid = uid
150 this.openid = openid
80 <script> 151 store.dispatch('orderRead/getOrderInfo', {
81 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 152 pay_id: this.payId,
82 export default { 153 uid: '1',
154 openid: openid
155 })
156
157 // this.orderInfo = this.$store.state.orderRead.orderInfo
158 },
159 computed: {
160 // 获取订单详细信息
161 orderInfo () {
162 console.log(this.$store.state.orderRead.orderInfo)
163 return this.$store.state.orderRead.orderInfo || {}
164 },
165 orderInfoList () {
166 const orderInfoList = this.orderInfo.order_info[0].list
167 return orderInfoList
168 },
169 // 获取订单地址信息
170 orderAddressInfo () {
171 return this.orderInfo.order_info[0].address
172 },
173 // 订单付款时间
174 getTime () {
175 return this.orderInfo.order_info[0].lefttime
176 },
177 // 计算总优惠额
178 totalDiscount () {
179 const discountInfoList = this.orderInfo.discount_info
180 let totalDiscount = 0
181 if (discountInfoList) {
182 discountInfoList.map((discountItem, index) => {
183 totalDiscount += Number(discountItem.value)
184 })
185 }
186 // console.log(totalDiscount)
187 return totalDiscount
188 }
189 },
190 methods: {
191 // 取消订单
192 timeup () {
193 this.cancleOrder()
83 components: { 194 },
84 UniCountdown 195 cancleOrder () {
85 }, 196 const uid = this.uid
86 data () { 197 const openid = this.openid
87 return { 198 uni.showModal({
88 scrollHeight: false 199 title: '提示',
200 content: '现在取消，订单不可恢复哦，确认取消吗？',
89 } 201 success: function (res) {
90 }, 202 if (res.confirm) {
91 methods: { 203 store.dispatch('cancelOrder/cancel', {
92 204 keyname: '1',
93 } 205 uid: uid,
94 } 206 openid: openid
95 </script> 207 })
96 208 } else if (res.cancel) {
97 <style lang="scss" scoped> 209 console.log('用户点击取消')
98 .content {
99 display: flex; 210 }
100 flex-direction: column; 211 }
101 justify-content: center; 212 })
102 align-items: center; 213 },
103 background-color: #f2f2f2;
104 }
105
106 .order { 214 paylog () {
215
107 min-height: 1196rpx; 216 },
108 margin-bottom: 112rpx; 217 confirmOrder () {
109 background: #f2f2f2; 218 store.dispatch('statusConfirm/confirm', {
110 } 219 uid: this.uid,
111 .order-hr { 220 openid: this.openid,
112 width: 100%; 221 oldway: '1',
222 way: '2',
223 pay_id: this.payId,
224 judgeContent: '',
225 orderInfo: this.orderInfo.order_info
113 height: 1px; 226 }).then(
114 background-color: #e9e9e9; 227 setTimeout(() => {
115 } 228 uni.navigateBack()
116 .order-time { 229 }, 1500)
117 width: 100%; 230 )
118 height: 140rpx; 231 }
119 background-color: #fff; 232 }
120 display: flex; 233 }
121 justify-content: center; 234 </script>
122 text { 235
123 // font-family: PingFangSC-Regular; 236 <style lang="scss" scoped>
124 margin-top: 48rpx; 237 .content {
125 font-size: 14px; 238 min-height: 100vh;
126 color: #333333; 239 display: flex;
127 letter-spacing: -0.26px; 240 flex-direction: column;
128 } 241 justify-content: flex-start;
242 align-items: center;
243 background-color: #f2f2f2;
244 }
245
246 .order {
247 margin-bottom: 112rpx;
248 background: #f2f2f2;
249 margin-top: 140rpx;
250 width: 670rpx;
251 }
252
253 .order-time {
254 width: 100%;
255 height: 140rpx;
256 background-color: #fff;
257 display: flex;
258 justify-content: center;
259 align-items: center;
260 position: fixed;
261 top: 0;
262 left: 0;
263 text {
264 // font-family: PingFangSC-Regular;
265 // margin-top: 48rpx;
266 font-size: 14px;
267 color: #333333;
268 letter-spacing: -0.26px;
269 }
129 .p2 { 270 .p2 {
130 // font-family: DINAlternate-Bold;
131 margin: 42rpx 20rpx 0 20rpx; 271 // font-family: DINAlternate-Bold;
132 font-size: 18px; 272 margin: 42rpx 20rpx 0 20rpx;
133 color: #ec5d3b; 273 font-size: 18px;
134 letter-spacing: -0.34px; 274 color: #ec5d3b;
135 } 275 letter-spacing: -0.34px;
136 } 276 }
137 277 }
138 .order-user { 278 .headerBanner {
139 width: 670rpx; 279 width: 100%;
140 height: 228rpx;
141 background: #ffffff; 280 height: 140rpx;
142 border-radius: 14rpx; 281 background: #4a90e2;
143 margin: 0 auto; 282 padding: 26rpx 60rpx 24rpx 60rpx;
144 margin-top: 20rpx; 283 box-sizing: border-box;
145 margin-bottom: 20rpx; 284 color: #ffffff;
146 .order-user-head { 285 display: flex;
147 display: flex; 286 justify-content: space-between;
148 height: 108rpx; 287 align-items: center;
149 width: 100%; 288 position: fixed;
150 align-items: center; 289 top: 0;
151 margin-left: 126rpx; 290 left: 0;
152 .p1 { 291 .bannerLeft {
153 // font-family: PingFangSC-Regular; 292 font-size: 36rpx;
154 font-size: 14px; 293 display: flex;
155 color: #333333; 294 flex-direction: column;
156 letter-spacing: -0.26px; 295 justify-content: center;
157 margin-right: 20rpx; 296 align-items: center;
158 } 297 .T2 {
159 .p2 { 298 font-size: 24rpx;
160 // font-family: PingFangSC-Regular; 299 }
161 font-size: 14px; 300 }
162 color: #999999; 301 image {
163 letter-spacing: -0.26px; 302 height: 56rpx;
164 } 303 width: 72rpx;
165 } 304 }
166 .order-user-body { 305 }
167 display: flex; 306
168 width: 100%; 307 .order-user {
169 image { 308 height: 228rpx;
170 width: 24px; 309 background: #ffffff;
171 height: 26px; 310 border-radius: 14rpx;
172 margin: 12rpx 32rpx 0 40rpx; 311 margin: 0 auto;
173 } 312 margin-top: 20rpx;
174 .p3 { 313 margin-bottom: 20rpx;
175 // font-family: PingFangSC-Semibold;
176 font-size: 14px; 314 .order-user-head {
177 color: #333333; 315 display: flex;
178 letter-spacing: -0.26px; 316 height: 108rpx;
179 } 317 align-items: center;
180 } 318 margin-left: 126rpx;
181 } 319 .p1 {
182 320 // font-family: PingFangSC-Regular;
183 .order-info { 321 font-size: 14px;
184 width: 670rpx; 322 color: #333333;
185 background-color: #fff; 323 letter-spacing: -0.26px;
186 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); 324 margin-right: 20rpx;
187 border-radius: 16rpx; 325 }
188 margin: 0 auto; 326 .p2 {
189 view { 327 // font-family: PingFangSC-Regular;
190 margin-left: 40rpx; 328 font-size: 14px;
191 } 329 color: #999999;
192 text { 330 letter-spacing: -0.26px;
193 font-size: 14px; 331 }
194 } 332 }
195 .order-info-head { 333 .order-user-body {
196 display: flex; 334 display: flex;
197 padding-top: 40rpx; 335 width: 100%;
198 image { 336 image {
199 height: 188rpx; 337 width: 24px;
200 width: 188rpx; 338 height: 26px;
201 } 339 margin: 12rpx 32rpx 0 40rpx;
202 .order-info-head-r { 340 }
203 margin: 0; 341 .p3 {
204 width: 368rpx; 342 // font-family: PingFangSC-Semibold;
205 margin-left: 24rpx; 343 font-size: 14px;
206 // margin-top: 40rpx; 344 color: #333333;
207 text { 345 letter-spacing: -0.26px;
208 display: block; 346 }
209 } 347 }
210 // .arrow{ 348 }
211 // width: 0; 349
212 // height: 0; 350 .order-info {
213 // border-left: 5px transparent; 351 background-color: #fff;
214 // border-right: 5px transparent; 352 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
215 // border-top: 5px #979797; 353 border-radius: 16rpx;
216 // border-bottom: 0 transparent; 354 margin: 0 auto;
217 // border-style: solid; 355 view {
218 // position: relative; 356 margin-left: 40rpx;
219 // // transform: scaleY(-1); 357 }
220 // } 358 text {
221 // .arrow::after{ 359 font-size: 14px;
222 // content: ''; 360 }
223 // position: absolute; 361 .order-info-head {
224 // top: -6.5px; 362 display: flex;
225 // left: -5px; 363 padding-top: 40rpx;
226 // border-left: 5px transparent; 364 image {
227 // border-right: 5px transparent; 365 height: 188rpx;
228 // border-top: 5px #FFFFFF; 366 width: 188rpx;
229 // border-bottom: 0 transparent; 367 }
230 // border-style: solid; 368 .order-info-head-r {
231 // } 369 margin: 0;
232 .p1 { 370 width: 368rpx;
233 min-height: 40px; 371 margin-left: 24rpx;
234 // font-family: PingFangSC-Regular; 372 // margin-top: 40rpx;
235 font-size: 14px; 373 text {
236 color: #333333; 374 display: block;
237 letter-spacing: -0.26px; 375 }
238 line-height: 18px; 376 // .arrow{
239 // line-height: 20px; 377 // width: 0;
240 } 378 // height: 0;
241 .p2 { 379 // border-left: 5px transparent;
242 height: 34px; 380 // border-right: 5px transparent;
243 padding: 1px 0 3px 0; 381 // border-top: 5px #979797;
244 // font-family: PingFangSC-Regular; 382 // border-bottom: 0 transparent;
245 font-size: 12px; 383 // border-style: solid;
246 color: #999999; 384 // position: relative;
247 letter-spacing: -0.23px; 385 // // transform: scaleY(-1);
248 } 386 // }
249 .p3 { 387 // .arrow::after{
250 height: 20px; 388 // content: '';
251 // font-family: PingFangSC-Regular; 389 // position: absolute;
390 // top: -6.5px;
391 // left: -5px;
392 // border-left: 5px transparent;
393 // border-right: 5px transparent;
394 // border-top: 5px #FFFFFF;
252 font-size: 14px; 395 // border-bottom: 0 transparent;
253 color: #ff6b4a; 396 // border-style: solid;
254 letter-spacing: -0.26px; 397 // }
255 } 398 .p1 {
256 .p4 { 399 min-height: 40px;
257 font-size: 12px; 400 // font-family: PingFangSC-Regular;
258 color: #999999; 401 font-size: 14px;
259 letter-spacing: -0.23px; 402 color: #333333;
260 margin-left: 10px; 403 letter-spacing: -0.26px;
261 } 404 line-height: 18px;
262 } 405 // line-height: 20px;
263 } 406 }
264 // .order-info-goodsnum { 407 .p2 {
265 // display: flex; 408 height: 34px;
266 // align-items: center; 409 padding: 1px 0 3px 0;
267 // justify-content: flex-end; 410 // font-family: PingFangSC-Regular;
268 // text { 411 font-size: 12px;
269 // margin-right: 44rpx; 412 color: #999999;
270 // // ont-family: PingFangSC-Regular; 413 letter-spacing: -0.23px;
271 // font-size: 12px; 414 }
272 // color: #999999; 415 .infoText-bottom {
273 // letter-spacing: -0.23px; 416 display: flex;
274 // } 417 flex-direction: row;
275 // } 418 justify-content: flex-start;
276 .order-info-freight { 419 align-items: center;
277 display: block; 420 width: 100%;
278 margin-left: 40rpx; 421 margin-left: 0;
279 margin-top: 22rpx; 422 .markPrice {
280 .p1 { 423 font-size: 14px;
281 // font-family: PingFangSC-Regular; 424 color: #ff6b4a;
282 font-size: 14px; 425 margin-right: 20rpx;
283 color: #333333; 426 margin-left: 0rpx;
284 letter-spacing: -0.26px; 427 }
285 line-height: 18px; 428 .buy-num {
286 margin-right: 24px; 429 font-size: 12px;
287 } 430 color: #999999;
288 .p2 { 431 }
289 // font-family: PingFangSC-Regular; 432 }
290 font-size: 14px; 433 }
291 color: #ff6b4a; 434 }
292 letter-spacing: -0.26px; 435 // .order-info-goodsnum {
293 } 436 // display: flex;
294 } 437 // align-items: center;
295 .order-info-discount { 438 // justify-content: flex-end;
296 display: block; 439 // text {
297 margin-left: 40rpx; 440 // margin-right: 44rpx;
298 margin-top: 24rpx; 441 // // ont-family: PingFangSC-Regular;
299 .p1 { 442 // font-size: 12px;
300 // font-family: PingFangSC-Regular; 443 // color: #999999;
301 font-size: 14px; 444 // letter-spacing: -0.23px;
302 color: #333333; 445 // }
303 letter-spacing: -0.26px; 446 // }
304 line-height: 18px; 447 .order-info-freight {
305 margin-right: 24px; 448 display: block;
306 } 449 margin-left: 40rpx;
307 .p2 { 450 margin-top: 22rpx;
308 // font-family: PingFangSC-Regular; 451 .p1 {
309 font-size: 14px; 452 // font-family: PingFangSC-Regular;
310 color: #ff6b4a; 453 font-size: 14px;
311 letter-spacing: -0.26px; 454 color: #333333;
312 } 455 letter-spacing: -0.26px;
313 } 456 line-height: 18px;
314 .order-info-price { 457 margin-right: 24px;
315 display: block; 458 }
316 margin-left: 40rpx; 459 .p2 {
317 margin-top: 24rpx; 460 // font-family: PingFangSC-Regular;
318 .p1 { 461 font-size: 14px;
319 // font-family: PingFangSC-Semibold; 462 color: #ff6b4a;
320 font-size: 14px; 463 letter-spacing: -0.26px;
321 color: #333333; 464 }
322 letter-spacing: -0.26px; 465 }
323 line-height: 18px; 466 .order-info-discount {
324 margin-right: 24px; 467 display: block;
325 } 468 margin-left: 40rpx;
326 .p2 { 469 margin-top: 24rpx;
327 // font-family: PingFangSC-Semibold; 470 .p1 {
328 font-size: 14px; 471 // font-family: PingFangSC-Regular;
329 color: #ff6b4a; 472 font-size: 14px;
330 letter-spacing: -0.26px; 473 color: #333333;
331 } 474 letter-spacing: -0.26px;
332 } 475 line-height: 18px;
333 .order-info-num { 476 margin-right: 24px;
334 display: block; 477 }
335 margin-left: 40rpx; 478 .p2 {
336 margin-top: 44rpx; 479 // font-family: PingFangSC-Regular;
337 text { 480 font-size: 14px;
338 // font-family: PingFangSC-Regular; 481 color: #ff6b4a;
339 font-size: 12px; 482 letter-spacing: -0.26px;
340 color: #999999; 483 }
341 letter-spacing: -0.23px; 484 }
342 } 485 .order-info-price {
343 } 486 display: block;
344 .order-info-time { 487 margin-left: 40rpx;
345 display: block; 488 margin-top: 24rpx;
346 margin: 8rpx 0 48rpx 40rpx; 489 .p1 {
347 text { 490 // font-family: PingFangSC-Semibold;
348 // font-family: PingFangSC-Regular; 491 font-size: 14px;
349 font-size: 12px; 492 color: #333333;
350 color: #999999; 493 letter-spacing: -0.26px;
351 letter-spacing: -0.23px; 494 line-height: 18px;
352 } 495 margin-right: 24px;
353 } 496 }
354 .order-info-hr { 497 .p2 {
355 width: 520rpx; 498 // font-family: PingFangSC-Semibold;
356 height: 1px; 499 font-size: 14px;
357 background-color: #e9e9e9; 500 color: #ff6b4a;
358 margin-bottom: 20rpx; 501 letter-spacing: -0.26px;
359 } 502 }
360 .order-info-contact { 503 }
361 display: flex; 504 .order-info-num {
362 padding-bottom: 28rpx; 505 display: block;
363 image { 506 margin-left: 40rpx;
364 width: 19px; 507 margin-top: 44rpx;
365 height: 16px; 508 text {
366 } 509 // font-family: PingFangSC-Regular;
367 text { 510 font-size: 12px;
368 // font-family: PingFangSC-Regular; 511 color: #999999;
369 margin-left: 20rpx; 512 letter-spacing: -0.23px;
370 font-size: 14px; 513 }
371 color: #333333; 514 }
372 letter-spacing: -0.26px; 515 .order-info-time {
373 line-height: 18px; 516 display: block;
517 margin: 8rpx 0 48rpx 40rpx;
374 } 518 text {
375 } 519 // font-family: PingFangSC-Regular;
376 } 520 font-size: 12px;
377 521 color: #999999;
378 .order-confim { 522 letter-spacing: -0.23px;
379 display: flex; 523 }
380 align-items: center; 524 }
381 z-index: 999; 525 .order-info-hr {
382 width: 100%; 526 width: 520rpx;
383 height: 112rpx; 527 height: 1px;
384 position: fixed; 528 background-color: #e9e9e9;
385 bottom: 0; 529 margin-bottom: 20rpx;
386 background: #ffffff; 530 }
387 button { 531 .order-info-contact {
388 width: 204rpx; 532 display: flex;
389 height: 80rpx; 533 padding-bottom: 28rpx;
390 border: 1px solid #ff6b4a; 534 image {
391 border-radius: 40rpx; 535 width: 19px;
392 font-size: 32rpx; 536 height: 16px;
393 letter-spacing: -0.3px; 537 }
394 margin-right: 0; 538 text {
395 } 539 // font-family: PingFangSC-Regular;
396 .b1 { 540 margin-left: 20rpx;
397 // font-family: PingFangSC-Regular; 541 font-size: 14px;
398 color: #ff6b4a; 542 color: #333333;
399 } 543 letter-spacing: -0.26px;
400 .b2 { 544 line-height: 18px;
401 // font-family: PingFangSC-Regular; 545 }
402 background-color: #ff6b4a; 546 }
403 color: #ffffff; 547 }
404 margin: 0 26rpx 0 20rpx; 548
405 } 549 .order-confim {
406 } 550 display: flex;
407 </style> 551 align-items: center;
408 552 justify-content: flex-end;
553 // z-index: 999;
554 width: 100%;
555 height: 112rpx;
556 position: fixed;
557 bottom: 0;
558 background: #ffffff;
559 button {
560 width: 204rpx;
561 height: 80rpx;
562 border: 1px solid #ff6b4a;
563 border-radius: 40rpx;
564 font-size: 32rpx;
565 letter-spacing: -0.3px;
566 margin-right: 0;
567 }
568 .b1 {
569 // font-family: PingFangSC-Regular;
570 color: #ff6b4a;
571 background-color: #ffffff;
src/pages/predelivery/predelivery.vue
Diff comments   View file @058f060
1 <!-- 待发货 尹聃-->
1 <template> 2 <template>
2 <view class="container"> 3 <view class="container">
3 <view v-for="(items) in form" :key="items.key" class="order"> 4 <view v-for="(items) in form" :key="items.key" class="order">
4 <view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view> 5 <view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view>
5 <view class="order_detail"> 6 <view class="order_detail">
6 <view class="detail_img"><image v-bind:src="items.img"></image></view> 7 <view class="detail_img"><image v-bind:src="items.img"></image></view>
7 <view class="detail_zi"> 8 <view class="detail_zi">
8 <view class="zi_name">{{items.name}}</view> 9 <view class="zi_name">{{items.name}}</view>
9 <view class="zi_standard">规格：{{items.standard}}</view> 10 <view class="zi_standard">规格：{{items.standard}}</view>
10 <view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view> 11 <view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view>
11 </view> 12 </view>
12 </view> 13 </view>
13 <view class="now_price">实付：<span>￥{{items.nowprice}}</span></view> 14 <view class="now_price">实付：<span>￥{{items.nowprice}}</span></view>
14 <view class="clear"></view> 15 <view class="clear"></view>
15 <view class="button"> 16 <view class="button">
16 <view class="button1">申请退款</view> 17 <view class="button1">申请退款</view>
17 <view class="button2">提醒发货</view> 18 <view class="button2">提醒发货</view>
18 </view> 19 </view>
19 </view> 20 </view>
20 </view> 21 </view>
21 </template> 22 </template>
22 23
23 <script> 24 <script>
24 export default { 25 export default {
25 data(){ 26 data(){
26 return{ 27 return{
27 form:[ 28 form:[
28 { 29 {
29 key: 0, 30 key: 0,
30 name:'商品名称', 31 name:'商品名称',
31 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻', 32 standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
32 img: '/static/img/detail/delivery.png', 33 img: '/static/img/detail/delivery.png',
33 preprice: 180, 34 preprice: 180,
34 number:1, 35 number:1,
35 orderNum: 2034867958596334, 36 orderNum: 2034867958596334,
36 nowprice: 110, 37 nowprice: 110,
37 } 38 }
38 ] 39 ]
39 40
40 } 41 }
41 } 42 }
42 } 43 }
43 </script> 44 </script>
44 45
45 <style lang="scss"> 46 <style lang="scss">
46 .container{ 47 .container{
47 width: 100%; 48 width: 100%;
48 height: 100%; 49 height: 100%;
49 background: #F2F2F2; 50 background: #F2F2F2;
50 height: 700px; 51 height: 700px;
51 //要获取屏幕大小 52 //要获取屏幕大小
52 } 53 }
53 54
54 .order{ 55 .order{
55 background: #FFFFFF; 56 background: #FFFFFF;
56 width: 90%; 57 width: 90%;
57 height: 450rpx; 58 height: 450rpx;
58 margin: 0 auto; 59 margin: 0 auto;
59 padding: 40rpx; 60 padding: 40rpx;
60 box-sizing: border-box; 61 box-sizing: border-box;
61 border-radius: 5px; 62 border-radius: 5px;
62 } 63 }
63 .order_number{ 64 .order_number{
64 color: #999999; 65 color: #999999;
65 font-size: 12px; 66 font-size: 12px;
66 font-family: "PingFangSC-Regular"; 67 font-family: "PingFangSC-Regular";
67 span{ 68 span{
68 font-family: PingFangSC-Regular; 69 font-family: PingFangSC-Regular;
69 font-size: 14px; 70 font-size: 14px;
70 color: #FF6B4A; 71 color: #FF6B4A;
71 letter-spacing: -0.26px; 72 letter-spacing: -0.26px;
72 line-height: 18px; 73 line-height: 18px;
73 float: right; 74 float: right;
74 } 75 }
75 } 76 }
76 .order_detail{ 77 .order_detail{
77 display: flex; 78 display: flex;
78 justify-content: space-around; 79 justify-content: space-around;
79 margin-top: 12px; 80 margin-top: 12px;
80 } 81 }
81 .detail_img image{ 82 .detail_img image{
82 width: 188rpx; 83 width: 188rpx;
83 height: 188rpx; 84 height: 188rpx;
84 } 85 }
85 .detail_zi{ 86 .detail_zi{
86 font-family: PingFangSC-Regular; 87 font-family: PingFangSC-Regular;
87 width: 55%; 88 width: 55%;
88 height: 100%; 89 height: 100%;
89 view{ 90 view{
90 margin-bottom: 20rpx; 91 margin-bottom: 20rpx;
91 } 92 }
92 .zi_name{ 93 .zi_name{
93 font-size: 14px; 94 font-size: 14px;
94 color: #333333; 95 color: #333333;
95 letter-spacing: -0.26px; 96 letter-spacing: -0.26px;
96 line-height: 18px; 97 line-height: 18px;
97 } 98 }
98 .zi_standard{ 99 .zi_standard{
99 font-size: 12px; 100 font-size: 12px;
100 color: #999999 ; 101 color: #999999 ;
101 } 102 }
102 .zi_preprice{ 103 .zi_preprice{
103 font-size: 14px; 104 font-size: 14px;
104 color: #FF6B4A; 105 color: #FF6B4A;
105 span{ 106 span{
106 float: right; 107 float: right;
107 font-size: 12px; 108 font-size: 12px;
108 color: #999999; 109 color: #999999;
109 } 110 }
110 } 111 }
111 } 112 }
112 .now_price{ 113 .now_price{
113 font-size: 14px; 114 font-size: 14px;
114 color: #333333; 115 color: #333333;
115 float: right; 116 float: right;
116 span{ 117 span{
117 font-size: 14px; 118 font-size: 14px;
118 color: #FF6B4A ; 119 color: #FF6B4A ;
119 } 120 }
120 } 121 }
121 .clear{ 122 .clear{
122 clear: both; 123 clear: both;
123 } 124 }
124 .button{ 125 .button{
125 display: flex; 126 display: flex;
126 justify-content: flex-end; 127 justify-content: flex-end;
127 margin-top: 14px; 128 margin-top: 14px;
128 view{ 129 view{
129 width: 156rpx; 130 width: 156rpx;
130 height: 48rpx; 131 height: 48rpx;
131 border-radius: 12px; 132 border-radius: 12px;
132 font-size: 12px; 133 font-size: 12px;
133 text-align: center; 134 text-align: center;
134 line-height: 20px; 135 line-height: 20px;
135 } 136 }
136 .button1{ 137 .button1{
137 border: 1px solid #FF6B4A; 138 border: 1px solid #FF6B4A;
138 font-family: PingFangSC-Regular; 139 font-family: PingFangSC-Regular;
139 color: #FF6B4A; 140 color: #FF6B4A;
140 letter-spacing: -0.23px; 141 letter-spacing: -0.23px;
141 margin-right: 30rpx; 142 margin-right: 30rpx;
142 } 143 }
143 .button2{ 144 .button2{
144 border: 1px solid #FF6B4A; 145 border: 1px solid #FF6B4A;
145 background: #FF6B4A; 146 background: #FF6B4A;
146 font-family: PingFangSC-Regular; 147 font-family: PingFangSC-Regular;
147 color: #FFFFFF; 148 color: #FFFFFF;
148 letter-spacing: -0.23px; 149 letter-spacing: -0.23px;
149 150
150 } 151 }
151 } 152 }
152 </style> 153 </style>
src/pages/user/user.vue
Diff comments   View file @058f060
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view v-if="isAuth" class="content"> 3 <view v-if="isAuth" class="content">
4 <view class="userInfo"> 4 <view class="userInfo">
5 <view class="info"> 5 <view class="info">
6 <image :src="headerphoto" mode="aspectFill"></image> 6 <image :src="headerphoto" mode="aspectFill"></image>
7 <view class="infoText"> 7 <view class="infoText">
8 <text class="userName">{{nickName}}</text> 8 <text class="userName">{{nickName}}</text>
9 </view> 9 </view>
10 </view> 10 </view>
11 <view class="service"> 11 <!-- <view class="service">
12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
13 </view> -->
14 </view>
15 <view class="myOpticsData" @click="toOpticsData">
16 <view class="left">
17 <image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image>
18 <text>验光数据</text>
13 </view> 19 </view>
20 <image src="../../static/right.png" mode="aspectFit"></image>
14 </view> 21 </view>
15 <view class="myOrder"> 22 <view class="myOrder">
16 <view class="orderHeader"> 23 <view class="orderHeader">
17 <text>全部订单</text> 24 <text>全部订单</text>
18 <view class="btn" @click="toMyOrder"> 25 <view class="btn" @click="toMyOrder('10')">
19 全部 26 全部
20 <image src="../../static/right.png" mode="aspectFill"></image> 27 <image src="../../static/right.png" mode="aspectFit"></image>
21 </view> 28 </view>
22 </view> 29 </view>
23 <view class="orderBody"> 30 <view class="orderBody">
24 <view class="item waitPay" @click="toMyOrderPaying"> 31 <view class="item waitPay" @click="toMyOrder('0')">
25 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 32 <image src="../../static/img/user/waitDeliver.png" mode="aspectFit"></image>
26 <text>待付款</text> 33 <text>待付款</text>
27 </view> 34 </view>
28 <view class="item waitDeliver" @click="toPredelivery" > 35 <view class="item waitDeliver" @click="toMyOrder('1')" >
29 <image src="../../static/waitPay.png" mode="aspectFill"></image> 36 <image src="../../static/img/user/waitPay.png" mode="aspectFit"></image>
30 <text>待发货</text>
31 </view>
32 <view class="item waitReceive" @click="torefunProgress">
33 <image src="../../static/waitReceive.png" mode="aspectFill"></image>
34 <text>待收货</text> 37 <text>待收货</text>
35 </view> 38 </view>
36 <view class="item service" @click="torefundment"> 39 <view class="item waitReceive" @click="toMyOrder('2')">
37 <image src="../../static/service.png" mode="aspectFill"></image> 40 <image src="../../static/img/user/waitReceive.png" mode="aspectFit"></image>
38 <text>退换/售后</text> 41 <text>已完成</text>
42 </view>
43 <!-- <view class="item service" @click="toMyOrder('3')">
44 <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
45 <text>已评价</text>
46 </view> -->
47 </view>
48 </view>
49 <view class="someItem">
50 <!-- <view class="item">
51 <view class="left">
52 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
53 <text>推广记录与收益</text>
54 </view>
55 <image src="../../static/right.png" mode="aspectFit"></image>
56 </view> -->
57 <view class="item">
58 <view class="left">
59 <image src="../../static/img/user/introduce.png" mode="aspectFit"></image>
60 <text>系统介绍</text>
61 </view>
62 <image src="../../static/right.png" mode="aspectFit"></image>
63 </view>
64 <view class="item">
65 <view class="left">
66 <image src="../../static/img/user/joinUs.png" mode="aspectFit"></image>
67 <text>加入我们</text>
68 </view>
69 <image src="../../static/right.png" mode="aspectFit"></image>
70 </view>
71 <view class="item">
72 <view class="left">
73 <image src="../../static/img/user/service.png" mode="aspectFit"></image>
74 <text>联系客服</text>
39 </view> 75 </view>
76 <image src="../../static/right.png" mode="aspectFit"></image>
40 </view> 77 </view>
41 </view> 78 </view>
42 <view class="recommend"> 79 <view class="recommend">
43 <view class="title"> 80 <view class="title">
44 <view class="line"></view> 81 <view class="line"></view>
45 <view class="text">精选推荐</view> 82 <view class="text">精选推荐</view>
46 <view class="line"></view> 83 <view class="line"></view>
47 </view> 84 </view>
48 <!-- 商品列表 --> 85 <!-- 商品列表 -->
49 <view class="goods-list"> 86 <view class="goods-list">
50 <view class="product-list"> 87 <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list">
51 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > 88 <block v-for="(goods) in userRecommandList " :key="goods.list.sk_id">
52 <Card :goods = "goods"></Card> 89 <view class="product" v-for="(item) in goods.list" :key="item.sk_id">
53 </view> 90 <Card :goods="item" ></Card>
54 </view> 91 </view>
92 </block>
93 </scroll-view>
55 <view class="loading-text">{{loadingText}}</view> 94 <view class="loading-text">{{loadingText}}</view>
56 </view> 95 </view>
57 </view> 96 </view>
58 </view> 97 </view>
59 <view v-else class="auth"> 98 <view v-else class="auth">
60 <view class="icon"></view> 99 <view class="icon"></view>
61 <view class="divider"></view> 100 <view class="divider"></view>
62 <view class="title">申请获取以下权限</view> 101 <view class="title">申请获取以下权限</view>
63 <view class="text">获得您的公开信息(昵称、头像等)</view> 102 <view class="text">获得您的公开信息(昵称、头像等)</view>
64 <button 103 <button
65 type="primary" 104 type="primary"
66 open-type="getUserInfo" 105 open-type="getUserInfo"
67 @getuserinfo="onGotUserInfo" 106 @getuserinfo="onGotUserInfo"
68 >授权登陆</button> 107 >授权登陆</button>
69 </view> 108 </view>
70 </view> 109 </view>
71 </template> 110 </template>
72 111
73 <script> 112 <script>
74 import Card from "@/components/CommodityCard/CommodityCard.vue"; 113 import Card from "@/components/CommodityCard/CommodityCard.vue";
75 import store from '@/store'; 114 import store from '@/store';
76 115
77 export default { 116 export default {
78 components: { 117 components: {
79 'Card':Card 118 'Card':Card
80 }, 119 },
81 data() { 120 data() {
82 return { 121 return {
83 //商品数据 122 isAuth: true, // 是否显示授权页面,
84 goodsList:[ 123 pagesnum:1 // 分页请求初始值
85 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
86 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
87 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
88 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
89 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
90 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
91 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
92 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
93 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
94 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
95 ],
96 isAuth: true, // 是否显示授权页面
97 } 124 }
98 }, 125 },
99 onLoad() { 126 onLoad() {
100 // 判断是否授权 127 // 判断是否授权
101 uni.getSetting({ 128 uni.getSetting({
102 success(res) { 129 success(res) {
103 console.log('authSetting',res.authSetting) 130 console.log('authSetting',res.authSetting)
104 if(res.authSetting['scope.userInfo'] === true) { 131 if(res.authSetting['scope.userInfo'] === true) {
105 this.isAuth = true 132 this.isAuth = true
106 } else { 133 } else {
107 this.isAuth = false 134 this.isAuth = false
108 } 135 }
109 } 136 }
110 }) 137 })
138
111 }, 139 },
112 computed: { 140 computed: {
113 nickName() { 141 nickName() {
114 console.log('nickName', this.$store.state.user.userInfo) 142 console.log('nickName', this.$store.state.user.userInfo)
115 return this.$store.state.user.userInfo.nickName; 143 return this.$store.state.user.userInfo.nickName;
116 }, 144 },
117 headerphoto() { 145 headerphoto() {
118 return this.$store.state.user.userInfo.headerphoto; 146 return this.$store.state.user.userInfo.headerphoto;
119 }, 147 },
120 userRecommandList() { 148 userRecommandList() {
121 console.log('recommandList', this.$store.state.userRecommand.recommandList); 149 console.log('recommandList', this.$store.state.userRecommand.recommandList);
122 return this.$store.state.userRecommand.recommandList; 150 return this.$store.state.userRecommand.recommandList;
123 } 151 }
124 }, 152 },
125 onLoad: function() { 153 onLoad:function(){
154 console.log('usr-my',this.$store.state.user.userInfo)
155
126 store.dispatch('userRecommand/getRecommandList', { 156 store.dispatch('userRecommand/getRecommandList', {
127 uid: 2, 157 // uid:468,
158 uid: this.$store.state.user.userInfo.uid,
159 // openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4",
160 openid:this.$store.state.user.userInfo.openid,
161 page: this.pagesnum
128 }); 162 });
129 }, 163 },
164
130 methods: { 165 methods: {
131 // 授权 166 // 授权
132 onGotUserInfo(e) { 167 onGotUserInfo(e) {
133 console.log('anthInfo', e); 168 console.log('anthInfo', e);
134 if(e.detail.errMsg == 'getUserInfo:ok') { 169 if(e.detail.errMsg == 'getUserInfo:ok') {
135 const { fromInfo } = this.$store.state.user; 170 const { fromInfo } = this.$store.state.user;
136 console.log('=====la', fromInfo) 171 console.log('=====la', fromInfo)
137 // 用户授权成功 172 // 用户授权成功
138 store.dispatch('user/getUserInfo', fromInfo); 173 store.dispatch('user/getUserInfo', fromInfo);
139 this.isAuth = true 174 this.isAuth = true
140 } 175 }
141 }, 176 },
142 toMyOrder(){ 177 toMyOrder(status){
143 uni.navigateTo({ 178 uni.navigateTo({
144 url: '../myOrder/myOrder?current=0', 179 url: `../myOrder/myOrder?status=`+status,
145 success: res => {}, 180 success: res => {},
146 fail: () => {}, 181 fail: () => {},
147 complete: () => {} 182 complete: () => {}
148 }); 183 });
149 }, 184 },
150 toPredelivery(){ 185 toOpticsData(){
151 uni.navigateTo({ 186 uni.navigateTo({
152 url: '../myOrder/myOrder?current=2', 187 url: `../addOpticsData/addOpticsData`,
153 success: res => {},
154 fail: () => {},
155 complete: () => {}
156 }); 188 });
157 }, 189 },
158 toMyOrderPaying(){ 190 handleScrolltolower(){
159 uni.navigateTo({ 191 // console.log('usr-my',this.$store.state.user.userInfo)
160 url: '../myOrder/myOrder?current=1', 192 this.pagesnum++;
161 success: res => {}, 193 store.dispatch('userRecommand/getRecommandList', {
162 fail: () => {}, 194 uid: this.$store.state.user.userInfo.uid,
163 complete: () => {} 195 openid:this.$store.state.user.userInfo.openid,
196 page: this.pagesnum
164 }); 197 });
165 },
166 torefundment(){
167 uni.navigateTo({
168 url:'../refundment/refundment',
169 })
170 },
171 torefunProgress(){
172 uni.navigateTo({
173 url:'../refundProgress/refundProgress'
174 })
175 } 198 }
176 } 199 }
177 } 200 }
178 </script> 201 </script>
179 202
180 <style lang="scss"> 203 <style lang="scss">
181 .warp{ 204 .warp{
182 font-size: 24rpx; 205 font-size: 24rpx;
183 background-color: #f2f2f2; 206 background-color: #f2f2f2;
184 height: 100vh; 207 height: 100vh;
185 } 208 }
186 .content { 209 .content {
187 display: flex; 210 display: flex;
188 flex-direction: column; 211 flex-direction: column;
189 align-items: center; 212 align-items: center;
190 justify-content: center; 213 justify-content: center;
191 background-color: #F2F2F2; 214 background-color: #F2F2F2;
192 } 215 }
193 .userInfo{ 216 .userInfo{
194 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); 217 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
195 width: 100%; 218 width: 100%;
196 height: 240rpx; 219 height: 240rpx;
197 color: #FFFFFF; 220 color: #FFFFFF;
198 padding: 60rpx 82rpx 80rpx 44rpx; 221 padding: 60rpx 82rpx 80rpx 44rpx;
199 box-sizing: border-box; 222 box-sizing: border-box;
200 display: flex; 223 display: flex;
201 flex-direction: row; 224 flex-direction: row;
202 justify-content: space-between; 225 justify-content: space-between;
203 align-items: flex-start; 226 align-items: flex-start;
204 .info{ 227 .info{
205 display: flex; 228 display: flex;
206 flex-direction: row; 229 flex-direction: row;
207 justify-content: space-between; 230 justify-content: space-between;
208 align-items: center; 231 align-items: center;
209 image{ 232 image{
210 border-radius: 50rpx; 233 border-radius: 50rpx;
211 height: 100rpx ; 234 height: 100rpx ;
212 width: 100rpx; 235 width: 100rpx;
213 margin-right: 40rpx; 236 margin-right: 40rpx;
214 } 237 }
215 .infoText{ 238 .infoText{
216 display: flex; 239 display: flex;
217 flex-direction: column; 240 flex-direction: column;
218 justify-content: space-between; 241 justify-content: space-between;
219 align-items: flex-scetart; 242 align-items: flex-scetart;
220 .userName{ 243 .userName{
221 font-size: 18px; 244 font-size: 18px;
222 color: #FFFFFF; 245 color: #FFFFFF;
223 margin-bottom: 8rpx; 246 margin-bottom: 8rpx;
224 } 247 }
225 .nickName{ 248 .nickName{
226 font-size: 12px; 249 font-size: 12px;
227 color: #FFFFFF; 250 color: #FFFFFF;
228 } 251 }
229 } 252 }
230 } 253 }
231 .service{ 254 // .service{
232 margin-top: 20rpx; 255 // margin-top: 20rpx;
256 // image{
257 // height: 36rpx;
258 // width: 36rpx;
259 // }
260 // }
261 }
262 .myOpticsData{
263 width: 670rpx;
264 height: 120rpx;
265 background-color: #FFFFFF;
266 border-radius: 6px;
267 box-shadow: 1px 1px 7px 0 rgba(133,107,107,0.10);
268 position: relative;
269 bottom: 44rpx;
270 padding: 40rpx;
271 box-sizing: border-box;
272 display: flex;
273 justify-content: space-between;
274 align-items: center;
275 .left{
276 font-size: 14px;
277 color: #333333;
278 display: flex;
279 align-items: center;
233 image{ 280 image{
234 height: 36rpx; 281 margin-right: 32rpx;
235 width: 36rpx; 282 width: 30rpx;
283 height: 34rpx;
236 } 284 }
237 } 285 }
286 image{
287 height: 16px;
288 width: 8px;
289 }
238 } 290 }
239 .myOrder{ 291 .myOrder{
240 width: 100%; 292 width: 100%;
241 height: 296rpx; 293 height: 296rpx;
242 margin-top: 20rpx; 294 // margin-top: 116rpx;
243 margin-bottom: 20rpx; 295 margin-bottom: 20rpx;
244 padding: 0 40rpx; 296 padding: 0 40rpx;
245 box-sizing: border-box; 297 box-sizing: border-box;
246 background: #FFFFFF; 298 background: #FFFFFF;
247 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 299 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
248 border-radius: 6px; 300 border-radius: 6px;
249 border-radius: 6px; 301 border-radius: 6px;
250 display: flex; 302 display: flex;
251 flex-direction: column; 303 flex-direction: column;
252 justify-content: space-around; 304 justify-content: space-around;
253 align-items: center; 305 align-items: center;
254 .orderHeader{ 306 .orderHeader{
255 width: 100%; 307 width: 100%;
256 height: 100rpx; 308 height: 100rpx;
257 display: flex; 309 display: flex;
258 flex-direction: row; 310 flex-direction: row;
259 justify-content: space-between; 311 justify-content: space-between;
260 align-items: center; 312 align-items: center;
261 border-bottom: 1px solid #E9E9E9;; 313 border-bottom: 1px solid #E9E9E9;;
262 font-weight: bold; 314 font-weight: bold;
263 font-size: 18px; 315 font-size: 18px;
264 color: #333333; 316 color: #333333;
265 .btn{ 317 .btn{
266 font-size: 12px; 318 font-size: 12px;
267 color: #999999; 319 color: #999999;
320 display: flex;
321 align-items: center;
268 image{ 322 image{
269 margin-left: 20rpx; 323 margin-left: 20rpx;
270 height: 16rpx; 324 height: 32rpx;
271 width: 8rpx; 325 width: 16rpx;
272 } 326 }
273 } 327 }
274 } 328 }
275 .orderBody{ 329 .orderBody{
276 width: 100%; 330 width: 100%;
277 display: flex; 331 display: flex;
278 flex-direction: row; 332 flex-direction: row;
279 justify-content: space-between; 333 justify-content: space-around;
280 align-items: center; 334 align-items: center;
281 .item{ 335 .item{
282 display: flex; 336 display: flex;
283 flex-direction: column; 337 flex-direction: column;
284 align-items: center; 338 align-items: center;
285 image{ 339 image{
286 width: 46rpx; 340 width: 62rpx;
287 height: 46rpx; 341 height: 46rpx;
288 } 342 }
289 text{ 343 text{
290 margin-top: 24rpx; 344 margin-top: 24rpx;
291 font-size: 12px; 345 font-size: 12px;
292 color: #333333; 346 color: #333333;
293 } 347 }
294 } 348 }
295 } 349 }
296 } 350 }
351 .someItem{
352 width: 100%;
353 height: 336rpx;
354 background: #FFFFFF;
355 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
356 border-radius: 6px;
357 border-radius: 6px;
358 margin-bottom: 18rpx;
359 box-sizing: border-box;
360 padding: 21rpx 48rpx 21rpx 42rpx;
361 box-sizing: border-box;
362 display: flex;
363 flex-direction: column;
364 justify-content: space-between;
365 align-items: center;
366 .item{
367 display: flex;
368 justify-content: space-between;
369 border-bottom: 1px solid #F2F2F2;;
370 align-items: center;
371 height: 72rpx;
372 width: 100%;
373 .left{
374 font-size: 14px;
375 color: #333333;
376 display: flex;
377 align-items: center;
378 image{
379 margin-right: 32rpx;
380 width: 30rpx;
381 height: 34rpx;
382 }
383 }
384 image{
385 height: 16px;
386 width: 8px;
387 }
388 }
389
390 }
297 .recommend{ 391 .recommend{
298 background: #FFFFFF; 392 background: #FFFFFF;
299 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 393 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
300 border-radius: 6px; 394 border-radius: 6px;
301 border-radius: 6px; 395 border-radius: 6px;
302 width: 100%; 396 width: 100%;
303 .title{ 397 .title{
304 display: flex; 398 display: flex;
305 flex-direction: row; 399 flex-direction: row;
306 align-items: center; 400 align-items: center;
307 justify-content: space-between; 401 justify-content: space-between;
308 padding: 20rpx 40rpx; 402 padding: 20rpx 40rpx;
309 .line{ 403 .line{
310 width: 264rpx; 404 width: 264rpx;
311 height: 1rpx; 405 height: 1rpx;
312 border-bottom: 1px solid #EAEAEA; 406 border-bottom: 1px solid #EAEAEA;
313 } 407 }
314 .text{ 408 .text{
315 font-family: PingFangSC-Medium; 409 font-family: PingFangSC-Medium;
316 font-size: 14px; 410 font-size: 14px;
317 color: #333333; 411 color: #333333;
318 letter-spacing: -0.26px; 412 letter-spacing: -0.26px;
319 text-align: justify; 413 text-align: justify;
320 line-height: 24px; 414 line-height: 24px;
321 } 415 }
322 } 416 }
323 .goods-list{ 417 .goods-list{
324 .loading-text{ 418 .loading-text{
325 width: 100%; 419 width: 100%;
326 display: flex; 420 display: flex;
327 justify-content: center; 421 justify-content: center;
328 align-items: center; 422 align-items: center;
329 height: 30px; 423 height: 30px;
330 color: #979797; 424 color: #979797;
331 font-size: 12px; 425 font-size: 12px;
332 } 426 }
333 .product-list{ 427 .product-list{
334 width: 92%; 428 width: 92%;
335 padding: 0 4% 3vw 4%; 429 padding: 0 4% 3vw 4%;
336 display: flex; 430 display: flex;
431 height: 200px;
337 justify-content: space-between; 432 justify-content: space-between;
338 flex-wrap: wrap; 433 flex-wrap: wrap;
339 .product{ 434 .product{
340 width: 48%; 435 width: 48%;
341 margin: 0 0 20rpx 0; 436 margin: 0 0 20rpx 0;
342 background: #FFFFFF; 437 background: #FFFFFF;
343 border: 1px solid #F2F2F2; 438 border: 1px solid #F2F2F2;
344 } 439 }
345 } 440 }
346 } 441 }
347 } 442 }
348 .auth { 443 .auth {
349 height: 100vh; 444 height: 100vh;
350 display: flex; 445 display: flex;
351 flex-direction: column; 446 flex-direction: column;
352 align-items: center; 447 align-items: center;
353 .icon { 448 .icon {
354 width: 140rpx; 449 width: 140rpx;
355 height: 140rpx; 450 height: 140rpx;
356 border-radius: 50%; 451 border-radius: 50%;
357 margin-top: 100rpx; 452 margin-top: 100rpx;
358 background-color: grey; 453 background-color: grey;
src/static/car.png
Diff comments   View file @058f060

1.56 KB
src/static/dataLook.png
Diff comments   View file @058f060

6.6 KB
src/static/glassLook.png
Diff comments   View file @058f060

10 KB
src/static/img/goods/p1.jpg
View file @7d6833f

11.3 KB
src/static/img/goods/p10.jpg
View file @7d6833f

22.6 KB
src/static/img/goods/p11.png
View file @7d6833f

121 KB
src/static/img/goods/p12.png
View file @7d6833f

115 KB
src/static/img/goods/p2.jpg
View file @7d6833f

16.3 KB
src/static/img/goods/p3.jpg
View file @7d6833f

15 KB
src/static/img/goods/p4.jpg
View file @7d6833f

6.55 KB
src/static/img/goods/p5.jpg
View file @7d6833f

29.6 KB
src/static/img/goods/p6.jpg
View file @7d6833f

6.25 KB
src/static/img/goods/p7.jpg
View file @7d6833f

20.1 KB
src/static/img/goods/p8.jpg
View file @7d6833f

20.4 KB
src/static/img/goods/p9.jpg
View file @7d6833f

24.1 KB
src/static/img/user/dataWrite.png
Diff comments   View file @058f060

382 Bytes
src/static/img/user/introduce.png
Diff comments   View file @058f060

488 Bytes
src/static/img/user/joinUs.png
Diff comments   View file @058f060

1.97 KB
src/static/img/user/refound.png
Diff comments   View file @058f060

3.38 KB
src/static/img/user/service.png
Diff comments   View file @058f060

1.17 KB
src/static/img/user/shouyi.png
Diff comments   View file @058f060

1.51 KB
src/static/img/user/waitDeliver.png
Diff comments   View file @058f060

1.91 KB
src/static/img/user/waitPay.png
Diff comments   View file @058f060

2.19 KB
src/static/img/user/waitReceive.png
Diff comments   View file @058f060

2.01 KB
src/static/joinUs (2).png
Diff comments   View file @058f060

488 Bytes
src/static/joinUs (3).png
Diff comments   View file @058f060

1.17 KB
src/static/joinUs.png
Diff comments   View file @058f060

1.97 KB
src/static/shouyi.png
Diff comments   View file @058f060

1.51 KB
src/static/waitReceive.png
Diff comments   View file @058f060

789 Bytes | W: | H:

2.01 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/store/modules/cancelOrder.js
Diff comments   View file @058f060
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 cancelOrder
6 } = urlAlias;
7
8 const state = {
9 orderList: [],
10 };
11
12 const mutations = {
13 INIT: (state, data) => {
14 state.orderList = data;
15 },
16 };
17
18 const actions = {
19 cancel({ commit }, param) {
20 request({
21 url: cancelOrder,
22 data: param,
23 success: (res) => {
24 console.log(res.data);
25 // commit("INIT", res.data.data);
26 },
27 })
28 }
29 }
30
31 export default {
32 namespaced: true,
33 state,
34 mutations,
35 actions,
36 }
src/store/modules/cart.js
Diff comments   View file @058f060
1 import urlAlias from '../url'; 1 import urlAlias from '../url'
2 import request from '../request'; 2 import request from '../request'
3 3
4 const { cartList } = urlAlias; 4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias
5 5
6 const state = { 6 const state = {
7 cartList: [], 7 cartList: []
8 }; 8 }
9 9
10 // const data = {
11 // data: {
12 // // list 购物车列表
13 // list: [
14 // {
15 // goods_name: '1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流', // 商品名称
16 // pid: '6', // 产品id
17 // real_price: 99,
18 // checked: true, // 是否选中
19 // name: '颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射', // 属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 …
20 // cart_id: '39', // 购物车唯一序列号
21 // num: '1', // 此购物
22 // pics: '/static/myorder-paying-pic.png', // 商品图片
23 // goodsType: 2 // 商品种类
24 // },
25 // {
26 // goods_name: '1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流', // 商品名称
27 // pid: '4', // 产品id
28 // real_price: 189,
29 // checked: false, // 是否选中
30 // name: '颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射', // 属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 …
31 // cart_id: '38', // 购物车唯一序列号
32 // num: '2', // 此购物
33 // pics: '/static/myorder-paying-pic.png', // 商品图片
34 // goodsType: 3 // 商品种类
35 // }
36 // ],
37 // mp_id: '1',
38 // mp_list: // 使用人，一个产品只有一个使用人
39 // [
40 // {
41 // glassWidth: '54', // 镜宽
42 // img_url2: 'http://localhost:8087/images/shop_1/1/', // 使用人的头像，根据此头像，AI识别出数据。
43 // in_time: '2020-02-22 03:19:38', // 使用人加入的时间
44 // leftAxi: '124', // 左眼数据
45 // leftCyl: '-2', // 左眼数据
46 // leftSph: '-1', // 左眼数据
47 // leftVis: '5', // 左眼数据
48 // legWidth: '158', // 镜腿长
49 // metal: null, // 使用人的其它定义（材质过敏之类的）
50 // mp_id: '1', // 使用的id
51 // name: 'me', // 使用人的名字
52 // norseWidth: '18', // 鼻宽
53 // pd: '89.6', // 瞳距
54 // price: '0', // 此人偏好的价格
55 // rightAxi: '123', // 右眼数据
56 // rightCyl: '24', // 右眼数据
57 // rightSph: '-4', // 右眼数据
58 // rightVis: '5.1', // 右眼数据
59 // uid: '1' // 购买人的uid
60 // }
61 // ],
62 // sk_id: '80', // 此产品下的sku的唯一id
63 // skuList: [// sku清单
64 // {
65 // discount: '45', // 折扣，数据库中以int型存储，所以要除100
66 // in_price: '6000', // 进货价格，数据库中以int型存储，单位是分，所以显示时要除以100
67 // kc: '0', // 库存
68 // model_pic: null, // 模型试戴图
69 // out_price: 191.8, // 销售价格，元
70 // pic: 'https://glass.xiuyetang.com//upload_jk/6/6_321EB1.jpg', // 可供查看图
71 // pid: '6', // 索引产品id
72 // real_price: 99, // 真实可成交价格
73 // sk_id: '74', // 成交时的sku_id
74 // sku_name: '1.56非球面防蓝光_黑色', // sku名称
75 // sku_shop_value: '', // sku商家定义值
76 // sku_value: '47_51', // sku系统生成值
77 // status: '1' // 此产品下的sku状态
78 // }
79 // ]
80 // }, // 一个产品下，会有多个sku，都在这个skuList数组下
81 // msg: 'ok',
82 // status: 1
83 // }
84
85 const mutations = {
10 const mutations = { 86 INIT: (state, cartList) => {
11 INIT: (state, cartList) => { 87 state.cartList = cartList
12 state.cartList = cartList; 88 },
13 }, 89 DEL: (state, index) => {
90 console.log('mutations====>', state.cartList)
91 state.cartList.splice(index, 1)
92 console.log('mutations====>index', index)
93 // state.cartList=delList
94 },
95 MODI: (state, args) => {
96 console.log('the num', state.cartList[args.index].num)
97 console.log('mutations====>isadd', args)
98 if (args.isadd) {
99 state.cartList[args.index].num = args.num
100 } else {
101 state.cartList[args.index].num = args.num
102 }
103 console.log('the num', state.cartList[args.index].num)
104 }
105
106 }
107
14 }; 108 const actions = {
15 109 getCartList({ commit }, param) {
16
17
18 const actions = { 110 request({
19 getCartList({ commit }, param) { 111 url: cartList,
20 request({ 112 data: param,
21 url: cartList, 113 success: (res) => {
22 success: (res) => { 114 console.log('cart===>接口数据', res.data.data)
23 115 // const resData = {
24 commit('INIT', res.data.data) 116 // ...res,
25 }, 117 // data,
26 fail: (res) => { 118 // }
27 console.log("fail status === > ", res); 119 commit('INIT', res.data.data)
28 }, 120 },
29 complete: (res) => { 121 fail: (res) => {
30 console.log("complete status === > ", res); 122 console.log('fail status === > ', res)
31 }, 123 },
32 }) 124 complete: (res) => {
33 } 125 console.log('complete status === > ', res)
34 126 }
35 } 127 })
128 },
129
130 modiCart({ commit }, param) {
131 const args = Object.assign({ num: param.num }, param.args)
132 delete param.args
133 request({
134 url: cartModi,
135 data: param,
136 success: (res) => {
137 console.log('modi-parm', param)
138 commit('MODI', args)
139 },
140 fail: (res) => {
141 console.log('fail status === > ', res)
142 },
143 complete: (res) => {
144 console.log('complete status === > ', res)
145 }
146 })
147 },
148
149 delCart({ commit }, param) {
150 const arg = param.arg
151 delete param.arg
152 request({
153 url: cartDel,
154 data: param,
155 success: (res) => {
156 console.log('del-parm', param)
157 console.log('del-myparms==>', arg)
158 // console.log('deacart====>cartList',this.$store.state.cart.cartList)
159
160 commit('DEL', arg)
161 },
162 fail: (res) => {
163 console.log('fail status === > ', res)
164 },
165 complete: (res) => {
166 console.log('complete status === > ', res)
167 }
168 })
169 },
170
171 addCart({ commit }, param) {
172 console.log('请求接口开始')
173 request({
174 url: cartAdd,
175 data: param,
176 success: (res) => {
177 console.log('add-parm', param)
178 console.log('addcart===>res.data===>', res.data)
179 // commit('INIT', res.data.data)
180 },
181 fail: (res) => {
182 console.log('fail status === > ', res)
183 },
184 complete: (res) => {
185 console.log('complete status === > ', res)
186 }
187 })
188 }
189
190 }
191
192 export default {
36 193 namespaced: true,
37 export default { 194 state,
38 namespaced: true, 195 mutations,
39 state, 196 actions
src/store/modules/detailStandard_k.js
Diff comments   View file @058f060
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/myLoveList.js
Diff comments   View file @058f060
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 mylovelist
6 } = urlAlias;
7
8 const state = {
9 loveList: [],
10 };
11
12 const mutations = {
13 INIT: (state, data) => {
14 state.loveList = data;
15 },
16 };
17
18 const actions = {
19 getLoveList({ commit }, param) {
20 request({
21 url: mylovelist,
22 data: param,
23 success: (res) => {
24 // console.log(res.data);
25 commit("INIT", res.data.data);
26 },
27 })
28 }
29 }
30
31 export default {
32 namespaced: true,
33 state,
34 mutations,
35 actions,
36 }
src/store/modules/myOrder.js
Diff comments   View file @058f060
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 const resData = { 91 // console.log(res.data);
92 ...res, 92 commit("INIT", res.data.data);
93 data,
94 }
95 console.log('data.data', resData.data.data);
96 commit("INIT", resData.data.data);
97 }, 93 },
98 }) 94 })
99 } 95 }
100 } 96 }
101 97
102 export default { 98 export default {
103 namespaced: true, 99 namespaced: true,
104 state, 100 state,
105 mutations, 101 mutations,
106 actions, 102 actions,
107 } 103 }
src/store/modules/orderRead.js
Diff comments   View file @058f060
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 orderRead
6 } = urlAlias;
7
8 const state = {
9 orderInfo: {},
10 };
11
12 const mutations = {
13 INIT: (state, orderInfo) => {
14 state.orderInfo = orderInfo;
15 },
16 };
17
18 const actions = {
19 getOrderInfo({ commit }, param) {
20 request({
21 url: orderRead,
22 data: param,
23 success: (res) => {
24 commit("INIT", res.data.data);
25 },
26 })
27 },
28 };
29
30 export default {
31 namespaced: true,
32 state,
33 mutations,
34 actions,
35 };
36
src/store/modules/payLog.js
Diff comments   View file @058f060
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 payLog
6 } = urlAlias;
7
8
9 const actions = {
10 payLog({ commit }, param) {
11 request({
12 url: payLog,
13 data: param,
14 success: (res) => {
15 // console.log(res.data);
16 commit("INIT", res.data.data);
17 },
18 })
19 }
20 }
21
22 export default {
23 namespaced: true,
24 // state,
25 // mutations,
26 actions,
27 }
src/store/modules/statusConfirm.js
Diff comments   View file @058f060
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 statusConfirm
6 } = urlAlias;
7
8 // const openid = uni.getStorageSync('openid');
9 const actions = {
10 confirm({ commit }, param) {
11 request({
12 url: statusConfirm,
13 data: param|| { },
14 success: (res) => {
15 console.log(res.data);
16 if(res.data.code === 1){
17 uni.showToast({
18 title:'已确认',
19 mask:true,
20 duration:1500,
21 icon:'success'
22 })
23 }else{
24 uni-uni.showToast({
25 title: '服务器错误，确认失败!',
26 mask:true
27 });
28 }
29 },
30 })
31 }
32 }
33
34 export default {
35 namespaced: true,
36 actions,
37 }
src/store/modules/test.js
Diff comments   View file @058f060
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
src/store/modules/userRecommand.js
Diff comments   View file @058f060
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 recommandList 5 recommandList
6 } = urlAlias; 6 } = urlAlias;
7 7
8 const state = { 8 const state = {
9 recommandList: [], 9 recommandList: [],
10 }; 10 };
11 11
12 const data = {
13 "code": 1,
14 "msg": "请求成功",
15 "data": {
16 // list 表示商品数据列表
17 "list": [
18 {
19 model_pic: null,
20 p_name: "1.61防蓝光镜片 非球面_枪色款镜架商务男士防蓝光眼镜",
21 p_root_index: "1", //对应goodType
22 pic: "http://localhost/sys-glass/image/picture.png",
23 pid: "96",
24 real_price: "17800",
25 sk_id: "1448",
26 sku_name: "1.61防蓝光镜片 非球面_枪色款镜架",
27 trade_num: "0",
28 },
29 {
30 "sk_id": "39",
31 "pic": "/static/img/goods/p1.jpg",
32 "p_name": "1.56防蓝光镜片非球面_黑银色镜架防蓝光眼镜超轻不压鼻",
33 "old_price": "18000",
34 "real_price": "9900",
35 "trade_num": 123, // 对应购买人数
36 "p_root_index": 2, // 对应跳转的详情页
37 "pid":4, // 产品id
38 },
39 ],
40 pagesnum:1, // 懒加载要用到的页数
41 pagessize:10,// 每次请求返回的list长度
42 }
43
44 }
45
12 const mutations = { 46 const mutations = {
13 INIT: (state, list) => { 47 INIT: (state, list) => {
14 state.recommandList = list; 48 state.recommandList = list;
15 }, 49 },
16 }; 50 };
17 51
52 let goodsList=[];
53
18 const actions = { 54 const actions = {
19 getRecommandList({ commit }, param) { 55 getRecommandList({ commit }, param) {
20 request({ 56 request({
21 url: recommandList, 57 url: recommandList,
22 success: (res) => { 58 success: (res) => {
23 console.log(res.data) 59 console.log('userRecommand-parm',param)
24 commit('INIT', res.data.data) 60 console.log(res.data.data)
61 // const Res={...res.data.data.list,...data.data.list}
62 goodsList=[...goodsList,...res.data.data]
63 // console.log(res.data)
64 commit('INIT', goodsList)
25 }, 65 },
26 fail: (res) => { 66 fail: (res) => {
67 uni.showToast({
68 title:"数据加载完了",
69 icon:"none"
70 })
27 console.log("fail status === > ", res); 71 console.log("fail status === > ", res);
28 }, 72 },
29 complete: (res) => { 73 complete: (res) => {
30 console.log("complete status === > ", res); 74 console.log("complete status === > ", res);
31 }, 75 },
32 }) 76 })
33 }, 77 },
34 }; 78 };
35 79
36 export default { 80 export default {
37 namespaced: true, 81 namespaced: true,
38 state, 82 state,
39 mutations, 83 mutations,
40 actions, 84 actions,
41 }; 85 };
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 orderList: '/app/order/list', // 获取订单列表 15 orderList: '/app/order/list', // 获取订单列表
16 myOrderList: '/app/order/list3', // 获取订单列表
17 orderRead: '/app/order/read', // 获取订单详情
18 cancelOrder: '/app/order/wait/del', // 取消订单
19 statusConfirm: '/app/order/statusConfirm', // 订单操作
16 20 payLog: '/app/pay/log', // 调起支付
17 // 购物车 21
18 cartList: '/app/cart/list', // 获取购物车列表 22 // 购物车
23 cartList: '/app/cart/list', // 获取购物车列表
24 cartModi: '/app/cart/modi', // 修改购物车
25 cartDel: '/app/cart/del', // 删除购物车
19 26 cartAdd: '/app/cart/add', // 添加购物车
20 // 我的 27
21 recommandList: '/app/prod/recommand', // 获取用户个性化推荐商品 28 // 我的
22 29 recommandList: '/app/prod/recommand', // 获取用户个性化推荐商品
23 // 镜框选购页 30
24 detailStandardList: '/app/prod/read', // 获取商品的详细信息 31 // 镜框选购页
32 detailStandardList: '/app/prod/read', // 获取商品的详细信息
33 // 选购页
34 detailStandardUrl: '/app/prod/read', // 获取商品的详细信息
35
36 // 地址管理
37 editAddress: '/app/address/edit_address', // 编辑地址
25 38 addressList: '/app/address/get_address_list', // 获取用户地址列表
26 // 地址管理 39 getAddress: '/app/address/get_address_by_id', // 获取用户某一地址信息
27 editAddress: '/app/address/edit_address', // 编辑地址 40
28 addressList: '/app/address/get_address_list', // 获取用户地址列表 41 // 用户数据
29 getAddress: '/app/address/get_address_by_id' // 获取用户某一地址信息 42 mylovelist: '/app/user/mylovelist', // 关心的人的数据
30 43 myloveadd: '/app/user/myloveadd' // 添加关心的人
31 } 44 }
32 45
33 export default urlAlias 46 export default urlAlias
34 47