Skip to content

P
pica-professional-exam
提交 bf9f22fd 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

优惠券选中逻辑 

还有价格计算及商品详情接口没有使用新的接口
上级 4f95358e
显示空白字符变更
内嵌 并排
正在显示 包含 381 行增加 和 255 行删除
src/views/goods-detail.vue
浏览文件 @ bf9f22fd
...@@ -3,22 +3,20 @@ ...@@ -3,22 +3,20 @@
<!-- 轮播 --> <!-- 轮播 -->
<div class="swiper-box"> <div class="swiper-box">
<van-swipe :show-indicators="false" @change="onSwiperChange"> <van-swipe :show-indicators="false" @change="onSwiperChange">
<van-swipe-item <van-swipe-item v-for="(item, index) in swiperList" :key="index">
v-for="(item, index) in swiperList" <img class="img" :src="item.goodsImgUrl" alt />
:key="index">
<img class="img" :src="item.goodsImgUrl" alt="" />
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
<div class="indicator"> <div class="indicator">{{ swiperCurtIndex + 1 }}/{{ swiperList.length }}</div>
{{ swiperCurtIndex + 1 }}/{{ swiperList.length }}
</div>
</div> </div>
<!-- 商品信息 --> <!-- 商品信息 -->
<div class="info-box border-line"> <div class="info-box border-line">
<p class="title">{{ goods.goodsName }}</p> <p class="title">{{ goods.goodsName }}</p>
<div class="price"> <div class="price">
<div class="money"> <div class="money">
<span class="yuan">￥{{ goods.salePrice.yuan }}</span><span class="fen">.{{ goods.salePrice.fen }}</span><span v-if="goods.hasDiscount" class="del">原价: ¥{{ goods.costPriceText }}</span> <span class="yuan">￥{{ goods.salePrice.yuan }}</span>
<span class="fen">.{{ goods.salePrice.fen }}</span>
<span v-if="goods.hasDiscount" class="del">原价: ¥{{ goods.costPriceText }}</span>
</div> </div>
<div class="bought">{{ goods.saledNum }}购买</div> <div class="bought">{{ goods.saledNum }}购买</div>
</div> </div>
...@@ -35,10 +33,8 @@ ...@@ -35,10 +33,8 @@
</div> </div>
<div class="flex buy-way"> <div class="flex buy-way">
<div class="name "> <div class="name">优惠券</div>
优惠券 <div @click="showCouponPopup" class="coupon-select coupon-pc">{{getCPText()}}</div>
</div>
<div @click="showCouponPopup" class="coupon-select coupon-pc">-¥{{yuan(currentCoupon.discountAmount)}}</div>
</div> </div>
<div class="flex buy-way"> <div class="flex buy-way">
...@@ -56,9 +52,8 @@ ...@@ -56,9 +52,8 @@
:class="{'tab-active': curtTabIdx === index}" :class="{'tab-active': curtTabIdx === index}"
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
:key="index" :key="index"
@click="tabToggle(index)"> @click="tabToggle(index)"
{{ tab.name }} >{{ tab.name }}</div>
</div>
<div class="tab-line" :style="{left: `${tabLeft}px`}"></div> <div class="tab-line" :style="{left: `${tabLeft}px`}"></div>
</div> </div>
<!-- 详情 --> <!-- 详情 -->
...@@ -66,46 +61,58 @@ ...@@ -66,46 +61,58 @@
<!-- 底部购买 --> <!-- 底部购买 -->
<div class="btn-box"> <div class="btn-box">
<div class="money"> <div class="money">
<p>合计：<span class="yuan">￥{{ totalPrice.yuan }}</span><span class="fen">.{{ totalPrice.fen }}</span><span v-if="goods.hasDiscount" class="del">原价: ¥{{ totalPrice.costPriceText }}</span></p> <p>
合计：
<span class="yuan">￥{{ totalPrice.yuan }}</span>
<span class="fen">.{{ totalPrice.fen }}</span>
<span v-if="goods.hasDiscount" class="del">原价: ¥{{ totalPrice.costPriceText }}</span>
</p>
<!-- <p v-if="totalPrice.savePrice" class="coupon">已使用优惠券，为您再优惠{{ totalPrice.savePrice }}元</p> --> <!-- <p v-if="totalPrice.savePrice" class="coupon">已使用优惠券，为您再优惠{{ totalPrice.savePrice }}元</p> -->
</div> </div>
<div <div
class="btn" class="btn"
:class="[goods.isSale === 2 ? 'cannot-buy' : 'can-but']" :class="[goods.isSale === 2 ? 'cannot-buy' : 'can-but']"
@click="createOrder"> @click="createOrder"
{{ goods.isSale === 2 ? '商品已下架' : '确认支付' }} >{{ goods.isSale === 2 ? '商品已下架' : '确认支付' }}</div>
</div>
</div> </div>
<Loading v-show="showLoading" /> <Loading v-show="showLoading" />
<!-- 优惠券弹框 --> <!-- 优惠券弹框 -->
<CouponSelectList v-if="isShowCoupon" <CouponSelectList
v-if="isShowCoupon"
:showSelectCoupon="isShowCoupon" :showSelectCoupon="isShowCoupon"
@cancle="closeCouponPopup" @cancle="closeCouponPopup"
@confirm="setCurrentPopup"> @confirm="setCurrentPopup"
</CouponSelectList> ></CouponSelectList>
<CourseDialog <CourseDialog
content="微信授权" content="微信授权"
subContent='<p style="font-size: 16px; font-weight: bold; text-align: center;">云鹊医申请以下权限：</p><p style="font-size: 14px; color: #999; text-align: center; padding-bottom: 10px;">获得你的公开信息（头像，昵称等）</p>' subContent="<p style='font-size: 16px; font-weight: bold; text-align: center;'>云鹊医申请以下权限：</p><p style='font-size: 14px; color: #999; text-align: center; padding-bottom: 10px;'>获得你的公开信息（头像，昵称等）</p>"
cancleBtnText="取消" cancleBtnText="取消"
confirmBtnText="允许" confirmBtnText="允许"
needSubContent needSubContent
:isShowDialog="isShowDialog" :isShowDialog="isShowDialog"
@handlerAction="handlerAction" @handlerAction="handlerAction"
></CourseDialog> ></CourseDialog>
</div> </div>
</template> </template>
<script> <script>
import { Swipe, SwipeItem } from 'vant'; import { Swipe, SwipeItem } from "vant";
import Loading from "@/components/common/common-loading"; import Loading from "@/components/common/common-loading";
import CourseDialog from "@/components/course/course-dialog"; import CourseDialog from "@/components/course/course-dialog";
import CouponSelectList from "@/components/coupon/coupon-select-list"; import CouponSelectList from "@/components/coupon/coupon-select-list";
import { wxConfig, chooseWXPay } from '@/utils/wxShare'; import { wxConfig, chooseWXPay } from "@/utils/wxShare";
import { getAPPID, getTradeType, getWebPageUrl, isWeiXin, wxOauth, debounce, getHactiveUrl } from '@/utils'; import {
getAPPID,
getTradeType,
getWebPageUrl,
isWeiXin,
wxOauth,
debounce,
getHactiveUrl
} from "@/utils";
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from "vuex";
import { convertToYuan } from "@/utils"; import { convertToYuan } from "@/utils";
const isWechat = isWeiXin(); const isWechat = isWeiXin();
...@@ -124,7 +131,7 @@ export default { ...@@ -124,7 +131,7 @@ export default {
token: "", token: "",
isWeb: window.__isWeb, isWeb: window.__isWeb,
goods: { goods: {
salePrice: {}, salePrice: {}
}, // 商品信息 }, // 商品信息
totalPrice: {}, // 底部价格 totalPrice: {}, // 底部价格
swiperList: [], // 轮播图 swiperList: [], // 轮播图
...@@ -136,11 +143,17 @@ export default { ...@@ -136,11 +143,17 @@ export default {
showLoading: false, showLoading: false,
isShowDialog: false, isShowDialog: false,
isShowCoupon: false, //是否展示激活弹框, isShowCoupon: false, //是否展示激活弹框,
courseUrl: "", courseUrl: ""
} };
}, },
computed: { computed: {
...mapGetters(["userInfo", "webUserInfo", "currentCoupon", "goodsInfo4Coupon", "selectCouponList"]), ...mapGetters([
"userInfo",
"webUserInfo",
"currentCoupon",
"goodsInfo4Coupon",
"selectCouponList"
]),
wxInfo() { wxInfo() {
return this.$store.state.user.wxInfo; return this.$store.state.user.wxInfo;
}, },
...@@ -150,14 +163,14 @@ export default { ...@@ -150,14 +163,14 @@ export default {
tabLeft() { tabLeft() {
const num = this.curtTabIdx + 0.25 + 15 / 115; const num = this.curtTabIdx + 0.25 + 15 / 115;
return this.tabW * num; return this.tabW * num;
}, }
}, },
watch: { watch: {
webUserInfo: { webUserInfo: {
handler(userInfo) { handler(userInfo) {
console.log('userInfo', userInfo); console.log("userInfo", userInfo);
if(userInfo.id) { if (userInfo.id) {
this.getGoodsInfo(); this.getGoodsInfo();
} }
}, },
...@@ -175,46 +188,50 @@ export default { ...@@ -175,46 +188,50 @@ export default {
created() { created() {
let _this = this; let _this = this;
console.log('in goods detail new', 111111111); console.log("in goods detail new", 111111111);
let href = location.href; let href = location.href;
this.shareUrl = href; this.shareUrl = href;
this.projectId = this.$route.query.projectId; this.projectId = this.$route.query.projectId;
this.goodsId = this.$route.query.goodsId || 74; this.goodsId = this.$route.query.goodsId || 74;
this.courseUrl = this.$route.query.courseUrl || ''; // this.courseUrl = this.$route.query.courseUrl || ""; //
if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) { if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
if(this.projectId) { if (this.projectId) {
this.shareUrl = getWebPageUrl(`profexam/#/goods-detail?goodsId=${this.goodsId}&projectId=${this.projectId}`); this.shareUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${this.goodsId}&projectId=${this.projectId}`
);
} else { } else {
this.shareUrl = getWebPageUrl(`profexam/#/goods-detail?goodsId=${this.goodsId}`); this.shareUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${this.goodsId}`
);
} }
location.replace(this.shareUrl); location.replace(this.shareUrl);
} }
localStorage.setItem('returnUrl', this.shareUrl); localStorage.setItem("returnUrl", this.shareUrl);
window.__getUserInfo4GD = function(param) { window.__getUserInfo4GD = function(param) {
// appVersion 安卓 3.2.2 iOS // appVersion 安卓 3.2.2 iOS
console.log("__getUserInfo4GD", param); console.log("__getUserInfo4GD", param);
_this.token = param.userToken; _this.token = param.userToken;
_this.setUserInfo(param); _this.setUserInfo(param);
_this.getCanUseCoupons(); _this.getGoodsInfo();
}; };
window.__refresh = function() { window.__refresh = function() {
_this.getUserInfo(); _this.getUserInfo();
}; };
window.__WXpay = function(params){ window.__WXpay = function(params) {
_this.paycallback(params) _this.paycallback(params);
}; };
}, },
mounted() { mounted() {
this.getTabW(); this.getTabW();
console.log('this.isWeb ... isWechat - 1', this.isWeb, isWechat); console.log("this.isWeb ... isWechat - 1", this.isWeb, isWechat);
if(this.isWeb) { if (this.isWeb) {
const { token, info } = this.$store.state.user; const { token, info } = this.$store.state.user;
if (token && !info.id) { if (token && !info.id) {
this.$store.dispatch('getUserInfo'); this.$store.dispatch("getUserInfo");
return; return;
} }
// 从登陆页面过来时 // 从登陆页面过来时
...@@ -227,42 +244,84 @@ export default { ...@@ -227,42 +244,84 @@ export default {
this.curtGoodsNum = this.goodsNum; this.curtGoodsNum = this.goodsNum;
this.countTotalPrice = debounce(this.getTotalPrice, 300); this.countTotalPrice = debounce(this.getTotalPrice, 300);
// 记录参数，授权登录返回时重新赋值，在main.js // 记录参数，授权登录返回时重新赋值，在main.js
sessionStorage.setItem('goodsDetailParams', JSON.stringify(this.$route.query)) sessionStorage.setItem(
"goodsDetailParams",
JSON.stringify(this.$route.query)
);
}, },
methods: { methods: {
...mapActions(["setUserInfo", "setCurrentCoupon", "setGoodsInfo4Coupon", "setSelectCouponList"]), ...mapActions([
"setUserInfo",
"setCurrentCoupon",
"setGoodsInfo4Coupon",
"setSelectCouponList"
]),
getCPText() {
// yuan(currentCoupon.discountAmount) -¥{{}}
// 如果没有选择优惠券
let text = "";
if (this.currentCoupon.couponId) {
text = "-¥" + this.yuan(this.currentCoupon.discountAmount);
} else {
if (this.goodsInfo4Coupon.count) {
text = this.goodsInfo4Coupon.count + "张优惠券";
} else {
text = "无优惠券";
}
}
return text;
},
// 查询我的可用优惠券 // 查询我的可用优惠券
getCanUseCoupons() { getCanUseCoupons(params) {
this.GET(`trade/coupon/app/goodsCoupons`, {}).then(res => { // TODO params有问题
const { goodsType, cardType } = params;
this.GET(`trade/coupon/app/goodsCoupons`, { goodsType, cardType }).then(
res => {
if (res.code == "000000") { if (res.code == "000000") {
this.handlerCouponList(res.data || []); this.handlerCouponList(res.data || [], params.price);
params.count = (res.data || []).length;
this.setGoodsInfo4Coupon(params);
} }
}) }
);
}, },
// 处理数据 // 处理数据
handlerCouponList(couponList) { handlerCouponList(couponList, goodsPrice) {
if(!couponList.length) return [] if (!couponList.length) return [];
let newList = [], obj = {}; let newList = [],
this.setCurrentCoupon(JSON.parse(JSON.stringify(couponList[0]))); obj = {},
couponList.forEach( item => { firstCanCoupon = null;
couponList.forEach(item => {
// TODO 要根据商品价格及券适用类型来计算 // TODO 要根据商品价格及券适用类型来计算
item.disabled = this.isCanSelect(); item.disabled = this.isCanSelect(item, goodsPrice);
// item.disabled = !(item.couponStatus == 0 || item.couponStatus == 1); // item.disabled = !(item.couponStatus == 0 || item.couponStatus == 1);
// 是否已经选择 // 是否已经选择
item.isChecked = false; item.isChecked = false;
console.log('firstCanCoupon, item.disabled', firstCanCoupon, item.disabled);
if (!firstCanCoupon && !item.disabled) {
console.log('!firstCanCoupon');
item.isChecked = true;
firstCanCoupon = item;
}
newList.push(item); newList.push(item);
}); });
couponList[0].isChecked = true; this.setCurrentCoupon(firstCanCoupon || {});
this.setSelectCouponList(newList); this.setSelectCouponList(newList);
return newList; return newList;
}, },
// 判断是否可用 // 判断是否可用
isCanSelect(){ isCanSelect(coupon, goodsPrice) {
return false; console.log(
"isCanSelect",
coupon.requiredTotalFee,
goodsPrice,
goodsPrice >= coupon.requiredTotalFee
);
return goodsPrice >= coupon.requiredTotalFee;
}, },
//获取用户信息 //获取用户信息
...@@ -275,13 +334,19 @@ export default { ...@@ -275,13 +334,19 @@ export default {
// 微信支付回调 // 微信支付回调
paycallback(params) { paycallback(params) {
// 0成功 -1错误 -2 用户取消 -3 没有安装微信 // 0成功 -1错误 -2 用户取消 -3 没有安装微信
let url = getHactiveUrl() + `/message_push/#/order?orderBack=1&id=${this.orderId}&courseUrl=${this.courseUrl}`; let url =
if(params.result == -3) { getHactiveUrl() +
this.$toast('您未安装微信，暂不能支付'); `/message_push/#/order?orderBack=1&id=${this.orderId}&courseUrl=${this.courseUrl}`;
} else if(params.result == -2) { if (params.result == -3) {
this.POST(`/trade/center/order/pay_cancelled`, {orderId: this.orderId}).then(res => { this.$toast("您未安装微信，暂不能支付");
} else if (params.result == -2) {
this.POST(`/trade/center/order/pay_cancelled`, {
orderId: this.orderId
})
.then(res => {
this.jumpToOrder(url); this.jumpToOrder(url);
}).catch((err) => {}) })
.catch(err => {});
} else { } else {
this.jumpToOrder(url); this.jumpToOrder(url);
} }
...@@ -296,26 +361,31 @@ export default { ...@@ -296,26 +361,31 @@ export default {
type: 4, type: 4,
seqNo: 1 seqNo: 1
} }
] ];
rocNative.dispatchEventByModuleCode({ rocNative.dispatchEventByModuleCode({
modeCode: "M300", modeCode: "M300",
jsonString: paramList jsonString: paramList
}); });
}, },
// 关闭优惠券弹框
closeCouponPopup() { closeCouponPopup() {
this.isShowCoupon = false; this.isShowCoupon = false;
}, },
// 显示优惠券弹框
showCouponPopup() { showCouponPopup() {
this.isShowCoupon = true; this.isShowCoupon = true;
}, },
// 设置当前选中的优惠券 // 设置当前选中的优惠券
setCurrentPopup(currentCoupon) { setCurrentPopup(currentCoupon) {
console.log('setCurrentPopup', currentCoupon); console.log("setCurrentPopup", currentCoupon);
this.setCurrentCoupon(currentCoupon); this.setCurrentCoupon(currentCoupon);
this.getCPText();
this.isShowCoupon = false; this.isShowCoupon = false;
// 要重新调用计算价格接口
// this.getTotalPrice(currentCoupon);
}, },
// tab切换 // tab切换
...@@ -325,51 +395,59 @@ export default { ...@@ -325,51 +395,59 @@ export default {
component_tag: `888#8880${index + 4}` component_tag: `888#8880${index + 4}`
}); });
}, },
// 获取商品信息
getGoodsInfo() { getGoodsInfo() {
this.GET(`trade/goods/goodInfo/${this.goodsId}`, {}).then(res => { this.GET(`trade/goods/goodInfo/${this.goodsId}`, {}).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
const goods = res.data; const goods = res.data;
const tabs = []; const tabs = [];
let price = goods.couponPrice || goods.preferentialPrice || goods.costPrice; let price =
this.setGoodsInfo4Coupon({ goods.couponPrice || goods.preferentialPrice || goods.costPrice;
price: price, this.goods = goods;
// 获取到商品后，再获取优惠券
this.getCanUseCoupons({
goodsType: goods.goodsType, goodsType: goods.goodsType,
cardType: goods.cardType, cardType: goods.cardType,
price: price,
count: 0
}); });
// 获取到商品后，再获取优惠券
this.getCanUseCoupons();
goods.salePrice = this.formatPrice(price); goods.salePrice = this.formatPrice(price);
goods.costPriceText = (goods.costPrice / 100).toFixed(2); goods.costPriceText = (goods.costPrice / 100).toFixed(2);
goods.hasDiscount = !!(goods.couponPrice || goods.preferentialPrice); goods.hasDiscount = !!(goods.couponPrice || goods.preferentialPrice);
let savePrice = 0; let savePrice = 0;
if (goods.couponPrice) { if (goods.couponPrice) {
if (goods.preferentialPrice) { if (goods.preferentialPrice) {
savePrice = ((goods.preferentialPrice - goods.couponPrice) / 100).toFixed(2) savePrice = (
(goods.preferentialPrice - goods.couponPrice) /
100
).toFixed(2);
} else { } else {
savePrice = ((goods.costPrice - goods.couponPrice) / 100).toFixed(2) savePrice = ((goods.costPrice - goods.couponPrice) / 100).toFixed(
2
);
} }
} }
// if (goods.couponDTO) { // if (goods.couponDTO) {
// goods.couponAmountText = (goods.couponDTO.discountAmount / 100).toFixed(2); // goods.couponAmountText = (goods.couponDTO.discountAmount / 100).toFixed(2);
// } // }
if (goods.goodsDescWhere) { if (goods.goodsDescWhere) {
tabs.push({ name: '使用范围', detail: goods.goodsDescWhere }) tabs.push({ name: "使用范围", detail: goods.goodsDescWhere });
} }
if (goods.goodsDescHow) { if (goods.goodsDescHow) {
tabs.push({ name: '如何使用', detail: goods.goodsDescHow }) tabs.push({ name: "如何使用", detail: goods.goodsDescHow });
} }
if (goods.goodsDescQaq) { if (goods.goodsDescQaq) {
tabs.push({ name: '常见问题', detail: goods.goodsDescQaq }) tabs.push({ name: "常见问题", detail: goods.goodsDescQaq });
} }
this.totalPrice = { this.totalPrice = {
...goods.salePrice, ...goods.salePrice,
preferentialPrice: goods.preferentialPrice, preferentialPrice: goods.preferentialPrice,
costPrice: goods.costPrice, costPrice: goods.costPrice,
costPriceText: goods.costPriceText, costPriceText: goods.costPriceText,
savePrice, savePrice
} };
this.goods = goods; this.swiperList = (res.data && res.data.imgList) || [];
this.swiperList = res.data && res.data.imgList || [];
this.tabs = tabs; this.tabs = tabs;
this.getTabW(); this.getTabW();
let sharePrice = goods.preferentialPrice || goods.costPrice; let sharePrice = goods.preferentialPrice || goods.costPrice;
...@@ -393,29 +471,66 @@ export default { ...@@ -393,29 +471,66 @@ export default {
} else { } else {
this.$toast(res.message); this.$toast(res.message);
} }
}) });
}, },
// 多件商品的价格 // 多件商品的价格
getTotalPrice() { // TODO，要多传优惠券id参数
getTotalPrice(coupon) {
const num = this.curtGoodsNum; const num = this.curtGoodsNum;
this.GET(`trade/goods/getPrice/${this.goodsId}/${num}`, {}).then(res => { this.GET(`trade/goods/getPrice/${this.goodsId}/${num}`, {}).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
const { couponPrice, preferentialPrice, costPrice, savePrice } = res.data; const {
couponPrice,
preferentialPrice,
costPrice,
savePrice
} = res.data;
let price = couponPrice || preferentialPrice || costPrice; let price = couponPrice || preferentialPrice || costPrice;
this.totalPrice = { this.totalPrice = {
...this.formatPrice(price), ...this.formatPrice(price),
preferentialPrice, preferentialPrice,
costPrice: costPrice, costPrice: costPrice,
costPriceText: (costPrice / 100).toFixed(2), costPriceText: (costPrice / 100).toFixed(2),
savePrice: savePrice ? (savePrice / 100).toFixed(2) : 0, savePrice: savePrice ? (savePrice / 100).toFixed(2) : 0
};
this.goodsInfo4Coupon.price = price;
this.setGoodsInfo4Coupon(this.goodsInfo4Coupon);
this.goodsNum = num;
} else if (res.code === "200006") {
this.$store.dispatch("logout");
} }
});
},
// 多件商品的价格
getTotalPriceOld() {
const num = this.curtGoodsNum;
this.GET(`trade/goods/getPrice/${this.goodsId}/${num}`, {}).then(res => {
if (res.code == "000000") {
const {
couponPrice,
preferentialPrice,
costPrice,
savePrice
} = res.data;
let price = couponPrice || preferentialPrice || costPrice;
this.totalPrice = {
...this.formatPrice(price),
preferentialPrice,
costPrice: costPrice,
costPriceText: (costPrice / 100).toFixed(2),
savePrice: savePrice ? (savePrice / 100).toFixed(2) : 0
};
this.goodsInfo4Coupon.price = price; this.goodsInfo4Coupon.price = price;
this.setGoodsInfo4Coupon(this.goodsInfo4Coupon);
this.goodsNum = num; this.goodsNum = num;
} else if (res.code === "200006") { } else if (res.code === "200006") {
this.$store.dispatch('logout') this.$store.dispatch("logout");
} }
}) });
}, },
// 价格转成元、分 // 价格转成元、分
formatPrice(price) { formatPrice(price) {
let yuan = (price / 100).toFixed(0); let yuan = (price / 100).toFixed(0);
...@@ -424,7 +539,7 @@ export default { ...@@ -424,7 +539,7 @@ export default {
return { return {
yuan, yuan,
fen fen
} };
}, },
// 获取切换标签宽度 // 获取切换标签宽度
getTabW() { getTabW() {
...@@ -432,9 +547,11 @@ export default { ...@@ -432,9 +547,11 @@ export default {
return; return;
} }
this.$nextTick(() => { this.$nextTick(() => {
const { width } = this.$el.querySelector('.tab-item').getBoundingClientRect(); const { width } = this.$el
.querySelector(".tab-item")
.getBoundingClientRect();
this.tabW = width; this.tabW = width;
}) });
}, },
// 轮播切换 // 轮播切换
onSwiperChange(index) { onSwiperChange(index) {
...@@ -445,33 +562,33 @@ export default { ...@@ -445,33 +562,33 @@ export default {
this.$sendBuriedData({ this.$sendBuriedData({
component_tag: `888#88801` component_tag: `888#88801`
}); });
this.commonCheckToken(() => { this.commonCheckToken(() => {});
});
let num = this.curtGoodsNum; let num = this.curtGoodsNum;
if (this.goods.limitPurchase && this.goods.limitPurchaseNum && num >= this.goods.limitPurchaseNum) { if (
this.$toast('已达最大限购数量') this.goods.limitPurchase &&
this.goods.limitPurchaseNum &&
num >= this.goods.limitPurchaseNum
) {
this.$toast("已达最大限购数量");
return; return;
} }
if (this.goods.goodsStocks && num >= this.goods.goodsStocks) { if (this.goods.goodsStocks && num >= this.goods.goodsStocks) {
this.$toast('库存不足') this.$toast("库存不足");
return; return;
} }
this.curtGoodsNum = num + 1; this.curtGoodsNum = num + 1;
this.countTotalPrice(); this.countTotalPrice();
}, },
// 数量减 // 数量减
onReduce() { onReduce() {
this.$sendBuriedData({ this.$sendBuriedData({
component_tag: `888#88802` component_tag: `888#88802`
}); });
this.commonCheckToken(() => { this.commonCheckToken(() => {});
});
let num = this.curtGoodsNum; let num = this.curtGoodsNum;
if (num <= 1) { if (num <= 1) {
this.$toast('最少购买一张哦') this.$toast("最少购买一张哦");
return; return;
} }
this.curtGoodsNum = num - 1; this.curtGoodsNum = num - 1;
...@@ -508,17 +625,19 @@ export default { ...@@ -508,17 +625,19 @@ export default {
if (!id || isSale !== 1) { if (!id || isSale !== 1) {
return; return;
} }
// TODO 使用新的优惠券id
const orderData = { const orderData = {
couponId: couponDTO ? couponDTO.couponId : 0, couponId: couponDTO ? couponDTO.couponId : 0,
goodsId: id, goodsId: id,
goodsQuantity: this.goodsNum, goodsQuantity: this.goodsNum,
orderSource: 3, orderSource: 3,
preferentialPrice: this.goods.preferentialPrice, preferentialPrice: this.goods.preferentialPrice,
price: this.goods.costPrice, price: this.goods.costPrice
} };
console.log('orderData...', orderData); console.log("orderData...", orderData);
this.showLoading = true; this.showLoading = true;
this.POST('trade/center/order/createV2', orderData).then(res => { this.POST("trade/center/order/createV2", orderData)
.then(res => {
if (res.code == "000000") { if (res.code == "000000") {
const orderId = res.data.orderId; const orderId = res.data.orderId;
// if (isWechat) { // if (isWechat) {
...@@ -528,19 +647,19 @@ export default { ...@@ -528,19 +647,19 @@ export default {
// } // }
// 在站外，则调用站外支付 // 在站外，则调用站外支付
console.log('this.isWeb ... isWechat - 2', this.isWeb, isWechat); console.log("this.isWeb ... isWechat - 2", this.isWeb, isWechat);
if(this.isWeb) { if (this.isWeb) {
console.log('in web...'); console.log("in web...");
if (isWechat) { if (isWechat) {
this.goWxPayInner(orderId); this.goWxPayInner(orderId);
} else { } else {
this.goWxPayOut(orderId); this.goWxPayOut(orderId);
} }
} else { } else {
console.log('not in web...'); console.log("not in web...");
rocNative.WXpay({ rocNative.WXpay({
'__funcName': '__WXpay', __funcName: "__WXpay",
'orderId': String(orderId) orderId: String(orderId)
}); });
} }
...@@ -551,10 +670,11 @@ export default { ...@@ -551,10 +670,11 @@ export default {
this.$toast(res.message); this.$toast(res.message);
this.showLoading = false; this.showLoading = false;
if (res.code === "200006") { if (res.code === "200006") {
this.$store.dispatch('logout') this.$store.dispatch("logout");
} }
} }
}).catch(() => { })
.catch(() => {
this.showLoading = false; this.showLoading = false;
}); });
}); });
...@@ -567,8 +687,9 @@ export default { ...@@ -567,8 +687,9 @@ export default {
payChannel: 1, payChannel: 1,
tradeType: getTradeType(), tradeType: getTradeType(),
userId: this.$store.state.user.info.id userId: this.$store.state.user.info.id
} };
this.POST('trade/center/jsapi_prepay', data).then(res => { this.POST("trade/center/jsapi_prepay", data)
.then(res => {
if (res.code == "000000" && res.data) { if (res.code == "000000" && res.data) {
// console.log('______prepay_____', res.data); // console.log('______prepay_____', res.data);
const that = this; const that = this;
...@@ -579,26 +700,27 @@ export default { ...@@ -579,26 +700,27 @@ export default {
success: function() { success: function() {
let query = { orderId }; let query = { orderId };
if (that.projectId) { if (that.projectId) {
query.projectId = that.projectId query.projectId = that.projectId;
} }
that.$router.push({ path: '/prezult', query }); that.$router.push({ path: "/prezult", query });
}, },
fail: function() { fail: function() {
that.$toast('支付失败，请重试~'); that.$toast("支付失败，请重试~");
}, },
cancel: function() { cancel: function() {
// that.$toast('支付取消~'); // that.$toast('支付取消~');
}, },
complete: function() {}, complete: function() {}
}; };
chooseWXPay(payData); chooseWXPay(payData);
} else { } else {
this.$toast(res.message); this.$toast(res.message);
} }
this.showLoading = false; this.showLoading = false;
}).catch(() => {
this.showLoading = false;
}) })
.catch(() => {
this.showLoading = false;
});
}, },
// 站外微信支付 // 站外微信支付
goWxPayOut(orderId) { goWxPayOut(orderId) {
...@@ -606,54 +728,59 @@ export default { ...@@ -606,54 +728,59 @@ export default {
// openId: getAPPID(), // openId: getAPPID(),
orderId, orderId,
payChannel: 1, payChannel: 1,
tradeType: getTradeType(), tradeType: getTradeType()
} };
this.POST('trade/center/mweb_prepay', data).then(res => { this.POST("trade/center/mweb_prepay", data)
.then(res => {
if (res.code == "000000") { if (res.code == "000000") {
if (res.data) { if (res.data) {
let redirectUrl = this.getRedirectUrl(orderId); let redirectUrl = this.getRedirectUrl(orderId);
let jumpLink = res.data + '&redirect_url=' + encodeURIComponent(redirectUrl); let jumpLink =
res.data + "&redirect_url=" + encodeURIComponent(redirectUrl);
window.location.href = jumpLink; window.location.href = jumpLink;
} }
} else { } else {
this.$toast(res.message || '暂时不能支付'); this.$toast(res.message || "暂时不能支付");
} }
this.showLoading = false; this.showLoading = false;
}).catch(() => {
this.showLoading = false;
}) })
.catch(() => {
this.showLoading = false;
});
}, },
getRedirectUrl(orderId) { getRedirectUrl(orderId) {
let path = `profexam/#/prezult?orderId=${orderId}`; let path = `profexam/#/prezult?orderId=${orderId}`;
if (this.projectId) { if (this.projectId) {
path += `&projectId=${this.projectId}` path += `&projectId=${this.projectId}`;
} }
return getWebPageUrl(path); return getWebPageUrl(path);
}, },
// 绑定项目和订单的关系(idType=1) // 绑定项目和订单的关系(idType=1)
createRelation(projectId, orderId) { createRelation(projectId, orderId) {
this.POST(`cme/projectCard/correlation/1/${projectId}/${orderId}`, {channel: 3}).then(res => { this.POST(`cme/projectCard/correlation/1/${projectId}/${orderId}`, {
channel: 3
}).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
// //
} else { } else {
this.$toast(res.message); this.$toast(res.message);
} }
}) });
}, },
// 显示元 // 显示元
yuan(fen) { yuan(fen) {
return convertToYuan(fen); return convertToYuan(fen);
}, }
}, }
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.goods-details-wrapper { .goods-details-wrapper {
.swiper-box{ .swiper-box {
position: relative; position: relative;
.indicator{ .indicator {
position: absolute; position: absolute;
right: 10px; right: 10px;
bottom: 10px; bottom: 10px;
...@@ -667,133 +794,133 @@ export default { ...@@ -667,133 +794,133 @@ export default {
border-radius: 11px; border-radius: 11px;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
.img{ .img {
display: block; display: block;
width: 100%; width: 100%;
} }
} }
.border-line{ .border-line {
padding: 20px 15px; padding: 20px 15px;
border-bottom: 6px solid #F8F9FA; border-bottom: 6px solid #f8f9fa;
} }
.info-box{ .info-box {
.title{ .title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
padding-bottom: 12px; padding-bottom: 12px;
} }
.price{ .price {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
font-size: 12px; font-size: 12px;
} }
.money{ .money {
flex: 1; flex: 1;
width: 100px; width: 100px;
} }
.yuan{ .yuan {
color: #FB5B52; color: #fb5b52;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.fen{ .fen {
color: #FB5B52; color: #fb5b52;
font-weight: bold; font-weight: bold;
} }
.del{ .del {
color: #979899; color: #979899;
text-decoration: line-through; text-decoration: line-through;
margin-left: 6px; margin-left: 6px;
} }
.bought{ .bought {
color: #979899; color: #979899;
} }
} }
.buy-box{ .buy-box {
font-size: 14px; font-size: 14px;
.flex{ .flex {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.name{ .name {
flex: 1; flex: 1;
width: 100px; width: 100px;
font-weight: bold; font-weight: bold;
} }
.buy-num{ .buy-num {
display: flex; display: flex;
} }
.reduce{ .reduce {
position: relative; position: relative;
width: 22px; width: 22px;
height: 22px; height: 22px;
background: url('~@/images/reduce.png') no-repeat center center; background: url("~@/images/reduce.png") no-repeat center center;
background-size: 20px auto; background-size: 20px auto;
} }
.num{ .num {
width: 30px; width: 30px;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
} }
.plus{ .plus {
position: relative; position: relative;
width: 22px; width: 22px;
height: 22px; height: 22px;
background: url('~@/images/plus.png') no-repeat center center; background: url("~@/images/plus.png") no-repeat center center;
background-size: 20px auto; background-size: 20px auto;
} }
.buy-way{ .buy-way {
margin-top: 25px; margin-top: 25px;
span{ span {
color: #979899; color: #979899;
font-size: 12px; font-size: 12px;
margin-left: 6px; margin-left: 6px;
} }
} }
.way{ .way {
line-height: 18px; line-height: 18px;
padding-left: 28px; padding-left: 28px;
background: url('~@/images/wxpay.png') no-repeat left center; background: url("~@/images/wxpay.png") no-repeat left center;
background-size: 18px auto; background-size: 18px auto;
} }
.coupon-select { .coupon-select {
// line-height: 12px; // line-height: 12px;
padding-right: 15px; padding-right: 15px;
background: url('~@/images/coupon/arrow-right.png') no-repeat right center; background: url("~@/images/coupon/arrow-right.png") no-repeat right center;
background-size: 12px auto; background-size: 12px auto;
} }
} }
.tab-box{ .tab-box {
display: flex; display: flex;
position: relative; position: relative;
height: 50px; height: 50px;
padding: 0 15px; padding: 0 15px;
background-color: #fff; background-color: #fff;
&::after{ &::after {
position: absolute; position: absolute;
content: ""; content: "";
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 200%; width: 200%;
height: 0; height: 0;
border-bottom: 1px solid #F0F1F2; border-bottom: 1px solid #f0f1f2;
transform: scale(0.5); transform: scale(0.5);
transform-origin: left center; transform-origin: left center;
} }
} }
.tab-item{ .tab-item {
color: #979899; color: #979899;
font-size: 15px; font-size: 15px;
width: 115px; width: 115px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
} }
.tab-active{ .tab-active {
color: #373839; color: #373839;
font-weight: bold; font-weight: bold;
} }
.tab-line{ .tab-line {
position: absolute; position: absolute;
left: 30px; left: 30px;
bottom: 3px; bottom: 3px;
...@@ -804,12 +931,12 @@ export default { ...@@ -804,12 +931,12 @@ export default {
transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0);
transition: left 0.3s; transition: left 0.3s;
} }
.detail-box{ .detail-box {
font-size: 14px; font-size: 14px;
text-align: justify; text-align: justify;
padding: 15px 15px 75px; padding: 15px 15px 75px;
} }
.btn-box{ .btn-box {
display: flex; display: flex;
align-items: center; align-items: center;
position: fixed; position: fixed;
...@@ -820,32 +947,32 @@ export default { ...@@ -820,32 +947,32 @@ export default {
padding: 10px 15px; padding: 10px 15px;
box-shadow: 0 -4px 4px rgba(240, 240, 240, 0.5); box-shadow: 0 -4px 4px rgba(240, 240, 240, 0.5);
background-color: #fff; background-color: #fff;
.money{ .money {
flex: 1; flex: 1;
width: 100px; width: 100px;
font-size: 14px; font-size: 14px;
} }
.yuan{ .yuan {
color: #FB5B52; color: #fb5b52;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.fen{ .fen {
font-size: 12px; font-size: 12px;
color: #FB5B52; color: #fb5b52;
font-weight: bold; font-weight: bold;
} }
.del{ .del {
color: #979899; color: #979899;
font-size: 12px; font-size: 12px;
text-decoration: line-through; text-decoration: line-through;
margin-left: 6px; margin-left: 6px;
} }
.coupon{ .coupon {
color: #979899; color: #979899;
font-size: 12px; font-size: 12px;
} }
.btn{ .btn {
width: 125px; width: 125px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
...@@ -855,17 +982,16 @@ export default { ...@@ -855,17 +982,16 @@ export default {
font-weight: bold; font-weight: bold;
border-radius: 20px; border-radius: 20px;
} }
.can-but{ .can-but {
background-image: linear-gradient(90deg, #FFA65F, #FF7A4B); background-image: linear-gradient(90deg, #ffa65f, #ff7a4b);
} }
.cannot-buy{ .cannot-buy {
background-color: #C7C8C9; background-color: #c7c8c9;
} }
} }
.coupon-pc { .coupon-pc {
font-weight: 400; font-weight: 400;
color: #FB5B52; color: #fb5b52;
} }
} }
</style> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或