front-end/hdApp/src/admin/goodsManage/goods-name.vue

<template>
	<div class="app-content">
		<!-- 商品 -->
		<div class="prompt-text">客户想买此商品，但没价格，请设置</div>
		<div class="img-wrap">
			<img class="goods-img" :src="data.imgUrl" mode="widthFix" alt="商品图片" />
		</div>
		<!-- 信息 -->
		<div class="input-line-wrap">
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">名称</div>
				<input placeholder-class="phcolor" v-model="form.name" class="tui-input" name="name" placeholder="请输入" type="text" />
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">价格</div>
				<input placeholder-class="phcolor" v-model="form.price" class="tui-input" name="price" placeholder="请输入" maxlength="50" type="number" />
				<div class="tui-prompt">元</div>
			</tui-list-cell>
		</div>
		<!-- button -->
		<button class="admin-button-com blue big confirm-btn" @click="confirmFn">确定</button>
	</div>
</template>

<script>
import TuiListCell from '@/components/plugin/list-cell'
// api
import { getDetB, picRemark } from '@/api/img-store'
export default {
	name: 'goods-name-setting',
	components: {
		TuiListCell
	},
	data() {
		return {
			data: {},
			form: {
				picIdList: [],
				price: 0,
				name: '',
				categoryIdList: []
			}
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this._getDet()
		},
		_getDet() {
			getDetB({ id: this.option.id }).then(res => {
				if (this.$util.isEmpty(res.data)) return
				this.data = res.data
				Object.keys(this.form).forEach((i, index) => {
					this.form[i] = res.data[i]
				})
				this.form.picIdList = [res.data.id]
				console.log(this.form)
			})
		},
		confirmFn() {
			picRemark(this.form).then(res => {
				this.$msg('修改成功！')
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.prompt-text {
		color: $fontColor2;
		font-size: 32px;
		padding: 36px 0;
		text-align: center;
	}
	.img-wrap {
		width: 80%;
		background-color: #fff;
		margin: 0 auto 54px;
		padding: 20px;
		.goods-img {
			width: 100%;
		}
	}
	.confirm-btn {
		width: calc(100% - 60px);
		margin: 60px 30px 0;
	}
</style>