Commit 7301fd560fd8c2da53b20866607627906290584c

Authored by BigBoss
1 parent 4e5fb860bc
Exists in master

添加购物车默认样式

src/pages/address/addressList.vue
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view 3 <view
4 v-if="addressList.length !== 0" 4 v-if="addressList.length !== 0"
5 class="list" 5 class="list"
6 > 6 >
7 <view 7 <view
8 v-for="(item, index) in addressList" 8 v-for="(item, index) in addressList"
9 :key="index" 9 :key="index"
10 class="order-user" 10 class="order-user"
11 @tap="toOrder(item.add_id)" 11 @tap="toOrder(item.add_id)"
12 > 12 >
13 <view class="order-user-head"> 13 <view class="order-user-head">
14 <view class="name"> 14 <view class="name">
15 <view 15 <view
16 v-if="item.default === '1'" 16 v-if="item.default === '1'"
17 class="default" 17 class="default"
18 ><text>默认</text></view>{{item.name}} 18 ><text>默认</text></view>{{item.name}}
19 </view> 19 </view>
20 <text class="mobile">{{item.mobile}}</text> 20 <text class="mobile">{{item.mobile}}</text>
21 </view> 21 </view>
22 <view class="order-user-body"> 22 <view class="order-user-body">
23 <image src="../../static/myorder-paying-location.png"></image> 23 <image src="../../static/myorder-paying-location.png"></image>
24 <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> 24 <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text>
25 </view> 25 </view>
26 <image 26 <image
27 @click.stop="toEditAddress(item.add_id)" 27 @click.stop="toEditAddress(item.add_id)"
28 v-if="item.default === '1'" 28 v-if="item.default === '1'"
29 class="arrow" 29 class="arrow"
30 src="../../static/right.png" 30 src="../../static/right.png"
31 ></image> 31 ></image>
32 <image 32 <image
33 @click.stop="toEditAddress(item.add_id)" 33 @click.stop="toEditAddress(item.add_id)"
34 v-else 34 v-else
35 class="arrow pen" 35 class="arrow pen"
36 src="../../static/icon-pen.png" 36 src="../../static/icon-pen.png"
37 ></image> 37 ></image>
38 </view> 38 </view>
39 </view> 39 </view>
40 <view 40 <view
41 v-else 41 v-else
42 class="empty" 42 class="empty"
43 > 43 >
44 暂无收货地址 44 暂无收货地址
45 </view> 45 </view>
46 <button @tap="toAddAddress" class="add">新建收货地址</button> 46 <button @tap="toAddAddress" class="add">新建收货地址</button>
47 </view> 47 </view>
48 </template> 48 </template>
49 49
50 <script> 50 <script>
51 import store from '@/store' 51 import store from '@/store'
52 export default { 52 export default {
53 data () { 53 data () {
54 return {} 54 return {}
55 }, 55 },
56 computed: { 56 computed: {
57 addressList () { 57 addressList () {
58 return this.$store.state.address.list 58 return this.$store.state.address.list
59 } 59 }
60 }, 60 },
61 onLoad ({ edit }) { 61 onLoad ({ edit }) {
62 if (edit) { 62 if (edit) {
63 this.edit = true 63 this.edit = true
64 } 64 }
65 store.dispatch('address/list') 65 // store.dispatch('address/list')
66 }, 66 },
67 onShow() { 67 onShow() {
68 store.dispatch('address/list') 68 store.dispatch('address/list')
69 }, 69 },
70 methods: { 70 methods: {
71 toAddAddress() { 71 toAddAddress() {
72 console.log('aaaaa-a') 72 console.log('aaaaa-a')
73 uni.navigateTo({ 73 uni.navigateTo({
74 url: 'addAddress', 74 url: 'addAddress',
75 fail: (error) => { 75 fail: (error) => {
76 console.error('跳转出现错误', error) 76 console.error('跳转出现错误', error)
77 } 77 }
78 }) 78 })
79 }, 79 },
80 toEditAddress (addId) { 80 toEditAddress (addId) {
81 console.log('addId', addId) 81 console.log('addId', addId)
82 uni.navigateTo({ 82 uni.navigateTo({
83 url: `addAddress?addId=${addId}`, 83 url: `addAddress?addId=${addId}`,
84 fail: (error) => { 84 fail: (error) => {
85 console.error('跳转出现错误', error) 85 console.error('跳转出现错误', error)
86 } 86 }
87 }) 87 })
88 }, 88 },
89 toOrder (addId) { 89 toOrder (addId) {
90 if (this.edit) { 90 if (this.edit) {
91 let pages = getCurrentPages(); 91 let pages = getCurrentPages();
92 let prevPage = pages[pages.length - 2]; //上一个页面 92 let prevPage = pages[pages.length - 2]; //上一个页面
93 const addressId=addId 93 const addressId=addId
94 // console.log(addressId) 94 // console.log(addressId)
95 prevPage.onShow(addressId); 95 prevPage.onShow(addressId);
96 uni.navigateBack(); 96 uni.navigateBack();
97 // uni.navigateTo({ 97 // uni.navigateTo({
98 // url: `../confirmOrder/confirmOrder?addressId=${addId}`, 98 // url: `../confirmOrder/confirmOrder?addressId=${addId}`,
99 // fail: (error) => { 99 // fail: (error) => {
100 // console.error('跳转出现错误', error) 100 // console.error('跳转出现错误', error)
101 // } 101 // }
102 // }) 102 // })
103 } 103 }
104 } 104 }
105 } 105 }
106 } 106 }
107 </script> 107 </script>
108 108
109 <style lang="scss"> 109 <style lang="scss">
110 .content { 110 .content {
111 min-height: 100vh; 111 min-height: 100vh;
112 background-color: #f2f2f2; 112 background-color: #f2f2f2;
113 padding-top: 20rpx; 113 padding-top: 20rpx;
114 padding-bottom: 112rpx; 114 padding-bottom: 112rpx;
115 .order-user { 115 .order-user {
116 width: 670rpx; 116 width: 670rpx;
117 height: 228rpx; 117 height: 228rpx;
118 background: #ffffff; 118 background: #ffffff;
119 border-radius: 14rpx; 119 border-radius: 14rpx;
120 margin: 0 auto; 120 margin: 0 auto;
121 margin-bottom: 20rpx; 121 margin-bottom: 20rpx;
122 position: relative; 122 position: relative;
123 .order-user-head { 123 .order-user-head {
124 display: flex; 124 display: flex;
125 height: 108rpx; 125 height: 108rpx;
126 width: 100%; 126 width: 100%;
127 align-items: center; 127 align-items: center;
128 padding-left: 126rpx; 128 padding-left: 126rpx;
129 box-sizing: border-box; 129 box-sizing: border-box;
130 .name { 130 .name {
131 display: flex; 131 display: flex;
132 justify-content: space-between; 132 justify-content: space-between;
133 font-size: 14px; 133 font-size: 14px;
134 color: #333333; 134 color: #333333;
135 letter-spacing: -0.26px; 135 letter-spacing: -0.26px;
136 margin-right: 20rpx; 136 margin-right: 20rpx;
137 .default { 137 .default {
138 height: 40rpx; 138 height: 40rpx;
139 width: 80rpx; 139 width: 80rpx;
140 background-color: #4a90e2; 140 background-color: #4a90e2;
141 border-radius: 13px; 141 border-radius: 13px;
142 border-radius: 13px; 142 border-radius: 13px;
143 text-align: center; 143 text-align: center;
144 margin-right: 20rpx; 144 margin-right: 20rpx;
145 text { 145 text {
146 display: flex; 146 display: flex;
147 justify-content: center; 147 justify-content: center;
148 align-items: center; 148 align-items: center;
149 font-size: 12px; 149 font-size: 12px;
150 color: #ffffff; 150 color: #ffffff;
151 letter-spacing: -0.23px; 151 letter-spacing: -0.23px;
152 } 152 }
153 } 153 }
154 } 154 }
155 .mobile { 155 .mobile {
156 font-size: 14px; 156 font-size: 14px;
157 color: #999999; 157 color: #999999;
158 letter-spacing: -0.26px; 158 letter-spacing: -0.26px;
159 } 159 }
160 } 160 }
161 .order-user-body { 161 .order-user-body {
162 display: flex; 162 display: flex;
163 width: 100%; 163 width: 100%;
164 image { 164 image {
165 width: 24px; 165 width: 24px;
166 height: 26px; 166 height: 26px;
167 margin: 12rpx 32rpx 0 40rpx; 167 margin: 12rpx 32rpx 0 40rpx;
168 } 168 }
169 .address { 169 .address {
170 font-weight: bold; 170 font-weight: bold;
171 font-size: 14px; 171 font-size: 14px;
172 color: #333333; 172 color: #333333;
173 letter-spacing: -0.26px; 173 letter-spacing: -0.26px;
174 } 174 }
175 } 175 }
176 .arrow { 176 .arrow {
177 width: 12px; 177 width: 12px;
178 height: 12px; 178 height: 12px;
179 position: absolute; 179 position: absolute;
180 right: 40rpx; 180 right: 40rpx;
181 bottom: 104rpx; 181 bottom: 104rpx;
182 } 182 }
183 } 183 }
184 .empty { 184 .empty {
185 color: #666; 185 color: #666;
186 font-size: 16px; 186 font-size: 16px;
187 text-align: center; 187 text-align: center;
188 padding-top: 30vh; 188 padding-top: 30vh;
189 } 189 }
190 .add { 190 .add {
191 position: fixed; 191 position: fixed;
192 bottom: 0; 192 bottom: 0;
193 left: 0; 193 left: 0;
194 height: 112rpx; 194 height: 112rpx;
195 width: 100%; 195 width: 100%;
196 background-color: #ff6b4a; 196 background-color: #ff6b4a;
197 display: flex; 197 display: flex;
198 justify-content: center; 198 justify-content: center;
199 align-items: center; 199 align-items: center;
200 font-size: 16px; 200 font-size: 16px;
201 color: #ffffff; 201 color: #ffffff;
202 letter-spacing: -0.3px; 202 letter-spacing: -0.3px;
203 } 203 }
204 } 204 }
205 </style> 205 </style>
206 206
src/pages/cart/cart.vue
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <block v-if="cartList.length==0"> 3 <block v-if="cartList.length==0">
4 4 <view class="nocard">
5 <image src="../../static/nocart.png" class="nocartPic" mode="aspectFill"></image>
6 <text class="nocartText">购物车竟然是空的</text>
7 </view>
5 </block> 8 </block>
6 <block v-else> 9 <block v-else>
7 <view class="card"> 10 <view class="card">
8 <view class="cardHeader"> 11 <view class="cardHeader">
9 <view 12 <view
10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" 13 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11 @click="pClick" 14 @click="pClick"
12 > 15 >
13 <span class="correct"></span> 16 <span class="correct"></span>
14 </view> 17 </view>
15 <image 18 <image
16 src="../../static/store.png" 19 src="../../static/store.png"
17 mode="aspectFill" 20 mode="aspectFill"
18 ></image> 21 ></image>
19 <text>非常戴镜</text> 22 <text>非常戴镜</text>
20 </view> 23 </view>
21 <view 24 <view
22 class="cardBody" 25 class="cardBody"
23 v-for="(item,index) in cartList" 26 v-for="(item,index) in cartList"
24 :key="index" 27 :key="index"
25 @longpress="delCart(item.cart_id,index)" 28 @longpress="delCart(item.cart_id,index)"
26 > 29 >
27 <view 30 <view
28 v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'" 31 v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
29 @click="childClick(cartList[index],index)" 32 @click="childClick(cartList[index],index)"
30 > 33 >
31 <span class="correct"></span> 34 <span class="correct"></span>
32 </view> 35 </view>
33 <view class="imageWrap"> 36 <view class="imageWrap">
34 <image 37 <image
35 :src="item.img_index_url" 38 :src="item.img_index_url"
36 mode="aspectFit" 39 mode="aspectFit"
37 style="width: 188rpx;height: 168rpx;" 40 style="width: 188rpx;height: 168rpx;"
38 ></image> 41 ></image>
39 </view> 42 </view>
40 <view class="goodInfo"> 43 <view class="goodInfo">
41 <!-- <view class="imageWrap"> 44 <!-- <view class="imageWrap">
42 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 45 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
43 </view> --> 46 </view> -->
44 <view class="infoRight"> 47 <view class="infoRight">
45 <view 48 <view
46 class="goodName" 49 class="goodName"
47 @tap="toGoods(item.pid,item.sk_id)" 50 @tap="toGoods(item.pid,item.sk_id)"
48 >{{item.p_name}}</view> 51 >{{item.p_name}}</view>
49 <view 52 <view
50 class="describ" 53 class="describ"
51 @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)" 54 @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)"
52 > 55 >
53 <view class="desL"> 56 <view class="desL">
54 <view class="people"> 57 <view class="people">
55 使用人:{{item.peopleName}} 58 使用人:{{item.peopleName}}
56 </view> 59 </view>
57 <view class="skuInfo"> 60 <view class="skuInfo">
58 {{item.sku_name}} 61 {{item.sku_name}}
59 </view> 62 </view>
60 </view> 63 </view>
61 <view class="desR"> 64 <view class="desR">
62 <image 65 <image
63 src="../../static/right.png" 66 src="../../static/right.png"
64 mode="aspectFit" 67 mode="aspectFit"
65 style="width: 18rpx;height: 18rpx;" 68 style="width: 18rpx;height: 18rpx;"
66 ></image> 69 ></image>
67 </view> 70 </view>
68 </view> 71 </view>
69 <view class="priceBox"> 72 <view class="priceBox">
70 <view class="price">¥{{item.nowPrice*item.num}}</view> 73 <view class="price">¥{{item.nowPrice}}</view>
71 <text class="maxCount">(限购{{maxCount}}副)</text> 74 <text class="maxCount">(限购{{maxCount}}副)</text>
72 <view class="counter"> 75 <view class="counter">
73 <view 76 <view
74 class="btn" 77 class="btn"
75 disabled="this.addDisabled" 78 disabled="this.addDisabled"
76 type="default" 79 type="default"
77 @tap="counter(index,false,item)" 80 @tap="counter(index,false,item)"
78 >-</view> 81 >-</view>
79 <text>{{item.num}}</text> 82 <text>{{item.num}}</text>
80 <view 83 <view
81 class="btn" 84 class="btn"
82 disabled="this.desDisabled" 85 disabled="this.desDisabled"
83 type="default" 86 type="default"
84 @tap="counter(index,true,item)" 87 @tap="counter(index,true,item)"
85 >+</view> 88 >+</view>
86 </view> 89 </view>
87 </view> 90 </view>
88 </view> 91 </view>
89 </view> 92 </view>
90 </view> 93 </view>
91 </view> 94 </view>
92 </block> 95 </block>
93 <view class="footer"> 96 <view class="footer">
94 <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view> 97 <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view>
95 <view class="footerRight"> 98 <view class="footerRight">
96 <view 99 <view
97 class="paybtn" 100 class="paybtn"
98 @click="toComfirmOrder" 101 @click="toComfirmOrder"
99 >立即结算</view> 102 >立即结算</view>
100 </view> 103 </view>
101 </view> 104 </view>
102 <BottomSheet 105 <BottomSheet
103 v-if="isShowBottom" 106 v-if="isShowBottom"
104 :isCart="isCart" 107 :isCart="isCart"
105 @addCart="addCart" 108 @addCart="addCart"
106 :sk_id="sk_id" 109 :sk_id="sk_id"
107 :propMpId="mp_id" 110 :propMpId="mp_id"
108 @chooseCartModi="chooseCartModi" 111 @chooseCartModi="chooseCartModi"
109 :cart_id="cart_id" 112 :cart_id="cart_id"
110 :index="cartIndex" 113 :index="cartIndex"
111 :pid="pid" 114 :pid="pid"
112 :goodInfo="goodInfo" 115 :goodInfo="goodInfo"
113 :isShowBottom="isShowBottom" 116 :isShowBottom="isShowBottom"
114 @closeBottom="closeBottom" 117 @closeBottom="closeBottom"
115 ></BottomSheet> 118 ></BottomSheet>
116 </view> 119 </view>
117 </template> 120 </template>
118 121
119 <script> 122 <script>
120 123
121 import store from '@/store' 124 import store from '@/store'
122 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue' 125 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'
123 export default { 126 export default {
124 components: { 127 components: {
125 BottomSheet, 128 BottomSheet,
126 }, 129 },
127 data() { 130 data() {
128 return { 131 return {
129 pid: Number, 132 pid: Number,
130 isCart: Number, 133 isCart: Number,
131 sk_id: String, 134 sk_id: String,
132 mp_id: String, 135 mp_id: String,
133 isShowBottom: false, // 底部弹窗开关 136 isShowBottom: false, // 底部弹窗开关
134 cart_id: Number, 137 cart_id: Number,
135 maxCount: 20, 138 maxCount: 20,
136 cartIndex: Number, 139 cartIndex: Number,
137 cartList: [], 140 cartList: [],
138 } 141 }
139 }, 142 },
140 computed: { 143 computed: {
141 pIsoPen () { 144 pIsoPen () {
142 if (this.cartList.length > 0) { 145 if (this.cartList.length > 0) {
143 return !this.cartList.find(item => !item.isChecked) 146 return !this.cartList.find(item => !item.isChecked)
144 } 147 }
145 return false 148 return false
146 }, 149 },
147 goodInfo () { 150 goodInfo () {
148 return this.$store.state.read.goodInfo 151 return this.$store.state.read.goodInfo
149 }, 152 },
150 totalPrice() { 153 totalPrice() {
151 let totalPrice = 0 154 let totalPrice = 0
152 this.cartList.forEach((item) => { 155 this.cartList.forEach((item) => {
153 if (item.isChecked) { 156 if (item.isChecked) {
154 totalPrice += item.nowPrice * item.num 157 totalPrice += item.nowPrice * item.num
155 } 158 }
156 }) 159 })
157 return totalPrice 160 return totalPrice
158 }, 161 },
159 }, 162 },
160 onShow: async function() { 163 onShow: async function() {
161 await this.$store.dispatch('cart/getCartList', { 164 await this.$store.dispatch('cart/getCartList', {
162 uid: this.$store.state.user.userInfo.uid, // 用户id 165 uid: this.$store.state.user.userInfo.uid, // 用户id
163 }) 166 })
164 167
165 this.cartList = this.$store.state.cart.cartList 168 this.cartList = this.$store.state.cart.cartList
166 this.cartList.forEach((item) => { 169 this.cartList.forEach((item) => {
167 item.isChecked = false 170 item.isChecked = false
168 }) 171 })
169 }, 172 },
170 // onLoad: async function() { 173 // onLoad: async function() {
171 // }, 174 // },
172 methods: { 175 methods: {
173 // 全选按钮 176 // 全选按钮
174 pClick() { 177 pClick() {
175 const pStatus = !this.cartList.find(item => !item.isChecked) 178 const pStatus = !this.cartList.find(item => !item.isChecked)
176 const oldList = this.cartList 179 const oldList = this.cartList
177 oldList.forEach((item, index) => { 180 oldList.forEach((item, index) => {
178 item.isChecked = !pStatus 181 item.isChecked = !pStatus
179 this.cartList.splice(index, 1, item) 182 this.cartList.splice(index, 1, item)
180 }) 183 })
181 }, 184 },
182 // 单选按钮 185 // 单选按钮
183 childClick(type, index) { 186 childClick(type, index) {
184 this.cartList[index].isChecked = !this.cartList[index].isChecked 187 this.cartList[index].isChecked = !this.cartList[index].isChecked
185 // vue没有办法监听数组内部值的变化,所以需要通过这个方法去触发 188 // vue没有办法监听数组内部值的变化,所以需要通过这个方法去触发
186 this.cartList.splice(index, 1, this.cartList[index]) 189 this.cartList.splice(index, 1, this.cartList[index])
187 }, 190 },
188 // 修改购物车 191 // 修改购物车
189 chooseCartModi(mp_id, sk_id, price, pid, num, cart_id, index) { 192 chooseCartModi(mp_id, sk_id, price, pid, num, cart_id, index) {
190 // console.log('modi',mp_id,sk_id,price,pid,num,cart_id) 193 // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
191 store.dispatch('cart/modiCart', { 194 store.dispatch('cart/modiCart', {
192 uid: this.$store.state.user.userInfo.uid, 195 uid: this.$store.state.user.userInfo.uid,
193 openid: this.$store.state.user.userInfo.openid, 196 openid: this.$store.state.user.userInfo.openid,
194 mp_id: mp_id, 197 mp_id: mp_id,
195 sk_id: sk_id, 198 sk_id: sk_id,
196 price: price, 199 price: price,
197 pid: pid, 200 pid: pid,
198 num: num, 201 num: num,
199 cart_id: cart_id, 202 cart_id: cart_id,
200 args: { 203 args: {
201 index: index, 204 index: index,
202 }, 205 },
203 }) 206 })
204 this.$nextTick(function() { 207 this.$nextTick(function() {
205 store.dispatch('cart/getCartList', { 208 store.dispatch('cart/getCartList', {
206 uid: this.$store.state.user.userInfo.uid, // 用户id 209 uid: this.$store.state.user.userInfo.uid, // 用户id
207 }).then(() => { 210 }).then(() => {
208 this.cartList = this.$store.state.cart.cartList 211 this.cartList = this.$store.state.cart.cartList
209 }) 212 })
210 }) 213 })
211 }, 214 },
212 // 底部弹窗开关 215 // 底部弹窗开关
213 showBottom(isCart, pid, skId, mp_id, cart_id, index) { 216 showBottom(isCart, pid, skId, mp_id, cart_id, index) {
214 store.dispatch('read/fetch', { 217 store.dispatch('read/fetch', {
215 pid, 218 pid,
216 sk_id: skId, 219 sk_id: skId,
217 }).then(() => { 220 }).then(() => {
218 this.cartIndex = index 221 this.cartIndex = index
219 this.sk_id = skId 222 this.sk_id = skId
220 this.pid = pid 223 this.pid = pid
221 this.mp_id = mp_id 224 this.mp_id = mp_id
222 this.isCart = isCart 225 this.isCart = isCart
223 this.cart_id = cart_id 226 this.cart_id = cart_id
224 this.isShowBottom = true 227 this.isShowBottom = true
225 }) 228 })
226 }, 229 },
227 closeBottom() { 230 closeBottom() {
228 this.isShowBottom = false 231 this.isShowBottom = false
229 }, 232 },
230 toGoods(id, skId) { 233 toGoods(id, skId) {
231 uni.navigateTo({ 234 uni.navigateTo({
232 url: '../details/details?pid=' + id + '&sk_id=' + skId, 235 url: '../details/details?pid=' + id + '&sk_id=' + skId,
233 success: res => {}, 236 success: res => {},
234 fail: () => {}, 237 fail: () => {},
235 complete: () => {}, 238 complete: () => {},
236 }) 239 })
237 }, 240 },
238 241
239 toComfirmOrder() { 242 toComfirmOrder() {
240 this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked) 243 this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
241 if (this.$store.state.cart.checkedCartLst.length > 0) { 244 if (this.$store.state.cart.checkedCartLst.length > 0) {
242 uni.navigateTo({ 245 uni.navigateTo({
243 url: '../confirmOrder/confirmOrder?isCart=true', 246 url: '../confirmOrder/confirmOrder?isCart=true',
244 }) 247 })
245 } else { 248 } else {
246 uni.showToast({ 249 uni.showToast({
247 title: '您还没有选择宝贝哦~', 250 title: '您还没有选择宝贝哦~',
248 icon: 'none', 251 icon: 'none',
249 }) 252 })
250 } 253 }
251 }, 254 },
252 counter(index, isadd, item) { 255 counter(index, isadd, item) {
253 // console.log('item=====>', item) 256 // console.log('item=====>', item)
254 // console.log('num=====>', item.num) 257 // console.log('num=====>', item.num)
255 const nums = parseInt(item.num) 258 const nums = parseInt(item.num)
256 if (isadd) { 259 if (isadd) {
257 if (nums >= this.maxCount) { 260 if (nums >= this.maxCount) {
258 this.addDisabled = true 261 this.addDisabled = true
259 } else { 262 } else {
260 this.addDisabled = true 263 this.addDisabled = true
261 store.dispatch('cart/modiCart', { 264 store.dispatch('cart/modiCart', {
262 uid: this.$store.state.user.userInfo.uid, 265 uid: this.$store.state.user.userInfo.uid,
263 openid: this.$store.state.user.userInfo.openid, 266 openid: this.$store.state.user.userInfo.openid,
264 mp_id: item.mp_id, 267 mp_id: item.mp_id,
265 sk_id: item.sk_id, 268 sk_id: item.sk_id,
266 price: item.nowPrice, 269 price: item.nowPrice,
267 pid: item.pid, 270 pid: item.pid,
268 num: nums + 1, 271 num: nums + 1,
269 cart_id: item.cart_id, 272 cart_id: item.cart_id,
270 args: { 273 args: {
271 index: index, 274 index: index,
272 isadd: isadd, 275 isadd: isadd,
273 }, 276 },
274 }) 277 })
275 this.addDisabled = false 278 this.addDisabled = false
276 } 279 }
277 } else { 280 } else {
278 if (nums <= 1) { 281 if (nums <= 1) {
279 this.desDisabled = true 282 this.desDisabled = true
280 } else { 283 } else {
281 this.desDisabled = false 284 this.desDisabled = false
282 285
283 store.dispatch('cart/modiCart', { 286 store.dispatch('cart/modiCart', {
284 uid: this.$store.state.user.userInfo.uid, 287 uid: this.$store.state.user.userInfo.uid,
285 openid: this.$store.state.user.userInfo.openid, 288 openid: this.$store.state.user.userInfo.openid,
286 mp_id: item.mp_id, 289 mp_id: item.mp_id,
287 sk_id: item.sk_id, 290 sk_id: item.sk_id,
288 price: item.nowPrice, 291 price: item.nowPrice,
289 pid: item.pid, 292 pid: item.pid,
290 num: nums - 1, 293 num: nums - 1,
291 cart_id: item.cart_id, 294 cart_id: item.cart_id,
292 args: { 295 args: {
293 index: index, 296 index: index,
294 isadd: isadd, 297 isadd: isadd,
295 }, 298 },
296 }) 299 })
297 this.desDisabled = true 300 this.desDisabled = true
298 } 301 }
299 } 302 }
300 }, 303 },
301 delCart(cart_id, index) { 304 delCart(cart_id, index) {
302 cart_id = parseInt(cart_id) 305 cart_id = parseInt(cart_id)
303 uni.showModal({ 306 uni.showModal({
304 title: '是否删除该商品', 307 title: '是否删除该商品',
305 success: function (res) { 308 success: function (res) {
306 if (res.confirm) { 309 if (res.confirm) {
307 store.dispatch('cart/delCart', { 310 store.dispatch('cart/delCart', {
308 uid: this.$store.state.user.userInfo.uid, 311 uid: this.$store.state.user.userInfo.uid,
309 openid: this.$store.state.user.userInfo.openid, 312 openid: this.$store.state.user.userInfo.openid,
310 cart_id: cart_id, // 要修改的购物车id 313 cart_id: cart_id, // 要修改的购物车id
311 arg: index, // 由于action 传参是能接收两参数,因此将index放入对象 314 arg: index, // 由于action 传参是能接收两参数,因此将index放入对象
312 }) 315 })
313 } 316 }
314 }.bind(this), 317 }.bind(this),
315 }) 318 })
316 // this.cartList.splice(index,1) 319 // this.cartList.splice(index,1)
317 }, 320 },
318 }, 321 },
319 } 322 }
320 </script> 323 </script>
321 324
322 <style lang="scss"> 325 <style lang="scss">
323 .content { 326 .content {
324 min-height: 100vh; 327 min-height: 100vh;
325 background-color: #f2f2f2; 328 background-color: #f2f2f2;
326 display: flex; 329 display: flex;
327 flex-direction: column; 330 flex-direction: column;
328 align-items: center; 331 align-items: center;
329 justify-content: space-between; 332 justify-content: space-between;
330 padding: 20rpx 40rpx; 333 padding: 20rpx 40rpx;
331 box-sizing: border-box; 334 box-sizing: border-box;
332 335 .nocard{
336 width: 100%;
337 display: flex;
338 flex-direction: column;
339 align-items: center;
340 justify-content: space-between;
341 .nocartPic{
342 height: 400rpx;
343 border-radius: 200rpx;
344 margin: 40rpx 0;
345 }
346 .nocartText{
347 color: #333333;
348 font-size: 28rpx;
349 }
350 }
333 .partentCheck { 351 .partentCheck {
334 width: 16px; 352 width: 16px;
335 height: 16px; 353 height: 16px;
336 border-radius: 22px; 354 border-radius: 22px;
337 border: 1px solid #cfcfcf; 355 border: 1px solid #cfcfcf;
338 background-color: #ffffff; 356 background-color: #ffffff;
339 margin: 24rpx 12rpx 24rpx 24rpx; 357 margin: 24rpx 12rpx 24rpx 24rpx;
340 } 358 }
341 .partentChecked { 359 .partentChecked {
342 width: 18px; 360 width: 18px;
343 height: 18px; 361 height: 18px;
344 border-radius: 22px; 362 border-radius: 22px;
345 background-color: #ff6b4a; 363 background-color: #ff6b4a;
346 margin: 24rpx 12rpx 24rpx 24rpx; 364 margin: 24rpx 12rpx 24rpx 24rpx;
347 .correct { 365 .correct {
348 display: inline-block; 366 display: inline-block;
349 position: relative; 367 position: relative;
350 width: 10rpx; 368 width: 10rpx;
351 height: 2rpx; 369 height: 2rpx;
352 background: #ffffff; 370 background: #ffffff;
353 line-height: 0; 371 line-height: 0;
354 font-size: 0; 372 font-size: 0;
355 position: relative; 373 position: relative;
356 top: -7px; 374 top: -7px;
357 left: 4px; 375 left: 4px;
358 -webkit-transform: rotate(45deg); 376 -webkit-transform: rotate(45deg);
359 } 377 }
360 .correct:after { 378 .correct:after {
361 content: "/"; 379 content: "/";
362 display: block; 380 display: block;
363 width: 16rpx; 381 width: 16rpx;
364 height: 2rpx; 382 height: 2rpx;
365 background: #ffffff; 383 background: #ffffff;
366 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 384 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
367 } 385 }
368 } 386 }
369 387
370 .card { 388 .card {
371 background-color: #ffffff; 389 background-color: #ffffff;
372 border-radius: 16rpx; 390 border-radius: 16rpx;
373 box-sizing: border-box; 391 box-sizing: border-box;
374 padding: 36rpx 36rpx 36rpx 18rpx; 392 padding: 36rpx 36rpx 36rpx 18rpx;
375 display: flex; 393 display: flex;
376 flex-direction: column; 394 flex-direction: column;
377 align-items: center; 395 align-items: center;
378 justify-content: space-between; 396 justify-content: space-between;
379 margin-bottom: 180rpx; 397 margin-bottom: 180rpx;
380 .cardHeader { 398 .cardHeader {
381 width: 100%; 399 width: 100%;
382 height: 36rpx; 400 height: 36rpx;
383 display: flex; 401 display: flex;
384 align-items: center; 402 align-items: center;
385 justify-content: flex-start; 403 justify-content: flex-start;
386 margin-bottom: 20rpx; 404 margin-bottom: 20rpx;
387 image { 405 image {
388 height: 32rpx; 406 height: 32rpx;
389 width: 32rpx; 407 width: 32rpx;
390 padding-left: 6px; 408 padding-left: 6px;
391 padding-right: 10px; 409 padding-right: 10px;
392 } 410 }
393 text { 411 text {
394 // font-family: PingFangSC-Regular; 412 // font-family: PingFangSC-Regular;
395 font-size: 14px; 413 font-size: 14px;
396 color: #333333; 414 color: #333333;
397 letter-spacing: -0.26px; 415 letter-spacing: -0.26px;
398 } 416 }
399 } 417 }
400 .cardBody { 418 .cardBody {
401 width: 100%; 419 width: 100%;
402 min-height: 300rpx; 420 min-height: 300rpx;
403 display: flex; 421 display: flex;
404 align-items: center; 422 align-items: center;
405 justify-content: space-between; 423 justify-content: space-between;
406 .goodInfo { 424 .goodInfo {
407 width: 390rpx; 425 width: 390rpx;
408 display: flex; 426 display: flex;
409 flex-direction: row; 427 flex-direction: row;
410 justify-content: flex-start; 428 justify-content: flex-start;
411 padding-left: 6px; 429 padding-left: 6px;
412 430
413 .imageWrap { 431 .imageWrap {
414 height: 188rpx; 432 height: 188rpx;
415 width: 188rpx; 433 width: 188rpx;
416 margin-right: 28rpx; 434 margin-right: 28rpx;
417 435
418 image { 436 image {
419 border-radius: 4px; 437 border-radius: 4px;
420 height: 188rpx; 438 height: 188rpx;
421 width: 188rpx; 439 width: 188rpx;
422 } 440 }
423 } 441 }
424 .infoRight { 442 .infoRight {
425 display: flex; 443 display: flex;
426 flex-direction: column; 444 flex-direction: column;
427 align-items: flex-start; 445 align-items: flex-start;
428 justify-content: space-between; 446 justify-content: space-between;
429 min-height: 240rpx; 447 min-height: 240rpx;
430 width: 100%; 448 width: 100%;
431 .goodName { 449 .goodName {
432 display: -webkit-box; 450 display: -webkit-box;
433 -webkit-box-orient: vertical; 451 -webkit-box-orient: vertical;
434 -webkit-line-clamp: 2; 452 -webkit-line-clamp: 2;
435 text-align: justify; 453 text-align: justify;
436 overflow: hidden; 454 overflow: hidden;
437 font-size: 28rpx; 455 font-size: 28rpx;
438 color: #333333; 456 color: #333333;
439 } 457 }
440 .describ { 458 .describ {
441 width: 100%; 459 width: 100%;
442 min-height: 80rpx; 460 min-height: 80rpx;
443 background: #f9f9f9; 461 background: #f9f9f9;
444 border-radius: 2px; 462 border-radius: 2px;
445 box-sizing: border-box; 463 box-sizing: border-box;
446 padding: 10rpx; 464 padding: 10rpx;
447 font-size: 20rpx; 465 font-size: 20rpx;
448 letter-spacing: -0.23px; 466 letter-spacing: -0.23px;
449 color: #999999; 467 color: #999999;
450 display: flex; 468 display: flex;
451 justify-content: space-between; 469 justify-content: space-between;
452 align-items: center; 470 align-items: center;
453 .desL { 471 .desL {
454 view { 472 view {
455 margin: 10rpx 0 10rpx 0; 473 margin: 10rpx 0 10rpx 0;
456 } 474 }
457 } 475 }
458 } 476 }
459 .priceBox { 477 .priceBox {
460 display: flex; 478 display: flex;
461 justify-content: space-between; 479 justify-content: space-between;
462 align-items: center; 480 align-items: center;
463 // margin-top: 26px; 481 // margin-top: 26px;
464 width: 100%; 482 width: 100%;
465 font-size: 14px; 483 font-size: 14px;
466 color: #999999; 484 color: #999999;
467 .maxCount { 485 .maxCount {
468 color: #999999; 486 color: #999999;
469 font-size: 20rpx; 487 font-size: 20rpx;
470 } 488 }
471 .price { 489 .price {
472 color: #ff6b4a; 490 color: #ff6b4a;
473 font-size: 28rpx; 491 font-size: 28rpx;
474 } 492 }
475 .counter { 493 .counter {
476 display: flex; 494 display: flex;
477 flex-direction: row; 495 flex-direction: row;
478 justify-content: space-between; 496 justify-content: space-between;
479 align-items: center; 497 align-items: center;
480 font-size: 28rpx; 498 font-size: 28rpx;
481 color: #333333; 499 color: #333333;
482 width: 122rpx; 500 width: 122rpx;
483 .btn { 501 .btn {
484 display: flex; 502 display: flex;
485 justify-content: center; 503 justify-content: center;
486 line-height: 32rpx; 504 line-height: 32rpx;
487 height: 32rpx; 505 height: 32rpx;
488 width: 32rpx; 506 width: 32rpx;
489 background-color: #f2f2f2; 507 background-color: #f2f2f2;
490 color: #cfcfcf; 508 color: #cfcfcf;
491 } 509 }
492 } 510 }
493 } 511 }
494 } 512 }
495 } 513 }
496 } 514 }
497 } 515 }
498 .footer { 516 .footer {
499 position: fixed; 517 position: fixed;
500 left: 0; 518 left: 0;
501 bottom: 0px; 519 bottom: 0px;
502 height: 112rpx; 520 height: 112rpx;
503 width: 100%; 521 width: 100%;
504 background-color: #ffffff; 522 background-color: #ffffff;
505 font-size: 16px; 523 font-size: 16px;
506 display: flex; 524 display: flex;
507 justify-content: space-between; 525 justify-content: space-between;
508 align-items: center; 526 align-items: center;
509 .footerLeft { 527 .footerLeft {
510 display: flex; 528 display: flex;
511 justify-content: center; 529 justify-content: center;
512 align-items: center; 530 align-items: center;
513 width: 50%; 531 width: 50%;
514 color: #333333; 532 color: #333333;
515 text { 533 text {
516 color: #ff6b4a; 534 color: #ff6b4a;
517 } 535 }
518 } 536 }
519 .footerRight { 537 .footerRight {
520 display: flex; 538 display: flex;
521 justify-content: flex-end; 539 justify-content: flex-end;
522 align-items: center; 540 align-items: center;
523 width: 50%; 541 width: 50%;
524 margin-right: 26rpx; 542 margin-right: 26rpx;
525 .paybtn { 543 .paybtn {
526 display: flex; 544 display: flex;
527 justify-content: center; 545 justify-content: center;
528 align-items: center; 546 align-items: center;
529 background: #ff6b4a; 547 background: #ff6b4a;
530 border-radius: 20px; 548 border-radius: 20px;
531 border-radius: 20px; 549 border-radius: 20px;
532 color: #ffffff; 550 color: #ffffff;
533 width: 204rpx; 551 width: 204rpx;
534 height: 80rpx; 552 height: 80rpx;
535 } 553 }
536 } 554 }
537 } 555 }
538 } 556 }
539 /* 隐藏滚动条 */ 557 /* 隐藏滚动条 */
540 ::-webkit-scrollbar { 558 ::-webkit-scrollbar {
541 width: 0; 559 width: 0;
542 height: 0; 560 height: 0;
543 color: transparent; 561 color: transparent;
544 } 562 }
545 </style> 563 </style>
546 564
src/pages/confirmOrder/confirmOrder.vue
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view></view> 3 <view></view>
4 <view 4 <view
5 class="addAddress" 5 class="addAddress"
6 @tap="toaddAddress" 6 @tap="toaddAddress"
7 v-if="this.showAddress" 7 v-if="this.showAddress"
8 > 8 >
9 <view class="addIcon"> 9 <view class="addIcon">
10 <image 10 <image
11 src="../../static/add.png" 11 src="../../static/add.png"
12 mode="aspectFill" 12 mode="aspectFill"
13 ></image> 13 ></image>
14 </view> 14 </view>
15 <view class="addressText">{{addAddress}}</view> 15 <view class="addressText">{{addAddress}}</view>
16 <image 16 <image
17 src="../../static/right.png" 17 src="../../static/right.png"
18 mode="aspectFill" 18 mode="aspectFill"
19 ></image> 19 ></image>
20 </view> 20 </view>
21 <view 21 <view
22 v-else 22 v-else
23 @tap="toaddAddress" 23 @tap="toaddAddress"
24 class="list order-user" 24 class="list order-user"
25 > 25 >
26 <view class="order-user-head"> 26 <view class="order-user-head">
27 <view class="name"> 27 <view class="name">
28 <view 28 <view
29 v-if="addressInfo.default === '1'" 29 v-if="addressInfo.default === '1'"
30 class="default" 30 class="default"
31 ><text>默认</text></view>{{addressInfo.name}} 31 ><text>默认</text></view>{{addressInfo.name}}
32 </view> 32 </view>
33 <text class="mobile">{{addressInfo.mobile}}</text> 33 <text class="mobile">{{addressInfo.mobile}}</text>
34 </view> 34 </view>
35 <view class="order-user-body"> 35 <view class="order-user-body">
36 <image src="../../static/myorder-paying-location.png"></image> 36 <image src="../../static/myorder-paying-location.png"></image>
37 <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text> 37 <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>
38 </view> 38 </view>
39 <image 39 <image
40 class="arrow" 40 class="arrow"
41 src="../../static/right.png" 41 src="../../static/right.png"
42 mode="aspectFill" 42 mode="aspectFill"
43 ></image> 43 ></image>
44 </view> 44 </view>
45 <view class="content"> 45 <view class="content">
46 <view class="orderInfo"> 46 <view class="orderInfo">
47 <view class="title"> 47 <view class="title">
48 <image 48 <image
49 src="../../static/store.png" 49 src="../../static/store.png"
50 mode="aspectFill" 50 mode="aspectFill"
51 style="width: 40rpx;height: 40rpx;" 51 style="width: 40rpx;height: 40rpx;"
52 ></image> 52 ></image>
53 <text>非常戴镜</text> 53 <text>非常戴镜</text>
54 </view> 54 </view>
55 55
56 <view 56 <view
57 class="infoBox" 57 class="infoBox"
58 v-if="isCart == 'true'" 58 v-if="isCart == 'true'"
59 v-for="(item, index) in checkedCartLst" 59 v-for="(item, index) in checkedCartLst"
60 :key="index" 60 :key="index"
61 > 61 >
62 <view class="infoTop"> 62 <view class="infoTop">
63 <image 63 <image
64 :src="item.img_index_url" 64 :src="item.img_index_url"
65 mode="aspectFill" 65 mode="aspectFill"
66 ></image> 66 ></image>
67 <view class="infoRight"> 67 <view class="infoRight">
68 <text class="goodName">{{item.p_name}}</text> 68 <text class="goodName">{{item.p_name}}</text>
69 <text class="remarks">支持7天无理由退货 顺丰发货</text> 69 <text class="remarks">支持7天无理由退货 顺丰发货</text>
70 <view class="priceBox"> 70 <view class="priceBox">
71 <view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost"> 71 <view class="price">¥{{Number(item.nowPrice) }}<text class="originCost">
72 ¥{{item.oldPrice*item.num}} 72 ¥{{item.oldPrice}}
73 </text></view> 73 </text></view>
74 <view class="counter"> 74 <view class="counter">
75 <view 75 <view
76 class="btn" 76 class="btn"
77 disabled="this.disabled" 77 disabled="this.disabled"
78 type="default" 78 type="default"
79 @click="counter(false,index)" 79 @click="counter(false,index)"
80 >-</view> 80 >-</view>
81 <text>{{checkedCartLst[index].num}}</text> 81 <text>{{checkedCartLst[index].num}}</text>
82 <view 82 <view
83 class="btn" 83 class="btn"
84 type="default" 84 type="default"
85 @click="counter(true,index)" 85 @click="counter(true,index)"
86 >+</view> 86 >+</view>
87 </view> 87 </view>
88 </view> 88 </view>
89 </view> 89 </view>
90 </view> 90 </view>
91 <view class="infoBottom"> 91 <view class="infoBottom">
92 <view class="norm">规格 <text> 92 <view class="norm">规格 <text>
93 <!-- 长度超出变省略号未做 --> 93 <!-- 长度超出变省略号未做 -->
94 <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block> 94 <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block>
95 </block> 95 </block>
96 </text></view> 96 </text></view>
97 <view class="shippingMethod">使用人 <text> 97 <view class="shippingMethod">使用人 <text>
98 {{item.peopleName}} 98 {{item.peopleName}}
99 </text></view> 99 </text></view>
100 <view class="shippingMethod">配送方式 <text>快递</text></view> 100 <view class="shippingMethod">配送方式 <text>快递</text></view>
101 <view class="message">买家留言 101 <view class="message">买家留言
102 <input 102 <input
103 type="text" 103 type="text"
104 :value="note" 104 :value="note"
105 placeholder="建议提前协商(50字以内)" 105 placeholder="建议提前协商(50字以内)"
106 /> 106 />
107 </view> 107 </view>
108 </view> 108 </view>
109 </view> 109 </view>
110 110
111 <view 111 <view
112 class="infoBox" 112 class="infoBox"
113 v-if="isCart !== 'true'" 113 v-if="isCart !== 'true'"
114 > 114 >
115 <view class="infoTop"> 115 <view class="infoTop">
116 <image 116 <image
117 :src="buyItem.pic" 117 :src="buyItem.pic"
118 mode="aspectFill" 118 mode="aspectFill"
119 ></image> 119 ></image>
120 <view class="infoRight"> 120 <view class="infoRight">
121 <text class="goodName">{{goodInfo.p_name}}</text> 121 <text class="goodName">{{goodInfo.p_name}}</text>
122 <text class="remarks">支持7天无理由退货 顺丰发货</text> 122 <text class="remarks">支持7天无理由退货 顺丰发货</text>
123 <view class="priceBox"> 123 <view class="priceBox">
124 <view class="price">¥{{buyItem.real_price * count}}<text class="originCost"> 124 <view class="price">¥{{buyItem.real_price}}<text class="originCost">
125 ¥{{buyItem.out_price * count}} 125 ¥{{buyItem.out_price}}
126 </text></view> 126 </text></view>
127 <view class="counter"> 127 <view class="counter">
128 <view 128 <view
129 class="btn" 129 class="btn"
130 disabled="this.disabled" 130 disabled="this.disabled"
131 type="default" 131 type="default"
132 @click="counter(false)" 132 @click="counter(false)"
133 >-</view> 133 >-</view>
134 <text>{{count}}</text> 134 <text>{{count}}</text>
135 <view 135 <view
136 class="btn" 136 class="btn"
137 type="default" 137 type="default"
138 @click="counter(true)" 138 @click="counter(true)"
139 >+</view> 139 >+</view>
140 </view> 140 </view>
141 </view> 141 </view>
142 </view> 142 </view>
143 </view> 143 </view>
144 <view class="infoBottom"> 144 <view class="infoBottom">
145 <view class="norm">规格 <text> 145 <view class="norm">规格 <text>
146 <!-- 长度超出变省略号未做 --> 146 <!-- 长度超出变省略号未做 -->
147 <block 147 <block
148 v-for="(item, index) in current" 148 v-for="(item, index) in current"
149 :key="index" 149 :key="index"
150 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block> 150 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
151 </block> 151 </block>
152 </text></view> 152 </text></view>
153 <view class="shippingMethod">使用人 <text> 153 <view class="shippingMethod">使用人 <text>
154 {{name}} 154 {{name}}
155 </text></view> 155 </text></view>
156 <view class="shippingMethod">配送方式 <text>快递</text></view> 156 <view class="shippingMethod">配送方式 <text>快递</text></view>
157 <view class="message">买家留言 157 <view class="message">买家留言
158 <input 158 <input
159 type="text" 159 type="text"
160 :value="note" 160 :value="note"
161 placeholder="建议提前协商(50字以内)" 161 placeholder="建议提前协商(50字以内)"
162 /> 162 />
163 </view> 163 </view>
164 </view> 164 </view>
165 </view> 165 </view>
166 </view> 166 </view>
167 <view class="payWay"> 167 <view class="payWay">
168 <view class="item"> 168 <view class="item">
169 <text>支付方式</text> 169 <text>支付方式</text>
170 <view class="itemRight"> 170 <view class="itemRight">
171 <view class="rightText"> 171 <view class="rightText">
172 <view class="choosePayWay"> 172 <view class="choosePayWay">
173 <image 173 <image
174 src="../../static/chat_logo.png" 174 src="../../static/chat_logo.png"
175 mode="aspectFill" 175 mode="aspectFill"
176 ></image> 176 ></image>
177 <text>微信支付</text> 177 <text>微信支付</text>
178 </view> 178 </view>
179 <!-- <view class="randomSubstraction">最高随机立减¥99</view> --> 179 <!-- <view class="randomSubstraction">最高随机立减¥99</view> -->
180 </view> 180 </view>
181 <!-- <image 181 <!-- <image
182 src="../../static/right.png" 182 src="../../static/right.png"
183 mode="aspectFill" 183 mode="aspectFill"
184 ></image> --> 184 ></image> -->
185 </view> 185 </view>
186 </view> 186 </view>
187 <!-- <view class="item"> 187 <!-- <view class="item">
188 <text>优惠券</text> 188 <text>优惠券</text>
189 <view class="itemRight"> 189 <view class="itemRight">
190 <view class="rightText"> 190 <view class="rightText">
191 <view class="chooseOffers"> 191 <view class="chooseOffers">
192 <text>-¥70.00</text> 192 <text>-¥70.00</text>
193 </view> 193 </view>
194 <view class="preferentialWay">最大优惠</view> 194 <view class="preferentialWay">最大优惠</view>
195 </view> 195 </view>
196 <image 196 <image
197 src="../../static/right.png" 197 src="../../static/right.png"
198 mode="aspectFill" 198 mode="aspectFill"
199 ></image> 199 ></image>
200 </view> 200 </view>
201 </view> --> 201 </view> -->
202 <view class="item"> 202 <view class="item">
203 <text>运费</text> 203 <text>运费</text>
204 <view class="itemRight"> 204 <view class="itemRight">
205 <view class="freight">免运费</view> 205 <view class="freight">免运费</view>
206 </view> 206 </view>
207 </view> 207 </view>
208 <view class="item"> 208 <view class="item">
209 <text>合计</text> 209 <text>合计</text>
210 <view class="itemRight"> 210 <view class="itemRight">
211 <view class="total">¥{{totalPrice}}</view> 211 <view class="total">¥{{totalPrice}}</view>
212 <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> --> 212 <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> -->
213 </view> 213 </view>
214 </view> 214 </view>
215 </view> 215 </view>
216 <!-- 216 <!--
217 <view class="checkBox"> 217 <view class="checkBox">
218 <checkbox-group> 218 <checkbox-group>
219 <label> 219 <label>
220 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 220 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
221 </label> 221 </label>
222 </checkbox-group> 222 </checkbox-group>
223 </view> --> 223 </view> -->
224 </view> 224 </view>
225 <view class="last_zhanwei"></view> 225 <view class="last_zhanwei"></view>
226 <view class="footer"> 226 <view class="footer">
227 <view class="footerLeft">实付金额: 227 <view class="footerLeft">实付金额:
228 <text>¥{{totalPrice}}</text> 228 <text>¥{{totalPrice}}</text>
229 <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> --> 229 <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> -->
230 </view> 230 </view>
231 <view class="footerRight"> 231 <view class="footerRight">
232 <view 232 <view
233 class="paybtn" 233 class="paybtn"
234 @tap="orderBuild" 234 @tap="orderBuild"
235 >立即支付</view> 235 >立即支付</view>
236 </view> 236 </view>
237 </view> 237 </view>
238 </view> 238 </view>
239 </template> 239 </template>
240 240
241 <script> 241 <script>
242 import store from '@/store' 242 import store from '@/store'
243 import MD5Util from '../../utils/md5' 243 import MD5Util from '../../utils/md5'
244 244
245 export default { 245 export default {
246 data() { 246 data() {
247 return { 247 return {
248 name: String, 248 name: String,
249 addAddress: '添加收货地址', 249 addAddress: '添加收货地址',
250 count: 1, 250 count: 1,
251 pid: 0, 251 pid: 0,
252 disabled: false, 252 disabled: false,
253 freight: 0.0, 253 freight: 0.0,
254 showAddress: false, 254 showAddress: false,
255 note: '', 255 note: '',
256 addressInfo: { 256 addressInfo: {
257 address: '', 257 address: '',
258 }, 258 },
259 isCart: Boolean, 259 isCart: Boolean,
260 // isAnonymous: 260 // isAnonymous:
261 checkedCartLst: [], 261 checkedCartLst: [],
262 } 262 }
263 }, 263 },
264 onShow(addressId) { 264 onShow(addressId) {
265 // console.log('+-+-*-*-+-+',addressId) 265 // console.log('+-+-*-*-+-+',addressId)
266 if (addressId) { 266 if (addressId) {
267 store 267 store
268 .dispatch('address/details', { 268 .dispatch('address/details', {
269 add_id: addressId, 269 add_id: addressId,
270 }) 270 })
271 .then(({ code, data }) => { 271 .then(({ code, data }) => {
272 if (code === 1) { 272 if (code === 1) {
273 // console.log('code', code, data) 273 // console.log('code', code, data)
274 this.showAddress = true 274 this.showAddress = true
275 this.addressInfo = data 275 this.addressInfo = data
276 } 276 }
277 }) 277 })
278 } 278 }
279 }, 279 },
280 onLoad({ pid, addressId, isCart, count, name }) { 280 onLoad({ pid, addressId, isCart, count, name }) {
281 if (isCart == 'false') { 281 if (isCart == 'false') {
282 this.pid = pid 282 this.pid = pid
283 // store.dispatch('read/fetch', { 283 // store.dispatch('read/fetch', {
284 // pid, 284 // pid,
285 // }) 285 // })
286 } 286 }
287 this.count = count 287 this.count = count
288 this.name = name 288 this.name = name
289 this.isCart = isCart 289 this.isCart = isCart
290 290
291 console.log('++++++++++++' + pid, addressId, isCart) 291 console.log('++++++++++++' + pid, addressId, isCart)
292 this.checkedCartLst = this.$store.state.cart.checkedCartLst 292 this.checkedCartLst = this.$store.state.cart.checkedCartLst
293 // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst) 293 // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)
294 // 若已经选择地址 294 // 若已经选择地址
295 if (addressId) { 295 if (addressId) {
296 store 296 store
297 .dispatch('address/details', { 297 .dispatch('address/details', {
298 add_id: addressId, 298 add_id: addressId,
299 }) 299 })
300 .then(({ code, data }) => { 300 .then(({ code, data }) => {
301 if (code === 1) { 301 if (code === 1) {
302 // console.log('code', code, data) 302 // console.log('code', code, data)
303 this.showAddress = true 303 this.showAddress = true
304 this.addressInfo = data 304 this.addressInfo = data
305 } 305 }
306 }) 306 })
307 } else { 307 } else {
308 store.dispatch('address/default').then(({ code, data }) => { 308 store.dispatch('address/default').then(({ code, data }) => {
309 if (code === 1) { 309 if (code === 1) {
310 // console.log('code', code, data) 310 // console.log('code', code, data)
311 this.showAddress = true 311 this.showAddress = true
312 this.addressInfo = data 312 this.addressInfo = data
313 } 313 }
314 }) 314 })
315 } 315 }
316 }, 316 },
317 computed: { 317 computed: {
318 totalPrice() { 318 totalPrice() {
319 if (this.isCart == 'true') { 319 if (this.isCart == 'true') {
320 let total = 0 320 let total = 0
321 this.$store.state.cart.checkedCartLst.map(item => { 321 this.$store.state.cart.checkedCartLst.map(item => {
322 total += item.nowPrice * item.num 322 total += item.nowPrice * item.num
323 }) 323 })
324 return total 324 return total
325 } else { 325 } else {
326 return this.buyItem.real_price * this.count 326 return this.buyItem.real_price * this.count
327 } 327 }
328 }, 328 },
329 buyItem() { 329 buyItem() {
330 return this.$store.state.cart.buyItem 330 return this.$store.state.cart.buyItem
331 }, 331 },
332 // checkedCartLst(){ 332 // checkedCartLst(){
333 // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst) 333 // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst)
334 // return this.$store.state.cart.checkedCartLst 334 // return this.$store.state.cart.checkedCartLst
335 // }, 335 // },
336 goodInfo() { 336 goodInfo() {
337 // console.log('state', this.$store.state.read.goodInfo) 337 // console.log('state', this.$store.state.read.goodInfo)
338 return this.$store.state.read.goodInfo 338 return this.$store.state.read.goodInfo
339 }, 339 },
340 skuInfo() { 340 skuInfo() {
341 return this.$store.state.order.param.sk_id_arr 341 return this.$store.state.order.param.sk_id_arr
342 }, 342 },
343 attrList() { 343 attrList() {
344 return this.$store.state.order.param.attrList 344 return this.$store.state.order.param.attrList
345 }, 345 },
346 current() { 346 current() {
347 return this.$store.state.order.param.current 347 return this.$store.state.order.param.current
348 }, 348 },
349 }, 349 },
350 methods: { 350 methods: {
351 counter(isadd, index) { 351 counter(isadd, index) {
352 if (isadd) { 352 if (isadd) {
353 if (this.isCart == 'true') { 353 if (this.isCart == 'true') {
354 this.checkedCartLst[index].num++ 354 this.checkedCartLst[index].num++
355 } else { 355 } else {
356 this.count++ 356 this.count++
357 } 357 }
358 } else { 358 } else {
359 if (this.isCart == 'true') { 359 if (this.isCart == 'true') {
360 this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num-- 360 this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num--
361 } else { 361 } else {
362 this.count <= 1 ? (this.disabled = true) : this.count-- 362 this.count <= 1 ? (this.disabled = true) : this.count--
363 } 363 }
364 } 364 }
365 }, 365 },
366 // 跳转添加地址页面 366 // 跳转添加地址页面
367 toaddAddress() { 367 toaddAddress() {
368 uni.navigateTo({ 368 uni.navigateTo({
369 url: `../address/addressList?edit=${1}`, 369 url: `../address/addressList?edit=${1}`,
370 success: res => {}, 370 success: res => {},
371 fail: error => { 371 fail: error => {
372 console.log('跳转到地址列表页面失败====>', error) 372 console.log('跳转到地址列表页面失败====>', error)
373 }, 373 },
374 complete: () => {}, 374 complete: () => {},
375 }) 375 })
376 }, 376 },
377 // 下单 377 // 下单
378 orderBuild() { 378 orderBuild() {
379 uni.showLoading({ 379 uni.showLoading({
380 title: '支付中', 380 title: '支付中',
381 }) 381 })
382 if (this.isCart === 'true') { 382 if (this.isCart === 'true') {
383 const checkedGoods = [] 383 const checkedGoods = []
384 const sk_id_arr = [] 384 const sk_id_arr = []
385 this.checkedCartLst.map(item => { 385 this.checkedCartLst.map(item => {
386 checkedGoods.push(item.cart_id) 386 checkedGoods.push(item.cart_id)
387 sk_id_arr.push(item.sk_id) 387 sk_id_arr.push(item.sk_id)
388 }) 388 })
389 store.dispatch('order/build', { 389 store.dispatch('order/build', {
390 uid: this.$store.state.user.userInfo.uid, 390 uid: this.$store.state.user.userInfo.uid,
391 address: JSON.stringify(this.addressInfo), 391 address: JSON.stringify(this.addressInfo),
392 checkedGoods: checkedGoods, 392 checkedGoods: checkedGoods,
393 sk_id_arr: sk_id_arr, 393 sk_id_arr: sk_id_arr,
394 totalPrice: this.totalPrice, 394 totalPrice: this.totalPrice,
395 }).then((res) => { 395 }).then((res) => {
396 this.pay(res) 396 this.pay(res)
397 }) 397 })
398 } 398 }
399 if (this.isCart === 'false') { 399 if (this.isCart === 'false') {
400 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param 400 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
401 store.dispatch('order/buyNow', { 401 store.dispatch('order/buyNow', {
402 pid: skId.pid, 402 pid: skId.pid,
403 sk_id: skId.sk_id, 403 sk_id: skId.sk_id,
404 number: this.count, 404 number: this.count,
405 mp_id: mpId, 405 mp_id: mpId,
406 address: JSON.stringify(this.addressInfo), 406 address: JSON.stringify(this.addressInfo),
407 totalPrice: this.totalPrice, 407 totalPrice: this.totalPrice,
408 liuyan: this.note, 408 liuyan: this.note,
409 dir: 1, 409 dir: 1,
410 }).then((res) => { 410 }).then((res) => {
411 this.pay(res) 411 this.pay(res)
412 }) 412 })
413 } 413 }
414 }, 414 },
415 // 支付 415 // 支付
416 pay(res) { 416 pay(res) {
417 console.log('pay', res) 417 console.log('pay', res)
418 const { data, exKeyName: keyName } = res 418 const { data, exKeyName: keyName } = res
419 const uid = uni.getStorageSync('uid') 419 const uid = uni.getStorageSync('uid')
420 const timeStamp = new Date().getTime().toString() 420 const timeStamp = new Date().getTime().toString()
421 const nonceStr = 'asfafasfasfasfasf' 421 const nonceStr = 'asfafasfasfasfasf'
422 // 支付参数 422 // 支付参数
423 const fieldSet = { 423 const fieldSet = {
424 openid: this.$store.state.user.userInfo.openid, 424 openid: this.$store.state.user.userInfo.openid,
425 uid: this.$store.state.user.userInfo.uid, 425 uid: this.$store.state.user.userInfo.uid,
426 shopid: 0, 426 shopid: 0,
427 payCate: 2020, 427 payCate: 2020,
428 payMoney: this.totalPrice, 428 payMoney: this.totalPrice,
429 payWoodId: `fcdj-${uid}-${keyName}`, 429 payWoodId: `fcdj-${uid}-${keyName}`,
430 payWoodDesc: '在【非常戴镜】的微信付款凭证', 430 payWoodDesc: '在【非常戴镜】的微信付款凭证',
431 nonceStr, 431 nonceStr,
432 signType: 'MD5', 432 signType: 'MD5',
433 app_uid: 2020, 433 app_uid: 2020,
434 timeStamp, 434 timeStamp,
435 keyname: keyName, 435 keyname: keyName,
436 billInfo: JSON.stringify(data), 436 billInfo: JSON.stringify(data),
437 } 437 }
438 // 请求后台支付接口 438 // 请求后台支付接口
439 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { 439 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
440 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { 440 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
441 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` 441 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
442 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' 442 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
443 443
444 // 微信支付接口 444 // 微信支付接口
445 uni.requestPayment({ 445 uni.requestPayment({
446 appId: data.appid, 446 appId: data.appid,
447 timeStamp, 447 timeStamp,
448 nonceStr, 448 nonceStr,
449 total_fee: this.totalPrice, 449 total_fee: this.totalPrice,
450 package: `prepay_id=${data.prepay_id}`, 450 package: `prepay_id=${data.prepay_id}`,
451 signType: 'MD5', 451 signType: 'MD5',
452 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), 452 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
453 success: (res) => { 453 success: (res) => {
454 // 支付成功 454 // 支付成功
455 uni.showModal({ 455 uni.showModal({
456 content: '支付成功', 456 content: '支付成功',
457 showCancel: false, 457 showCancel: false,
458 }) 458 })
459 // 跳转订单详情页->状态 待收货 459 // 跳转订单详情页->状态 待收货
460 uni.reLaunch({ 460 uni.reLaunch({
461 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, 461 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
462 }) 462 })
463 }, 463 },
464 fail: (res) => { 464 fail: (res) => {
465 // 支付失败 465 // 支付失败
466 uni.showModal({ 466 uni.showModal({
467 content: '支付失败', 467 content: '支付失败',
468 showCancel: false, 468 showCancel: false,
469 }) 469 })
470 // 跳转订单详情页->状态 待付款 470 // 跳转订单详情页->状态 待付款
471 uni.reLaunch({ 471 uni.reLaunch({
472 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, 472 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
473 }) 473 })
474 }, 474 },
475 complete: () => { 475 complete: () => {
476 uni.hideLoading() 476 uni.hideLoading()
477 }, 477 },
478 }) 478 })
479 } else { 479 } else {
480 uni.showModal({ 480 uni.showModal({
481 content: '支付失败', 481 content: '支付失败',
482 showCancel: false, 482 showCancel: false,
483 }) 483 })
484 console.log('支付失败') 484 console.log('支付失败')
485 uni.hideLoading() 485 uni.hideLoading()
486 } 486 }
487 }) 487 })
488 }, 488 },
489 }, 489 },
490 } 490 }
491 </script> 491 </script>
492 492
493 <style lang="scss"> 493 <style lang="scss">
494 .wrap { 494 .wrap {
495 height: 100vh; 495 height: 100vh;
496 background-color: #f2f2f2; 496 background-color: #f2f2f2;
497 font-family: PingFangSC-Regular; 497 font-family: PingFangSC-Regular;
498 letter-spacing: -0.23px; 498 letter-spacing: -0.23px;
499 position: absolute; 499 position: absolute;
500 } 500 }
501 .addAddress { 501 .addAddress {
502 background-color: #ffffff; 502 background-color: #ffffff;
503 box-sizing: border-box; 503 box-sizing: border-box;
504 height: 124rpx; 504 height: 124rpx;
505 width: 100%; 505 width: 100%;
506 display: flex; 506 display: flex;
507 align-items: center; 507 align-items: center;
508 padding: 0 40rpx; 508 padding: 0 40rpx;
509 .addIcon { 509 .addIcon {
510 background-color: #f2f2f2; 510 background-color: #f2f2f2;
511 height: 56rpx; 511 height: 56rpx;
512 width: 60rpx; 512 width: 60rpx;
513 border-radius: 4rpx; 513 border-radius: 4rpx;
514 display: flex; 514 display: flex;
515 justify-content: center; 515 justify-content: center;
516 align-items: center; 516 align-items: center;
517 margin-right: 40rpx; 517 margin-right: 40rpx;
518 } 518 }
519 image { 519 image {
520 height: 28rpx; 520 height: 28rpx;
521 width: 30rpx; 521 width: 30rpx;
522 } 522 }
523 .addressText { 523 .addressText {
524 font-size: 28rpx; 524 font-size: 28rpx;
525 color: #333333; 525 color: #333333;
526 margin-right: 364rpx; 526 margin-right: 364rpx;
527 } 527 }
528 } 528 }
529 .content { 529 .content {
530 background-color: #f2f2f2; 530 background-color: #f2f2f2;
531 width: 100%; 531 width: 100%;
532 display: flex; 532 display: flex;
533 flex-direction: column; 533 flex-direction: column;
534 justify-content: center; 534 justify-content: center;
535 align-items: center; 535 align-items: center;
536 padding: 40rpx; 536 padding: 40rpx;
537 box-sizing: border-box; 537 box-sizing: border-box;
538 .orderInfo { 538 .orderInfo {
539 width: 670rpx; 539 width: 670rpx;
540 min-height: 488rpx; 540 min-height: 488rpx;
541 background-color: #ffffff; 541 background-color: #ffffff;
542 border-radius: 20rpx; 542 border-radius: 20rpx;
543 box-sizing: border-box; 543 box-sizing: border-box;
544 padding: 0 40rpx 40rpx 40rpx; 544 padding: 0 40rpx 40rpx 40rpx;
545 .title { 545 .title {
546 display: flex; 546 display: flex;
547 align-items: center; 547 align-items: center;
548 font-size: 28rpx; 548 font-size: 28rpx;
549 color: #333333; 549 color: #333333;
550 height: 60rpx; 550 height: 60rpx;
551 line-height: 40rpx; 551 line-height: 40rpx;
552 padding: 10rpx 10rpx 10rpx 0rpx; 552 padding: 10rpx 10rpx 10rpx 0rpx;
553 image { 553 image {
554 margin-right: 20rpx; 554 margin-right: 20rpx;
555 } 555 }
556 } 556 }
557 .infoBox { 557 .infoBox {
558 margin-top: 42rpx; 558 margin-top: 42rpx;
559 .infoTop { 559 .infoTop {
560 display: flex; 560 display: flex;
561 flex-direction: row; 561 flex-direction: row;
562 image { 562 image {
563 height: 188rpx; 563 height: 188rpx;
564 width: 188rpx; 564 width: 188rpx;
565 margin-right: 24rpx; 565 margin-right: 24rpx;
566 } 566 }
567 .infoRight { 567 .infoRight {
568 width: 374rpx; 568 width: 374rpx;
569 display: flex; 569 display: flex;
570 flex-direction: column; 570 flex-direction: column;
571 align-items: flex-start; 571 align-items: flex-start;
572 justify-content: space-between; 572 justify-content: space-between;
573 .goodName { 573 .goodName {
574 font-size: 28rpx; 574 font-size: 28rpx;
575 color: #333333; 575 color: #333333;
576 } 576 }
577 .remarks { 577 .remarks {
578 font-size: 20rpx; 578 font-size: 20rpx;
579 color: #999999; 579 color: #999999;
580 } 580 }
581 .priceBox { 581 .priceBox {
582 display: flex; 582 display: flex;
583 justify-content: space-between; 583 justify-content: space-between;
584 align-items: center; 584 align-items: center;
585 width: 100%; 585 width: 100%;
586 .price { 586 .price {
587 color: #ff6b4a; 587 color: #ff6b4a;
588 font-size: 28rpx; 588 font-size: 28rpx;
589 text{ 589 text{
590 margin-left: 10rpx; 590 margin-left: 10rpx;
591 } 591 }
592 } 592 }
593 .originCost { 593 .originCost {
594 text-decoration: line-through; 594 text-decoration: line-through;
595 color: #999999; 595 color: #999999;
596 font-size: 20rpx; 596 font-size: 20rpx;
597 } 597 }
598 .counter { 598 .counter {
599 display: flex; 599 display: flex;
600 flex-direction: row; 600 flex-direction: row;
601 justify-content: space-between; 601 justify-content: space-between;
602 font-size: 28rpx; 602 font-size: 28rpx;
603 color: #333333; 603 color: #333333;
604 width: 122rpx; 604 width: 122rpx;
605 .btn { 605 .btn {
606 display: flex; 606 display: flex;
607 justify-content: center; 607 justify-content: center;
608 line-height: 32rpx; 608 line-height: 32rpx;
609 height: 32rpx; 609 height: 32rpx;
610 width: 32rpx; 610 width: 32rpx;
611 background-color: #f2f2f2; 611 background-color: #f2f2f2;
612 color: #cfcfcf; 612 color: #cfcfcf;
613 } 613 }
614 } 614 }
615 } 615 }
616 } 616 }
617 } 617 }
618 .infoBottom { 618 .infoBottom {
619 display: flex; 619 display: flex;
620 flex-direction: column; 620 flex-direction: column;
621 justify-content: flex-start; 621 justify-content: flex-start;
622 font-size: 24rpx; 622 font-size: 24rpx;
623 color: #333333; 623 color: #333333;
624 text { 624 text {
625 color: #999999; 625 color: #999999;
626 margin-left: 20rpx; 626 margin-left: 20rpx;
627 } 627 }
628 628
629 .norm { 629 .norm {
630 margin-top: 28rpx; 630 margin-top: 28rpx;
631 } 631 }
632 .shippingMethod { 632 .shippingMethod {
633 margin-top: 12rpx; 633 margin-top: 12rpx;
634 } 634 }
635 .message { 635 .message {
636 display: flex; 636 display: flex;
637 flex-direction: row; 637 flex-direction: row;
638 align-items: center; 638 align-items: center;
639 margin-top: 18rpx; 639 margin-top: 18rpx;
640 input { 640 input {
641 margin-left: 20rpx; 641 margin-left: 20rpx;
642 width: 75%; 642 width: 75%;
643 } 643 }
644 } 644 }
645 } 645 }
646 } 646 }
647 } 647 }
648 .payWay { 648 .payWay {
649 height: 464rpx; 649 height: 464rpx;
650 width: 670rpx; 650 width: 670rpx;
651 background-color: #ffffff; 651 background-color: #ffffff;
652 color: #333333; 652 color: #333333;
653 font-size: 24rpx; 653 font-size: 24rpx;
654 border-radius: 20rpx; 654 border-radius: 20rpx;
655 box-sizing: border-box; 655 box-sizing: border-box;
656 padding: 0 52rpx 0rpx 40rpx; 656 padding: 0 52rpx 0rpx 40rpx;
657 margin-top: 20rpx; 657 margin-top: 20rpx;
658 display: flex; 658 display: flex;
659 flex-direction: column; 659 flex-direction: column;
660 justify-content: center; 660 justify-content: center;
661 align-items: flex-start; 661 align-items: flex-start;
662 .item { 662 .item {
663 display: flex; 663 display: flex;
664 flex-direction: row; 664 flex-direction: row;
665 justify-content: space-between; 665 justify-content: space-between;
666 align-items: center; 666 align-items: center;
667 width: 100%; 667 width: 100%;
668 height: 115rpx; 668 height: 115rpx;
669 .itemRight { 669 .itemRight {
670 display: flex; 670 display: flex;
671 flex-direction: row; 671 flex-direction: row;
672 justify-content: space-between; 672 justify-content: space-between;
673 align-items: center; 673 align-items: center;
674 image { 674 image {
675 height: 24rpx; 675 height: 24rpx;
676 width: 12rpx; 676 width: 12rpx;
677 } 677 }
678 .rightText { 678 .rightText {
679 margin-right: 20rpx; 679 margin-right: 20rpx;
680 text-align: right; 680 text-align: right;
681 .choosePayWay { 681 .choosePayWay {
682 display: flex; 682 display: flex;
683 align-items: center; 683 align-items: center;
684 text { 684 text {
685 color: #333333; 685 color: #333333;
686 } 686 }
687 image { 687 image {
688 height: 36rpx; 688 height: 36rpx;
689 width: 40rpx; 689 width: 40rpx;
690 margin-right: 8px; 690 margin-right: 8px;
691 } 691 }
692 } 692 }
693 .randomSubstraction { 693 .randomSubstraction {
694 color: #ff6b4a; 694 color: #ff6b4a;
695 } 695 }
696 .preferentialWay { 696 .preferentialWay {
697 color: #999999; 697 color: #999999;
698 } 698 }
699 } 699 }
700 .freight, 700 .freight,
701 .total { 701 .total {
702 margin-right: 32rpx; 702 margin-right: 32rpx;
703 } 703 }
704 text { 704 text {
705 color: #ff6b4a; 705 color: #ff6b4a;
706 } 706 }
707 } 707 }
708 } 708 }
709 } 709 }
710 // .checkBox { 710 // .checkBox {
711 // height: 58rpx; 711 // height: 58rpx;
712 // line-height: 58rpx; 712 // line-height: 58rpx;
713 // width: 100%; 713 // width: 100%;
714 // margin-top: 36rpx; 714 // margin-top: 36rpx;
715 // margin-left: 40rpx; 715 // margin-left: 40rpx;
716 // font-size: 12px; 716 // font-size: 12px;
717 // color: #999999; 717 // color: #999999;
718 // } 718 // }
719 } 719 }
720 .footer { 720 .footer {
721 height: 112rpx; 721 height: 112rpx;
722 width: 100%; 722 width: 100%;
723 background-color: #fff; 723 background-color: #fff;
724 font-size: 16px; 724 font-size: 16px;
725 display: flex; 725 display: flex;
726 justify-content: space-between; 726 justify-content: space-between;
727 align-items: center; 727 align-items: center;
728 position: fixed; 728 position: fixed;
729 bottom: 0; 729 bottom: 0;
730 z-index: 9999; 730 z-index: 9999;
731 .footerLeft { 731 .footerLeft {
732 display: flex; 732 display: flex;
733 justify-content: center; 733 justify-content: center;
734 align-items: center; 734 align-items: center;
735 width: 50%; 735 width: 50%;
736 color: #333333; 736 color: #333333;
737 text { 737 text {
738 color: #ff6b4a; 738 color: #ff6b4a;
739 } 739 }
740 } 740 }
741 .footerRight { 741 .footerRight {
742 display: flex; 742 display: flex;
743 justify-content: flex-end; 743 justify-content: flex-end;
744 align-items: center; 744 align-items: center;
745 width: 50%; 745 width: 50%;
746 margin-right: 26rpx; 746 margin-right: 26rpx;
747 .paybtn { 747 .paybtn {
748 display: flex; 748 display: flex;
749 justify-content: center; 749 justify-content: center;
750 align-items: center; 750 align-items: center;
751 background: #ff6b4a; 751 background: #ff6b4a;
752 border-radius: 20px; 752 border-radius: 20px;
753 border-radius: 20px; 753 border-radius: 20px;
754 color: #ffffff; 754 color: #ffffff;
755 width: 204rpx; 755 width: 204rpx;
756 height: 80rpx; 756 height: 80rpx;
757 } 757 }
758 } 758 }
759 } 759 }
760 // 地址信息样式 760 // 地址信息样式
761 .order-user { 761 .order-user {
762 width: 670rpx; 762 width: 670rpx;
763 height: 228rpx; 763 height: 228rpx;
764 background: #ffffff; 764 background: #ffffff;
765 border-radius: 14rpx; 765 border-radius: 14rpx;
766 margin: 0 auto; 766 margin: 0 auto;
767 margin-top: 20rpx; 767 margin-top: 20rpx;
768 position: relative; 768 position: relative;
769 .order-user-head { 769 .order-user-head {
770 display: flex; 770 display: flex;
771 height: 108rpx; 771 height: 108rpx;
772 width: 100%; 772 width: 100%;
773 align-items: center; 773 align-items: center;
774 padding-left: 126rpx; 774 padding-left: 126rpx;
775 box-sizing: border-box; 775 box-sizing: border-box;
776 .name { 776 .name {
777 display: flex; 777 display: flex;
778 justify-content: space-between; 778 justify-content: space-between;
779 font-size: 14px; 779 font-size: 14px;
780 color: #333333; 780 color: #333333;
781 letter-spacing: -0.26px; 781 letter-spacing: -0.26px;
782 margin-right: 20rpx; 782 margin-right: 20rpx;
783 .default { 783 .default {
784 height: 40rpx; 784 height: 40rpx;
785 width: 80rpx; 785 width: 80rpx;
786 background-color: #4a90e2; 786 background-color: #4a90e2;
787 border-radius: 13px; 787 border-radius: 13px;
788 border-radius: 13px; 788 border-radius: 13px;
789 text-align: center; 789 text-align: center;
790 margin-right: 20rpx; 790 margin-right: 20rpx;
791 text { 791 text {
792 display: flex; 792 display: flex;
793 justify-content: center; 793 justify-content: center;
794 align-items: center; 794 align-items: center;
795 font-size: 12px; 795 font-size: 12px;
796 color: #ffffff; 796 color: #ffffff;
797 letter-spacing: -0.23px; 797 letter-spacing: -0.23px;
798 } 798 }
799 } 799 }
800 } 800 }
801 .mobile { 801 .mobile {
802 font-size: 14px; 802 font-size: 14px;
803 color: #999999; 803 color: #999999;
804 letter-spacing: -0.26px; 804 letter-spacing: -0.26px;
805 } 805 }
806 } 806 }
807 .order-user-body { 807 .order-user-body {
808 display: flex; 808 display: flex;
809 width: 100%; 809 width: 100%;
810 image { 810 image {
811 width: 24px; 811 width: 24px;
812 height: 28px; 812 height: 28px;
813 margin: 12rpx 32rpx 0 40rpx; 813 margin: 12rpx 32rpx 0 40rpx;
814 } 814 }
815 .address { 815 .address {
816 font-weight: bold; 816 font-weight: bold;
817 font-size: 14px; 817 font-size: 14px;
818 color: #333333; 818 color: #333333;
819 letter-spacing: -0.26px; 819 letter-spacing: -0.26px;
820 } 820 }
821 } 821 }
822 .arrow { 822 .arrow {
823 width: 12px; 823 width: 12px;
824 height: 12px; 824 height: 12px;
825 position: absolute; 825 position: absolute;
826 right: 40rpx; 826 right: 40rpx;
827 bottom: 104rpx; 827 bottom: 104rpx;
828 } 828 }
829 } 829 }
830 .last_zhanwei { 830 .last_zhanwei {
831 background: #f2f2f2; 831 background: #f2f2f2;
832 height: 60px; 832 height: 60px;
833 } 833 }
834 </style> 834 </style>
835 835
src/static/nocart.png

19 KB