123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- <template>
- <scroll-view scroll-y class="container bundle-detail-page">
- <div class=" bundle-detail page--loading" :class="{'page--finished': finished }">
- <b-card :options="options" type="detail" />
- <div class="detail-info">
- <div class="bundle-detail-desc">
- <div class="bundle-detail-title">
- <van-icon name="stop" class="detail-title-icon" /> 套餐描述:
- </div>
- <div class="detail-text">
- {{options.description}}
- </div>
- </div>
- <div class="bundle-detail-title">
- <van-icon name="stop" class="detail-title-icon" /> 套餐详情:
- </div>
- <div class="detail-content-imgs">
- <image :src="img" class="detail-img" v-for="(img, index) in imgList" :key="index" mode="widthFix" />
- </div>
- </div>
- <div class="submit-btn" v-if="options.showFlag === '1'&&options.stock>0" @click="sumbitOrder">
- 立即下单
- </div>
- <div class="submit-btn" style="background:#ccc" v-if="options.showFlag === '0'">
- 套餐已下线
- </div>
- <div class="submit-btn" style="background:#ccc" v-if="options.stock<=0">
- 套餐已售罄
- </div>
- </div>
- </scroll-view>
- </template>
- <script>
- import { bundleById } from '@/api/bundle';
- import BundleCard from '@/components/BundleCard';
- import { checkLogin } from '@/api/login';
- export default {
- name: 'bundleDetail',
- components: { 'b-card': BundleCard },
- data() {
- return {
- options: {},
- imgList: [],
- finished: false,
- timeout: null,
- loading: false
- };
- },
- methods: {
- sumbitOrder() {
- if(this.loading){return}
- const { id, couponId, customerCouponId } = this.$mp.query;
- if (this.options.stock<=0){
- wx.showToast({
- title: '活动套餐已售罄,下次早点来哦!',
- icon: 'none',
- duration: 2500
- });
- return
- }
- this.loading = true
- checkLogin().then(res => {
- if (res.status === '200') {
- wx.navigateTo({
- url: `/pages/placeOrder/main?id=${id}&couponId=${couponId}&customerCouponId=${customerCouponId}`
- });
- } else {
- wx.navigateTo({
- url: `/pages/login/main?lanuch=false&path=` + encodeURIComponent(`/pages/bundleDetail/main?id=${id}`)
- });
- }
- });
- }
- },
- onShow() {
- wx.showLoading({
- mask: true,
- title: '加载中'
- });
- this.loading = false
- const { id } = this.$mp.query;
- const _this = this;
- bundleById({ id }).then(res => {
- if (res.status === '200') {
- _this.options = res.data;
- if (res.data.detail) {
- _this.imgList = res.data.detail.split(',');
- }
- _this.finished = true;
- wx.hideLoading();
- if (res.data.showFlag === '0') {
- wx.showToast({
- title: '该套餐已经下线, 无法购买',
- icon: 'none',
- duration: 2500
- });
- }
- }
- this.timeout = setTimeout(() => {
- if (_this.finished === false) {
- _this.finished = true;
- }
- }, 2000);
- }).catch(err => {
- console.error(err);
- });
- },
- onUnload() {
- wx.hideLoading();
- this.options = {};
- this.imgList = [];
- this.finished = false;
- if (this.timeout !== null) {
- clearTimeout(this.timeout);
- this.timeout = null;
- }
- },
- onShareAppMessage: function () {
- }
- };
- </script>
- <style lang="stylus" scoped>
- .bundle-detail-page {
- height: 100vh;
- }
- .bundle-detail {
- padding: 10px 20px;
- box-sizing: border-box;
- background-color: #fff;
- margin-top: 10rpx;
- .submit-btn {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- height: 50px;
- background-color: #f44;
- text-align: center;
- line-height: 50px;
- font-size: 1.2em;
- color: #fff;
- }
- }
- .detail-info {
- margin-top: 20px;
- margin-bottom: 50px;
- .bundle-detail-desc {
- border-top: 1rpx solid #dcdee2;
- border-bottom: 1rpx solid #dcdee2;
- margin: 10px 0;
- padding: 5px 0;
- .detail-text {
- font-size: 0.8em;
- padding: 5px 5px 0 2px;
- box-sizing: border-box;
- }
- }
- .bundle-detail-title {
- font-size: 0.9em;
- .detail-title-icon {
- position: relative;
- top: 4rpx;
- }
- }
- .detail-content-imgs {
- margin-top: 5px;
- .detail-img {
- width: 100%;
- height: auto;
- display: block;
- }
- }
- }
- </style>
|