722 lines
14 KiB
Vue
722 lines
14 KiB
Vue
<!-- 兑换商城详情 -->
|
||
<template>
|
||
<view class="uninavbar" @click="returnTo()">
|
||
<image src="../../static/images/sign/return.png"></image>
|
||
</view>
|
||
<view>
|
||
<image :src="bindIcon(SignProductList[0].coverPic)"></image>
|
||
</view>
|
||
|
||
<view style="background-color: #ffffff; overflow-x: hidden;">
|
||
<view style="margin-left: 32rpx; margin-right: 32rpx;">
|
||
<view style="margin-top: 33rpx;">
|
||
<image class="nv-image" src="../../static/images/sign/one.png"></image>
|
||
<text class="nv-text">{{SignProductList[0].goldCoin}}</text>
|
||
<text class="nv-ku">库存{{SignProductList[0].inventory}}</text>
|
||
</view>
|
||
|
||
<view>
|
||
<text class="nv-con">{{SignProductList[0].title}}</text>
|
||
</view>
|
||
|
||
<view style="
|
||
width: 750rpx;
|
||
height: 8rpx;
|
||
background: #faf9fa;
|
||
margin-top: 28rpx;
|
||
"></view>
|
||
|
||
<view style="margin-top: 24rpx;">
|
||
<text class="nv-r">兑换规则</text>
|
||
</view>
|
||
|
||
<view style="margin-top: 24rpx;">
|
||
<p>
|
||
(1)活动参与:通过参加我们组织的促销活动、问卷调查或者签到等方式可以获得积分。不同活动的积分奖励数额会有所不同，请您注意查看活动规则。
|
||
</p>
|
||
<p>
|
||
(2)消费累积:您在我们的商城购物进行支付时，将会根据您的消费额度累积相应的积分。具体积分累积规则可以在购物时的结算界面或活动页面上获得。
|
||
</p>
|
||
<p>
|
||
(3)推荐好友:通过邀请好友注册、购物等方式参与我们的服务，您可以获得定的积分奖励。请注意，为了避免滥用行为，我们可能会对邀请积分进行限制或验证。
|
||
</p>
|
||
</view>
|
||
|
||
|
||
<view style="
|
||
width: 750rpx;
|
||
height: 8rpx;
|
||
background: #faf9fa;
|
||
margin-top: 25rpx;
|
||
"></view>
|
||
|
||
<view style="margin-top: 30rpx;">
|
||
<text style="
|
||
font-weight: Regular;
|
||
width: 100rpx;
|
||
height: 25rpx;
|
||
font-size: 24.37rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
margin: auto ;
|
||
display: block;
|
||
">商品详情</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view style="overflow-x: hidden;width: 100%; margin-top: 33rpx;background-color: #ffffff;">
|
||
<view v-for="(item,index) in SignProductList[0].detailsPic.split(',')" :key="index">
|
||
<image style="margin-top: 24rpx;display: block;" :src="bindIcon(item)"></image>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="but" @click="butOn()" style="position: fixed; bottom: 92rpx; left: 32rpx;">
|
||
<text>立即兑换</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
<!-- 弹起 -->
|
||
<uni-popup ref="popup" border-radius="32rpx 32rpx 0 0" background-color="#ffffff">
|
||
|
||
<view style="position:absolute; right: 32rpx; vertical-align:middle; z-index: 10;">
|
||
<image @click="clone()" style="width: 32rpx;height: 32rpx;" src="../../static/images/sign/clone.png">
|
||
</image>
|
||
</view>
|
||
|
||
<view class="uni-popup-view">
|
||
<view class="uni-top">
|
||
<text class="uni-top-text">确认兑换</text>
|
||
</view>
|
||
|
||
|
||
<view v-if="queryParams != null" style="margin-top: 57rpx;margin-left: 32rpx;" @click="handerGoTo()">
|
||
<view>
|
||
<text class="textname">
|
||
{{queryParams.name}}<text class="textphone">{{queryParams.phone}}</text>
|
||
</text>
|
||
<image style="width: 14rpx;height: 23rpx;" class="icons" src="../../static/images/sign/rig.png">
|
||
</image>
|
||
<text class="textaddress">{{queryParams.address}}{{queryParams.detailedAddress}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else style="margin-top: 73rpx;margin-left: 32rpx;" @click="handerGoTo()">
|
||
<view>
|
||
<text class="textname">
|
||
请先添加收货信息
|
||
</text>
|
||
<image style="width: 14rpx;height: 23rpx;" class="icons1" src="../../static/images/sign/rig.png">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
<view class="boxconte">
|
||
<view style="display: flex;">
|
||
<view>
|
||
<image :src="bindIcon(SignProductList[0].coverPic)" class="boximage"></image>
|
||
</view>
|
||
<view>
|
||
<text class="boxtext">
|
||
{{SignProductList[0].title}}
|
||
</text>
|
||
|
||
<view class="boxbottom-image">
|
||
<image class="right-image" src="../../static/images/sign/one.png"></image>
|
||
<text>{{SignProductList[0].goldCoin}}</text>
|
||
|
||
|
||
<view class="right-rigth">
|
||
<view @click="rightfirstchild()" class="right-first-child">-</view>
|
||
<text class="right-text">{{sum}}</text>
|
||
<view @click="rightlastchild()" class="right-last-child">+</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="boxbottom">
|
||
<input placeholder="留言备注 (限50字)" placeholder-class="inputcolor" v-model="inputvalue" />
|
||
</view>
|
||
|
||
|
||
<view @click="butOnBut()" class="but" style="position: absolute;bottom: 24rpx;left: 32rpx;right: 32rpx;">
|
||
<text>立即兑换</text>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</uni-popup>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
// import {
|
||
// idCard
|
||
// } from "uview-plus/libs/function/test";
|
||
import {
|
||
onMounted,
|
||
reactive,
|
||
ref,
|
||
toRefs,
|
||
getCurrentInstance
|
||
}
|
||
from "vue"
|
||
const popup = ref(null);
|
||
const images = ref("https://cbu01.alicdn.com/img/ibank/2018/374/990/9121099473_1558693147.jpg");
|
||
const inputvalue = ref("");
|
||
const IsShow = ref(false);
|
||
const sum = ref(1)
|
||
|
||
const dataProduct = reactive({
|
||
formProduct: {},
|
||
queryParamsProduct: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
coverPic: null,
|
||
title: null,
|
||
content: null,
|
||
substitutionRe: null,
|
||
inventory: null,
|
||
goldCoin: null,
|
||
detailsPic: null,
|
||
time: null,
|
||
isListing: null,
|
||
discount: null,
|
||
id: null
|
||
},
|
||
rulesProduct: {}
|
||
});
|
||
|
||
const {
|
||
queryParamsProduct,
|
||
formProduct,
|
||
rulesProduct
|
||
} = toRefs(dataProduct);
|
||
|
||
import {
|
||
listSignProduct,
|
||
getSignProduct,
|
||
delSignProduct,
|
||
addSignProduct,
|
||
updateSignProduct
|
||
} from "@/api/signln/SignProduct/SignProduct";
|
||
|
||
|
||
const SignProductList = ref();
|
||
//商品id
|
||
const productid = ref();
|
||
/** 查询商品列表 */
|
||
function getListProduct() {
|
||
|
||
queryParamsProduct.value.id = productid.value;
|
||
listSignProduct(queryParamsProduct.value).then(response => {
|
||
SignProductList.value = response.rows;
|
||
console.log(SignProductList.value)
|
||
});
|
||
}
|
||
|
||
|
||
import config from '@/config';
|
||
|
||
function bindIcon(icon) {
|
||
return config.baseUrl + icon;
|
||
}
|
||
|
||
const arraddress = reactive([{
|
||
id: 1,
|
||
name: "1",
|
||
phone: "1",
|
||
address: "1"
|
||
}])
|
||
|
||
function butOn() {
|
||
popup.value.open('bottom');
|
||
}
|
||
|
||
function clone() {
|
||
popup.value.close()
|
||
}
|
||
//地址
|
||
function handerGoTo() {
|
||
uni.navigateTo({
|
||
url: './harvestaddress'
|
||
});
|
||
}
|
||
//减
|
||
function rightfirstchild() {
|
||
if (sum.value > 1) {
|
||
sum = sum.value--;
|
||
}
|
||
}
|
||
//加
|
||
function rightlastchild() {
|
||
sum = sum.value++;
|
||
}
|
||
|
||
import {
|
||
listSignExchange,
|
||
getSignExchange,
|
||
delSignExchange,
|
||
addSignExchange,
|
||
updateSignExchange
|
||
} from "@/api/signln/SignExchange/SignExchange";
|
||
|
||
|
||
//返回
|
||
function returnTo() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}
|
||
|
||
|
||
|
||
const arrImage = reactive([{
|
||
address: "https://img2.baidu.com/it/u=498628918,3669803110&fm=253&fmt=auto&app=138&f=JPEG?w=565&h=374"
|
||
},
|
||
{
|
||
address: "https://img1.cfw.cn/editors/attached/image/20231123/202311231332325212.jpg"
|
||
},
|
||
{
|
||
address: "http://t13.baidu.com/it/u=2134668050,4238032983&fm=224&app=112&f=JPEG?w=500&h=500"
|
||
},
|
||
{
|
||
address: "http://t13.baidu.com/it/u=2134668050,4238032983&fm=224&app=112&f=JPEG?w=500&h=500"
|
||
}
|
||
])
|
||
|
||
|
||
|
||
import {
|
||
useRouter,
|
||
useRoute
|
||
} from 'vue-router';
|
||
const route = useRoute();
|
||
|
||
|
||
|
||
|
||
//接受返回的addressid
|
||
onMounted(() => {
|
||
// console.log(route.query.addressid)
|
||
function getList() {
|
||
queryParams.id = route.query.addressid;
|
||
if (route.query.addressid != undefined) {
|
||
listSignAddressid(queryParams).then(response => {
|
||
queryParams = response;
|
||
// console.log(queryParams)
|
||
});
|
||
} else {
|
||
queryParams.inCommonUse = '1';
|
||
listSignAddressUser(queryParams).then(response => {
|
||
queryParams = response.rows[0];
|
||
// console.log(response)
|
||
// console.log(queryParams.name)
|
||
});
|
||
}
|
||
}
|
||
getList();
|
||
|
||
|
||
// console.log(route.query.productid)
|
||
productid.value = route.query.productid;
|
||
|
||
getListProduct();
|
||
|
||
});
|
||
|
||
import {
|
||
listSignAddress,
|
||
getSignAddress,
|
||
delSignAddress,
|
||
addSignAddress,
|
||
updateSignAddress,
|
||
listSignAddressUser,
|
||
listSignAddressid
|
||
} from "@/api/signln/SignAddress/SignAddress";
|
||
|
||
|
||
let queryParams = reactive({
|
||
id: null,
|
||
name: null,
|
||
phone: null,
|
||
address: null,
|
||
detailedAddress: null,
|
||
inCommonUse: null,
|
||
userId: null
|
||
})
|
||
|
||
//
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance();
|
||
//立即越换
|
||
function butOnBut() {
|
||
|
||
// SignProductList._rawValue[0].id
|
||
// queryParams.id
|
||
// sum.value
|
||
// inputvalue.value
|
||
if (queryParams == undefined) {
|
||
proxy.$modal.msgError("地址不能为空");
|
||
return;
|
||
}
|
||
var addExchange = {
|
||
productId: SignProductList._rawValue[0].id,
|
||
addressId: queryParams.id,
|
||
remark: inputvalue.value,
|
||
quantity: sum.value
|
||
}
|
||
console.log(addExchange)
|
||
addSignExchange(addExchange).then(response => {
|
||
console.log(response);
|
||
if (response == 1) {
|
||
uni.navigateTo({
|
||
url: './successfulexchange'
|
||
});
|
||
}
|
||
if (response == 0) {
|
||
proxy.$modal.msgError("您的校园币不足");
|
||
}
|
||
if (response == 3) {
|
||
proxy.$modal.msgError("库存不足");
|
||
}
|
||
});
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* :deep(.uni-popup .uni-popup__wrapper){
|
||
background-color:red !important;
|
||
} */
|
||
|
||
.uninavbar {
|
||
position: absolute;
|
||
z-index: 9999;
|
||
top: 110rpx;
|
||
left: 32rpx;
|
||
}
|
||
|
||
.uninavbar>image {
|
||
width: 31rpx;
|
||
height: 44rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
view>image {
|
||
width: 750rpx;
|
||
height: 500rpx;
|
||
}
|
||
|
||
.but {
|
||
width: 686rpx;
|
||
height: 88rpx;
|
||
border-radius: 44rpx 44rpx 44rpx 44rpx;
|
||
background: linear-gradient(-90deg, #c9f6f5, #f7f8e3);
|
||
}
|
||
|
||
.but>text,
|
||
.buts>text {
|
||
font-weight: Regular;
|
||
width: 131rpx;
|
||
height: 33rpx;
|
||
font-size: 32rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
display: block;
|
||
margin: auto;
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
.bot-bot {
|
||
width: 750rpx;
|
||
height: 1000rpx;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
/* background: #ffffff; */
|
||
background-color: #000000;
|
||
position: absolute;
|
||
bottom: 40rpx;
|
||
left: 0rpx;
|
||
transition: bottom 5s;
|
||
/* Slide in effect */
|
||
}
|
||
|
||
.buts {
|
||
position: absolute;
|
||
bottom: 91rpx;
|
||
}
|
||
|
||
.uni-popup-view {
|
||
position: relative;
|
||
left: 0rpx;
|
||
height: 70vh;
|
||
width: 750rpx;
|
||
margin-top: 31rpx;
|
||
}
|
||
|
||
.uni-top {
|
||
display: flex;
|
||
}
|
||
|
||
.uni-top-text {
|
||
font-weight: Regular;
|
||
width: 124rpx;
|
||
/* height: 31rpx; */
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
display: block;
|
||
margin: auto;
|
||
line-height: 31rpx;
|
||
}
|
||
|
||
.textname,
|
||
.textphone,
|
||
.textaddress {
|
||
|
||
font-weight: Regular;
|
||
width: 48rpx;
|
||
height: 29rpx;
|
||
font-size: 24rpx;
|
||
line-height: 29rpx;
|
||
text-align: left;
|
||
color: #999999;
|
||
}
|
||
|
||
.icons {
|
||
float: right;
|
||
margin-top: 19rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.icons1 {
|
||
float: right;
|
||
margin-top: 1rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.textphone {
|
||
margin-left: 26rpx;
|
||
}
|
||
|
||
.textaddress {
|
||
display: block;
|
||
width: 501rpx;
|
||
/* height: 24rpx; */
|
||
line-height: 29rpx;
|
||
overflow: hidden;
|
||
word-wrap: break-word;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
}
|
||
|
||
.boxconte {
|
||
width: 686rpx;
|
||
height: 198rpx;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 0 10rpx #ffffff;
|
||
margin-left: 32rpx;
|
||
margin-top: 24rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.boximage {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
background: #999999;
|
||
margin: 24rpx 0rpx 24rpx 24rpx;
|
||
}
|
||
|
||
.boxtext {
|
||
font-weight: Regular;
|
||
width: 459rpx;
|
||
/* height: 44rpx; */
|
||
line-height: 26rpx;
|
||
font-size: 20rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
margin: 24rpx 29rpx 0 29rpx;
|
||
|
||
overflow: hidden;
|
||
word-wrap: break-word;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
|
||
/* display: block; */
|
||
|
||
}
|
||
|
||
.boxbottom-image {
|
||
margin-left: 24rpx;
|
||
margin-top: 80rpx;
|
||
}
|
||
|
||
.boxbottom-image>text {
|
||
font-weight: Regular;
|
||
width: 34rpx;
|
||
height: 17rpx;
|
||
font-size: 20rpx;
|
||
text-align: left;
|
||
color: #F99B46;
|
||
margin-left: 10rpx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.boxbottom {
|
||
width: 686rpx;
|
||
height: 88rpx;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
background: #f6f6f6;
|
||
margin: 32rpx
|
||
}
|
||
|
||
.boxbottom>input {
|
||
width: 686rpx;
|
||
height: 88rpx;
|
||
padding-left: 25rpx;
|
||
}
|
||
|
||
.right-image {
|
||
width: 25rpx;
|
||
height: 26rpx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
:deep(.inputcolor) {
|
||
font-weight: Regular;
|
||
width: 207rpx;
|
||
/* height: 88rpx; */
|
||
font-size: 24.37rpx;
|
||
text-align: left;
|
||
color: #999999;
|
||
}
|
||
|
||
.right-rigth {
|
||
float: right;
|
||
margin-right: 24rpx;
|
||
display: flex;
|
||
|
||
}
|
||
|
||
.right-first-child {
|
||
width: 33.94rpx;
|
||
height: 33.94rpx;
|
||
/* background: #ffffff; */
|
||
background-color: #999999;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
border-radius: 32rpx;
|
||
|
||
color: #F6F6F6;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.right-text {
|
||
vertical-align: middle;
|
||
font-weight: Regular;
|
||
width: 7rpx;
|
||
height: 16rpx;
|
||
font-size: 20rpx;
|
||
color: #000000;
|
||
margin-left: 24rpx;
|
||
margin-right: 24rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.right-last-child {
|
||
vertical-align: middle;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: #f99b46;
|
||
border-radius: 32rpx;
|
||
|
||
color: #F6F6F6;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.nv-image {
|
||
width: 37rpx;
|
||
height: 38rpx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.nv-text {
|
||
font-weight: Regular;
|
||
width: 60rpx;
|
||
height: 30rpx;
|
||
font-size: 36rpx;
|
||
text-align: left;
|
||
color: #F99B46;
|
||
margin-left: 12rpx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.nv-ku {
|
||
font-weight: Regular;
|
||
/* width: 94rpx; */
|
||
height: 30rpx;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #999999;
|
||
vertical-align: middle;
|
||
float: right;
|
||
margin-right: 1rpx;
|
||
}
|
||
|
||
.nv-con {
|
||
font-weight: Regular;
|
||
width: 659rpx;
|
||
height: 66rpx;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
margin-top: 27rpx;
|
||
line-height: 30rpx;
|
||
overflow: hidden;
|
||
word-wrap: break-word;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
.nv-r {
|
||
font-weight: Regular;
|
||
width: 118rpx;
|
||
height: 30rpx;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
}
|
||
|
||
p {
|
||
color: #000000;
|
||
font-weight: Regular;
|
||
font-face: Microsoft YaHei;
|
||
font-size: 24rpx;
|
||
text-align: left;
|
||
line-height: 36rpx;
|
||
}
|
||
</style> |