Bläddra i källkod

待付款列表页面功能开发

liyuan 1 månad sedan
förälder
incheckning
a2f2800e50
3 ändrade filer med 265 tillägg och 502 borttagningar
  1. 2 1
      .gitignore
  2. 18 1
      api/tabBar/shoppingCart.js
  3. 245 500
      pages/views/salesSlip/obligation.vue

+ 2 - 1
.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .DS_Store
 dist/
 dist/
 unpackage/
 unpackage/
+node_modules/
 .hbuilderx/
 .hbuilderx/
 
 
 npm-debug.log*
 npm-debug.log*
@@ -22,4 +23,4 @@ selenium-debug.log
 *.local
 *.local
 .env.development
 .env.development
 
 
-yarn.lock
+yarn.lock

+ 18 - 1
api/tabBar/shoppingCart.js

@@ -56,6 +56,7 @@ export function obligationList(data) {
 		data
 		data
 	})
 	})
 }
 }
+
 export function payPrepay(params) {
 export function payPrepay(params) {
 	return http.request({
 	return http.request({
 		url: '/blade-sales-part/order/payPrepay',
 		url: '/blade-sales-part/order/payPrepay',
@@ -117,4 +118,20 @@ export function getPaymentType(data) {
 		method: 'POST',
 		method: 'POST',
 		data
 		data
 	})
 	})
-}
+}
+
+export function getPaymentByOrder(data) {
+	return http.request({
+		url: '/blade-sales-part/shoppingCart/getPaymentByOrder',
+		method: 'POST',
+		data
+	})
+}
+
+export function closeOrder(data) {
+	return http.request({
+		url: '/blade-sales-part/order/closeOrder',
+		method: 'POST',
+		data
+	})
+}

+ 245 - 500
pages/views/salesSlip/obligation.vue

@@ -1,517 +1,262 @@
 <template>
 <template>
-	<view>
-		<view class="card" v-for="(item,index) in dataList" :key="index">
-			<view v-for="(ite,ind) in item.list" :key="ind">
-				<view style="font-size: 26rpx;color: #717171;margin-bottom: 28rpx;">
-					{{item.name}}
-				</view>
-				<view>
-					<view style="display: flex;" v-for="(li,inde) in ite.orderItemsList" :key="inde">
-						<view style="display: flex;width: 100%;align-items: center;margin-bottom: 20rpx;">
-							<image :src="li.url"
-								style="width:120rpx;height: 120rpx;border-radius: 10rpx;border: 2rpx solid #EEEEEE;margin-right: 27rpx;"
-								mode="scaleToFill">
-							</image>
-							<view style="width:477rpx;">
-								<view
-									style="display: flex;justify-content: space-between;align-items: center;font-size: 26rpx;color: #4E4E4E;font-weight: 500;">
-									<u--text color="#4E4E4E" size="26rpx" :lines="1" :text="li.goodsName"></u--text>
-									<view>
-										¥{{li.price}}
-									</view>
-								</view>
-								<view style="display: flex;justify-content:flex-end;margin-top: 20rpx;">
-									<view style="font-size: 26rpx;color: #4D4D4D;">
-										x{{li.goodsNum}}
-									</view>
-								</view>
-							</view>
-						</view>
+  <view>
+    <view class="card" v-for="(item,index) in dataList" :key="index">
+      <view style="font-size: 26rpx;color: #717171;margin-bottom: 28rpx;">
+        {{ item.name }}
+      </view>
+      <view>
+        <view style="display: flex;" v-for="(li,inde) in item.data.orderItemsList" :key="inde">
+          <view style="display: flex;width: 100%;align-items: center;margin-bottom: 20rpx;">
+            <image :src="li.url"
+                   style="width:120rpx;height: 120rpx;border-radius: 10rpx;border: 2rpx solid #EEEEEE;margin-right: 27rpx;"
+                   mode="scaleToFill">
+            </image>
+            <view style="width:477rpx;">
+              <view
+                  style="display: flex;justify-content: space-between;align-items: center;font-size: 26rpx;color: #4E4E4E;font-weight: 500;">
+                <u--text color="#4E4E4E" size="26rpx" :lines="1" :text="li.goodsName"></u--text>
+                <view>
+                  ¥{{ li.price }}
+                </view>
+              </view>
+              <view style="display: flex;justify-content:flex-end;margin-top: 20rpx;">
+                <view style="font-size: 26rpx;color: #4D4D4D;">
+                  x{{ li.goodsNum }}
+                </view>
+              </view>
+            </view>
+          </view>
 
 
-					</view>
+        </view>
 
 
-				</view>
-				<view style="display: flex;justify-content: flex-end;">
-					<view style="width: 136rpx;margin-right: 17rpx;">
-						<u-button type="primary" text="取消订单" color="#E75F37" shape='circle' plain
-							@click="deleteGoods(ite.id)"></u-button>
-					</view>
-					<view style="width: 136rpx;">
-						<u-button type="primary" text="去支付" color="#E75F37" shape='circle'
-							@click="paySubmit(item,index,ind)"></u-button>
-					</view>
-				</view>
-				<view style="width: 623rpx;height: 2rpx;background: #F1F1F1;margin: 48rpx 0 40rpx 0;">
-				</view>
-				<view style="font-size: 26rpx;color: #717171;">
-					<view style="margin-bottom: 20rx;">
-						订单编号:<text style="color: #C4C4C4;">{{ite.ordNo}}</text>
-					</view>
-					<view style="margin-bottom: 20rx;">
-						支付方式:<text
-							style="color: #C4C4C4;">{{ite.payType && ite.payType.indexOf('01') != -1?'扫码支付':'微信支付'}}</text>
-					</view>
-					<view>
-						下单时间:<text style="color: #C4C4C4;">{{ite.createTime}}</text>
-					</view>
-				</view>
-			</view>
+        <view style="display: flex;justify-content: flex-end;">
+          <view style="width: 136rpx;margin-right: 17rpx;">
+            <u-button type="primary" text="取消订单" color="#E75F37" shape='circle' plain
+                      @click="deleteGoods(item.data.id)"></u-button>
+          </view>
+          <view style="width: 136rpx;">
+            <u-button type="primary" text="去支付" color="#E75F37" shape='circle'
+                      @click="paySubmit(item.data,index,ind)"></u-button>
+          </view>
+        </view>
+        <view style="width: 623rpx;height: 2rpx;background: #F1F1F1;margin: 48rpx 0 40rpx 0;">
+        </view>
+        <view style="font-size: 26rpx;color: #717171;">
+          <view style="margin-bottom: 20rx;">
+            订单编号:
+            <text style="color: #C4C4C4;">{{ item.data.ordNo }}</text>
+          </view>
+          <view style="margin-bottom: 20rx;">
+            支付方式:
+            <text style="color: #C4C4C4;">
+              {{ item.data.receivableType ? item.data.receivableType : '' }}
+            </text>
+          </view>
+          <view>
+            下单时间:
+            <text style="color: #C4C4C4;">{{ item.data.createTime }}</text>
+          </view>
+        </view>
+      </view>
 
 
-		</view>
-		<u-empty style="position: absolute;top: 45%;left: 50%;transform:translate(-50%,-50%)"
-			v-if="dataList.length == 0 && !isLoading" mode="car" text="待付款为空"
-			icon="http://cdn.uviewui.com/uview/empty/car.png" />
-
-		<u-popup :show="qrcodeshow" mode="center" :closeable="true" @close="qrcodeclose">
-			<view style="padding: 20rpx;">
-				<view style="font-size: 26rpx;">截屏二维码支付</view>
-				<view>
-					<uqrcode ref="uqrcode" canvas-id="qrcode" size="600" sizeUnit="rpx" :value="qrcodeurl"
-						:options="{ margin: 5 }"></uqrcode>
-					<!-- options 配置项 https://uqrcode.cn/doc/document/native.html#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95  -->
-				</view>
-
-				<view>
-					<!-- {{qrcodeData.contacts}} -->
-					<view style="font-size: 34rpx;font-weight: 500;">{{qrcodeData.salesCompanyName}}</view>
-					<view style="color: #9a9a9a;font-size: 26rpx;">
-						<text>金额:</text>
-						<text style="color: #E75F37;font-size: 30rpx;">¥{{qrcodeData.salesAmount}}</text>
-					</view>
-					<view style="color: #9a9a9a;font-size: 26rpx;">二维码有效期: {{qrcodeData.businesDate}}</view>
-				</view>
-			</view>
-		</u-popup>
-
-	</view>
+    </view>
+    <u-empty style="position: absolute;top: 45%;left: 50%;transform:translate(-50%,-50%)"
+             v-if="dataList.length == 0 && !isLoading" mode="car" text="待付款为空"
+             icon="http://cdn.uviewui.com/uview/empty/car.png"/>
+  </view>
 </template>
 </template>
 <script>
 <script>
-	import {
-		obligationList,
-		generateOrder,
-		payPrepay,
-		shoppingCartUpdate,
-		getCorpsAddr,
-		update,
-		paramserviceDetail,
-		isProcurement,
-		getPaymentType
-	} from '@/api/tabBar/shoppingCart.js'
-	import {
-		registerRuntimeCompiler
-	} from "vue"
-	import {
-		logo
-	} from '../../../common/setting'
-	import {
-		appDetail
-	} from '@/api/views/salesSlip/index.js'
-	import {
-		dateFormat
-	} from '@/common/dateFormat.js'
-	export default {
-		data() {
-			return {
-				qrcodeshow: false, // 二维码弹窗
-				qrcodeData: [], // 二维码数据
-				qrcodeurl: '', // 二维码参数
-
-				editDel: false,
-				radiovalue: [],
-				companyValue: [],
-				dataList: [],
-				companyValueLength: 0,
-				selectedProduct: [],
-				totalPrice: 0.00,
-				totalFreight: 0.00,
-				addres: {},
-				isLoading: true,
-				payType:null
-			}
-		},
-		watch: {
-			companyValue() {
-
-				if (this.companyValue.length != 0 || this.companyValueLength != 0) {
-					if (this.companyValue.length == this.companyValueLength) {
-						this.radiovalue = ["全选"]
-					} else {
-						this.radiovalue = []
-					}
-				}
-				// if (this.companyValue.length > 0) {
-				// 	console.log(21321324);
-
-				// 	// if (this.companyValue.length == this.companyValueLength) {
-				// 	// 	this.radiovalue = ["全选"]
-				// 	// } else {
-				// 	// 	this.radiovalue = []
-				// 	// }
-				// }
-				// this.statistics()
-			}
-		},
-		onLoad() {
-			console.log(Date.parse('2023-11-22 00:00:00') + 60 * 60 * 1000);
-			console.log(dateFormat(new Date(Date.parse('2023-11-22 00:00:00') + 60 * 60 * 1000)), 155);
-		},
-		onShow() {
-			this.editDel = false
-			this.companyValue = []
-			getPaymentType().then(res => {
-				console.log(res.data,111);
-				this.payType=res.data
-			})
-			this.isLoading = true
-			uni.showLoading({
-				title: '加载中',
-				mask: true
-			});
-			obligationList().then(res => {
-				console.log(res);
-				this.dataList = res.data
-				this.companyValueLength = this.dataList.length
-				this.isLoading = false // 添加这一行
-				uni.hideLoading();
-			}).catch(err => {
-				uni.hideLoading();
-			})
-			getCorpsAddr().then(res => {
-				this.addres = res.data
-			})
-		},
-		methods: {
-			// 弹窗关闭
-			qrcodeclose() {
-				this.qrcodeshow = false
-			},
-
-			deleteGoods(val) {
-				console.log(val);
-
-				uni.showLoading({
-					title: '加载中',
-					mask: true
-				});
-				update(val).then(res => {
-					uni.showToast({
-						title: "删除成功",
-						icon: 'none'
-					});
-					uni.showLoading({
-						title: '加载中',
-						mask: true
-					});
-					this.editDel = false
-					this.companyValue = []
-					obligationList().then(res => {
-						this.dataList = res.data
-						this.companyValueLength = this.dataList.length
-						uni.hideLoading();
-					}).catch(err => {
-						uni.hideLoading();
-					})
-				}).catch(err => {
-					uni.hideLoading();
-				})
-			},
-			deleteShopping() {
-				if (this.selectedProduct.length == 0) {
-					uni.showToast({
-						title: "请先选择要支付的商品",
-						icon: 'none'
-					});
-					return
-				}
-				let data = []
-				for (let item of this.companyValue) {
-					for (let ite of this.dataList) {
-						if (item == ite.name) {
-							for (let it of ite.list) {
-								data.push(it.id)
-							}
-						}
-					}
-				};
-
-				console.log(data.join(","));
-				uni.showLoading({
-					title: '加载中',
-					mask: true
-				});
-				update(data.join(",")).then(res => {
-					uni.showToast({
-						title: "删除成功",
-						icon: 'none'
-					});
-					uni.hideLoading();
-					uni.showLoading({
-						title: '加载中',
-						mask: true
-					});
-					this.editDel = false
-					this.companyValue = []
-					obligationList().then(res => {
-						this.dataList = res.data
-						this.companyValueLength = this.dataList.length
-						uni.hideLoading();
-					}).catch(err => {
-						uni.hideLoading();
-					})
-				}).catch(err => {
-					uni.hideLoading();
-				})
-			},
-			paySubmit(val, index, ind) {
-				this.statistics(val, index, ind)
-			},
-			submit(payType) {
-				console.log(this.selectedProduct)
-				if (this.selectedProduct.length == 0) {
-					uni.showToast({
-						title: "请先选择要支付的商品",
-						icon: 'none'
-					});
-					return
-				}
-				for (let item of this.selectedProduct) {
-					if (!item.payType) return uni.showToast({
-						title: "当前订单支付方式异常,请重新购买",
-						icon: 'none',
-						duration: 2500
-					});
-					if (item.payType && item.payType == 'W06') {
-						// 微信支付
-					} else {
-						// 扫码支付
-						let i = 0
-						let j = 0
-						console.log(this.selectedProduct)
-						this.selectedProduct.forEach((item, index) => {
-							console.log(item.payType.indexOf('01'))
-							if (item.payType && item.payType.indexOf('01') != -1) {
-								i++
-							} else {
-								j++
-							}
-						})
-						if (j != 0) {
-							uni.showToast({
-								title: "请选择相同的支付方式",
-								icon: 'none'
-							});
-							return
-						}
-						if (i > 1) {
-							uni.showToast({
-								title: "扫码支付只能选择一个",
-								icon: 'none'
-							});
-							return
-						}
-					}
-				}
-
-				if (this.companyValue.length > 0) {
-					let data = []
-					for (let item of this.companyValue) {
-						for (let ite of this.dataList) {
-							if (item == ite.name) {
-								data.push({
-									name: item,
-								})
-							}
-						}
-					}
+import {
+  obligationList,
+  update,
+  getPaymentType,
+  getPaymentByOrder,
+} from '@/api/tabBar/shoppingCart.js'
 
 
-					console.log('data', data);
-					uni.showLoading({
-						title: '加载中',
-						mask: true
-					});
+import {closeOrder} from "@/api/tabBar/shoppingCart";
 
 
-					payPrepay({
-						srcOrderNo: data[0].name
-					}).then(res => {
-						let generateOrderData = res.data
-						paramserviceDetail({
-							paramKey: 'cashier.payment'
-						}).then(res => {
-							let paramservice = res.data
-							// 判断是调支付台的接口还是微信支付的接口
-							if (paramservice && paramservice.paramValue == '1') {
-								wx.openEmbeddedMiniProgram({
-									appId: 'wxef277996acc166c3',
-									extraData: {
-										cusid: generateOrderData.cusid,
-										appid: generateOrderData.appid,
-										orgid: generateOrderData.orgid,
-										version: generateOrderData.version,
-										trxamt: generateOrderData.trxamt,
-										reqsn: generateOrderData.reqsn,
-										notify_url: generateOrderData.notify_url,
-										body: generateOrderData.body,
-										remark: generateOrderData.remark,
-										validtime: generateOrderData.validtime,
-										limit_pay: generateOrderData.limit_pay,
-										randomstr: generateOrderData.randomstr,
-										paytype: generateOrderData.paytype,
-										signtype: generateOrderData.signtype,
-										sign: generateOrderData.sign,
-									},
-									success: (a) => {
-										uni.hideLoading();
-									},
-									fail: (err) => {
-										uni.hideLoading();
-									}
-								})
-							} else {
-								if (this.selectedProduct[0].payType &&
-									(this.selectedProduct[0].payType == 'W01' || this.selectedProduct[0]
-										.payType == 'U01' || this.selectedProduct[0].payType == 'A01' ||
-										this.selectedProduct[0].payType == 'S01')) {
-									this.qrcodeurl = this.selectedProduct[0].payUrl
-									appDetail({
-										id: this.selectedProduct[0].id
-									}).then(res => {
-										uni.hideLoading();
-										this.qrcodeshow = true
-										this.qrcodeData = res.data
-										// 往后延长一小时
-										this.qrcodeData.businesDate = dateFormat(new Date(Date
-											.parse(this.qrcodeData.businesDate) + 60 * 60 *
-											1000))
+export default {
+  data() {
+    return {
+      dataList: [],
+      payList: ['W01', 'A01', 'U01', 'S01'],
+      totalPrice: 0.00,
+      totalFreight: 0.00,
+      isLoading: true,
+      payType: null
+    }
+  },
+  watch: {},
+  onShow() {
+    getPaymentType().then(res => {
+      console.log(res.data, 111);
+      this.payType = res.data
+    })
+    this.isLoading = true
+    uni.showLoading({
+      title: '加载中',
+      mask: true
+    });
+    obligationList().then(res => {
+      console.log(res);
+      this.dataList = res.data
+      this.isLoading = false // 添加这一行
+      uni.hideLoading();
+    }).catch(err => {
+      uni.hideLoading();
+    })
+  },
+  methods: {
 
 
-									})
-								} else {
-									uni.requestPayment({
-										provider: "wxpay",
-										appId: generateOrderData.appId,
-										timeStamp: generateOrderData.timeStamp,
-										nonceStr: generateOrderData.nonceStr,
-										package: generateOrderData.package,
-										signType: generateOrderData.signType,
-										paySign: generateOrderData.paySign,
-										success(res) {
-											uni.showToast({
-												title: '支付成功',
-												mask: true,
-												duration: 2000
-											});
-											setTimeout(function() {
-												uni.hideLoading();
-												// this_.refresh(res.data.data.id)
-											}, 1000);
-										},
-										fail(e) {
-											console.log(e);
-											uni.showToast({
-												title: "支付失败",
-												icon: 'none',
-												mask: true
-											});
-											setTimeout(function() {
-												uni.hideLoading();
-												// this_.refresh(res.data.id)
-											}, 1000);
-										}
-									})
-								}
+    deleteGoods(orderId) {
+      console.log(orderId);
+      uni.showLoading({
+        title: '加载中',
+        mask: true
+      });
+      closeOrder({id: orderId}).then(res => {
+        uni.hideLoading();
+        console.info('res--------', res)
+        uni.showToast({
+          title: res.msg,
+          icon: 'none',
+          duration: 2500
+        });
+        setTimeout(() => {
+          this.getList()
+        }, 1000)
+      }).catch(err => {
+        uni.hideLoading();
+      })
+    },
+    paySubmit(val, index, ind) {
+      this.statistics(val, index, ind)
+    },
+    submit(itemData, index) {
+      console.log('itemData-----', itemData)
+      if (this.dataList[index].paySuccess == true) {
+        uni.showToast({
+          title: "当前订单已完成支付, 请勿重复支付",
+          icon: 'none',
+          duration: 2500
+        });
+        return
+      }
+      if (itemData == null || itemData == {}) {
+        uni.showToast({
+          title: "请先选择要支付的商品",
+          icon: 'none'
+        });
+        return
+      }
+      if (!itemData.payType) {
+        uni.showToast({
+          title: "当前订单支付方式异常,请重新购买",
+          icon: 'none',
+          duration: 2500
+        });
+        return
+      }
+      if (itemData.payType && itemData.payType == 'W06') {
+        console.log('---------------------------------')
+        this.normalPayment(itemData, index)
+      }
+    },
 
 
-							}
-						})
+    async normalPayment(itemData, index) {
+      uni.showLoading({
+        title: '加载中',
+        mask: true
+      });
+      // 正常支付
+      getPaymentByOrder({
+        id: itemData.id
+      }).then(res => {
+        let generateOrderData = res.data
+        if (!generateOrderData.reqsn) {
+          uni.showToast({
+            title: '当前订单号为空,请联系供应商!!!',
+            icon: 'none',
+            mask: true,
+            duration: 2000
+          });
+          // 详情调用
+          this.getList()
+          return
+        }
+        wx.openEmbeddedMiniProgram({
+          appId: 'wxef277996acc166c3',
+          extraData: {
+            cusid: generateOrderData.cusid,
+            appid: generateOrderData.appid,
+            orgid: generateOrderData.orgid,
+            version: generateOrderData.version,
+            trxamt: generateOrderData.trxamt,
+            reqsn: generateOrderData.reqsn,
+            notify_url: generateOrderData.notify_url,
+            body: generateOrderData.body,
+            remark: generateOrderData.remark,
+            validtime: generateOrderData.validtime,
+            limit_pay: "",
+            randomstr: generateOrderData.randomstr,
+            paytype: generateOrderData.paytype,
+            signtype: generateOrderData.signtype,
+            sign: generateOrderData.sign,
+          },
+          success: (a) => {
+            this.dataList[index].paySuccess = true
+            uni.hideLoading();
+          },
+          fail: (err) => {
+            uni.hideLoading();
+          }
+        })
+      }).catch(err => {
+        uni.hideLoading();
+      })
+    },
 
 
 
 
-						// uni.showToast({
-						// 	title: "提交成功",
-						// 	icon: 'none'
-						// });
-						// uni.hideLoading();
-						// uni.showLoading({
-						// 	title: '加载中',
-						// 	mask: true
-						// });
-						// this.editDel = false
-						// this.companyValue = []
-						// shoppingCartList().then(res => {
-						// 	this.dataList = res.data
-						// 	this.companyValueLength = this.dataList.length
-						// 	uni.hideLoading();
-						// }).catch(err => {
-						// 	uni.hideLoading();
-						// })
-					}).catch(err => {
-						uni.hideLoading();
-					})
-				}
-			},
-			radioGroupChange(e) {
-				this.radiovalue = e
-				if (e.length == 0) {
-					this.companyValue = []
-				} else {
-					for (let li of this.dataList) {
-						if (!this.companyValue.includes(li.name)) {
-							this.companyValue.push(li.name)
-						}
-					}
-				}
-				// this.statistics()
-			},
-			statistics(val, index, ind) {
-				let data = []
-				for (let it of val.list) {
-					if (it.payType) {
-						data.push(it)
-					}else{
-						it.payType=this.payType
-						data.push(it)
-					}
-				}
-				this.totalPrice = 0
-				this.totalFreight = 0
-				for (let item of data) {
-					for (let orderItem of item.orderItemsList) {
-						this.totalPrice += Number(orderItem.price) * Number(orderItem.goodsNum)
-						console.log(orderItem.goodsNum);
-						if (Number(orderItem.goodsNum) == 1) {
-							this.totalFreight += 5
-						}
-					}
+    getList() {
+      uni.showLoading({
+        title: '加载中',
+        mask: true
+      });
+      obligationList().then(res => {
+        this.dataList = res.data
+        uni.hideLoading();
+      }).catch(err => {
+        uni.hideLoading();
+      })
+    },
 
 
-				}
-				this.totalFreight = this.totalFreight.toFixed(2)
-				this.totalPrice = this.totalPrice.toFixed(2)
-				this.selectedProduct = data
-				this.submit()
-			},
-			companyChange(n) {
-				if (n == 0) {
-					this.dataList.forEach((e => {
-						e.disabled = false
-					}))
-				} else {
-					this.dataList.forEach((e => {
-						if (n[0] != e.name) {
-							e.disabled = true
-						}
 
 
-					}))
-				}
-				this.companyValue = n
-			}
-		}
-	}
+    statistics(orderData, index, ind) {
+      orderData.payType = orderData.payType ? orderData.payType : this.payType
+      this.totalPrice = 0
+      this.totalFreight = 0
+      for (let orderItem of orderData.orderItemsList) {
+        this.totalPrice += Number(orderItem.price) * Number(orderItem.goodsNum)
+      }
+      console.log(orderData.goodsTotalNum);
+      if (Number(orderData.goodsTotalNum) == 1) {
+        this.totalFreight += 5
+      }
+      this.totalFreight = this.totalFreight.toFixed(2)
+      this.totalPrice = this.totalPrice.toFixed(2)
+      this.submit(orderData, index)
+    }
+  }
+}
 </script>
 </script>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-	.card {
-		padding: 54rpx 63rpx;
-		background-color: #fff;
-		margin-bottom: 20rpx;
+.card {
+  padding: 54rpx 63rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
 
 
-		::v-deep .u-button {
-			height: 60rpx;
-		}
-	}
-</style>
+  ::v-deep .u-button {
+    height: 60rpx;
+  }
+}
+</style>