123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872 |
- <template>
- <div class="userCenterMyOrderCom">
- <div class="title">
- {{ $t('common.myOrder') }}
- <span style="margin: 0 10px">{{
- $i18n.locale == 'zh' ? '共计' : 'All'
- }}</span>
- <span>{{ this.page.total }}</span>
- <span
- style="color: red; margin-left: 20px; font-weight: 700; font-size: 14px"
- >{{
- $i18n.locale == 'zh'
- ? '下单成功的商品,超过5分钟未支付,系统默认关闭此次交易'
- : 'Please complete the payment within 5 minutes for the goods successfully ordered'
- }}</span
- >
- </div>
- <div class="table">
- <div class="search">
- <span
- :class="{ active: params.search1 === '全部' }"
- @click="activeChange('全部')"
- >{{ $i18n.locale == 'zh' ? '全部' : 'All' }}</span
- >
- <span
- :class="{ active: params.search1 === '待付款' }"
- @click="activeChange('待付款')"
- >{{ $i18n.locale == 'zh' ? '待付款' : 'To be Paid' }}</span
- >
- <span
- :class="{ active: params.search1 === '待发货' }"
- @click="activeChange('待发货')"
- >{{ $i18n.locale == 'zh' ? '待发货' : 'Wait Deliver' }}</span
- >
- <span
- :class="{ active: params.search1 === '待收货' }"
- @click="activeChange('待收货')"
- >{{ $i18n.locale == 'zh' ? '待收货' : 'To Be Received' }}</span
- >
- <span
- :class="{ active: params.search1 === '待评论' }"
- @click="activeChange('待评论')"
- >{{ $i18n.locale == 'zh' ? '待评论' : 'To Be Commented' }}</span
- >
- <span
- :class="{ active: params.search1 === '已完成' }"
- @click="activeChange('已完成')"
- >{{ $i18n.locale == 'zh' ? '已完成' : 'Completed' }}</span
- >
- <span
- :class="{ active: params.search1 === '已取消' }"
- @click="activeChange('已取消')"
- >{{ $i18n.locale == 'zh' ? '已取消' : 'Cancelled' }}</span
- >
- <span
- :class="{ active: params.search1 === '已关闭' }"
- @click="activeChange('已关闭')"
- >{{ $i18n.locale == 'zh' ? '已关闭' : 'Colsed' }}</span
- >
- </div>
- <div v-if="showContent">
- <el-table
- stripe
- :data="
- orderList.filter(
- (data) =>
- !search ||
- data.commodityName.toLowerCase().includes(search.toLowerCase())
- )
- "
- v-loading="loading"
- style="width: 100%"
- height="488"
- :header-cell-style="{ backgroundColor: '#f8f8f8' }"
- >
- <el-table-column
- prop="orderNo"
- align="center"
- :label="$i18n.locale === 'zh' ? '订单编号' : 'OrderID'"
- width="280"
- >
- </el-table-column>
- <el-table-column
- :prop="$i18n.locale === 'zh' ? 'commodityName' : 'commodityNameEn'"
- align="center"
- :label="$i18n.locale === 'zh' ? '商品名称' : 'Trade Name'"
- width="120"
- >
- </el-table-column>
- <el-table-column
- prop="exchangeQuantity"
- align="center"
- :label="$i18n.locale === 'zh' ? '兑换数量' : 'Quantity'"
- width="100"
- >
- </el-table-column>
- <el-table-column
- prop="point"
- align="center"
- :label="
- $i18n.locale === 'zh' ? '兑换要求' : 'Exchange requirements'
- "
- width="100"
- >
- <template slot-scope="scope">
- <span>
- {{ scope.row.point
- }}{{ $i18n.locale === 'zh' ? '积分' : 'Integral' }}
- </span>
- <span v-if="scope.row.price !== 0"
- >+{{ scope.row.price
- }}{{ $i18n.locale === 'zh' ? '元' : 'RMB' }}</span
- >
- </template>
- </el-table-column>
- <el-table-column
- align="center"
- :label="$i18n.locale === 'zh' ? '创建时间' : 'Creation Time'"
- width="200"
- >
- <template slot-scope="scope">
- <div>
- {{ scope.row.createDate | time('YYYY-MM-DD HH:mm:ss') }}
- </div>
- </template>
- </el-table-column>
- <el-table-column
- align="center"
- :label="$i18n.locale === 'zh' ? '操作' : 'Operate'"
- width="180"
- >
- <template slot="header" slot-scope="scope">
- <el-input
- v-model="search"
- size="mini"
- :placeholder="
- $i18n.locale === 'zh' ? '请输入商品名称' : 'Enter The Name'
- "
- clearable
- />
- </template>
- <template slot-scope="scope">
- <el-button
- v-if="scope.row.orderStatus === '0'"
- type="text"
- size="mini"
- style="display: block"
- @click="getDellor(scope.row)"
- >
- {{ $i18n.locale === 'zh' ? '退款' : 'Refund' }}
- </el-button>
- <el-button
- v-if="scope.row.orderStatus === '5'"
- type="text"
- size="mini"
- style="display: block"
- @click="cancelOrderStatus(scope.row)"
- >
- {{ $i18n.locale === 'zh' ? '取消订单' : 'Order Cancel' }}
- </el-button>
- <el-button
- v-if="scope.row.orderStatus === '5'"
- type="text"
- size="mini"
- style="display: block"
- >
- <span
- v-if="scope.row.price == 0"
- @click="payIntetral(scope.row)"
- >{{
- $i18n.locale === 'zh' ? '积分支付' : 'Point payment'
- }}</span
- >
- <span v-else @click="payMoney(scope.row)">{{
- $i18n.locale === 'zh' ? '去付款' : 'Pay'
- }}</span>
- </el-button>
- <el-button
- type="text"
- size="mini"
- style="display: block"
- @click="edit('订单详情', scope.row)"
- >
- {{ $i18n.locale === 'zh' ? '订单详情' : 'Order Detail' }}
- </el-button>
- <el-button
- v-if="scope.row.orderStatus === '2'"
- type="text"
- size="mini"
- style="display: block"
- @click="edit('评价', scope.row)"
- >
- {{ $i18n.locale === 'zh' ? '评价' : 'Evaluate' }}
- </el-button>
- <el-button
- v-if="
- ['2', '4'].includes(scope.row.orderStatus) &&
- scope.row.adaptType === '1'
- "
- type="text"
- size="mini"
- style="display: block"
- @click="download(scope.row)"
- >
- {{ $i18n.locale === 'zh' ? '下载' : ' Download' }}
- </el-button>
- <el-button
- v-if="scope.row.orderStatus === '1'"
- type="text"
- size="mini"
- style="display: block"
- @click="edit('确认收货', scope.row)"
- >
- {{ $i18n.locale === 'zh' ? '确认收货' : 'Confirm Receipt' }}
- </el-button>
- <el-button
- v-if="
- scope.row.orderStatus === '3' || scope.row.orderStatus === '4'
- "
- type="text"
- size="mini"
- style="display: block"
- @click="deleteOrders(scope.row)"
- >
- {{ $i18n.locale === 'zh' ? '删除' : ' Delete' }}
- </el-button>
- <el-button
- v-if="scope.row.orderStatus === '6'"
- type="text"
- size="mini"
- style="display: block"
- @click="deleteOrders(scope.row)"
- >
- {{ $i18n.locale === 'zh' ? '删除' : ' Delete' }}
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- background
- @size-change="
- (val) => {
- page.pageSize = val
- }
- "
- @current-change="
- (val) => {
- page.pageNo = val
- }
- "
- layout="prev, pager, next"
- :total="page.total"
- :current-page="page.pageNo"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="page.pageSize"
- style="text-align: center; margin-top: 20px"
- >
- </el-pagination>
- </div>
- <div v-else style="margin-left: -50px; margin-top: 100px">
- <el-empty
- :description="$i18n.locale === 'zh' ? '暂无数据' : 'No Data'"
- ></el-empty>
- </div>
- </div>
- <!-- 消息提示 -->
- <el-dialog
- :title="
- $i18n.locale === 'zh' ? '请确认操作' : 'Please confirm the operation'
- "
- :visible.sync="dialogVisibleStatusUser"
- width="20%"
- >
- <span>{{ UserTitleText }}</span>
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisibleStatusUser = false">{{
- $i18n.locale === 'zh' ? '取消' : 'Cancel'
- }}</el-button>
- <el-button type="primary" @click="getUserText">{{
- $i18n.locale === 'zh' ? '确定' : 'Sure'
- }}</el-button>
- </span>
- </el-dialog>
- <!-- 选择付款方式 -->
- <el-dialog
- :title="
- $i18n.locale === 'zh'
- ? '请选择付款方式'
- : 'Please select a payment method'
- "
- :visible.sync="dialogVisibleStatus"
- width="35%"
- >
- <div style="width: 100%; display: flex; justify-content: space-evenly">
- <span
- style="
- display: inline-block;
- width: 181px;
- height: 181px;
- overflow: hidden;
- line-height: 181px;
- cursor: pointer;
- "
- @click="getPayDellor('1')"
- ><img src="@/assets/userpay3.png" alt="" style="width: 100%"
- /></span>
- <!-- <span
- style="
- display: inline-block;
- width: 181px;
- height: 181px;
- line-height: 181px;
- cursor: pointer;
- "
- @click="getPayDellor('2')"
- ><img src="@/assets/userpay.png" alt="" style="width: 100%"
- /></span> -->
- <!-- <span
- style="
- display: inline-block;
- width: 181px;
- height: 181px;
- line-height: 181px;
- cursor: pointer;
- "
- @click="getPayDellor('3')"
- ><img
- src="@/assets/userpay2.png"
- alt=""
- style="width: 100%; line-height: 181px"
- /></span> -->
- </div>
- </el-dialog>
- <!-- 订单确认 -->
- <el-dialog
- :title="$i18n.locale === 'zh' ? '订单确认' : 'Order Confirmation'"
- :visible.sync="dialogVisible"
- width="20%"
- :before-close="dialogBeforeClose"
- >
- <div>
- {{ $i18n.locale === 'zh' ? '是否确认收货' : 'Confirm Receipt' }}
- </div>
- <div slot="footer">
- <el-button @click="dialogVisible = false">{{
- $i18n.locale === 'zh' ? '取 消' : 'Cancel'
- }}</el-button>
- <el-button type="primary" @click="orderconfirm">{{
- $i18n.locale === 'zh' ? '确 定' : 'Determine'
- }}</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import moment from 'moment'
- import {
- cancelGoodsOrders,
- toObtainListOrder,
- orderConfirmation,
- deleteOrders,
- getMoney,
- getMoneyStatus,
- } from '@/api/user'
- import { gatResearchResultView } from '@/api/research/baseResearchResultView'
- import { getToken } from '@/api/token'
- export default {
- name: 'userCenterMyOrderCom',
- data() {
- return {
- valueStatus: {},
- booleanFlag: {},
- user: {
- umsUser: {},
- },
- loading: true,
- params: {
- search1: '全部',
- search2: '',
- },
- page: {
- pageNo: 1,
- pageSize: 10,
- total: 0,
- },
- orderList: [],
- search: '',
- dialogVisible: false,
- dialogVisibleStatus: false,
- dialogVisibleStatusUser: false,
- userTimeNum: 0,
- userInfoDtua: '',
- userTypeStua: '',
- UserTitleText: '',
- orderconfirmId: '',
- evaluationId: {},
- showContent: false,
- }
- },
- filters: {
- twoDecimal(value) {
- return parseFloat(String(value)).toFixed(2)
- },
- time(date, type) {
- return moment(date).format(type)
- },
- },
- watch: {
- page: {
- handler: function () {
- this.loading = true
- this.getUserOrderPage()
- this.toObtainListOrder()
- },
- deep: true,
- },
- params: {
- handler: function () {
- this.loading = true
- this.toObtainListOrder()
- },
- deep: true,
- },
- },
- mounted() {
- this.init()
- },
- methods: {
- deleteOrders(val) {
- this.dialogVisibleStatusUser = true
- this.userInfoDtua = val
- this.userTypeStua = '3'
- if (this.$i18n.locale === 'zh') {
- this.UserTitleText = '确定删除次订单吗?'
- } else {
- this.UserTitleText = 'Are you sure to delete this order?'
- }
- },
- //删除订单
- deleteUserOrder() {
- let val = this.userInfoDtua
- getToken().then((res) => {
- deleteOrders(val.id, res.data)
- .then((res) => {
- if (res.status === '200')
- this.$message({
- message:
- this.$i18n.locale == 'zh'
- ? '删除订单成功'
- : 'Order deleted successfully',
- type: 'success',
- })
- console.log(res)
- this.init()
- })
- .catch((error) => {
- console.log(error)
- this.$message({
- message:
- this.$i18n.locale == 'zh'
- ? '删除订单失败'
- : 'Order deleted error',
- type: 'error',
- })
- })
- })
- },
- download(val) {
- let data = {
- reserveFour: val.commodityId,
- language: this.$i18n.locale.toUpperCase(),
- }
- gatResearchResultView(data).then((res) => {
- let url = ''
- let name = ''
- if (res.data.baseResearchResultView) {
- url = res.data.baseResearchResultView.researchResultFile
- name = res.data.baseResearchResultView.name
- }
- const link = document.createElement('a')
- link.href = 'api/file/pub/' + url
- link.download = name //下载的文件名
- link.click()
- })
- },
- init() {
- this.user = JSON.parse(window.localStorage.getItem('user'))
- if (this.user.umsUser.userPic == undefined) {
- this.user.umsUser.userPic = ''
- }
- this.getUserOrderPage()
- this.toObtainListOrder()
- },
- getUserOrderPage() {
- setTimeout(() => {
- this.loading = false
- }, 500)
- },
- activeChange(value) {
- this.params.search1 = value
- this.page.pageNo = 1
- this.getUserOrderPage()
- },
- topUp() {
- alert('topUp()')
- },
- edit(type, data) {
- console.log(data)
- switch (type) {
- case '付款':
- break
- case '评价':
- console.log('评价')
- this.$router.push({
- path: '/userCenterMyOrderEvaluate',
- query: { key: data },
- })
- // this.dialogVisible = true;
- this.orderconfirmId = data.id
- this.evaluation = data
- break
- case '确认收货':
- this.dialogVisible = true
- this.orderconfirmId = data.id
- this.evaluation = data
- break
- case '取消订单':
- break
- case '删除订单':
- break
- case '订单详情':
- window.localStorage.setItem('orderDetail', JSON.stringify(data))
- this.$router.push({
- path: '/userCenterMyOrderDetails',
- // query: { key: data },
- })
- break
- }
- },
- // 获取订单列表
- toObtainListOrder() {
- let param = {
- pageSize: this.page.pageSize,
- pageNo: this.page.pageNo,
- userId: this.user.userId,
- }
- if (this.params.search1 == '待发货') {
- param.orderStatus = 0
- }
- if (this.params.search1 == '待收货') {
- param.orderStatus = 1
- }
- if (this.params.search1 == '待评论') {
- param.orderStatus = 2
- }
- if (this.params.search1 == '已取消') {
- param.orderStatus = 3
- }
- if (this.params.search1 == '已完成') {
- param.orderStatus = 4
- }
- if (this.params.search1 == '待付款') {
- param.orderStatus = 5
- }
- if (this.params.search1 == '已关闭') {
- param.orderStatus = 6
- }
- toObtainListOrder(param)
- .then((res) => {
- var data = res.data
- if (JSON.stringify(data) !== '{}') {
- this.showContent = true
- this.orderList = res.data.umsPointCommodityOrders
- this.page.total = Number(res.data.page.totalCount)
- } else {
- this.showContent = false
- this.page.total = 0
- }
- })
- .then(() => {
- this.loading = false
- })
- .catch(() => {
- this.loading = false
- })
- },
- // 订单确认
- orderconfirm() {
- this.dialogVisible = false
- getToken().then((res) => {
- orderConfirmation(this.orderconfirmId, res.data).then((res) => {
- if (res.status == '200') {
- this.$message({
- message:
- this.$i18n.locale == 'zh'
- ? '确认收货成功'
- : 'Confirm Receipt Succeeded',
- type: 'success',
- })
- this.init()
- }
- })
- })
- },
- //支付状态调用
- getUserInStau() {
- getMoneyStatus(this.valueStatus.orderNo)
- .then((res) => {
- if (res.data.payStatus == '1') {
- this.$router.go(0)
- } else {
- if (this.userTimeNum < 36) {
- setTimeout(() => {
- this.getUserInStau()
- this.userTimeNum += 1
- // console.log(this.userTimeNum)
- }, 5000)
- } else {
- this.$router.go(0)
- }
- }
- })
- .catch((error) => {
- console.log(error.msg)
- })
- },
- //支付调用
- getPayDellor(num) {
- this.getUserInStau()
- if (this.valueStatus.price == 0) {
- } else {
- if (num == 1) {
- let orderId = this.valueStatus.orderNo
- let payType = 'alipay'
- getToken().then((res) => {
- getMoney(orderId, payType, res.data)
- .then((res) => {
- if (res.status == 200) {
- let paramsUser = res.data.htmlPath
- window.open(paramsUser, '_blank')
- } else {
- this.$message.error(res.msg)
- }
- })
- .catch((error) => {
- this.$message.error(error.msg)
- })
- })
- } else if (num == 2) {
- let orderId = this.valueStatus.orderNo
- let payType = 'wechatpay'
- getToken().then((res) => {
- getMoney(orderId, payType, res.data)
- .then((res) => {
- if (res.status == 200) {
- let paramsUser = res.data.htmlPath
- window.open(paramsUser, '_blank')
- } else {
- this.$message.error(res.msg)
- }
- })
- .catch((error) => {
- this.$message.error(error.msg)
- })
- })
- } else if (num == 3) {
- let orderId = this.valueStatus.orderNo
- let payType = 'unionpay'
- getToken().then((res) => {
- getMoney(orderId, payType, res.data)
- .then((res) => {
- if (res.status == 200) {
- let paramsUser = res.data.htmlPath
- window.open(paramsUser, '_blank')
- } else {
- this.$message.error(res.msg)
- }
- })
- .catch((error) => {
- this.$message.error(error.msg)
- })
- })
- } else {
- let orderId = this.valueStatus.orderNo
- let payType = 'otherpay'
- getToken().then((res) => {
- getMoney(orderId, payType, res.data)
- .then((res) => {
- if (res.status == 200) {
- let paramsUser = res.data.htmlPath
- window.open(paramsUser, '_blank')
- } else {
- this.$message.error(res.msg)
- }
- })
- .catch((error) => {
- this.$message.error(error.msg)
- })
- })
- }
- }
- this.dialogVisibleStatus = false
- },
- //积分支付
- payIntetral(value) {
- this.dialogVisibleStatusUser = true
- this.valueStatus = value
- this.userTypeStua = '4'
- if (this.$i18n.locale === 'zh') {
- this.UserTitleText = '确定支付吗?'
- } else {
- this.UserTitleText = 'Are you sure to pay?'
- }
- },
- getIntetralUser() {
- let orderId = this.valueStatus.orderNo
- let payType = 'pointpay'
- getToken().then((res) => {
- getMoney(orderId, payType, res.data)
- .then((res) => {
- if (res.status == '200') {
- if (this.$i18n.locale === 'zh') {
- this.$message.success('支付成功')
- } else {
- this.$message.success('Payment succeeded')
- }
- this.init()
- }
- })
- .catch((error) => {
- this.$message.error(error.msg)
- })
- })
- },
- //付款
- payMoney(value) {
- this.dialogVisibleStatus = true
- this.valueStatus = value
- },
- //退款
- getDellor(value) {
- this.dialogVisibleStatusUser = true
- if (this.$i18n.locale === 'zh') {
- this.UserTitleText = '确定发起退款吗?'
- } else {
- this.UserTitleText = 'Are you sure to initiate refund?'
- }
- this.userTypeStua = '1'
- this.userInfoDtua = value
- },
- //退款操作
- getMoreMoney() {
- console.log('退不了,爱要不要')
- },
- //提示确定按钮
- getUserText() {
- this.dialogVisibleStatusUser = false
- if (this.userTypeStua == '2') {
- this.cancelOrder()
- }
- if (this.userTypeStua == '1') {
- this.getMoreMoney()
- }
- if (this.userTypeStua == '3') {
- this.deleteUserOrder()
- }
- if (this.userTypeStua == '4') {
- this.getIntetralUser()
- }
- },
- // 取消订单
- cancelOrderStatus(data) {
- this.dialogVisibleStatusUser = true
- if (this.$i18n.locale === 'zh') {
- this.UserTitleText = '确认取消订单?'
- } else {
- this.UserTitleText = 'Confirm Cancel Order?'
- }
- this.userTypeStua = '2'
- this.userInfoDtua = data
- },
- //取消订单操作
- cancelOrder() {
- let data = this.userInfoDtua
- getToken().then((res) => {
- cancelGoodsOrders(data.id, res.data)
- .then((res) => {
- if (res.status === '200')
- this.$message({
- message:
- this.$i18n.locale == 'zh'
- ? '取消订单成功'
- : 'Order cancelled successfully',
- type: 'success',
- })
- console.log(res)
- this.init()
- })
- .catch((error) => {
- console.log(error)
- this.$message({
- message:
- this.$i18n.locale == 'zh'
- ? '取消订单失败'
- : 'Order cancelled error',
- type: 'error',
- })
- })
- })
- },
- dialogBeforeClose() {
- this.dialogVisible = false
- },
- },
- }
- </script>
- <style scoped lang="less">
- /deep/.el-dialog {
- display: flex;
- flex-direction: column;
- margin: 0 !important;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- max-height: calc(100% - 30px);
- max-width: calc(100% - 30px);
- }
- .userCenterMyOrderCom {
- .title {
- height: 60px;
- line-height: 60px;
- padding-top: 30px;
- margin-left: 30px;
- margin-right: 30px;
- border-bottom: 1px solid rgba(228, 228, 228, 1);
- }
- .search {
- font-size: 14px;
- font-weight: 600;
- height: 70px;
- line-height: 70px;
- span {
- cursor: pointer;
- margin: 0 20px;
- &.active {
- color: #60aae3;
- }
- }
- }
- .table {
- padding-bottom: 30px;
- /deep/ .el-button {
- margin: 0 auto;
- }
- /deep/ .el-button + .el-button {
- margin: 5px auto 0;
- }
- }
- }
- </style>
|