mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-17 07:55:53 +08:00
commit message
This commit is contained in:
Chopper
0
pages/cart/payment/error.vue
Normal file
0
pages/cart/payment/error.vue
Normal file
466
pages/cart/payment/payOrder.vue
Normal file
466
pages/cart/payment/payOrder.vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="box">
|
||||
<div class="block block-1">
|
||||
<image class="img" src="@/pages/cart/static/pay.png" />
|
||||
<p class="ptips">收银台</p>
|
||||
|
||||
<p class="ptips">剩余支付时间：
|
||||
<u-count-down :show-days="false" :show-border="true" font-size="28" color="#008ffa"
|
||||
border-color="#008ffa" ref="uCountDown" :timestamp="autoCancel"></u-count-down>
|
||||
</p>
|
||||
<p class="ptips">
|
||||
支付金额
|
||||
<span>¥{{ cashierParams.price | unitPrice }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="__pay_form__">
|
||||
</div>
|
||||
<div class="block-4" v-if="cashierParams.price > 0">
|
||||
<div class="payItem">支付方式</div>
|
||||
<div class="payItem" v-for="(item, index) in payList" :key="index">
|
||||
<u-row class="row">
|
||||
<div class="col1" @click="awaitPay(item, index)" size="100" style="text-align:left;">
|
||||
<div v-if="item == 'ALIPAY'">
|
||||
<u-icon class="method_icon" name="zhifubao-circle-fill" color="#008ffa" size="80"></u-icon>
|
||||
<span class="method_name">支付宝</span>
|
||||
</div>
|
||||
<div v-if="item == 'WECHAT'">
|
||||
<u-icon class="method_icon" name="weixin-circle-fill" color="#00c98b" size="80"></u-icon>
|
||||
<span class="method_name">微信</span>
|
||||
</div>
|
||||
<div v-if="item == 'WALLET'">
|
||||
<u-icon class="method_icon" name="red-packet-fill" color="#dd6161" size="80"></u-icon>
|
||||
<span class="method_name">余额支付(当前余额：¥{{ walletValue | unitPrice }})</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col3" @click="awaitPay(item)" textAlign="right">
|
||||
<u-icon size="26" color="#b1b1b1" name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</u-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Trade from "@/api/trade";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//路径传参
|
||||
routerVal: "",
|
||||
//收银台参数
|
||||
cashierParams: "",
|
||||
//支付方式集合
|
||||
payList: "",
|
||||
//支付sn
|
||||
sn: "",
|
||||
//订单类型
|
||||
orderType: "",
|
||||
//支付异常
|
||||
exception: {},
|
||||
//支付表单
|
||||
payForm: {},
|
||||
//支付类型 APP/WECHAT_MP/H5/NATIVE app/微信小程序/h5/二维码
|
||||
paymentType: "",
|
||||
// 支付客户端 APP/NATIVE/JSAPI/H5
|
||||
paymentClient: "",
|
||||
//余额
|
||||
walletValue: 0.0,
|
||||
// 支付倒计时
|
||||
autoCancel: 0,
|
||||
};
|
||||
},
|
||||
onLoad(val) {
|
||||
this.routerVal = val;
|
||||
|
||||
//初始化参数
|
||||
// #ifdef APP-PLUS
|
||||
this.paymentType = "APP";
|
||||
this.paymentClient = "APP";
|
||||
//#endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.paymentType = "WECHAT_MP";
|
||||
this.paymentClient = "MP";
|
||||
//#endif
|
||||
// #ifdef H5
|
||||
this.paymentType = "H5";
|
||||
//如果是微信浏览器，则使用公众号支付，否则使用h5，
|
||||
// 区别是：h5是通过浏览器外部调用微信app进行支付，而JSAPI则是 在微信浏览器内部，或者小程序 调用微信支付
|
||||
this.paymentClient = this.isWeiXin() ? "JSAPI" : "H5";
|
||||
//#endif
|
||||
},
|
||||
onBackPress(e) {
|
||||
if (e.from == "backbutton") {
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/myOrder?status=0",
|
||||
});
|
||||
return true; //阻止默认返回行为
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.cashierData();
|
||||
},
|
||||
methods: {
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
},
|
||||
// 获取收银详情
|
||||
cashierData() {
|
||||
let parms = {};
|
||||
|
||||
if (this.routerVal.recharge_sn) {
|
||||
this.sn = this.routerVal.recharge_sn;
|
||||
this.orderType = "RECHARGE";
|
||||
} else if (this.routerVal.trade_sn) {
|
||||
this.sn = this.routerVal.trade_sn;
|
||||
this.orderType = "TRADE";
|
||||
} else {
|
||||
this.sn = this.routerVal.order_sn;
|
||||
this.orderType = "ORDER";
|
||||
}
|
||||
parms.sn = this.sn;
|
||||
parms.orderType = this.orderType;
|
||||
parms.clientType = this.paymentType;
|
||||
|
||||
API_Trade.getCashierData(parms).then((res) => {
|
||||
this.cashierParams = res.data.result;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.payList = res.data.result.support.filter((item) => {
|
||||
return item != "ALIPAY";
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
this.payList = res.data.result.support;
|
||||
// #endif
|
||||
this.walletValue = res.data.result.walletValue;
|
||||
this.autoCancel =
|
||||
(res.data.result.autoCancel - new Date().getTime()) / 1000;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
awaitPay(payment){
|
||||
|
||||
this.$u.debounce(this.pay(payment), 3000)
|
||||
|
||||
},
|
||||
|
||||
//订单支付
|
||||
async pay(payment) {
|
||||
// 支付编号
|
||||
const sn = this.sn;
|
||||
// 交易类型【交易号|订单号】
|
||||
const orderType = this.orderType;
|
||||
|
||||
const clientType = this.paymentType;
|
||||
let params = {
|
||||
sn,
|
||||
orderType,
|
||||
clientType,
|
||||
};
|
||||
|
||||
//支付方式 WECHAT/ALIPAY
|
||||
const paymentMethod = payment;
|
||||
// 客户端类型 APP/NATIVE/JSAPI/H5
|
||||
const paymentClient = this.paymentClient;
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
//APP pay
|
||||
// 初始化支付签名
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(signXml) => {
|
||||
|
||||
//如果支付异常
|
||||
if (!signXml.data.success) {
|
||||
uni.showModal({
|
||||
content: signXml.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
let payForm = signXml.data.result;
|
||||
|
||||
console.log(payForm)
|
||||
let paymentType = paymentMethod === "WECHAT" ? "wxpay" : "alipay";
|
||||
uni.requestPayment({
|
||||
provider: paymentType,
|
||||
orderInfo: payForm,
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/payment/success?paymentType=" +
|
||||
paymentType +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price,
|
||||
});
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e);
|
||||
this.exception = e;
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
//APP pay
|
||||
// #endif
|
||||
|
||||
//#ifdef H5
|
||||
//H5 pay
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(res) => {
|
||||
let response = res.data;
|
||||
//如果支付异常
|
||||
if (!response.success) {
|
||||
|
||||
uni.showModal({
|
||||
content: response.message,
|
||||
showCancel: false,
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if (paymentMethod === "ALIPAY") {
|
||||
document.write(response);
|
||||
} else if (paymentMethod === "WECHAT") {
|
||||
if (this.isWeiXin()) {
|
||||
//微信公众号支付
|
||||
WeixinJSBridge.invoke(
|
||||
"getBrandWCPayRequest",
|
||||
response.result,
|
||||
function(res) {
|
||||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/success?paymentMethod=" +
|
||||
paymentMethod +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price,
|
||||
});
|
||||
} else {
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
window.location.href = JSON.parse(response.result).h5_url;
|
||||
}
|
||||
} else if (paymentMethod === "WALLET") {
|
||||
uni.showToast({
|
||||
title: response.message,
|
||||
icon: "none",
|
||||
});
|
||||
if (response.success) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/success?paymentMethod=" +
|
||||
paymentMethod +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
//H5pay
|
||||
// #endif
|
||||
|
||||
//#ifdef MP-WEIXIN
|
||||
//微信小程序
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(res) => {
|
||||
let response = res.data.result;
|
||||
//如果支付异常
|
||||
if (!res.data.success) {
|
||||
uni.showModal({
|
||||
content: res.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (paymentMethod === "WECHAT") {
|
||||
uni.requestPayment({
|
||||
provider: "wxpay",
|
||||
appid: response.appid,
|
||||
timeStamp: response.timeStamp,
|
||||
nonceStr: response.nonceStr,
|
||||
package: response.package,
|
||||
signType: response.signType,
|
||||
paySign: response.paySign,
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/success?paymentMethod=" +
|
||||
paymentType +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price,
|
||||
});
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e);
|
||||
this.exception = e;
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/success?paymentMethod=" +
|
||||
paymentMethod +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
// #endif
|
||||
},
|
||||
isWeiXin() {
|
||||
var ua = window.navigator.userAgent.toLowerCase();
|
||||
if (ua.match(/MicroMessenger/i) == "micromessenger") {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.method_icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.method_name {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .u-row {
|
||||
width: 100% !important;
|
||||
display: flex;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.method_name,
|
||||
.col1 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.col1 {
|
||||
text-align: center;
|
||||
flex: 99;
|
||||
}
|
||||
|
||||
.col3 {
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.payItem {
|
||||
padding: 13px 25rpx;
|
||||
border-top: 1px solid #f9f9f9;
|
||||
|
||||
line-height: 100rpx;
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ptips {
|
||||
font-size: 32rpx;
|
||||
margin: 20rpx 0;
|
||||
color: #333;
|
||||
|
||||
>span {
|
||||
font-size: 40rpx;
|
||||
color: #df5a52;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 392rpx !important;
|
||||
height: 296rpx !important;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.block-4 {
|
||||
background: #fff;
|
||||
color: $u-tips-color;
|
||||
|
||||
>p {
|
||||
padding: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
background: #fff;
|
||||
padding: 40rpx 0;
|
||||
// justify-content: center; //这个是X轴居中
|
||||
// align-items: center; //这个是 Y轴居中
|
||||
}
|
||||
|
||||
.block {
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.block-1 {
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
</style>
|
||||
411
pages/cart/payment/popup/goods.vue
Normal file
411
pages/cart/payment/popup/goods.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode" :mask-close-able="isClose" :mask="isMask" :border-radius="setup.radius" @close="closeMask()">
|
||||
<!-- 商品 -->
|
||||
<view class="goods-box bottom">
|
||||
<view class="goods-header">
|
||||
<view class="goods-img">
|
||||
<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx" :src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
|
||||
</view>
|
||||
<view class="goods-skus">
|
||||
|
||||
<!-- 有活动商品价格 -->
|
||||
<view class="goods-price " v-if="goodsDetail.promotionPrice">
|
||||
<span>
|
||||
￥
|
||||
<span class="goods-price-promotionShow goods-price-bigshow" v-if="goodsDetail.promotionPrice">{{ Fixed(goodsDetail.promotionPrice)[0] }}</span>
|
||||
.{{ Fixed(goodsDetail.promotionPrice)[1] }}
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="promotion-box">
|
||||
￥
|
||||
<span class="goods-price-bigshow">{{
|
||||
Fixed(goodsDetail.price)[0]
|
||||
}}</span>
|
||||
.{{ Fixed(goodsDetail.price)[1] }}
|
||||
<span></span>
|
||||
</div>
|
||||
</view>
|
||||
<!-- 正常商品的价格 -->
|
||||
<view class="goods-price" v-else>
|
||||
￥
|
||||
<span class="goods-price-bigshow">{{
|
||||
Fixed(goodsDetail.price)[0]
|
||||
}}</span>
|
||||
.{{ Fixed(goodsDetail.price)[1] }}
|
||||
<span></span>
|
||||
</view>
|
||||
<view class="goods-check-skus">
|
||||
已选
|
||||
<span class="goods-check-skus-name">
|
||||
{{ selectName }}
|
||||
<span>，{{ num }}个</span>
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品信息 -->
|
||||
<view class="goods-skus-box">
|
||||
<!-- 规格 -->
|
||||
<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
|
||||
<view class="skus-view-list">
|
||||
<view class="view-class-title">{{ spec.name }}</view>
|
||||
<view :class="{ active: spec_val.id == currentSelceted[specIndex] }" class="skus-view-item" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
|
||||
@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 数量 -->
|
||||
<view class="goods-skus-number">
|
||||
<view class="view-class-title">数量</view>
|
||||
<u-number-box :bg-color="numberBox.bgColor" :color="numberBox.color" :input-width="numberBox.width" :input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮 -->
|
||||
<view class="btns">
|
||||
<view class="box-btn card" v-if="buyType !='PINTUAN'" @click="addToCartOrBuy('cart')">加入购物车</view>
|
||||
<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_trade from "@/api/trade.js";
|
||||
import setup from "./popup";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup,
|
||||
num: 1,
|
||||
// 步进器的大小尺寸单位是 rpx
|
||||
numberBox: {
|
||||
width: "50",
|
||||
height: "50",
|
||||
size: "22",
|
||||
color: "#333",
|
||||
bgColor: "#fff",
|
||||
},
|
||||
selectName: "", //选中商品的昵称
|
||||
selectSkuList: "", //选中商铺sku,
|
||||
selectedSpecImg: "", //选中的图片路径
|
||||
buyType: "", //用于存储促销，拼团等活动类型
|
||||
parentOrder: "", //父级拼团活动的数据 - 如果是团员则有数据
|
||||
formatList: [],
|
||||
currentSelceted: [],
|
||||
skuList: "",
|
||||
isMask:false, //是否显示遮罩层
|
||||
isClose:false, //是否可以点击遮罩关闭
|
||||
};
|
||||
},
|
||||
props: [
|
||||
|
||||
"goodsDetail",
|
||||
"buyMask",
|
||||
"selectedSku",
|
||||
"goodsSpec",
|
||||
"addr",
|
||||
],
|
||||
watch: {
|
||||
buyType: {
|
||||
handler(val) {
|
||||
this.buyType = val;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
selectSkuList: {
|
||||
handler(val, oldval) {
|
||||
this.$emit("changed", val);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 格式化金钱 1999 --> [1999,00]
|
||||
Fixed(val) {
|
||||
if (typeof val == "undefined") {
|
||||
return val;
|
||||
}
|
||||
return val.toFixed(2).split(".");
|
||||
},
|
||||
|
||||
closeMask() {
|
||||
this.$emit("closeBuy", false);
|
||||
},
|
||||
|
||||
/**点击规格 */
|
||||
handleClickSpec(val, index, specValue) {
|
||||
this.$set(this.currentSelceted, index, specValue.id);
|
||||
|
||||
let selectedSkuId = this.goodsSpec.find((i) => {
|
||||
let matched = true;
|
||||
let specValues = i.specValues.filter((j) => j.specName !== "images");
|
||||
|
||||
for (let n = 0; n < specValues.length; n++) {
|
||||
if (specValues[n].specValueId !== this.currentSelceted[n]) {
|
||||
matched = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (matched) {
|
||||
return i;
|
||||
}
|
||||
});
|
||||
|
||||
this.selectSkuList = {
|
||||
spec: {
|
||||
specName: val.name,
|
||||
specValue: specValue.value,
|
||||
},
|
||||
data: this.goodsDetail,
|
||||
};
|
||||
this.selectName = specValue.value;
|
||||
|
||||
this.$emit("handleClickSku", selectedSkuId.skuId,this.goodsDetail.id);
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加到购物车或购买
|
||||
*/
|
||||
addToCartOrBuy(val) {
|
||||
if (!this.selectSkuList) {
|
||||
uni.showToast({
|
||||
title: "请选择规格商品",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
skuId: this.goodsDetail.id,
|
||||
num: this.num,
|
||||
};
|
||||
|
||||
if (val == "cart") {
|
||||
API_trade.addToCart(data).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
uni.showToast({
|
||||
title: "商品已添加到购物车",
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
this.$emit("queryCart");
|
||||
this.closeMask();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 判断是否拼团商品
|
||||
if (this.buyType) {
|
||||
data.cartType = "PINTUAN";
|
||||
} else {
|
||||
data.cartType = "BUY_NOW";
|
||||
}
|
||||
|
||||
|
||||
|
||||
API_trade.addToCart(data).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/fillorder?way=${data.cartType}&addr=${
|
||||
this.addr.id || ''
|
||||
}&parentOrder=${encodeURIComponent(
|
||||
JSON.stringify(this.parentOrder)
|
||||
)}`,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
formatSku(list) {
|
||||
// 格式化数据
|
||||
|
||||
let arr = [{}];
|
||||
list.forEach((item, index) => {
|
||||
item.specValues.forEach((spec, specIndex) => {
|
||||
let id = spec.specNameId;
|
||||
let name = spec.specName;
|
||||
let values = {
|
||||
id: spec.specValueId,
|
||||
value: spec.specValue,
|
||||
quantity: item.quantity,
|
||||
};
|
||||
if (name === "images") {
|
||||
return;
|
||||
}
|
||||
|
||||
arr.forEach((arrItem, arrIndex) => {
|
||||
if (
|
||||
arrItem.name == name &&
|
||||
arrItem.values &&
|
||||
!arrItem.values.find((i) => i.id === values.id)
|
||||
) {
|
||||
arrItem.values.push(values);
|
||||
}
|
||||
|
||||
let keys = arr.map((key) => {
|
||||
return key.name;
|
||||
});
|
||||
if (!keys.includes(name)) {
|
||||
arr.push({
|
||||
id: id,
|
||||
name: name,
|
||||
values: [values],
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
arr.shift();
|
||||
this.formatList = arr;
|
||||
|
||||
list.forEach((item) => {
|
||||
if (item.skuId === this.goodsDetail.id) {
|
||||
item.specValues
|
||||
.filter((i) => i.specName !== "images")
|
||||
.forEach((value, _index) => {
|
||||
this.currentSelceted[_index] = value.specValueId;
|
||||
|
||||
this.selectName = value.specValue;
|
||||
|
||||
this.selectSkuList = {
|
||||
spec: value,
|
||||
data: this.goodsDetail,
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.skuList = list;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.formatSku(this.goodsSpec);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./popup.scss";
|
||||
|
||||
.buy {
|
||||
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
|
||||
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
|
||||
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
|
||||
}
|
||||
|
||||
/deep/.u-icon-plus,
|
||||
.u-icon-minus,
|
||||
.u-icon-disabled {
|
||||
height: 30rpx !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.goods-skus-number {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/deep/ .uni-scroll-view {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: $jd-light-color !important;
|
||||
border: 2rpx solid $jd-color;
|
||||
font-weight: bold;
|
||||
color: $jd-color !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-skus-box {
|
||||
overflow-y: auto;
|
||||
height: 610rpx;
|
||||
// #ifdef MP-WEIXIN
|
||||
height: 570rpx;
|
||||
// #endif
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.goods-skus-view {
|
||||
overflow: hidden;
|
||||
|
||||
.skus-view-list {
|
||||
> .skus-view-item {
|
||||
flex: 1;
|
||||
padding: 0 36rpx;
|
||||
|
||||
overflow: hidden;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-left: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 22rpx;
|
||||
color: #262626;
|
||||
background: #f2f2f2;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-header {
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
padding: 50rpx 36rpx 0 36rpx;
|
||||
}
|
||||
|
||||
.goods-skus {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
color: $jd-color;
|
||||
line-height: 80rpx;
|
||||
display: flex;
|
||||
}
|
||||
.promotion-box {
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
margin-left: 10rpx;
|
||||
/deep/ span {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.promotion {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.goods-price-promotionShow {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
.goods-check-skus {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
> .goods-check-skus-name {
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
> span {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
8
pages/cart/payment/popup/popup.js
Normal file
8
pages/cart/payment/popup/popup.js
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
|
||||
export default {
|
||||
height:"1000rpx", //弹出层高度
|
||||
mode:"bottom", //弹出层位置
|
||||
radius:"32", //圆角 rpx,
|
||||
close:false //能否点击遮罩退出
|
||||
}
|
||||
37
pages/cart/payment/popup/popup.scss
Normal file
37
pages/cart/payment/popup/popup.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
.view-class-title {
|
||||
font-size: 26rpx;
|
||||
color: #262626;
|
||||
|
||||
font-weight: 700;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.confirmBtn {
|
||||
width: 90%;
|
||||
}
|
||||
.confirmBtn,
|
||||
.box-btn {
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
|
||||
background: $jd-color;
|
||||
color: #fff;
|
||||
border-radius: 200px;
|
||||
text-align: center;
|
||||
margin: 5rpx auto;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
.goods-price-bigshow {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box-btn {
|
||||
flex: 1;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
319
pages/cart/payment/shareOrderGoods.vue
Normal file
319
pages/cart/payment/shareOrderGoods.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<view class="wrapper">
|
||||
<div class='goods' v-if="selectedGoods">
|
||||
<image class="goods-image" :src="selectedGoods.thumbnail" alt="">
|
||||
<p class="goodsName">{{selectedGoods.goodsName}}</p>
|
||||
<div class="goodsPrice">{{(selectedGoods.promotionPrice || selectedGoods.price ) | unitPrice('￥')}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tips">
|
||||
|
||||
<span v-if="master.toBeGroupedNum">
|
||||
还差<span class="num">{{master.toBeGroupedNum || 0}}</span>人，赶快邀请好友拼单吧
|
||||
</span>
|
||||
<span v-if="isBuy &&!master.toBeGroupedNum >0">
|
||||
已成功拼团
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="isMaster && !isOver">
|
||||
<div class="share-user" v-if="master.toBeGroupedNum" @click="share()">
|
||||
邀请好友拼团
|
||||
</div>
|
||||
<div class="home" @click="handleClickHome()">
|
||||
去首页逛逛
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isMaster && !isOver && !isBuy">
|
||||
<div class="share-user" @click="toBuy">
|
||||
参与拼团
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isMaster && !isOver && isBuy">
|
||||
<div class="share-user disabled">
|
||||
已购买该商品
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isOver">
|
||||
<!-- <div class="share-user disabled">
|
||||
拼团已结束
|
||||
</div> -->
|
||||
<div class="home" @click="handleClickHome()">
|
||||
去首页逛逛
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 倒计时 -->
|
||||
<div class="count-down" v-if="!isOver">
|
||||
<u-count-down bg-color="#ededed" :hide-zero-day="true" @end="isOver" :timestamp="timeStamp"></u-count-down>
|
||||
</div>
|
||||
|
||||
<div class="user-list" v-if="data.pintuanMemberVOS">
|
||||
<div class="user-item" v-for="(item,index) in data.pintuanMemberVOS" :key="index">
|
||||
<span class="master" v-if="item.orderSn == ''">团长</span>
|
||||
<image class="img" :src="item.face" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<popupGoods :addr="addr" ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" v-if="goodsDetail.id " @handleClickSku="getGoodsDetail" />
|
||||
<shares @close="closeShare" :link="'/pages/cart/payment/shareOrderGoods?sn='+this.routers.sn+'&sku='+this.routers.sku+'&goodsId='+this.routers.goodsId" type="pintuan"
|
||||
:thumbnail="data.promotionGoods.thumbnail" :goodsName="data.promotionGoods.goodsName" v-if="shareFlage " />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGoods } from "@/api/goods.js";
|
||||
import { getPinTuanShare } from "@/api/order";
|
||||
import shares from "@/components/m-share/index";
|
||||
import storage from "@/utils/storage.js";
|
||||
import popupGoods from "./popup/goods"; //购物车商品的模块
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addr: {
|
||||
id: "",
|
||||
},
|
||||
maskFlag: false, //商品弹框
|
||||
timeStamp: 0,
|
||||
shareFlage: false,
|
||||
data: "",
|
||||
isMaster: true,
|
||||
selectedGoods: "", //选择的商品规格昵称
|
||||
routers: "", //传参数据
|
||||
goodsDetail: "", //商品详情
|
||||
goodsSpec: "",
|
||||
master: "", // 团长
|
||||
PromotionList: "", //优惠集合
|
||||
isGroup: false, //是否拼团
|
||||
isOver: false, //是否结束活动
|
||||
isBuy: false, //当前用户是是否购买
|
||||
};
|
||||
},
|
||||
components: {
|
||||
shares,
|
||||
popupGoods,
|
||||
},
|
||||
watch: {
|
||||
isGroup(val) {
|
||||
if (val) {
|
||||
let timer = setInterval(() => {
|
||||
this.$refs.popupGoods.buyType = "PINTUAN";
|
||||
clearInterval(timer);
|
||||
}, 100);
|
||||
} else {
|
||||
this.$refs.popupGoods.buyType = "";
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.routers = options;
|
||||
},
|
||||
mounted() {
|
||||
this.init(this.routers.sn, this.routers.sku);
|
||||
},
|
||||
methods: {
|
||||
closeShare() {
|
||||
this.shareFlage = false;
|
||||
},
|
||||
// 这里的话得先跳到商品详情才能购买商品
|
||||
toBuy() {
|
||||
this.maskFlag = true;
|
||||
this.$refs.popupGoods.parentOrder = {
|
||||
...this.master,
|
||||
orderSn: this.routers.sn,
|
||||
};
|
||||
|
||||
console.log(this.$refs.popupGoods.parentOrder);
|
||||
|
||||
this.$refs.popupGoods.isMask = true;
|
||||
this.$refs.popupGoods.isClose = true;
|
||||
this.$refs.popupGoods.buyType = "PINTUAN";
|
||||
},
|
||||
// 分享
|
||||
share() {
|
||||
this.shareFlage = true;
|
||||
},
|
||||
closePopupBuy(val) {
|
||||
this.maskFlag = false;
|
||||
},
|
||||
// 实例化本页面
|
||||
async init(sn, sku) {
|
||||
let res = await getPinTuanShare(sn, sku);
|
||||
if (res.data.success) {
|
||||
this.data = res.data.result;
|
||||
this.selectedGoods = res.data.result.promotionGoods;
|
||||
let endTime = Date.parse(
|
||||
res.data.result.promotionGoods.endTime.replace(/-/g, "/")
|
||||
);
|
||||
// 获取当前剩余的拼团商品时间
|
||||
let timeStamp = Date.parse(new Date(endTime)) / 1000;
|
||||
|
||||
// 获取当前时间时间戳
|
||||
let dateTime = Date.parse(new Date()) / 1000;
|
||||
|
||||
this.timeStamp = parseInt(timeStamp - dateTime);
|
||||
|
||||
this.timeStamp <= 0 ? (this.isOver = true) : (this.isOver = false);
|
||||
|
||||
// 获取剩余拼团人数
|
||||
this.master =
|
||||
res.data.result.pintuanMemberVOS.length != 0 &&
|
||||
res.data.result.pintuanMemberVOS.filter((item) => {
|
||||
return item.orderSn == "";
|
||||
})[0];
|
||||
|
||||
// 获取当前是否是拼团本人
|
||||
if (
|
||||
storage.getUserInfo(this.routers.sku, this.routers.goodsId).id ==
|
||||
this.master.memberId
|
||||
) {
|
||||
this.isMaster = true;
|
||||
} else {
|
||||
this.isMaster = false;
|
||||
// 获取商品详情
|
||||
this.getGoodsDetail(this.routers.sku, this.routers.goodsId);
|
||||
}
|
||||
|
||||
// 获取当前商品是否已经购买
|
||||
if (storage.getUserInfo().id) {
|
||||
console.log(storage.getUserInfo().id);
|
||||
let isBuy = res.data.result.pintuanMemberVOS.filter((item) => {
|
||||
return item.memberId == storage.getUserInfo().id;
|
||||
});
|
||||
isBuy.length != 0 ? (this.isBuy = true) : (this.isBuy = false);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取商品详情
|
||||
getGoodsDetail(id, goodsId) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
getGoods(id, goodsId).then((response) => {
|
||||
this.goodsDetail = response.data.result.data;
|
||||
this.selectedGoods = response.data.result.data;
|
||||
this.goodsSpec = response.data.result.specs;
|
||||
uni.hideLoading();
|
||||
this.PromotionList = response.data.result.promotionMap;
|
||||
|
||||
// 判断是否拼团活动 如果有则显示拼团活动信息
|
||||
this.PromotionList &&
|
||||
Object.keys(this.PromotionList).forEach((item) => {
|
||||
if (item.indexOf("PINTUAN") == 0) {
|
||||
this.isGroup = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
handleClickHome() {
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.over {
|
||||
margin: 10% 0;
|
||||
}
|
||||
.goods {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.goods-image {
|
||||
margin: 40rpx auto;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
.goodsName {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goodsPrice {
|
||||
margin-top: 10rpx;
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
.master {
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $light-color;
|
||||
padding: 0 8rpx;
|
||||
border-radius: 10rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.user-item {
|
||||
position: relative;
|
||||
margin: 20rpx;
|
||||
}
|
||||
.count-down {
|
||||
margin: 40rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
.img {
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid $light-color;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
.user-list {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.tips {
|
||||
margin-top: 10%;
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
.num {
|
||||
color: $main-color;
|
||||
font-size: 60rpx;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.home,
|
||||
.share-user {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin: 30rpx auto 0 auto;
|
||||
color: #fff;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
.share-user {
|
||||
background: $main-color;
|
||||
}
|
||||
.disabled {
|
||||
background: rgba($main-color, $alpha: 0.2);
|
||||
}
|
||||
.home {
|
||||
color: $main-color;
|
||||
border: 2rpx solid $main-color;
|
||||
}
|
||||
</style>
|
||||
304
pages/cart/payment/success.vue
Normal file
304
pages/cart/payment/success.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="pay-wrapper">
|
||||
<div class="pay-money">
|
||||
￥{{ payPrice | unitPrice }}
|
||||
</div>
|
||||
<div class="pay-btns">
|
||||
<div v-show="!from" @click="navigateTo('/pages/order/myOrder?status=0')">查看订单</div>
|
||||
<div @click="navigateTo('/pages/tabbar/home/index', 'switch')">回到首页</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-box">
|
||||
<div class="pay-tag-box">
|
||||
<h2>订单支付成功!</h2>
|
||||
|
||||
<div class="pay-item">
|
||||
<div>
|
||||
支付方式：
|
||||
</div>
|
||||
<div>{{paymentMethod | paymentTypeFilter}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<div class="subscribe flex">
|
||||
<div>订阅订单状态</div>
|
||||
<div>
|
||||
<u-switch size="50" :disabled="checked" :active-color="activeColor" @change="changeStatus" v-model="checked"></u-switch>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #endif -->
|
||||
</div>
|
||||
<div class="goods-recommend">--商品推荐--</div>
|
||||
<div class="goods-list">
|
||||
<div @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in goodsList" :key="item_index">
|
||||
<div class="goods-img">
|
||||
<u-image :src="item.thumbnail" mode="aspectFill" height="350rpx" width="100%">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="goods-desc">
|
||||
<div class="goods-title">
|
||||
{{ item.goodsName }}
|
||||
</div>
|
||||
<div class="goods-bottom">
|
||||
<div class="goods-price">￥{{ item.price | unitPrice }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getGoodsList } from "@/api/goods.js";
|
||||
import { getWeChatMpMessage } from "@/api/message.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
paymentMethod: "",
|
||||
from: "",
|
||||
payPrice: 0,
|
||||
goodsList: [],
|
||||
activeColor:this.$mainColor,
|
||||
params: {
|
||||
pageSize: 12,
|
||||
pageNumber: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
paymentTypeFilter(val) {
|
||||
switch (val) {
|
||||
case "WECHAT":
|
||||
return "微信";
|
||||
case "ALIPAY":
|
||||
return "支付宝";
|
||||
case "WALLET":
|
||||
return "余额支付";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.paymentMethod = options.paymentMethod || "";
|
||||
this.from = options.from || "";
|
||||
this.payPrice = parseInt(options.payPrice) || 0;
|
||||
//搜索商品
|
||||
this.initGoods();
|
||||
},
|
||||
methods: {
|
||||
changeStatus(val) {
|
||||
if (val) {
|
||||
this.sendMessage();
|
||||
}
|
||||
},
|
||||
async initGoods() {
|
||||
let goodsList = await getGoodsList(this.params);
|
||||
this.goodsList.push(...goodsList.data.result.content);
|
||||
},
|
||||
sendMessage() {
|
||||
//订阅消息
|
||||
//#ifdef MP-WEIXIN
|
||||
getWeChatMpMessage().then((res) => {
|
||||
var message = res.data.result;
|
||||
var templateid = message.map((item) => item.code);
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: templateid,
|
||||
success: (res) => {
|
||||
for(let key in res){
|
||||
if(res[key] == "reject"){
|
||||
this.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
fail: (res) => {
|
||||
uni.removeStorageSync("acceptSubscribeMessage");
|
||||
this.checked = false;
|
||||
},
|
||||
});
|
||||
});
|
||||
//#endif
|
||||
},
|
||||
|
||||
handleClick(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
},
|
||||
|
||||
navigateTo(url, type) {
|
||||
if (type === "switch") {
|
||||
uni.switchTab({
|
||||
url,
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.subscribe {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto 40rpx auto;
|
||||
padding: 0 20rpx 20rpx;
|
||||
width: 80%;
|
||||
|
||||
}
|
||||
.pay-btns {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
|
||||
> div {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-money {
|
||||
line-height: 1;
|
||||
font-size: 50rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.pay-item {
|
||||
font-weight: bold;
|
||||
margin: 32rpx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: rgba($color: $main-color, $alpha: 0.8);
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pay-tag-box {
|
||||
width: 80%;
|
||||
margin: 80rpx auto 40rpx auto;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba($color: $main-color, $alpha: 0.2);
|
||||
|
||||
> h2 {
|
||||
margin-top: 20rpx;
|
||||
font-size: 40rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-wrapper {
|
||||
background-image: linear-gradient(90deg, #fa123b, #ff6b35, #ff9f28, #ffcc03);
|
||||
height: 480rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
transform: translateY(-100rpx);
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-top-right-radius: 100rpx;
|
||||
}
|
||||
|
||||
/**商品代码 */
|
||||
$w_94: 94%;
|
||||
|
||||
.goods-recommend {
|
||||
background: #f7f7f7;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 0.4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
// width: 158px;
|
||||
width: $w_94;
|
||||
height: 350rpx;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
border-bottom-left-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx;
|
||||
width: $w_94;
|
||||
background: #fff;
|
||||
padding: 8rpx 0 8rpx 8rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
> .goods-title {
|
||||
font-size: 12px;
|
||||
height: 70rpx;
|
||||
display: -webkit-box;
|
||||
font-weight: 500;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> .goods-bottom {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
|
||||
> .goods-price {
|
||||
line-height: 2;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-icon {
|
||||
right: 10rpx;
|
||||
top: 10rpx;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user