|
|
@@ -152,578 +152,624 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- statusType: "waitPay", // waitPay, waitSend, finish, waitComment, fail
|
|
|
- status: "",
|
|
|
- statusTitle: "", // 根据statusType动态切换
|
|
|
- statusIcon: "loading", // 可根据状态切换icon loading fail success
|
|
|
- address: {},
|
|
|
- product: {},
|
|
|
- order: {},
|
|
|
- paymentMethod: 'alipay', // 默认支付宝支付
|
|
|
- isWeChatPay: true, // 是否显示微信支付选项
|
|
|
- orderId: "",
|
|
|
- };
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusType: "waitPay", // waitPay, waitSend, finish, waitComment, fail
|
|
|
+ status: "",
|
|
|
+ statusTitle: "", // 根据statusType动态切换
|
|
|
+ statusIcon: "loading", // 可根据状态切换icon loading fail success
|
|
|
+ address: {},
|
|
|
+ product: {},
|
|
|
+ order: {},
|
|
|
+ paymentMethod: 'alipay', // 默认支付宝支付
|
|
|
+ isWeChatPay: true, // 是否显示微信支付选项
|
|
|
+ orderId: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.getOrderDetail(options.orderId);
|
|
|
+ this.orderId = options.orderId;
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack();
|
|
|
+ },
|
|
|
+ goPages(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url
|
|
|
+ });
|
|
|
},
|
|
|
- onLoad(options) {
|
|
|
- this.getOrderDetail(options.orderId);
|
|
|
- this.orderId = options.orderId;
|
|
|
|
|
|
+ copy(val) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: val
|
|
|
+ });
|
|
|
},
|
|
|
- methods: {
|
|
|
- goBack() {
|
|
|
- uni.navigateBack();
|
|
|
- },
|
|
|
- goPages(url) {
|
|
|
- uni.navigateTo({
|
|
|
- url
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- copy(val) {
|
|
|
- uni.setClipboardData({
|
|
|
- data: val
|
|
|
- });
|
|
|
- },
|
|
|
- cancelOrder() {
|
|
|
- this.$refs["DialogBox"].confirm({
|
|
|
- title: "提示",
|
|
|
- content: "确定要取消订单吗？",
|
|
|
- DialogType: "inquiry",
|
|
|
- btn1: "否",
|
|
|
- btn2: "是",
|
|
|
- animation: 0,
|
|
|
- }).then((res) => {
|
|
|
- if (res) {
|
|
|
- this.orderAction('cancel');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- payOrder() {
|
|
|
- this.$refs.paymentPopup.open();
|
|
|
- },
|
|
|
- selectPayment(method) {
|
|
|
- this.paymentMethod = method;
|
|
|
- },
|
|
|
- confirmPayment() {
|
|
|
- this.orderAction('pay', this.paymentMethod);
|
|
|
- this.$refs.paymentPopup.close();
|
|
|
- },
|
|
|
- refundOrder() {
|
|
|
- this.$refs.DialogBox.confirm({
|
|
|
- title: "提示",
|
|
|
- content: "确定要申请退款吗？",
|
|
|
- DialogType: "inquiry",
|
|
|
- btn1: "否",
|
|
|
- btn2: "是",
|
|
|
- animation: 0,
|
|
|
- }).then((res) => {
|
|
|
- if (res) {
|
|
|
- this.orderAction('refund');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- deleteOrder() {
|
|
|
- this.$refs.DialogBox.confirm({
|
|
|
- title: "提示",
|
|
|
- content: "确定要删除订单吗？",
|
|
|
- DialogType: "inquiry",
|
|
|
- btn1: "否",
|
|
|
- btn2: "是",
|
|
|
- animation: 0,
|
|
|
- }).then((res) => {
|
|
|
- if (res) {
|
|
|
- this.orderAction('del');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- confirmOrder() {
|
|
|
- this.$refs.DialogBox.confirm({
|
|
|
- title: "提示",
|
|
|
- content: "是否要确认收货吗？",
|
|
|
- DialogType: "inquiry",
|
|
|
- btn1: "否",
|
|
|
- btn2: "是",
|
|
|
- animation: 0,
|
|
|
- }).then((res) => {
|
|
|
- if (res) {
|
|
|
- this.orderAction('finish');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- commentOrder() {},
|
|
|
- orderAction(act, payType = '') {
|
|
|
-
|
|
|
- var order_id = this.orderId;
|
|
|
- console.log(this.order);
|
|
|
- if(act == "pay"){
|
|
|
- order_id = this.order.orderNo;
|
|
|
- }
|
|
|
- console.log({
|
|
|
- order_id ,
|
|
|
+ cancelOrder() {
|
|
|
+ this.$refs["DialogBox"].confirm({
|
|
|
+ title: "提示",
|
|
|
+ content: "确定要取消订单吗？",
|
|
|
+ DialogType: "inquiry",
|
|
|
+ btn1: "否",
|
|
|
+ btn2: "是",
|
|
|
+ animation: 0,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ this.orderAction('cancel');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ payOrder() {
|
|
|
+ this.$refs.paymentPopup.open();
|
|
|
+ },
|
|
|
+ selectPayment(method) {
|
|
|
+ this.paymentMethod = method;
|
|
|
+ },
|
|
|
+ confirmPayment() {
|
|
|
+ this.orderAction('pay', this.paymentMethod);
|
|
|
+ this.$refs.paymentPopup.close();
|
|
|
+ },
|
|
|
+ refundOrder() {
|
|
|
+ this.$refs.DialogBox.confirm({
|
|
|
+ title: "提示",
|
|
|
+ content: "确定要申请退款吗？",
|
|
|
+ DialogType: "inquiry",
|
|
|
+ btn1: "否",
|
|
|
+ btn2: "是",
|
|
|
+ animation: 0,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ this.orderAction('refund');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteOrder() {
|
|
|
+ this.$refs.DialogBox.confirm({
|
|
|
+ title: "提示",
|
|
|
+ content: "确定要删除订单吗？",
|
|
|
+ DialogType: "inquiry",
|
|
|
+ btn1: "否",
|
|
|
+ btn2: "是",
|
|
|
+ animation: 0,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ this.orderAction('del');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ confirmOrder() {
|
|
|
+ this.$refs.DialogBox.confirm({
|
|
|
+ title: "提示",
|
|
|
+ content: "是否要确认收货吗？",
|
|
|
+ DialogType: "inquiry",
|
|
|
+ btn1: "否",
|
|
|
+ btn2: "是",
|
|
|
+ animation: 0,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ this.orderAction('finish');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ commentOrder() { },
|
|
|
+ orderAction(act, payType = '') {
|
|
|
+
|
|
|
+ var order_id = this.orderId;
|
|
|
+ var _this = this;
|
|
|
+ console.log({
|
|
|
+ order_id,
|
|
|
+ act: act,
|
|
|
+ payType: payType,
|
|
|
+ }, '支付接口参数');
|
|
|
+ uni.request({
|
|
|
+ url: this.$apiHost + '/Order/action',
|
|
|
+ method: 'GET',
|
|
|
+ data: {
|
|
|
+ order_id: order_id,
|
|
|
act: act,
|
|
|
payType: payType,
|
|
|
- });
|
|
|
- uni.request({
|
|
|
- url: this.$apiHost + '/Order/action',
|
|
|
- method: 'GET',
|
|
|
- data: {
|
|
|
- order_id:order_id,
|
|
|
- act: act,
|
|
|
- payType: payType,
|
|
|
- uuid: getApp().globalData.uuid,
|
|
|
- skey: getApp().globalData.skey
|
|
|
- },
|
|
|
- success: (res) => {
|
|
|
- console.log(res.data, "订单操作结果");
|
|
|
- if (res.data && res.data.success == 'yes') {
|
|
|
- uni.showToast({
|
|
|
- title: res.data.str,
|
|
|
- icon: 'none'
|
|
|
+ uuid: getApp().globalData.uuid,
|
|
|
+ skey: getApp().globalData.skey
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.data, "订单操作结果");
|
|
|
+
|
|
|
+ if (res.data && res.data.success == 'yes') {
|
|
|
+ // 微信支付
|
|
|
+ console.log(payType, "支付方式");
|
|
|
+
|
|
|
+ if (payType === 'wx') {
|
|
|
+ console.log(res.data.wepay, "微信支付");
|
|
|
+
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: "wxpay",
|
|
|
+ orderInfo: {
|
|
|
+ appid: res.data.wepay.appid,
|
|
|
+ partnerid: res.data.wepay.partnerid,
|
|
|
+ prepayid: res.data.wepay.prepayid,
|
|
|
+ package: "Sign=WXPay",
|
|
|
+ noncestr: res.data.wepay.noncestr,
|
|
|
+ timestamp: res.data.wepay.timestamp,
|
|
|
+ sign: res.data.wepay.sign
|
|
|
+ },
|
|
|
+ success: (payRes) => {
|
|
|
+ that.checkPayStatus();
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ that.isSubmitting = false;
|
|
|
+ uni.showToast({ title: '支付取消', icon: 'none' });
|
|
|
+ }
|
|
|
});
|
|
|
- this.getOrderDetail(this.order.orderNo);
|
|
|
- if (act == 'cancel') {
|
|
|
- this.goBack();
|
|
|
- }
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.data.message || '操作失败',
|
|
|
- icon: 'none'
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 支付宝支付
|
|
|
+ else if (payType === 'alipay') {
|
|
|
+ console.log(res.data.ali_pay, "支付宝支付");
|
|
|
+
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: "alipay",
|
|
|
+ orderInfo: res.data.ali_pay,
|
|
|
+ success: (payRes) => {
|
|
|
+ that.checkPayStatus();
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+ that.isSubmitting = false;
|
|
|
+ uni.showToast({ title: '支付取消', icon: 'none' });
|
|
|
+ }
|
|
|
});
|
|
|
+ return;
|
|
|
}
|
|
|
- },
|
|
|
- fail: () => {
|
|
|
+
|
|
|
uni.showToast({
|
|
|
- title: '操作失败',
|
|
|
+ title: res.data.str,
|
|
|
icon: 'none'
|
|
|
});
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- getOrderDetail(orderId) {
|
|
|
- uni.request({
|
|
|
- url: this.$apiHost + '/Order/detail?order_id=' + orderId,
|
|
|
- method: 'GET',
|
|
|
- data: {
|
|
|
- uuid: getApp().globalData.uuid,
|
|
|
- skey: getApp().globalData.skey
|
|
|
- },
|
|
|
- success: (res) => {
|
|
|
- console.log(res.data.data, "获取订单详情");
|
|
|
- if (res.data && res.data.success == 'yes') {
|
|
|
- let data = res.data.data;
|
|
|
- if (data.address) {
|
|
|
- this.address = JSON.parse(data.address);
|
|
|
- }
|
|
|
- this.order = {
|
|
|
- orderNo: data.linkid,
|
|
|
- createTime: data.create_time,
|
|
|
- payTime: data.order_time,
|
|
|
- }
|
|
|
- if (data.crowdfund) {
|
|
|
- this.product = {
|
|
|
- price: data.crowdfund.price,
|
|
|
- img: data.crowdfund.image,
|
|
|
- title: data.crowdfund.title,
|
|
|
- desc: "",
|
|
|
- spec: data.crowdfund.title2,
|
|
|
- count: 1,
|
|
|
- total: data.money,
|
|
|
- deliveryTime: data.crowdfund.delivery,
|
|
|
- id: data.crowdfund.id,
|
|
|
- // tip: "温馨提示：该链接仅购买线下实物卡片！不含线上卡牌壁纸",
|
|
|
- }
|
|
|
- }
|
|
|
- this.status = data.status;
|
|
|
- this.statusTitle = data.status_name;
|
|
|
+ this.getOrderDetail(this.order.orderNo);
|
|
|
+ if (act == 'cancel') {
|
|
|
+ this.goBack();
|
|
|
}
|
|
|
- },
|
|
|
- fail: () => {
|
|
|
+ } else {
|
|
|
uni.showToast({
|
|
|
- title: '获取订单详情失败',
|
|
|
+ title: res.data.message || '操作失败',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
- },
|
|
|
- complete: () => {
|
|
|
- uni.hideLoading();
|
|
|
}
|
|
|
- });
|
|
|
- },
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '操作失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- mounted() {
|
|
|
- // 可根据实际订单状态设置statusType/statusTitle/statusIcon
|
|
|
- // 例如：this.statusType = 'waitPay'; this.statusTitle = '待支付';
|
|
|
+ getOrderDetail(orderId) {
|
|
|
+ uni.request({
|
|
|
+ url: this.$apiHost + '/Order/detail?order_id=' + orderId,
|
|
|
+ method: 'GET',
|
|
|
+ data: {
|
|
|
+ uuid: getApp().globalData.uuid,
|
|
|
+ skey: getApp().globalData.skey
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.data.data, "获取订单详情");
|
|
|
+ if (res.data && res.data.success == 'yes') {
|
|
|
+ let data = res.data.data;
|
|
|
+ if (data.address) {
|
|
|
+ this.address = JSON.parse(data.address);
|
|
|
+ }
|
|
|
+ this.order = {
|
|
|
+ orderNo: data.linkid,
|
|
|
+ createTime: data.create_time,
|
|
|
+ payTime: data.order_time,
|
|
|
+ }
|
|
|
+ if (data.crowdfund) {
|
|
|
+ this.product = {
|
|
|
+ price: data.crowdfund.price,
|
|
|
+ img: data.crowdfund.image,
|
|
|
+ title: data.crowdfund.title,
|
|
|
+ desc: "",
|
|
|
+ spec: data.crowdfund.title2,
|
|
|
+ count: 1,
|
|
|
+ total: data.money,
|
|
|
+ deliveryTime: data.crowdfund.delivery,
|
|
|
+ id: data.crowdfund.id,
|
|
|
+ // tip: "温馨提示：该链接仅购买线下实物卡片！不含线上卡牌壁纸",
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.status = data.status;
|
|
|
+ this.statusTitle = data.status_name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '获取订单详情失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 可根据实际订单状态设置statusType/statusTitle/statusIcon
|
|
|
+ // 例如：this.statusType = 'waitPay'; this.statusTitle = '待支付';
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .order-detail-page {
|
|
|
- min-height: 100vh;
|
|
|
- background: #f2f6f2;
|
|
|
-
|
|
|
- .custom-navbar {
|
|
|
+.order-detail-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f2f6f2;
|
|
|
+
|
|
|
+ .custom-navbar {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 90rpx;
|
|
|
+ padding: 0 40rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ padding-top: var(--status-bar-height);
|
|
|
+ background-color: transparent;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ height: calc(90rpx + var(--status-bar-height));
|
|
|
+ z-index: 100;
|
|
|
+
|
|
|
+ .navbar-left {
|
|
|
+ height: 80rpx;
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- height: 90rpx;
|
|
|
- padding: 0 40rpx;
|
|
|
- padding-right: 30rpx;
|
|
|
- padding-top: var(--status-bar-height);
|
|
|
- background-color: transparent;
|
|
|
- position: sticky;
|
|
|
- top: 0;
|
|
|
- height: calc(90rpx + var(--status-bar-height));
|
|
|
- z-index: 100;
|
|
|
-
|
|
|
- .navbar-left {
|
|
|
- height: 80rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .fa-angle-left {
|
|
|
- font-size: 48rpx;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
|
|
|
- .navbar-right {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ .fa-angle-left {
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .status-bar {
|
|
|
+ .navbar-right {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
display: flex;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
- padding: 32rpx 32rpx 0 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .status-icon {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- margin-right: 12rpx;
|
|
|
- }
|
|
|
+ .status-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32rpx 32rpx 0 32rpx;
|
|
|
|
|
|
- .status-title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #1F1F1F;
|
|
|
- }
|
|
|
+ .status-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
}
|
|
|
|
|
|
- .address-card {
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- margin: 24rpx 16rpx 0 16rpx;
|
|
|
- padding: 24rpx;
|
|
|
- background: url("../../static/crowdFunding/order-detail-card-bg.png") no-repeat top right / auto 100%,
|
|
|
- #fff;
|
|
|
+ .status-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1F1F1F;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 8rpx;
|
|
|
+ .address-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin: 24rpx 16rpx 0 16rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: url("../../static/crowdFunding/order-detail-card-bg.png") no-repeat top right / auto 100%,
|
|
|
+ #fff;
|
|
|
|
|
|
- .name {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- margin-right: 18rpx;
|
|
|
- }
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
|
|
- .mobile {
|
|
|
- font-size: 30rpx;
|
|
|
- margin-right: 18rpx;
|
|
|
- }
|
|
|
+ .name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 18rpx;
|
|
|
+ }
|
|
|
|
|
|
- .default {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #acf934;
|
|
|
- background: #1f1f1f;
|
|
|
- border-radius: 8rpx;
|
|
|
- padding: 2rpx 12rpx;
|
|
|
- margin-right: 12rpx;
|
|
|
- }
|
|
|
+ .mobile {
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-right: 18rpx;
|
|
|
}
|
|
|
|
|
|
- .address {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
+ .default {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #acf934;
|
|
|
+ background: #1f1f1f;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 2rpx 12rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .product-card {
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- margin: 24rpx 16rpx 0 16rpx;
|
|
|
- padding: 24rpx;
|
|
|
+ .address {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin: 24rpx 16rpx 0 16rpx;
|
|
|
+ padding: 24rpx;
|
|
|
|
|
|
- .product-top {
|
|
|
+ .product-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .product-img {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin-right: 18rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-info {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
- .product-img {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- margin-right: 18rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .product-info {
|
|
|
- flex: 1;
|
|
|
+ .product-title {
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1f1f1f;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .product-title {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #1f1f1f;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .two-omit {
|
|
|
- width: 400rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .arrow {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- // margin-left: 140rpx;
|
|
|
- }
|
|
|
+ .two-omit {
|
|
|
+ width: 400rpx;
|
|
|
}
|
|
|
|
|
|
- .product-desc {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #1F1F1F;
|
|
|
- margin: 8rpx 0;
|
|
|
+ .arrow {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ // margin-left: 140rpx;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .product-bom {
|
|
|
- padding-top: 15rpx;
|
|
|
-
|
|
|
- .product-spec {
|
|
|
- font-size: 26rpx;
|
|
|
+ .product-desc {
|
|
|
+ font-size: 24rpx;
|
|
|
color: #1F1F1F;
|
|
|
margin: 8rpx 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .count {
|
|
|
- color: #888;
|
|
|
- font-size: 22rpx;
|
|
|
- margin-top: 16rpx;
|
|
|
- margin-top: 8rpx;
|
|
|
- }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .product-time {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #b2b2b2;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
+ .product-bom {
|
|
|
+ padding-top: 15rpx;
|
|
|
|
|
|
- .product-tip {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #b2b2b2;
|
|
|
- background: #f6faf6;
|
|
|
- border-radius: 8rpx;
|
|
|
- padding: 8rpx 12rpx;
|
|
|
+ .product-spec {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #1F1F1F;
|
|
|
+ margin: 8rpx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .count {
|
|
|
+ color: #888;
|
|
|
+ font-size: 22rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .arrow {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-left: 8rpx;
|
|
|
+ .product-time {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-tip {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ background: #f6faf6;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 8rpx 12rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .fee-row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0;
|
|
|
- height: 64rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #1F1F1F;
|
|
|
+ .arrow {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- text:first-child {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
+ .fee-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0;
|
|
|
+ height: 64rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #1F1F1F;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
|
|
|
- &.total {
|
|
|
- font-weight: bold;
|
|
|
- color: #1f1f1f;
|
|
|
- justify-content: flex-end;
|
|
|
+ &.total {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1f1f1f;
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
|
- text:first-child {
|
|
|
- color: #1f1f1f;
|
|
|
- }
|
|
|
+ text:first-child {
|
|
|
+ color: #1f1f1f;
|
|
|
+ }
|
|
|
|
|
|
- .total-price {
|
|
|
- color: #ff5500;
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
+ .total-price {
|
|
|
+ color: #ff5500;
|
|
|
+ font-size: 32rpx;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .order-info-card {
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- margin: 24rpx 16rpx 0 16rpx;
|
|
|
- padding: 24rpx;
|
|
|
+ .order-info-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin: 24rpx 16rpx 0 16rpx;
|
|
|
+ padding: 24rpx;
|
|
|
|
|
|
- .info-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- height: 56rpx;
|
|
|
- font-size: 26rpx;
|
|
|
+ .info-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 56rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
|
- >text:first-child {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
+ >text:first-child {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
|
|
|
- .copy-btn {
|
|
|
- color: #1f1f1f;
|
|
|
- background: #f6faf6;
|
|
|
- border-radius: 8rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-left: 18rpx;
|
|
|
- padding: 2rpx 16rpx;
|
|
|
- }
|
|
|
+ .copy-btn {
|
|
|
+ color: #1f1f1f;
|
|
|
+ background: #f6faf6;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: 18rpx;
|
|
|
+ padding: 2rpx 16rpx;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .order-bottom {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
+ .order-bottom {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ min-width: 180rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
padding: 0 32rpx;
|
|
|
- height: 110rpx;
|
|
|
- box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
|
- z-index: 10;
|
|
|
-
|
|
|
- .btn {
|
|
|
- min-width: 180rpx;
|
|
|
- height: 72rpx;
|
|
|
- line-height: 72rpx;
|
|
|
- border-radius: 44rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 30rpx;
|
|
|
- padding: 0 32rpx;
|
|
|
- margin-left: 24rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
|
|
|
- &.btn-pay {
|
|
|
- background: #1f1f1f;
|
|
|
- color: #acf934;
|
|
|
- }
|
|
|
+ &.btn-pay {
|
|
|
+ background: #1f1f1f;
|
|
|
+ color: #acf934;
|
|
|
+ }
|
|
|
|
|
|
- &.btn-cancel {
|
|
|
- background: #fff;
|
|
|
- color: #1f1f1f;
|
|
|
- border: 2rpx solid #e5e5e5;
|
|
|
- }
|
|
|
+ &.btn-cancel {
|
|
|
+ background: #fff;
|
|
|
+ color: #1f1f1f;
|
|
|
+ border: 2rpx solid #e5e5e5;
|
|
|
+ }
|
|
|
|
|
|
- &.btn-refund {
|
|
|
- background: #1f1f1f;
|
|
|
- color: #acf934;
|
|
|
- }
|
|
|
+ &.btn-refund {
|
|
|
+ background: #1f1f1f;
|
|
|
+ color: #acf934;
|
|
|
+ }
|
|
|
|
|
|
- &.btn-delete {
|
|
|
- background: #fff;
|
|
|
- color: #1f1f1f;
|
|
|
- border: 2rpx solid #e5e5e5;
|
|
|
- }
|
|
|
+ &.btn-delete {
|
|
|
+ background: #fff;
|
|
|
+ color: #1f1f1f;
|
|
|
+ border: 2rpx solid #e5e5e5;
|
|
|
+ }
|
|
|
|
|
|
- &.btn-comment {
|
|
|
- background: #1f1f1f;
|
|
|
- color: #acf934;
|
|
|
- }
|
|
|
+ &.btn-comment {
|
|
|
+ background: #1f1f1f;
|
|
|
+ color: #acf934;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .payment-popup {
|
|
|
- background: #fff;
|
|
|
- border-radius: 24rpx 24rpx 0 0;
|
|
|
- padding: 32rpx;
|
|
|
+ .payment-popup {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 24rpx 24rpx 0 0;
|
|
|
+ padding: 32rpx;
|
|
|
|
|
|
- .popup-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 32rpx;
|
|
|
+ .popup-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
|
|
|
- .popup-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #1f1f1f;
|
|
|
- }
|
|
|
+ .popup-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1f1f1f;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .payment-options {
|
|
|
- .payment-option {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 24rpx 0;
|
|
|
- border-bottom: 2rpx solid #f6faf6;
|
|
|
-
|
|
|
- .payment-icon {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- margin-right: 18rpx;
|
|
|
- }
|
|
|
+ .payment-options {
|
|
|
+ .payment-option {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border-bottom: 2rpx solid #f6faf6;
|
|
|
|
|
|
- .payment-name {
|
|
|
- flex: 1;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #1f1f1f;
|
|
|
- }
|
|
|
+ .payment-icon {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-right: 18rpx;
|
|
|
+ }
|
|
|
|
|
|
- .payment-select {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- }
|
|
|
+ .payment-name {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #1f1f1f;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .confirm-payment {
|
|
|
- margin-top: 32rpx;
|
|
|
- background: #1f1f1f;
|
|
|
- color: #acf934;
|
|
|
- border-radius: 44rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- height: 88rpx;
|
|
|
- line-height: 88rpx;
|
|
|
- text-align: center;
|
|
|
+ .payment-select {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .btn-delete {
|
|
|
- background: #f6faf6;
|
|
|
- color: #888;
|
|
|
- border: 1px solid #e5e5e5;
|
|
|
+ .confirm-payment {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ background: #1f1f1f;
|
|
|
+ color: #acf934;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .btn-delete {
|
|
|
+ background: #f6faf6;
|
|
|
+ color: #888;
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
