123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774 |
- <template>
- <view :style="colorStyle">
- <view class='order-submission'>
- <view class="allAddress" :style="store_self_mention ? '':'padding-top:10rpx'">
- <view class='address acea-row row-between-wrapper' @tap='onAddress' v-if='shippingType == 0'>
- <view class='addressCon' v-if="addressInfo.real_name">
- <view class='name'>{{addressInfo.real_name}}
- <text class='phone'>{{addressInfo.phone}}</text>
- </view>
- <view class="line1">
- <text class='default font-num'
- v-if="addressInfo.is_default">{{$t(`[默认]`)}}</text>{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{addressInfo.detail}}
- </view>
-
- </view>
- <view class='addressCon' v-else>
- <view class='setaddress'>{{$t(`设置收货地址`)}}</view>
- </view>
- <view class='iconfont icon-jiantou'></view>
- </view>
- <view class='line'>
- <image src='/static/images/line.jpg'></image>
- </view>
- </view>
- <view class="orderGoods">
- <view class='total'>{{$t(`共`)}}{{resData.num}}{{$t(`件商品`)}}</view>
- <view class='goodWrapper'>
- <view class='item acea-row row-between-wrapper' @click="jumpCon(cartInfo.product_id)">
- <view class='pictrue'>
- <image :src='cartInfo.image'></image>
- </view>
- <view class='text'>
- <view class='acea-row row-between-wrapper'>
- <view class='name line1'>{{cartInfo.store_name}}</view>
- <view class='num'>x {{resData.num}}</view>
- </view>
- <view class='attr line1' v-if="cartInfo.suk">{{cartInfo.suk}}
- </view>
- <view class='money font-color'>
- {{cartInfo.price}} {{$t(`积分`)}}
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class='wrapper'>
- <view class='item acea-row row-between-wrapper'>
- <view>{{$t(`可用积分`)}}</view>
- <view class='discount'>{{resData.integral}}
- </view>
- </view>
- <view class='item acea-row row-between-wrapper'>
- <view>{{$t(`快递费用`)}}</view>
- <view class='discount'>{{$t(`免运费`)}}
- </view>
- </view>
- <view class='item' v-if="textareaStatus">
- <view>{{$t(`备注信息`)}}</view>
- <view class="placeholder-textarea">
- <textarea ref='getFocus' v-if="coupon.coupon===false" :focus="textFocus" @input='bindHideKeyboard' value=""
- name="mark">
- </textarea>
- <view class="placeholder" @click="clickTextArea" v-show="!mark">
- {{$t(`请添加备注(150字以内)`)}}
- </view>
- </view>
- </view>
- </view>
- <view style='height:120rpx;'></view>
- <view class='footer acea-row row-between-wrapper'>
- <view>{{$t(`合计`)}}:
- <text class='font-color'>{{resData.total_price || 0}}{{$t(`积分`)}}</text>
- </view>
- <view class='settlement' style='z-index:100' @tap="goPay">{{$t(`立即兑换`)}}</view>
- </view>
- </view>
- <view class="alipaysubmit" v-html="formContent"></view>
- <couponListWindow :coupon='coupon' @ChangCouponsClone="ChangCouponsClone" :openType='openType' :cartId='cartId'
- @ChangCoupons="ChangCoupons"></couponListWindow>
- <addressWindow ref="addressWindow" @changeTextareaStatus="changeTextareaStatus" :news='news' :address='address'
- :pagesUrl="pagesUrl" @OnChangeAddress="OnChangeAddress" @changeClose="changeClose"></addressWindow>
-
-
-
- <home v-show="!invShow"></home>
- </view>
- </template>
- <script>
- import {
- integralOrderConfirm,
- integralOrderCreate,
- } from '@/api/activity.js';
- import {
- getAddressDefault,
- getAddressDetail,
- invoiceList,
- invoiceOrder
- } from '@/api/user.js';
- import {
- storeListApi
- } from '@/api/store.js';
- import {
- CACHE_LONGITUDE,
- CACHE_LATITUDE
- } from '@/config/cache.js';
- import couponListWindow from '@/components/couponListWindow';
- import addressWindow from '@/components/addressWindow';
- import orderGoods from '@/components/orderGoods';
- import home from '@/components/home';
- import {
- toLogin
- } from '@/libs/login.js';
- import {
- mapGetters
- } from "vuex";
-
- import authorize from '@/components/Authorize';
-
- import colors from "@/mixins/color";
- export default {
- components: {
- couponListWindow,
- addressWindow,
- orderGoods,
- home,
-
- authorize
-
- },
- mixins: [colors],
- data() {
- return {
- textFocus:false,
- textareaStatus: true,
-
- cartArr: [{
- "name": this.$t(`微信支付`),
- "icon": "icon-weixin2",
- value: 'weixin',
- title: this.$t(`使用微信快捷支付`),
- payStatus: 1,
- },
- {
- "name": this.$t(`支付宝支付`),
- "icon": "icon-zhifubao",
- value: 'alipay',
- title: this.$t(`使用线上支付宝支付`),
- payStatus: 1,
- },
- {
- "name": this.$t(`余额支付`),
- "icon": "icon-yuezhifu",
- value: 'yue',
- title: this.$t(`可用余额:`),
- payStatus: 1,
- },
- {
- "name": this.$t(`线下支付`),
- "icon": "icon-yuezhifu1",
- value: 'offline',
- title: this.$t(`选择线下付款方式`),
- payStatus: 2,
- }
- ],
- formContent: '',
- payType: 'weixin',
- openType: 1,
- active: 0,
- coupon: {
- coupon: false,
- list: [],
- statusTile: this.$t(`立即使用`)
- },
- address: {
- address: false
- },
- addressInfo: {},
- pinkId: 0,
- addressId: 0,
- couponId: 0,
- cartId: '',
- BargainId: 0,
- combinationId: 0,
- seckillId: 0,
- userInfo: {},
- coupon_price: 0,
- useIntegral: false,
- integral_price: 0,
- integral: 0,
- ChangePrice: 0,
- formIds: [],
- status: 0,
- is_address: false,
- toPay: false,
- shippingType: 0,
- system_store: {},
- storePostage: 0,
- contacts: '',
- contactsTel: '',
- mydata: {},
- storeList: [],
- store_self_mention: 0,
- cartInfo: {},
- priceGroup: {},
- animated: false,
- totalPrice: 0,
- integralRatio: "0",
- pagesUrl: "",
- orderKey: "",
-
- offlinePostage: "",
- isAuto: false,
- isShowAuth: false,
- from: '',
- news: 1,
- invTitle: this.$t(`不开发票`),
- special_invoice: false,
- invoice_func: false,
- header_type: '',
- invShow: false,
- invList: [],
- invChecked: '',
- urlQuery: '',
- pay_close: false,
- resData: {},
- mark: ''
- };
- },
- computed: mapGetters(['isLogin']),
- onLoad: function(options) {
-
- this.from = this.$wechat.isWeixin() ? 'weixin' : 'weixinh5'
-
-
- this.from = 'routine'
-
- if (!options.unique) return this.$util.Tips({
- title: this.$t(`请选择要购买的商品`)
- }, {
- tab: 3,
- url: 1
- });
- this.unique = options.unique
- this.num = options.num
- this.couponId = options.couponId || 0;
- this.pinkId = options.pinkId ? parseInt(options.pinkId) : 0;
- this.addressId = options.addressId || 0;
- this.cartId = options.cartId;
- this.is_address = options.is_address ? true : false;
- this.news = !options.new || options.new === '0' ? 0 : 1;
- this.invChecked = options.invoice_id || '';
- this.header_type = options.header_type || '1';
- this.couponTitle = options.couponTitle || this.$t(`请选择`)
-
- this.textareaStatus = true;
-
- if (this.isLogin && this.toPay == false) {
- this.getaddressInfo();
- this.getConfirm();
- this.$nextTick(function() {
- this.$refs.addressWindow.getAddressList();
- })
- } else {
- toLogin();
- }
- },
-
- onShow: function() {
- let _this = this
- uni.$on("handClick", res => {
- if (res) {
- _this.system_store = res.address
- }
-
- uni.$off('handClick');
- })
- },
- methods: {
- getInvoiceList() {
- uni.showLoading({
- title: this.$t(`正在加载…`)
- })
- invoiceList().then(res => {
- uni.hideLoading();
- this.invList = res.data.map(item => {
- item.id = item.id.toString();
- return item;
- });
- const result = this.invList.find(item => item.id == this.invChecked);
- if (result) {
- let name = '';
- name += result.header_type === 1 ? this.$t(`个人`) : this.$t(`企业`);
- name += result.type === 1 ? this.$t(`普通`) : this.$t(`专用`);
- name += this.$t(`发票`);
- this.invTitle = name;
- }
- }).catch(err => {
- uni.showToast({
- title: err,
- icon: 'none'
- });
- });
- },
-
- onChangeFun: function(e) {
- let opt = e;
- let action = opt.action || null;
- let value = opt.value != undefined ? opt.value : null;
- action && this[action] && this[action](value);
- },
- payClose: function() {
- this.pay_close = false;
- },
- goPay() {
- let that = this
- if (!that.addressId) {
- return that.$util.Tips({
- title: that.$t(`请选择收货地址`)
- });
- }
- if (parseFloat(that.resData.integral) < parseFloat(that.cartInfo.price))
- return that.$util.Tips({
- title: that.$t(`可用积分不足!`)
- });
- let data = {
- addressId: that.addressId,
- mark: that.mark,
- unique: this.cartInfo.unique,
- num: this.resData.num
- }
- integralOrderCreate(data).then(res => {
- uni.redirectTo({
- url: `/pages/points_mall/integral_order_status?order_id=${res.data.result.orderId}`
- })
- }).catch(err => {
- uni.hideLoading();
- return that.$util.Tips({
- title: err
- });
- });
- },
-
- changeClose: function() {
- this.$set(this.address, 'address', false);
- },
- computedPrice: function() {
- let shippingType = this.shippingType;
- postOrderComputed(this.orderKey, {
- addressId: this.addressId,
- useIntegral: this.useIntegral ? 1 : 0,
- couponId: this.couponId,
- shipping_type: parseInt(shippingType) + 1,
- payType: this.payType
- }).then(res => {
- let result = res.data.result;
- if (result) {
- this.totalPrice = result.pay_price;
- this.integral_price = result.deduction_price;
- this.coupon_price = result.coupon_price;
- this.integral = this.useIntegral ? result.SurplusIntegral : this.userInfo.integral;
- this.$set(this.priceGroup, 'storePostage', shippingType == 1 ? 0 : result.pay_postage);
- this.$set(this.priceGroup, 'storePostageDiscount', result.storePostageDiscount);
- }
- })
- },
- ChangCouponsClone: function() {
- this.$set(this.coupon, 'coupon', false);
- },
- changeTextareaStatus: function() {
- for (let i = 0, len = this.coupon.list.length; i < len; i++) {
- this.coupon.list[i].use_title = '';
- this.coupon.list[i].is_use = 0;
- }
- this.textareaStatus = true;
- this.status = 0;
- this.$set(this.coupon, 'list', this.coupon.list);
- },
- /**
- * 选择地址后改变事件
- * @param object e
- */
- OnChangeAddress: function(e) {
- this.textareaStatus = true;
- this.addressId = e;
- this.address.address = false;
- this.getaddressInfo();
- },
- bindHideKeyboard: function(e) {
- this.mark = e.detail.value;
- },
-
- getConfirm: function() {
- let that = this;
-
- integralOrderConfirm({
- unique: this.unique,
- num: this.num
- }).then(res => {
- that.$set(that, 'resData', res.data);
- that.$set(that, 'cartInfo', res.data.productInfo);
- }).catch(err => {
- return this.$util.Tips({
- title: err
- });
- });
- },
-
- getBargainId: function() {
- let that = this;
- let cartINfo = that.cartInfo;
- let BargainId = 0;
- let combinationId = 0;
- cartINfo.forEach(function(value, index, cartINfo) {
- BargainId = cartINfo[index].bargain_id,
- combinationId = cartINfo[index].combination_id
- })
- that.$set(that, 'BargainId', parseInt(BargainId));
- that.$set(that, 'combinationId', parseInt(combinationId));
- if (that.cartArr.length == 3 && (BargainId || combinationId || that.seckillId)) {
- that.cartArr[2].payStatus = 0;
- that.$set(that, 'cartArr', that.cartArr);
- }
- },
- /*
- * 获取默认收货地址或者获取某条地址信息
- */
- getaddressInfo: function() {
- let that = this;
- if (that.addressId) {
- getAddressDetail(that.addressId).then(res => {
- res.data.is_default = parseInt(res.data.is_default);
- that.addressInfo = res.data || {};
- that.addressId = res.data.id || 0;
- that.address.addressId = res.data.id || 0;
- })
- } else {
- getAddressDefault().then(res => {
- res.data.is_default = parseInt(res.data.is_default);
- that.addressInfo = res.data || {};
- that.addressId = res.data.id || 0;
- that.address.addressId = res.data.id || 0;
- })
- }
- },
- couponTap: function() {
- this.coupon.coupon = true;
- this.coupon.list.forEach((item, index) => {
- if (item.id == this.couponId) {
- item.is_use = 1
- } else {
- item.is_use = 0
- }
- })
- this.$set(this.coupon, 'list', this.coupon.list);
- },
- car: function() {
- let that = this;
- that.animated = false;
- },
- onAddress: function() {
- let that = this;
- that.textareaStatus = false;
- that.address.address = true;
- that.pagesUrl = `/pages/points_mall/user_address?unique=${this.unique}&num=${this.num}`
- },
- clickTextArea() {
- this.textFocus = true
-
-
-
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- /deep/uni-checkbox[disabled] .uni-checkbox-input {
- background-color: #eee;
- }
- .alipaysubmit {
- display: none;
- }
- .order-submission .line {
- width: 100%;
- height: 3rpx;
- }
- .order-submission .line image {
- width: 100%;
- height: 100%;
- display: block;
- }
- .order-submission .address {
- padding: 28rpx 30rpx;
- background-color: #fff;
- box-sizing: border-box;
- }
- .order-submission .address .addressCon {
- width: 610rpx;
- font-size: 26rpx;
- color: #666;
- }
- .order-submission .address .addressCon .name {
- font-size: 30rpx;
- color: #282828;
- font-weight: bold;
- margin-bottom: 10rpx;
- }
- .order-submission .address .addressCon .name .phone {
- margin-left: 50rpx;
- }
- .order-submission .address .addressCon .default {
- margin-right: 12rpx;
- }
- .order-submission .address .addressCon .setaddress {
- color: #333;
- font-size: 28rpx;
- }
- .order-submission .address .iconfont {
- font-size: 35rpx;
- color: #707070;
- }
- .order-submission .allAddress {
- width: 100%;
- background: linear-gradient(to bottom, var(--view-theme) 0%, #f5f5f5 100%);
- padding-top: 100rpx;
- }
- .order-submission .allAddress .nav {
- width: 710rpx;
- margin: 0 auto;
- }
- .order-submission .allAddress .nav .item {
- width: 355rpx;
- }
- .order-submission .allAddress .nav .item.on {
- position: relative;
- width: 250rpx;
- }
- .order-submission .allAddress .nav .item.on::before {
- position: absolute;
- bottom: 0;
- content: "快递配送";
- font-size: 28rpx;
- display: block;
- height: 0;
- width: 336rpx;
- border-width: 0 20rpx 80rpx 0;
- border-style: none solid solid;
- border-color: transparent transparent #fff;
- z-index: 2;
- border-radius: 7rpx 30rpx 0 0;
- text-align: center;
- line-height: 80rpx;
- }
- .order-submission .allAddress .nav .item:nth-of-type(2).on::before {
- content: "到店自提";
- border-width: 0 0 80rpx 20rpx;
- border-radius: 30rpx 7rpx 0 0;
- }
- .order-submission .allAddress .nav .item.on2 {
- position: relative;
- }
- .order-submission .allAddress .nav .item.on2::before {
- position: absolute;
- bottom: 0;
- content: "到店自提";
- font-size: 28rpx;
- display: block;
- height: 0;
- width: 400rpx;
- border-width: 0 0 60rpx 60rpx;
- border-style: none solid solid;
- border-color: transparent transparent #f7c1bd;
- border-radius: 40rpx 6rpx 0 0;
- text-align: center;
- line-height: 60rpx;
- }
- .order-submission .allAddress .nav .item:nth-of-type(1).on2::before {
- content: "快递配送";
- border-width: 0 60rpx 60rpx 0;
- border-radius: 6rpx 40rpx 0 0;
- }
- .order-submission .allAddress .address {
- width: 710rpx;
- height: 150rpx;
- margin: 0 auto;
- }
- .order-submission .allAddress .line {
- width: 710rpx;
- margin: 0 auto;
- }
- .order-submission .wrapper .item .discount .placeholder {
- color: #ccc;
- }
- .placeholder-textarea {
- position: relative;
- .placeholder {
- position: absolute;
- color: #ccc;
- top: 26rpx;
- left: 30rpx;
- }
- }
- .order-submission .wrapper {
- background-color: #fff;
- margin-top: 13rpx;
- }
- .order-submission .wrapper .item {
- padding: 27rpx 30rpx;
- font-size: 30rpx;
- color: #282828;
- border-bottom: 1px solid #f0f0f0;
- }
- .order-submission .wrapper .item .discount {
- font-size: 30rpx;
- color: #999;
- }
- .order-submission .wrapper .item .discount input {
- text-align: end;
- }
- .order-submission .wrapper .item .discount .iconfont {
- color: #515151;
- font-size: 30rpx;
- margin-left: 15rpx;
- }
- .order-submission .wrapper .item .discount .num {
- font-size: 32rpx;
- margin-right: 20rpx;
- }
- .order-submission .wrapper .item .shipping {
- font-size: 30rpx;
- color: #999;
- position: relative;
- padding-right: 58rpx;
- }
- .order-submission .wrapper .item .shipping .iconfont {
- font-size: 35rpx;
- color: #707070;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- margin-left: 30rpx;
- }
- .order-submission .wrapper .item textarea {
- background-color: #f9f9f9;
- width: 690rpx;
- height: 140rpx;
- border-radius: 3rpx;
- margin-top: 30rpx;
- padding: 25rpx 28rpx;
- box-sizing: border-box;
- }
- .order-submission .wrapper .item .placeholder {
- color: #ccc;
- }
- .order-submission .wrapper .item .list {
- margin-top: 35rpx;
- }
- .order-submission .moneyList {
- margin-top: 12rpx;
- background-color: #fff;
- padding: 30rpx;
- }
- .order-submission .moneyList .item {
- font-size: 28rpx;
- color: #282828;
- }
- .order-submission .moneyList .item~.item {
- margin-top: 20rpx;
- }
- .order-submission .moneyList .item .money {
- color: #868686;
- }
- .order-submission .footer {
- width: 100%;
- height: 100rpx;
- background-color: #fff;
- padding: 0 30rpx;
- font-size: 28rpx;
- color: #333;
- box-sizing: border-box;
- position: fixed;
- bottom: 0;
- left: 0;
- }
- .order-submission .footer .settlement {
- font-size: 30rpx;
- color: #fff;
- width: 240rpx;
- height: 70rpx;
- background-color: var(--view-theme);
- border-radius: 50rpx;
- text-align: center;
- line-height: 70rpx;
- }
- .footer .transparent {
- opacity: 0
- }
- .orderGoods {
- background-color: #fff;
- margin-top: 12rpx;
- }
- .orderGoods .total {
- width: 100%;
- height: 86rpx;
- padding: 0 30rpx;
- border-bottom: 2rpx solid #f0f0f0;
- font-size: 30rpx;
- color: #282828;
- line-height: 86rpx;
- box-sizing: border-box;
- }
- .pictrue image {
- width: 130rpx;
- height: 130rpx;
- }
- </style>
|