Yuan/ZangShiQi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始上传

Browse Source
This commit is contained in:
Mr. Hu
2026-04-04 17:27:12 +08:00
parent 4d80d28eb4
commit b7e11774ee
11191 changed files with 1588469 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
addon/pc/source/os/pages/promotion/combo/_id/index.vue Executable file
View File

@@ -0,0 +1,282 @@
<template>
<div class="combo-detail" v-loading="loading">
<div class="combo-title">
<div class="title-goods">商品信息</div>
<div class="title-orther">
<div class="title-price">价格</div>
<div class="title-num">数量</div>
</div>
</div>
<div class="item-wrap" v-for="(item, index) in goodsList.bundling_goods" :key="item.sku_item">
<div class="item">
<div class="info">
<div class="img-wrap" @click="$util.pushToTab({ path: '/sku/' + item.sku_id })">
<img :src="$img(item.sku_image, { size: 'mid' })" @error="imageError(index)" />
</div>
<div class="name">
{{ item.sku_name }}
<p v-if="num > item.stock">库存不足，剩余：{{ item.stock }}件</p>
</div>
</div>
<div class="price-wrap">
<div class="price">{{ item.price }}</div>
<div class="num">x1</div>
</div>
</div>
</div>
<div class="combo-bottom">
<div class="num">
<p>购买数量:</p>
<el-input v-model="num" type="number" @change="changeNum(false)"></el-input>
</div>
<div class="bottom-right">
<div class="price">
<div class="save-price">为您节省:￥{{ saveThePrice }}</div>
<div class="old-price">
套餐价:
<p>￥{{ packagePrice }}</p>
</div>
</div>
<el-button type="primary" :disabled="isDisabled ? true : false" @click="comboBuy">立即购买</el-button>
</div>
</div>
</div>
</template>
<script>
import {
detail
} from '@/api/combo';
import {
mapGetters
} from 'vuex';
export default {
name: 'combo',
components: {},
data: () => {
return {
id: 0,
goodsList: [],
num: 1,
packagePrice: 0, //套餐价
saveThePrice: 0, //节省价格
isDisabled: false, //按钮失效
loading: true
};
},
created() {
this.id = this.$route.params.id;
this.getDetail();
},
computed: {
...mapGetters(['defaultGoodsImage'])
},
watch: {
$route(curr) {
this.id = curr.query.id;
this.getDetail();
}
},
methods: {
getDetail() {
detail({
bl_id: this.id
}).then(res => {
if (res.data) {
this.goodsList = res.data;
this.changeNum();
}
this.loading = false;
}).catch(err => {
this.loading = false;
this.$message.error(err.message);
});
},
changeNum(flag, callback) {
setTimeout(() => {
var disabledCount = 0;
// 防止空
if (this.num.length == 0) {
this.num = 1;
// disabledCount++;
}
// 防止输入0和负数、非法输入
if (this.num <= 0 || isNaN(this.num)) {
this.num = 1;
}
this.num = parseInt(this.num);
var price = 0;
for (var i = 0; i < this.goodsList.bundling_goods.length; i++) {
price += parseFloat(this.goodsList.bundling_goods[i].price);
//检测库存
if (this.goodsList.bundling_goods[i].stock < this.num) disabledCount++;
}
this.isDisabled = disabledCount > 0;
this.saveThePrice = ((price - this.goodsList.bl_price) * this.num).toFixed(2);
this.packagePrice = (this.goodsList.bl_price * this.num).toFixed(2);
if (callback) callback();
}, 0);
},
comboBuy() {
if (this.isDisabled) return;
var data = {
bl_id: this.id,
num: this.num
};
this.$store.dispatch('order/setComboOrderCreateData', data);
this.$router.push({
path: '/promotion/combo/payment'
});
},
imageError(index) {
this.goodsList.bundling_goods[index].sku_image = this.defaultGoodsImage;
}
}
};
</script>
<style lang="scss" scoped>
.combo-detail {
width: 1210px;
margin: 20px auto;
.combo-title {
display: flex;
background: #ffffff;
padding: 10px;
margin-bottom: 20px;
justify-content: space-between;
.title-orther {
display: flex;
justify-content: space-between;
align-items: center;
width: 150px;
.title-price {
margin-right: 10px;
}
.title-num {
margin-right: 10px;
}
}
}
.item-wrap {
padding: 0 10px 10px 10px;
background: #ffffff;
.item {
display: flex;
justify-content: space-between;
padding-top: 10px;
.info {
display: flex;
.img-wrap {
width: 80px;
height: 80px;
img {
width: 100%;
height: 100%;
}
}
.name {
margin-left: 5px;
font-size: $ns-font-size-base;
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
position: relative;
p {
position: absolute;
bottom: 0;
color: $base-color;
}
}
}
.price-wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 150px;
.price {
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.num {
padding-right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
.combo-bottom {
background: #ffffff;
padding: 10px;
margin: 20px 0;
display: flex;
justify-content: space-between;
.num {
display: flex;
align-items: center;
input {
border: none;
}
p {
width: 80px;
}
}
.bottom-right {
display: flex;
.price {
display: flex;
align-items: center;
margin-right: 50px;
.save-price {
margin-right: 10px;
}
.old-price {
margin-right: 10px;
font-weight: 600;
display: flex;
p {
color: $base-color;
font-size: $ns-font-size-lg;
}
}
}
}
}
}
</style>

327
addon/pc/source/os/pages/promotion/combo/payment/index.vue Executable file
View File

@@ -0,0 +1,327 @@
<template>
<div class="payment-wrap" v-loading="fullscreenLoading">
<!--购买虚拟类商品需填写您的手机号-->
<div class="item-block" v-if="orderPaymentData.is_virtual == 1">
<div class="block-text">购买虚拟类商品需填写您的手机号，以方便商家与您联系</div>
<el-form ref="form" size="mini" class="mobile-wrap" label-width="80px">
<el-form-item label="手机号码">
<el-input placeholder="请输入您的手机号码" maxlength="11" v-model="orderCreateData.member_address.mobile" />
</el-form-item>
</el-form>
</div>
<!--收货地址-->
<div class="item-block" v-if="orderPaymentData.is_virtual == 0">
<div class="block-text">收货地址</div>
<div class="address-list">
<div class="address-item" @click="addAddressShow">
<div class="add-address">
<i class="el-icon-circle-plus-outline"></i>
添加收货地址
</div>
</div>
<div class="address-item" v-for="(item, key) in memberAddress" :key="item.id" :class="addressId == item.id ? 'active' : ''" v-if="key < 3 || (addressShow && key >= 3)">
<div class="address-info">
<div class="options">
<div @click="editAddress(item.id)">编辑</div>
<template v-if="item.is_default == 0">
<el-popconfirm title="确定要删除该地址吗？" @onConfirm="deleteMemberAddress(item.id)">
<div slot="reference">删除</div>
</el-popconfirm>
</template>
</div>
<div class="address-name">{{ item.name }}</div>
<div class="address-mobile" @click="setMemberAddress(item.id)">{{ item.mobile }}</div>
<div class="address-desc" @click="setMemberAddress(item.id)">{{ item.full_address }} {{ item.address }}
</div>
</div>
</div>
<div v-if="memberAddress.length > 3 && !addressShow" @click="addressShow = true" class="el-button--text address-open">
<i class="el-icon-arrow-down"></i>
更多收货地址
</div>
<div class="clear"></div>
</div>
</div>
<!--收货地址添加-->
<el-dialog :title="addressForm.id == 0 ? '添加收货地址' : '编辑收货地址'" :visible.sync="dialogVisible" width="32%">
<el-form ref="form" :rules="addressRules" :model="addressForm" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="addressForm.name" placeholder="收货人姓名" />
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="addressForm.mobile" maxlength="11" placeholder="收货人手机号" />
</el-form-item>
<el-form-item label="电话">
<el-input v-model="addressForm.telephone" placeholder="收货人固定电话（选填）" />
</el-form-item>
<el-form-item class="area" label="地区" prop="area">
<el-row :gutter="10">
<el-col :span="7">
<el-select prop="province" ref="province" v-model="addressForm.province_id" @change="getAddress(1)" placeholder="请选择省">
<el-option label="请选择省" value="0"></el-option>
<el-option v-for="item in pickerValueArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
<el-col :span="7">
<el-select ref="city" prop="city" v-model="addressForm.city_id" @change="getAddress(2)" placeholder="请选择市">
<el-option label="请选择市" value="0"></el-option>
<el-option v-for="item in cityArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
<el-col :span="7">
<el-select ref="district" prop="district" v-model="addressForm.district_id" placeholder="请选择区/县">
<el-option label="请选择区/县" value="0"></el-option>
<el-option v-for="item in districtArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="addressForm.address" placeholder="定位小区、街道、写字楼" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addmemberAddress('form')">确 定</el-button>
</span>
</el-dialog>
<!--使用余额-->
<div class="item-block" v-if="orderPaymentData.member_account.balance_total > 0 && balance_show == 1">
<div class="block-text">是否使用余额</div>
<div class="pay-type-list">
<div class="pay-type-item" :class="orderCreateData.is_balance ? '' : 'active'" @click="useBalance(0)">不使用余额
</div>
<div class="pay-type-item" :class="orderCreateData.is_balance ? 'active' : ''" @click="useBalance(1)">使用余额</div>
<div class="clear"></div>
</div>
</div>
<!-- 支付密码 -->
<el-dialog title="使用余额" :visible.sync="dialogpay" width="350px">
<template v-if="orderPaymentData.member_account.is_pay_password == 0">
<p>为了您的账户安全,请您先设置的支付密码</p>
<p>可到"会员中心","账号安全","支付密码"中设置</p>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogpay = false">暂不设置</el-button>
<el-button size="small" type="primary" @click="setPayPassword">立即设置</el-button>
</span>
</template>
<el-form v-else status-icon ref="ruleForm" label-width="100px">
<el-form-item label="支付密码" class="pay-password-item">
<!--添加一个不可见的input,欺骗浏览器自动填充-->
<el-input type="password" class="pay-password hide-password" :maxlength="6"></el-input>
<el-input type="password" class="pay-password" :maxlength="6" v-model="password" @input="input"></el-input>
</el-form-item>
<p class="ns-text-color forget-password" @click="setPayPassword">忘记密码</p>
</el-form>
</el-dialog>
<!-- 配送方式 -->
<div class="item-block padd-bom-20" v-if="orderPaymentData.delivery.express_type.length > 0">
<div class="block-text">
<span>配送方式</span>
<span class="distribution" v-if="orderCreateData.delivery.delivery_type == 'store'">{{ orderCreateData.delivery.store_name }}</span>
</div>
<div class="pay-type-item" v-for="(item, index) in orderPaymentData.delivery.express_type" :key="index" @click="selectDeliveryType(item)" :class="item.name == orderCreateData.delivery.delivery_type ? 'active' : ''">
{{ item.title }}
</div>
</div>
<!--配送方式 门店 -->
<el-dialog title="选择门店" :visible.sync="dialogStore" width="50%">
<el-table ref="singleTable" :data="storeList" highlight-current-row @row-click="selectStore" class="cursor-pointer">
<el-table-column label="" width="55">
<template slot-scope="scope">
<el-radio v-model="storeRadio" :label="scope.row"><i></i></el-radio>
</template>
</el-table-column>
<el-table-column prop="store_name" label="名称" width="160"></el-table-column>
<el-table-column prop="store_address" label="地址"></el-table-column>
<el-table-column prop="open_date" label="营业时间"></el-table-column>
</el-table>
</el-dialog>
<div class="item-block" v-if="orderPaymentData.invoice && orderPaymentData.invoice.invoice_status == 1">
<div class="block-text">发票信息</div>
<div class="pay-type-list">
<div class="pay-type-item" :class="orderCreateData.is_invoice == 0 ? 'active' : ''" @click="changeIsInvoice">
无需发票
</div>
<div class="pay-type-item" :class="orderCreateData.is_invoice == 1 ? 'active' : ''" @click="changeIsInvoice">
需要发票
</div>
<div class="clear"></div>
</div>
<div class="invoice-information" v-if="orderCreateData.is_invoice == 1">
<div class="invoice-title">
<div class="invoice-type-box invoice-title-box">
<span class="invoice-name">发票类型：</span>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_type == 1 ? 'active' : ''" @click="clickType(1)"></i>
<span>纸质</span>
</label>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_type == 2 ? 'active' : ''" @click="clickType(2)"></i>
<span>电子</span>
</label>
</div>
<div class="invoice-type-box invoice-title-box">
<span class="invoice-name">抬头类型：</span>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_title_type == 1 ? 'active' : ''" @click="clickTitleType(1)"></i>
<span>个人</span>
</label>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_title_type == 2 ? 'active' : ''" @click="clickTitleType(2)"></i>
<span>企业</span>
</label>
</div>
</div>
<div class="invoice-type-box">
<span class="invoice-name">发票信息：</span>
<div class="invoice-box-form">
<input type="text" placeholder="请填写抬头名称" v-model.trim="orderCreateData.invoice_title" />
<input type="text" placeholder="请填写纳税人识别号" v-model.trim="orderCreateData.taxpayer_number" v-if="orderCreateData.invoice_title_type == 2" />
<input type="text" placeholder="请填写邮寄地址" v-model.trim="orderCreateData.invoice_full_address" v-show="orderCreateData.invoice_type == 1" />
<input type="text" placeholder="请填写邮箱" v-model.trim="orderCreateData.invoice_email" v-show="orderCreateData.invoice_type == 2" />
</div>
</div>
<div class="invoice-condition">
<span class="invoice-name">发票内容：</span>
<div class="invoice-box-form">
<span class="option-item" :key="index" v-for="(item, index) in orderPaymentData.invoice.invoice_content_array" @click="changeInvoiceContent(item)" :class="{ 'color-base-bg active': item == orderCreateData.invoice_content }">
{{ item }}
</span>
</div>
</div>
<div class="invoice-tops">发票内容将以根据税法调整，具体请以展示为准，发票内容显示详细商品名 称及价格信息</div>
</div>
</div>
<!--商品信息-->
<div class="item-block">
<div class="goods-list">
<table>
<tr>
<td width="70%">商品</td>
<td width="15%">价格</td>
<td width="15%">数量</td>
</tr>
</table>
</div>
</div>
<div>
<div class="item-block" v-if="calculateData">
<div class="goods-list">
<table>
<tr v-for="(goodsItem, goodsIndex) in calculateData.goods_list" :key="goodsIndex">
<td width="50%">
<div class="goods-info">
<div class="goods-info-left">
<router-link :to="{ path: '/sku/' + goodsItem.sku_id }" target="_blank">
<img class="goods-img" :src="$img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(goodsIndex)" />
</router-link>
</div>
<div class="goods-info-right">
<router-link :to="{ path: '/sku/' + goodsItem.sku_id }" target="_blank">
<div class="goods-name">{{ goodsItem.goods_name }}</div>
</router-link>
<!-- 规格 -->
<div class="goods-spec" v-if="goodsItem.sku_spec_format">
<span v-for="(x, i) in goodsItem.sku_spec_format" :key="i">{{ x.spec_value_name }}</span>
</div>
</div>
</div>
</td>
<td width="12.5%" class="goods-price">￥{{ goodsItem.price }}</td>
<td width="12.5%" class="goods-num">{{ goodsItem.num }}</td>
<td width="12.5%" class="goods-money">￥{{ (goodsItem.price * goodsItem.num).toFixed(2) }}</td>
</tr>
</table>
</div>
</div>
</div>
<!--活动优惠-->
<div class="item-block" v-if="promotionInfo">
<div class="block-text">{{ promotionInfo.title }}</div>
<div class="order-cell platform-coupon">
<div class="box ns-text-color" v-html="promotionInfo.content"></div>
</div>
</div>
<!-- 买家留言 -->
<div class="item-block padd-bom-10">
<div class="block-text">买家留言：</div>
<el-input rows="3" type="textarea" placeholder="留言前建议先与商家协调一致" v-model="orderCreateData.buyer_message" class="buyer-message" @input="textarea" maxlength="140" show-word-limit resize="none" />
</div>
<!-- 总计 -->
<div class="item-block" v-if="calculateData">
<div class="order-statistics">
<table>
<tr>
<td align="right">商品金额：</td>
<td align="left">￥{{ calculateData.goods_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.is_virtual == 0 && calculateData.delivery_money > 0">
<td align="right">运费：</td>
<td align="left">￥{{ calculateData.delivery_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.invoice_money > 0">
<td align="right">发票税费<span class="ns-text-color">({{ calculateData.invoice.invoice_rate }}%)</span>：</td>
<td align="left">￥{{ calculateData.invoice_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.invoice_delivery_money > 0">
<td align="right">发票邮寄费：</td>
<td align="left">￥{{ calculateData.invoice_delivery_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.balance_money > 0">
<td align="right">使用余额：</td>
<td align="left">￥{{ calculateData.balance_money | moneyFormat }}</td>
</tr>
</table>
</div>
<div class="clear"></div>
</div>
<!--结算-->
<div class="item-block" v-if="calculateData">
<div class="order-submit">
<div class="order-money">
共{{ calculateData.goods_num }}件，应付金额：
<div class="ns-text-color">￥{{ calculateData.pay_money | moneyFormat }}</div>
</div>
<el-button type="primary" class="el-button--primary" @click="orderCreate">订单结算</el-button>
</div>
<div class="clear"></div>
</div>
</div>
</template>
<script>
import detail from '@/assets/js/promotion/payment_combo.js';
export default {
name: 'combo_payment',
mixins: [detail]
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/promotion/payment_combo.scss';
</style>

347
addon/pc/source/os/pages/promotion/groupbuy/_id/index.vue Executable file
View File

@@ -0,0 +1,347 @@
<template>
<div class="goods-detail-wrap">
<div class="detail-nav-wrap" v-if="categoryNameArr">
<div class="detail-nav" v-if="categoryNameArr.length">
<template v-for="(item,index) in categoryNameArr" :keys="index">
<router-link :to="{ path: '/goods/list', query: { category_id: item.category_id, level: index } }">
{{item.name}}
</router-link>
<span class="iconfont icon-arrow-right"></span>
</template>
<span class="goods-name">{{goodsSkuDetail.goods_name}}</span>
</div>
</div>
<div class="detail-main">
<div class="goods-detail">
<div class="preview-wrap">
<div class="video-player-wrap" :class="{ show: switchMedia == 'video' }" v-if="goodsSkuDetail.video_url != ''">
<video-player v-if="goodsSkuDetail.video_url != ''" ref="videoPlayer" :playsinline="true"
:options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)" @timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)" @ready="playerReadied"></video-player>
<div class="media-mode" v-if="goodsSkuDetail.video_url != ''">
<span :class="{ 'ns-bg-color': switchMedia == 'video' }" @click="switchMedia = 'video'">视频</span>
<span :class="{ 'ns-bg-color': switchMedia == 'img' }" @click="switchMedia = 'img'">图片</span>
</div>
</div>
<div class="magnifier-wrap">
<pic-zoom ref="PicZoom" :url="$img(picZoomUrl)" :scale="2"></pic-zoom>
</div>
<div class="spec-items">
<span class="left-btn iconfont icon-weibiaoti35" :class="{ move: moveThumbLeft }" @click="changeThumbImg('prev')"></span>
<span class="right-btn iconfont icon-weibiaoti35" :class="{ move: moveThumbRight }" @click="changeThumbImg('next')"></span>
<ul :style="{ top: 42 + thumbPosition + 'px' }">
<!-- 商品缩率图 -->
<li v-for="(item, index) in goodsSkuDetail.sku_images" :key="index" @mousemove="picZoomUrl = item" :class="{ selected: picZoomUrl == item }">
<img :src="$img(item, { size: 'small' })" @error="imageErrorSpec(index)" />
</li>
</ul>
</div>
</div>
<!-- 商品信息 -->
<div class="basic-info-wrap" v-loading="loading">
<h1>{{ goodsSkuDetail.sku_name }}</h1>
<p class="desc ns-text-color" v-if="goodsSkuDetail.introduction">{{ goodsSkuDetail.introduction }}</p>
<div class="discount-banner ns-bg-color" v-if="groupbuyTimeMachine.currentTime">
<div class="activity-name">
<i class="discount-icon iconfont iconicon_naozhong"></i>
<span>团购</span>
</div>
<div class="surplus-time">
<span>{{ groupbuyText }}</span>
<count-down class="count-down" v-on:start_callback="countDownS_cb()" v-on:end_callback="countDownE_cb()"
:currentTime="groupbuyTimeMachine.currentTime" :startTime="groupbuyTimeMachine.startTime"
:endTime="groupbuyTimeMachine.endTime" :dayTxt="'天'" :hourTxt="'小时'" :minutesTxt="'分钟'"
:secondsTxt="'秒'">
</count-down>
</div>
</div>
<div class="item-block">
<div class="promotion-price">
<dl class="item-line">
<dt class="ns-text-color-gray">团购价</dt>
<dd>
<em class="yuan ns-text-color">¥</em>
<span class="price ns-text-color">{{ goodsSkuDetail.groupbuy_price }}</span>
</dd>
</dl>
<dl class="item-line">
<dt class="ns-text-color-gray">原价</dt>
<dd>
<em class="market-yuan">¥</em>
<span class="market-price">{{ goodsSkuDetail.price }}</span>
</dd>
</dl>
<!-- <div class="statistical">
<ul>
<li>
<p>累计评价</p>
<span>{{ goodsSkuDetail.evaluate }}</span>
</li>
<li>
<p>累计销量</p>
<span>{{ goodsSkuDetail.sale_num }}{{ goodsSkuDetail.unit }}</span>
</li>
</ul>
</div> -->
<dl class="item-line" v-if="goodsSkuDetail.is_virtual == 0">
<dt>运费</dt>
<dd>
<i class="i-activity-flag ns-text-color ns-border-color" v-if="goodsSkuDetail.is_free_shipping">快递免邮</i>
<i class="i-activity-flag ns-text-color ns-border-color" v-else>快递不免邮</i>
</dd>
</dl>
</div>
</div>
<dl class="item-line delivery" v-if="goodsSkuDetail.is_virtual == 0">
<dt>配送至</dt>
<dd>
<div class="region-selected ns-border-color-gray">
<span>
<template v-if="selectedAddress['level_1']">
<template v-for="item in selectedAddress">{{ item.name }}</template>
</template>
<template v-else>请选择配送地址</template>
</span>
<i class="el-icon-arrow-down"></i>
</div>
<div class="region-list ns-border-color-gray" :class="{ hide: hideRegion }">
<ul class="nav-tabs">
<li :class="{ active: currTabAddres == 'province' }" @click="currTabAddres = 'province'">
<div>
<span>{{ selectedAddress['level_1'] ? selectedAddress['level_1'].name : '请选择省' }}</span>
<i class="el-icon-arrow-down"></i>
</div>
</li>
<li :class="{ active: currTabAddres == 'city' }" @click="currTabAddres = 'city'">
<div>
<span>{{ selectedAddress['level_2'] ? selectedAddress['level_2'].name : '请选择市' }}</span>
<i class="el-icon-arrow-down"></i>
</div>
</li>
<li :class="{ active: currTabAddres == 'district' }" @click="currTabAddres = 'district'">
<div>
<span>{{ selectedAddress['level_3'] ? selectedAddress['level_3'].name : '请选择区/县' }}</span>
<i class="el-icon-arrow-down"></i>
</div>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" :class="{ active: currTabAddres == 'province' }">
<ul class="province">
<li v-for="(item, index) in provinceArr" :key="index" :class="{ selected: selectedAddress['level_' + item.level] && selectedAddress['level_' + item.level].id == item.id }">
<span @click="getAddress('city', item)">{{ item.name }}</span>
</li>
</ul>
</div>
<div class="tab-pane" :class="{ active: currTabAddres == 'city' }">
<ul class="city">
<li v-for="(item, index) in cityArr" :key="index" :class="{ selected: selectedAddress['level_' + item.level] && selectedAddress['level_' + item.level].id == item.id }">
<span @click="getAddress('district', item)">{{ item.name }}</span>
</li>
</ul>
</div>
<div class="tab-pane" :class="{ active: currTabAddres == 'district' }">
<ul class="district">
<li v-for="(item, index) in districtArr" :key="index" :class="{ selected: selectedAddress['level_' + item.level] && selectedAddress['level_' + item.level].id == item.id }">
<span @click="getAddress('community', item)">{{ item.name }}</span>
</li>
</ul>
</div>
</div>
</div>
</dd>
</dl>
<dl class="item-line service">
<dt>服务</dt>
<dd>
<span>
由
<span class="ns-text-color">{{siteInfo.site_name}}</span>
发货并提供售后服务
</span>
</dd>
</dl>
<hr class="divider" />
<div class="sku-list" v-if="goodsSkuDetail.goods_spec_format">
<dl class="item-line" v-for="(item, index) in goodsSkuDetail.goods_spec_format" :key="index">
<dt>{{ item.spec_name }}</dt>
<dd>
<ul>
<li v-for="(item_value, index_value) in item.value" :key="index_value">
<div :class="{
'selected ns-border-color': item_value['selected'] || skuId == item_value.sku_id,
disabled: item_value['disabled'] || (!item_value['selected'] && specDisabled)
}" @click="changeSpec(item_value.sku_id, item_value.spec_id)">
<img v-if="item_value.image" :src="$img(item_value.image, { size: 'small' })" />
<span>{{ item_value.spec_value_name }}</span>
<i class="iconfont iconduigou1 ns-text-color"></i>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div class="buy-number">
<dl class="item-line">
<dt>数量</dt>
<dd>
<div class="num-wrap">
<div class="operation">
<span class="decrease el-icon-minus" @click="changeNum('-')"></span>
<el-input v-model="number" placeholder="0" @input="keyInput()"></el-input>
<span class="increase el-icon-plus" @click="changeNum('+')"></span>
</div>
</div>
<span class="unit">{{ goodsSkuDetail.unit }}</span>
<span class="inventory">库存{{ goodsSkuDetail.stock }}{{ goodsSkuDetail.unit }}</span>
<!-- 限购 -->
<em v-if="limitNumber > 0">({{ limitNumber }}{{ goodsSkuDetail.unit }}起购)</em>
</dd>
</dl>
</div>
<dl class="item-line buy-btn">
<dt></dt>
<dd v-if="goodsSkuDetail.goods_state == 1">
<template v-if="goodsSkuDetail.goods_stock < goodsSkuDetail.buy_num && !goodsSkuDetail.sku_spec_format">
<el-button type="info" plain disabled>库存不足</el-button>
</template>
<template v-else>
<el-button type="primary" plain @click="buyNow">立即抢购</el-button>
</template>
<div class="go-phone icon-item" @click="editCollection">
<span :class="['iconfont',(whetherCollection == 1 ? 'icon-_shouzang2 selected' : 'icon-shouzang')]"></span>
<span>收藏</span>
</div>
</dd>
<dd v-else>
<template>
<el-button type="info" plain disabled>该商品已下架</el-button>
</template>
<div class="go-phone icon-item" @click="editCollection">
<span :class="['iconfont',(whetherCollection == 1 ? 'icon-_shouzang2 selected' : 'icon-shouzang')]"></span>
<span>收藏</span>
</div>
</dd>
</dl>
<dl class="item-line merchant-service" v-show="service_list.length">
<dt>商品服务</dt>
<div>
<dd class="service-li" v-for="item in service_list">
<i class="el-icon-success"></i>
<span class="ns-text-color-gray" :title="item.service_name">{{item.service_name}}</span>
</dd>
</div>
</dl>
</div>
<div class="detail-wrap">
<el-tabs class="goods-tab" v-model="tabName" type="card" @tab-click="tabChange">
<el-tab-pane label="商品详情" name="detail">
<div v-html="goodsSkuDetail.goods_content"></div>
</el-tab-pane>
<el-tab-pane label="商品属性" name="attr">
<ul class="attr-list">
<template v-if="goodsSkuDetail.goods_attr_format && goodsSkuDetail.goods_attr_format.length > 0">
<li v-for="(item, index) in goodsSkuDetail.goods_attr_format" :key="index">{{ item.attr_name }}：{{ item.attr_value_name }}</li>
</template>
</ul>
</el-tab-pane>
<el-tab-pane v-if="evaluate_show" :label="goodsEvaluateList.length ? '商品评价(' + goodsEvaluateList.length + ')' : '商品评价'" name="evaluate" class="evaluate">
<template v-if="goodsEvaluateList.length">
<nav>
<li :class="evaluaType == 0 ? 'selected' : ''" @click="evaluationType(0)">全部评价({{evaluteCount.total}})</li>
<li :class="evaluaType == 1 ? 'selected' : ''" @click="evaluationType(1)">好评({{evaluteCount.haoping}})</li>
<li :class="evaluaType == 2 ? 'selected' : ''" @click="evaluationType(2)">中评({{evaluteCount.zhongping}})</li>
<li :class="evaluaType == 3 ? 'selected' : ''" @click="evaluationType(3)">差评({{evaluteCount.chaping}})</li>
</nav>
<ul class="list">
<li v-for="(item, index) in goodsEvaluateList" :key="index">
<div class="member-info">
<img :src="$img(item.member_headimg)" @error="imageErrorEvaluate(index)" class="avatar" />
<span>{{ item.member_name }}</span>
</div>
<div class="info-wrap">
<el-rate v-model="item.star" disabled></el-rate>
<p class="content">{{ item.content }}</p>
<div class="img-list" v-if="item.images">
<el-image v-for="(img, img_index) in item.images" :key="img_index" :src="$img(img)" :preview-src-list="item.imagesFormat"/>
</div>
<div class="sku-info">
<span>{{ item.sku_name }}</span>
<span class="create-time">{{ $util.timeStampTurnTime(item.create_time) }}</span>
</div>
<div class="evaluation-reply" v-if="item.explain_first != ''">店家回复：{{ item.explain_first }}</div>
<template v-if="item.again_content != ''">
<div class="review-evaluation">
<span>追加评价</span>
<span class="review-time">{{ $util.timeStampTurnTime(item.again_time) }}</span>
</div>
<p class="content">{{ item.again_content }}</p>
<div class="img-list">
<el-image v-for="(again_img, again_index) in item.again_images" :key="again_index" :src="$img(again_img)" :preview-src-list="item.againImagesFormat"/>
</div>
<div class="evaluation-reply" v-if="item.again_explain != ''">店家回复：{{ item.again_explain }}
</div>
</template>
</div>
</li>
</ul>
<div class="pager">
<el-pagination background :pager-count="5" :total="total" prev-text="上一页" next-text="下一页"
:current-page.sync="currentPage" :page-size.sync="pageSize"
@size-change="handlePageSizeChange"
@current-change="handleCurrentPageChange" hide-on-single-page></el-pagination>
</div>
</template>
<div class="empty" v-else>该商品暂无评价哦</div>
</el-tab-pane>
<template v-if="service">
<el-tab-pane v-if="service.is_display == 1" label="售后保障" name="after_sale" class="after-sale">
<div v-html="service.content"></div>
</el-tab-pane>
</template>
</el-tabs>
</div>
<!--联系客服弹窗-->
<servicerMessage ref="servicerMessage" class="kefu" :shop="{shop_id:shopInfo.site_id,logo:shopInfo.logo,shop_name:shopInfo.site_name}"></servicerMessage>
</div>
</div>
</div>
</template>
<script>
import PicZoom from 'vue-piczoom';
import detail from '@/assets/js/promotion/detail_groupbuy.js';
import GoodsRecommend from '@/components/GoodsRecommend';
import servicerMessage from "@/components/message/servicerMessage";
export default {
name: 'groupbuy_detail',
components: {
PicZoom,
GoodsRecommend,
servicerMessage
},
mixins: [detail]
};
</script>
<style lang="scss">
@import '@/assets/css/promotion/detail_groupbuy.scss';
</style>

337
addon/pc/source/os/pages/promotion/groupbuy/index.vue Executable file
View File

@@ -0,0 +1,337 @@
<template>
<div class="ns-groupbuy">
<div class="ns-groupbuy-head">
<el-carousel height="420px" v-loading="loadingAd" v-if="adList.length">
<el-carousel-item v-for="item in adList" :key="item.adv_id">
<el-image :src="$img(item.adv_image)" fit="cover" @click="$util.pushToTab(item.adv_url.url)" />
</el-carousel-item>
</el-carousel>
</div>
<!-- 商品列表 -->
<div class="ns-groupbuy-box" v-loading="loading">
<div class="ns-groupbuy-title" v-if="goodsList.length">
<span class="groupbuy-title-left">团购专区</span>
</div>
<div class="goods-list" v-if="goodsList.length">
<div class="goods" v-for="(item,index) in goodsList" :key="item.groupbuy_id" @click="$router.push('/promotion/groupbuy/' + item.groupbuy_id)">
<!-- 商品图片区 -->
<div class="img">
<el-image fit="scale-down" :src="$img(item.goods_image, { size: 'mid' })" lazy @error="imageError(index)"/>
</div>
<!-- 商品名称 -->
<div class="name">
<p :title="item.goods_name">{{ item.goods_name }}</p>
</div>
<!-- 价格展示区 -->
<div class="price">
<div class="curr-price">
<span>团购价</span>
<span>￥</span>
<span class="main_price">{{ item.groupbuy_price }}</span>
</div>
<span class="primary_price">￥{{ item.price }}</span>
</div>
<el-button>立即拼购</el-button>
</div>
</div>
<div v-else-if="!loading" class="empty-wrap">
<img src="~assets/images/goods_empty.png">
<span>暂无正在进行团购的商品，<router-link to="/" class="ns-text-color">去首页</router-link>看看吧</span>
</div>
<div class="pager">
<el-pagination
background
:pager-count="5"
:total="total"
prev-text="上一页"
next-text="下一页"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
@size-change="handlePageSizeChange"
@current-change="handleCurrentPageChange"
hide-on-single-page
></el-pagination>
</div>
</div>
</div>
</template>
<script>
import {goodsPage} from '@/api/groupbuy';
import {mapGetters} from 'vuex';
import {adList} from '@/api/website';
export default {
name: 'groupbuy',
data: () => {
return {
loading: true,
goodsList: [],
total: 0,
currentPage: 1,
pageSize: 25,
loadingAd: true,
adList: []
};
},
created() {
if (this.addonIsExit && this.addonIsExit.groupbuy != 1) {
this.$message({
message: '团购插件未安装',
type: 'warning',
duration: 2000,
onClose: () => {
this.$route.push('/');
}
});
} else {
this.getAdList();
this.getGoodsList();
}
},
computed: {
...mapGetters(['defaultGoodsImage', 'addonIsExit'])
},
head() {
return {
title: '团购专区-' + this.$store.state.site.siteInfo.site_name,
meta: [{
name: 'description',
content: this.$store.state.site.siteInfo.seo_description
}, {
name: 'keyword',
content: this.$store.state.site.siteInfo.seo_keywords
}]
}
},
watch: {
addonIsExit() {
if (this.addonIsExit.groupbuy != 1) {
this.$message({
message: '团购插件未安装',
type: 'warning',
duration: 2000,
onClose: () => {
this.$route.push('/');
}
});
}
}
},
methods: {
getAdList() {
adList({keyword: 'NS_PC_GROUPBUY'}).then(res => {
this.adList = res.data.adv_list;
for (let i = 0; i < this.adList.length; i++) {
if (this.adList[i].adv_url) this.adList[i].adv_url = JSON.parse(this.adList[i].adv_url);
}
this.loadingAd = false;
}).catch(err => {
this.loadingAd = false;
});
},
/**
* 团购商品
*/
getGoodsList() {
goodsPage({
page_size: this.pageSize,
page: this.currentPage
}).then(res => {
this.goodsList = res.data.list;
this.total = res.data.count;
this.loading = false;
}).catch(err => {
this.loading = false;
this.$message.error(err.message);
});
},
handlePageSizeChange(size) {
this.pageSize = size;
this.refresh();
},
handleCurrentPageChange(page) {
this.currentPage = page;
this.refresh();
},
refresh() {
this.loading = true;
this.getGoodsList();
},
/**
* 图片加载失败
*/
imageError(index) {
this.goodsList[index].goods_image = this.defaultGoodsImage;
}
}
};
</script>
<style lang="scss" scoped>
.ns-groupbuy {
.ns-groupbuy-box {
padding: 48px 0;
width: $width;
margin: 0 auto;
.ns-groupbuy-title {
display: flex;
align-items: center;
border-bottom: 1px solid #e8e8e8;
.groupbuy-title-left {
font-size: 30px;
color: #333;
border-bottom: 4px solid #F42424;
}
}
}
.goods-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: 32px;
.goods {
margin-right: 17px;
margin-bottom: 18px;
width: 228px;
background-color: #ffffff;
overflow: hidden;
color: #303133;
transition: 0.3s;
padding: 18px;
box-sizing: border-box;
cursor: pointer;
&:nth-child(5n+5) {
margin-right: 0;
}
}
.img {
width: 192px;
height: 192px;
.el-image {
max-width: 100%;
max-height: 100%;
}
}
.price {
display: flex;
align-items: baseline;
.curr-price {
display: flex;
align-items: baseline;
height: 24px;
font-weight: bold;
color: $base-color;
span:first-child {
font-size: 14px;
margin-right: 1px;
}
span:nth-child(2) {
font-size: 12px;
}
}
.main_price {
color: $base-color;
font-size: 14px;
line-height: 24px;
}
.primary_price {
text-decoration: line-through;
color: $base-color-info;
margin-left: 5px;
font-size: 12px;
}
}
.el-button {
width: 100%;
height: 42px;
line-height: 42px;
background: $base-color;
color: #ffffff;
margin-top: 10px;
border: none;
border-radius: 0;
padding: 0;
font-size: 16px;
}
.name {
margin-top: 12px;
font-size: 14px;
line-height: 1.4;
margin-bottom: 5px;
white-space: normal;
overflow: hidden;
p {
line-height: 24px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
height: 50px;
}
}
}
.empty-wrap {
padding: 50px 0 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
img {
width: 400px;
height: 244px;
}
span {
font-size: 14px;
color: #4A4A4A;
}
}
}
</style>
<style lang="scss">
.ns-groupbuy {
.ns-groupbuy-head {
width: $width;
margin: auto;
}
.el-carousel {
.el-image {
height: 100%;
}
.el-image__inner {
width: auto;
}
}
.el-carousel__arrow--right {
right: 60px;
}
}
</style>

326
addon/pc/source/os/pages/promotion/groupbuy/payment/index.vue Executable file
View File

@@ -0,0 +1,326 @@
<template>
<div class="payment-wrap" v-loading="fullscreenLoading">
<!--购买虚拟类商品需填写您的手机号-->
<div class="item-block" v-if="orderPaymentData.is_virtual == 1">
<div class="block-text">购买虚拟类商品需填写您的手机号，以方便商家与您联系</div>
<el-form ref="form" size="mini" class="mobile-wrap" label-width="80px">
<el-form-item label="手机号码">
<el-input placeholder="请输入您的手机号码" maxlength="11" v-model="orderCreateData.member_address.mobile" />
</el-form-item>
</el-form>
</div>
<!--收货地址-->
<div class="item-block" v-if="orderPaymentData.is_virtual == 0">
<div class="block-text">收货地址</div>
<div class="address-list">
<div class="address-item" @click="addAddressShow">
<div class="add-address">
<i class="el-icon-circle-plus-outline"></i>
添加收货地址
</div>
</div>
<div class="address-item" v-for="(item, key) in memberAddress" :key="item.id" :class="addressId == item.id ? 'active' : ''" v-if="key < 3 || (addressShow && key >= 3)">
<div class="address-info">
<div class="options">
<div @click="editAddress(item.id)">编辑</div>
<template v-if="item.is_default == 0">
<el-popconfirm title="确定要删除该地址吗？" @onConfirm="deleteMemberAddress(item.id)">
<div slot="reference">删除</div>
</el-popconfirm>
</template>
</div>
<div class="address-name">{{ item.name }}</div>
<div class="address-mobile" @click="setMemberAddress(item.id)">{{ item.mobile }}</div>
<div class="address-desc" @click="setMemberAddress(item.id)">{{ item.full_address }} {{ item.address }}
</div>
</div>
</div>
<div v-if="memberAddress.length > 3 && !addressShow" @click="addressShow = true" class="el-button--text address-open">
<i class="el-icon-arrow-down"></i>
更多收货地址
</div>
<div class="clear"></div>
</div>
</div>
<!--收货地址添加-->
<el-dialog :title="addressForm.id == 0 ? '添加收货地址' : '编辑收货地址'" :visible.sync="dialogVisible" width="32%">
<el-form ref="form" :rules="addressRules" :model="addressForm" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="addressForm.name" placeholder="收货人姓名" />
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="addressForm.mobile" maxlength="11" placeholder="收货人手机号" />
</el-form-item>
<el-form-item label="电话">
<el-input v-model="addressForm.telephone" placeholder="收货人固定电话（选填）" />
</el-form-item>
<el-form-item class="area" label="地区" prop="area">
<el-row :gutter="10">
<el-col :span="7">
<el-select prop="province" ref="province" v-model="addressForm.province_id" @change="getAddress(1)" placeholder="请选择省">
<el-option label="请选择省" value="0"></el-option>
<el-option v-for="item in pickerValueArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
<el-col :span="7">
<el-select ref="city" prop="city" v-model="addressForm.city_id" @change="getAddress(2)" placeholder="请选择市">
<el-option label="请选择市" value="0"></el-option>
<el-option v-for="item in cityArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
<el-col :span="7">
<el-select ref="district" prop="district" v-model="addressForm.district_id" placeholder="请选择区/县">
<el-option label="请选择区/县" value="0"></el-option>
<el-option v-for="item in districtArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="addressForm.address" placeholder="定位小区、街道、写字楼" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addmemberAddress('form')">确 定</el-button>
</span>
</el-dialog>
<!--使用余额-->
<div class="item-block" v-if="orderPaymentData.member_account.balance_total > 0 && balance_show == 1">
<div class="block-text">是否使用余额</div>
<div class="pay-type-list">
<div class="pay-type-item" :class="orderCreateData.is_balance ? '' : 'active'" @click="useBalance(0)">不使用余额</div>
<div class="pay-type-item" :class="orderCreateData.is_balance ? 'active' : ''" @click="useBalance(1)">使用余额</div>
<div class="clear"></div>
</div>
</div>
<!-- 支付密码 -->
<el-dialog title="使用余额" :visible.sync="dialogpay" width="350px">
<template v-if="orderPaymentData.member_account.is_pay_password == 0">
<p>为了您的账户安全,请您先设置的支付密码</p>
<p>可到"会员中心","账号安全","支付密码"中设置</p>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogpay = false">暂不设置</el-button>
<el-button size="small" type="primary" @click="setPayPassword">立即设置</el-button>
</span>
</template>
<el-form v-else status-icon ref="ruleForm" label-width="100px">
<el-form-item label="支付密码" class="pay-password-item">
<!--添加一个不可见的input,欺骗浏览器自动填充-->
<el-input type="password" class="pay-password hide-password" :maxlength="6"></el-input>
<el-input type="password" class="pay-password" :maxlength="6" v-model="password" @input="input"></el-input>
</el-form-item>
<p class="ns-text-color forget-password" @click="setPayPassword">忘记密码</p>
</el-form>
</el-dialog>
<!-- 配送方式 -->
<div class="item-block padd-bom-20" v-if="orderPaymentData.delivery.express_type.length > 0">
<div class="block-text">
<span>配送方式</span>
<span class="distribution" v-if="orderCreateData.delivery.delivery_type == 'store'">{{ orderCreateData.delivery.store_name }}</span>
</div>
<div class="pay-type-item" v-for="(item, index) in orderPaymentData.delivery.express_type" :key="index" @click="selectDeliveryType(item)" :class="item.name == orderCreateData.delivery.delivery_type ? 'active' : ''">
{{ item.title }}
</div>
</div>
<!--配送方式 门店 -->
<el-dialog title="选择门店" :visible.sync="dialogStore" width="50%">
<el-table ref="singleTable" :data="storeList" highlight-current-row @row-click="selectStore" class="cursor-pointer">
<el-table-column label="" width="55">
<template slot-scope="scope">
<el-radio v-model="storeRadio" :label="scope.row"><i></i></el-radio>
</template>
</el-table-column>
<el-table-column prop="store_name" label="名称" width="160"></el-table-column>
<el-table-column prop="store_address" label="地址"></el-table-column>
<el-table-column prop="open_date" label="营业时间"></el-table-column>
</el-table>
</el-dialog>
<div class="item-block" v-if="orderPaymentData.invoice && orderPaymentData.invoice.invoice_status == 1">
<div class="block-text">发票信息</div>
<div class="pay-type-list">
<div class="pay-type-item" :class="orderCreateData.is_invoice == 0 ? 'active' : ''" @click="changeIsInvoice">无需发票</div>
<div class="pay-type-item" :class="orderCreateData.is_invoice == 1 ? 'active' : ''" @click="changeIsInvoice">需要发票</div>
<div class="clear"></div>
</div>
<div class="invoice-information" v-if="orderCreateData.is_invoice == 1">
<div class="invoice-title">
<div class="invoice-type-box invoice-title-box">
<span class="invoice-name">发票类型：</span>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_type == 1 ? 'active' : ''" @click="clickType(1)"></i>
<span>纸质</span>
</label>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_type == 2 ? 'active' : ''" @click="clickType(2)"></i>
<span>电子</span>
</label>
</div>
<div class="invoice-type-box invoice-title-box">
<span class="invoice-name">抬头类型：</span>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_title_type == 1 ? 'active' : ''" @click="clickTitleType(1)"></i>
<span>个人</span>
</label>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_title_type == 2 ? 'active' : ''" @click="clickTitleType(2)"></i>
<span>企业</span>
</label>
</div>
</div>
<div class="invoice-type-box">
<span class="invoice-name">发票信息：</span>
<div class="invoice-box-form">
<input type="text" placeholder="请填写抬头名称" v-model.trim="orderCreateData.invoice_title" />
<input type="text" placeholder="请填写纳税人识别号" v-model.trim="orderCreateData.taxpayer_number" v-if="orderCreateData.invoice_title_type == 2" />
<input type="text" placeholder="请填写邮寄地址" v-model.trim="orderCreateData.invoice_full_address" v-show="orderCreateData.invoice_type == 1" />
<input type="text" placeholder="请填写邮箱" v-model.trim="orderCreateData.invoice_email" v-show="orderCreateData.invoice_type == 2" />
</div>
</div>
<div class="invoice-condition">
<span class="invoice-name">发票内容：</span>
<div class="invoice-box-form">
<span class="option-item" :key="index" v-for="(item, index) in orderPaymentData.invoice.invoice_content_array" @click="changeInvoiceContent(item)" :class="{ 'color-base-bg active': item == orderCreateData.invoice_content }">
{{ item }}
</span>
</div>
</div>
<div class="invoice-tops">发票内容将以根据税法调整，具体请以展示为准，发票内容显示详细商品名 称及价格信息</div>
</div>
</div>
<!--商品信息-->
<div class="item-block">
<div class="goods-list">
<table>
<tr>
<td width="50%">商品</td>
<td width="12.5%">价格</td>
<td width="12.5%">数量</td>
<td width="12.5%">小计</td>
</tr>
</table>
</div>
</div>
<div>
<div class="item-block" v-if="calculateData">
<div class="goods-list">
<table>
<tr v-for="(goodsItem, goodsIndex) in calculateData.goods_list" :key="goodsIndex">
<td width="50%">
<div class="goods-info">
<div class="goods-info-left">
<router-link :to="{ path: '/sku/' + goodsItem.sku_id }" target="_blank">
<img class="goods-img" :src="$img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(goodsIndex)" />
</router-link>
</div>
<div class="goods-info-right">
<router-link :to="{ path: '/sku/' + goodsItem.sku_id }" target="_blank">
<div class="goods-name">{{ goodsItem.goods_name }}</div>
</router-link>
<!-- 规格 -->
<div class="goods-spec" v-if="goodsItem.sku_spec_format">
<span v-for="(x, i) in goodsItem.sku_spec_format" :key="i">{{ x.spec_value_name }}</span>
</div>
</div>
</div>
</td>
<td width="12.5%" class="goods-price">￥{{ goodsItem.price }}</td>
<td width="12.5%" class="goods-num">{{ goodsItem.num }}</td>
<td width="12.5%" class="goods-money">￥{{ (goodsItem.price * goodsItem.num).toFixed(2) }}</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 活动优惠 -->
<div class="item-block" v-if="promotionInfo">
<div class="block-text">{{ promotionInfo.title }}</div>
<div class="order-cell platform-coupon">
<div class="box ns-text-color" v-html="promotionInfo.content"></div>
</div>
</div>
<!-- 买家留言 -->
<div class="item-block padd-bom-10">
<div class="block-text">买家留言：</div>
<el-input rows="3" type="textarea" placeholder="留言前建议先与商家协调一致" v-model="orderCreateData.buyer_message" class="buyer-message" @input="textarea" maxlength="140" show-word-limit resize="none" />
</div>
<!-- 总计 -->
<div class="item-block" v-if="calculateData">
<div class="order-statistics">
<table>
<tr>
<td align="right">商品金额：</td>
<td align="left">￥{{ calculateData.goods_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.is_virtual == 0 && calculateData.delivery_money > 0">
<td align="right">运费：</td>
<td align="left">￥{{ calculateData.delivery_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.invoice_money > 0">
<td align="right">发票税费<span class="ns-text-color">({{ calculateData.invoice.invoice_rate }}%)</span>：</td>
<td align="left">￥{{ calculateData.invoice_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.invoice_delivery_money > 0">
<td align="right">发票邮寄费：</td>
<td align="left">￥{{ calculateData.invoice_delivery_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.promotion_money > 0">
<td align="right">优惠：</td>
<td align="left">￥{{ calculateData.promotion_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.balance_money > 0">
<td align="right">使用余额：</td>
<td align="left">￥{{ calculateData.balance_money | moneyFormat }}</td>
</tr>
</table>
</div>
<div class="clear"></div>
</div>
<!--结算-->
<div class="item-block" v-if="calculateData">
<div class="order-submit">
<div class="order-money">
共{{ calculateData.goods_num }}件，应付金额：
<div class="ns-text-color">￥{{ calculateData.pay_money | moneyFormat }}</div>
</div>
<el-button type="primary" class="el-button--primary" @click="orderCreate">订单结算</el-button>
</div>
<div class="clear"></div>
</div>
</div>
</template>
<script>
import detail from '@/assets/js/promotion/payment_groupbuy.js';
export default {
name: 'groupbuy_payment',
mixins: [detail]
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/promotion/payment_groupbuy.scss';
</style>

354
addon/pc/source/os/pages/promotion/seckill/_id/index.vue Executable file
View File

@@ -0,0 +1,354 @@
<template>
<div class="goods-detail-wrap">
<div class="detail-nav-wrap" v-if="categoryNameArr">
<div class="detail-nav" v-if="categoryNameArr.length">
<template v-for="(item,index) in categoryNameArr" :keys="index">
<router-link :to="{ path: '/goods/list', query: { category_id: item.category_id, level: index } }">
{{item.name}}
</router-link>
<span class="iconfont icon-arrow-right"></span>
</template>
<span class="goods-name">{{goodsSkuDetail.goods_name}}</span>
</div>
</div>
<div class="detail-main">
<div class="goods-detail">
<div class="preview-wrap">
<div class="video-player-wrap" :class="{ show: switchMedia == 'video' }" v-if="goodsSkuDetail.video_url != ''">
<video-player v-if="goodsSkuDetail.video_url != ''" ref="videoPlayer" :playsinline="true"
:options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)" @timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)" @ready="playerReadied"></video-player>
<div class="media-mode" v-if="goodsSkuDetail.video_url != ''">
<span :class="{ 'ns-bg-color': switchMedia == 'video' }" @click="switchMedia = 'video'">视频</span>
<span :class="{ 'ns-bg-color': switchMedia == 'img' }" @click="switchMedia = 'img'">图片</span>
</div>
</div>
<div class="magnifier-wrap">
<pic-zoom ref="PicZoom" :url="$img(picZoomUrl)" :scale="2"></pic-zoom>
</div>
<div class="spec-items">
<span class="left-btn iconfont icon-weibiaoti35" :class="{ move: moveThumbLeft }" @click="changeThumbImg('prev')"></span>
<span class="right-btn iconfont icon-weibiaoti35" :class="{ move: moveThumbRight }" @click="changeThumbImg('next')"></span>
<ul :style="{ top: 42 + thumbPosition + 'px' }">
<!-- 商品缩率图 -->
<li v-for="(item, index) in goodsSkuDetail.sku_images" :key="index" @mousemove="picZoomUrl = item" :class="{ selected: picZoomUrl == item }">
<img :src="$img(item, { size: 'small' })" @error="imageErrorSpec(index)" />
</li>
</ul>
</div>
<!-- <div class="share-collect">
<div @click="editCollection">
<i class="iconfont" :class="whetherCollection == 1 ? 'iconlikefill ns-text-color' : 'iconlike'"></i>
<span data-collects="0">关注商品（{{ goodsSkuDetail.collect_num }}）</span>
</div>
<div v-if="kefuConfig.system == 0 && kefuConfig.open_pc == 1">
<i class="iconfont iconzhanghao"></i>
<span data-collects="0"><a :href="kefuConfig.open_url" target="_blank">联系客服</a></span>
</div>
<div @click="service_link" v-else-if="kefuConfig.system == 1">
<i class="iconfont iconzhanghao"></i>
<span data-collects="0">联系客服</span>
</div>
</div> -->
</div>
<!-- 商品信息 -->
<div class="basic-info-wrap" v-loading="loading">
<h1>{{ goodsSkuDetail.sku_name }}</h1>
<p class="desc ns-text-color" v-if="goodsSkuDetail.introduction">{{ goodsSkuDetail.introduction }}</p>
<div class="discount-banner ns-bg-color" v-if="seckillTimeMachine.currentTime">
<div class="activity-name"><i class="discount-icon iconfont iconicon_naozhong"></i><span>限时秒杀</span></div>
<div class="surplus-time">
<span>{{ seckillText }}</span>
<count-down class="count-down" v-on:start_callback="countDownS_cb()" v-on:end_callback="countDownE_cb()"
:currentTime="seckillTimeMachine.currentTime" :startTime="seckillTimeMachine.startTime"
:endTime="seckillTimeMachine.endTime" :dayTxt="'天'" :hourTxt="'小时'" :minutesTxt="'分钟'"
:secondsTxt="'秒'">
</count-down>
</div>
</div>
<div class="item-block">
<div class="promotion-price">
<dl class="item-line">
<dt class="ns-text-color-gray">秒杀价</dt>
<dd>
<em class="yuan ns-text-color">¥</em>
<span class="price ns-text-color">{{ goodsSkuDetail.seckill_price }}</span>
</dd>
</dl>
<dl class="item-line">
<dt class="ns-text-color-gray">原价</dt>
<dd>
<em class="market-yuan">¥</em>
<span class="market-price">{{ goodsSkuDetail.price }}</span>
</dd>
</dl>
<!-- <div class="statistical">
<ul>
<li>
<p>累计评价</p>
<span>{{ goodsSkuDetail.evaluate }}</span>
</li>
<li>
<p>累计销量</p>
<span>{{ goodsSkuDetail.sale_num }}{{ goodsSkuDetail.unit }}</span>
</li>
</ul>
</div> -->
<dl class="item-line" v-if="goodsSkuDetail.is_virtual == 0">
<dt>运费</dt>
<dd>
<i class="i-activity-flag ns-text-color ns-border-color" v-if="goodsSkuDetail.is_free_shipping">快递免邮</i>
<i class="i-activity-flag ns-text-color ns-border-color" v-else>快递不免邮</i>
</dd>
</dl>
</div>
</div>
<dl class="item-line delivery" v-if="goodsSkuDetail.is_virtual == 0">
<dt>配送至</dt>
<dd>
<div class="region-selected ns-border-color-gray">
<span>
<template v-if="selectedAddress['level_1']">
<template v-for="item in selectedAddress">{{ item.name }}</template>
</template>
<template v-else>请选择配送地址</template>
</span>
<i class="el-icon-arrow-down"></i>
</div>
<div class="region-list ns-border-color-gray" :class="{ hide: hideRegion }">
<ul class="nav-tabs">
<li :class="{ active: currTabAddres == 'province' }" @click="currTabAddres = 'province'">
<div>
<span>{{ selectedAddress['level_1'] ? selectedAddress['level_1'].name : '请选择省' }}</span>
<i class="el-icon-arrow-down"></i>
</div>
</li>
<li :class="{ active: currTabAddres == 'city' }" @click="currTabAddres = 'city'">
<div>
<span>{{ selectedAddress['level_2'] ? selectedAddress['level_2'].name : '请选择市' }}</span>
<i class="el-icon-arrow-down"></i>
</div>
</li>
<li :class="{ active: currTabAddres == 'district' }" @click="currTabAddres = 'district'">
<div>
<span>{{ selectedAddress['level_3'] ? selectedAddress['level_3'].name : '请选择区/县' }}</span>
<i class="el-icon-arrow-down"></i>
</div>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" :class="{ active: currTabAddres == 'province' }">
<ul class="province">
<li v-for="(item, index) in provinceArr" :key="index" :class="{ selected: selectedAddress['level_' + item.level] && selectedAddress['level_' + item.level].id == item.id }">
<span @click="getAddress('city', item)">{{ item.name }}</span>
</li>
</ul>
</div>
<div class="tab-pane" :class="{ active: currTabAddres == 'city' }">
<ul class="city">
<li v-for="(item, index) in cityArr" :key="index" :class="{ selected: selectedAddress['level_' + item.level] && selectedAddress['level_' + item.level].id == item.id }">
<span @click="getAddress('district', item)">{{ item.name }}</span>
</li>
</ul>
</div>
<div class="tab-pane" :class="{ active: currTabAddres == 'district' }">
<ul class="district">
<li v-for="(item, index) in districtArr" :key="index" :class="{ selected: selectedAddress['level_' + item.level] && selectedAddress['level_' + item.level].id == item.id }">
<span @click="getAddress('community', item)">{{ item.name }}</span>
</li>
</ul>
</div>
</div>
</div>
</dd>
</dl>
<dl class="item-line service">
<dt>服务</dt>
<dd>
<span>
由<span class="ns-text-color">{{siteInfo.site_name}}</span>发货并提供售后服务
</span>
</dd>
</dl>
<hr class="divider" />
<div class="sku-list" v-if="goodsSkuDetail.goods_spec_format">
<dl class="item-line" v-for="(item, index) in goodsSkuDetail.goods_spec_format" :key="index">
<dt>{{ item.spec_name }}</dt>
<dd>
<ul>
<li v-for="(item_value, index_value) in item.value" :key="index_value">
<div :class="{ 'selected ns-border-color': item_value['selected'] || skuId == item_value.sku_id, disabled: item_value['disabled'] }" @click="changeSpec(item_value.sku_id, item_value.spec_id, item_value.disabled)">
<img v-if="item_value.image" :src="$img(item_value.image, { size: 'small' })" />
<span>{{ item_value.spec_value_name }}</span>
<i class="iconfont iconduigou1 ns-text-color"></i>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div class="buy-number">
<dl class="item-line">
<dt>数量</dt>
<dd>
<div class="num-wrap">
<div class="operation">
<span class="decrease el-icon-minus" @click="changeNum('-')"></span>
<el-input v-model="number" placeholder="0" @input="keyInput()"></el-input>
<span class="increase el-icon-plus" @click="changeNum('+')"></span>
</div>
</div>
<span class="unit">{{ goodsSkuDetail.unit }}</span>
<span class="inventory">库存{{ goodsSkuDetail.stock }}{{ goodsSkuDetail.unit }}</span>
</dd>
</dl>
</div>
<dl class="item-line buy-btn">
<dt></dt>
<dd v-if="goodsSkuDetail.goods_state == 1">
<template>
<el-button type="primary" plain @click="buyNow" v-if="goodsSkuDetail.stock > 0">立即抢购</el-button>
<el-button type="info" plain v-else disabled>库存不足</el-button>
</template>
<div class="go-phone icon-item" @click="editCollection">
<span :class="['iconfont',(whetherCollection == 1 ? 'icon-_shouzang2 selected' : 'icon-shouzang')]"></span>
<span>收藏</span>
</div>
</dd>
<dd v-else>
<template>
<el-button type="info" plain disabled>该商品已下架</el-button>
</template>
<div class="go-phone icon-item" @click="editCollection">
<span :class="['iconfont',(whetherCollection == 1 ? 'icon-_shouzang2 selected' : 'icon-shouzang')]"></span>
<span>收藏</span>
</div>
</dd>
</dl>
<dl class="item-line merchant-service" v-show="service_list.length">
<dt>商品服务</dt>
<div>
<dd v-for="item in service_list">
<i class="el-icon-success"></i>
<span class="ns-text-color-gray" :title="item.service_name">{{item.service_name}}</span>
</dd>
</div>
</dl>
</div>
<div class="detail-wrap">
<!-- <div class="goods-recommended">
<goods-recommend />
</div> -->
<el-tabs class="goods-tab" v-model="tabName" type="card" @tab-click="tabChange">
<el-tab-pane label="商品详情" name="detail">
<div v-html="goodsSkuDetail.goods_content"></div>
</el-tab-pane>
<el-tab-pane label="商品属性" name="attr">
<ul class="attr-list">
<template v-if="goodsSkuDetail.goods_attr_format && goodsSkuDetail.goods_attr_format.length > 0">
<li v-for="(item, index) in goodsSkuDetail.goods_attr_format" :key="index">
{{ item.attr_name }}：{{ item.attr_value_name }}
</li>
</template>
</ul>
</el-tab-pane>
<el-tab-pane v-if="evaluate_show" :label="goodsEvaluateList.length ? '商品评价(' + goodsEvaluateList.length + ')' : '商品评价'" name="evaluate" class="evaluate">
<template v-if="goodsEvaluateList.length">
<nav>
<li :class="evaluaType == 0 ? 'selected' : ''" @click="evaluationType(0)">全部评价({{evaluteCount.total}})</li>
<li :class="evaluaType == 1 ? 'selected' : ''" @click="evaluationType(1)">好评({{evaluteCount.haoping}})</li>
<li :class="evaluaType == 2 ? 'selected' : ''" @click="evaluationType(2)">中评({{evaluteCount.zhongping}})</li>
<li :class="evaluaType == 3 ? 'selected' : ''" @click="evaluationType(3)">差评({{evaluteCount.chaping}})</li>
</nav>
<ul class="list">
<li v-for="(item, index) in goodsEvaluateList" :key="index">
<div class="member-info">
<img :src="$img(item.member_headimg)" @error="imageErrorEvaluate(index)" class="avatar" />
<span>{{ item.member_name }}</span>
</div>
<div class="info-wrap">
<el-rate v-model="item.star" disabled></el-rate>
<p class="content">{{ item.content }}</p>
<div class="img-list" v-if="item.images">
<el-image v-for="(img, img_index) in item.images" :key="img_index" :src="$img(img)" :preview-src-list="item.imagesFormat"/>
</div>
<div class="sku-info">
<span>{{ item.sku_name }}</span>
<span class="create-time">{{ $util.timeStampTurnTime(item.create_time) }}</span>
</div>
<div class="evaluation-reply" v-if="item.explain_first != ''">店家回复：{{ item.explain_first }}</div>
<template v-if="item.again_content != ''">
<div class="review-evaluation">
<span>追加评价</span>
<span class="review-time">{{ $util.timeStampTurnTime(item.again_time) }}</span>
</div>
<p class="content">{{ item.again_content }}</p>
<div class="img-list">
<el-image v-for="(again_img, again_index) in item.again_images" :key="again_index" :src="$img(again_img)" :preview-src-list="item.againImagesFormat"/>
</div>
<div class="evaluation-reply" v-if="item.again_explain != ''">店家回复：{{ item.again_explain }}
</div>
</template>
</div>
</li>
</ul>
<div class="pager">
<el-pagination background :pager-count="5" :total="total" prev-text="上一页" next-text="下一页"
:current-page.sync="currentPage" :page-size.sync="pageSize"
@size-change="handlePageSizeChange"
@current-change="handleCurrentPageChange" hide-on-single-page></el-pagination>
</div>
</template>
<div class="empty" v-else>该商品暂无评价哦</div>
</el-tab-pane>
<template v-if="service">
<el-tab-pane v-if="service.is_display == 1" label="售后保障" name="after_sale" class="after-sale">
<div v-html="service.content"></div>
</el-tab-pane>
</template>
</el-tabs>
</div>
<!--联系客服弹窗-->
<servicerMessage ref="servicerMessage" class="kefu" :shop="{shop_id:shopInfo.site_id,logo:shopInfo.logo,shop_name:shopInfo.site_name}"></servicerMessage>
</div>
</div>
</div>
</template>
<script>
import PicZoom from "vue-piczoom"
import detail from "@/assets/js/promotion/detail_seckill.js"
import GoodsRecommend from "@/components/GoodsRecommend"
import servicerMessage from "@/components/message/servicerMessage";
export default {
name: "seckill_detail",
components: {
PicZoom,
GoodsRecommend,
servicerMessage
},
mixins: [detail]
}
</script>
<style lang="scss">
@import "@/assets/css/promotion/detail_seckill.scss";
</style>

151
addon/pc/source/os/pages/promotion/seckill/index.vue Executable file
View File

@@ -0,0 +1,151 @@
<template>
<div class="ns-seckill">
<div class="ns-seckill-head" v-loading="loadingAd">
<el-carousel height="420px" v-if="adList.length" indicator-position="none">
<el-carousel-item v-for="item in adList" :key="item.adv_id">
<el-image :src="$img(item.adv_image)" @click="$util.pushToTab(item.adv_url.url)" />
</el-carousel-item>
</el-carousel>
<div class="ns-seckill-time-box" v-if="timeList.length > 0">
<span v-if="timeList.length > 4" class="left-btn el-icon-arrow-left" @click="changeThumbImg('prev')"></span>
<span v-if="timeList.length > 4" class="right-btn el-icon-arrow-right" @click="changeThumbImg('next')"></span>
<div class="ns-seckill-time-list" ref="seckillTime">
<ul class="seckill-time-ul" :style="{ left: thumbPosition + 'px' }">
<!-- 商品缩率图 -->
<li v-for="(item, key) in timeList" :key="key" slot="label" class="seckill-time-li" :class="{ 'selected-tab': seckillId == item.id }" @click="handleSelected(key, item)">
<div>{{ item.seckill_start_time_show + " - " + item.seckill_end_time_show }}</div>
<div v-if="item.type == 'today'">
<p class="em font-size-tag " v-if="!item.isNow">即将开始</p>
<p class="em font-size-tag " v-else-if="item.isNow">抢购中</p>
</div>
<div v-else>
<p>敬请期待</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 商品列表 -->
<div class="ns-seckill-box" v-loading="loading" ref="seckillGoods" v-if="timeList.length > 0 && goodsList.length > 0">
<div class="ns-seckill-title">
<div class="seckill-title-left">
<span class="name">限时秒杀</span>
<span class="desc">限时秒杀，每款限购一件</span>
</div>
<div class="ns-seckill-right" v-show="seckillIndex == index && isTrue && isNoClick == false">
<span>{{ seckillText }}</span>
<count-down class="count-down" v-on:start_callback="countDownS_cb()" v-on:end_callback="countDownE_cb()"
:currentTime="seckillTimeMachine.currentTime" :startTime="seckillTimeMachine.startTime"
:endTime="seckillTimeMachine.endTime" :dayTxt="'：'" :hourTxt="'：'" :minutesTxt="'：'"
:secondsTxt="''">
</count-down>
</div>
</div>
<div>
<div class="goods-list">
<div class="goods" v-for="(item, key) in goodsList" :key="key" @click="toGoodsDetail(item.id)">
<div class="img">
<el-image fit="scale-down" :src="$img(item.goods_image, { size: 'mid' })" lazy @error="imageError(index)"/>
</div>
<div class="name">
<p :title="item.goods_name">{{ item.goods_name }}</p>
</div>
<!-- 价格展示区 -->
<div class="price">
<div class="curr-price">
<span>秒杀价</span>
<span>￥</span>
<span class="main_price">{{ item.seckill_price }}</span>
</div>
<span class="primary_price">￥{{ item.price }}</span>
</div>
<el-button v-if="seckillIndex == index && timeList[index].isNow && shouType == true">立即抢购</el-button>
</div>
</div>
</div>
<div class="pager">
<el-pagination background :pager-count="5" :total="total" prev-text="上一页" next-text="下一页"
:current-page.sync="currentPage" :page-size.sync="pageSize" @size-change="handlePageSizeChange"
@current-change="handleCurrentPageChange" hide-on-single-page></el-pagination>
</div>
</div>
<div class="empty-wrap" v-else-if="!loading">
<img src="~assets/images/goods_empty.png">
<span>暂无正在进行秒杀的商品，<router-link to="/" class="ns-text-color">去首页</router-link>看看吧</span>
</div>
</div>
</template>
<script>
import list from "@/assets/js/promotion/list_seckill.js"
export default {
name: "seckill",
components: {},
mixins: [list]
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/promotion/list_seckill.scss";
</style>
<style lang="scss">
.seckill-time {
.el-tabs__nav-wrap {
height: 56px;
.el-tabs__nav {
height: 56px;
}
.el-tabs__nav-next,
.el-tabs__nav-prev {
line-height: 56px;
}
.el-tabs__item {
width: 150px;
height: 56px;
padding: 0;
}
}
.el-tabs__nav-wrap::after {
height: 0;
}
}
.ns-seckill {
.el-carousel {
.el-image__inner {
width: auto;
}
}
.el-carousel__arrow--right {
right: 60px;
}
.count-down {
span {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
background: #383838;
color: #fff;
border-radius: 6px;
font-size: 20px;
}
}
}
</style>

327
addon/pc/source/os/pages/promotion/seckill/payment/index.vue Executable file
View File

@@ -0,0 +1,327 @@
<template>
<div class="payment-wrap" v-loading="fullscreenLoading">
<!--购买虚拟类商品需填写您的手机号-->
<div class="item-block" v-if="orderPaymentData.is_virtual == 1">
<div class="block-text">购买虚拟类商品需填写您的手机号，以方便商家与您联系</div>
<el-form ref="form" size="mini" class="mobile-wrap" label-width="80px">
<el-form-item label="手机号码">
<el-input placeholder="请输入您的手机号码" maxlength="11" v-model="orderCreateData.member_address.mobile" />
</el-form-item>
</el-form>
</div>
<!--收货地址-->
<div class="item-block" v-if="orderPaymentData.is_virtual == 0">
<div class="block-text">收货地址</div>
<div class="address-list">
<div class="address-item" @click="addAddressShow">
<div class="add-address">
<i class="el-icon-circle-plus-outline"></i>
添加收货地址
</div>
</div>
<div class="address-item" v-for="(item, key) in memberAddress" :key="item.id" :class="addressId == item.id ? 'active' : ''" v-if="key < 3 || (addressShow && key >= 3)">
<div class="address-info">
<div class="options">
<div @click="editAddress(item.id)">编辑</div>
<template v-if="item.is_default == 0">
<el-popconfirm title="确定要删除该地址吗？" @onConfirm="deleteMemberAddress(item.id)">
<div slot="reference">删除</div>
</el-popconfirm>
</template>
</div>
<div class="address-name">{{ item.name }}</div>
<div class="address-mobile" @click="setMemberAddress(item.id)">{{ item.mobile }}</div>
<div class="address-desc" @click="setMemberAddress(item.id)">{{ item.full_address }} {{ item.address }}
</div>
</div>
</div>
<div v-if="memberAddress.length > 3 && !addressShow" @click="addressShow = true" class="el-button--text address-open">
<i class="el-icon-arrow-down"></i>
更多收货地址
</div>
<div class="clear"></div>
</div>
</div>
<!--收货地址添加-->
<el-dialog :title="addressForm.id == 0 ? '添加收货地址' : '编辑收货地址'" :visible.sync="dialogVisible" width="32%">
<el-form ref="form" :rules="addressRules" :model="addressForm" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="addressForm.name" placeholder="收货人姓名" />
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="addressForm.mobile" maxlength="11" placeholder="收货人手机号" />
</el-form-item>
<el-form-item label="电话">
<el-input v-model="addressForm.telephone" placeholder="收货人固定电话（选填）" />
</el-form-item>
<el-form-item class="area" label="地区" prop="area">
<el-row :gutter="10">
<el-col :span="7">
<el-select prop="province" ref="province" v-model="addressForm.province_id" @change="getAddress(1)" placeholder="请选择省">
<el-option label="请选择省" value="0"></el-option>
<el-option v-for="item in pickerValueArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
<el-col :span="7">
<el-select ref="city" prop="city" v-model="addressForm.city_id" @change="getAddress(2)" placeholder="请选择市">
<el-option label="请选择市" value="0"></el-option>
<el-option v-for="item in cityArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
<el-col :span="7">
<el-select ref="district" prop="district" v-model="addressForm.district_id" placeholder="请选择区/县">
<el-option label="请选择区/县" value="0"></el-option>
<el-option v-for="item in districtArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="addressForm.address" placeholder="定位小区、街道、写字楼" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addmemberAddress('form')">确 定</el-button>
</span>
</el-dialog>
<!--使用余额-->
<div class="item-block" v-if="orderPaymentData.member_account.balance_total > 0 && balance_show == 1">
<div class="block-text">是否使用余额</div>
<div class="pay-type-list">
<div class="pay-type-item" :class="orderCreateData.is_balance ? '' : 'active'" @click="useBalance(0)">不使用余额
</div>
<div class="pay-type-item" :class="orderCreateData.is_balance ? 'active' : ''" @click="useBalance(1)">使用余额</div>
<div class="clear"></div>
</div>
</div>
<!-- 支付密码 -->
<el-dialog title="使用余额" :visible.sync="dialogpay" width="350px">
<template v-if="orderPaymentData.member_account.is_pay_password == 0">
<p>为了您的账户安全,请您先设置的支付密码</p>
<p>可到"会员中心","账号安全","支付密码"中设置</p>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogpay = false">暂不设置</el-button>
<el-button size="small" type="primary" @click="setPayPassword">立即设置</el-button>
</span>
</template>
<el-form v-else status-icon ref="ruleForm" label-width="100px">
<el-form-item label="支付密码" class="pay-password-item">
<!--添加一个不可见的input,欺骗浏览器自动填充-->
<el-input type="password" class="pay-password hide-password" :maxlength="6"></el-input>
<el-input type="password" class="pay-password" :maxlength="6" v-model="password" @input="input"></el-input>
</el-form-item>
<p class="ns-text-color forget-password" @click="setPayPassword">忘记密码</p>
</el-form>
</el-dialog>
<!-- 配送方式 -->
<div class="item-block padd-bom-20" v-if="orderPaymentData.delivery.express_type.length > 0">
<div class="block-text">
<span>配送方式</span>
<span class="distribution" v-if="orderCreateData.delivery.delivery_type == 'store'">{{ orderCreateData.delivery.store_name }}</span>
</div>
<div class="pay-type-item" v-for="(item, index) in orderPaymentData.delivery.express_type" :key="index" @click="selectDeliveryType(item)" :class="item.name == orderCreateData.delivery.delivery_type ? 'active' : ''">
{{ item.title }}
</div>
</div>
<!--配送方式 门店 -->
<el-dialog title="选择门店" :visible.sync="dialogStore" width="50%">
<el-table ref="singleTable" :data="storeList" highlight-current-row @row-click="selectStore" class="cursor-pointer">
<el-table-column label="" width="55">
<template slot-scope="scope">
<el-radio v-model="storeRadio" :label="scope.row"><i></i></el-radio>
</template>
</el-table-column>
<el-table-column prop="store_name" label="名称" width="160"></el-table-column>
<el-table-column prop="store_address" label="地址"></el-table-column>
<el-table-column prop="open_date" label="营业时间"></el-table-column>
</el-table>
</el-dialog>
<div class="item-block" v-if="orderPaymentData.invoice">
<div class="block-text">发票信息</div>
<div class="pay-type-list">
<div class="pay-type-item" :class="orderCreateData.is_invoice == 0 ? 'active' : ''" @click="changeIsInvoice">无需发票</div>
<div class="pay-type-item" :class="orderCreateData.is_invoice == 1 ? 'active' : ''" @click="changeIsInvoice">需要发票</div>
<div class="clear"></div>
</div>
<div class="invoice-information" v-if="orderCreateData.is_invoice == 1">
<div class="invoice-title">
<div class="invoice-type-box invoice-title-box">
<span class="invoice-name">发票类型：</span>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_type == 1 ? 'active' : ''" @click="clickType(1)"></i>
<span>纸质</span>
</label>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_type == 2 ? 'active' : ''" @click="clickType(2)"></i>
<span>电子</span>
</label>
</div>
<div class="invoice-type-box invoice-title-box">
<span class="invoice-name">抬头类型：</span>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_title_type == 1 ? 'active' : ''" @click="clickTitleType(1)"></i>
<span>个人</span>
</label>
<label class="invoice-to-type">
<i class="invoice-i-input" :class="orderCreateData.invoice_title_type == 2 ? 'active' : ''" @click="clickTitleType(2)"></i>
<span>企业</span>
</label>
</div>
</div>
<div class="invoice-type-box">
<span class="invoice-name">发票信息：</span>
<div class="invoice-box-form">
<input type="text" placeholder="请填写抬头名称" v-model.trim="orderCreateData.invoice_title" />
<input type="text" placeholder="请填写纳税人识别号" v-model.trim="orderCreateData.taxpayer_number" v-if="orderCreateData.invoice_title_type == 2" />
<input type="text" placeholder="请填写邮寄地址" v-model.trim="orderCreateData.invoice_full_address" v-show="orderCreateData.invoice_type == 1" />
<input type="text" placeholder="请填写邮箱" v-model.trim="orderCreateData.invoice_email" v-show="orderCreateData.invoice_type == 2" />
</div>
</div>
<div class="invoice-condition">
<span class="invoice-name">发票内容：</span>
<div class="invoice-box-form">
<span class="option-item" :key="index" v-for="(item, index) in orderPaymentData.invoice.invoice_content_array" @click="changeInvoiceContent(item)" :class="{ 'color-base-bg active': item == orderCreateData.invoice_content }">
{{ item }}
</span>
</div>
</div>
<div class="invoice-tops">发票内容将以根据税法调整，具体请以展示为准，发票内容显示详细商品名 称及价格信息</div>
</div>
</div>
<!--商品信息-->
<div class="item-block">
<div class="goods-list">
<table>
<tr>
<td width="50%">商品</td>
<td width="12.5%">价格</td>
<td width="12.5%">数量</td>
<td width="12.5%">小计</td>
</tr>
</table>
</div>
</div>
<div>
<div class="item-block" v-if="calculateData">
<div class="goods-list">
<table>
<tr v-for="(goodsItem, goodsIndex) in calculateData.goods_list" :key="goodsIndex">
<td width="50%">
<div class="goods-info">
<div class="goods-info-left">
<router-link :to="{ path: '/sku/' + goodsItem.sku_id }" target="_blank">
<img class="goods-img" :src="$img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(goodsIndex)" />
</router-link>
</div>
<div class="goods-info-right">
<router-link :to="{ path: '/sku/' + goodsItem.sku_id }" target="_blank">
<div class="goods-name">{{ goodsItem.goods_name }}</div>
</router-link>
<!-- 规格 -->
<div class="goods-spec" v-if="goodsItem.sku_spec_format">
<span v-for="(x, i) in goodsItem.sku_spec_format" :key="i">{{ x.spec_value_name }}</span>
</div>
</div>
</div>
</td>
<td width="12.5%" class="goods-price">￥{{ goodsItem.price }}</td>
<td width="12.5%" class="goods-num">{{ goodsItem.num }}</td>
<td width="12.5%" class="goods-money">￥{{ (goodsItem.price * goodsItem.num).toFixed(2) }}</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 活动优惠 -->
<div class="item-block" v-if="promotionInfo">
<div class="block-text">{{ promotionInfo.title }}</div>
<div class="order-cell platform-coupon">
<div class="box ns-text-color" v-html="promotionInfo.content"></div>
</div>
</div>
<!-- 买家留言 -->
<div class="item-block padd-bom-10">
<div class="block-text">买家留言：</div>
<el-input rows="3" type="textarea" placeholder="留言前建议先与商家协调一致" v-model="orderCreateData.buyer_message" class="buyer-message" @input="textarea" maxlength="140" show-word-limit resize="none" />
</div>
<!-- 总计 -->
<div class="item-block" v-if="calculateData">
<div class="order-statistics">
<table>
<tr>
<td align="right">商品金额：</td>
<td align="left">￥{{ calculateData.goods_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.is_virtual == 0 && calculateData.delivery_money > 0">
<td align="right">运费：</td>
<td align="left">￥{{ calculateData.delivery_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.invoice_money > 0">
<td align="right">发票税费<span class="ns-text-color">({{ calculateData.invoice.invoice_rate }}%)</span>：</td>
<td align="left">￥{{ calculateData.invoice_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.invoice_delivery_money > 0">
<td align="right">发票邮寄费：</td>
<td align="left">￥{{ calculateData.invoice_delivery_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.promotion_money > 0">
<td align="right">优惠：</td>
<td align="left">￥{{ calculateData.promotion_money | moneyFormat }}</td>
</tr>
<tr v-if="calculateData.balance_money > 0">
<td align="right">使用余额：</td>
<td align="left">￥{{ calculateData.balance_money | moneyFormat }}</td>
</tr>
</table>
</div>
<div class="clear"></div>
</div>
<!--结算-->
<div class="item-block" v-if="calculateData">
<div class="order-submit">
<div class="order-money">
共{{ calculateData.goods_num }}件，应付金额：
<div class="ns-text-color">￥{{ calculateData.pay_money | moneyFormat }}</div>
</div>
<el-button type="primary" class="el-button--primary" @click="orderCreate">订单结算</el-button>
</div>
<div class="clear"></div>
</div>
</div>
</template>
<script>
import detail from '@/assets/js/promotion/payment_seckill.js';
export default {
name: 'seckill_payment',
mixins: [detail]
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/promotion/payment_seckill.scss';
</style>